docs:Collapse Dropdown 文档

packages/components/Collapse/Collapse.vue

@@ -2,7 +2,7 @@
 import { ref, provide, watch } from 'vue'
 import { each } from 'lodash-es'
 import type {
-  NameType,
+  CollapseItemName,
   CollapseProps,
   CollapseEmits,
   CollapseContext
@@ -18,7 +18,7 @@ defineOptions({
 
 const props = defineProps<CollapseProps>()
 const emits = defineEmits<CollapseEmits>()
-const activeNames = ref<NameType[]>(props.modelValue)
+const activeNames = ref<CollapseItemName[]>(props.modelValue)
 watch(
   () => props.modelValue,
   val => {
@@ -30,7 +30,7 @@ if (props.accordion && activeNames.value.length > 1) {
   debugWarn(COMPONENT_NAME, 'accordion mode should only have one active item')
 }
 
-function handleItemClick(item: NameType) {
+function handleItemClick(item: CollapseItemName) {
   let _activeNames = [...activeNames.value]
   // 手风琴模式
   if (props.accordion) {
@@ -50,7 +50,7 @@ function handleItemClick(item: NameType) {
   updateActiveNames(_activeNames)
 }
 
-function updateActiveNames(val: NameType[]) {
+function updateActiveNames(val: CollapseItemName[]) {
   activeNames.value = val
   each(['update:modelValue', 'change'], e =>
     emits(e as 'update:modelValue' & 'change', val)

packages/components/Collapse/CollapseItem.vue

@@ -37,9 +37,11 @@ function handleClick() {
       }"
       @click="handleClick"
     >
-      <slot name="title">
-        {{ title }}
-      </slot>
+      <span class="er-collapse-item__title">
+        <slot name="title">
+          {{ title }}
+        </slot>
+      </span>
       <er-icon icon="angle-right" class="header-angle" />
     </div>
     <transition name="slide" v-on="transitionEvents">

packages/components/Collapse/types.ts

@@ -1,23 +1,23 @@
 import type { Ref } from "vue";
-export type NameType = string | number;
+export type CollapseItemName = string | number;
 
 export interface CollapseProps {
-  modelValue: NameType[];
+  modelValue: CollapseItemName[];
   accordion?: boolean;
 }
 
 export interface CollapseItemProps {
-  name: NameType;
+  name: CollapseItemName;
   title?: string;
   disabled?: boolean;
 }
 
 export interface CollapseContext {
-  activeNames: Ref<NameType[]>;
-  handleItemClick(name: NameType): void;
+  activeNames: Ref<CollapseItemName[]>;
+  handleItemClick(name: CollapseItemName): void;
 }
 
 export interface CollapseEmits {
-  (e: "update:modelValue", value: NameType[]): void;
-  (e: "change", value: NameType[]): void;
+  (e: "update:modelValue", value: CollapseItemName[]): void;
+  (e: "change", value: CollapseItemName[]): void;
 }

packages/components/Dropdown/Dropdown.vue

@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import { ref, computed, provide } from 'vue'
-import { omit } from 'lodash-es'
+import { omit, isNil } from 'lodash-es'
 import type {
   DropdownProps,
   DropdownEmits,
@@ -10,6 +10,7 @@ import type {
 } from './types'
 import { DROPDOWN_CTX_KEY } from './constants'
 import type { TooltipInstance } from '../Tooltip/types'
+import { useId } from '@eric-ui/hooks'
 
 import DropdownItem from './DropdownItem.vue'
 import Tooltip from '../Tooltip/Tooltip.vue'
@@ -19,7 +20,7 @@ defineOptions({
   inheritAttrs: false
 })
 const props = withDefaults(defineProps<DropdownProps>(), {
-  hideAfterClick: true,
+  hideOnClick: true,
   menuOptions: () => [] as MenuOption[]
 })
 const emits = defineEmits<DropdownEmits>()
@@ -29,15 +30,15 @@ const tooltipProps = computed(() =>
   omit(props, ['menuOptions', 'hideAfterClick'])
 )
 
-function handleItemClick(e: unknown) {
+function handleItemClick(e: MenuOption) {
   if ((e as MenuOption).disabled) return
-  emits('select', e as MenuOption)
-  props.hideAfterClick && tooltipRef.value?.hide()
+  props.hideOnClick && tooltipRef.value?.hide()
+  !isNil(e.command) && emits('command', e.command)
 }
 
 defineExpose<DropdownInstance>({
-  show: () => tooltipRef.value?.show(),
-  hide: () => tooltipRef.value?.hide()
+  handleOpen: () => tooltipRef.value?.show(),
+  handleClose: () => tooltipRef.value?.hide()
 })
 
 provide<DropdownContext>(DROPDOWN_CTX_KEY, {
@@ -56,7 +57,10 @@ provide<DropdownContext>(DROPDOWN_CTX_KEY, {
       <template #content>
         <ul class="er-dropdown__menu">
           <slot name="dropdown">
-            <template v-for="item in menuOptions" :key="item.name">
+            <template
+              v-for="item in items"
+              :key="item.command ?? useId().value"
+            >
               <dropdown-item v-bind="item" />
             </template>
           </slot>
@@ -66,6 +70,6 @@ provide<DropdownContext>(DROPDOWN_CTX_KEY, {
   </div>
 </template>
 
-<style>
+<style scoped>
 @import './style.css';
 </style>

packages/components/Dropdown/DropdownItem.vue

@@ -1,24 +1,26 @@
 <script setup lang="ts">
-import { type MenuOption } from './types'
+import { type DropdownItemProps } from './types'
 import { DROPDOWN_CTX_KEY } from './constants'
+import { useId } from '@eric-ui/hooks'
 import { inject } from 'vue'
 
 defineOptions({
   name: 'ErDropdownItem'
 })
-const props = defineProps<MenuOption>()
+const props = defineProps<DropdownItemProps>()
 
 const ctx = inject(DROPDOWN_CTX_KEY)
 
 function handleClick() {
+  if (props.disabled) return
   ctx?.handleItemClick(props)
 }
 </script>
 
 <template>
   <li v-if="divided" role="separator" class="divided-placeholder"></li>
   <li
-    :id="`dropdown-item-${name}`"
+    :id="`dropdown-item-${command ?? useId().value}`"
     :class="{
       'er-dropdown__item': true,
       'is-disabled': disabled,
@@ -32,6 +34,6 @@ function handleClick() {
   </li>
 </template>
 
-<style>
+<style scoped>
 @import './style.css';
 </style>

packages/components/Dropdown/types.ts

@@ -1,28 +1,28 @@
 import type { VNode } from "vue";
 import type { TooltipProps } from "../Tooltip/types";
 
-export interface MenuOption {
-  label: string | VNode;
-  name: string | number;
+export interface DropdownItemProps {
+  command?: string | number;
+  label?: string | VNode;
   disabled?: boolean;
   divided?: boolean;
 }
 
 export interface DropdownProps extends TooltipProps {
-  menuOptions?: MenuOption[];
-  hideAfterClick?: boolean;
+  items?: DropdownItemProps[];
+  hideOnClick?: boolean;
 }
 
 export interface DropdownEmits {
   (e: "visible-change", value: boolean): void;
-  (e: "select", value: MenuOption): void;
+  (e: "command", value: DropdownItemProps["command"]): void;
 }
 
 export interface DropdownInstance {
-  show(): void;
-  hide(): void;
+  handleOpen(): void;
+  handleClose(): void;
 }
 
 export interface DropdownContext {
-  handleItemClick(item: MenuOption): void;
+  handleItemClick(item: DropdownItemProps): void;
 }