refactor: playground use antdv-next

playground/src/views/examples/button-group/index.vue

@@ -11,7 +11,7 @@ import {
 } from '@vben/common-ui';
 import { LoaderCircle, Square, SquareCheckBig } from '@vben/icons';
 
-import { Button, Card, message } from 'ant-design-vue';
+import { Button, Card, message } from 'antdv-next';
 
 import { useVbenForm } from '#/adapter/form';
 

playground/src/views/examples/captcha/point-selection-captcha.vue

@@ -5,7 +5,7 @@ import { reactive, ref } from 'vue';
 
 import { Page, PointSelectionCaptcha } from '@vben/common-ui';
 
-import { Card, Input, InputNumber, message, Switch } from 'ant-design-vue';
+import { Card, Input, InputNumber, message, Switch } from 'antdv-next';
 
 import { $t } from '#/locales';
 

playground/src/views/examples/captcha/slider-captcha.vue

@@ -9,7 +9,7 @@ import { ref } from 'vue';
 import { Page, SliderCaptcha } from '@vben/common-ui';
 import { Bell, Sun } from '@vben/icons';
 
-import { Button, Card, message } from 'ant-design-vue';
+import { Button, Card, message } from 'antdv-next';
 
 function handleSuccess(data: CaptchaVerifyPassingData) {
   const { time } = data;

playground/src/views/examples/captcha/slider-rotate-captcha.vue

@@ -5,7 +5,7 @@ import { Page, SliderRotateCaptcha } from '@vben/common-ui';
 import { preferences } from '@vben/preferences';
 import { useUserStore } from '@vben/stores';
 
-import { Card, message } from 'ant-design-vue';
+import { Card, message } from 'antdv-next';
 
 const userStore = useUserStore();
 function handleSuccess() {

playground/src/views/examples/captcha/slider-translate-captcha.vue

@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import { Page, SliderTranslateCaptcha } from '@vben/common-ui';
 
-import { Card, message } from 'ant-design-vue';
+import { Card, message } from 'antdv-next';
 
 function handleSuccess() {
   message.success('success!');

playground/src/views/examples/context-menu/index.vue

@@ -3,7 +3,7 @@ import { Page } from '@vben/common-ui';
 
 import { VbenContextMenu } from '@vben-core/shadcn-ui';
 
-import { Button, Card, message } from 'ant-design-vue';
+import { Button, Card, message } from 'antdv-next';
 
 const needHidden = (role: string) => {
   return role === 'user';

playground/src/views/examples/count-to/index.vue

@@ -18,7 +18,7 @@ import {
   Row,
   Select,
   Switch,
-} from 'ant-design-vue';
+} from 'antdv-next';
 
 const props = reactive<CountToProps & { transition: TransitionPresets }>({
   decimal: '.',
@@ -150,15 +150,10 @@ function onFinished() {
           </Col>
           <Col :span="8">
             <FormItem label="动画" name="transition">
-              <Select v-model:value="props.transition">
-                <Select.Option
-                  v-for="preset in TransitionPresetsKeys"
-                  :key="preset"
-                  :value="preset"
-                >
-                  {{ preset }}
-                </Select.Option>
-              </Select>
+              <Select
+                v-model:value="props.transition"
+                :options="TransitionPresetsKeys.map((p) => ({ label: p, value: p }))"
+              />
             </FormItem>
           </Col>
           <Col :span="8">

playground/src/views/examples/cropper/index.vue

@@ -1,11 +1,11 @@
 <script lang="ts" setup>
-import type { UploadChangeParam } from 'ant-design-vue';
+import type { UploadChangeParam } from 'antdv-next';
 
 import { ref } from 'vue';
 
 import { Page, VCropper } from '@vben/common-ui';
 
-import { Button, Card, Select, Upload } from 'ant-design-vue';
+import { Button, Card, Select, Upload } from 'antdv-next';
 
 const options = [
   { label: '1:1', value: '1:1' },

playground/src/views/examples/doc-button.vue

@@ -2,7 +2,7 @@
 import { VBEN_DOC_URL } from '@vben/constants';
 import { openWindow } from '@vben/utils';
 
-import { Button } from 'ant-design-vue';
+import { Button } from 'antdv-next';
 
 const props = defineProps<{ path: string }>();
 

playground/src/views/examples/drawer/auto-height-demo.vue

@@ -3,7 +3,7 @@ import { ref } from 'vue';
 
 import { useVbenDrawer } from '@vben/common-ui';
 
-import { Button, message } from 'ant-design-vue';
+import { Button, message } from 'antdv-next';
 
 const list = ref<number[]>([]);
 

playground/src/views/examples/drawer/base-demo.vue

@@ -1,7 +1,7 @@
 <script lang="ts" setup>
 import { useVbenDrawer } from '@vben/common-ui';
 
-import { Button, message } from 'ant-design-vue';
+import { Button, message } from 'antdv-next';
 
 const [Drawer, drawerApi] = useVbenDrawer({
   onCancel() {

playground/src/views/examples/drawer/dynamic-demo.vue

@@ -1,7 +1,7 @@
 <script lang="ts" setup>
 import { useVbenDrawer } from '@vben/common-ui';
 
-import { Button, message } from 'ant-design-vue';
+import { Button, message } from 'antdv-next';
 
 const [Drawer, drawerApi] = useVbenDrawer({
   onCancel() {

playground/src/views/examples/drawer/in-content-demo.vue

@@ -3,7 +3,7 @@ import { ref } from 'vue';
 
 import { useVbenDrawer } from '@vben/common-ui';
 
-import { Input, message } from 'ant-design-vue';
+import { Input, message } from 'antdv-next';
 
 import { useVbenForm } from '#/adapter/form';
 

playground/src/views/examples/drawer/index.vue

@@ -3,7 +3,7 @@ import type { DrawerPlacement, DrawerState } from '@vben/common-ui';
 
 import { Page, useVbenDrawer } from '@vben/common-ui';
 
-import { Button, Card } from 'ant-design-vue';
+import { Button, Card } from 'antdv-next';
 
 import DocButton from '../doc-button.vue';
 import AutoHeightDemo from './auto-height-demo.vue';

playground/src/views/examples/drawer/shared-data-demo.vue

@@ -3,7 +3,7 @@ import { ref } from 'vue';
 
 import { useVbenDrawer } from '@vben/common-ui';
 
-import { message } from 'ant-design-vue';
+import { message } from 'antdv-next';
 
 const data = ref();
 

playground/src/views/examples/ellipsis/index.vue

@@ -3,7 +3,7 @@ import { ref } from 'vue';
 
 import { EllipsisText, Page } from '@vben/common-ui';
 
-import { Card } from 'ant-design-vue';
+import { Card } from 'antdv-next';
 
 import DocButton from '../doc-button.vue';
 

playground/src/views/examples/form/api.vue

@@ -1,11 +1,9 @@
 <script lang="ts" setup>
-import type { RefSelectProps } from 'ant-design-vue/es/select';
-
 import { ref } from 'vue';
 
 import { Page } from '@vben/common-ui';
 
-import { Button, Card, message, Space } from 'ant-design-vue';
+import { Button, Card, message, Space } from 'antdv-next';
 
 import { useVbenForm } from '#/adapter/form';
 
@@ -134,7 +132,9 @@ function handleClick(
     }
     case 'componentRef': {
       // 获取下拉组件的实例，并调用它的focus方法
-      formApi.getFieldComponentRef<RefSelectProps>('fieldOptions')?.focus?.();
+      formApi
+        .getFieldComponentRef<{ focus?: () => void }>('fieldOptions')
+        ?.focus?.();
       break;
     }
     case 'disabled': {

playground/src/views/examples/form/basic.vue

@@ -1,12 +1,12 @@
 <script lang="ts" setup>
-import type { UploadFile } from 'ant-design-vue';
+import type { UploadFile } from 'antdv-next';
 
 import { h, ref, toRaw } from 'vue';
 
 import { Page } from '@vben/common-ui';
 
 import { useDebounceFn } from '@vueuse/core';
-import { Button, Card, message, Spin, Tag } from 'ant-design-vue';
+import { Button, Card, message, Spin, Tag } from 'antdv-next';
 import dayjs from 'dayjs';
 
 import { useVbenForm, z } from '#/adapter/form';

playground/src/views/examples/form/collapsible.vue

@@ -1,5 +1,5 @@
 <script lang="ts" setup>
-import type { RadioGroupProps } from 'ant-design-vue';
+import type { RadioGroupProps } from 'antdv-next';
 
 import type { FormLayout } from '@vben/common-ui';
 
@@ -11,7 +11,7 @@ import { Page } from '@vben/common-ui';
 
 import { VbenCollapsibleParams } from '@vben-core/shadcn-ui';
 
-import { Button, Card, message, RadioGroup } from 'ant-design-vue';
+import { Button, Card, message, RadioGroup } from 'antdv-next';
 
 import { useVbenForm, z } from '#/adapter/form';
 

playground/src/views/examples/form/custom-layout.vue

@@ -3,7 +3,7 @@ import { h } from 'vue';
 
 import { Page } from '@vben/common-ui';
 
-import { Card } from 'ant-design-vue';
+import { Card } from 'antdv-next';
 
 import { useVbenForm } from '#/adapter/form';
 

playground/src/views/examples/form/custom.vue

@@ -3,7 +3,7 @@ import { h, markRaw } from 'vue';
 
 import { Page } from '@vben/common-ui';
 
-import { Card, Input, message } from 'ant-design-vue';
+import { Card, Input, message } from 'antdv-next';
 
 import { useVbenForm, z } from '#/adapter/form';
 

playground/src/views/examples/form/dynamic.vue

@@ -1,7 +1,7 @@
 <script lang="ts" setup>
 import { Page } from '@vben/common-ui';
 
-import { Button, Card, message } from 'ant-design-vue';
+import { Button, Card, message } from 'antdv-next';
 
 import { useVbenForm } from '#/adapter/form';
 

playground/src/views/examples/form/merge.vue

@@ -1,9 +1,11 @@
 <script lang="ts" setup>
+import type { StepItem } from 'antdv-next';
+
 import { ref } from 'vue';
 
 import { Page } from '@vben/common-ui';
 
-import { Button, Card, message, Step, Steps, Switch } from 'ant-design-vue';
+import { Button, Card, message, Steps, Switch } from 'antdv-next';
 
 import { useVbenForm } from '#/adapter/form';
 
@@ -75,6 +77,7 @@ const [SecondForm, secondFormApi] = useVbenForm({
   ],
   wrapperClass: 'grid-cols-1 md:grid-cols-1 lg:grid-cols-1',
 });
+const stepsItems: StepItem[] = [{ title: '表单1' }, { title: '表单2' }];
 const needMerge = ref(true);
 async function handleMergeSubmit() {
   const values = await firstFormApi
@@ -102,10 +105,7 @@ async function handleMergeSubmit() {
         <Button type="primary" @click="handleMergeSubmit">合并提交</Button>
       </template>
       <div class="mx-auto max-w-lg">
-        <Steps :current="currentTab" class="steps">
-          <Step title="表单1" />
-          <Step title="表单2" />
-        </Steps>
+        <Steps :current="currentTab" :items="stepsItems" class="steps" />
         <div class="p-20">
           <FirstForm v-show="currentTab === 0" />
           <SecondForm v-show="currentTab === 1" />

playground/src/views/examples/form/modules/two-fields.vue

@@ -1,5 +1,5 @@
 <script lang="ts" setup>
-import { Input, Select } from 'ant-design-vue';
+import { Input, Select } from 'antdv-next';
 
 const emit = defineEmits(['blur', 'change']);
 

playground/src/views/examples/form/query.vue

@@ -1,7 +1,7 @@
 <script lang="ts" setup>
 import { Page } from '@vben/common-ui';
 
-import { Card, message } from 'ant-design-vue';
+import { Card, message } from 'antdv-next';
 
 import { useVbenForm } from '#/adapter/form';
 

playground/src/views/examples/form/rules.vue

@@ -1,7 +1,7 @@
 <script lang="ts" setup>
 import { Page } from '@vben/common-ui';
 
-import { Button, Card, message } from 'ant-design-vue';
+import { Button, Card, message } from 'antdv-next';
 
 import { useVbenForm, z } from '#/adapter/form';
 

playground/src/views/examples/form/scroll-to-error-test.vue

@@ -3,7 +3,7 @@ import { ref } from 'vue';
 
 import { Page } from '@vben/common-ui';
 
-import { Button, Card, Switch } from 'ant-design-vue';
+import { Button, Card, Switch } from 'antdv-next';
 
 import { useVbenForm } from '#/adapter/form';
 

playground/src/views/examples/form/value-format.vue

@@ -3,7 +3,7 @@ import { computed, nextTick, onMounted, ref, watch } from 'vue';
 
 import { Page } from '@vben/common-ui';
 
-import { Button, Card, message, Space, Tag } from 'ant-design-vue';
+import { Button, Card, message, Space, Tag } from 'antdv-next';
 import dayjs from 'dayjs';
 
 import { useVbenForm } from '#/adapter/form';

playground/src/views/examples/json-viewer/index.vue

@@ -3,7 +3,7 @@ import type { JsonViewerAction, JsonViewerValue } from '@vben/common-ui';
 
 import { JsonViewer, Page } from '@vben/common-ui';
 
-import { Card, message } from 'ant-design-vue';
+import { Card, message } from 'antdv-next';
 
 import { json1, json2 } from './data';
 

playground/src/views/examples/layout/col-page.vue

@@ -12,7 +12,7 @@ import {
   Slider,
   Tag,
   Tooltip,
-} from 'ant-design-vue';
+} from 'antdv-next';
 
 const props = reactive({
   leftCollapsedWidth: 5,

playground/src/views/examples/loading/index.vue

@@ -3,7 +3,7 @@ import { Loading, Page, Spinner } from '@vben/common-ui';
 import { IconifyIcon } from '@vben/icons';
 
 import { refAutoReset } from '@vueuse/core';
-import { Button, Card, Spin } from 'ant-design-vue';
+import { Button, Card, Spin } from 'antdv-next';
 
 const spinning = refAutoReset(false, 3000);
 const loading = refAutoReset(false, 3000);

playground/src/views/examples/modal/auto-height-demo.vue

@@ -3,7 +3,7 @@ import { ref } from 'vue';
 
 import { useVbenModal } from '@vben/common-ui';
 
-import { Button, message } from 'ant-design-vue';
+import { Button, message } from 'antdv-next';
 
 const list = ref<number[]>([]);
 

playground/src/views/examples/modal/base-demo.vue

@@ -1,7 +1,7 @@
 <script lang="ts" setup>
 import { useVbenModal } from '@vben/common-ui';
 
-import { Button, message } from 'ant-design-vue';
+import { Button, message } from 'antdv-next';
 
 const [Modal, modalApi] = useVbenModal({
   onCancel() {

playground/src/views/examples/modal/blur-demo.vue

@@ -3,7 +3,7 @@ import { ref, watch } from 'vue';
 
 import { useVbenModal } from '@vben/common-ui';
 
-import { Slider } from 'ant-design-vue';
+import { Slider } from 'antdv-next';
 
 const blur = ref(5);
 const [Modal, modalApi] = useVbenModal({

playground/src/views/examples/modal/drag-demo.vue

@@ -1,7 +1,7 @@
 <script lang="ts" setup>
 import { useVbenModal } from '@vben/common-ui';
 
-import { message } from 'ant-design-vue';
+import { message } from 'antdv-next';
 
 const [Modal, modalApi] = useVbenModal({
   draggable: true,

playground/src/views/examples/modal/dynamic-demo.vue

@@ -1,7 +1,7 @@
 <script lang="ts" setup>
 import { useVbenModal } from '@vben/common-ui';
 
-import { Button, message } from 'ant-design-vue';
+import { Button, message } from 'antdv-next';
 
 const [Modal, modalApi] = useVbenModal({
   draggable: true,

playground/src/views/examples/modal/form-modal-demo.vue

@@ -1,7 +1,7 @@
 <script lang="ts" setup>
 import { useVbenModal } from '@vben/common-ui';
 
-import { message } from 'ant-design-vue';
+import { message } from 'antdv-next';
 
 import { useVbenForm } from '#/adapter/form';
 

playground/src/views/examples/modal/in-content-demo.vue

@@ -3,7 +3,7 @@ import { ref } from 'vue';
 
 import { useVbenModal } from '@vben/common-ui';
 
-import { Input, message } from 'ant-design-vue';
+import { Input, message } from 'antdv-next';
 
 const [Modal, modalApi] = useVbenModal({
   destroyOnClose: false,

playground/src/views/examples/modal/index.vue

@@ -10,7 +10,7 @@ import {
   useVbenModal,
 } from '@vben/common-ui';
 
-import { Button, Card, Flex, message } from 'ant-design-vue';
+import { Button, Card, Flex, message } from 'antdv-next';
 
 import DocButton from '../doc-button.vue';
 import AutoHeightDemo from './auto-height-demo.vue';

playground/src/views/examples/modal/nested-demo.vue

@@ -1,7 +1,7 @@
 <script lang="ts" setup>
 import { useVbenModal } from '@vben/common-ui';
 
-import { Button } from 'ant-design-vue';
+import { Button } from 'antdv-next';
 
 import DragDemo from './drag-demo.vue';
 

playground/src/views/examples/modal/shared-data-demo.vue

@@ -3,7 +3,7 @@ import { ref } from 'vue';
 
 import { useVbenModal } from '@vben/common-ui';
 
-import { message } from 'ant-design-vue';
+import { message } from 'antdv-next';
 
 const data = ref();
 

playground/src/views/examples/motion/index.vue

@@ -14,7 +14,7 @@ import {
   InputNumber,
   Row,
   Select,
-} from 'ant-design-vue';
+} from 'antdv-next';
 // 本例子用不到visible类型的动画。带有VisibleOnce和Visible的类型会在组件进入视口被显示时执行动画，
 const presets = MotionPresets.filter((v) => !v.includes('Visible'));
 const showCard1 = refAutoReset(true, 100);
@@ -114,15 +114,10 @@ function openDocPage() {
           <Row>
             <Col :span="8">
               <FormItem prop="preset" label="动画效果">
-                <Select v-model:value="motionProps.preset">
-                  <Select.Option
-                    :value="preset"
-                    v-for="preset in presets"
-                    :key="preset"
-                  >
-                    {{ preset }}
-                  </Select.Option>
-                </Select>
+                <Select
+                  v-model:value="motionProps.preset"
+                  :options="presets.map((p) => ({ label: p, value: p }))"
+                />
               </FormItem>
             </Col>
             <Col :span="8">
@@ -168,15 +163,10 @@ function openDocPage() {
           <Row>
             <Col :span="8">
               <FormItem prop="preset" label="动画效果">
-                <Select v-model:value="motionGroupProps.preset">
-                  <Select.Option
-                    :value="preset"
-                    v-for="preset in presets"
-                    :key="preset"
-                  >
-                    {{ preset }}
-                  </Select.Option>
-                </Select>
+                <Select
+                  v-model:value="motionGroupProps.preset"
+                  :options="presets.map((p) => ({ label: p, value: p }))"
+                />
               </FormItem>
             </Col>
             <Col :span="8">

playground/src/views/examples/tippy/index.vue

@@ -5,7 +5,7 @@ import { reactive } from 'vue';
 
 import { Page, Tippy } from '@vben/common-ui';
 
-import { Button, Card, Flex } from 'ant-design-vue';
+import { Button, Card, Flex } from 'antdv-next';
 
 import { useVbenForm } from '#/adapter/form';
 

playground/src/views/examples/tiptap/index.vue

@@ -6,7 +6,7 @@ import { computed, ref } from 'vue';
 import { Page } from '@vben/common-ui';
 import { VbenTiptap, VbenTiptapPreview } from '@vben/plugins/tiptap';
 
-import { Card, Switch } from 'ant-design-vue';
+import { Card, Switch } from 'antdv-next';
 const content = ref(`
   <h1>Vben Tiptap</h1>
   <p>这个编辑器已经被封装在 <code>packages/effects/plugins/src/tiptap</code> 中。</p>

playground/src/views/examples/vxe-table/basic.vue

@@ -3,7 +3,7 @@ import type { VxeGridListeners, VxeGridProps } from '#/adapter/vxe-table';
 
 import { Page } from '@vben/common-ui';
 
-import { Button, message } from 'ant-design-vue';
+import { Button, message } from 'antdv-next';
 
 import { useVbenVxeGrid } from '#/adapter/vxe-table';
 

playground/src/views/examples/vxe-table/custom-cell.vue

@@ -3,7 +3,7 @@ import type { VxeGridProps } from '#/adapter/vxe-table';
 
 import { Page } from '@vben/common-ui';
 
-import { Button, Image, Switch, Tag } from 'ant-design-vue';
+import { Button, Image, Switch, Tag } from 'antdv-next';
 
 import { useVbenVxeGrid } from '#/adapter/vxe-table';
 import { getExampleTableApi } from '#/api';

playground/src/views/examples/vxe-table/edit-row.vue

@@ -3,7 +3,7 @@ import type { VxeGridProps } from '#/adapter/vxe-table';
 
 import { Page } from '@vben/common-ui';
 
-import { Button, message } from 'ant-design-vue';
+import { Button, message } from 'antdv-next';
 
 import { useVbenVxeGrid } from '#/adapter/vxe-table';
 import { getExampleTableApi } from '#/api';

playground/src/views/examples/vxe-table/fixed.vue

@@ -3,7 +3,7 @@ import type { VxeGridProps } from '#/adapter/vxe-table';
 
 import { Page } from '@vben/common-ui';
 
-import { Button } from 'ant-design-vue';
+import { Button } from 'antdv-next';
 
 import { useVbenVxeGrid } from '#/adapter/vxe-table';
 import { getExampleTableApi } from '#/api';

playground/src/views/examples/vxe-table/form.vue

@@ -4,7 +4,7 @@ import type { VxeTableGridOptions } from '#/adapter/vxe-table';
 
 import { Page } from '@vben/common-ui';
 
-import { message } from 'ant-design-vue';
+import { message } from 'antdv-next';
 import dayjs from 'dayjs';
 
 import { useVbenVxeGrid } from '#/adapter/vxe-table';

playground/src/views/examples/vxe-table/remote.vue

@@ -3,7 +3,7 @@ import type { VxeGridProps } from '#/adapter/vxe-table';
 
 import { Page } from '@vben/common-ui';
 
-import { Button } from 'ant-design-vue';
+import { Button } from 'antdv-next';
 
 import { useVbenVxeGrid } from '#/adapter/vxe-table';
 import { getExampleTableApi } from '#/api';

playground/src/views/examples/vxe-table/tree.vue

@@ -3,7 +3,7 @@ import type { VxeGridProps } from '#/adapter/vxe-table';
 
 import { Page } from '@vben/common-ui';
 
-import { Button } from 'ant-design-vue';
+import { Button } from 'antdv-next';
 
 import { useVbenVxeGrid } from '#/adapter/vxe-table';