Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More
Socket
Sign inDemoInstall
Socket

@vue-flow/background

Package Overview
Dependencies
Maintainers
1
Versions
9
Alerts
File Explorer

Advanced tools

Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

@vue-flow/background - npm Package Compare versions

Comparing version 1.0.0 to 1.0.1

2

dist/vue-flow-background.iife.js

@@ -1,1 +0,1 @@

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

@@ -1,1 +0,1 @@

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

@@ -35,3 +35,3 @@ "license": "MIT",

"vue-tsc": "^1.0.11",
"@vue-flow/core": "1.6.0"
"@vue-flow/core": "1.9.3"
},

@@ -38,0 +38,0 @@ "publishConfig": {

@@ -19,3 +19,2 @@ # Vue Flow: Background Component

```vue
<script setup>

@@ -22,0 +21,0 @@ import { VueFlow } from '@vue-flow/core'

Sorry, the diff of this file is not supported yet

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

Packages

npm

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc