misp-ui-library-test 0.0.1

package/src/packages/input/src/main.vue

@@ -0,0 +1,510 @@
+<template>
+  <div
+    :class="[
+      type === 'textarea' ? 'ui-textarea' : 'ui-input',
+      inputSize ? 'ui-input--' + inputSize : '',
+      {
+        'is-disabled': inputDisabled,
+        'is-exceed': inputExceed,
+        'ui-input-group': $slots.prepend || $scopedSlots.prepend || $slots.append || $scopedSlots.append,
+        'ui-input-group--append': $slots.append || $scopedSlots.append,
+        'ui-input-group--prepend': $slots.prepend || $scopedSlots.prepend,
+        'ui-input--prefix': $slots.prefix || $scopedSlots.prefix || prefixIcon,
+        'ui-input--suffix': $slots.suffix || $scopedSlots.suffix || suffixIcon || clearable || showPassword,
+      },
+    ]"
+    @mouseenter="hovering = true"
+    @mouseleave="hovering = false"
+  >
+    <template v-if="type !== 'textarea'">
+      <!-- 前置元素 -->
+      <div class="ui-input-group__prepend" v-if="$slots.prepend || $scopedSlots.prepend">
+        <slot name="prepend"></slot>
+      </div>
+      <input
+        :tabindex="tabindex"
+        v-if="type !== 'textarea'"
+        class="ui-input__inner"
+        v-bind="$attrs"
+        :type="showPassword ? (passwordVisible ? 'text' : 'password') : type"
+        :placeholder="placeholder"
+        :disabled="inputDisabled"
+        :readonly="readonly"
+        :autocomplete="autocomplete"
+        ref="input"
+        @compositionstart="handleCompositionStart"
+        @compositionupdate="handleCompositionUpdate"
+        @compositionend="handleCompositionEnd"
+        @input="handleInput"
+        @focus="handleFocus"
+        @blur="handleBlur"
+        @change="handleChange"
+        :aria-label="label"
+      />
+      <!-- 前置内容 -->
+      <span class="ui-input__prefix" v-if="$slots.prefix || $scopedSlots.prefix || prefixIcon">
+        <slot name="prefix"></slot>
+        <i class="ui-input__icon" v-if="prefixIcon" :class="prefixIcon"> </i>
+      </span>
+      <!-- 后置内容 -->
+      <span class="ui-input__suffix" v-if="getSuffixVisible()">
+        <span class="ui-input__suffix-inner">
+          <template v-if="!showClear || !showPwdVisible || !isWordLimitVisible">
+            <slot name="suffix"></slot>
+            <i class="ui-input__icon" v-if="suffixIcon" :class="suffixIcon"> </i>
+          </template>
+          <i v-if="showClear" class="ui-input__icon ui-icon-circle-close ui-input__clear" @mousedown.prevent @click="clear"></i>
+          <i v-if="showPwdVisible" :class="['ui-input__icon ui-input__clear', passwordVisible ? 'ui-icon-more' : 'ui-icon-view']" @click="handlePasswordVisible"></i>
+          <span v-if="isWordLimitVisible" class="ui-input__count">
+            <span class="ui-input__count-inner"> {{ textLength }}/{{ upperLimit }} </span>
+          </span>
+        </span>
+        <i class="ui-input__icon" v-if="validateState" :class="['ui-input__validateIcon', validateIcon]"> </i>
+      </span>
+      <!-- 后置元素 -->
+      <div class="ui-input-group__append" v-if="$slots.append || $scopedSlots.append">
+        <slot name="append"></slot>
+      </div>
+    </template>
+    <textarea
+      v-else
+      :tabindex="tabindex"
+      class="ui-textarea__inner"
+      ref="textarea"
+      v-bind="$attrs"
+      :style="textareaStyle"
+      :placeholder="placeholder"
+      :disabled="inputDisabled"
+      :readonly="readonly"
+      :autocomplete="autocomplete"
+      :aria-label="label"
+      @focus="handleFocus"
+      @blur="handleBlur"
+      @input="handleInput"
+      @change="handleChange"
+      @compositionstart="handleCompositionStart"
+      @compositionupdate="handleCompositionUpdate"
+      @compositionend="handleCompositionEnd"
+    >
+    </textarea>
+    <span v-if="isWordLimitVisible && type === 'textarea'" class="ui-input__count">{{ textLength }}/{{ upperLimit }}</span>
+  </div>
+</template>
+
+<script>
+import emitter from '../../../mixins/emitter.js'
+import migrating from '../../../mixins/migrating.js'
+import { merge, isKorean } from '../../../utils/lodash'
+import calcTextareaHeight from './calcTextareaHeight'
+
+/**
+ * UiInput 输入框组件
+ * 通过鼠标或键盘输入字符
+ * @component
+ */
+export default {
+  name: 'uiInput',
+  mixins: [emitter, migrating],
+  inheritAttrs: false,
+  inject: {
+    uiForm: {
+      default: '',
+    },
+    uiFormItem: {
+      default: '',
+    },
+  },
+
+  data() {
+    return {
+      /** textarea 计算后的样式对象 */
+      textareaCalcStyle: {},
+      /** 鼠标是否悬停状态 */
+      hovering: false,
+      /** 是否获取焦点状态 */
+      focused: false,
+      /** 是否处于输入法组合输入状态 */
+      isComposing: false,
+      /** 密码是否可见状态 */
+      passwordVisible: false,
+    }
+  },
+
+  props: {
+    /**
+     * 绑定值
+     * @type {string|number}
+     */
+    value: [String, Number],
+    /**
+     * 类型
+     * @values text, textarea, password, number, etc.
+     */
+    type: {
+      type: String,
+      default: 'text',
+    },
+    /** 输入框关联的 label 文字 */
+    label: String,
+    /** 输入框占位文本 */
+    placeholder: String,
+    /** 输入框头部图标 */
+    prefixIcon: String,
+    /** 输入框尾部图标 */
+    suffixIcon: String,
+    /** 输入框尺寸，只在 type!="textarea" 时有效 */
+    size: String,
+    /** 控制是否能被用户缩放 */
+    resize: String,
+    /** 是否可清空 */
+    clearable: {
+      type: Boolean,
+      default: false,
+    },
+    /** 是否禁用 */
+    disabled: Boolean,
+    /** 原生属性，是否只读 */
+    readonly: Boolean,
+    /**
+     * 自适应内容高度，仅在 type="textarea" 时有效
+     * 可传入对象，如 { minRows: 2, maxRows: 6 }
+     */
+    autosize: {
+      type: [Boolean, Object],
+      default: false,
+    },
+    /** 是否触发表单验证 */
+    validateEvent: {
+      type: Boolean,
+      default: true,
+    },
+    /** 是否显示切换密码图标 */
+    showPassword: {
+      type: Boolean,
+      default: false,
+    },
+    /** 是否显示输入字数统计，只在 type="text" 或 type="textarea" 时有效 */
+    showWordLimit: {
+      type: Boolean,
+      default: false,
+    },
+    /** 原生属性，自动补全 */
+    autocomplete: {
+      type: String,
+      default: 'off',
+    },
+    /** 原生属性，指明表单归属于哪个 owner */
+    form: String,
+    /** 输入框的 tabindex */
+    tabindex: String,
+  },
+
+  computed: {
+    /** 从 FormItem 注入的尺寸 */
+    _uiFormItemSize() {
+      return (this.uiFormItem || {}).uiFormItemSize
+    },
+    /** 表单验证状态 */
+    validateState() {
+      return this.uiFormItem ? this.uiFormItem.validateState : ''
+    },
+    /** 是否需要显示状态图标 */
+    needStatusIcon() {
+      return this.uiForm ? this.uiForm.statusIcon : false
+    },
+    /** 根据验证状态返回对应的图标类名 */
+    validateIcon() {
+      return {
+        validating: 'ui-icon-loading',
+        success: 'ui-icon-circle-check',
+        error: 'ui-icon-circle-close',
+      }[this.validateState]
+    },
+    /** textarea 的最终样式合并结果 */
+    textareaStyle() {
+      return merge({}, this.textareaCalcStyle, { resize: this.resize })
+    },
+    /** 最终生效的输入框尺寸 */
+    inputSize() {
+      return this.size || this._uiFormItemSize || (this.$ELEMENT || {}).size
+    },
+    /** 最终生效的禁用状态 */
+    inputDisabled() {
+      return this.disabled || (this.uiForm || {}).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)
+    },
+    /** 是否显示密码可见切换按钮 */
+    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() {
+      return this.isWordLimitVisible && this.textLength > this.upperLimit
+    },
+  },
+  watch: {
+    value(val) {
+      this.$nextTick(this.resizeTextarea)
+      if (this.validateEvent) {
+        this.dispatch('UiFormItem', 'ui.form.change', [val])
+      }
+    },
+    nativeInputValue() {
+      this.setNativeInputValue()
+    },
+    type() {
+      this.$nextTick(() => {
+        this.setNativeInputValue()
+        this.resizeTextarea()
+        this.updateIconOffset()
+      })
+    },
+  },
+  methods: {
+    /**
+     * 选中输入框中的文本
+     * @public
+     */
+    focus() {
+      this.getInput().focus()
+    },
+    /**
+     * 使输入框失去焦点
+     * @public
+     */
+    blur() {
+      this.getInput().blur()
+    },
+    /**
+     * 获取迁移配置信息
+     * @returns {object} 迁移配置对象
+     */
+    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.',
+        },
+      }
+    },
+    /**
+     * 处理失去焦点事件
+     * @param {Event} event - 原生 DOM 事件对象
+     * @fires blur
+     * @fires ui.form.blur
+     */
+    handleBlur(event) {
+      this.focused = false
+      this.$emit('blur', event)
+      if (this.validateEvent) {
+        this.dispatch('UiFormItem', 'ui.form.blur', [this.value])
+      }
+    },
+    /**
+     * 选中输入框文本
+     * @public
+     */
+    select() {
+      this.getInput().select()
+    },
+    /**
+     * 计算并设置 textarea 的高度
+     */
+    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)
+    },
+    /**
+     * 同步设置原生 input/textarea 的 value 属性
+     */
+    setNativeInputValue() {
+      const input = this.getInput()
+      if (!input) return
+      if (input.value === this.nativeInputValue) return
+      input.value = this.nativeInputValue
+    },
+    /**
+     * 处理获得焦点事件
+     * @param {Event} event - 原生 DOM 事件对象
+     * @fires focus
+     */
+    handleFocus(event) {
+      this.focused = true
+      this.$emit('focus', event)
+    },
+    /**
+     * 处理输入法开始输入事件
+     * @param {Event} event - 原生 DOM 事件对象
+     * @fires compositionstart
+     */
+    handleCompositionStart(event) {
+      this.$emit('compositionstart', event)
+      this.isComposing = true
+    },
+    /**
+     * 处理输入法更新事件
+     * @param {Event} event - 原生 DOM 事件对象
+     * @fires compositionupdate
+     */
+    handleCompositionUpdate(event) {
+      this.$emit('compositionupdate', event)
+      const text = event.target.value
+      const lastCharacter = text[text.length - 1] || ''
+      this.isComposing = !isKorean(lastCharacter)
+    },
+    /**
+     * 处理输入法结束输入事件
+     * @param {Event} event - 原生 DOM 事件对象
+     * @fires compositionend
+     * @fires input
+     */
+    handleCompositionEnd(event) {
+      this.$emit('compositionend', event)
+      if (this.isComposing) {
+        this.isComposing = false
+        this.handleInput(event)
+      }
+    },
+    /**
+     * 处理输入事件
+     * @param {Event} event - 原生 DOM 事件对象
+     * @fires input
+     */
+    handleInput(event) {
+      if (this.isComposing) return
+      if (event.target.value === this.nativeInputValue) return
+      this.$emit('input', event.target.value)
+      this.$nextTick(this.setNativeInputValue)
+    },
+    /**
+     * 处理 Change 事件
+     * @param {Event} event - 原生 DOM 事件对象
+     * @fires change
+     */
+    handleChange(event) {
+      this.$emit('change', event.target.value)
+    },
+    /**
+     * 计算图标偏移量以适配 prepend/append 插槽
+     * @param {string} place - 'prefix' 或 'suffix'
+     */
+    calcIconOffset(place) {
+      let uiList = [].slice.call(this.$el.querySelectorAll(`.ui-input__${place}`) || [])
+      if (!uiList.length) return
+      let el = null
+      for (let i = 0; i < uiList.length; i++) {
+        if (uiList[i].parentNode === this.$el) {
+          el = uiList[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(`.ui-input-group__${pendant}`).offsetWidth}px)`
+      } else {
+        el.removeAttribute('style')
+      }
+    },
+    /**
+     * 更新前后缀图标的偏移位置
+     */
+    updateIconOffset() {
+      this.calcIconOffset('prefix')
+      this.calcIconOffset('suffix')
+    },
+    /**
+     * 清空输入框内容
+     * @fires input
+     * @fires change
+     * @fires clear
+     */
+    clear() {
+      this.$emit('input', '')
+      this.$emit('change', '')
+      this.$emit('clear')
+    },
+    /**
+     * 切换密码可见性
+     */
+    handlePasswordVisible() {
+      this.passwordVisible = !this.passwordVisible
+      this.$nextTick(() => {
+        this.focus()
+      })
+    },
+    /**
+     * 获取内部的 input 或 textarea DOM 元素
+     * @returns {HTMLElement}
+     */
+    getInput() {
+      return this.$refs.input || this.$refs.textarea
+    },
+    /**
+     * 判断后缀区域是否应该显示
+     * @returns {boolean}
+     */
+    getSuffixVisible() {
+      return this.$slots.suffix || this.$scopedSlots.suffix || this.suffixIcon || this.showClear || this.showPassword || this.isWordLimitVisible || (this.validateState && this.needStatusIcon)
+    },
+  },
+
+  created() {
+    this.$on('inputSelect', this.select)
+  },
+
+  mounted() {
+    this.setNativeInputValue()
+    this.resizeTextarea()
+    this.updateIconOffset()
+  },
+
+  updated() {
+    this.$nextTick(this.updateIconOffset)
+  },
+}
+</script>
+
+<style lang="scss"></style>

package/src/packages/input-number/index.js

@@ -0,0 +1,12 @@
+/**
+ * InputNumber 计数器组件
+ */
+
+import UiInputNumber from './src/main.vue'
+
+// 自动安装
+UiInputNumber.install = function(Vue) {
+  Vue.component(UiInputNumber.name, UiInputNumber)
+}
+
+export default UiInputNumber

package/src/packages/input-number/src/main.vue

@@ -0,0 +1,121 @@
+<template>
+  <div class="ui-input-number" :class="[size ? 'ui-input-number--' + size : '', { 'is-disabled': disabled, 'is-without-controls': !controls }]">
+    <span v-if="controls" class="ui-input-number__decrease" :class="{ 'is-disabled': minDisabled }" @click="decrease">
+      <i class="icon-minus"></i>
+    </span>
+    <div class="ui-input-number__input">
+      <input
+        type="text"
+        role="spinbutton"
+        :aria-valuenow="currentValue"
+        :aria-valuemax="max"
+        :aria-valuemin="min"
+        :disabled="disabled"
+        :value="currentValue"
+        @input="handleInput"
+        @blur="handleBlur"
+        @focus="handleFocus"
+        class="ui-input-number__inner"
+      >
+    </div>
+    <span v-if="controls" class="ui-input-number__increase" :class="{ 'is-disabled': maxDisabled }" @click="increase">
+      <i class="icon-plus"></i>
+    </span>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'UiInputNumber',
+
+  props: {
+    value: {
+      type: Number,
+      default: 0
+    },
+    step: {
+      type: Number,
+      default: 1
+    },
+    max: {
+      type: Number,
+      default: Infinity
+    },
+    min: {
+      type: Number,
+      default: -Infinity
+    },
+    disabled: Boolean,
+    size: String,
+    controls: {
+      type: Boolean,
+      default: true
+    },
+    precision: {
+      type: Number,
+      default: null
+    }
+  },
+
+  data() {
+    return {
+      currentValue: this.value
+    };
+  },
+
+  computed: {
+    minDisabled() {
+      return this._increase && this._increase() <= this.min;
+    },
+    maxDisabled() {
+      return this._decrease && this._decrease() >= this.max;
+    }
+  },
+
+  watch: {
+    value(val) {
+      this.currentValue = val;
+    },
+    currentValue(val) {
+      this.$emit('input', val);
+    }
+  },
+
+  created() {
+    this._decrease = () => this.currentValue - this.step;
+    this._increase = () => this.currentValue + this.step;
+  },
+
+  methods: {
+    decrease() {
+      if (this.disabled || this.minDisabled) return;
+      this.currentValue = this._decrease();
+      this.$emit('change', this.currentValue);
+    },
+    increase() {
+      if (this.disabled || this.maxDisabled) return;
+      this.currentValue = this._increase();
+      this.$emit('change', this.currentValue);
+    },
+    handleInput(e) {
+      const value = e.target.value;
+      const num = Number(value);
+
+      if (isNaN(num)) return;
+
+      this.currentValue = num;
+    },
+    handleBlur() {
+      if (this.currentValue > this.max) {
+        this.currentValue = this.max;
+      } else if (this.currentValue < this.min) {
+        this.currentValue = this.min;
+      }
+      this.$emit('change', this.currentValue);
+    },
+    handleFocus(e) {
+      this.$emit('focus', e);
+    }
+  }
+};
+</script>

package/src/packages/link/index.js

@@ -0,0 +1,12 @@
+/**
+ * Link 文字链接组件
+ */
+
+import UiLink from './src/main.vue'
+
+// 自动安装
+UiLink.install = function(Vue) {
+  Vue.component(UiLink.name, UiLink)
+}
+
+export default UiLink

package/src/packages/link/src/main.vue

@@ -0,0 +1,53 @@
+<template>
+  <a
+    :class="[
+      'ui-link',
+      type ? `ui-link--${type}` : '',
+      disabled && 'is-disabled',
+      underline && !disabled && 'is-underline'
+    ]"
+    :href="disabled ? null : href"
+    v-bind="$attrs"
+    @click="handleClick"
+  >
+
+    <i :class="icon" v-if="icon"></i>
+
+    <span v-if="$slots.default" class="ui-link--inner">
+      <slot></slot>
+    </span>
+
+    <template v-if="$slots.icon"><slot v-if="$slots.icon" name="icon"></slot></template>
+  </a>
+</template>
+
+<script>
+
+export default {
+  name: 'UiLink',
+
+  props: {
+    type: {
+      type: String,
+      default: 'default'
+    },
+    underline: {
+      type: Boolean,
+      default: true
+    },
+    disabled: Boolean,
+    href: String,
+    icon: String
+  },
+
+  methods: {
+    handleClick(event) {
+      if (!this.disabled) {
+        if (!this.href) {
+          this.$emit('click', event);
+        }
+      }
+    }
+  }
+};
+</script>