@vue-flow/background - npm Package Compare versions

Comparing version 1.1.0 to 1.2.0

./dist/vue-flow-background.js

@@ -1,1 +0,1 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("vue"),m=require("@vue-flow/core");var n=(t=>(t.Lines="lines",t.Dots="dots",t))(n||{});const s=function({dimensions:t,size:a,color:c}){return e.h("path",{stroke:c,"stroke-width":a,d:`M${t[0]/2} 0 V${t[1]} M0 ${t[1]/2} H${t[0]}`})},h=function({radius:t,color:a}){return e.h("circle",{cx:t,cy:t,r:t,fill:a})};n.Lines+"",n.Dots+"";const v=["id","x","y","width","height","patternTransform"],k={key:2,height:"100",width:"100"},y=["fill"],w=["x","y","fill"],$={name:"Background",compatConfig:{MODE:3}},z=e.defineComponent({...$,props:{id:null,variant:{default:"dots"},gap:{default:10},size:{default:1},lineWidth:{default:1},patternColor:null,bgColor:null,height:{default:100},width:{default:100},x:{default:0},y:{default:0},offset:{default:2}},setup(t){const a={[n.Dots]:"#81818a",[n.Lines]:"#eee"},{id:c,viewport:r}=m.useVueFlow(),f=e.computed(()=>Array.isArray(t.gap)?t.gap:[t.gap,t.gap]),o=e.computed(()=>{const l=[f.value[0]*r.value.zoom||1,f.value[1]*r.value.zoom||1],i=t.size*r.value.zoom,g=t.variant===n.Dots?[i/t.offset,i/t.offset]:[l[0]/t.offset,l[1]/t.offset];return{scaledGap:l,offset:g,size:i}}),u=e.computed(()=>`pattern-${c}${t.id?`-${t.id}`:""}`),d=e.computed(()=>t.patternColor||a[t.variant||n.Dots]);return(l,i)=>(e.openBlock(),e.createElementBlock("svg",{class:"vue-flow__background vue-flow__container",style:e.normalizeStyle({height:`${t.height>100?100:t.height}%`,width:`${t.width>100?100:t.width}%`})},[e.renderSlot(l.$slots,"pattern-container",{id:e.unref(u)},()=>[e.createElementVNode("pattern",{id:e.unref(u),x:e.unref(r).x%e.unref(o).scaledGap[0],y:e.unref(r).y%e.unref(o).scaledGap[1],width:e.unref(o).scaledGap[0],height:e.unref(o).scaledGap[1],patternTransform:`translate(-${e.unref(o).offset[0]},-${e.unref(o).offset[1]})`,patternUnits:"userSpaceOnUse"},[e.renderSlot(l.$slots,"pattern",{},()=>[t.variant===e.unref(n).Lines?(e.openBlock(),e.createBlock(e.unref(s),{key:0,size:t.lineWidth,color:e.unref(d),dimensions:e.unref(o).scaledGap},null,8,["size","color","dimensions"])):t.variant===e.unref(n).Dots?(e.openBlock(),e.createBlock(e.unref(h),{key:1,color:e.unref(d),radius:e.unref(o).size/t.offset},null,8,["color","radius"])):e.createCommentVNode("",!0),t.bgColor?(e.openBlock(),e.createElementBlock("svg",k,[e.createElementVNode("rect",{width:"100%",height:"100%",fill:t.bgColor},null,8,y)])):e.createCommentVNode("",!0)])],8,v)]),e.createElementVNode("rect",{x:t.x,y:t.y,width:"100%",height:"100%",fill:`url(#${e.unref(u)})`},null,8,w),e.renderSlot(l.$slots,"default",{id:e.unref(u)})],4))}});exports.Background=z;exports.BackgroundVariant=n;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("vue"),k=require("@vue-flow/core");var n=(t=>(t.Lines="lines",t.Dots="dots",t))(n||{});const h=function({dimensions:t,size:l,color:u}){return e.h("path",{stroke:u,"stroke-width":l,d:`M${t[0]/2} 0 V${t[1]} M0 ${t[1]/2} H${t[0]}`})},g=function({radius:t,color:l}){return e.h("circle",{cx:t,cy:t,r:t,fill:l})};n.Lines+"",n.Dots+"";const v=["id","x","y","width","height","patternTransform"],y={key:2,height:"100",width:"100"},w=["fill"],$=["x","y","fill"],z={name:"Background",compatConfig:{MODE:3}},C=e.defineComponent({...z,props:{id:null,variant:{default:n.Dots},gap:{default:20},size:{default:1},lineWidth:{default:1},patternColor:null,bgColor:null,height:{default:100},width:{default:100},x:{default:0},y:{default:0},offset:{default:2}},setup(t){const l={[n.Dots]:"#81818a",[n.Lines]:"#eee"},{id:u,viewport:a}=k.useVueFlow(),o=e.computed(()=>{const[r,s]=Array.isArray(t.gap)?t.gap:[t.gap,t.gap],c=[r*a.value.zoom||1,s*a.value.zoom||1],f=t.size*a.value.zoom,m=t.variant===n.Dots?[f/t.offset,f/t.offset]:[c[0]/t.offset,c[1]/t.offset];return{scaledGap:c,offset:m,size:f}}),i=e.computed(()=>`pattern-${u}${t.id?`-${t.id}`:""}`),d=e.computed(()=>t.patternColor||l[t.variant||n.Dots]);return(r,s)=>(e.openBlock(),e.createElementBlock("svg",{class:"vue-flow__background vue-flow__container",style:e.normalizeStyle({height:`${t.height>100?100:t.height}%`,width:`${t.width>100?100:t.width}%`})},[e.renderSlot(r.$slots,"pattern-container",{id:e.unref(i)},()=>[e.createElementVNode("pattern",{id:e.unref(i),x:e.unref(a).x%e.unref(o).scaledGap[0],y:e.unref(a).y%e.unref(o).scaledGap[1],width:e.unref(o).scaledGap[0],height:e.unref(o).scaledGap[1],patternTransform:`translate(-${e.unref(o).offset[0]},-${e.unref(o).offset[1]})`,patternUnits:"userSpaceOnUse"},[e.renderSlot(r.$slots,"pattern",{},()=>[t.variant===e.unref(n).Lines?(e.openBlock(),e.createBlock(e.unref(h),{key:0,size:t.lineWidth,color:e.unref(d),dimensions:e.unref(o).scaledGap},null,8,["size","color","dimensions"])):t.variant===e.unref(n).Dots?(e.openBlock(),e.createBlock(e.unref(g),{key:1,color:e.unref(d),radius:e.unref(o).size/t.offset},null,8,["color","radius"])):e.createCommentVNode("",!0),t.bgColor?(e.openBlock(),e.createElementBlock("svg",y,[e.createElementVNode("rect",{width:"100%",height:"100%",fill:t.bgColor},null,8,w)])):e.createCommentVNode("",!0)])],8,v)]),e.createElementVNode("rect",{x:t.x,y:t.y,width:"100%",height:"100%",fill:`url(#${e.unref(i)})`},null,8,$),e.renderSlot(r.$slots,"default",{id:e.unref(i)})],4))}});exports.Background=C;exports.BackgroundVariant=n;

dist/vue-flow-background.iife.js

@@ -1,1 +0,1 @@
-var VueFlowBackground=function(i,t,m){"use strict";var n=(e=>(e.Lines="lines",e.Dots="dots",e))(n||{});const s=function({dimensions:e,size:a,color:d}){return t.h("path",{stroke:d,"stroke-width":a,d:`M${e[0]/2} 0 V${e[1]} M0 ${e[1]/2} H${e[0]}`})},h=function({radius:e,color:a}){return t.h("circle",{cx:e,cy:e,r:e,fill:a})};n.Lines+"",n.Dots+"";const k=["id","x","y","width","height","patternTransform"],w={key:2,height:"100",width:"100"},y=["fill"],$=["x","y","fill"],C={name:"Background",compatConfig:{MODE:3}},z=t.defineComponent({...C,props:{id:null,variant:{default:"dots"},gap:{default:10},size:{default:1},lineWidth:{default:1},patternColor:null,bgColor:null,height:{default:100},width:{default:100},x:{default:0},y:{default:0},offset:{default:2}},setup(e){const a={[n.Dots]:"#81818a",[n.Lines]:"#eee"},{id:d,viewport:r}=m.useVueFlow(),u=t.computed(()=>Array.isArray(e.gap)?e.gap:[e.gap,e.gap]),o=t.computed(()=>{const l=[u.value[0]*r.value.zoom||1,u.value[1]*r.value.zoom||1],f=e.size*r.value.zoom,B=e.variant===n.Dots?[f/e.offset,f/e.offset]:[l[0]/e.offset,l[1]/e.offset];return{scaledGap:l,offset:B,size:f}}),c=t.computed(()=>`pattern-${d}${e.id?`-${e.id}`:""}`),g=t.computed(()=>e.patternColor||a[e.variant||n.Dots]);return(l,f)=>(t.openBlock(),t.createElementBlock("svg",{class:"vue-flow__background vue-flow__container",style:t.normalizeStyle({height:`${e.height>100?100:e.height}%`,width:`${e.width>100?100:e.width}%`})},[t.renderSlot(l.$slots,"pattern-container",{id:t.unref(c)},()=>[t.createElementVNode("pattern",{id:t.unref(c),x:t.unref(r).x%t.unref(o).scaledGap[0],y:t.unref(r).y%t.unref(o).scaledGap[1],width:t.unref(o).scaledGap[0],height:t.unref(o).scaledGap[1],patternTransform:`translate(-${t.unref(o).offset[0]},-${t.unref(o).offset[1]})`,patternUnits:"userSpaceOnUse"},[t.renderSlot(l.$slots,"pattern",{},()=>[e.variant===t.unref(n).Lines?(t.openBlock(),t.createBlock(t.unref(s),{key:0,size:e.lineWidth,color:t.unref(g),dimensions:t.unref(o).scaledGap},null,8,["size","color","dimensions"])):e.variant===t.unref(n).Dots?(t.openBlock(),t.createBlock(t.unref(h),{key:1,color:t.unref(g),radius:t.unref(o).size/e.offset},null,8,["color","radius"])):t.createCommentVNode("",!0),e.bgColor?(t.openBlock(),t.createElementBlock("svg",w,[t.createElementVNode("rect",{width:"100%",height:"100%",fill:e.bgColor},null,8,y)])):t.createCommentVNode("",!0)])],8,k)]),t.createElementVNode("rect",{x:e.x,y:e.y,width:"100%",height:"100%",fill:`url(#${t.unref(c)})`},null,8,$),t.renderSlot(l.$slots,"default",{id:t.unref(c)})],4))}});return i.Background=z,i.BackgroundVariant=n,Object.defineProperty(i,Symbol.toStringTag,{value:"Module"}),i}({},Vue,VueFlowCore);
+var VueFlowBackground=function(i,t,k){"use strict";var n=(e=>(e.Lines="lines",e.Dots="dots",e))(n||{});const h=function({dimensions:e,size:l,color:f}){return t.h("path",{stroke:f,"stroke-width":l,d:`M${e[0]/2} 0 V${e[1]} M0 ${e[1]/2} H${e[0]}`})},u=function({radius:e,color:l}){return t.h("circle",{cx:e,cy:e,r:e,fill:l})};n.Lines+"",n.Dots+"";const w=["id","x","y","width","height","patternTransform"],y={key:2,height:"100",width:"100"},$=["fill"],C=["x","y","fill"],z={name:"Background",compatConfig:{MODE:3}},B=t.defineComponent({...z,props:{id:null,variant:{default:n.Dots},gap:{default:20},size:{default:1},lineWidth:{default:1},patternColor:null,bgColor:null,height:{default:100},width:{default:100},x:{default:0},y:{default:0},offset:{default:2}},setup(e){const l={[n.Dots]:"#81818a",[n.Lines]:"#eee"},{id:f,viewport:a}=k.useVueFlow(),o=t.computed(()=>{const[r,m]=Array.isArray(e.gap)?e.gap:[e.gap,e.gap],d=[r*a.value.zoom||1,m*a.value.zoom||1],s=e.size*a.value.zoom,V=e.variant===n.Dots?[s/e.offset,s/e.offset]:[d[0]/e.offset,d[1]/e.offset];return{scaledGap:d,offset:V,size:s}}),c=t.computed(()=>`pattern-${f}${e.id?`-${e.id}`:""}`),g=t.computed(()=>e.patternColor||l[e.variant||n.Dots]);return(r,m)=>(t.openBlock(),t.createElementBlock("svg",{class:"vue-flow__background vue-flow__container",style:t.normalizeStyle({height:`${e.height>100?100:e.height}%`,width:`${e.width>100?100:e.width}%`})},[t.renderSlot(r.$slots,"pattern-container",{id:t.unref(c)},()=>[t.createElementVNode("pattern",{id:t.unref(c),x:t.unref(a).x%t.unref(o).scaledGap[0],y:t.unref(a).y%t.unref(o).scaledGap[1],width:t.unref(o).scaledGap[0],height:t.unref(o).scaledGap[1],patternTransform:`translate(-${t.unref(o).offset[0]},-${t.unref(o).offset[1]})`,patternUnits:"userSpaceOnUse"},[t.renderSlot(r.$slots,"pattern",{},()=>[e.variant===t.unref(n).Lines?(t.openBlock(),t.createBlock(t.unref(h),{key:0,size:e.lineWidth,color:t.unref(g),dimensions:t.unref(o).scaledGap},null,8,["size","color","dimensions"])):e.variant===t.unref(n).Dots?(t.openBlock(),t.createBlock(t.unref(u),{key:1,color:t.unref(g),radius:t.unref(o).size/e.offset},null,8,["color","radius"])):t.createCommentVNode("",!0),e.bgColor?(t.openBlock(),t.createElementBlock("svg",y,[t.createElementVNode("rect",{width:"100%",height:"100%",fill:e.bgColor},null,8,$)])):t.createCommentVNode("",!0)])],8,w)]),t.createElementVNode("rect",{x:e.x,y:e.y,width:"100%",height:"100%",fill:`url(#${t.unref(c)})`},null,8,C),t.renderSlot(r.$slots,"default",{id:t.unref(c)})],4))}});return i.Background=B,i.BackgroundVariant=n,Object.defineProperty(i,Symbol.toStringTag,{value:"Module"}),i}({},Vue,VueFlowCore);

dist/vue-flow-background.js

@@ -1,1 +0,1 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("vue"),m=require("@vue-flow/core");var n=(t=>(t.Lines="lines",t.Dots="dots",t))(n||{});const s=function({dimensions:t,size:a,color:c}){return e.h("path",{stroke:c,"stroke-width":a,d:`M${t[0]/2} 0 V${t[1]} M0 ${t[1]/2} H${t[0]}`})},h=function({radius:t,color:a}){return e.h("circle",{cx:t,cy:t,r:t,fill:a})};n.Lines+"",n.Dots+"";const v=["id","x","y","width","height","patternTransform"],k={key:2,height:"100",width:"100"},y=["fill"],w=["x","y","fill"],$={name:"Background",compatConfig:{MODE:3}},z=e.defineComponent({...$,props:{id:null,variant:{default:"dots"},gap:{default:10},size:{default:1},lineWidth:{default:1},patternColor:null,bgColor:null,height:{default:100},width:{default:100},x:{default:0},y:{default:0},offset:{default:2}},setup(t){const a={[n.Dots]:"#81818a",[n.Lines]:"#eee"},{id:c,viewport:r}=m.useVueFlow(),f=e.computed(()=>Array.isArray(t.gap)?t.gap:[t.gap,t.gap]),o=e.computed(()=>{const l=[f.value[0]*r.value.zoom||1,f.value[1]*r.value.zoom||1],i=t.size*r.value.zoom,g=t.variant===n.Dots?[i/t.offset,i/t.offset]:[l[0]/t.offset,l[1]/t.offset];return{scaledGap:l,offset:g,size:i}}),u=e.computed(()=>`pattern-${c}${t.id?`-${t.id}`:""}`),d=e.computed(()=>t.patternColor||a[t.variant||n.Dots]);return(l,i)=>(e.openBlock(),e.createElementBlock("svg",{class:"vue-flow__background vue-flow__container",style:e.normalizeStyle({height:`${t.height>100?100:t.height}%`,width:`${t.width>100?100:t.width}%`})},[e.renderSlot(l.$slots,"pattern-container",{id:e.unref(u)},()=>[e.createElementVNode("pattern",{id:e.unref(u),x:e.unref(r).x%e.unref(o).scaledGap[0],y:e.unref(r).y%e.unref(o).scaledGap[1],width:e.unref(o).scaledGap[0],height:e.unref(o).scaledGap[1],patternTransform:`translate(-${e.unref(o).offset[0]},-${e.unref(o).offset[1]})`,patternUnits:"userSpaceOnUse"},[e.renderSlot(l.$slots,"pattern",{},()=>[t.variant===e.unref(n).Lines?(e.openBlock(),e.createBlock(e.unref(s),{key:0,size:t.lineWidth,color:e.unref(d),dimensions:e.unref(o).scaledGap},null,8,["size","color","dimensions"])):t.variant===e.unref(n).Dots?(e.openBlock(),e.createBlock(e.unref(h),{key:1,color:e.unref(d),radius:e.unref(o).size/t.offset},null,8,["color","radius"])):e.createCommentVNode("",!0),t.bgColor?(e.openBlock(),e.createElementBlock("svg",k,[e.createElementVNode("rect",{width:"100%",height:"100%",fill:t.bgColor},null,8,y)])):e.createCommentVNode("",!0)])],8,v)]),e.createElementVNode("rect",{x:t.x,y:t.y,width:"100%",height:"100%",fill:`url(#${e.unref(u)})`},null,8,w),e.renderSlot(l.$slots,"default",{id:e.unref(u)})],4))}});exports.Background=z;exports.BackgroundVariant=n;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("vue"),k=require("@vue-flow/core");var n=(t=>(t.Lines="lines",t.Dots="dots",t))(n||{});const h=function({dimensions:t,size:l,color:u}){return e.h("path",{stroke:u,"stroke-width":l,d:`M${t[0]/2} 0 V${t[1]} M0 ${t[1]/2} H${t[0]}`})},g=function({radius:t,color:l}){return e.h("circle",{cx:t,cy:t,r:t,fill:l})};n.Lines+"",n.Dots+"";const v=["id","x","y","width","height","patternTransform"],y={key:2,height:"100",width:"100"},w=["fill"],$=["x","y","fill"],z={name:"Background",compatConfig:{MODE:3}},C=e.defineComponent({...z,props:{id:null,variant:{default:n.Dots},gap:{default:20},size:{default:1},lineWidth:{default:1},patternColor:null,bgColor:null,height:{default:100},width:{default:100},x:{default:0},y:{default:0},offset:{default:2}},setup(t){const l={[n.Dots]:"#81818a",[n.Lines]:"#eee"},{id:u,viewport:a}=k.useVueFlow(),o=e.computed(()=>{const[r,s]=Array.isArray(t.gap)?t.gap:[t.gap,t.gap],c=[r*a.value.zoom||1,s*a.value.zoom||1],f=t.size*a.value.zoom,m=t.variant===n.Dots?[f/t.offset,f/t.offset]:[c[0]/t.offset,c[1]/t.offset];return{scaledGap:c,offset:m,size:f}}),i=e.computed(()=>`pattern-${u}${t.id?`-${t.id}`:""}`),d=e.computed(()=>t.patternColor||l[t.variant||n.Dots]);return(r,s)=>(e.openBlock(),e.createElementBlock("svg",{class:"vue-flow__background vue-flow__container",style:e.normalizeStyle({height:`${t.height>100?100:t.height}%`,width:`${t.width>100?100:t.width}%`})},[e.renderSlot(r.$slots,"pattern-container",{id:e.unref(i)},()=>[e.createElementVNode("pattern",{id:e.unref(i),x:e.unref(a).x%e.unref(o).scaledGap[0],y:e.unref(a).y%e.unref(o).scaledGap[1],width:e.unref(o).scaledGap[0],height:e.unref(o).scaledGap[1],patternTransform:`translate(-${e.unref(o).offset[0]},-${e.unref(o).offset[1]})`,patternUnits:"userSpaceOnUse"},[e.renderSlot(r.$slots,"pattern",{},()=>[t.variant===e.unref(n).Lines?(e.openBlock(),e.createBlock(e.unref(h),{key:0,size:t.lineWidth,color:e.unref(d),dimensions:e.unref(o).scaledGap},null,8,["size","color","dimensions"])):t.variant===e.unref(n).Dots?(e.openBlock(),e.createBlock(e.unref(g),{key:1,color:e.unref(d),radius:e.unref(o).size/t.offset},null,8,["color","radius"])):e.createCommentVNode("",!0),t.bgColor?(e.openBlock(),e.createElementBlock("svg",y,[e.createElementVNode("rect",{width:"100%",height:"100%",fill:t.bgColor},null,8,w)])):e.createCommentVNode("",!0)])],8,v)]),e.createElementVNode("rect",{x:t.x,y:t.y,width:"100%",height:"100%",fill:`url(#${e.unref(i)})`},null,8,$),e.renderSlot(r.$slots,"default",{id:e.unref(i)})],4))}});exports.Background=C;exports.BackgroundVariant=n;

package.json

 {
   "name": "@vue-flow/background",
-  "version": "1.1.0",
+  "version": "1.2.0",
   "private": false,
@@ -15,2 +15,18 @@ "license": "MIT",
   },
+  "keywords": [
+    "vue",
+    "flow",
+    "diagram",
+    "editor",
+    "graph",
+    "node",
+    "link",
+    "port",
+    "slot",
+    "vue3",
+    "composition-api",
+    "vue-flow",
+    "vueflow",
+    "typescript"
+  ],
   "main": "./dist/vue-flow-background.js",
@@ -21,4 +37,12 @@ "module": "./dist/vue-flow-background.mjs",
   "jsdelivr": "./dist/vue-flow-background.iife.js",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/vue-flow-background.mjs",
+      "require": "./dist/vue-flow-background.js"
+    }
+  },
   "files": [
-    "dist"
+    "dist",
+    "*.d.ts"
   ],
@@ -34,5 +58,5 @@ "sideEffects": false,
     "@tooling/eslint-config": "0.0.0",
-    "@tooling/tsconfig": "0.0.0",
     "@tooling/vite-config": "0.0.0",
-    "@vue-flow/core": "1.17.0"
+    "@vue-flow/core": "1.19.0",
+    "@tooling/tsconfig": "0.0.0"
   },
@@ -44,5 +68,6 @@ "publishConfig": {
   "scripts": {
+    "dev": "vite build --watch",
     "build": "vite build",
     "types": "vue-tsc --declaration --emitDeclarationOnly && pnpm lint:dist",
-    "lint": "eslint --ext \".js,.jsx,.ts,.tsx\" --fix .",
+    "lint": "eslint --ext .js,.ts,.vue ./",
     "lint:dist": "eslint --ext \".ts,.tsx\" -c .eslintrc.js --fix --ignore-pattern !**/*  ./dist",
@@ -49,0 +74,0 @@ "test": "exit 0"

No alert changes

Improved metrics

Total package byte prevSize

17295

increased by1.81%

No dependency changes