@veltra/desktop 1.6.6 → 1.7.0

package/src/components/radio-group/__test__/radio-group.test.ts

@@ -0,0 +1,113 @@
+import { describe, expect, it } from 'vitest'
+import { createApp, h, nextTick, ref } from 'vue'
+
+import URadioGroup from '../radio-group.vue'
+
+const items = [
+  { label: 'A', value: 'a' },
+  { label: 'B', value: 'b' }
+]
+
+function mountRadioGroup(props: Record<string, unknown> = {}) {
+  const host = document.createElement('div')
+  document.body.appendChild(host)
+
+  const model = ref(props.modelValue)
+  const changes: unknown[] = []
+
+  const app = createApp({
+    render() {
+      return h(URadioGroup, {
+        ...props,
+        items: items as any,
+        modelValue: model.value,
+        'onUpdate:modelValue': (value: any) => {
+          model.value = value
+        },
+        onChange: (item: any) => {
+          changes.push(item)
+        }
+      })
+    }
+  })
+
+  app.mount(host)
+
+  return {
+    host,
+    model,
+    changes,
+    unmount() {
+      app.unmount()
+      host.remove()
+    }
+  }
+}
+
+function queryRoot(host: HTMLElement) {
+  return host.querySelector<HTMLElement>('.u-radio-group')!
+}
+
+function queryRadios(host: HTMLElement) {
+  return [...host.querySelectorAll<HTMLElement>('.u-radio')]
+}
+
+function pick(host: HTMLElement, index: number) {
+  const input = queryRadios(host)[index]!.querySelector<HTMLInputElement>('input')!
+  input.checked = true
+  input.dispatchEvent(new Event('change', { bubbles: true }))
+}
+
+describe('RadioGroup', () => {
+  it('基础渲染：圆点元素存在且选项正确渲染', async () => {
+    const { host, unmount } = mountRadioGroup({ modelValue: 'a' })
+    await nextTick()
+
+    try {
+      const root = queryRoot(host)
+      expect(root).toBeTruthy()
+      expect(root.querySelector('.u-radio__button')).toBeTruthy()
+      const radios = queryRadios(host)
+      expect(radios.length).toBe(2)
+      expect(radios[0]!.classList.contains('is-checked')).toBe(true)
+      expect(radios[1]!.classList.contains('is-checked')).toBe(false)
+    } finally {
+      unmount()
+    }
+  })
+
+  it('禁用项呈禁用态且原生不可选中', async () => {
+    const { host, unmount } = mountRadioGroup({
+      modelValue: 'a',
+      disabledItem: (item: any) => item.value === 'b'
+    })
+    await nextTick()
+
+    try {
+      const radios = queryRadios(host)
+      expect(radios[1]!.classList.contains('is-disabled')).toBe(true)
+
+      const inputs = radios.map((radio) => radio.querySelector<HTMLInputElement>('input')!)
+      expect(inputs[0]!.disabled).toBe(false)
+      expect(inputs[1]!.disabled).toBe(true)
+    } finally {
+      unmount()
+    }
+  })
+
+  it('点击选项更新 modelValue 并 emit change（参数为 item）', async () => {
+    const { host, model, changes, unmount } = mountRadioGroup({ modelValue: 'a' })
+    await nextTick()
+
+    try {
+      pick(host, 1)
+      await nextTick()
+
+      expect(model.value).toBe('b')
+      expect(changes).toEqual([items[1]])
+      expect(queryRadios(host)[1]!.classList.contains('is-checked')).toBe(true)
+    } finally {
+      unmount()
+    }
+  })
+})

package/src/components/radio-group/style.scss

@@ -8,6 +8,10 @@
 
   @include m.bem(radio) {
     margin: 0;
+
+    & + & {
+      margin-left: 0;
+    }
   }
 
   @include m.size using ($size) {
@@ -21,19 +25,4 @@
       display: flex;
     }
   }
-
-  @include m.e(button-item) {
-    margin: 0px !important;
-    border-right: 0 !important;
-    border-radius: 0 !important;
-
-    &:first-child {
-      border-radius: fn.use-var(radius, default) 0 0 fn.use-var(radius, default) !important;
-    }
-
-    &:last-child {
-      border-right: fn.use-var(border-muted) !important;
-      border-radius: 0 fn.use-var(radius, default) fn.use-var(radius, default) 0 !important;
-    }
-  }
 }

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

@@ -0,0 +1,264 @@
+import { describe, expect, it } from 'vitest'
+import { createApp, h, nextTick, ref } from 'vue'
+
+import USegment from '../segment.vue'
+
+const defaultItems = [
+  { label: 'Option A', value: 'a' },
+  { label: 'Option B', value: 'b' },
+  { label: 'Option C', value: 'c' }
+]
+
+function mountSegment(props: Record<string, unknown> = {}) {
+  const host = document.createElement('div')
+  document.body.appendChild(host)
+
+  const model = ref(props.modelValue)
+  const changes: unknown[] = []
+
+  const app = createApp({
+    render() {
+      return h(USegment, {
+        items: defaultItems,
+        ...props,
+        modelValue: model.value,
+        'onUpdate:modelValue': (value: any) => {
+          model.value = value
+        },
+        onChange: (item: any) => {
+          changes.push(item)
+        }
+      })
+    }
+  })
+
+  app.mount(host)
+
+  return {
+    host,
+    model,
+    changes,
+    unmount() {
+      app.unmount()
+      host.remove()
+    }
+  }
+}
+
+function queryRoot(host: HTMLElement) {
+  return host.querySelector<HTMLElement>('.u-segment')!
+}
+
+function queryItems(host: HTMLElement) {
+  return [...host.querySelectorAll<HTMLElement>('.u-segment__item')]
+}
+
+describe('USegment', () => {
+  it('基础渲染与默认选中态', async () => {
+    const { host, unmount } = mountSegment({ modelValue: 'b' })
+    await nextTick()
+
+    try {
+      const root = queryRoot(host)
+      expect(root).toBeTruthy()
+      expect(root.getAttribute('role')).toBe('radiogroup')
+
+      const items = queryItems(host)
+      expect(items.length).toBe(3)
+      expect(items[0]!.textContent).toBe('Option A')
+      expect(items[1]!.textContent).toBe('Option B')
+      expect(items[2]!.textContent).toBe('Option C')
+
+      expect(items[0]!.classList.contains('is-active')).toBe(false)
+      expect(items[1]!.classList.contains('is-active')).toBe(true)
+      expect(items[2]!.classList.contains('is-active')).toBe(false)
+
+      expect(items[1]!.getAttribute('aria-checked')).toBe('true')
+      expect(items[0]!.getAttribute('aria-checked')).toBe('false')
+    } finally {
+      unmount()
+    }
+  })
+
+  it('点击选项触发 modelValue 更新与 change 事件', async () => {
+    const { host, model, changes, unmount } = mountSegment({ modelValue: 'a' })
+    await nextTick()
+
+    try {
+      const items = queryItems(host)
+      expect(items[0]!.classList.contains('is-active')).toBe(true)
+
+      items[1]!.click()
+      await nextTick()
+
+      expect(model.value).toBe('b')
+      expect(changes).toEqual([defaultItems[1]])
+      expect(items[1]!.classList.contains('is-active')).toBe(true)
+      expect(items[0]!.classList.contains('is-active')).toBe(false)
+
+      // 点击已选中项不重复触发 change
+      items[1]!.click()
+      await nextTick()
+      expect(changes.length).toBe(1)
+    } finally {
+      unmount()
+    }
+  })
+
+  it('支持键盘 Enter 和 Space 触发选择', async () => {
+    const { host, model, changes, unmount } = mountSegment({ modelValue: 'a' })
+    await nextTick()
+
+    try {
+      const items = queryItems(host)
+
+      items[2]!.dispatchEvent(new KeyboardEvent('keydown', { key: 'Enter', bubbles: true }))
+      await nextTick()
+
+      expect(model.value).toBe('c')
+      expect(changes).toEqual([defaultItems[2]])
+
+      items[1]!.dispatchEvent(new KeyboardEvent('keydown', { key: ' ', bubbles: true }))
+      await nextTick()
+
+      expect(model.value).toBe('b')
+      expect(changes).toEqual([defaultItems[2], defaultItems[1]])
+    } finally {
+      unmount()
+    }
+  })
+
+  it('支持 custom labelKey 和 valueKey', async () => {
+    const customItems = [
+      { name: 'First', id: 1 },
+      { name: 'Second', id: 2 }
+    ]
+    const host = document.createElement('div')
+    document.body.appendChild(host)
+    const model = ref(1)
+    const changes: unknown[] = []
+
+    const app = createApp({
+      render() {
+        return h(USegment, {
+          items: customItems,
+          labelKey: 'name',
+          valueKey: 'id',
+          modelValue: model.value,
+          'onUpdate:modelValue': (value: any) => {
+            model.value = value
+          },
+          onChange: (item: any) => {
+            changes.push(item)
+          }
+        })
+      }
+    })
+    app.mount(host)
+    await nextTick()
+
+    try {
+      const items = queryItems(host)
+      expect(items[0]!.textContent).toBe('First')
+      expect(items[1]!.textContent).toBe('Second')
+      expect(items[0]!.classList.contains('is-active')).toBe(true)
+
+      items[1]!.click()
+      await nextTick()
+
+      expect(model.value).toBe(2)
+      expect(changes).toEqual([customItems[1]])
+    } finally {
+      app.unmount()
+      host.remove()
+    }
+  })
+
+  it('整组 disabled 禁用控制', async () => {
+    const { host, model, changes, unmount } = mountSegment({ modelValue: 'a', disabled: true })
+    await nextTick()
+
+    try {
+      const root = queryRoot(host)
+      expect(root.classList.contains('is-disabled')).toBe(true)
+
+      const items = queryItems(host)
+      expect(items[0]!.classList.contains('is-disabled')).toBe(true)
+      expect(items[1]!.classList.contains('is-disabled')).toBe(true)
+
+      items[1]!.click()
+      await nextTick()
+
+      expect(model.value).toBe('a')
+      expect(changes.length).toBe(0)
+    } finally {
+      unmount()
+    }
+  })
+
+  it('disabledItem 单项禁用控制', async () => {
+    const { host, model, changes, unmount } = mountSegment({
+      modelValue: 'a',
+      disabledItem: (item: any) => item.value === 'b'
+    })
+    await nextTick()
+
+    try {
+      const items = queryItems(host)
+      expect(items[0]!.classList.contains('is-disabled')).toBe(false)
+      expect(items[1]!.classList.contains('is-disabled')).toBe(true)
+      expect(items[2]!.classList.contains('is-disabled')).toBe(false)
+
+      // 点击禁用项无反应
+      items[1]!.click()
+      await nextTick()
+      expect(model.value).toBe('a')
+      expect(changes.length).toBe(0)
+
+      // 点击非禁用项正常切换
+      items[2]!.click()
+      await nextTick()
+      expect(model.value).toBe('c')
+      expect(changes).toEqual([defaultItems[2]])
+    } finally {
+      unmount()
+    }
+  })
+
+  it('block 属性与 size 样式类名绑定', async () => {
+    const { host, unmount } = mountSegment({ modelValue: 'a', block: true, size: 'small' })
+    await nextTick()
+
+    try {
+      const root = queryRoot(host)
+      expect(root.classList.contains('is-block')).toBe(true)
+      expect(root.classList.contains('u-segment--small')).toBe(true)
+    } finally {
+      unmount()
+    }
+  })
+
+  it('readonly 模式回退展示文本', async () => {
+    const { host, unmount } = mountSegment({ modelValue: 'b', readonly: true })
+    await nextTick()
+
+    try {
+      expect(host.querySelector('.u-segment')).toBeNull()
+      expect(host.textContent?.trim()).toBe('Option B')
+    } finally {
+      unmount()
+    }
+  })
+
+  it('readonly 模式未匹配到值时展示 FORM_EMPTY_CONTENT（-）', async () => {
+    const { host, unmount } = mountSegment({ modelValue: 'non-existing', readonly: true })
+    await nextTick()
+
+    try {
+      expect(host.querySelector('.u-segment')).toBeNull()
+      expect(host.textContent?.trim()).toBe('-')
+    } finally {
+      unmount()
+    }
+  })
+})

package/src/components/segment/index.ts

@@ -0,0 +1 @@
+export { default as USegment } from './segment.vue'

package/src/components/segment/segment.vue

@@ -0,0 +1,77 @@
+<template>
+  <div
+    v-if="!readonly"
+    v-bind="$attrs"
+    :class="[cls.b, bem.is('block', block), bem.is('disabled', disabled), cls.m(size)]"
+    role="radiogroup"
+  >
+    <div
+      v-for="item of items"
+      :key="item[valueKey]"
+      :class="[
+        cls.e('item'),
+        bem.is('active', item[valueKey] === model),
+        bem.is('disabled', disabled || Boolean(disabledItem?.(item)))
+      ]"
+      role="radio"
+      :aria-checked="item[valueKey] === model"
+      :aria-disabled="disabled || Boolean(disabledItem?.(item))"
+      tabindex="0"
+      @click="handleSelect(item)"
+      @keydown.enter.prevent="handleSelect(item)"
+      @keydown.space.prevent="handleSelect(item)"
+    >
+      <slot name="item" :item="item" :active="item[valueKey] === model">
+        <span :class="cls.e('item-label')">{{ item[labelKey] }}</span>
+      </slot>
+    </div>
+  </div>
+
+  <template v-else>
+    {{ items.find((item) => item[valueKey] === model)?.[labelKey] || FORM_EMPTY_CONTENT }}
+  </template>
+</template>
+
+<script lang="ts" setup>
+import { useFormFallbackProps } from '@veltra/compositions'
+import { bem, fieldKey, FORM_EMPTY_CONTENT, injectFormContext } from '@veltra/utils'
+import { computed } from 'vue'
+
+import type { SegmentEmits, SegmentItem, SegmentProps } from '../../types'
+
+defineOptions({ name: 'USegment', inheritAttrs: false })
+
+const props = withDefaults(defineProps<SegmentProps>(), {
+  items: () => [],
+  labelKey: 'label',
+  valueKey: 'value',
+  disabled: undefined,
+  readonly: undefined,
+  block: false
+})
+
+const model = defineModel<any>()
+
+const emit = defineEmits<SegmentEmits>()
+
+const { formProps } = injectFormContext()
+
+const { size, disabled, readonly } = useFormFallbackProps([formProps ?? {}, props], {
+  size: 'default',
+  disabled: false,
+  readonly: false
+})
+
+const cls = bem('segment')
+
+const labelKey = computed(() => fieldKey(props.labelKey, 'label'))
+const valueKey = computed(() => fieldKey(props.valueKey, 'value'))
+
+const handleSelect = (item: SegmentItem) => {
+  if (disabled.value || props.disabledItem?.(item)) return
+  const val = item[valueKey.value]
+  if (model.value === val) return
+  model.value = val
+  emit('change', item)
+}
+</script>

package/src/components/segment/style.scss

@@ -0,0 +1,92 @@
+@use 'pkg:@veltra/styles/mixins' as m;
+@use 'pkg:@veltra/styles/functions' as fn;
+@use 'pkg:@veltra/styles/vars';
+
+@include m.b(segment) {
+  vertical-align: middle;
+  @include m.flex($display: inline-flex, $align: center);
+  gap: 2px;
+  padding: 2px;
+  background-color: fn.use-var(bg-color, bottom);
+  box-sizing: border-box;
+
+  @include m.size using ($size) {
+    border-radius: fn.use-var(radius, $size);
+
+    @include m.bem(segment, item) {
+      height: calc(fn.use-var(form-component-height, $size) - 4px);
+      padding: 0 calc(fn.use-var(gap, $size) * 1.5);
+      border-radius: calc(fn.use-var(radius, $size) - 2px);
+      font-size: fn.use-var(font-size-main, $size);
+    }
+  }
+
+  @include m.e(item) {
+    margin: 0;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    background-color: transparent;
+    box-shadow: none;
+    font-weight: 500;
+    color: fn.use-var(text-color, second);
+    cursor: pointer;
+    user-select: none;
+    outline: none;
+    transition:
+      color fn.use-var(transition, fast) fn.use-var(transition, ease),
+      background-color fn.use-var(transition, fast) fn.use-var(transition, ease),
+      box-shadow fn.use-var(transition, fast) fn.use-var(transition, ease);
+
+    &:hover:not(.is-active):not(.is-disabled) {
+      color: fn.use-var(text-color, title);
+      background-color: fn.color-a(color, 5, primary);
+    }
+
+    @include m.is(active) {
+      color: fn.use-var(color, primary);
+      background-color: fn.use-var(bg-color, top);
+      box-shadow: fn.use-var(shadow, sm);
+      font-weight: 600;
+    }
+
+    @include m.is(disabled) {
+      opacity: 0.5;
+      cursor: not-allowed;
+      color: fn.use-var(text-color, disabled);
+    }
+
+    &:focus-visible:not(.is-disabled) {
+      box-shadow: fn.use-var(focus-ring);
+    }
+  }
+
+  @include m.e(item-label) {
+    @include m.ellipsis;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+  }
+
+  @include m.is(block) {
+    display: flex;
+    width: 100%;
+
+    @include m.bem(segment, item) {
+      flex: 1 1 0%;
+      width: 0;
+      min-width: 0;
+      display: inline-flex;
+      justify-content: center;
+    }
+  }
+
+  @include m.is(disabled) {
+    opacity: 0.7;
+    cursor: not-allowed;
+
+    @include m.bem(segment, item) {
+      cursor: not-allowed;
+    }
+  }
+}

package/src/components/segment/style.ts

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

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

@@ -117,6 +117,42 @@ describe('USelect', () => {
     }
   })
 
+  it('keeps the filtered list while the panel is closing after a select', async () => {
+    const { host, model, unmount } = mountSelect({
+      filterable: true,
+      options: [
+        { label: '北京', value: 'beijing' },
+        { label: '上海', value: 'shanghai' },
+        { label: '广州', value: 'guangzhou' }
+      ]
+    })
+
+    try {
+      await openDropdown(host)
+      await typeQuery(host, '上海')
+      expect(queryOptions().map((el) => el.textContent)).toEqual(['上海'])
+
+      // 选择后关闭动画期间：面板仍在 DOM 中，列表必须保持过滤态，
+      // 不能瞬间恢复全量导致面板突然变长闪烁
+      queryOptions()[0]!.dispatchEvent(new MouseEvent('click', { bubbles: true }))
+      await nextTick()
+      expect(model.value).toBe('shanghai')
+      const closingOptions = queryOptions()
+      expect(closingOptions.length).toBeGreaterThan(0)
+      expect(closingOptions.map((el) => el.textContent)).toEqual(['上海'])
+
+      // 动画兜底结束后面板卸载
+      await sleep(150)
+      expect(queryOptions()).toHaveLength(0)
+
+      // 重新展开：列表已恢复为完整选项
+      await openDropdown(host)
+      expect(queryOptions()).toHaveLength(3)
+    } finally {
+      unmount()
+    }
+  })
+
   it('emits update:text with option label when modelValue echoes against options', async () => {
     const { host, texts, unmount } = mountSelect({
       modelValue: 'beijing',

package/src/components/select/select.vue

@@ -12,7 +12,6 @@
     :min-width="minWidth"
     :width="width"
     @keydown="handleKeydown"
-    @update:visible="handleDropdownVisible"
     @mouseenter="hovered = true"
     @mouseleave="hovered = false"
   >
@@ -200,6 +199,9 @@ const { queryString, options, allOptions, temOptionsToCreatedOptions, clearCreat
 
 const dropdownVisible = shallowRef(false)
 
+/** 选中临时选项后待转正标记:面板关闭后再落定,避免关闭动画期间列表恢复全量导致面板变长 */
+let pendingTempPromote = false
+
 /**
  * 是否处于查询态：决定触发输入框显示查询串还是选中标签。
  * 与面板可见状态解耦 —— 选择后立即退出查询态，
@@ -341,8 +343,17 @@ watch([scrollRef, virtualEnabled], ([scroll, virtualEnabled]) => {
   }
 })
 
+/** 落定待转正的临时选项（面板 DOM 已卸载，列表恢复全量用户不可见） */
+function promotePendingTemp() {
+  if (!pendingTempPromote) return
+  pendingTempPromote = false
+  temOptionsToCreatedOptions()
+}
+
 watch(dropdownVisible, (visible) => {
   if (visible) {
+    // 关闭动画期间被重新打开时补一次转正，保证已选临时项落到完整列表
+    promotePendingTemp()
     // 面板展开后进入查询态并聚焦输入框，可以立即输入查询
     if (filterable.value) {
       queryString.value = ''
@@ -350,17 +361,13 @@ watch(dropdownVisible, (visible) => {
       nextTick(() => inputRef.value?.el?.focus())
     }
   } else {
+    // 面板完全关闭（动画结束、DOM 卸载）后才清空查询串并转正，关闭动画期间列表保持过滤态
     querying.value = false
     queryString.value = ''
+    promotePendingTemp()
   }
 })
 
-const handleDropdownVisible = (visible: boolean) => {
-  if (!visible) {
-    queryString.value = ''
-  }
-}
-
 /** 单选：用户动作内 O(1) 写入值与文案，跳过 modelValue 回显的 O(n) 查找 */
 const handleSelect = userAction((option: Record<string, any>, _index: number) => {
   const value = option?.[valueKey.value]
@@ -370,13 +377,12 @@ const handleSelect = userAction((option: Record<string, any>, _index: number) =>
   setLabel(option?.[labelKey.value])
   emit('change', option)
   if (option.__isTemp) {
-    // 转正后列表同步重建为完整源（临时项置顶索引失效），必须按 value 重定位
-    temOptionsToCreatedOptions()
+    // 转正延迟到面板关闭后：动画期间保持过滤列表，避免列表瞬间恢复全量导致面板变长闪烁
+    pendingTempPromote = true
   }
-  // 立即退出查询态，输入框同步恢复显示选中标签
+  // 立即退出查询态，输入框同步恢复显示选中标签；查询串保留至面板关闭，避免关闭动画期间列表恢复全量
   querying.value = false
-  queryString.value = ''
-  // 按当前列表定位高亮，避免创建项转正后仍停留在点击时的临时索引（通常为 0）
+  // 按当前列表定位高亮（临时项尚未转正，仍在过滤列表中，通常为 0）
   currentIndex.value = options.value.findIndex((item) => o(item).get(valueKey.value) === value)
   if (currentIndex.value >= 0) {
     selected.value = options.value[currentIndex.value]