refactor: change the shadcn-ui directory and remove rarely used components (#4626)

packages/@core/ui-kit/menu-ui/src/components/index.ts

@@ -1,3 +1,4 @@
 export { default as Menu } from './menu.vue';
+export { default as MenuBadge } from './menu-badge.vue';
 export { default as MenuItem } from './menu-item.vue';
 export { default as SubMenu } from './sub-menu.vue';

packages/@core/ui-kit/menu-ui/src/components/menu-item.vue

@@ -4,8 +4,9 @@ import type { MenuItemProps, MenuItemRegistered } from '../types';
 import { computed, onBeforeUnmount, onMounted, reactive, useSlots } from 'vue';
 
 import { useNamespace } from '@vben-core/composables';
-import { VbenIcon, VbenMenuBadge, VbenTooltip } from '@vben-core/shadcn-ui';
+import { VbenIcon, VbenTooltip } from '@vben-core/shadcn-ui';
 
+import { MenuBadge } from '../components';
 import { useMenu, useMenuContext, useSubMenuContext } from '../hooks';
 
 interface Props extends MenuItemProps {}
@@ -108,7 +109,7 @@ onBeforeUnmount(() => {
       <slot name="title"></slot>
     </VbenTooltip>
     <div v-show="!showTooltip" :class="[e('content')]">
-      <VbenMenuBadge
+      <MenuBadge
         v-if="rootMenu.props.mode !== 'horizontal'"
         class="right-2"
         v-bind="props"

packages/@core/ui-kit/menu-ui/src/sub-menu.vue

@@ -3,9 +3,7 @@ import type { MenuRecordRaw } from '@vben-core/typings';
 
 import { computed } from 'vue';
 
-import { VbenMenuBadge } from '@vben-core/shadcn-ui';
+import { MenuBadge, MenuItem, SubMenu as SubMenuComp } from './components';
-
-import { MenuItem, SubMenu as SubMenuComp } from './components';
 // eslint-disable-next-line import/no-self-import
 import SubMenu from './sub-menu.vue';
 
@@ -54,7 +52,7 @@ const hasChildren = computed(() => {
     :path="menu.path"
   >
     <template #content>
-      <VbenMenuBadge
+      <MenuBadge
         :badge="menu.badge"
         :badge-type="menu.badgeType"
         :badge-variants="menu.badgeVariants"

packages/@core/ui-kit/shadcn-ui/src/components/avatar/avatar.vue

@@ -7,7 +7,7 @@ import type {
 
 import { computed } from 'vue';
 
-import { Avatar, AvatarFallback, AvatarImage } from '../ui/avatar';
+import { Avatar, AvatarFallback, AvatarImage } from '../../ui';
 
 interface Props extends AvatarRootProps, AvatarFallbackProps, AvatarImageProps {
   alt?: string;

packages/@core/ui-kit/shadcn-ui/src/components/breadcrumb/breadcrumb.vue

@@ -3,7 +3,6 @@ import type { BreadcrumbProps } from './types';
 
 import { ChevronDown } from '@vben-core/icons';
 
-import { VbenIcon } from '../icon';
 import {
   Breadcrumb,
   BreadcrumbItem,
@@ -11,13 +10,12 @@ import {
   BreadcrumbList,
   BreadcrumbPage,
   BreadcrumbSeparator,
-} from '../ui/breadcrumb';
-import {
   DropdownMenu,
   DropdownMenuContent,
   DropdownMenuItem,
   DropdownMenuTrigger,
-} from '../ui/dropdown-menu';
+} from '../../ui';
+import { VbenIcon } from '../icon';
 
 interface Props extends BreadcrumbProps {}
 

packages/@core/ui-kit/shadcn-ui/src/components/button/button.ts

@@ -1,6 +1,6 @@
 import type { AsTag } from 'radix-vue';
 
-import type { ButtonVariants, ButtonVariantSize } from '../ui/button';
+import type { ButtonVariants, ButtonVariantSize } from '../../ui';
 
 import type { Component } from 'vue';
 

packages/@core/ui-kit/shadcn-ui/src/components/button/button.vue

@@ -8,7 +8,7 @@ import { cn } from '@vben-core/shared/utils';
 
 import { Primitive } from 'radix-vue';
 
-import { buttonVariants } from '../ui/button';
+import { buttonVariants } from '../../ui';
 
 interface Props extends VbenButtonProps {}
 

packages/@core/ui-kit/shadcn-ui/src/components/button/icon-button.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import type { ButtonVariants } from '../ui/button';
+import type { ButtonVariants } from '../../ui';
 import type { VbenButtonProps } from './button';
 
 import { computed, useSlots } from 'vue';

packages/@core/ui-kit/shadcn-ui/src/components/checkbox/checkbox.vue

@@ -5,7 +5,7 @@ import { useId } from 'vue';
 
 import { useForwardPropsEmits } from 'radix-vue';
 
-import { Checkbox } from '../ui/checkbox';
+import { Checkbox } from '../../ui/checkbox';
 
 const props = defineProps<CheckboxRootProps>();
 

packages/@core/ui-kit/shadcn-ui/src/components/context-menu/context-menu.vue

@@ -18,7 +18,7 @@ import {
   ContextMenuSeparator,
   ContextMenuShortcut,
   ContextMenuTrigger,
-} from '../ui/context-menu';
+} from '../../ui/context-menu';
 
 const props = defineProps<
   {

packages/@core/ui-kit/shadcn-ui/src/components/dropdown-menu/dropdown-menu.vue

@@ -11,7 +11,7 @@ import {
   DropdownMenuItem,
   DropdownMenuSeparator,
   DropdownMenuTrigger,
-} from '../ui/dropdown-menu';
+} from '../../ui';
 
 interface Props extends DropdownMenuProps {}
 

packages/@core/ui-kit/shadcn-ui/src/components/dropdown-menu/dropdown-radio-menu.vue

@@ -7,7 +7,7 @@ import {
   DropdownMenuGroup,
   DropdownMenuItem,
   DropdownMenuTrigger,
-} from '../ui/dropdown-menu';
+} from '../../ui';
 
 interface Props extends DropdownMenuProps {}
 

packages/@core/ui-kit/shadcn-ui/src/components/hover-card/hover-card.vue

@@ -9,11 +9,7 @@ import { computed } from 'vue';
 
 import { useForwardPropsEmits } from 'radix-vue';
 
-import {
+import { HoverCard, HoverCardContent, HoverCardTrigger } from '../../ui';
-  HoverCard,
-  HoverCardContent,
-  HoverCardTrigger,
-} from '../ui/hover-card';
 
 interface Props extends HoverCardRootProps {
   class?: any;

packages/@core/ui-kit/shadcn-ui/src/components/index.ts

@@ -11,10 +11,7 @@ export * from './full-screen';
 export * from './hover-card';
 export * from './icon';
 export * from './input-password';
-export * from './link';
 export * from './logo';
-export * from './menu-badge';
-export * from './pagination';
 export * from './pin-input';
 export * from './popover';
 export * from './render-content';
@@ -23,34 +20,4 @@ export * from './segmented';
 export * from './select';
 export * from './spine-text';
 export * from './spinner';
-export * from './swap';
 export * from './tooltip';
-export * from './ui/accordion';
-export * from './ui/avatar';
-export * from './ui/badge';
-export * from './ui/breadcrumb';
-export * from './ui/button';
-export * from './ui/card';
-export * from './ui/checkbox';
-export * from './ui/dialog';
-export * from './ui/dropdown-menu';
-export * from './ui/form';
-export * from './ui/hover-card';
-export * from './ui/input';
-export * from './ui/label';
-export * from './ui/number-field';
-export * from './ui/pagination';
-export * from './ui/pin-input';
-export * from './ui/popover';
-export * from './ui/radio-group';
-export * from './ui/scroll-area';
-export * from './ui/select';
-export * from './ui/separator';
-export * from './ui/sheet';
-export * from './ui/switch';
-export * from './ui/tabs';
-export * from './ui/textarea';
-export * from './ui/toast';
-export * from './ui/toggle';
-export * from './ui/toggle-group';
-export * from './ui/tooltip';

packages/@core/ui-kit/shadcn-ui/src/components/input-password/input-password.vue

@@ -4,7 +4,7 @@ import { ref, useSlots } from 'vue';
 import { Eye, EyeOff } from '@vben-core/icons';
 import { cn } from '@vben-core/shared/utils';
 
-import { Input } from '../ui/input';
+import { Input } from '../../ui';
 import PasswordStrength from './password-strength.vue';
 
 interface Props {

packages/@core/ui-kit/shadcn-ui/src/components/link/index.ts

@@ -1 +0,0 @@
-export { default as VbenLink } from './link.vue';

packages/@core/ui-kit/shadcn-ui/src/components/link/link.vue

@@ -1,28 +0,0 @@
-<script setup lang="ts">
-import { cn } from '@vben-core/shared/utils';
-
-import { Primitive, type PrimitiveProps } from 'radix-vue';
-
-interface Props extends PrimitiveProps {
-  class?: any;
-  href: string;
-}
-
-const props = withDefaults(defineProps<Props>(), {
-  as: 'a',
-  class: '',
-  href: '',
-});
-</script>
-
-<template>
-  <Primitive
-    :as="as"
-    :as-child="asChild"
-    :class="cn('text-primary hover:text-primary-hover', props.class)"
-    :href="href"
-    target="_blank"
-  >
-    <slot></slot>
-  </Primitive>
-</template>

packages/@core/ui-kit/shadcn-ui/src/components/menu-badge/index.ts

@@ -1 +0,0 @@
-export { default as VbenMenuBadge } from './menu-badge.vue';

packages/@core/ui-kit/shadcn-ui/src/components/pagination/index.ts

@@ -1,2 +0,0 @@
-export type { PaginationProps as VbenPaginationProps } from './pagination';
-export { default as VbenPagination } from './pagination.vue';

packages/@core/ui-kit/shadcn-ui/src/components/pagination/pagination.ts

@@ -1,41 +0,0 @@
-export interface PaginationProps {
-  /**
-   * 是否禁用
-   */
-  disabled?: boolean;
-  /**
-   * 每页记录数选项
-   */
-  pageSizeOptions?: number[];
-  /**
-   * 当 时true，始终显示第一页、最后一页和省略号
-   */
-  showEdges?: boolean;
-  /**
-   * 显示当前页选择下拉框
-   */
-  showRowsPerPage?: boolean;
-  /**
-   * 显示总条数文本
-   */
-  showTotalText?: boolean;
-  /**
-   * 当前页面周围应显示的兄弟页面数量
-   */
-  siblingCount?: number;
-  /**
-   * 组件尺寸
-   */
-  size?: 'default' | 'large' | 'small';
-
-  /**
-   * 总条数
-   */
-  total?: number;
-}
-
-export const SIZE_CLASS_MAP = {
-  default: 'size-8',
-  large: 'size-9',
-  small: 'size-7',
-};

packages/@core/ui-kit/shadcn-ui/src/components/pagination/pagination.vue

@@ -1,121 +0,0 @@
-<script setup lang="ts">
-import { computed, watch } from 'vue';
-
-import { cn } from '@vben-core/shared/utils';
-
-import { Button } from '../ui/button';
-import {
-  Pagination,
-  PaginationEllipsis,
-  PaginationFirst,
-  PaginationLast,
-  PaginationList,
-  PaginationListItem,
-  PaginationNext,
-  PaginationPrev,
-} from '../ui/pagination';
-import {
-  Select,
-  SelectContent,
-  SelectItem,
-  SelectTrigger,
-  SelectValue,
-} from '../ui/select';
-import { type PaginationProps, SIZE_CLASS_MAP } from './pagination';
-
-interface Props extends PaginationProps {}
-
-const {
-  disabled = false,
-  pageSizeOptions = [10, 20, 30, 50, 100, 200],
-  showEdges = true,
-  showRowsPerPage = true,
-  showTotalText = true,
-  siblingCount = 1,
-  size = 'small',
-  total = 500,
-} = defineProps<Props>();
-
-const emit = defineEmits<{
-  pageChange: [currentPage: number, pageSize: number];
-}>();
-const currentPage = defineModel<number>('currentPage', { default: 1 });
-const itemPerPage = defineModel<number>('itemPerPage', { default: 20 });
-
-const itemSize = computed(() => {
-  return SIZE_CLASS_MAP[size];
-});
-
-const options = computed(() => {
-  return pageSizeOptions.map((item) => ({
-    label: `${item} 条/页`,
-    value: `${item}`,
-  }));
-});
-
-function handleUpdateModelValue(value: string) {
-  itemPerPage.value = Number(value);
-}
-
-watch(
-  [() => itemPerPage.value, () => currentPage.value],
-  ([itemPerPage, currentPage]) => {
-    emit('pageChange', currentPage, itemPerPage);
-  },
-);
-</script>
-
-<template>
-  <Pagination
-    v-model:page="currentPage"
-    :disabled="disabled"
-    :items-per-page="itemPerPage"
-    :show-edges="showEdges"
-    :sibling-count="siblingCount"
-    :total="total"
-  >
-    <PaginationList
-      v-slot="{ items }"
-      class="flex w-full items-center justify-end gap-1"
-    >
-      <span v-if="showTotalText" class="mr-2">共 {{ total }} 条</span>
-
-      <Select
-        v-if="showRowsPerPage"
-        :model-value="`${itemPerPage}`"
-        @update:model-value="handleUpdateModelValue"
-      >
-        <SelectTrigger class="w-30 mr-auto h-8">
-          <SelectValue />
-        </SelectTrigger>
-        <SelectContent>
-          <template v-for="item in options" :key="item.value">
-            <SelectItem :value="item.value"> {{ item.label }} </SelectItem>
-          </template>
-        </SelectContent>
-      </Select>
-
-      <PaginationFirst :class="cn('size-8', itemSize)" />
-      <PaginationPrev :class="cn('size-8', itemSize)" />
-      <template v-for="(item, index) in items">
-        <PaginationListItem
-          v-if="item.type === 'page'"
-          :key="index"
-          :value="item.value"
-          as-child
-        >
-          <Button
-            :class="cn('size-8 p-0 shadow-none', itemSize)"
-            :variant="item.value === currentPage ? 'default' : 'outline'"
-          >
-            {{ item.value }}
-          </Button>
-        </PaginationListItem>
-        <PaginationEllipsis v-else :key="item.type" :index="index" />
-      </template>
-
-      <PaginationNext :class="cn('size-8', itemSize)" />
-      <PaginationLast :class="cn('size-8', itemSize)" />
-    </PaginationList>
-  </Pagination>
-</template>

packages/@core/ui-kit/shadcn-ui/src/components/pin-input/input.vue

@@ -3,8 +3,8 @@ import type { PinInputProps } from './types';
 
 import { computed, onBeforeUnmount, ref, useId, watch } from 'vue';
 
+import { PinInput, PinInputGroup, PinInputInput } from '../../ui';
 import { VbenButton } from '../button';
-import { PinInput, PinInputGroup, PinInputInput } from '../ui/pin-input';
 
 defineOptions({
   inheritAttrs: false,

packages/@core/ui-kit/shadcn-ui/src/components/popover/popover.vue

@@ -13,7 +13,7 @@ import {
   PopoverContent,
   Popover as PopoverRoot,
   PopoverTrigger,
-} from '../ui/popover';
+} from '../../ui';
 
 interface Props extends PopoverRootProps {
   class?: any;

packages/@core/ui-kit/shadcn-ui/src/components/scrollbar/scrollbar.vue

@@ -3,7 +3,7 @@ import { computed, ref } from 'vue';
 
 import { cn } from '@vben-core/shared/utils';
 
-import { ScrollArea, ScrollBar } from '../ui/scroll-area';
+import { ScrollArea, ScrollBar } from '../../ui';
 
 interface Props {
   class?: any;

packages/@core/ui-kit/shadcn-ui/src/components/segmented/segmented.vue

@@ -5,7 +5,7 @@ import { computed } from 'vue';
 
 import { TabsTrigger } from 'radix-vue';
 
-import { Tabs, TabsContent, TabsList } from '../ui/tabs';
+import { Tabs, TabsContent, TabsList } from '../../ui';
 import TabsIndicator from './tabs-indicator.vue';
 
 interface Props {

packages/@core/ui-kit/shadcn-ui/src/components/select/select.vue

@@ -5,7 +5,7 @@ import {
   SelectItem,
   SelectTrigger,
   SelectValue,
-} from '../ui/select';
+} from '../../ui';
 
 interface Props {
   class?: any;

packages/@core/ui-kit/shadcn-ui/src/components/swap/index.ts

@@ -1 +0,0 @@
-export { default as VbenSwap } from './swap.vue';

packages/@core/ui-kit/shadcn-ui/src/components/swap/swap.vue

@@ -1,126 +0,0 @@
-<script lang="ts" setup>
-interface Props {
-  /**
-   * @zh_CN 交换模式
-   */
-  mode?: 'flip' | 'rotate';
-  /**
-   * @zh_CN 开启时的样式
-   */
-  offClass?: string;
-  /**
-   * @zh_CN 关闭时的样式
-   */
-  onClass?: string;
-}
-
-defineOptions({
-  name: 'Swap',
-});
-
-withDefaults(defineProps<Props>(), {
-  mode: 'rotate',
-  onClass: '',
-});
-</script>
-
-<template>
-  <label
-    :class="{
-      'swap-flip': mode === 'flip',
-      'swap-rotate': mode === 'rotate',
-    }"
-    class="swap"
-  >
-    <input class="hidden" type="checkbox" />
-
-    <div :class="onClass" class="swap-on">
-      <slot name="swap-on"></slot>
-    </div>
-
-    <div :class="offClass" class="swap-off">
-      <slot name="swap-off"></slot>
-    </div>
-  </label>
-</template>
-
-<style scoped>
-.swap {
-  @apply relative inline-grid cursor-pointer select-none place-content-center;
-}
-
-.swap > * {
-  @apply col-start-1 row-start-1 duration-300 ease-out;
-
-  transition-property: transform, opacity;
-}
-
-.swap-rotate .swap-on,
-.swap-rotate .swap-indeterminate,
-.swap-rotate input:indeterminate ~ .swap-on {
-  @apply rotate-45;
-}
-
-.swap-rotate input:checked ~ .swap-off,
-.swap-active:where(.swap-rotate) .swap-off,
-.swap-rotate input:indeterminate ~ .swap-off {
-  @apply -rotate-45;
-}
-
-.swap-rotate input:checked ~ .swap-on,
-.swap-active:where(.swap-rotate) .swap-on,
-.swap-rotate input:indeterminate ~ .swap-indeterminate {
-  @apply rotate-0;
-}
-
-.swap-flip {
-  transform-style: preserve-3d;
-  perspective: 16em;
-}
-
-.swap-flip .swap-on,
-.swap-flip .swap-indeterminate,
-.swap-flip input:indeterminate ~ .swap-on {
-  @apply opacity-100;
-
-  transform: rotateY(180deg);
-  backface-visibility: hidden;
-}
-
-.swap-flip input:checked ~ .swap-off,
-.swap-active:where(.swap-flip) .swap-off,
-.swap-flip input:indeterminate ~ .swap-off {
-  @apply opacity-100;
-
-  transform: rotateY(-180deg);
-  backface-visibility: hidden;
-}
-
-.swap-flip input:checked ~ .swap-on,
-.swap-active:where(.swap-flip) .swap-on,
-.swap-flip input:indeterminate ~ .swap-indeterminate {
-  transform: rotateY(0deg);
-}
-
-.swap input {
-  @apply appearance-none;
-}
-
-.swap .swap-on,
-.swap .swap-indeterminate,
-.swap input:indeterminate ~ .swap-on {
-  @apply opacity-0;
-}
-
-.swap input:checked ~ .swap-off,
-.swap-active .swap-off,
-.swap input:indeterminate ~ .swap-off {
-  @apply opacity-0;
-}
-
-.swap input:checked ~ .swap-on,
-.swap-active .swap-on,
-.swap input:indeterminate ~ .swap-indeterminate {
-  @apply opacity-100;
-}
-</style>

packages/@core/ui-kit/shadcn-ui/src/components/tooltip/tooltip.vue

@@ -8,7 +8,7 @@ import {
   TooltipContent,
   TooltipProvider,
   TooltipTrigger,
-} from '../ui/tooltip';
+} from '../../ui';
 
 interface Props {
   contentClass?: any;

packages/@core/ui-kit/shadcn-ui/src/index.ts

@@ -1,2 +1,3 @@
 export * from './components';
+export * from './ui';
 export { createContext, Slot, VisuallyHidden } from 'radix-vue';