@veltra/desktop 1.1.9 → 1.1.11

package/src/components/card/style.scss

@@ -14,15 +14,12 @@ $root-name: card;
 
   @include m.is(integrate) {
     box-shadow: none;
+    --u-card-header-bg: transparent;
+    --u-card-action-bg: transparent;
     & > {
       @include m.bem($root-name, header) {
-        border-bottom: none;
         padding-bottom: 0;
       }
-
-      @include m.bem($root-name, action) {
-        border-top: none;
-      }
     }
   }
 
@@ -40,7 +37,7 @@ $root-name: card;
   }
 
   @include m.e(header) {
-    border-bottom: fn.use-var(border);
+    background-color: fn.use-var(header-bg, transparent);
     color: fn.use-var(text-color, title);
   }
 
@@ -66,21 +63,10 @@ $root-name: card;
   }
 
   @include m.e(action) {
-    border-top: fn.use-var(border);
+    background-color: fn.use-var(action-bg, transparent);
 
     #{fn.bem(button)} + #{fn.bem(button)} {
       margin-left: fn.use-var(gap, default);
     }
   }
-
-  // @include m.is(always-shadow) {
-  //   box-shadow: fn.use-var(shadow);
-  // }
-
-  // @include m.is(hover-shadow) {
-  //   transition: box-shadow 0.25s ease;
-  //   &:hover {
-  //     box-shadow: fn.use-var(shadow);
-  //   }
-  // }
 }

package/src/components/collapse/__test__/collapse.test.ts

@@ -0,0 +1,178 @@
+// @vitest-environment happy-dom
+import { createApp, h, nextTick, ref } from 'vue'
+
+import UCollapseItem from '../collapse-item.vue'
+import UCollapse from '../collapse.vue'
+
+function mountCollapse(
+  props: Record<string, unknown> = {},
+  items: Array<{ value: string; title: string }> = [
+    { value: 'a', title: 'Title A' },
+    { value: 'b', title: 'Title B' }
+  ]
+) {
+  const host = document.createElement('div')
+  document.body.appendChild(host)
+
+  const model = ref(props.modelValue)
+  const app = createApp({
+    render() {
+      return h(
+        UCollapse,
+        {
+          ...props,
+          modelValue: model.value,
+          'onUpdate:modelValue': (value: any) => {
+            model.value = value
+          }
+        },
+        () =>
+          items.map((item) =>
+            h(
+              UCollapseItem,
+              { value: item.value, title: item.title },
+              () => `Content ${item.value}`
+            )
+          )
+      )
+    }
+  })
+
+  app.mount(host)
+
+  return {
+    host,
+    model,
+    unmount() {
+      app.unmount()
+      host.remove()
+    }
+  }
+}
+
+describe('Collapse', () => {
+  it('defaultCollapseAll defaults to false, which expands all items when no initial modelValue is provided', async () => {
+    const { host, model, unmount } = mountCollapse()
+
+    try {
+      await nextTick()
+      // 默认展开全部：modelValue 应该包含所有项的 value
+      expect(model.value).toEqual(['a', 'b'])
+
+      const activeItems = host.querySelectorAll('.u-collapse__item.is-active')
+      expect(activeItems.length).toBe(2)
+    } finally {
+      unmount()
+    }
+  })
+
+  it('defaultCollapseAll sets to true collapses all items', async () => {
+    const { host, model, unmount } = mountCollapse({ defaultCollapseAll: true })
+
+    try {
+      await nextTick()
+      // 全部折叠：modelValue 应该为空或未定义，没有任何项具有 is-active 样式
+      expect(model.value).toBeUndefined()
+
+      const activeItems = host.querySelectorAll('.u-collapse__item.is-active')
+      expect(activeItems.length).toBe(0)
+    } finally {
+      unmount()
+    }
+  })
+
+  it('defaultCollapseAll sets to empty string collapses all items', async () => {
+    const { host, model, unmount } = mountCollapse({ defaultCollapseAll: '' })
+
+    try {
+      await nextTick()
+      expect(model.value).toBeUndefined()
+
+      const activeItems = host.querySelectorAll('.u-collapse__item.is-active')
+      expect(activeItems.length).toBe(0)
+    } finally {
+      unmount()
+    }
+  })
+
+  it('defaultCollapseAll sets to "true" collapses all items', async () => {
+    const { host, model, unmount } = mountCollapse({ defaultCollapseAll: 'true' })
+
+    try {
+      await nextTick()
+      expect(model.value).toBeUndefined()
+
+      const activeItems = host.querySelectorAll('.u-collapse__item.is-active')
+      expect(activeItems.length).toBe(0)
+    } finally {
+      unmount()
+    }
+  })
+
+  it('respects initial modelValue even if defaultCollapseAll is false', async () => {
+    const { host, model, unmount } = mountCollapse({ modelValue: ['a'] })
+
+    try {
+      await nextTick()
+      // 外部传入初始值：即使 defaultCollapseAll 为 false，也仅激活外部指定的项
+      expect(model.value).toEqual(['a'])
+
+      const activeItems = host.querySelectorAll('.u-collapse__item.is-active')
+      expect(activeItems.length).toBe(1)
+      expect(activeItems[0].querySelector('.u-collapse__title')?.textContent).toBe('Title A')
+    } finally {
+      unmount()
+    }
+  })
+
+  it('accordion mode with defaultCollapseAll=false only expands the first item', async () => {
+    const { host, model, unmount } = mountCollapse({ accordion: true })
+
+    try {
+      await nextTick()
+      // 手风琴模式且没有初始值，默认只展开第一个
+      expect(model.value).toBe('a')
+
+      const activeItems = host.querySelectorAll('.u-collapse__item.is-active')
+      expect(activeItems.length).toBe(1)
+      expect(activeItems[0].querySelector('.u-collapse__title')?.textContent).toBe('Title A')
+    } finally {
+      unmount()
+    }
+  })
+
+  it('toggles collapse items on header click', async () => {
+    const { host, model, unmount } = mountCollapse({ defaultCollapseAll: true })
+
+    try {
+      await nextTick()
+      expect(model.value).toBeUndefined()
+
+      const headers = host.querySelectorAll('.u-collapse__header')
+      expect(headers.length).toBe(2)
+
+      // 点击第一个 header 展开它
+      ;(headers[0] as HTMLElement).click()
+      await nextTick()
+
+      expect(model.value).toEqual(['a'])
+      expect(host.querySelectorAll('.u-collapse__item.is-active').length).toBe(1)
+
+      // 点击第二个 header 展开它
+      ;(headers[1] as HTMLElement).click()
+      await nextTick()
+
+      expect(model.value).toEqual(['a', 'b'])
+      expect(host.querySelectorAll('.u-collapse__item.is-active').length).toBe(2)
+
+      // 再次点击第一个 header 收起它
+      ;(headers[0] as HTMLElement).click()
+      await nextTick()
+
+      expect(model.value).toEqual(['b'])
+      expect(host.querySelectorAll('.u-collapse__item.is-active').length).toBe(1)
+    } finally {
+      unmount()
+    }
+  })
+})

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

@@ -10,17 +10,11 @@
       @keydown.enter.prevent="handleClick"
       @keydown.space.prevent="handleClick"
     >
-      <span v-if="showLeftIcon" :class="cls.e('icon')">
-        <slot name="icon" :is-active="isActive">
-          <UIcon><component :is="iconComponent" /></UIcon>
-        </slot>
-      </span>
-
       <span :class="cls.e('title')">
         <slot name="title">{{ title }}</slot>
       </span>
 
-      <span v-if="showRightIcon" :class="cls.e('icon')">
+      <span :class="cls.e('icon')">
         <slot name="icon" :is-active="isActive">
           <UIcon><component :is="iconComponent" /></UIcon>
         </slot>
@@ -55,17 +49,13 @@ const cls = context?.cls ?? bem('collapse')
 
 const isActive = computed(() => !!context?.activeValues.value.includes(props.value))
 
-const iconPosition = computed(() => context?.iconPosition.value ?? 'right')
-
 const iconComponent = computed(() => context?.expandIcon.value ?? ArrowRight)
 
-const showLeftIcon = computed(() => !props.hideIcon && iconPosition.value === 'left')
-const showRightIcon = computed(() => !props.hideIcon && iconPosition.value === 'right')
-
 const classList = computed(() => [
   cls.e('item'),
   bem.is('active', isActive.value),
-  bem.is('disabled', props.disabled)
+  bem.is('disabled', props.disabled),
+  bem.is('bordered', context?.bordered.value)
 ])
 
 const headerClassList = computed(() => [
@@ -84,6 +74,7 @@ const wrapperEl = ref<HTMLElement>()
 const { expandTransition } = context
 
 onMounted(() => {
+  context?.register(props.value)
   if (!wrapperEl.value) return
   expandTransition.setExpanded(wrapperEl.value, isActive.value)
 })
@@ -94,6 +85,7 @@ watch(isActive, (active) => {
 })
 
 onBeforeUnmount(() => {
+  context?.unregister(props.value)
   if (!wrapperEl.value) return
   expandTransition.cancel(wrapperEl.value)
 })

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,8 @@ defineOptions({
 
 const props = withDefaults(defineProps<CollapseProps>(), {
   accordion: false,
-  bordered: true,
-  iconPosition: 'right'
+  defaultCollapseAll: false,
+  bordered: false
 })
 const emit = defineEmits<CollapseEmits>()
 
@@ -37,15 +31,11 @@ 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 bordered = computed(() => props.bordered)
+
+const classList = computed(() => [cls.b, cls.m(size.value), bem.is('bordered', bordered.value)])
 
 const modelValue = useModel<CollapseProps, 'modelValue'>({
   props,
@@ -77,51 +67,55 @@ const toggle = (value: CollapseValue) => {
   update(values)
 }
 
-const expand = (value: CollapseValue) => {
-  if (activeValues.value.includes(value)) return
-  if (props.accordion) {
-    update(value)
-    return
-  }
-  update([...activeValues.value, value])
-}
-
-const collapse = (value: CollapseValue) => {
-  if (!activeValues.value.includes(value)) return
-  if (props.accordion) {
-    update([])
-    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.filter((v) => v !== value))
 }
 
-const expandAll = (values: CollapseValue[]) => {
-  if (props.accordion) {
-    update(values[0] ?? [])
-    return
+const unregister = (value: CollapseValue) => {
+  const idx = registeredValues.value.indexOf(value)
+  if (idx > -1) {
+    registeredValues.value.splice(idx, 1)
   }
-  update([...values])
-}
-
-const collapseAll = () => {
-  update([])
 }
 
 provide(CollapseDIKey, {
   cls,
   size,
-  iconPosition,
+  bordered,
   expandIcon,
   activeValues,
   toggle,
-  expandTransition
-})
-
-defineExpose<_CollapseExposed>({
-  toggle,
-  expand,
-  collapse,
-  expandAll,
-  collapseAll
+  expandTransition,
+  register,
+  unregister
 })
 </script>

package/src/components/collapse/di.ts

@@ -1,16 +1,18 @@
 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>
+  bordered: ComputedRef<boolean>
   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,45 @@ $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;
+        margin-top: fn.use-var(gap, $size);
       }
+    }
+  }
 
-      @include m.is-not(disabled) {
-        &:hover {
-          background-color: fn.use-var(bg-color, hover);
-        }
+  // ===== Bordered =====
+  @include m.is(bordered) {
+    #{fn.bem($root-name, item)} {
+      background-color: transparent;
+      border: 1px solid vars.$border-color;
+
+      &:hover,
+      &.is-active {
+        background-color: transparent;
       }
     }
 
-    // ghost 下 header 自身不再单独 hover，由 item 整体承载
     #{fn.bem($root-name, header)} {
-      border-radius: inherit;
+      border-radius: 0;
 
-      @include m.is-not(disabled) {
-        &:hover {
-          background-color: transparent;
-        }
+      @include m.is(active) {
+        border-bottom: 1px solid vars.$border-color;
       }
     }
   }

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/tabs/tabs.vue

@@ -24,14 +24,12 @@
       @close="onClose"
     />
 
-    <div v-if="hasContentSlots" :class="cls.e('content')">
-      <transition name="fade" mode="out-in">
-        <keep-alive v-if="keepAlive">
-          <component :key="model" :is="renderContent()" />
-        </keep-alive>
-        <component v-else :key="model" :is="renderContent()" />
-      </transition>
-    </div>
+    <transition name="fade" mode="out-in">
+      <KeepAlive v-if="keepAlive">
+        <component :key="model" :is="renderSlots()" />
+      </KeepAlive>
+      <component v-else :key="model" :is="renderSlots()" />
+    </transition>
   </div>
 </template>
 
@@ -78,18 +76,15 @@ const verticalPosition = computed<'left' | 'right'>(() =>
   props.position === 'right' ? 'right' : 'left'
 )
 
-/** 是否存在任一内容面板插槽；没有则不渲染内容区域。 */
-const hasContentSlots = computed(() => Object.keys(slots).length > 0)
-
 const onClick = (item: TabItem, index: number) => emit('click', item, index)
 const onClose = (item: TabItem, index: number) => emit('close', item, index)
 
-const renderContent = () => {
+const renderSlots = () => {
   const key = model.value
   if (!key) return null
   const nodes = slots[key]?.({ key })
   if (Array.isArray(nodes)) {
-    return createVNode(UScroll, null, { default: () => nodes })
+    return createVNode(UScroll, { class: cls.e('content') }, { default: () => nodes })
   }
   return nodes
 }