@veltra/desktop 1.3.10 → 1.5.0

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

@@ -1,4 +1,4 @@
-import { describe, expect, it } from 'vitest'
+import { describe, expect, it, vi } from 'vitest'
 import { createApp, h, nextTick, ref } from 'vue'
 
 import UCollapseItem from '../collapse-item.vue'
@@ -176,3 +176,180 @@ describe('Collapse', () => {
     }
   })
 })
+
+function mountStandaloneItem(props: Record<string, unknown> = {}) {
+  const host = document.createElement('div')
+  document.body.appendChild(host)
+
+  const model = ref(props.modelValue ?? false)
+  const onChange = vi.fn()
+
+  const app = createApp({
+    render() {
+      return h(
+        UCollapseItem,
+        {
+          ...props,
+          modelValue: model.value,
+          'onUpdate:modelValue': (value: boolean) => {
+            model.value = value
+          },
+          onChange
+        },
+        () => 'Standalone content'
+      )
+    }
+  })
+
+  app.mount(host)
+
+  return {
+    host,
+    model,
+    onChange,
+    unmount() {
+      app.unmount()
+      host.remove()
+    }
+  }
+}
+
+describe('CollapseItem standalone', () => {
+  it('renders bordered card styles without UCollapse parent', async () => {
+    const { host, unmount } = mountStandaloneItem({ title: 'Standalone' })
+
+    try {
+      await nextTick()
+      expect(host.querySelector('.u-collapse__item')).toBeTruthy()
+      expect(host.querySelector('.u-collapse__header')).toBeTruthy()
+      expect(host.querySelector('.u-collapse__title')?.textContent).toBe('Standalone')
+    } finally {
+      unmount()
+    }
+  })
+
+  it('defaults to collapsed when no v-model is provided', async () => {
+    const { host, model, unmount } = mountStandaloneItem({ title: 'Standalone' })
+
+    try {
+      await nextTick()
+      expect(model.value).toBe(false)
+      expect(host.querySelector('.u-collapse__item.is-active')).toBeFalsy()
+      expect(host.querySelector('.u-collapse__content-wrapper')?.getAttribute('aria-hidden')).toBe(
+        'true'
+      )
+    } finally {
+      unmount()
+    }
+  })
+
+  it('respects v-model initial expanded state', async () => {
+    const { host, model, unmount } = mountStandaloneItem({ title: 'Standalone', modelValue: true })
+
+    try {
+      await nextTick()
+      expect(model.value).toBe(true)
+      expect(host.querySelector('.u-collapse__item.is-active')).toBeTruthy()
+    } finally {
+      unmount()
+    }
+  })
+
+  it('toggles via header click and emits update:modelValue / change', async () => {
+    const { host, model, onChange, unmount } = mountStandaloneItem({ title: 'Standalone' })
+
+    try {
+      await nextTick()
+      const header = host.querySelector('.u-collapse__header') as HTMLElement
+
+      header.click()
+      await nextTick()
+
+      expect(model.value).toBe(true)
+      expect(onChange).toHaveBeenCalledWith(true)
+      expect(host.querySelector('.u-collapse__item.is-active')).toBeTruthy()
+
+      header.click()
+      await nextTick()
+
+      expect(model.value).toBe(false)
+      expect(onChange).toHaveBeenLastCalledWith(false)
+      expect(host.querySelector('.u-collapse__item.is-active')).toBeFalsy()
+    } finally {
+      unmount()
+    }
+  })
+
+  it('does not toggle when disabled', async () => {
+    const { host, model, onChange, unmount } = mountStandaloneItem({
+      title: 'Standalone',
+      disabled: true
+    })
+
+    try {
+      await nextTick()
+      ;(host.querySelector('.u-collapse__header') as HTMLElement).click()
+      await nextTick()
+
+      expect(model.value).toBe(false)
+      expect(onChange).not.toHaveBeenCalled()
+    } finally {
+      unmount()
+    }
+  })
+
+  it('ignores v-model when nested inside UCollapse', async () => {
+    const host = document.createElement('div')
+    document.body.appendChild(host)
+
+    const standaloneModel = ref(true)
+    const collapseModel = ref<string[] | undefined>()
+
+    const app = createApp({
+      render() {
+        return h(
+          UCollapse,
+          {
+            modelValue: collapseModel.value,
+            defaultCollapseAll: true,
+            'onUpdate:modelValue': (value: string[] | undefined) => {
+              collapseModel.value = value
+            }
+          },
+          () =>
+            h(
+              UCollapseItem,
+              {
+                value: 'a',
+                title: 'Nested',
+                modelValue: standaloneModel.value,
+                'onUpdate:modelValue': (value: boolean) => {
+                  standaloneModel.value = value
+                }
+              },
+              () => 'Nested content'
+            )
+        )
+      }
+    })
+
+    app.mount(host)
+
+    try {
+      await nextTick()
+      expect(collapseModel.value).toBeUndefined()
+      expect(standaloneModel.value).toBe(true)
+      expect(host.querySelector('.u-collapse__item.is-active')).toBeFalsy()
+
+      ;(host.querySelector('.u-collapse__header') as HTMLElement).click()
+      await nextTick()
+
+      expect(collapseModel.value).toEqual(['a'])
+      expect(standaloneModel.value).toBe(true)
+      expect(host.querySelector('.u-collapse__item.is-active')).toBeTruthy()
+    } finally {
+      app.unmount()
+      host.remove()
+    }
+  })
+})

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/contextmenu/__test__/contextmenu.test.ts

@@ -0,0 +1,165 @@
+import { describe, expect, it, vi } from 'vitest'
+import { createApp, defineComponent, h, inject, nextTick } from 'vue'
+
+import type { ContextmenuItem } from '../../../types'
+import UContextmenu from '../contextmenu.vue'
+import { ContextmenuRootDIKey } from '../di'
+
+function cleanupPanels(): void {
+  document.querySelectorAll('.u-contextmenu').forEach((el) => el.remove())
+}
+
+function mountContextmenu(props: {
+  menus: ContextmenuItem[]
+  width?: number
+  mousePosition?: { x: number; y: number }
+}) {
+  cleanupPanels()
+  const host = document.createElement('div')
+  document.body.appendChild(host)
+
+  const app = createApp({
+    render() {
+      return h(UContextmenu, {
+        mousePosition: props.mousePosition ?? { x: 10, y: 10 },
+        width: props.width ?? 180,
+        menus: props.menus
+      })
+    }
+  })
+  app.mount(host)
+
+  return {
+    host,
+    unmount() {
+      app.unmount()
+      host.remove()
+      cleanupPanels()
+    }
+  }
+}
+
+function panel(): HTMLElement | null {
+  // 取最后一个（避免 leave 过渡残留抢到 querySelector 首个）
+  const all = document.querySelectorAll<HTMLElement>('.u-contextmenu')
+  return all[all.length - 1] ?? null
+}
+
+describe('UContextmenu', () => {
+  it('divider 渲染为分割线', async () => {
+    const { unmount } = mountContextmenu({
+      menus: [
+        { label: 'A', callback: () => {} },
+        { divider: true },
+        { label: 'B', callback: () => {} }
+      ]
+    })
+    try {
+      await nextTick()
+      const el = panel()
+      expect(el).toBeTruthy()
+      expect(el!.querySelectorAll('.u-contextmenu__divider')).toHaveLength(1)
+      expect(el!.querySelectorAll('.u-contextmenu__item')).toHaveLength(2)
+    } finally {
+      unmount()
+    }
+  })
+
+  it('render 组件挂载替代 label', async () => {
+    const Custom = defineComponent({
+      name: 'CustomMenuContent',
+      setup() {
+        return () => h('span', { class: 'custom-render' }, '自定义内容')
+      }
+    })
+    const { unmount } = mountContextmenu({
+      menus: [{ label: 'fallback', keepOpen: true, render: Custom }]
+    })
+    try {
+      await nextTick()
+      const el = panel()!
+      expect(el.querySelector('.custom-render')?.textContent).toBe('自定义内容')
+      expect(el.textContent).not.toContain('fallback')
+    } finally {
+      unmount()
+    }
+  })
+
+  it('keepOpen 点击不关闭菜单', async () => {
+    const { unmount } = mountContextmenu({
+      menus: [
+        { label: '保持打开', keepOpen: true, callback: () => {} },
+        { label: '普通项', callback: () => {} }
+      ]
+    })
+    try {
+      await nextTick()
+      const items = panel()!.querySelectorAll<HTMLElement>('.u-contextmenu__item')
+      items[0]!.click()
+      await nextTick()
+      expect(panel()).toBeTruthy()
+      expect(panel()!.querySelectorAll('.u-contextmenu__item')).toHaveLength(2)
+    } finally {
+      unmount()
+    }
+  })
+
+  it('普通项点击仍关闭', async () => {
+    const callback = vi.fn()
+    const { unmount } = mountContextmenu({ menus: [{ label: '关闭我', callback }] })
+    try {
+      await nextTick()
+      panel()!.querySelector<HTMLElement>('.u-contextmenu__item')!.click()
+      await nextTick()
+      expect(callback).toHaveBeenCalledOnce()
+      // happy-dom 无真实 CSS transition，leave 可能停在 leave-active；断言已进入关闭流程
+      const el = panel()
+      expect(el === null || /leave/.test(el.className)).toBe(true)
+    } finally {
+      unmount()
+    }
+  })
+
+  it('内嵌组件 inject DI 可主动关闭', async () => {
+    const closerClick = vi.fn()
+    let injected = false
+    const Closer = defineComponent({
+      name: 'CloserMenuContent',
+      setup() {
+        const root = inject(ContextmenuRootDIKey)
+        injected = !!root
+        return () =>
+          h(
+            'button',
+            {
+              class: 'close-via-di',
+              type: 'button',
+              onClick: () => {
+                closerClick()
+                root?.onItemClickEnd()
+              }
+            },
+            '关闭'
+          )
+      }
+    })
+    const { unmount } = mountContextmenu({
+      menus: [{ label: '自定义', keepOpen: true, render: Closer }]
+    })
+    try {
+      await nextTick()
+      const el = panel()
+      expect(el).toBeTruthy()
+      expect(injected).toBe(true)
+      const btn = el!.querySelector<HTMLButtonElement>('.close-via-di')
+      expect(btn, `menu html: ${el!.innerHTML}`).toBeTruthy()
+      btn!.click()
+      await nextTick()
+      expect(closerClick).toHaveBeenCalledOnce()
+      const after = panel()
+      expect(after === null || /leave/.test(after.className)).toBe(true)
+    } finally {
+      unmount()
+    }
+  })
+})

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

@@ -1,11 +1,11 @@
 <template>
   <li
     :class="[cls.e('item'), bem.is('disabled', disabled), bem.is('loading', loading)]"
-    v-ripple="!disabled && !loading"
+    v-ripple="!disabled && !loading && !menu.keepOpen"
     @click="handleClickMenu"
   >
     <div :class="cls.e('item-content')">
-      <template v-if="showIconColumn">
+      <template v-if="showIconColumn && !menu.render">
         <u-icon v-if="loading" :class="bem.is('loading')">
           <Loading />
         </u-icon>
@@ -15,7 +15,10 @@
         <i v-else :class="cls.e('icon-place')"></i>
       </template>
 
-      <span :class="cls.e('label')">{{ menu.label }}</span>
+      <div v-if="menu.render" :class="cls.e('custom')" @click.stop>
+        <component :is="menu.render" />
+      </div>
+      <span v-else :class="cls.e('label')">{{ menu.label }}</span>
 
       <i v-if="showArrowColumn" :class="cls.e('arrow-place')"></i>
     </div>
@@ -44,7 +47,7 @@ const loading = shallowRef(false)
 const disabled = computed(() => getMenuDisabled(menu))
 
 function handleClickMenu() {
-  if (disabled.value || loading.value) return
+  if (disabled.value || loading.value || menu.keepOpen) return
   onItemClickStart()
   loading.value = true
 

package/src/components/contextmenu/contextmenu-panel.vue

@@ -1,7 +1,8 @@
 <template>
   <ul v-bind="$attrs">
     <template v-for="(menu, index) of menus" :key="index">
-      <UContextmenuSub v-if="menu.children?.length" :menu="menu" />
+      <li v-if="menu.divider" :class="cls.e('divider')" role="separator" />
+      <UContextmenuSub v-else-if="menu.children?.length" :menu="menu" />
       <UContextmenuItem v-else :menu="menu" />
     </template>
   </ul>
@@ -19,10 +20,12 @@ defineOptions({ name: 'UContextmenuPanel', inheritAttrs: false })
 
 const { menus } = defineProps<{ menus: ContextmenuItem[] }>()
 
-inject(ContextmenuRootDIKey)
+const { cls } = inject(ContextmenuRootDIKey)!
 
-const showIconColumn = computed(() => menus.some((menu) => !!menu.icon))
-const showArrowColumn = computed(() => menus.some((menu) => !!menu.children?.length))
+const showIconColumn = computed(() => menus.some((menu) => !menu.divider && !!menu.icon))
+const showArrowColumn = computed(() =>
+  menus.some((menu) => !menu.divider && !!menu.children?.length)
+)
 
 provide(ContextmenuPanelDIKey, { showIconColumn, showArrowColumn })
 </script>

package/src/components/contextmenu/index.ts

@@ -1,3 +1,4 @@
 export { default as UContextmenu } from './contextmenu.vue'
 
 export { contextmenu } from './api'
+export { ContextmenuRootDIKey, ContextmenuPanelDIKey } from './di'