@zkwq/business 0.0.5 → 0.0.6

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@zkwq/business",
-  "version": "0.0.5",
+  "version": "0.0.6",
   "description": "中科文情业务组件库",
   "type": "module",
   "main": "dist/index.umd.min.cjs",

package/src/components/base/ui/alert/Alert.vue

@@ -1,94 +0,0 @@
-<template>
-  <transition name="base-alert-fade">
-    <div
-      class="base-alert"
-      :class="[typeClass, center ? 'is-center' : '', 'is-' + effect]"
-      v-show="visible"
-      role="alert"
-    >
-      <i class="base-alert__icon" :class="[ iconClass, isBigIcon ]" v-if="showIcon"></i>
-      <div class="base-alert__content">
-        <span class="base-alert__title" :class="[ isBoldTitle ]" v-if="title || $slots.title">
-          <slot name="title">{{ title }}</slot>
-        </span>
-        <p class="base-alert__description" v-if="$slots.default && !description"><slot></slot></p>
-        <p class="base-alert__description" v-if="description && !$slots.default">{{ description }}</p>
-        <i class="base-alert__closebtn" :class="{ 'is-customed': closeText !== '', 'base-icon-close': closeText === '' }" v-show="closable" @click="close()">{{closeText}}</i>
-      </div>
-    </div>
-  </transition>
-</template>
-
-<script type="text/babel">
-const TYPE_CLASSES_MAP = {
-  'success': 'base-icon-success',
-  'warning': 'base-icon-warning',
-  'error': 'base-icon-error'
-}
-export default {
-  name: 'BaseAlert',
-
-  props: {
-    title: {
-      type: String,
-      default: ''
-    },
-    description: {
-      type: String,
-      default: ''
-    },
-    type: {
-      type: String,
-      default: 'info'
-    },
-    closable: {
-      type: Boolean,
-      default: true
-    },
-    closeText: {
-      type: String,
-      default: ''
-    },
-    showIcon: Boolean,
-    center: Boolean,
-    effect: {
-      type: String,
-      default: 'light',
-      validator: function(value) {
-        return ['light', 'dark'].indexOf(value) !== -1
-      }
-    }
-  },
-
-  data() {
-    return {
-      visible: true
-    }
-  },
-
-  methods: {
-    close () {
-      this.visible = false
-      this.$emit('close')
-    }
-  },
-
-  computed: {
-    typeClass () {
-      return `base-alert--${ this.type }`
-    },
-
-    iconClass () {
-      return TYPE_CLASSES_MAP[this.type] || 'base-icon-info'
-    },
-
-    isBigIcon () {
-      return this.description || this.$slots.default ? 'is-big' : ''
-    },
-
-    isBoldTitle () {
-      return this.description || this.$slots.default ? 'is-bold' : ''
-    }
-  }
-}
-</script>

package/src/components/base/ui/autocomplete/autocomplete-suggestions.vue

@@ -1,77 +0,0 @@
-<template>
-  <transition name="base-zoom-in-top" @after-leave="doDestroy">
-    <div
-      v-show="showPopper"
-      class="base-autocomplete-suggestion base-popper"
-      :class="{ 'is-loading': !parent.hideLoading && parent.loading }"
-      :style="{ width: dropdownWidth }"
-      role="region">
-      <base-scrollbar
-        alone
-        tag="ul"
-        wrap-class="base-autocomplete-suggestion__wrap"
-        view-class="base-autocomplete-suggestion__list">
-        <li v-if="!parent.hideLoading && parent.loading"><i class="base-icon-loading"></i></li>
-        <slot v-else>
-        </slot>
-      </base-scrollbar>
-    </div>
-  </transition>
-</template>
-<script>
-  import Popper from '../util/vue-popper';
-  import Emitter from '../mixin/emitter';
-  import BaseScrollbar from '../scrollbar';
-
-  export default {
-    components: { BaseScrollbar },
-    mixins: [Popper, Emitter],
-
-    componentName: 'BaseAutocompleteSuggestions',
-
-    data() {
-      return {
-        parent: this.$parent,
-        dropdownWidth: ''
-      };
-    },
-
-    props: {
-      options: {
-        default() {
-          return {
-            gpuAcceleration: false
-          };
-        }
-      },
-      id: String
-    },
-
-    methods: {
-      select(item) {
-        this.dispatch('BaseAutocomplete', 'item-click', item);
-      }
-    },
-
-    updated() {
-      this.$nextTick(_ => {
-        this.popperJS && this.updatePopper();
-      });
-    },
-
-    mounted() {
-      this.$parent.popperElm = this.popperElm = this.$el;
-      this.referenceElm = this.$parent.$refs.input.$refs.input || this.$parent.$refs.input.$refs.textarea;
-      this.referenceList = this.$el.querySelector('.base-autocomplete-suggestion__list');
-      this.referenceList.setAttribute('role', 'listbox');
-      this.referenceList.setAttribute('id', this.id);
-    },
-
-    created() {
-      this.$on('visible', (val, inputWidth) => {
-        this.dropdownWidth = inputWidth + 'px';
-        this.showPopper = val;
-      });
-    }
-  };
-</script>

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

@@ -1,305 +0,0 @@
-<template>
-  <div
-    class="base-autocomplete"
-    v-clickoutside="close"
-    aria-haspopup="listbox"
-    role="combobox"
-    :aria-expanded="suggestionVisible"
-    :aria-owns="id"
-  >
-    <base-input
-      ref="input"
-      :show-label="showLabel"
-      :ripple="ripple"
-      v-bind="[$props, $attrs]"
-      @input="handleInput"
-      @change="handleChange"
-      @focus="handleFocus"
-      @blur="handleBlur"
-      @clear="handleClear"
-      @keydown.up.native.prevent="highlight(highlightedIndex - 1)"
-      @keydown.down.native.prevent="highlight(highlightedIndex + 1)"
-      @keydown.enter.native="handleKeyEnter"
-      @keydown.native.tab="close"
-      @key-up-enter="handleKeyUpEnter"
-    >
-      <template slot="prepend" v-if="$slots.prepend">
-        <slot name="prepend"></slot>
-      </template>
-      <template slot="append" v-if="$slots.append">
-        <slot name="append"></slot>
-      </template>
-      <template slot="prefix" v-if="$slots.prefix">
-        <slot name="prefix"></slot>
-      </template>
-      <template slot="suffix" v-if="$slots.suffix">
-        <slot name="suffix"></slot>
-      </template>
-    </base-input>
-    <base-autocomplete-suggestions
-      :visible-arrow = "false"
-      :class="[popperClass ? popperClass : '']"
-      :popper-options="popperOptions"
-      :append-to-body="popperAppendToBody"
-      ref="suggestions"
-      :placement="placement"
-      :id="id">
-      <li
-        v-for="(item, index) in suggestions"
-        :key="index"
-        :class="{'highlighted': highlightedIndex === index}"
-        @click="select(item)"
-        :id="`${id}-item-${index}`"
-        role="option"
-        :aria-selected="highlightedIndex === index"
-      >
-        <slot :item="item">
-          {{ item[valueKey] }}
-        </slot>
-      </li>
-    </base-autocomplete-suggestions>
-  </div>
-</template>
-<script>
-  import debounce from '../util/debounce';
-  import BaseInput from '../input/Input';
-  import Clickoutside from '../util/clickoutside';
-  import BaseAutocompleteSuggestions from './autocomplete-suggestions.vue';
-  import Emitter from '../mixin/emitter';
-  import Migrating from '../mixin/migrating';
-  import { generateId } from '../util';
-  import Focus from '../mixin/focus';
-
-  export default {
-    name: 'BaseAutocomplete',
-
-    mixins: [Emitter, Focus('input'), Migrating],
-
-    inheritAttrs: false,
-
-    componentName: 'BaseAutocomplete',
-
-    components: {
-      BaseInput,
-      BaseAutocompleteSuggestions
-    },
-
-    directives: { Clickoutside },
-
-    props: {
-      valueKey: {
-        type: String,
-        default: 'value'
-      },
-      popperClass: String,
-      popperOptions: Object,
-      placeholder: String,
-      clearable: {
-        type: Boolean,
-        default: false
-      },
-      showLabel: {
-        type: Boolean,
-        default: true
-      },
-      ripple: {
-        type: Boolean,
-        default: true
-      },
-      disabled: Boolean,
-      name: String,
-      size: String,
-      value: String,
-      maxlength: Number,
-      minlength: Number,
-      autofocus: Boolean,
-      fetchSuggestions: Function,
-      triggerOnFocus: {
-        type: Boolean,
-        default: true
-      },
-      customItem: String,
-      selectWhenUnmatched: {
-        type: Boolean,
-        default: false
-      },
-      prefixIcon: String,
-      suffixIcon: String,
-      label: String,
-      debounce: {
-        type: Number,
-        default: 300
-      },
-      placement: {
-        type: String,
-        default: 'bottom-start'
-      },
-      hideLoading: Boolean,
-      popperAppendToBody: {
-        type: Boolean,
-        default: true
-      },
-      highlightFirstItem: {
-        type: Boolean,
-        default: false
-      }
-    },
-    data() {
-      return {
-        activated: false,
-        suggestions: [],
-        loading: false,
-        highlightedIndex: -1,
-        suggestionDisabled: false
-      };
-    },
-    computed: {
-      suggestionVisible() {
-        const suggestions = this.suggestions;
-        let isValidData = Array.isArray(suggestions) && suggestions.length > 0;
-        return (isValidData || this.loading) && this.activated;
-      },
-      id() {
-        return `base-autocomplete-${generateId()}`;
-      }
-    },
-    watch: {
-      suggestionVisible(val) {
-        let $input = this.getInput();
-        if ($input) {
-          this.broadcast('BaseAutocompleteSuggestions', 'visible', [val, $input.offsetWidth]);
-        }
-      }
-    },
-    methods: {
-      getMigratingConfig() {
-        return {
-          props: {
-            'custom-item': 'custom-item is removed, use scoped slot instead.',
-            'props': 'props is removed, use value-key instead.'
-          }
-        };
-      },
-      getData(queryString) {
-        if (this.suggestionDisabled) {
-          return;
-        }
-        if (!queryString || queryString.length < 2) {
-          return;
-        }
-        this.loading = true;
-        this.fetchSuggestions(queryString, (suggestions) => {
-          this.loading = false;
-          if (this.suggestionDisabled) {
-            return;
-          }
-          if (Array.isArray(suggestions)) {
-            this.suggestions = suggestions;
-            this.highlightedIndex = this.highlightFirstItem ? 0 : -1;
-          } else {
-            console.error('[Element Error][Autocomplete]autocomplete suggestions must be an array');
-          }
-        });
-      },
-      handleInput(value) {
-        this.$emit('input', value);
-        this.suggestionDisabled = false;
-        if (!this.triggerOnFocus && !value) {
-          this.suggestionDisabled = true;
-          this.suggestions = [];
-          return;
-        }
-        this.debouncedGetData(value);
-      },
-      handleChange(value) {
-        this.$emit('change', value);
-      },
-      handleFocus(event) {
-        this.activated = true;
-        this.$emit('focus', event);
-        if (this.triggerOnFocus) {
-          this.debouncedGetData(this.value);
-        }
-      },
-      handleBlur(event) {
-        this.$emit('blur', event);
-      },
-      handleKeyUpEnter() {
-        this.$emit('key-up-enter')
-      },
-      handleClear() {
-        this.activated = false;
-        this.$emit('clear');
-      },
-      close(e) {
-        this.activated = false;
-      },
-      handleKeyEnter(e) {
-        if (this.suggestionVisible && this.highlightedIndex >= 0 && this.highlightedIndex < this.suggestions.length) {
-          e.preventDefault();
-          this.select(this.suggestions[this.highlightedIndex]);
-        } else if (this.selectWhenUnmatched) {
-          this.$emit('select', {value: this.value});
-          this.$nextTick(_ => {
-            this.suggestions = [];
-            this.highlightedIndex = -1;
-          });
-        }
-      },
-      select(item) {
-        this.$emit('input', item[this.valueKey]);
-        this.$emit('select', item);
-        this.$nextTick(_ => {
-          this.suggestions = [];
-          this.highlightedIndex = -1;
-        });
-      },
-      highlight(index) {
-        if (!this.suggestionVisible || this.loading) { return; }
-        if (index < 0) {
-          this.highlightedIndex = -1;
-          return;
-        }
-        if (index >= this.suggestions.length) {
-          index = this.suggestions.length - 1;
-        }
-        const suggestion = this.$refs.suggestions.$el.querySelector('.base-autocomplete-suggestion__wrap');
-        const suggestionList = suggestion.querySelectorAll('.base-autocomplete-suggestion__list li');
-
-        let highlightItem = suggestionList[index];
-        let scrollTop = suggestion.scrollTop;
-        let offsetTop = highlightItem.offsetTop;
-
-        if (offsetTop + highlightItem.scrollHeight > (scrollTop + suggestion.clientHeight)) {
-          suggestion.scrollTop += highlightItem.scrollHeight;
-        }
-        if (offsetTop < scrollTop) {
-          suggestion.scrollTop -= highlightItem.scrollHeight;
-        }
-        this.highlightedIndex = index;
-        let $input = this.getInput();
-        $input.setAttribute('aria-activedescendant', `${this.id}-item-${this.highlightedIndex}`);
-      },
-      getInput() {
-        return this.$refs.input.getInput();
-      },
-      destroy () {
-        this.$refs.suggestions.$destroy();
-      }
-    },
-    mounted() {
-      this.debouncedGetData = debounce(this.debounce, this.getData);
-      this.$on('item-click', item => {
-        this.select(item);
-      });
-      let $input = this.getInput();
-      $input.setAttribute('role', 'textbox');
-      $input.setAttribute('aria-autocomplete', 'list');
-      $input.setAttribute('aria-controls', 'id');
-      $input.setAttribute('aria-activedescendant', `${this.id}-item-${this.highlightedIndex}`);
-    },
-    beforeDestroy() {
-      this.$refs.suggestions.$destroy();
-    }
-  };
-</script>

package/src/components/base/ui/backtop/main.vue

@@ -1,112 +0,0 @@
-<template>
-  <transition name="base-fade-in">
-    <div
-      v-if="visible"
-      @click.stop="handleClick"
-      :style="{
-        'right': styleRight,
-        'bottom': styleBottom
-      }"
-      class="base-backtop">
-      <slot>
-        <base-icon name="caret-top"></base-icon>
-      </slot>
-    </div>
-  </transition>
-</template>
-
-<script>
-import throttle from '../util/throttle';
-import BaseIcon from '../icon/icon';
-
-const cubic = value => Math.pow(value, 3);
-
-const easeInOutCubic = value => value < 0.5
-  ? cubic(value * 2) / 2
-  : 1 - cubic((1 - value) * 2) / 2;
-
-export default {
-  name: 'BaseBacktop',
-  components: {BaseIcon},
-  props: {
-    visibilityHeight: {
-      type: Number,
-      default: 200
-    },
-    target: [String],
-    right: {
-      type: Number,
-      default: 40
-    },
-    bottom: {
-      type: Number,
-      default: 40
-    }
-  },
-
-  data() {
-    return {
-      el: null,
-      container: null,
-      visible: false
-    };
-  },
-
-  computed: {
-    styleBottom() {
-      return `${this.bottom}px`;
-    },
-    styleRight() {
-      return `${this.right}px`;
-    }
-  },
-
-  mounted() {
-    this.init();
-    this.throttledScrollHandler = throttle(300, this.onScroll);
-    this.container.addEventListener('scroll', this.throttledScrollHandler);
-  },
-
-  methods: {
-    init() {
-      this.container = document;
-      this.el = document.documentElement;
-      if (this.target) {
-        this.el = document.querySelector(this.target);
-        if (!this.el) {
-          throw new Error(`target is not existed: ${this.target}`);
-        }
-        this.container = this.el;
-      }
-    },
-    onScroll() {
-      const scrollTop = this.el.scrollTop;
-      this.visible = scrollTop >= this.visibilityHeight;
-    },
-    handleClick(e) {
-      this.scrollToTop();
-      this.$emit('click', e);
-    },
-    scrollToTop() {
-      const el = this.el;
-      const beginTime = Date.now();
-      const beginValue = el.scrollTop;
-      const rAF = window.requestAnimationFrame || (func => setTimeout(func, 16));
-      const frameFunc = () => {
-        const progress = (Date.now() - beginTime) / 500;
-        if (progress < 1) {
-          el.scrollTop = beginValue * (1 - easeInOutCubic(progress));
-          rAF(frameFunc);
-        } else {
-          el.scrollTop = 0;
-        }
-      };
-      rAF(frameFunc);
-    }
-  },
-
-  beforeDestroy() {
-    this.container.removeEventListener('scroll', this.throttledScrollHandler);
-  }
-};
-</script>

package/src/components/base/ui/button/Button.vue

@@ -1,84 +0,0 @@
-<template>
-  <button
-    v-ripple="enableRipple"
-    class="base-button"
-    @click="handleClick"
-    :disabled="buttonDisabled || loading"
-    :autofocus="autofocus"
-    :type="nativeType"
-    :class="[
-      type ? 'base-button--' + type : '',
-      buttonSize ? 'base-button--' + buttonSize : '',
-      {
-        'is-disabled': buttonDisabled,
-        'is-loading': loading,
-        'is-plain': plain,
-        'is-round': round,
-        'is-circle': circle,
-        'is-light': light
-      }
-    ]"
-  >
-    <span v-if="loading"><i class="base-icon-loading" ></i></span>
-    <span v-if="icon && !loading"><i :class="icon"></i></span>
-    <span v-if="$slots.default"><slot></slot></span>
-  </button>
-</template>
-<script>
-import Ripple from '../directive/ripple'
-export default {
-  name: 'BaseButton',
-  directives: {
-    Ripple
-  },
-  inject: {
-    baseForm: {
-      default: ''
-    },
-    baseFormItem: {
-      default: ''
-    }
-  },
-  props: {
-    type: {
-      type: String,
-      default: 'default'
-    },
-    size: String,
-    icon: {
-      type: String,
-      default: ''
-    },
-    nativeType: {
-      type: String,
-      default: 'button'
-    },
-    loading: Boolean,
-    disabled: Boolean,
-    plain: Boolean,
-    autofocus: Boolean,
-    round: Boolean,
-    circle: Boolean,
-    light: Boolean
-  },
-  computed: {
-    _baseFormItemSize () {
-      return (this.baseFormItem || {}).baseFormItemSize
-    },
-    buttonSize () {
-      return this.size || this._baseFormItemSize || (this.$ELEMENT || {}).size
-    },
-    buttonDisabled () {
-      return this.disabled || (this.baseForm || {}).disabled
-    },
-    enableRipple () {
-      return !this.disabled && this.type !== 'text'
-    }
-  },
-  methods: {
-    handleClick (evt) {
-      this.$emit('click', evt)
-    }
-  }
-}
-</script>

package/src/components/base/ui/button/ButtonGroup.vue

@@ -1,10 +0,0 @@
-<template>
-  <div class="base-button-group">
-    <slot></slot>
-  </div>
-</template>
-<script>
-export default {
-  name: 'BaseButtonGroup'
-}
-</script>