From 6688a6b3c2d9a067ef6f50ffb7ddaa5a8f03da9d Mon Sep 17 00:00:00 2001 From: Vben Date: Thu, 24 Oct 2024 22:51:04 +0800 Subject: [PATCH] feat: table grid supports setting title and helpMessage (#4732) --- apps/web-antd/src/adapter/vxe-table.ts | 6 +- apps/web-ele/src/adapter/vxe-table.ts | 6 +- apps/web-naive/src/adapter/vxe-table.ts | 6 +- internal/node-utils/package.json | 3 - .../ui-kit/popup-ui/src/modal/modal-api.ts | 2 +- .../@core/ui-kit/popup-ui/src/modal/modal.vue | 8 +- .../effects/plugins/src/vxe-table/theme.css | 1 + .../effects/plugins/src/vxe-table/types.ts | 8 + .../plugins/src/vxe-table/use-vxe-grid.vue | 71 +- playground/src/adapter/vxe-table.ts | 6 +- .../src/views/examples/vxe-table/basic.vue | 6 +- .../src/views/examples/vxe-table/remote.vue | 2 +- .../src/views/examples/vxe-table/tree.vue | 2 +- pnpm-lock.yaml | 898 ++++++++++-------- pnpm-workspace.yaml | 25 +- 15 files changed, 611 insertions(+), 439 deletions(-) diff --git a/apps/web-antd/src/adapter/vxe-table.ts b/apps/web-antd/src/adapter/vxe-table.ts index 969ec750d..e47f89383 100644 --- a/apps/web-antd/src/adapter/vxe-table.ts +++ b/apps/web-antd/src/adapter/vxe-table.ts @@ -11,7 +11,10 @@ setupVbenVxeTable({ vxeUI.setConfig({ grid: { align: 'center', - border: true, + border: false, + columnConfig: { + resizable: true, + }, minHeight: 180, proxyConfig: { autoLoad: true, @@ -24,6 +27,7 @@ setupVbenVxeTable({ showResponseMsg: false, }, round: true, + showOverflow: true, size: 'small', }, }); diff --git a/apps/web-ele/src/adapter/vxe-table.ts b/apps/web-ele/src/adapter/vxe-table.ts index 177408c49..fa1f38930 100644 --- a/apps/web-ele/src/adapter/vxe-table.ts +++ b/apps/web-ele/src/adapter/vxe-table.ts @@ -11,7 +11,10 @@ setupVbenVxeTable({ vxeUI.setConfig({ grid: { align: 'center', - border: true, + border: false, + columnConfig: { + resizable: true, + }, minHeight: 180, proxyConfig: { autoLoad: true, @@ -24,6 +27,7 @@ setupVbenVxeTable({ showResponseMsg: false, }, round: true, + showOverflow: true, size: 'small', }, }); diff --git a/apps/web-naive/src/adapter/vxe-table.ts b/apps/web-naive/src/adapter/vxe-table.ts index 23c74d717..8c521da8d 100644 --- a/apps/web-naive/src/adapter/vxe-table.ts +++ b/apps/web-naive/src/adapter/vxe-table.ts @@ -11,7 +11,10 @@ setupVbenVxeTable({ vxeUI.setConfig({ grid: { align: 'center', - border: true, + border: false, + columnConfig: { + resizable: true, + }, minHeight: 180, proxyConfig: { autoLoad: true, @@ -24,6 +27,7 @@ setupVbenVxeTable({ showResponseMsg: false, }, round: true, + showOverflow: true, size: 'small', }, }); diff --git a/internal/node-utils/package.json b/internal/node-utils/package.json index 4903efb7d..c89343f3f 100644 --- a/internal/node-utils/package.json +++ b/internal/node-utils/package.json @@ -40,8 +40,5 @@ "pkg-types": "catalog:", "prettier": "catalog:", "rimraf": "catalog:" - }, - "devDependencies": { - "@types/chalk": "catalog:" } } diff --git a/packages/@core/ui-kit/popup-ui/src/modal/modal-api.ts b/packages/@core/ui-kit/popup-ui/src/modal/modal-api.ts index 103316606..932271d8c 100644 --- a/packages/@core/ui-kit/popup-ui/src/modal/modal-api.ts +++ b/packages/@core/ui-kit/popup-ui/src/modal/modal-api.ts @@ -29,7 +29,7 @@ export class ModalApi { } = options; const defaultState: ModalState = { - bordered: false, + bordered: true, centered: false, class: '', closeOnClickModal: true, diff --git a/packages/@core/ui-kit/popup-ui/src/modal/modal.vue b/packages/@core/ui-kit/popup-ui/src/modal/modal.vue index 33e489e2e..8915dd3d9 100644 --- a/packages/@core/ui-kit/popup-ui/src/modal/modal.vue +++ b/packages/@core/ui-kit/popup-ui/src/modal/modal.vue @@ -258,7 +258,13 @@ function handleFocusOutside(e: Event) { v-if="showFooter" ref="footerRef" :class=" - cn('flex-row items-center justify-end border-t p-2', footerClass) + cn( + 'flex-row items-center justify-end p-2', + { + 'border-t': bordered, + }, + footerClass, + ) " > diff --git a/packages/effects/plugins/src/vxe-table/theme.css b/packages/effects/plugins/src/vxe-table/theme.css index bfb930f6f..d49b670d3 100644 --- a/packages/effects/plugins/src/vxe-table/theme.css +++ b/packages/effects/plugins/src/vxe-table/theme.css @@ -8,6 +8,7 @@ /* base */ --vxe-ui-base-popup-border-color: hsl(var(--border)); + --vxe-ui-input-disabled-color: hsl(var(--border) / 60%); /* --vxe-ui-base-popup-box-shadow: 0px 12px 30px 8px rgb(0 0 0 / 50%); */ diff --git a/packages/effects/plugins/src/vxe-table/types.ts b/packages/effects/plugins/src/vxe-table/types.ts index db151e7c9..8c1132d3d 100644 --- a/packages/effects/plugins/src/vxe-table/types.ts +++ b/packages/effects/plugins/src/vxe-table/types.ts @@ -19,6 +19,14 @@ export interface VxePaginationInfo { } export interface VxeGridProps { + /** + * 标题 + */ + tableTitle?: string; + /** + * 标题帮助 + */ + tableTitleHelp?: string; /** * 组件class */ diff --git a/packages/effects/plugins/src/vxe-table/use-vxe-grid.vue b/packages/effects/plugins/src/vxe-table/use-vxe-grid.vue index 323c483c6..7fab3b335 100644 --- a/packages/effects/plugins/src/vxe-table/use-vxe-grid.vue +++ b/packages/effects/plugins/src/vxe-table/use-vxe-grid.vue @@ -22,7 +22,7 @@ import { EmptyIcon } from '@vben/icons'; import { $t } from '@vben/locales'; import { usePreferences } from '@vben/preferences'; import { cloneDeep, cn, mergeWithArrayOverride } from '@vben/utils'; -import { VbenLoading } from '@vben-core/shadcn-ui'; +import { VbenHelpTooltip, VbenLoading } from '@vben-core/shadcn-ui'; import { VxeGrid, VxeUI } from 'vxe-table'; @@ -51,6 +51,8 @@ const { gridClass, gridEvents, formOptions, + tableTitle, + tableTitleHelp, } = usePriorityValues(props, state); const { isMobile } = usePreferences(); @@ -79,31 +81,45 @@ const [Form, formApi] = useTableForm({ wrapperClass: 'grid-cols-1 md:grid-cols-2 lg:grid-cols-3', }); +const showTableTitle = computed(() => { + return !!slots.tableTitle?.() || tableTitle.value; +}); + const showToolbar = computed(() => { - return !!slots['toolbar-actions']?.() || !!slots['toolbar-tools']?.(); + return ( + !!slots['toolbar-actions']?.() || + !!slots['toolbar-tools']?.() || + showTableTitle.value + ); +}); + +const toolbarOptions = computed(() => { + const slotActions = slots['toolbar-actions']?.(); + const slotTools = slots['toolbar-tools']?.(); + if (!showToolbar.value) { + return {}; + } + // 强制使用固定的toolbar配置，不允许用户自定义 + // 减少配置的复杂度，以及后续维护的成本 + return { + toolbarConfig: { + slots: { + ...(slotActions || showTableTitle.value + ? { buttons: 'toolbar-actions' } + : {}), + ...(slotTools ? { tools: 'toolbar-tools' } : {}), + }, + }, + }; }); const options = computed(() => { - const slotActions = slots['toolbar-actions']?.(); - const slotTools = slots['toolbar-tools']?.(); - const globalGridConfig = VxeUI?.getConfig()?.grid ?? {}; - const forceUseToolbarOptions = showToolbar.value - ? { - toolbarConfig: { - slots: { - ...(slotActions ? { buttons: 'toolbar-actions' } : {}), - ...(slotTools ? { tools: 'toolbar-tools' } : {}), - }, - }, - } - : {}; - const mergedOptions: VxeTableGridProps = cloneDeep( mergeWithArrayOverride( {}, - forceUseToolbarOptions, + toolbarOptions.value, toRaw(gridOptions.value), globalGridConfig, ), @@ -164,7 +180,7 @@ const delegatedSlots = computed(() => { const resultSlots: string[] = []; for (const key of Object.keys(slots)) { - if (!['empty', 'form', 'loading'].includes(key)) { + if (!['empty', 'form', 'loading', 'toolbar-actions'].includes(key)) { resultSlots.push(key); } } @@ -209,6 +225,7 @@ async function init() { extendProxyOptions(props.api, defaultGridOptions, () => formApi.form.values); } +// formOptions支持响应式 watch( formOptions, () => { @@ -251,6 +268,20 @@ onMounted(() => { v-bind="options" v-on="events" > + + + + + + + +