@veltra/desktop 1.2.21 → 1.2.23

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

@@ -1,5 +1,7 @@
 <template>
   <u-dropdown
+    v-if="!readonly"
+    v-bind="$attrs"
     :class="className"
     trigger="click"
     :content-class="[cls.e('panel'), cls.em('panel', size)]"
@@ -8,7 +10,6 @@
     :disabled="disabled"
     @mouseenter.native="hovered = true"
     @mouseleave.native="hovered = false"
-    v-if="!readonly"
   >
     <template #trigger>
       <input
@@ -72,7 +73,7 @@ import { UDatePanel } from '../date-panel'
 import { UDropdown } from '../dropdown'
 import { UIcon } from '../icon'
 
-defineOptions({ name: 'UDateRangePicker' })
+defineOptions({ name: 'UDateRangePicker', inheritAttrs: false })
 
 const props = withDefaults(defineProps<DateRangePickerProps>(), {
   placeholder: () => ['起始日期', '结束日期'],

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

@@ -4,6 +4,7 @@
 @include m.b(file-viewer) {
   --u-file-viewer-canvas: #101114;
   --u-file-viewer-canvas-soft: #17191f;
+  --u-file-viewer-canvas-overlay: rgba(16, 17, 20, 0.74);
   --u-file-viewer-page-shadow: 0 24px 72px rgba(0, 0, 0, 0.34);
 
   position: relative;
@@ -174,7 +175,7 @@
     }
 
     @include m.is(active) {
-      background: color-mix(in srgb, #{fn.use-var(color, primary)} 8%, transparent);
+      background: fn.color-a(color, 8, primary);
 
       &::before {
         opacity: 1;
@@ -247,6 +248,8 @@
 
   @include m.e(badge) {
     --u-file-viewer-kind: #{fn.use-var(text-color, second)};
+    --u-file-viewer-kind-border: fn.color-a(text-color, 28, second);
+    --u-file-viewer-kind-bg: fn.color-a(text-color, 10, second);
 
     display: inline-flex;
     align-items: center;
@@ -254,10 +257,10 @@
     flex-shrink: 0;
     width: 40px;
     height: 26px;
-    border: 1px solid color-mix(in srgb, var(--u-file-viewer-kind) 28%, transparent);
+    border: 1px solid var(--u-file-viewer-kind-border);
     border-radius: 7px;
     color: var(--u-file-viewer-kind);
-    background: color-mix(in srgb, var(--u-file-viewer-kind) 10%, transparent);
+    background: var(--u-file-viewer-kind-bg);
     font-size: 10px;
     font-weight: 760;
     line-height: 1;
@@ -265,26 +268,38 @@
 
   @include m.em(badge, image) {
     --u-file-viewer-kind: #0891b2;
+    --u-file-viewer-kind-border: rgba(8, 145, 178, 0.28);
+    --u-file-viewer-kind-bg: rgba(8, 145, 178, 0.1);
   }
 
   @include m.em(badge, video) {
     --u-file-viewer-kind: #db2777;
+    --u-file-viewer-kind-border: rgba(219, 39, 119, 0.28);
+    --u-file-viewer-kind-bg: rgba(219, 39, 119, 0.1);
   }
 
   @include m.em(badge, pdf) {
     --u-file-viewer-kind: #dc2626;
+    --u-file-viewer-kind-border: rgba(220, 38, 38, 0.28);
+    --u-file-viewer-kind-bg: rgba(220, 38, 38, 0.1);
   }
 
   @include m.em(badge, sheet) {
     --u-file-viewer-kind: #15803d;
+    --u-file-viewer-kind-border: rgba(21, 128, 61, 0.28);
+    --u-file-viewer-kind-bg: rgba(21, 128, 61, 0.1);
   }
 
   @include m.em(badge, docx) {
     --u-file-viewer-kind: #2563eb;
+    --u-file-viewer-kind-border: rgba(37, 99, 235, 0.28);
+    --u-file-viewer-kind-bg: rgba(37, 99, 235, 0.1);
   }
 
   @include m.em(badge, text) {
     --u-file-viewer-kind: #64748b;
+    --u-file-viewer-kind-border: rgba(100, 116, 139, 0.28);
+    --u-file-viewer-kind-bg: rgba(100, 116, 139, 0.1);
   }
 
   @include m.e(stage) {
@@ -404,7 +419,7 @@
     gap: 2px;
     height: 34px;
     padding: 2px;
-    border: 1px solid color-mix(in srgb, #{fn.use-var(border, color)} 86%, transparent);
+    border: 1px solid fn.color-a(border, 86, color);
     border-radius: 8px;
     background: fn.use-var(bg-color, middle);
   }
@@ -436,7 +451,7 @@
 
     &:not(:disabled):hover {
       color: fn.use-var(color, primary);
-      background: color-mix(in srgb, #{fn.use-var(color, primary)} 10%, transparent);
+      background: fn.color-a(color, 10, primary);
     }
 
     &:not(:disabled):active {
@@ -470,7 +485,7 @@
 
     &:not(:disabled):hover {
       color: #fff;
-      background: color-mix(in srgb, #{fn.use-var(color, primary)} 88%, #fff);
+      background: fn.use-var(color, primary, light, 1);
     }
   }
 
@@ -760,8 +775,8 @@
 
     @include m.is(active) {
       color: fn.use-var(color, primary);
-      background: color-mix(in srgb, #{fn.use-var(color, primary)} 11%, transparent);
-      border-color: color-mix(in srgb, #{fn.use-var(color, primary)} 22%, transparent);
+      background: fn.color-a(color, 11, primary);
+      border-color: fn.color-a(color, 22, primary);
     }
   }
 
@@ -793,7 +808,7 @@
     align-items: center;
     justify-content: center;
     color: rgba(255, 255, 255, 0.72);
-    background: color-mix(in srgb, var(--u-file-viewer-canvas) 74%, transparent);
+    background: var(--u-file-viewer-canvas-overlay);
     font-size: 13px;
     pointer-events: none;
   }

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

@@ -15,10 +15,6 @@ $root-name: form-item;
 
     @include m.bem($root-name, content) {
       min-height: fn.use-var(form-component-height, $size);
-
-      @include m.bem($root-name, viewer) {
-        min-height: fn.use-var(form-component-height, $size);
-      }
     }
 
     @include m.bem($root-name, tips) {
@@ -64,13 +60,6 @@ $root-name: form-item;
     flex-grow: 1;
     word-break: break-all;
     @include m.flex($wrap: wrap);
-
-    @include m.bem($root-name, viewer) {
-      line-height: 1.3;
-      color: fn.use-var(text-color, title);
-      display: inline-flex;
-      align-items: center;
-    }
   }
 
   @include m.e(error) {

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

@@ -1,5 +1,5 @@
 <template>
-  <ul :class="[cls.b, cls.m(size)]" v-if="!readonly">
+  <ul v-if="!readonly" v-bind="$attrs" :class="[cls.b, cls.m(size)]">
     <li v-if="isEmpty && creatable">
       <u-button style="width: 100%" :icon="Plus" @click="handleAdd(0)" :size="size">
         新增
@@ -51,7 +51,7 @@ import type { GroupInputEmits, GroupInputProps } from '../../types'
 import { UButton } from '../button'
 import { useGroupItems } from './use-group-items'
 
-defineOptions({ name: 'UGroupInput' })
+defineOptions({ name: 'UGroupInput', inheritAttrs: false })
 
 const props = withDefaults(defineProps<GroupInputProps<GroupItem>>(), {
   modelValue: () => [],

package/src/components/input/input.vue

@@ -1,9 +1,10 @@
 <template>
   <div
+    v-if="!readonly"
+    v-bind="$attrs"
     :class="inputClass"
     @mouseenter="handleMouseEnter"
     @mouseleave="handleMouseLeave"
-    v-if="!readonly"
   >
     <span v-if="$slots.prefix || prefix" :class="prefixClass" @click="handlePrefixClick">
       {{ prefix }}
@@ -62,7 +63,7 @@ import { computed, getCurrentInstance, ref, shallowRef, nextTick } from 'vue'
 import type { InputEmits, InputProps, _InputExposed } from '../../types'
 import { UIcon } from '../icon'
 
-defineOptions({ name: 'UInput' })
+defineOptions({ name: 'UInput', inheritAttrs: false })
 
 const props = withDefaults(defineProps<InputProps>(), {
   placeholder: '请输入',

package/src/components/kbd/style.scss

@@ -30,8 +30,7 @@
    * Multi-layer box-shadow simulates a 3D keycap appearance.
    */
   box-shadow:
-    inset 0 0.05em
-      color-mix(in srgb, #{fn.use-var(bg-color, top)} 75%, #{fn.use-var(bg-color, black)}),
-    0 0 0 0.05em color-mix(in srgb, #{fn.use-var(border, color)} 50%, transparent),
-    0 0.08em 0.17em color-mix(in srgb, #{fn.use-var(shadow, color)} 60%, transparent);
+    inset 0 0.05em fn.component-var(kbd, inset-shadow),
+    0 0 0 0.05em fn.component-var(kbd, border-shadow),
+    0 0.08em 0.17em fn.component-var(kbd, drop-shadow);
 }

package/src/components/loading/style.scss

@@ -25,7 +25,7 @@ $root-name: loading;
       width: 36px;
       aspect-ratio: 1;
       border-radius: 50%;
-      border: 3px solid color-mix(in srgb, currentColor 22%, transparent);
+      border: 3px solid fn.color-a(color, 22, primary);
       border-top-color: currentColor;
       position: relative;
       animation: loading-spin 0.8s linear infinite;
@@ -35,7 +35,7 @@ $root-name: loading;
         position: absolute;
         inset: 5px;
         border-radius: 50%;
-        border: 2px solid color-mix(in srgb, currentColor 22%, transparent);
+        border: 2px solid fn.color-a(color, 22, primary);
         border-bottom-color: currentColor;
         animation: loading-spin 1.2s linear infinite reverse;
       }
@@ -88,7 +88,7 @@ $root-name: loading;
       width: 36px;
       aspect-ratio: 1;
       border-radius: 50%;
-      border: 3px solid color-mix(in srgb, currentColor 22%, transparent);
+      border: 3px solid fn.color-a(color, 22, primary);
       border-top-color: currentColor;
       animation: loading-spin 0.9s linear infinite;
     }

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

@@ -1,6 +1,7 @@
 <template>
   <u-dropdown
     v-if="!readonly"
+    v-bind="$attrs"
     trigger="click"
     ref="dropdownRef"
     :class="[cls.b, cls.m(size), bem.is('disabled', disabled)]"
@@ -164,7 +165,7 @@ import { UTag } from '../tag'
 import { MultiSelectDIKey } from './di'
 import UMultiSelectOption from './multi-select-option.vue'
 
-defineOptions({ name: 'UMultiSelect' })
+defineOptions({ name: 'UMultiSelect', inheritAttrs: false })
 
 const props = withDefaults(defineProps<MultiSelectProps>(), {
   labelKey: 'label',

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

@@ -1,6 +1,7 @@
 <template>
   <u-dropdown
     v-if="!readonly"
+    v-bind="$attrs"
     :class="[cls.b, cls.m(size), bem.is('disabled', disabled)]"
     trigger="click"
     :content-class="[cls.e('panel'), cls.em('panel', size), contentClass]"
@@ -113,7 +114,7 @@ import { UTag } from '../tag'
 import { UTree } from '../tree'
 import type { TreeSlotsScope } from '../tree/di'
 
-defineOptions({ name: 'UMultiTreeSelect' })
+defineOptions({ name: 'UMultiTreeSelect', inheritAttrs: false })
 
 const cls = bem('multi-tree-select')
 

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

@@ -30,7 +30,7 @@
       @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">
+      <ul :class="[cls.e('sub-list'), bem.is('has-active', branchActive)]" v-show="expanded">
         <template v-for="(child, index) of item.children!" :key="getKey(index, parentKey)">
           <UNavItem v-if="!child.children?.length" :item="child" :depth="depth + 1" />
           <NavSub v-else :item="child" :parent-key="getKey(index, parentKey)" :depth="depth + 1" />

package/src/components/nav/style.scss

@@ -148,12 +148,10 @@ $collapsed-nav: collapsed-nav;
     overflow: hidden;
     margin: 2px 0 0 12px;
     padding: 2px 0 2px 8px;
-    border-left: 1px solid color-mix(in srgb, #{fn.use-var(border, color)} 52%, transparent);
+    border-left: 1px solid fn.color-a(border, 52, color);
 
-    @supports selector(:has(*)) {
-      &:has(#{fn.bem($root-name, item)}.is-active) {
-        border-left-color: fn.use-var(color, primary);
-      }
+    @include m.is(has-active) {
+      border-left-color: fn.use-var(color, primary);
     }
   }
 

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

@@ -68,13 +68,13 @@ 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 { computed, shallowRef, useAttrs, watch } from 'vue'
 
 import type { NumberInputEmits, NumberInputProps, InputExposed } from '../../types'
 import { UIcon } from '../icon'
 import { UInput } from '../input'
 
-defineOptions({ name: 'UNumberInput' })
+defineOptions({ name: 'UNumberInput', inheritAttrs: false })
 
 const props = withDefaults(defineProps<NumberInputProps>(), {
   placeholder: '请输入',
@@ -94,9 +94,12 @@ const { size, disabled, readonly } = useFormFallbackProps([formProps ?? {}, prop
   readonly: false
 })
 
-const inputProps = computed(() => {
-  return o(props).pick(['disabled', 'placeholder', 'size', 'prefix'])
-})
+const attrs = useAttrs()
+
+const inputProps = computed(() => ({
+  ...attrs,
+  ...o(props).pick(['disabled', 'placeholder', 'size', 'prefix'])
+}))
 
 const inputRef = shallowRef<InputExposed>()
 

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

@@ -1,5 +1,5 @@
 <template>
-  <div v-if="!readonly" :class="className">
+  <div v-if="!readonly" v-bind="$attrs" :class="className">
     <u-number-input
       v-model="startModel"
       :placeholder="startPlaceholder"
@@ -36,7 +36,7 @@ import { computed, getCurrentInstance, nextTick, onMounted, watch } from 'vue'
 import type { NumberRangeInputEmits, NumberRangeInputProps, NumberRangeTuple } from '../../types'
 import { UNumberInput } from '../number-input'
 
-defineOptions({ name: 'UNumberRangeInput' })
+defineOptions({ name: 'UNumberRangeInput', inheritAttrs: false })
 
 const props = withDefaults(defineProps<NumberRangeInputProps>(), {
   startPlaceholder: '请输入',

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

@@ -1,5 +1,5 @@
 <template>
-  <div :class="[cls.b, bem.is('block', block), cls.m(size)]" v-if="!readonly">
+  <div v-if="!readonly" v-bind="$attrs" :class="[cls.b, bem.is('block', block), cls.m(size)]">
     <u-radio
       v-for="item of items"
       :key="item[valueKey]"
@@ -26,7 +26,7 @@ import { injectFormContext } from '@veltra/utils'
 import type { RadioGroupProps, RadioGroupEmits } from '../../types'
 import URadio from '../radio/radio.vue'
 
-defineOptions({ name: 'URadioGroup' })
+defineOptions({ name: 'URadioGroup', inheritAttrs: false })
 
 const props = withDefaults(defineProps<RadioGroupProps>(), {
   labelKey: 'label',

package/src/components/select/select.vue

@@ -1,6 +1,7 @@
 <template>
   <u-dropdown
     v-if="!readonly"
+    v-bind="$attrs"
     trigger="click"
     :class="[cls.b, bem.is('disabled', disabled)]"
     ref="dropdownRef"
@@ -137,7 +138,7 @@ import { UScroll } from '../scroll'
 import { useKeyboard } from './use-keyboard'
 import { useOptions } from './use-options'
 
-defineOptions({ name: 'USelect' })
+defineOptions({ name: 'USelect', inheritAttrs: false })
 
 const props = withDefaults(defineProps<SelectProps>(), {
   labelKey: 'label',

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

@@ -1,6 +1,7 @@
 <template>
   <u-dropdown
     v-if="!readonly"
+    v-bind="$attrs"
     :class="[cls.b, bem.is('disabled', disabled)]"
     trigger="click"
     :content-class="[cls.e('panel'), cls.em('panel', size), contentClass]"
@@ -73,7 +74,7 @@ import { UInput } from '../input'
 import { UTree } from '../tree'
 import type { TreeSlotsScope } from '../tree/di'
 
-defineOptions({ name: 'UTreeSelect' })
+defineOptions({ name: 'UTreeSelect', inheritAttrs: false })
 
 const props = withDefaults(defineProps<TreeSelectProps>(), {
   labelKey: 'label',