cnhis-design-vue 3.1.23-beta.0 → 3.1.23-beta.11

package/es/components/search-cascader/src/SearchCascader.js

@@ -0,0 +1,168 @@
+import { defineComponent, ref, computed, provide, nextTick, openBlock, createBlock, unref, normalizeStyle, withCtx, createVNode, isRef, createElementVNode, renderSlot } from 'vue';
+import { uuidGenerator } from '../../../shared/utils/index2.js';
+import { onClickOutside, useDebounceFn } from '@vueuse/core';
+import { isString, isArray, isFunction } from 'lodash-es';
+import { NPopover, NInput } from 'naive-ui';
+import { InjectionSearchCascaderLoadingNode } from './constants/index2.js';
+import { useCssVariable } from './hooks/useCssVariable2.js';
+import { SearchMenu } from './components/SearchMenu.js';
+import _export_sfc from '../../../_virtual/plugin-vue_export-helper.js';
+
+const _hoisted_1 = ["id"];
+const _sfc_main = /* @__PURE__ */ defineComponent({
+  __name: "SearchCascader",
+  props: {
+    value: { type: [String, Array] },
+    clearable: { type: Boolean, default: false },
+    childKey: { type: String, default: "children" },
+    placeholder: { type: String, default: "\u8BF7\u9009\u62E9" },
+    editPlaceholder: { type: String, default: "\u8BF7\u8F93\u5165\u5173\u952E\u5B57\u8FDB\u884C\u641C\u7D22" },
+    options: { type: Array, default: () => [] },
+    search: { type: Function },
+    labelKey: { type: String, default: "label" },
+    valueKey: { type: String, default: "value" },
+    beforeSetValue: { type: Function }
+  },
+  emits: ["update:value", "focus"],
+  setup(__props, { emit: emits }) {
+    const props = __props;
+    function emitValue(value) {
+      Promise.resolve(isFunction(props.beforeSetValue) ? props.beforeSetValue(value) : value).then((result) => {
+        emits("update:value", result);
+      }, () => {
+      });
+    }
+    function onClear() {
+      emitValue([]);
+    }
+    const cssVariable = useCssVariable();
+    const uuid = uuidGenerator();
+    const show = ref(false);
+    const patternContent = ref("");
+    const displayValue = computed({
+      get() {
+        if (show.value)
+          return patternContent.value;
+        if (isString(props.value))
+          return props.value;
+        if (isArray(props.value))
+          return arrayOptionsToString(props.value);
+        return "";
+        function arrayOptionsToString(optionList) {
+          return optionList.reduce((res, item, idx) => {
+            if (idx === 0)
+              return item[props.labelKey];
+            return res + " / " + item[props.labelKey];
+          }, "");
+        }
+      },
+      set(value) {
+        patternContent.value = value;
+        search(void 0, value);
+      }
+    });
+    function onFocus(focusEvt) {
+      emits("focus", focusEvt);
+      openMenu();
+    }
+    function openMenu() {
+      if (show.value)
+        return;
+      show.value = true;
+      patternContent.value = "";
+      search();
+    }
+    async function closeMenu() {
+      var _a;
+      show.value = false;
+      (_a = inputRef.value) == null ? void 0 : _a.blur();
+    }
+    const inputRef = ref();
+    onClickOutside(inputRef, (evt) => {
+      var _a;
+      if (!show.value)
+        return;
+      if (!evt.target)
+        return closeMenu();
+      if (isInPopper(evt.target)) {
+        (_a = inputRef.value) == null ? void 0 : _a.focus();
+        return;
+      }
+      closeMenu();
+      function isInPopper(targetEle) {
+        let result = false;
+        let current = targetEle;
+        while (current) {
+          if (current.id === uuid) {
+            result = true;
+            break;
+          }
+          current = current.parentElement;
+        }
+        return result;
+      }
+    });
+    const popoverRef = ref();
+    const currentNode = ref();
+    const loadingNode = ref(null);
+    provide(InjectionSearchCascaderLoadingNode, loadingNode);
+    const search = useDebounceFn(async (node, keyword) => {
+      var _a;
+      try {
+        loadingNode.value = node;
+        await (isFunction(props.search) && props.search(node, keyword));
+        currentNode.value = node;
+      } finally {
+        loadingNode.value = null;
+        await nextTick();
+        (_a = popoverRef.value) == null ? void 0 : _a.syncPosition();
+      }
+    }, 400);
+    return (_ctx, _cache) => {
+      return openBlock(), createBlock(unref(NPopover), {
+        class: "search-cascader",
+        trigger: "manual",
+        show: show.value,
+        "onUpdate:show": _cache[1] || (_cache[1] = ($event) => show.value = $event),
+        "show-arrow": false,
+        placement: "bottom-start",
+        style: normalizeStyle(unref(cssVariable)),
+        width: __props.options.length ? void 0 : "trigger",
+        ref_key: "popoverRef",
+        ref: popoverRef
+      }, {
+        trigger: withCtx(() => [
+          createVNode(unref(NInput), {
+            placeholder: show.value ? __props.editPlaceholder : __props.placeholder,
+            clearable: __props.clearable,
+            onClear,
+            value: unref(displayValue),
+            "onUpdate:value": _cache[0] || (_cache[0] = ($event) => isRef(displayValue) ? displayValue.value = $event : null),
+            ref_key: "inputRef",
+            ref: inputRef,
+            onFocus
+          }, null, 8, ["placeholder", "clearable", "value"])
+        ]),
+        default: withCtx(() => [
+          createElementVNode("section", { id: unref(uuid) }, [
+            createVNode(unref(SearchMenu), {
+              "label-key": __props.labelKey,
+              options: __props.options,
+              onNodeClick: unref(search),
+              "current-node": currentNode.value
+            }, {
+              empty: withCtx(() => [
+                renderSlot(_ctx.$slots, "empty")
+              ]),
+              _: 3
+            }, 8, ["label-key", "options", "onNodeClick", "current-node"])
+          ], 8, _hoisted_1)
+        ]),
+        _: 3
+      }, 8, ["show", "style", "width"]);
+    };
+  }
+});
+var script = /* @__PURE__ */ _export_sfc(_sfc_main, [["__file", "SearchCascader.vue"]]);
+
+export { script as default };

package/es/components/search-cascader/src/SearchCascader.vue.d.ts

@@ -0,0 +1,198 @@
+import { AnyObject, Func, Nullable } from '../../../../es/shared/types';
+import { PropType } from 'vue';
+declare type ValueType = string | AnyObject[];
+declare const _default: import("vue").DefineComponent<{
+    value: {
+        type: PropType<ValueType>;
+    };
+    clearable: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    childKey: {
+        type: StringConstructor;
+        default: string;
+    };
+    placeholder: {
+        type: StringConstructor;
+        default: string;
+    };
+    editPlaceholder: {
+        type: StringConstructor;
+        default: string;
+    };
+    options: {
+        type: PropType<AnyObject[]>;
+        default: () => never[];
+    };
+    search: {
+        type: PropType<Func<any[], any>>;
+    };
+    labelKey: {
+        type: StringConstructor;
+        default: string;
+    };
+    valueKey: {
+        type: StringConstructor;
+        default: string;
+    };
+    beforeSetValue: {
+        type: PropType<(value: ValueType) => void | ValueType | Promise<ValueType>>;
+    };
+}, {
+    props: Readonly<import("@vue/shared").LooseRequired<Readonly<import("vue").ExtractPropTypes<{
+        value: {
+            type: PropType<ValueType>;
+        };
+        clearable: {
+            type: BooleanConstructor;
+            default: boolean;
+        };
+        childKey: {
+            type: StringConstructor;
+            default: string;
+        };
+        placeholder: {
+            type: StringConstructor;
+            default: string;
+        };
+        editPlaceholder: {
+            type: StringConstructor;
+            default: string;
+        };
+        options: {
+            type: PropType<AnyObject[]>;
+            default: () => never[];
+        };
+        search: {
+            type: PropType<Func<any[], any>>;
+        };
+        labelKey: {
+            type: StringConstructor;
+            default: string;
+        };
+        valueKey: {
+            type: StringConstructor;
+            default: string;
+        };
+        beforeSetValue: {
+            type: PropType<(value: ValueType) => void | ValueType | Promise<ValueType>>;
+        };
+    }>> & {
+        onFocus?: ((...args: any[]) => any) | undefined;
+        "onUpdate:value"?: ((...args: any[]) => any) | undefined;
+    }>>;
+    emits: (event: "update:value" | "focus", ...args: any[]) => void;
+    emitValue: (value: ValueType) => void;
+    onClear: () => void;
+    cssVariable: {
+        '--menu-width': number;
+    };
+    uuid: string;
+    show: import("vue").Ref<boolean>;
+    patternContent: import("vue").Ref<string>;
+    displayValue: import("vue").WritableComputedRef<string>;
+    onFocus: (focusEvt: Event) => void;
+    openMenu: () => void;
+    closeMenu: () => Promise<void>;
+    inputRef: import("vue").Ref<any>;
+    popoverRef: import("vue").Ref<any>;
+    currentNode: import("vue").Ref<AnyObject | undefined>;
+    loadingNode: import("vue").Ref<Nullable<AnyObject>>;
+    search: (node?: AnyObject, keyword?: string) => Promise<void>;
+    NInput: any;
+    NPopover: any;
+    SearchMenu: import("vue").DefineComponent<{
+        childKey: {
+            type: StringConstructor;
+            default: string;
+        };
+        options: {
+            type: PropType<AnyObject[]>;
+            default: () => never[];
+        };
+        onNodeClick: {
+            type: PropType<Func<any[], any>>;
+        };
+        labelKey: {
+            type: StringConstructor;
+            default: string;
+        };
+        currentNode: {
+            type: PropType<AnyObject>;
+        };
+    }, () => JSX.Element, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, Record<string, any>, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
+        childKey: {
+            type: StringConstructor;
+            default: string;
+        };
+        options: {
+            type: PropType<AnyObject[]>;
+            default: () => never[];
+        };
+        onNodeClick: {
+            type: PropType<Func<any[], any>>;
+        };
+        labelKey: {
+            type: StringConstructor;
+            default: string;
+        };
+        currentNode: {
+            type: PropType<AnyObject>;
+        };
+    }>>, {
+        options: AnyObject[];
+        childKey: string;
+        labelKey: string;
+    }>;
+}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, ("update:value" | "focus")[], "focus" | "update:value", import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
+    value: {
+        type: PropType<ValueType>;
+    };
+    clearable: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    childKey: {
+        type: StringConstructor;
+        default: string;
+    };
+    placeholder: {
+        type: StringConstructor;
+        default: string;
+    };
+    editPlaceholder: {
+        type: StringConstructor;
+        default: string;
+    };
+    options: {
+        type: PropType<AnyObject[]>;
+        default: () => never[];
+    };
+    search: {
+        type: PropType<Func<any[], any>>;
+    };
+    labelKey: {
+        type: StringConstructor;
+        default: string;
+    };
+    valueKey: {
+        type: StringConstructor;
+        default: string;
+    };
+    beforeSetValue: {
+        type: PropType<(value: ValueType) => void | ValueType | Promise<ValueType>>;
+    };
+}>> & {
+    onFocus?: ((...args: any[]) => any) | undefined;
+    "onUpdate:value"?: ((...args: any[]) => any) | undefined;
+}, {
+    options: AnyObject[];
+    placeholder: string;
+    valueKey: string;
+    clearable: boolean;
+    childKey: string;
+    editPlaceholder: string;
+    labelKey: string;
+}>;
+export default _default;

package/es/components/search-cascader/src/components/SearchMenu.d.ts

@@ -0,0 +1,45 @@
+import { AnyObject, Func } from '../../../../../es/shared/types';
+import { PropType } from 'vue';
+export declare const SearchMenu: import("vue").DefineComponent<{
+    childKey: {
+        type: StringConstructor;
+        default: string;
+    };
+    options: {
+        type: PropType<AnyObject[]>;
+        default: () => never[];
+    };
+    onNodeClick: {
+        type: PropType<Func<any[], any>>;
+    };
+    labelKey: {
+        type: StringConstructor;
+        default: string;
+    };
+    currentNode: {
+        type: PropType<AnyObject>;
+    };
+}, () => JSX.Element, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, Record<string, any>, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
+    childKey: {
+        type: StringConstructor;
+        default: string;
+    };
+    options: {
+        type: PropType<AnyObject[]>;
+        default: () => never[];
+    };
+    onNodeClick: {
+        type: PropType<Func<any[], any>>;
+    };
+    labelKey: {
+        type: StringConstructor;
+        default: string;
+    };
+    currentNode: {
+        type: PropType<AnyObject>;
+    };
+}>>, {
+    options: AnyObject[];
+    childKey: string;
+    labelKey: string;
+}>;

package/es/components/search-cascader/src/components/SearchMenu.js

@@ -0,0 +1,134 @@
+import { defineComponent, computed, inject, createVNode, ref, createTextVNode } from 'vue';
+import { traverse } from '../../../../shared/utils/index2.js';
+import { Reload, ChevronForward } from '@vicons/ionicons5';
+import { useVirtualList } from '@vueuse/core';
+import { isArray, isFunction } from 'lodash-es';
+import { InjectionSearchCascaderLoadingNode } from '../constants/index2.js';
+
+const SearchMenuList = defineComponent({
+  props: {
+    options: {
+      type: Array,
+      default: () => []
+    },
+    activeNodes: {
+      type: Array,
+      default: () => []
+    },
+    labelKey: {
+      type: String,
+      default: "label"
+    }
+  },
+  emits: ["nodeClick"],
+  setup(props, {
+    emit
+  }) {
+    const optionsRef = computed(() => props.options);
+    const {
+      list,
+      containerProps,
+      wrapperProps
+    } = useVirtualList(optionsRef, {
+      itemHeight: 32,
+      overscan: 5
+    });
+    const loadingNode = inject(InjectionSearchCascaderLoadingNode);
+    return () => {
+      return createVNode("div", {
+        "class": "search-cascader__optionWrapper",
+        "ref": containerProps.ref,
+        "style": containerProps.style,
+        "onScroll": containerProps.onScroll
+      }, [createVNode("div", {
+        "style": wrapperProps.value.style
+      }, [list.value.map((item) => {
+        var _a;
+        return createVNode("div", {
+          "class": ["search-cascader__option", {
+            "search-cascader__option--active": (_a = props.activeNodes) == null ? void 0 : _a.includes(item.data)
+          }],
+          "onClick": () => emit("nodeClick", item.data),
+          "title": item.data[props.labelKey]
+        }, [createVNode("div", {
+          "class": "search-cascader__optionText"
+        }, [item.data[props.labelKey]]), loadingNode.value === item.data ? createVNode(Reload, {
+          "class": "rotate"
+        }, null) : item.data.isLeaf ? null : createVNode(ChevronForward, null, null)]);
+      })])]);
+    };
+  }
+});
+const SearchMenu = defineComponent({
+  props: {
+    childKey: {
+      type: String,
+      default: "children"
+    },
+    options: {
+      type: Array,
+      default: () => []
+    },
+    onNodeClick: {
+      type: Function
+    },
+    labelKey: {
+      type: String,
+      default: "label"
+    },
+    currentNode: {
+      type: Object
+    }
+  },
+  setup(props, {
+    slots
+  }) {
+    const activeNodes = ref([]);
+    function renderList(options) {
+      return createVNode(SearchMenuList, {
+        "labelKey": props.labelKey,
+        "activeNodes": activeNodes.value,
+        "onNodeClick": props.onNodeClick,
+        "options": options
+      }, null);
+    }
+    function renderEmpty() {
+      return createVNode("section", {
+        "class": "search-cascader__emptyWrapper"
+      }, [isFunction(slots.empty) ? slots.empty() : createVNode("section", null, [createTextVNode("empty")])]);
+    }
+    function isNodeExpand(node) {
+      let result = false;
+      traverse(node, (n, stop) => {
+        if (n !== props.currentNode)
+          return;
+        result = true;
+        stop();
+      }, ["children"]);
+      return result;
+    }
+    function getRenderNodeList() {
+      if (!isArray(props.options) || !props.currentNode)
+        return [];
+      const result = [props.options];
+      let _options = props.options;
+      activeNodes.value.length = 0;
+      while (isArray(_options)) {
+        const expandNode = _options.find(isNodeExpand);
+        if (!expandNode)
+          break;
+        activeNodes.value.push(expandNode);
+        _options = expandNode[props.childKey];
+        result.push(_options);
+      }
+      return result;
+    }
+    return () => {
+      return createVNode("section", {
+        "class": "search-cascader__menuWrapper"
+      }, [!isArray(props.options) || !props.options.length ? renderEmpty() : !props.currentNode ? renderList(props.options) : getRenderNodeList().map(renderList)]);
+    };
+  }
+});
+
+export { SearchMenu };

package/es/components/search-cascader/src/components/index.d.ts

@@ -0,0 +1 @@
+export * from './SearchMenu';

package/es/components/search-cascader/src/components/index.js

@@ -0,0 +1 @@
+export { SearchMenu } from './SearchMenu.js';

package/es/components/search-cascader/src/constants/index.d.ts

@@ -0,0 +1,3 @@
+import { AnyObject, Nullable } from '../../../../../es/shared/types';
+import { InjectionKey, Ref } from 'vue';
+export declare const InjectionSearchCascaderLoadingNode: InjectionKey<Ref<Nullable<AnyObject>>>;

package/es/components/search-cascader/src/constants/index.js

@@ -0,0 +1 @@
+export { InjectionSearchCascaderLoadingNode } from './index2.js';

package/es/components/search-cascader/src/constants/index2.js

@@ -0,0 +1,3 @@
+const InjectionSearchCascaderLoadingNode = Symbol("InjectionSearchCascaderLoadingNode ");
+
+export { InjectionSearchCascaderLoadingNode };

package/es/components/search-cascader/src/hooks/index.d.ts

@@ -0,0 +1 @@
+export * from './useCssVariable';

package/es/components/search-cascader/src/hooks/index.js

@@ -0,0 +1 @@
+export { useCssVariable } from './useCssVariable2.js';

package/es/components/search-cascader/src/hooks/useCssVariable.d.ts

@@ -0,0 +1,3 @@
+export declare function useCssVariable(): {
+    '--menu-width': number;
+};

package/es/components/search-cascader/src/hooks/useCssVariable.js

@@ -0,0 +1 @@
+export { useCssVariable } from './useCssVariable2.js';

package/es/components/search-cascader/src/hooks/useCssVariable2.js

@@ -0,0 +1,7 @@
+function useCssVariable() {
+  return {
+    "--menu-width": 150
+  };
+}
+
+export { useCssVariable };

package/es/components/search-cascader/src/utils/index.d.ts

@@ -0,0 +1,2 @@
+import { AnyObject } from '../../../../../es/shared/types';
+export declare function getParentNodeList(node: AnyObject): never[];

package/es/components/search-cascader/src/utils/index.js

@@ -0,0 +1 @@
+export { getParentNodeList } from './index2.js';

package/es/components/search-cascader/src/utils/index2.js

@@ -0,0 +1,11 @@
+function getParentNodeList(node) {
+  const result = [];
+  let currentNode = node;
+  while (currentNode) {
+    result.unshift(currentNode);
+    currentNode = currentNode.parent;
+  }
+  return result;
+}
+
+export { getParentNodeList };

package/es/components/search-cascader/style/index.css

@@ -0,0 +1 @@
+.search-cascader__menuWrapper{display:flex;flex-wrap:nowrap;margin:-8px -14px}.search-cascader__option{align-items:center;border-radius:4px;box-sizing:border-box;display:flex;height:32px;justify-content:space-between;padding:0 8px 0 16px;width:100%}.search-cascader__option--active{background:#f8f8f8}.search-cascader__option:hover{background:#f5f5f5;cursor:pointer}.search-cascader__optionWrapper{background:#fff;height:256px;overflow-x:auto;width:calc(var(--menu-width)*1px)}.search-cascader__optionWrapper:not(:last-of-type){border:solid #e5e5e5;border-width:0 1px 0 0}.search-cascader__optionText{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;width:calc(100% - 20px)}.search-cascader__option svg{color:#bfbfbf;flex-shrink:0;font-size:12px;width:20px}.search-cascader__option svg.rotate{animation:rotate 1s linear infinite}.search-cascader__emptyWrapper{align-items:center;background:#fff;box-sizing:border-box;display:flex;height:300px;justify-content:center;padding:16px;width:100%}@keyframes rotate{0%{transform:rotate(0)}to{transform:rotate(1turn)}}

package/es/components/select-label/index.d.ts

@@ -170,6 +170,7 @@ declare const SelectLabel: SFCWithInstall<import("vue").DefineComponent<{
     NIcon: any;
     NModal: any;
     NSpace: any;
+    NTooltip: any;
     AddCircleOutline: import("vue").DefineComponent<{}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, import("vue").EmitsOptions, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{}>>, {}>;
     labelFormContent: import("vue").DefineComponent<{
         item: {

package/es/components/select-label/src/SelectLabel.vue.d.ts

@@ -170,6 +170,7 @@ declare const _default: import("vue").DefineComponent<{
     NIcon: any;
     NModal: any;
     NSpace: any;
+    NTooltip: any;
     AddCircleOutline: import("vue").DefineComponent<{}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, import("vue").EmitsOptions, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{}>>, {}>;
     labelFormContent: import("vue").DefineComponent<{
         item: {

package/es/components/select-label/src/SelectLabel.vue_vue_type_script_setup_true_lang.js

@@ -1,5 +1,5 @@
-import { defineComponent, ref, reactive, computed, onMounted, watch, openBlock, createElementBlock, Fragment, createElementVNode, createVNode, unref, withCtx, renderList, createBlock, normalizeStyle, createTextVNode, toDisplayString, withDirectives, normalizeClass, vShow, createCommentVNode, mergeProps, nextTick } from 'vue';
-import { NSpace, NTag, NIcon, NModal } from 'naive-ui';
+import { defineComponent, ref, reactive, computed, onMounted, watch, openBlock, createElementBlock, Fragment, createElementVNode, createVNode, unref, withCtx, renderList, createBlock, normalizeStyle, toDisplayString, withDirectives, normalizeClass, vShow, createCommentVNode, mergeProps, createTextVNode, nextTick } from 'vue';
+import { NSpace, NTag, NTooltip, NIcon, NModal } from 'naive-ui';
 import { AddCircleOutline } from '@vicons/ionicons5';
 import script from '../../../shared/components/SvgIcon/SvgIcon.js';
 import scriptFormContent from './LabelFormContent.js';
@@ -357,7 +357,13 @@ var _sfc_main = /* @__PURE__ */ defineComponent({
             onClose: ($event) => closeTag(v),
             size: "small"
           }, {
-            default: withCtx(() => [createTextVNode(toDisplayString(v.labelName), 1)]),
+            default: withCtx(() => [createVNode(unref(NTooltip), {
+              placement: "top-start"
+            }, {
+              trigger: withCtx(() => [createElementVNode("span", null, toDisplayString(v.labelName), 1)]),
+              default: withCtx(() => [createElementVNode("span", null, toDisplayString(v.labelName), 1)]),
+              _: 2
+            }, 1024)]),
             _: 2
           }, 1032, ["style", "closable", "onClose"]);
         }), 128)), !__props.explicit ? withDirectives((openBlock(), createElementBlock("span", {
@@ -385,7 +391,13 @@ var _sfc_main = /* @__PURE__ */ defineComponent({
             style: normalizeStyle(unref(handleLabelColor)(item)),
             size: "small"
           }, {
-            default: withCtx(() => [createTextVNode(toDisplayString(item.labelName), 1)]),
+            default: withCtx(() => [createVNode(unref(NTooltip), {
+              placement: "top-start"
+            }, {
+              trigger: withCtx(() => [createElementVNode("span", null, toDisplayString(item.labelName), 1)]),
+              default: withCtx(() => [createElementVNode("span", null, toDisplayString(item.labelName), 1)]),
+              _: 2
+            }, 1024)]),
             _: 2
           }, 1032, ["checked", "onUpdate:checked", "style"]);
         }), 128))]),