From bdaae8108eff94061752f0a8a414c2dc3ed29310 Mon Sep 17 00:00:00 2001
From: Simona <36978416+SimonaliaChen@users.noreply.github.com>
Date: Wed, 29 May 2019 15:04:06 +0800
Subject: [PATCH] Cascader: refactor and add multiple mode. (#15611)
---
components.json | 3 +-
examples/docs/en-US/cascader.md | 1600 ++++++++++------
examples/docs/es/cascader.md | 1670 +++++++++++------
examples/docs/fr-FR/cascader.md | 1668 ++++++++++------
examples/docs/zh-CN/cascader.md | 1101 ++++++++---
packages/cascader-panel/index.js | 8 +
packages/cascader-panel/src/cascader-menu.vue | 138 ++
packages/cascader-panel/src/cascader-node.vue | 246 +++
.../cascader-panel/src/cascader-panel.vue | 354 ++++
packages/cascader-panel/src/node.js | 166 ++
packages/cascader-panel/src/store.js | 63 +
packages/cascader/index.js | 2 +-
packages/cascader/src/cascader.vue | 639 +++++++
packages/cascader/src/main.vue | 452 -----
packages/cascader/src/menu.vue | 375 ----
packages/theme-chalk/src/cascader-panel.scss | 124 ++
packages/theme-chalk/src/cascader.scss | 255 ++-
packages/theme-chalk/src/common/var.scss | 21 +-
packages/theme-chalk/src/index.scss | 2 +
packages/theme-chalk/src/infiniteScroll.scss | 0
src/index.js | 5 +-
src/locale/lang/af-ZA.js | 3 +-
src/locale/lang/ar.js | 3 +-
src/locale/lang/bg.js | 3 +-
src/locale/lang/ca.js | 3 +-
src/locale/lang/cs-CZ.js | 3 +-
src/locale/lang/da.js | 3 +-
src/locale/lang/de.js | 3 +-
src/locale/lang/ee.js | 3 +-
src/locale/lang/el.js | 3 +-
src/locale/lang/en.js | 3 +-
src/locale/lang/es.js | 3 +-
src/locale/lang/eu.js | 3 +-
src/locale/lang/fa.js | 3 +-
src/locale/lang/fi.js | 3 +-
src/locale/lang/fr.js | 3 +-
src/locale/lang/he.js | 3 +-
src/locale/lang/hr.js | 3 +-
src/locale/lang/hu.js | 3 +-
src/locale/lang/hy-AM.js | 3 +-
src/locale/lang/id.js | 3 +-
src/locale/lang/it.js | 3 +-
src/locale/lang/ja.js | 3 +-
src/locale/lang/kg.js | 3 +-
src/locale/lang/km.js | 3 +-
src/locale/lang/ko.js | 3 +-
src/locale/lang/ku.js | 3 +-
src/locale/lang/kz.js | 3 +-
src/locale/lang/lt.js | 3 +-
src/locale/lang/lv.js | 3 +-
src/locale/lang/mn.js | 3 +-
src/locale/lang/nb-NO.js | 3 +-
src/locale/lang/nl.js | 3 +-
src/locale/lang/pl.js | 3 +-
src/locale/lang/pt-br.js | 3 +-
src/locale/lang/pt.js | 3 +-
src/locale/lang/ro.js | 3 +-
src/locale/lang/ru-RU.js | 3 +-
src/locale/lang/sk.js | 3 +-
src/locale/lang/sl.js | 3 +-
src/locale/lang/sr.js | 3 +-
src/locale/lang/sv-SE.js | 3 +-
src/locale/lang/ta.js | 3 +-
src/locale/lang/th.js | 3 +-
src/locale/lang/tk.js | 3 +-
src/locale/lang/tr-TR.js | 3 +-
src/locale/lang/ua.js | 3 +-
src/locale/lang/ug-CN.js | 3 +-
src/locale/lang/vi.js | 3 +-
src/locale/lang/zh-CN.js | 3 +-
src/locale/lang/zh-TW.js | 3 +-
src/utils/aria-utils.js | 3 +-
src/utils/util.js | 73 +
test/unit/specs/cascader-panel.spec.js | 536 ++++++
test/unit/specs/cascader.spec.js | 1046 +++--------
types/cascader-panel.d.ts | 72 +
types/cascader.d.ts | 54 +-
77 files changed, 7116 insertions(+), 3710 deletions(-)
create mode 100644 packages/cascader-panel/index.js
create mode 100644 packages/cascader-panel/src/cascader-menu.vue
create mode 100644 packages/cascader-panel/src/cascader-node.vue
create mode 100644 packages/cascader-panel/src/cascader-panel.vue
create mode 100644 packages/cascader-panel/src/node.js
create mode 100644 packages/cascader-panel/src/store.js
create mode 100644 packages/cascader/src/cascader.vue
delete mode 100644 packages/cascader/src/main.vue
delete mode 100644 packages/cascader/src/menu.vue
create mode 100644 packages/theme-chalk/src/cascader-panel.scss
create mode 100644 packages/theme-chalk/src/infiniteScroll.scss
create mode 100644 test/unit/specs/cascader-panel.spec.js
create mode 100644 types/cascader-panel.d.ts
diff --git a/components.json b/components.json
index 07d33a97e..191b7bdc6 100644
--- a/components.json
+++ b/components.json
@@ -76,5 +76,6 @@
"calendar": "./packages/calendar/index.js",
"backtop": "./packages/backtop/index.js",
"infiniteScroll": "./packages/infiniteScroll/index.js",
- "page-header": "./packages/page-header/index.js"
+ "page-header": "./packages/page-header/index.js",
+ "cascader-panel": "./packages/cascader-panel/index.js"
}
diff --git a/examples/docs/en-US/cascader.md b/examples/docs/en-US/cascader.md
index dd0590c88..5374df8f1 100644
--- a/examples/docs/en-US/cascader.md
+++ b/examples/docs/en-US/cascader.md
@@ -6,30 +6,29 @@ If the options have a clear hierarchical structure, Cascader can be used to view
There are two ways to expand child option items.
-:::demo Assigning the `options` attribute to an array of options renders a Cascader. The `expand-trigger` attribute defines how child options are expanded. This example also demonstrates the `change` event, whose parameter is the value of Cascader, an array made up of the values of each selected level.
+:::demo Assigning the `options` attribute to an array of options renders a Cascader. The `props.expandTrigger` attribute defines how child options are expanded.
```html
Child options expand when clicked (default)
-
+ @change="handleChange">
Child options expand when hovered
-
+ :props="{ expandTrigger: 'hover' }"
+ @change="handleChange">
+```
+:::
+
### Display only the last level
The input can display only the last level instead of all levels.
:::demo The `show-all-levels` attribute defines if all levels are displayed. If it is `false`, only the last level is displayed.
```html
-
+ Display all tags (default)
+
+
+ Collapse tags
+
+
+
+```
+:::
+
+
+### Select any level of options
+
+In single selection, only the leaf nodes can be checked, and in multiple selection, check parent nodes will lead to leaf nodes be checked eventually. When enable this feature, it can make parent and child nodes unlinked and you can select any level of options.
+
+:::demo Set `props.checkStrictly = true` to make checked state of a node not affects its parent nodes and child nodes, and then you can select any level of options.
+```html
+
+ Select any level of options (Single selection)
+
+
+ Select any level of options (Multiple selection)
+
+
-```
-:::
-
-### Change on select
-
-Parent options can also be selected.
-
-:::demo By default only the options in the last level can be selected. By assigning `change-on-select` to `true`, options in parent levels can also be selected.
-```html
-
- Only options of the last level can be selected
+ Filterable (Single selection)
- Options of all levels can be selected
+ Filterable (Multiple selection)
+```
+:::
+
+### Cascader panel
+
+`CascaderPanel` is the core component of `Cascader` which has various of features such as single selection, multiple selection, dynamic loading and so on.
+
+:::demo Just like `el-cascader`, you can set alternative options by `options`, and enable other features by `props`, see the API form below for details.
+```html
+
Child options expand when clicked (default)
-
+ @change="handleChange">
Child options expand when hovered
-
+ :props="{ expandTrigger: 'hover' }"
+ @change="handleChange">
-```
-:::
-
-### Con valor por defecto
-
-:::demo El valor por defecto se puede definir con un array.
-```html
-
- Only options of the last level can be selected
+ Display all tags (default)
- Options of all levels can be selected
+ Collapse tags
+
+
+```
+:::
+
+
+### Select any level of options
+
+In single selection, only the leaf nodes can be checked, and in multiple selection, check parent nodes will lead to leaf nodes be checked eventually. When enable this feature, it can make parent and child nodes unlinked and you can select any level of options.
+
+:::demo Set `props.checkStrictly = true` to make checked state of a node not affects its parent nodes and child nodes, and then you can select any level of options.
+```html
+
+ Select any level of options (Single selection)
+
+
+ Select any level of options (Multiple selection)
+
+```
+:::
+
+### Filterable
+
+Search and select options with a keyword.
+
+:::demo Adding `filterable` to `el-cascader` enables filtering. Cascader will match nodes whose label or parent's label (according to `show-all-levels`) includes input keyword. Of course, you can customize search logic by `filter-method` which accepts a function, the first parameter is `node`, the second is `keyword`, and need return a boolean value indicating whether it hits.
+```html
+
+ Filterable (Single selection)
+
+
+ Filterable (Multiple selection)
+
+
+
+```
+:::
+
+### Custom option content
+
+You can customize the content of cascader node.
+
+:::demo You can customize the content of cascader node by `scoped slot`. You'll have access to `node` and `data` in the scope, standing for the Node object and node data of the current node respectively。
+```html
+
+
+ {{ data.label }}
+ ({{ data.children.length }})
+
+
+
+
+```
+:::
+
+### Cascader panel
+
+`CascaderPanel` is the core component of `Cascader` which has various of features such as single selection, multiple selection, dynamic loading and so on.
+
+:::demo Just like `el-cascader`, you can set alternative options by `options`, and enable other features by `props`, see the API form below for details.
+```html
+
- Les options se déroulent après un clic (défaut)
+ Child options expand when clicked (default)
-
+ @change="handleChange">
- Les options se déroulent au passage de la souris
+ Child options expand when hovered
-
+ :props="{ expandTrigger: 'hover' }"
+ @change="handleChange">
-```
-:::
-
-### Valeur par défaut
-
-:::demo La valeur par défaut peut être définit grâce à un tableau.
-```html
-
- Only options of the last level can be selected
+ Display all tags (default)
- Options of all levels can be selected
+ Collapse tags
+
+
+```
+:::
+
+
+### Select any level of options
+
+In single selection, only the leaf nodes can be checked, and in multiple selection, check parent nodes will lead to leaf nodes be checked eventually. When enable this feature, it can make parent and child nodes unlinked and you can select any level of options.
+
+:::demo Set `props.checkStrictly = true` to make checked state of a node not affects its parent nodes and child nodes, and then you can select any level of options.
+```html
+
+ Select any level of options (Single selection)
+
+
+ Select any level of options (Multiple selection)
+
+```
+:::
+
+### Filterable
+
+Search and select options with a keyword.
+
+:::demo Adding `filterable` to `el-cascader` enables filtering. Cascader will match nodes whose label or parent's label (according to `show-all-levels`) includes input keyword. Of course, you can customize search logic by `filter-method` which accepts a function, the first parameter is `node`, the second is `keyword`, and need return a boolean value indicating whether it hits.
+```html
+
+ Filterable (Single selection)
+
+
+ Filterable (Multiple selection)
+
+
+
+```
+:::
+
+### Custom option content
+
+You can customize the content of cascader node.
+
+:::demo You can customize the content of cascader node by `scoped slot`. You'll have access to `node` and `data` in the scope, standing for the Node object and node data of the current node respectively。
+```html
+
+
+ {{ data.label }}
+ ({{ data.children.length }})
+
+
+
+
+```
+:::
+
+### Cascader panel
+
+`CascaderPanel` is the core component of `Cascader` which has various of features such as single selection, multiple selection, dynamic loading and so on.
+
+:::demo Just like `el-cascader`, you can set alternative options by `options`, and enable other features by `props`, see the API form below for details.
+```html
+
默认 click 触发子菜单
-
+ @change="handleChange">
hover 触发子菜单
-
+ :props="{ expandTrigger: 'hover' }"
+ @change="handleChange">
+```
+:::
+
### 仅显示最后一级
可以仅在输入框中显示选中项最后一级的标签，而不是选中项所在的完整路径。
:::demo 属性`show-all-levels`定义了是否显示完整的路径，将其赋值为`false`则仅显示最后一级
```html
-
- 只可选择最后一级菜单的选项
+ 单选可搜索
- 可选择任意一级菜单的选项
+ 多选可搜索
+```
+:::
+
+### 级联面板
+
+级联面板是级联选择器的核心组件，与级联选择器一样，有单选、多选、动态加载等多种功能。
+
+:::demo 和级联选择器一样，通过`options`来指定选项，也可通过`props`来设置多选、动态加载等功能，具体详情见下方API表格。
+```html
+
+
+
+
+
+
diff --git a/packages/cascader-panel/src/node.js b/packages/cascader-panel/src/node.js
new file mode 100644
index 000000000..1efd4f775
--- /dev/null
+++ b/packages/cascader-panel/src/node.js
@@ -0,0 +1,166 @@
+import { isEqual, capitalize } from 'element-ui/src/utils/util';
+import { isDef } from 'element-ui/src/utils/shared';
+
+let uid = 0;
+
+export default class Node {
+
+ constructor(data, config, parentNode) {
+ this.data = data;
+ this.config = config;
+ this.parent = parentNode || null;
+ this.level = !this.parent ? 1 : this.parent.level + 1;
+ this.uid = uid++;
+
+ this.initState();
+ this.initChildren();
+ }
+
+ initState() {
+ const { value: valueKey, label: labelKey } = this.config;
+
+ this.value = this.data[valueKey];
+ this.label = this.data[labelKey];
+ this.pathNodes = this.calculatePathNodes();
+ this.path = this.pathNodes.map(node => node.value);
+ this.pathLabels = this.pathNodes.map(node => node.label);
+
+ // lazy load
+ this.loading = false;
+ this.loaded = false;
+ }
+
+ initChildren() {
+ const { config } = this;
+ const childrenKey = config.children;
+ const childrenData = this.data[childrenKey];
+ this.hasChildren = Array.isArray(childrenData);
+ this.children = (childrenData || []).map(child => new Node(child, config, this));
+ }
+
+ get isDisabled() {
+ const { data, parent, config } = this;
+ const disabledKey = config.disabled;
+ const { checkStrictly } = config;
+ return data[disabledKey] ||
+ !checkStrictly && parent && parent.isDisabled;
+ }
+
+ get isLeaf() {
+ const { data, loaded, hasChildren, children } = this;
+ const { lazy, leaf: leafKey } = this.config;
+ if (lazy) {
+ const isLeaf = isDef(data[leafKey])
+ ? data[leafKey]
+ : (loaded ? !children.length : false);
+ this.hasChildren = !isLeaf;
+ return isLeaf;
+ }
+ return !hasChildren;
+ }
+
+ calculatePathNodes() {
+ const nodes = [this];
+ let parent = this.parent;
+
+ while (parent) {
+ nodes.unshift(parent);
+ parent = parent.parent;
+ }
+
+ return nodes;
+ }
+
+ getPath() {
+ return this.path;
+ }
+
+ getValue() {
+ return this.value;
+ }
+
+ getValueByOption() {
+ return this.config.emitPath
+ ? this.getPath()
+ : this.getValue();
+ }
+
+ getText(allLevels, separator) {
+ return allLevels ? this.pathLabels.join(separator) : this.label;
+ }
+
+ isSameNode(checkedValue) {
+ const value = this.getValueByOption();
+ return this.config.multiple && Array.isArray(checkedValue)
+ ? checkedValue.some(val => isEqual(val, value))
+ : isEqual(checkedValue, value);
+ }
+
+ broadcast(event, ...args) {
+ const handlerName = `onParent${capitalize(event)}`;
+
+ this.children.forEach(child => {
+ if (child) {
+ // bottom up
+ child.broadcast(event, ...args);
+ child[handlerName] && child[handlerName](...args);
+ }
+ });
+ }
+
+ emit(event, ...args) {
+ const { parent } = this;
+ const handlerName = `onChild${capitalize(event)}`;
+ if (parent) {
+ parent[handlerName] && parent[handlerName](...args);
+ parent.emit(event, ...args);
+ }
+ }
+
+ onParentCheck(checked) {
+ if (!this.isDisabled) {
+ this.setCheckState(checked);
+ }
+ }
+
+ onChildCheck() {
+ const { children } = this;
+ const validChildren = children.filter(child => !child.isDisabled);
+ const checked = validChildren.length
+ ? validChildren.every(child => child.checked)
+ : false;
+
+ this.setCheckState(checked);
+ }
+
+ setCheckState(checked) {
+ const totalNum = this.children.length;
+ const checkedNum = this.children.reduce((c, p) => {
+ const num = p.checked ? 1 : (p.indeterminate ? 0.5 : 0);
+ return c + num;
+ }, 0);
+
+ this.checked = checked;
+ this.indeterminate = checkedNum !== totalNum && checkedNum > 0;
+ }
+
+ syncCheckState(checkedValue) {
+ const value = this.getValueByOption();
+ const checked = this.isSameNode(checkedValue, value);
+
+ this.doCheck(checked);
+ }
+
+ doCheck(checked) {
+ if (this.checked !== checked) {
+ if (this.config.checkStrictly) {
+ this.checked = checked;
+ } else {
+ // bottom up to unify the calculation of the indeterminate state
+ this.broadcast('check', checked);
+ this.setCheckState(checked);
+ this.emit('check');
+ }
+ }
+ }
+}
diff --git a/packages/cascader-panel/src/store.js b/packages/cascader-panel/src/store.js
new file mode 100644
index 000000000..19f930dd1
--- /dev/null
+++ b/packages/cascader-panel/src/store.js
@@ -0,0 +1,63 @@
+import Node from './node';
+import { coerceTruthyValueToArray } from 'element-ui/src/utils/util';
+
+const flatNodes = (data, leafOnly) => {
+ return data.reduce((res, node) => {
+ if (node.isLeaf) {
+ res.push(node);
+ } else {
+ !leafOnly && res.push(node);
+ res = res.concat(flatNodes(node.children, leafOnly));
+ }
+ return res;
+ }, []);
+};
+
+export default class Store {
+
+ constructor(data, config) {
+ this.config = config;
+ this.initNodes(data);
+ }
+
+ initNodes(data) {
+ data = coerceTruthyValueToArray(data);
+ this.nodes = data.map(nodeData => new Node(nodeData, this.config));
+ this.flattedNodes = this.getFlattedNodes(false, false);
+ this.leafNodes = this.getFlattedNodes(true, false);
+ }
+
+ appendNode(nodeData, parentNode) {
+ const node = new Node(nodeData, this.config, parentNode);
+ const children = parentNode ? parentNode.children : this.nodes;
+
+ children.push(node);
+ }
+
+ appendNodes(nodeDataList, parentNode) {
+ nodeDataList = coerceTruthyValueToArray(nodeDataList);
+ nodeDataList.forEach(nodeData => this.appendNode(nodeData, parentNode));
+ }
+
+ getNodes() {
+ return this.nodes;
+ }
+
+ getFlattedNodes(leafOnly, cached = true) {
+ const cachedNodes = leafOnly ? this.leafNodes : this.flattedNodes;
+ return cached
+ ? cachedNodes
+ : flatNodes(this.nodes, leafOnly);
+ }
+
+ getNodeByValue(value) {
+ if (value) {
+ value = Array.isArray(value) ? value[value.length - 1] : value;
+ const nodes = this.getFlattedNodes(false, !this.config.lazy)
+ .filter(node => node.value === value);
+ return nodes && nodes.length ? nodes[0] : null;
+ }
+ return null;
+ }
+
+}
diff --git a/packages/cascader/index.js b/packages/cascader/index.js
index 68163ac5e..b3d860fc1 100644
--- a/packages/cascader/index.js
+++ b/packages/cascader/index.js
@@ -1,4 +1,4 @@
-import Cascader from './src/main';
+import Cascader from './src/cascader';
/* istanbul ignore next */
Cascader.install = function(Vue) {
diff --git a/packages/cascader/src/cascader.vue b/packages/cascader/src/cascader.vue
new file mode 100644
index 000000000..15d56edea
--- /dev/null
+++ b/packages/cascader/src/cascader.vue
@@ -0,0 +1,639 @@
+
+
+
+
+
+
+
+
+
+
+ {{ tag.text }}
+
+
+
+
+
+
+
+
+ {{ item.text }}
+
+
+
+ {{ t('el.cascader.noMatch') }}
+
+
+
+
+
+
+
+
diff --git a/packages/cascader/src/main.vue b/packages/cascader/src/main.vue
deleted file mode 100644
index 3d8e98f40..000000000
--- a/packages/cascader/src/main.vue
+++ /dev/null
@@ -1,452 +0,0 @@
-
-
-
-
-
-
-
-
-
- {{ label }}
- {{ separator }}
-
-
-
- {{ currentLabels[currentLabels.length - 1] }}
-
-
-
-
-
-
diff --git a/packages/cascader/src/menu.vue b/packages/cascader/src/menu.vue
deleted file mode 100644
index 3eff3cd08..000000000
--- a/packages/cascader/src/menu.vue
+++ /dev/null
@@ -1,375 +0,0 @@
-
diff --git a/packages/theme-chalk/src/cascader-panel.scss b/packages/theme-chalk/src/cascader-panel.scss
new file mode 100644
index 000000000..d2061e247
--- /dev/null
+++ b/packages/theme-chalk/src/cascader-panel.scss
@@ -0,0 +1,124 @@
+@import "mixins/mixins";
+@import "common/var";
+@import "./checkbox";
+@import "./radio";
+@import "./scrollbar";
+
+@include b(cascader-panel) {
+ display: flex;
+ border-radius: $--cascader-menu-radius;
+ font-size: $--cascader-menu-font-size;
+
+ @include when(bordered) {
+ border: $--cascader-menu-border;
+ border-radius: $--cascader-menu-radius;
+ }
+}
+
+@include b(cascader-menu) {
+ min-width: 180px;
+ box-sizing: border-box;
+ color: $--cascader-menu-font-color;
+ border-right: $--cascader-menu-border;
+
+ &:last-child {
+ border-right: none;
+ .el-cascader-node {
+ padding-right: 20px;
+ }
+ }
+
+ @include e(wrap) {
+ height: 204px;
+ }
+
+ @include e(list) {
+ position: relative;
+ min-height: 100%;
+ margin: 0;
+ padding: 6px 0;
+ list-style: none;
+ box-sizing: border-box;
+ }
+
+ @include e(hover-zone) {
+ position: absolute;
+ top: 0;
+ left: 0;
+ width: 100%;
+ height: 100%;
+ pointer-events: none;
+ }
+
+ @include e(empty-text) {
+ position: absolute;
+ top: 50%;
+ left: 50%;
+ transform: translate(-50%, -50%);
+ text-align: center;
+ color: $--cascader-color-empty;
+ }
+}
+
+@include b(cascader-node) {
+ position: relative;
+ display: flex;
+ align-items: center;
+ padding: 0 30px 0 20px;
+ height: 34px;
+ line-height: 34px;
+ outline: none;
+
+ &.is-selectable.in-active-path {
+ color: $--cascader-menu-font-color;
+ }
+
+ &.in-active-path,
+ &.is-selectable.in-checked-path,
+ &.is-active {
+ color: $--cascader-menu-selected-font-color;
+ font-weight: bold;
+ }
+
+ &:not(.is-disabled) {
+ cursor: pointer;
+ &:hover, &:focus {
+ background: $--cascader-node-background-hover;
+ }
+ }
+
+ @include when(disabled) {
+ color: $--cascader-node-color-disabled;
+ cursor: not-allowed;
+ }
+
+ @include e(prefix) {
+ position: absolute;
+ left: 10px;
+ }
+
+ @include e(postfix) {
+ position: absolute;
+ right: 10px;
+ }
+
+ @include e(label) {
+ flex: 1;
+ padding: 0 10px;
+ white-space: nowrap;
+ overflow: hidden;
+ text-overflow: ellipsis;
+ }
+
+ > .el-checkbox {
+ margin-right: 0;
+ }
+
+ > .el-radio {
+ margin-right: 0;
+
+ .el-radio__label {
+ padding-left: 0;
+ }
+ }
+}
diff --git a/packages/theme-chalk/src/cascader.scss b/packages/theme-chalk/src/cascader.scss
index b3b10210e..5c883ea9c 100644
--- a/packages/theme-chalk/src/cascader.scss
+++ b/packages/theme-chalk/src/cascader.scss
@@ -1,7 +1,9 @@
@import "mixins/mixins";
@import "common/var";
-@import "./input.scss";
+@import "./input";
@import "./popper";
+@import "./tag";
+@import "./cascader-panel";
@include b(cascader) {
display: inline-block;
@@ -9,76 +11,57 @@
font-size: $--font-size-base;
line-height: $--input-height;
- .el-input,
- .el-input__inner {
- cursor: pointer;
- }
-
- .el-input.is-focus .el-input__inner {
- border-color: $--input-focus-border;
- }
-
- .el-input__icon {
- transition: none;
- }
-
- .el-icon-arrow-down {
- transition: transform .3s;
- font-size: 14px;
-
- @include when(reverse) {
- transform: rotateZ(180deg);
+ &:not(.is-disabled):hover {
+ .el-input__inner {
+ cursor: pointer;
+ border-color: $--input-hover-border;
}
}
- .el-icon-circle-close {
- z-index: #{$--index-normal + 1};
- transition: $--color-transition-base;
-
- &:hover {
- color: $--color-text-secondary;
- }
- }
-
- @include e(clearIcon) {
- z-index: 2;
- position: relative;
- }
-
- @include e(label) {
- position: absolute;
- left: 0;
- top: 0;
- height: 100%;
- padding: 0 25px 0 15px;
- color: $--cascader-menu-font-color;
- width: 100%;
- white-space: nowrap;
- text-overflow: ellipsis;
- overflow: hidden;
- box-sizing: border-box;
+ .el-input {
cursor: pointer;
- text-align: left;
- font-size: inherit;
- span {
- color: $--color-black;
+ .el-input__inner {
+ text-overflow: ellipsis;
+
+ &:focus {
+ border-color: $--input-focus-border;
+ }
+ }
+
+ .el-icon-arrow-down {
+ transition: transform .3s;
+ font-size: 14px;
+
+ @include when(reverse) {
+ transform: rotateZ(180deg);
+ }
+ }
+
+ .el-icon-circle-close:hover {
+ color: $--input-clear-hover-color;
+ }
+
+ @include when(focus) {
+ .el-input__inner {
+ border-color: $--input-focus-border;
+ }
}
}
@include m(medium) {
font-size: $--input-medium-font-size;
- line-height: #{$--input-medium-height};
+ line-height: $--input-medium-height;
}
@include m(small) {
font-size: $--input-small-font-size;
- line-height: #{$--input-small-height};
+ line-height: $--input-small-height;
}
@include m(mini) {
font-size: $--input-mini-font-size;
- line-height: #{$--input-mini-height};
+ line-height: $--input-mini-height;
}
@include when(disabled) {
@@ -87,99 +70,113 @@
color: $--disabled-color-base;
}
}
-}
-@include b(cascader-menus) {
- white-space: nowrap;
- background: #fff;
- position: absolute;
- margin: 5px 0;
- z-index: #{$--index-normal + 1};
- border: $--select-dropdown-border;
- border-radius: $--border-radius-small;
- box-shadow: $--select-dropdown-shadow;
-}
-
-@include b(cascader-menu) {
- display: inline-block;
- vertical-align: top;
- height: 204px;
- overflow: auto;
- border-right: $--select-dropdown-border;
- background-color: $--select-dropdown-background;
- box-sizing: border-box;
- margin: 0;
- padding: 6px 0;
- min-width: 160px;
-
- &:last-child {
- border-right: 0;
+ @include e(dropdown) {
+ margin: 5px 0;
+ font-size: $--cascader-menu-font-size;
+ background: $--cascader-menu-fill;
+ border: $--cascader-menu-border;
+ border-radius: $--cascader-menu-radius;
+ box-shadow: $--cascader-menu-shadow;
}
- @include e(item) {
- font-size: $--select-font-size;
- padding: 8px 20px;
- position: relative;
- white-space: nowrap;
- overflow: hidden;
- text-overflow: ellipsis;
- color: $--select-option-color;
- height: $--select-option-height;
- line-height: 1.5;
+ @include e(tags) {
+ position: absolute;
+ left: 0;
+ right: 30px;
+ top: 50%;
+ transform: translateY(-50%);
+ display: flex;
+ flex-wrap: wrap;
+ line-height: normal;
+ text-align: left;
box-sizing: border-box;
- cursor: pointer;
+
+ .el-tag {
+ display: inline-flex;
+ align-items: center;
+ max-width: 100%;
+ margin: 2px 0 2px 6px;
+ text-overflow: ellipsis;
+ background: $--cascader-tag-background;
+
+ &:not(.is-hit) {
+ border-color: transparent;
+ }
+
+ > span {
+ flex: 1;
+ overflow: hidden;
+ text-overflow: ellipsis;
+ }
+
+ .el-icon-close {
+ flex: none;
+ background-color: $--color-text-placeholder;
+ color: $--color-white;
+
+ &:hover {
+ background-color: $--color-text-secondary;
+ }
+ }
+ }
+ }
+
+ @include e(suggestion-panel) {
+ border-radius: $--cascader-menu-radius;
+ }
+
+ @include e(suggestion-list) {
+ max-height: 204px;
+ margin: 0;
+ padding: 6px 0;
+ font-size: $--font-size-base;
+ color: $--cascader-menu-font-color;
+ text-align: center;
+ }
+
+ @include e(suggestion-item) {
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
+ height: 34px;
+ padding: 0 15px;
+ text-align: left;
outline: none;
+ cursor: pointer;
- span {
- padding-right: 10px;
+ &:hover, &:focus {
+ background: $--cascader-node-background-hover;
}
- @include m(extensible) {
- &:after {
- font-family: 'element-icons';
- content: "\e6e0";
- font-size: 14px;
- color: rgb(191, 203, 217);
- position: absolute;
- right: 15px;
- }
- }
-
- @include when(disabled) {
- color: $--select-option-disabled-color;
- background-color: $--select-option-disabled-background;
- cursor: not-allowed;
-
- &:hover {
- background-color: $--color-white;
- }
- }
-
- @include when(active) {
+ &.is-checked {
color: $--cascader-menu-selected-font-color;
+ font-weight: bold;
}
- &:hover, &:focus:not(:active) {
- background-color: $--select-option-hover-background;
- }
-
- &.selected {
- color: $--color-white;
- background-color: $--select-option-selected-hover;
+ > span {
+ margin-right: 10px;
}
}
- @include e(item__keyword) {
- font-weight: bold;
+ @include e(empty-text) {
+ margin: 10px 0;
+ color: $--cascader-color-empty;
}
- @include m(flexible) {
- height: auto;
- max-height: 180px;
- overflow: auto;
+ @include e(search-input) {
+ flex: 1;
+ height: 24px;
+ min-width: 60px;
+ margin: 2px 0 2px 15px;
+ padding: 0;
+ color: $--cascader-menu-font-color;
+ border: none;
+ outline: none;
+ box-sizing: border-box;
- .el-cascader-menu__item {
- overflow: visible;
+ &::placeholder {
+ color: $--color-text-placeholder;
}
}
}
diff --git a/packages/theme-chalk/src/common/var.scss b/packages/theme-chalk/src/common/var.scss
index 1559fc859..38550c03e 100644
--- a/packages/theme-chalk/src/common/var.scss
+++ b/packages/theme-chalk/src/common/var.scss
@@ -474,19 +474,14 @@ $--cascader-menu-font-color: $--color-text-regular !default;
/// color||Color|0
$--cascader-menu-selected-font-color: $--color-primary !default;
$--cascader-menu-fill: $--fill-base !default;
-$--cascader-menu-border: $--border-base !default;
-$--cascader-menu-border-width: $--border-width-base !default;
-$--cascader-menu-color: $--color-text-regular !default;
-$--cascader-menu-option-color-active: $--color-text-secondary !default;
-$--cascader-menu-option-fill-active: rgba($--color-text-secondary, 0.12) !default;
-$--cascader-menu-option-color-hover: $--color-text-regular !default;
-$--cascader-menu-option-fill-hover: rgba($--color-text-primary, 0.06) !default;
-$--cascader-menu-option-color-disabled: #999 !default;
-$--cascader-menu-option-fill-disabled: rgba($--color-black, 0.06) !default;
-$--cascader-menu-option-empty-color: #666 !default;
-$--cascader-menu-shadow: 0 1px 2px rgba($--color-black, 0.14), 0 0 3px rgba($--color-black, 0.14) !default;
-$--cascader-menu-option-pinyin-color: #999 !default;
-$--cascader-menu-submenu-shadow: 1px 1px 2px rgba($--color-black, 0.14), 1px 0 2px rgba($--color-black, 0.14) !default;
+$--cascader-menu-font-size: $--font-size-base !default;
+$--cascader-menu-radius: $--border-radius-base !default;
+$--cascader-menu-border: solid 1px $--border-color-light !default;
+$--cascader-menu-shadow: $--box-shadow-light !default;
+$--cascader-node-background-hover: $--background-color-base !default;
+$--cascader-node-color-disabled:$--color-text-placeholder !default;
+$--cascader-color-empty:$--color-text-placeholder !default;
+$--cascader-tag-background: #f0f2f5;
/* Group
-------------------------- */
diff --git a/packages/theme-chalk/src/index.scss b/packages/theme-chalk/src/index.scss
index f54249b79..6ba2f6c8e 100644
--- a/packages/theme-chalk/src/index.scss
+++ b/packages/theme-chalk/src/index.scss
@@ -72,4 +72,6 @@
@import "./image.scss";
@import "./calendar.scss";
@import "./backtop.scss";
+@import "./infiniteScroll.scss";
@import "./page-header.scss";
+@import "./cascader-panel.scss";
diff --git a/packages/theme-chalk/src/infiniteScroll.scss b/packages/theme-chalk/src/infiniteScroll.scss
new file mode 100644
index 000000000..e69de29bb
diff --git a/src/index.js b/src/index.js
index 0133c4b9b..f764fe8d9 100644
--- a/src/index.js
+++ b/src/index.js
@@ -78,6 +78,7 @@ import Calendar from '../packages/calendar/index.js';
import Backtop from '../packages/backtop/index.js';
import InfiniteScroll from '../packages/infiniteScroll/index.js';
import PageHeader from '../packages/page-header/index.js';
+import CascaderPanel from '../packages/cascader-panel/index.js';
import locale from 'element-ui/src/locale';
import CollapseTransition from 'element-ui/src/transitions/collapse-transition';
@@ -155,6 +156,7 @@ const components = [
Calendar,
Backtop,
PageHeader,
+ CascaderPanel,
CollapseTransition
];
@@ -272,5 +274,6 @@ export default {
Calendar,
Backtop,
InfiniteScroll,
- PageHeader
+ PageHeader,
+ CascaderPanel
};
diff --git a/src/locale/lang/af-ZA.js b/src/locale/lang/af-ZA.js
index f207eba8c..a26af24c8 100644
--- a/src/locale/lang/af-ZA.js
+++ b/src/locale/lang/af-ZA.js
@@ -67,7 +67,8 @@ export default {
cascader: {
noMatch: 'Geen toepaslike data',
loading: 'Laai',
- placeholder: 'Kies'
+ placeholder: 'Kies',
+ noData: 'Geen data'
},
pagination: {
goto: 'Gaan na',
diff --git a/src/locale/lang/ar.js b/src/locale/lang/ar.js
index 8af92a5ec..40a8c14ff 100644
--- a/src/locale/lang/ar.js
+++ b/src/locale/lang/ar.js
@@ -67,7 +67,8 @@ export default {
cascader: {
noMatch: 'لايوجد بيانات مطابقة',
loading: 'جار التحميل',
- placeholder: 'أختر'
+ placeholder: 'أختر',
+ noData: 'لايوجد بيانات'
},
pagination: {
goto: 'أذهب إلى',
diff --git a/src/locale/lang/bg.js b/src/locale/lang/bg.js
index d8b561452..b4cbbdc47 100644
--- a/src/locale/lang/bg.js
+++ b/src/locale/lang/bg.js
@@ -67,7 +67,8 @@ export default {
cascader: {
noMatch: 'Няма намерени',
loading: 'Зареждане',
- placeholder: 'Избери'
+ placeholder: 'Избери',
+ noData: 'Няма данни'
},
pagination: {
goto: 'Иди на',
diff --git a/src/locale/lang/ca.js b/src/locale/lang/ca.js
index fd06ce8df..7fe5be262 100644
--- a/src/locale/lang/ca.js
+++ b/src/locale/lang/ca.js
@@ -67,7 +67,8 @@ export default {
cascader: {
noMatch: 'No hi ha dades que coincideixin',
loading: 'Carregant',
- placeholder: 'Seleccionar'
+ placeholder: 'Seleccionar',
+ noData: 'Sense Dades'
},
pagination: {
goto: 'Anar a',
diff --git a/src/locale/lang/cs-CZ.js b/src/locale/lang/cs-CZ.js
index 12beb2cb2..f15f421e5 100644
--- a/src/locale/lang/cs-CZ.js
+++ b/src/locale/lang/cs-CZ.js
@@ -69,7 +69,8 @@ export default {
cascader: {
noMatch: 'Žádná shoda',
loading: 'Načítání',
- placeholder: 'Vybrat'
+ placeholder: 'Vybrat',
+ noData: 'Žádná data'
},
pagination: {
goto: 'Jít na',
diff --git a/src/locale/lang/da.js b/src/locale/lang/da.js
index 2d4991473..44ef40769 100644
--- a/src/locale/lang/da.js
+++ b/src/locale/lang/da.js
@@ -67,7 +67,8 @@ export default {
cascader: {
noMatch: 'Ingen matchende data',
loading: 'Henter',
- placeholder: 'Vælg'
+ placeholder: 'Vælg',
+ noData: 'Ingen data'
},
pagination: {
goto: 'Gå til',
diff --git a/src/locale/lang/de.js b/src/locale/lang/de.js
index 196d6911c..14542795f 100644
--- a/src/locale/lang/de.js
+++ b/src/locale/lang/de.js
@@ -69,7 +69,8 @@ export default {
cascader: {
noMatch: 'Nichts gefunden.',
loading: 'Lädt.',
- placeholder: 'Daten wählen'
+ placeholder: 'Daten wählen',
+ noData: 'Keine Daten'
},
pagination: {
goto: 'Gehe zu',
diff --git a/src/locale/lang/ee.js b/src/locale/lang/ee.js
index 640612907..da65b1f09 100644
--- a/src/locale/lang/ee.js
+++ b/src/locale/lang/ee.js
@@ -67,7 +67,8 @@ export default {
cascader: {
noMatch: 'Sobivad andmed puuduvad',
loading: 'Laadimine',
- placeholder: 'Vali'
+ placeholder: 'Vali',
+ noData: 'Andmed puuduvad'
},
pagination: {
goto: 'Mine lehele',
diff --git a/src/locale/lang/el.js b/src/locale/lang/el.js
index f111bfc6e..03d8e1cc8 100644
--- a/src/locale/lang/el.js
+++ b/src/locale/lang/el.js
@@ -67,7 +67,8 @@ export default {
cascader: {
noMatch: 'Δεν βρέθηκαν αποτελέσματα',
loading: 'Φόρτωση',
- placeholder: 'Επιλογή'
+ placeholder: 'Επιλογή',
+ noData: 'Χωρίς δεδομένα'
},
pagination: {
goto: 'Μετάβαση σε',
diff --git a/src/locale/lang/en.js b/src/locale/lang/en.js
index c2ea43832..3e45ee637 100644
--- a/src/locale/lang/en.js
+++ b/src/locale/lang/en.js
@@ -67,7 +67,8 @@ export default {
cascader: {
noMatch: 'No matching data',
loading: 'Loading',
- placeholder: 'Select'
+ placeholder: 'Select',
+ noData: 'No data'
},
pagination: {
goto: 'Go to',
diff --git a/src/locale/lang/es.js b/src/locale/lang/es.js
index 8fb737ca9..7810038b1 100644
--- a/src/locale/lang/es.js
+++ b/src/locale/lang/es.js
@@ -67,7 +67,8 @@ export default {
cascader: {
noMatch: 'No hay datos que coincidan',
loading: 'Cargando',
- placeholder: 'Seleccionar'
+ placeholder: 'Seleccionar',
+ noData: 'Sin datos'
},
pagination: {
goto: 'Ir a',
diff --git a/src/locale/lang/eu.js b/src/locale/lang/eu.js
index 9f5f182d3..481b3d060 100644
--- a/src/locale/lang/eu.js
+++ b/src/locale/lang/eu.js
@@ -67,7 +67,8 @@ export default {
cascader: {
noMatch: 'Bat datorren daturik ez',
loading: 'Kargatzen',
- placeholder: 'Hautatu'
+ placeholder: 'Hautatu',
+ noData: 'Daturik ez'
},
pagination: {
goto: 'Joan',
diff --git a/src/locale/lang/fa.js b/src/locale/lang/fa.js
index b70a45c92..84ad5b660 100644
--- a/src/locale/lang/fa.js
+++ b/src/locale/lang/fa.js
@@ -67,7 +67,8 @@ export default {
cascader: {
noMatch: 'هیچ دادهای پیدا نشد',
loading: 'بارگیری',
- placeholder: 'انتخاب کنید'
+ placeholder: 'انتخاب کنید',
+ noData: 'اطلاعاتی وجود ندارد'
},
pagination: {
goto: 'برو به',
diff --git a/src/locale/lang/fi.js b/src/locale/lang/fi.js
index 5b3c5ef3c..b836c90c8 100644
--- a/src/locale/lang/fi.js
+++ b/src/locale/lang/fi.js
@@ -67,7 +67,8 @@ export default {
cascader: {
noMatch: 'Ei vastaavia tietoja',
loading: 'Lataa',
- placeholder: 'Valitse'
+ placeholder: 'Valitse',
+ noData: 'Ei tietoja'
},
pagination: {
goto: 'Mene',
diff --git a/src/locale/lang/fr.js b/src/locale/lang/fr.js
index 10a456461..3421e2a58 100644
--- a/src/locale/lang/fr.js
+++ b/src/locale/lang/fr.js
@@ -67,7 +67,8 @@ export default {
cascader: {
noMatch: 'Aucune correspondance',
loading: 'Chargement',
- placeholder: 'Choisir'
+ placeholder: 'Choisir',
+ noData: 'Aucune donnée'
},
pagination: {
goto: 'Aller à',
diff --git a/src/locale/lang/he.js b/src/locale/lang/he.js
index f27b99bfe..09650186a 100644
--- a/src/locale/lang/he.js
+++ b/src/locale/lang/he.js
@@ -67,7 +67,8 @@ export default {
cascader: {
noMatch: 'ללא נתונים מתאימים',
loading: 'טוען',
- placeholder: 'בחר'
+ placeholder: 'בחר',
+ noData: 'ללא נתונים'
},
pagination: {
goto: 'עבור ל',
diff --git a/src/locale/lang/hr.js b/src/locale/lang/hr.js
index a508e7d3f..dbb1b0764 100644
--- a/src/locale/lang/hr.js
+++ b/src/locale/lang/hr.js
@@ -67,7 +67,8 @@ export default {
cascader: {
noMatch: 'Nema pronađenih podataka',
loading: 'Učitavanje',
- placeholder: 'Izaberi'
+ placeholder: 'Izaberi',
+ noData: 'Nema podataka'
},
pagination: {
goto: 'Idi na',
diff --git a/src/locale/lang/hu.js b/src/locale/lang/hu.js
index 295c3105c..0086727d4 100644
--- a/src/locale/lang/hu.js
+++ b/src/locale/lang/hu.js
@@ -66,7 +66,8 @@ export default {
cascader: {
noMatch: 'Nincs találat',
loading: 'Betöltés',
- placeholder: 'Válassz'
+ placeholder: 'Válassz',
+ noData: 'Nincs adat'
},
pagination: {
goto: 'Ugrás',
diff --git a/src/locale/lang/hy-AM.js b/src/locale/lang/hy-AM.js
index 6b3c63918..7f2c79375 100644
--- a/src/locale/lang/hy-AM.js
+++ b/src/locale/lang/hy-AM.js
@@ -67,7 +67,8 @@ export default {
cascader: {
noMatch: 'Համապատասխան տուեալներ չկան',
loading: 'Բեռնում',
- placeholder: 'Ընտրել'
+ placeholder: 'Ընտրել',
+ noData: 'Տվյալներ չկան'
},
pagination: {
goto: 'Անցնել',
diff --git a/src/locale/lang/id.js b/src/locale/lang/id.js
index 5875a86c8..ce3bedf60 100644
--- a/src/locale/lang/id.js
+++ b/src/locale/lang/id.js
@@ -67,7 +67,8 @@ export default {
cascader: {
noMatch: 'Tidak ada data yg cocok',
loading: 'Memuat',
- placeholder: 'Pilih'
+ placeholder: 'Pilih',
+ noData: 'Tidak ada data'
},
pagination: {
goto: 'Pergi ke',
diff --git a/src/locale/lang/it.js b/src/locale/lang/it.js
index 850829fc6..b9be34bb0 100644
--- a/src/locale/lang/it.js
+++ b/src/locale/lang/it.js
@@ -67,7 +67,8 @@ export default {
cascader: {
noMatch: 'Nessuna corrispondenza',
loading: 'Caricamento',
- placeholder: 'Seleziona'
+ placeholder: 'Seleziona',
+ noData: 'Nessun dato'
},
pagination: {
goto: 'Vai a',
diff --git a/src/locale/lang/ja.js b/src/locale/lang/ja.js
index 16a635adc..e449f01f4 100644
--- a/src/locale/lang/ja.js
+++ b/src/locale/lang/ja.js
@@ -67,7 +67,8 @@ export default {
cascader: {
noMatch: 'データなし',
loading: 'ロード中',
- placeholder: '選択してください'
+ placeholder: '選択してください',
+ noData: 'データなし'
},
pagination: {
goto: '',
diff --git a/src/locale/lang/kg.js b/src/locale/lang/kg.js
index 5498ac7ff..b6a715a7d 100644
--- a/src/locale/lang/kg.js
+++ b/src/locale/lang/kg.js
@@ -67,7 +67,8 @@ export default {
cascader: {
noMatch: 'Дал келген маалыматтар',
loading: 'Жүктөлүүдө',
- placeholder: 'тандоо'
+ placeholder: 'тандоо',
+ noData: 'маалымат жок'
},
pagination: {
goto: 'Мурунку',
diff --git a/src/locale/lang/km.js b/src/locale/lang/km.js
index a45cbfc78..185ab0bc8 100644
--- a/src/locale/lang/km.js
+++ b/src/locale/lang/km.js
@@ -67,7 +67,8 @@ export default {
cascader: {
noMatch: 'គ្មានទិន្ន័យដូច',
loading: 'កំពុងផ្ទុក',
- placeholder: 'ជ្រើសរើស'
+ placeholder: 'ជ្រើសរើស',
+ noData: 'គ្មានទិន្ន័យ'
},
pagination: {
goto: 'ទៅកាន់',
diff --git a/src/locale/lang/ko.js b/src/locale/lang/ko.js
index 4cadf21f8..71fe33889 100644
--- a/src/locale/lang/ko.js
+++ b/src/locale/lang/ko.js
@@ -67,7 +67,8 @@ export default {
cascader: {
noMatch: '맞는 데이터가 없습니다',
loading: '불러오는 중',
- placeholder: '선택'
+ placeholder: '선택',
+ noData: '데이터 없음'
},
pagination: {
goto: '이동',
diff --git a/src/locale/lang/ku.js b/src/locale/lang/ku.js
index 57d4480f0..ff57fcf60 100644
--- a/src/locale/lang/ku.js
+++ b/src/locale/lang/ku.js
@@ -67,7 +67,8 @@ export default {
cascader: {
noMatch: 'Li hembere ve agahî tune',
loading: 'Bardibe',
- placeholder: 'Bibijêre'
+ placeholder: 'Bibijêre',
+ noData: 'Agahî tune'
},
pagination: {
goto: 'Biçe',
diff --git a/src/locale/lang/kz.js b/src/locale/lang/kz.js
index a4579d4ad..7cdba7530 100644
--- a/src/locale/lang/kz.js
+++ b/src/locale/lang/kz.js
@@ -67,7 +67,8 @@ export default {
cascader: {
noMatch: 'Сәйкес деректер жоқ',
loading: 'Жүктелуде',
- placeholder: 'Таңдаңыз'
+ placeholder: 'Таңдаңыз',
+ noData: 'Деректер жоқ'
},
pagination: {
goto: 'Бару',
diff --git a/src/locale/lang/lt.js b/src/locale/lang/lt.js
index 3e3ba3092..7f5e10f79 100644
--- a/src/locale/lang/lt.js
+++ b/src/locale/lang/lt.js
@@ -67,7 +67,8 @@ export default {
cascader: {
noMatch: 'Duomenų nerasta',
loading: 'Kraunasi',
- placeholder: 'Pasirink'
+ placeholder: 'Pasirink',
+ noData: 'Nėra duomenų'
},
pagination: {
goto: 'Eiti į',
diff --git a/src/locale/lang/lv.js b/src/locale/lang/lv.js
index 18f99cda7..975b9174a 100644
--- a/src/locale/lang/lv.js
+++ b/src/locale/lang/lv.js
@@ -67,7 +67,8 @@ export default {
cascader: {
noMatch: 'Nav atbilstošu datu',
loading: 'Ielādē',
- placeholder: 'Izvēlēties'
+ placeholder: 'Izvēlēties',
+ noData: 'Nav datu'
},
pagination: {
goto: 'Iet uz',
diff --git a/src/locale/lang/mn.js b/src/locale/lang/mn.js
index 47280d88f..5c3aaf27a 100644
--- a/src/locale/lang/mn.js
+++ b/src/locale/lang/mn.js
@@ -67,7 +67,8 @@ export default {
cascader: {
noMatch: 'Тохирох өгөгдөл байхгүй',
loading: 'Ачаалж байна',
- placeholder: 'Сонгох'
+ placeholder: 'Сонгох',
+ noData: 'Өгөгдөл байхгүй'
},
pagination: {
goto: 'Очих',
diff --git a/src/locale/lang/nb-NO.js b/src/locale/lang/nb-NO.js
index c32b54d3f..2674d286f 100644
--- a/src/locale/lang/nb-NO.js
+++ b/src/locale/lang/nb-NO.js
@@ -67,7 +67,8 @@ export default {
cascader: {
noMatch: 'Ingen samsvarende data',
loading: 'Laster',
- placeholder: 'Velg'
+ placeholder: 'Velg',
+ noData: 'Ingen data'
},
pagination: {
goto: 'Gå til',
diff --git a/src/locale/lang/nl.js b/src/locale/lang/nl.js
index fb4df9cc8..37a97379b 100644
--- a/src/locale/lang/nl.js
+++ b/src/locale/lang/nl.js
@@ -67,7 +67,8 @@ export default {
cascader: {
noMatch: 'Geen overeenkomende resultaten',
loading: 'Laden',
- placeholder: 'Selecteer'
+ placeholder: 'Selecteer',
+ noData: 'Geen data'
},
pagination: {
goto: 'Ga naar',
diff --git a/src/locale/lang/pl.js b/src/locale/lang/pl.js
index e837edac2..b0eaf8936 100644
--- a/src/locale/lang/pl.js
+++ b/src/locale/lang/pl.js
@@ -67,7 +67,8 @@ export default {
cascader: {
noMatch: 'Brak dopasowań',
loading: 'Ładowanie',
- placeholder: 'Wybierz'
+ placeholder: 'Wybierz',
+ noData: 'Brak danych'
},
pagination: {
goto: 'Idź do',
diff --git a/src/locale/lang/pt-br.js b/src/locale/lang/pt-br.js
index 2902fc358..bb756347f 100644
--- a/src/locale/lang/pt-br.js
+++ b/src/locale/lang/pt-br.js
@@ -67,7 +67,8 @@ export default {
cascader: {
noMatch: 'Sem resultados',
loading: 'Carregando',
- placeholder: 'Selecione'
+ placeholder: 'Selecione',
+ noData: 'Sem dados'
},
pagination: {
goto: 'Ir para',
diff --git a/src/locale/lang/pt.js b/src/locale/lang/pt.js
index 16bc2053e..1cc88a656 100644
--- a/src/locale/lang/pt.js
+++ b/src/locale/lang/pt.js
@@ -67,7 +67,8 @@ export default {
cascader: {
noMatch: 'Sem correspondência',
loading: 'A carregar',
- placeholder: 'Selecione'
+ placeholder: 'Selecione',
+ noData: 'Sem dados'
},
pagination: {
goto: 'Ir para',
diff --git a/src/locale/lang/ro.js b/src/locale/lang/ro.js
index 76610749f..21134defa 100644
--- a/src/locale/lang/ro.js
+++ b/src/locale/lang/ro.js
@@ -67,7 +67,8 @@ export default {
cascader: {
noMatch: 'Nu există date potrivite',
loading: 'Se încarcă',
- placeholder: 'Selectează'
+ placeholder: 'Selectează',
+ noData: 'Nu există date'
},
pagination: {
goto: 'Go to',
diff --git a/src/locale/lang/ru-RU.js b/src/locale/lang/ru-RU.js
index ef6824f8e..03cf91d8b 100644
--- a/src/locale/lang/ru-RU.js
+++ b/src/locale/lang/ru-RU.js
@@ -67,7 +67,8 @@ export default {
cascader: {
noMatch: 'Совпадений не найдено',
loading: 'Загрузка',
- placeholder: 'Выбрать'
+ placeholder: 'Выбрать',
+ noData: 'Нет данных'
},
pagination: {
goto: 'Перейти',
diff --git a/src/locale/lang/sk.js b/src/locale/lang/sk.js
index 0897e76ed..82e89dc73 100644
--- a/src/locale/lang/sk.js
+++ b/src/locale/lang/sk.js
@@ -69,7 +69,8 @@ export default {
cascader: {
noMatch: 'Žiadna zhoda',
loading: 'Načítavanie',
- placeholder: 'Vybrať'
+ placeholder: 'Vybrať',
+ noData: 'Žiadne dáta'
},
pagination: {
goto: 'Choď na',
diff --git a/src/locale/lang/sl.js b/src/locale/lang/sl.js
index 4361d62e4..e2e8eccd8 100644
--- a/src/locale/lang/sl.js
+++ b/src/locale/lang/sl.js
@@ -67,7 +67,8 @@ export default {
cascader: {
noMatch: 'Ni ustreznih podatkov',
loading: 'Nalaganje',
- placeholder: 'Izberi'
+ placeholder: 'Izberi',
+ noData: 'Ni podatkov'
},
pagination: {
goto: 'Pojdi na',
diff --git a/src/locale/lang/sr.js b/src/locale/lang/sr.js
index b40afc612..2b54ac135 100644
--- a/src/locale/lang/sr.js
+++ b/src/locale/lang/sr.js
@@ -67,7 +67,8 @@ export default {
cascader: {
noMatch: 'Нема резултата',
loading: 'Учитавање',
- placeholder: 'Изабери'
+ placeholder: 'Изабери',
+ noData: 'Нема података'
},
pagination: {
goto: 'Иди на',
diff --git a/src/locale/lang/sv-SE.js b/src/locale/lang/sv-SE.js
index 72ad41b2d..5977f87b7 100644
--- a/src/locale/lang/sv-SE.js
+++ b/src/locale/lang/sv-SE.js
@@ -67,7 +67,8 @@ export default {
cascader: {
noMatch: 'Hittade inget',
loading: 'Laddar',
- placeholder: 'Välj'
+ placeholder: 'Välj',
+ noData: 'Ingen data'
},
pagination: {
goto: 'Gå till',
diff --git a/src/locale/lang/ta.js b/src/locale/lang/ta.js
index 2e802d028..897b30ba0 100644
--- a/src/locale/lang/ta.js
+++ b/src/locale/lang/ta.js
@@ -66,7 +66,8 @@ export default {
cascader: {
noMatch: 'பொருத்தமான தரவு கிடைக்கவில்லை',
loading: 'தயாராகிக்கொண்டிருக்கிறது',
- placeholder: 'தேர்வு செய்'
+ placeholder: 'தேர்வு செய்',
+ noData: 'தரவு இல்லை'
},
pagination: {
goto: 'தேவையான் பகுதிக்கு செல்',
diff --git a/src/locale/lang/th.js b/src/locale/lang/th.js
index c83cfcfbd..52b95b4bb 100644
--- a/src/locale/lang/th.js
+++ b/src/locale/lang/th.js
@@ -67,7 +67,8 @@ export default {
cascader: {
noMatch: 'ไม่พบข้อมูลที่ตรงกัน',
loading: 'กำลังโหลด',
- placeholder: 'เลือก'
+ placeholder: 'เลือก',
+ noData: 'ไม่พบข้อมูล'
},
pagination: {
goto: 'ไปที่',
diff --git a/src/locale/lang/tk.js b/src/locale/lang/tk.js
index b1b602665..77ece7d62 100644
--- a/src/locale/lang/tk.js
+++ b/src/locale/lang/tk.js
@@ -67,7 +67,8 @@ export default {
cascader: {
noMatch: 'Hiçzat tapylmady',
loading: 'Indirilýär',
- placeholder: 'Saýlaň'
+ placeholder: 'Saýlaň',
+ noData: 'Hiçzat ýok'
},
pagination: {
goto: 'Git',
diff --git a/src/locale/lang/tr-TR.js b/src/locale/lang/tr-TR.js
index ebbfca8a9..4e5eab83e 100644
--- a/src/locale/lang/tr-TR.js
+++ b/src/locale/lang/tr-TR.js
@@ -67,7 +67,8 @@ export default {
cascader: {
noMatch: 'Eşleşen veri bulunamadı',
loading: 'Yükleniyor',
- placeholder: 'Seç'
+ placeholder: 'Seç',
+ noData: 'Veri yok'
},
pagination: {
goto: 'Git',
diff --git a/src/locale/lang/ua.js b/src/locale/lang/ua.js
index 39d10c2dc..6ae9df8b0 100644
--- a/src/locale/lang/ua.js
+++ b/src/locale/lang/ua.js
@@ -67,7 +67,8 @@ export default {
cascader: {
noMatch: 'Співпадінь не знайдено',
loading: 'Завантаження',
- placeholder: 'Обрати'
+ placeholder: 'Обрати',
+ noData: 'Немає даних'
},
pagination: {
goto: 'Перейти',
diff --git a/src/locale/lang/ug-CN.js b/src/locale/lang/ug-CN.js
index 4381b9c8f..2dc32f77d 100644
--- a/src/locale/lang/ug-CN.js
+++ b/src/locale/lang/ug-CN.js
@@ -67,7 +67,8 @@ export default {
cascader: {
noMatch: 'ئۇچۇر تېپىلمىدى',
loading: 'يۈكلىنىۋاتىدۇ',
- placeholder: 'تاللاڭ'
+ placeholder: 'تاللاڭ',
+ noData: 'ئۇچۇر يوق'
},
pagination: {
goto: 'كىيىنكى بەت',
diff --git a/src/locale/lang/vi.js b/src/locale/lang/vi.js
index 14d85e21b..5f143424d 100644
--- a/src/locale/lang/vi.js
+++ b/src/locale/lang/vi.js
@@ -67,7 +67,8 @@ export default {
cascader: {
noMatch: 'Dữ liệu không phù hợp',
loading: 'Đang tải',
- placeholder: 'Chọn'
+ placeholder: 'Chọn',
+ noData: 'Không tìm thấy dữ liệu'
},
pagination: {
goto: 'Nhảy tới',
diff --git a/src/locale/lang/zh-CN.js b/src/locale/lang/zh-CN.js
index 0466da446..1e586162c 100644
--- a/src/locale/lang/zh-CN.js
+++ b/src/locale/lang/zh-CN.js
@@ -67,7 +67,8 @@ export default {
cascader: {
noMatch: '无匹配数据',
loading: '加载中',
- placeholder: '请选择'
+ placeholder: '请选择',
+ noData: '暂无数据'
},
pagination: {
goto: '前往',
diff --git a/src/locale/lang/zh-TW.js b/src/locale/lang/zh-TW.js
index 1e978b1a4..519d044b1 100644
--- a/src/locale/lang/zh-TW.js
+++ b/src/locale/lang/zh-TW.js
@@ -67,7 +67,8 @@ export default {
cascader: {
noMatch: '無匹配資料',
loading: '加載中',
- placeholder: '請選擇'
+ placeholder: '請選擇',
+ noData: '無資料'
},
pagination: {
goto: '前往',
diff --git a/src/utils/aria-utils.js b/src/utils/aria-utils.js
index 2e7f84ce6..5bccfab1c 100644
--- a/src/utils/aria-utils.js
+++ b/src/utils/aria-utils.js
@@ -115,7 +115,8 @@ aria.Utils.keys = {
left: 37,
up: 38,
right: 39,
- down: 40
+ down: 40,
+ esc: 27
};
export default aria.Utils;
diff --git a/src/utils/util.js b/src/utils/util.js
index 16043af5f..1ca8373b1 100644
--- a/src/utils/util.js
+++ b/src/utils/util.js
@@ -1,4 +1,5 @@
import Vue from 'vue';
+import { isString, isObject } from 'element-ui/src/utils/types';
const hasOwnProperty = Object.prototype.hasOwnProperty;
@@ -143,3 +144,75 @@ export const kebabCase = function(str) {
.replace(hyphenateRE, '$1-$2')
.toLowerCase();
};
+
+export const capitalize = function(str) {
+ if (!isString(str)) return str;
+ return str.charAt(0).toUpperCase() + str.slice(1);
+};
+
+export const looseEqual = function(a, b) {
+ const isObjectA = isObject(a);
+ const isObjectB = isObject(b);
+ if (isObjectA && isObjectB) {
+ return JSON.stringify(a) === JSON.stringify(b);
+ } else if (!isObjectA && !isObjectB) {
+ return String(a) === String(b);
+ } else {
+ return false;
+ }
+};
+
+export const arrayEquals = function(arrayA, arrayB) {
+ arrayA = arrayA || [];
+ arrayB = arrayB || [];
+
+ if (arrayA.length !== arrayB.length) {
+ return false;
+ }
+
+ for (let i = 0; i < arrayA.length; i++) {
+ if (!looseEqual(arrayA[i], arrayB[i])) {
+ return false;
+ }
+ }
+
+ return true;
+};
+
+export const isEqual = function(value1, value2) {
+ if (Array.isArray(value1) && Array.isArray(value2)) {
+ return arrayEquals(value1, value2);
+ }
+ return looseEqual(value1, value2);
+};
+
+export const isEmpty = function(val) {
+ // null or undefined
+ if (val == null) return true;
+
+ if (typeof val === 'boolean') return false;
+
+ if (typeof val === 'number') return !val;
+
+ if (val instanceof Error) return val.message === '';
+
+ switch (Object.prototype.toString.call(val)) {
+ // String or Array
+ case '[object String]':
+ case '[object Array]':
+ return !val.length;
+
+ // Map or Set or File
+ case '[object File]':
+ case '[object Map]':
+ case '[object Set]': {
+ return !val.size;
+ }
+ // Plain Object
+ case '[object Object]': {
+ return !Object.keys(val).length;
+ }
+ }
+
+ return false;
+};
diff --git a/test/unit/specs/cascader-panel.spec.js b/test/unit/specs/cascader-panel.spec.js
new file mode 100644
index 000000000..a57200fd5
--- /dev/null
+++ b/test/unit/specs/cascader-panel.spec.js
@@ -0,0 +1,536 @@
+import {
+ createTest,
+ createVue,
+ destroyVM,
+ waitImmediate,
+ wait,
+ triggerEvent
+} from '../util';
+import CascaderPanel from 'packages/cascader-panel';
+
+const selectedValue = ['zhejiang', 'hangzhou', 'xihu'];
+
+const options = [{
+ value: 'zhejiang',
+ label: 'Zhejiang',
+ children: [{
+ value: 'hangzhou',
+ label: 'Hangzhou',
+ children: [{
+ value: 'xihu',
+ label: 'West Lake'
+ }, {
+ value: 'binjiang',
+ label: 'Bin Jiang'
+ }]
+ }, {
+ value: 'ningbo',
+ label: 'NingBo',
+ children: [{
+ value: 'jiangbei',
+ label: 'Jiang Bei'
+ }, {
+ value: 'jiangdong',
+ label: 'Jiang Dong',
+ disabled: true
+ }]
+ }]
+}, {
+ value: 'jiangsu',
+ label: 'Jiangsu',
+ disabled: true,
+ children: [{
+ value: 'nanjing',
+ label: 'Nanjing',
+ children: [{
+ value: 'zhonghuamen',
+ label: 'Zhong Hua Men'
+ }]
+ }]
+}];
+
+const options2 = [{
+ id: 'zhejiang',
+ name: 'Zhejiang',
+ areas: [{
+ id: 'hangzhou',
+ name: 'Hangzhou',
+ areas: [{
+ id: 'xihu',
+ name: 'West Lake'
+ }, {
+ id: 'binjiang',
+ name: 'Bin Jiang'
+ }]
+ }, {
+ id: 'ningbo',
+ name: 'NingBo',
+ areas: [{
+ id: 'jiangbei',
+ label: 'Jiang Bei'
+ }, {
+ id: 'jiangdong',
+ name: 'Jiang Dong',
+ invalid: true
+ }]
+ }]
+}, {
+ id: 'jiangsu',
+ name: 'Jiangsu',
+ invalid: true,
+ areas: [{
+ id: 'nanjing',
+ name: 'Nanjing',
+ areas: [{
+ id: 'zhonghuamen',
+ name: 'Zhong Hua Men'
+ }]
+ }]
+}];
+
+const getMenus = el => el.querySelectorAll('.el-cascader-menu');
+const getOptions = (el, menuIndex) => getMenus(el)[menuIndex].querySelectorAll('.el-cascader-node');
+const getValidOptions = (el, menuIndex) => getMenus(el)[menuIndex].querySelectorAll('.el-cascader-node[tabindex="-1"]');
+const getLabel = el => el.querySelector('.el-cascader-node__label').textContent;
+
+describe('CascaderPanel', () => {
+ let vm;
+ afterEach(() => {
+ destroyVM(vm);
+ });
+
+ it('create', () => {
+ vm = createTest(CascaderPanel, true);
+ expect(vm.$el).to.exist;
+ });
+
+ it('expand and check', async() => {
+ vm = createVue({
+ template: `
+ {
+ expandTrigger?: ExpandTrigger,
+ multiple?: boolean,
+ checkStrictly?: boolean,
+ emitPath?: boolean,
+ lazy?: boolean,
+ lazyLoad?: (node: CascaderNode, resolve: Resolve) => void,
+ value?: string,
+ label?: string,
+ children?: string,
+ disabled?: string
+ leaf?: string
+}
+
+/** Cascader Node */
+export interface CascaderNode {
+ uid: number,
+ data: D,
+ value: V,
+ label: string,
+ level: number,
+ isDisabled: boolean,
+ isLeaf: boolean,
+ parent: CascaderNode | null,
+ children: CascaderNode[]
+ config: CascaderProps
+}
+
+type Resolve = (dataList?: D[]) => void
+
+export interface CascaderPanelSlots {
+ /** Custom label content */
+ default: VNode[]
+
+ [key: string]: VNode[]
+}
+
+/** CascaderPanel Component */
+export declare class ElCascaderPanel extends ElementUIComponent {
+ /** Selected value */
+ value: V | V[]
+
+ /** Data of the options */
+ options: D[]
+
+ /** Configuration options */
+ props: CascaderProps
+
+ /** Whether to add border */
+ border: boolean
+
+ /** Render function of custom label content */
+ renderLabel: (h: CreateElement, context: { node: CascaderNode; data: D }) => VNode
+
+ $slots: CascaderPanelSlots
+}
diff --git a/types/cascader.d.ts b/types/cascader.d.ts
index f7a844fcc..baf07c2a0 100644
--- a/types/cascader.d.ts
+++ b/types/cascader.d.ts
@@ -1,29 +1,36 @@
+import { VNode } from 'vue';
import { ElementUIComponent, ElementUIComponentSize } from './component'
+import { CascaderOption, CascaderProps, CascaderNode } from './cascader-panel';
-/** Trigger mode of expanding current item */
-export type ExpandTrigger = 'click' | 'hover'
+export type CascaderOption = CascaderOption
-/** Cascader Option */
-export interface CascaderOption {
- label: string,
- value: any,
- children?: CascaderOption[],
- disabled?: boolean
+export type CascaderProps = CascaderProps
+
+export type CascaderNode = CascaderNode
+
+export interface CascaderSlots {
+ /** Custom label content */
+ default: VNode[],
+
+ /** Empty content when no option matches */
+ empty: VNode[]
+
+ [key: string]: VNode[]
}
/** Cascader Component */
-export declare class ElCascader extends ElementUIComponent {
+export declare class ElCascader extends ElementUIComponent {
/** Data of the options */
options: CascaderOption[]
/** Configuration options */
- props: object
+ props: CascaderProps
/** Selected value */
- value: any[]
+ value: V | V[]
- /** Custom class name for Cascader's dropdown */
- popperClass: string
+ /** Size of Input */
+ size: ElementUIComponentSize
/** Input placeholder */
placeholder: string
@@ -34,24 +41,29 @@ export declare class ElCascader extends ElementUIComponent {
/** Whether selected value can be cleared */
clearable: boolean
- /** Trigger mode of expanding current item */
- expandTrigger: ExpandTrigger
-
/** Whether to display all levels of the selected value in the input */
showAllLevels: boolean
+ /** Whether to collapse selected tags in multiple selection mode */
+ collapseTags: boolean
+
+ /** Separator of option labels */
+ separator: string
+
/** Whether the options can be searched */
filterable: boolean
+ /** filter method to match options according to input keyword */
+ filterMethod: (node: CascaderNode, keyword: string) => boolean
+
/** Debounce delay when typing filter keyword, in millisecond */
debounce: number
- /** Whether selecting an option of any level is permitted */
- changeOnSelect: boolean
-
- /** Size of Input */
- size: ElementUIComponentSize
+ /** Custom class name for Cascader's dropdown */
+ popperClass: string
/** Hook function before filtering with the value to be filtered as its parameter */
beforeFilter: (value: string) => boolean | Promise
+
+ $slots: CascaderSlots
}