cnhis-design-vue 3.3.1-beta.4 → 3.3.1-beta.48

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

@@ -1 +1,309 @@
-import{defineComponent as e,computed as a,provide as l,ref as t,nextTick as o,watch as r,openBlock as u,createBlock as n,unref as s,mergeProps as i,isRef as d,withCtx as c,createElementVNode as v,createVNode as p,createCommentVNode as f,normalizeStyle as h,renderSlot as y}from"vue";import{useTheme as m}from"../../../shared/hooks/useTheme.js";import{useEventBus as b,useVModel as g,onClickOutside as w,useDebounceFn as k}from"@vueuse/core";import"date-fns";import{isArray as S,isString as C,isObject as j,isFunction as K}from"lodash-es";import{isPromise as P,NOOP as _}from"@vue/shared";import{uuidGenerator as N}from"../../../shared/utils/index.js";import"@vueuse/shared";import"../../../shared/hooks/selectHooks/useSearchContent.js";import"@vicons/ionicons5";import{NPopover as x,NInput as L}from"naive-ui";import"../../../shared/hooks/useScrollLoading.js";import A from"./components/ClearIcon.vue.js";import{InjectionSearchCascaderCheckAbleLevel as B,InjectionKeyboardEventBus as U,InjectionSearchCascaderLoadingNode as W,InjectionSearchCascaderValue as F}from"./constants/index.js";import{SearchMenu as I}from"./components/SearchMenu.js";var T;const V={style:{width:"100%"}},E=["id"];var O=e({__name:"SearchCascader",props:{value:{type:[String,Array]},show:{type:Boolean,default:!1},clearable:{type:Boolean,default:!1},childKey:{type:String,default:"children"},placeholder:{type:String,default:(null==(T=window.getLanguageByCode)?void 0:T.call(window,"10010.1.147"))||"请选择"},editPlaceholder:{type:String,default:"请输入关键字进行搜索"},options:{type:Array,default:()=>[]},search:{type:Function},labelKey:{type:String,default:"label"},valueKey:{type:String,default:"value"},checkAbleLevel:{type:[Number,String],default:"last"},beforeSetValue:{type:Function},menuWidth:{type:[Number,String],default:150},disabled:Boolean,inputProps:{type:Object},popperProps:{type:Object}},emits:["update:value","focus","update:show"],setup(e,{expose:T,emit:O}){const R=e,$=m();const H=a((()=>!R.disabled&&R.clearable&&(S(R.value)?R.value.length:!!R.value)));function M(){!function(e){if(!K(R.beforeSetValue))return O("update:value",e);const a=R.beforeSetValue(e);P(a)?a.then((e=>O("update:value",e)),_):O("update:value",a)}([])}function q(e){var a;"INPUT"===(null==(a=e.target)?void 0:a.tagName)&&ae()}const z=e=>{var a;"INPUT"!==(null==(a=e.target)?void 0:a.tagName)||"Enter"!==e.code||Q.value?G.emit(e.key,e):ae()},D=a((()=>({"--menu-width":R.menuWidth}))),G=b("cascaderKeydown"),J=N(),Q=g(R,"show",O);l(B,a((()=>R.checkAbleLevel))),l(U,G);const X=t(""),Y=a((()=>C(R.value)&&R.value?R.value:S(R.value)&&R.value.length?R.value.map((e=>j(e)?e[R.labelKey]:e)).join(" / "):R.editPlaceholder)),Z=a({get:()=>Q.value?X.value:C(R.value)?R.value:S(R.value)?R.value.reduce(((e,a,l)=>0===l?a[R.labelKey]:e+" / "+a[R.labelKey]),""):"",set(e){X.value=e,se(void 0,e)}});function ee(e){O("focus",e)}function ae(){Q.value||R.disabled||(Q.value=!0,X.value="",se())}async function le(){var e;Q.value=!1,null==(e=te.value)||e.blur()}const te=t();w(te,(e=>{var a;if(!Q.value)return;const l=e;if(!l.target)return le();!function(e){let a=!1,l=e;for(;l;){if(l.id===J){a=!0;break}l=l.parentElement}return a}(l.target)?le():null==(a=te.value)||a.focus()}));const oe=t(),re=t(),ue=t(),ne=t(null);l(W,ne),l(F,a((()=>R.value)));const se=k((async(e,a)=>{var l;const{type:t,node:r,dbClick:u}=e||{};try{if("update"===t)return void(K(R.search)&&R.search({...r,isLeaf:!0}));ne.value=r;const e=await(K(R.search)&&R.search(r,a,u));re.value=j(e)||S(e)?e:r}finally{ne.value=null,await o(),null==(l=oe.value)||l.syncPosition()}}),400),ie=e=>{ue.value=e};return r((()=>R.show),(e=>{e&&(ue.value={})})),T({getWidth(){var e;if(!te.value)return 0;const a=null==(e=te.value)?void 0:e.$el;return a?a.clientWidth:void 0},setCursor(e){ue.value=e}}),(a,l)=>(u(),n(s(x),i({class:"search-cascader",trigger:"manual",show:s(Q),"onUpdate:show":l[1]||(l[1]=e=>d(Q)?Q.value=e:null),"show-arrow":!1,placement:"bottom-start",style:s(D),disabled:e.disabled,width:e.options.length?void 0:"trigger",ref_key:"popoverRef",ref:oe},e.popperProps),{trigger:c((()=>[v("div",V,[p(s(L),i({disabled:e.disabled,class:{"search-cascader__input":!e.disabled},placeholder:s(Q)?s(Y):e.placeholder,clearable:!1,value:s(Z),"onUpdate:value":l[0]||(l[0]=e=>d(Z)?Z.value=e:null),readonly:!s(Q),ref_key:"inputRef",ref:te,onFocus:ee,onClick:q,onKeydown:z},e.inputProps),{suffix:c((()=>[s(H)?(u(),n(A,{key:0,onClick:M})):f("v-if",!0)])),_:1},16,["disabled","class","placeholder","value","readonly"])])])),default:c((()=>[v("section",{id:s(J)},[p(s(I),{style:h(s($)),"label-key":e.labelKey,"value-key":e.valueKey,options:e.options,onNodeClick:s(se),onChangeCursor:ie,"current-node":re.value,"cursor-node":ue.value},{empty:c((()=>[y(a.$slots,"empty")])),_:3},8,["style","label-key","value-key","options","onNodeClick","current-node","cursor-node"])],8,E)])),_:3},16,["show","style","disabled","width"]))}});export{O as default};
+import { defineComponent, computed, provide, ref, nextTick, watch, openBlock, createBlock, unref, mergeProps, isRef, withCtx, createElementVNode, createVNode, createCommentVNode, normalizeStyle, renderSlot } from 'vue';
+import { useTheme } from '../../../shared/hooks/useTheme.js';
+import { useEventBus, useVModel, onClickOutside, useDebounceFn } from '@vueuse/core';
+import 'date-fns';
+import { isArray, isString, isObject, isFunction } from 'lodash-es';
+import { isPromise, NOOP } from '@vue/shared';
+import { uuidGenerator } from '../../../shared/utils/index.js';
+import '@vueuse/shared';
+import '../../../shared/hooks/selectHooks/useSearchContent.js';
+import '@vicons/ionicons5';
+import { NPopover, NInput } from 'naive-ui';
+import '../../../shared/hooks/useScrollLoading.js';
+import ClearIcon from './components/ClearIcon.vue.js';
+import { InjectionSearchCascaderCheckAbleLevel, InjectionKeyboardEventBus, InjectionSearchCascaderLoadingNode, InjectionSearchCascaderValue } from './constants/index.js';
+import { SearchMenu } from './components/SearchMenu.js';
+
+var _a;
+const _hoisted_1 = {
+  style: {
+    "width": "100%"
+  }
+};
+const _hoisted_2 = ["id"];
+var _sfc_main = /* @__PURE__ */ defineComponent({
+  __name: "SearchCascader",
+  props: {
+    value: {
+      type: [String, Array]
+    },
+    show: {
+      type: Boolean,
+      default: false
+    },
+    clearable: {
+      type: Boolean,
+      default: false
+    },
+    childKey: {
+      type: String,
+      default: "children"
+    },
+    placeholder: {
+      type: String,
+      default: ((_a = window.getLanguageByCode) == null ? void 0 : _a.call(window, "10010.1.147")) || "\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"
+    },
+    checkAbleLevel: {
+      type: [Number, String],
+      default: "last"
+    },
+    beforeSetValue: {
+      type: Function
+    },
+    menuWidth: {
+      type: [Number, String],
+      default: 150
+    },
+    disabled: Boolean,
+    inputProps: {
+      type: Object
+    },
+    popperProps: {
+      type: Object
+    }
+  },
+  emits: ["update:value", "focus", "update:show"],
+  setup(__props, {
+    expose,
+    emit
+  }) {
+    const props = __props;
+    const cssVars = useTheme();
+    function emitValue(value) {
+      if (!isFunction(props.beforeSetValue))
+        return emit("update:value", value);
+      const result = props.beforeSetValue(value);
+      if (isPromise(result)) {
+        result.then((res) => emit("update:value", res), NOOP);
+      } else {
+        emit("update:value", result);
+      }
+    }
+    const clearableRef = computed(() => {
+      return !props.disabled && props.clearable && (isArray(props.value) ? props.value.length : !!props.value);
+    });
+    function onClear() {
+      emitValue([]);
+    }
+    function onClick(evt) {
+      var _a2;
+      if (((_a2 = evt.target) == null ? void 0 : _a2.tagName) !== "INPUT")
+        return;
+      openMenu();
+    }
+    const onKeydown = (evt) => {
+      var _a2;
+      if (((_a2 = evt.target) == null ? void 0 : _a2.tagName) === "INPUT" && evt.code === "Enter") {
+        if (!show.value) {
+          openMenu();
+          return;
+        }
+      }
+      eventBus.emit(evt.key, evt);
+    };
+    const cssVariable = computed(() => ({
+      "--menu-width": props.menuWidth
+    }));
+    const eventBus = useEventBus("cascaderKeydown");
+    const uuid = uuidGenerator();
+    const show = useVModel(props, "show", emit);
+    provide(InjectionSearchCascaderCheckAbleLevel, computed(() => props.checkAbleLevel));
+    provide(InjectionKeyboardEventBus, eventBus);
+    const patternContent = ref("");
+    const editPlaceholderRef = computed(() => {
+      return isString(props.value) && props.value ? props.value : isArray(props.value) && props.value.length ? props.value.map((item) => {
+        return isObject(item) ? item[props.labelKey] : item;
+      }).join(" / ") : props.editPlaceholder;
+    });
+    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) {
+      emit("focus", focusEvt);
+    }
+    function openMenu() {
+      if (show.value || props.disabled)
+        return;
+      show.value = true;
+      patternContent.value = "";
+      search();
+    }
+    async function closeMenu() {
+      var _a2;
+      show.value = false;
+      (_a2 = inputRef.value) == null ? void 0 : _a2.blur();
+    }
+    const inputRef = ref();
+    onClickOutside(inputRef, (evt) => {
+      var _a2;
+      if (!show.value)
+        return;
+      const _evt = evt;
+      if (!_evt.target)
+        return closeMenu();
+      if (isInPopper(_evt.target)) {
+        (_a2 = inputRef.value) == null ? void 0 : _a2.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 cursorNode = ref();
+    const loadingNode = ref(null);
+    provide(InjectionSearchCascaderLoadingNode, loadingNode);
+    provide(InjectionSearchCascaderValue, computed(() => props.value));
+    const search = useDebounceFn(async (payload, keyword) => {
+      var _a2;
+      const {
+        type,
+        node,
+        dbClick
+      } = payload || {};
+      try {
+        if (type === "update") {
+          isFunction(props.search) && props.search({
+            ...node,
+            isLeaf: true
+          });
+          return;
+        }
+        loadingNode.value = node;
+        const result = await (isFunction(props.search) && props.search(node, keyword, dbClick));
+        currentNode.value = isObject(result) || isArray(result) ? result : node;
+      } finally {
+        loadingNode.value = null;
+        await nextTick();
+        (_a2 = popoverRef.value) == null ? void 0 : _a2.syncPosition();
+      }
+    }, 400);
+    const changeCursorNode = (node) => {
+      cursorNode.value = node;
+    };
+    watch(() => props.show, (bool) => {
+      if (bool) {
+        cursorNode.value = {};
+      }
+    });
+    expose({
+      getWidth() {
+        var _a2;
+        if (!inputRef.value)
+          return 0;
+        const ele = (_a2 = inputRef.value) == null ? void 0 : _a2.$el;
+        if (!ele)
+          return;
+        return ele.clientWidth;
+      },
+      setCursor(option) {
+        cursorNode.value = option;
+      }
+    });
+    return (_ctx, _cache) => {
+      return openBlock(), createBlock(unref(NPopover), mergeProps({
+        class: "search-cascader",
+        trigger: "manual",
+        show: unref(show),
+        "onUpdate:show": _cache[1] || (_cache[1] = ($event) => isRef(show) ? show.value = $event : null),
+        "show-arrow": false,
+        placement: "bottom-start",
+        style: unref(cssVariable),
+        disabled: __props.disabled,
+        width: __props.options.length ? void 0 : "trigger",
+        ref_key: "popoverRef",
+        ref: popoverRef
+      }, __props.popperProps), {
+        trigger: withCtx(() => [createElementVNode("div", _hoisted_1, [createVNode(unref(NInput), mergeProps({
+          disabled: __props.disabled,
+          class: {
+            "search-cascader__input": !__props.disabled
+          },
+          placeholder: unref(show) ? unref(editPlaceholderRef) : __props.placeholder,
+          clearable: false,
+          value: unref(displayValue),
+          "onUpdate:value": _cache[0] || (_cache[0] = ($event) => isRef(displayValue) ? displayValue.value = $event : null),
+          readonly: !unref(show),
+          ref_key: "inputRef",
+          ref: inputRef,
+          onFocus,
+          onClick,
+          onKeydown
+        }, __props.inputProps), {
+          suffix: withCtx(() => [unref(clearableRef) ? (openBlock(), createBlock(ClearIcon, {
+            key: 0,
+            onClick: onClear
+          })) : createCommentVNode("v-if", true)]),
+          _: 1
+        }, 16, ["disabled", "class", "placeholder", "value", "readonly"])])]),
+        default: withCtx(() => [createElementVNode("section", {
+          id: unref(uuid)
+        }, [createVNode(unref(SearchMenu), {
+          style: normalizeStyle(unref(cssVars)),
+          "label-key": __props.labelKey,
+          "value-key": __props.valueKey,
+          options: __props.options,
+          onNodeClick: unref(search),
+          onChangeCursor: changeCursorNode,
+          "current-node": currentNode.value,
+          "cursor-node": cursorNode.value
+        }, {
+          empty: withCtx(() => [renderSlot(_ctx.$slots, "empty")]),
+          _: 3
+        }, 8, ["style", "label-key", "value-key", "options", "onNodeClick", "current-node", "cursor-node"])], 8, _hoisted_2)]),
+        _: 3
+      }, 16, ["show", "style", "disabled", "width"]);
+    };
+  }
+});
+
+export { _sfc_main as default };

package/es/components/search-cascader/src/components/ClearIcon.vue.js

@@ -1 +1,32 @@
-import{openBlock as r,createElementBlock as e,createElementVNode as o}from"vue";import L from"../../../../_virtual/_plugin-vue_export-helper.js";const l={},n={viewBox:"0 0 16 16",version:"1.1",xmlns:"http://www.w3.org/2000/svg",style:{width:"15px",color:"var(--n-clear-color)",cursor:"pointer"}},t=[o("g",{stroke:"none","stroke-width":"1",fill:"none","fill-rule":"evenodd"},[o("g",{fill:"currentColor","fill-rule":"nonzero"},[o("path",{d:"M8,2 C11.3137085,2 14,4.6862915 14,8 C14,11.3137085 11.3137085,14 8,14 C4.6862915,14 2,11.3137085 2,8 C2,4.6862915 4.6862915,2 8,2 Z M6.5343055,5.83859116 C6.33943736,5.70359511 6.07001296,5.72288026 5.89644661,5.89644661 L5.89644661,5.89644661 L5.83859116,5.9656945 C5.70359511,6.16056264 5.72288026,6.42998704 5.89644661,6.60355339 L5.89644661,6.60355339 L7.293,8 L5.89644661,9.39644661 L5.83859116,9.4656945 C5.70359511,9.66056264 5.72288026,9.92998704 5.89644661,10.1035534 L5.89644661,10.1035534 L5.9656945,10.1614088 C6.16056264,10.2964049 6.42998704,10.2771197 6.60355339,10.1035534 L6.60355339,10.1035534 L8,8.707 L9.39644661,10.1035534 L9.4656945,10.1614088 C9.66056264,10.2964049 9.92998704,10.2771197 10.1035534,10.1035534 L10.1035534,10.1035534 L10.1614088,10.0343055 C10.2964049,9.83943736 10.2771197,9.57001296 10.1035534,9.39644661 L10.1035534,9.39644661 L8.707,8 L10.1035534,6.60355339 L10.1614088,6.5343055 C10.2964049,6.33943736 10.2771197,6.07001296 10.1035534,5.89644661 L10.1035534,5.89644661 L10.0343055,5.83859116 C9.83943736,5.70359511 9.57001296,5.72288026 9.39644661,5.89644661 L9.39644661,5.89644661 L8,7.293 L6.60355339,5.89644661 Z"})])],-1)];var i=L(l,[["render",function(o,L){return r(),e("svg",n,t)}],["__file","ClearIcon.vue"]]);export{i as default};
+import { openBlock, createElementBlock, createElementVNode } from 'vue';
+import _export_sfc from '../../../../_virtual/_plugin-vue_export-helper.js';
+
+const _sfc_main = {};
+const _hoisted_1 = {
+  viewBox: "0 0 16 16",
+  version: "1.1",
+  xmlns: "http://www.w3.org/2000/svg",
+  style: {
+    "width": "15px",
+    "color": "var(--n-clear-color)",
+    "cursor": "pointer"
+  }
+};
+const _hoisted_2 = /* @__PURE__ */ createElementVNode("g", {
+  stroke: "none",
+  "stroke-width": "1",
+  fill: "none",
+  "fill-rule": "evenodd"
+}, [/* @__PURE__ */ createElementVNode("g", {
+  fill: "currentColor",
+  "fill-rule": "nonzero"
+}, [/* @__PURE__ */ createElementVNode("path", {
+  d: "M8,2 C11.3137085,2 14,4.6862915 14,8 C14,11.3137085 11.3137085,14 8,14 C4.6862915,14 2,11.3137085 2,8 C2,4.6862915 4.6862915,2 8,2 Z M6.5343055,5.83859116 C6.33943736,5.70359511 6.07001296,5.72288026 5.89644661,5.89644661 L5.89644661,5.89644661 L5.83859116,5.9656945 C5.70359511,6.16056264 5.72288026,6.42998704 5.89644661,6.60355339 L5.89644661,6.60355339 L7.293,8 L5.89644661,9.39644661 L5.83859116,9.4656945 C5.70359511,9.66056264 5.72288026,9.92998704 5.89644661,10.1035534 L5.89644661,10.1035534 L5.9656945,10.1614088 C6.16056264,10.2964049 6.42998704,10.2771197 6.60355339,10.1035534 L6.60355339,10.1035534 L8,8.707 L9.39644661,10.1035534 L9.4656945,10.1614088 C9.66056264,10.2964049 9.92998704,10.2771197 10.1035534,10.1035534 L10.1035534,10.1035534 L10.1614088,10.0343055 C10.2964049,9.83943736 10.2771197,9.57001296 10.1035534,9.39644661 L10.1035534,9.39644661 L8.707,8 L10.1035534,6.60355339 L10.1614088,6.5343055 C10.2964049,6.33943736 10.2771197,6.07001296 10.1035534,5.89644661 L10.1035534,5.89644661 L10.0343055,5.83859116 C9.83943736,5.70359511 9.57001296,5.72288026 9.39644661,5.89644661 L9.39644661,5.89644661 L8,7.293 L6.60355339,5.89644661 Z"
+})])], -1);
+const _hoisted_3 = [_hoisted_2];
+function _sfc_render(_ctx, _cache) {
+  return openBlock(), createElementBlock("svg", _hoisted_1, _hoisted_3);
+}
+var ClearIcon = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render], ["__file", "ClearIcon.vue"]]);
+
+export { ClearIcon as default };

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

@@ -1 +1,320 @@
-import{defineComponent as e,ref as t,createVNode as r,createTextVNode as o,computed as n,inject as l,onBeforeUnmount as a,withModifiers as c}from"vue";import{traverse as s}from"../../../../shared/utils/index.js";import{Reload as u,ChevronForward as i}from"@vicons/ionicons5";import{NOOP as d}from"@vue/shared";import{useVirtualList as p}from"@vueuse/core";import{isArray as f,isFunction as v,isNumber as y,isEqual as h,isString as m}from"lodash-es";import{NCheckbox as N}from"naive-ui";import{InjectionSearchCascaderLoadingNode as g,InjectionSearchCascaderValue as C,InjectionSearchCascaderCheckAbleLevel as k,InjectionKeyboardEventBus as b}from"../constants/index.js";const K=e({props:{options:{type:Array,default:()=>[]},activeNodes:{type:Array,default:()=>[]},level:{type:Number,required:!0},labelKey:{type:String,default:"label"},valueKey:{type:String,default:"value"},cursorNode:{type:Object,default:()=>({})}},emits:["nodeClick","changeCursor"],setup(e,{emit:t}){const o=n((()=>e.options)),{list:s,containerProps:v,wrapperProps:K}=p(o,{itemHeight:32,overscan:5}),_=l(g),x=l(C),A=l(k),S=l(b),j=n((()=>y(A.value)&&A.value<=e.level));function w(e){return Object.keys(e).length<=0}function T(t){return e.cursorNode==t}function I(t){const r=function(e){const t=[e];let r=e;for(;r.parent;)r=r.parent,t.unshift(r);return t}(t);if(f(x.value))return h(o(r,e.valueKey),o(x.value,e.valueKey));if(m(x.value)){const t=x.value.split("/").map((e=>e.trim()));return h(t,o(r,e.labelKey))}return!1;function o(e,t){return e.map((e=>e[t]))}}function O(e){const t=v.ref.value;if(t){const r=32*e-(null==t?void 0:t.clientHeight);t.scrollTo(0,r>0?r:0)}}function R(r,n){if("ArrowUp"===r){if(w(e.cursorNode))return;const r=o.value.findIndex((t=>t===e.cursorNode));if(r>=0){const e=0===r?o.value.length-1:r-1,n=o.value[e];t("changeCursor",n),O(e+3)}}if("ArrowRight"===r){if(w(e.cursorNode))return;t("nodeClick",{type:"search",node:e.cursorNode}),t("changeCursor",{})}if("ArrowDown"===r){if(w(e.cursorNode))return t("changeCursor",o.value[0]);const r=o.value.findIndex((t=>t===e.cursorNode));if(r>=0){const e=r>=o.value.length-1?0:r+1,n=o.value[e];t("changeCursor",n),O(e+1)}}if("ArrowLeft"===r&&e.activeNodes.length){const r=e.activeNodes.slice(-1);t("changeCursor",r[0])}"Enter"===r&&function(){if(!w(e.cursorNode))Reflect.set(n,"stopCapture",!0),j.value?t("nodeClick",{type:"update",node:e.cursorNode}):t("nodeClick",{type:"search",node:e.cursorNode})}()}a((()=>{S.off(R)}));let W=null,H=0;return S.on(R),()=>r("div",{class:"search-cascader__optionWrapper",ref:v.ref,style:v.style,onScroll:v.onScroll},[r("div",{style:K.value.style},[s.value.map((o=>{return r("div",{class:["search-cascader__option",{"search-cascader__option--active":(n=o.data,(null==(l=e.activeNodes)?void 0:l.includes(n))||T(o.data))}],onClick:()=>function(e){H++,1===H?W=setTimeout((()=>{t("nodeClick",{type:"search",node:e}),W=null}),200):(W&&clearTimeout(W),W=setTimeout((()=>{t("nodeClick",{type:"search",node:e,dbClick:!0}),H=0,W=null}),200))}(o.data),title:o.data[e.labelKey]},[r("div",{class:"search-cascader__optionText"},[j.value?r(N,{style:{marginRight:"8px"},checked:I(o.data),onClick:c(d,["stop"]),onUpdateChecked:e=>e&&function(e){t("nodeClick",{type:"update",node:e})}(o.data)},null):null,r("span",{class:{"search-cascader__optionText--active":I(o.data)}},[o.data[e.labelKey]])]),_.value===o.data?r(u,{class:"rotate"},null):o.data.isLeaf?null:r(i,null,null)]);var n,l}))])])}}),_=e({props:{childKey:{type:String,default:"children"},options:{type:Array,default:()=>[]},labelKey:{type:String,default:"label"},valueKey:{type:String,default:"value"},currentNode:{type:Object},cursorNode:{type:Object}},emits:["nodeClick","changeCursor"],setup(e,{slots:n,emit:l}){const a=t([]);function c(t,o){return r(K,{level:o+1,labelKey:e.labelKey,valueKey:e.valueKey,activeNodes:a.value,onNodeClick:e=>l("nodeClick",e),onChangeCursor:e=>l("changeCursor",e),options:t,cursorNode:e.cursorNode},null)}function u(t){let r=!1;return s(t,((t,o)=>{e.currentNode===t&&(r=!0,o())}),["children"]),r}function i(){var t,r;if(!f(e.options)||!e.currentNode)return[];const o=[e.options];let n=e.options;for(a.value.length=0;f(n);){const t=n.find(u);if(!t)break;a.value.push(t),n=t[e.childKey],o.push(n)}if(e.cursorNode){const n=o.findIndex((t=>(t&&t.findIndex((t=>t===e.cursorNode)))>=0));if(n>=0&&!(null==(r=null==(t=e.cursorNode)?void 0:t.children)?void 0:r.length)){const e=o.slice(0,n+1);return a.value.splice(n,o.length),e}}return o}return()=>r("section",{class:"search-cascader__menuWrapper"},[f(e.options)&&e.options.length?e.currentNode?i().map(c):c(e.options,0):r("section",{class:"search-cascader__emptyWrapper"},[v(n.empty)?n.empty():r("section",null,[o("empty")])])])}});export{_ as SearchMenu};
+import { defineComponent, ref, createVNode, createTextVNode, computed, inject, onBeforeUnmount, withModifiers } from 'vue';
+import { traverse } from '../../../../shared/utils/index.js';
+import { Reload, ChevronForward } from '@vicons/ionicons5';
+import { NOOP } from '@vue/shared';
+import { useVirtualList } from '@vueuse/core';
+import { isArray, isFunction, isNumber, isEqual, isString } from 'lodash-es';
+import { NCheckbox } from 'naive-ui';
+import { InjectionSearchCascaderLoadingNode, InjectionSearchCascaderValue, InjectionSearchCascaderCheckAbleLevel, InjectionKeyboardEventBus } from '../constants/index.js';
+
+const SearchMenuList = /* @__PURE__ */ defineComponent({
+  props: {
+    options: {
+      type: Array,
+      default: () => []
+    },
+    activeNodes: {
+      type: Array,
+      default: () => []
+    },
+    level: {
+      type: Number,
+      required: true
+    },
+    labelKey: {
+      type: String,
+      default: "label"
+    },
+    valueKey: {
+      type: String,
+      default: "value"
+    },
+    cursorNode: {
+      type: Object,
+      default: () => ({})
+    }
+  },
+  emits: ["nodeClick", "changeCursor"],
+  setup(props, {
+    emit
+  }) {
+    const optionsRef = computed(() => props.options);
+    const {
+      list,
+      containerProps,
+      wrapperProps
+    } = useVirtualList(optionsRef, {
+      itemHeight: 32,
+      overscan: 5
+    });
+    const loadingNode = inject(InjectionSearchCascaderLoadingNode);
+    const valueRef = inject(InjectionSearchCascaderValue);
+    const checkAbleLevel = inject(InjectionSearchCascaderCheckAbleLevel);
+    const eventBus = inject(InjectionKeyboardEventBus);
+    const showCheckbox = computed(() => {
+      return isNumber(checkAbleLevel.value) && checkAbleLevel.value <= props.level;
+    });
+    function isActive(node) {
+      var _a;
+      return (_a = props.activeNodes) == null ? void 0 : _a.includes(node);
+    }
+    function isEmptyObj(node) {
+      const keys = Object.keys(node);
+      return keys.length <= 0;
+    }
+    function isCurrent(node) {
+      return props.cursorNode == node;
+    }
+    function isChecked(node) {
+      const nodeList = getNodeChain(node);
+      if (isArray(valueRef.value)) {
+        return isEqual(mapper(nodeList, props.valueKey), mapper(valueRef.value, props.valueKey));
+      }
+      if (isString(valueRef.value)) {
+        const labelList = valueRef.value.split("/").map((item) => item.trim());
+        return isEqual(labelList, mapper(nodeList, props.labelKey));
+      }
+      return false;
+      function mapper(list2, prop) {
+        return list2.map((item) => item[prop]);
+      }
+      function getNodeChain(node2) {
+        const result = [node2];
+        let currentNode = node2;
+        while (currentNode.parent) {
+          currentNode = currentNode.parent;
+          result.unshift(currentNode);
+        }
+        return result;
+      }
+    }
+    function updateValue(node) {
+      emit("nodeClick", {
+        type: "update",
+        node
+      });
+    }
+    function handleScroll(index) {
+      const $containerDom = containerProps.ref.value;
+      if ($containerDom) {
+        const outHeight = $containerDom == null ? void 0 : $containerDom.clientHeight;
+        const scrollTopVal = 32 * index - outHeight;
+        $containerDom.scrollTo(0, scrollTopVal > 0 ? scrollTopVal : 0);
+      }
+    }
+    function handleKeyboardOperate(evtKey, event) {
+      function checkCurItem() {
+        if (isEmptyObj(props.cursorNode))
+          return;
+        Reflect.set(event, "stopCapture", true);
+        if (showCheckbox.value) {
+          return emit("nodeClick", {
+            type: "update",
+            node: props.cursorNode
+          });
+        }
+        return emit("nodeClick", {
+          type: "search",
+          node: props.cursorNode
+        });
+      }
+      if (evtKey === "ArrowUp") {
+        if (isEmptyObj(props.cursorNode))
+          return;
+        const curIndex = optionsRef.value.findIndex((item) => item === props.cursorNode);
+        if (curIndex >= 0) {
+          const prevIndex = curIndex === 0 ? optionsRef.value.length - 1 : curIndex - 1;
+          const result = optionsRef.value[prevIndex];
+          emit("changeCursor", result);
+          handleScroll(prevIndex + 3);
+        }
+      }
+      if (evtKey === "ArrowRight") {
+        if (isEmptyObj(props.cursorNode))
+          return;
+        emit("nodeClick", {
+          type: "search",
+          node: props.cursorNode
+        });
+        emit("changeCursor", {});
+      }
+      if (evtKey === "ArrowDown") {
+        if (isEmptyObj(props.cursorNode))
+          return emit("changeCursor", optionsRef.value[0]);
+        const curIndex = optionsRef.value.findIndex((item) => item === props.cursorNode);
+        if (curIndex >= 0) {
+          const nextIndex = curIndex >= optionsRef.value.length - 1 ? 0 : curIndex + 1;
+          const result = optionsRef.value[nextIndex];
+          emit("changeCursor", result);
+          handleScroll(nextIndex + 1);
+        }
+      }
+      if (evtKey === "ArrowLeft") {
+        if (props.activeNodes.length) {
+          const lastNodes = props.activeNodes.slice(-1);
+          emit("changeCursor", lastNodes[0]);
+        }
+      }
+      if (evtKey === "Enter") {
+        checkCurItem();
+      }
+    }
+    onBeforeUnmount(() => {
+      eventBus.off(handleKeyboardOperate);
+    });
+    let timer = null;
+    let clicks = 0;
+    function onClick(node) {
+      clicks++;
+      if (clicks === 1) {
+        timer = setTimeout(() => {
+          emit("nodeClick", {
+            type: "search",
+            node
+          });
+          timer = null;
+        }, 200);
+      } else {
+        timer && clearTimeout(timer);
+        timer = setTimeout(() => {
+          emit("nodeClick", {
+            type: "search",
+            node,
+            dbClick: true
+          });
+          clicks = 0;
+          timer = null;
+        }, 200);
+      }
+    }
+    eventBus.on(handleKeyboardOperate);
+    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) => {
+        return createVNode("div", {
+          "class": ["search-cascader__option", {
+            "search-cascader__option--active": isActive(item.data) || isCurrent(item.data)
+          }],
+          "onClick": () => onClick(item.data),
+          "title": item.data[props.labelKey]
+        }, [createVNode("div", {
+          "class": "search-cascader__optionText"
+        }, [showCheckbox.value ? createVNode(NCheckbox, {
+          "style": {
+            marginRight: "8px"
+          },
+          "checked": isChecked(item.data),
+          "onClick": withModifiers(NOOP, ["stop"]),
+          "onUpdateChecked": (v) => v && updateValue(item.data)
+        }, null) : null, createVNode("span", {
+          "class": {
+            "search-cascader__optionText--active": isChecked(item.data)
+          }
+        }, [item.data[props.labelKey]])]), loadingNode.value === item.data ? createVNode(Reload, {
+          "class": "rotate"
+        }, null) : item.data.isLeaf ? null : createVNode(ChevronForward, null, null)]);
+      })])]);
+    };
+  }
+});
+const SearchMenu = /* @__PURE__ */ defineComponent({
+  props: {
+    childKey: {
+      type: String,
+      default: "children"
+    },
+    options: {
+      type: Array,
+      default: () => []
+    },
+    labelKey: {
+      type: String,
+      default: "label"
+    },
+    valueKey: {
+      type: String,
+      default: "value"
+    },
+    currentNode: {
+      type: Object
+    },
+    cursorNode: {
+      type: Object
+    }
+  },
+  emits: ["nodeClick", "changeCursor"],
+  setup(props, {
+    slots,
+    emit
+  }) {
+    const activeNodes = ref([]);
+    function renderList(options, idx) {
+      return createVNode(SearchMenuList, {
+        "level": idx + 1,
+        "labelKey": props.labelKey,
+        "valueKey": props.valueKey,
+        "activeNodes": activeNodes.value,
+        "onNodeClick": (payload) => emit("nodeClick", payload),
+        "onChangeCursor": (payload) => emit("changeCursor", payload),
+        "options": options,
+        "cursorNode": props.cursorNode
+      }, 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 (props.currentNode !== n)
+          return;
+        result = true;
+        stop();
+      }, ["children"]);
+      return result;
+    }
+    function getRenderNodeList() {
+      var _a, _b;
+      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);
+      }
+      if (props.cursorNode) {
+        const index = result.findIndex((nodes) => {
+          const i = nodes && nodes.findIndex((node) => node === props.cursorNode);
+          return i >= 0;
+        });
+        if (index >= 0 && !((_b = (_a = props.cursorNode) == null ? void 0 : _a.children) == null ? void 0 : _b.length)) {
+          const renderResult = result.slice(0, index + 1);
+          activeNodes.value.splice(index, result.length);
+          return renderResult;
+        }
+      }
+      return result;
+    }
+    return () => {
+      return createVNode("section", {
+        "class": "search-cascader__menuWrapper"
+      }, [!isArray(props.options) || !props.options.length ? renderEmpty() : !props.currentNode ? renderList(props.options, 0) : getRenderNodeList().map(renderList)]);
+    };
+  }
+});
+
+export { SearchMenu };

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

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