@zkwq/business 0.0.4 → 0.0.6

package/src/components/base/ui/cascader/cascader.vue

@@ -1,650 +0,0 @@
-<template>
-  <div
-    ref="reference"
-    :class="[
-      'base-cascader',
-      realSize && `base-cascader--${realSize}`,
-      { 'is-disabled': isDisabled }
-    ]"
-    v-clickoutside="() => toggleDropDownVisible(false)"
-    @mouseenter="inputHover = true"
-    @mouseleave="inputHover = false"
-    @click="() => toggleDropDownVisible(readonly ? undefined : true)"
-    @keydown="handleKeyDown">
-
-    <base-input
-      ref="input"
-      v-model="multiple ? presentText : inputValue"
-      :size="realSize"
-      :placeholder="placeholder"
-      :readonly="readonly"
-      :disabled="isDisabled"
-      :validate-event="false"
-      :class="{ 'is-focus': dropDownVisible }"
-      @focus="handleFocus"
-      @blur="handleBlur"
-      @input="handleInput">
-      <template slot="suffix">
-        <i
-          v-if="clearBtnVisible"
-          key="clear"
-          class="base-input__icon base-icon-circle-close"
-          @click.stop="handleClear"></i>
-        <i
-          v-else
-          key="arrow-down"
-          :class="[
-            'base-input__icon',
-            'base-icon-arrow-down',
-            dropDownVisible && 'is-reverse'
-          ]"
-          @click.stop="toggleDropDownVisible()"></i>
-      </template>
-    </base-input>
-
-    <div v-if="multiple" class="base-cascader__tags">
-      <base-tag
-        v-for="(tag, index) in presentTags"
-        :key="tag.key"
-        type="info"
-        :size="tagSize"
-        :hit="tag.hitState"
-        :closable="tag.closable"
-        disable-transitions
-        @close="deleteTag(index)">
-        <span>{{ tag.text }}</span>
-      </base-tag>
-      <input
-        v-if="filterable && !isDisabled"
-        v-modbase.trim="inputValue"
-        type="text"
-        class="base-cascader__search-input"
-        :placeholder="presentTags.length ? '' : placeholder"
-        @input="e => handleInput(inputValue, e)"
-        @click.stop="toggleDropDownVisible(true)"
-        @keydown.delete="handleDelete">
-    </div>
-
-    <transition name="base-zoom-in-top" @after-leave="handleDropdownLeave">
-      <div
-        v-show="dropDownVisible"
-        ref="popper"
-        :class="['base-popper', 'base-cascader__dropdown', popperClass]">
-        <base-cascader-panel
-          ref="panel"
-          v-show="!filtering"
-          v-model="checkedValue"
-          :options="options"
-          :props="config"
-          :border="false"
-          :render-label="$scopedSlots.default"
-          @expand-change="handleExpandChange"
-          @close="toggleDropDownVisible(false)"></base-cascader-panel>
-        <base-scrollbar
-          ref="suggestionPanel"
-          v-if="filterable"
-          v-show="filtering"
-          tag="ul"
-          class="base-cascader__suggestion-panel"
-          view-class="base-cascader__suggestion-list"
-          @keydown.native="handleSuggestionKeyDown">
-          <template v-if="suggestions.length">
-            <li
-              v-for="(item, index) in suggestions"
-              :key="item.uid"
-              :class="[
-                'base-cascader__suggestion-item',
-                item.checked && 'is-checked'
-              ]"
-              :tabindex="-1"
-              @click="handleSuggestionClick(index)">
-              <span>{{ item.text }}</span>
-              <i v-if="item.checked" class="base-icon-check"></i>
-            </li>
-          </template>
-          <slot v-else name="empty">
-            <li class="base-cascader__empty-text">{{ t('base.cascader.noMatch') }}</li>
-          </slot>
-        </base-scrollbar>
-      </div>
-    </transition>
-  </div>
-</template>
-
-<script>
-import Popper from '../util/vue-popper';
-import Clickoutside from '../util/clickoutside';
-import Emitter from '../mixin/emitter';
-import Locale from '../mixin/locale';
-import Migrating from '../mixin/migrating';
-import BaseInput from '../input/Input';
-import BaseTag from '../tag/Tag';
-import BaseScrollbar from '../scrollbar/index';
-import BaseCascaderPanel from '../cascader-panel/cascader-panel';
-import AriaUtils from '../util/aria-utils';
-import { t } from '../locale/index';
-import { isEqual, isEmpty, kebabCase } from '../util/index';
-import { isUndefined, isFunction } from '../util/types';
-import { isDef } from '../util/shared';
-import { addResizeListener, removeResizeListener } from '../util/resize-events';
-import debounce from '../util/debounce';
-
-const { keys: KeyCode } = AriaUtils;
-const MigratingProps = {
-  expandTrigger: {
-    newProp: 'expandTrigger',
-    type: String
-  },
-  changeOnSelect: {
-    newProp: 'checkStrictly',
-    type: Boolean
-  },
-  hoverThreshold: {
-    newProp: 'hoverThreshold',
-    type: Number
-  }
-};
-
-const PopperMixin = {
-  props: {
-    placement: {
-      type: String,
-      default: 'bottom-start'
-    },
-    appendToBody: Popper.props.appendToBody,
-    visibleArrow: {
-      type: Boolean,
-      default: true
-    },
-    arrowOffset: Popper.props.arrowOffset,
-    offset: Popper.props.offset,
-    boundariesPadding: Popper.props.boundariesPadding,
-    popperOptions: Popper.props.popperOptions
-  },
-  methods: Popper.methods,
-  data: Popper.data,
-  beforeDestroy: Popper.beforeDestroy
-};
-
-const InputSizeMap = {
-  medium: 36,
-  small: 32,
-  mini: 28
-};
-
-export default {
-  name: 'BaseCascader',
-
-  directives: { Clickoutside },
-
-  mixins: [PopperMixin, Emitter, Locale, Migrating],
-
-  inject: {
-    baseForm: {
-      default: ''
-    },
-    baseFormItem: {
-      default: ''
-    }
-  },
-
-  components: {
-    BaseInput,
-    BaseTag,
-    BaseScrollbar,
-    BaseCascaderPanel
-  },
-
-  props: {
-    value: {},
-    options: Array,
-    props: Object,
-    size: String,
-    placeholder: {
-      type: String,
-      default: () => t('base.cascader.placeholder')
-    },
-    disabled: Boolean,
-    clearable: Boolean,
-    filterable: Boolean,
-    filterMethod: Function,
-    separator: {
-      type: String,
-      default: ' / '
-    },
-    showAllLevels: {
-      type: Boolean,
-      default: true
-    },
-    collapseTags: Boolean,
-    debounce: {
-      type: Number,
-      default: 300
-    },
-    beforeFilter: {
-      type: Function,
-      default: () => (() => {})
-    },
-    popperClass: String
-  },
-
-  data() {
-    return {
-      dropDownVisible: false,
-      checkedValue: this.value || null,
-      inputHover: false,
-      inputValue: null,
-      presentText: null,
-      presentTags: [],
-      checkedNodes: [],
-      filtering: false,
-      suggestions: [],
-      inputInitialHeight: 0,
-      pressDeleteCount: 0
-    };
-  },
-
-  computed: {
-    realSize() {
-      const _baseFormItemSize = (this.baseFormItem || {}).baseFormItemSize;
-      return this.size || _baseFormItemSize || (this.$ELEMENT || {}).size;
-    },
-    tagSize() {
-      return ['small', 'mini'].indexOf(this.realSize) > -1
-        ? 'mini'
-        : 'small';
-    },
-    isDisabled() {
-      return this.disabled || (this.baseForm || {}).disabled;
-    },
-    config() {
-      const config = this.props || {};
-      const { $attrs } = this;
-
-      Object
-        .keys(MigratingProps)
-        .forEach(oldProp => {
-          const { newProp, type } = MigratingProps[oldProp];
-          let oldValue = $attrs[oldProp] || $attrs[kebabCase(oldProp)];
-          if (isDef(oldProp) && !isDef(config[newProp])) {
-            if (type === Boolean && oldValue === '') {
-              oldValue = true;
-            }
-            config[newProp] = oldValue;
-          }
-        });
-
-      return config;
-    },
-    multiple() {
-      return this.config.multiple;
-    },
-    leafOnly() {
-      return !this.config.checkStrictly;
-    },
-    readonly() {
-      return !this.filterable || this.multiple;
-    },
-    clearBtnVisible() {
-      if (!this.clearable || this.isDisabled || this.filtering || !this.inputHover) {
-        return false;
-      }
-
-      return this.multiple
-        ? !!this.checkedNodes.filter(node => !node.isDisabled).length
-        : !!this.presentText;
-    },
-    panel() {
-      return this.$refs.panel;
-    }
-  },
-
-  watch: {
-    disabled() {
-      this.computePresentContent();
-    },
-    value(val) {
-      if (!isEqual(val, this.checkedValue)) {
-        this.checkedValue = val;
-        this.computePresentContent();
-      }
-    },
-    checkedValue(val) {
-      const { value, dropDownVisible } = this;
-      const { checkStrictly, multiple } = this.config;
-
-      if (!isEqual(val, value) || isUndefined(value)) {
-        this.computePresentContent();
-        // hide dropdown when single mode
-        if (!multiple && !checkStrictly && dropDownVisible) {
-          this.toggleDropDownVisible(false);
-        }
-
-        this.$emit('input', val);
-        this.$emit('change', val);
-        this.dispatch('BaseFormItem', 'base.form.change', [val]);
-      }
-    },
-    options: {
-      handler: function() {
-        this.$nextTick(this.computePresentContent);
-      },
-      deep: true
-    },
-    presentText(val) {
-      this.inputValue = val;
-    },
-    presentTags(val, oldVal) {
-      if (this.multiple && (val.length || oldVal.length)) {
-        this.$nextTick(this.updateStyle);
-      }
-    },
-    filtering(val) {
-      this.$nextTick(this.updatePopper);
-    }
-  },
-
-  mounted() {
-    const { input } = this.$refs;
-    if (input && input.$el) {
-      this.inputInitialHeight = input.$el.offsetHeight || InputSizeMap[this.realSize] || 40;
-    }
-
-    if (!isEmpty(this.value)) {
-      this.computePresentContent();
-    }
-
-    this.filterHandler = debounce(this.debounce, () => {
-      const { inputValue } = this;
-
-      if (!inputValue) {
-        this.filtering = false;
-        return;
-      }
-
-      const before = this.beforeFilter(inputValue);
-      if (before && before.then) {
-        before.then(this.getSuggestions);
-      } else if (before !== false) {
-        this.getSuggestions();
-      } else {
-        this.filtering = false;
-      }
-    });
-
-    addResizeListener(this.$el, this.updateStyle);
-  },
-
-  beforeDestroy() {
-    removeResizeListener(this.$el, this.updateStyle);
-  },
-
-  methods: {
-    getMigratingConfig() {
-      return {
-        props: {
-          'expand-trigger': 'expand-trigger is removed, use `props.expandTrigger` instead.',
-          'change-on-select': 'change-on-select is removed, use `props.checkStrictly` instead.',
-          'hover-threshold': 'hover-threshold is removed, use `props.hoverThreshold` instead'
-        },
-        events: {
-          'active-item-change': 'active-item-change is renamed to expand-change'
-        }
-      };
-    },
-    toggleDropDownVisible(visible) {
-      if (this.isDisabled) return;
-
-      const { dropDownVisible } = this;
-      const { input } = this.$refs;
-      visible = isDef(visible) ? visible : !dropDownVisible;
-      if (visible !== dropDownVisible) {
-        this.dropDownVisible = visible;
-        if (visible) {
-          this.$nextTick(() => {
-            this.updatePopper();
-            this.panel.scrollIntoView();
-          });
-        }
-        input.$refs.input.setAttribute('aria-expanded', visible);
-        this.$emit('visible-change', visible);
-      }
-    },
-    handleDropdownLeave() {
-      this.filtering = false;
-      this.inputValue = this.presentText;
-    },
-    handleKeyDown(event) {
-      switch (event.keyCode) {
-        case KeyCode.enter:
-          this.toggleDropDownVisible();
-          break;
-        case KeyCode.down:
-          this.toggleDropDownVisible(true);
-          this.focusFirstNode();
-          event.preventDefault();
-          break;
-        case KeyCode.esc:
-        case KeyCode.tab:
-          this.toggleDropDownVisible(false);
-          break;
-      }
-    },
-    handleFocus(e) {
-      this.$emit('focus', e);
-    },
-    handleBlur(e) {
-      this.$emit('blur', e);
-    },
-    handleInput(val, event) {
-      !this.dropDownVisible && this.toggleDropDownVisible(true);
-
-      if (event && event.isComposing) return;
-      if (val) {
-        this.filterHandler();
-      } else {
-        this.filtering = false;
-      }
-    },
-    handleClear() {
-      this.presentText = '';
-      this.panel.clearCheckedNodes();
-    },
-    handleExpandChange(value) {
-      this.$nextTick(this.updatePopper.bind(this));
-      this.$emit('expand-change', value);
-      this.$emit('active-item-change', value); // Deprecated
-    },
-    focusFirstNode() {
-      this.$nextTick(() => {
-        const { filtering } = this;
-        const { popper, suggestionPanel } = this.$refs;
-        let firstNode = null;
-
-        if (filtering && suggestionPanel) {
-          firstNode = suggestionPanbase.$el.querySelector('.base-cascader__suggestion-item');
-        } else {
-          const firstMenu = popper.querySelector('.base-cascader-menu');
-          firstNode = firstMenu.querySelector('.base-cascader-node[tabindex="-1"]');
-        }
-
-        if (firstNode) {
-          firstNode.focus();
-          !filtering && firstNode.click();
-        }
-      });
-    },
-    computePresentContent() {
-      // nextTick is required, because checked nodes may not change right now
-      this.$nextTick(() => {
-        if (this.config.multiple) {
-          this.computePresentTags();
-          this.presentText = this.presentTags.length ? ' ' : null;
-        } else {
-          this.computePresentText();
-        }
-      });
-    },
-    computePresentText() {
-      const { checkedValue, config } = this;
-      if (!isEmpty(checkedValue)) {
-        const node = this.panel.getNodeByValue(checkedValue);
-        if (node && (config.checkStrictly || node.isLeaf)) {
-          this.presentText = node.getText(this.showAllLevels, this.separator);
-          return;
-        }
-      }
-      this.presentText = null;
-    },
-    computePresentTags() {
-      const { isDisabled, leafOnly, showAllLevels, separator, collapseTags } = this;
-      const checkedNodes = this.getCheckedNodes(leafOnly);
-      const tags = [];
-
-      const genTag = node => ({
-        node,
-        key: node.uid,
-        text: node.getText(showAllLevels, separator),
-        hitState: false,
-        closable: !isDisabled && !node.isDisabled
-      });
-
-      if (checkedNodes.length) {
-        const [first, ...rest] = checkedNodes;
-        const restCount = rest.length;
-        tags.push(genTag(first));
-
-        if (restCount) {
-          if (collapseTags) {
-            tags.push({
-              key: -1,
-              text: `+ ${restCount}`,
-              closable: false
-            });
-          } else {
-            rest.forEach(node => tags.push(genTag(node)));
-          }
-        }
-      }
-
-      this.checkedNodes = checkedNodes;
-      this.presentTags = tags;
-    },
-    getSuggestions() {
-      let { filterMethod } = this;
-
-      if (!isFunction(filterMethod)) {
-        filterMethod = (node, keyword) => node.text.includes(keyword);
-      }
-
-      const suggestions = this.panel.getFlattedNodes(this.leafOnly)
-        .filter(node => {
-          if (node.isDisabled) return false;
-          node.text = node.getText(this.showAllLevels, this.separator) || '';
-          return filterMethod(node, this.inputValue);
-        });
-
-      if (this.multiple) {
-        this.presentTags.forEach(tag => {
-          tag.hitState = false;
-        });
-      } else {
-        suggestions.forEach(node => {
-          node.checked = isEqual(this.checkedValue, node.getValueByOption());
-        });
-      }
-
-      this.filtering = true;
-      this.suggestions = suggestions;
-      this.$nextTick(this.updatePopper);
-    },
-    handleSuggestionKeyDown(event) {
-      const { keyCode, target } = event;
-      switch (keyCode) {
-        case KeyCode.enter:
-          target.click();
-          break;
-        case KeyCode.up:
-          const prev = target.previousElementSibling;
-          prev && prev.focus();
-          break;
-        case KeyCode.down:
-          const next = target.nextElementSibling;
-          next && next.focus();
-          break;
-        case KeyCode.esc:
-        case KeyCode.tab:
-          this.toggleDropDownVisible(false);
-          break;
-      }
-    },
-    handleDelete() {
-      const { inputValue, pressDeleteCount, presentTags } = this;
-      const lastIndex = presentTags.length - 1;
-      const lastTag = presentTags[lastIndex];
-      this.pressDeleteCount = inputValue ? 0 : pressDeleteCount + 1;
-
-      if (!lastTag) return;
-
-      if (this.pressDeleteCount) {
-        if (lastTag.hitState) {
-          this.deleteTag(lastIndex);
-        } else {
-          lastTag.hitState = true;
-        }
-      }
-    },
-    handleSuggestionClick(index) {
-      const { multiple } = this;
-      const targetNode = this.suggestions[index];
-
-      if (multiple) {
-        const { checked } = targetNode;
-        targetNode.doCheck(!checked);
-        this.panel.calculateMultiCheckedValue();
-      } else {
-        this.checkedValue = targetNode.getValueByOption();
-        this.toggleDropDownVisible(false);
-      }
-    },
-    deleteTag(index) {
-      const { checkedValue } = this;
-      const val = checkedValue[index];
-      this.checkedValue = checkedValue.filter((n, i) => i !== index);
-      this.$emit('remove-tag', val);
-    },
-    updateStyle() {
-      const { $el, inputInitialHeight } = this;
-      if (this.$isServer || !$el) return;
-
-      const { suggestionPanel } = this.$refs;
-      const inputInner = $el.querySelector('.base-input__inner');
-
-      if (!inputInner) return;
-
-      const tags = $el.querySelector('.base-cascader__tags');
-      let suggestionPanelEl = null;
-
-      if (suggestionPanel && (suggestionPanelEl = suggestionPanbase.$el)) {
-        const suggestionList = suggestionPanelEl.querySelector('.base-cascader__suggestion-list');
-        suggestionList.style.minWidth = inputInner.offsetWidth + 'px';
-      }
-
-      if (tags) {
-        const { offsetHeight } = tags;
-        const height = Math.max(offsetHeight + 6, inputInitialHeight) + 'px';
-        inputInner.style.height = height;
-        this.updatePopper();
-      }
-    },
-
-    /**
-     * public methods
-    */
-    getCheckedNodes(leafOnly) {
-      return this.panel.getCheckedNodes(leafOnly);
-    }
-  }
-};
-</script>
-