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

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

@@ -0,0 +1,207 @@
+import '../../assets/components/VcProgress/VcProgressCircular.css';
+import { defineComponent, computed, openBlock, createElementBlock, createElementVNode, normalizeStyle, renderSlot, toDisplayString, normalizeClass, createCommentVNode } from "vue";
+import { convertToUnit } from "../../utils/helpers.mjs";
+import { STATUS_ICON_MAP, STATUS_COLOR_VARS, STATUS_COLOR_MAP } from "./progress.options.mjs";
+const _hoisted_1 = ["aria-valuenow"];
+const _hoisted_2 = { viewBox: "0 0 100 100" };
+const _hoisted_3 = ["d", "stroke", "stroke-linecap", "stroke-width"];
+const _hoisted_4 = ["d", "stroke", "opacity", "stroke-linecap", "stroke-width"];
+const _hoisted_5 = {
+  key: 0,
+  class: "progress-circle__text"
+};
+const _hoisted_6 = { key: 0 };
+const DEFAULT_TRACK = "var(--ui-lines)";
+const _sfc_main = /* @__PURE__ */ defineComponent({
+  __name: "VcProgressCircular",
+  props: {
+    percentage: { default: 0 },
+    type: { default: "default" },
+    width: { default: 96 },
+    strokeWidth: { default: 6 },
+    strokeTrapWidth: { default: void 0 },
+    colorTrack: { default: DEFAULT_TRACK },
+    strokeLinecap: { default: "round" },
+    color: { type: [String, Array, Function], default: "" },
+    status: { default: "" },
+    format: { type: Function, default: (percentage) => `${percentage}` },
+    showContent: { type: Boolean, default: true },
+    statusColorMap: { default: void 0 }
+  },
+  setup(__props, { expose: __expose }) {
+    const props = __props;
+    const perimeter = computed(() => 2 * Math.PI * radius.value);
+    const content = computed(() => props.format(percentageValue.value));
+    const rate = computed(() => props.type === "dashboard" ? 0.75 : 1);
+    const percentageValue = computed(() => props.percentage <= 0 ? 0 : props.percentage >= 100 ? 100 : props.percentage);
+    const size = computed(() => {
+      return convertToUnit(props.width);
+    });
+    const relativeStrokeWidth = computed(
+      () => (props.strokeWidth / props.width * 100).toFixed(1)
+    );
+    const relativeTrapStrokeWidth = computed(() => {
+      if (!props.strokeTrapWidth) {
+        return relativeStrokeWidth.value;
+      }
+      return (props.strokeTrapWidth / props.width * 100).toFixed(1);
+    });
+    const strokeDashOffset = computed(() => {
+      const offset = -1 * perimeter.value * (1 - rate.value) / 2;
+      return `${offset}px`;
+    });
+    const radius = computed(() => {
+      return Number.parseInt(
+        `${50 - Number.parseFloat(relativeStrokeWidth.value) / 2}`,
+        10
+      );
+    });
+    const statusIcon = computed(() => {
+      if (!props.status) {
+        return null;
+      }
+      const { variable, color } = getDataColor();
+      const _icon = STATUS_ICON_MAP[props.status] || STATUS_ICON_MAP.default;
+      return {
+        icon: _icon,
+        color: { color: `var(${variable}, ${color})` }
+      };
+    });
+    const trackPath = computed(() => {
+      const r = radius.value;
+      const isDashboard = props.type === "dashboard";
+      return `
+          M 50 50
+          m 0 ${isDashboard ? "" : "-"}${r}
+          a ${r} ${r} 0 1 1 0 ${isDashboard ? "-" : ""}${r * 2}
+          a ${r} ${r} 0 1 1 0 ${isDashboard ? "" : "-"}${r * 2}
+          `;
+    });
+    const trailPathStyle = computed(() => ({
+      strokeDasharray: `${perimeter.value * rate.value}px, ${perimeter.value}px`,
+      strokeDashoffset: strokeDashOffset.value
+    }));
+    const stroke = computed(() => {
+      let ret;
+      if (props.color) {
+        ret = getCurrentColor(percentageValue.value);
+      } else {
+        ret = getStatusColor(props.status);
+      }
+      return ret || "";
+    });
+    const circlePathStyle = computed(() => ({
+      strokeDasharray: `${perimeter.value * rate.value * (percentageValue.value / 100)}px, ${perimeter.value}px`,
+      strokeDashoffset: strokeDashOffset.value,
+      transition: "stroke-dasharray 0.6s ease 0s, stroke 0.6s ease, opacity ease 0.6s"
+    }));
+    function getColorByString(color) {
+      if (color.startsWith("#")) {
+        return color;
+      }
+      const dataColor = getDataColor();
+      return `var(${dataColor.variable}, ${dataColor.color})`;
+    }
+    function getCurrentColor(percentage) {
+      var _a;
+      const { color } = props;
+      if (isFunction(color)) {
+        return color(percentage);
+      } else if (isString(color)) {
+        return getColorByString(color);
+      } else if (Array.isArray(color)) {
+        const colors = getColors(color);
+        for (const c of colors) {
+          if (c.percentage > percentage) return c.color;
+        }
+        return (_a = colors[colors.length - 1]) == null ? void 0 : _a.color;
+      }
+      return void 0;
+    }
+    function getDataColor() {
+      return {
+        variable: STATUS_COLOR_VARS[props.status] || STATUS_COLOR_VARS.default,
+        color: getStatusColor(props.status)
+      };
+    }
+    function getStatusColor(status) {
+      const _default = STATUS_COLOR_MAP.default;
+      if (props.statusColorMap) {
+        return props.statusColorMap[status] || props.statusColorMap.default || _default;
+      }
+      return STATUS_COLOR_MAP[status] || _default;
+    }
+    function getColors(color) {
+      const span = 100 / color.length;
+      const seriesColors = color.map((seriesColor, index) => {
+        if (isString(seriesColor)) {
+          return {
+            color: getColorByString(seriesColor),
+            percentage: (index + 1) * span
+          };
+        }
+        return seriesColor;
+      });
+      return seriesColors.sort((a, b) => a.percentage - b.percentage);
+    }
+    const isFunction = (val) => typeof val === "function";
+    const isString = (val) => typeof val === "string";
+    __expose({
+      rate,
+      percentageValue,
+      perimeter,
+      strokeDashOffset
+    });
+    return (_ctx, _cache) => {
+      return openBlock(), createElementBlock("div", {
+        "aria-valuenow": percentageValue.value,
+        role: "progressbar",
+        "aria-valuemin": "0",
+        "aria-valuemax": "100",
+        class: "vc-progress-circular"
+      }, [
+        createElementVNode("div", {
+          class: "progress-circle",
+          style: normalizeStyle({ height: size.value, width: size.value })
+        }, [
+          (openBlock(), createElementBlock("svg", _hoisted_2, [
+            createElementVNode("path", {
+              class: "progress-circle__track",
+              d: trackPath.value,
+              stroke: __props.colorTrack || DEFAULT_TRACK,
+              "stroke-linecap": __props.strokeLinecap,
+              "stroke-width": relativeTrapStrokeWidth.value,
+              fill: "none",
+              style: normalizeStyle(trailPathStyle.value)
+            }, null, 12, _hoisted_3),
+            createElementVNode("path", {
+              class: "progress-circle__path",
+              d: trackPath.value,
+              stroke: stroke.value,
+              fill: "none",
+              opacity: percentageValue.value ? 1 : 0,
+              "stroke-linecap": __props.strokeLinecap,
+              "stroke-width": relativeStrokeWidth.value,
+              style: normalizeStyle(circlePathStyle.value)
+            }, null, 12, _hoisted_4)
+          ])),
+          __props.showContent || _ctx.$slots.default ? (openBlock(), createElementBlock("div", _hoisted_5, [
+            renderSlot(_ctx.$slots, "default", { percentage: percentageValue.value }, () => {
+              var _a, _b;
+              return [
+                !__props.status ? (openBlock(), createElementBlock("span", _hoisted_6, toDisplayString(content.value), 1)) : (openBlock(), createElementBlock("span", {
+                  key: 1,
+                  class: normalizeClass((_a = statusIcon.value) == null ? void 0 : _a.icon),
+                  style: normalizeStyle((_b = statusIcon.value) == null ? void 0 : _b.color)
+                }, null, 6))
+              ];
+            })
+          ])) : createCommentVNode("", true)
+        ], 4)
+      ], 8, _hoisted_1);
+    };
+  }
+});
+export {
+  _sfc_main as default
+};

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

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

package/library/components/VcProgress/progress.options.mjs

@@ -0,0 +1,32 @@
+const DEFAULT_HEIGHT = 6;
+const DEFAULT_WIDTH = 350;
+const DEFAULT_DURATION = 3;
+const STATUS_ICON_MAP = {
+  success: "vc-icon-checkmark-solid",
+  error: "vc-icon-ticket-closed",
+  warning: "vc-icon-alert",
+  default: "vc-icon-checkmark-solid"
+};
+const STATUS_COLOR_MAP = {
+  primary: "var(--primary, #2675FF)",
+  success: "var(--success, #7ED321)",
+  error: "var(--error, #FF4D4D)",
+  warning: "var(--warning, #FAB11E)",
+  default: "var(--primary-alternative-actions, #2675FF)",
+  exception: "var(--destructive-actions, #FF4D4D)"
+};
+const STATUS_COLOR_VARS = {
+  primary: "--primary",
+  success: "--success",
+  error: "--error",
+  warning: "--warning",
+  default: "--primary"
+};
+export {
+  DEFAULT_DURATION,
+  DEFAULT_HEIGHT,
+  DEFAULT_WIDTH,
+  STATUS_COLOR_MAP,
+  STATUS_COLOR_VARS,
+  STATUS_ICON_MAP
+};

package/library/components/VcRadio/VcRadio.vue.mjs

@@ -0,0 +1,104 @@
+import { defineComponent, computed, openBlock, createBlock, unref, normalizeClass, withCtx, renderSlot, createTextVNode, toDisplayString } from "vue";
+import { ElRadio } from "element-plus";
+import '../../assets/node_modules/element-plus/theme-chalk/src/popover.css';import '../../assets/node_modules/element-plus/theme-chalk/src/transfer.css';import '../../assets/node_modules/element-plus/theme-chalk/src/tree.css';import '../../assets/node_modules/element-plus/theme-chalk/src/text.css';import '../../assets/node_modules/element-plus/theme-chalk/src/slider.css';import '../../assets/node_modules/element-plus/theme-chalk/src/color-picker.css';import '../../assets/node_modules/element-plus/theme-chalk/src/color-picker-panel.css';import '../../assets/node_modules/element-plus/theme-chalk/src/tooltip.css';import '../../assets/node_modules/element-plus/theme-chalk/src/date-picker-panel.css';import '../../assets/node_modules/element-plus/theme-chalk/src/button.css';import '../../assets/node_modules/element-plus/theme-chalk/src/checkbox-group.css';import '../../assets/node_modules/element-plus/theme-chalk/src/checkbox.css';import '../../assets/node_modules/element-plus/theme-chalk/src/radio-button.css';import '../../assets/node_modules/element-plus/theme-chalk/src/radio-group.css';import '../../assets/node_modules/element-plus/theme-chalk/src/radio.css';import '../../assets/node_modules/element-plus/theme-chalk/src/select.css';import '../../assets/node_modules/element-plus/theme-chalk/src/option-group.css';import '../../assets/node_modules/element-plus/theme-chalk/src/option.css';import '../../assets/node_modules/element-plus/theme-chalk/src/tag.css';import '../../assets/node_modules/element-plus/theme-chalk/src/autocomplete.css';import '../../assets/node_modules/element-plus/theme-chalk/src/popper.css';import '../../assets/node_modules/element-plus/theme-chalk/src/scrollbar.css';import '../../assets/node_modules/element-plus/theme-chalk/src/input-number.css';import '../../assets/node_modules/element-plus/theme-chalk/src/input.css';import '../../assets/node_modules/element-plus/theme-chalk/src/form-item.css';import '../../assets/node_modules/element-plus/theme-chalk/src/form.css';import '../../assets/node_modules/element-plus/theme-chalk/src/base.css';
+import '../../assets/components/VcRadio/VcRadio.css';/* empty css                                                         */
+/* empty css                                                         */
+/* empty css                                                              */
+/* empty css                                                          */
+/* empty css                                                                 */
+/* empty css                                                              */
+/* empty css                                                           */
+/* empty css                                                                 */
+/* empty css                                                        */
+/* empty css                                                           */
+/* empty css                                                                 */
+/* empty css                                                           */
+/* empty css                                                          */
+/* empty css                                                                */
+/* empty css                                                                 */
+/* empty css                                                             */
+/* empty css                                                                   */
+/* empty css                                                           */
+/* empty css                                                                      */
+/* empty css                                                                */
+/* empty css                                                                       */
+/* empty css                                                                 */
+/* empty css                                                            */
+/* empty css                                                           */
+/* empty css                                                         */
+/* empty css                                                         */
+/* empty css                                                             */
+/* empty css                                                            */
+const COLOR_CLASS = "vc-color--";
+const _sfc_main = /* @__PURE__ */ defineComponent({
+  __name: "VcRadio",
+  props: {
+    modelValue: { default: void 0 },
+    value: { default: void 0 },
+    label: { default: "" },
+    name: { default: "" },
+    color: { default: "" },
+    dataTestName: { default: "radio" },
+    disabled: { type: Boolean, default: false },
+    border: { type: Boolean, default: false }
+  },
+  emits: ["update:modelValue"],
+  setup(__props, { emit: __emit }) {
+    function toPrimitive(val) {
+      if (val === void 0) return void 0;
+      if (typeof val === "string" || typeof val === "number" || typeof val === "boolean") {
+        return val;
+      }
+      return void 0;
+    }
+    const props = __props;
+    const emit = __emit;
+    const model = computed({
+      get() {
+        return toPrimitive(props.modelValue);
+      },
+      set(val) {
+        if (val === void 0) {
+          return;
+        }
+        if (isModelPrimitive(val)) {
+          emit("update:modelValue", val);
+        }
+      }
+    });
+    function isModelPrimitive(val) {
+      return typeof val === "string" || typeof val === "number" || typeof val === "boolean";
+    }
+    const colorClasses = computed(() => {
+      const colorClass = props.color ? COLOR_CLASS + props.color : "";
+      return [
+        colorClass
+      ].join(" ");
+    });
+    const getLabel = computed(() => {
+      return toPrimitive(props.value);
+    });
+    return (_ctx, _cache) => {
+      return openBlock(), createBlock(unref(ElRadio), {
+        modelValue: model.value,
+        "onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => model.value = $event),
+        label: getLabel.value,
+        name: __props.name,
+        disabled: __props.disabled,
+        border: __props.border,
+        "data-test": __props.dataTestName,
+        class: normalizeClass([colorClasses.value, "vc-radio"])
+      }, {
+        default: withCtx(() => [
+          renderSlot(_ctx.$slots, "default", {}, () => [
+            createTextVNode(toDisplayString(__props.label), 1)
+          ])
+        ]),
+        _: 3
+      }, 8, ["modelValue", "label", "name", "disabled", "border", "data-test", "class"]);
+    };
+  }
+});
+export {
+  _sfc_main as default
+};

package/library/components/VcRadio/VcRadio.vue3.mjs

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

package/library/components/VcRadioButtons/VcRadioButtonsGroup.vue.mjs

@@ -0,0 +1,106 @@
+import { defineComponent, computed, openBlock, createBlock, unref, normalizeStyle, normalizeClass, withCtx, createElementBlock, Fragment, renderList, renderSlot, createTextVNode, toDisplayString, createCommentVNode } from "vue";
+import { ElRadioGroup, ElRadioButton } from "element-plus";
+import '../../assets/node_modules/element-plus/theme-chalk/src/radio-group.css';import '../../assets/node_modules/element-plus/theme-chalk/src/radio.css';import '../../assets/node_modules/element-plus/theme-chalk/src/radio-button.css';import '../../assets/node_modules/element-plus/theme-chalk/src/base.css';
+import '../../assets/components/VcRadioButtons/VcRadioButtonsGroup.css';/* empty css                                                         */
+/* empty css                                                                 */
+/* empty css                                                          */
+/* empty css                                                                */
+import useOptionMethods from "../../composables/option/useOptionMethods.mjs";
+import { convertToUnit } from "../../utils/helpers.mjs";
+const _sfc_main = /* @__PURE__ */ defineComponent({
+  __name: "VcRadioButtonsGroup",
+  props: {
+    modelValue: { default: void 0 },
+    disabled: { type: Boolean, default: false },
+    radios: { default: () => [] },
+    config: { default: void 0 },
+    size: { default: "default" },
+    color: { default: "primary" },
+    itemClass: { default: void 0 },
+    space: { default: void 0 }
+  },
+  emits: ["update:modelValue", "change"],
+  setup(__props, { emit: __emit }) {
+    function toPrimitive(v) {
+      if (typeof v === "string" || typeof v === "number" || typeof v === "boolean") return v;
+      return void 0;
+    }
+    const props = __props;
+    const emit = __emit;
+    const { optionListMap } = useOptionMethods();
+    function isModelValue(v) {
+      return v !== void 0;
+    }
+    const radioModel = computed({
+      get() {
+        return toPrimitive(props.modelValue);
+      },
+      set(value) {
+        if (value === void 0) {
+          emit("update:modelValue", void 0);
+          emit("change", void 0);
+          return;
+        }
+        if (isModelValue(value)) {
+          emit("update:modelValue", value);
+          emit("change", value);
+        }
+      }
+    });
+    const radiosMapped = computed(() => {
+      return optionListMap(props.radios, props.config);
+    });
+    const spaceValue = computed(() => {
+      if (!props.space) {
+        return void 0;
+      }
+      return convertToUnit(props.space);
+    });
+    function getColor(optionItem) {
+      if (!optionItem.color || props.color) {
+        return `vc-color--${optionItem.color || props.color}`;
+      }
+      return "";
+    }
+    return (_ctx, _cache) => {
+      return openBlock(), createBlock(unref(ElRadioGroup), {
+        modelValue: radioModel.value,
+        "onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => radioModel.value = $event),
+        size: __props.size,
+        disabled: __props.disabled,
+        class: normalizeClass([{
+          "is--spaced": __props.space
+        }, "vc-radio-buttons-group"]),
+        style: normalizeStyle({
+          "--offset-items": spaceValue.value
+        })
+      }, {
+        default: withCtx(() => [
+          (openBlock(true), createElementBlock(Fragment, null, renderList(radiosMapped.value, (radioItem, index) => {
+            return openBlock(), createBlock(unref(ElRadioButton), {
+              key: `radio-${index}`,
+              label: radioItem.label,
+              value: toPrimitive(radioItem.value),
+              class: normalizeClass([[getColor(radioItem), __props.itemClass], "vc-radio-buttons-group__button"]),
+              disabled: radioItem.disabled
+            }, {
+              default: withCtx(() => [
+                _ctx.$slots.item ? renderSlot(_ctx.$slots, "item", {
+                  key: 0,
+                  option: radioItem
+                }, () => [
+                  createTextVNode(toDisplayString(radioItem.label), 1)
+                ]) : createCommentVNode("", true)
+              ]),
+              _: 2
+            }, 1032, ["label", "value", "class", "disabled"]);
+          }), 128))
+        ]),
+        _: 3
+      }, 8, ["modelValue", "size", "disabled", "class", "style"]);
+    };
+  }
+});
+export {
+  _sfc_main as default
+};

package/library/components/VcRadioButtons/VcRadioButtonsGroup.vue3.mjs

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

package/library/components/VcRadioGroup/VcRadioGroup.vue.mjs

@@ -0,0 +1,82 @@
+import { defineComponent, computed, openBlock, createBlock, unref, normalizeClass, withCtx, createElementBlock, Fragment, renderList, createVNode, renderSlot, createCommentVNode } from "vue";
+import { ElRadioGroup } from "element-plus";
+import '../../assets/components/VcRadio/VcRadio.css';import '../../assets/node_modules/element-plus/theme-chalk/src/radio-group.css';import '../../assets/node_modules/element-plus/theme-chalk/src/radio.css';import '../../assets/node_modules/element-plus/theme-chalk/src/base.css';
+import '../../assets/components/VcRadioGroup/VcRadioGroup.css';/* empty css                                                         */
+/* empty css                                                          */
+/* empty css                                                                */
+import _sfc_main$1 from "../VcRadio/VcRadio.vue.mjs";
+/* empty css                       */
+import useOptionMethods from "../../composables/option/useOptionMethods.mjs";
+const _sfc_main = /* @__PURE__ */ defineComponent({
+  __name: "VcRadioGroup",
+  props: {
+    modelValue: { default: void 0 },
+    disabled: { type: Boolean, default: false },
+    radios: { default: () => [] },
+    config: { default: void 0 },
+    inline: { type: Boolean, default: false },
+    bordered: { type: Boolean, default: false },
+    color: { default: "primary" }
+  },
+  emits: ["update:modelValue", "change"],
+  setup(__props, { expose: __expose, emit: __emit }) {
+    const props = __props;
+    const emit = __emit;
+    const { optionListMap } = useOptionMethods();
+    const radioModel = computed({
+      get() {
+        return props.modelValue;
+      },
+      set(value) {
+        emit("update:modelValue", value);
+        emit("change", value);
+      }
+    });
+    const radiosMapped = computed(() => {
+      return optionListMap(props.radios, props.config);
+    });
+    __expose({
+      radioModel,
+      radiosMapped
+    });
+    return (_ctx, _cache) => {
+      return openBlock(), createBlock(unref(ElRadioGroup), {
+        modelValue: radioModel.value,
+        "onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => radioModel.value = $event),
+        class: normalizeClass([{
+          "is--inline": __props.inline,
+          "is--bordered": __props.bordered
+        }, "vc-radio-group"])
+      }, {
+        default: withCtx(() => [
+          (openBlock(true), createElementBlock(Fragment, null, renderList(radiosMapped.value, (radioItem, index) => {
+            return openBlock(), createElementBlock("div", {
+              key: `radio-${index}`,
+              class: "vc-radio-group__item"
+            }, [
+              createVNode(_sfc_main$1, {
+                value: radioItem.value,
+                label: radioItem.label,
+                disabled: radioItem.disabled,
+                color: radioItem.color || __props.color,
+                border: __props.bordered
+              }, {
+                default: withCtx(() => [
+                  _ctx.$slots["radio-label"] ? renderSlot(_ctx.$slots, "radio-label", {
+                    key: 0,
+                    data: radioItem.originalItem
+                  }) : createCommentVNode("", true)
+                ]),
+                _: 2
+              }, 1032, ["value", "label", "disabled", "color", "border"])
+            ]);
+          }), 128))
+        ]),
+        _: 3
+      }, 8, ["modelValue", "class"]);
+    };
+  }
+});
+export {
+  _sfc_main as default
+};

package/library/components/VcRadioGroup/VcRadioGroup.vue3.mjs

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

package/library/components/VcRadioTabs/UiComponents/VcRadioTabsNav.vue.mjs

@@ -0,0 +1,79 @@
+import '../../../assets/components/VcRadioTabs/UiComponents/VcRadioTabsNav.css';
+import { defineComponent, computed, openBlock, createElementBlock, normalizeClass, Fragment, renderList, withKeys, createElementVNode, normalizeStyle, createVNode, toDisplayString } from "vue";
+import { convertToUnit } from "../../../utils/helpers.mjs";
+import useOptionMethods from "../../../composables/option/useOptionMethods.mjs";
+import _sfc_main$1 from "../../VcIcon/VcIcon.vue.mjs";
+import '../../../assets/components/VcIcon/VcIcon.css';/* empty css                        */
+const _hoisted_1 = ["tabindex", "onClick", "onKeyup"];
+const _hoisted_2 = { class: "radio-tab-nav-name" };
+const DEFAULT_GAP_CLASSES = "gap-x-2 sm:gap-x-3 md:gap-x-6 lg:gap-x-12";
+const _sfc_main = /* @__PURE__ */ defineComponent({
+  __name: "VcRadioTabsNav",
+  props: {
+    activeTab: {},
+    config: { default: void 0 },
+    options: { default: () => [] },
+    contentMinWidth: { default: 60 },
+    headerClasses: { default: DEFAULT_GAP_CLASSES },
+    tabItemClasses: { default: void 0 },
+    borderPosition: { default: "top" },
+    position: { default: "center" }
+  },
+  emits: ["tab-click"],
+  setup(__props, { emit: __emit }) {
+    const props = __props;
+    const emit = __emit;
+    const { optionListMap } = useOptionMethods();
+    const optionsMapped = computed(() => {
+      return optionListMap(props.options, props.config);
+    });
+    const borderPositionClass = computed(() => {
+      return props.borderPosition === "bottom" ? "border-b-4" : "border-t-4";
+    });
+    const contentWidthStyle = computed(() => {
+      const _width = convertToUnit(props.contentMinWidth);
+      return { minWidth: _width };
+    });
+    function isActiveTab(tab) {
+      return tab.value === props.activeTab;
+    }
+    function onClick(option, index) {
+      if (option.disabled) {
+        return;
+      }
+      emit("tab-click", option.originalItem, index);
+    }
+    return (_ctx, _cache) => {
+      return openBlock(), createElementBlock("div", {
+        class: normalizeClass([`justify-${__props.position} ${__props.headerClasses}`, "vc-radio-tabs-nav"])
+      }, [
+        (openBlock(true), createElementBlock(Fragment, null, renderList(optionsMapped.value, (option, index) => {
+          return openBlock(), createElementBlock("div", {
+            key: `tab-${index}`,
+            class: normalizeClass([[{
+              "is--active": isActiveTab(option),
+              "is--disabled": option.disabled
+            }, borderPositionClass.value], "vc-radio-tabs-nav__item"]),
+            tabindex: option.disabled ? -1 : 0,
+            onClick: ($event) => onClick(option, index),
+            onKeyup: withKeys(($event) => onClick(option, index), ["enter"])
+          }, [
+            createElementVNode("div", {
+              class: normalizeClass([__props.tabItemClasses, "vc-radio-tabs-nav__item-content"]),
+              style: normalizeStyle(contentWidthStyle.value)
+            }, [
+              createVNode(_sfc_main$1, {
+                icon: option.icon,
+                class: "radio-tab-nav-icon icon-base"
+              }, null, 8, ["icon"]),
+              createElementVNode("span", _hoisted_2, toDisplayString(option.label), 1)
+            ], 6)
+          ], 42, _hoisted_1);
+        }), 128))
+      ], 2);
+    };
+  }
+});
+export {
+  _sfc_main as default
+};

package/library/components/VcRadioTabs/UiComponents/VcRadioTabsNav.vue3.mjs

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