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

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:",

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';

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": {

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

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;
+}

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,
     ),
   );
 

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>

pnpm-workspace.yaml

@@ -22,7 +22,7 @@ catalog:
   '@ctrl/tinycolor': ^4.1.0
   '@eslint/js': ^9.13.0
   '@faker-js/faker': ^9.1.0
-  '@iconify/json': ^2.2.264
+  '@iconify/json': ^2.2.265
   '@iconify/tailwind': ^1.1.3
   '@iconify/vue': ^4.1.2
   '@intlify/core-base': ^10.0.4
@@ -42,13 +42,13 @@ catalog:
   '@types/html-minifier-terser': ^7.0.2
   '@types/jsonwebtoken': ^9.0.7
   '@types/lodash.clonedeep': ^4.5.9
-  '@types/node': ^22.8.1
+  '@types/node': ^22.8.2
   '@types/nprogress': ^0.2.3
   '@types/postcss-import': ^14.0.3
   '@types/qrcode': ^1.5.5
   '@types/sortablejs': ^1.15.8
-  '@typescript-eslint/eslint-plugin': ^8.11.0
-  '@typescript-eslint/parser': ^8.11.0
+  '@typescript-eslint/eslint-plugin': ^8.12.2
+  '@typescript-eslint/parser': ^8.12.2
   '@vee-validate/zod': ^4.14.6
   '@vite-pwa/vitepress': ^0.5.3
   '@vitejs/plugin-vue': ^5.1.4
@@ -97,8 +97,8 @@ catalog:
   eslint-plugin-unicorn: ^56.0.0
   eslint-plugin-unused-imports: ^4.1.4
   eslint-plugin-vitest: ^0.5.4
-  eslint-plugin-vue: ^9.29.1
-  execa: ^9.5.0
+  eslint-plugin-vue: ^9.30.0
+  execa: ^9.5.1
   find-up: ^7.0.0
   get-port: ^7.1.0
   globals: ^15.11.0
@@ -111,10 +111,9 @@ catalog:
   jsonwebtoken: ^9.0.2
   lint-staged: ^15.2.10
   lodash.clonedeep: ^4.5.0
-  lucide-vue-next: ^0.453.0
+  lucide-vue-next: ^0.454.0
   medium-zoom: ^1.1.0
   naive-ui: ^2.40.1
-  nanoid: ^5.0.7
   nitropack: ^2.9.7
   nprogress: ^0.2.0
   ora: ^8.1.0
@@ -132,10 +131,10 @@ catalog:
   prettier-plugin-tailwindcss: ^0.6.8
   publint: ^0.2.12
   qrcode: ^1.5.4
-  radix-vue: ^1.9.7
+  radix-vue: ^1.9.8
   resolve.exports: ^2.0.2
   rimraf: ^6.0.1
-  rollup: ^4.24.1
+  rollup: ^4.24.2
   rollup-plugin-visualizer: ^5.12.0
   sass: 1.79.5
   sortablejs: ^1.15.3
@@ -167,7 +166,7 @@ catalog:
   vite-plugin-vue-devtools: ^7.5.4
   vitepress: ^1.4.1
   vitepress-plugin-group-icons: ^1.3.0
-  vitest: ^2.1.3
+  vitest: ^2.1.4
   vue: ^3.5.12
   vue-eslint-parser: ^9.4.3
   vue-i18n: ^10.0.4