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

package/library/components/VcTree/VcTreeSelect.vue.mjs

@@ -0,0 +1,364 @@
+import '../../assets/components/VcTree/VcTreeSelect.css';
+import { defineComponent, ref, computed, watch, nextTick, onMounted, onBeforeUnmount, openBlock, createElementBlock, normalizeStyle, normalizeClass, createVNode, withCtx, withDirectives, createElementVNode, createBlock, createSlots, renderSlot, toDisplayString, unref, withModifiers, createCommentVNode, Fragment, renderList } from "vue";
+import { asArray, asTreeKey } from "./treeTypeUtils.mjs";
+import _sfc_main$1 from "../VcPopover/VcPopover.vue.mjs";
+import '../../assets/components/VcTree/VcTree.css';import '../../assets/components/VcIcon/VcIcon.css';import '../../assets/components/VcTag/VcTag.css';import '../../assets/components/VcPopover/VcPopover.css';/* empty css                           */
+import VcDelimitedList from "../VcDelimitedList/VcDelimitedList.vue.mjs";
+import _sfc_main$4 from "../VcTag/VcTag.vue.mjs";
+/* empty css                   */
+import _sfc_main$3 from "../VcIcon/VcIcon.vue.mjs";
+/* empty css                     */
+import useInputColor from "../../composables/input/useInputColor.mjs";
+import useOptionMethods from "../../composables/option/useOptionMethods.mjs";
+import { tVU } from "../../localization/index.mjs";
+import { ClickOutside } from "element-plus";
+import _sfc_main$2 from "./VcTree.vue.mjs";
+/* empty css             */
+const _hoisted_1 = {
+  key: 0,
+  class: "vc-tree-select__prefix-icon"
+};
+const _hoisted_2 = { class: "vc-tree-select__content w-full" };
+const _hoisted_3 = { class: "vc-tree-select__tags flex flex-wrap pr-2 w-full" };
+const _hoisted_4 = { class: "w-full py-3 px-2 min-w-max" };
+const _hoisted_5 = { class: "vc-tree-select__suffix-icon" };
+const _hoisted_6 = { class: "vc-tree-select__dropdown-tree-content" };
+const _hoisted_7 = {
+  key: 1,
+  class: "vc-tree-select__empty-text"
+};
+const COLOR_CLASS = "vc-tree-select--";
+const tagMaxContent = "160";
+const _sfc_main = /* @__PURE__ */ defineComponent({
+  __name: "VcTreeSelect",
+  props: {
+    loading: { type: Boolean, default: false },
+    modelValue: { default: () => [] },
+    class: { default: "" },
+    style: { default: null },
+    nodeKey: { default: "key" },
+    tagColor: { default: "primary" },
+    config: {},
+    options: { default: () => [] },
+    emptyText: { default: "" },
+    tagsLimit: { default: 3 },
+    scrollHeight: { default: 252 },
+    tagBorderless: { type: Boolean, default: false },
+    isError: { type: Boolean, default: false },
+    color: { default: "primary" },
+    useTypes: { default: () => [] },
+    returnedType: { default: "parentOnly" },
+    tagsSquare: { type: Boolean, default: false },
+    clearFilterOnOptionsChange: { type: Boolean, default: true },
+    id: {},
+    disabled: { type: Boolean },
+    clearable: { type: Boolean },
+    prefixIcon: {},
+    dataTestName: {},
+    prefixIconSize: {},
+    name: {},
+    placeholder: {},
+    maxWidth: {},
+    prefixIconColor: {}
+  },
+  emits: ["update:modelValue", "on-change"],
+  setup(__props, { expose: __expose, emit: __emit }) {
+    const props = __props;
+    const emit = __emit;
+    const inputFieldRef = ref();
+    const open = ref(false);
+    const containerWidth = ref("");
+    const treNodeRef = ref();
+    const { inputClasses, prefixClasses, prefixStyle, prefixIcon: resolvedPrefixIcon } = useInputColor(
+      props,
+      {
+        colorClass: COLOR_CLASS
+      }
+    );
+    const { optionValue } = useOptionMethods();
+    const containerClass = computed(() => {
+      return [props.class, {
+        "vc-tree-select__wrap--filled": !!(props.modelValue && props.modelValue.length),
+        "vc-tree-select__wrap--focus": open.value,
+        "vc-tree-select__wrap--error": props.isError,
+        "vc-tree-select__wrap--disabled": props.disabled
+      }];
+    });
+    const flatAllOptions = computed(() => {
+      return flatList(props.options);
+    });
+    const selectedModel = computed({
+      get() {
+        return flatAllOptions.value.filter((item) => {
+          var _a;
+          return (_a = props.modelValue) == null ? void 0 : _a.includes(optionValue(item, props.config));
+        });
+      },
+      set(val) {
+        emitData(val);
+      }
+    });
+    function emitData(val) {
+      const modelValues = val.map((item) => optionValue(item, props.config));
+      emit("update:modelValue", modelValues);
+      emit("on-change", val);
+    }
+    const emptyTextMessage = computed(() => {
+      return props.emptyText ? props.emptyText : tVU.t("voicenterUi.general.no.data");
+    });
+    const checkedKeys = computed(() => {
+      return selectedModel.value.map((item) => String(item[props.nodeKey]));
+    });
+    function flatList(list) {
+      const childrenKey = props.config.childrenKey;
+      return list.reduce(
+        (acc, item) => {
+          const _result = { ...item };
+          delete _result[childrenKey];
+          acc.push(_result);
+          const rawChildren = asArray(item[childrenKey]);
+          if (rawChildren.length) {
+            acc.push(...flatList(rawChildren));
+          }
+          return acc;
+        },
+        []
+      );
+    }
+    function onWrapperClick() {
+      if (!props.disabled) {
+        open.value = true;
+      }
+    }
+    function onRemoveTag(data) {
+      selectedModel.value = selectedModel.value.filter((item) => {
+        const itemValue = String(optionValue(item, props.config));
+        const dataValue = String(optionValue(data, props.config));
+        return itemValue !== dataValue;
+      });
+      nextTick(() => {
+        var _a;
+        if (treNodeRef.value) {
+          const keys = selectedModel.value.map((i) => asTreeKey(i[props.nodeKey]));
+          (_a = treNodeRef.value) == null ? void 0 : _a.setCheckedKeys(keys);
+        }
+      });
+    }
+    function onClickOutside() {
+      open.value = false;
+    }
+    function setContainerWidth() {
+      var _a;
+      if (inputFieldRef.value) {
+        containerWidth.value = `${((_a = inputFieldRef.value) == null ? void 0 : _a.getBoundingClientRect().width) + 20}px`;
+      }
+    }
+    function onSelectedNodes(data) {
+      var _a, _b;
+      if (props.returnedType === "parentOnly") {
+        selectedModel.value = asArray((_a = treNodeRef.value) == null ? void 0 : _a.getParentSelectedNodes());
+      } else if (props.returnedType === "leafOnly") {
+        selectedModel.value = asArray((_b = treNodeRef.value) == null ? void 0 : _b.getCheckedNodes(true));
+      } else {
+        selectedModel.value = [...data];
+      }
+    }
+    watch(
+      () => props.options,
+      () => {
+        if (props.modelValue && props.modelValue.length > 0 && flatAllOptions.value.length > 0) {
+          const validValues = flatAllOptions.value.map((item) => optionValue(item, props.config));
+          const filteredModelValue = props.modelValue.filter((value) => validValues.includes(value));
+          if (filteredModelValue.length !== props.modelValue.length) {
+            emit("update:modelValue", filteredModelValue);
+            const filteredNodes = flatAllOptions.value.filter(
+              (item) => filteredModelValue.includes(optionValue(item, props.config))
+            );
+            emit("on-change", filteredNodes);
+            nextTick(() => {
+              var _a;
+              if (treNodeRef.value) {
+                const keys = filteredNodes.map((i) => asTreeKey(i[props.nodeKey]));
+                (_a = treNodeRef.value) == null ? void 0 : _a.setCheckedKeys(keys);
+              }
+            });
+          }
+        }
+      },
+      { deep: true }
+    );
+    onMounted(() => {
+      setContainerWidth();
+      window.addEventListener("resize", setContainerWidth, true);
+    });
+    onBeforeUnmount(() => {
+      window.removeEventListener("resize", setContainerWidth);
+    });
+    __expose({
+      open,
+      containerWidth,
+      treNodeRef,
+      flatAllOptions,
+      selectedModel,
+      emitData,
+      onRemoveTag,
+      onClickOutside,
+      setContainerWidth,
+      onSelectedNodes
+    });
+    return (_ctx, _cache) => {
+      return openBlock(), createElementBlock("div", {
+        class: normalizeClass([containerClass.value, "vc-tree-select"]),
+        style: normalizeStyle(__props.style)
+      }, [
+        createVNode(_sfc_main$1, {
+          open: open.value,
+          trigger: "manual",
+          "popover-max-width": containerWidth.value,
+          placement: "bottom-end",
+          "classes-ref": "w-full",
+          "popover-class": "vc-tree-select__dropdown",
+          class: "vc-tree-select__dropdown-wrapper"
+        }, {
+          reference: withCtx(() => [
+            createElementVNode("div", {
+              ref_key: "inputFieldRef",
+              ref: inputFieldRef,
+              class: normalizeClass([[
+                ...unref(inputClasses),
+                {
+                  "is-prefix-icon": __props.prefixIcon,
+                  "is-error": __props.isError,
+                  "is-disabled": __props.disabled
+                }
+              ], "vc-tree-select__container"]),
+              onClick: withModifiers(onWrapperClick, ["stop"])
+            }, [
+              __props.prefixIcon ? (openBlock(), createElementBlock("div", _hoisted_1, [
+                createVNode(_sfc_main$3, {
+                  icon: unref(resolvedPrefixIcon),
+                  class: normalizeClass(unref(prefixClasses)),
+                  style: normalizeStyle(unref(prefixStyle))
+                }, null, 8, ["icon", "class", "style"])
+              ])) : createCommentVNode("", true),
+              createElementVNode("div", _hoisted_2, [
+                createElementVNode("div", _hoisted_3, [
+                  createVNode(VcDelimitedList, {
+                    list: selectedModel.value,
+                    limit: __props.tagsLimit,
+                    "popover-disabled": open.value,
+                    trigger: "hover",
+                    "popover-max-width": "320",
+                    separator: ""
+                  }, {
+                    "list-item": withCtx(({ item }) => [
+                      createVNode(_sfc_main$4, {
+                        label: item == null ? void 0 : item.label,
+                        color: __props.tagColor,
+                        "max-content": tagMaxContent,
+                        borderless: __props.tagBorderless,
+                        disabled: __props.disabled,
+                        square: __props.tagsSquare,
+                        compact: "",
+                        closable: "",
+                        onOnClose: ($event) => onRemoveTag(item)
+                      }, null, 8, ["label", "color", "borderless", "disabled", "square", "onOnClose"])
+                    ]),
+                    reference: withCtx(({ listLength }) => [
+                      createVNode(_sfc_main$4, {
+                        label: `+ ${listLength}`,
+                        borderless: __props.tagBorderless,
+                        square: __props.tagsSquare,
+                        color: __props.tagColor,
+                        compact: "",
+                        onClick: _cache[0] || (_cache[0] = withModifiers(() => {
+                        }, ["stop", "prevent"]))
+                      }, null, 8, ["label", "borderless", "square", "color"])
+                    ]),
+                    "other-content": withCtx(({ list }) => [
+                      createElementVNode("div", _hoisted_4, [
+                        (openBlock(true), createElementBlock(Fragment, null, renderList(list, (item, index) => {
+                          return openBlock(), createElementBlock("div", {
+                            key: index,
+                            class: "flex items-center justify-start m-1"
+                          }, [
+                            createVNode(_sfc_main$4, {
+                              label: item.label,
+                              icon: item.icon,
+                              "max-content": tagMaxContent,
+                              borderless: __props.tagBorderless,
+                              disabled: __props.disabled,
+                              square: __props.tagsSquare,
+                              color: __props.tagColor,
+                              compact: "",
+                              closable: "",
+                              onOnClose: ($event) => onRemoveTag(item)
+                            }, null, 8, ["label", "icon", "borderless", "disabled", "square", "color", "onOnClose"])
+                          ]);
+                        }), 128))
+                      ])
+                    ]),
+                    _: 1
+                  }, 8, ["list", "limit", "popover-disabled"])
+                ])
+              ]),
+              createElementVNode("div", _hoisted_5, [
+                createVNode(_sfc_main$3, { icon: "vc-icon-folders text-icons icon-lg" })
+              ])
+            ], 2)
+          ]),
+          default: withCtx(() => [
+            withDirectives((openBlock(), createElementBlock("div", {
+              ref: "dropdown",
+              class: "vc-tree-select__dropdown-content h-full",
+              style: normalizeStyle({ width: containerWidth.value })
+            }, [
+              createElementVNode("div", _hoisted_6, [
+                __props.options.length ? (openBlock(), createBlock(_sfc_main$2, {
+                  key: 0,
+                  ref_key: "treNodeRef",
+                  ref: treNodeRef,
+                  config: props.config,
+                  options: __props.options,
+                  "scroll-height": __props.scrollHeight,
+                  "empty-text": emptyTextMessage.value,
+                  "node-key": props.nodeKey,
+                  color: __props.color,
+                  loading: __props.loading,
+                  "use-types": __props.useTypes,
+                  "default-checked-keys": checkedKeys.value,
+                  "expanded-keys": checkedKeys.value,
+                  "clear-filter-on-options-change": __props.clearFilterOnOptionsChange,
+                  "onUpdate:selectedNodes": onSelectedNodes
+                }, createSlots({ _: 2 }, [
+                  _ctx.$slots["option-label"] ? {
+                    name: "node-label",
+                    fn: withCtx((data) => [
+                      renderSlot(_ctx.$slots, "option-label", {
+                        data: data.data
+                      })
+                    ]),
+                    key: "0"
+                  } : void 0,
+                  _ctx.$slots["tree-top-content"] ? {
+                    name: "default",
+                    fn: withCtx(() => [
+                      renderSlot(_ctx.$slots, "tree-top-content")
+                    ]),
+                    key: "1"
+                  } : void 0
+                ]), 1032, ["config", "options", "scroll-height", "empty-text", "node-key", "color", "loading", "use-types", "default-checked-keys", "expanded-keys", "clear-filter-on-options-change"])) : (openBlock(), createElementBlock("div", _hoisted_7, toDisplayString(emptyTextMessage.value), 1))
+              ])
+            ], 4)), [
+              [unref(ClickOutside), onClickOutside, inputFieldRef.value]
+            ])
+          ]),
+          _: 3
+        }, 8, ["open", "popover-max-width"])
+      ], 6);
+    };
+  }
+});
+export {
+  _sfc_main as default
+};

package/library/components/VcTree/VcTreeSelect.vue4.mjs

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

package/library/components/VcTree/treeTypeUtils.mjs

@@ -0,0 +1,16 @@
+function asArray(v) {
+  return Array.isArray(v) ? v : [];
+}
+function asTreeKey(v) {
+  if (typeof v === "string") return v;
+  if (typeof v === "number") return v;
+  return "";
+}
+function isTreeNode(v) {
+  return v !== null && typeof v === "object";
+}
+export {
+  asArray,
+  asTreeKey,
+  isTreeNode
+};

package/library/components/VcVerticalTabs/VcVerticalTabs.vue.mjs

@@ -0,0 +1,102 @@
+import '../../assets/components/VcVerticalTabs/VcVerticalTabs.css';
+import { defineComponent, ref, computed, openBlock, createElementBlock, createElementVNode, toDisplayString, createVNode, isRef, unref, withCtx, renderSlot, nextTick } from "vue";
+import { useVModel } from "@vueuse/core";
+import useOptionMethods from "../../composables/option/useOptionMethods.mjs";
+import _sfc_main$1 from "./VerticalTabNav.vue.mjs";
+import '../../assets/components/VcVerticalTabs/VerticalTabNav.css';/* empty css                     */
+const _hoisted_1 = { class: "vc-vertical-tabs" };
+const _hoisted_2 = { class: "vc-vertical-tabs__wrapper" };
+const _hoisted_3 = { class: "vc-vertical-tabs__header" };
+const _hoisted_4 = { class: "ml-1 mb-2 text-sm font-medium" };
+const _hoisted_5 = { class: "vc-vertical-tabs__nav-wrapper" };
+const _hoisted_6 = { class: "vc-vertical-tabs__content-wrapper" };
+const _hoisted_7 = { class: "mt-3 md:mt-0 mb-2 text-sm font-medium" };
+const _hoisted_8 = { class: "vc-vertical-tabs__content py-2" };
+const _sfc_main = /* @__PURE__ */ defineComponent({
+  __name: "VcVerticalTabs",
+  props: {
+    modelValue: { default: void 0 },
+    tabTitle: { default: "" },
+    tabsTitle: { default: "" },
+    options: { default: () => [] },
+    config: { default: void 0 }
+  },
+  emits: ["change", "update:modelValue"],
+  setup(__props, { emit: __emit }) {
+    const props = __props;
+    const { optionValue } = useOptionMethods();
+    const emit = __emit;
+    const activeElement = useVModel(
+      props,
+      "modelValue",
+      emit
+    );
+    const contentWrapperRef = ref();
+    const slotName = computed(() => {
+      const allValues = props.options.reduce(
+        (acc, el) => {
+          acc.push(optionValue(el, props.config));
+          return acc;
+        },
+        []
+      );
+      const validationIsStringAndNotEmpty = typeof activeElement.value === "string" && activeElement.value;
+      return validationIsStringAndNotEmpty && allValues.includes(activeElement.value) ? activeElement.value : "";
+    });
+    function change(val) {
+      emit("change", val);
+      scrollContentToTop();
+    }
+    function scrollContentToTop() {
+      nextTick(() => {
+        if (contentWrapperRef.value !== void 0) {
+          contentWrapperRef.value.scrollTop = 0;
+        }
+      });
+    }
+    return (_ctx, _cache) => {
+      return openBlock(), createElementBlock("div", _hoisted_1, [
+        createElementVNode("div", _hoisted_2, [
+          createElementVNode("div", _hoisted_3, [
+            createElementVNode("div", _hoisted_4, toDisplayString(__props.tabsTitle), 1),
+            createElementVNode("div", _hoisted_5, [
+              createVNode(_sfc_main$1, {
+                modelValue: unref(activeElement),
+                "onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => isRef(activeElement) ? activeElement.value = $event : null),
+                options: __props.options,
+                config: props.config,
+                onChange: change
+              }, {
+                "tab-label": withCtx(({ option }) => [
+                  renderSlot(_ctx.$slots, "tab-label", { option })
+                ]),
+                "tab-label-icon": withCtx(({ option }) => [
+                  renderSlot(_ctx.$slots, "tab-label-icon", { option })
+                ]),
+                "tab-label-text": withCtx(({ option }) => [
+                  renderSlot(_ctx.$slots, "tab-label-text", { option })
+                ]),
+                _: 3
+              }, 8, ["modelValue", "options", "config"])
+            ])
+          ]),
+          createElementVNode("div", _hoisted_6, [
+            createElementVNode("div", _hoisted_7, toDisplayString(__props.tabTitle), 1),
+            createElementVNode("div", _hoisted_8, [
+              createElementVNode("div", {
+                ref_key: "contentWrapperRef",
+                ref: contentWrapperRef,
+                class: "vc-vertical-tabs__content--content overflow-y-auto h-full"
+              }, [
+                renderSlot(_ctx.$slots, slotName.value)
+              ], 512)
+            ])
+          ])
+        ])
+      ]);
+    };
+  }
+});
+export {
+  _sfc_main as default
+};

package/library/components/VcVerticalTabs/VcVerticalTabs.vue3.mjs

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

package/library/components/VcVerticalTabs/VerticalTabNav.vue.mjs

@@ -0,0 +1,80 @@
+import '../../assets/components/VcVerticalTabs/VerticalTabNav.css';
+import { defineComponent, computed, openBlock, createElementBlock, Fragment, renderList, withKeys, normalizeClass, unref, renderSlot, createElementVNode, createVNode, createTextVNode, toDisplayString } from "vue";
+import { useVModel } from "@vueuse/core";
+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 = { class: "vc-vertical-tabs__nav" };
+const _hoisted_2 = ["tabindex", "onClick", "onKeyup"];
+const _hoisted_3 = { class: "flex items-center h-full" };
+const _hoisted_4 = { class: "vertical-tab-icon icon-base min-w-4" };
+const _hoisted_5 = { class: "tab-name-content mx-2 tab-name text-sm font-medium focus:outline-none" };
+const _sfc_main = /* @__PURE__ */ defineComponent({
+  __name: "VerticalTabNav",
+  props: {
+    config: { default: void 0 },
+    options: { default: () => [] },
+    modelValue: { default: void 0 }
+  },
+  emits: ["change", "update:modelValue"],
+  setup(__props, { emit: __emit }) {
+    const props = __props;
+    const { optionListMap } = useOptionMethods();
+    const emit = __emit;
+    const activeElement = useVModel(
+      props,
+      "modelValue",
+      emit
+    );
+    const optionsMapped = computed(() => {
+      return optionListMap(props.options, props.config);
+    });
+    function onClick(option) {
+      if (option.disabled) {
+        return;
+      }
+      const value = option.value;
+      activeElement.value = value;
+      emit("change", option.originalItem);
+      emit("update:modelValue", value);
+    }
+    return (_ctx, _cache) => {
+      return openBlock(), createElementBlock("div", _hoisted_1, [
+        (openBlock(true), createElementBlock(Fragment, null, renderList(optionsMapped.value, (option) => {
+          return openBlock(), createElementBlock("div", {
+            key: option.key,
+            class: normalizeClass([{
+              "is_active": option.value === unref(activeElement),
+              "is_disabled": option.disabled
+            }, "vc-vertical-tabs__item"]),
+            tabindex: option.disabled ? -1 : 0,
+            onClick: ($event) => onClick(option),
+            onKeyup: withKeys(($event) => onClick(option), ["enter"])
+          }, [
+            renderSlot(_ctx.$slots, "tab-label", { option }, () => [
+              createElementVNode("div", _hoisted_3, [
+                createElementVNode("span", _hoisted_4, [
+                  renderSlot(_ctx.$slots, "tab-label-icon", { option }, () => [
+                    createVNode(_sfc_main$1, {
+                      icon: option.icon
+                    }, null, 8, ["icon"])
+                  ])
+                ]),
+                createElementVNode("div", _hoisted_5, [
+                  renderSlot(_ctx.$slots, "tab-label-text", {
+                    option: option.originalItem
+                  }, () => [
+                    createTextVNode(toDisplayString(option.label), 1)
+                  ])
+                ])
+              ])
+            ])
+          ], 42, _hoisted_2);
+        }), 128))
+      ]);
+    };
+  }
+});
+export {
+  _sfc_main as default
+};

package/library/components/VcVerticalTabs/VerticalTabNav.vue3.mjs

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

package/library/components/VcViewSwitcher/VcViewSwitcher.vue.mjs

@@ -0,0 +1,86 @@
+import '../../assets/components/VcViewSwitcher/VcViewSwitcher.css';
+import { defineComponent, computed, openBlock, createElementBlock, createElementVNode, normalizeClass, Fragment, renderList, withKeys, unref, renderSlot, createVNode, toDisplayString } from "vue";
+import { useVModel } from "@vueuse/core";
+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 = { class: "vc-view-switcher__wrap" };
+const _hoisted_2 = ["data-test"];
+const _hoisted_3 = ["tabindex", "onKeyup", "onClick"];
+const _hoisted_4 = { class: "flex items-center gap-1.5" };
+const _hoisted_5 = { class: "vc-view-switcher-item--text" };
+const _sfc_main = /* @__PURE__ */ defineComponent({
+  __name: "VcViewSwitcher",
+  props: {
+    disabled: { type: Boolean, default: false },
+    dataTestName: { default: "default" },
+    modelValue: { default: void 0 },
+    config: { default: void 0 },
+    options: { default: () => [] }
+  },
+  emits: ["change", "update:modelValue"],
+  setup(__props, { emit: __emit }) {
+    const props = __props;
+    const { optionListMap } = useOptionMethods();
+    const emit = __emit;
+    const activeElement = useVModel(
+      props,
+      "modelValue",
+      emit
+    );
+    const optionsMapped = computed(() => {
+      return optionListMap(props.options, props.config);
+    });
+    function onClick(option) {
+      if (option.disabled || props.disabled) {
+        return;
+      }
+      const value = option.value;
+      activeElement.value = value;
+      emit("change", option.originalItem);
+      emit("update:modelValue", value);
+    }
+    return (_ctx, _cache) => {
+      return openBlock(), createElementBlock("div", _hoisted_1, [
+        createElementVNode("div", {
+          class: normalizeClass(["vc-view-switcher", { "vc-view-switcher--disabled": __props.disabled }]),
+          "data-test": __props.dataTestName
+        }, [
+          (openBlock(true), createElementBlock(Fragment, null, renderList(optionsMapped.value, (option) => {
+            return openBlock(), createElementBlock("div", {
+              key: option.key,
+              class: "vc-view-switcher-container",
+              tabindex: "-1"
+            }, [
+              createElementVNode("div", {
+                class: normalizeClass(["vc-view-switcher-item", [
+                  { "vc-view-switcher-item--active": option.value === unref(activeElement) },
+                  { "vc-view-switcher-item--disabled": option.disabled }
+                ]]),
+                tabindex: option.disabled ? -1 : 0,
+                onKeyup: withKeys(($event) => onClick(option), ["enter"]),
+                onClick: ($event) => onClick(option)
+              }, [
+                renderSlot(_ctx.$slots, "tab-item", {
+                  option,
+                  isActive: option.value === unref(activeElement)
+                }, () => [
+                  createElementVNode("div", _hoisted_4, [
+                    createVNode(_sfc_main$1, {
+                      icon: option.icon,
+                      class: "vc-view-switcher-item--icon"
+                    }, null, 8, ["icon"]),
+                    createElementVNode("span", _hoisted_5, toDisplayString(option.label), 1)
+                  ])
+                ])
+              ], 42, _hoisted_3)
+            ]);
+          }), 128))
+        ], 10, _hoisted_2)
+      ]);
+    };
+  }
+});
+export {
+  _sfc_main as default
+};

package/library/components/VcViewSwitcher/VcViewSwitcher.vue3.mjs

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