@ibiz-template/vue3-components 0.7.39 → 0.7.40

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

@@ -0,0 +1,247 @@
+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";
+function _isSlot(s) {
+  return typeof s === "function" || Object.prototype.toString.call(s) === "[object Object]" && !isVNode(s);
+}
+const GlobalSearch = /* @__PURE__ */ defineComponent({
+  name: "IBizGlobalSearch",
+  props: {
+    /**
+     * @description 全局搜索控件模型数据
+     */
+    modelData: {
+      type: Object,
+      required: true
+    },
+    /**
+     * @description 全局搜索控件控制器
+     */
+    controller: {
+      type: Object,
+      required: true
+    }
+  },
+  setup(props) {
+    const c = props.controller;
+    const ns = useNamespace("global-search");
+    const editorRef = ref();
+    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 handleFocus = (_evt) => {
+      if (!ignoreFocusEvent) {
+        activated.value = true;
+      } else {
+        ignoreFocusEvent = false;
+      }
+    };
+    const handleClearSearch = () => {
+      c.state.list = [];
+      c.state.query = "";
+    };
+    const handleHistoryItemClick = (value) => {
+      searchValue.value = value;
+      c.search(searchValue.value);
+    };
+    const handleSearchItemClick = (data, item) => {
+      ignoreFocusEvent = true;
+      activated.value = false;
+      if (item)
+        c.openLinkView(data, item);
+    };
+    const handleClickOutside = (event) => {
+      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 handleClearHistory = () => {
+      handleClearSearch();
+      c.clearHistory();
+    };
+    const handleKeyup = (event) => {
+      var _a;
+      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, {
+        capture: true
+      });
+      document.addEventListener("keydown", handleKeyup);
+    });
+    onUnmounted(() => {
+      document.removeEventListener("click", handleClickOutside, {
+        capture: true
+      });
+      document.removeEventListener("keydown", handleKeyup);
+    });
+    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;
+      if (!c.state.query && c.state.histories.length)
+        return createVNode("div", {
+          "class": ns.em("content", "action-item")
+        }, [createVNode(resolveComponent("el-button"), {
+          "text": true,
+          "onClick": handleClearHistory
+        }, _isSlot(_slot = ibiz.i18n.t("panelComponent.globalSearch.clearHistory")) ? _slot : {
+          default: () => [_slot]
+        })]);
+    };
+    const renderHistoryList = () => {
+      return createVNode("div", {
+        "class": ns.e("list")
+      }, [c.state.histories.map((history) => {
+        return createVNode("div", {
+          "onClick": () => handleHistoryItemClick(history),
+          "class": [ns.em("list", "item"), ns.em("list", "history-item")]
+        }, [history]);
+      })]);
+    };
+    const renderSearchList = () => {
+      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 {
+      c,
+      ns,
+      visible,
+      editorRef,
+      searchValue,
+      handleFocus,
+      handleEnter,
+      renderAction,
+      renderFooter,
+      renderSearchList,
+      renderHistoryList,
+      handleClearSearch
+    };
+  },
+  render() {
+    return createVNode("div", {
+      "class": this.ns.b()
+    }, [createVNode(resolveComponent("el-popover"), {
+      "width": "auto",
+      "visible": this.visible,
+      "placement": "bottom-start",
+      "popper-class": this.ns.e("popper")
+    }, {
+      reference: () => {
+        return createVNode(resolveComponent("el-input"), {
+          "clearable": true,
+          "ref": "editorRef",
+          "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)],
+          "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.renderAction(), this.renderFooter()]);
+      }
+    })]);
+  }
+});
+
+export { GlobalSearch };

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

@@ -0,0 +1,14 @@
+import { IPanelItem } from '@ibiz/model-core';
+import { PanelController, IPanelItemProvider, PanelItemController } from '@ibiz-template/runtime';
+import { GlobalSearchController } from './global-search.controller';
+/**
+ * 全局搜索适配器
+ *
+ * @export
+ * @class GlobalSearchProvider
+ * @implements {IPanelItemProvider}
+ */
+export declare class GlobalSearchProvider implements IPanelItemProvider {
+    component: string;
+    createController(panelItem: IPanelItem, panel: PanelController, parent: PanelItemController | undefined): Promise<GlobalSearchController>;
+}

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

@@ -0,0 +1,21 @@
+import { GlobalSearchController } from './global-search.controller.mjs';
+
+"use strict";
+var __defProp = Object.defineProperty;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __publicField = (obj, key, value) => {
+  __defNormalProp(obj, typeof key !== "symbol" ? key + "" : key, value);
+  return value;
+};
+class GlobalSearchProvider {
+  constructor() {
+    __publicField(this, "component", "IBizGlobalSearch");
+  }
+  async createController(panelItem, panel, parent) {
+    const c = new GlobalSearchController(panelItem, panel, parent);
+    await c.init();
+    return c;
+  }
+}
+
+export { GlobalSearchProvider };

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

@@ -0,0 +1,75 @@
+import { IAppDEACMode } from '@ibiz/model-core';
+import { IAcItemProvider, PanelItemState } from '@ibiz-template/runtime';
+/**
+ * 全局搜索项
+ *
+ * @export
+ * @interface ISearchItem
+ */
+export interface ISearchItem {
+    /**
+     * 实体标识
+     *
+     * @type {string}
+     * @memberof ISearchItem
+     */
+    appDataEntityId: string;
+    /**
+     * 实体自填模式
+     *
+     * @type {IAppDEACMode}
+     * @memberof ISearchItem
+     */
+    deACMode: IAppDEACMode;
+    /**
+     * 自填列表项适配器
+     *
+     * @type {IAcItemProvider}
+     * @memberof ISearchItem
+     */
+    acItemProvider?: IAcItemProvider;
+}
+/**
+ * 全局搜索状态
+ *
+ * @export
+ * @class GlobalSearchState
+ * @extends {PanelItemState}
+ */
+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

@@ -0,0 +1,51 @@
+import { PanelItemState } from '@ibiz-template/runtime';
+
+"use strict";
+var __defProp = Object.defineProperty;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __publicField = (obj, key, value) => {
+  __defNormalProp(obj, typeof key !== "symbol" ? key + "" : key, value);
+  return value;
+};
+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);
+  }
+}
+
+export { GlobalSearchState };

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

@@ -0,0 +1,33 @@
+export declare const IBizGlobalSearch: import("@ibiz-template/vue3-util").TypeWithInstall<import("vue").DefineComponent<{
+    modelData: {
+        type: import("vue").PropType<import("@ibiz/model-core").IPanelRawItem>;
+        required: true;
+    };
+    controller: {
+        type: import("vue").PropType<import("./global-search.controller").GlobalSearchController>;
+        required: true;
+    };
+}, {
+    c: import("./global-search.controller").GlobalSearchController;
+    ns: import("@ibiz-template/core").Namespace;
+    visible: import("vue").ComputedRef<boolean>;
+    editorRef: import("vue").Ref<any>;
+    searchValue: import("vue").Ref<string>;
+    handleFocus: (_evt: FocusEvent) => void;
+    handleEnter: (event: KeyboardEvent) => void;
+    renderAction: () => JSX.Element | undefined;
+    renderFooter: () => JSX.Element | undefined;
+    renderSearchList: () => JSX.Element | undefined;
+    renderHistoryList: () => JSX.Element;
+    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>;
+        required: true;
+    };
+    controller: {
+        type: import("vue").PropType<import("./global-search.controller").GlobalSearchController>;
+        required: true;
+    };
+}>>, {}, {}>>;
+export default IBizGlobalSearch;

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

@@ -0,0 +1,15 @@
+import { registerPanelItemProvider } from '@ibiz-template/runtime';
+import { withInstall } from '@ibiz-template/vue3-util';
+import { GlobalSearchProvider } from './global-search.provider.mjs';
+import { GlobalSearch } from './global-search.mjs';
+
+"use strict";
+const IBizGlobalSearch = withInstall(GlobalSearch, function(v) {
+  v.component(GlobalSearch.name, GlobalSearch);
+  registerPanelItemProvider(
+    "RAWITEM_GLOBAL_SEARCH",
+    () => new GlobalSearchProvider()
+  );
+});
+
+export { IBizGlobalSearch, IBizGlobalSearch as default };

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 };