@vue-flow/background - npm Package Compare versions

Comparing version 1.2.0 to 1.3.0

dist/Background.vue.d.ts

@@ -1,5 +0,46 @@
-import type { BackgroundProps } from './types'
+import type { BackgroundVariant } from './types'
+
 declare const _default: __VLS_WithTemplateSlots<
   import('vue').DefineComponent<
-    __VLS_TypePropsToRuntimeProps<BackgroundProps>,
+    {
+      id: {
+        type: import('vue').PropType<string>
+      }
+      variant: {
+        type: import('vue').PropType<BackgroundVariant | 'lines' | 'dots'>
+      }
+      gap: {
+        type: import('vue').PropType<number | number[]>
+      }
+      size: {
+        type: import('vue').PropType<number>
+      }
+      lineWidth: {
+        type: import('vue').PropType<number>
+      }
+      patternColor: {
+        type: import('vue').PropType<string>
+      }
+      color: {
+        type: import('vue').PropType<string>
+      }
+      bgColor: {
+        type: import('vue').PropType<string>
+      }
+      height: {
+        type: import('vue').PropType<number>
+      }
+      width: {
+        type: import('vue').PropType<number>
+      }
+      x: {
+        type: import('vue').PropType<number>
+      }
+      y: {
+        type: import('vue').PropType<number>
+      }
+      offset: {
+        type: import('vue').PropType<number>
+      }
+    },
     {},
@@ -14,23 +55,55 @@ unknown,
     import('vue').VNodeProps & import('vue').AllowedComponentProps & import('vue').ComponentCustomProps,
-    Readonly<import('vue').ExtractPropTypes<__VLS_TypePropsToRuntimeProps<BackgroundProps>>>,
+    Readonly<
+      import('vue').ExtractPropTypes<{
+        id: {
+          type: import('vue').PropType<string>
+        }
+        variant: {
+          type: import('vue').PropType<BackgroundVariant | 'lines' | 'dots'>
+        }
+        gap: {
+          type: import('vue').PropType<number | number[]>
+        }
+        size: {
+          type: import('vue').PropType<number>
+        }
+        lineWidth: {
+          type: import('vue').PropType<number>
+        }
+        patternColor: {
+          type: import('vue').PropType<string>
+        }
+        color: {
+          type: import('vue').PropType<string>
+        }
+        bgColor: {
+          type: import('vue').PropType<string>
+        }
+        height: {
+          type: import('vue').PropType<number>
+        }
+        width: {
+          type: import('vue').PropType<number>
+        }
+        x: {
+          type: import('vue').PropType<number>
+        }
+        y: {
+          type: import('vue').PropType<number>
+        }
+        offset: {
+          type: import('vue').PropType<number>
+        }
+      }>
+    >,
+    {},
     {}
   >,
   {
-    'pattern-container': (_: { id: string }) => any
-    'pattern': (_: {}) => any
-    'default': (_: { id: string }) => any
+    'pattern-container'?(_: { id: string }): any
+    pattern?(_: {}): any
+    default?(_: { id: string }): any
   }
 >
 export default _default
-type __VLS_NonUndefinedable<T> = T extends undefined ? never : T
-type __VLS_TypePropsToRuntimeProps<T> = {
-  [K in keyof T]-?: {} extends Pick<T, K>
-    ? {
-        type: import('vue').PropType<__VLS_NonUndefinedable<T[K]>>
-      }
-    : {
-        type: import('vue').PropType<T[K]>
-        required: true
-      }
-}
 type __VLS_WithTemplateSlots<T, S> = T & {
@@ -37,0 +110,0 @@ new (): {

dist/patterns.d.ts

 import type { FunctionalComponent } from 'vue'
+import type { BackgroundVariant } from './types'
+
 interface LinePatternProps {
@@ -14,5 +16,6 @@ dimensions: [number, number]
 export declare const Patterns: {
-  lines: FunctionalComponent<LinePatternProps, {}>
-  dots: FunctionalComponent<DotPatternProps, {}>
+  lines: FunctionalComponent<LinePatternProps, {}, any>
+  dots: FunctionalComponent<DotPatternProps, {}, any>
 }
+export declare const DefaultBgColors: Record<BackgroundVariant, string>
 export {}

dist/types.d.ts

@@ -0,1 +1,4 @@
+/**
+ * @deprecated - will be removed in the next major version. You can use simple string values for `variant` prop instead, i.e. `lines` or `dots`
+ */
 export declare enum BackgroundVariant {
@@ -5,6 +8,7 @@ Lines = 'lines',
 }
+export type BackgroundVariantType = Lowercase<keyof typeof BackgroundVariant>
 export interface BackgroundProps {
   id?: string
-  /** The background pattern variant, {@link BackgroundVariant} */
-  variant?: BackgroundVariant
+  /** The background pattern variant */
+  variant?: BackgroundVariant | BackgroundVariantType
   /** Background pattern gap */
@@ -15,9 +19,17 @@ gap?: number | number[]
   lineWidth?: number
+  /**
+   * @deprecated - will be removed in the next major version. Use `color` instead
+   * Background pattern color
+   */
+  patternColor?: string
   /** Background pattern color */
-  patternColor?: string
-  /** Background color */
+  color?: string
+  /**
+   * @deprecated - will be removed in the next major version. You can assign a bg color to `<VueFlow />` directly instead.
+   * Background color
+   */
   bgColor?: string
-  /** Background height */
+  /** @deprecated Background height */
   height?: number
-  /** Background width */
+  /** @deprecated Background width */
   width?: number
@@ -24,0 +36,0 @@ /** Background x-coordinate (offset x) */

dist/vue-flow-background.iife.js

@@ -1,1 +0,125 @@
-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);
+var VueFlowBackground = function(exports, vue, core) {
+  "use strict";
+  var BackgroundVariant = /* @__PURE__ */ ((BackgroundVariant2) => {
+    BackgroundVariant2["Lines"] = "lines";
+    BackgroundVariant2["Dots"] = "dots";
+    return BackgroundVariant2;
+  })(BackgroundVariant || {});
+  const LinePattern = function({ dimensions, size, color }) {
+    return vue.h("path", {
+      "stroke": color,
+      "stroke-width": size,
+      "d": `M${dimensions[0] / 2} 0 V${dimensions[1]} M0 ${dimensions[1] / 2} H${dimensions[0]}`
+    });
+  };
+  const DotPattern = function({ radius, color }) {
+    return vue.h("circle", { cx: radius, cy: radius, r: radius, fill: color });
+  };
+  ({
+    [BackgroundVariant.Lines]: LinePattern,
+    [BackgroundVariant.Dots]: DotPattern
+  });
+  const DefaultBgColors = {
+    [BackgroundVariant.Dots]: "#81818a",
+    [BackgroundVariant.Lines]: "#eee"
+  };
+  const _hoisted_1 = ["id", "x", "y", "width", "height", "patternTransform"];
+  const _hoisted_2 = {
+    key: 2,
+    height: "100",
+    width: "100"
+  };
+  const _hoisted_3 = ["fill"];
+  const _hoisted_4 = ["x", "y", "fill"];
+  const __default__ = {
+    name: "Background",
+    compatConfig: { MODE: 3 }
+  };
+  const _sfc_main = /* @__PURE__ */ vue.defineComponent({
+    ...__default__,
+    props: {
+      id: {},
+      variant: { default: () => BackgroundVariant.Dots },
+      gap: { default: 20 },
+      size: { default: 1 },
+      lineWidth: { default: 1 },
+      patternColor: {},
+      color: {},
+      bgColor: {},
+      height: { default: 100 },
+      width: { default: 100 },
+      x: { default: 0 },
+      y: { default: 0 },
+      offset: { default: 2 }
+    },
+    setup(__props) {
+      const { id: vueFlowId, viewport } = core.useVueFlow();
+      const background = vue.computed(() => {
+        const [gapX, gapY] = Array.isArray(__props.gap) ? __props.gap : [__props.gap, __props.gap];
+        const scaledGap = [gapX * viewport.value.zoom || 1, gapY * viewport.value.zoom || 1];
+        const scaledSize = __props.size * viewport.value.zoom;
+        const patternOffset = __props.variant === BackgroundVariant.Dots ? [scaledSize / __props.offset, scaledSize / __props.offset] : [scaledGap[0] / __props.offset, scaledGap[1] / __props.offset];
+        return {
+          scaledGap,
+          offset: patternOffset,
+          size: scaledSize
+        };
+      });
+      const patternId = vue.toRef(() => `pattern-${vueFlowId}${__props.id ? `-${__props.id}` : ""}`);
+      const patternColor = vue.toRef(() => __props.color || __props.patternColor || DefaultBgColors[__props.variant || BackgroundVariant.Dots]);
+      return (_ctx, _cache) => {
+        return vue.openBlock(), vue.createElementBlock("svg", {
+          class: "vue-flow__background vue-flow__container",
+          style: vue.normalizeStyle({
+            height: `${_ctx.height > 100 ? 100 : _ctx.height}%`,
+            width: `${_ctx.width > 100 ? 100 : _ctx.width}%`
+          })
+        }, [
+          vue.renderSlot(_ctx.$slots, "pattern-container", { id: patternId.value }, () => [
+            vue.createElementVNode("pattern", {
+              id: patternId.value,
+              x: vue.unref(viewport).x % background.value.scaledGap[0],
+              y: vue.unref(viewport).y % background.value.scaledGap[1],
+              width: background.value.scaledGap[0],
+              height: background.value.scaledGap[1],
+              patternTransform: `translate(-${background.value.offset[0]},-${background.value.offset[1]})`,
+              patternUnits: "userSpaceOnUse"
+            }, [
+              vue.renderSlot(_ctx.$slots, "pattern", {}, () => [
+                _ctx.variant === vue.unref(BackgroundVariant).Lines ? (vue.openBlock(), vue.createBlock(vue.unref(LinePattern), {
+                  key: 0,
+                  size: _ctx.lineWidth,
+                  color: patternColor.value,
+                  dimensions: background.value.scaledGap
+                }, null, 8, ["size", "color", "dimensions"])) : _ctx.variant === vue.unref(BackgroundVariant).Dots ? (vue.openBlock(), vue.createBlock(vue.unref(DotPattern), {
+                  key: 1,
+                  color: patternColor.value,
+                  radius: background.value.size / _ctx.offset
+                }, null, 8, ["color", "radius"])) : vue.createCommentVNode("", true),
+                _ctx.bgColor ? (vue.openBlock(), vue.createElementBlock("svg", _hoisted_2, [
+                  vue.createElementVNode("rect", {
+                    width: "100%",
+                    height: "100%",
+                    fill: _ctx.bgColor
+                  }, null, 8, _hoisted_3)
+                ])) : vue.createCommentVNode("", true)
+              ])
+            ], 8, _hoisted_1)
+          ]),
+          vue.createElementVNode("rect", {
+            x: _ctx.x,
+            y: _ctx.y,
+            width: "100%",
+            height: "100%",
+            fill: `url(#${patternId.value})`
+          }, null, 8, _hoisted_4),
+          vue.renderSlot(_ctx.$slots, "default", { id: patternId.value })
+        ], 4);
+      };
+    }
+  });
+  exports.Background = _sfc_main;
+  exports.BackgroundVariant = BackgroundVariant;
+  Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+  return exports;
+}({}, Vue, VueFlowCore);

dist/vue-flow-background.js

@@ -1,1 +0,124 @@
-"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;
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const vue = require("vue");
+const core = require("@vue-flow/core");
+var BackgroundVariant = /* @__PURE__ */ ((BackgroundVariant2) => {
+  BackgroundVariant2["Lines"] = "lines";
+  BackgroundVariant2["Dots"] = "dots";
+  return BackgroundVariant2;
+})(BackgroundVariant || {});
+const LinePattern = function({ dimensions, size, color }) {
+  return vue.h("path", {
+    "stroke": color,
+    "stroke-width": size,
+    "d": `M${dimensions[0] / 2} 0 V${dimensions[1]} M0 ${dimensions[1] / 2} H${dimensions[0]}`
+  });
+};
+const DotPattern = function({ radius, color }) {
+  return vue.h("circle", { cx: radius, cy: radius, r: radius, fill: color });
+};
+({
+  [BackgroundVariant.Lines]: LinePattern,
+  [BackgroundVariant.Dots]: DotPattern
+});
+const DefaultBgColors = {
+  [BackgroundVariant.Dots]: "#81818a",
+  [BackgroundVariant.Lines]: "#eee"
+};
+const _hoisted_1 = ["id", "x", "y", "width", "height", "patternTransform"];
+const _hoisted_2 = {
+  key: 2,
+  height: "100",
+  width: "100"
+};
+const _hoisted_3 = ["fill"];
+const _hoisted_4 = ["x", "y", "fill"];
+const __default__ = {
+  name: "Background",
+  compatConfig: { MODE: 3 }
+};
+const _sfc_main = /* @__PURE__ */ vue.defineComponent({
+  ...__default__,
+  props: {
+    id: {},
+    variant: { default: () => BackgroundVariant.Dots },
+    gap: { default: 20 },
+    size: { default: 1 },
+    lineWidth: { default: 1 },
+    patternColor: {},
+    color: {},
+    bgColor: {},
+    height: { default: 100 },
+    width: { default: 100 },
+    x: { default: 0 },
+    y: { default: 0 },
+    offset: { default: 2 }
+  },
+  setup(__props) {
+    const { id: vueFlowId, viewport } = core.useVueFlow();
+    const background = vue.computed(() => {
+      const [gapX, gapY] = Array.isArray(__props.gap) ? __props.gap : [__props.gap, __props.gap];
+      const scaledGap = [gapX * viewport.value.zoom || 1, gapY * viewport.value.zoom || 1];
+      const scaledSize = __props.size * viewport.value.zoom;
+      const patternOffset = __props.variant === BackgroundVariant.Dots ? [scaledSize / __props.offset, scaledSize / __props.offset] : [scaledGap[0] / __props.offset, scaledGap[1] / __props.offset];
+      return {
+        scaledGap,
+        offset: patternOffset,
+        size: scaledSize
+      };
+    });
+    const patternId = vue.toRef(() => `pattern-${vueFlowId}${__props.id ? `-${__props.id}` : ""}`);
+    const patternColor = vue.toRef(() => __props.color || __props.patternColor || DefaultBgColors[__props.variant || BackgroundVariant.Dots]);
+    return (_ctx, _cache) => {
+      return vue.openBlock(), vue.createElementBlock("svg", {
+        class: "vue-flow__background vue-flow__container",
+        style: vue.normalizeStyle({
+          height: `${_ctx.height > 100 ? 100 : _ctx.height}%`,
+          width: `${_ctx.width > 100 ? 100 : _ctx.width}%`
+        })
+      }, [
+        vue.renderSlot(_ctx.$slots, "pattern-container", { id: patternId.value }, () => [
+          vue.createElementVNode("pattern", {
+            id: patternId.value,
+            x: vue.unref(viewport).x % background.value.scaledGap[0],
+            y: vue.unref(viewport).y % background.value.scaledGap[1],
+            width: background.value.scaledGap[0],
+            height: background.value.scaledGap[1],
+            patternTransform: `translate(-${background.value.offset[0]},-${background.value.offset[1]})`,
+            patternUnits: "userSpaceOnUse"
+          }, [
+            vue.renderSlot(_ctx.$slots, "pattern", {}, () => [
+              _ctx.variant === vue.unref(BackgroundVariant).Lines ? (vue.openBlock(), vue.createBlock(vue.unref(LinePattern), {
+                key: 0,
+                size: _ctx.lineWidth,
+                color: patternColor.value,
+                dimensions: background.value.scaledGap
+              }, null, 8, ["size", "color", "dimensions"])) : _ctx.variant === vue.unref(BackgroundVariant).Dots ? (vue.openBlock(), vue.createBlock(vue.unref(DotPattern), {
+                key: 1,
+                color: patternColor.value,
+                radius: background.value.size / _ctx.offset
+              }, null, 8, ["color", "radius"])) : vue.createCommentVNode("", true),
+              _ctx.bgColor ? (vue.openBlock(), vue.createElementBlock("svg", _hoisted_2, [
+                vue.createElementVNode("rect", {
+                  width: "100%",
+                  height: "100%",
+                  fill: _ctx.bgColor
+                }, null, 8, _hoisted_3)
+              ])) : vue.createCommentVNode("", true)
+            ])
+          ], 8, _hoisted_1)
+        ]),
+        vue.createElementVNode("rect", {
+          x: _ctx.x,
+          y: _ctx.y,
+          width: "100%",
+          height: "100%",
+          fill: `url(#${patternId.value})`
+        }, null, 8, _hoisted_4),
+        vue.renderSlot(_ctx.$slots, "default", { id: patternId.value })
+      ], 4);
+    };
+  }
+});
+exports.Background = _sfc_main;
+exports.BackgroundVariant = BackgroundVariant;

package.json

 {
   "name": "@vue-flow/background",
-  "version": "1.2.0",
+  "version": "1.3.0",
   "private": false,
@@ -49,12 +49,11 @@ "license": "MIT",
   "peerDependencies": {
-    "@vue-flow/core": "^1.12.2"
+    "@vue-flow/core": "^1.23.0",
+    "vue": "^3.3.0"
   },
   "devDependencies": {
-    "vite": "^4.1.4",
-    "vue": "^3.2.25",
-    "vue-tsc": "^1.2.0",
+    "vue-tsc": "^1.8.16",
+    "@tooling/vite-config": "0.0.0",
     "@tooling/eslint-config": "0.0.0",
-    "@tooling/vite-config": "0.0.0",
-    "@vue-flow/core": "1.19.0",
-    "@tooling/tsconfig": "0.0.0"
+    "@tooling/tsconfig": "0.0.0",
+    "@vue-flow/core": "1.32.0"
   },
@@ -66,5 +65,7 @@ "publishConfig": {
   "scripts": {
-    "dev": "vite build --watch",
+    "dev": "pnpm types:watch & pnpm build:watch",
     "build": "vite build",
+    "build:watch": "vite build --watch",
     "types": "vue-tsc --declaration --emitDeclarationOnly && pnpm lint:dist",
+    "types:watch": "vue-tsc --declaration --emitDeclarationOnly --watch",
     "lint": "eslint --ext .js,.ts,.vue ./",
@@ -71,0 +72,0 @@ "lint:dist": "eslint --ext \".ts,.tsx\" -c .eslintrc.js --fix --ignore-pattern !**/*  ./dist",

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

Major refactor

Supply chain risk

Package has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.

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

Minified code

Quality

This package contains minified code. This may be harmless in some cases where minified code is included in packaged libraries, however packages on npm should not minify code.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

23377

increased by35.17%

Dev dependency count

5

decreased by-28.57%

Lines of code

545

increased by147.73%

Number of low quality alerts

0

decreased by-100%

Worsened metrics

Dependency count

2

increased by100%

Number of package files

10

decreased by-9.09%

Number of medium supply chain risk alerts

1

increased byInfinity%

No dependency changes