@zkwq/business 0.0.4 → 0.0.6

package/src/components/base/ui/index.js

@@ -1,189 +0,0 @@
-import Message from './message'
-import MessageBox from './message-box/main.js'
-import locale from './locale'
-import Button from "./button/Button";
-import ButtonGroup from "./button/ButtonGroup";
-import Alert from "./alert/Alert";
-import BaseBacktop from "./backtop/main";
-import Carousel from "./carousel/Carousel";
-import CarouselItem from "./carousel/CarouselItem";
-import autocompleteSuggestions from "./autocomplete/autocomplete-suggestions";
-import autocomplete from "./autocomplete/autocomplete";
-import cascader from "./cascader/cascader";
-import cascaderMenu from "./cascader-panel/cascader-menu";
-import cascaderPanel from "./cascader-panel/cascader-panel";
-import datePicker from "./date-picker/picker/date-picker";
-import timePicker from "./date-picker/picker/time-picker";
-import timeSelect from "./date-picker/picker/time-select";
-import checkbox from "./checkbox/checkbox";
-import checkboxButton from "./checkbox/checkbox-button";
-import checkboxGroup from "./checkbox/checkbox-group";
-import col from "./col/col";
-import collapse from "./collapse/collapse";
-import collapseItem from "./collapse/collapse-item";
-import BaseColorPicker from './color-picker/main'
-import BaseDialog from './dialog/Index'
-import Divider from "./divider/Divider";
-import Drawer from "./drawer/Drawer";
-import dropdown from "./dropdown/dropdown";
-import dropdownItem from "./dropdown/dropdown-item";
-import dropdownMenu from "./dropdown/dropdown-menu";
-import Form from "./form/Form";
-import FormItem from "./form/FormItem";
-import icon from "./icon/icon";
-import BaseImage from './image/main'
-import Input from "./input/Input";
-import menu from "./menu/menu";
-import menuItem from "./menu/menu-item";
-import menuItemGroup from "./menu/menu-item-group";
-import submenu from "./menu/submenu";
-import pagination from "./pagination/pagination";
-import BasePopover from "./popover/main"
-import Progress from "./progress/Progress";
-import radio from "./radio/radio";
-import radioButton from "./radio/radio-button";
-import radioGroup from "./radio/radio-group";
-import row from "./row/row";
-import BaseScrollbar from "./scrollbar/index"
-import Option from "./select/Option";
-import OptionGroup from "./select/OptionGroup";
-import Select from "./select/Select";
-import SelectDropdown from "./select/SelectDropdown";
-import BaseSwitch from './switch/index'
-import tabs from "./tabs/tabs";
-import tabPane from "./tabs/tab-pane";
-import Tag from "./tag/Tag";
-import tooltip from "./tooltip/tooltip";
-import BaseUpload from './upload/Index'
-const components = [
-    Button,
-    ButtonGroup,
-    Alert,
-    BaseBacktop,
-    Carousel,
-    CarouselItem,
-    autocomplete,
-    cascaderMenu,
-    cascader,
-    cascaderPanel,
-    datePicker,
-    timePicker,
-    timeSelect,
-    checkbox,
-    checkboxButton,
-    checkboxGroup,
-    col,
-    collapse,
-    collapseItem,
-    BaseColorPicker,
-    BaseDialog,
-    Divider,
-    Drawer,
-    dropdown,
-    dropdownItem,
-    dropdownMenu,
-    Form,
-    FormItem,
-    icon,
-    BaseImage,
-    Input,
-    menu,
-    menuItem,
-    menuItemGroup,
-    submenu,
-    pagination,
-    BasePopover,
-    Progress,
-    radio,
-    radioButton,
-    radioGroup,
-    row,
-    BaseScrollbar,
-    Option,
-    OptionGroup,
-    Select,
-    SelectDropdown,
-    BaseSwitch,
-    tabs,
-    tabPane,
-    Tag,
-    tooltip,
-    BaseUpload
-];
-const BaseUI = {
-  install: function(Vue, opts = {}) {
-    locale.use(opts.locale)
-    locale.i18n(opts.i18n)
-    components.forEach(component => {
-      Vue.component(component.name, component);
-    });
-    Vue.prototype.$ELEMENT = {
-      size: opts.size || '',
-      zIndex: opts.zIndex || 2000
-    }
-
-    Vue.prototype.$msgbox = MessageBox;
-    Vue.prototype.$alert = MessageBox.alert;
-    Vue.prototype.$confirm = MessageBox.confirm;
-    Vue.prototype.$prompt = MessageBox.prompt;
-    Vue.prototype.$notify = Notification;
-    Vue.prototype.$message = Message;
-  }
-}
-
-export default BaseUI
-export {
-  Button,
-  ButtonGroup,
-  Alert,
-  BaseBacktop,
-  Carousel,
-  CarouselItem,
-  autocomplete,
-  cascaderMenu,
-  cascader,
-  cascaderPanel,
-  datePicker,
-  timePicker,
-  timeSelect,
-  checkbox,
-  checkboxButton,
-  checkboxGroup,
-  col,
-  collapse,
-  collapseItem,
-  BaseColorPicker,
-  BaseDialog,
-  Divider,
-  Drawer,
-  dropdown,
-  dropdownItem,
-  dropdownMenu,
-  Form,
-  FormItem,
-  icon,
-  BaseImage,
-  Input,
-  menu,
-  menuItem,
-  menuItemGroup,
-  submenu,
-  pagination,
-  BasePopover,
-  Progress,
-  radio,
-  radioButton,
-  radioGroup,
-  row,
-  BaseScrollbar,
-  Option,
-  OptionGroup,
-  Select,
-  SelectDropdown,
-  BaseSwitch,
-  tabs,
-  tabPane,
-  Tag,
-  tooltip,
-  BaseUpload
-};

package/src/components/base/ui/input/Input.vue

@@ -1,438 +0,0 @@
-<template>
-  <div :class="[
-    type === 'textarea' ? 'base-textarea' : 'base-input',
-    inputSize ? 'base-input--' + inputSize : '',
-    {
-      'is-rippled': ripple,
-      'is-focused': focused && enableFocusClass,
-      'is-disabled': inputDisabled,
-      'is-exceed': inputExceed,
-      'base-input-group': $slots.prepend || $slots.append,
-      'base-input-group--append': $slots.append,
-      'base-input-group--prepend': $slots.prepend,
-      'base-input--prefix': $slots.prefix || prefixIcon,
-      'base-input--suffix': $slots.suffix || suffixIcon || clearable || showPassword
-    }
-    ]"
-    @mouseenter="hovering = true"
-    @mouseleave="hovering = false"
-  >
-    <template v-if="type !== 'textarea'">
-      <!-- 前置元素 -->
-      <div class="base-input-group__prepend" v-if="$slots.prepend">
-        <slot name="prepend"></slot>
-      </div>
-      <input
-        :tabindex="tabindex"
-        v-if="type !== 'textarea'"
-        class="base-input__inner"
-        v-bind="$attrs"
-        :type="showPassword ? (passwordVisible ? 'text': 'password') : type"
-        :disabled="inputDisabled"
-        :readonly="readonly"
-        :autocomplete="autoComplete || autocomplete"
-        :placeholder="showLabel ? null : placeholder"
-        ref="input"
-        @compositionstart="handleCompositionStart"
-        @compositionupdate="handleCompositionUpdate"
-        @compositionend="handleCompositionEnd"
-        @input="handleInput"
-        @focus="handleFocus"
-        @blur="handleBlur"
-        @change="handleChange"
-        @keyup.enter="handleKeyUpEnter"
-        :aria-label="label"
-      >
-      <!-- 前置内容 -->
-      <span class="base-input__prefix" v-if="$slots.prefix || prefixIcon">
-        <slot name="prefix"></slot>
-        <i class="base-input__icon"
-           v-if="prefixIcon"
-           :class="prefixIcon">
-        </i>
-      </span>
-      <!-- 后置内容 -->
-      <span
-        class="base-input__suffix"
-        v-if="getSuffixVisible()">
-        <span class="base-input__suffix-inner">
-          <template v-if="!showClear || !showPwdVisible || !isWordLimitVisible">
-            <slot name="suffix"></slot>
-            <i class="base-input__icon"
-              v-if="suffixIcon"
-              :class="suffixIcon">
-            </i>
-          </template>
-          <i v-if="showClear"
-            class="base-input__icon base-icon-close base-input__clear"
-            @mousedown.prevent
-            @click="clear"
-          ></i>
-          <i v-if="showPwdVisible"
-            class="base-input__icon base-icon-view base-input__clear"
-            @click="handlePasswordVisible"
-          ></i>
-          <span v-if="isWordLimitVisible" class="base-input__count">
-            <span class="base-input__count-inner">
-              {{ textLength }}/{{ upperLimit }}
-            </span>
-          </span>
-        </span>
-        <i class="base-input__icon"
-          v-if="validateState"
-          :class="['base-input__validateIcon', validateIcon]">
-        </i>
-      </span>
-      <!-- 后置元素 -->
-      <div class="base-input-group__append" v-if="$slots.append">
-        <slot name="append"></slot>
-      </div>
-    </template>
-    <textarea
-      v-else
-      :tabindex="tabindex"
-      class="base-textarea__inner"
-      @compositionstart="handleCompositionStart"
-      @compositionupdate="handleCompositionUpdate"
-      @compositionend="handleCompositionEnd"
-      @input="handleInput"
-      :placeholder="showLabel ? null : placeholder"
-      ref="textarea"
-      v-bind="$attrs"
-      :disabled="inputDisabled"
-      :readonly="readonly"
-      :autocomplete="autoComplete || autocomplete"
-      :style="textareaStyle"
-      @focus="handleFocus"
-      @blur="handleBlur"
-      @change="handleChange"
-      :aria-label="label"
-    >
-    </textarea>
-    <div class="base-input__placeholder" :class="{ 'is-active' : focused || value }" v-if="showLabel && placeholder">{{ placeholder }}</div>
-    <span v-if="isWordLimitVisible && type === 'textarea'" class="base-input__count">{{ textLength }}/{{ upperLimit }}</span>
-  </div>
-</template>
-<script>
-import emitter from '../mixin/emitter'
-import Migrating from '../mixin/migrating'
-import calcTextareaHeight from './calcTextareaHeight'
-import merge from '../util/merge'
-import {isKorean} from '../util/shared'
-
-export default {
-  name: 'BaseInput',
-  componentName: 'BaseInput',
-  mixins: [emitter, Migrating],
-  inheritAttrs: false,
-  inject: {
-    baseForm: {
-      default: ''
-    },
-    baseFormItem: {
-      default: ''
-    }
-  },
-  data() {
-    return {
-      textareaCalcStyle: {},
-      hovering: false,
-      focused: false,
-      isComposing: false,
-      passwordVisible: false
-    };
-  },
-  props: {
-    value: [String, Number],
-    size: String,
-    resize: String,
-    form: String,
-    disabled: Boolean,
-    readonly: Boolean,
-    type: {
-      type: String,
-      default: 'text'
-    },
-    autosize: {
-      type: [Boolean, Object],
-      default: false
-    },
-    autocomplete: {
-      type: String,
-      default: 'off'
-    },
-    /** @Deprecated in next major version */
-    autoComplete: {
-      type: String,
-      validator(val) {
-        process.env.NODE_ENV !== 'production' &&
-          console.warn('[Element Warn][Input]\'auto-complete\' property will be deprecated in next major version. please use \'autocomplete\' instead.');
-        return true;
-      }
-    },
-    validateEvent: {
-      type: Boolean,
-      default: true
-    },
-    suffixIcon: String,
-    prefixIcon: String,
-    label: String,
-    clearable: {
-      type: Boolean,
-      default: false
-    },
-    alwaysShowClear:{
-      type: Boolean,
-      default: false
-    },
-    showPassword: {
-      type: Boolean,
-      default: false
-    },
-    showWordLimit: {
-      type: Boolean,
-      default: false
-    },
-    showLabel: {
-      type: Boolean,
-      default: true
-    },
-    tabindex: String,
-    placeholder: String,
-    ripple: {
-      type: Boolean,
-      default: true
-    },
-    enableFocusClass: {
-      type: Boolean,
-      default: true
-    }
-  },
-  computed: {
-    _baseFormItemSize() {
-      return (this.baseFormItem || {}).baseFormItemSize
-    },
-    validateState() {
-      return this.baseFormItem ? this.baseFormItem.validateState : ''
-    },
-    needStatusIcon() {
-      return this.baseForm ? this.baseForm.statusIcon : false
-    },
-    validateIcon() {
-      return {
-        validating: 'base-icon-loading',
-        success: 'base-icon-circle-check',
-        error: 'base-icon-circle-close'
-      }[this.validateState]
-    },
-    textareaStyle() {
-      return merge({}, this.textareaCalcStyle, { resize: this.resize })
-    },
-    inputSize() {
-      return this.size || this._baseFormItemSize || (this.$ELEMENT || {}).size
-    },
-    inputDisabled() {
-      return this.disabled || (this.baseForm || {}).disabled;
-    },
-    nativeInputValue() {
-      return this.value === null || this.value === undefined ? '' : String(this.value)
-    },
-    showClear() {
-      return this.clearable &&
-        !this.inputDisabled &&
-        !this.readonly &&
-        this.nativeInputValue &&
-        (this.focused || this.hovering || this.alwaysShowClear)
-    },
-    showPwdVisible() {
-      return this.showPassword &&
-        !this.inputDisabled &&
-        !this.readonly &&
-        (!!this.nativeInputValue || this.focused)
-    },
-    isWordLimitVisible() {
-      return this.showWordLimit &&
-        this.$attrs.maxlength &&
-        (this.type === 'text' || this.type === 'textarea') &&
-        !this.inputDisabled &&
-        !this.readonly &&
-        !this.showPassword
-    },
-    upperLimit() {
-      return this.$attrs.maxlength
-    },
-    textLength() {
-      if (typeof this.value === 'number') {
-        return String(this.value).length
-      }
-
-      return (this.value || '').length
-    },
-    inputExceed() {
-      // show exceed style if length of initial value greater then maxlength
-      return this.isWordLimitVisible &&
-        (this.textLength > this.upperLimit)
-    }
-  },
-  watch: {
-    value(val) {
-      this.$nextTick(this.resizeTextarea)
-      if (this.validateEvent) {
-        this.dispatch('BaseFormItem', 'base.form.change', [val])
-      }
-    },
-    nativeInputValue() {
-      this.setNativeInputValue()
-    },
-    type() {
-      this.$nextTick(() => {
-        this.setNativeInputValue()
-        this.resizeTextarea()
-        this.updateIconOffset()
-      })
-    }
-  },
-  methods: {
-    focus() {
-      this.getInput().focus()
-    },
-    blur() {
-      this.getInput().blur()
-    },
-    getMigratingConfig() {
-      return {
-        props: {
-          'icon': 'icon is removed, use suffix-icon / prefix-icon instead.',
-          'on-icon-click': 'on-icon-click is removed.'
-        },
-        events: {
-          'click': 'click is removed.'
-        }
-      }
-    },
-    handleBlur(event) {
-      this.focused = false
-      this.$emit('blur', event)
-      if (this.validateEvent) {
-        this.dispatch('BaseFormItem', 'base.form.blur', [this.value])
-      }
-    },
-    select() {
-      this.getInput().select()
-    },
-    resizeTextarea() {
-      if (this.$isServer) return
-      const { autosize, type } = this
-      if (type !== 'textarea') return
-      if (!autosize) {
-        this.textareaCalcStyle = {
-          minHeight: calcTextareaHeight(this.$refs.textarea).minHeight
-        }
-        return
-      }
-      const minRows = autosize.minRows
-      const maxRows = autosize.maxRows
-
-      this.textareaCalcStyle = calcTextareaHeight(this.$refs.textarea, minRows, maxRows)
-    },
-    setNativeInputValue() {
-      const input = this.getInput()
-      if (!input) return
-      if (input.value === this.nativeInputValue) return
-      input.value = this.nativeInputValue
-    },
-    handleFocus(event) {
-      this.focused = true
-      this.$emit('focus', event)
-      if (this.validateEvent) {
-        this.dispatch('BaseFormItem', 'clearValidate')
-      }
-    },
-    handleCompositionStart() {
-      this.isComposing = true
-    },
-    handleCompositionUpdate(event) {
-      const text = event.target.value
-      const lastCharacter = text[text.length - 1] || ''
-      this.isComposing = !isKorean(lastCharacter)
-    },
-    handleCompositionEnd(event) {
-      if (this.isComposing) {
-        this.isComposing = false
-        this.handleInput(event)
-      }
-    },
-    handleInput(event) {
-      if (this.isComposing) return
-      if (event.target.value === this.nativeInputValue) return
-      this.$emit('input', event.target.value)
-      this.$nextTick(this.setNativeInputValue)
-    },
-    handleChange(event) {
-      this.$emit('change', event.target.value)
-    },
-    handleKeyUpEnter() {
-      this.$emit('key-up-enter')
-    },
-    calcIconOffset(place) {
-      let elList = [].slice.call(this.$el.querySelectorAll(`.base-input__${place}`) || [])
-      if (!elList.length) return
-      let el = null
-      for (let i = 0; i < elList.length; i++) {
-        if (elList[i].parentNode === this.$el) {
-          el = elList[i];
-          break
-        }
-      }
-      if (!el) return
-      const pendantMap = {
-        suffix: 'append',
-        prefix: 'prepend'
-      }
-
-      const pendant = pendantMap[place]
-      if (this.$slots[pendant]) {
-        el.style.transform = `translateX(${place === 'suffix' ? '-' : ''}${this.$el.querySelector(`.base-input-group__${pendant}`).offsetWidth}px)`
-      } else {
-        el.removeAttribute('style')
-      }
-    },
-    updateIconOffset() {
-      this.calcIconOffset('prefix')
-      this.calcIconOffset('suffix')
-    },
-    clear() {
-      this.$emit('input', '')
-      this.$emit('change', '')
-      this.$emit('clear')
-    },
-    handlePasswordVisible() {
-      this.passwordVisible = !this.passwordVisible
-      this.focus()
-    },
-    getInput() {
-      return this.$refs.input || this.$refs.textarea
-    },
-    getSuffixVisible() {
-      return this.$slots.suffix ||
-        this.suffixIcon ||
-        this.showClear ||
-        this.showPassword ||
-        this.isWordLimitVisible ||
-        (this.validateState && this.needStatusIcon)
-    }
-  },
-  created() {
-    this.$on('inputSelect', this.select)
-    this.$on('clearError', this.focus)
-  },
-  mounted() {
-    this.setNativeInputValue()
-    this.resizeTextarea()
-    this.updateIconOffset()
-  },
-  updated() {
-    this.$nextTick(this.updateIconOffset)
-  }
-}
-</script>