@veltra/desktop 1.0.15 → 2.0.0

package/src/components/file-viewer/style.scss

@@ -52,8 +52,8 @@
         transparent 76%,
         rgba(255, 255, 255, 0.035)
       );
-    backdrop-filter: blur(18px) saturate(1.16);
-    -webkit-backdrop-filter: blur(18px) saturate(1.16);
+    backdrop-filter: fn.use-var(bg-filter);
+    -webkit-backdrop-filter: fn.use-var(bg-filter);
   }
 
   &.is-modal &__inner {
@@ -90,8 +90,8 @@
     );
     border-right: 1px solid rgba(255, 255, 255, 0.055);
     box-shadow: none;
-    backdrop-filter: blur(18px) saturate(1.08);
-    -webkit-backdrop-filter: blur(18px) saturate(1.08);
+    backdrop-filter: fn.use-var(bg-filter);
+    -webkit-backdrop-filter: fn.use-var(bg-filter);
   }
 
   @include m.e(sidebar-head) {
@@ -326,8 +326,8 @@
     );
     border-bottom-color: transparent;
     box-shadow: none;
-    backdrop-filter: blur(16px) saturate(1.08);
-    -webkit-backdrop-filter: blur(16px) saturate(1.08);
+    backdrop-filter: fn.use-var(bg-filter);
+    -webkit-backdrop-filter: fn.use-var(bg-filter);
   }
 
   @include m.e(stage-title) {
@@ -784,7 +784,7 @@
   }
 
   @media (max-width: 720px) {
-    &:not(.is-modal) {
+    @include m.is-not(modal) {
       flex-direction: column;
     }
 

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

@@ -51,11 +51,11 @@ $root-name: form-item;
 
   @include m.is(error) {
     #{fn.bem(input)},
-    #{fn.bem(multi-select),
+    #{fn.bem(multi-select)},
     #{fn.bem(multi-tree-select)},
     #{fn.bem(auto-complete)},
-    #{fn.bem(textarea--more)}} {
-      box-shadow: inset 0 0 1px 1px fn.use-var(color, danger);
+    #{fn.bem(textarea--more)} {
+      border-color: fn.use-var(color, danger);
     }
   }
 

package/src/components/input/input.vue

@@ -26,17 +26,24 @@
       :disabled="disabled"
       :readonly="nativeReadonly"
     />
-    <UIcon
-      v-if="clearable && !disabled && model"
-      :class="[cls.e('clear'), bem.is('hidden', !hovered)]"
-      title="清除"
-      @click.stop="clearModelValue"
-    >
-      <Close />
-    </UIcon>
-    <span :class="suffixClass" @click="handleSuffixClick" v-if="$slots.suffix || suffix">
-      {{ suffix }}
-      <slot name="suffix"></slot>
+
+    <span :class="suffixClass" v-if="hasSuffix">
+      <Transition name="zoom-in" mode="out-in">
+        <UIcon
+          v-if="showClear"
+          :class="cls.e('clear')"
+          title="清除"
+          @click.stop="clearModelValue"
+          key="clear"
+        >
+          <Close />
+        </UIcon>
+
+        <span v-else :class="cls.e('suffix-content')" @click="handleSuffixClick" key="suffix">
+          {{ suffix }}
+          <slot name="suffix"></slot>
+        </span>
+      </Transition>
     </span>
   </div>
 
@@ -144,6 +151,18 @@ const handleMouseLeave = () => {
   hovered.value = false
 }
 
+const showClear = computed(() => {
+  return props.clearable && !disabled.value && !!model.value && hovered.value
+})
+
+const hasSuffixContent = computed(() => {
+  return !!inst?.slots.suffix || !!props.suffix
+})
+
+const hasSuffix = computed(() => {
+  return hasSuffixContent.value || showClear.value
+})
+
 const handleChange = (e: Event) => {
   const target = e.target as HTMLInputElement
 

package/src/components/input/style.scss

@@ -8,16 +8,20 @@ $root-name: input;
 @include m.b($root-name) {
   vertical-align: middle;
   line-height: 1;
-  box-shadow: inset 0 0 1px 1px fn.use-var(border, color);
-  transition: box-shadow 0.25s ease;
+  border: fn.use-var(border);
+  box-shadow: fn.use-var(shadow, emboss);
+  transition:
+    border-color 0.25s ease,
+    box-shadow 0.25s ease;
   overflow: hidden;
   width: 100%;
 
   @include m.flex($display: inline-flex);
 
-  &:hover {
-    // 悬浮时边框颜色为 var(--u-color-primary);
-    box-shadow: inset 0 0 0px 1px fn.use-var(color, primary);
+  @include m.is-not(disabled) {
+    &:hover {
+      border-color: fn.use-var(color, primary);
+    }
   }
 
   @include m.size using ($size) {
@@ -36,8 +40,7 @@ $root-name: input;
   }
 
   @include m.is(focus) {
-    // 使用变量 color 和 primary 设置内阴影和边框颜色
-    box-shadow: inset 0 0 1px 1px fn.use-var(color, primary);
+    border-color: fn.use-var(color, primary);
   }
 
   @include m.e(native) {
@@ -77,23 +80,19 @@ $root-name: input;
   }
 
   @include m.e(clear) {
-    flex-shrink: 0;
-    width: 20px;
-    display: inline-flex;
-    align-items: center;
-    justify-content: center;
     cursor: pointer;
     color: fn.use-var(text-color, main);
+  }
 
-    @include m.is(hidden) {
-      opacity: 0;
-      pointer-events: none;
-    }
+  @include m.e(suffix-content) {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
   }
 
   @include m.is(disabled) {
     background-color: fn.use-var(color, disabled);
-    box-shadow: inset 0 0 1px 1px fn.use-var(border, color);
+    box-shadow: none;
     @include m.bem($root-name, native) {
       cursor: not-allowed;
     }

package/src/components/menu/style.scss

@@ -105,7 +105,8 @@ $collapsed-menu: collapsed-menu;
   margin: 0;
   padding: 0;
   background-color: var(--u-menu-bg-color);
-  backdrop-filter: var(--u-menu-bg-blur) var(--u-menu-bg-saturate);
+  backdrop-filter: fn.use-var(bg-filter);
+  -webkit-backdrop-filter: fn.use-var(bg-filter);
   background-image: var(--u-menu-bg-image);
   background-size: cover;
   background-repeat: no-repeat;
@@ -212,7 +213,8 @@ $collapsed-menu: collapsed-menu;
     min-width: 240px;
     padding: 8px !important;
     background-color: var(--u-menu-bg-color);
-    backdrop-filter: var(--u-menu-bg-blur) var(--u-menu-bg-saturate);
+    backdrop-filter: fn.use-var(bg-filter);
+    -webkit-backdrop-filter: fn.use-var(bg-filter);
     border: 1px solid fn.use-var(border, color);
     border-radius: calc(fn.use-var(radius, large) + 4px);
     box-shadow:

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

@@ -8,8 +8,9 @@ $root-name: multi-select;
 @include m.b($root-name) {
   width: 100%;
   line-height: 1;
-  box-shadow: inset 0 0 1px 1px fn.use-var(border, color);
-  transition: box-shadow 0.25s ease;
+  border: fn.use-var(border);
+  box-shadow: fn.use-var(shadow, emboss);
+  transition: border-color 0.25s ease, box-shadow 0.25s ease;
   overflow: hidden;
   cursor: pointer;
   @include m.flex($display: inline-flex);
@@ -30,8 +31,7 @@ $root-name: multi-select;
   }
 
   &:hover {
-    // 悬浮时边框颜色为 var(--u-color-primary);
-    box-shadow: inset 0 0 1px 1px fn.use-var(color, primary);
+    border-color: fn.use-var(color, primary);
   }
 
   @include m.e(ripple) {
@@ -129,7 +129,7 @@ $root-name: multi-select;
 
   @include m.is(disabled) {
     background-color: fn.use-var(color, disabled);
-    box-shadow: inset 0 0 1px 1px fn.use-var(border, color);
+    box-shadow: none;
     cursor: not-allowed;
 
     @include m.bem($root-name, arrow) {

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

@@ -7,8 +7,9 @@ $root-name: multi-tree-select;
 
 @include m.b($root-name) {
   width: 100%;
-  box-shadow: inset 0 0 1px 1px fn.use-var(border, color);
-  transition: box-shadow 0.25s ease;
+  border: fn.use-var(border);
+  box-shadow: fn.use-var(shadow, emboss);
+  transition: border-color 0.25s ease, box-shadow 0.25s ease;
   overflow: hidden;
   cursor: pointer;
   line-height: 1;
@@ -16,7 +17,7 @@ $root-name: multi-tree-select;
   @include m.flex($display: inline-flex);
 
   &:hover {
-    box-shadow: inset 0 0 1px 1px fn.use-var(color, primary);
+    border-color: fn.use-var(color, primary);
   }
 
   @include m.size using ($size) {
@@ -37,7 +38,7 @@ $root-name: multi-tree-select;
   @include m.is(disabled) {
     cursor: not-allowed;
     background-color: fn.use-var(color, disabled);
-    box-shadow: inset 0 0 1px 1px fn.use-var(border, color);
+    box-shadow: none;
 
     @include m.bem($root-name, arrow) {
       color: fn.use-var(text-color, disabled);

package/src/components/number-input/__test__/number-input.test.ts

@@ -0,0 +1,60 @@
+// @vitest-environment happy-dom
+import { createApp, h, nextTick, ref } from 'vue'
+
+import UNumberInput from '../number-input.vue'
+
+function mountNumberInput(props: Record<string, unknown>) {
+  const host = document.createElement('div')
+  document.body.appendChild(host)
+
+  const model = ref(props.modelValue as number | undefined)
+  const app = createApp({
+    render() {
+      return h(UNumberInput, {
+        ...props,
+        modelValue: model.value,
+        'onUpdate:modelValue': (value: number | undefined) => {
+          model.value = value
+        }
+      })
+    }
+  })
+
+  app.mount(host)
+
+  return {
+    host,
+    unmount() {
+      app.unmount()
+      host.remove()
+    }
+  }
+}
+
+describe('NumberInput', () => {
+  it('keeps step controls visible while clear control is shown', async () => {
+    const { host, unmount } = mountNumberInput({ modelValue: 1, step: 1, clearable: true })
+
+    try {
+      expect(host.querySelector('.u-number-input__step')).not.toBeNull()
+
+      host.querySelector('.u-number-input')?.dispatchEvent(new MouseEvent('mouseenter'))
+      await nextTick()
+
+      expect(host.querySelector('.u-number-input__clear')).not.toBeNull()
+      expect(host.querySelector('.u-number-input__step')).not.toBeNull()
+    } finally {
+      unmount()
+    }
+  })
+
+  it('reserves clear control space before hover when clearable', () => {
+    const { host, unmount } = mountNumberInput({ modelValue: 1, clearable: true })
+
+    try {
+      expect(host.querySelector('.u-number-input__clear')).not.toBeNull()
+    } finally {
+      unmount()
+    }
+  })
+})

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

@@ -10,13 +10,30 @@
     @keydown.stop="handleKeydown"
     @focus="handleFocus"
     @blur="handleBlur"
+    @mouseenter="handleMouseEnter"
+    @mouseleave="handleMouseLeave"
     :size="size"
     :readonly="readonly"
     :disabled="disabled"
+    :clearable="false"
   >
-    <template #suffix v-if="step !== undefined && step !== false">
-      <slot name="suffix" />
-      <div :class="cls.e('step')">
+    <template #suffix v-if="hasSuffix">
+      <span :class="cls.e('suffix')">
+        <u-icon
+          v-if="props.clearable"
+          :class="[cls.e('clear'), bem.is('hidden', !showClear)]"
+          :title="showClear ? '清除' : undefined"
+          @click.stop="handleClear"
+        >
+          <Close />
+        </u-icon>
+        <span v-if="hasCustomSuffix" :class="cls.e('suffix-content')">
+          {{ suffix }}
+          <slot name="suffix" />
+        </span>
+      </span>
+
+      <div v-if="showStep" :class="cls.e('step')">
         <u-icon
           @click="increase"
           v-ripple="!disabled && increasable"
@@ -48,7 +65,7 @@
 import { $n, n, o, isUndef } from '@cat-kit/core'
 import { useFormComponent, useFormFallbackProps } from '@veltra/compositions'
 import { vRipple } from '@veltra/directives'
-import { ArrowDown, ArrowUp } from '@veltra/icons/normal'
+import { ArrowDown, ArrowUp, Close } from '@veltra/icons/normal'
 import { bem, FORM_EMPTY_CONTENT, Tween } from '@veltra/utils'
 import { computed, shallowRef, watch } from 'vue'
 
@@ -82,7 +99,7 @@ const { size, disabled, readonly } = useFormFallbackProps([formProps ?? {}, prop
 })
 
 const inputProps = computed(() => {
-  return o(props).pick(['clearable', 'disabled', 'placeholder', 'size', 'prefix', 'suffix'])
+  return o(props).pick(['disabled', 'placeholder', 'size', 'prefix'])
 })
 
 const inputRef = shallowRef<InputExposed>()
@@ -102,6 +119,7 @@ const model = defineModel<NumberInputProps['modelValue']>()
 const displayed = shallowRef('')
 
 const focused = shallowRef(false)
+const hovered = shallowRef(false)
 
 const generateDisplayed = computed(() => {
   if (!displayed.value) return ''
@@ -109,6 +127,16 @@ const generateDisplayed = computed(() => {
   return `${props.prefix ?? ''}${displayed.value}${props.suffix ?? ''}`
 })
 
+const showStep = computed(() => props.step !== undefined && props.step !== false)
+
+const hasCustomSuffix = computed(() => !!props.suffix || !!slots.suffix)
+
+const hasSuffix = computed(() => props.clearable || hasCustomSuffix.value || showStep.value)
+
+const showClear = computed(() => {
+  return props.clearable && !disabled.value && displayed.value !== '' && hovered.value
+})
+
 /** 步长 */
 const stepVal = computed<number>(() => {
   const { step } = props
@@ -252,6 +280,13 @@ function handleUpdateModelValue(input: string): void {
   displayed.value = input
 }
 
+function handleClear(): void {
+  if (!showClear.value) return
+  model.value = undefined
+  displayed.value = ''
+  emit('clear')
+}
+
 /**
  * 处理输入值变化的函数, 该函数仅在输入框失去焦点时触发,
  * 主要用于在输入非数字的情况下的修正处理
@@ -376,4 +411,12 @@ function handleBlur(): void {
   focused.value = false
   model.value = props.modelValue
 }
+
+function handleMouseEnter(): void {
+  hovered.value = true
+}
+
+function handleMouseLeave(): void {
+  hovered.value = false
+}
 </script>

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

@@ -4,6 +4,36 @@
 
 $root-name: number-input;
 @include m.b($root-name) {
+  @include m.e(suffix) {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    height: 100%;
+  }
+
+  @include m.e(suffix-content) {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+  }
+
+  @include m.e(clear) {
+    cursor: pointer;
+    flex-shrink: 0;
+    width: 20px;
+    border-radius: fn.use-var(radius, default);
+    transition: color 0.25s;
+
+    &:hover {
+      color: fn.use-var(color, primary);
+    }
+
+    @include m.is(hidden) {
+      visibility: hidden;
+      pointer-events: none;
+    }
+  }
+
   @include m.e(step) {
     display: flex;
     flex-direction: column;

package/src/components/palette/palette.vue

@@ -63,18 +63,28 @@ const color = defineModel<string>()
 const RGB = computed(() => HSV2RGB(HSV))
 const { userAction, isUserActive } = useUserAction()
 
-watch([alpha, RGB], ([alpha, RGB]) => {
-  color.value = `#${RGB2HEX(RGB, alpha)}`
-})
-
 const visible = shallowRef(false)
 
+/** 清除时跳过一次内部状态到 color 的同步，防止 updateAlpha 把已清空的 color 覆盖回来 */
+let skipColorUpdate = false
+
 const handleClear = userAction(() => {
+  if (alpha.value !== 1) {
+    skipColorUpdate = true
+  }
   color.value = ''
   rest.updateAlpha(1)
   visible.value = false
 })
 
+watch([alpha, RGB], ([alpha, RGB]) => {
+  if (skipColorUpdate) {
+    skipColorUpdate = false
+    return
+  }
+  color.value = `#${RGB2HEX(RGB, alpha)}`
+})
+
 const paletteSVRef = useTemplateRef('palette-sv')
 const paletteHueRef = useTemplateRef('palette-hue')
 const paletteAlphaRef = useTemplateRef('palette-alpha')

package/src/components/progress-nodes/style.scss

@@ -64,7 +64,7 @@ $root-name: progress-nodes;
   @include m.e(link) {
     position: absolute;
     border-style: dashed;
-    border-color: fn.use-var(border, color);
+    border-color: fn.use-var(text, color, placeholder);
   }
 
   // 节点圆点

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

@@ -55,8 +55,10 @@ $root-name: rich-text-editor;
     transition: all 0.15s ease;
     padding: 0;
 
-    &:hover:not(.is-disabled) {
-      background-color: fn.use-var(color, hover);
+    @include m.is-not(disabled) {
+      &:hover {
+        background-color: fn.use-var(color, hover);
+      }
     }
 
     &.is-active {
@@ -112,8 +114,10 @@ $root-name: rich-text-editor;
     background-repeat: no-repeat;
     background-position: right 6px center;
 
-    &:hover:not(.is-disabled) {
-      border-color: fn.use-var(color, primary);
+    @include m.is-not(disabled) {
+      &:hover {
+        border-color: fn.use-var(color, primary);
+      }
     }
 
     &:focus {

package/src/components/select/select.vue

@@ -20,7 +20,7 @@
         :disabled="disabled"
         :placeholder="placeholder"
         :clearable="clearable"
-        :model-value="selected ? (o(selected).get(labelKey) ?? label) : modelValue"
+        :model-value="displayedValue"
         @clear="handleClear"
         @keydown="handleKeydown"
         native-readonly
@@ -109,7 +109,7 @@
   </u-dropdown>
 
   <template v-else>
-    {{ label || selected?.[labelKey] || FORM_EMPTY_CONTENT }}
+    {{ displayedValue || FORM_EMPTY_CONTENT }}
   </template>
 </template>
 
@@ -171,6 +171,12 @@ const currentIndex = shallowRef(-1)
 const label = defineModel('text')
 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)
+})
+
 const dropdownRef = shallowRef<DropdownExposed>()
 const scrollRef = shallowRef<ScrollExposed>()
 
@@ -205,6 +211,7 @@ watch(
     if (modelValue !== undefined) {
       const { valueKey } = props
       currentIndex.value = options.findIndex((option) => o(option).get(valueKey) === modelValue)
+
       selected.value = options[currentIndex.value]
     } else {
       currentIndex.value = -1

package/src/components/switch/style.scss

@@ -53,8 +53,11 @@ $root-name: switch;
   }
 
   @include m.e(button) {
+    display: flex;
+    align-items: center;
     border-radius: 100px;
     background-color: fn.use-var(bg-color, bottom);
+    border: 1px solid fn.use-var(border, color);
     transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
     padding: 2px;
     flex-shrink: 0;

package/src/components/tabs/style.scss

@@ -120,8 +120,10 @@ $active-shadow:
       background-color 0.22s cubic-bezier(0.4, 0, 0.2, 1),
       box-shadow 0.22s cubic-bezier(0.4, 0, 0.2, 1);
 
-    &:not(.is-active):not(.is-disabled):hover {
-      color: fn.use-var(text-color, title);
+    @include m.is-not(active, disabled) {
+      &:hover {
+        color: fn.use-var(text-color, title);
+      }
     }
 
     @include m.is(disabled) {

package/src/components/textarea/style.scss

@@ -7,14 +7,16 @@ $root-name: textarea;
 @include m.b($root-name) {
   position: relative;
   width: 100%;
-  box-shadow: inset 0 0 1px 1px fn.use-var(border, color);
-  transition: box-shadow 0.25s ease;
+  border: fn.use-var(border);
+  box-shadow: fn.use-var(shadow, emboss);
+  transition: border-color 0.25s ease, box-shadow 0.25s ease;
   overflow: hidden;
   vertical-align: middle;
 
-  &:hover {
-    // 悬浮时边框颜色为 var(--u-color-primary);
-    box-shadow: inset 0 0 1px 1px fn.use-var(color, primary);
+  @include m.is-not(disabled) {
+    &:hover {
+      border-color: fn.use-var(color, primary);
+    }
   }
 
   @include m.size using ($size) {
@@ -51,13 +53,12 @@ $root-name: textarea;
   }
 
   @include m.is(focus) {
-    // 使用变量 color 和 primary 设置内阴影和边框颜色
-    box-shadow: inset 0 0 1px 1px fn.use-var(color, primary);
+    border-color: fn.use-var(color, primary);
   }
 
   @include m.is(disabled) {
     background-color: fn.use-var(color, disabled);
-    box-shadow: inset 0 0 1px 1px fn.use-var(border, color);
+    box-shadow: none;
 
     @include m.bem($root-name, native) {
       cursor: not-allowed;

package/src/components/theme/style.scss

@@ -19,7 +19,8 @@ $root-name: theme;
   box-shadow:
     0 18px 48px rgba(15, 23, 42, 0.12),
     inset 0 1px 0 rgba(255, 255, 255, 0.7);
-  backdrop-filter: blur(20px) saturate(150%);
+  backdrop-filter: fn.use-var(bg-filter);
+  -webkit-backdrop-filter: fn.use-var(bg-filter);
   overflow: hidden;
 
   @include m.e(header) {

package/src/components/tree/style.scss

@@ -44,7 +44,7 @@ $indent-width: 20px;
 
     // 非虚拟模式通过相邻兄弟间距提供呼吸；
     // 虚拟模式下改由 virtualizer 的 gap 参数统一负责。
-    &:not(.is-virtual) {
+    @include m.is-not(virtual) {
       @include m.bem($root-name, node) {
         & + & {
           margin-top: 2px;
@@ -57,7 +57,7 @@ $indent-width: 20px;
   // 禁用节点不参与 hover 反馈，避免假性交互。
   @include m.is(selectable, checkable) {
     @include m.bem($root-name, node) {
-      &:not(.is-disabled) {
+      @include m.is-not(disabled) {
         @include m.bem($root-name, node-content) {
           &:hover {
             background-color: fn.use-var(bg-color, hover);

package/src/types/badge.ts

@@ -3,7 +3,7 @@ import type { ColorType, ComponentProps, DeconstructValue } from '@veltra/utils'
 /** 徽章组件属性 */
 export interface BadgeProps extends ComponentProps {
   /** 显示值 */
-  value?: number
+  value?: number | string
   /** 类别 */
   type?: ColorType
   /** 自定义背景色 */