@veltra/desktop 1.1.1 → 1.1.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@veltra/desktop",
-  "version": "1.1.1",
+  "version": "1.1.2",
   "files": [
     "dist",
     "src"
@@ -61,22 +61,22 @@
     "@lexical/rich-text": "^0.43.0",
     "@lexical/selection": "^0.43.0",
     "@lexical/utils": "^0.43.0",
-    "@veltra/compositions": "1.1.1",
-    "@veltra/directives": "1.1.1",
-    "@veltra/icons": "1.1.1",
-    "@veltra/styles": "1.1.1",
-    "@veltra/utils": "1.1.1",
+    "@veltra/compositions": "1.1.2",
+    "@veltra/directives": "1.1.2",
+    "@veltra/icons": "1.1.2",
+    "@veltra/styles": "1.1.2",
+    "@veltra/utils": "1.1.2",
     "@visactor/vtable": "^1.26.0",
     "codemirror": "^6.0.2",
     "docx-preview": "^0.3.7",
     "lexical": "^0.43.0"
   },
   "peerDependencies": {
-    "@veltra/compositions": "1.1.1",
-    "@veltra/directives": "1.1.1",
-    "@veltra/icons": "1.1.1",
-    "@veltra/styles": "1.1.1",
-    "@veltra/utils": "1.1.1",
+    "@veltra/compositions": "1.1.2",
+    "@veltra/directives": "1.1.2",
+    "@veltra/icons": "1.1.2",
+    "@veltra/styles": "1.1.2",
+    "@veltra/utils": "1.1.2",
     "vue": "^3.5.33"
   }
 }

package/src/components/auto-complete/auto-complete.vue

@@ -71,13 +71,14 @@
 </template>
 
 <script lang="ts" setup>
-import { useFormComponent, useFormFallbackProps } from '@veltra/compositions'
+import { useFormFallbackProps } from '@veltra/compositions'
 import { vRipple } from '@veltra/directives'
 import { bem, FORM_EMPTY_CONTENT, scrollIntoContainerView } from '@veltra/utils'
 import { computed, shallowRef, watch } from 'vue'
 
 import type { AutoCompleteEmits, AutoCompleteProps, _AutoCompleteExposed } from '../../types'
 import type { DropdownExposed, ScrollExposed } from '../../types'
+import { injectFormContext } from '../../utils/form-context'
 import { UDropdown } from '../dropdown'
 import { UInput } from '../input'
 import { UScroll } from '../scroll'
@@ -108,7 +109,7 @@ const cls = bem('auto-complete')
 
 const optionClass = cls.e('option')
 
-const { formProps } = useFormComponent()
+const { formProps } = injectFormContext()
 const { size, disabled, readonly } = useFormFallbackProps([formProps ?? {}, props], {
   size: 'default',
   disabled: false,

package/src/components/auto-complete/style.scss

@@ -22,7 +22,7 @@ $root-name: auto-complete;
     }
 
     @include m.bem(tag) {
-      border: fn.use-var(border);
+      border: fn.use-var(border-muted);
     }
   }
 
@@ -68,7 +68,7 @@ $root-name: auto-complete;
 
   @include m.is(multiple) {
     line-height: 1;
-    border: fn.use-var(border);
+    border: fn.use-var(border-muted);
     box-shadow: fn.use-var(shadow, emboss);
     transition: border-color 0.25s ease, box-shadow 0.25s ease;
     overflow: hidden;

package/src/components/cascade/cascade.vue

@@ -105,12 +105,13 @@
 
 <script lang="ts" setup>
 import { Forest, o } from '@cat-kit/core'
-import { useFormComponent, useFormFallbackProps, useUserAction } from '@veltra/compositions'
+import { useFormFallbackProps, useUserAction } from '@veltra/compositions'
 import { ArrowDown, Close, Search } from '@veltra/icons/normal'
 import { bem, FORM_EMPTY_CONTENT } from '@veltra/utils'
 import { computed, provide, shallowRef, triggerRef, watch } from 'vue'
 
 import type { CascadeProps, CascadeEmits, DropdownExposed } from '../../types'
+import { injectFormContext } from '../../utils/form-context'
 import { UDropdown } from '../dropdown'
 import { UEmpty } from '../empty'
 import { UIcon } from '../icon'
@@ -145,7 +146,7 @@ const emit = defineEmits<CascadeEmits>()
 
 const cls = bem('cascade')
 
-const { formProps } = useFormComponent()
+const { formProps } = injectFormContext()
 
 const { size, disabled, readonly } = useFormFallbackProps([formProps ?? {}, props], {
   size: 'default',

package/src/components/cascade/style.scss

@@ -10,7 +10,7 @@ $menu-name: $root-name + '-panel-item';
   width: 100%;
 
   @include m.is(multiple) {
-    border: fn.use-var(border);
+    border: fn.use-var(border-muted);
     box-shadow: fn.use-var(shadow, emboss);
     transition: border-color 0.25s ease, box-shadow 0.25s ease;
     overflow: hidden;

package/src/components/checkbox/checkbox-button.vue

@@ -13,11 +13,12 @@
 </template>
 
 <script lang="ts" setup>
-import { useFormComponent, useFormFallbackProps } from '@veltra/compositions'
+import { useFormFallbackProps } from '@veltra/compositions'
 import { bem, FORM_EMPTY_CONTENT } from '@veltra/utils'
 import { computed } from 'vue'
 
 import type { CheckboxButtonProps, CheckboxButtonEmits } from '../../types'
+import { injectFormContext } from '../../utils/form-context'
 import { UTag } from '../tag'
 
 defineOptions({
@@ -41,7 +42,7 @@ const cls = bem('checkbox-button')
 
 const checked = defineModel<boolean>()
 
-const { formProps } = useFormComponent()
+const { formProps } = injectFormContext()
 
 const { size, disabled, readonly } = useFormFallbackProps([formProps ?? {}, props], {
   size: 'default',

package/src/components/checkbox/checkbox.vue

@@ -18,11 +18,12 @@
 </template>
 
 <script lang="ts" setup>
-import { useFormComponent, useFormFallbackProps } from '@veltra/compositions'
+import { useFormFallbackProps } from '@veltra/compositions'
 import { bem } from '@veltra/utils'
 import { computed } from 'vue'
 
 import type { CheckboxProps, CheckboxEmits } from '../../types'
+import { injectFormContext } from '../../utils/form-context'
 
 defineOptions({
   name: 'Checkbox'
@@ -37,7 +38,7 @@ const cls = bem('checkbox')
 
 const checked = defineModel<boolean>()
 
-const { formProps } = useFormComponent()
+const { formProps } = injectFormContext()
 
 const { size, disabled, readonly } = useFormFallbackProps([formProps ?? {}, props], {
   size: 'default',

package/src/components/checkbox/style.scss

@@ -19,7 +19,7 @@ $root-name: checkbox;
     @include m.is(disabled) {
       @include m.bem($root-name, wrap) {
         background-color: fn.use-var(text-color, disabled);
-        border-color: fn.use-var(border, color);
+        border-color: fn.use-var(border, muted-color);
       }
     }
   }
@@ -72,7 +72,7 @@ $root-name: checkbox;
 
 $button-name: checkbox-button;
 @include m.b($button-name) {
-  border: fn.use-var(border);
+  border: fn.use-var(border-muted);
   vertical-align: middle;
   display: inline-flex;
   align-items: center;

package/src/components/checkbox-group/checkbox-group.vue

@@ -26,10 +26,11 @@
 </template>
 
 <script lang="ts" setup>
-import { useFormComponent, useFormFallbackProps } from '@veltra/compositions'
+import { useFormFallbackProps } from '@veltra/compositions'
 import { bem, FORM_EMPTY_CONTENT } from '@veltra/utils'
 
 import type { CheckboxGroupProps, CheckboxGroupEmits } from '../../types'
+import { injectFormContext } from '../../utils/form-context'
 import { UCheckbox } from '../checkbox'
 import { UTag } from '../tag'
 
@@ -50,7 +51,7 @@ const model = defineModel<any[]>()
 
 const cls = bem('checkbox-group')
 
-const { formProps } = useFormComponent()
+const { formProps } = injectFormContext()
 
 const { size, disabled, readonly } = useFormFallbackProps([formProps ?? {}, props], {
   size: 'default',

package/src/components/code-editor/code-editor.vue

@@ -8,7 +8,7 @@
 import { Compartment, EditorState, type Extension } from '@codemirror/state'
 import { oneDark } from '@codemirror/theme-one-dark'
 import { ViewPlugin, tooltips, type ViewUpdate } from '@codemirror/view'
-import { useFormComponent, useFormFallbackProps } from '@veltra/compositions'
+import { useFormFallbackProps } from '@veltra/compositions'
 import { bem, zIndex } from '@veltra/utils'
 import { EditorView, basicSetup } from 'codemirror'
 import {
@@ -21,6 +21,7 @@ import {
 } from 'vue'
 
 import type { CodeEditorLang, CodeEditorProps } from '../../types'
+import { injectFormContext } from '../../utils/form-context'
 import { UScroll } from '../scroll'
 
 defineOptions({ name: 'CodeEditor' })
@@ -36,7 +37,7 @@ const model = defineModel<string>()
 
 const cls = bem('code-editor')
 
-const { formProps } = useFormComponent()
+const { formProps } = injectFormContext()
 
 const { disabled, readonly } = useFormFallbackProps([formProps ?? {}, props], {
   disabled: false,

package/src/components/code-editor/style.scss

@@ -11,7 +11,7 @@ $root-name: code-editor;
   --u-code-editor-padding-block: 6px;
   --u-code-editor-bg: #{fn.use-var(bg, color, top)};
   --u-code-editor-fg: #{fn.use-var(text-color, main)};
-  --u-code-editor-border: #{fn.use-var(border, color)};
+  --u-code-editor-border: #{fn.use-var(border, muted-color)};
   --u-code-editor-gutter-fg: #{fn.use-var(text-color, placeholder)};
   --u-code-editor-active-bg: rgba(30, 136, 229, 0.06);
   --u-code-editor-selection-bg: rgba(30, 136, 229, 0.18);

package/src/components/collapse/collapse-item.vue

@@ -49,7 +49,7 @@ defineOptions({
 
 const props = defineProps<CollapseItemProps>()
 
-const context = inject(CollapseDIKey)
+const context = inject(CollapseDIKey)!
 
 const cls = context?.cls ?? bem('collapse')
 
@@ -80,59 +80,21 @@ const handleClick = () => {
 }
 
 const wrapperEl = ref<HTMLElement>()
-let cleanupTransition: (() => void) | null = null
 
-const cancelTransition = () => {
-  cleanupTransition?.()
-  cleanupTransition = null
-}
-
-// 用 height 数值过渡替代 grid-template-rows，避免每帧 grid 重排带来的卡顿。
-const animateHeight = (active: boolean) => {
-  const el = wrapperEl.value
-  if (!el) return
-
-  cancelTransition()
-
-  const startHeight = el.offsetHeight
-  const endHeight = active ? el.scrollHeight : 0
-
-  if (startHeight === endHeight) {
-    el.style.height = active ? 'auto' : '0px'
-    return
-  }
-
-  el.style.height = `${startHeight}px`
-  // 强制 reflow，确保起始高度被采纳，避免 0 → auto 直接跳变。
-  void el.offsetHeight
-  el.style.height = `${endHeight}px`
-
-  const onEnd = (e: TransitionEvent) => {
-    if (e.target !== el || e.propertyName !== 'height') return
-    cleanup()
-    if (active) {
-      // 回归 auto，让后续内容动态变化时不被锁死高度。
-      el.style.height = 'auto'
-    }
-  }
-
-  const cleanup = () => {
-    el.removeEventListener('transitionend', onEnd)
-    el.removeEventListener('transitioncancel', onEnd)
-    cleanupTransition = null
-  }
-
-  el.addEventListener('transitionend', onEnd)
-  el.addEventListener('transitioncancel', onEnd)
-  cleanupTransition = cleanup
-}
+const { expandTransition } = context
 
 onMounted(() => {
   if (!wrapperEl.value) return
-  wrapperEl.value.style.height = isActive.value ? 'auto' : '0px'
+  expandTransition.setExpanded(wrapperEl.value, isActive.value)
 })
 
-watch(isActive, animateHeight)
+watch(isActive, (active) => {
+  if (!wrapperEl.value) return
+  active ? expandTransition.expand(wrapperEl.value) : expandTransition.collapse(wrapperEl.value)
+})
 
-onBeforeUnmount(cancelTransition)
+onBeforeUnmount(() => {
+  if (!wrapperEl.value) return
+  expandTransition.cancel(wrapperEl.value)
+})
 </script>

package/src/components/collapse/collapse.vue

@@ -6,7 +6,7 @@
 
 <script lang="ts" setup>
 import { useFormFallbackProps, useModel } from '@veltra/compositions'
-import { bem } from '@veltra/utils'
+import { bem, ExpandTransition } from '@veltra/utils'
 import { computed, provide } from 'vue'
 
 import type {
@@ -31,6 +31,10 @@ const emit = defineEmits<CollapseEmits>()
 
 const cls = bem('collapse')
 
+const expandTransition = new ExpandTransition({
+  transition: 'height 0.24s cubic-bezier(0.4, 0, 0.2, 1)'
+})
+
 const { size } = useFormFallbackProps([props], { size: 'default' })
 
 const iconPosition = computed(() => props.iconPosition ?? 'right')
@@ -109,7 +113,8 @@ provide(CollapseDIKey, {
   iconPosition,
   expandIcon,
   activeValues,
-  toggle
+  toggle,
+  expandTransition
 })
 
 defineExpose<_CollapseExposed>({

package/src/components/collapse/di.ts

@@ -1,4 +1,4 @@
-import type { BEM, ComponentSize } from '@veltra/utils'
+import { type BEM, type ComponentSize, ExpandTransition } from '@veltra/utils'
 import type { Component, ComputedRef, InjectionKey } from 'vue'
 
 import type { CollapseIconPosition, CollapseValue } from '../../types'
@@ -10,6 +10,7 @@ export interface CollapseContext {
   expandIcon: ComputedRef<Component | undefined>
   activeValues: ComputedRef<CollapseValue[]>
   toggle: (value: CollapseValue) => void
+  expandTransition: ExpandTransition
 }
 
 export const CollapseDIKey: InjectionKey<CollapseContext> = Symbol('Collapse')

package/src/components/collapse/style.scss

@@ -124,7 +124,7 @@ $header-padding-y: (
   }
 
   // ===== Content wrapper =====
-  // 高度由 collapse-item.vue 的 JS 在 isActive 切换时驱动：
+  // 高度由共享 expand transition hook 在 isActive 切换时驱动：
   //   未挂载前 → CSS 兜底 height: 0
   //   未激活   → 0px（带 transition）
   //   激活中   → 0 → scrollHeight（CSS transition: height）

package/src/components/date-picker/date-picker.vue

@@ -36,13 +36,14 @@
 
 <script lang="ts" setup>
 import { date, type Dater } from '@cat-kit/core'
-import { useFormComponent, useFormFallbackProps, useUserAction } from '@veltra/compositions'
+import { useFormFallbackProps, useUserAction } from '@veltra/compositions'
 import { Calendar } from '@veltra/icons/normal'
 import { bem, FORM_EMPTY_CONTENT } from '@veltra/utils'
 import { computed, shallowRef, watch } from 'vue'
 
 import type { DatePickerEmits, DatePickerProps } from '../../types'
 import type { DropdownExposed } from '../../types'
+import { injectFormContext } from '../../utils/form-context'
 import { UDatePanel } from '../date-panel'
 import { UDropdown } from '../dropdown'
 import { UIcon } from '../icon'
@@ -64,7 +65,7 @@ const emit = defineEmits<DatePickerEmits>()
 
 const cls = bem('date-picker')
 
-const { formProps } = useFormComponent()
+const { formProps } = injectFormContext()
 
 const { size, disabled, readonly } = useFormFallbackProps([formProps ?? {}, props], {
   size: 'default',

package/src/components/date-range-picker/date-range-picker.vue

@@ -61,12 +61,13 @@
 
 <script lang="ts" setup>
 import { date, type Dater } from '@cat-kit/core'
-import { useFormComponent, useFormFallbackProps, useUserAction } from '@veltra/compositions'
+import { useFormFallbackProps, useUserAction } from '@veltra/compositions'
 import { Calendar, Close } from '@veltra/icons/normal'
 import { bem, FORM_EMPTY_CONTENT } from '@veltra/utils'
 import { computed, shallowRef, watch } from 'vue'
 
 import type { DateRangePickerEmits, DateRangePickerProps, DropdownExposed } from '../../types'
+import { injectFormContext } from '../../utils/form-context'
 import { UDatePanel } from '../date-panel'
 import { UDropdown } from '../dropdown'
 import { UIcon } from '../icon'
@@ -91,7 +92,7 @@ const className = computed(() => {
   return [cls.b, cls.m(size.value), bem.is('disabled', disabled.value)]
 })
 
-const { formProps } = useFormComponent()
+const { formProps } = injectFormContext()
 
 const { size, disabled, readonly } = useFormFallbackProps([formProps ?? {}, props], {
   size: 'default',

package/src/components/date-range-picker/style.scss

@@ -9,7 +9,7 @@ $root-name: date-range-picker;
   width: 100%;
   vertical-align: middle;
   line-height: 1;
-  border: fn.use-var(border);
+  border: fn.use-var(border-muted);
   box-shadow: fn.use-var(shadow, emboss);
   transition: border-color 0.25s ease, box-shadow 0.25s ease;
   overflow: hidden;

package/src/components/expression-editor/expression-editor.vue

@@ -29,7 +29,7 @@
 </template>
 
 <script lang="ts" setup>
-import { useFormComponent, useFormFallbackProps } from '@veltra/compositions'
+import { useFormFallbackProps } from '@veltra/compositions'
 import { bem } from '@veltra/utils'
 import {
   computed,
@@ -42,6 +42,7 @@ import {
 } from 'vue'
 
 import type { ExpressionEditorProps, VariableItem } from '../../types'
+import { injectFormContext } from '../../utils/form-context'
 import VariablePicker from './components/variable-picker.vue'
 import { createEditor, type EditorAPI } from './core/editor'
 import { createMention, type MentionAPI } from './core/mention'
@@ -62,7 +63,7 @@ const emit = defineEmits<{
 }>()
 
 const cls = bem('expression-editor')
-const { formProps } = useFormComponent()
+const { formProps } = injectFormContext()
 const { size, disabled, readonly } = useFormFallbackProps([formProps ?? {}, props])
 
 const containerRef = useTemplateRef<HTMLDivElement>('container')

package/src/components/expression-editor/style.scss

@@ -9,7 +9,7 @@ $root-name: expression-editor;
   background-color: fn.use-var(bg-color, top);
   border-width: fn.use-var(border, width);
   border-style: fn.use-var(border, style);
-  border-color: fn.use-var(border, color);
+  border-color: fn.use-var(border, muted-color);
   border-radius: fn.use-var(radius, default);
 
   @include m.is-not(disabled, readonly) {
@@ -26,21 +26,21 @@ $root-name: expression-editor;
   @include m.is('disabled') {
     background-color: fn.use-var(color, disabled);
     cursor: not-allowed;
-    border-color: fn.use-var(border, color);
+    border-color: fn.use-var(border, muted-color);
 
     &:hover {
-      border-color: fn.use-var(border, color);
+      border-color: fn.use-var(border, muted-color);
     }
   }
 
   @include m.is('readonly') {
     background-color: fn.use-var(bg-color, middle);
     cursor: default;
-    border-color: fn.use-var(border, color);
+    border-color: fn.use-var(border, muted-color);
     user-select: text;
 
     &:hover {
-      border-color: fn.use-var(border, color);
+      border-color: fn.use-var(border, muted-color);
     }
   }
 

package/src/components/form/form.vue

@@ -31,11 +31,11 @@
 
 <script lang="tsx" setup generic="Model extends FormModel | DynamicFormModel">
 import { o } from '@cat-kit/core'
-import { useFormComponent } from '@veltra/compositions'
 import { bem } from '@veltra/utils'
 import { shallowRef, toRef } from 'vue'
 
 import type { BreakCols, GridExposed, FormProps, _FormExposed } from '../../types'
+import { provideFormContext } from '../../utils/form-context'
 import { UFormItem } from '../form-item'
 import { UGrid } from '../grid'
 import type { DynamicFormModel } from './dynamic-form-model'
@@ -67,7 +67,7 @@ const breakpointCols: BreakCols = {
   default: 4
 }
 
-useFormComponent(props)
+provideFormContext(props)
 
 const { getSlotsNodes } = useNodeInterceptor({ props })
 

package/src/components/form-item/form-item.vue

@@ -33,11 +33,12 @@
 </template>
 
 <script lang="tsx" setup>
-import { useConfig, useFallbackProps, useFormComponent } from '@veltra/compositions'
+import { useConfig, useFallbackProps } from '@veltra/compositions'
 import { bem, withUnit } from '@veltra/utils'
 import { type CSSProperties, computed } from 'vue'
 
 import type { FormItemProps, ComponentSize } from '../../types'
+import { injectFormContext } from '../../utils/form-context'
 import { UGridItem } from '../grid'
 import { UTip } from '../tip'
 import { formItemCls as cls } from './helper'
@@ -57,7 +58,7 @@ defineSlots<{
 }>()
 
 /** 表单组件上下文 */
-const { formProps } = useFormComponent()
+const { formProps } = injectFormContext()
 
 const { config } = useConfig()
 

package/src/components/form-item/style.scss

@@ -62,7 +62,6 @@ $root-name: form-item;
   @include m.e(content) {
     flex-grow: 1;
     word-break: break-all;
-    overflow: hidden;
     @include m.flex($wrap: wrap);
 
     @include m.bem($root-name, viewer) {

package/src/components/grid-input/style.scss

@@ -12,7 +12,7 @@ $root-name: grid-input;
       width: fn.use-var(form-component-height, $size);
       height: fn.use-var(form-component-height, $size);
       line-height: fn.use-var(form-component-height, $size);
-      border: fn.use-var(border);
+      border: fn.use-var(border-muted);
       border-radius: fn.use-var(gap, $size);
       outline: none;
       text-align: center;

package/src/components/group-input/group-input.vue

@@ -34,12 +34,13 @@
 </template>
 
 <script lang="ts" setup generic="GroupItem extends Record<string, any>">
-import { useFormComponent, useFormFallbackProps } from '@veltra/compositions'
+import { useFormFallbackProps } from '@veltra/compositions'
 import { Minus, Plus } from '@veltra/icons/normal'
 import { bem, FORM_EMPTY_CONTENT } from '@veltra/utils'
 import { computed } from 'vue'
 
 import type { GroupInputEmits, GroupInputProps } from '../../types'
+import { injectFormContext } from '../../utils/form-context'
 import { UButton } from '../button'
 import { useGroupItems } from './use-group-items'
 
@@ -58,7 +59,7 @@ const emit = defineEmits<GroupInputEmits>()
 
 const cls = bem('group-input')
 
-const { formProps } = useFormComponent()
+const { formProps } = injectFormContext()
 const { disabled, size, readonly } = useFormFallbackProps([formProps ?? {}, props], {
   size: 'default',
   disabled: false,

package/src/components/input/input.vue

@@ -53,12 +53,13 @@
 </template>
 
 <script lang="tsx" setup>
-import { useFocus, useFormComponent, useFormFallbackProps } from '@veltra/compositions'
+import { useFocus, useFormFallbackProps } from '@veltra/compositions'
 import { Close } from '@veltra/icons/normal'
 import { bem, FORM_EMPTY_CONTENT } from '@veltra/utils'
 import { computed, getCurrentInstance, ref, shallowRef, nextTick } from 'vue'
 
 import type { InputEmits, InputProps, _InputExposed } from '../../types'
+import { injectFormContext } from '../../utils/form-context'
 import { UIcon } from '../icon'
 
 defineOptions({
@@ -80,7 +81,7 @@ const inst = getCurrentInstance()
 
 const cls = bem('input')
 
-const { formProps } = useFormComponent()
+const { formProps } = injectFormContext()
 
 const { size, disabled, readonly } = useFormFallbackProps([formProps ?? {}, props])
 

package/src/components/input/style.scss

@@ -8,7 +8,7 @@ $root-name: input;
 @include m.b($root-name) {
   vertical-align: middle;
   line-height: 1;
-  border: fn.use-var(border);
+  border: fn.use-var(border-muted);
   box-shadow: fn.use-var(shadow, emboss);
   transition:
     border-color 0.25s ease,

package/src/components/menu/di.ts

@@ -1,4 +1,4 @@
-import type { BEM } from '@veltra/utils'
+import { type BEM, ExpandTransition } from '@veltra/utils'
 import type { ComputedRef, InjectionKey } from 'vue'
 
 import type { MenuProps, MenuEmits } from '../../types'
@@ -11,6 +11,7 @@ export interface MenuContext {
   menuEmit: MenuEmits
   expandedPath: Set<string>
   size: ComputedRef<ComponentSize>
+  expandTransition: ExpandTransition
 }
 
 export const MenuDIKey: InjectionKey<MenuContext> = Symbol('MenuDIKey')