@veltra/desktop 1.3.9 → 1.4.0

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

@@ -29,25 +29,38 @@
 </template>
 
 <script lang="ts" setup>
-import { ArrowRight } from '@veltra/icons/normal'
-import { bem } from '@veltra/utils'
+import { useModel } from '@veltra/compositions'
+import { ArrowDown } from '@veltra/icons/normal'
+import { bem, ExpandTransition } from '@veltra/utils'
 import { computed, inject, onBeforeUnmount, onMounted, ref, watch } from 'vue'
 
-import type { CollapseItemProps } from '../../types'
+import type { CollapseItemEmits, CollapseItemProps } from '../../types'
 import { UIcon } from '../icon'
 import { CollapseDIKey } from './di'
 
 defineOptions({ name: 'UCollapseItem' })
 
-const props = defineProps<CollapseItemProps>()
+const props = withDefaults(defineProps<CollapseItemProps>(), { modelValue: false })
+const emit = defineEmits<CollapseItemEmits>()
 
-const context = inject(CollapseDIKey)!
+const context = inject(CollapseDIKey, undefined)
 
 const cls = context?.cls ?? bem('collapse')
 
-const isActive = computed(() => !!context?.activeValues.value.includes(props.value))
+const standaloneModel = useModel<CollapseItemProps, 'modelValue'>({
+  props,
+  emit,
+  defaultValue: false
+})
+
+const isActive = computed(() => {
+  if (context) {
+    return props.value !== undefined && context.activeValues.value.includes(props.value)
+  }
+  return !!standaloneModel.value
+})
 
-const iconComponent = computed(() => context?.expandIcon.value ?? ArrowRight)
+const iconComponent = computed(() => context?.expandIcon.value ?? props.expandIcon ?? ArrowDown)
 
 const classList = computed(() => [
   cls.e('item'),
@@ -61,17 +74,30 @@ const headerClassList = computed(() => [
   bem.is('active', isActive.value)
 ])
 
+const expandTransition =
+  context?.expandTransition ??
+  new ExpandTransition({ transition: 'height 0.24s cubic-bezier(0.4, 0, 0.2, 1)' })
+
 const handleClick = () => {
   if (props.disabled) return
-  context?.toggle(props.value)
+
+  if (context) {
+    if (props.value === undefined) return
+    context.toggle(props.value)
+    return
+  }
+
+  const next = !standaloneModel.value
+  standaloneModel.value = next
+  emit('change', next)
 }
 
 const wrapperEl = ref<HTMLElement>()
 
-const { expandTransition } = context
-
 onMounted(() => {
-  context?.register(props.value)
+  if (context && props.value !== undefined) {
+    context.register(props.value)
+  }
   if (!wrapperEl.value) return
   expandTransition.setExpanded(wrapperEl.value, isActive.value)
 })
@@ -82,7 +108,9 @@ watch(isActive, (active) => {
 })
 
 onBeforeUnmount(() => {
-  context?.unregister(props.value)
+  if (context && props.value !== undefined) {
+    context.unregister(props.value)
+  }
   if (!wrapperEl.value) return
   expandTransition.cancel(wrapperEl.value)
 })

package/src/components/collapse/style.scss

@@ -3,16 +3,9 @@
 
 $root-name: collapse;
 
-// 与 tabs/menu 一致的 Material standard 缓动
 $ease: cubic-bezier(0.4, 0, 0.2, 1);
 $transition-fast: 0.18s $ease;
 $transition-normal: 0.24s $ease;
-$item-bg: fn.component-var(collapse, item-bg);
-$item-hover-bg: fn.component-var(collapse, item-hover-bg);
-$item-active-bg: fn.component-var(collapse, item-active-bg);
-$header-active-bg: fn.component-var(collapse, header-active-bg);
-$content-bg: fn.component-var(collapse, content-bg);
-$active-title-color: fn.component-var(collapse, active-title-color, fn.use-var(color, primary));
 
 @include m.b($root-name) {
   width: 100%;
@@ -22,44 +15,15 @@ $active-title-color: fn.component-var(collapse, active-title-color, fn.use-var(c
 
   // ===== Item =====
   @include m.e(item) {
-    position: relative;
-    border-radius: calc(fn.use-var(radius, default) + 2px);
+    border: fn.use-var(border-muted);
+    border-radius: fn.use-var(radius, default);
+    background-color: fn.use-var(bg-color, middle);
     overflow: hidden;
-    background-color: $item-bg;
-    transition: background-color $transition-fast;
-
-    &::before {
-      content: '';
-      position: absolute;
-      top: 0;
-      bottom: 0;
-      left: 0;
-      width: 3px;
-      background-color: fn.use-var(color, primary);
-      opacity: 0;
-      pointer-events: none;
-      transition: opacity $transition-fast;
-      z-index: 1;
-    }
 
     & + #{fn.bem($root-name, item)} {
       margin-top: fn.use-var(gap, default);
     }
 
-    @include m.is-not(disabled) {
-      &:hover {
-        background-color: $item-hover-bg;
-      }
-    }
-
-    @include m.is(active) {
-      background-color: $item-active-bg;
-
-      &::before {
-        opacity: 1;
-      }
-    }
-
     @include m.is(disabled) {
       opacity: 0.55;
     }
@@ -70,43 +34,46 @@ $active-title-color: fn.component-var(collapse, active-title-color, fn.use-var(c
     position: relative;
     display: flex;
     align-items: center;
-    gap: 10px;
+    gap: fn.use-var(gap, small);
+    padding: fn.use-var(gap, small) fn.use-var(gap, default);
     cursor: pointer;
     font-weight: 500;
     letter-spacing: 0.01em;
-    color: fn.component-var(collapse, title-color, fn.use-var(text-color, main));
+    color: fn.use-var(text-color, main);
     user-select: none;
     outline: none;
-    transition:
-      color $transition-fast,
-      background-color $transition-fast;
-    border-radius: inherit;
+    transition: background-color $transition-fast;
+    border-radius: 0;
 
     &:focus-visible {
       box-shadow: inset 0 0 0 2px fn.use-var(color, primary);
     }
 
+    @include m.is-not(disabled) {
+      &:hover {
+        background-color: fn.use-var(bg-color, hover);
+      }
+    }
+
     @include m.is(disabled) {
       cursor: not-allowed;
       color: fn.use-var(text-color, placeholder);
     }
 
     @include m.is(active) {
-      font-weight: 600;
-      color: $active-title-color;
-      background-color: $header-active-bg;
-      border-bottom-right-radius: 0;
-      border-bottom-left-radius: 0;
+      background-color: fn.use-var(bg-color, hover);
 
       #{fn.bem($root-name, icon)} {
-        transform: rotate(90deg);
-        color: $active-title-color;
+        transform: rotate(180deg);
       }
     }
   }
 
   // ===== Title =====
   @include m.e(title) {
+    display: flex;
+    align-items: center;
+    gap: fn.use-var(gap, small);
     flex: 1 1 auto;
     min-width: 0;
     line-height: 1.5;
@@ -118,10 +85,8 @@ $active-title-color: fn.component-var(collapse, active-title-color, fn.use-var(c
     align-items: center;
     justify-content: center;
     flex: 0 0 auto;
-    color: fn.use-var(text-color, placeholder);
-    transition:
-      transform $transition-normal,
-      color $transition-fast;
+    color: fn.use-var(text-color, assist);
+    transition: transform 0.2s $ease;
     will-change: transform;
   }
 
@@ -129,15 +94,14 @@ $active-title-color: fn.component-var(collapse, active-title-color, fn.use-var(c
   @include m.e(content-wrapper) {
     overflow: hidden;
     height: 0;
-    border-bottom-right-radius: inherit;
-    border-bottom-left-radius: inherit;
-    background-color: $content-bg;
+    background-color: transparent;
     transition: height $transition-normal;
   }
 
   @include m.e(content) {
     color: fn.use-var(text-color, main);
     line-height: 1.7;
+    padding: fn.use-var(gap, small) fn.use-var(gap, default);
   }
 
   // ===== Sizes =====
@@ -145,17 +109,17 @@ $active-title-color: fn.component-var(collapse, active-title-color, fn.use-var(c
     font-size: fn.use-var(font-size-main, $size);
 
     @include m.bem($root-name, header) {
-      padding: calc(fn.use-var(gap, $size) - 2px) fn.use-var(gap, $size);
+      padding: fn.use-var(gap, $size) fn.use-var(gap, $size);
       font-size: fn.use-var(font-size-main, $size);
     }
 
     @include m.bem($root-name, content) {
       font-size: fn.use-var(font-size-main, $size);
-      padding: calc(fn.use-var(gap, $size) - 2px) fn.use-var(gap, $size) fn.use-var(gap, $size);
+      padding: fn.use-var(gap, $size);
     }
 
     #{fn.bem($root-name, item)} {
-      border-radius: calc(fn.use-var(radius, $size) + 2px);
+      border-radius: fn.use-var(radius, $size);
 
       & + #{fn.bem($root-name, item)} {
         margin-top: fn.use-var(gap, $size);

package/src/components/steps/style.scss

@@ -12,14 +12,14 @@ $root-name: steps;
 
   @each $type in vars.$color-types {
     @include m.em(finished, $type) {
-      @include m.e(item) {
+      @include m.bem($root-name, item) {
         @include m.is(finished) {
           color: fn.use-var(color, $type);
         }
       }
     }
     @include m.em(current, $type) {
-      @include m.e(item) {
+      @include m.bem($root-name, item) {
         @include m.is(current) {
           color: fn.use-var(color, $type);
         }

package/src/types/collapse.ts

@@ -25,7 +25,7 @@ export interface CollapseProps extends ComponentProps {
   defaultCollapseAll?: boolean
 
   /**
-   * 自定义展开图标组件，活动态会自动旋转 90°。
+   * 自定义展开图标组件，活动态会自动旋转 180°。
    * 接受任意 Vue 组件（SFC、Functional Component 等）。
    */
   expandIcon?: Component
@@ -39,12 +39,34 @@ export interface CollapseEmits {
 
 /** CollapseItem 组件属性 */
 export interface CollapseItemProps {
-  /** 唯一标识 */
-  value: CollapseValue
+  /**
+   * 唯一标识；在 `UCollapse` 内使用时必填。
+   * 独立使用时可选。
+   */
+  value?: CollapseValue
+
+  /**
+   * 独立使用时的展开状态（`v-model`）。
+   * 在 `UCollapse` 内由父组件 `modelValue` 管理，此属性无效。
+   * @default false
+   */
+  modelValue?: boolean
 
   /** 标题文本（也可使用 #title 插槽） */
   title?: string
 
   /** 是否禁用 */
   disabled?: boolean
+
+  /**
+   * 独立使用时的自定义展开图标，活动态会自动旋转 180°。
+   * 在 `UCollapse` 内由父组件 `expandIcon` 统一管理。
+   */
+  expandIcon?: Component
+}
+
+export interface CollapseItemEmits {
+  (e: 'update:modelValue', value: boolean): void
+  /** 展开状态变更时触发（仅独立使用） */
+  (e: 'change', value: boolean): void
 }