chore: add vxe-table toolbar example (#4765)

vbenjs · Oct 29, 2024 · e600d78 · e600d78
1 parent d23db32
commit e600d78
Show file tree

Hide file tree

Showing 9 changed files with 548 additions and 430 deletions.
diff --git a/internal/node-utils/package.json b/internal/node-utils/package.json
@@ -35,7 +35,6 @@
     "dayjs": "catalog:",
     "execa": "catalog:",
     "find-up": "catalog:",
-    "nanoid": "catalog:",
     "ora": "catalog:",
     "pkg-types": "catalog:",
     "prettier": "catalog:",

diff --git a/internal/node-utils/src/index.ts b/internal/node-utils/src/index.ts
@@ -13,8 +13,6 @@ export { default as colors } from 'chalk';
 export { consola } from 'consola';
 export * from 'execa';
 
-export { nanoid } from 'nanoid';
-
 export { default as fs } from 'node:fs/promises';
 
 export { type PackageJson, readPackageJSON } from 'pkg-types';

diff --git a/package.json b/package.json
@@ -99,7 +99,7 @@
     "node": ">=20.10.0",
     "pnpm": ">=9.5.0"
   },
-  "packageManager": "pnpm@9.12.2",
+  "packageManager": "pnpm@9.12.3",
   "pnpm": {
     "peerDependencyRules": {
       "allowedVersions": {

diff --git a/packages/effects/plugins/src/vxe-table/init.ts b/packages/effects/plugins/src/vxe-table/init.ts
@@ -7,13 +7,15 @@ import { useVbenForm } from '@vben-core/form-ui';
 
 import {
   VxeButton,
-  VxeButtonGroup,
+  VxeCheckbox,
+
   // VxeFormGather,
   // VxeForm,
   // VxeFormItem,
   VxeIcon,
   VxeInput,
   VxeLoading,
+  VxeModal,
   VxePager,
   // VxeList,
   // VxeModal,
@@ -22,7 +24,7 @@ import {
   // VxePulldown,
   // VxeRadio,
   // VxeRadioButton,
-  // VxeRadioGroup,
+  VxeRadioGroup,
   VxeSelect,
   VxeTooltip,
   VxeUI,
@@ -64,13 +66,12 @@ export function initVxeTable() {
   VxeUI.component(VxeTable);
   VxeUI.component(VxeColumn);
   VxeUI.component(VxeColgroup);
-  VxeUI.component(VxeLoading);
   VxeUI.component(VxeGrid);
   VxeUI.component(VxeToolbar);
 
   VxeUI.component(VxeButton);
-  VxeUI.component(VxeButtonGroup);
-  // VxeUI.component(VxeCheckbox);
+  // VxeUI.component(VxeButtonGroup);
+  VxeUI.component(VxeCheckbox);
   // VxeUI.component(VxeCheckboxGroup);
   VxeUI.component(createVirtualComponent('VxeForm'));
   // VxeUI.component(VxeFormGather);
@@ -79,14 +80,14 @@ export function initVxeTable() {
   VxeUI.component(VxeInput);
   // VxeUI.component(VxeList);
   VxeUI.component(VxeLoading);
-  // VxeUI.component(VxeModal);
+  VxeUI.component(VxeModal);
   // VxeUI.component(VxeOptgroup);
   // VxeUI.component(VxeOption);
   VxeUI.component(VxePager);
   // VxeUI.component(VxePulldown);
   // VxeUI.component(VxeRadio);
   // VxeUI.component(VxeRadioButton);
-  // VxeUI.component(VxeRadioGroup);
+  VxeUI.component(VxeRadioGroup);
   VxeUI.component(VxeSelect);
   // VxeUI.component(VxeSwitch);
   // VxeUI.component(VxeTextarea);

diff --git a/packages/effects/plugins/src/vxe-table/theme.css b/packages/effects/plugins/src/vxe-table/theme.css
@@ -81,3 +81,11 @@
 .vxe-pager--wrapper {
   @apply justify-center md:justify-end;
 }
+
+.vxe-tools--operate {
+  @apply ml-3;
+}
+
+.vxe-table-custom--checkbox-option:hover {
+  background: none !important;
+}
diff --git a/packages/effects/plugins/src/vxe-table/use-vxe-grid.vue b/packages/effects/plugins/src/vxe-table/use-vxe-grid.vue
@@ -122,6 +122,11 @@ const options = computed(() => {
       toolbarOptions.value,
       toRaw(gridOptions.value),
       globalGridConfig,
+      {
+        // toolbarConfig: {
+        //   tools: [],
+        // },
+      } as VxeTableGridProps,
     ),
   );
 

diff --git a/playground/src/views/examples/vxe-table/remote.vue b/playground/src/views/examples/vxe-table/remote.vue
@@ -33,7 +33,6 @@ const gridOptions: VxeGridProps<RowType> = {
   ],
   height: 'auto',
   keepSource: true,
-  pagerConfig: {},
   proxyConfig: {
     ajax: {
       query: async ({ page }) => {
@@ -44,9 +43,18 @@ const gridOptions: VxeGridProps<RowType> = {
       },
     },
   },
+  toolbarConfig: {
+    custom: true,
+    // export: true,
+    // import: true,
+    refresh: true,
+    zoom: true,
+  },
 };
 
-const [Grid, gridApi] = useVbenVxeGrid({ gridOptions });
+const [Grid, gridApi] = useVbenVxeGrid({
+  gridOptions,
+});
 </script>
 
 <template>