Merge pull request #2559 from baiyaaaaa/cascader

add cascader component

components.json

@@ -58,5 +58,6 @@
   "scrollbar": "./packages/scrollbar/index.js",
   "carousel-item": "./packages/carousel-item/index.js",
   "collapse": "./packages/collapse/index.js",
-  "collapse-item": "./packages/collapse-item/index.js"
+  "collapse-item": "./packages/collapse-item/index.js",
+  "cascader": "./packages/cascader/index.js"
 }

examples/nav.config.json

@@ -76,6 +76,10 @@
               "path": "/select",
               "title": "Select 选择器"
             },
+            {
+              "path": "/cascader",
+              "title": "Cascader 级联选择"
+            },
             {
               "path": "/switch",
               "title": "Switch 开关"
@@ -298,6 +302,10 @@
               "path": "/select",
               "title": "Select"
             },
+            {
+              "path": "/cascader",
+              "title": "Cascader"
+            },
             {
               "path": "/switch",
               "title": "Switch"

packages/cascader/cooking.conf.js

+var cooking = require('cooking');
+var path = require('path');
+var config = require('../../build/config');
+
+cooking.set({
+  entry: {
+    index: path.join(__dirname, 'index.js')
+  },
+  dist: path.join(__dirname, 'lib'),
+  template: false,
+  format: 'umd',
+  moduleName: 'ElCascader',
+  extends: ['vue2'],
+  alias: config.alias,
+  externals: { vue: config.vue }
+});
+
+module.exports = cooking.resolve();

packages/cascader/index.js

+import Cascader from './src/main';
+
+/* istanbul ignore next */
+Cascader.install = function(Vue) {
+  Vue.component(Cascader.name, Cascader);
+};
+
+export default Cascader;

packages/cascader/package.json

+{
+  "name": "element-cascader",
+  "version": "0.0.0",
+  "description": "A cascader component for Vue.js.",
+  "keywords": [
+    "element",
+    "vue",
+    "component"
+  ],
+  "main": "./lib/index.js",
+  "repository": "https://github.com/ElemeFE/element/tree/master/packages/cascader",
+  "author": "elemefe",
+  "license": "MIT",
+  "dependencies": {}
+}

packages/cascader/src/main.vue

+<template>
+  <span
+    class="el-cascader"
+    :class="[
+      {
+        'is-opened': menuVisible,
+        'is-disabled': disabled
+      },
+      size ? 'el-cascader--' + size : ''
+    ]"
+    @click="handleClick"
+    @mouseenter="inputHover = true"
+    @mouseleave="inputHover = false"
+    ref="reference"
+    v-clickoutside="handleClickoutside"
+  >
+    <el-input
+      ref="input"
+      :readonly="!filterable"
+      :placeholder="displayValue ? undefined : placeholder"
+      v-model="inputValue"
+      @change="handleInputChange"
+      :validate-event="false"
+      :size="size"
+      :disabled="disabled"
+    >
+      <template slot="icon">
+        <i
+          key="1"
+          v-if="inputHover && displayValue !== ''"
+          class="el-input__icon el-icon-circle-close el-cascader__clearIcon"
+          @click="clearValue"
+        ></i>
+        <i
+          key="2"
+          v-else
+          class="el-input__icon el-icon-caret-bottom"
+          :class="{ 'is-reverse': menuVisible }"
+        ></i>
+      </template>
+    </el-input>
+    <span class="el-cascader__label" v-show="inputValue === ''">{{displayValue}}</span>
+  </span>
+</template>
+
+<script>
+import Vue from 'vue';
+import ElCascaderMenu from './menu';
+import ElInput from 'element-ui/packages/input';
+import Popper from 'element-ui/src/utils/vue-popper';
+import Clickoutside from 'element-ui/src/utils/clickoutside';
+import emitter from 'element-ui/src/mixins/emitter';
+import Locale from 'element-ui/src/mixins/locale';
+
+const popperMixin = {
+  props: {
+    placement: {
+      type: String,
+      default: 'bottom-start'
+    },
+    appendToBody: Popper.props.appendToBody,
+    offset: Popper.props.offset,
+    boundariesPadding: Popper.props.boundariesPadding,
+    popperOptions: Popper.props.popperOptions
+  },
+  methods: Popper.methods,
+  data: Popper.data,
+  beforeDestroy: Popper.beforeDestroy
+};
+
+export default {
+  name: 'ElCascader',
+
+  directives: { Clickoutside },
+
+  mixins: [popperMixin, emitter, Locale],
+
+  components: {
+    ElInput
+  },
+
+  props: {
+    options: {
+      type: Array,
+      required: true
+    },
+    value: {
+      type: Array,
+      default() {
+        return [];
+      }
+    },
+    placeholder: String,
+    disabled: Boolean,
+    clearable: {
+      type: Boolean,
+      default: true
+    },
+    changeOnSelect: Boolean,
+    popperClass: String,
+    expandTrigger: {
+      type: String,
+      default: 'click'
+    },
+    filterable: Boolean,
+    size: String
+  },
+
+  data() {
+    return {
+      currentValue: this.value,
+      displayValue: this.value.join('/'),
+      menuVisible: false,
+      inputHover: false,
+      inputValue: '',
+      flatOptions: this.filterable && this.flattenOptions(this.options)
+    };
+  },
+
+  watch: {
+    menuVisible(value) {
+      value ? this.showMenu() : this.hideMenu();
+    },
+    value(value) {
+      this.currentValue = value;
+    },
+    currentValue(value) {
+      this.displayValue = value.join('/');
+      this.dispatch('ElFormItem', 'el.form.change', [value]);
+    },
+    options(value) {
+      this.menu.options = value;
+    }
+  },
+
+  methods: {
+    showMenu() {
+      if (!this.menu) {
+        this.menu = new Vue(ElCascaderMenu).$mount();
+        this.menu.options = this.options;
+        this.menu.expandTrigger = this.expandTrigger;
+        this.menu.changeOnSelect = this.changeOnSelect;
+        this.menu.popperClass = this.popperClass;
+        this.popperElm = this.menu.$el;
+      }
+
+      this.menu.value = this.currentValue.slice(0);
+      this.menu.visible = true;
+      this.menu.options = this.options;
+      this.menu.$on('pick', this.handlePick);
+      this.updatePopper();
+      this.$nextTick(_ => {
+        this.menu.inputWidth = this.$refs.input.$el.offsetWidth - 2;
+      });
+    },
+    hideMenu() {
+      this.inputValue = '';
+      this.menu.visible = false;
+    },
+    handlePick(value, close = true) {
+      this.currentValue = value;
+      this.$emit('input', value);
+      this.$emit('change', value);
+
+      if (close) {
+        this.menuVisible = false;
+      }
+    },
+    handleInputChange(value) {
+      if (!this.menuVisible) return;
+      const flatOptions = this.flatOptions;
+
+      if (!value) {
+        this.menu.options = this.options;
+        return;
+      }
+
+      let filteredFlatOptions = flatOptions.filter(optionsStack => {
+        return optionsStack.some(option => option.label.indexOf(value) > -1);
+      });
+
+      if (filteredFlatOptions.length > 0) {
+        filteredFlatOptions = filteredFlatOptions.map(optionStack => {
+          return {
+            __IS__FLAT__OPTIONS: true,
+            value: optionStack.map(item => item.value),
+            label: this.renderFilteredOptionLabel(value, optionStack)
+          };
+        });
+      } else {
+        filteredFlatOptions = [{
+          __IS__FLAT__OPTIONS: true,
+          label: this.t('el.cascader.noMatch'),
+          value: '',
+          disabled: true
+        }];
+      }
+      this.menu.options = filteredFlatOptions;
+    },
+    renderFilteredOptionLabel(inputValue, optionsStack) {
+      return optionsStack.map(({ label }, index) => {
+        const node = label.indexOf(inputValue) > -1 ? this.highlightKeyword(label, inputValue) : label;
+        return index === 0 ? node : [' / ', node];
+      });
+    },
+    highlightKeyword(label, keyword) {
+      const h = this._c;
+      return label.split(keyword)
+        .map((node, index) => index === 0 ? node : [
+          h('span', { class: { 'el-cascader-menu__item__keyword': true }}, [this._v(keyword)]),
+          node
+        ]);
+    },
+    flattenOptions(options, ancestor = []) {
+      let flatOptions = [];
+      options.forEach((option) => {
+        const optionsStack = ancestor.concat(option);
+        if (!option.children) {
+          flatOptions.push(optionsStack);
+        } else {
+          flatOptions = flatOptions.concat(this.flattenOptions(option.children, optionsStack));
+        }
+      });
+      return flatOptions;
+    },
+    clearValue(ev) {
+      ev.stopPropagation();
+      this.handlePick([], true);
+    },
+    handleClickoutside() {
+      this.menuVisible = false;
+    },
+    handleClick() {
+      if (this.disabled) return;
+      if (this.filterable) {
+        this.menuVisible = true;
+        return;
+      }
+      this.menuVisible = !this.menuVisible;
+    }
+  }
+};
+</script>

packages/cascader/src/menu.vue

+<script>
+  export default {
+    name: 'ElCascaderMenu',
+
+    data() {
+      return {
+        inputWidth: 0,
+        options: [],
+        visible: false,
+        activeValue: [],
+        value: [],
+        expandTrigger: 'click',
+        changeOnSelect: false,
+        popperClass: ''
+      };
+    },
+
+    watch: {
+      visible(value) {
+        if (value) {
+          this.activeValue = this.value;
+        }
+      },
+      value: {
+        immediate: true,
+        handler(value) {
+          this.activeValue = value;
+        }
+      }
+    },
+
+    computed: {
+      activeOptions: {
+        cache: false,
+        get() {
+          const activeValue = this.activeValue;
+
+          const loadActiveOptions = (options, activeOptions = []) => {
+            const level = activeOptions.length;
+            activeOptions[level] = options;
+            let active = activeValue[level];
+            if (active) {
+              options = options.filter(option => option.value === active)[0];
+              if (options && options.children) {
+                loadActiveOptions(options.children, activeOptions);
+              }
+            }
+            return activeOptions;
+          };
+
+          return loadActiveOptions(this.options);
+        }
+      }
+    },
+
+    methods: {
+      select(item, menuIndex) {
+        if (item.__IS__FLAT__OPTIONS) {
+          this.activeValue = item.value;
+        } else {
+          this.activeValue.splice(menuIndex, 1, item.value);
+        }
+        this.$emit('pick', this.activeValue);
+      },
+      activeItem(item, menuIndex) {
+        const len = this.activeOptions.length;
+        this.activeValue.splice(menuIndex, len, item.value);
+        this.activeOptions.splice(menuIndex + 1, len, item.children);
+        if (this.changeOnSelect) this.$emit('pick', this.activeValue, false);
+      }
+    },
+
+    render(h) {
+      const {
+        activeValue,
+        activeOptions,
+        visible,
+        expandTrigger,
+        popperClass
+      } = this;
+
+      const menus = this._l(activeOptions, (menu, menuIndex) => {
+        let isFlat = false;
+        const items = this._l(menu, item => {
+          const events = {
+            on: {}
+          };
+
+          if (item.__IS__FLAT__OPTIONS) isFlat = true;
+
+          if (!item.disabled) {
+            if (item.children) {
+              let triggerEvent = {
+                click: 'click',
+                hover: 'mouseenter'
+              }[expandTrigger];
+              events.on[triggerEvent] = () => { this.activeItem(item, menuIndex); };
+            } else {
+              events.on.click = () => { this.select(item, menuIndex); };
+            }
+          }
+
+          return (
+            <li
+              class={{
+                'el-cascader-menu__item': true,
+                'el-cascader-menu__item--extensible': item.children,
+                'is-active': item.value === activeValue[menuIndex],
+                'is-disabled': item.disabled
+              }}
+              {...events}
+            >
+              {item.label}
+            </li>
+          );
+        });
+        let menuStyle = {};
+        if (isFlat) {
+          menuStyle.width = this.inputWidth + 'px';
+        }
+
+        return (
+          <ul
+            class={{
+              'el-cascader-menu': true,
+              'el-cascader-menu--flexible': isFlat
+            }}
+            style={menuStyle}>
+            {items}
+          </ul>
+        );
+      });
+      return (
+        <transition name="el-zoom-in-top">
+          <div
+            v-show={visible}
+            class={[
+              'el-cascader-menus',
+              popperClass
+            ]}
+          >
+            {menus}
+          </div>
+        </transition>
+      );
+    }
+  };
+</script>
\ No newline at end of file

packages/theme-default/src/cascader.css

 @charset "UTF-8";
 @import "./input.css";
 @import "./common/var.css";
-/*@import "./core/dropdown.css";*/
 
-@component-namespace element {
+@component-namespace el {
 
   @b cascader {
     display: inline-block;
     position: relative;
+    background-color: #fff;
 
-    @e dropdown {
-      background-color: var(--cascader-menu-fill);
-      border: var(--cascader-menu-border);
-      border-radius: var(--cascader-menu-radius);
-      box-shadow: var(--cascader-menu-submenu-shadow);
-      margin-top: 5px;
-      max-height: var(--cascader-height);
+    .el-input,
+    .el-input__inner {
+      cursor: pointer;
+      background-color: transparent;
+      z-index: 1;
+    }
+
+    .el-input__icon {
+      transition: none;
+    }
+
+    .el-icon-caret-bottom {
+      transition: transform .3s;
+
+      @when reverse {
+        transform: rotateZ(180deg);
+      }
+    }
+
+    @e label {
       position: absolute;
+      left: 0;
+      top: 0;
+      height: 100%;
+      line-height: 34px;
+      padding: 0 15px 0 10px;
+      color: var(--input-color);
+      width: 100%;
       white-space: nowrap;
-      z-index: 10;
+      text-overflow: ellipsis;
+      overflow: hidden;
+      box-sizing: border-box;
+      cursor: pointer;
     }
 
-    @e wrap {
-      overflow: hidden;
+    @m large {
+      font-size: var(--input-large-font-size);
+
+      .el-cascader__label {
+        line-height: calc(var(--input-large-height) - 2);
+      }
     }
+    @m small {
+      font-size: var(--input-small-font-size);
+
+      .el-cascader__label {
+        line-height: calc(var(--input-small-height) - 2);
+      }
+    }
+  }
 
-    @e menu {
-      border: 0;
-      box-shadow: none;
-      display: inline-block;
-      margin: 0;
+  @b cascader-menus {
+    white-space: nowrap;
+    background: #fff;
+    position: absolute;
+    margin: 5px 0;
+    z-index: 1001;
+    border: var(--select-dropdown-border);
+    border-radius: var(--border-radius-small);
+    overflow: hidden;
+    box-shadow: var(--select-dropdown-shadow);
+  }
+
+  @b cascader-menu {
+    display: inline-block;
+    vertical-align: top;
+    height: 180px;
+    overflow: auto;
+    border-right: var(--select-dropdown-border);
+    background-color: var(--select-dropdown-background);
+    box-sizing: border-box;
+    margin: 0;
+    padding: 0;
+    min-width: 110px;
+
+    &:last-child {
+      border-right: 0;
+    }
+
+    @e item {
+      font-size: var(--select-font-size);
+      padding: 8px 30px 8px 10px;
       position: relative;
-      vertical-align: top;
-
-      &::before {
-        border-left: var(--cascader-menu-border);
-        content: " ";
-        height: var(--cascader-height);
-        left: 0;
-        position: absolute;
+      white-space: nowrap;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      color: var(--select-option-color);
+      height: var(--select-option-height);
+      line-height: 1.5;
+      box-sizing: border-box;
+      cursor: pointer;
+
+      @e keyword {
+        color: var(--color-danger);
+      }
+      
+      @m extensible {
+        &:after {
+          font-family: 'element-icons';
+          content: "\e602";
+          font-size: 12px;
+          transform: scale(0.8);
+          color: rgb(191, 203, 217);
+          position: absolute;
+          right: 10px;
+          margin-top: 1px;
+        }
+      }
+
+      @when disabled {
+        color: var(--select-option-disabled-color);
+        background-color: var(--select-option-disabled-background);
+        cursor: not-allowed;
+
+        &:hover {
+          background-color: var(--color-white);
+        }
+      }
+
+      @when active {
+        color: var(--color-white);
+        background-color: var(--select-option-selected);
+
+        &.hover {
+          background-color: var(--select-option-selected-hover);
+        }
+      }
+
+      &:hover {
+        background-color: var(--select-option-hover-background);
+      }
+
+      &.selected {
+        color: var(--color-white);
+        background-color: var(--select-option-selected);
+
+        &.hover {
+          background-color: var(--select-option-selected-hover);
+        }
+      }
+    }
+
+    @m flexible {
+      height: auto;
+      max-height: 180px;
+      overflow: auto;
+
+      .el-cascader-menu__item {
+        overflow: visible;
       }
     }
   }

packages/theme-default/src/common/var.css

@@ -161,6 +161,7 @@
 
   --select-option-color: var(--link-color);
   --select-option-disabled-color: var(--color-extra-light-silver);
+  --select-option-disabled-background: var(--color-white);
   --select-option-height: 36px;
   --select-option-hover-background: var(--color-light-gray);
   --select-option-selected: var(--color-primary);

packages/theme-default/src/index.css

@@ -44,3 +44,4 @@
 @import "./carousel.css";
 @import "./carousel-item.css";
 @import "./collapse.css";
+@import "./cascader.css";

src/index.js

@@ -60,6 +60,7 @@ import Scrollbar from '../packages/scrollbar';
 import CarouselItem from '../packages/carousel-item';
 import Collapse from '../packages/collapse';
 import CollapseItem from '../packages/collapse-item';
+import Cascader from '../packages/cascader';
 import locale from 'element-ui/src/locale';
 
 const components = [
@@ -118,7 +119,8 @@ const components = [
   Scrollbar,
   CarouselItem,
   Collapse,
-  CollapseItem
+  CollapseItem,
+  Cascader
 ];
 
 const install = function(Vue, opts = {}) {
@@ -211,5 +213,6 @@ module.exports = {
   Scrollbar,
   CarouselItem,
   Collapse,
-  CollapseItem
+  CollapseItem,
+  Cascader
 };

src/locale/lang/en.js

@@ -56,6 +56,10 @@ export default {
       noData: 'No data',
       placeholder: 'Select'
     },
+    cascader: {
+      noMatch: 'No matching data',
+      placeholder: 'Select'
+    },
     pagination: {
       goto: 'Go to',
       pagesize: '/page',

src/locale/lang/zh-CN.js

@@ -56,6 +56,10 @@ export default {
       noData: '无数据',
       placeholder: '请选择'
     },
+    cascader: {
+      noMatch: '无匹配数据',
+      placeholder: '请选择'
+    },
     pagination: {
       goto: '前往',
       pagesize: '条/页',

src/utils/vue-popper.js

@@ -83,6 +83,7 @@ export default {
           this.$slots.reference[0]) {
         reference = this.referenceElm = this.$slots.reference[0].elm;
       }
+
       if (!popper || !reference) return;
       if (this.visibleArrow) this.appendArrow(popper);
       if (this.appendToBody) document.body.appendChild(this.popperElm);