@veltra/desktop 1.7.16 → 1.7.18

package/src/components/multi-tree-select/__test__/multi-tree-select.test.ts

@@ -0,0 +1,222 @@
+import { describe, expect, it } from 'vitest'
+import { createApp, h, nextTick, ref, type Ref } from 'vue'
+
+import UMultiTreeSelect from '../multi-tree-select.vue'
+
+const sleep = (ms: number) => new Promise((resolve) => setTimeout(resolve, ms))
+
+const treeData = [
+  {
+    label: '亚洲',
+    value: 'asia',
+    children: [
+      { label: '中国', value: 'cn' },
+      { label: '日本', value: 'jp' }
+    ]
+  },
+  {
+    label: '欧洲',
+    value: 'europe',
+    children: [
+      { label: '英国', value: 'uk' },
+      { label: '法国', value: 'fr' }
+    ]
+  }
+]
+
+function mountMultiTreeSelect(props: Record<string, unknown> = {}) {
+  const host = document.createElement('div')
+  document.body.appendChild(host)
+
+  const model = ref(props.modelValue ?? []) as Ref<(string | number)[]>
+  const data = ref(props.data ?? treeData)
+
+  const app = createApp({
+    render() {
+      return h(UMultiTreeSelect, {
+        ...props,
+        modelValue: model.value,
+        data: data.value,
+        expandAll: true,
+        'onUpdate:modelValue': (value: (string | number)[]) => {
+          model.value = value
+        }
+      })
+    }
+  })
+
+  app.mount(host)
+
+  return {
+    host,
+    model,
+    data,
+    unmount() {
+      app.unmount()
+      host.remove()
+    }
+  }
+}
+
+async function openDropdown(host: HTMLElement) {
+  const trigger = host.querySelector('.u-multi-tree-select') as HTMLElement
+  trigger.dispatchEvent(new MouseEvent('click', { bubbles: true, cancelable: true }))
+  for (let attempt = 0; attempt < 20; attempt++) {
+    await nextTick()
+    await sleep(25)
+    if (queryNodeContents().length > 0) return
+  }
+}
+
+function queryNodeContents() {
+  return [...document.body.querySelectorAll<HTMLElement>('.u-tree__node-content')]
+}
+
+function queryCheckboxes() {
+  return [...document.body.querySelectorAll<HTMLInputElement>('.u-tree .u-checkbox__native')]
+}
+
+async function clickNodeByLabel(label: string, ctrlKey = false) {
+  const node = queryNodeContents().find((el) => el.textContent?.includes(label))
+  expect(node, `tree node "${label}" not found`).toBeTruthy()
+  node!.dispatchEvent(new MouseEvent('click', { bubbles: true, ctrlKey }))
+  await nextTick()
+  await sleep(50)
+}
+
+describe('UMultiTreeSelect check-strictly and ctrl-key behavior', () => {
+  it('cascades check and uncheck to children by default (checkStrictly = false)', async () => {
+    const { host, model, unmount } = mountMultiTreeSelect()
+
+    try {
+      await openDropdown(host)
+      await clickNodeByLabel('亚洲')
+      expect(model.value).toEqual(['asia', 'cn', 'jp'])
+
+      // 取消勾选「亚洲」时级联取消子节点
+      await clickNodeByLabel('亚洲')
+      expect(model.value).toEqual([])
+    } finally {
+      unmount()
+    }
+  })
+
+  it('independently checks node when pressing ctrl in default mode', async () => {
+    const { host, model, unmount } = mountMultiTreeSelect()
+
+    try {
+      await openDropdown(host)
+      // 按住 ctrl 点击「亚洲」，仅勾选「亚洲」自身
+      await clickNodeByLabel('亚洲', true)
+      expect(model.value).toEqual(['asia'])
+
+      // 按住 ctrl 再次点击「亚洲」，仅取消「亚洲」自身
+      await clickNodeByLabel('亚洲', true)
+      expect(model.value).toEqual([])
+    } finally {
+      unmount()
+    }
+  })
+
+  it('cascades children on check, but only unchecks self on uncheck in checkStrictly mode', async () => {
+    const { host, model, unmount } = mountMultiTreeSelect({ 'check-strictly': true })
+
+    try {
+      await openDropdown(host)
+      // 勾选父节点「亚洲」-> 把所有子节点都勾上
+      await clickNodeByLabel('亚洲')
+      expect(model.value).toEqual(['asia', 'cn', 'jp'])
+
+      // 取消勾选父节点「亚洲」-> 只取消自己，子节点保持勾选
+      await clickNodeByLabel('亚洲')
+      expect(model.value).toEqual(['cn', 'jp'])
+    } finally {
+      unmount()
+    }
+  })
+
+  it('does not show indeterminate on parent when only child is checked in checkStrictly mode', async () => {
+    const { host, unmount } = mountMultiTreeSelect({ checkStrictly: true })
+
+    try {
+      await openDropdown(host)
+      await clickNodeByLabel('中国')
+
+      // 父节点「亚洲」不应有半选状态
+      const asiaNodeContent = queryNodeContents().find((el) => el.textContent?.includes('亚洲'))
+      const asiaCheckbox = asiaNodeContent?.closest('.u-tree__node')?.querySelector('.u-checkbox')
+      expect(asiaCheckbox?.classList.contains('is-indeterminate')).toBe(false)
+      expect(asiaCheckbox?.querySelector('.u-checkbox--indeterminate')).toBeNull()
+    } finally {
+      unmount()
+    }
+  })
+
+  it('selects all nodes when clicking select all in checkStrictly mode', async () => {
+    const { host, model, unmount } = mountMultiTreeSelect({ checkStrictly: true })
+
+    try {
+      await openDropdown(host)
+      // 点击全选 checkbox
+      const allCheckboxInput = document.body.querySelector(
+        '.u-multi-tree-select__content-header .u-checkbox__native'
+      ) as HTMLInputElement
+      expect(allCheckboxInput).toBeTruthy()
+      allCheckboxInput.click()
+      await nextTick()
+      await sleep(50)
+
+      expect(model.value).toEqual(['asia', 'cn', 'jp', 'europe', 'uk', 'fr'])
+
+      // 再次点击取消全选
+      allCheckboxInput.click()
+      await nextTick()
+      await sleep(50)
+      expect(model.value).toEqual([])
+    } finally {
+      unmount()
+    }
+  })
+
+  it('echoes only parent node when initialized with parent id in checkStrictly mode', async () => {
+    const { host, model, unmount } = mountMultiTreeSelect({
+      checkStrictly: true,
+      modelValue: ['asia']
+    })
+
+    try {
+      await openDropdown(host)
+      expect(model.value).toEqual(['asia'])
+
+      // tags 只有「亚洲」
+      const tags = host.querySelectorAll('.u-tag')
+      expect(tags.length).toBe(1)
+      expect(tags[0].textContent).toContain('亚洲')
+    } finally {
+      unmount()
+    }
+  })
+
+  it('directly clicking checkbox cascades on check and only unchecks self on uncheck in checkStrictly mode', async () => {
+    const { host, model, unmount } = mountMultiTreeSelect({ checkStrictly: true })
+
+    try {
+      await openDropdown(host)
+      const checkboxes = queryCheckboxes()
+      expect(checkboxes.length).toBeGreaterThan(0)
+      // 点击第一个 checkbox（亚洲）-> 勾选所有子节点
+      checkboxes[0].click()
+      await nextTick()
+      await sleep(50)
+      expect(model.value).toEqual(['asia', 'cn', 'jp'])
+
+      // 再次点击第一个 checkbox（亚洲）-> 仅取消亚洲自身
+      checkboxes[0].click()
+      await nextTick()
+      await sleep(50)
+      expect(model.value).toEqual(['cn', 'jp'])
+    } finally {
+      unmount()
+    }
+  })
+})

package/src/components/multi-tree-select/multi-tree-select.vue

@@ -131,7 +131,9 @@ const props = withDefaults(defineProps<MultiTreeSelectProps>(), {
   readonly: undefined,
   filterable: false,
   visibilityLimit: 3,
-  minWidth: '280px'
+  minWidth: '280px',
+  checkStrictly: false,
+  checkOnClickNode: true
 })
 
 const labelKey = computed(() => fieldKey(props.labelKey, 'label'))

package/src/components/tree/tree-node.vue

@@ -27,7 +27,7 @@
         v-if="treeProps.checkable"
         :class="cls.e('checkbox')"
         :model-value="node.checked"
-        :indeterminate="node.indeterminate"
+        :indeterminate="!treeProps.checkStrictly && node.indeterminate"
         :disabled="node.disabled"
         @change="handleChange"
         @click.stop

package/src/components/tree/tree.vue

@@ -102,7 +102,13 @@ const { filter } = useFilter({ forest, getFlattedNodes })
 
 const { handleSelect, selectedData } = useSelect({ props, emit, nodeDict, getFlattedNodes })
 
-const { checkedData, toggleCheck } = useCheck({ props, emit, nodeDict, getFlattedNodes })
+const { checkedData, toggleCheck, checkAll } = useCheck({
+  props,
+  emit,
+  forest,
+  nodeDict,
+  getFlattedNodes
+})
 
 const estimateSize = (): number => {
   // 基于 style.scss 中节点稳态高度推算的默认值；
@@ -196,11 +202,7 @@ defineExpose<_TreeExposed>({
   nodes,
   checkNode: toggleCheck,
   selectNode: handleSelect,
-  checkAll(check: boolean) {
-    forest.value.roots.forEach((node) => {
-      toggleCheck(node, check)
-    })
-  },
+  checkAll,
   getSelected() {
     return selectedData
   },

package/src/components/tree/use-check.ts

@@ -1,3 +1,4 @@
+import type { Forest } from '@cat-kit/core'
 import { dfs, o } from '@cat-kit/core'
 import { fieldKey } from '@veltra/utils'
 import { nextTick, watch, type ComputedRef } from 'vue'
@@ -8,6 +9,7 @@ import type { TreeNode } from './tree-node'
 interface Options {
   emit: TreeEmit
   props: TreeProps
+  forest: ComputedRef<Forest<Record<string, unknown>, any>>
   nodeDict: ComputedRef<Map<any, TreeNode>>
   getFlattedNodes: () => void
 }
@@ -15,6 +17,7 @@ interface Options {
 interface UseCheckReturned {
   checkedData: Set<Record<string, any>>
   toggleCheck: (node: TreeNode, check: boolean, ctrlKey?: boolean) => void
+  checkAll: (check: boolean) => void
 }
 
 /**
@@ -33,7 +36,7 @@ function expandAncestors(node: TreeNode): boolean {
 }
 
 export function useCheck(options: Options): UseCheckReturned {
-  const { emit, props, nodeDict, getFlattedNodes } = options
+  const { emit, props, forest, nodeDict, getFlattedNodes } = options
 
   const checkedData = new Set<Record<string, any>>()
 
@@ -48,7 +51,7 @@ export function useCheck(options: Options): UseCheckReturned {
   function checkNode(node: TreeNode): void {
     if (node.checked) return
     node.checked = true
-    if (node.parent) {
+    if (!props.checkStrictly && node.parent) {
       node.parent.childrenCheckCount++
     }
     checkedData.add(node.data)
@@ -57,7 +60,7 @@ export function useCheck(options: Options): UseCheckReturned {
   function uncheckNode(node: TreeNode): void {
     if (!node.checked) return
     node.checked = false
-    if (node.parent) {
+    if (!props.checkStrictly && node.parent) {
       node.parent.childrenCheckCount--
     }
     checkedData.delete(node.data)
@@ -129,18 +132,19 @@ export function useCheck(options: Options): UseCheckReturned {
     const { checkStrictly } = props
 
     if (ctrlKey) {
-      checkNode(node)
-    } else {
-      dfs(
-        node as unknown as Record<string, unknown>,
-        (n) => {
-          const tn = n as unknown as TreeNode
-          !tn.disabled && checkNode(tn)
-        },
-        props.childrenKey ?? 'children'
-      )
+      !node.disabled && checkNode(node)
+      return
     }
 
+    dfs(
+      node as unknown as Record<string, unknown>,
+      (n) => {
+        const tn = n as unknown as TreeNode
+        !tn.disabled && checkNode(tn)
+      },
+      props.childrenKey ?? 'children'
+    )
+
     // 非严格选择时还需要更新祖先节点，
     // 一旦子节点全部选中，父节点也要设置为选中状态
     if (!checkStrictly) {
@@ -158,28 +162,28 @@ export function useCheck(options: Options): UseCheckReturned {
 
   function handleUncheck(node: TreeNode, ctrlKey?: boolean) {
     const { checkStrictly } = props
-    if (ctrlKey) {
-      uncheckNode(node)
-    } else {
-      dfs(
-        node as unknown as Record<string, unknown>,
-        (n) => {
-          const tn = n as unknown as TreeNode
-          !tn.disabled && uncheckNode(tn)
-        },
-        props.childrenKey ?? 'children'
-      )
+
+    if (ctrlKey || checkStrictly) {
+      !node.disabled && uncheckNode(node)
+      return
     }
 
+    dfs(
+      node as unknown as Record<string, unknown>,
+      (n) => {
+        const tn = n as unknown as TreeNode
+        !tn.disabled && uncheckNode(tn)
+      },
+      props.childrenKey ?? 'children'
+    )
+
     // 非严格模式下，取消选中时，需要更新父节点
-    if (!checkStrictly) {
-      node.bubbleSet((node) => {
-        const { parent } = node
-        if (parent) {
-          uncheckNode(parent)
-        }
-      })
-    }
+    node.bubbleSet((node) => {
+      const { parent } = node
+      if (parent) {
+        uncheckNode(parent)
+      }
+    })
   }
 
   function toggleCheck(node: TreeNode, check: boolean, ctrlKey?: boolean) {
@@ -202,5 +206,31 @@ export function useCheck(options: Options): UseCheckReturned {
     })
   }
 
-  return { checkedData, toggleCheck }
+  function checkAll(check: boolean) {
+    checkedByEvent = true
+
+    forest.value.dfs((node) => {
+      const tn = node as unknown as TreeNode
+      if (!tn.disabled) {
+        check ? checkNode(tn) : uncheckNode(tn)
+      }
+    })
+
+    const checkedArr = Array.from(checkedData)
+
+    const valueKey = fieldKey(props.valueKey, 'value')
+    const nextValues = checkedArr.map((item) => o(item).get(valueKey) as unknown)
+
+    lastCheckedSet = new Set(nextValues)
+
+    emit('update:checked', nextValues as any[], checkedArr)
+
+    getFlattedNodes()
+
+    nextTick(() => {
+      checkedByEvent = false
+    })
+  }
+
+  return { checkedData, toggleCheck, checkAll }
 }

package/src/types/batch-edit.ts

@@ -8,8 +8,6 @@ export interface BatchEditColumn extends TableColumn {}
 
 export type BatchEditFeature = 'create' | 'update' | 'delete' | 'view' | 'createChild'
 
-export type BatchEditFormStatus = 'hidden'
-
 /** 批量编辑状态 */
 export interface BatchEditStates {
   /** 层级 */
@@ -35,8 +33,6 @@ export interface BatchEditProps extends TableProps {
    * @description 与右侧 UForm 绑定的 reactive 对象
    */
   model?: Record<string, any>
-  /** 表格标题 */
-  title?: string
   /**
    * 列的宽度定义
    */