@veltra/desktop 1.0.11 → 1.0.13

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

@@ -0,0 +1,138 @@
+<template>
+  <div :class="classList">
+    <div
+      :class="headerClassList"
+      role="button"
+      :aria-expanded="isActive"
+      :aria-disabled="disabled"
+      :tabindex="disabled ? -1 : 0"
+      @click="handleClick"
+      @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')">
+        <slot name="icon" :is-active="isActive">
+          <UIcon><component :is="iconComponent" /></UIcon>
+        </slot>
+      </span>
+    </div>
+    <div ref="wrapperEl" :class="cls.e('content-wrapper')" :aria-hidden="!isActive">
+      <div :class="cls.e('content')">
+        <slot />
+      </div>
+    </div>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { ArrowRight } from '@veltra/icons/normal'
+import { bem } from '@veltra/utils'
+import { computed, inject, onBeforeUnmount, onMounted, ref, watch } from 'vue'
+
+import type { CollapseItemProps } from '../../types'
+import { UIcon } from '../icon'
+import { CollapseDIKey } from './di'
+
+defineOptions({
+  name: 'CollapseItem'
+})
+
+const props = defineProps<CollapseItemProps>()
+
+const context = inject(CollapseDIKey)
+
+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)
+])
+
+const headerClassList = computed(() => [
+  cls.e('header'),
+  bem.is('disabled', props.disabled),
+  bem.is('active', isActive.value)
+])
+
+const handleClick = () => {
+  if (props.disabled) return
+  context?.toggle(props.value)
+}
+
+const wrapperEl = ref<HTMLElement>()
+let cleanupTransition: (() => void) | null = null
+
+const cancelTransition = () => {
+  cleanupTransition?.()
+  cleanupTransition = null
+}
+
+// 用 height 数值过渡替代 grid-template-rows，避免每帧 grid 重排带来的卡顿。
+const animateHeight = (active: boolean) => {
+  const el = wrapperEl.value
+  if (!el) return
+
+  cancelTransition()
+
+  const startHeight = el.offsetHeight
+  const endHeight = active ? el.scrollHeight : 0
+
+  if (startHeight === endHeight) {
+    el.style.height = active ? 'auto' : '0px'
+    return
+  }
+
+  el.style.height = `${startHeight}px`
+  // 强制 reflow，确保起始高度被采纳，避免 0 → auto 直接跳变。
+  void el.offsetHeight
+  el.style.height = `${endHeight}px`
+
+  const onEnd = (e: TransitionEvent) => {
+    if (e.target !== el || e.propertyName !== 'height') return
+    cleanup()
+    if (active) {
+      // 回归 auto，让后续内容动态变化时不被锁死高度。
+      el.style.height = 'auto'
+    }
+  }
+
+  const cleanup = () => {
+    el.removeEventListener('transitionend', onEnd)
+    el.removeEventListener('transitioncancel', onEnd)
+    cleanupTransition = null
+  }
+
+  el.addEventListener('transitionend', onEnd)
+  el.addEventListener('transitioncancel', onEnd)
+  cleanupTransition = cleanup
+}
+
+onMounted(() => {
+  if (!wrapperEl.value) return
+  wrapperEl.value.style.height = isActive.value ? 'auto' : '0px'
+})
+
+watch(isActive, animateHeight)
+
+onBeforeUnmount(cancelTransition)
+</script>

package/src/components/collapse/collapse.vue

@@ -0,0 +1,122 @@
+<template>
+  <div :class="classList" role="region">
+    <slot />
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { useFormFallbackProps, useModel } from '@veltra/compositions'
+import { bem } from '@veltra/utils'
+import { computed, provide } from 'vue'
+
+import type {
+  CollapseEmits,
+  CollapseModelValue,
+  CollapseProps,
+  CollapseValue,
+  _CollapseExposed
+} from '../../types'
+import { CollapseDIKey } from './di'
+
+defineOptions({
+  name: 'Collapse'
+})
+
+const props = withDefaults(defineProps<CollapseProps>(), {
+  accordion: false,
+  bordered: true,
+  iconPosition: 'right'
+})
+const emit = defineEmits<CollapseEmits>()
+
+const cls = bem('collapse')
+
+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 modelValue = useModel<CollapseProps, 'modelValue'>({
+  props,
+  emit,
+  propName: 'modelValue'
+})
+
+const activeValues = computed<CollapseValue[]>(() => {
+  const v = modelValue.value
+  if (v === undefined || v === null) return []
+  return Array.isArray(v) ? v : [v]
+})
+
+const update = (next: CollapseModelValue) => {
+  modelValue.value = next
+  emit('change', next)
+}
+
+const toggle = (value: CollapseValue) => {
+  if (props.accordion) {
+    update(activeValues.value[0] === value ? [] : value)
+    return
+  }
+
+  const values = activeValues.value.slice()
+  const index = values.indexOf(value)
+  if (index > -1) values.splice(index, 1)
+  else values.push(value)
+  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
+  }
+  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
+})
+
+defineExpose<_CollapseExposed>({
+  toggle,
+  expand,
+  collapse,
+  expandAll,
+  collapseAll
+})
+</script>

package/src/components/collapse/di.ts

@@ -0,0 +1,15 @@
+import type { BEM, ComponentSize } from '@veltra/utils'
+import type { Component, ComputedRef, InjectionKey } from 'vue'
+
+import type { CollapseIconPosition, 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
+}
+
+export const CollapseDIKey: InjectionKey<CollapseContext> = Symbol('Collapse')

package/src/components/collapse/index.ts

@@ -0,0 +1,2 @@
+export { default as UCollapse } from './collapse.vue'
+export { default as UCollapseItem } from './collapse-item.vue'

package/src/components/collapse/style.scss

@@ -0,0 +1,186 @@
+@use 'sass:map';
+@use 'pkg:@veltra/styles/mixins' as m;
+@use 'pkg:@veltra/styles/vars';
+@use 'pkg:@veltra/styles/functions' as fn;
+
+$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;
+
+// 各尺寸的水平 / 垂直内边距：决定 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);
+
+  // ===== 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;
+
+    @include m.e(item) {
+      &:not(:first-child) {
+        border-top: 1px solid color-mix(in srgb, #{fn.use-var(border, color)} 60%, transparent);
+      }
+    }
+  }
+
+  // ===== Item 通用 =====
+  @include m.e(item) {
+    @include m.is(disabled) {
+      opacity: 0.55;
+    }
+  }
+
+  // ===== Header =====
+  // 反馈策略：
+  //   - hover：仅背景轻微变化（"我可点击"信号）
+  //   - active：仅 font-weight 加重 + 箭头旋转（"我已展开"信号由内容显现承担）
+  //   - 颜色不切换到 primary，避免在大量配置块同时展开时产生视觉嘈杂
+  @include m.e(header) {
+    position: relative;
+    display: flex;
+    align-items: center;
+    gap: 10px;
+    cursor: pointer;
+    font-weight: 500;
+    letter-spacing: 0.01em;
+    color: fn.use-var(text-color, title);
+    user-select: none;
+    outline: none;
+    transition:
+      color $transition-fast,
+      background-color $transition-fast;
+
+    &:hover:not(.is-disabled) {
+      background-color: fn.use-var(bg-color, hover);
+    }
+
+    &:focus-visible {
+      box-shadow: inset 0 0 0 2px fn.use-var(color, primary);
+    }
+
+    @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) {
+      font-weight: 600;
+
+      #{fn.bem($root-name, icon)} {
+        transform: rotate(90deg);
+        color: fn.use-var(text-color, second);
+      }
+    }
+  }
+
+  // ===== Title =====
+  @include m.e(title) {
+    flex: 1 1 auto;
+    min-width: 0;
+    line-height: 1.5;
+  }
+
+  // ===== Icon =====
+  @include m.e(icon) {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    flex: 0 0 auto;
+    color: fn.use-var(text-color, placeholder);
+    transition:
+      transform $transition-normal,
+      color $transition-fast;
+    will-change: transform;
+  }
+
+  // ===== Content wrapper =====
+  // 高度由 collapse-item.vue 的 JS 在 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;
+    transition: height $transition-normal;
+  }
+
+  @include m.e(content) {
+    color: fn.use-var(text-color, main);
+    line-height: 1.7;
+  }
+
+  // ===== 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);
+      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);
+    }
+  }
+
+  // ===== Ghost（无边框）：项级胶囊化，反馈完全由 item hover 承担 =====
+  // 嵌入卡片 / 对话框时使用，不引入额外的容器边界
+  &:not(.is-bordered) {
+    background-color: transparent;
+
+    #{fn.bem($root-name, item)} {
+      border-radius: calc(fn.use-var(radius, default) + 2px);
+      transition: background-color $transition-fast;
+
+      & + #{fn.bem($root-name, item)} {
+        margin-top: 4px;
+      }
+
+      &:hover:not(.is-disabled) {
+        background-color: fn.use-var(bg-color, hover);
+      }
+    }
+
+    // ghost 下 header 自身不再单独 hover，由 item 整体承载
+    #{fn.bem($root-name, header)} {
+      border-radius: inherit;
+
+      &:hover:not(.is-disabled) {
+        background-color: transparent;
+      }
+    }
+  }
+}

package/src/components/collapse/style.ts

@@ -0,0 +1 @@
+import './style.scss'

package/src/components/context-menu/index.ts

@@ -1 +1,3 @@
+export { default as UContextMenu } from './context-menu.vue'
+
 export { contextmenu } from './api'

package/src/components/index.ts

@@ -1,143 +1,145 @@
-export * from './action'
-
-export * from './auto-complete'
-
-export * from './badge'
+export * from './condition-editor'
 
-export * from './batch-edit'
+export * from './tabs'
 
-export * from './breadcrumb'
+export * from './tree'
 
-export * from './button'
+export * from './tree-select'
 
-export * from './calendar'
+export * from './code-editor'
 
-export * from './card'
+export * from './dropdown'
 
-export * from './cascade'
+export * from './drawer'
 
-export * from './check-tag'
+export * from './form'
 
-export * from './checkbox-group'
+export * from './message-confirm'
 
-export * from './checkbox'
+export * from './calendar'
 
-export * from './code-editor'
+export * from './radio'
 
-export * from './condition-editor'
+export * from './card'
 
-export * from './context-menu'
+export * from './date-range-picker'
 
-export * from './date-panel'
+export * from './loading'
 
-export * from './date-picker'
+export * from './scroll'
 
-export * from './date-range-picker'
+export * from './progress-nodes'
 
-export * from './dialog'
+export * from './empty'
 
-export * from './drawer'
+export * from './auto-complete'
 
-export * from './dropdown'
+export * from './progress'
 
-export * from './empty'
+export * from './input'
 
-export * from './expression-editor'
+export * from './notification'
 
-export * from './file-picker'
+export * from './layout'
 
-export * from './float-button'
+export * from './multi-select'
 
-export * from './form-item'
+export * from './checkbox'
 
-export * from './form'
+export * from './slider'
 
 export * from './gantt-chart'
 
-export * from './grid-input'
-
-export * from './grid'
+export * from './message'
 
-export * from './group-input'
+export * from './file-picker'
 
-export * from './icon'
+export * from './number-range-input'
 
-export * from './input'
+export * from './number-input'
 
-export * from './layout'
+export * from './collapse'
 
-export * from './list'
+export * from './date-panel'
 
-export * from './loading'
+export * from './table-editor'
 
-export * from './menu'
+export * from './check-tag'
 
-export * from './message-confirm'
+export * from './context-menu'
 
-export * from './message'
+export * from './password-input'
 
-export * from './multi-select'
+export * from './number'
 
-export * from './multi-tree-select'
+export * from './dialog'
 
 export * from './node-render'
 
-export * from './notification'
+export * from './expression-editor'
 
-export * from './number-input'
+export * from './watermark'
 
-export * from './number-range-input'
+export * from './batch-edit'
 
-export * from './number'
+export * from './action'
 
-export * from './paginator'
+export * from './tip'
 
-export * from './palette'
+export * from './textarea'
 
-export * from './password-input'
+export * from './button'
 
-export * from './pop-confirm'
+export * from './cascade'
 
-export * from './progress'
+export * from './steps'
 
-export * from './radio-group'
+export * from './date-picker'
 
-export * from './radio'
+export * from './theme'
 
-export * from './rich-text-editor'
+export * from './table'
 
-export * from './scroll'
+export * from './multi-tree-select'
 
-export * from './select'
+export * from './group-input'
 
-export * from './slider'
+export * from './list'
 
-export * from './steps'
+export * from './rich-text-editor'
+
+export * from './menu'
+
+export * from './grid-input'
 
 export * from './switch'
 
-export * from './table-editor'
+export * from './form-item'
 
-export * from './table'
+export * from './radio-group'
 
-export * from './tabs'
+export * from './checkbox-group'
 
-export * from './tag'
+export * from './file-viewer'
 
 export * from './text'
 
-export * from './textarea'
+export * from './select'
 
-export * from './theme'
+export * from './breadcrumb'
 
-export * from './tip'
+export * from './icon'
 
-export * from './tree-select'
+export * from './pop-confirm'
 
-export * from './tree'
+export * from './paginator'
 
-export * from './watermark'
+export * from './tag'
 
-export * from './progress-nodes'
+export * from './float-button'
 
-export * from './file-viewer'
+export * from './palette'
+
+export * from './grid'
+
+export * from './badge'