chore: modal/drawer demo

1 year ago · 257dda6b0a
parent 54940dfec5
commit 257dda6b0a
4 changed files with 105 additions and 52 deletions
--- a/apps/web-antd/src/views/system/user/drawer.vue
+++ b/apps/web-antd/src/views/system/user/drawer.vue
@ -0,0 +1,28 @@
+<script setup lang="ts">
+import { useVbenDrawer } from '@vben/common-ui';
+
+import { message } from 'ant-design-vue';
+
+const [BasicDrawer, drawerApi] = useVbenDrawer({
+  onCancel() {
+    drawerApi.close();
+  },
+  onConfirm() {
+    message.info('点击了确认');
+  },
+});
+</script>
+
+<template>
+  <BasicDrawer
+    class="w-[600px]"
+    title="基础弹窗示例"
+    title-tooltip="标题提示内容"
+  >
+    <div
+      class="flex h-40 cursor-pointer items-center justify-center rounded-lg bg-pink-500 font-bold text-white transition-all hover:bg-blue-600 hover:text-[20px]"
+    >
+      this is Drawer content
+    </div>
+  </BasicDrawer>
+</template>
--- a/apps/web-antd/src/views/system/user/index.vue
+++ b/apps/web-antd/src/views/system/user/index.vue
@ -1,6 +1,8 @@
 <script setup lang="ts">
 import { onBeforeUnmount, onMounted, ref } from 'vue';

+import { useVbenDrawer, useVbenModal } from '@vben/common-ui';
+
 import {
  Tag as ATag,
  Button,
@ -8,11 +10,14 @@ import {
  RadioButton,
  RadioGroup,
  Select,
+  Space,
 } from 'ant-design-vue';

 import { DictTag } from '#/components/Dict';
 import { getDict, getDictOptions } from '#/utils/dict';

+import DrawerDemo from './drawer.vue';
+import ModalDemo from './modal.vue';
 import TableTest from './table';

 const count = ref(0);
@ -30,6 +35,14 @@ const sexOptions = getDictOptions('sys_user_sex');
 const disabledDict = getDict('sys_normal_disable');
 const select = ref('pc');
 const deviceOptions = getDictOptions('sys_device_type');
+
+const [TestNodal, modalApi] = useVbenModal({
+  connectedComponent: ModalDemo,
+});
+
+const [TestDrawer, drawerApi] = useVbenDrawer({
+  connectedComponent: DrawerDemo,
+});
 </script>

 <template>
@ -84,5 +97,13 @@ const deviceOptions = getDictOptions('sys_device_type');
    <Card title="table测试">
      <TableTest />
    </Card>
+    <Card title="Modal/Drawer测试">
+      <Space>
+        <a-button @click="() => modalApi.open()">打开Modal</a-button>
+        <a-button @click="() => drawerApi.open()">打开Drawer</a-button>
+      </Space>
+      <TestNodal />
+      <TestDrawer />
+    </Card>
  </div>
 </template>
--- a/apps/web-antd/src/views/system/user/modal.vue
+++ b/apps/web-antd/src/views/system/user/modal.vue
@ -0,0 +1,24 @@
+<script setup lang="ts">
+import { useVbenModal } from '@vben/common-ui';
+
+import { message } from 'ant-design-vue';
+
+const [BasicModal, modalApi] = useVbenModal({
+  onCancel() {
+    modalApi.close();
+  },
+  onConfirm() {
+    message.success('点击了确认');
+  },
+});
+</script>
+
+<template>
+  <BasicModal
+    class="w-[600px]"
+    title="基础弹窗示例"
+    title-tooltip="标题提示内容"
+  >
+    aaaaa
+  </BasicModal>
+</template>
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@ -178,7 +178,7 @@ importers:
        specifier: workspace:*
        version: link:../../packages/utils
      '@vueuse/core':
-        specifier: ^11.0.0
+        specifier: ^11.0.1
        version: 11.0.1(vue@3.4.38(typescript@5.5.4))
      ant-design-vue:
        specifier: ^4.2.3
@ -189,6 +189,15 @@ importers:
      dayjs:
        specifier: ^1.11.13
        version: 1.11.13
+      echarts:
+        specifier: ^5.5.1
+        version: 5.5.1
+      jsencrypt:
+        specifier: ^3.3.2
+        version: 3.3.2
+      lodash-es:
+        specifier: ^4.17.21
+        version: 4.17.21
      pinia:
        specifier: 2.2.2
        version: 2.2.2(typescript@5.5.4)(vue@3.4.38(typescript@5.5.4))
@ -210,7 +219,7 @@ importers:
        version: 4.17.12
      unplugin-vue-components:
        specifier: ^0.27.3
-        version: 0.27.4(@babel/parser@7.25.3)(rollup@4.21.0)(vue@3.4.38(typescript@5.5.4))
+        version: 0.27.4(@babel/parser@7.25.4)(rollup@4.21.0)(vue@3.4.38(typescript@5.5.4))

  apps/web-ele:
    dependencies:
@ -257,7 +266,7 @@ importers:
        specifier: workspace:*
        version: link:../../packages/utils
      '@vueuse/core':
-        specifier: ^11.0.0
+        specifier: ^11.0.1
        version: 11.0.1(vue@3.4.38(typescript@5.5.4))
      dayjs:
        specifier: ^1.11.13
@ -324,7 +333,7 @@ importers:
        specifier: workspace:*
        version: link:../../packages/utils
      '@vueuse/core':
-        specifier: ^11.0.0
+        specifier: ^11.0.1
        version: 11.0.1(vue@3.4.38(typescript@5.5.4))
      naive-ui:
        specifier: ^2.39.0
@ -398,10 +407,10 @@ importers:
        specifier: ^9.6.0
        version: 9.6.0
      '@typescript-eslint/eslint-plugin':
-        specifier: ^8.1.0
+        specifier: ^8.2.0
        version: 8.2.0(@typescript-eslint/parser@8.2.0(eslint@9.9.0(jiti@1.21.6))(typescript@5.5.4))(eslint@9.9.0(jiti@1.21.6))(typescript@5.5.4)
      '@typescript-eslint/parser':
-        specifier: ^8.1.0
+        specifier: ^8.2.0
        version: 8.2.0(eslint@9.9.0(jiti@1.21.6))(typescript@5.5.4)
      eslint:
        specifier: ^9.9.0
@ -467,7 +476,7 @@ importers:
  internal/lint-configs/stylelint-config:
    dependencies:
      '@stylistic/stylelint-plugin':
-        specifier: ^3.0.0
+        specifier: ^3.0.1
        version: 3.0.1(stylelint@16.8.2(typescript@5.5.4))
      stylelint-config-recess-order:
        specifier: ^5.1.0
@ -583,7 +592,7 @@ importers:
        specifier: ^16.1.0
        version: 16.1.0(postcss@8.4.41)
      postcss-preset-env:
-        specifier: ^10.0.1
+        specifier: ^10.0.2
        version: 10.0.2(postcss@8.4.41)
      tailwindcss:
        specifier: ^3.4.10
@ -660,7 +669,7 @@ importers:
        specifier: ^16.4.5
        version: 16.4.5
      rollup:
-        specifier: ^4.20.0
+        specifier: ^4.21.0
        version: 4.21.0
      rollup-plugin-visualizer:
        specifier: ^5.12.0
@ -747,7 +756,7 @@ importers:
        specifier: workspace:*
        version: link:../base/shared
      '@vueuse/core':
-        specifier: ^11.0.0
+        specifier: ^11.0.1
        version: 11.0.1(vue@3.4.38(typescript@5.5.4))
      radix-vue:
        specifier: ^1.9.4
@ -772,7 +781,7 @@ importers:
        specifier: workspace:*
        version: link:../base/typings
      '@vueuse/core':
-        specifier: ^11.0.0
+        specifier: ^11.0.1
        version: 11.0.1(vue@3.4.38(typescript@5.5.4))
      vue:
        specifier: 3.4.38
@ -793,7 +802,7 @@ importers:
        specifier: workspace:*
        version: link:../../base/typings
      '@vueuse/core':
-        specifier: ^11.0.0
+        specifier: ^11.0.1
        version: 11.0.1(vue@3.4.38(typescript@5.5.4))
      vue:
        specifier: 3.4.38
@ -817,7 +826,7 @@ importers:
        specifier: workspace:*
        version: link:../../base/typings
      '@vueuse/core':
-        specifier: ^11.0.0
+        specifier: ^11.0.1
        version: 11.0.1(vue@3.4.38(typescript@5.5.4))
      vue:
        specifier: 3.4.38
@ -859,7 +868,7 @@ importers:
        specifier: workspace:*
        version: link:../../base/typings
      '@vueuse/core':
-        specifier: ^11.0.0
+        specifier: ^11.0.1
        version: 11.0.1(vue@3.4.38(typescript@5.5.4))
      class-variance-authority:
        specifier: ^0.7.0
@ -889,7 +898,7 @@ importers:
        specifier: workspace:*
        version: link:../../base/typings
      '@vueuse/core':
-        specifier: ^11.0.0
+        specifier: ^11.0.1
        version: 11.0.1(vue@3.4.38(typescript@5.5.4))
      vue:
        specifier: 3.4.38
@ -925,7 +934,7 @@ importers:
        specifier: workspace:*
        version: link:../../preferences
      '@vueuse/core':
-        specifier: ^11.0.0
+        specifier: ^11.0.1
        version: 11.0.1(vue@3.4.38(typescript@5.5.4))
      echarts:
        specifier: ^5.5.1
@ -958,13 +967,8 @@ importers:
        specifier: workspace:*
        version: link:../../types
      '@vueuse/integrations':
-<<<<<<< HEAD
-        specifier: ^11.0.0
-        version: 11.0.1(async-validator@4.2.5)(axios@1.7.4)(focus-trap@7.5.4)(nprogress@0.2.0)(qrcode@1.5.4)(sortablejs@1.15.2)(vue@3.4.38(typescript@5.5.4))
-=======
        specifier: ^11.0.1
        version: 11.0.1(async-validator@4.2.5)(axios@1.7.5)(focus-trap@7.5.4)(nprogress@0.2.0)(qrcode@1.5.4)(sortablejs@1.15.2)(vue@3.4.38(typescript@5.5.4))
->>>>>>> edb55b1fc09bad76d1c10918248fdb6836f30ddb
      qrcode:
        specifier: ^1.5.4
        version: 1.5.4
@ -1048,7 +1052,7 @@ importers:
        specifier: workspace:*
        version: link:../../utils
      '@vueuse/core':
-        specifier: ^11.0.0
+        specifier: ^11.0.1
        version: 11.0.1(vue@3.4.38(typescript@5.5.4))
      vue:
        specifier: 3.4.38
@ -1196,7 +1200,7 @@ importers:
        specifier: workspace:*
        version: link:../packages/utils
      '@vueuse/core':
-        specifier: ^11.0.0
+        specifier: ^11.0.1
        version: 11.0.1(vue@3.4.38(typescript@5.5.4))
      ant-design-vue:
        specifier: ^4.2.3
@ -12844,7 +12848,7 @@ snapshots:
  '@types/fs-extra@11.0.4':
    dependencies:
      '@types/jsonfile': 6.1.4
-      '@types/node': 22.4.1
+      '@types/node': 22.5.0

  '@types/hast@3.0.4':
    dependencies:
@ -12866,7 +12870,7 @@ snapshots:

  '@types/jsonfile@6.1.4':
    dependencies:
-      '@types/node': 22.4.1
+      '@types/node': 22.5.0

  '@types/jsonwebtoken@9.0.6':
    dependencies:
@ -13310,27 +13314,7 @@ snapshots:
      - '@vue/composition-api'
      - vue

-<<<<<<< HEAD
-  '@vueuse/integrations@11.0.1(async-validator@4.2.5)(axios@1.7.4)(focus-trap@7.5.4)(nprogress@0.2.0)(qrcode@1.5.4)(sortablejs@1.15.2)(vue@3.4.38(typescript@5.5.4))':
-=======
-  '@vueuse/integrations@11.0.0(async-validator@4.2.5)(axios@1.7.5)(focus-trap@7.5.4)(nprogress@0.2.0)(qrcode@1.5.4)(sortablejs@1.15.2)(vue@3.4.38(typescript@5.5.4))':
-    dependencies:
-      '@vueuse/core': 11.0.0(vue@3.4.38(typescript@5.5.4))
-      '@vueuse/shared': 11.0.0(vue@3.4.38(typescript@5.5.4))
-      vue-demi: 0.14.10(vue@3.4.38(typescript@5.5.4))
-    optionalDependencies:
-      async-validator: 4.2.5
-      axios: 1.7.5
-      focus-trap: 7.5.4
-      nprogress: 0.2.0
-      qrcode: 1.5.4
-      sortablejs: 1.15.2
-    transitivePeerDependencies:
-      - '@vue/composition-api'
-      - vue
-
  '@vueuse/integrations@11.0.1(async-validator@4.2.5)(axios@1.7.5)(focus-trap@7.5.4)(nprogress@0.2.0)(qrcode@1.5.4)(sortablejs@1.15.2)(vue@3.4.38(typescript@5.5.4))':
->>>>>>> edb55b1fc09bad76d1c10918248fdb6836f30ddb
    dependencies:
      '@vueuse/core': 11.0.1(vue@3.4.38(typescript@5.5.4))
      '@vueuse/shared': 11.0.1(vue@3.4.38(typescript@5.5.4))
@ -18857,7 +18841,7 @@ snapshots:
    transitivePeerDependencies:
      - rollup

-  unplugin-vue-components@0.27.4(@babel/parser@7.25.3)(rollup@4.21.0)(vue@3.4.38(typescript@5.5.4)):
+  unplugin-vue-components@0.27.4(@babel/parser@7.25.4)(rollup@4.21.0)(vue@3.4.38(typescript@5.5.4)):
    dependencies:
      '@antfu/utils': 0.7.10
      '@rollup/pluginutils': 5.1.0(rollup@4.21.0)
@ -18871,7 +18855,7 @@ snapshots:
      unplugin: 1.12.2
      vue: 3.4.38(typescript@5.5.4)
    optionalDependencies:
-      '@babel/parser': 7.25.3
+      '@babel/parser': 7.25.4
    transitivePeerDependencies:
      - rollup
      - supports-color
@ -19130,11 +19114,7 @@ snapshots:
      '@vue/devtools-api': 7.3.8
      '@vue/shared': 3.4.38
      '@vueuse/core': 11.0.1(vue@3.4.38(typescript@5.5.4))
-<<<<<<< HEAD
-      '@vueuse/integrations': 11.0.1(async-validator@4.2.5)(axios@1.7.4)(focus-trap@7.5.4)(nprogress@0.2.0)(qrcode@1.5.4)(sortablejs@1.15.2)(vue@3.4.38(typescript@5.5.4))
-=======
-      '@vueuse/integrations': 11.0.0(async-validator@4.2.5)(axios@1.7.5)(focus-trap@7.5.4)(nprogress@0.2.0)(qrcode@1.5.4)(sortablejs@1.15.2)(vue@3.4.38(typescript@5.5.4))
->>>>>>> edb55b1fc09bad76d1c10918248fdb6836f30ddb
+      '@vueuse/integrations': 11.0.1(async-validator@4.2.5)(axios@1.7.5)(focus-trap@7.5.4)(nprogress@0.2.0)(qrcode@1.5.4)(sortablejs@1.15.2)(vue@3.4.38(typescript@5.5.4))
      focus-trap: 7.5.4
      mark.js: 8.11.1
      minisearch: 7.1.0