@veltra/desktop 1.1.0 → 1.1.2

package/src/components/menu/menu-sub.vue

@@ -24,11 +24,11 @@
 
     <!-- @vue-ignore -->
     <transition
-      @enter="enter"
-      @after-enter="afterEnter"
-      @leave="leave"
-      @before-leave="beforeLeave"
-      @after-leave="afterLeave"
+      @enter="(el: Element) => expandTransition.enter(el as HTMLElement)"
+      @after-enter="(el: Element) => expandTransition.afterEnter(el as HTMLElement)"
+      @before-leave="(el: Element) => expandTransition.beforeLeave(el as HTMLElement)"
+      @leave="(el: Element) => expandTransition.leave(el as HTMLElement)"
+      @after-leave="(el: Element) => expandTransition.afterLeave(el as HTMLElement)"
     >
       <ul :class="cls.e('sub-list')" v-show="expanded">
         <template v-for="(child, index) of menu.children!" :key="getKey(index, parentKey)">
@@ -51,15 +51,12 @@ import { MenuDIKey } from './di'
 import { getKey } from './helper'
 import UMenuIcon from './menu-icon.vue'
 import UMenuItem from './menu-item.vue'
-import { useMenuTransition } from './use-menu-transition'
 
 defineOptions({ name: 'MenuSub' })
 
 const props = defineProps<{ menu: MenuItem; parentKey: string; depth: number }>()
 
-const { cls, expandedPath, menuProps } = inject(MenuDIKey)!
-
-const { enter, afterEnter, beforeLeave, leave, afterLeave } = useMenuTransition()
+const { cls, expandedPath, menuProps, expandTransition } = inject(MenuDIKey)!
 
 const expanded = computed(() => expandedPath.has(props.menu.path))
 

package/src/components/menu/menu.vue

@@ -34,7 +34,7 @@
 
 <script lang="ts" setup>
 import { useFallbackProps } from '@veltra/compositions'
-import { bem } from '@veltra/utils'
+import { bem, ExpandTransition } from '@veltra/utils'
 import { computed, provide, shallowReactive, watch } from 'vue'
 
 import type { MenuEmits, MenuProps, ComponentSize } from '../../types'
@@ -66,6 +66,14 @@ const menuCls = computed(() => {
   return props.collapsed ? collapsedCls : cls
 })
 
+const expandTransition = new ExpandTransition({
+  enterTransition:
+    'height 0.25s cubic-bezier(0.4, 0, 0.2, 1), padding-top 0.25s cubic-bezier(0.4, 0, 0.2, 1), padding-bottom 0.25s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.18s cubic-bezier(0.4, 0, 0.2, 1)',
+  leaveTransition:
+    'height 0.2s cubic-bezier(0.4, 0, 1, 1), padding-top 0.2s cubic-bezier(0.4, 0, 1, 1), padding-bottom 0.2s cubic-bezier(0.4, 0, 1, 1), opacity 0.12s cubic-bezier(0.4, 0, 1, 1)',
+  opacity: true
+})
+
 const { size } = useFallbackProps([props], {
   size: 'default' as ComponentSize
 })
@@ -98,6 +106,7 @@ provide(MenuDIKey, {
   menuProps: props,
   menuEmit: emit,
   expandedPath,
-  size
+  size,
+  expandTransition
 })
 </script>

package/src/components/multi-select/multi-select.vue

@@ -140,7 +140,7 @@
 
 <script lang="ts" setup>
 import { o as chainObj } from '@cat-kit/core'
-import { useFormComponent, useFormFallbackProps, useVirtualizer } from '@veltra/compositions'
+import { useFormFallbackProps, useVirtualizer } from '@veltra/compositions'
 import { ArrowDown, Close, Search } from '@veltra/icons/normal'
 import { bem, FORM_EMPTY_CONTENT } from '@veltra/utils'
 import { computed, shallowRef, shallowReactive, watch, provide } from 'vue'
@@ -151,6 +151,7 @@ import type {
   ScrollExposed,
   DropdownExposed
 } from '../../types'
+import { injectFormContext } from '../../utils/form-context'
 import { UCheckbox } from '../checkbox'
 import { UDropdown } from '../dropdown'
 import { UEmpty } from '../empty'
@@ -179,7 +180,7 @@ const emit = defineEmits<MultiSelectEmits>()
 
 const cls = bem('multi-select')
 
-const { formProps } = useFormComponent()
+const { formProps } = injectFormContext()
 
 const { size, disabled, readonly } = useFormFallbackProps([formProps ?? {}, props], {
   size: 'default',

package/src/components/multi-select/style.scss

@@ -8,7 +8,7 @@ $root-name: multi-select;
 @include m.b($root-name) {
   width: 100%;
   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;
@@ -137,7 +137,7 @@ $root-name: multi-select;
     }
 
     @include m.bem(tag) {
-      border: fn.use-var(border);
+      border: fn.use-var(border-muted);
     }
   }
 

package/src/components/multi-tree-select/multi-tree-select.vue

@@ -96,13 +96,14 @@
 
 <script lang="ts" setup>
 import { dfs, o } from '@cat-kit/core'
-import { useFormComponent, useFormFallbackProps } from '@veltra/compositions'
+import { useFormFallbackProps } from '@veltra/compositions'
 import { ArrowDown, Close, Search } from '@veltra/icons/normal'
 import { bem, FORM_EMPTY_CONTENT } from '@veltra/utils'
 import { computed, nextTick, shallowRef, watch } from 'vue'
 
 import type { MultiTreeSelectProps, MultiTreeSelectEmits, TreeExposed } from '../../types'
 import type { DropdownExposed } from '../../types'
+import { injectFormContext } from '../../utils/form-context'
 import { UButton } from '../button'
 import { UCheckbox } from '../checkbox'
 import { UDropdown } from '../dropdown'
@@ -161,7 +162,7 @@ const hovered = shallowRef(false)
 
 const tags = shallowRef<Record<string, any>[]>([])
 
-const { formProps } = useFormComponent()
+const { formProps } = injectFormContext()
 
 const { size, disabled, readonly } = useFormFallbackProps([formProps ?? {}, props])
 

package/src/components/multi-tree-select/style.scss

@@ -7,7 +7,7 @@ $root-name: multi-tree-select;
 
 @include m.b($root-name) {
   width: 100%;
-  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;
@@ -45,7 +45,7 @@ $root-name: multi-tree-select;
     }
 
     @include m.bem(tag) {
-      border: fn.use-var(border);
+      border: fn.use-var(border-muted);
     }
   }
 

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

@@ -63,13 +63,14 @@
 
 <script lang="ts" setup>
 import { $n, n, o, isUndef } from '@cat-kit/core'
-import { useFormComponent, useFormFallbackProps } from '@veltra/compositions'
+import { useFormFallbackProps } from '@veltra/compositions'
 import { vRipple } from '@veltra/directives'
 import { ArrowDown, ArrowUp, Close } from '@veltra/icons/normal'
 import { bem, FORM_EMPTY_CONTENT, Tween } from '@veltra/utils'
 import { computed, shallowRef, watch } from 'vue'
 
 import type { NumberInputEmits, NumberInputProps, InputExposed } from '../../types'
+import { injectFormContext } from '../../utils/form-context'
 import { UIcon } from '../icon'
 import { UInput } from '../input'
 
@@ -90,7 +91,7 @@ const slots = defineSlots<{
   suffix?: () => any
 }>()
 
-const { formProps } = useFormComponent()
+const { formProps } = injectFormContext()
 
 const { size, disabled, readonly } = useFormFallbackProps([formProps ?? {}, props], {
   size: 'default',

package/src/components/number-range-input/number-range-input.vue

@@ -28,11 +28,12 @@
 
 <script lang="ts" setup>
 import { n, $n, o } from '@cat-kit/core'
-import { useFormComponent, useFormFallbackProps } from '@veltra/compositions'
+import { useFormFallbackProps } from '@veltra/compositions'
 import { bem, FORM_EMPTY_CONTENT } from '@veltra/utils'
 import { computed, getCurrentInstance, nextTick, onMounted, watch } from 'vue'
 
 import type { NumberRangeInputEmits, NumberRangeInputProps, NumberRangeTuple } from '../../types'
+import { injectFormContext } from '../../utils/form-context'
 import { UNumberInput } from '../number-input'
 
 defineOptions({
@@ -58,7 +59,7 @@ function splitBound(): boolean {
   return 'start' in p || 'onUpdate:start' in p || 'end' in p || 'onUpdate:end' in p
 }
 
-const { formProps } = useFormComponent()
+const { formProps } = injectFormContext()
 
 const { size, disabled, readonly } = useFormFallbackProps([formProps ?? {}, props], {
   size: 'default',

package/src/components/palette/palette.vue

@@ -24,11 +24,12 @@
 </template>
 
 <script lang="ts" setup>
-import { useFormComponent, useFormFallbackProps, useUserAction } from '@veltra/compositions'
+import { useFormFallbackProps, useUserAction } from '@veltra/compositions'
 import { bem } from '@veltra/utils'
 import { computed, provide, shallowRef, useTemplateRef, watch } from 'vue'
 
 import type { PaletteProps } from '../../types'
+import { injectFormContext } from '../../utils/form-context'
 import { UTip } from '../tip'
 import { HSV2RGB, RGB2HEX, HEX2RGBA, RGB2HSV } from './color-transform'
 import { PaletteDIKey } from './di'
@@ -47,7 +48,7 @@ const props = withDefaults(defineProps<PaletteProps>(), {
   readonly: undefined
 })
 
-const { formProps } = useFormComponent()
+const { formProps } = injectFormContext()
 
 const { size, disabled, readonly } = useFormFallbackProps([formProps ?? {}, props])
 

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

@@ -27,12 +27,13 @@
 
 <script lang="ts" setup>
 import { o } from '@cat-kit/core'
-import { useFormComponent, useFormFallbackProps } from '@veltra/compositions'
+import { useFormFallbackProps } from '@veltra/compositions'
 import { Hide, View } from '@veltra/icons/normal'
 import { bem } from '@veltra/utils'
 import { computed, nextTick, shallowRef } from 'vue'
 
 import type { PasswordInputProps } from '../../types'
+import { injectFormContext } from '../../utils/form-context'
 import { UIcon } from '../icon'
 import { UInput } from '../input'
 
@@ -41,7 +42,7 @@ defineOptions({
 })
 
 const props = withDefaults(defineProps<PasswordInputProps>(), {
-  clearable: true,
+  clearable: false,
   disabled: undefined,
   readonly: undefined
 })
@@ -50,7 +51,7 @@ const slots = defineSlots<{
   prefix?: () => any
 }>()
 
-const { formProps } = useFormComponent()
+const { formProps } = injectFormContext()
 
 const { size, disabled, readonly } = useFormFallbackProps([formProps ?? {}, props], {
   size: 'default',

package/src/components/pop-confirm/pop-confirm.vue

@@ -32,12 +32,13 @@
 </template>
 
 <script lang="ts" setup>
-import { useFormComponent, useFormFallbackProps } from '@veltra/compositions'
+import { useFormFallbackProps } from '@veltra/compositions'
 import { QuestionFilled } from '@veltra/icons/normal'
 import { bem } from '@veltra/utils'
 import { ref } from 'vue'
 
 import type { PopConfirmProps, PopConfirmEmits } from '../../types'
+import { injectFormContext } from '../../utils/form-context'
 import { UButton } from '../button'
 import { UIcon } from '../icon'
 import { UTip } from '../tip'
@@ -61,7 +62,7 @@ const cls = bem('pop-confirm')
 
 const visible = ref(false)
 
-const { formProps } = useFormComponent()
+const { formProps } = injectFormContext()
 
 const { size } = useFormFallbackProps([formProps ?? {}], {
   size: 'default'

package/src/components/radio/radio.vue

@@ -23,11 +23,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 { RadioProps, RadioEmits } from '../../types'
+import { injectFormContext } from '../../utils/form-context'
 
 defineOptions({
   name: 'Radio'
@@ -43,7 +44,7 @@ defineEmits<RadioEmits>()
 
 const cls = bem('radio')
 
-const { formProps } = useFormComponent()
+const { formProps } = injectFormContext()
 
 const { size, disabled } = useFormFallbackProps([formProps ?? {}, props], {
   size: 'default',

package/src/components/radio/style.scss

@@ -63,7 +63,7 @@ $root-name: radio;
     color: fn.use-var(text-color, disabled);
     cursor: not-allowed;
     @include m.bem($root-name, button) {
-      border-color: fn.use-var(border, color);
+      border-color: fn.use-var(border, muted-color);
       background-color: fn.use-var(color, disabled);
     }
 

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

@@ -19,10 +19,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 { RadioGroupProps, RadioGroupEmits } from '../../types'
+import { injectFormContext } from '../../utils/form-context'
 import URadio from '../radio/radio.vue'
 
 defineOptions({
@@ -40,7 +41,7 @@ const model = defineModel<any>()
 
 const emit = defineEmits<RadioGroupEmits>()
 
-const { formProps } = useFormComponent()
+const { formProps } = injectFormContext()
 
 const { size, disabled, readonly } = useFormFallbackProps([formProps ?? {}, props], {
   size: 'default',

package/src/components/radio-group/style.scss

@@ -32,7 +32,7 @@
     }
 
     &:last-child {
-      border-right: fn.use-var(border) !important;
+      border-right: fn.use-var(border-muted) !important;
       border-radius: 0 fn.use-var(radius, default) fn.use-var(radius, default) 0 !important;
     }
   }

package/src/components/rich-text-editor/rich-text-editor.vue

@@ -77,12 +77,13 @@ import { LinkNode, AutoLinkNode } from '@lexical/link'
 import { ListNode, ListItemNode, registerList } from '@lexical/list'
 import { registerRichText } from '@lexical/rich-text'
 import { HeadingNode, QuoteNode } from '@lexical/rich-text'
-import { useFormComponent, useFormFallbackProps } from '@veltra/compositions'
+import { useFormFallbackProps } from '@veltra/compositions'
 import { bem } from '@veltra/utils'
 import { createEditor, $getRoot, $createParagraphNode, type LexicalEditor } from 'lexical'
 import { computed, onBeforeUnmount, onMounted, ref, shallowRef, useTemplateRef, watch } from 'vue'
 
 import type { RichTextEditorProps } from '../../types'
+import { injectFormContext } from '../../utils/form-context'
 import Toolbar from './toolbar.vue'
 
 const props = withDefaults(defineProps<RichTextEditorProps>(), {
@@ -97,7 +98,7 @@ const model = defineModel<string>()
 
 const cls = bem('rich-text-editor')
 
-const { formProps } = useFormComponent()
+const { formProps } = injectFormContext()
 
 const { size, disabled, readonly } = useFormFallbackProps([formProps ?? {}, props])
 

package/src/components/rich-text-editor/style.scss

@@ -6,7 +6,7 @@ $root-name: rich-text-editor;
 
 @include m.b($root-name) {
   width: 100%;
-  border: 1px solid fn.use-var(border-color);
+  border: 1px solid fn.use-var(border, muted-color);
   border-radius: fn.use-var(radius, default);
   background-color: fn.use-var(color, bg);
   transition: border-color 0.25s ease;
@@ -101,7 +101,7 @@ $root-name: rich-text-editor;
     appearance: none;
     padding: 2px 24px 2px 8px;
     height: 28px;
-    border: 1px solid fn.use-var(border-color);
+    border: 1px solid fn.use-var(border, muted-color);
     border-radius: 4px;
     background-color: transparent;
     color: fn.use-var(text-color);
@@ -171,17 +171,17 @@ $root-name: rich-text-editor;
 
   @include m.is(disabled) {
     background-color: fn.use-var(color, disabled);
-    border-color: fn.use-var(border-color);
+    border-color: fn.use-var(border, muted-color);
     cursor: not-allowed;
 
     &:hover {
-      border-color: fn.use-var(border-color);
+      border-color: fn.use-var(border, muted-color);
     }
   }
 
   @include m.is(readonly) {
     &:hover {
-      border-color: fn.use-var(border-color);
+      border-color: fn.use-var(border, muted-color);
     }
   }
 }

package/src/components/select/select.vue

@@ -115,7 +115,7 @@
 
 <script lang="ts" setup>
 import { o } from '@cat-kit/core'
-import { useFormComponent, useFormFallbackProps, useVirtualizer } from '@veltra/compositions'
+import { useFormFallbackProps, useVirtualizer } from '@veltra/compositions'
 import { vFocus } from '@veltra/directives'
 import { ArrowDown, Search } from '@veltra/icons/normal'
 import { bem, FORM_EMPTY_CONTENT, scrollIntoContainerView, withUnit } from '@veltra/utils'
@@ -128,6 +128,7 @@ import type {
   DropdownExposed,
   ScrollExposed
 } from '../../types'
+import { injectFormContext } from '../../utils/form-context'
 import { UDropdown } from '../dropdown'
 import { UEmpty } from '../empty'
 import { UIcon } from '../icon'
@@ -160,7 +161,7 @@ const cls = bem('select')
 
 const optionClass = cls.e('option')
 
-const { formProps } = useFormComponent()
+const { formProps } = injectFormContext()
 const { size, disabled, readonly } = useFormFallbackProps([formProps ?? {}, props], {
   size: 'default',
   disabled: false,
@@ -174,7 +175,7 @@ const selected = shallowRef<Record<string, any>>()
 const displayedValue = computed(() => {
   if (label.value) return label.value
 
-  return selected.value ? o(selected.value).get(props.labelKey) : String(props.modelValue)
+  return selected.value ? o(selected.value).get(props.labelKey) : String(props.modelValue ?? '')
 })
 
 const dropdownRef = shallowRef<DropdownExposed>()

package/src/components/slider/slider.vue

@@ -20,11 +20,12 @@
 </template>
 
 <script lang="ts" setup generic="T extends number | [number, number]">
-import { useFormComponent, useFormFallbackProps, useUserAction } from '@veltra/compositions'
+import { useFormFallbackProps, useUserAction } from '@veltra/compositions'
 import { bem } from '@veltra/utils'
 import { computed, provide, watch } from 'vue'
 
 import type { SliderProps, SliderEmits } from '../../types'
+import { injectFormContext } from '../../utils/form-context'
 import { sliderContextKey } from './di'
 import SliderThumb from './slider-thumb.vue'
 import { useSlider } from './use-slider'
@@ -44,7 +45,7 @@ const emit = defineEmits<SliderEmits<T>>()
 
 const cls = bem('slider')
 
-const { formProps } = useFormComponent()
+const { formProps } = injectFormContext()
 
 const { size, disabled, readonly } = useFormFallbackProps([formProps ?? {}, props])
 

package/src/components/switch/style.scss

@@ -57,7 +57,7 @@ $root-name: switch;
     align-items: center;
     border-radius: 100px;
     background-color: fn.use-var(bg-color, bottom);
-    border: 1px solid fn.use-var(border, color);
+    border: 1px solid fn.use-var(border, muted-color);
     transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
     padding: 2px;
     flex-shrink: 0;

package/src/components/switch/switch.vue

@@ -23,11 +23,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 { SwitchEmits, SwitchProps, _SwitchExposed } from '../../types'
+import { injectFormContext } from '../../utils/form-context'
 
 defineOptions({
   name: 'Switch'
@@ -44,7 +45,7 @@ const model = defineModel<boolean>()
 
 const cls = bem('switch')
 
-const { formProps } = useFormComponent()
+const { formProps } = injectFormContext()
 
 const { size, disabled, readonly } = useFormFallbackProps([formProps ?? {}, props])
 

package/src/components/tag/tag.vue

@@ -11,12 +11,13 @@
 </template>
 
 <script lang="ts" setup>
-import { useFormComponent, useFormFallbackProps } from '@veltra/compositions'
+import { useFormFallbackProps } from '@veltra/compositions'
 import { Close } from '@veltra/icons/normal'
 import { bem } from '@veltra/utils'
 import { computed } from 'vue'
 
 import type { TagEmits, TagProps } from '../../types'
+import { injectFormContext } from '../../utils/form-context'
 import { UIcon } from '../icon'
 
 defineOptions({
@@ -29,7 +30,7 @@ const props = defineProps<TagProps>()
 
 const emit = defineEmits<TagEmits>()
 
-const { formProps } = useFormComponent()
+const { formProps } = injectFormContext()
 const { size } = useFormFallbackProps([formProps ?? {}, props], {
   size: 'default'
 })

package/src/components/textarea/style.scss

@@ -7,7 +7,7 @@ $root-name: textarea;
 @include m.b($root-name) {
   position: relative;
   width: 100%;
-  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/textarea/textarea.vue

@@ -40,12 +40,13 @@
 </template>
 
 <script lang="ts" 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, ref, shallowRef, watch } from 'vue'
 
 import type { TextareaProps, TextareaEmits, ComponentSize } from '../../types'
+import { injectFormContext } from '../../utils/form-context'
 import { UIcon } from '../icon'
 import { calcTextareaHeight } from './utils'
 
@@ -64,7 +65,7 @@ const props = withDefaults(defineProps<TextareaProps>(), {
 
 const cls = bem('textarea')
 
-const { formProps } = useFormComponent()
+const { formProps } = injectFormContext()
 
 const { size, disabled, readonly } = useFormFallbackProps([formProps ?? {}, props], {
   size: 'default' as ComponentSize,

package/src/components/tree/tree.vue

@@ -31,12 +31,13 @@
 </template>
 
 <script lang="ts" setup>
-import { useFormComponent, useFormFallbackProps, useVirtualizer } from '@veltra/compositions'
+import { useFormFallbackProps, useVirtualizer } from '@veltra/compositions'
 import { bem, nextFrame, scrollIntoContainerView } from '@veltra/utils'
 import { computed, provide, shallowRef, useSlots, watch, watchEffect, type VNode } from 'vue'
 
 import type { TreeProps, TreeEmit, _TreeExposed } from '../../types'
 import type { ScrollExposed } from '../../types'
+import { injectFormContext } from '../../utils/form-context'
 import { UEmpty } from '../empty'
 import { UScroll } from '../scroll'
 import { TreeDIKey, type TreeConText, type TreeSlotsScope } from './di'
@@ -63,7 +64,7 @@ const emit = defineEmits<TreeEmit>()
 
 const cls = bem('tree')
 
-const { formProps } = useFormComponent()
+const { formProps } = injectFormContext()
 
 const { size } = useFormFallbackProps([formProps ?? {}, props], {
   size: 'default'

package/src/components/tree-select/tree-select.vue

@@ -60,12 +60,13 @@
 
 <script lang="ts" setup>
 import { dfs, o } from '@cat-kit/core'
-import { useFormComponent, useFormFallbackProps } from '@veltra/compositions'
+import { useFormFallbackProps } from '@veltra/compositions'
 import { ArrowDown, Search } from '@veltra/icons/normal'
 import { bem, FORM_EMPTY_CONTENT } from '@veltra/utils'
 import { computed, nextTick, shallowRef, watch } from 'vue'
 
 import type { TreeSelectProps, TreeSelectEmits, TreeExposed } from '../../types'
+import { injectFormContext } from '../../utils/form-context'
 import { UDropdown } from '../dropdown'
 import { UIcon } from '../icon'
 import { UInput } from '../input'
@@ -122,7 +123,7 @@ const model = defineModel<string | number>()
 
 const label = shallowRef<string>()
 
-const { formProps } = useFormComponent()
+const { formProps } = injectFormContext()
 
 const { size, disabled, readonly } = useFormFallbackProps([formProps ?? {}, props])
 

package/src/utils/form-context.ts

@@ -0,0 +1,24 @@
+import { type InjectionKey, inject, provide } from 'vue'
+
+import type { FormProps } from '../types/form'
+
+type DIContext = {
+  /** 表单属性 */
+  formProps: FormProps
+}
+
+const FormComponentDIKey: InjectionKey<DIContext> = Symbol('FormComponentDIKey')
+
+export function provideFormContext(props: FormProps): void {
+  if (props) {
+    return provide(FormComponentDIKey, { formProps: props })
+  }
+}
+
+export function injectFormContext(): {
+  /** 是否在表单中 */
+  inForm: boolean
+} & Partial<DIContext> {
+  const context = inject(FormComponentDIKey, undefined) || {}
+  return { inForm: !!context, ...context }
+}