@ibiz-template/vue3-components 0.7.39 → 0.7.40

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

@@ -5,11 +5,11 @@ export declare const IBizGridControl: import("@ibiz-template/vue3-util").TypeWit
         required: true;
     };
     context: {
-        type: import("vue").PropType<IContext>;
+        type: import("vue").PropType<import("@ibiz-template/core").IApiContext>;
         required: true;
     };
     params: {
-        type: import("vue").PropType<IParams>;
+        type: import("vue").PropType<import("@ibiz-template/core").IApiParams>;
         default: () => {};
     };
     provider: {
@@ -33,10 +33,10 @@ export declare const IBizGridControl: import("@ibiz-template/vue3-util").TypeWit
     };
     data: {
         type: {
-            (arrayLength: number): IData[];
-            (...items: IData[]): IData[];
-            new (arrayLength: number): IData[];
-            new (...items: IData[]): IData[];
+            (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[];
@@ -55,68 +55,69 @@ 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;
+    tableRef: import("vue").Ref<import("@ibiz-template/core").IApiData | undefined>;
+    tableData: import("vue").Ref<import("@ibiz-template/core").IApiData>;
     sysCssName: string | undefined;
-    tableRef: import("vue").Ref<IData | undefined>;
-    tableData: import("vue").Ref<IData>;
+    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;
-    onRowClick: (data: import("@ibiz-template/runtime").ControlVO, _column: IData, event: MouseEvent) => Promise<void>;
-    onSelectionChange: (selection: 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>;
+    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: IData;
+        _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: IData;
-    }) => string;
-    handleHeaderCellClassName: ({ _row, column, _rowIndex, _columnIndex, }: {
-        _row: IData;
-        column: IData;
-        _rowIndex: number;
-        _columnIndex: number;
-    }) => string;
     renderNoData: () => import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
         [key: string]: any;
     }> | null;
     summaryMethod: ({ columns, }: {
-        columns: import("element-plus/es/components/table/src/table-column/defaults").TableColumnCtx<IData>[];
-        data: IData[];
+        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: IData;
-        column: IData;
-        rowIndex: number;
-        columnIndex: number;
-    }) => void | IData;
-    headerDragend: (newWidth: number, oldWidth: number, column: IData) => void;
+    headerDragend: (newWidth: number, oldWidth: number, column: import("@ibiz-template/core").IApiData) => void;
     renderPopover: () => JSX.Element[];
-    defaultSort: import("vue").Ref<IData>;
+    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: IData;
     renderDragIconColumn: () => JSX.Element;
-    isLodeMoreDisabled: import("vue").ComputedRef<boolean>;
-    infiniteScroll: import("vue").Ref<IData | 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>;
         required: true;
     };
     context: {
-        type: import("vue").PropType<IContext>;
+        type: import("vue").PropType<import("@ibiz-template/core").IApiContext>;
         required: true;
     };
     params: {
-        type: import("vue").PropType<IParams>;
+        type: import("vue").PropType<import("@ibiz-template/core").IApiParams>;
         default: () => {};
     };
     provider: {
@@ -140,10 +141,10 @@ export declare const IBizGridControl: import("@ibiz-template/vue3-util").TypeWit
     };
     data: {
         type: {
-            (arrayLength: number): IData[];
-            (...items: IData[]): IData[];
-            new (arrayLength: number): IData[];
-            new (...items: IData[]): IData[];
+            (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[];
@@ -160,7 +161,7 @@ export declare const IBizGridControl: import("@ibiz-template/vue3-util").TypeWit
         default: boolean;
     };
 }>>, {
-    params: IParams;
+    params: import("@ibiz-template/core").IApiParams;
     mdctrlActiveMode: number;
     singleSelect: boolean;
     rowEditOpen: boolean;

package/es/control/grid/grid/index.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.d.ts

@@ -10,7 +10,7 @@ export declare const AutoGridFieldEditColumn: import("vue").DefineComponent<{
         required: true;
     };
     attrs: {
-        type: PropType<IData>;
+        type: PropType<import("@ibiz-template/core").IApiData>;
         required: false;
     };
 }, {
@@ -20,8 +20,8 @@ export declare const AutoGridFieldEditColumn: import("vue").DefineComponent<{
     tooltip: import("vue").ComputedRef<string | undefined>;
     rowDataChange: (val: unknown, name?: string, ignore?: boolean) => Promise<void>;
     onInfoTextChange: (text: string) => void;
-    gridEditItemProps: IData;
-    editorProps: IData;
+    gridEditItemProps: import("@ibiz-template/core").IApiData;
+    editorProps: import("@ibiz-template/core").IApiData;
 }, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
     controller: {
         type: typeof GridFieldEditColumnController;
@@ -32,7 +32,7 @@ export declare const AutoGridFieldEditColumn: import("vue").DefineComponent<{
         required: true;
     };
     attrs: {
-        type: PropType<IData>;
+        type: PropType<import("@ibiz-template/core").IApiData>;
         required: false;
     };
 }>>, {}, {}>;

package/es/control/grid/grid-column/auto-grid-field-edit-column/index.d.ts

@@ -8,7 +8,7 @@ export declare const IBizDynamicGridFieldEditColumn: import("@ibiz-template/vue3
         required: true;
     };
     attrs: {
-        type: import("vue").PropType<IData>;
+        type: import("vue").PropType<import("@ibiz-template/core").IApiData>;
         required: false;
     };
 }, {
@@ -18,8 +18,8 @@ export declare const IBizDynamicGridFieldEditColumn: import("@ibiz-template/vue3
     tooltip: import("vue").ComputedRef<string | undefined>;
     rowDataChange: (val: unknown, name?: string | undefined, ignore?: boolean) => Promise<void>;
     onInfoTextChange: (text: string) => void;
-    gridEditItemProps: IData;
-    editorProps: IData;
+    gridEditItemProps: import("@ibiz-template/core").IApiData;
+    editorProps: import("@ibiz-template/core").IApiData;
 }, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
     controller: {
         type: typeof import("@ibiz-template/runtime").GridFieldEditColumnController;
@@ -30,7 +30,7 @@ export declare const IBizDynamicGridFieldEditColumn: import("@ibiz-template/vue3
         required: true;
     };
     attrs: {
-        type: import("vue").PropType<IData>;
+        type: import("vue").PropType<import("@ibiz-template/core").IApiData>;
         required: false;
     };
 }>>, {}, {}>>;

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

package/es/control/grid/grid-column/grid-field-column/attachment-column/attachment-column.d.ts

@@ -0,0 +1,65 @@
+import { PropType } from 'vue';
+import { ControlVO, GridFieldColumnController } from '@ibiz-template/runtime';
+import './attachment-column.scss';
+export declare const AttachmentColumn: import("vue").DefineComponent<{
+    value: {
+        type: (StringConstructor | {
+            (arrayLength: number): string[];
+            (...items: string[]): string[];
+            new (arrayLength: number): string[];
+            new (...items: string[]): string[];
+            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;
+    };
+    data: {
+        type: PropType<ControlVO>;
+        required: true;
+    };
+    controller: {
+        type: PropType<GridFieldColumnController>;
+        required: true;
+    };
+}, {
+    ns: import("@ibiz-template/core").Namespace;
+    files: import("vue").Ref<{
+        id: string;
+        name: string;
+        url?: string | undefined;
+        base64?: string | undefined;
+    }[]>;
+    handleFileClick: (file: IData) => void;
+}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
+    value: {
+        type: (StringConstructor | {
+            (arrayLength: number): string[];
+            (...items: string[]): string[];
+            new (arrayLength: number): string[];
+            new (...items: string[]): string[];
+            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;
+    };
+    data: {
+        type: PropType<ControlVO>;
+        required: true;
+    };
+    controller: {
+        type: PropType<GridFieldColumnController>;
+        required: true;
+    };
+}>>, {}, {}>;

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

@@ -0,0 +1,125 @@
+import { ref, createVNode, resolveDirective, withDirectives, defineComponent } from 'vue';
+import { useNamespace } from '@ibiz-template/vue3-util';
+import { useFilesParse, getFileType } from './file-util.mjs';
+import './attachment-column.css';
+
+"use strict";
+const AttachmentColumn = /* @__PURE__ */ defineComponent({
+  name: "IBizAttachmentColumn",
+  props: {
+    value: {
+      type: [String, Array],
+      required: true
+    },
+    data: {
+      type: Object,
+      required: true
+    },
+    controller: {
+      type: Object,
+      required: true
+    }
+  },
+  setup(props) {
+    const ns = useNamespace("attachment-column");
+    const {
+      downloadUrl,
+      files,
+      onDownload
+    } = useFilesParse(props, props.controller);
+    const loading = ref(true);
+    const onLoad = () => {
+      loading.value = false;
+    };
+    const renderImagePreview = (file) => {
+      return withDirectives(createVNode("div", {
+        "class": ns.e("image-preview")
+      }, [createVNode("div", {
+        "class": ns.em("image-preview", "container")
+      }, [createVNode("img", {
+        "alt": "--",
+        "src": file.base64 || file.url,
+        "onLoad": onLoad
+      }, null)])]), [[resolveDirective("loading"), loading.value]]);
+    };
+    const handleImagePreview = async (file) => {
+      const overlay = ibiz.overlay.createModal(renderImagePreview(file), void 0, {
+        modalClass: ns.e("image-preview"),
+        width: 700,
+        height: "auto"
+      });
+      overlay.present();
+      await overlay.onWillDismiss();
+    };
+    const handlePDFPreview = async (file) => {
+      const url = file.url || downloadUrl.value.replace("%fileId%", file.id);
+      const response = await ibiz.net.request(url, {
+        method: "get",
+        responseType: "blob",
+        baseURL: ""
+        // 已经有baseURL了，这里无需再写
+      });
+      if (response.data) {
+        const blob = new Blob([response.data], {
+          type: "application/pdf"
+        });
+        const objectURL = URL.createObjectURL(blob);
+        const link = document.createElement("a");
+        link.href = objectURL;
+        link.target = "_blank";
+        link.style.cursor = "pointer";
+        link.textContent = file.name || "";
+        const handleClick = function() {
+          link.removeEventListener("click", handleClick);
+          document.body.removeChild(link);
+        };
+        link.addEventListener("click", handleClick);
+        document.body.appendChild(link);
+        link.click();
+      }
+    };
+    const handleFileClick = (file) => {
+      var _a, _b;
+      const fileName = file.name;
+      const fileExtension = (_b = (_a = fileName.split(".").pop()) == null ? void 0 : _a.toLowerCase()) != null ? _b : "";
+      switch (getFileType(fileExtension)) {
+        case "image":
+          handleImagePreview(file);
+          break;
+        case "pdf":
+          handlePDFPreview(file);
+          break;
+        case "other":
+        default:
+          onDownload(file);
+          break;
+      }
+    };
+    return {
+      ns,
+      files,
+      handleFileClick
+    };
+  },
+  render() {
+    return createVNode("div", {
+      "class": this.ns.b()
+    }, [this.files.map((file) => {
+      var _a, _b;
+      const fileName = file.name;
+      const fileExtension = (_b = (_a = fileName.split(".").pop()) == null ? void 0 : _a.toLowerCase()) != null ? _b : "";
+      const fileType = getFileType(fileExtension);
+      return createVNode("div", {
+        "class": this.ns.e("file"),
+        "title": file.name,
+        "onClick": () => this.handleFileClick(file)
+      }, [fileType === "image" ? createVNode("img", {
+        "alt": "",
+        "class": this.ns.em("file", "img"),
+        "src": file.base64 || file.url
+      }, null) : file.name]);
+    })]);
+  }
+});
+
+export { AttachmentColumn };