@voicenter-team/voicenter-ui-plus 2.0.10 → 3.0.0

package/library/components/VcSoundplayer/VcSoundVolume.vue.mjs

@@ -0,0 +1,105 @@
+import '../../assets/components/VcSoundplayer/VcSoundVolume.css';
+import { defineComponent, ref, openBlock, createElementBlock, createElementVNode, withModifiers, createVNode, normalizeClass, unref, isRef, createBlock, withCtx } from "vue";
+import { useSoundPlayerInject } from "./useSoundPlayerProvideInject.mjs";
+import _sfc_main$2 from "../VcSlider/VcSlider.vue.mjs";
+import '../../assets/components/VcIcon/VcIcon.css';import '../../assets/components/VcPopover/VcPopover.css';import '../../assets/components/VcSlider/VcSlider.css';/* empty css                         */
+import _sfc_main$3 from "../VcPopover/VcPopover.vue.mjs";
+/* empty css                           */
+import _sfc_main$1 from "../VcIcon/VcIcon.vue.mjs";
+/* empty css                     */
+const _hoisted_1 = { class: "vc-sound-volume" };
+const _hoisted_2 = {
+  key: 0,
+  class: "flex items-center w-full gap-x-3"
+};
+const _hoisted_3 = { class: "volume-input-inline-block w-full" };
+const _hoisted_4 = { class: "flex-center" };
+const _hoisted_5 = { class: "volume-input-block px-3 pt-3" };
+const _sfc_main = /* @__PURE__ */ defineComponent({
+  __name: "VcSoundVolume",
+  props: {
+    disabled: { type: Boolean },
+    inlineMode: { type: Boolean },
+    iconClass: { default: "icon-md" },
+    icon: { default: "vc-icon-sounds" },
+    iconOff: { default: "vc-icon-sound-off" }
+  },
+  setup(__props) {
+    const { volume, defaultVolume } = useSoundPlayerInject();
+    const oldValue = ref(100);
+    function onToggleMute() {
+      if (!volume) {
+        return;
+      }
+      const _default = defaultVolume ? defaultVolume() : 50;
+      if (volume.value) {
+        oldValue.value = volume.value;
+        volume.value = 0;
+      } else {
+        volume.value = oldValue.value || _default;
+      }
+    }
+    return (_ctx, _cache) => {
+      return openBlock(), createElementBlock("div", _hoisted_1, [
+        __props.inlineMode ? (openBlock(), createElementBlock("div", _hoisted_2, [
+          createElementVNode("span", {
+            class: "flex-center",
+            onClick: withModifiers(onToggleMute, ["stop"])
+          }, [
+            createVNode(_sfc_main$1, {
+              ref: "volumeIcon",
+              icon: unref(volume) ? __props.icon : __props.iconOff,
+              class: normalizeClass([[
+                __props.iconClass,
+                __props.disabled ? "text-inactive-elements" : "text-primary-actions"
+              ], "cursor-pointer"])
+            }, null, 8, ["icon", "class"])
+          ]),
+          createElementVNode("div", _hoisted_3, [
+            createVNode(_sfc_main$2, {
+              modelValue: unref(volume),
+              "onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => isRef(volume) ? volume.value = $event : null),
+              "input-size": "small",
+              "show-tooltip": false
+            }, null, 8, ["modelValue"])
+          ])
+        ])) : (openBlock(), createBlock(_sfc_main$3, {
+          key: 1,
+          disabled: __props.disabled,
+          placement: "top",
+          "popover-width": "30px",
+          "popover-class": "vc-sound-volume-popover"
+        }, {
+          reference: withCtx(() => [
+            createElementVNode("span", _hoisted_4, [
+              createVNode(_sfc_main$1, {
+                ref: "volumeIcon",
+                icon: unref(volume) ? __props.icon : __props.iconOff,
+                class: normalizeClass([[
+                  __props.iconClass,
+                  __props.disabled ? "text-inactive-elements" : "text-primary-actions"
+                ], "cursor-pointer"])
+              }, null, 8, ["icon", "class"])
+            ])
+          ]),
+          default: withCtx(() => [
+            createElementVNode("div", _hoisted_5, [
+              createVNode(_sfc_main$2, {
+                modelValue: unref(volume),
+                "onUpdate:modelValue": _cache[1] || (_cache[1] = ($event) => isRef(volume) ? volume.value = $event : null),
+                height: "60px",
+                vertical: "",
+                "input-size": "small",
+                "show-tooltip": false
+              }, null, 8, ["modelValue"])
+            ])
+          ]),
+          _: 1
+        }, 8, ["disabled"]))
+      ]);
+    };
+  }
+});
+export {
+  _sfc_main as default
+};

package/library/components/VcSoundplayer/VcSoundVolume.vue3.mjs

@@ -0,0 +1,5 @@
+import _sfc_main from "./VcSoundVolume.vue.mjs";
+import '../../assets/components/VcSoundplayer/VcSoundVolume.css';/* empty css                    */
+export {
+  _sfc_main as default
+};

package/library/components/VcSoundplayer/player.options.mjs

@@ -0,0 +1,36 @@
+const DEFAULT_OPTIONS = {
+  height: 32,
+  container: "#waveform",
+  barWidth: 0.5,
+  barHeight: 1,
+  waveColor: "#E0E2E5",
+  progressColor: "#2675FF",
+  cursorColor: "transparent",
+  normalize: true
+};
+const DEFAULT_HOVER_OPTIONS = {
+  lineColor: "var(--primary-alternative-actions--focus)",
+  lineWidth: 1,
+  labelBackground: "var(--primary-alternative-actions--focus)",
+  labelColor: "var(--btn-filled-text)",
+  labelSize: "11px"
+};
+function toMinutes(seconds) {
+  if (seconds === void 0) {
+    return "0:00";
+  }
+  const minutes = Math.floor(seconds / 60);
+  const remainingSecondsInt = Math.floor(seconds - minutes * 60);
+  let remainingSeconds = "";
+  if (remainingSecondsInt < 10) {
+    remainingSeconds = `0${remainingSecondsInt}`;
+  } else {
+    remainingSeconds = `${remainingSecondsInt}`;
+  }
+  return `${minutes}:${remainingSeconds}`;
+}
+export {
+  DEFAULT_HOVER_OPTIONS,
+  DEFAULT_OPTIONS,
+  toMinutes
+};

package/library/components/VcSoundplayer/useSoundPlayerProvideInject.mjs

@@ -0,0 +1,16 @@
+import { inject, provide } from "vue";
+import { VcSoundPlayerProvideKey } from "../../tokens/tokens.mjs";
+function useSoundPlayerProvide(param) {
+  provide(VcSoundPlayerProvideKey, param);
+}
+function useSoundPlayerInject() {
+  const injectData = inject(VcSoundPlayerProvideKey, void 0);
+  if (!injectData) {
+    throw new Error("SoundPlayer options must be provided");
+  }
+  return injectData;
+}
+export {
+  useSoundPlayerInject,
+  useSoundPlayerProvide
+};

package/library/components/VcSparkline/VcBarLine.vue.mjs

@@ -0,0 +1,203 @@
+import { defineComponent, useSlots, computed, openBlock, createElementBlock, createElementVNode, Fragment, renderList, createCommentVNode, renderSlot, createTextVNode, toDisplayString } from "vue";
+import uniqueComponentId from "../../utils/UniqueComponentId.mjs";
+import { getPropertyFromItem } from "./helper.mjs";
+const _hoisted_1 = { display: "block" };
+const _hoisted_2 = ["id", "x1", "y1", "x2", "y2"];
+const _hoisted_3 = ["offset", "stop-color"];
+const _hoisted_4 = ["id"];
+const _hoisted_5 = ["x", "y", "width", "height", "rx", "ry"];
+const _hoisted_6 = ["from", "to", "dur"];
+const _hoisted_7 = ["to", "dur"];
+const _hoisted_8 = {
+  key: "labels",
+  style: {
+    textAnchor: "middle",
+    dominantBaseline: "mathematical",
+    fill: "currentColor"
+  }
+};
+const _hoisted_9 = ["x", "y", "font-size"];
+const _hoisted_10 = ["clip-path", "fill"];
+const _hoisted_11 = ["width", "height"];
+const _sfc_main = /* @__PURE__ */ defineComponent({
+  __name: "VcBarLine",
+  props: {
+    type: { default: "bar" },
+    colorClasses: { default: void 0 },
+    autoDraw: { type: Boolean },
+    autoLineWidth: { type: Boolean },
+    autoDrawDuration: { default: 300 },
+    autoDrawEasing: { default: "ease" },
+    showLabels: { type: Boolean },
+    smooth: { type: [Boolean, Number], default: void 0 },
+    fill: { type: Boolean },
+    id: { default: void 0 },
+    color: { default: void 0 },
+    itemValue: { default: "value" },
+    modelValue: { default: () => [] },
+    gradient: { default: () => [] },
+    gradientDirection: { default: "top" },
+    min: { default: void 0 },
+    max: { default: void 0 },
+    height: { default: 75 },
+    width: { default: 300 },
+    labelSize: { default: 7 },
+    lineWidth: { default: 4 },
+    padding: { default: 8 },
+    labels: { default: void 0 }
+  },
+  setup(__props) {
+    const props = __props;
+    const slots = useSlots();
+    const uid = uniqueComponentId("vc-trend-");
+    const componentId = computed(() => props.id || uid);
+    const bars = computed(() => genBars(items.value, boundary.value));
+    const offsetX = computed(() => (Math.abs(bars.value[0].x - bars.value[1].x) - lineWidth.value) / 2);
+    const autoDrawDuration = computed(() => Number(props.autoDrawDuration) || 500);
+    const hasLabels = computed(() => {
+      const labels = props.labels || [];
+      return Boolean(
+        props.showLabels || labels.length > 0 || !!(slots == null ? void 0 : slots.label)
+      );
+    });
+    const gradientData = computed(() => {
+      return !props.gradient.slice().length ? [""] : props.gradient.slice().reverse();
+    });
+    const lineWidth = computed(() => parseFloat(`${props.lineWidth}`) || 4);
+    const totalWidth = computed(() => Math.max(props.modelValue.length * lineWidth.value, Number(props.width)));
+    const boundary = computed(() => {
+      return {
+        minX: 0,
+        maxX: totalWidth.value,
+        minY: 0,
+        maxY: parseInt(`${props.height}`, 10)
+      };
+    });
+    const items = computed(() => props.modelValue.map((item) => Number(getPropertyFromItem(item, props.itemValue, item)) || 0));
+    const parsedLabels = computed(() => {
+      const labels = [];
+      const points = genBars(items.value, boundary.value);
+      const len = points.length;
+      const pLabels = props.labels || [];
+      for (let i = 0; labels.length < len; i++) {
+        const item = points[i];
+        let value = pLabels[i];
+        if (!value) {
+          value = typeof item === "object" ? item.value : item;
+        }
+        labels.push({
+          x: item.x,
+          value: String(value)
+        });
+      }
+      return labels;
+    });
+    function genBars(values, boundary2) {
+      const { minX, maxX, minY, maxY } = boundary2;
+      const totalValues = values.length;
+      let maxValue = props.max != null ? Number(props.max) : Math.max(...values);
+      let minValue = props.min != null ? Number(props.min) : Math.min(...values);
+      if (minValue > 0 && props.min == null) minValue = 0;
+      if (maxValue < 0 && props.max == null) maxValue = 0;
+      const gridX = maxX / totalValues;
+      const gridY = (maxY - minY) / (maxValue - minValue || 1);
+      const horizonY = maxY - Math.abs(minValue * gridY);
+      return values.map((value, index) => {
+        const height = Math.abs(gridY * value);
+        return {
+          x: minX + index * gridX,
+          y: horizonY - height + +(value < 0) * height,
+          height,
+          value
+        };
+      });
+    }
+    return (_ctx, _cache) => {
+      var _a;
+      return openBlock(), createElementBlock("svg", _hoisted_1, [
+        createElementVNode("defs", null, [
+          createElementVNode("linearGradient", {
+            id: componentId.value,
+            gradientUnits: "userSpaceOnUse",
+            x1: __props.gradientDirection === "left" ? "100%" : "0",
+            y1: __props.gradientDirection === "top" ? "100%" : "0",
+            x2: __props.gradientDirection === "right" ? "100%" : "0",
+            y2: __props.gradientDirection === "bottom" ? "100%" : "0"
+          }, [
+            (openBlock(true), createElementBlock(Fragment, null, renderList(gradientData.value, (colorItem, index) => {
+              return openBlock(), createElementBlock("stop", {
+                key: `gr-${index}`,
+                offset: index / Math.max(gradientData.value.length - 1, 1),
+                "stop-color": colorItem || "currentColor"
+              }, null, 8, _hoisted_3);
+            }), 128))
+          ], 8, _hoisted_2)
+        ]),
+        createElementVNode("clipPath", {
+          id: `${componentId.value}-clip`
+        }, [
+          (openBlock(true), createElementBlock(Fragment, null, renderList(bars.value, (bar, bIndex) => {
+            return openBlock(), createElementBlock("rect", {
+              key: `bar-${bIndex}`,
+              x: bar.x + offsetX.value,
+              y: bar.y,
+              width: lineWidth.value,
+              height: bar.height,
+              rx: typeof __props.smooth === "number" ? __props.smooth : __props.smooth ? 2 : 0,
+              ry: typeof __props.smooth === "number" ? __props.smooth : __props.smooth ? 2 : 0
+            }, [
+              __props.autoDraw ? (openBlock(), createElementBlock(Fragment, { key: 0 }, [
+                createElementVNode("animate", {
+                  attributeName: "y",
+                  from: bar.y + bar.height,
+                  to: bar.y,
+                  dur: `${autoDrawDuration.value}ms`,
+                  fill: "freeze"
+                }, null, 8, _hoisted_6),
+                createElementVNode("animate", {
+                  attributeName: "height",
+                  from: "0",
+                  to: bar.height,
+                  dur: `${autoDrawDuration.value}ms`,
+                  fill: "freeze"
+                }, null, 8, _hoisted_7)
+              ], 64)) : createCommentVNode("", true)
+            ], 8, _hoisted_5);
+          }), 128))
+        ], 8, _hoisted_4),
+        hasLabels.value ? (openBlock(), createElementBlock("g", _hoisted_8, [
+          (openBlock(true), createElementBlock(Fragment, null, renderList(parsedLabels.value, (text, tI) => {
+            return openBlock(), createElementBlock("text", {
+              key: `text-${tI}`,
+              x: text.x + offsetX.value + lineWidth.value / 2,
+              y: parseInt(`${__props.height}`, 10) - 2 + (parseInt(`${__props.labelSize}`, 10) || 7 * 0.75),
+              "font-size": Number(props.labelSize) || 7
+            }, [
+              _ctx.$slots.label ? renderSlot(_ctx.$slots, "label", {
+                key: 0,
+                index: tI,
+                value: text.value
+              }) : (openBlock(), createElementBlock(Fragment, { key: 1 }, [
+                createTextVNode(toDisplayString(text.value), 1)
+              ], 64))
+            ], 8, _hoisted_9);
+          }), 128))
+        ])) : createCommentVNode("", true),
+        createElementVNode("g", {
+          "clip-path": `url(#${componentId.value}-clip)`,
+          fill: `url(#${componentId.value})`
+        }, [
+          createElementVNode("rect", {
+            x: 0,
+            y: 0,
+            width: Math.max((((_a = __props.modelValue) == null ? void 0 : _a.length) || 0) * lineWidth.value, Number(__props.width)),
+            height: __props.height
+          }, null, 8, _hoisted_11)
+        ], 8, _hoisted_10)
+      ]);
+    };
+  }
+});
+export {
+  _sfc_main as default
+};

package/library/components/VcSparkline/VcBarLine.vue2.mjs

@@ -0,0 +1,4 @@
+import _sfc_main from "./VcBarLine.vue.mjs";
+export {
+  _sfc_main as default
+};

package/library/components/VcSparkline/VcSparkline.vue.mjs

@@ -0,0 +1,89 @@
+import { defineComponent, useSlots, useAttrs, computed, openBlock, createElementBlock, createBlock, resolveDynamicComponent, mergeProps, unref, createSlots, withCtx, renderSlot } from "vue";
+import _sfc_main$1 from "./VcBarLine.vue.mjs";
+import _sfc_main$2 from "./VcTrendLine.vue.mjs";
+const _hoisted_1 = { class: "vc-sparkline-block" };
+const _sfc_main = /* @__PURE__ */ defineComponent({
+  ...{
+    inheritAttrs: false
+  },
+  __name: "VcSparkline",
+  props: {
+    type: { default: "trend" },
+    autoDraw: { type: Boolean },
+    autoDrawDuration: { default: void 0 },
+    autoDrawEasing: { default: "ease" },
+    showLabels: { type: Boolean },
+    smooth: { type: [Boolean, Number], default: false },
+    fill: { type: Boolean },
+    id: { default: void 0 },
+    colorClasses: { default: void 0 },
+    color: { default: void 0 },
+    itemValue: { default: "value" },
+    modelValue: { default: () => [] },
+    gradient: { default: () => [] },
+    gradientDirection: { default: "top" },
+    min: { default: void 0 },
+    max: { default: void 0 },
+    height: { default: 75 },
+    width: { default: 300 },
+    labelSize: { default: 7 },
+    lineWidth: { default: 4 },
+    padding: { default: 8 },
+    labels: { default: () => [] }
+  },
+  setup(__props) {
+    const props = __props;
+    const slots = useSlots();
+    const attrs = useAttrs();
+    const componentTag = computed(() => {
+      return props.type === "bar" ? _sfc_main$1 : _sfc_main$2;
+    });
+    const hasLabels = computed(() => {
+      var _a;
+      return Boolean(
+        props.showLabels || (((_a = props.labels) == null ? void 0 : _a.length) || 0) > 0 || !!(slots == null ? void 0 : slots.label)
+      );
+    });
+    const totalHeight = computed(() => {
+      let height = parseInt(`${props.height}`, 10);
+      if (hasLabels.value) height += parseInt(`${props.labelSize}`, 10) * 1.5;
+      return height;
+    });
+    return (_ctx, _cache) => {
+      return openBlock(), createElementBlock("div", _hoisted_1, [
+        (openBlock(), createBlock(resolveDynamicComponent(componentTag.value), mergeProps({
+          class: __props.colorClasses,
+          viewBox: `0 0 ${__props.width} ${parseInt(`${totalHeight.value}`, 10)}`,
+          style: {
+            color: __props.color,
+            caretColor: __props.color
+          }
+        }, {
+          ...unref(attrs),
+          ...props
+        }), createSlots({ _: 2 }, [
+          _ctx.$slots.default ? {
+            name: "default",
+            fn: withCtx(() => [
+              renderSlot(_ctx.$slots, "default")
+            ]),
+            key: "0"
+          } : void 0,
+          _ctx.$slots.label ? {
+            name: "label",
+            fn: withCtx(({ index, value }) => [
+              renderSlot(_ctx.$slots, "label", {
+                index,
+                value
+              })
+            ]),
+            key: "1"
+          } : void 0
+        ]), 1040, ["class", "viewBox", "style"]))
+      ]);
+    };
+  }
+});
+export {
+  _sfc_main as default
+};

package/library/components/VcSparkline/VcSparkline.vue2.mjs

@@ -0,0 +1,4 @@
+import _sfc_main from "./VcSparkline.vue.mjs";
+export {
+  _sfc_main as default
+};

package/library/components/VcSparkline/VcTrendLine.vue.mjs

@@ -0,0 +1,202 @@
+import { defineComponent, useSlots, ref, computed, watch, nextTick, openBlock, createElementBlock, createElementVNode, Fragment, renderList, renderSlot, createTextVNode, toDisplayString, createCommentVNode } from "vue";
+import uniqueComponentId from "../../utils/UniqueComponentId.mjs";
+import { getPropertyFromItem, _genPath } from "./helper.mjs";
+const _hoisted_1 = ["stroke-width"];
+const _hoisted_2 = ["id", "x1", "y1", "x2", "y2"];
+const _hoisted_3 = ["offset", "stop-color"];
+const _hoisted_4 = {
+  key: "labels",
+  style: {
+    textAnchor: "middle",
+    dominantBaseline: "mathematical",
+    fill: "currentColor"
+  }
+};
+const _hoisted_5 = ["x", "y", "font-size"];
+const _hoisted_6 = ["d", "fill", "stroke"];
+const _hoisted_7 = ["d", "stroke"];
+const _sfc_main = /* @__PURE__ */ defineComponent({
+  __name: "VcTrendLine",
+  props: {
+    type: { default: "trend" },
+    colorClasses: { default: void 0 },
+    autoDraw: { type: Boolean },
+    autoDrawDuration: { default: void 0 },
+    autoDrawEasing: { default: "ease" },
+    showLabels: { type: Boolean },
+    smooth: { type: [Boolean, Number], default: false },
+    fill: { type: Boolean },
+    id: { default: void 0 },
+    color: { default: void 0 },
+    itemValue: { default: "value" },
+    modelValue: { default: () => [] },
+    gradient: { default: () => [] },
+    gradientDirection: { default: "top" },
+    min: { default: void 0 },
+    max: { default: void 0 },
+    height: { default: 75 },
+    width: { default: 300 },
+    labelSize: { default: 7 },
+    lineWidth: { default: 4 },
+    padding: { default: 8 },
+    labels: { default: () => [] }
+  },
+  setup(__props) {
+    const props = __props;
+    const slots = useSlots();
+    const uid = uniqueComponentId("vc-trendline-");
+    const lastLength = ref(0);
+    const pathRef = ref();
+    const componentId = computed(() => props.id || uid);
+    const gradientData = computed(() => {
+      return !props.gradient.slice().length ? [""] : props.gradient.slice().reverse();
+    });
+    const autoDrawDuration = computed(() => Number(props.autoDrawDuration) || (props.fill ? 500 : 2e3));
+    const hasLabels = computed(() => {
+      var _a;
+      return Boolean(
+        props.showLabels || (((_a = props.labels) == null ? void 0 : _a.length) || 0) > 0 || !!(slots == null ? void 0 : slots.label)
+      );
+    });
+    const lineWidth = computed(() => {
+      return parseFloat(`${props.lineWidth}`) || 4;
+    });
+    const totalWidth = computed(() => Number(props.width));
+    const boundary = computed(() => {
+      const padding = Number(props.padding);
+      return {
+        minX: padding,
+        maxX: totalWidth.value - padding,
+        minY: padding,
+        maxY: parseInt(`${props.height}`, 10) - padding
+      };
+    });
+    const parsedLabels = computed(() => {
+      const labels = [];
+      const points = genPoints(items.value, boundary.value);
+      const len = points.length;
+      const pLabels = props.labels || [];
+      for (let i = 0; labels.length < len; i++) {
+        const item = points[i];
+        let value = pLabels[i];
+        if (!value) {
+          value = typeof item === "object" ? item.value : item;
+        }
+        labels.push({
+          x: item.x,
+          value: String(value)
+        });
+      }
+      return labels;
+    });
+    const items = computed(() => props.modelValue.map((item) => Number(getPropertyFromItem(item, props.itemValue, item)) || 0));
+    function genPoints(values, boundary2) {
+      const { minX, maxX, minY, maxY } = boundary2;
+      const totalValues = values.length;
+      const maxValue = props.max != null ? Number(props.max) : Math.max(...values);
+      const minValue = props.min != null ? Number(props.min) : Math.min(...values);
+      const gridX = (maxX - minX) / (totalValues - 1);
+      const gridY = (maxY - minY) / (maxValue - minValue || 1);
+      return values.map((value, index) => {
+        return {
+          x: minX + index * gridX,
+          y: maxY - (value - minValue) * gridY,
+          value
+        };
+      });
+    }
+    function genPath(fill) {
+      return _genPath(
+        genPoints(items.value, boundary.value),
+        props.smooth ? 8 : Number(props.smooth),
+        fill,
+        parseInt(`${props.height}`, 10)
+      );
+    }
+    watch(
+      () => props.modelValue,
+      async () => {
+        await nextTick();
+        if (!props.autoDraw || !pathRef.value) return;
+        const pathRefVal = pathRef.value;
+        const length = pathRefVal.getTotalLength();
+        if (!props.fill) {
+          pathRefVal.style.strokeDasharray = `${length}`;
+          pathRefVal.style.strokeDashoffset = `${length}`;
+          pathRefVal.getBoundingClientRect();
+          pathRefVal.style.transition = `stroke-dashoffset ${autoDrawDuration.value}ms ${props.autoDrawEasing}`;
+          pathRefVal.style.strokeDashoffset = "0";
+        } else {
+          pathRefVal.style.transformOrigin = "bottom center";
+          pathRefVal.style.transition = "none";
+          pathRefVal.style.transform = "scaleY(0)";
+          pathRefVal.getBoundingClientRect();
+          pathRefVal.style.transition = `transform ${autoDrawDuration.value}ms ${props.autoDrawEasing}`;
+          pathRefVal.style.transform = "scaleY(1)";
+        }
+        lastLength.value = length;
+      },
+      { immediate: true }
+    );
+    return (_ctx, _cache) => {
+      var _a;
+      return openBlock(), createElementBlock("svg", {
+        display: "block",
+        "stroke-width": parseFloat(`${lineWidth.value}`) ?? 4
+      }, [
+        createElementVNode("defs", null, [
+          createElementVNode("linearGradient", {
+            id: componentId.value,
+            x1: __props.gradientDirection === "left" ? "100%" : "0",
+            y1: __props.gradientDirection === "top" ? "100%" : "0",
+            x2: __props.gradientDirection === "right" ? "100%" : "0",
+            y2: __props.gradientDirection === "bottom" ? "100%" : "0",
+            gradientUnits: "userSpaceOnUse"
+          }, [
+            (openBlock(true), createElementBlock(Fragment, null, renderList(gradientData.value, (colorItem, index) => {
+              return openBlock(), createElementBlock("stop", {
+                key: `gr-${index}`,
+                offset: index / Math.max(gradientData.value.length - 1, 1),
+                "stop-color": colorItem || "currentColor"
+              }, null, 8, _hoisted_3);
+            }), 128))
+          ], 8, _hoisted_2)
+        ]),
+        hasLabels.value ? (openBlock(), createElementBlock("g", _hoisted_4, [
+          (openBlock(true), createElementBlock(Fragment, null, renderList(parsedLabels.value, (tItem, tI) => {
+            return openBlock(), createElementBlock("text", {
+              key: `li-${tI}`,
+              x: tItem.x + lineWidth.value / 2 + lineWidth.value / 2,
+              y: parseInt(`${__props.height}`, 10) - 4 + (parseInt(`${__props.labelSize}`, 10) || 7 * 0.75),
+              "font-size": Number(props.labelSize) || 7
+            }, [
+              _ctx.$slots.label ? renderSlot(_ctx.$slots, "label", {
+                key: 0,
+                index: tI,
+                value: tItem.value
+              }) : (openBlock(), createElementBlock(Fragment, { key: 1 }, [
+                createTextVNode(toDisplayString(tItem.value), 1)
+              ], 64))
+            ], 8, _hoisted_5);
+          }), 128))
+        ])) : createCommentVNode("", true),
+        createElementVNode("path", {
+          ref_key: "pathRef",
+          ref: pathRef,
+          d: genPath(props.fill),
+          fill: __props.fill ? `url(#${componentId.value})` : "none",
+          stroke: __props.fill ? "none" : `url(#${componentId.value})`
+        }, null, 8, _hoisted_6),
+        __props.fill ? (openBlock(), createElementBlock("path", {
+          key: 1,
+          d: genPath(false),
+          fill: "none",
+          stroke: __props.color ?? ((_a = __props.gradient) == null ? void 0 : _a[0])
+        }, null, 8, _hoisted_7)) : createCommentVNode("", true)
+      ], 8, _hoisted_1);
+    };
+  }
+});
+export {
+  _sfc_main as default
+};

package/library/components/VcSparkline/VcTrendLine.vue2.mjs

@@ -0,0 +1,4 @@
+import _sfc_main from "./VcTrendLine.vue.mjs";
+export {
+  _sfc_main as default
+};