@polyv/vue-components 1.8.1 → 1.9.0

package/vue3/src/components/table/src/hooks/props-define.d.ts

@@ -1,5 +1,6 @@
 import { PageContent } from '../../../../hooks/pagination/types';
 import { TableCellClassType, TableCellParams, TableCellStyleType, TableRowClassType, TableRowKeyType, TableRowParams, TableRowStyleType, TableSortData } from '../types';
+import { TableRequestFunction } from './use-table/use-table-request';
 export declare const tableProps: () => {
     /**
      * 表格数据
@@ -27,10 +28,9 @@ export declare const tableProps: () => {
     };
     /**
      * 脚部粘贴定位
+     * @default false
      */
-    footerSticky: import('vue-types').VueTypeValidableDef<boolean, import('vue-types/dist/types').ValidatorFunction<boolean>> & {
-        default: boolean;
-    };
+    footerSticky: import('vue-types').VueTypeValidableDef<boolean | undefined, import('vue-types/dist/types').ValidatorFunction<boolean | undefined>>;
     /**
      * 脚部背景色
      */
@@ -150,6 +150,35 @@ export declare const tableProps: () => {
     border: import('vue-types').VueTypeValidableDef<boolean, import('vue-types/dist/types').ValidatorFunction<boolean>> & {
         default: boolean;
     };
+    /**
+     * 请求数据函数
+     */
+    requestData: import('vue-types').VueTypeValidableDef<TableRequestFunction, import('vue-types/dist/types').ValidatorFunction<TableRequestFunction>>;
+    /**
+     * mounted 时自动请求数据
+     * @default true
+     */
+    autoRequestData: import('vue-types').VueTypeValidableDef<boolean, import('vue-types/dist/types').ValidatorFunction<boolean>> & {
+        default: boolean;
+    };
+    /**
+     * 空状态文案
+     */
+    emptyText: import('vue-types').VueTypeValidableDef<string, import('vue-types/dist/types').ValidatorFunction<string>>;
+    /**
+     * 显示自定义列表
+     * @default false
+     */
+    customColumn: import('vue-types').VueTypeValidableDef<boolean, import('vue-types/dist/types').ValidatorFunction<boolean>> & {
+        default: boolean;
+    };
+    /**
+     * 脚部选择信息
+     * @default 'none'
+     */
+    footerSelection: import('vue-types').VueTypeDef<"none" | "count" | "selection"> & {
+        default: "none" | "count" | "selection";
+    };
 };
 export declare const tableEmits: () => {
     /**
@@ -165,6 +194,37 @@ export declare const tableEmits: () => {
      */
     'sort-change': import('../../../../vue-utils').EmitFuncType<TableSortData | undefined>;
 };
+export interface TableSlots {
+    /**
+     * 条件筛选
+     */
+    'condition-filter': void;
+    /**
+     * 工具栏左侧
+     */
+    'toolbar-left': void;
+    /**
+     * 工具栏右侧
+     */
+    'toolbar-right': void;
+    /**
+     * 数据渲染
+     */
+    'data-render': {
+        /**
+         * 渲染的数据
+         */
+        renderData: any[];
+    };
+    /**
+     * 表格底部
+     */
+    footer: void;
+    /**
+     * 空状态文案
+     */
+    'empty-text': void;
+}
 export declare const tableColumnProps: () => {
     /**
      * 绑定值，支持 v-model
@@ -174,7 +234,7 @@ export declare const tableColumnProps: () => {
      * 列类型
      * @propType TableColumnType
      */
-    type: import('vue-types').VueTypeDef<"operation" | "tags" | "index" | "single" | "expand" | "multiple">;
+    type: import('vue-types').VueTypeDef<"operation" | "tags" | "index" | "single" | "expand" | "multiple" | "phone">;
     /**
      * 列头文字
      */
@@ -236,7 +296,7 @@ export declare const tableColumnProps: () => {
     /**
      * 格式化单元格内容
      */
-    formatter: import('vue-types').VueTypeDef<"date" | TableColumnFormatterFuncType | TableColumnFormatter>;
+    formatter: import('vue-types').VueTypeDef<"duration" | "date" | TableColumnFormatterFuncType | TableColumnFormatter>;
     /**
      * 是否显示展开
      */
@@ -248,9 +308,57 @@ export declare const tableColumnProps: () => {
     emptyText: import('vue-types').VueTypeDef<string | boolean> & {
         default: string | boolean;
     };
+    /**
+     * 脱敏处理
+     */
+    sensitiveText: import('vue-types').VueTypeValidableDef<boolean, import('vue-types/dist/types').ValidatorFunction<boolean>> & {
+        default: boolean;
+    };
+    /**
+     * 脱敏类型
+     * @default 'phone'
+     */
+    sensitiveTextType: import('vue-types').VueTypeDef<"password" | "phone"> & {
+        default: "password" | "phone";
+    };
+    /**
+     * 列的分类，用于自定义列表
+     */
+    category: import('vue-types').VueTypeValidableDef<string, import('vue-types/dist/types').ValidatorFunction<string>>;
+    /**
+     * 是否默认显示
+     * @default true
+     */
+    defaultShow: import('vue-types').VueTypeValidableDef<boolean, import('vue-types/dist/types').ValidatorFunction<boolean>> & {
+        default: boolean;
+    };
+    /**
+     * 状态圆点
+     */
+    statusDot: import('vue-types').VueTypeDef<string | Record<string, string> | ((cellData: TableCellParams) => string)>;
 };
 export declare const tableColumnEmits: () => {};
-export type TableColumnFormatterType = 'func' | 'date' | 'enum';
+export declare const tableRowMultipleProps: () => {
+    /**
+     * 行数据
+     */
+    rowData: import('vue-types').VueTypeValidableDef<{
+        [key: string]: any;
+    }, import('vue-types/dist/types').ValidatorFunction<{
+        [key: string]: any;
+    }>> & {
+        required: true;
+    };
+    /**
+     * 行索引
+     */
+    rowIndex: import('vue-types').VueTypeValidableDef<number, import('vue-types/dist/types').ValidatorFunction<number>> & {
+        default: number;
+    } & {
+        required: true;
+    };
+};
+export type TableColumnFormatterType = 'func' | 'date' | 'duration' | 'enum';
 export type TableColumnFormatterFuncType = (params: TableCellParams) => string;
 export type TableColumnFormatter = {
     /**
@@ -271,6 +379,13 @@ export type TableColumnFormatter = {
      * @default 'YYYY-MM-DD HH:mm:ss'
      */
     dateFormat?: string;
+    /**
+     * 时长段数
+     *
+     * `type` 为 `duration` 时有效
+     * @default 3
+     */
+    durationSegments?: 1 | 2 | 3 | 'auto';
     /**
      * 枚举映射
      *

package/vue3/src/components/table/src/hooks/use-table/use-column-computed.d.ts

@@ -7,61 +7,8 @@ export declare const useColumnComputed: (options: TableElementInstance & {
     centerColumnListInstance: ColumnListInstance;
     rightColumnListInstance: ColumnListInstance;
 }) => {
-    allColumnList: import('vue').ComputedRef<{
-        columnId: string;
-        columnProps: {
-            readonly ellipsis: boolean;
-            readonly emptyText: string | boolean;
-            readonly multipleMax: number;
-            readonly headerTips: string;
-            readonly sortable: boolean;
-            readonly title?: string | undefined;
-            readonly "v-model-key"?: any;
-            readonly fixed?: "left" | "right" | undefined;
-            readonly type?: "operation" | "tags" | "index" | "single" | "expand" | "multiple" | undefined;
-            readonly minWidth?: string | number | undefined;
-            readonly width?: string | number | undefined;
-            readonly showExpand?: ((params: import('../../types').TableRowParams) => boolean) | undefined;
-            readonly prop?: string | undefined;
-            readonly multipleDisabled?: ((params: import('../../types').TableRowParams) => boolean) | undefined;
-            readonly singleDisabled?: ((params: import('../../types').TableRowParams) => boolean) | undefined;
-            readonly sortName?: string | undefined;
-            readonly formatter?: "date" | import('../props-define').TableColumnFormatterFuncType | {
-                type?: import('../props-define').TableColumnFormatterType | undefined;
-                func?: import('../props-define').TableColumnFormatterFuncType | undefined;
-                dateFormat?: string | undefined;
-                enumMap?: Record<any, string> | undefined;
-            } | undefined;
-        };
-        getModelValue: () => any;
-        updateModelValue: (value: any) => void;
-        setRenderWidth: (width: number) => void;
-        getRenderWidth: () => number;
-        setColumnIndex: (index: number) => void;
-        getColumnIndex: () => number;
-        getStickyStatus: () => boolean;
-        setStickyPosition: (num: number) => void;
-        getStickyStyle: () => Record<string, string>;
-        hasSlots: (name: keyof import('../props-define').TableColumnSlots) => boolean;
-        getHeaderRenderSlot: () => import('vue/types/umd').VNode[] | undefined;
-        getCellRenderSlot: (params: import('../props-define').TableColumnCellSlotData) => import('vue/types/umd').VNode[] | undefined;
-        addChildrenColumn: (column: TableColumnInstance) => void;
-        getChildrenColumns: () => TableColumnInstance[];
-        level: number;
-        setColSpan: (num: number) => void;
-        getColSpan: () => number;
-        setRowSpan: (num: number) => void;
-        getRowSpan: () => number;
-        getColumnSortName: () => string | undefined;
-        isCurrentSort: () => boolean;
-        changeSortOrder: (order: import('../../types').TableSortOrder | undefined) => void;
-        toggleSortOrder: () => import('../../types').TableSortOrder | undefined;
-        hasExpandSlot: () => boolean;
-        canShowExpand: (params: import('../../types').TableRowParams) => boolean;
-        getExpandVisible: (renderRowKey: string) => boolean;
-        toggleExpand: (renderRowKey: string) => void;
-        removeExpandRecord: (renderRowKey: string) => void;
-    }[]>;
-    allColumnWidth: import('vue').ComputedRef<number>;
+    allRenderColumnList: import('vue').ComputedRef<TableColumnInstance[]>;
+    allRenderColumnWidth: import('vue').ComputedRef<number>;
     hasHorizontalScroll: import('vue').ComputedRef<boolean>;
+    computeColumnWidth: () => void;
 };

package/vue3/src/components/table/src/hooks/use-table/use-column-list.d.ts

@@ -1,125 +1,21 @@
+import { ComputedRef, Ref } from 'vue';
 import { TableColumnInstance } from '../use-table-column/use-table-column';
 import { TableColumnRenderPosition } from '../../types';
-export declare const useColumnListStore: () => {
-    columnList: import('vue').Ref<{
-        columnId: string;
-        columnProps: {
-            readonly ellipsis: boolean;
-            readonly emptyText: string | boolean;
-            readonly multipleMax: number;
-            readonly headerTips: string;
-            readonly sortable: boolean;
-            readonly title?: string | undefined;
-            readonly "v-model-key"?: any;
-            readonly fixed?: "left" | "right" | undefined;
-            readonly type?: "operation" | "tags" | "index" | "single" | "expand" | "multiple" | undefined;
-            readonly minWidth?: string | number | undefined;
-            readonly width?: string | number | undefined;
-            readonly showExpand?: ((params: import('../../types').TableRowParams) => boolean) | undefined;
-            readonly prop?: string | undefined;
-            readonly multipleDisabled?: ((params: import('../../types').TableRowParams) => boolean) | undefined;
-            readonly singleDisabled?: ((params: import('../../types').TableRowParams) => boolean) | undefined;
-            readonly sortName?: string | undefined;
-            readonly formatter?: "date" | import('../props-define').TableColumnFormatterFuncType | {
-                type?: import('../props-define').TableColumnFormatterType | undefined;
-                func?: import('../props-define').TableColumnFormatterFuncType | undefined;
-                dateFormat?: string | undefined;
-                enumMap?: Record<any, string> | undefined;
-            } | undefined;
-        };
-        getModelValue: () => any;
-        updateModelValue: (value: any) => void;
-        setRenderWidth: (width: number) => void;
-        getRenderWidth: () => number;
-        setColumnIndex: (index: number) => void;
-        getColumnIndex: () => number;
-        getStickyStatus: () => boolean;
-        setStickyPosition: (num: number) => void;
-        getStickyStyle: () => Record<string, string>;
-        hasSlots: (name: keyof import('../props-define').TableColumnSlots) => boolean;
-        getHeaderRenderSlot: () => import('vue/types/umd').VNode[] | undefined;
-        getCellRenderSlot: (params: import('../props-define').TableColumnCellSlotData) => import('vue/types/umd').VNode[] | undefined;
-        addChildrenColumn: (column: TableColumnInstance) => void;
-        getChildrenColumns: () => TableColumnInstance[];
-        level: number;
-        setColSpan: (num: number) => void;
-        getColSpan: () => number;
-        setRowSpan: (num: number) => void;
-        getRowSpan: () => number;
-        getColumnSortName: () => string | undefined;
-        isCurrentSort: () => boolean;
-        changeSortOrder: (order: import('../../types').TableSortOrder | undefined) => void;
-        toggleSortOrder: () => import('../../types').TableSortOrder | undefined;
-        hasExpandSlot: () => boolean;
-        canShowExpand: (params: import('../../types').TableRowParams) => boolean;
-        getExpandVisible: (renderRowKey: string) => boolean;
-        toggleExpand: (renderRowKey: string) => void;
-        removeExpandRecord: (renderRowKey: string) => void;
-    }[]>;
+export interface ColumnListStoreInstance {
+    columnList: Ref<TableColumnInstance[]>;
+    renderColumnList: ComputedRef<TableColumnInstance[]>;
+    hasRenderColumn: () => boolean;
     addColumn: (column: TableColumnInstance) => void;
     removeColumn: (column: TableColumnInstance) => void;
-};
-export type ColumnListStoreInstance = ReturnType<typeof useColumnListStore>;
-export declare const useColumnList: (position: TableColumnRenderPosition) => {
-    columnList: import('vue').Ref<{
-        columnId: string;
-        columnProps: {
-            readonly ellipsis: boolean;
-            readonly emptyText: string | boolean;
-            readonly multipleMax: number;
-            readonly headerTips: string;
-            readonly sortable: boolean;
-            readonly title?: string | undefined;
-            readonly "v-model-key"?: any;
-            readonly fixed?: "left" | "right" | undefined;
-            readonly type?: "operation" | "tags" | "index" | "single" | "expand" | "multiple" | undefined;
-            readonly minWidth?: string | number | undefined;
-            readonly width?: string | number | undefined;
-            readonly showExpand?: ((params: import('../../types').TableRowParams) => boolean) | undefined;
-            readonly prop?: string | undefined;
-            readonly multipleDisabled?: ((params: import('../../types').TableRowParams) => boolean) | undefined;
-            readonly singleDisabled?: ((params: import('../../types').TableRowParams) => boolean) | undefined;
-            readonly sortName?: string | undefined;
-            readonly formatter?: "date" | import('../props-define').TableColumnFormatterFuncType | {
-                type?: import('../props-define').TableColumnFormatterType | undefined;
-                func?: import('../props-define').TableColumnFormatterFuncType | undefined;
-                dateFormat?: string | undefined;
-                enumMap?: Record<any, string> | undefined;
-            } | undefined;
-        };
-        getModelValue: () => any;
-        updateModelValue: (value: any) => void;
-        setRenderWidth: (width: number) => void;
-        getRenderWidth: () => number;
-        setColumnIndex: (index: number) => void;
-        getColumnIndex: () => number;
-        getStickyStatus: () => boolean;
-        setStickyPosition: (num: number) => void;
-        getStickyStyle: () => Record<string, string>;
-        hasSlots: (name: keyof import('../props-define').TableColumnSlots) => boolean;
-        getHeaderRenderSlot: () => import('vue/types/umd').VNode[] | undefined;
-        getCellRenderSlot: (params: import('../props-define').TableColumnCellSlotData) => import('vue/types/umd').VNode[] | undefined;
-        addChildrenColumn: (column: TableColumnInstance) => void;
-        getChildrenColumns: () => TableColumnInstance[];
-        level: number;
-        setColSpan: (num: number) => void;
-        getColSpan: () => number;
-        setRowSpan: (num: number) => void;
-        getRowSpan: () => number;
-        getColumnSortName: () => string | undefined;
-        isCurrentSort: () => boolean;
-        changeSortOrder: (order: import('../../types').TableSortOrder | undefined) => void;
-        toggleSortOrder: () => import('../../types').TableSortOrder | undefined;
-        hasExpandSlot: () => boolean;
-        canShowExpand: (params: import('../../types').TableRowParams) => boolean;
-        getExpandVisible: (renderRowKey: string) => boolean;
-        toggleExpand: (renderRowKey: string) => void;
-        removeExpandRecord: (renderRowKey: string) => void;
-    }[]>;
-    addColumn: (column: TableColumnInstance) => void;
-    removeColumn: (column: TableColumnInstance) => void;
-    position: "center" | "left" | "right";
-    columnCount: import('vue').ComputedRef<number>;
-    columnWidthTotal: import('vue').ComputedRef<number>;
-};
-export type ColumnListInstance = ReturnType<typeof useColumnList>;
+}
+export declare function sortColumnList(list: TableColumnInstance[]): TableColumnInstance[];
+export declare const useColumnListStore: () => ColumnListStoreInstance;
+export interface ColumnListInstance extends ColumnListStoreInstance {
+    /** 列数量，不排除被隐藏的列 */
+    columnCount: ComputedRef<number>;
+    /** 渲染列的列宽度总和 */
+    columnWidthTotal: ComputedRef<number>;
+    /** 列位置 */
+    position: TableColumnRenderPosition;
+}
+export declare const useColumnList: (position: TableColumnRenderPosition) => ColumnListInstance;

package/vue3/src/components/table/src/hooks/use-table/use-table-custom-column.d.ts

@@ -0,0 +1,15 @@
+import { VueProps } from '../../../../../vue-utils';
+import { tableProps } from '../props-define';
+import { InjectionKey } from 'vue';
+export declare const TABLE_CUSTOM_COLUMN_INJECT_KEY: InjectionKey<{
+    openCustomColumn: () => void;
+}>;
+export declare const useTableCustomColumn: (options: {
+    tableProps: VueProps<typeof tableProps>;
+}) => {
+    customColumnRef: import('vue').Ref<(import('vue/types/v3-component-public-instance').Vue3Instance<{}, Readonly<import('vue').ExtractPropTypes<{}>>, Readonly<import('vue').ExtractPropTypes<{}>>, {}, {}, true, import('vue').ComponentOptionsBase<any, any, any, any, any, any, any, any, any, any>> & Readonly<Readonly<import('vue').ExtractPropTypes<{}>>> & import('vue').ShallowUnwrapRef<{
+        openDialog: () => void;
+    }> & import('vue/types/v3-component-options').ExtractComputedReturns<{}> & import('vue').ComponentCustomProperties & Readonly<import('vue').ExtractPropTypes<{}>>) | undefined>;
+    customColumnRender: import('vue').Ref<boolean>;
+    openCustomColumn: () => Promise<void>;
+};

package/vue3/src/components/table/src/hooks/use-table/use-table-pagination.d.ts

@@ -1,13 +1,19 @@
-import { VueProps } from '../../../../../vue-utils';
-import { tableProps } from '../props-define';
+import { VueEmit, VueProps } from '../../../../../vue-utils';
+import { tableProps, tableEmits } from '../props-define';
 import { ComputedRef, Ref } from 'vue';
 import { PageContent } from '../../../../../hooks/pagination/types';
+import { useTableRequest } from './use-table-request';
+import { PaginationPropsType } from '../../../../pagination';
 export interface TablePaginationInjectData {
     propsData: ComputedRef<PageContent>;
     paginationModelValue: Ref<PageContent>;
+    paginationProps: ComputedRef<PaginationPropsType>;
+    onPaginationChange: (content: PageContent) => void;
 }
 export declare const useTablePagination: (options: {
     tableProps: VueProps<typeof tableProps>;
+    tableEmit: VueEmit<typeof tableEmits>;
+    tableRequestResult: ReturnType<typeof useTableRequest>;
 }) => {
     tablePaginationVisible: ComputedRef<boolean>;
 };

package/vue3/src/components/table/src/hooks/use-table/use-table-render-data.d.ts

@@ -1,6 +1,7 @@
 import { VueProps } from '../../../../../vue-utils';
 import { tableProps } from '../props-define';
 import { ComputedRef } from 'vue';
+import { useTableRequest } from './use-table-request';
 export interface TableRenderDataInject {
     /** 表格渲染的数据 */
     renderData: ComputedRef<any[]>;
@@ -9,6 +10,7 @@ export interface TableRenderDataInject {
 }
 export declare const useTableRenderData: (options: {
     tableProps: VueProps<typeof tableProps>;
+    tableRequestResult: ReturnType<typeof useTableRequest>;
 }) => {
     renderData: ComputedRef<any[]>;
 };

package/vue3/src/components/table/src/hooks/use-table/use-table-request.d.ts

@@ -0,0 +1,32 @@
+import { VueProps } from '../../../../../vue-utils';
+import { tableProps } from '../props-define';
+import { PageContent } from '../../../../../hooks/pagination/types';
+import { TableSortData, TableSortOrder } from '../../types';
+export interface TableRequestParams {
+    /** 页码 */
+    pageNumber?: number;
+    /** 每页大小 */
+    pageSize?: number;
+    /** 排序字段名 */
+    sortName?: string;
+    /** 排序顺序 */
+    sortOrder?: TableSortOrder;
+}
+export type TableRequestFunction = (params: TableRequestParams) => Promise<PageContent<any> | any[]>;
+export declare const useTableRequest: (options: {
+    tableProps: VueProps<typeof tableProps>;
+}) => {
+    requestResult: import('vue').Ref<any[] | PageContent<any> | undefined>;
+    changeRequestPage: (content: {
+        pageNumber: number;
+        pageSize: number;
+    }) => Promise<void>;
+    getRequestSort: () => TableSortData | undefined;
+    isRequesting: import('vue').Ref<boolean>;
+    requestTableData: () => Promise<void>;
+    initRequestData: () => void;
+};
+export declare const useTableRequestInject: () => {
+    callbackSearch: () => void;
+    callbackSort: (sort: TableSortData | undefined) => void;
+} | undefined;

package/vue3/src/components/table/src/hooks/use-table/use-table-scroll.d.ts

@@ -20,7 +20,7 @@ export interface TableScrollInjectData {
 }
 /** 处理表格滚动 */
 export declare const useTableScroll: (options: TableElementInstance & {
-    allColumnWidth: ComputedRef<number>;
+    allRenderColumnWidth: ComputedRef<number>;
 }) => {
     hasHorizontalScroll: ComputedRef<boolean>;
     hasVerticalScroll: ComputedRef<boolean>;

package/vue3/src/components/table/src/hooks/use-table/use-table-slots.d.ts

@@ -0,0 +1,5 @@
+import { InjectionKey } from 'vue';
+import { TableSlots } from '../props-define';
+import { UseRenderSlotsReturn } from '../../../../../hooks/vue/use-render-slots';
+export declare const TABLE_SLOTS_INJECT_KEY: InjectionKey<UseRenderSlotsReturn<TableSlots>>;
+export declare const useTableSlots: () => UseRenderSlotsReturn<TableSlots>;

package/vue3/src/components/table/src/hooks/use-table/use-table-status.d.ts

@@ -2,6 +2,7 @@ import { Ref, ComputedRef } from 'vue';
 import { TableIndexData, TableSortOrder } from '../../types';
 import { tableProps } from '../props-define';
 import { VueProps } from '../../../../../vue-utils';
+import { useTableRequest } from './use-table-request';
 export interface TableStatusInjectData {
     /**
      * 悬停状态
@@ -18,6 +19,7 @@ export interface TableStatusInjectData {
 }
 export declare const useTableStatus: (options: {
     tableProps: VueProps<typeof tableProps>;
+    tableRequestResult: ReturnType<typeof useTableRequest>;
 }) => {
     hoverStatus: Ref<{
         rowIndex: number;

package/vue3/src/components/table/src/hooks/use-table/use-table-toolbar.d.ts

@@ -0,0 +1,17 @@
+import { VueProps } from '../../../../../vue-utils';
+import { tableProps } from '../props-define';
+import { ComputedRef, InjectionKey, VNode } from 'vue';
+export declare const TABLE_TOOLBAR_INJECT_KEY: InjectionKey<{
+    hasToolbarLeft: ComputedRef<boolean>;
+    toolbarLeftSlotFunc: () => VNode[] | undefined;
+    hasToolbarRight: ComputedRef<boolean>;
+    toolbarRightSlotFunc: () => VNode[] | undefined;
+    hasToolbar: ComputedRef<boolean>;
+}>;
+export declare const useTableToolbar: (options: {
+    tableProps: VueProps<typeof tableProps>;
+}) => {
+    hasToolbarLeft: ComputedRef<boolean>;
+    hasToolbarRight: ComputedRef<boolean>;
+    hasToolbar: ComputedRef<boolean>;
+};