@veltra/desktop 1.7.10 → 1.7.12

package/dist/types/batch-edit.d.ts

@@ -99,8 +99,6 @@ interface BatchEditProps extends TableProps {
 }
 /** 批量编辑组件定义的事件 */
 interface BatchEditEmits extends TableEmits {
-  /** 表单控件 change，透传自 UForm */
-  (e: 'field:change', field: string, ...args: any[]): void;
   /** 更新数据 */
   (e: 'update:data', value: Record<string, any>[]): void;
   /** 点击底部「新增一行」 */

package/dist/types/button.d.ts

@@ -3,7 +3,11 @@ import { ColorType, ComponentProps, DeconstructValue } from "@veltra/utils";
 //#region src/types/button.d.ts
 /** 按钮类型 */
 type ButtonType = ColorType;
-/** 按钮属性类型 */
+/**
+ * 按钮属性类型
+ * @description 组件不注入默认 `aria-label`：可访问名来自默认插槽文本，
+ * 或你自己传入的 `aria-label`（透传到根元素）；只有图标的按钮必须自行传 `aria-label`
+ */
 interface ButtonProps extends ComponentProps {
   /** 按钮类型 */
   type?: ButtonType;

package/dist/types/drawer.d.ts

@@ -12,15 +12,18 @@ interface DrawerProps {
   direction?: DrawerDirection;
   /** 是否显示关闭按钮 */
   showClose?: boolean;
-  /** 抽屉标题 */
+  /**
+   * 抽屉标题；传入时在内容区上方渲染标题栏
+   * @description 不传则不渲染标题栏，内容仍全部来自默认插槽
+   */
   title?: string;
 }
 /** 抽屉组件定义的事件 */
 interface DrawerEmits {
   (e: 'update:modelValue', value: boolean): void;
-  /** 关闭时触发 */
+  /** 开始关闭时触发（点遮罩、点关闭按钮） */
   (e: 'close'): void;
-  /** 完全关闭后触发 */
+  /** 完全关闭后触发：抽屉与遮罩的退出动画结束、节点已移除时 */
   (e: 'closed'): void;
 }
 /** 抽屉组件暴露的属性和方法(组件内部使用) */

package/dist/types/form.d.ts

@@ -28,8 +28,6 @@ interface FormProps extends ComponentProps {
   disabled?: boolean;
 }
 interface FormEmits {
-  /** 控件 change 事件，仅用户操作触发 */
-  (e: 'field:change', field: string, ...args: any[]): void;
   /** model 字段值更新，含编程写入 */
   (e: 'field:update', field: string, value: any): void;
 }

package/dist/types/layout.d.ts

@@ -18,6 +18,8 @@ interface LayoutProps {
    * const cols = ['200px', '1fr']
    * ```
    * [fr是什么?](https://developer.mozilla.org/zh-CN/docs/Web/CSS/flex_value)
+   * @description 默认插槽的每个直接子元素按顺序占一列，用自定义组件包一层时该组件必须是单根元素；
+   * 子元素渲染出 0 个（`v-if` 为假）或多个根节点时会挤动后面的列，此时自行给子元素写 `grid-column`
    */
   cols?: string[] | string;
   /**

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@veltra/desktop",
-  "version": "1.7.10",
+  "version": "1.7.12",
   "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.2.1",
     "@cat-kit/fe": ">=1.2.1",
-    "@veltra/compositions": "^1.7.10",
-    "@veltra/directives": "^1.7.10",
+    "@veltra/compositions": "^1.7.12",
+    "@veltra/directives": "^1.7.12",
     "@veltra/icons": "^1.5.0",
     "@veltra/sheet-core": "^2.5.6",
-    "@veltra/styles": "^1.7.10",
-    "@veltra/utils": "^1.7.10",
+    "@veltra/styles": "^1.7.12",
+    "@veltra/utils": "^1.7.12",
     "vue": ">=3.5.42"
   },
   "peerDependenciesMeta": {

package/src/components/batch-edit/__test__/batch-edit.test.ts

@@ -30,8 +30,6 @@ function mountBatchEdit() {
     apiMethod: undefined as string | undefined
   })
 
-  const fieldChanges: { field: string; args: unknown[] }[] = []
-
   const app = createApp({
     render() {
       return h(
@@ -41,9 +39,6 @@ function mountBatchEdit() {
           'onUpdate:data': (value: any[]) => {
             data.value = value
           },
-          'onField:change': (field: string, ...args: unknown[]) => {
-            fieldChanges.push({ field, args })
-          },
           columns,
           model,
           rowKey: 'id',
@@ -94,7 +89,6 @@ function mountBatchEdit() {
     host,
     data,
     model,
-    fieldChanges,
     unmount() {
       app.unmount()
       host.remove()
@@ -202,136 +196,4 @@ describe('UBatchEdit quick-edit 切换编辑行', () => {
 
     unmount()
   })
-
-  it('切换行回显不触发 field:change', async () => {
-    const { host, fieldChanges, unmount } = mountBatchEdit()
-
-    fieldChanges.length = 0
-    await clickRow(host, 0)
-    await clickRow(host, 1)
-
-    expect(fieldChanges).toHaveLength(0)
-
-    unmount()
-  })
-
-  it('用户变更 Select 触发 field:change', async () => {
-    const { host, fieldChanges, unmount } = mountBatchEdit()
-
-    await clickRow(host, 0)
-    fieldChanges.length = 0
-
-    const input = host.querySelector<HTMLInputElement>('.u-select input')
-    expect(input).toBeTruthy()
-    input!.dispatchEvent(new MouseEvent('click', { bubbles: true, cancelable: true }))
-    await nextTick()
-    await nextTick()
-
-    const option = [...document.body.querySelectorAll<HTMLElement>('.u-select__option')].find(
-      (el) => el.textContent === '接口'
-    )
-    expect(option).toBeTruthy()
-    option!.dispatchEvent(new MouseEvent('click', { bubbles: true }))
-    await nextTick()
-    await nextTick()
-
-    expect(fieldChanges).toHaveLength(1)
-    expect(fieldChanges[0]).toEqual({ field: 'behavior', args: [{ label: '接口', value: 'api' }] })
-
-    unmount()
-  })
-
-  it('field:change 联动改其他字段不循环触发', async () => {
-    const host = document.createElement('div')
-    document.body.appendChild(host)
-
-    const columns = defineTableColumns([
-      { key: 'label', name: '名称' },
-      { key: 'behavior', name: '行为' }
-    ])
-
-    const data = ref([
-      { id: '1', label: '存草稿', behavior: 'common-resource', submitType: 'DRAFT' },
-      { id: '2', label: '调接口', behavior: 'api', submitType: 'SUBMIT', apiMethod: 'POST' }
-    ])
-
-    const model = reactive({
-      id: '',
-      label: '',
-      behavior: 'event',
-      submitType: undefined as string | undefined,
-      apiMethod: undefined as string | undefined
-    })
-
-    const fieldChanges: string[] = []
-
-    const app = createApp({
-      render() {
-        return h(
-          UBatchEdit,
-          {
-            data: data.value,
-            'onUpdate:data': (value: any[]) => {
-              data.value = value
-            },
-            'onField:change': (field: string) => {
-              fieldChanges.push(field)
-              if (field === 'behavior') {
-                model.submitType = undefined
-              }
-            },
-            columns,
-            model,
-            rowKey: 'id',
-            quickEdit: true
-          },
-          {
-            form: () => [
-              h(UInput, { field: 'label', label: '名称' }),
-              h(USelect, {
-                field: 'behavior',
-                label: '行为',
-                options: [
-                  { label: '事件', value: 'event' },
-                  { label: '通用资源', value: 'common-resource' },
-                  { label: '接口', value: 'api' }
-                ]
-              }),
-              h(USelect, {
-                field: 'submitType',
-                label: '提交类型',
-                options: [
-                  { label: 'DRAFT', value: 'DRAFT' },
-                  { label: 'SUBMIT', value: 'SUBMIT' }
-                ]
-              })
-            ]
-          }
-        )
-      }
-    })
-
-    app.mount(host)
-
-    await clickRow(host, 0)
-    fieldChanges.length = 0
-
-    const input = host.querySelector<HTMLInputElement>('.u-select input')
-    input!.dispatchEvent(new MouseEvent('click', { bubbles: true, cancelable: true }))
-    await nextTick()
-    await nextTick()
-
-    const option = [...document.body.querySelectorAll<HTMLElement>('.u-select__option')].find(
-      (el) => el.textContent === '接口'
-    )
-    option!.dispatchEvent(new MouseEvent('click', { bubbles: true }))
-    await nextTick()
-    await nextTick()
-
-    expect(fieldChanges).toEqual(['behavior'])
-    expect(model.submitType).toBeUndefined()
-
-    app.unmount()
-    host.remove()
-  })
 })

package/src/components/batch-edit/batch-edit-form.vue

@@ -29,7 +29,6 @@
           :readonly="props.readonly"
           :label-width="props.labelWidth"
           @field:update="handleFieldUpdate"
-          @field:change="handleFormFieldChange"
         >
           <slot
             v-bind="{
@@ -92,17 +91,8 @@ defineOptions({ name: 'UBatchEditForm' })
 
 const batchEditCtx = inject(BatchEditDIKey)!
 
-const {
-  cls,
-  props,
-  state,
-  emit,
-  handleClose,
-  handleSave,
-  staticFeatures,
-  dynamicFeatures,
-  syncing
-} = batchEditCtx
+const { cls, props, state, handleClose, handleSave, staticFeatures, dynamicFeatures, syncing } =
+  batchEditCtx
 
 const focused = toRef(batchEditCtx, 'focused')
 
@@ -124,10 +114,6 @@ function handleFieldUpdate(field: string, value: any) {
   }
 }
 
-function handleFormFieldChange(field: string, ...args: any[]) {
-  emit('field:change', field, ...args)
-}
-
 const creatable = computed(() => {
   if (state.formActionType !== 'create') return false
   return staticFeatures.value.has('create') || dynamicFeatures.value.create?.(state.row)

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

@@ -0,0 +1,48 @@
+import { describe, expect, it } from 'vitest'
+import { createApp, h } from 'vue'
+
+import UButton from '../button.vue'
+
+function mountButton(props: Record<string, unknown> = {}, slot = '新建用户') {
+  const host = document.createElement('div')
+  document.body.appendChild(host)
+
+  const app = createApp({ render: () => h(UButton, props, () => slot) })
+  app.mount(host)
+
+  return {
+    host,
+    button: host.querySelector('button')!,
+    unmount() {
+      app.unmount()
+      host.remove()
+    }
+  }
+}
+
+describe('UButton 原生属性与可访问名', () => {
+  it('不注入默认 aria-label：可访问名来自默认插槽文本', () => {
+    const { button, unmount } = mountButton()
+
+    expect(button.getAttribute('aria-label')).toBeNull()
+    expect(button.textContent?.trim()).toBe('新建用户')
+
+    unmount()
+  })
+
+  it('自己传的 aria-label 透传到根元素，图标按钮仍可命名', () => {
+    const { button, unmount } = mountButton({ 'aria-label': '编辑' }, '')
+
+    expect(button.getAttribute('aria-label')).toBe('编辑')
+
+    unmount()
+  })
+
+  it('原生 type 固定为 button，放进 form 里不会触发提交', () => {
+    const { button, unmount } = mountButton()
+
+    expect(button.getAttribute('type')).toBe('button')
+
+    unmount()
+  })
+})

package/src/components/button/button.vue

@@ -1,12 +1,5 @@
 <template>
-  <button
-    :class="classList"
-    type="button"
-    aria-label="button"
-    ref="buttonRef"
-    v-ripple="ripple"
-    @click="handleClick"
-  >
+  <button :class="classList" type="button" ref="buttonRef" v-ripple="ripple" @click="handleClick">
     <!-- 加载图标 -->
     <u-icon v-if="loading" :class="[bem.is('loading')]" :size="iconSize">
       <component :is="loadingIcon" />

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

@@ -0,0 +1,118 @@
+import { describe, expect, it, vi } from 'vitest'
+import { createApp, h, nextTick, ref } from 'vue'
+
+import UDrawer from '../drawer.vue'
+
+function mountDrawer(
+  props: Record<string, unknown> = {},
+  handlers: { onClose?: () => void; onClosed?: () => void } = {}
+) {
+  const host = document.createElement('div')
+  document.body.appendChild(host)
+
+  const model = ref(false)
+  const closedCount = ref(0)
+  const app = createApp({
+    render: () =>
+      h(
+        UDrawer,
+        {
+          ...props,
+          modelValue: model.value,
+          'onUpdate:modelValue': (value: boolean) => {
+            model.value = value
+          },
+          onClose: () => handlers.onClose?.(),
+          onClosed: () => {
+            closedCount.value += 1
+            handlers.onClosed?.()
+          }
+        },
+        () => '抽屉内容'
+      )
+  })
+  app.mount(host)
+
+  return {
+    host,
+    model,
+    closedCount,
+    panel: () => document.body.querySelector<HTMLElement>('.u-drawer'),
+    overlay: () => document.body.querySelector<HTMLElement>('.u-drawer-overlay'),
+    unmount() {
+      app.unmount()
+      host.remove()
+    }
+  }
+}
+
+async function openDrawer(ctx: ReturnType<typeof mountDrawer>) {
+  ctx.model.value = true
+  await vi.waitFor(() => {
+    expect(ctx.panel()).toBeTruthy()
+  })
+}
+
+describe('UDrawer title', () => {
+  it('传入 title 时渲染标题栏', async () => {
+    const ctx = mountDrawer({ title: '用户详情' })
+    await openDrawer(ctx)
+
+    expect(ctx.panel()!.querySelector('.u-drawer__title')?.textContent).toBe('用户详情')
+
+    ctx.unmount()
+  })
+
+  it('不传 title 时不渲染标题栏', async () => {
+    const ctx = mountDrawer()
+    await openDrawer(ctx)
+
+    expect(ctx.panel()!.querySelector('.u-drawer__header')).toBeNull()
+
+    ctx.unmount()
+  })
+})
+
+describe('UDrawer closed', () => {
+  it('关闭动画结束后触发 closed，且晚于 close', async () => {
+    const order: string[] = []
+    const ctx = mountDrawer(
+      { showClose: true },
+      { onClose: () => order.push('close'), onClosed: () => order.push('closed') }
+    )
+    await openDrawer(ctx)
+
+    ctx.panel()!.querySelector<HTMLElement>('.u-drawer__close')!.click()
+    await vi.waitFor(() => {
+      expect(order).toContain('closed')
+    })
+
+    expect(order).toEqual(['close', 'closed'])
+    // 完全关闭后遮罩与抽屉都已移除
+    expect(ctx.overlay()).toBeNull()
+
+    ctx.unmount()
+  })
+
+  it('点遮罩关闭也触发 closed', async () => {
+    const ctx = mountDrawer()
+    await openDrawer(ctx)
+
+    ctx.overlay()!.dispatchEvent(new MouseEvent('click', { bubbles: true, cancelable: true }))
+    await vi.waitFor(() => {
+      expect(ctx.closedCount.value).toBe(1)
+    })
+
+    ctx.unmount()
+  })
+
+  it('从未打开时不触发 closed', async () => {
+    const ctx = mountDrawer()
+    await nextTick()
+    await nextTick()
+
+    expect(ctx.closedCount.value).toBe(0)
+
+    ctx.unmount()
+  })
+})

package/src/components/drawer/drawer.vue

@@ -1,6 +1,6 @@
 <template>
   <Teleport to="body">
-    <transition name="fade" mode="out-in" @enter="onEnter">
+    <transition name="fade" mode="out-in" @enter="onEnter" @after-leave="emit('closed')">
       <div v-if="overlayVisible" :class="overlayCls.b" :style="{ zIndex: zIndex() }" @click="close">
         <transition :name="transitionName" appear @after-leave="onAfterDrawerLeave">
           <div
@@ -10,6 +10,9 @@
             :style="drawerStyle"
             @click.stop
           >
+            <div v-if="title" :class="cls.e('header')">
+              <span :class="cls.e('title')">{{ title }}</span>
+            </div>
             <span :class="cls.e('close')" @click="close" v-if="showClose">
               <u-icon><Close /></u-icon>
             </span>
@@ -31,7 +34,7 @@ import { UIcon } from '../icon'
 
 defineOptions({ name: 'UDrawer', inheritAttrs: false })
 
-const props = withDefaults(defineProps<DrawerProps>(), { direction: 'right', closable: true })
+const props = withDefaults(defineProps<DrawerProps>(), { direction: 'right' })
 
 const emit = defineEmits<DrawerEmits>()
 

package/src/components/drawer/style.scss

@@ -40,6 +40,21 @@ $direction-map: (
     justify-content: center;
   }
 
+  // 标题栏：传入 title 时渲染在内容区上方，其余行为与把标题写进默认插槽一致
+  @include m.e(header) {
+    height: $close-size;
+    flex-shrink: 0;
+    padding: 0 fn.use-var(gap, default);
+    font-size: fn.use-var(font-size-title, default);
+    border-bottom: fn.use-var(border);
+    @include m.flex();
+  }
+
+  @include m.e(title) {
+    font-weight: 600;
+    line-height: 1em;
+  }
+
   @include m.is(right, left) {
     top: $edge-offset;
     bottom: $edge-offset;