Merge branch 'main' of github.com:TuSimple/naive-ui into main

CHANGELOG.en-US.md

@@ -12,6 +12,8 @@
 - `n-input` add `input-props` prop.
 - `n-message` optimize the error message of `useMessage` when there is no `n-message-provider`, add the related document link.
 - Add `web-types.json` for webstorm, however I recommend using VSCode and Volar. `web-types.json` only provides limited information for coding.
+- `n-tree-select` add `leaf-only` prop.
+- `n-tree` add `leaf-only` prop.
 
 ### Fixes
 

CHANGELOG.zh-CN.md

@@ -12,6 +12,8 @@
 - `n-input` 新增 `input-props` 属性
 - `n-message` 优化 `useMessage` 当没有 `n-message-provider` 时的报错信息，增加关联的文档链接
 - 为 webstorm 添加 `web-types.json`，但是我还是推荐使用 VSCode 和 Volar，`web-types.json` 只能为编码提供很有限的信息
+- `n-tree-select` 新增 `leaf-only` 属性
+- `n-tree` 新增 `leaf-only` 属性
 
 ### Fixes
 

package.json

@@ -80,7 +80,7 @@
     "@vue/eslint-config-standard": "^6.0.0",
     "@vue/eslint-config-typescript": "^7.0.0",
     "@vue/server-renderer": "^3.0.11",
-    "@vue/test-utils": "^2.0.0-rc.4",
+    "@vue/test-utils": "^2.0.0-rc.9",
     "autoprefixer": "^10.2.6",
     "babel-eslint": "^10.1.0",
     "babel-jest": "^27.0.2",

src/collapse/tests/Collapse.spec.tsx

@@ -6,6 +6,7 @@ describe('n-collapse', () => {
   it('should work with import on demand', () => {
     mount(NCollapse)
   })
+
   it('can customize icon', () => {
     const wrapper = mount(() => {
       return (
@@ -19,4 +20,74 @@ describe('n-collapse', () => {
     })
     expect(wrapper.find('.my-icon').exists()).toEqual(true)
   })
+
+  it('should work with `arrow-placement` prop', async () => {
+    const wrapper = mount(NCollapse, {
+      slots: {
+        default: () => <NCollapseItem name="1"></NCollapseItem>
+      }
+    })
+    expect(wrapper.find('.n-collapse-item').classes()).toContain(
+      'n-collapse-item--left-arrow-placement'
+    )
+
+    await wrapper.setProps({ arrowPlacement: 'right' })
+    expect(wrapper.find('.n-collapse-item').classes()).toContain(
+      'n-collapse-item--right-arrow-placement'
+    )
+  })
+
+  it('should work with nested structure', async () => {
+    mount(NCollapse, {
+      slots: {
+        default: () =>
+          h(
+            NCollapseItem,
+            { name: '1', title: 'test1' },
+            {
+              default: () =>
+                h(NCollapse, null, {
+                  default: () => h(NCollapseItem, { name: '2', title: 'test2' })
+                })
+            }
+          )
+      }
+    })
+
+    // todo: test display-directive
+    // I wanted to test this function, but I was bothered by the <transition-stub>
+  })
+
+  it('should work with `display-directive` prop', async () => {
+    mount(NCollapse, {
+      props: {
+        displayDirective: 'show'
+      },
+      slots: {
+        default: () =>
+          h(
+            NCollapseItem,
+            { name: '1', title: 'test' },
+            { default: () => h('div', null, { default: () => 'test' }) }
+          )
+      }
+      // todo: test display-directive
+      // I wanted to test this function, but I was bothered by the <transition-stub>
+    })
+  })
+
+  it('should work with `on-item-header-click` prop', async () => {
+    const onClick = jest.fn()
+    const wrapper = mount(NCollapse, {
+      props: {
+        onItemHeaderClick: onClick
+      },
+      slots: {
+        default: () => <NCollapseItem name="1"></NCollapseItem>
+      }
+    })
+    const triggerNodeWrapper = wrapper.find('.n-collapse-item__header')
+    await triggerNodeWrapper.trigger('click')
+    expect(onClick).toHaveBeenCalled()
+  })
 })

src/input/demos/zhCN/index.demo-entry.md

@@ -25,41 +25,42 @@ count
 
 | 名称 | 类型 | 默认值 | 说明 |
 | --- | --- | --- | --- |
-| autofocus | `boolean` | `false` |  |
+| autofocus | `boolean` | `false` | 自动获取焦点 |
-| autosize | `boolean \| { minRows?: number, maxRows?: number }` | `false` |  |
+| autosize | `boolean \| { minRows?: number, maxRows?: number }` | `false` | 自适应内容高度，只对 type="textarea" 有效，可传入对象，如，{ minRows: 1, maxRows: 3 } |
-| clearable | `boolean` | `false` |  |
+| clearable | `boolean` | `false` | 是否可清空 |
-| default-value | `string \| [string, string] \| null` | `null` |  |
+| default-value | `string \| [string, string] \| null` | `null` | 输入框默认值 |
-| disabled | `boolean` | `false` |  |
+| disabled | `boolean` | `false` | 是否禁用 |
 | input-props | `object` | `undefined` | 组件中 input 元素的属性，对 `pair` 类型不生效 |
 | show-password-toggle | `boolean` | `false` | 控制密码的显示隐藏 |
-| maxlength | `number` | `undefined` |  |
+| maxlength | `number` | `undefined` | 最大输入长度 |
-| minlength | `number` | `undefined` |  |
+| minlength | `number` | `undefined` | 最小输入长度 |
 | pair | `boolean` | `false` | 是否输入成对的值 |
-| passively-activated | `boolean` | `false` |  |
+| passively-activated | `boolean` | `false` | 是否被动激活输入框 |
 | placeholder | `string \| [string, string]` | `undefined` | 文本输入的占位符。如果是 `pair` 是 `true`，`placeholder`是一个数组 |
-| readonly | `boolean` | `false` |  |
+| readonly | `boolean` | `false` | 是否只读 |
-| round | `boolean` | `false` |  |
+| round | `boolean` | `false` | 输入框是否圆角 |
-| rows | `number` | `3` |  |
+| rows | `number` | `3` | 输入框行数，对 type="textarea" 有效 |
-| separator | `string` | `undefined` | 成对的值中间的分隔符 |
+| separator | `string` | `undefined` | 成对输入框中间的分隔符 |
 | show-count | `boolean` | `false` | 是否显示字数统计 |
-| size | `'small' \| 'medium' \| 'large'` | `'medium'` |  |
+| size | `'small' \| 'medium' \| 'large'` | `'medium'` | 输入框尺寸 |
-| type | `'text' \| 'password' \| 'textarea'` | `'text'` |  |
+| type | `'text' \| 'password' \| 'textarea'` | `'text'` | 输入框类型 |
 | value | `string \| [string, string] \| null` | `undefined` | 文本输入的值。如果是 `pair` 是 `true`，`value` 是一个数组 |
-| on-blur | `() => void` | `undefined` |  |
+| on-blur | `() => void` | `undefined` | 输入框失去焦点时触发 |
-| on-change | `(value: string \| [string, string]) => void` | `undefined` |  |
+| on-change | `(value: string \| [string, string]) => void` | `undefined` | 输入框失去焦点且值 change 时触发 |
-| on-clear | `() => void` | `undefined` |  |
+| on-clear | `() => void` | `undefined` | 输入框点击清空按钮时触发 |
-| on-focus | `() => void` | `undefined` |  |
+| on-focus | `() => void` | `undefined` | 输入框获得焦点时触发 |
-| on-update:value | `(value: string \| [string, string]) => void` | `undefined` |  |
+| on-input | `() => void` | `undefined` | 输入框值 change 时触发 |
+| on-update:value | `(value: string \| [string, string]) => void` | `undefined` | 输入框值 change 时触发 |
 
 ## Slots
 
 ### Input Slots
 
-| 属性      | 类型 | 说明 |
+| 属性 | 类型 | 说明 |
-| --------- | ---- | ---- |
+| --- | --- | --- |
-| prefix    | `()` |      |
+| prefix | `()` | 输入框头部内容 |
-| suffix    | `()` |      |
+| suffix | `()` | 输入框尾部内容 |
-| separator | `()` |      |
+| separator | `()` | 成对输入框之间分隔符，仅 `pair` = true 生效且优先级高于 separator 属性 |
 
 ### Input Group Slots
 

src/tree-select/demos/zhCN/index.demo-entry.md

@@ -29,6 +29,7 @@ debug
 | expanded-keys | `Array<string \| number>` | `undefined` | 展开节点的 key |
 | filterable | `boolean` | `false` | 是否可过滤 |
 | filter | `(pattern: string, option: TreeSelectOption) => boolean` | - | 过滤器函数 |
+| leaf-only | `boolean` | `false` | 是否开启仅末层树节点可选 |
 | max-tag-count | `number \| 'responsive'` | `undefined` | 多选时最多直接显示多少选项，设为 `'responsive'` 会保证最多一行 |
 | multiple | `boolean` | `false` | 是否支持多选 |
 | options | `TreeSelectOption[]` | `[]` | 选项 |

src/tree-select/src/TreeSelect.tsx

@@ -73,6 +73,7 @@ const props = {
   },
   disabled: Boolean,
   filterable: Boolean,
+  leafOnly: Boolean,
   maxTagCount: [String, Number] as PropType<number | 'responsive'>,
   multiple: Boolean,
   options: {
@@ -661,6 +662,7 @@ export default defineComponent({
                                   selectedKeys={this.treeSelectedKeys}
                                   checkable={checkable}
                                   cascade={this.mergedCascade}
+                                  leafOnly={this.leafOnly}
                                   multiple={this.multiple}
                                   virtualScroll={
                                     this.consistentMenuWidth &&

src/tree/demos/zhCN/index.demo-entry.md

@@ -39,6 +39,7 @@ disabled
 | expand-on-dragenter | `boolean` | `true` | 是否在拖入后展开节点 |
 | expanded-keys | `Array<string \| number>` | `undefined` | 如果设定则展开受控 |
 | filter | `(node: TreeOption) => boolean` | 一个简单的字符串过滤算法 |  |
+| leaf-only | `boolean` | `false` | 是否开启仅末层树节点可选 |
 | multiple | `boolean` | `false` |  |
 | on-load | `(node: TreeOption) => Promise<void>` | `undefined` |  |
 | pattern | `string` | `''` |  |

src/tree/src/Tree.tsx

@@ -107,6 +107,7 @@ const treeProps = {
     default: () => []
   },
   remote: Boolean,
+  leafOnly: Boolean,
   multiple: Boolean,
   pattern: {
     type: String,
@@ -494,7 +495,7 @@ export default defineComponent({
       nodeKeyToBeExpanded = null
     }
     function handleCheck (node: TmNode, checked: boolean): void {
-      if (props.disabled || node.disabled) return
+      if (props.disabled || node.disabled || (props.leafOnly && !node.isLeaf)) { return }
       const { checkedKeys } = dataTreeMateRef.value![
         checked ? 'check' : 'uncheck'
       ](node.key, displayedCheckedKeysRef.value, {
@@ -521,7 +522,12 @@ export default defineComponent({
       toggleExpand(node.key)
     }
     function handleSelect (node: TmNode): void {
-      if (props.disabled || node.disabled || !props.selectable) return
+      if (
+        props.disabled ||
+        node.disabled ||
+        !props.selectable ||
+        (props.leafOnly && !node.isLeaf)
+      ) { return }
       pendingNodeKeyRef.value = node.key
       if (props.internalCheckOnSelect) {
         const {
@@ -941,10 +947,12 @@ export default defineComponent({
       mergedExpandedKeysRef,
       mergedThemeRef: themeRef,
       disabledRef: toRef(props, 'disabled'),
+      checkableRef: toRef(props, 'checkable'),
+      leafOnlyRef: toRef(props, 'leafOnly'),
+      selectableRef: toRef(props, 'selectable'),
       remoteRef: toRef(props, 'remote'),
       onLoadRef: toRef(props, 'onLoad'),
       draggableRef: toRef(props, 'draggable'),
-      checkableRef: toRef(props, 'checkable'),
       blockLineRef: toRef(props, 'blockLine'),
       indentRef: toRef(props, 'indent'),
       droppingMouseNodeRef,
@@ -970,6 +978,7 @@ export default defineComponent({
       handleKeydown,
       handleKeyup
     }
+
     return {
       mergedClsPrefix: mergedClsPrefixRef,
       mergedTheme: themeRef,
@@ -1024,7 +1033,6 @@ export default defineComponent({
       blockNode,
       blockLine,
       draggable,
-      selectable,
       disabled,
       internalFocusable,
       handleKeyup,
@@ -1036,11 +1044,10 @@ export default defineComponent({
     const treeClass = [
       `${mergedClsPrefix}-tree`,
       (blockLine || blockNode) && `${mergedClsPrefix}-tree--block-node`,
-      blockLine && `${mergedClsPrefix}-tree--block-line`,
+      blockLine && `${mergedClsPrefix}-tree--block-line`
-      selectable && `${mergedClsPrefix}-tree--selectable`
     ]
-    const createNode = (tmNode: TmNode | MotionData): VNode =>
+    const createNode = (tmNode: TmNode | MotionData): VNode => {
-      '__motion' in tmNode ? (
+      return '__motion' in tmNode ? (
         <MotionWrapper
           height={tmNode.height}
           nodes={tmNode.nodes}
@@ -1055,6 +1062,8 @@ export default defineComponent({
           clsPrefix={mergedClsPrefix}
         />
       )
+    }
+
     if (this.virtualScroll) {
       const { mergedTheme, internalScrollablePadding } = this
       const padding = getPadding(internalScrollablePadding || '0')

src/tree/src/TreeNode.tsx

@@ -46,6 +46,7 @@ const TreeNode = defineComponent({
     const contentInstRef = ref<null | ComponentPublicInstance>(null)
     // must be non-reactive
     const contentElRef: { value: HTMLElement | null } = { value: null }
+
     onMounted(() => {
       contentElRef.value = contentInstRef.value!.$el as HTMLElement
     })
@@ -177,9 +178,18 @@ const TreeNode = defineComponent({
       disabled: computed(
         () => NTree.disabledRef.value || props.tmNode.disabled
       ),
+      checkable: computed(
+        () =>
+          NTree.checkableRef.value &&
+          (NTree.leafOnlyRef.value ? props.tmNode.isLeaf : true)
+      ),
       checkboxDisabled: computed(() => !!props.tmNode.rawNode.checkboxDisabled),
+      selectable: computed(
+        () =>
+          NTree.selectableRef.value &&
+          (NTree.leafOnlyRef.value ? !!props.tmNode.isLeaf : true)
+      ),
       internalScrollable: NTree.internalScrollableRef,
-      checkable: NTree.checkableRef,
       draggable: NTree.draggableRef,
       blockLine: NTree.blockLineRef,
       checkboxFocusable: NTree.internalCheckboxFocusableRef,
@@ -204,6 +214,7 @@ const TreeNode = defineComponent({
       tmNode,
       clsPrefix,
       checkable,
+      selectable,
       selected,
       highlight,
       draggable,
@@ -239,7 +250,8 @@ const TreeNode = defineComponent({
               [`${clsPrefix}-tree-node--checkable`]: checkable,
               [`${clsPrefix}-tree-node--highlight`]: highlight,
               [`${clsPrefix}-tree-node--pending`]: pending,
-              [`${clsPrefix}-tree-node--disabled`]: disabled
+              [`${clsPrefix}-tree-node--disabled`]: disabled,
+              [`${clsPrefix}-tree-node--selectable`]: selectable
             }
           ]}
           data-key={dataKey}

src/tree/src/interface.ts

@@ -60,7 +60,6 @@ export interface TreeInjection {
   fNodesRef: Ref<Array<TreeNode<TreeOption>>>
   remoteRef: Ref<boolean>
   draggableRef: Ref<boolean>
-  checkableRef: Ref<boolean>
   mergedThemeRef: Ref<MergedTheme<TreeTheme>>
   onLoadRef: Ref<((node: TreeOption) => Promise<void>) | undefined>
   blockLineRef: Ref<boolean>
@@ -71,6 +70,9 @@ export interface TreeInjection {
   droppingPositionRef: Ref<null | DropPosition>
   droppingOffsetLevelRef: Ref<number>
   disabledRef: Ref<boolean>
+  checkableRef: Ref<boolean>
+  leafOnlyRef: Ref<boolean>
+  selectableRef: Ref<boolean>
   pendingNodeKeyRef: Ref<null | Key>
   internalScrollableRef: Ref<boolean>
   internalCheckboxFocusableRef: Ref<boolean>

src/tree/src/styles/index.cssr.ts

@@ -74,18 +74,9 @@ export default cB('tree', `
         color: var(--node-text-color-disabled);
         cursor: not-allowed;
       `)
-    ])
-  ]),
-  cM('selectable', [
-    cM('block-line', [
-      cB('tree-node', [
-        cNotM('disabled', `
-          cursor: pointer;
-        `)
-      ])
     ]),
-    cB('tree-node', [
+    cNotM('disabled', [
-      cNotM('disabled', [
+      cM('selectable', [
         cB('tree-node-content', `
           cursor: pointer;
         `)
@@ -188,6 +179,7 @@ export default cB('tree', `
     align-items: center;
     vertical-align: bottom;
     padding: 0 6px;
+    cursor: default;
     border-radius: var(--node-border-radius);
     text-decoration-color: #0000;
     text-decoration-line: underline;