Merge 6d285a3 into 464bf40

IDuxFE · Sep 28, 2022 · 793cf3f · 793cf3f
2 parents 464bf40 + 6d285a3
commit 793cf3f
Show file tree

Hide file tree

Showing 21 changed files with 191 additions and 122 deletions.
diff --git a/packages/components/tree-select/demo/CascaderStrategy.md b/packages/components/tree-select/demo/CascaderStrategy.md
@@ -0,0 +1,20 @@
+---
+title:
+  zh: 级联策略
+  en: Cascader strategy
+order: 4
+---
+
+## zh
+
+- `all`: 显示选中的所有节点
+- `parent`: 当一个父节点的所有子节点都被选中时，仅显示此父节点
+- `child`: 仅显示选中的叶子节点
+- `off`: 关闭级联，显示选中的所有节点，并且父节点可以被单独选中，这是默认的策略
+
+## en
+
+- `all`: displays all selected nodes.
+- `parent`: only a parent node is displayed when all of its children are selected.
+- `child`: displays only the selected leaf node.
+- `off`:  closes cascading, displays all selected nodes, and the parent node can be selected. This is the default strategy.
diff --git a/...onents/tree-select/demo/CheckStrategy.vue → ...nts/tree-select/demo/CascaderStrategy.vue b/...onents/tree-select/demo/CheckStrategy.vue → ...nts/tree-select/demo/CascaderStrategy.vue
@@ -1,29 +1,27 @@
 <template>
   <IxSpace vertical>
-    checkStrategy：
-    <IxRadioGroup v-model:value="checkStrategy">
-      <IxRadio value="all">all</IxRadio>
-      <IxRadio value="parent">parent</IxRadio>
-      <IxRadio value="child">child</IxRadio>
+    <IxRadioGroup v-model:value="cascaderStrategy">
+      <IxRadio value="all">All</IxRadio>
+      <IxRadio value="parent">Parent</IxRadio>
+      <IxRadio value="child">Child</IxRadio>
+      <IxRadio value="off">Off</IxRadio>
     </IxRadioGroup>
     <IxTreeSelect
       v-model:value="value"
       v-model:expandedKeys="expandedKeys"
-      placeholder="勾选策略"
       cascade
-      checkable
       multiple
+      :cascaderStrategy="cascaderStrategy"
       :dataSource="treeData"
-      :checkStrategy="checkStrategy"
     />
   </IxSpace>
 </template>
 
 <script setup lang="ts">
-import type { TreeCheckStrategy } from '@idux/components/tree'
-
 import { ref } from 'vue'
 
+import { CascaderStrategy } from '@idux/components/cascader'
+
 const treeData = [
   {
     label: 'Node 0',
@@ -57,7 +55,7 @@ const treeData = [
 
 const value = ref(['0-0'])
 const expandedKeys = ref(['0'])
-const checkStrategy = ref<TreeCheckStrategy>('parent')
+const cascaderStrategy = ref<CascaderStrategy>('parent')
 </script>
 <style lang="less" scoped>
 .ix-space {

diff --git a/packages/components/tree-select/demo/CheckStrategy.md b/packages/components/tree-select/demo/CheckStrategy.md
diff --git a/packages/components/tree-select/docs/Api.zh.md b/packages/components/tree-select/docs/Api.zh.md
@@ -13,10 +13,9 @@
 | `v-model:open` | 下拉菜单是否展开 | `boolean` | - | - | - |
 | `autofocus` | 默认获取焦点 | `boolean` | `false` | - | - |
 | `autocomplete` | 设置选择器的 `autocomplete` | `string` | `off` | - | - |
-| `cascade` | 是否开启级联功能 | `boolean` | `false` | - | 仅在 `multiple` 和 `checkable` 为 `true` 时生效 |
+| `cascaderStrategy` | 设置级联策略 | `'all' \| 'parent' \| 'child'` | `'off'` | `'off'` | 仅在 `multiple` 和 `checkable` 为 `true` 时生效, 具体用法参见 [级联策略](#components-tree-select-demo-CascaderStrategy) |
 | `checkable` | 是否显示选择框 | `boolean` | `false` | - | 仅在 `multiple` 为 `true` 时生效 |
 | `childrenKey` | 替代[TreeSelectNode](#TreeSelectNode)中的`children`字段 | `string` | `children` | ✅ | - |
-| `checkStrategy` | 勾选策略 | `'all' \| 'parent' \| 'child'` | `'all'` | - | 设置勾选策略来指定显示的勾选节点，`all` 表示显示全部选中节点；`parent` 表示只显示父节点（当父节点下所有子节点都选中时）；`child` 表示只显示子节点，仅当`cascade`为`true`时，`parent`和`child`才生效 |
 | `clearable` | 是否显示清除图标 | `boolean` | `false` | - | - |
 | `clearIcon` | 设置清除图标 | `string \| #clearIcon` | `'close-circle'` | ✅ | - |
 | `customAdditional` | 自定义下拉菜单的节点的额外属性 | `TreeSelectCustomAdditional` | - | - | 例如 `class`, 或者原生事件 |

diff --git a/packages/components/tree-select/src/TreeSelect.tsx b/packages/components/tree-select/src/TreeSelect.tsx
@@ -9,7 +9,7 @@ import { computed, defineComponent, normalizeClass, provide, ref, watch } from '
 
 import { useAccessorAndControl } from '@idux/cdk/forms'
 import { type VirtualScrollToFn } from '@idux/cdk/scroll'
-import { type VKey, useControlledProp, useState } from '@idux/cdk/utils'
+import { Logger, type VKey, useControlledProp, useState } from '@idux/cdk/utils'
 import { ɵOverlay } from '@idux/components/_private/overlay'
 import { ɵSelector, type ɵSelectorInstance } from '@idux/components/_private/selector'
 import { useGlobalConfig } from '@idux/components/config'
@@ -175,6 +175,14 @@ export default defineComponent({
 
     const renderContent = () => <Content onClick={handleOverlayClick} />
 
+    if (__DEV__) {
+      props.cascade &&
+        Logger.warn(
+          'components/tree',
+          '`cascade` and `checkStrategy` are deprecated, please use `cascaderStrategy` instead.',
+        )
+    }
+
     return () => {
       const overlayProps = {
         class: overlayClasses.value,

diff --git a/packages/components/tree-select/src/content/Content.tsx b/packages/components/tree-select/src/content/Content.tsx
@@ -49,7 +49,12 @@ export default defineComponent({
     const expandAllBtnStatus = ref(false)
 
     const mergedCheckable = computed(() => props.multiple && props.checkable)
-    const mergedCascade = computed(() => mergedCheckable.value && props.cascade)
+    const mergedCascaderStrategy = computed(() => {
+      if (!mergedCheckable.value) {
+        return 'off'
+      }
+      return props.cascade ? props.checkStrategy : props.cascaderStrategy
+    })
 
     const handleScrolledChange = (startIndex: number, endIndex: number, visibleNodes: any[]) => {
       const { onScrolledChange } = props
@@ -132,7 +137,6 @@ export default defineComponent({
 
     return () => {
       const {
-        checkStrategy,
         customAdditional,
         dataSource,
         draggable,
@@ -186,9 +190,8 @@ export default defineComponent({
           loadedKeys={loadedKeys.value}
           labelKey={mergedLabelKey.value}
           checkable={mergedCheckable.value}
-          cascade={mergedCascade.value}
+          cascaderStrategy={mergedCascaderStrategy.value}
           childrenKey={mergedChildrenKey.value}
-          checkStrategy={checkStrategy}
           dataSource={dataSource}
           draggable={draggable}
           draggableIcon={draggableIcon}

diff --git a/packages/components/tree-select/src/types.ts b/packages/components/tree-select/src/types.ts
@@ -11,6 +11,7 @@ import type { AbstractControl } from '@idux/cdk/forms'
 import type { PortalTargetType } from '@idux/cdk/portal'
 import type { VirtualScrollToFn } from '@idux/cdk/scroll'
 import type { ExtractInnerPropTypes, ExtractPublicPropTypes, MaybeArray, VKey } from '@idux/cdk/utils'
+import type { CascaderStrategy } from '@idux/components/cascader'
 import type { EmptyProps } from '@idux/components/empty'
 import type { FormSize } from '@idux/components/form'
 import type {
@@ -33,10 +34,27 @@ export const treeSelectProps = {
   autofocus: { type: Boolean, default: false },
   borderless: { type: Boolean, default: undefined },
   childrenKey: { type: String, default: undefined },
+  cascaderStrategy: { type: String as PropType<CascaderStrategy>, default: 'off' },
+  /**
+   * @deprecated please use `cascaderStrategy` instead'
+   *
+   *  * cascade: false + checkStrategy: 'all' = cascaderStrategy: 'off'
+   *  * cascade: true + checkStrategy: 'all' = cascaderStrategy: 'all'
+   *  * cascade: true + checkStrategy: 'parent' = cascaderStrategy: 'parent'
+   *  * cascade: true + checkStrategy: 'child' = cascaderStrategy: 'child'
+   */
   cascade: { type: Boolean, default: false },
   checkable: { type: Boolean, default: false },
   clearable: { type: Boolean, default: false },
   clearIcon: { type: String, default: undefined },
+  /**
+   * @deprecated please use `cascaderStrategy` instead'
+   *
+   *  * cascade: false + checkStrategy: 'all' = cascaderStrategy: 'off'
+   *  * cascade: true + checkStrategy: 'all' = cascaderStrategy: 'all'
+   *  * cascade: true + checkStrategy: 'parent' = cascaderStrategy: 'parent'
+   *  * cascade: true + checkStrategy: 'child' = cascaderStrategy: 'child'
+   */
   checkStrategy: { type: String as PropType<TreeCheckStrategy>, default: 'all' },
   customAdditional: { type: Function as PropType<TreeSelectCustomAdditional>, default: undefined },
   dataSource: { type: Array as PropType<TreeSelectNode[]>, default: () => [] },

diff --git a/packages/components/tree/demo/Cascade.vue b/packages/components/tree/demo/Cascade.vue
@@ -3,9 +3,8 @@
     v-model:checkedKeys="checkedKeys"
     v-model:expandedKeys="expandedKeys"
     v-model:selectedKeys="selectedKeys"
-    cascade
     checkable
-    checkStrategy="parent"
+    cascaderStrategy="parent"
     :dataSource="treeData"
     @check="onCheck"
     @expand="onExpand"

diff --git a/packages/components/tree/demo/CascaderStrategy.md b/packages/components/tree/demo/CascaderStrategy.md
@@ -0,0 +1,20 @@
+---
+title:
+  zh: 级联策略
+  en: Cascader strategy
+order: 8
+---
+
+## zh
+
+- `all`: 显示选中的所有节点
+- `parent`: 当一个父节点的所有子节点都被选中时，仅显示此父节点
+- `child`: 仅显示选中的叶子节点
+- `off`: 关闭级联，显示选中的所有节点，并且父节点可以被单独选中，这是默认的策略
+
+## en
+
+- `all`: displays all selected nodes.
+- `parent`: only a parent node is displayed when all of its children are selected.
+- `child`: displays only the selected leaf node.
+- `off`:  closes cascading, displays all selected nodes, and the parent node can be selected. This is the default strategy.
diff --git a/...es/components/tree/demo/CheckStrategy.vue → ...components/tree/demo/CascaderStrategy.vue b/...es/components/tree/demo/CheckStrategy.vue → ...components/tree/demo/CascaderStrategy.vue
@@ -1,32 +1,29 @@
 <template>
   <IxSpace vertical>
-    checkStrategy：
-    <IxRadioGroup v-model:value="checkStrategy">
-      <IxRadio value="all">all</IxRadio>
-      <IxRadio value="parent">parent</IxRadio>
-      <IxRadio value="child">child</IxRadio>
+    <IxRadioGroup v-model:value="cascaderStrategy">
+      <IxRadio value="all">All</IxRadio>
+      <IxRadio value="parent">Parent</IxRadio>
+      <IxRadio value="child">Child</IxRadio>
+      <IxRadio value="off">Off</IxRadio>
     </IxRadioGroup>
     <IxTree
       v-model:checkedKeys="checkedKeys"
       v-model:expandedKeys="expandedKeys"
       v-model:selectedKeys="selectedKeys"
       checkable
-      cascade
-      :checkStrategy="checkStrategy"
+      :cascaderStrategy="cascaderStrategy"
       :dataSource="treeData"
       @check="onCheck"
-      @expand="onExpand"
-      @select="onSelect"
     >
     </IxTree>
-    checkedKeys：{{ checkedKeys }}
   </IxSpace>
 </template>
 
 <script setup lang="ts">
-import type { TreeCheckStrategy, TreeNode } from '@idux/components/tree'
+import { ref, watchEffect } from 'vue'
 
-import { ref } from 'vue'
+import { CascaderStrategy } from '@idux/components/cascader'
+import { TreeNode } from '@idux/components/tree'
 
 const treeData: TreeNode[] = [
   {
@@ -79,8 +76,9 @@ const checkedKeys = ref(['0'])
 const expandedKeys = ref(['0', '0-0', '0-1'])
 const selectedKeys = ref(['0-1'])
 
-const checkStrategy = ref<TreeCheckStrategy>('parent')
+const cascaderStrategy = ref<CascaderStrategy>('all')
+
+watchEffect(() => console.log('checkedKeys:', checkedKeys.value))
+
 const onCheck = (checked: boolean, node: TreeNode) => console.log('checked', checked, node)
-const onExpand = (expanded: boolean, node: TreeNode) => console.log('expanded', expanded, node)
-const onSelect = (selected: boolean, node: TreeNode) => console.log('selected', selected, node)
 </script>
diff --git a/packages/components/tree/demo/CheckStrategy.md b/packages/components/tree/demo/CheckStrategy.md
diff --git a/packages/components/tree/demo/Disabled.vue b/packages/components/tree/demo/Disabled.vue
@@ -1,23 +1,17 @@
 <template>
   <IxSpace vertical>
-    checkStrategy：
-    <IxRadioGroup v-model:value="checkStrategy">
-      <IxRadio value="all">all</IxRadio>
-      <IxRadio value="parent">parent</IxRadio>
-      <IxRadio value="child">child</IxRadio>
-    </IxRadioGroup>
-    cascade
-    <IxRadioGroup v-model:value="cascade">
-      <IxRadio :value="true">true</IxRadio>
-      <IxRadio :value="false">false</IxRadio>
+    <IxRadioGroup v-model:value="cascaderStrategy">
+      <IxRadio value="all">All</IxRadio>
+      <IxRadio value="parent">Parent</IxRadio>
+      <IxRadio value="child">Child</IxRadio>
+      <IxRadio value="off">Off</IxRadio>
     </IxRadioGroup>
     <IxTree
       v-model:checkedKeys="checkedKeys"
       v-model:expandedKeys="expandedKeys"
       v-model:selectedKeys="selectedKeys"
       checkable
-      :cascade="cascade"
-      :checkStrategy="checkStrategy"
+      :cascaderStrategy="cascaderStrategy"
       :dataSource="treeData"
       @check="onCheck"
       @expand="onExpand"
@@ -29,10 +23,11 @@
 </template>
 
 <script setup lang="ts">
-import type { TreeCheckStrategy, TreeNode } from '@idux/components/tree'
-
 import { ref } from 'vue'
 
+import { CascaderStrategy } from '@idux/components/cascader'
+import { TreeNode } from '@idux/components/tree'
+
 const treeData: TreeNode[] = [
   {
     label: 'Node 0',
@@ -85,8 +80,7 @@ const checkedKeys = ref(['0'])
 const expandedKeys = ref(['0', '0-0', '0-1'])
 const selectedKeys = ref(['0-1'])
 
-const cascade = ref(true)
-const checkStrategy = ref<TreeCheckStrategy>('parent')
+const cascaderStrategy = ref<CascaderStrategy>('parent')
 const onCheck = (checked: boolean, node: TreeNode) => console.log('checked', checked, node)
 const onExpand = (expanded: boolean, node: TreeNode) => console.log('expanded', expanded, node)
 const onSelect = (selected: boolean, node: TreeNode) => console.log('selected', selected, node)

diff --git a/packages/components/tree/docs/Api.zh.md b/packages/components/tree/docs/Api.zh.md
@@ -12,10 +12,9 @@
 | `v-model:selectedKeys` | 选中节点的 `key` 数组 | `VKey[]` | - | - | - |
 | `autoHeight` | 是否自适应高度 | `boolean` | `false` | ✅ | - |
 | `blocked` | 节点整行撑开 | `boolean` | `false` | ✅ | - |
-| `cascade` | 是否开启级联功能 | `boolean` | `false` | - | - |
+| `cascaderStrategy` | 设置级联策略 | `'all' \| 'parent' \| 'child'` | `'off'` | `off` | 具体用法参见 [级联策略](#components-tree-demo-CascaderStrategy) |
 | `checkable` | 是否显示选择框 | `boolean` | `false` | - | - |
 | `checkOnClick` | 是否允许点击节点进行勾选 | `boolean` | `false` | - | 仅在`checkable`为`true`时生效 |
-| `checkStrategy` | 勾选策略 | `'all' \| 'parent' \| 'child'` | `'all'` | - | 设置勾选策略来指定显示的勾选节点，`all` 表示显示全部选中节点；`parent` 表示只显示父节点（当父节点下所有子节点都选中时）；`child` 表示只显示子节点，仅当`cascade`为`true`时，`parent`和`child`才生效 |
 | `childrenKey` | 替代[TreeNode](#TreeNode)中的`children`字段 | `string` | `children` | ✅ | - |
 | `customAdditional` | 自定义节点的额外属性 | `TreeCustomAdditional` | - | - | 例如 `class`, 或者原生事件 |
 | `dataSource` | 树型数据数组,参见[TreeNode](#TreeNode) | `TreeNode[]` | `[]` | - | - |

diff --git a/packages/components/tree/src/Tree.tsx b/packages/components/tree/src/Tree.tsx
@@ -14,7 +14,7 @@ import { computed, defineComponent, provide, ref } from 'vue'
 import { isNil } from 'lodash-es'
 
 import { CdkVirtualScroll } from '@idux/cdk/scroll'
-import { type VKey, callEmit } from '@idux/cdk/utils'
+import { Logger, type VKey, callEmit } from '@idux/cdk/utils'
 import { ɵEmpty } from '@idux/components/_private/empty'
 import { useGlobalConfig } from '@idux/components/config'
 import { useGetKey } from '@idux/components/utils'
@@ -49,6 +49,11 @@ export default defineComponent({
     const mergedPrefixCls = computed(() => `${common.prefixCls}-tree`)
     const config = useGlobalConfig('tree')
 
+    // TODO: remove
+    const mergedCascaderStrategy = computed(() => {
+      return props.cascade ? props.checkStrategy : props.cascaderStrategy
+    })
+
     const autoHeight = computed(() => props.autoHeight ?? config.autoHeight)
     const mergedChildrenKey = computed(() => props.childrenKey ?? config.childrenKey)
     const mergedGetKey = useGetKey(props, config, 'components/tree')
@@ -68,7 +73,7 @@ export default defineComponent({
       searchedKeys,
     )
     const flattedNodes = useFlattedNodes(mergedNodes, expandableContext, props, searchedKeys)
-    const checkableContext = useCheckable(props, mergedNodeMap)
+    const checkableContext = useCheckable(props, mergedNodeMap, mergedCascaderStrategy)
     const dragDropContext = useDragDrop(props, config, expandableContext)
     const selectableContext = useSelectable(props, mergedNodeMap)
 
@@ -162,6 +167,14 @@ export default defineComponent({
       )
     }
 
+    if (__DEV__) {
+      props.cascade &&
+        Logger.warn(
+          'components/tree',
+          '`cascade` and `checkStrategy` are deprecated, please use `cascaderStrategy` instead.',
+        )
+    }
+
     return () => {
       const nodes = flattedNodes.value