@zkwq/business 0.0.1

package/package.json

@@ -0,0 +1,27 @@
+{
+  "name": "@zkwq/business",
+  "version": "0.0.1",
+  "description": "中科文情业务组件库",
+  "type": "module",
+  "main": "dist/index.umd.js",
+  "module": "dist/index.js",
+  "scripts": {
+    "build": "vite build",
+    "pub":"pnpm build & npm publish --access public"
+  },
+  "author": "",
+  "license": "ISC",
+  "devDependencies": {
+    "@vue/babel-helper-vue-jsx-merge-props": "^1.4.0",
+    "rollup-plugin-copy": "^3.4.0",
+    "sass": "^1.58.3",
+    "vite": "4.1.0",
+    "vite-plugin-vue2": "^2.0.3",
+    "vue-template-compiler": "2.6.14"
+  },
+  "dependencies": {
+    "async-validator": "^4.2.5",
+    "resize-observer-polyfill": "^1.5.1",
+    "vue": "2.6.14"
+  }
+}

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

@@ -0,0 +1,94 @@
+<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

@@ -0,0 +1,77 @@
+<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

@@ -0,0 +1,305 @@
+<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

@@ -0,0 +1,112 @@
+<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

@@ -0,0 +1,84 @@
+<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

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