@voicenter-team/voicenter-ui-plus 2.0.12 → 3.0.1

package/library/components/VcWizard/VcSummaryProgress.vue.mjs

@@ -0,0 +1,66 @@
+import '../../assets/components/VcWizard/VcSummaryProgress.css';
+import { defineComponent, computed, openBlock, createElementBlock, normalizeClass, withDirectives, createElementVNode, Fragment, renderList, createVNode, vShow } from "vue";
+import _sfc_main$1 from "../VcIcon/VcIcon.vue.mjs";
+import '../../assets/components/VcIcon/VcIcon.css';/* empty css                     */
+const _hoisted_1 = { class: "summary-step-dividers" };
+const _hoisted_2 = { class: "summary-step-progress-circle" };
+const _hoisted_3 = { class: "summary-step-progress-circle-icon" };
+const DEFAULT_ICON = "vc-icon-settings";
+const countDownIcons = 3;
+const _sfc_main = /* @__PURE__ */ defineComponent({
+  __name: "VcSummaryProgress",
+  props: {
+    icon: { default: DEFAULT_ICON },
+    lineFilled: { type: Boolean, default: false },
+    visible: { type: Boolean, default: false },
+    isActive: { type: Boolean, default: false },
+    activeDot: { type: Boolean, default: false },
+    hideDetails: { type: Boolean, default: false }
+  },
+  setup(__props) {
+    const props = __props;
+    const lineFilledClass = computed(() => {
+      return props.lineFilled ? "bg-progress-line-done" : "bg-progress-line-not-done";
+    });
+    const dotFilledClass = computed(() => {
+      return props.activeDot ? "border-progress-line-done" : "border-progress-line-not-done";
+    });
+    return (_ctx, _cache) => {
+      return openBlock(), createElementBlock("div", {
+        class: normalizeClass([{ "active": __props.isActive, "minify": __props.hideDetails }, "summary-step-progress"])
+      }, [
+        withDirectives(createElementVNode("div", {
+          class: normalizeClass([lineFilledClass.value, "summary-step-progress-line relative"])
+        }, [
+          createElementVNode("div", _hoisted_1, [
+            (openBlock(), createElementBlock(Fragment, null, renderList(countDownIcons, (item) => {
+              return createElementVNode("span", {
+                key: `down-${item}`,
+                class: "divide-icon"
+              }, [
+                createVNode(_sfc_main$1, { icon: "vc-icon-down icon-base text-main-bg" })
+              ]);
+            }), 64))
+          ]),
+          _cache[0] || (_cache[0] = createElementVNode("i", { class: "summary-step-progress-line-inner h-0 h-full" }, null, -1))
+        ], 2), [
+          [vShow, __props.visible]
+        ]),
+        createElementVNode("div", _hoisted_2, [
+          createElementVNode("div", {
+            class: normalizeClass([dotFilledClass.value, "summary-step-progress-circle-point"])
+          }, null, 2),
+          createElementVNode("div", _hoisted_3, [
+            createVNode(_sfc_main$1, {
+              icon: __props.icon,
+              class: normalizeClass([[__props.activeDot ? "text-active-elements" : "text-inactive-elements"], "step-icon min-w-8"])
+            }, null, 8, ["icon", "class"])
+          ])
+        ])
+      ], 2);
+    };
+  }
+});
+export {
+  _sfc_main as default
+};

package/library/components/VcWizard/VcSummaryProgress.vue3.mjs

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

package/library/components/VcWizard/VcSummaryStep.vue.mjs

@@ -0,0 +1,114 @@
+import '../../assets/components/VcWizard/VcSummaryStep.css';
+import { defineComponent, computed, openBlock, createElementBlock, normalizeClass, createVNode, createElementVNode, createBlock, createCommentVNode, toDisplayString, withDirectives, vShow, Transition, withCtx, Fragment, renderList } from "vue";
+import _sfc_main$1 from "./VcSummaryProgress.vue.mjs";
+import '../../assets/components/VcIcon/VcIcon.css';import '../../assets/components/VcWizard/VcSummaryProgress.css';/* empty css                        */
+import _sfc_main$2 from "../VcIcon/VcIcon.vue.mjs";
+/* empty css                     */
+const _hoisted_1 = { class: "summary-step-content" };
+const _hoisted_2 = { class: "flex justify-center lg:justify-between" };
+const _hoisted_3 = {
+  key: 0,
+  class: "summary-step-content-list"
+};
+const _hoisted_4 = { class: "font-medium text-sm xl:text-base" };
+const _hoisted_5 = ["innerHTML"];
+const _sfc_main = /* @__PURE__ */ defineComponent({
+  __name: "VcSummaryStep",
+  props: {
+    stepIndex: { default: -1 },
+    step: {},
+    stepsCount: { default: 0 },
+    visited: { default: 0 },
+    activeIndex: { default: 0 },
+    content: { default: () => [] },
+    hideDetails: { type: Boolean, default: false }
+  },
+  emits: ["click-step"],
+  setup(__props, { emit: __emit }) {
+    const props = __props;
+    const emit = __emit;
+    const canEdit = computed(() => {
+      return props.stepIndex <= props.visited && props.stepIndex !== props.activeIndex;
+    });
+    const isVisited = computed(() => {
+      return props.stepIndex <= props.visited;
+    });
+    const isPassed = computed(() => {
+      return props.stepIndex < props.visited;
+    });
+    const isActive = computed(() => {
+      return props.stepIndex === props.activeIndex;
+    });
+    const isProgressLine = computed(() => {
+      return props.stepIndex < props.stepsCount - 1;
+    });
+    function onClickSepSummary() {
+      if (canEdit.value) {
+        emit("click-step", props.stepIndex);
+      }
+    }
+    return (_ctx, _cache) => {
+      return openBlock(), createElementBlock("div", {
+        class: normalizeClass([{
+          "active": isActive.value,
+          "passed": isPassed.value,
+          "visited": isVisited.value,
+          "minify": __props.hideDetails
+        }, "summary-step"]),
+        onClick: onClickSepSummary
+      }, [
+        createVNode(_sfc_main$1, {
+          icon: __props.step.icon,
+          visible: isProgressLine.value,
+          "line-filled": isPassed.value,
+          "active-dot": isVisited.value,
+          "is-active": isActive.value,
+          "hide-details": __props.hideDetails
+        }, null, 8, ["icon", "visible", "line-filled", "active-dot", "is-active", "hide-details"]),
+        createElementVNode("div", _hoisted_1, [
+          createElementVNode("div", _hoisted_2, [
+            __props.hideDetails ? (openBlock(), createBlock(_sfc_main$2, {
+              key: 0,
+              icon: __props.step.icon,
+              class: normalizeClass([[isActive.value ? "text-active-elements" : "text-inactive-elements"], "icon-lg hidden lg:block"])
+            }, null, 8, ["icon", "class"])) : createCommentVNode("", true),
+            createElementVNode("span", {
+              class: normalizeClass([{ "truncate": __props.hideDetails }, "summary-step-content-header leading-none"])
+            }, [
+              createElementVNode("span", {
+                class: normalizeClass([{ "text-primary": isActive.value }, "mb-0 text-sm xl:text-base font-bold uppercase"])
+              }, toDisplayString(`${(__props.stepIndex ?? 0) + 1}. ${__props.step.label}`), 3)
+            ], 2),
+            withDirectives(createVNode(_sfc_main$2, { icon: "vc-icon-edit-pencil icon-base text-active-elements relative -mr-4 edit-icon" }, null, 512), [
+              [vShow, canEdit.value]
+            ])
+          ]),
+          createVNode(Transition, { name: "fade-content" }, {
+            default: withCtx(() => [
+              !__props.hideDetails ? withDirectives((openBlock(), createElementBlock("div", _hoisted_3, [
+                (openBlock(true), createElementBlock(Fragment, null, renderList(__props.content, (row, i) => {
+                  return openBlock(), createElementBlock("div", {
+                    key: `r-${i}`,
+                    class: "mb-1 flex"
+                  }, [
+                    createElementVNode("div", _hoisted_4, toDisplayString(row.label) + ":  ", 1),
+                    createElementVNode("div", {
+                      class: "text-value font-normal text-sm lg:text-base break-normal",
+                      innerHTML: row.value
+                    }, null, 8, _hoisted_5)
+                  ]);
+                }), 128))
+              ], 512)), [
+                [vShow, isVisited.value]
+              ]) : createCommentVNode("", true)
+            ]),
+            _: 1
+          })
+        ])
+      ], 2);
+    };
+  }
+});
+export {
+  _sfc_main as default
+};

package/library/components/VcWizard/VcSummaryStep.vue3.mjs

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

package/library/components/VcWizard/VcWizard.vue.mjs

@@ -0,0 +1,313 @@
+import '../../assets/components/VcWizard/VcWizard.css';
+import { defineComponent, useSlots, ref, computed, watch, onMounted, onBeforeUnmount, openBlock, createElementBlock, normalizeStyle, normalizeClass, createElementVNode, withDirectives, renderSlot, toDisplayString, unref, vShow, Fragment, renderList, mergeProps, createCommentVNode, createVNode, createSlots, withCtx, createBlock } from "vue";
+import { convertToUnit } from "../../utils/helpers.mjs";
+import _sfc_main$2 from "./VcWizardSummary.vue.mjs";
+import '../../assets/components/VcWizard/VcWizardNavigation.css';import '../../assets/components/VcWizard/VcWizardSummary.css';/* empty css                      */
+import _sfc_main$1 from "./VcWizardNavigation.vue.mjs";
+/* empty css                         */
+import { tVU } from "../../localization/index.mjs";
+const _hoisted_1 = { class: "vc-wizard-steps" };
+const _hoisted_2 = { class: "vc-wizard-steps-content" };
+const _hoisted_3 = { class: "steps-header" };
+const _hoisted_4 = { class: "px-5" };
+const _hoisted_5 = {
+  key: 1,
+  class: "text-sm font-medium"
+};
+const _hoisted_6 = { class: "px-5" };
+const _hoisted_7 = { class: "steps-content" };
+const _hoisted_8 = { class: "vc-stepper__items relative" };
+const _sfc_main = /* @__PURE__ */ defineComponent({
+  __name: "VcWizard",
+  props: {
+    activeStep: { default: 0 },
+    steps: { default: () => [] },
+    showHeader: { type: Boolean, default: true },
+    showSummary: { type: Boolean, default: true },
+    dataLoading: { type: Boolean, default: false },
+    summary: { default: () => ({}) },
+    height: { default: "100%" },
+    canNext: { type: Boolean, default: true },
+    lazy: { type: Boolean, default: false },
+    minifySummery: { type: Boolean, default: false },
+    autoStepGuards: { type: Boolean, default: false }
+  },
+  emits: ["update-step", "cancel", "final"],
+  setup(__props, { expose: __expose, emit: __emit }) {
+    const deprecatedWizardKeysWarned = /* @__PURE__ */ new Set();
+    function warnDeprecatedWizardKey(oldKey, newKey) {
+      if (deprecatedWizardKeysWarned.has(oldKey)) return;
+      deprecatedWizardKeysWarned.add(oldKey);
+      console.warn(
+        `[VcWizard] step.${oldKey} is deprecated and will be removed in v4. Rename it to step.${newKey}.`
+      );
+    }
+    const slots = useSlots();
+    const props = __props;
+    const emit = __emit;
+    const isMobile = ref(false);
+    const activeIndex = ref(0);
+    const maxVisited = ref(0);
+    const lastEnteredStepIndex = ref(-1);
+    const isFinalStep = computed(() => {
+      var _a;
+      return activeIndex.value >= ((_a = props.steps) == null ? void 0 : _a.length) - 1;
+    });
+    const isFinalAddSlot = computed(() => {
+      return !!(isFinalStep.value && slots["final-actions"]);
+    });
+    const wizardHeight = computed(() => {
+      return convertToUnit(props.height);
+    });
+    function shouldBeRender(index) {
+      return !props.lazy || (wasLoaded(index) || isActive(index));
+    }
+    function wasLoaded(index) {
+      return index <= maxVisited.value;
+    }
+    function isActive(index) {
+      return index === activeIndex.value;
+    }
+    function resizeHandler() {
+      isMobile.value = window && window.innerWidth < 680;
+    }
+    function resetWizardData() {
+      lastEnteredStepIndex.value = -1;
+      activeIndex.value = 0;
+      maxVisited.value = 0;
+      void runOnEnterStepFn(activeIndex.value);
+    }
+    function setMaxVisitedStep(val) {
+      if (val >= 0 && val > maxVisited.value) {
+        maxVisited.value = val;
+      }
+    }
+    function onNext() {
+      if (!isFinalStep.value) {
+        void goToStep(activeIndex.value + 1);
+      }
+    }
+    function onPrev() {
+      if (activeIndex.value > 0) {
+        void goToStep(activeIndex.value - 1);
+      }
+    }
+    async function runStepPrepareFn(index) {
+      var _a;
+      const stepItem = (_a = props.steps) == null ? void 0 : _a[index];
+      if (!(stepItem == null ? void 0 : stepItem.prepareStepFn)) {
+        return;
+      }
+      try {
+        await stepItem.prepareStepFn();
+      } catch (error) {
+        console.error(error);
+      }
+    }
+    async function runStepValidateFn(index) {
+      var _a;
+      const stepItem = (_a = props.steps) == null ? void 0 : _a[index];
+      if ((stepItem == null ? void 0 : stepItem.beforeStepFn) && !(stepItem == null ? void 0 : stepItem.validateStepFn)) {
+        warnDeprecatedWizardKey("beforeStepFn", "validateStepFn");
+      }
+      const validateStepFn = (stepItem == null ? void 0 : stepItem.validateStepFn) || (stepItem == null ? void 0 : stepItem.beforeStepFn);
+      if (!validateStepFn) {
+        return true;
+      }
+      try {
+        return await validateStepFn();
+      } catch (error) {
+        console.error(error);
+        return false;
+      }
+    }
+    async function resolveAllowedStepIndex(targetIndex) {
+      if (!props.autoStepGuards || targetIndex <= activeIndex.value) {
+        return targetIndex;
+      }
+      for (let index = 0; index <= targetIndex; index++) {
+        await runStepPrepareFn(index);
+        if (index < targetIndex) {
+          const isValid = await runStepValidateFn(index);
+          if (!isValid) {
+            return index;
+          }
+        }
+      }
+      return targetIndex;
+    }
+    async function goToStep(index) {
+      const maxIndex = props.steps.length - 1;
+      const targetIndex = Math.max(0, Math.min(index, maxIndex));
+      const allowedStepIndex = await resolveAllowedStepIndex(targetIndex);
+      if (allowedStepIndex === activeIndex.value) {
+        return;
+      }
+      emit(
+        "update-step",
+        allowedStepIndex,
+        {
+          isVisited: allowedStepIndex <= maxVisited.value
+        }
+      );
+    }
+    function onCancel() {
+      emit("cancel");
+    }
+    function onFinal() {
+      emit("final");
+    }
+    function setActiveIndex() {
+      if (!isNaN(Number(props.activeStep))) {
+        activeIndex.value = +props.activeStep;
+      } else {
+        const index = props.steps.findIndex((i) => (i == null ? void 0 : i.step) === props.activeStep);
+        activeIndex.value = index >= 0 ? index : 0;
+      }
+    }
+    async function runOnEnterStepFn(index) {
+      var _a;
+      if (index === lastEnteredStepIndex.value) {
+        return;
+      }
+      lastEnteredStepIndex.value = index;
+      const currentStep = (_a = props.steps) == null ? void 0 : _a[index];
+      if ((currentStep == null ? void 0 : currentStep.onEnterStepFn) && !(currentStep == null ? void 0 : currentStep.initStepFn)) {
+        warnDeprecatedWizardKey("onEnterStepFn", "initStepFn");
+      }
+      const initStepFn = (currentStep == null ? void 0 : currentStep.initStepFn) || (currentStep == null ? void 0 : currentStep.onEnterStepFn);
+      if (initStepFn) {
+        try {
+          await initStepFn();
+        } catch (error) {
+          console.error(error);
+        }
+      }
+    }
+    watch(
+      activeIndex,
+      (newV) => {
+        setMaxVisitedStep(newV);
+        void runOnEnterStepFn(newV);
+      }
+    );
+    watch(
+      () => props.activeStep,
+      setActiveIndex
+    );
+    onMounted(() => {
+      setActiveIndex();
+      void runOnEnterStepFn(activeIndex.value);
+      resizeHandler();
+      window.addEventListener("resize", resizeHandler, true);
+    });
+    onBeforeUnmount(() => {
+      window.removeEventListener("resize", resizeHandler, true);
+    });
+    __expose({
+      resetWizardData,
+      onPrev,
+      onNext,
+      goToStep,
+      activeIndex,
+      maxVisited,
+      isMobile
+    });
+    return (_ctx, _cache) => {
+      var _a;
+      return openBlock(), createElementBlock("div", {
+        class: normalizeClass([{
+          "full-width": !__props.showSummary,
+          "no-header": !__props.showHeader,
+          "summery-minify": __props.minifySummery
+        }, "vc-wizard"]),
+        style: normalizeStyle({
+          height: wizardHeight.value
+        })
+      }, [
+        createElementVNode("div", _hoisted_1, [
+          createElementVNode("div", _hoisted_2, [
+            withDirectives(createElementVNode("div", _hoisted_3, [
+              createElementVNode("div", _hoisted_4, [
+                _ctx.$slots["header-nav"] ? renderSlot(_ctx.$slots, "header-nav", { key: 0 }) : (openBlock(), createElementBlock("span", _hoisted_5, toDisplayString(unref(tVU).t("voicenterUi.wizard.step.of", { current: activeIndex.value + 1, length: ((_a = __props.steps) == null ? void 0 : _a.length) ?? 0 })), 1))
+              ]),
+              createElementVNode("div", _hoisted_6, [
+                renderSlot(_ctx.$slots, "header-info")
+              ])
+            ], 512), [
+              [vShow, __props.showHeader]
+            ]),
+            createElementVNode("div", _hoisted_7, [
+              createElementVNode("div", _hoisted_8, [
+                (openBlock(true), createElementBlock(Fragment, null, renderList(__props.steps, (step, index) => {
+                  return openBlock(), createElementBlock(Fragment, {
+                    key: `step-${index}`
+                  }, [
+                    shouldBeRender(index) ? withDirectives((openBlock(), createElementBlock("div", mergeProps({
+                      key: 0,
+                      ref_for: true
+                    }, step.attrs || {}, { class: "vc-stepper__content" }), [
+                      renderSlot(_ctx.$slots, step.step, {
+                        step,
+                        index
+                      })
+                    ], 16)), [
+                      [vShow, index === activeIndex.value]
+                    ]) : createCommentVNode("", true)
+                  ], 64);
+                }), 128))
+              ])
+            ]),
+            createVNode(_sfc_main$1, {
+              "is-mobile": isMobile.value,
+              "show-prev-btn": !!activeIndex.value,
+              "show-next-btn": !isFinalStep.value,
+              "show-final-btn": isFinalStep.value,
+              "show-final-add-slot": isFinalAddSlot.value,
+              loading: __props.dataLoading,
+              "disabled-next-btn": !__props.canNext,
+              onOnCancel: onCancel,
+              onOnPrev: onPrev,
+              onOnNext: onNext,
+              onOnFinal: onFinal
+            }, createSlots({ _: 2 }, [
+              isFinalAddSlot.value ? {
+                name: "additional-actions",
+                fn: withCtx(() => [
+                  renderSlot(_ctx.$slots, "final-actions")
+                ]),
+                key: "0"
+              } : void 0,
+              _ctx.$slots["extra-actions"] ? {
+                name: "extra-actions",
+                fn: withCtx(() => [
+                  renderSlot(_ctx.$slots, "extra-actions")
+                ]),
+                key: "1"
+              } : void 0,
+              _ctx.$slots.navigation ? {
+                name: "navigation",
+                fn: withCtx(() => [
+                  renderSlot(_ctx.$slots, "navigation")
+                ]),
+                key: "2"
+              } : void 0
+            ]), 1032, ["is-mobile", "show-prev-btn", "show-next-btn", "show-final-btn", "show-final-add-slot", "loading", "disabled-next-btn"])
+          ])
+        ]),
+        __props.showSummary ? (openBlock(), createBlock(_sfc_main$2, {
+          key: 0,
+          steps: __props.steps,
+          "active-index": +activeIndex.value,
+          visited: maxVisited.value,
+          content: __props.summary,
+          "hide-details": __props.minifySummery,
+          onUpdateStep: goToStep
+        }, null, 8, ["steps", "active-index", "visited", "content", "hide-details"])) : createCommentVNode("", true)
+      ], 6);
+    };
+  }
+});
+export {
+  _sfc_main as default
+};

package/library/components/VcWizard/VcWizard.vue3.mjs

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

package/library/components/VcWizard/VcWizardNavigation.vue.mjs

@@ -0,0 +1,154 @@
+import '../../assets/components/VcWizard/VcWizardNavigation.css';
+import { defineComponent, computed, openBlock, createElementBlock, renderSlot, createElementVNode, createVNode, withCtx, createTextVNode, toDisplayString, createCommentVNode, createBlock } from "vue";
+import { tVU } from "../../localization/index.mjs";
+import _sfc_main$1 from "../VcButton/VcButton.vue.mjs";
+import '../../assets/components/VcIcon/VcIcon.css';import '../../assets/components/VcButton/VcButton.css';/* empty css                         */
+import _sfc_main$2 from "../VcIcon/VcIcon.vue.mjs";
+/* empty css                     */
+const _hoisted_1 = { class: "vc-wizard-navigation" };
+const _hoisted_2 = { class: "left-actions" };
+const _hoisted_3 = {
+  key: 0,
+  class: "extra-actions"
+};
+const _hoisted_4 = { class: "right-actions" };
+const _hoisted_5 = { class: "default-actions" };
+const _hoisted_6 = { class: "action-item" };
+const _hoisted_7 = {
+  key: 0,
+  class: "action-item"
+};
+const _hoisted_8 = {
+  key: 1,
+  class: "action-item"
+};
+const _hoisted_9 = {
+  key: 0,
+  class: "additional-actions"
+};
+const _sfc_main = /* @__PURE__ */ defineComponent({
+  __name: "VcWizardNavigation",
+  props: {
+    cancelName: { default: "" },
+    backName: { default: "" },
+    nextName: { default: "" },
+    finalName: { default: "" },
+    showPrevBtn: { type: Boolean, default: false },
+    showNextBtn: { type: Boolean, default: true },
+    disabledNextBtn: { type: Boolean, default: false },
+    showFinalBtn: { type: Boolean, default: true },
+    showFinalAddSlot: { type: Boolean, default: true },
+    loading: { type: Boolean, default: false },
+    isMobile: { type: Boolean, default: false }
+  },
+  emits: ["on-cancel", "on-prev", "on-next", "on-final"],
+  setup(__props, { emit: __emit }) {
+    const props = __props;
+    const emit = __emit;
+    const cancelButtonText = computed(() => {
+      return props.cancelName ? props.cancelName : tVU.t("voicenterUi.wizard.navigation.cancel");
+    });
+    const backButtonText = computed(() => {
+      return props.backName ? props.backName : tVU.t("voicenterUi.wizard.navigation.back");
+    });
+    const nextButtonText = computed(() => {
+      return props.nextName ? props.nextName : tVU.t("voicenterUi.wizard.navigation.next");
+    });
+    const finalButtonText = computed(() => {
+      return props.finalName ? props.finalName : tVU.t("voicenterUi.wizard.navigation.finish");
+    });
+    function onCancel() {
+      emit("on-cancel");
+    }
+    function onPrev() {
+      emit("on-prev");
+    }
+    function onNext() {
+      emit("on-next");
+    }
+    function onFinal() {
+      emit("on-final");
+    }
+    return (_ctx, _cache) => {
+      return openBlock(), createElementBlock("div", _hoisted_1, [
+        renderSlot(_ctx.$slots, "navigation", {}, () => [
+          createElementVNode("div", _hoisted_2, [
+            createVNode(_sfc_main$1, {
+              block: __props.isMobile,
+              size: __props.isMobile ? "middle" : "large",
+              color: "secondary",
+              type: "outline",
+              icon: "vc-icon-cancel",
+              onClick: onCancel
+            }, {
+              default: withCtx(() => [
+                createTextVNode(toDisplayString(cancelButtonText.value), 1)
+              ]),
+              _: 1
+            }, 8, ["block", "size"])
+          ]),
+          _ctx.$slots["extra-actions"] ? (openBlock(), createElementBlock("div", _hoisted_3, [
+            renderSlot(_ctx.$slots, "extra-actions")
+          ])) : createCommentVNode("", true),
+          createElementVNode("div", _hoisted_4, [
+            createElementVNode("div", _hoisted_5, [
+              createElementVNode("div", _hoisted_6, [
+                __props.showPrevBtn ? (openBlock(), createBlock(_sfc_main$1, {
+                  key: 0,
+                  block: __props.isMobile,
+                  size: __props.isMobile ? "middle" : "large",
+                  "data-test-name": "back-action",
+                  type: "borderless",
+                  icon: "vc-icon-back",
+                  onClick: onPrev
+                }, {
+                  default: withCtx(() => [
+                    createTextVNode(toDisplayString(backButtonText.value), 1)
+                  ]),
+                  _: 1
+                }, 8, ["block", "size"])) : createCommentVNode("", true)
+              ]),
+              __props.showNextBtn ? (openBlock(), createElementBlock("div", _hoisted_7, [
+                createVNode(_sfc_main$1, {
+                  block: __props.isMobile,
+                  size: __props.isMobile ? "middle" : "large",
+                  loading: __props.loading,
+                  disabled: __props.disabledNextBtn,
+                  "data-test-name": "next-action",
+                  onClick: onNext
+                }, {
+                  default: withCtx(() => [
+                    createElementVNode("span", null, toDisplayString(nextButtonText.value), 1),
+                    createVNode(_sfc_main$2, { icon: "vc-icon-next icon-base" })
+                  ]),
+                  _: 1
+                }, 8, ["block", "size", "loading", "disabled"])
+              ])) : createCommentVNode("", true),
+              __props.showFinalBtn ? (openBlock(), createElementBlock("div", _hoisted_8, [
+                createVNode(_sfc_main$1, {
+                  size: __props.isMobile ? "middle" : "large",
+                  block: __props.isMobile,
+                  loading: __props.loading,
+                  "data-test-name": "final-action",
+                  icon: "vc-icon-save",
+                  onClick: onFinal
+                }, {
+                  default: withCtx(() => [
+                    createTextVNode(toDisplayString(finalButtonText.value), 1)
+                  ]),
+                  _: 1
+                }, 8, ["size", "block", "loading"])
+              ])) : createCommentVNode("", true)
+            ]),
+            __props.showFinalAddSlot ? (openBlock(), createElementBlock("div", _hoisted_9, [
+              renderSlot(_ctx.$slots, "additional-actions")
+            ])) : createCommentVNode("", true)
+          ])
+        ])
+      ]);
+    };
+  }
+});
+export {
+  _sfc_main as default
+};

package/library/components/VcWizard/VcWizardNavigation.vue3.mjs

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