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

package/es/control/grid/grid/grid.mjs

@@ -1,4 +1,4 @@
-import { isVNode, createVNode, resolveComponent, computed, mergeProps, h, defineComponent, createTextVNode, renderSlot, onUnmounted, ref, watch, withDirectives, resolveDirective } from 'vue';
+import { isVNode, resolveComponent, createVNode, computed, mergeProps, h, createTextVNode, renderSlot, onUnmounted, ref, watch, resolveDirective, withDirectives, defineComponent } from 'vue';
 import { useNamespace, useControlController, useUIStore, hasEmptyPanelRenderer, IBizCustomRender } from '@ibiz-template/vue3-util';
 import { ScriptFactory, GridController } from '@ibiz-template/runtime';
 import { showTitle, NOOP } from '@ibiz-template/core';
@@ -27,7 +27,7 @@ function renderAttrs(model, params) {
   return attrs;
 }
 function renderFieldColumn(c, row) {
-  var _a, _b;
+  var _a, _b, _c;
   const ns = useNamespace("grid-field-column");
   const fieldValue = row.data[c.fieldName];
   let actionToolbar;
@@ -52,6 +52,7 @@ function renderFieldColumn(c, row) {
     controlRenders = []
   } = c.model;
   const panel = (_a = controlRenders.find((renderItem) => renderItem.renderType === "LAYOUTPANEL")) == null ? void 0 : _a.layoutPanel;
+  const columnType = (_b = c.model.userParam) == null ? void 0 : _b.columnType;
   if (panel) {
     content = createVNode(resolveComponent("iBizControlShell"), {
       "data": row.data,
@@ -59,6 +60,12 @@ function renderFieldColumn(c, row) {
       "context": c.context,
       "params": c.params
     }, null);
+  } else if (columnType === "attachment") {
+    content = createVNode(resolveComponent("iBizAttachmentColumn"), {
+      "data": row.data,
+      "value": fieldValue,
+      "controller": c
+    }, null);
   } else {
     const showValue = c.formatValue(fieldValue);
     const tooltip = computed(() => {
@@ -118,7 +125,7 @@ function renderFieldColumn(c, row) {
     }
   };
   return createVNode("div", {
-    "class": [ns.b(), c.clickable(row) && ns.m("clickable"), ns.m(c.grid.overflowMode), (_b = c.model.cellSysCss) == null ? void 0 : _b.cssName, ns.is("has-action", !!c.model.deuiactionGroup)],
+    "class": [ns.b(), c.clickable(row) && ns.m("clickable"), ns.m(c.grid.overflowMode), (_c = c.model.cellSysCss) == null ? void 0 : _c.cssName, ns.is("has-action", !!c.model.deuiactionGroup)],
     "onClick": onCellClick
   }, [c.model.deuiactionGroup ? [createVNode("div", {
     "class": ns.b("text-container")
@@ -127,7 +134,7 @@ function renderFieldColumn(c, row) {
   }, [actionToolbar])] : content]);
 }
 function renderColumn(c, model, renderColumns, index) {
-  var _a, _b;
+  var _a, _b, _c;
   const {
     codeName: columnName,
     width
@@ -138,7 +145,7 @@ function renderColumn(c, model, renderColumns, index) {
   const widthName = widthFlexGrow ? "min-width" : "width";
   const tempWidth = (columnState == null ? void 0 : columnState.columnWidth) || width;
   return createVNode(resolveComponent("el-table-column"), mergeProps({
-    "className": (_a = model.columnType) == null ? void 0 : _a.toLowerCase(),
+    "className": "".concat((_a = model.columnType) == null ? void 0 : _a.toLowerCase(), " ").concat((_b = model.columnType) == null ? void 0 : _b.toLowerCase(), "-").concat(columnName),
     "label": model.caption,
     "prop": columnName
   }, {
@@ -154,8 +161,16 @@ function renderColumn(c, model, renderColumns, index) {
         return 1;
       return 0;
     },
-    "align": ((_b = model.align) == null ? void 0 : _b.toLowerCase()) || "center"
+    "align": ((_c = model.align) == null ? void 0 : _c.toLowerCase()) || "center"
   }), {
+    header: ({
+      column
+    }) => {
+      return createVNode(resolveComponent("iBizGridColumnHeader"), {
+        "key": column.property,
+        "controller": columnC
+      }, null);
+    },
     default: ({
       row
     }) => {
@@ -190,8 +205,10 @@ function renderChildColumn(c, model, renderColumns, index) {
   if (model.columnType === "GROUPGRIDCOLUMN") {
     const childColumns = ((_a = model.degridColumns) == null ? void 0 : _a.filter((item) => !item.hideDefault && !item.hiddenDataItem)) || [];
     const {
-      width
+      width,
+      codeName
     } = model;
+    const columnC = c.columns[codeName];
     const align = ((_b = model.align) == null ? void 0 : _b.toLowerCase()) || "center";
     return createVNode(resolveComponent("el-table-column"), {
       "prop": model.codeName,
@@ -199,6 +216,14 @@ function renderChildColumn(c, model, renderColumns, index) {
       "min-width": width,
       "align": align
     }, {
+      header: ({
+        column
+      }) => {
+        return createVNode(resolveComponent("iBizGridColumnHeader"), {
+          "key": column.property,
+          "controller": columnC
+        }, null);
+      },
       default: () => {
         return childColumns.map((column, index2) => {
           return renderChildColumn(c, column, renderColumns, index2);
@@ -211,49 +236,73 @@ function renderChildColumn(c, model, renderColumns, index) {
 const GridControl = /* @__PURE__ */ defineComponent({
   name: "IBizGridControl",
   props: {
+    /**
+     * @description 表格模型数据
+     */
     modelData: {
       type: Object,
       required: true
     },
+    /**
+     * @description 应用上下文对象
+     */
     context: {
       type: Object,
       required: true
     },
+    /**
+     * @description 视图参数对象
+     * @default {}
+     */
     params: {
       type: Object,
       default: () => ({})
     },
+    /**
+     * @description 部件适配器
+     */
     provider: {
       type: Object
     },
     /**
-     * 部件行数据默认激活模式
-     * - 0 不激活
-     * - 1 单击激活
-     * - 2 双击激活(默认值)
-     *
-     * @type {(number | 0 | 1 | 2)}
+     * @description 部件行数据默认激活模式，值为0:不激活，值为1：单击激活，值为2：双击激活
      */
     mdctrlActiveMode: {
       type: Number,
       default: void 0
     },
+    /**
+     * @description 是否单选
+     */
     singleSelect: {
       type: Boolean,
       default: void 0
     },
+    /**
+     * @description 是否启用行编辑
+     */
     rowEditOpen: {
       type: Boolean,
       default: void 0
     },
+    /**
+     * @description 是否是简单模式，即直接传入数据，不加载数据
+     */
     isSimple: {
       type: Boolean,
       required: false
     },
+    /**
+     * @description 简单模式下传入的数据
+     */
     data: {
       type: Array,
       required: false
     },
+    /**
+     * @description 是否默认加载数据
+     * @default true
+     */
     loadDefault: {
       type: Boolean,
       default: true
@@ -280,10 +329,9 @@ const GridControl = /* @__PURE__ */ defineComponent({
       onSortChange,
       handleRowClassName,
       handleHeaderCellClassName,
-      cleanKeyDown = NOOP,
-      cleanKeyUp = NOOP,
       cleanClick = NOOP,
-      cleanEnter = NOOP
+      cleanEnter = NOOP,
+      cleanTab = NOOP
     } = useITableEvent(c);
     const {
       onPageChange,
@@ -294,8 +342,14 @@ const GridControl = /* @__PURE__ */ defineComponent({
       headerCssVars
     } = useGridHeaderStyle(tableRef, ns);
     const {
-      cleanup = NOOP
+      cleanup = NOOP,
+      setDragEvent
     } = useGridDraggable(tableRef, ns, c);
+    c.evt.on("onLoadSuccess", () => {
+      if (setDragEvent) {
+        setDragEvent();
+      }
+    });
     const renderNoData = () => {
       var _a;
       const {
@@ -403,23 +457,45 @@ const GridControl = /* @__PURE__ */ defineComponent({
         }
       });
     };
+    const renderRowDetail = () => {
+      const {
+        navAppViewId,
+        navViewHeight
+      } = c.model;
+      if (navAppViewId && c.state.showRowDetail)
+        return createVNode(resolveComponent("el-table-column"), {
+          "type": "expand"
+        }, {
+          default: ({
+            row
+          }) => {
+            const {
+              context,
+              params
+            } = c.calcNavParams(row);
+            const style = {
+              height: navViewHeight ? "".concat(navViewHeight, "px") : "auto"
+            };
+            return h(resolveComponent("IBizViewShell"), {
+              style,
+              params,
+              context,
+              viewId: navAppViewId,
+              class: ns.b("row-detail-view")
+            });
+          }
+        });
+    };
     onUnmounted(() => {
       zIndex.decrement();
-      if (cleanup !== NOOP) {
+      if (cleanup !== NOOP)
         cleanup();
-      }
-      if (cleanKeyDown !== NOOP) {
-        cleanKeyDown();
-      }
-      if (cleanKeyUp !== NOOP) {
-        cleanKeyUp();
-      }
-      if (cleanClick !== NOOP) {
+      if (cleanClick !== NOOP)
         cleanClick();
-      }
-      if (cleanEnter !== NOOP) {
+      if (cleanEnter !== NOOP)
         cleanEnter();
-      }
+      if (cleanTab !== NOOP)
+        cleanTab();
     });
     const isLodeMoreDisabled = computed(() => {
       if (c.model.pagingMode !== 2) {
@@ -443,32 +519,33 @@ const GridControl = /* @__PURE__ */ defineComponent({
     return {
       c,
       ns,
-      sysCssName,
       tableRef,
       tableData,
+      sysCssName,
+      defaultSort,
       renderColumns,
-      renderTableColumn,
-      onDbRowClick,
+      headerCssVars,
+      infiniteScroll,
+      infiniteScrollKey,
+      isLodeMoreDisabled,
       onRowClick,
-      onSelectionChange,
+      spanMethod,
       onSortChange,
+      onDbRowClick,
       onPageChange,
-      onPageSizeChange,
-      onPageRefresh,
-      handleRowClassName,
-      handleHeaderCellClassName,
       renderNoData,
       summaryMethod,
-      spanMethod,
       headerDragend,
       renderPopover,
-      defaultSort,
+      onPageRefresh,
+      renderRowDetail,
+      onPageSizeChange,
+      renderTableColumn,
+      onSelectionChange,
+      handleRowClassName,
       renderBatchToolBar,
-      headerCssVars,
       renderDragIconColumn,
-      isLodeMoreDisabled,
-      infiniteScroll,
-      infiniteScrollKey
+      handleHeaderCellClassName
     };
   },
   render() {
@@ -517,7 +594,7 @@ const GridControl = /* @__PURE__ */ defineComponent({
               "type": "selection",
               "width": "55",
               "align": "center"
-            }, null), this.renderColumns.map((model, index) => {
+            }, null), this.renderRowDetail(), this.renderColumns.map((model, index) => {
               return this.renderTableColumn(model, index);
             })];
           },

package/es/control/grid/grid/index.d.ts

@@ -55,33 +55,29 @@ export declare const IBizGridControl: import("@ibiz-template/vue3-util").TypeWit
 }, {
     c: import("@ibiz-template/runtime").GridController<import("@ibiz/model-core").IDEGrid, import("@ibiz-template/runtime").IGridState, import("@ibiz-template/runtime").IGridEvent>;
     ns: import("@ibiz-template/core").Namespace;
-    sysCssName: string | undefined;
     tableRef: import("vue").Ref<import("@ibiz-template/core").IApiData | undefined>;
     tableData: import("vue").Ref<import("@ibiz-template/core").IApiData>;
+    sysCssName: string | undefined;
+    defaultSort: import("vue").Ref<import("@ibiz-template/core").IApiData>;
     renderColumns: import("vue").Ref<import("@ibiz/model-core").IDEGridColumn[]>;
-    renderTableColumn: (model: import("@ibiz/model-core").IDEGridColumn, index: number) => import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
-        [key: string]: any;
-    }> | null;
-    onDbRowClick: (data: import("@ibiz-template/runtime").ControlVO) => void;
+    headerCssVars: import("@ibiz-template/core").IApiData;
+    infiniteScroll: import("vue").Ref<import("@ibiz-template/core").IApiData | undefined>;
+    infiniteScrollKey: import("vue").Ref<string>;
+    isLodeMoreDisabled: import("vue").ComputedRef<boolean>;
     onRowClick: (data: import("@ibiz-template/runtime").ControlVO, _column: import("@ibiz-template/core").IApiData, event: MouseEvent) => Promise<void>;
-    onSelectionChange: (selection: import("@ibiz-template/runtime").ControlVO[]) => void;
+    spanMethod: ({ row, column, rowIndex, columnIndex, }: {
+        row: import("@ibiz-template/core").IApiData;
+        column: import("@ibiz-template/core").IApiData;
+        rowIndex: number;
+        columnIndex: number;
+    }) => void | import("@ibiz-template/core").IApiData;
     onSortChange: (opts: {
         _column: import("@ibiz-template/core").IApiData;
         prop: string;
         order: "ascending" | "descending";
     }) => void;
+    onDbRowClick: (data: import("@ibiz-template/runtime").ControlVO) => void;
     onPageChange: (page: number) => void;
-    onPageSizeChange: (size: number) => void;
-    onPageRefresh: () => void;
-    handleRowClassName: ({ row }: {
-        row: import("@ibiz-template/core").IApiData;
-    }) => string;
-    handleHeaderCellClassName: ({ _row, column, _rowIndex, _columnIndex, }: {
-        _row: import("@ibiz-template/core").IApiData;
-        column: import("@ibiz-template/core").IApiData;
-        _rowIndex: number;
-        _columnIndex: number;
-    }) => string;
     renderNoData: () => import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
         [key: string]: any;
     }> | null;
@@ -89,23 +85,28 @@ export declare const IBizGridControl: import("@ibiz-template/vue3-util").TypeWit
         columns: import("element-plus/es/components/table/src/table-column/defaults").TableColumnCtx<import("@ibiz-template/core").IApiData>[];
         data: import("@ibiz-template/core").IApiData[];
     }) => string[];
-    spanMethod: ({ row, column, rowIndex, columnIndex, }: {
-        row: import("@ibiz-template/core").IApiData;
-        column: import("@ibiz-template/core").IApiData;
-        rowIndex: number;
-        columnIndex: number;
-    }) => void | import("@ibiz-template/core").IApiData;
     headerDragend: (newWidth: number, oldWidth: number, column: import("@ibiz-template/core").IApiData) => void;
     renderPopover: () => JSX.Element[];
-    defaultSort: import("vue").Ref<import("@ibiz-template/core").IApiData>;
+    onPageRefresh: () => void;
+    renderRowDetail: () => JSX.Element | undefined;
+    onPageSizeChange: (size: number) => void;
+    renderTableColumn: (model: import("@ibiz/model-core").IDEGridColumn, index: number) => import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
+        [key: string]: any;
+    }> | null;
+    onSelectionChange: (selection: import("@ibiz-template/runtime").ControlVO[]) => void;
+    handleRowClassName: ({ row }: {
+        row: import("@ibiz-template/core").IApiData;
+    }) => string;
     renderBatchToolBar: () => import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
         [key: string]: any;
     }> | undefined;
-    headerCssVars: import("@ibiz-template/core").IApiData;
     renderDragIconColumn: () => JSX.Element;
-    isLodeMoreDisabled: import("vue").ComputedRef<boolean>;
-    infiniteScroll: import("vue").Ref<import("@ibiz-template/core").IApiData | undefined>;
-    infiniteScrollKey: import("vue").Ref<string>;
+    handleHeaderCellClassName: ({ _row, column, _rowIndex, _columnIndex, }: {
+        _row: import("@ibiz-template/core").IApiData;
+        column: import("@ibiz-template/core").IApiData;
+        _rowIndex: number;
+        _columnIndex: number;
+    }) => string;
 }, 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").IDEGrid>;

package/es/control/grid/grid/index.mjs

@@ -1,4 +1,4 @@
-import { registerControlProvider, ControlType } from '@ibiz-template/runtime';
+import { ControlType, registerControlProvider } from '@ibiz-template/runtime';
 import { withInstall } from '@ibiz-template/vue3-util';
 import '../grid-column/index.mjs';
 import { IBizRowEditPopover } from '../row-edit-popover/row-edit-popover.mjs';
@@ -7,6 +7,7 @@ import { GridProvider } from './grid.provider.mjs';
 export { useAppGridBase, useAppGridPagination, useGridDraggable, useGridHeaderStyle, useITableEvent } from './grid-control.util.mjs';
 import { IBizGridFieldColumn } from '../grid-column/grid-field-column/index.mjs';
 import { IBizGridUAColumn } from '../grid-column/grid-ua-column/index.mjs';
+import { IBizGridColumnHeader } from '../grid-column/grid-column-header/index.mjs';
 import { IBizGridFieldEditColumn } from '../grid-column/grid-field-edit-column/index.mjs';
 import { IBizGridGroupColumn } from '../grid-column/grid-group-column/index.mjs';
 import { IBizDynamicGridFieldEditColumn } from '../grid-column/auto-grid-field-edit-column/index.mjs';
@@ -17,6 +18,7 @@ const IBizGridControl = withInstall(GridControl, (v) => {
   v.component(IBizRowEditPopover.name, IBizRowEditPopover);
   v.use(IBizGridFieldColumn);
   v.use(IBizGridUAColumn);
+  v.use(IBizGridColumnHeader);
   v.use(IBizGridFieldEditColumn);
   v.use(IBizGridGroupColumn);
   v.use(IBizDynamicGridFieldEditColumn);

package/es/control/grid/grid-column/auto-grid-field-edit-column/auto-grid-field-edit-column.mjs

@@ -1,4 +1,4 @@
-import { defineComponent, ref, computed, createVNode, resolveComponent, h } from 'vue';
+import { ref, computed, resolveComponent, h, createVNode, defineComponent } from 'vue';
 import { useNamespace } from '@ibiz-template/vue3-util';
 import { GridFieldEditColumnController, GridRowState } from '@ibiz-template/runtime';
 import { isNil } from 'ramda';

package/es/control/grid/grid-column/grid-column-header/grid-column-header.css

@@ -0,0 +1 @@
+.ibiz-grid-column-header{display:flex;align-items:center;justify-content:space-between}.ibiz-grid-column-header__caption{display:flex;gap:var(--ibiz-spacing-extra-tight);align-items:center}.ibiz-grid-column-header__filter--icon{height:23px;visibility:visible;color:var(--ibiz-color-text-3);margin-left:var(--ibiz-spacing-extra-tight)}.ibiz-grid-column-header__filter--icon.is-active{color:var(--ibiz-color-primary)}.ibiz-grid-column-header__popover--editor{padding-bottom:var(--ibiz-spacing-tight);border-bottom:1px solid var(--ibiz-color-border)}.ibiz-grid-column-header__popover--bottom{display:flex;align-items:center;float:right}

package/es/control/grid/grid-column/grid-column-header/grid-column-header.d.ts

@@ -0,0 +1,36 @@
+import { PropType } from 'vue';
+import { GridColumnController } from '@ibiz-template/runtime';
+import { IDEGridColumn } from '@ibiz/model-core';
+import './grid-column-header.scss';
+export declare const GridColumnHeader: import("vue").DefineComponent<{
+    controller: {
+        type: PropType<GridColumnController<IDEGridColumn>>;
+        required: true;
+    };
+    column: {
+        type: PropType<import("@ibiz-template/core").IApiData>;
+        required: true;
+    };
+}, {
+    c: GridColumnController<IDEGridColumn>;
+    ns: import("@ibiz-template/core").Namespace;
+    visible: import("vue").Ref<boolean>;
+    content: import("vue").Ref<HTMLDivElement | undefined>;
+    curValue: import("vue").Ref<any>;
+    filterValue: import("vue").ComputedRef<any>;
+    onShow: () => void;
+    onHide: () => void;
+    onReset: () => void;
+    onClick: (e: MouseEvent) => void;
+    onScreen: () => void;
+    onFilterChange: (val: unknown, _name?: string) => void;
+}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
+    controller: {
+        type: PropType<GridColumnController<IDEGridColumn>>;
+        required: true;
+    };
+    column: {
+        type: PropType<import("@ibiz-template/core").IApiData>;
+        required: true;
+    };
+}>>, {}, {}>;

package/es/control/grid/grid-column/grid-column-header/grid-column-header.mjs

@@ -0,0 +1,142 @@
+import { isVNode, ref, computed, onUnmounted, resolveComponent, createVNode, h, defineComponent } from 'vue';
+import { useNamespace, useClickOutside } from '@ibiz-template/vue3-util';
+import { eventPath } from '@ibiz-template/core';
+import './grid-column-header.css';
+
+"use strict";
+function _isSlot(s) {
+  return typeof s === "function" || Object.prototype.toString.call(s) === "[object Object]" && !isVNode(s);
+}
+const GridColumnHeader = /* @__PURE__ */ defineComponent({
+  name: "IBizGridColumnHeader",
+  props: {
+    controller: {
+      type: Object,
+      required: true
+    },
+    column: {
+      type: Object,
+      required: true
+    }
+  },
+  setup(props) {
+    const ns = useNamespace("grid-column-header");
+    const c = props.controller;
+    const content = ref();
+    const visible = ref(false);
+    const curValue = ref();
+    const filterValue = computed(() => {
+      var _a, _b;
+      const filterName = (_b = (_a = c.model.filterEditor) == null ? void 0 : _a.id) == null ? void 0 : _b.toLowerCase();
+      return filterName ? c.grid.state.columnFilter[filterName] : void 0;
+    });
+    let funcs;
+    const onShow = () => {
+      if (funcs)
+        return funcs.proceed();
+      funcs = useClickOutside(content, (evt) => {
+        const classList = [];
+        eventPath(evt).forEach((e) => {
+          if (e && e.classList) {
+            classList.push(...e.classList);
+          }
+        });
+        if (classList.includes("el-popper"))
+          return;
+        visible.value = false;
+      });
+    };
+    const onHide = () => {
+      curValue.value = filterValue.value;
+      funcs == null ? void 0 : funcs.pause();
+    };
+    const onFilterChange = (val, _name) => {
+      curValue.value = val;
+    };
+    const onScreen = () => {
+      visible.value = false;
+      c.handleColumnScreen(curValue.value);
+    };
+    const onReset = () => {
+      curValue.value = void 0;
+      onScreen();
+    };
+    const onClick = (e) => {
+      e.stopPropagation();
+      visible.value = true;
+    };
+    onUnmounted(() => {
+      funcs == null ? void 0 : funcs.stop();
+    });
+    return {
+      c,
+      ns,
+      visible,
+      content,
+      curValue,
+      filterValue,
+      onShow,
+      onHide,
+      onReset,
+      onClick,
+      onScreen,
+      onFilterChange
+    };
+  },
+  render() {
+    return createVNode("div", {
+      "class": this.ns.b()
+    }, [createVNode("div", {
+      "class": this.ns.e("caption")
+    }, [createVNode(resolveComponent("iBizIcon"), {
+      "class": this.ns.em("caption", "icon"),
+      "icon": this.c.model.sysImage
+    }, null), createVNode("span", {
+      "class": this.ns.em("caption", "label")
+    }, [this.c.model.caption])]), this.c.filterEditorProvider && createVNode(resolveComponent("el-popover"), {
+      "width": 220,
+      "onShow": this.onShow,
+      "onHide": this.onHide,
+      "visible": this.visible,
+      "popper-class": this.ns.e("popover")
+    }, {
+      reference: () => {
+        return createVNode("ion-icon", {
+          "name": "funnel",
+          "title": ibiz.i18n.t("app.search"),
+          "class": [this.ns.em("filter", "icon"), this.ns.is("active", !!this.filterValue)],
+          "onClick": this.onClick
+        }, null);
+      },
+      default: () => {
+        let _slot, _slot2;
+        return createVNode("div", {
+          "ref": "content",
+          "class": this.ns.em("popover", "content")
+        }, [createVNode("div", {
+          "class": this.ns.em("popover", "editor")
+        }, [h(resolveComponent(this.c.filterEditorProvider.gridEditor), {
+          data: {},
+          autoFocus: true,
+          value: this.curValue,
+          onChange: this.onFilterChange,
+          controller: this.c.filterEditor
+        })]), createVNode("div", {
+          "class": this.ns.em("popover", "bottom")
+        }, [createVNode(resolveComponent("el-button"), {
+          "type": "text",
+          "onClick": this.onScreen
+        }, _isSlot(_slot = ibiz.i18n.t("app.search")) ? _slot : {
+          default: () => [_slot]
+        }), createVNode(resolveComponent("el-button"), {
+          "type": "text",
+          "onClick": this.onReset
+        }, _isSlot(_slot2 = ibiz.i18n.t("app.reset")) ? _slot2 : {
+          default: () => [_slot2]
+        })])]);
+      }
+    })]);
+  }
+});
+
+export { GridColumnHeader };

package/es/control/grid/grid-column/grid-column-header/index.d.ts

@@ -0,0 +1,33 @@
+export declare const IBizGridColumnHeader: import("@ibiz-template/vue3-util").TypeWithInstall<import("vue").DefineComponent<{
+    controller: {
+        type: import("vue").PropType<import("@ibiz-template/runtime").GridColumnController<import("@ibiz/model-core").IDEGridColumn>>;
+        required: true;
+    };
+    column: {
+        type: import("vue").PropType<import("@ibiz-template/core").IApiData>;
+        required: true;
+    };
+}, {
+    c: import("@ibiz-template/runtime").GridColumnController<import("@ibiz/model-core").IDEGridColumn>;
+    ns: import("@ibiz-template/core").Namespace;
+    visible: import("vue").Ref<boolean>;
+    content: import("vue").Ref<HTMLDivElement | undefined>;
+    curValue: import("vue").Ref<any>;
+    filterValue: import("vue").ComputedRef<any>;
+    onShow: () => void;
+    onHide: () => void;
+    onReset: () => void;
+    onClick: (e: MouseEvent) => void;
+    onScreen: () => void;
+    onFilterChange: (val: unknown, _name?: string | undefined) => void;
+}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
+    controller: {
+        type: import("vue").PropType<import("@ibiz-template/runtime").GridColumnController<import("@ibiz/model-core").IDEGridColumn>>;
+        required: true;
+    };
+    column: {
+        type: import("vue").PropType<import("@ibiz-template/core").IApiData>;
+        required: true;
+    };
+}>>, {}, {}>>;
+export default IBizGridColumnHeader;

package/es/control/grid/grid-column/grid-column-header/index.mjs

@@ -0,0 +1,12 @@
+import { withInstall } from '@ibiz-template/vue3-util';
+import { GridColumnHeader } from './grid-column-header.mjs';
+
+"use strict";
+const IBizGridColumnHeader = withInstall(
+  GridColumnHeader,
+  function(v) {
+    v.component(GridColumnHeader.name, GridColumnHeader);
+  }
+);
+
+export { IBizGridColumnHeader, IBizGridColumnHeader as default };

package/es/control/grid/grid-column/grid-field-column/attachment-column/attachment-column.css

@@ -0,0 +1 @@
+.ibiz-attachment-column{display:flex;flex-wrap:wrap;gap:var(--ibiz-spacing-extra-tight);width:100%}.ibiz-attachment-column__file{display:flex;align-items:center;max-width:100%;min-height:var(--ibiz-height-control-default);max-height:var(--ibiz-height-control-default);color:var(--ibiz-color-primary)}.ibiz-attachment-column__file--img{width:auto;max-width:var(--ibiz-height-control-default);max-height:var(--ibiz-height-control-default);cursor:zoom-in}.ibiz-attachment-column__image-preview{width:100%;height:100%;padding:var(--ibiz-spacing-base)}.ibiz-attachment-column__image-preview--container{display:flex;align-items:center;justify-content:center;width:100%;height:100%}.ibiz-attachment-column__image-preview--container img{width:100%;max-width:100%;max-height:100%;padding:var(--ibiz-spacing-loose)}