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

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

@@ -0,0 +1,97 @@
+import '../../assets/components/VcRadioTabs/VcRadioTabs.css';
+import { defineComponent, onMounted, openBlock, createElementBlock, createElementVNode, createVNode, renderSlot, unref, createTextVNode, toDisplayString, Fragment, renderList, withDirectives, vShow } from "vue";
+import _sfc_main$1 from "./UiComponents/VcRadioTabsNav.vue.mjs";
+import '../../assets/components/VcRadioTabs/UiComponents/VcRadioTabsNav.css';/* empty css                                  */
+import { useVModel } from "@vueuse/core";
+import useOptionMethods from "../../composables/option/useOptionMethods.mjs";
+const _hoisted_1 = { class: "vc-radio-tabs" };
+const _hoisted_2 = { class: "vc-radio-tabs__wrapper" };
+const _hoisted_3 = { class: "vc-radio-tabs__header" };
+const _hoisted_4 = { class: "vc-radio-tabs__content-wrapper" };
+const _hoisted_5 = { class: "vc-radio-tabs__content" };
+const _hoisted_6 = {
+  key: 0,
+  class: "vc-radio-tabs__content-tab"
+};
+const _sfc_main = /* @__PURE__ */ defineComponent({
+  ...{
+    name: "VcRadioTabs"
+  },
+  __name: "VcRadioTabs",
+  props: {
+    modelValue: {},
+    config: { default: void 0 },
+    options: { default: () => [] },
+    lazy: { type: Boolean, default: false },
+    dataTestName: { default: "default" }
+  },
+  emits: ["update:modelValue", "change"],
+  setup(__props, { emit: __emit }) {
+    const props = __props;
+    const emit = __emit;
+    const activeOption = useVModel(
+      props,
+      "modelValue",
+      emit
+    );
+    const { optionValue } = useOptionMethods();
+    function onSetActiveTab(tab) {
+      activeOption.value = optionValue(tab, props.config);
+      emit("change", tab);
+    }
+    function isActiveTab(tab) {
+      const tabValue = optionValue(tab, props.config);
+      return tabValue === activeOption.value;
+    }
+    function getSlotPaneName(tab) {
+      return optionValue(tab, props.config);
+    }
+    onMounted(() => {
+      var _a;
+      if (!activeOption.value && ((_a = props.options) == null ? void 0 : _a.length)) {
+        activeOption.value = optionValue(props.options[0], props.config);
+      }
+    });
+    return (_ctx, _cache) => {
+      return openBlock(), createElementBlock("div", _hoisted_1, [
+        createElementVNode("div", _hoisted_2, [
+          createElementVNode("div", _hoisted_3, [
+            createVNode(_sfc_main$1, {
+              "active-tab": __props.modelValue,
+              config: __props.config,
+              options: __props.options,
+              "data-test": __props.dataTestName,
+              onTabClick: onSetActiveTab
+            }, null, 8, ["active-tab", "config", "options", "data-test"])
+          ]),
+          createElementVNode("div", _hoisted_4, [
+            createElementVNode("div", _hoisted_5, [
+              __props.lazy ? (openBlock(), createElementBlock("div", _hoisted_6, [
+                renderSlot(_ctx.$slots, __props.modelValue, { tab: unref(activeOption) }, () => [
+                  createTextVNode(toDisplayString(unref(activeOption)), 1)
+                ])
+              ])) : (openBlock(true), createElementBlock(Fragment, { key: 1 }, renderList(__props.options, (option, index) => {
+                return withDirectives((openBlock(), createElementBlock("div", {
+                  key: `tab-pane-${index}`,
+                  class: "vc-radio-tabs__content-tab"
+                }, [
+                  renderSlot(_ctx.$slots, getSlotPaneName(option), {
+                    tab: option,
+                    index
+                  }, () => [
+                    createTextVNode(toDisplayString(option), 1)
+                  ])
+                ])), [
+                  [vShow, isActiveTab(option)]
+                ]);
+              }), 128))
+            ])
+          ])
+        ])
+      ]);
+    };
+  }
+});
+export {
+  _sfc_main as default
+};

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

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

package/library/components/VcSegmented/VcSegmented.vue.mjs

@@ -0,0 +1,80 @@
+import { defineComponent, computed, openBlock, createBlock, unref, normalizeClass, isRef, createSlots, withCtx, renderSlot } from "vue";
+import { ElSegmented } from "element-plus";
+import '../../assets/node_modules/element-plus/theme-chalk/src/segmented.css';import '../../assets/node_modules/element-plus/theme-chalk/src/base.css';
+import '../../assets/components/VcSegmented/VcSegmented.css';/* empty css                                                         */
+/* empty css                                                              */
+import { useVModel } from "@vueuse/core";
+const _sfc_main = /* @__PURE__ */ defineComponent({
+  __name: "VcSegmented",
+  props: {
+    modelValue: {},
+    options: {},
+    config: {},
+    size: {},
+    block: { type: Boolean },
+    disabled: { type: Boolean },
+    validateEvent: { type: Boolean },
+    name: {},
+    id: {},
+    ariaLabel: {},
+    direction: {},
+    bordered: { type: Boolean },
+    rounded: { type: Boolean },
+    color: {}
+  },
+  emits: ["update:modelValue", "change"],
+  setup(__props, { emit: __emit }) {
+    const props = __props;
+    const emit = __emit;
+    const localModel = useVModel(props, "modelValue", emit);
+    const propsAttribute = computed(() => {
+      var _a, _b, _c;
+      return {
+        value: ((_a = props.config) == null ? void 0 : _a.valueKey) ?? "value",
+        disabled: ((_b = props.config) == null ? void 0 : _b.disabledKey) ?? "disabled",
+        label: ((_c = props.config) == null ? void 0 : _c.labelKey) ?? "label"
+      };
+    });
+    const colorClass = computed(() => {
+      if (!props.color) return "";
+      return `vc-segmented--${props.color}`;
+    });
+    function onChange(val) {
+      emit("change", val, localModel.value);
+    }
+    return (_ctx, _cache) => {
+      return openBlock(), createBlock(unref(ElSegmented), {
+        id: __props.id,
+        modelValue: unref(localModel),
+        "onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => isRef(localModel) ? localModel.value = $event : null),
+        options: __props.options,
+        props: propsAttribute.value,
+        size: __props.size,
+        block: __props.block,
+        disabled: __props.disabled,
+        "validate-event": __props.validateEvent,
+        name: __props.name,
+        "aria-label": __props.ariaLabel,
+        direction: __props.direction,
+        class: normalizeClass([[{
+          "vc-segmented--bordered": __props.bordered,
+          "vc-segmented--rounded": __props.rounded
+        }, colorClass.value], "vc-segmented"]),
+        onChange
+      }, createSlots({ _: 2 }, [
+        _ctx.$slots.default ? {
+          name: "default",
+          fn: withCtx((scope) => [
+            renderSlot(_ctx.$slots, "default", {
+              item: scope.item
+            })
+          ]),
+          key: "0"
+        } : void 0
+      ]), 1032, ["id", "modelValue", "options", "props", "size", "block", "disabled", "validate-event", "name", "aria-label", "direction", "class"]);
+    };
+  }
+});
+export {
+  _sfc_main as default
+};

package/library/components/VcSegmented/VcSegmented.vue3.mjs

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

package/library/components/VcSelect/VcInfiniteScrollSelect.vue.mjs

@@ -0,0 +1,224 @@
+import { defineComponent, useSlots, ref, watch, openBlock, createElementBlock, Fragment, createVNode, mergeProps, unref, isRef, createSlots, withCtx, renderSlot, createCommentVNode, createElementVNode, createTextVNode, toDisplayString } from "vue";
+import uniqueComponentId from "../../utils/UniqueComponentId.mjs";
+import { useVModel, watchDebounced, useInfiniteScroll } from "@vueuse/core";
+import _sfc_main$1 from "./VcSelect.vue.mjs";
+import '../../assets/components/VcSelect/VcSelect.css';/* empty css               */
+import useOptionMethods from "../../composables/option/useOptionMethods.mjs";
+const _hoisted_1 = {
+  key: 0,
+  class: "h-4 w-full flex-center pointer-events-none relative"
+};
+const _sfc_main = /* @__PURE__ */ defineComponent({
+  ...{
+    inheritAttrs: false
+  },
+  __name: "VcInfiniteScrollSelect",
+  props: {
+    config: {},
+    loadDataFunc: {},
+    loadOneElementFunc: { type: Function, default: void 0 },
+    distance: { default: 10 },
+    disabled: { type: Boolean, default: false },
+    filterable: { type: Boolean, default: false },
+    infiniteScrollingDisabled: { type: Boolean, default: false },
+    clearable: { type: Boolean },
+    fitInputWidth: { type: Boolean },
+    name: { default: void 0 },
+    emptyText: { default: void 0 },
+    placeholder: { default: "" },
+    quickCheckAll: { type: Boolean, default: false },
+    size: { default: "default" },
+    multiple: { default: void 0 },
+    modelValue: { default: void 0 },
+    remoteSearch: { type: Boolean, default: false },
+    id: {},
+    isError: { type: Boolean },
+    prefixIcon: {},
+    dataTestName: {},
+    prefixIconSize: {},
+    maxWidth: {},
+    prefixIconColor: {},
+    color: {}
+  },
+  emits: ["update:modelValue", "update:visible", "initial-value", "change"],
+  setup(__props, { expose: __expose, emit: __emit }) {
+    const POPPER_CLASS_NAME = uniqueComponentId("unique-infinite-select-class");
+    const props = __props;
+    const emit = __emit;
+    const slots = useSlots();
+    const { optionValue } = useOptionMethods();
+    const initialDataLoaded = ref(false);
+    const loading = ref(false);
+    const loadedAll = ref(false);
+    const infiniteScrollAttached = ref(false);
+    const currentPage = ref(1);
+    const searchValue = ref("");
+    const localOptions = ref([]);
+    const selectModel = useVModel(props, "modelValue", emit);
+    async function loadMore() {
+      if (loading.value || loadedAll.value) {
+        return;
+      }
+      loading.value = true;
+      const data = await props.loadDataFunc(currentPage.value, searchValue.value) || [];
+      if (!data.length) {
+        loadedAll.value = true;
+      }
+      localOptions.value = [
+        ...localOptions.value,
+        ...data
+      ];
+      initialDataLoaded.value = true;
+      loading.value = false;
+    }
+    function resetData() {
+      localOptions.value = [];
+      currentPage.value = 1;
+      loadedAll.value = false;
+      loadMore();
+    }
+    function onScrollBottom() {
+      if (props.infiniteScrollingDisabled || loading.value || loadedAll.value) {
+        return;
+      }
+      currentPage.value++;
+    }
+    function onVisibleChange(val) {
+      if (val) {
+        if (!infiniteScrollAttached.value) {
+          const popup = document.querySelector(`.${POPPER_CLASS_NAME} .el-select-dropdown__wrap`);
+          if (popup) {
+            useInfiniteScroll(
+              popup,
+              onScrollBottom,
+              { distance: props.distance }
+            );
+            infiniteScrollAttached.value = true;
+          }
+        }
+      } else if (searchValue.value) {
+        searchValue.value = "";
+      }
+      emit("update:visible", val);
+    }
+    function findOptionInList(listToFindIn) {
+      const model = selectModel.value;
+      if (props.multiple && Array.isArray(model)) {
+        const foundElements = listToFindIn.filter((option) => model.includes(optionValue(option, props.config)));
+        return foundElements.length > 0 ? foundElements : void 0;
+      }
+      return listToFindIn.find((option) => model === optionValue(option, props.config));
+    }
+    async function getModelValueData() {
+      if (selectModel.value === void 0) {
+        return void 0;
+      }
+      if (props.multiple && Array.isArray(selectModel.value) && !selectModel.value.length) {
+        return [];
+      }
+      const foundElementsInLocal = findOptionInList(localOptions.value ?? []);
+      if (foundElementsInLocal !== void 0) {
+        return foundElementsInLocal;
+      }
+      if (props.loadOneElementFunc) {
+        return await props.loadOneElementFunc(selectModel.value);
+      }
+      return void 0;
+    }
+    function onInitial(option) {
+      emit("initial-value", option);
+    }
+    function onInfiniteScrollSelectChange(option) {
+      emit("change", option);
+    }
+    function onCustomSearch(searchQuery) {
+      searchValue.value = searchQuery;
+      return true;
+    }
+    watch(
+      currentPage,
+      () => {
+        loadMore();
+      },
+      {
+        immediate: true
+      }
+    );
+    watch(
+      initialDataLoaded,
+      async (val) => {
+        if (!val || props.modelValue === void 0) {
+          return;
+        }
+        onInitial(await getModelValueData());
+      }
+    );
+    watchDebounced(
+      searchValue,
+      () => {
+        resetData();
+      },
+      { debounce: 600 }
+    );
+    __expose({
+      resetData,
+      loadMore,
+      loading
+    });
+    return (_ctx, _cache) => {
+      return openBlock(), createElementBlock(Fragment, null, [
+        createVNode(_sfc_main$1, mergeProps({
+          modelValue: unref(selectModel),
+          "onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => isRef(selectModel) ? selectModel.value = $event : null),
+          filterable: __props.filterable,
+          name: __props.name,
+          size: __props.size,
+          placeholder: __props.placeholder,
+          "empty-text": __props.emptyText,
+          config: props.config,
+          options: localOptions.value,
+          "popper-class": unref(POPPER_CLASS_NAME),
+          disabled: __props.disabled,
+          multiple: props.multiple,
+          "quick-check-all": __props.quickCheckAll,
+          "filter-method": __props.remoteSearch ? onCustomSearch : void 0,
+          loading: loading.value && !localOptions.value.length
+        }, _ctx.$attrs, {
+          onChange: onInfiniteScrollSelectChange,
+          "onUpdate:visible": onVisibleChange
+        }), createSlots({
+          "load-more-option": withCtx(() => [
+            loading.value ? (openBlock(), createElementBlock("div", _hoisted_1, [..._cache[1] || (_cache[1] = [
+              createElementVNode("i", { class: "vc-icon-load text-active-elements animate-spin" }, null, -1)
+            ])])) : createCommentVNode("", true)
+          ]),
+          default: withCtx(() => [
+            unref(slots)["default"] ? renderSlot(_ctx.$slots, "default", { key: 0 }) : createCommentVNode("", true)
+          ]),
+          _: 2
+        }, [
+          unref(slots)["prefix-icon"] ? {
+            name: "prefix-icon",
+            fn: withCtx(({ selected }) => [
+              renderSlot(_ctx.$slots, "prefix-icon", { selected })
+            ]),
+            key: "0"
+          } : void 0,
+          unref(slots)["option"] ? {
+            name: "option",
+            fn: withCtx(({ option }) => [
+              renderSlot(_ctx.$slots, "option", {
+                option
+              })
+            ]),
+            key: "1"
+          } : void 0
+        ]), 1040, ["modelValue", "filterable", "name", "size", "placeholder", "empty-text", "config", "options", "popper-class", "disabled", "multiple", "quick-check-all", "filter-method", "loading"]),
+        createTextVNode(" " + toDisplayString(searchValue.value), 1)
+      ], 64);
+    };
+  }
+});
+export {
+  _sfc_main as default
+};

package/library/components/VcSelect/VcInfiniteScrollSelect.vue2.mjs

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