@veltra/desktop 1.0.15 → 1.1.0

package/src/components/collapse/style.scss

@@ -73,8 +73,10 @@ $header-padding-y: (
       color $transition-fast,
       background-color $transition-fast;
 
-    &:hover:not(.is-disabled) {
-      background-color: fn.use-var(bg-color, hover);
+    @include m.is-not(disabled) {
+      &:hover {
+        background-color: fn.use-var(bg-color, hover);
+      }
     }
 
     &:focus-visible {
@@ -158,7 +160,7 @@ $header-padding-y: (
 
   // ===== Ghost（无边框）：项级胶囊化，反馈完全由 item hover 承担 =====
   // 嵌入卡片 / 对话框时使用，不引入额外的容器边界
-  &:not(.is-bordered) {
+  @include m.is-not(bordered) {
     background-color: transparent;
 
     #{fn.bem($root-name, item)} {
@@ -169,8 +171,10 @@ $header-padding-y: (
         margin-top: 4px;
       }
 
-      &:hover:not(.is-disabled) {
-        background-color: fn.use-var(bg-color, hover);
+      @include m.is-not(disabled) {
+        &:hover {
+          background-color: fn.use-var(bg-color, hover);
+        }
       }
     }
 
@@ -178,8 +182,10 @@ $header-padding-y: (
     #{fn.bem($root-name, header)} {
       border-radius: inherit;
 
-      &:hover:not(.is-disabled) {
-        background-color: transparent;
+      @include m.is-not(disabled) {
+        &:hover {
+          background-color: transparent;
+        }
       }
     }
   }

package/src/components/context-menu/style.scss

@@ -11,6 +11,8 @@ $root-name: context-menu;
   box-shadow: fn.use-var(shadow);
   border-radius: fn.use-var(radius, default);
   padding: fn.use-var(gap, small);
+  backdrop-filter: fn.use-var(bg-filter);
+  -webkit-backdrop-filter: fn.use-var(bg-filter);
 
   @include m.e(label) {
     margin-left: fn.use-var(gap, small);
@@ -31,8 +33,10 @@ $root-name: context-menu;
     border-radius: fn.use-var(radius, default);
     @include m.flex;
 
-    &:not(.is-disabled, .is-loading):hover {
-      background-color: fn.use-var(color, primary, light-9);
+    @include m.is-not(disabled, loading) {
+      &:hover {
+        background-color: fn.use-var(color, primary, light-9);
+      }
     }
 
     @include m.is(disabled, loading) {

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

@@ -9,8 +9,9 @@ $root-name: date-range-picker;
   width: 100%;
   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;
 
   @include m.flex($display: inline-flex);
@@ -26,8 +27,7 @@ $root-name: date-range-picker;
   }
 
   &:hover {
-    // 悬浮时边框颜色为 var(--u-color-primary);
-    box-shadow: inset 0 0 0px 1px fn.use-var(color, primary);
+    border-color: fn.use-var(color, primary);
   }
 
   @include m.e(input) {
@@ -71,7 +71,7 @@ $root-name: date-range-picker;
 
   @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, input) {
       cursor: not-allowed;

package/src/components/dialog/style.scss

@@ -40,7 +40,8 @@ $root-name: dialog;
     flex-shrink: 0;
     overflow: hidden;
     background-color: fn.use-var(bg-color, middle);
-    // backdrop-filter: fn.use-var(bg-filter);
+    backdrop-filter: fn.use-var(bg-filter);
+    -webkit-backdrop-filter: fn.use-var(bg-filter);
   }
 
   // 弹框头

package/src/components/drawer/style.scss

@@ -24,7 +24,8 @@ $direction-map: (
   position: absolute;
   border-radius: fn.use-var(radius, large);
   background-color: fn.use-var(bg-color, top);
-  backdrop-filter: blur(10px);
+  backdrop-filter: fn.use-var(bg-filter);
+  -webkit-backdrop-filter: fn.use-var(bg-filter);
   box-shadow: 0 0 10px 2px fn.use-var(shadow, color);
 
   @include m.e(close) {

package/src/components/dropdown/style.scss

@@ -12,6 +12,8 @@ $root-name: dropdown;
     border: fn.use-var(border);
     border-radius: fn.use-var(radius, default);
     box-shadow: fn.use-var(shadow);
+    backdrop-filter: fn.use-var(bg-filter);
+    -webkit-backdrop-filter: fn.use-var(bg-filter);
     top: 0;
     left: 0;
   }

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

@@ -12,13 +12,15 @@ $root-name: expression-editor;
   border-color: fn.use-var(border, color);
   border-radius: fn.use-var(radius, default);
 
-  &:hover:not(.is-disabled):not(.is-readonly) {
-    border-color: fn.use-var(color, primary);
-  }
+  @include m.is-not(disabled, readonly) {
+    &:hover {
+      border-color: fn.use-var(color, primary);
+    }
 
-  &:focus-within:not(.is-disabled):not(.is-readonly) {
-    border-color: fn.use-var(color, primary);
-    outline: none;
+    &:focus-within {
+      border-color: fn.use-var(color, primary);
+      outline: none;
+    }
   }
 
   @include m.is('disabled') {

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);
   }
 
   // 节点圆点