@veltra/desktop 1.1.7 → 1.1.10

package/src/components/collapse/collapse.vue

@@ -7,15 +7,9 @@
 <script lang="ts" setup>
 import { useFormFallbackProps, useModel } from '@veltra/compositions'
 import { bem, ExpandTransition } from '@veltra/utils'
-import { computed, provide } from 'vue'
-
-import type {
-  CollapseEmits,
-  CollapseModelValue,
-  CollapseProps,
-  CollapseValue,
-  _CollapseExposed
-} from '../../types'
+import { computed, provide, ref } from 'vue'
+
+import type { CollapseEmits, CollapseModelValue, CollapseProps, CollapseValue } from '../../types'
 import { CollapseDIKey } from './di'
 
 defineOptions({
@@ -24,8 +18,7 @@ defineOptions({
 
 const props = withDefaults(defineProps<CollapseProps>(), {
   accordion: false,
-  bordered: true,
-  iconPosition: 'right'
+  defaultCollapseAll: false
 })
 const emit = defineEmits<CollapseEmits>()
 
@@ -37,15 +30,9 @@ const expandTransition = new ExpandTransition({
 
 const { size } = useFormFallbackProps([props], { size: 'default' })
 
-const iconPosition = computed(() => props.iconPosition ?? 'right')
 const expandIcon = computed(() => props.expandIcon)
 
-const classList = computed(() => [
-  cls.b,
-  cls.m(size.value),
-  cls.m(`icon-${iconPosition.value}`),
-  bem.is('bordered', props.bordered)
-])
+const classList = computed(() => [cls.b, cls.m(size.value)])
 
 const modelValue = useModel<CollapseProps, 'modelValue'>({
   props,
@@ -77,51 +64,54 @@ const toggle = (value: CollapseValue) => {
   update(values)
 }
 
-const expand = (value: CollapseValue) => {
-  if (activeValues.value.includes(value)) return
-  if (props.accordion) {
-    update(value)
-    return
+// 收集子组件已注册的 values
+const registeredValues = ref<CollapseValue[]>([])
+
+// 初始捕获 modelValue 是否具有有效初值
+const hasInitialValue =
+  modelValue.value !== undefined &&
+  modelValue.value !== null &&
+  (!Array.isArray(modelValue.value) || modelValue.value.length > 0)
+
+const register = (value: CollapseValue) => {
+  if (!registeredValues.value.includes(value)) {
+    registeredValues.value.push(value)
+
+    // 若默认展开全部（defaultCollapseAll 为 false）且外部未指定初始值，则自动展开该子项
+    if (!props.defaultCollapseAll && !hasInitialValue) {
+      if (props.accordion) {
+        if (registeredValues.value.length === 1) {
+          update(value)
+        }
+      } else {
+        const current = Array.isArray(modelValue.value)
+          ? modelValue.value
+          : modelValue.value !== undefined && modelValue.value !== null
+            ? [modelValue.value]
+            : []
+        if (!current.includes(value)) {
+          update([...current, value])
+        }
+      }
+    }
   }
-  update([...activeValues.value, value])
 }
 
-const collapse = (value: CollapseValue) => {
-  if (!activeValues.value.includes(value)) return
-  if (props.accordion) {
-    update([])
-    return
+const unregister = (value: CollapseValue) => {
+  const idx = registeredValues.value.indexOf(value)
+  if (idx > -1) {
+    registeredValues.value.splice(idx, 1)
   }
-  update(activeValues.value.filter((v) => v !== value))
-}
-
-const expandAll = (values: CollapseValue[]) => {
-  if (props.accordion) {
-    update(values[0] ?? [])
-    return
-  }
-  update([...values])
-}
-
-const collapseAll = () => {
-  update([])
 }
 
 provide(CollapseDIKey, {
   cls,
   size,
-  iconPosition,
   expandIcon,
   activeValues,
   toggle,
-  expandTransition
-})
-
-defineExpose<_CollapseExposed>({
-  toggle,
-  expand,
-  collapse,
-  expandAll,
-  collapseAll
+  expandTransition,
+  register,
+  unregister
 })
 </script>

package/src/components/collapse/di.ts

@@ -1,16 +1,17 @@
 import { type BEM, type ComponentSize, ExpandTransition } from '@veltra/utils'
 import type { Component, ComputedRef, InjectionKey } from 'vue'
 
-import type { CollapseIconPosition, CollapseValue } from '../../types'
+import type { CollapseValue } from '../../types'
 
 export interface CollapseContext {
   cls: BEM<'collapse'>
   size: ComputedRef<ComponentSize>
-  iconPosition: ComputedRef<CollapseIconPosition>
   expandIcon: ComputedRef<Component | undefined>
   activeValues: ComputedRef<CollapseValue[]>
   toggle: (value: CollapseValue) => void
   expandTransition: ExpandTransition
+  register: (value: CollapseValue) => void
+  unregister: (value: CollapseValue) => void
 }
 
 export const CollapseDIKey: InjectionKey<CollapseContext> = Symbol('Collapse')

package/src/components/collapse/style.scss

@@ -10,54 +10,48 @@ $ease: cubic-bezier(0.4, 0, 0.2, 1);
 $transition-fast: 0.18s $ease;
 $transition-normal: 0.24s $ease;
 
-// 各尺寸的水平 / 垂直内边距：决定 header 和 content 的呼吸感
-// 节奏在配置项分组场景下既不过紧、也不过松
-$header-padding-x: (
-  small: 12px,
-  default: 16px,
-  large: 20px
-);
-$header-padding-y: (
-  small: 10px,
-  default: 14px,
-  large: 18px
-);
-
 @include m.b($root-name) {
   width: 100%;
   font-size: fn.use-var(font-size-main, default);
   color: fn.use-var(text-color, main);
+  background-color: transparent;
 
-  // ===== Bordered（默认）：整体一张卡片，项之间细线分隔 =====
-  // 面向"配置项分组"场景：清晰边界 + 克制反馈，不抢内部控件视觉
-  @include m.is(bordered) {
-    border: 1px solid fn.use-var(border, color);
-    border-radius: calc(fn.use-var(radius, large) + 2px);
-    background-color: fn.use-var(bg-color, top);
-    box-shadow:
-      0 1px 2px rgba(15, 23, 42, 0.04),
-      0 1px 3px rgba(15, 23, 42, 0.04);
-    overflow: hidden;
+  // ===== Item =====
+  @include m.e(item) {
+    border-radius: calc(fn.use-var(radius, default) + 2px);
+    background-color: fn.use-var(bg-color, hover);
+    transition: background-color $transition-fast;
 
-    @include m.e(item) {
-      &:not(:first-child) {
-        border-top: 1px solid color-mix(in srgb, #{fn.use-var(border, color)} 60%, transparent);
+    & + #{fn.bem($root-name, item)} {
+      margin-top: fn.use-var(gap, default);
+    }
+
+    @include m.is-not(disabled) {
+      &:hover {
+        // hover 状态与展开状态保持一致的微加深背景（混入 6% 的正文文字色）
+        background-color: color-mix(
+          in srgb,
+          #{fn.use-var(text-color, main)} 6%,
+          #{fn.use-var(bg-color, hover)}
+        );
       }
     }
-  }
 
-  // ===== Item 通用 =====
-  @include m.e(item) {
+    @include m.is(active) {
+      // 展开/活动状态背景（混入 6% 的正文文字色）
+      background-color: color-mix(
+        in srgb,
+        #{fn.use-var(text-color, main)} 6%,
+        #{fn.use-var(bg-color, hover)}
+      );
+    }
+
     @include m.is(disabled) {
       opacity: 0.55;
     }
   }
 
   // ===== Header =====
-  // 反馈策略：
-  //   - hover：仅背景轻微变化（"我可点击"信号）
-  //   - active：仅 font-weight 加重 + 箭头旋转（"我已展开"信号由内容显现承担）
-  //   - 颜色不切换到 primary，避免在大量配置块同时展开时产生视觉嘈杂
   @include m.e(header) {
     position: relative;
     display: flex;
@@ -72,12 +66,7 @@ $header-padding-y: (
     transition:
       color $transition-fast,
       background-color $transition-fast;
-
-    @include m.is-not(disabled) {
-      &:hover {
-        background-color: fn.use-var(bg-color, hover);
-      }
-    }
+    border-radius: inherit;
 
     &:focus-visible {
       box-shadow: inset 0 0 0 2px fn.use-var(color, primary);
@@ -86,11 +75,6 @@ $header-padding-y: (
     @include m.is(disabled) {
       cursor: not-allowed;
       color: fn.use-var(text-color, placeholder);
-
-      &:hover {
-        background-color: transparent;
-        color: fn.use-var(text-color, placeholder);
-      }
     }
 
     @include m.is(active) {
@@ -124,12 +108,6 @@ $header-padding-y: (
   }
 
   // ===== Content wrapper =====
-  // 高度由共享 expand transition hook 在 isActive 切换时驱动：
-  //   未挂载前 → CSS 兜底 height: 0
-  //   未激活   → 0px（带 transition）
-  //   激活中   → 0 → scrollHeight（CSS transition: height）
-  //   已激活   → auto（动画结束后回归，避免锁死内容动态变化）
-  // 比 grid-template-rows: 0fr ↔ 1fr 减少每帧 grid 布局重算，嵌套场景显著更流畅。
   @include m.e(content-wrapper) {
     overflow: hidden;
     height: 0;
@@ -142,50 +120,24 @@ $header-padding-y: (
   }
 
   // ===== Sizes =====
-  // padding-bottom 始终生效；inactive 时由 wrapper height: 0 + overflow: hidden
-  // 自然裁切，scrollHeight 计算因此始终一致，避免动画首帧抖动。
   @include m.size using ($size) {
     font-size: fn.use-var(font-size-main, $size);
 
     @include m.bem($root-name, header) {
-      padding: map.get($header-padding-y, $size) map.get($header-padding-x, $size);
+      padding: calc(fn.use-var(gap, $size) - 2px) fn.use-var(gap, $size);
       font-size: fn.use-var(font-size-title, $size);
     }
 
     @include m.bem($root-name, content) {
       font-size: fn.use-var(font-size-main, $size);
-      padding: 0 map.get($header-padding-x, $size) map.get($header-padding-y, $size);
+      padding: calc(fn.use-var(gap, $size) - 2px) fn.use-var(gap, $size) fn.use-var(gap, $size);
     }
-  }
-
-  // ===== Ghost（无边框）：项级胶囊化，反馈完全由 item hover 承担 =====
-  // 嵌入卡片 / 对话框时使用，不引入额外的容器边界
-  @include m.is-not(bordered) {
-    background-color: transparent;
 
     #{fn.bem($root-name, item)} {
-      border-radius: calc(fn.use-var(radius, default) + 2px);
-      transition: background-color $transition-fast;
+      border-radius: calc(fn.use-var(radius, $size) + 2px);
 
       & + #{fn.bem($root-name, item)} {
-        margin-top: 4px;
-      }
-
-      @include m.is-not(disabled) {
-        &:hover {
-          background-color: fn.use-var(bg-color, hover);
-        }
-      }
-    }
-
-    // ghost 下 header 自身不再单独 hover，由 item 整体承载
-    #{fn.bem($root-name, header)} {
-      border-radius: inherit;
-
-      @include m.is-not(disabled) {
-        &:hover {
-          background-color: transparent;
-        }
+        margin-top: fn.use-var(gap, $size);
       }
     }
   }

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

@@ -85,7 +85,11 @@ $root-name: expression-editor;
     line-height: 1;
     font-size: 12px;
     color: fn.component-var(expression-editor, chip-color, fn.use-var(color, primary));
-    background-color: fn.component-var(expression-editor, chip-bg, fn.use-var(color, primary, light-9));
+    background-color: fn.component-var(
+      expression-editor,
+      chip-bg,
+      fn.use-var(color, primary, light-9)
+    );
     border-radius: 999px;
     cursor: pointer;
     user-select: none;
@@ -95,7 +99,11 @@ $root-name: expression-editor;
 
     &:hover {
       color: fn.component-var(expression-editor, chip-color, fn.use-var(color, primary));
-      background-color: fn.component-var(expression-editor, chip-bg, fn.use-var(color, primary, light-8));
+      background-color: fn.component-var(
+        expression-editor,
+        chip-bg,
+        fn.use-var(color, primary, light-8)
+      );
       box-shadow: 0 1px 4px fn.use-var(shadow, color);
 
       .#{vars.$namespace}#{$root-name}__chip-close {

package/src/components/file-viewer/previewers/image-previewer.vue

@@ -18,6 +18,7 @@ import { bem } from '@veltra/utils'
 import { onBeforeUnmount, ref, shallowRef, useAttrs, watch } from 'vue'
 
 import type { FileViewerItem } from '../../../types/file-viewer'
+import { toBlobUrl } from '../helper'
 
 defineOptions({ name: 'FileViewerImagePreviewer', inheritAttrs: false })
 
@@ -34,11 +35,10 @@ const failed = ref(false)
 
 let revoke: (() => void) | undefined
 
-async function load() {
+function load() {
   loading.value = true
   failed.value = false
   revoke?.()
-  const { toBlobUrl } = await import('../helper')
   const r = toBlobUrl(props.file.src, props.file.mime)
   url.value = r.url
   revoke = r.revoke

package/src/components/file-viewer/previewers/pdf-previewer.vue

@@ -39,6 +39,7 @@ import { bem } from '@veltra/utils'
 import { computed, onBeforeUnmount, shallowRef, useAttrs, watch } from 'vue'
 
 import type { FileViewerItem } from '../../../types/file-viewer'
+import { toBlobUrl } from '../helper'
 
 defineOptions({ name: 'FileViewerPdfPreviewer', inheritAttrs: false })
 
@@ -54,9 +55,8 @@ const { engine, isLoading, error } = usePdfiumEngine()
 const pdfUrl = shallowRef<string>('')
 let revoke: (() => void) | undefined
 
-async function load() {
+function load() {
   revoke?.()
-  const { toBlobUrl } = await import('../helper')
   const r = toBlobUrl(props.file.src, props.file.mime ?? 'application/pdf')
   pdfUrl.value = r.url
   revoke = r.revoke

package/src/components/file-viewer/previewers/video-previewer.vue

@@ -18,6 +18,7 @@ import { bem } from '@veltra/utils'
 import { onBeforeUnmount, shallowRef, useTemplateRef, watch } from 'vue'
 
 import type { FileViewerItem } from '../../../types/file-viewer'
+import { toBlobUrl } from '../helper'
 
 defineOptions({ name: 'FileViewerVideoPreviewer' })
 
@@ -33,9 +34,8 @@ const videoRef = useTemplateRef<HTMLVideoElement>('videoRef')
 let revoke: (() => void) | undefined
 let unmounting = false
 
-async function load() {
+function load() {
   revoke?.()
-  const { toBlobUrl } = await import('../helper')
   const r = toBlobUrl(props.file.src, props.file.mime)
   url.value = r.url
   revoke = r.revoke

package/src/components/paginator/style.scss

@@ -39,12 +39,20 @@ $root-name: paginator;
     @include m.flex($justify: center);
 
     &:hover {
-      background-color: fn.component-var(paginator, btn-hover-bg, fn.use-var(color, primary, 'light-9'));
+      background-color: fn.component-var(
+        paginator,
+        btn-hover-bg,
+        fn.use-var(color, primary, 'light-9')
+      );
       color: fn.component-var(paginator, btn-hover-color, fn.use-var(text, color, title));
     }
 
     @include m.is(active) {
-      background-color: fn.component-var(paginator, btn-active-bg, fn.use-var(color, primary, 'light-9'));
+      background-color: fn.component-var(
+        paginator,
+        btn-active-bg,
+        fn.use-var(color, primary, 'light-9')
+      );
       color: fn.component-var(paginator, btn-active-color, fn.use-var(color, primary));
     }
 

package/src/components/tabs/style.ts

@@ -1,4 +1,5 @@
 import '../scroll/style'
 import '../icon/style'
 import '@veltra/directives/ripple/style.js'
+import '@veltra/styles/anime/fade.scss'
 import './style.scss'

package/src/components/tree/style.scss

@@ -74,7 +74,11 @@ $indent-width: 20px;
 
     @include m.is(selected) {
       @include m.bem($root-name, node-content) {
-        background-color: fn.component-var(tree, node-selected-bg, fn.use-var(color, primary, light-9));
+        background-color: fn.component-var(
+          tree,
+          node-selected-bg,
+          fn.use-var(color, primary, light-9)
+        );
         color: fn.component-var(tree, node-selected-color, fn.use-var(color, primary));
         font-weight: 500;
 

package/src/types/collapse.ts

@@ -1,4 +1,4 @@
-import type { ComponentProps, DeconstructValue } from '@veltra/utils'
+import type { ComponentProps } from '@veltra/utils'
 import type { Component } from 'vue'
 
 /** Collapse 项的唯一标识 */
@@ -7,9 +7,6 @@ export type CollapseValue = string | number
 /** Collapse modelValue：手风琴模式为单值，普通模式为数组（也兼容传入单值） */
 export type CollapseModelValue = CollapseValue | CollapseValue[]
 
-/** 展开图标位置 */
-export type CollapseIconPosition = 'left' | 'right'
-
 /** Collapse 组件属性 */
 export interface CollapseProps extends ComponentProps {
   /** 当前展开项的 value（单个或多个） */
@@ -22,16 +19,10 @@ export interface CollapseProps extends ComponentProps {
   accordion?: boolean
 
   /**
-   * 是否显示外层与项之间的分隔线（设为 false 时为 ghost 风格）
-   * @default true
-   */
-  bordered?: boolean
-
-  /**
-   * 展开/收起图标位置
-   * @default 'right'
+   * 是否默认折叠全部项。设为 false 时默认全部展开。
+   * @default false
    */
-  iconPosition?: CollapseIconPosition
+  defaultCollapseAll?: boolean
 
   /**
    * 自定义展开图标组件，活动态会自动旋转 90°。
@@ -46,22 +37,6 @@ export interface CollapseEmits {
   (e: 'change', value: CollapseModelValue): void
 }
 
-/** Collapse 暴露的实例方法 */
-export interface _CollapseExposed {
-  /** 切换某项的展开状态 */
-  toggle: (value: CollapseValue) => void
-  /** 展开某项 */
-  expand: (value: CollapseValue) => void
-  /** 收起某项 */
-  collapse: (value: CollapseValue) => void
-  /** 展开全部（accordion 模式下展开第一个传入的 value） */
-  expandAll: (values: CollapseValue[]) => void
-  /** 全部收起 */
-  collapseAll: () => void
-}
-
-export type CollapseExposed = DeconstructValue<_CollapseExposed>
-
 /** CollapseItem 组件属性 */
 export interface CollapseItemProps {
   /** 唯一标识 */
@@ -72,7 +47,4 @@ export interface CollapseItemProps {
 
   /** 是否禁用 */
   disabled?: boolean
-
-  /** 是否隐藏展开图标 */
-  hideIcon?: boolean
 }