Merge pull request #4 from wsfe/2.x

ChuChencheng · web-flow · commit 20023ec68c14 · 2020-04-15T18:28:26.000+08:00
Merge v2.3.0
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -5,6 +5,22 @@ and this project adheres to [Semantic Versioning](https://semver.org/lang/zh-CN/
 
 ## [Unreleased]
 
+## [2.3.0] - 2020-04-15
+
+### Added
+
+- `CTreeDrop` 默认与 display slot 新增 Slot Props
+
+### Changed
+
+### Deprecated
+
+### Removed
+
+### Fixed
+
+### Security
+
 ## [2.2.6] - 2019-12-12
 
 ### Added
diff --git a/README.md b/README.md
@@ -244,3 +244,24 @@ npm install @wsfe/ctree
 | 默认    | 展示输入框                                           |
 | display | 展示输入框的展示文字，如果有默认 slot 则此 slot 无效 |
 | clear   | 替换清空图标，如果有默认 slot 则此 slot 无效         |
+
+默认 slot 与 display slot 的 Slot Props `2.3.0` ：
+
+```typescript
+/** 展示 slot 的 props */
+slotProps: {
+  /** 多选选中的节点 */
+  checkedNodes: [] as TreeNode[],
+
+  /** 多选选中的节点 key */
+  checkedKeys: [] as Array<string | number>,
+
+  /** 单选选中的节点 */
+  selectedNode: null as TreeNode | null,
+
+  /** 单选选中的节点 key */
+  selectedKey: null as string | number | null,
+},
+```
+
+**注意**： `checkedNodes` 与 `selectedNode` 只包含已加载的节点，如果设置了选中的值（比如设置了 `value` Prop），但没有设置树的数据，则这两个字段内容将为空；而 `checkedKeys` 与 `selectedKey` 则会包含未加载的选中节点 key 。
diff --git a/docs/index.html b/docs/index.html
@@ -1 +1 @@
-<!DOCTYPE html><html lang=en><head><meta charset=utf-8><meta http-equiv=X-UA-Compatible content="IE=edge"><meta name=viewport content="width=device-width,initial-scale=1"><link rel=icon href=/ctree/favicon.ico><title>ctree</title><link href=/ctree/css/main.4a7507e0.css rel=preload as=style><link href=/ctree/js/chunk-vendors.858205c1.js rel=preload as=script><link href=/ctree/js/main.647a3555.js rel=preload as=script><link href=/ctree/css/main.4a7507e0.css rel=stylesheet></head><body><noscript><strong>We're sorry but ctree doesn't work properly without JavaScript enabled. Please enable it to continue.</strong></noscript><div id=app></div><script src=/ctree/js/chunk-vendors.858205c1.js></script><script src=/ctree/js/main.647a3555.js></script></body></html>
+<!DOCTYPE html><html lang=en><head><meta charset=utf-8><meta http-equiv=X-UA-Compatible content="IE=edge"><meta name=viewport content="width=device-width,initial-scale=1"><link rel=icon href=/ctree/favicon.ico><title>ctree</title><link href=/ctree/css/main.4a7507e0.css rel=preload as=style><link href=/ctree/js/chunk-vendors.858205c1.js rel=preload as=script><link href=/ctree/js/main.a980790b.js rel=preload as=script><link href=/ctree/css/main.4a7507e0.css rel=stylesheet></head><body><noscript><strong>We're sorry but ctree doesn't work properly without JavaScript enabled. Please enable it to continue.</strong></noscript><div id=app></div><script src=/ctree/js/chunk-vendors.858205c1.js></script><script src=/ctree/js/main.a980790b.js></script></body></html>
diff --git a/docs/js/main.a980790b.js b/docs/js/main.a980790b.js
diff --git a/examples/Drop.vue b/examples/Drop.vue
@@ -1,19 +1,44 @@
 <template>
-  <div style="width: 200px;">
-    <CTreeDrop
-      v-model="value"
-      :data="data"
-      checkable
-      clearable
-      drop-placeholder="请选择"
-      :placement="placement"
-      :dropdown-min-width="300"
-      dropdown-width-fixed
-      @checked-change="handleCheckedChange"
-    >
-      <span slot="empty">slot 传进来的暂无数据</span>
-    </CTreeDrop>
-    {{ value }}
+  <div>
+    <div style="width: 200px;">
+      <p>自定义展示 slot ：</p>
+      <CTreeDrop
+        v-model="value"
+        :data="data"
+        checkable
+        clearable
+        drop-placeholder="请选择"
+        :placement="placement"
+        :dropdown-min-width="300"
+        dropdown-width-fixed
+        @checked-change="handleCheckedChange"
+      >
+        <template v-slot:display="scope">
+          <div
+            style="width: 170px; text-overflow: ellipsis; overflow: hidden;"
+          >{{ scope.checkedNodes.map((node) => node.title).join(',') }}</div>
+        </template>
+        <span slot="empty">slot 传进来的暂无数据</span>
+      </CTreeDrop>
+      {{ value }}
+    </div>
+    <div style="width: 200px;">
+      <p>默认：</p>
+      <CTreeDrop
+        v-model="value"
+        :data="data"
+        checkable
+        clearable
+        drop-placeholder="请选择"
+        :placement="placement"
+        :dropdown-min-width="300"
+        dropdown-width-fixed
+        @checked-change="handleCheckedChange"
+      >
+        <span slot="empty">slot 传进来的暂无数据</span>
+      </CTreeDrop>
+      {{ value }}
+    </div>
   </div>
 </template>
 
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@wsfe/ctree",
-  "version": "2.2.6",
+  "version": "2.3.0",
   "main": "./dist/ctree.umd.min.js",
   "types": "./types",
   "description": "A vue tree component using virtual list.",
diff --git a/src/components/TreeDrop.vue b/src/components/TreeDrop.vue
@@ -6,10 +6,13 @@
       :class="referenceCls"
       @click="handleRefClick"
     >
-      <slot>
+      <slot v-bind="slotProps">
         <div :class="displayInputCls">
           <span :class="displayInputTextCls">
-            <slot name="display">
+            <slot
+              name="display"
+               v-bind="slotProps"
+            >
               {{ displayValue }}
             </slot>
           </span>
@@ -178,6 +181,21 @@ export default (Vue as VueConstructor<Vue & {
 
       /** 单选选中节点名称 */
       selectedTitle: ('' as TreeNodeKeyType),
+
+      /** 展示 slot 的 props */
+      slotProps: {
+        /** 多选选中的节点 */
+        checkedNodes: [] as TreeNode[],
+
+        /** 多选选中的节点 key */
+        checkedKeys: [] as TreeNodeKeyType[],
+
+        /** 单选选中的节点 */
+        selectedNode: null as TreeNode | null,
+
+        /** 单选选中的节点 key */
+        selectedKey: null as TreeNodeKeyType | null,
+      },
     }
   },
   computed: {
@@ -364,9 +382,14 @@ export default (Vue as VueConstructor<Vue & {
       }
     },
     handleCheckedChange (nodes: TreeNode[], keys: TreeNodeKeyType[]): void {
+      this.slotProps.checkedNodes = nodes
+      this.slotProps.checkedKeys = keys
       this.checkedCount = keys.length
     },
     handleSelectedChange (node: TreeNode | null, key: TreeNodeKeyType | null): void {
+      this.slotProps.selectedNode = node
+      this.slotProps.selectedKey = key
+
       if (node) {
         const titleField = this.$refs.treeSearch.$refs.tree.titleField
         this.selectedTitle = node[titleField]
@@ -380,8 +403,13 @@ export default (Vue as VueConstructor<Vue & {
 
     /** 处理树数据更新 */
     handleSetData (): void {
+      this.slotProps.checkedNodes = this.getCheckedNodes()
+      this.slotProps.checkedKeys = this.getCheckedKeys()
+      this.slotProps.selectedNode = this.getSelectedNode()
+      this.slotProps.selectedKey = this.getSelectedKey()
+
       if (this.checkable) {
-        this.checkedCount = this.getCheckedKeys().length
+        this.checkedCount = this.slotProps.checkedKeys.length
       }
       if (this.selectable) {
         if (this.value != null) {
diff --git a/types/src/components/TreeDrop.vue.d.ts b/types/src/components/TreeDrop.vue.d.ts
@@ -9,11 +9,12 @@ declare const _default: import("vue/types/vue").ExtendedVue<Vue & {
             checkAllStatus: {
                 checked: boolean;
                 indeterminate: boolean; /** 多选选中节点个数 */
-                disabled: boolean; /** 单选选中节点名称 */
+                disabled: boolean;
             };
             isShowingChecked: boolean;
+            /** 展示 slot 的 props */
             keyword: string;
-            debounceTimer: number | undefined;
+            debounceTimer: number | undefined; /** 多选选中的节点 key */
             checkedCount: number;
         } & {
             clearKeyword(): void;
@@ -220,6 +221,17 @@ declare const _default: import("vue/types/vue").ExtendedVue<Vue & {
     checkedCount: number;
     /** 单选选中节点名称 */
     selectedTitle: TreeNodeKeyType;
+    /** 展示 slot 的 props */
+    slotProps: {
+        /** 多选选中的节点 */
+        checkedNodes: TreeNode[];
+        /** 多选选中的节点 key */
+        checkedKeys: TreeNodeKeyType[];
+        /** 单选选中的节点 */
+        selectedNode: TreeNode | null;
+        /** 单选选中的节点 key */
+        selectedKey: string | number | null;
+    };
 }, {
     /** 定位下拉框 */
     locateDropdown(): void;

Original file line number	Diff line number	Diff line change
`@@ -1 +1 @@`
`1`		-<!DOCTYPE html><html lang=en><head><meta charset=utf-8><meta http-equiv=X-UA-Compatible content="IE=edge"><meta name=viewport content="width=device-width,initial-scale=1"><link rel=icon href=/ctree/favicon.ico><title>ctree</title><link href=/ctree/css/main.4a7507e0.css rel=preload as=style><link href=/ctree/js/chunk-vendors.858205c1.js rel=preload as=script><link href=/ctree/js/main.647a3555.js rel=preload as=script><link href=/ctree/css/main.4a7507e0.css rel=stylesheet></head><body><noscript><strong>We're sorry but ctree doesn't work properly without JavaScript enabled. Please enable it to continue.</strong></noscript><div id=app></div><script src=/ctree/js/chunk-vendors.858205c1.js></script><script src=/ctree/js/main.647a3555.js></script></body></html>
	`1`	+<!DOCTYPE html><html lang=en><head><meta charset=utf-8><meta http-equiv=X-UA-Compatible content="IE=edge"><meta name=viewport content="width=device-width,initial-scale=1"><link rel=icon href=/ctree/favicon.ico><title>ctree</title><link href=/ctree/css/main.4a7507e0.css rel=preload as=style><link href=/ctree/js/chunk-vendors.858205c1.js rel=preload as=script><link href=/ctree/js/main.a980790b.js rel=preload as=script><link href=/ctree/css/main.4a7507e0.css rel=stylesheet></head><body><noscript><strong>We're sorry but ctree doesn't work properly without JavaScript enabled. Please enable it to continue.</strong></noscript><div id=app></div><script src=/ctree/js/chunk-vendors.858205c1.js></script><script src=/ctree/js/main.a980790b.js></script></body></html>
Original file line number	Diff line number	Diff line change
`@@ -1,6 +1,6 @@`
`1`	`1`	`{`
`2`	`2`	`"name": "@wsfe/ctree",`
`3`		`- "version": "2.2.6",`
	`3`	`+ "version": "2.3.0",`
`4`	`4`	`"main": "./dist/ctree.umd.min.js",`
`5`	`5`	`"types": "./types",`
`6`	`6`	`"description": "A vue tree component using virtual list.",`