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

package/library/components/VcTour/VcTour.vue.mjs

@@ -0,0 +1,109 @@
+import { defineComponent, useSlots, openBlock, createBlock, unref, isRef, createSlots, withCtx, createElementBlock, Fragment, renderList, mergeProps, renderSlot, createCommentVNode } from "vue";
+import { ElTour, ElTourStep } from "element-plus";
+import '../../assets/node_modules/element-plus/theme-chalk/src/tour.css';import '../../assets/node_modules/element-plus/theme-chalk/src/button.css';import '../../assets/node_modules/element-plus/theme-chalk/src/base.css';
+import '../../assets/components/VcTour/VcTour.css';/* empty css                                                         */
+/* empty css                                                           */
+/* empty css                                                         */
+import { useVModel } from "@vueuse/core";
+const _sfc_main = /* @__PURE__ */ defineComponent({
+  __name: "VcTour",
+  props: {
+    appendTo: { default: "body" },
+    modelValue: { type: Boolean },
+    current: {},
+    showArrow: { type: Boolean, default: true },
+    placement: {},
+    contentStyle: {},
+    mask: { type: [Boolean, Object], default: true },
+    gap: {},
+    scrollIntoViewOptions: { type: [Boolean, Object] },
+    zIndex: {},
+    showClose: { type: Boolean, default: true },
+    closeIcon: {},
+    closeOnPressEscape: { type: Boolean, default: true },
+    targetAreaClickable: { type: Boolean },
+    steps: {}
+  },
+  emits: ["update:modelValue", "update:current", "close", "change", "finish"],
+  setup(__props, { emit: __emit }) {
+    const props = __props;
+    const emit = __emit;
+    const slots = useSlots();
+    const localModel = useVModel(props, "modelValue", emit);
+    const localCurrent = useVModel(props, "current", emit);
+    function onClose(currentStep) {
+      emit("close", currentStep);
+    }
+    function onChange(currentStep) {
+      emit("change", currentStep);
+    }
+    function onFinish() {
+      emit("finish");
+    }
+    return (_ctx, _cache) => {
+      return openBlock(), createBlock(unref(ElTour), {
+        modelValue: unref(localModel),
+        "onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => isRef(localModel) ? localModel.value = $event : null),
+        current: unref(localCurrent),
+        "onUpdate:current": _cache[1] || (_cache[1] = ($event) => isRef(localCurrent) ? localCurrent.value = $event : null),
+        "append-to": __props.appendTo,
+        "show-arrow": __props.showArrow,
+        placement: __props.placement,
+        "content-style": __props.contentStyle,
+        mask: __props.mask,
+        gap: __props.gap,
+        "scroll-into-view-options": __props.scrollIntoViewOptions,
+        "z-index": __props.zIndex,
+        "show-close": __props.showClose,
+        "close-icon": __props.closeIcon,
+        "close-on-press-escape": __props.closeOnPressEscape,
+        "target-area-clickable": __props.targetAreaClickable,
+        class: "vc-tour",
+        onClose,
+        onFinish,
+        onChange
+      }, createSlots({
+        default: withCtx(() => [
+          (openBlock(true), createElementBlock(Fragment, null, renderList(__props.steps, (step) => {
+            return openBlock(), createBlock(unref(ElTourStep), mergeProps({
+              key: step.step,
+              target: step.target,
+              title: step.title,
+              description: step.description
+            }, { ref_for: true }, step.props), createSlots({
+              default: withCtx(() => [
+                unref(slots)[step.step] ? renderSlot(_ctx.$slots, step.step, {
+                  key: 0,
+                  content: { step: step.step, title: step.title, description: step.description }
+                }) : createCommentVNode("", true)
+              ]),
+              _: 2
+            }, [
+              unref(slots)[`step-header`] ? {
+                name: "header",
+                fn: withCtx(() => [
+                  renderSlot(_ctx.$slots, `step-header`, {
+                    title: step.title
+                  })
+                ]),
+                key: "0"
+              } : void 0
+            ]), 1040, ["target", "title", "description"]);
+          }), 128))
+        ]),
+        _: 2
+      }, [
+        _ctx.$slots.indicators ? {
+          name: "indicators",
+          fn: withCtx((indicator) => [
+            renderSlot(_ctx.$slots, "indicators", { indicator })
+          ]),
+          key: "0"
+        } : void 0
+      ]), 1032, ["modelValue", "current", "append-to", "show-arrow", "placement", "content-style", "mask", "gap", "scroll-into-view-options", "z-index", "show-close", "close-icon", "close-on-press-escape", "target-area-clickable"]);
+    };
+  }
+});
+export {
+  _sfc_main as default
+};

package/library/components/VcTour/VcTour.vue3.mjs

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

package/library/components/VcTransfer/VcTransfer.vue.mjs

@@ -0,0 +1,59 @@
+import { defineComponent, computed, openBlock, createBlock, unref } from "vue";
+import { ElTransfer } from "element-plus";
+import '../../assets/node_modules/element-plus/theme-chalk/src/transfer.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/button.css';import '../../assets/node_modules/element-plus/theme-chalk/src/input.css';import '../../assets/node_modules/element-plus/theme-chalk/src/base.css';
+import '../../assets/components/VcTransfer/VcTransfer.css';/* empty css                                                         */
+/* empty css                                                          */
+/* empty css                                                           */
+/* empty css                                                             */
+/* empty css                                                                   */
+/* empty css                                                             */
+import useOptionMethods from "../../composables/option/useOptionMethods.mjs";
+const _sfc_main = /* @__PURE__ */ defineComponent({
+  __name: "VcTransfer",
+  props: {
+    modelValue: { default: () => [] },
+    options: { default: () => [] },
+    config: { default: void 0 },
+    filterable: { type: Boolean, default: false },
+    titles: { default: void 0 }
+  },
+  emits: ["update:modelValue", "change"],
+  setup(__props, { emit: __emit }) {
+    const props = __props;
+    const emit = __emit;
+    const { optionListMap, optionValue } = useOptionMethods();
+    const model = computed({
+      get() {
+        return props.modelValue;
+      },
+      set(value) {
+        emit("update:modelValue", value);
+      }
+    });
+    const optionsMapped = computed(() => {
+      return optionListMap(props.options, props.config);
+    });
+    function onChange(data) {
+      if (!data.length) {
+        emit("change", []);
+      } else {
+        const _options = props.options.filter((i) => data.includes(optionValue(i, props.config)));
+        emit("change", _options);
+      }
+    }
+    return (_ctx, _cache) => {
+      return openBlock(), createBlock(unref(ElTransfer), {
+        modelValue: model.value,
+        "onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => model.value = $event),
+        class: "vc-transfer",
+        data: optionsMapped.value,
+        filterable: __props.filterable,
+        titles: __props.titles,
+        onChange
+      }, null, 8, ["modelValue", "data", "filterable", "titles"]);
+    };
+  }
+});
+export {
+  _sfc_main as default
+};

package/library/components/VcTransfer/VcTransfer.vue3.mjs

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

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

@@ -0,0 +1,363 @@
+import { defineComponent, ref, computed, watch, nextTick, onMounted, onUnmounted, openBlock, createElementBlock, createVNode, createCommentVNode, renderSlot, createElementVNode, normalizeStyle, unref, withCtx, normalizeClass, createBlock, toDisplayString } from "vue";
+import { ElTree } from "element-plus";
+import '../../assets/components/VcIcon/VcIcon.css';import '../../assets/components/VcInput/VcInput.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/checkbox.css';import '../../assets/node_modules/element-plus/theme-chalk/src/base.css';
+import '../../assets/components/VcTree/VcTree.css';/* empty css                                                         */
+/* empty css                                                             */
+/* empty css                                                         */
+/* empty css                                                         */
+import VcLoading from "../VcLoading/VcLoading.vue.mjs";
+import _sfc_main$1 from "../VcInput/VcInput.vue.mjs";
+/* empty css                       */
+import _sfc_main$2 from "../VcIcon/VcIcon.vue.mjs";
+/* empty css                     */
+import { TEXT_COLORS } from "../../enum/constants.mjs";
+import { convertToUnit, resolveFieldData } from "../../utils/helpers.mjs";
+import { useRTL } from "../../composables/useRTL.mjs";
+import { set } from "lodash-es";
+import { asArray, isTreeNode, asTreeKey } from "./treeTypeUtils.mjs";
+const _hoisted_1 = {
+  key: 0,
+  class: "vc-tree__filter-container"
+};
+const _hoisted_2 = {
+  key: 1,
+  class: "vc-tree__container-top"
+};
+const _sfc_main = /* @__PURE__ */ defineComponent({
+  __name: "VcTree",
+  props: {
+    config: {},
+    nodeKey: { default: "key" },
+    color: { default: "primary" },
+    loading: { type: Boolean, default: false },
+    emptyText: { default: "" },
+    selectable: { type: Boolean, default: true },
+    defaultExpandAll: { type: Boolean, default: false },
+    expandedKeys: { default: () => [] },
+    defaultCheckedKeys: { default: () => [] },
+    filterPlaceholder: { default: "" },
+    lazy: { type: Boolean },
+    options: { default: () => [] },
+    filterPrefixIcon: { default: "" },
+    filterPrefixIconColor: { default: "" },
+    useTypes: { default: () => [] },
+    scrollHeight: { default: void 0 },
+    clearFilterOnOptionsChange: { type: Boolean, default: true }
+  },
+  emits: ["update:selectedKeys", "update:selectNode", "update:selectedNodes"],
+  setup(__props, { expose: __expose, emit: __emit }) {
+    const props = __props;
+    const emit = __emit;
+    const filterValue = ref("");
+    const localOptions = ref([]);
+    const treeRef = ref();
+    const treeContainerRef = ref();
+    let mutationObserver = null;
+    const { isRTL } = useRTL();
+    const filterByKey = computed(() => props.config.filterBy);
+    const childrenKey = computed(() => props.config.childrenKey);
+    const colorClass = computed(() => {
+      return props.color ? TEXT_COLORS[props.color] || "" : "";
+    });
+    const filterable = computed(() => !!filterByKey.value);
+    const elTreeProps = computed(() => {
+      const _labelKey = props.config.labelKey || "label";
+      const _childKey = String(props.config.childrenKey || "children");
+      const _disabledKey = props.config.disabledKey || "disabled";
+      return {
+        label: _labelKey,
+        children: _childKey,
+        disabled: _disabledKey
+      };
+    });
+    const maxHeightWrapper = computed(() => {
+      if (!props.scrollHeight) {
+        return "";
+      }
+      return convertToUnit(props.scrollHeight);
+    });
+    function handleCheck(node, opt) {
+      emit("update:selectedKeys", opt.checkedKeys);
+      const checkedNodes = opt.checkedNodes.filter((n) => isTreeNode(n));
+      emit("update:selectedNodes", checkedNodes);
+      if (isTreeNode(node)) {
+        emit("update:selectNode", node);
+      }
+    }
+    function filterNodeFn(value, data) {
+      const _filterByKey = filterByKey.value;
+      if (!value || !_filterByKey) return true;
+      const searchFields = _filterByKey.split(",");
+      const _searchVal = value.trim().toLocaleLowerCase(props.config.filterLocale);
+      return isFilterMatched(data, {
+        searchFields,
+        filterText: _searchVal
+      });
+    }
+    function isFilterMatched(node, params) {
+      var _a;
+      let matched = false;
+      for (const field of params.searchFields) {
+        const fieldValue = String(resolveFieldData(node, field.trim())).toLocaleLowerCase((_a = props == null ? void 0 : props.config) == null ? void 0 : _a.filterLocale);
+        if (fieldValue.indexOf(params.filterText) > -1) {
+          matched = true;
+        }
+      }
+      return matched;
+    }
+    function initOptions(options) {
+      if (props.clearFilterOnOptionsChange) {
+        filterValue.value = "";
+      }
+      if (props.useTypes.length) {
+        localOptions.value = [...filterOptionsByTypes(options)];
+      } else {
+        localOptions.value = [...options];
+      }
+    }
+    function filterOptionsByTypes(options) {
+      return [...options].reduce((acc, item) => {
+        const _itemData = { ...item };
+        const nodeType = _itemData["type"];
+        const _isTypeValid = props.useTypes.includes(nodeType);
+        let _children = [];
+        const rawChildren = asArray(_itemData[childrenKey.value]);
+        if (rawChildren.length) {
+          _children = filterOptionsByTypes(rawChildren);
+        }
+        set(_itemData, childrenKey.value, _children);
+        if (_isTypeValid || _children.length) {
+          acc.push(_itemData);
+        }
+        return acc;
+      }, []);
+    }
+    function getCheckedNodesFn(leafOnly = false) {
+      return treeRef.value.getCheckedNodes(leafOnly, false);
+    }
+    function getCheckedKeysFn(leafOnly = false) {
+      return treeRef.value.getCheckedKeys(leafOnly);
+    }
+    function setCheckedNodesFn(nodes) {
+      treeRef.value.setCheckedNodes(nodes, false);
+    }
+    function setCheckedKeys(keys) {
+      treeRef.value.setCheckedKeys(keys, false);
+    }
+    function resetChecked() {
+      treeRef.value.setCheckedKeys([], false);
+    }
+    function getParentSelectedNodes(options = [], data = []) {
+      const _allChecked = getCheckedKeysFn();
+      return options.reduce((acc, item) => {
+        if (_allChecked.includes(asTreeKey(item[props.nodeKey]))) {
+          acc.push(item);
+        } else {
+          getParentSelectedNodes(asArray(item[props.config.childrenKey]), acc);
+        }
+        return acc;
+      }, data);
+    }
+    function getAllNodeKeys(options) {
+      return options.reduce((acc, item) => {
+        acc.push(asTreeKey(item[props.nodeKey]));
+        const rawChildren = asArray(item[childrenKey.value]);
+        if (rawChildren.length) {
+          acc.push(...getAllNodeKeys(rawChildren));
+        }
+        return acc;
+      }, []);
+    }
+    function fixRTLPadding() {
+      if (!treeContainerRef.value) return;
+      if (!isRTL.value) return;
+      const treeNodeContents = treeContainerRef.value.querySelectorAll(".el-tree-node__content");
+      treeNodeContents.forEach((element) => {
+        const computedStyle = window.getComputedStyle(element);
+        const paddingLeft = computedStyle.paddingLeft;
+        if (paddingLeft && paddingLeft !== "0px") {
+          element.style.paddingRight = paddingLeft;
+          element.style.paddingLeft = "0";
+        }
+      });
+    }
+    function setupRTLObserver() {
+      if (!treeContainerRef.value) return;
+      if (mutationObserver) {
+        mutationObserver.disconnect();
+      }
+      mutationObserver = new MutationObserver(() => {
+        setTimeout(() => {
+          fixRTLPadding();
+        }, 0);
+      });
+      mutationObserver.observe(treeContainerRef.value, {
+        childList: true,
+        subtree: true,
+        attributes: true,
+        attributeFilter: ["class", "style"]
+      });
+    }
+    watch(
+      filterValue,
+      (val) => {
+        treeRef.value.filter(val);
+      }
+    );
+    watch(
+      () => props.options,
+      (val) => {
+        var _a;
+        const currentCheckedKeys = ((_a = treeRef.value) == null ? void 0 : _a.getCheckedKeys(false)) || [];
+        initOptions(val);
+        if (!props.clearFilterOnOptionsChange && filterValue.value && treeRef.value) {
+          nextTick(() => {
+            var _a2;
+            (_a2 = treeRef.value) == null ? void 0 : _a2.filter(filterValue.value);
+          });
+        }
+        if (currentCheckedKeys.length > 0) {
+          const validKeys = getAllNodeKeys(asArray(localOptions.value));
+          const validCheckedKeys = currentCheckedKeys.filter((key) => validKeys.includes(key));
+          nextTick(() => {
+            if (treeRef.value) {
+              treeRef.value.setCheckedKeys(validCheckedKeys, false);
+              if (validCheckedKeys.length !== currentCheckedKeys.length) {
+                emit("update:selectedKeys", validCheckedKeys);
+                const checkedNodes = asArray(treeRef.value.getCheckedNodes(false, false));
+                emit("update:selectedNodes", checkedNodes);
+              }
+            }
+          });
+        }
+        setTimeout(() => {
+          fixRTLPadding();
+        }, 0);
+      },
+      { immediate: true }
+    );
+    watch(
+      () => props.defaultCheckedKeys,
+      (newKeys) => {
+        if (treeRef.value) {
+          setTimeout(() => {
+            var _a;
+            (_a = treeRef.value) == null ? void 0 : _a.setCheckedKeys(newKeys, false);
+          }, 0);
+        }
+      }
+    );
+    watch(
+      () => props.expandedKeys,
+      () => {
+        setTimeout(() => {
+          fixRTLPadding();
+        }, 0);
+      }
+    );
+    onMounted(() => {
+      setTimeout(() => {
+        fixRTLPadding();
+        setupRTLObserver();
+      }, 0);
+    });
+    onUnmounted(() => {
+      if (mutationObserver) {
+        mutationObserver.disconnect();
+        mutationObserver = null;
+      }
+    });
+    __expose({
+      getCheckedNodes: getCheckedNodesFn,
+      getCheckedKeys: getCheckedKeysFn,
+      setCheckedNodes: setCheckedNodesFn,
+      setCheckedKeys,
+      resetChecked,
+      getParentSelectedNodes: () => {
+        return getParentSelectedNodes(asArray(localOptions.value));
+      },
+      /* Internal state surfaced for inspection: the type-filtered node list,
+       * the active color class, and the el-tree filter-method. */
+      localOptions,
+      colorClass,
+      filterNodeFn
+    });
+    return (_ctx, _cache) => {
+      var _a;
+      return openBlock(), createElementBlock("div", {
+        ref_key: "treeContainerRef",
+        ref: treeContainerRef,
+        class: "vc-tree"
+      }, [
+        filterable.value ? (openBlock(), createElementBlock("div", _hoisted_1, [
+          createVNode(_sfc_main$1, {
+            modelValue: filterValue.value,
+            "onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => filterValue.value = $event),
+            placeholder: __props.filterPlaceholder,
+            disabled: __props.loading || !((_a = __props.options) == null ? void 0 : _a.length),
+            color: __props.color,
+            "prefix-icon": __props.filterPrefixIcon,
+            "prefix-icon-color": __props.filterPrefixIconColor,
+            clearable: "",
+            class: "vc-tree__input",
+            "max-width": "100%"
+          }, null, 8, ["modelValue", "placeholder", "disabled", "color", "prefix-icon", "prefix-icon-color"])
+        ])) : createCommentVNode("", true),
+        _ctx.$slots["default"] ? (openBlock(), createElementBlock("div", _hoisted_2, [
+          renderSlot(_ctx.$slots, "default")
+        ])) : createCommentVNode("", true),
+        createElementVNode("div", {
+          style: normalizeStyle({ maxHeight: maxHeightWrapper.value }),
+          class: "vc-tree__container"
+        }, [
+          createVNode(unref(ElTree), {
+            ref_key: "treeRef",
+            ref: treeRef,
+            data: localOptions.value,
+            "empty-text": __props.emptyText,
+            "show-checkbox": __props.selectable,
+            "default-expand-all": __props.defaultExpandAll,
+            "default-expanded-keys": __props.expandedKeys,
+            "default-checked-keys": __props.defaultCheckedKeys,
+            "filter-node-method": filterNodeFn,
+            props: elTreeProps.value,
+            "node-key": String(props.nodeKey),
+            "auto-expand-parent": "",
+            onCheck: handleCheck
+          }, {
+            default: withCtx(({ node, data }) => [
+              _ctx.$slots["node-label"] ? renderSlot(_ctx.$slots, "node-label", {
+                key: 0,
+                node,
+                data
+              }) : (openBlock(), createElementBlock("div", {
+                key: 1,
+                class: normalizeClass([props.config.nodeClassName ? data[props.config.nodeClassName] : "", "vc-tree-node-item"])
+              }, [
+                data[props.config.iconKey] ? (openBlock(), createBlock(_sfc_main$2, {
+                  key: 0,
+                  icon: data[props.config.iconKey],
+                  class: normalizeClass([[colorClass.value], "vc-tree-node-icon icon-lg"])
+                }, null, 8, ["icon", "class"])) : createCommentVNode("", true),
+                createElementVNode("span", {
+                  class: normalizeClass([props.config.nodeLabelClassName ? data[props.config.nodeLabelClassName] : "", "vc-tree-node-label"])
+                }, toDisplayString(data[props.config.labelKey]), 3)
+              ], 2))
+            ]),
+            _: 3
+          }, 8, ["data", "empty-text", "show-checkbox", "default-expand-all", "default-expanded-keys", "default-checked-keys", "props", "node-key"])
+        ], 4),
+        createVNode(VcLoading, {
+          active: __props.loading,
+          loader: "lds-spinner",
+          color: "primary",
+          size: "30",
+          class: "z-1 rounded"
+        }, null, 8, ["active"])
+      ], 512);
+    };
+  }
+});
+export {
+  _sfc_main as default
+};

package/library/components/VcTree/VcTree.vue3.mjs

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