@vue-flow/background - npm Package Compare versions

Comparing version 1.0.5 to 1.1.0

./dist/vue-flow-background.js

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

dist/types.d.ts

@@ -6,8 +6,10 @@ export declare enum BackgroundVariant {
 export interface BackgroundProps {
+  id?: string
   /** The background pattern variant, {@link BackgroundVariant} */
   variant?: BackgroundVariant
   /** Background pattern gap */
-  gap?: number
+  gap?: number | number[]
   /** Background pattern size */
   size?: number
+  lineWidth?: number
   /** Background pattern color */
@@ -25,2 +27,4 @@ patternColor?: string
   y?: number
+  /** Background offset */
+  offset?: number
 }

dist/vue-flow-background.iife.js

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

dist/vue-flow-background.js

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

package.json

 {
   "name": "@vue-flow/background",
-  "version": "1.0.5",
+  "version": "1.1.0",
   "private": false,
@@ -30,7 +30,7 @@ "license": "MIT",
     "vue": "^3.2.25",
-    "vue-tsc": "^1.1.5",
-    "@vue-flow/core": "1.15.2",
+    "vue-tsc": "^1.2.0",
+    "@tooling/eslint-config": "0.0.0",
+    "@tooling/tsconfig": "0.0.0",
     "@tooling/vite-config": "0.0.0",
-    "@tooling/tsconfig": "0.0.0",
-    "@tooling/eslint-config": "0.0.0"
+    "@vue-flow/core": "1.17.0"
   },
@@ -37,0 +37,0 @@ "publishConfig": {

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

16988

increased by17.7%

Number of package files

11

increased by10%

Lines of code

220

increased by19.57%

No dependency changes