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-badge-dot.vue

@@ -0,0 +1,28 @@
+<script setup lang="ts">
+import type { CSSProperties } from 'vue';
+
+interface Props {
+  dotClass?: string;
+  dotStyle?: CSSProperties;
+}
+
+withDefaults(defineProps<Props>(), {
+  dotClass: '',
+  dotStyle: () => ({}),
+});
+</script>
+<template>
+  <span class="relative mr-1 flex size-1.5">
+    <span
+      :class="dotClass"
+      :style="dotStyle"
+      class="absolute inline-flex h-full w-full animate-ping rounded-full opacity-75"
+    >
+    </span>
+    <span
+      :class="dotClass"
+      :style="dotStyle"
+      class="relative inline-flex size-1.5 rounded-full"
+    ></span>
+  </span>
+</template>

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

@@ -0,0 +1,57 @@
+<script setup lang="ts">
+import type { MenuRecordBadgeRaw } from '@vben-core/typings';
+
+import { computed } from 'vue';
+
+import { isValidColor } from '@vben-core/shared/color';
+
+import BadgeDot from './menu-badge-dot.vue';
+
+interface Props extends MenuRecordBadgeRaw {
+  hasChildren?: boolean;
+}
+
+const props = withDefaults(defineProps<Props>(), {});
+
+const variantsMap: Record<string, string> = {
+  default: 'bg-green-500',
+  destructive: 'bg-destructive',
+  primary: 'bg-primary',
+  success: 'bg-green-500',
+  warning: 'bg-yellow-500',
+};
+
+const isDot = computed(() => props.badgeType === 'dot');
+
+const badgeClass = computed(() => {
+  const { badgeVariants } = props;
+
+  if (!badgeVariants) {
+    return variantsMap.default;
+  }
+
+  return variantsMap[badgeVariants] || badgeVariants;
+});
+
+const badgeStyle = computed(() => {
+  if (badgeClass.value && isValidColor(badgeClass.value)) {
+    return {
+      backgroundColor: badgeClass.value,
+    };
+  }
+  return {};
+});
+</script>
+<template>
+  <span v-if="isDot || badge" :class="$attrs.class" class="absolute">
+    <BadgeDot v-if="isDot" :dot-class="badgeClass" :dot-style="badgeStyle" />
+    <div
+      v-else
+      :class="badgeClass"
+      :style="badgeStyle"
+      class="text-primary-foreground flex-center rounded-xl px-1.5 py-0.5 text-[10px]"
+    >
+      {{ badge }}
+    </div>
+  </span>
+</template>

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 { MenuItem, SubMenu as SubMenuComp } from './components';
+import { MenuBadge, 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"