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

package/library/components/VcPopover/VcConfirmPopover.vue.mjs

@@ -0,0 +1,242 @@
+import { defineComponent, ref, computed, openBlock, createBlock, unref, withCtx, withDirectives, createElementBlock, normalizeStyle, normalizeClass, toDisplayString, createCommentVNode, createElementVNode, resolveDynamicComponent, Fragment, createVNode, createTextVNode } from "vue";
+import { ElPopover, ClickOutside } from "element-plus";
+import '../../assets/components/VcIcon/VcIcon.css';import '../../assets/components/VcButton/VcButton.css';import '../../assets/node_modules/element-plus/theme-chalk/src/popover.css';import '../../assets/node_modules/element-plus/theme-chalk/src/popper.css';import '../../assets/node_modules/element-plus/theme-chalk/src/base.css';
+import '../../assets/components/VcPopover/VcConfirmPopover.css';/* empty css                                                         */
+/* empty css                                                           */
+/* empty css                                                            */
+import { confirmPopupState } from "../../composables/useConfirmPopup.mjs";
+import { convertToUnit } from "../../utils/helpers.mjs";
+import { tVU } from "../../localization/index.mjs";
+import _sfc_main$2 from "../VcButton/VcButton.vue.mjs";
+/* empty css                         */
+import _sfc_main$1 from "../VcIcon/VcIcon.vue.mjs";
+/* empty css                     */
+import { CircleHelp, Pencil, Save } from "@lucide/vue";
+const _hoisted_1 = {
+  key: 0,
+  class: "vc-confirm-popover__icon"
+};
+const BASE_CLASS = "vc-confirm-popover";
+const DEFAULT_PLACEMENT = "bottom-start";
+const _sfc_main = /* @__PURE__ */ defineComponent({
+  __name: "VcConfirmPopover",
+  props: {
+    options: { default: () => ({}) }
+  },
+  emits: ["close", "confirm"],
+  setup(__props, { expose: __expose, emit: __emit }) {
+    const ICONS = {
+      confirm: CircleHelp,
+      save: CircleHelp,
+      edit: CircleHelp,
+      delete: CircleHelp
+    };
+    const defaultOptions = {
+      themeEffect: "light",
+      persistent: false,
+      teleported: true,
+      popoverClass: "",
+      mouseEvent: false,
+      offset: 8,
+      delayClose: 300,
+      placement: DEFAULT_PLACEMENT,
+      actionSize: "middle",
+      confirmActionColor: "primary"
+    };
+    const emit = __emit;
+    const props = __props;
+    const popoverRef = ref();
+    const popoverOptions = computed(() => {
+      return {
+        ...defaultOptions,
+        ...props.options
+      };
+    });
+    const isOpen = computed(() => {
+      return confirmPopupState.open;
+    });
+    const elementRef = computed(() => {
+      return confirmPopupState.target;
+    });
+    const contentStyles = computed(() => {
+      if (confirmPopupState.popoverMaxWidth) {
+        return { maxWidth: convertToUnit(confirmPopupState.popoverMaxWidth) };
+      }
+      return "";
+    });
+    const header = computed(() => {
+      return confirmPopupState.header;
+    });
+    const placement = computed(() => {
+      return confirmPopupState.placement || popoverOptions.value.placement || DEFAULT_PLACEMENT;
+    });
+    const type = computed(() => {
+      return confirmPopupState.type;
+    });
+    const contentIcon = computed(() => {
+      return confirmPopupState.icon ? confirmPopupState.icon : ICONS[type.value];
+    });
+    const renderContent = computed(() => {
+      return confirmPopupState.renderContent;
+    });
+    const buttonConfirmIcon = computed(() => {
+      let icon = "vc-icon-checkmark";
+      switch (type.value) {
+        case "save":
+          icon = Save;
+          break;
+        case "edit":
+          icon = Pencil;
+          break;
+        case "delete":
+          icon = "vc-icon-recycle-bin";
+          break;
+      }
+      return icon;
+    });
+    const buttonConfirmColor = computed(() => {
+      if (type.value === "delete") {
+        return "destructive";
+      }
+      return popoverOptions.value.confirmActionColor || "primary";
+    });
+    const cancelAction = computed(() => {
+      const options = confirmPopupState.cancelAction;
+      return {
+        type: (options == null ? void 0 : options.type) || "outline",
+        size: (options == null ? void 0 : options.size) || popoverOptions.value.actionSize,
+        icon: (options == null ? void 0 : options.icon) || "",
+        color: (options == null ? void 0 : options.color) || "secondary",
+        label: (options == null ? void 0 : options.label) || tVU.t("voicenterUi.general.cancel")
+      };
+    });
+    const confirmAction = computed(() => {
+      const options = confirmPopupState.confirmAction;
+      return {
+        type: (options == null ? void 0 : options.type) || "default",
+        size: (options == null ? void 0 : options.size) || popoverOptions.value.actionSize,
+        icon: (options == null ? void 0 : options.icon) || buttonConfirmIcon.value,
+        color: (options == null ? void 0 : options.color) || buttonConfirmColor.value || "primary",
+        label: (options == null ? void 0 : options.label) || tVU.t(`voicenterUi.general.${type.value}`)
+      };
+    });
+    function clickOutside(evt) {
+      const target = evt.target;
+      if (!(target instanceof Element)) {
+        confirmPopupState.closePopup();
+        return;
+      }
+      const ref2 = elementRef.value;
+      const el = typeof ref2 === "string" || ref2 instanceof Element ? ref2 : ref2 == null ? void 0 : ref2.$el;
+      if (el === target || el === target.parentElement) {
+        return;
+      }
+      confirmPopupState.closePopup();
+    }
+    function onCancel() {
+      if (confirmPopupState.onClose) {
+        confirmPopupState.onClose();
+      }
+      emit("close");
+    }
+    function onConfirm() {
+      if (confirmPopupState.onConfirm) {
+        confirmPopupState.onConfirm();
+      }
+      emit("confirm");
+    }
+    __expose({
+      onConfirm,
+      onCancel,
+      clickOutside,
+      isOpen,
+      header,
+      contentIcon,
+      contentStyles,
+      renderContent,
+      buttonConfirmIcon,
+      buttonConfirmColor,
+      confirmPopupState
+    });
+    return (_ctx, _cache) => {
+      return elementRef.value ? (openBlock(), createBlock(unref(ElPopover), {
+        key: 0,
+        ref_key: "popoverRef",
+        ref: popoverRef,
+        visible: isOpen.value,
+        "virtual-ref": elementRef.value,
+        effect: popoverOptions.value.themeEffect,
+        persistent: popoverOptions.value.persistent,
+        placement: placement.value,
+        "popper-class": [BASE_CLASS, popoverOptions.value.popoverClass].join(" "),
+        teleported: popoverOptions.value.teleported,
+        "gpu-acceleration": false,
+        "stop-popper-mouse-event": popoverOptions.value.mouseEvent,
+        offset: popoverOptions.value.offset,
+        "hide-after": popoverOptions.value.delayClose,
+        width: "auto",
+        "data-test-name": "confirm-popover",
+        "virtual-triggering": ""
+      }, {
+        default: withCtx(() => [
+          withDirectives((openBlock(), createElementBlock("div", {
+            class: normalizeClass(`${BASE_CLASS}__popup`),
+            style: normalizeStyle(contentStyles.value)
+          }, [
+            header.value ? (openBlock(), createElementBlock("div", {
+              key: 0,
+              class: normalizeClass(`${BASE_CLASS}__header`)
+            }, toDisplayString(header.value), 3)) : createCommentVNode("", true),
+            createElementVNode("div", {
+              class: normalizeClass(`${BASE_CLASS}__content`)
+            }, [
+              renderContent.value ? (openBlock(), createBlock(resolveDynamicComponent(renderContent.value), { key: 0 })) : (openBlock(), createElementBlock(Fragment, { key: 1 }, [
+                contentIcon.value ? (openBlock(), createElementBlock("span", _hoisted_1, [
+                  createVNode(_sfc_main$1, {
+                    icon: contentIcon.value,
+                    class: normalizeClass([unref(confirmPopupState).iconClasses])
+                  }, null, 8, ["icon", "class"])
+                ])) : createCommentVNode("", true),
+                createElementVNode("span", null, toDisplayString(unref(confirmPopupState).message), 1)
+              ], 64))
+            ], 2),
+            createElementVNode("div", {
+              class: normalizeClass(`${BASE_CLASS}__footer`)
+            }, [
+              createVNode(_sfc_main$2, {
+                icon: cancelAction.value.icon,
+                type: cancelAction.value.type,
+                color: cancelAction.value.color,
+                "data-test-name": "button-cancel",
+                onClick: onCancel
+              }, {
+                default: withCtx(() => [
+                  createTextVNode(toDisplayString(cancelAction.value.label), 1)
+                ]),
+                _: 1
+              }, 8, ["icon", "type", "color"]),
+              createVNode(_sfc_main$2, {
+                icon: confirmAction.value.icon,
+                type: confirmAction.value.type,
+                color: confirmAction.value.color,
+                "data-test-name": "button-confirm",
+                onClick: onConfirm
+              }, {
+                default: withCtx(() => [
+                  createTextVNode(toDisplayString(confirmAction.value.label), 1)
+                ]),
+                _: 1
+              }, 8, ["icon", "type", "color"])
+            ], 2)
+          ], 6)), [
+            [unref(ClickOutside), clickOutside, elementRef.value]
+          ])
+        ]),
+        _: 1
+      }, 8, ["visible", "virtual-ref", "effect", "persistent", "placement", "popper-class", "teleported", "stop-popper-mouse-event", "offset", "hide-after"])) : createCommentVNode("", true);
+    };
+  }
+});
+export {
+  _sfc_main as default
+};

package/library/components/VcPopover/VcConfirmPopover.vue3.mjs

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

package/library/components/VcPopover/VcPopover.vue.mjs

@@ -0,0 +1,130 @@
+import { defineComponent, ref, computed, openBlock, createBlock, unref, withCtx, createElementVNode, normalizeStyle, normalizeClass, renderSlot } from "vue";
+import { ElPopover } from "element-plus";
+import '../../assets/node_modules/element-plus/theme-chalk/src/popover.css';import '../../assets/node_modules/element-plus/theme-chalk/src/popper.css';import '../../assets/node_modules/element-plus/theme-chalk/src/base.css';
+import '../../assets/components/VcPopover/VcPopover.css';/* empty css                                                         */
+/* empty css                                                           */
+/* empty css                                                            */
+import { convertToUnit } from "../../utils/helpers.mjs";
+const BASE_CLASS = "vc-popover";
+const _sfc_main = /* @__PURE__ */ defineComponent({
+  __name: "VcPopover",
+  props: {
+    open: { type: Boolean, default: false },
+    popoverWidth: { default: 180 },
+    popoverMaxWidth: { default: void 0 },
+    themeEffect: { default: "light" },
+    placement: { default: "bottom" },
+    disabled: { type: Boolean, default: false },
+    teleported: { type: Boolean, default: true },
+    persistent: { type: Boolean, default: false },
+    mouseEvent: { type: Boolean, default: false },
+    delayClose: { default: 300 },
+    offset: { default: 8 },
+    popoverClass: { default: "" },
+    trigger: { default: "click" },
+    oppositePlacement: { default: void 0 }
+  },
+  emits: ["show", "hide"],
+  setup(__props, { expose: __expose, emit: __emit }) {
+    const OPPOSITE_POPUP_POSITIONS = {
+      top: "bottom",
+      bottom: "top",
+      left: "right",
+      right: "left"
+    };
+    const props = __props;
+    const emit = __emit;
+    const tooltipRef = ref();
+    const contentStyles = computed(() => {
+      if (props.popoverMaxWidth) {
+        return { maxWidth: convertToUnit(props.popoverMaxWidth) };
+      }
+      return "";
+    });
+    const isManual = computed(() => {
+      return props.trigger === "manual";
+    });
+    const popoverTrigger = computed(() => {
+      if (isManual.value || props.trigger === "manual") {
+        return "click";
+      }
+      return props.trigger;
+    });
+    const modelVisible = computed(() => {
+      if (isManual.value) {
+        return props.open;
+      }
+      return void 0;
+    });
+    const fallbackPlacements = computed(() => {
+      var _a;
+      if (props.oppositePlacement) {
+        return props.oppositePlacement;
+      }
+      const positions = (_a = props.placement) == null ? void 0 : _a.split("-");
+      const positionPrefix = OPPOSITE_POPUP_POSITIONS[positions[0]];
+      const positionSuffix = positions[1] ? `-${positions[1]}` : "";
+      return [`${positionPrefix}${positionSuffix}`];
+    });
+    function onShow(event) {
+      if (!isManual.value) {
+        emit("show", event);
+      }
+    }
+    function onHide(event) {
+      if (!isManual.value) {
+        emit("hide", event);
+      }
+    }
+    function hide() {
+      var _a;
+      (_a = tooltipRef.value) == null ? void 0 : _a.hide();
+    }
+    __expose({
+      onShow,
+      onHide,
+      hide,
+      contentStyles,
+      fallbackPlacements
+    });
+    return (_ctx, _cache) => {
+      return openBlock(), createBlock(unref(ElPopover), {
+        ref_key: "tooltipRef",
+        ref: tooltipRef,
+        visible: modelVisible.value,
+        disabled: __props.disabled,
+        effect: __props.themeEffect,
+        persistent: __props.persistent,
+        placement: __props.placement,
+        "popper-class": [BASE_CLASS, __props.popoverClass].join(" "),
+        trigger: popoverTrigger.value,
+        teleported: __props.teleported,
+        width: __props.popoverMaxWidth ? "auto" : __props.popoverWidth,
+        "gpu-acceleration": false,
+        "stop-popper-mouse-event": __props.mouseEvent,
+        "fallback-placements": fallbackPlacements.value,
+        offset: __props.offset,
+        "hide-after": __props.delayClose,
+        pure: "",
+        onShow,
+        onHide
+      }, {
+        reference: withCtx(() => [
+          renderSlot(_ctx.$slots, "reference", { open: modelVisible.value })
+        ]),
+        default: withCtx(() => [
+          createElementVNode("div", {
+            class: normalizeClass(`${BASE_CLASS}__content`),
+            style: normalizeStyle(contentStyles.value)
+          }, [
+            renderSlot(_ctx.$slots, "default")
+          ], 6)
+        ]),
+        _: 3
+      }, 8, ["visible", "disabled", "effect", "persistent", "placement", "popper-class", "trigger", "teleported", "width", "stop-popper-mouse-event", "fallback-placements", "offset", "hide-after"]);
+    };
+  }
+});
+export {
+  _sfc_main as default
+};

package/library/components/VcPopover/VcPopover.vue3.mjs

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

package/library/components/VcPopover/VcSelectPopover.vue.mjs

@@ -0,0 +1,150 @@
+import '../../assets/components/VcPopover/VcSelectPopover.css';
+import { defineComponent, ref, computed, watch, openBlock, createBlock, withCtx, withDirectives, createElementBlock, normalizeClass, toDisplayString, createCommentVNode, createElementVNode, createVNode, createTextVNode, unref, renderSlot } from "vue";
+import { ClickOutside } from "element-plus";
+import { tVU } from "../../localization/index.mjs";
+import _sfc_main$1 from "./VcPopover.vue.mjs";
+import '../../assets/components/VcButton/VcButton.css';import '../../assets/components/VcPopover/VcPopover.css';/* empty css                */
+import _sfc_main$2 from "../VcCheckboxGroup/VcCheckboxGroup.vue.mjs";
+import _sfc_main$3 from "../VcButton/VcButton.vue.mjs";
+/* empty css                         */
+const DEFAULT_PLACEMENT = "bottom";
+const BASE_CLASS = "vc-select-popover";
+const _sfc_main = /* @__PURE__ */ defineComponent({
+  __name: "VcSelectPopover",
+  props: {
+    options: {},
+    configOptions: {},
+    placement: { default: DEFAULT_PLACEMENT },
+    popoverMaxWidth: { default: "400" },
+    dataTestName: { default: "selectablePopover" },
+    header: { default: "" },
+    headerClasses: { default: "" },
+    confirmAction: { default: () => ({}) },
+    defaultChecked: { default: () => [] },
+    popoverOptions: { default: void 0 }
+  },
+  emits: ["close", "confirm"],
+  setup(__props, { expose: __expose, emit: __emit }) {
+    const DEFAULT_ACTION_PARAM = {
+      color: "primary",
+      icon: "vc-icon-checkmark",
+      type: "default",
+      size: "middle"
+    };
+    const props = __props;
+    const emit = __emit;
+    const open = ref(false);
+    const actionRef = ref();
+    const checkboxGroupModel = ref([]);
+    const confirmAction = computed(() => {
+      const options = props.confirmAction;
+      return {
+        type: (options == null ? void 0 : options.type) || DEFAULT_ACTION_PARAM.type,
+        size: (options == null ? void 0 : options.size) || DEFAULT_ACTION_PARAM.size,
+        icon: (options == null ? void 0 : options.icon) || DEFAULT_ACTION_PARAM.icon,
+        color: (options == null ? void 0 : options.color) || DEFAULT_ACTION_PARAM.color,
+        label: (options == null ? void 0 : options.label) || tVU.t("voicenterUi.general.confirm")
+      };
+    });
+    function toggleVisible() {
+      open.value = true;
+    }
+    function clickOutside() {
+      onCancel();
+    }
+    function onCancel() {
+      open.value = false;
+      emit("close");
+    }
+    function onConfirm() {
+      emit("confirm", [...checkboxGroupModel.value]);
+      open.value = false;
+    }
+    watch(
+      open,
+      (val) => {
+        if (val) {
+          checkboxGroupModel.value = [...props.defaultChecked];
+        }
+      }
+    );
+    __expose({
+      open: () => open.value = true,
+      close: () => open.value = false,
+      clickOutside,
+      DEFAULT_PLACEMENT,
+      /* Surfaced for tests; computed values are read-only at the boundary. */
+      header: computed(() => props.header),
+      placement: computed(() => props.placement),
+      popoverMaxWidth: computed(() => props.popoverMaxWidth)
+    });
+    return (_ctx, _cache) => {
+      var _a;
+      return openBlock(), createBlock(_sfc_main$1, {
+        open: open.value,
+        "popover-class": [BASE_CLASS, (_a = __props.popoverOptions) == null ? void 0 : _a.popoverClass].join(" "),
+        placement: DEFAULT_PLACEMENT,
+        "popover-max-width": __props.popoverMaxWidth,
+        trigger: "manual"
+      }, {
+        reference: withCtx(() => [
+          createElementVNode("div", {
+            ref_key: "actionRef",
+            ref: actionRef
+          }, [
+            renderSlot(_ctx.$slots, "default", {
+              handler: toggleVisible,
+              open: open.value
+            })
+          ], 512)
+        ]),
+        default: withCtx(() => [
+          withDirectives((openBlock(), createElementBlock("div", {
+            class: normalizeClass(`${BASE_CLASS}__popup`)
+          }, [
+            __props.header ? (openBlock(), createElementBlock("div", {
+              key: 0,
+              class: normalizeClass([`${BASE_CLASS}__header`, __props.headerClasses])
+            }, toDisplayString(__props.header), 3)) : createCommentVNode("", true),
+            createElementVNode("div", {
+              class: normalizeClass(`${BASE_CLASS}__content`)
+            }, [
+              createElementVNode("div", null, [
+                createVNode(_sfc_main$2, {
+                  modelValue: checkboxGroupModel.value,
+                  "onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => checkboxGroupModel.value = $event),
+                  "visible-all": false,
+                  config: __props.configOptions,
+                  checkboxes: __props.options
+                }, null, 8, ["modelValue", "config", "checkboxes"])
+              ])
+            ], 2),
+            createElementVNode("div", {
+              class: normalizeClass(`${BASE_CLASS}__footer`)
+            }, [
+              createVNode(_sfc_main$3, {
+                icon: confirmAction.value.icon,
+                type: confirmAction.value.type,
+                color: confirmAction.value.color,
+                "data-test-name": "button-confirm",
+                block: "",
+                onClick: onConfirm
+              }, {
+                default: withCtx(() => [
+                  createTextVNode(toDisplayString(confirmAction.value.label), 1)
+                ]),
+                _: 1
+              }, 8, ["icon", "type", "color"])
+            ], 2)
+          ], 2)), [
+            [unref(ClickOutside), clickOutside, actionRef.value]
+          ])
+        ]),
+        _: 3
+      }, 8, ["open", "popover-class", "popover-max-width"]);
+    };
+  }
+});
+export {
+  _sfc_main as default
+};

package/library/components/VcPopover/VcSelectPopover.vue3.mjs

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

package/library/components/VcProgress/VcProgress.vue.mjs

@@ -0,0 +1,125 @@
+import '../../assets/components/VcProgress/VcProgress.css';
+import { defineComponent, computed, openBlock, createElementBlock, normalizeStyle, createElementVNode, normalizeClass, renderSlot, toDisplayString, createCommentVNode } from "vue";
+import { convertToUnit } from "../../utils/helpers.mjs";
+import { DEFAULT_WIDTH, DEFAULT_HEIGHT, DEFAULT_DURATION, STATUS_ICON_MAP, STATUS_COLOR_MAP, STATUS_COLOR_VARS } from "./progress.options.mjs";
+const _hoisted_1 = ["aria-valuenow"];
+const _hoisted_2 = { class: "vc-progress-bar" };
+const _hoisted_3 = {
+  key: 0,
+  class: "vc-progress-bar__inner-text"
+};
+const _hoisted_4 = { key: 1 };
+const _sfc_main = /* @__PURE__ */ defineComponent({
+  __name: "VcProgress",
+  props: {
+    percentage: { default: 0 },
+    duration: { default: DEFAULT_DURATION },
+    height: { default: DEFAULT_HEIGHT },
+    status: { default: "" },
+    color: { default: "" },
+    indeterminate: { type: Boolean, default: false },
+    showStatusIcon: { type: Boolean, default: false },
+    textInside: { type: Boolean, default: false },
+    showText: { type: Boolean, default: true },
+    striped: { type: Boolean, default: false },
+    width: { default: DEFAULT_WIDTH },
+    format: { type: Function, default: (percentage) => `${percentage}%` },
+    customColorMethod: { type: Function, default: void 0 }
+  },
+  setup(__props) {
+    const props = __props;
+    const outerBarStyle = computed(() => {
+      return { height: convertToUnit(props.height) || "6px" };
+    });
+    const progressTextSize = computed(() => {
+      return 12 + props.height * 0.4;
+    });
+    const content = computed(() => {
+      return props.format(props.percentage);
+    });
+    const containerStyle = computed(() => {
+      return { width: convertToUnit(props.width) || `${DEFAULT_WIDTH}px` };
+    });
+    const barStyle = computed(() => {
+      return {
+        width: `${props.percentage}%`,
+        animationDuration: `${props.duration}s`,
+        backgroundColor: progressColor.value
+      };
+    });
+    const statusIcon = computed(() => {
+      if (!props.status || !props.showStatusIcon) {
+        return null;
+      }
+      const { variable, color } = getColor();
+      const _icon = STATUS_ICON_MAP[props.status] || STATUS_ICON_MAP.default;
+      return {
+        icon: _icon,
+        color: { color: `var(${variable}, ${color})` }
+      };
+    });
+    const progressColor = computed(() => {
+      if (props.customColorMethod) {
+        return props.customColorMethod(props.percentage);
+      } else if (props.color) {
+        return props.color;
+      } else {
+        const { variable, color } = getColor();
+        return `var(${variable}, ${color})`;
+      }
+    });
+    function getColor() {
+      return {
+        variable: STATUS_COLOR_VARS[props.status] || STATUS_COLOR_VARS.default,
+        color: STATUS_COLOR_MAP[props.status] || STATUS_COLOR_MAP.default
+      };
+    }
+    return (_ctx, _cache) => {
+      return openBlock(), createElementBlock("div", {
+        "aria-valuenow": __props.percentage,
+        style: normalizeStyle(containerStyle.value),
+        "aria-valuemax": "=100",
+        "aria-valuemin": "0",
+        role: "progressbar",
+        class: "vc-progress"
+      }, [
+        createElementVNode("div", _hoisted_2, [
+          createElementVNode("div", {
+            style: normalizeStyle(outerBarStyle.value),
+            class: "vc-progress-bar__outer"
+          }, [
+            createElementVNode("div", {
+              style: normalizeStyle(barStyle.value),
+              class: normalizeClass([{
+                "is-indeterminate": __props.indeterminate,
+                "is-striped": __props.striped
+              }, "vc-progress-bar__inner"])
+            }, [
+              (__props.showText || _ctx.$slots.default) && __props.textInside ? (openBlock(), createElementBlock("div", _hoisted_3, [
+                renderSlot(_ctx.$slots, "default", { percentage: __props.percentage }, () => [
+                  createElementVNode("span", null, toDisplayString(content.value), 1)
+                ])
+              ])) : createCommentVNode("", true)
+            ], 6)
+          ], 4)
+        ]),
+        (__props.showText || _ctx.$slots.default) && !__props.textInside ? (openBlock(), createElementBlock("div", {
+          key: 0,
+          style: normalizeStyle({ fontSize: `${progressTextSize.value}px` }),
+          class: "vc-progress__text"
+        }, [
+          renderSlot(_ctx.$slots, "default", { percentage: __props.percentage }, () => [
+            statusIcon.value ? (openBlock(), createElementBlock("span", {
+              key: 0,
+              class: normalizeClass(statusIcon.value.icon),
+              style: normalizeStyle(statusIcon.value.color)
+            }, null, 6)) : (openBlock(), createElementBlock("span", _hoisted_4, toDisplayString(content.value), 1))
+          ])
+        ], 4)) : createCommentVNode("", true)
+      ], 12, _hoisted_1);
+    };
+  }
+});
+export {
+  _sfc_main as default
+};

package/library/components/VcProgress/VcProgress.vue3.mjs

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