@veltra/desktop 1.1.9 → 1.1.10

package/src/components/button/style.scss

@@ -8,15 +8,14 @@ $root-name: button;
 @include m.b($root-name) {
   color: fn.component-var(button, default-color, fn.use-var(text-color, main));
   box-sizing: border-box;
-
+  border-radius: 9999px;
   line-height: 1;
   outline: none;
   text-decoration: none;
   white-space: nowrap;
   vertical-align: middle;
-  border-radius: fn.use-var(radius, default);
   cursor: pointer;
-  padding: 0 0.8em;
+  padding: 0 1em;
   -webkit-appearance: none;
   border: 1px solid fn.component-var(button, default-border, transparent);
   background-color: fn.component-var(button, default-bg, fn.use-var(color, default));
@@ -50,6 +49,7 @@ $root-name: button;
   @include m.is(plain) {
     background-color: fn.use-var(bg-color, top);
     border-color: fn.use-var(color, default, 'dark-1');
+    box-shadow: none;
 
     &:hover {
       border-color: fn.use-var(color, default, 'dark-1');
@@ -90,6 +90,7 @@ $root-name: button;
 
     @include m.m(color-#{$type}) {
       background-color: fn.use-var(color, $type);
+      border-color: fn.component-var(button, #{$type}-border, fn.use-var(color, $type));
       color: fn.component-var(button, #{$type}-text-color, fn.use-var(text-color, white));
 
       &:hover {
@@ -98,6 +99,11 @@ $root-name: button;
           #{$type}-hover-bg,
           fn.use-var(color, $type, dark-1)
         );
+        border-color: fn.component-var(
+          button,
+          #{$type}-hover-border,
+          fn.use-var(color, $type, dark-1)
+        );
         color: fn.component-var(
           button,
           #{$type}-hover-color,
@@ -144,8 +150,20 @@ $root-name: button;
           #{$type}-plain-bg,
           fn.use-var(color, $type, light-9)
         );
-        box-shadow: 0px 0px 2px 1px
-          fn.component-var(button, #{$type}-plain-shadow, fn.use-var(color, $type, light-5));
+        border-color: fn.component-var(
+          button,
+          #{$type}-plain-border,
+          fn.use-var(color, $type, light-5)
+        );
+        box-shadow: none;
+
+        @include m.is-not(disabled, loading) {
+          &:hover {
+            color: fn.use-var(color, $type);
+            border-color: fn.use-var(color, $type);
+            background-color: fn.use-var(color, $type, light-9);
+          }
+        }
 
         &:active {
           box-shadow: none;
@@ -153,6 +171,7 @@ $root-name: button;
 
         &.is-disabled {
           color: fn.use-var(color, $type, light-5);
+          border-color: fn.use-var(color, $type, light-8);
         }
       }
     }
@@ -179,10 +198,10 @@ $root-name: button;
     border-radius: 0;
 
     &:first-child {
-      border-radius: fn.use-var(radius, default) 0 0 fn.use-var(radius, default);
+      border-radius: 9999px 0 0 9999px;
     }
     &:last-child {
-      border-radius: 0 fn.use-var(radius, default) fn.use-var(radius, default) 0;
+      border-radius: 0 9999px 9999px 0;
     }
   }
 }

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,13 +49,8 @@ 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),
@@ -84,6 +73,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 +84,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,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);
       }
     }
   }