feat: add table from demo

docs/src/components/common-ui/vben-form.md

@@ -267,6 +267,7 @@ useVbenForm 返回的第二个参数，是一个对象，包含了一些表单
 | submitButtonOptions | 提交按钮组件参数 | `ActionButtonOptions` | - |
 | showDefaultActions | 是否显示默认操作按钮 | `boolean` | `true` |
 | collapsed | 是否折叠，在`是否展开，在showCollapseButton=true`时生效 | `boolean` | `false` |
+| collapseTriggerResize | 折叠时，触发`resize`事件 | `boolean` | `false` |
 | collapsedRows | 折叠时保持的行数 | `number` | `1` |
 | commonConfig | 表单项的通用配置，每个配置都会传递到每个表单项，表单项可覆盖 | `FormCommonConfig` | - |
 | schema | 表单项的每一项配置 | `FormSchema` | - |

packages/@core/ui-kit/form-ui/src/components/form-actions.vue

@@ -1,9 +1,9 @@
 <script setup lang="ts">
-import { computed, toRaw, unref } from 'vue';
+import { computed, toRaw, unref, watch } from 'vue';
 
 import { useSimpleLocale } from '@vben-core/composables';
 import { VbenExpandableArrow } from '@vben-core/shadcn-ui';
-import { cn, isFunction } from '@vben-core/shared/utils';
+import { cn, isFunction, triggerWindowResize } from '@vben-core/shared/utils';
 
 import { COMPONENT_MAP } from '../config';
 import { injectFormProps } from '../use-form-context';
@@ -65,6 +65,16 @@ async function handleReset(e: Event) {
     form.resetForm();
   }
 }
+
+watch(
+  () => collapsed.value,
+  () => {
+    const props = unref(rootProps);
+    if (props.collapseTriggerResize) {
+      triggerWindowResize();
+    }
+  },
+);
 </script>
 <template>
   <div

packages/@core/ui-kit/form-ui/src/form-api.ts

@@ -24,6 +24,7 @@ function getDefaultState(): VbenFormProps {
     actionWrapperClass: '',
     collapsed: false,
     collapsedRows: 1,
+    collapseTriggerResize: false,
     commonConfig: {},
     handleReset: undefined,
     handleSubmit: undefined,

packages/@core/ui-kit/form-ui/src/types.ts

@@ -244,6 +244,11 @@ export interface FormRenderProps<
    * @default 1
    */
   collapsedRows?: number;
+  /**
+   * 是否触发resize事件
+   * @default false
+   */
+  collapseTriggerResize?: boolean;
   /**
    * 表单项通用后备配置，当子项目没配置时使用这里的配置，子项目配置优先级高于此配置
    */

packages/effects/plugins/package.json

@@ -24,10 +24,12 @@
     }
   },
   "dependencies": {
+    "@vben-core/form-ui": "workspace:*",
     "@vben-core/shadcn-ui": "workspace:*",
     "@vben-core/shared": "workspace:*",
     "@vben/hooks": "workspace:*",
     "@vben/icons": "workspace:*",
+    "@vben/locales": "workspace:*",
     "@vben/preferences": "workspace:*",
     "@vben/types": "workspace:*",
     "@vben/utils": "workspace:*",

packages/effects/plugins/postcss.config.mjs

@@ -0,0 +1 @@
+export { default } from '@vben/tailwind-config/postcss';

packages/effects/plugins/src/vxe-table/api.ts

@@ -23,6 +23,7 @@ function getDefaultState(): VxeGridProps {
       total: 0,
     },
     gridEvents: {},
+    formOptions: undefined,
   };
 }
 

packages/effects/plugins/src/vxe-table/init.ts

@@ -3,6 +3,7 @@ import type { SetupVxeTable } from './types';
 import { defineComponent, watch } from 'vue';
 
 import { usePreferences } from '@vben/preferences';
+import { useVbenForm } from '@vben-core/form-ui';
 
 import {
   VxeButton,
@@ -29,6 +30,7 @@ import {
   // VxeTextarea,
 } from 'vxe-pc-ui';
 import enUS from 'vxe-pc-ui/lib/language/en-US';
+
 // 导入默认的语言
 import zhCN from 'vxe-pc-ui/lib/language/zh-CN';
 import {
@@ -42,6 +44,9 @@ import {
 // 是否加载过
 let isInit = false;
 
+// eslint-disable-next-line import/no-mutable-exports
+export let useTableForm: typeof useVbenForm;
+
 // 部分组件，如果没注册，vxe-table 会报错，这里实际没用组件，只是为了不报错，同时可以减少打包体积
 const createVirtualComponent = (name = '') => {
   return defineComponent({
@@ -89,8 +94,10 @@ export function initVxeTable() {
 }
 
 export function setupVbenVxeTable(setupOptions: SetupVxeTable) {
+  const { configVxeTable, useVbenForm } = setupOptions;
+
   initVxeTable();
-  const { configVxeTable } = setupOptions;
+  useTableForm = useVbenForm;
 
   const preference = usePreferences();
 

packages/effects/plugins/src/vxe-table/types.ts

@@ -1,4 +1,5 @@
 import type { DeepPartial } from '@vben/types';
+import type { VbenFormProps } from '@vben-core/form-ui';
 import type { VbenPaginationProps } from '@vben-core/shadcn-ui';
 import type {
   VxeGridListeners,
@@ -10,6 +11,8 @@ import type { VxeGridApi } from './api';
 
 import type { Ref } from 'vue';
 
+import { useVbenForm } from '@vben-core/form-ui';
+
 export interface VxePaginationInfo {
   currentPage: number;
   pageSize: number;
@@ -30,6 +33,10 @@ export interface VxeGridProps {
    */
   gridOptions?: DeepPartial<VxeTableGridProps>;
   gridEvents?: DeepPartial<VxeGridListeners>;
+  /**
+   * 表单配置
+   */
+  formOptions?: VbenFormProps;
   /**
    * 分页样式
    */
@@ -52,4 +59,5 @@ export type ExtendedVxeGridApi = {
 
 export interface SetupVxeTable {
   configVxeTable: (ui: VxeUIExport) => void;
+  useVbenForm: typeof useVbenForm;
 }

packages/effects/plugins/src/vxe-table/use-vxe-grid.vue

@@ -1,4 +1,5 @@
 <script lang="ts" setup>
+import type { VbenFormProps } from '@vben-core/form-ui';
 import type {
   VxeGridInstance,
   VxeGridProps as VxeTableGridProps,
@@ -10,6 +11,7 @@ import { computed, onMounted, toRaw, useSlots, useTemplateRef } from 'vue';
 
 import { usePriorityValues } from '@vben/hooks';
 import { EmptyIcon } from '@vben/icons';
+import { $t } from '@vben/locales';
 import {
   cn,
   getNestedValue,
@@ -20,6 +22,8 @@ import { VbenLoading, VbenPagination } from '@vben-core/shadcn-ui';
 
 import { VxeGrid, VxeUI } from 'vxe-table';
 
+import { useTableForm } from './init';
+
 import 'vxe-table/styles/cssvar.scss';
 import 'vxe-pc-ui/styles/cssvar.scss';
 import './theme.css';
@@ -42,10 +46,13 @@ const {
   gridClass,
   paginationInfo,
   gridEvents,
+  formOptions,
 } = usePriorityValues(props, state);
 
 const slots = useSlots();
 
+const [Form, formApi] = useTableForm({});
+
 const showToolbar = computed(() => {
   return !!slots['toolbar-actions']?.() || !!slots['toolbar-tools']?.();
 });
@@ -79,6 +86,9 @@ const options = computed(() => {
     mergedOptions.proxyConfig.enabled = !!ajax;
   }
 
+  if (!showToolbar.value && mergedOptions.toolbarConfig) {
+    mergedOptions.toolbarConfig.enabled = false;
+  }
   return mergedOptions;
 });
 
@@ -88,11 +98,51 @@ const events = computed(() => {
   };
 });
 
+const vbenFormOptions = computed(() => {
+  const defaultFormProps: VbenFormProps = {
+    handleSubmit: async () => {
+      props.api.reload(1);
+    },
+    handleReset: async () => {
+      formApi.resetForm();
+      props.api.reload(1);
+    },
+    collapseTriggerResize: true,
+    // 所有表单项共用，可单独在表单内覆盖
+    commonConfig: {
+      // 所有表单项
+      componentProps: {
+        class: 'w-full',
+      },
+    },
+    showCollapseButton: true,
+    submitButtonOptions: {
+      text: $t('common.query'),
+    },
+    // 大屏一行显示3个，中屏一行显示2个，小屏一行显示1个
+    wrapperClass: 'grid-cols-1 md:grid-cols-2 lg:grid-cols-3',
+  };
+  return {
+    ...mergeWithArrayOverride({}, formOptions.value, defaultFormProps),
+  };
+});
+
 const delegatedSlots = computed(() => {
   const resultSlots: string[] = [];
 
   for (const key of Object.keys(slots)) {
-    if (!['empty', 'loading', 'pager'].includes(key)) {
+    if (!['empty', 'form', 'loading', 'pager'].includes(key)) {
+      resultSlots.push(key);
+    }
+  }
+  return resultSlots;
+});
+
+const delegatedFormSlots = computed(() => {
+  const resultSlots: string[] = [];
+
+  for (const key of Object.keys(slots)) {
+    if (key.startsWith('form-')) {
       resultSlots.push(key);
     }
   }
@@ -126,9 +176,11 @@ function extendProxyOptions(options: VxeTableGridProps) {
   // const responseResult = mergeOptions.proxyConfig.response?.result ?? 'result';
 
   const wrapperQuery = async (params: any, ...args: any[]) => {
+    const formValues = await formApi.getValues();
     const data = await configQuery(
       {
         ...params,
+        form: formValues,
         page: props.api.getPaginationInfo(),
       },
       ...args,
@@ -171,14 +223,14 @@ onMounted(() => {
 </script>
 
 <template>
-  <div :class="cn('bg-card h-full rounded-sm', className)">
+  <div :class="cn('bg-card h-full rounded-md', className)">
     <VxeGrid
       ref="gridRef"
       :class="
         cn(
           'p-2',
           {
-            'pt-0': showToolbar,
+            'pt-0': showToolbar && !formOptions,
           },
           gridClass,
         )
@@ -193,6 +245,24 @@ onMounted(() => {
       >
         <slot :name="slotName" v-bind="slotProps"></slot>
       </template>
+      <template #form>
+        <div v-if="formOptions" class="relative rounded py-3 pb-6">
+          <slot name="form">
+            <Form v-bind="vbenFormOptions">
+              <template
+                v-for="slotName in delegatedFormSlots"
+                :key="slotName"
+                #[slotName]="slotProps"
+              >
+                <slot :name="slotName" v-bind="slotProps"></slot>
+              </template>
+            </Form>
+          </slot>
+          <div
+            class="bg-background-deep z-100 absolute -left-2 bottom-2 h-4 w-[calc(100%+1rem)] overflow-hidden"
+          ></div>
+        </div>
+      </template>
       <template #loading>
         <slot name="loading">
           <VbenLoading :spinning="true" />
@@ -201,7 +271,7 @@ onMounted(() => {
       <template #empty>
         <slot name="empty">
           <EmptyIcon class="mx-auto" />
-          <div class="mt-2">暂无数据</div>
+          <div class="mt-2">{{ $t('common.noData') }}</div>
         </slot>
       </template>
       <template v-if="options.pagerConfig" #pager>

packages/effects/plugins/tailwind.config.mjs

@@ -0,0 +1 @@
+export { default } from '@vben/tailwind-config';

packages/locales/src/langs/en-US.json

@@ -31,7 +31,8 @@
     "confirm": "Comfirm",
     "noData": "No Data",
     "refresh": "Refresh",
-    "loadingMenu": "Loading Menu"
+    "loadingMenu": "Loading Menu",
+    "query": "Search"
   },
   "fallback": {
     "pageNotFound": "Oops! Page Not Found",

packages/locales/src/langs/zh-CN.json

@@ -31,7 +31,8 @@
     "confirm": "确认",
     "noData": "暂无数据",
     "refresh": "刷新",
-    "loadingMenu": "加载菜单中"
+    "loadingMenu": "加载菜单中",
+    "query": "查询"
   },
   "fallback": {
     "pageNotFound": "哎呀！未找到页面",

playground/src/adapter/vxe-table.ts

@@ -4,6 +4,8 @@ import { setupVbenVxeTable, useVbenVxeGrid } from '@vben/plugins/vxe-table';
 
 import { Button, Image } from 'ant-design-vue';
 
+import { useVbenForm } from './form';
+
 setupVbenVxeTable({
   configVxeTable: (vxeUI) => {
     vxeUI.setConfig({
@@ -49,6 +51,7 @@ setupVbenVxeTable({
     // 这里可以自行扩展 vxe-table 的全局配置，比如自定义格式化
     // vxeUI.formats.add
   },
+  useVbenForm,
 });
 
 export { useVbenVxeGrid };