@veltra/desktop 1.1.2 → 1.1.4

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

@@ -31,6 +31,7 @@
 <script lang="ts" setup>
 import { useFormFallbackProps } from '@veltra/compositions'
 import { bem } from '@veltra/utils'
+import { injectFormContext } from '@veltra/utils'
 import {
   computed,
   nextTick,
@@ -42,7 +43,6 @@ 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'

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

@@ -11,6 +11,7 @@ $root-name: expression-editor;
   border-style: fn.use-var(border, style);
   border-color: fn.use-var(border, muted-color);
   border-radius: fn.use-var(radius, default);
+  width: 100%;
 
   @include m.is-not(disabled, readonly) {
     &:hover {

package/src/components/form/form.vue

@@ -32,10 +32,10 @@
 <script lang="tsx" setup generic="Model extends FormModel | DynamicFormModel">
 import { o } from '@cat-kit/core'
 import { bem } from '@veltra/utils'
+import { provideFormContext } 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'

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

@@ -35,10 +35,10 @@
 <script lang="tsx" setup>
 import { useConfig, useFallbackProps } from '@veltra/compositions'
 import { bem, withUnit } from '@veltra/utils'
+import { injectFormContext } 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'

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

@@ -15,7 +15,14 @@
           :size="size"
           @click="handleRemove(index)"
         />
-        <u-button :icon="Plus" circle :disabled="disabled" :size="size" @click="handleAdd(index)" />
+        <u-button
+          :icon="Plus"
+          circle
+          :disabled="disabled"
+          :size="size"
+          type="primary"
+          @click="handleAdd(index)"
+        />
       </span>
     </li>
   </ul>
@@ -37,10 +44,10 @@
 import { useFormFallbackProps } from '@veltra/compositions'
 import { Minus, Plus } from '@veltra/icons/normal'
 import { bem, FORM_EMPTY_CONTENT } from '@veltra/utils'
+import { injectFormContext } 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'
 

package/src/components/group-input/style.ts

@@ -1 +1,2 @@
+import '../button/style'
 import './style.scss'

package/src/components/input/input.vue

@@ -56,10 +56,10 @@
 import { useFocus, useFormFallbackProps } from '@veltra/compositions'
 import { Close } from '@veltra/icons/normal'
 import { bem, FORM_EMPTY_CONTENT } from '@veltra/utils'
+import { injectFormContext } 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({

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

@@ -21,7 +21,7 @@
 
 <script lang="ts" setup>
 import { Ripple } from '@veltra/directives'
-import { inject, onBeforeUnmount } from 'vue'
+import { inject, onBeforeUnmount, shallowRef } from 'vue'
 
 import { UCheckbox } from '../checkbox'
 import { MultiSelectDIKey } from './di'
@@ -43,8 +43,6 @@ const props = defineProps<{
   measureElement?: (index: number, el: Element | null) => void
 }>()
 
-const { disabled = false, checked } = props
-
 function measureRef(el: unknown) {
   if (typeof props.index !== 'number' || !props.measureElement) return
   props.measureElement(props.index, el as Element | null)
@@ -56,33 +54,41 @@ const emit = defineEmits<{
 
 const { optionClass, rippleClass, checkboxClass } = inject(MultiSelectDIKey)!
 
-let ripple: Ripple | null = null
+const rippleRef = shallowRef<Ripple | null>(null)
 
 function handleClick(e) {
-  if (disabled) return
-  emit('check', !checked)
+  if (props.disabled) return
+  emit('check', !props.checked)
 }
 
 function handleMousedown(e: MouseEvent) {
-  if (disabled) return
+  if (props.disabled) return
+
+  // 清理旧实例，避免同一元素上多个 Ripple 实例同时修改样式
+  if (rippleRef.value) {
+    rippleRef.value.remove()
+    rippleRef.value = null
+  }
 
-  ripple = new Ripple(e.currentTarget as HTMLElement, {
+  rippleRef.value = new Ripple(e.currentTarget as HTMLElement, {
     rippleClass
   })
 
-  ripple.showByEvent(e)
+  rippleRef.value.showByEvent(e)
 }
 
 function handleMouseleave() {
-  ripple?.remove()
+  rippleRef.value?.remove()
+  rippleRef.value = null
 }
 
 function handleMouseup() {
-  ripple?.remove()
+  rippleRef.value?.remove()
+  rippleRef.value = null
 }
 
 onBeforeUnmount(() => {
-  ripple?.remove()
-  ripple = null
+  rippleRef.value?.remove()
+  rippleRef.value = null
 })
 </script>

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

@@ -143,6 +143,7 @@ import { o as chainObj } from '@cat-kit/core'
 import { useFormFallbackProps, useVirtualizer } from '@veltra/compositions'
 import { ArrowDown, Close, Search } from '@veltra/icons/normal'
 import { bem, FORM_EMPTY_CONTENT } from '@veltra/utils'
+import { injectFormContext } from '@veltra/utils'
 import { computed, shallowRef, shallowReactive, watch, provide } from 'vue'
 
 import type {
@@ -151,7 +152,6 @@ import type {
   ScrollExposed,
   DropdownExposed
 } from '../../types'
-import { injectFormContext } from '../../utils/form-context'
 import { UCheckbox } from '../checkbox'
 import { UDropdown } from '../dropdown'
 import { UEmpty } from '../empty'

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

@@ -99,11 +99,11 @@ import { dfs, o } from '@cat-kit/core'
 import { useFormFallbackProps } from '@veltra/compositions'
 import { ArrowDown, Close, Search } from '@veltra/icons/normal'
 import { bem, FORM_EMPTY_CONTENT } from '@veltra/utils'
+import { injectFormContext } 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'

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

@@ -67,10 +67,10 @@ 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 { injectFormContext } 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'
 

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

@@ -30,10 +30,10 @@
 import { n, $n, o } from '@cat-kit/core'
 import { useFormFallbackProps } from '@veltra/compositions'
 import { bem, FORM_EMPTY_CONTENT } from '@veltra/utils'
+import { injectFormContext } 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({

package/src/components/number-range-input/style.scss

@@ -4,6 +4,7 @@
 @include m.b(number-range-input) {
   display: inline-flex;
   align-items: center;
+  width: 100%;
   gap: fn.use-var(gap, small);
 
   @include m.e(separator) {

package/src/components/palette/palette.vue

@@ -26,10 +26,10 @@
 <script lang="ts" setup>
 import { useFormFallbackProps, useUserAction } from '@veltra/compositions'
 import { bem } from '@veltra/utils'
+import { injectFormContext } 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'

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

@@ -30,10 +30,10 @@ import { o } from '@cat-kit/core'
 import { useFormFallbackProps } from '@veltra/compositions'
 import { Hide, View } from '@veltra/icons/normal'
 import { bem } from '@veltra/utils'
+import { injectFormContext } 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'
 

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

@@ -35,10 +35,10 @@
 import { useFormFallbackProps } from '@veltra/compositions'
 import { QuestionFilled } from '@veltra/icons/normal'
 import { bem } from '@veltra/utils'
+import { injectFormContext } 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'

package/src/components/radio/radio.vue

@@ -25,10 +25,10 @@
 <script lang="ts" setup>
 import { useFormFallbackProps } from '@veltra/compositions'
 import { bem } from '@veltra/utils'
+import { injectFormContext } from '@veltra/utils'
 import { computed } from 'vue'
 
 import type { RadioProps, RadioEmits } from '../../types'
-import { injectFormContext } from '../../utils/form-context'
 
 defineOptions({
   name: 'Radio'

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

@@ -21,9 +21,9 @@
 <script lang="ts" setup>
 import { useFormFallbackProps } from '@veltra/compositions'
 import { bem, FORM_EMPTY_CONTENT } from '@veltra/utils'
+import { injectFormContext } from '@veltra/utils'
 
 import type { RadioGroupProps, RadioGroupEmits } from '../../types'
-import { injectFormContext } from '../../utils/form-context'
 import URadio from '../radio/radio.vue'
 
 defineOptions({

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

@@ -79,11 +79,11 @@ import { registerRichText } from '@lexical/rich-text'
 import { HeadingNode, QuoteNode } from '@lexical/rich-text'
 import { useFormFallbackProps } from '@veltra/compositions'
 import { bem } from '@veltra/utils'
+import { injectFormContext } 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>(), {

package/src/components/select/select.vue

@@ -119,6 +119,7 @@ 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'
+import { injectFormContext } from '@veltra/utils'
 import { computed, nextTick, shallowRef, watch } from 'vue'
 
 import type {
@@ -128,7 +129,6 @@ import type {
   DropdownExposed,
   ScrollExposed
 } from '../../types'
-import { injectFormContext } from '../../utils/form-context'
 import { UDropdown } from '../dropdown'
 import { UEmpty } from '../empty'
 import { UIcon } from '../icon'

package/src/components/slider/slider.vue

@@ -22,10 +22,10 @@
 <script lang="ts" setup generic="T extends number | [number, number]">
 import { useFormFallbackProps, useUserAction } from '@veltra/compositions'
 import { bem } from '@veltra/utils'
+import { injectFormContext } 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'

package/src/components/switch/switch.vue

@@ -25,10 +25,10 @@
 <script lang="ts" setup>
 import { useFormFallbackProps } from '@veltra/compositions'
 import { bem } from '@veltra/utils'
+import { injectFormContext } from '@veltra/utils'
 import { computed } from 'vue'
 
 import type { SwitchEmits, SwitchProps, _SwitchExposed } from '../../types'
-import { injectFormContext } from '../../utils/form-context'
 
 defineOptions({
   name: 'Switch'

package/src/components/tag/tag.vue

@@ -14,10 +14,10 @@
 import { useFormFallbackProps } from '@veltra/compositions'
 import { Close } from '@veltra/icons/normal'
 import { bem } from '@veltra/utils'
+import { injectFormContext } from '@veltra/utils'
 import { computed } from 'vue'
 
 import type { TagEmits, TagProps } from '../../types'
-import { injectFormContext } from '../../utils/form-context'
 import { UIcon } from '../icon'
 
 defineOptions({

package/src/components/textarea/textarea.vue

@@ -43,10 +43,10 @@
 import { useFocus, useFormFallbackProps } from '@veltra/compositions'
 import { Close } from '@veltra/icons/normal'
 import { bem, FORM_EMPTY_CONTENT } from '@veltra/utils'
+import { injectFormContext } 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'
 

package/src/components/tree/tree.vue

@@ -33,11 +33,11 @@
 <script lang="ts" setup>
 import { useFormFallbackProps, useVirtualizer } from '@veltra/compositions'
 import { bem, nextFrame, scrollIntoContainerView } from '@veltra/utils'
+import { injectFormContext } 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'

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

@@ -63,10 +63,10 @@ import { dfs, o } from '@cat-kit/core'
 import { useFormFallbackProps } from '@veltra/compositions'
 import { ArrowDown, Search } from '@veltra/icons/normal'
 import { bem, FORM_EMPTY_CONTENT } from '@veltra/utils'
+import { injectFormContext } 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'

package/dist/utils/form-context.js

@@ -1,17 +0,0 @@
-import { inject, provide } from "vue";
-//#region src/utils/form-context.ts
-const FormComponentDIKey = Symbol("FormComponentDIKey");
-function provideFormContext(props) {
-	if (props) return provide(FormComponentDIKey, { formProps: props });
-}
-function injectFormContext() {
-	const context = inject(FormComponentDIKey, void 0) || {};
-	return {
-		inForm: !!context,
-		...context
-	};
-}
-//#endregion
-export { injectFormContext, provideFormContext };
-
-//# sourceMappingURL=form-context.js.map

package/dist/utils/form-context.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"form-context.js","names":[],"sources":["../../src/utils/form-context.ts"],"sourcesContent":["import { type InjectionKey, inject, provide } from 'vue'\n\nimport type { FormProps } from '../types/form'\n\ntype DIContext = {\n  /** 表单属性 */\n  formProps: FormProps\n}\n\nconst FormComponentDIKey: InjectionKey<DIContext> = Symbol('FormComponentDIKey')\n\nexport function provideFormContext(props: FormProps): void {\n  if (props) {\n    return provide(FormComponentDIKey, { formProps: props })\n  }\n}\n\nexport function injectFormContext(): {\n  /** 是否在表单中 */\n  inForm: boolean\n} & Partial<DIContext> {\n  const context = inject(FormComponentDIKey, undefined) || {}\n  return { inForm: !!context, ...context }\n}\n"],"mappings":";;AASA,MAAM,qBAA8C,OAAO,qBAAqB;AAEhF,SAAgB,mBAAmB,OAAwB;AACzD,KAAI,MACF,QAAO,QAAQ,oBAAoB,EAAE,WAAW,OAAO,CAAC;;AAI5D,SAAgB,oBAGO;CACrB,MAAM,UAAU,OAAO,oBAAoB,KAAA,EAAU,IAAI,EAAE;AAC3D,QAAO;EAAE,QAAQ,CAAC,CAAC;EAAS,GAAG;EAAS"}

package/src/utils/form-context.ts

@@ -1,24 +0,0 @@
-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 }
-}