@veltra/desktop 1.6.6 → 1.7.1

package/dist/types/segment.d.ts

@@ -0,0 +1,41 @@
+import { DeconstructValue, FormComponentProps } from "@veltra/utils";
+//#region src/types/segment.d.ts
+/** 分段单选选项 */
+type SegmentItem = Record<string, any>;
+/** 分段单选组件属性 */
+interface SegmentProps extends FormComponentProps {
+  /** 绑定值 */
+  modelValue?: any;
+  /** 选项列表 */
+  items: SegmentItem[];
+  /**
+   * 选项值 key
+   * @default 'value'
+   */
+  valueKey?: string;
+  /**
+   * 选项标签 key
+   * @default 'label'
+   */
+  labelKey?: string;
+  /** 是否禁用整组 */
+  disabled?: boolean;
+  /** 禁用的选项判断函数 */
+  disabledItem?: (item: SegmentItem) => boolean;
+  /** 是否撑满容器宽度 */
+  block?: boolean;
+}
+/** 分段单选组件事件 */
+interface SegmentEmits {
+  /** 绑定值更新 */
+  (e: 'update:modelValue', modelValue: any): void;
+  /** 选中项切换事件 */
+  (e: 'change', item: SegmentItem): void;
+}
+/** 分段单选组件暴露的属性和方法(组件内部使用) */
+interface _SegmentExposed {}
+/** 分段单选组件暴露的属性和方法(组件外部使用, 引用的值会被自动解构) */
+type SegmentExposed = DeconstructValue<_SegmentExposed>;
+//#endregion
+export { SegmentEmits, SegmentExposed, SegmentItem, SegmentProps, _SegmentExposed };
+//# sourceMappingURL=segment.d.ts.map

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@veltra/desktop",
-  "version": "1.6.6",
+  "version": "1.7.1",
   "homepage": "https://github.com/cabinet-fe/ultra-ui#readme",
   "bugs": {
     "url": "https://github.com/cabinet-fe/ultra-ui/issues"
@@ -80,12 +80,12 @@
   "peerDependencies": {
     "@cat-kit/core": ">=1.1.8",
     "@cat-kit/fe": ">=1.1.8",
-    "@veltra/compositions": "^1.6.6",
-    "@veltra/directives": "^1.6.6",
+    "@veltra/compositions": "^1.7.1",
+    "@veltra/directives": "^1.7.1",
     "@veltra/icons": "^1.5.0",
-    "@veltra/sheet-core": "^2.5.0",
-    "@veltra/styles": "^1.6.6",
-    "@veltra/utils": "^1.6.6",
+    "@veltra/sheet-core": "^2.5.2",
+    "@veltra/styles": "^1.7.1",
+    "@veltra/utils": "^1.7.1",
     "vue": ">=3.5.41"
   },
   "peerDependenciesMeta": {

package/src/components/dual-nav/style.scss

@@ -20,7 +20,7 @@ $root-name: dual-nav;
     align-items: center;
     gap: 4px;
     padding: 8px 6px;
-    background-color: fn.use-var(bg-color, middle);
+    background-color: var(--u-nav-rail-bg);
   }
 
   @include m.m(labeled) {
@@ -76,14 +76,14 @@ $root-name: dual-nav;
     font-size: fn.use-var(font-size, default);
     font-weight: 600;
     line-height: 1.4;
-    color: fn.use-var(text-color, title);
+    color: var(--u-nav-strong-color);
   }
 
   @include m.e(description) {
     margin: 0;
     font-size: fn.use-var(font-size-assist, default);
     line-height: 1.5;
-    color: fn.use-var(text-color, second);
+    color: var(--u-nav-second-color);
   }
 
   @include m.e(toggle-expand) {
@@ -97,7 +97,7 @@ $root-name: dual-nav;
     border: none;
     border-radius: fn.use-var(radius, default);
     background: transparent;
-    color: fn.use-var(text-color, second);
+    color: var(--u-nav-second-color);
     cursor: pointer;
     transition:
       background-color 0.15s ease,
@@ -133,7 +133,7 @@ $root-name: dual-nav;
     border: none;
     border-radius: calc(fn.use-var(radius, default) + 2px);
     background: transparent;
-    color: fn.use-var(text-color, second);
+    color: var(--u-nav-second-color);
     cursor: pointer;
     transition:
       background-color 0.15s ease,

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

@@ -40,7 +40,7 @@
     font-weight: 500;
     line-height: 1.4;
     letter-spacing: 0.02em;
-    color: fn.use-var(text-color, second);
+    color: var(--u-nav-second-color);
   }
 
   @include m.e(group-list) {

package/src/components/index.ts

@@ -149,3 +149,5 @@ export * from './palette'
 export * from './grid'
 
 export * from './badge'
+
+export * from './segment'

package/src/components/nav/style.scss

@@ -33,7 +33,7 @@ $collapsed-nav: collapsed-nav;
     }
 
     @include m.is(expanded, branch-active) {
-      color: fn.use-var(text-color, title);
+      color: var(--u-nav-strong-color);
     }
 
     @include m.is(active) {
@@ -121,7 +121,7 @@ $collapsed-nav: collapsed-nav;
   }
 
   @include m.e(sub-expand, icon) {
-    color: fn.use-var(text-color, second);
+    color: var(--u-nav-second-color);
     display: inline-flex;
     justify-content: center;
     align-items: center;
@@ -146,7 +146,7 @@ $collapsed-nav: collapsed-nav;
     overflow: hidden;
     margin: 2px 0 0 12px;
     padding: 2px 0 2px 8px;
-    border-left: 1px solid fn.color-a(border, 52, color);
+    border-left: 1px solid var(--u-nav-sub-border-color);
 
     @include m.is(has-active) {
       border-left-color: fn.use-var(color, primary);
@@ -193,7 +193,7 @@ $collapsed-nav: collapsed-nav;
   }
 
   @include m.e(icon) {
-    color: fn.use-var(text-color, second);
+    color: var(--u-nav-second-color);
     object-fit: contain;
   }
 

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>