@ibiz-template/vue3-components 0.7.40-alpha.9 → 0.7.40

package/es/panel-component/global-search/global-search.mjs

@@ -1,6 +1,7 @@
-import { isVNode, defineComponent, ref, onMounted, onUnmounted, withDirectives, createVNode, resolveDirective, resolveComponent, h } from 'vue';
+import { isVNode, ref, computed, watch, onMounted, onUnmounted, createVNode, resolveComponent, h, defineComponent } from 'vue';
 import { showTitle } from '@ibiz-template/core';
 import { useNamespace } from '@ibiz-template/vue3-util';
+import { VirtualList } from './virtual-list/virtual-list.mjs';
 import './global-search.css';
 
 "use strict";
@@ -10,10 +11,16 @@ function _isSlot(s) {
 const GlobalSearch = /* @__PURE__ */ defineComponent({
   name: "IBizGlobalSearch",
   props: {
+    /**
+     * @description 全局搜索控件模型数据
+     */
     modelData: {
       type: Object,
       required: true
     },
+    /**
+     * @description 全局搜索控件控制器
+     */
     controller: {
       type: Object,
       required: true
@@ -22,73 +29,101 @@ const GlobalSearch = /* @__PURE__ */ defineComponent({
   setup(props) {
     const c = props.controller;
     const ns = useNamespace("global-search");
-    const loading = ref(false);
-    const list = ref([]);
-    const visible = ref(false);
     const editorRef = ref();
-    const onSearch = async () => {
-      visible.value = true;
-      loading.value = true;
-      try {
-        list.value = c.state.query ? await c.search(c.state.query) : [];
-      } catch (error) {
-        ibiz.log.error(error);
-      } finally {
-        loading.value = false;
+    let ignoreFocusEvent = false;
+    const activated = ref(false);
+    const virtualListRef = ref();
+    const searchValue = ref("");
+    const visible = computed(() => {
+      const {
+        query,
+        list,
+        histories,
+        loading
+      } = c.state;
+      const showSearch = query && list.length > 0;
+      const showHistory = !query && histories.length > 0;
+      const showEmpty = histories.includes(query) && list.length === 0;
+      return (showSearch || showEmpty || showHistory || loading) && activated.value;
+    });
+    const handleEnter = (event) => {
+      if (event.key === "Enter") {
+        activated.value = true;
+        c.search(searchValue.value);
       }
     };
-    const handleEnter = (event) => {
-      if (event.key === "Enter")
-        onSearch();
+    const handleFocus = (_evt) => {
+      if (!ignoreFocusEvent) {
+        activated.value = true;
+      } else {
+        ignoreFocusEvent = false;
+      }
     };
-    const handleClear = () => {
-      list.value = [];
+    const handleClearSearch = () => {
+      c.state.list = [];
+      c.state.query = "";
     };
-    const handleHistoryItemClick = async (event, value) => {
-      event.stopPropagation();
-      c.state.query = value;
-      await onSearch();
+    const handleHistoryItemClick = (value) => {
+      searchValue.value = value;
+      c.search(searchValue.value);
     };
-    const handleSearchItemClick = async (event, data, item) => {
-      event.stopPropagation();
-      c.state.query = data[c.textName];
-      visible.value = false;
-      handleClear();
-      await c.openLinkView(data, item);
+    const handleSearchItemClick = (data, item) => {
+      ignoreFocusEvent = true;
+      activated.value = false;
+      if (item)
+        c.openLinkView(data, item);
     };
     const handleClickOutside = (event) => {
-      if (!event.target.closest(".".concat(ns.b())) && !event.target.closest(".el-input__suffix")) {
-        visible.value = false;
+      const target = event.target;
+      if (!target.closest(".".concat(ns.b())) && !target.closest(".".concat(ns.e("popper"))) && !target.closest(".el-input__suffix")) {
+        activated.value = false;
       }
     };
-    const handleInputClick = (event) => {
-      event.stopPropagation();
-      visible.value = true;
-    };
-    const handleClearHistory = (event) => {
-      event.stopPropagation();
-      visible.value = false;
-      handleClear();
+    const handleClearHistory = () => {
+      handleClearSearch();
       c.clearHistory();
     };
     const handleKeyup = (event) => {
       var _a;
-      if (event.key === "\\")
+      if ((event.ctrlKey || event.metaKey) && event.key === "k") {
+        event.preventDefault();
         (_a = editorRef.value) == null ? void 0 : _a.focus();
+      }
     };
+    watch(() => visible.value, () => {
+      if (visible.value) {
+        setTimeout(() => {
+          var _a;
+          (_a = virtualListRef.value) == null ? void 0 : _a.scrollTo(0);
+        });
+        if (searchValue.value !== c.state.histories[c.state.histories.length - 1])
+          handleClearSearch();
+      }
+    });
     onMounted(() => {
-      document.addEventListener("click", handleClickOutside);
-      document.addEventListener("keyup", handleKeyup);
+      document.addEventListener("click", handleClickOutside, {
+        capture: true
+      });
+      document.addEventListener("keydown", handleKeyup);
     });
     onUnmounted(() => {
-      document.removeEventListener("click", handleClickOutside);
-      document.removeEventListener("keyup", handleKeyup);
+      document.removeEventListener("click", handleClickOutside, {
+        capture: true
+      });
+      document.removeEventListener("keydown", handleKeyup);
     });
-    const renderBlankPlaceholder = () => {
-      if (!c.state.query && !c.state.histories.length || c.state.query && !list.value.length)
-        return withDirectives(createVNode("div", {
-          "class": ns.e("empty")
-        }, [loading.value ? ibiz.i18n.t("panelComponent.globalSearch.loading") : ibiz.i18n.t("panelComponent.globalSearch.empty")]), [[resolveDirective("loading"), loading.value]]);
+    const renderFooter = () => {
+      const {
+        query,
+        list,
+        histories,
+        loading
+      } = c.state;
+      const showEmpty = histories.includes(query) && list.length === 0;
+      if (loading || showEmpty)
+        return createVNode("div", {
+          "class": ns.e("footer")
+        }, [ibiz.i18n.t("panelComponent.globalSearch.".concat(loading ? "loading" : "empty"))]);
     };
     const renderAction = () => {
       let _slot;
@@ -107,50 +142,59 @@ const GlobalSearch = /* @__PURE__ */ defineComponent({
         "class": ns.e("list")
       }, [c.state.histories.map((history) => {
         return createVNode("div", {
-          "onClick": (event) => handleHistoryItemClick(event, history),
+          "onClick": () => handleHistoryItemClick(history),
           "class": [ns.em("list", "item"), ns.em("list", "history-item")]
         }, [history]);
       })]);
     };
     const renderSearchList = () => {
-      return createVNode("div", {
-        "class": ns.e("list")
-      }, [list.value.map((item) => {
-        const searchItem = c.getSearchItemByEntity(item.srfdecodename);
-        let content = item[c.textName];
-        if (searchItem == null ? void 0 : searchItem.acItemProvider) {
-          content = h(resolveComponent(searchItem.acItemProvider.component), {
-            item,
-            controller: c
-          });
-        } else if (searchItem == null ? void 0 : searchItem.deACMode.itemLayoutPanel) {
-          content = createVNode(resolveComponent("iBizControlShell"), {
-            "data": item,
-            "modelData": searchItem.deACMode.itemLayoutPanel,
-            "context": c.panel.context,
-            "params": c.panel.params
-          }, null);
+      if (!c.state.list.length)
+        return;
+      return createVNode(VirtualList, {
+        "ref": virtualListRef,
+        "items": c.state.list,
+        "class": ns.e("virtual-list"),
+        "getKey": (item) => item[c.keyName]
+      }, {
+        default: ({
+          item
+        }) => {
+          const searchItem = c.getSearchItemByEntity(item.srfdecodename);
+          let content = item[c.textName];
+          if (searchItem == null ? void 0 : searchItem.acItemProvider) {
+            content = h(resolveComponent(searchItem.acItemProvider.component), {
+              item,
+              controller: c
+            });
+          } else if (searchItem == null ? void 0 : searchItem.deACMode.itemLayoutPanel) {
+            content = createVNode(resolveComponent("iBizControlShell"), {
+              "data": item,
+              "modelData": searchItem.deACMode.itemLayoutPanel,
+              "context": c.panel.context,
+              "params": c.panel.params
+            }, null);
+          }
+          return createVNode("div", {
+            "class": [ns.em("list", "item"), ns.em("list", "srearch-item")],
+            "onClick": () => handleSearchItemClick(item, searchItem),
+            "title": showTitle(item[c.textName])
+          }, [content]);
         }
-        return createVNode("div", {
-          "class": [ns.em("list", "item"), ns.em("list", "srearch-item")],
-          "onClick": (event) => handleSearchItemClick(event, item, searchItem),
-          "title": showTitle(item[c.textName])
-        }, [content]);
-      })]);
+      });
     };
     return {
       c,
       ns,
-      list,
       visible,
       editorRef,
-      handleClear,
+      searchValue,
+      handleFocus,
       handleEnter,
       renderAction,
+      renderFooter,
       renderSearchList,
       renderHistoryList,
-      handleInputClick,
-      renderBlankPlaceholder
+      handleClearSearch
     };
   },
   render() {
@@ -166,26 +210,35 @@ const GlobalSearch = /* @__PURE__ */ defineComponent({
         return createVNode(resolveComponent("el-input"), {
           "clearable": true,
           "ref": "editorRef",
-          "onKeyup": this.handleEnter,
-          "modelValue": this.c.state.query,
-          "onUpdate:modelValue": ($event) => this.c.state.query = $event,
+          "modelValue": this.searchValue,
+          "onUpdate:modelValue": ($event) => this.searchValue = $event,
           "placeholder": ibiz.i18n.t("panelComponent.globalSearch.placeholder"),
           "class": [this.ns.e("search"), this.ns.is("search", this.visible)],
-          "onClick": this.handleInputClick,
-          "onClear": this.handleClear
+          "onFocus": this.handleFocus,
+          "onKeyup": this.handleEnter,
+          "onClear": this.handleClearSearch
         }, {
           prefix: () => {
             return createVNode("ion-icon", {
               "name": "search",
               "class": this.ns.em("search", "icon")
             }, null);
+          },
+          suffix: () => {
+            if (this.searchValue)
+              return createVNode("ion-icon", {
+                "title": ibiz.i18n.t("panelComponent.globalSearch.search"),
+                "name": "return-down-back-outline",
+                "class": [this.ns.em("search", "icon"), this.ns.em("search", "enter-icon")],
+                "onClick": () => this.c.search(this.searchValue)
+              }, null);
           }
         });
       },
       default: () => {
         return createVNode("div", {
           "class": this.ns.e("content")
-        }, [this.c.state.query ? this.renderSearchList() : this.renderHistoryList(), this.renderBlankPlaceholder(), this.renderAction()]);
+        }, [this.c.state.query ? this.renderSearchList() : this.renderHistoryList(), this.renderAction(), this.renderFooter()]);
       }
     })]);
   }

package/es/panel-component/global-search/global-search.state.d.ts

@@ -1,5 +1,5 @@
-import { IAcItemProvider, PanelItemState } from '@ibiz-template/runtime';
 import { IAppDEACMode } from '@ibiz/model-core';
+import { IAcItemProvider, PanelItemState } from '@ibiz-template/runtime';
 /**
  * 全局搜索项
  *
@@ -38,24 +38,38 @@ export interface ISearchItem {
  */
 export declare class GlobalSearchState extends PanelItemState {
     /**
-     * 当前快速搜索值
-     *
+     * @description 当前快速搜索值
+     * @exposedoc
      * @type {string}
      * @memberof GlobalSearchState
      */
     query: string;
     /**
-     * 自填模式全局搜索项
-     *
+     * @description 自填模式全局搜索项
      * @type {ISearchItem[]}
+     * @exposedoc
      * @memberof GlobalSearchState
      */
     items: ISearchItem[];
     /**
-     * 搜索历史记录
-     *
+     * @description 搜索历史记录
      * @type {string[]}
+     * @exposedoc
      * @memberof GlobalSearchState
      */
     histories: string[];
+    /**
+     * @description 搜索列表
+     * @exposedoc
+     * @type {IData[]}
+     * @memberof GlobalSearchState
+     */
+    list: IData[];
+    /**
+     * @description 是否在加载中
+     * @exposedoc
+     * @type {boolean}
+     * @memberof GlobalSearchState
+     */
+    loading: boolean;
 }

package/es/panel-component/global-search/global-search.state.mjs

@@ -11,26 +11,40 @@ class GlobalSearchState extends PanelItemState {
   constructor() {
     super(...arguments);
     /**
-     * 当前快速搜索值
-     *
+     * @description 当前快速搜索值
+     * @exposedoc
      * @type {string}
      * @memberof GlobalSearchState
      */
     __publicField(this, "query", "");
     /**
-     * 自填模式全局搜索项
-     *
+     * @description 自填模式全局搜索项
      * @type {ISearchItem[]}
+     * @exposedoc
      * @memberof GlobalSearchState
      */
     __publicField(this, "items", []);
     /**
-     * 搜索历史记录
-     *
+     * @description 搜索历史记录
      * @type {string[]}
+     * @exposedoc
      * @memberof GlobalSearchState
      */
     __publicField(this, "histories", []);
+    /**
+     * @description 搜索列表
+     * @exposedoc
+     * @type {IData[]}
+     * @memberof GlobalSearchState
+     */
+    __publicField(this, "list", []);
+    /**
+     * @description 是否在加载中
+     * @exposedoc
+     * @type {boolean}
+     * @memberof GlobalSearchState
+     */
+    __publicField(this, "loading", false);
   }
 }
 

package/es/panel-component/global-search/index.d.ts

@@ -10,16 +10,16 @@ export declare const IBizGlobalSearch: import("@ibiz-template/vue3-util").TypeWi
 }, {
     c: import("./global-search.controller").GlobalSearchController;
     ns: import("@ibiz-template/core").Namespace;
-    list: import("vue").Ref<import("@ibiz-template/core").IApiData[]>;
-    visible: import("vue").Ref<boolean>;
+    visible: import("vue").ComputedRef<boolean>;
     editorRef: import("vue").Ref<any>;
-    handleClear: () => void;
+    searchValue: import("vue").Ref<string>;
+    handleFocus: (_evt: FocusEvent) => void;
     handleEnter: (event: KeyboardEvent) => void;
     renderAction: () => JSX.Element | undefined;
-    renderSearchList: () => JSX.Element;
+    renderFooter: () => JSX.Element | undefined;
+    renderSearchList: () => JSX.Element | undefined;
     renderHistoryList: () => JSX.Element;
-    handleInputClick: (event: MouseEvent) => void;
-    renderBlankPlaceholder: () => JSX.Element | undefined;
+    handleClearSearch: () => void;
 }, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
     modelData: {
         type: import("vue").PropType<import("@ibiz/model-core").IPanelRawItem>;

package/es/panel-component/global-search/virtual-list/virtual-list.css

@@ -0,0 +1 @@
+.ibiz-virtual-list{width:100%;overflow-y:auto;position:relative}.ibiz-virtual-list__phantom{top:0;left:0;z-index:-1;width:100%;position:absolute}.ibiz-virtual-list__content{top:0;left:0;width:100%;position:absolute}.ibiz-virtual-list__content--item{width:100%;box-sizing:border-box}

package/es/panel-component/global-search/virtual-list/virtual-list.d.ts

@@ -0,0 +1,89 @@
+import './virtual-list.scss';
+export declare const VirtualList: import("vue").DefineComponent<{
+    items: {
+        type: {
+            (arrayLength: number): import("@ibiz-template/core").IApiData[];
+            (...items: import("@ibiz-template/core").IApiData[]): import("@ibiz-template/core").IApiData[];
+            new (arrayLength: number): import("@ibiz-template/core").IApiData[];
+            new (...items: import("@ibiz-template/core").IApiData[]): import("@ibiz-template/core").IApiData[];
+            isArray(arg: any): arg is any[];
+            readonly prototype: any[];
+            from<T>(arrayLike: ArrayLike<T>): T[];
+            from<T_1, U>(arrayLike: ArrayLike<T_1>, mapfn: (v: T_1, k: number) => U, thisArg?: any): U[];
+            from<T_2>(iterable: Iterable<T_2> | ArrayLike<T_2>): T_2[];
+            from<T_3, U_1>(iterable: Iterable<T_3> | ArrayLike<T_3>, mapfn: (v: T_3, k: number) => U_1, thisArg?: any): U_1[];
+            of<T_4>(...items: T_4[]): T_4[];
+            readonly [Symbol.species]: ArrayConstructor;
+        };
+        required: true;
+    };
+    itemSize: {
+        type: NumberConstructor;
+        default: number;
+    };
+    maxHeight: {
+        type: NumberConstructor;
+        default: number;
+    };
+    buffer: {
+        type: NumberConstructor;
+        default: number;
+    };
+    getKey: {
+        type: FunctionConstructor;
+        default: (item: IData) => any;
+    };
+}, {
+    ns: import("@ibiz-template/core").Namespace;
+    height: import("vue").ComputedRef<number>;
+    offsetY: import("vue").ComputedRef<number>;
+    container: import("vue").Ref<HTMLElement | undefined>;
+    scrollTop: import("vue").Ref<number>;
+    totalHeight: import("vue").ComputedRef<number>;
+    visibleData: import("vue").ComputedRef<import("@ibiz-template/core").IApiData[]>;
+    scrollTo: (position: number) => void;
+    handleScroll: () => void;
+    scrollToIndex: (index: number) => void;
+}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, ("scroll" | "reach-bottom")[], "scroll" | "reach-bottom", import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
+    items: {
+        type: {
+            (arrayLength: number): import("@ibiz-template/core").IApiData[];
+            (...items: import("@ibiz-template/core").IApiData[]): import("@ibiz-template/core").IApiData[];
+            new (arrayLength: number): import("@ibiz-template/core").IApiData[];
+            new (...items: import("@ibiz-template/core").IApiData[]): import("@ibiz-template/core").IApiData[];
+            isArray(arg: any): arg is any[];
+            readonly prototype: any[];
+            from<T>(arrayLike: ArrayLike<T>): T[];
+            from<T_1, U>(arrayLike: ArrayLike<T_1>, mapfn: (v: T_1, k: number) => U, thisArg?: any): U[];
+            from<T_2>(iterable: Iterable<T_2> | ArrayLike<T_2>): T_2[];
+            from<T_3, U_1>(iterable: Iterable<T_3> | ArrayLike<T_3>, mapfn: (v: T_3, k: number) => U_1, thisArg?: any): U_1[];
+            of<T_4>(...items: T_4[]): T_4[];
+            readonly [Symbol.species]: ArrayConstructor;
+        };
+        required: true;
+    };
+    itemSize: {
+        type: NumberConstructor;
+        default: number;
+    };
+    maxHeight: {
+        type: NumberConstructor;
+        default: number;
+    };
+    buffer: {
+        type: NumberConstructor;
+        default: number;
+    };
+    getKey: {
+        type: FunctionConstructor;
+        default: (item: IData) => any;
+    };
+}>> & {
+    onScroll?: ((...args: any[]) => any) | undefined;
+    "onReach-bottom"?: ((...args: any[]) => any) | undefined;
+}, {
+    getKey: Function;
+    maxHeight: number;
+    itemSize: number;
+    buffer: number;
+}, {}>;

package/es/panel-component/global-search/virtual-list/virtual-list.mjs

@@ -0,0 +1,121 @@
+import { ref, computed, createVNode, defineComponent } from 'vue';
+import { useNamespace } from '@ibiz-template/vue3-util';
+import './virtual-list.css';
+
+"use strict";
+const VirtualList = /* @__PURE__ */ defineComponent({
+  name: "IBizVirtualList",
+  props: {
+    items: {
+      type: Array,
+      required: true
+    },
+    itemSize: {
+      type: Number,
+      default: 34
+    },
+    maxHeight: {
+      type: Number,
+      default: 300
+    },
+    buffer: {
+      type: Number,
+      default: 5
+    },
+    getKey: {
+      type: Function,
+      default: (item) => item.id
+    }
+  },
+  emits: ["scroll", "reach-bottom"],
+  setup(props, {
+    emit
+  }) {
+    const ns = useNamespace("virtual-list");
+    const container = ref();
+    const scrollTop = ref(0);
+    const totalHeight = computed(() => props.items.length * props.itemSize);
+    const height = computed(() => {
+      if (totalHeight.value > props.maxHeight)
+        return props.maxHeight;
+      return totalHeight.value;
+    });
+    const visibleCount = computed(() => Math.ceil(height.value / props.itemSize) + props.buffer);
+    const startIndex = computed(() => Math.floor(scrollTop.value / props.itemSize));
+    const endIndex = computed(() => Math.min(startIndex.value + visibleCount.value, props.items.length));
+    const visibleData = computed(() => props.items.slice(startIndex.value, endIndex.value));
+    const offsetY = computed(() => startIndex.value * props.itemSize);
+    const handleScroll = () => {
+      if (container.value) {
+        const {
+          scrollHeight,
+          clientHeight
+        } = container.value;
+        scrollTop.value = container.value.scrollTop;
+        emit("scroll", {
+          scrollTop: scrollTop.value,
+          scrollHeight: container.value.scrollHeight,
+          clientHeight: container.value.clientHeight
+        });
+        if (scrollHeight - (scrollTop.value + clientHeight) < 50) {
+          emit("reach-bottom");
+        }
+      }
+    };
+    const scrollTo = (position) => {
+      if (container.value) {
+        container.value.scrollTop = position;
+        scrollTop.value = position;
+      }
+    };
+    const scrollToIndex = (index) => {
+      const position = index * props.itemSize;
+      scrollTo(position);
+    };
+    return {
+      ns,
+      height,
+      offsetY,
+      container,
+      scrollTop,
+      totalHeight,
+      visibleData,
+      scrollTo,
+      handleScroll,
+      scrollToIndex
+    };
+  },
+  render() {
+    return createVNode("div", {
+      "ref": "container",
+      "class": this.ns.b(),
+      "style": {
+        height: "".concat(this.height, "px")
+      },
+      "onScroll": this.handleScroll
+    }, [createVNode("div", {
+      "class": this.ns.e("phantom"),
+      "style": {
+        height: "".concat(this.totalHeight, "px")
+      }
+    }, null), createVNode("div", {
+      "class": this.ns.e("content"),
+      "style": {
+        transform: "translateY(".concat(this.offsetY, "px)")
+      }
+    }, [this.visibleData.map((item) => {
+      var _a, _b;
+      return createVNode("div", {
+        "key": this.getKey(item),
+        "style": {
+          height: "".concat(this.itemSize, "px")
+        },
+        "class": this.ns.em("content", "item")
+      }, [(_b = (_a = this.$slots).default) == null ? void 0 : _b.call(_a, {
+        item
+      })]);
+    })])]);
+  }
+});
+
+export { VirtualList };