@veltra/desktop 1.7.15 → 1.7.17

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@veltra/desktop",
-  "version": "1.7.15",
+  "version": "1.7.17",
   "homepage": "https://github.com/cabinet-fe/ultra-ui#readme",
   "bugs": {
     "url": "https://github.com/cabinet-fe/ultra-ui/issues"

package/src/components/button/button.vue

@@ -58,8 +58,9 @@ const classList = computed(() => {
 })
 
 const ripple = computed(() => {
-  if (props.disabled || props.loading || props.text) return false
-  if (props.plain && props.type) {
+  if (props.disabled || props.loading) return false
+  // plain / text 变体无底色，波纹用类型色才能看清
+  if ((props.plain || props.text) && props.type) {
     return bem.is(`ripple-${props.type}`)
   }
   return true

package/src/components/form-item/style.scss

@@ -52,7 +52,17 @@ $root-name: form-item;
     #{fn.bem(multi-tree-select)},
     #{fn.bem(auto-complete)},
     #{fn.bem(textarea--more)} {
-      border-color: fn.use-var(color, danger);
+      // hover 的 primary 描边与错误态同权重，按源序分胜负：错误态显式压住，避免悬浮时描边回蓝
+      &,
+      &:hover,
+      &.is-focus {
+        border-color: fn.use-var(color, danger);
+      }
+
+      // 聚焦光晕与描边同色，错误态转红
+      &.is-focus {
+        box-shadow: fn.use-var(focus-ring, danger);
+      }
     }
   }
 

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

@@ -266,8 +266,10 @@ describe('UTableEditor 按列校验', () => {
       const [row0] = getDataRows()
       const headerText = () =>
         findHeader(host, '姓名')?.querySelector('.u-table-editor__header-text')
+      const nameCellError = () =>
+        row0.querySelector('[data-test="name-input"]')?.parentElement?.className
 
-      // 输入过程（input 事件）不触发校验：清空后表头无错误指示
+      // 输入过程（input 事件）不触发校验：清空后表头无错误指示，单元格无错误标记
       const input = row0.querySelector('input')!
       input.value = ''
       input.dispatchEvent(new Event('input', { bubbles: true }))
@@ -275,14 +277,15 @@ describe('UTableEditor 按列校验', () => {
       await nextTick()
       expect(headerText()?.className).not.toContain('is-error')
       expect(findHeader(host, '姓名')?.querySelector('.u-table-editor__header-icon')).toBeFalsy()
+      expect(nameCellError()).not.toContain('is-error')
 
-      // change 事件（如失焦提交）触发校验：该列表头出现错误指示，单元格自身无错误样式
+      // change 事件（如失焦提交）触发校验：该列表头出现错误指示，单元格挂 is-error
       input.dispatchEvent(new Event('change', { bubbles: true }))
       await nextTick()
       await nextTick()
       expect(headerText()?.className).toContain('is-error')
       expect(findHeader(host, '姓名')?.querySelector('.u-table-editor__header-icon')).toBeTruthy()
-      expect(row0.querySelector('.u-table-editor__cell-error')).toBeFalsy()
+      expect(nameCellError()).toContain('is-error')
 
       // 填回合法值并 change，错误消失
       input.value = 'Alice'
@@ -291,12 +294,13 @@ describe('UTableEditor 按列校验', () => {
       await nextTick()
       await nextTick()
       expect(headerText()?.className).not.toContain('is-error')
+      expect(nameCellError()).not.toContain('is-error')
     } finally {
       unmount()
     }
   })
 
-  it('validate 懒校验：某行存在错误即停止校验其后的行', async () => {
+  it('validate 全量校验：某行存在错误仍继续校验其后的行', async () => {
     const { host, getEditor, unmount } = mountTableEditor(
       {},
       [
@@ -312,20 +316,21 @@ describe('UTableEditor 按列校验', () => {
       await expect(getEditor().validate()).resolves.toBe(false)
       await nextTick()
 
-      // 第 2 行 name 校验失败：该列表头标红并出现感叹号图标
+      // 第 2、3 行 name 均校验失败：该列表头标红并出现感叹号图标，失败单元格全部挂 is-error
       const nameHeader = findHeader(host, '姓名')!
       expect(nameHeader.querySelector('.u-table-editor__header-text')?.className).toContain(
         'is-error'
       )
       const icon = nameHeader.querySelector('.u-table-editor__header-icon')!
       expect(icon).toBeTruthy()
+      expect(host.querySelectorAll('td .is-error')).toHaveLength(2)
 
-      // 悬停图标查看气泡：仅含第 2 行明细，第 3 行未校验不出现
+      // 悬停图标查看气泡：包含第 2、3 行明细
       icon.dispatchEvent(new MouseEvent('mouseenter'))
       await nextTick()
       const bubble = document.querySelector('.u-tip__content')
       expect(bubble?.textContent).toContain('第 2 行')
-      expect(bubble?.textContent).not.toContain('第 3 行')
+      expect(bubble?.textContent).toContain('第 3 行')
       // 等弹层异步定位计算完成，避免与卸载竞争产生未处理拒绝
       await new Promise((resolve) => setTimeout(resolve))
     } finally {
@@ -423,14 +428,17 @@ describe('UTableEditor 按列校验', () => {
       await nextTick()
       await expect(getEditor().validate()).resolves.toBe(false)
       await nextTick()
-      // validate 后失败列的表头直接出现错误指示
+      // validate 后失败列的表头直接出现错误指示，失败单元格挂 is-error
       const headerText = () =>
         findHeader(host, '姓名')?.querySelector('.u-table-editor__header-text')
       expect(headerText()?.className).toContain('is-error')
+      expect(host.querySelector('td .is-error')).toBeTruthy()
 
       setModel([{ name: 'Alice', age: 18, city: '杭州' }])
       await nextTick()
       await expect(getEditor().validate()).resolves.toBe(true)
+      await nextTick()
+      expect(host.querySelector('td .is-error')).toBeFalsy()
     } finally {
       unmount()
     }

package/src/components/table-editor/style.scss

@@ -8,23 +8,37 @@ $root-name: table-editor;
 @include m.b($root-name) {
   @include m.bem(table, body) {
     @include m.bem(table, cell) {
-      padding: 2px;
-
-      // 行高锚定常驻输入控件的高度：td 的 height 即行的最小高度
-      // 4px = 单元格上下 padding；1px = u-table 行分隔线（border-bottom，border-box 计入高度）
-      // 注意：主题 token 只有带尺寸后缀的变量（--u-form-component-height-default 等），
-      // 这里锚定 default 尺寸，与单元格内默认尺寸的输入控件对齐
-      height: calc(#{fn.use-var(form-component-height, default)} + 4px + 1px);
-
-      // 单元格内行内级控件（inline-flex 输入框）参与基线对齐
-      // 会在行盒下方留出 descender 空隙，顶对齐抵消，保证行高恰好为锚定值
-      & > [class^='u-'],
-      [class^='u-input'] {
+      padding: 4px;
+
+      // 单元格内行内级控件（inline-flex 输入框）参与基线对齐，
+      // 会在行盒下方留出 descender 空隙，顶对齐抵消
+      [class^='u-'] {
         vertical-align: top;
       }
     }
   }
 
+  // 校验未通过的单元格：与表单项错误态一致，内嵌控件描红边（含 hover）、聚焦光晕转红，纯文本标红
+  .is-error {
+    color: fn.use-var(color, danger);
+
+    #{fn.bem(input)},
+    #{fn.bem(multi-select)},
+    #{fn.bem(multi-tree-select)},
+    #{fn.bem(auto-complete)},
+    #{fn.bem(textarea--more)} {
+      &,
+      &:hover,
+      &.is-focus {
+        border-color: fn.use-var(color, danger);
+      }
+
+      &.is-focus {
+        box-shadow: fn.use-var(focus-ring, danger);
+      }
+    }
+  }
+
   // 操作列按钮容器：fixed right 列由 u-table 独立分层渲染，此处只做按钮排布
   @include m.bem($root-name, operations) {
     display: flex;

package/src/components/table-editor/table-editor.vue

@@ -182,6 +182,8 @@ function setCellError(rowData: Record<string, any>, key: string, message: string
 
   if (!message) {
     if (!rowErrors?.delete(key)) return
+    // 行错误清空后移除条目，保证「size > 0 即存在错误」可作整体判定
+    if (!rowErrors.size) cellErrors.value.delete(row)
   } else {
     if (rowErrors?.get(key) === message) return
     if (rowErrors) rowErrors.set(key, message)
@@ -221,18 +223,19 @@ async function validateCell(
 }
 
 /**
- * 整表校验：自上而下逐行校验，某行存在未通过项即停止校验其后的行（懒校验）。
+ * 整表校验：并行校验所有行的规则列（不懒校验），未通过的单元格全部标出。
  * 全部通过 resolve true，否则 resolve false。
  */
 async function validate() {
   const ruleColumns = columns.value.filter((column) => column.rules)
 
-  for (const row of modelValue.value) {
-    await Promise.all(ruleColumns.map((column) => validateCell(row, column.key, column.rules)))
-    if (cellErrors.value.get(errorRowKey(row))?.size) return false
-  }
+  await Promise.all(
+    modelValue.value.map((row) =>
+      Promise.all(ruleColumns.map((column) => validateCell(row, column.key, column.rules)))
+    )
+  )
 
-  return true
+  return cellErrors.value.size === 0
 }
 
 // 行删除（或整体替换）后，同步清理已不存在的行数据上的错误
@@ -270,14 +273,32 @@ const columnErrors = computed(() => {
 
 // --- 单元格渲染 ---
 
-/** 声明了 `#column:key` 插槽的列调用编辑插槽（注入 model），未声明的渲染字段原始值 */
+/**
+ * 声明了 `#column:key` 插槽的列调用编辑插槽（注入 model），未声明的渲染字段原始值。
+ * 配置了 rules 的列在渲染期间读取 cellErrors 建立依赖，错误出现/消失即时更新：
+ * 插槽内容常驻包一层容器、仅切换 is-error 类（与表单项错误态同类，不增删 DOM，
+ * 控件不因错误态变化重挂丢焦点）；纯文本列仅在出错时包一层标红原始值。
+ */
 function editCell(column: TableEditorColumn, ctx: TableColumnRenderContext): RenderReturn {
   const editSlot = slots[`column:${column.key}`]
   // 内部列 key 带只读态后缀，u-table 按 key 取到的 val 失效，这里按原始列 key 重取
   const val = o(ctx.rowData).get(column.key)
-  if (!editSlot) return val
+
+  if (!column.rules) {
+    if (!editSlot) return val
+    const scope = { ...ctx, val }
+    return editSlot({ ...scope, model: createCellModel(column, scope) })
+  }
+
+  const hasError = !!cellErrors.value.get(errorRowKey(ctx.rowData))?.has(column.key)
+  if (!editSlot) return hasError ? h('span', { class: bem.is('error') }, val) : val
+
   const scope = { ...ctx, val }
-  return editSlot({ ...scope, model: createCellModel(column, scope) })
+  return h(
+    'span',
+    { class: bem.is('error', hasError) },
+    editSlot({ ...scope, model: createCellModel(column, scope) })
+  )
 }
 
 /**

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 }
 }