@v2coding/ui 0.1.5 → 0.1.9

package/src/components/field/field.select.vue

@@ -1,210 +0,0 @@
-<template>
-  <div class="ui-field-select">
-    <el-select ref="select" v-if="!refresh" v-bind="$attrs" v-on="_listeners" :value="pickerValue" :clearable="clearable" :multiple="multiple" :filterable="filterable" :filter-method="filterMethod" @input="onChange" @blur="onBlur" v-loading="realLoading" element-loading-spinner="el-icon-loading">
-      <el-option v-bind="item" v-for="item in displayOptions" :key="item.value">
-        <span v-html="item.label"></span>
-      </el-option>
-      <el-option v-if="isEmpty" value="__error__" disabled class="empty" label="重新加载" @click="init">
-        暂无数据!&emsp;
-        <el-button v-show="realError" type="text" @click="init">重新加载</el-button>
-      </el-option>
-    </el-select>
-    <div v-if="refresh" class="el-input-group el-input-group--append">
-      <el-select ref="refreshSelect" v-bind="$attrs" v-on="_listeners" :value="pickerValue" :clearable="clearable" :multiple="multiple" :filterable="filterable" :filter-method="filterMethod" @input="onChange" @blur="onBlur" v-loading="realLoading" element-loading-spinner="el-icon-loading">
-        <el-option v-bind="item" v-for="item in displayOptions" :key="item.value">
-          <span v-html="item.label"></span>
-        </el-option>
-        <el-option v-if="isEmpty" value="__error__" disabled class="empty" label="重新加载" @click="init">
-          暂无数据!&emsp;
-          <el-button v-show="realError" type="text" @click="init">重新加载</el-button>
-        </el-option>
-      </el-select>
-      <div class="el-input-group__append">
-        <el-button @click="onRefresh" icon="el-icon-refresh"></el-button>
-      </div>
-    </div>
-  </div>
-</template>
-
-<script>
-  import FieldMixin from './field.mixin';
-  import DataMixin from './field.data.mixin';
-  import Objects from '../../util/objects';
-  // 简体中文 https://github.com/xmflswood/pinyin-match/issues
-  import PinyinMatch from 'pinyin-match';
-
-  export default {
-    name: 'ui-field-select',
-    mixins: [FieldMixin, DataMixin],
-    inheritAttrs: false,
-    props: {
-      // 是否初始选中
-      startNull: {
-        type: Boolean,
-        default: true,
-      },
-      clearable: {
-        type: Boolean,
-        default: true,
-      },
-      multiple: Boolean,
-      refresh: Boolean,
-      filterable: {
-        type: Boolean,
-        default: true,
-      },
-    },
-    data() {
-      return {
-        query: '',
-      };
-    },
-    computed: {
-      isEmpty() {
-        return !this.depends && !this.displayOptions.length;
-      },
-      pickerValue() {
-        return this.getPickerValue(this.value);
-      },
-      displayOptions({realData, query}) {
-        if (!query) {
-          return realData;
-        }
-        return realData.filter(option => PinyinMatch.match(option.label, query));
-      },
-    },
-    watch: {
-      displayOptions(data, o) {
-        if (!Objects.isEquals(data, o)) {
-          this.initDefaultValue(data);
-        }
-      },
-    },
-    methods: {
-      onRefresh() {
-        this.$emit('refresh');
-      },
-      async init() {
-        if (this.startNull) {
-          this.done();
-        }
-        await this.getData();
-        this.validateValue(String(this.value));
-        if (!this.startNull) {
-          this.initDefaultValue(this.realData);
-          await this.$nextTick();
-          this.done();
-        }
-      },
-      initDefaultValue(data) {
-        if (this.lockedValue) {
-          if (this.value !== this.lockedValue) {
-            this.onChange(this.lockedValue, true);
-          }
-          return;
-        }
-        const isSelect = data.some(item => this.value === item.value);
-        if (isSelect) {
-          return;
-        }
-        if (data.length <= 0 || this.startNull || this.multiple) {
-          this.onChange(undefined, true);
-          return;
-        }
-        const first = data.find(Boolean);
-        first && first.value !== this.value && this.onChange(first.value, true);
-      },
-      getPickerValue(value) {
-        if (this.multiple) {
-          const arr = value ? value.split(',') : [];
-          return arr.filter(v => this.validatePickerValue(v));
-        }
-        const v = String(value);
-        return this.validatePickerValue(v) ? v : undefined;
-      },
-      validateValue(value) {
-        if (this.multiple) {
-          const arr = value ? value.split(',') : [];
-          const validateValue = arr.filter(v => this.validatePickerValue(v)).join(',');
-          if (validateValue !== value) {
-            this.emitChange(validateValue);
-          }
-          // } else {
-          //   const isValid = this.validatePickerValue(value);
-          //   if (!isValid) {
-          //     this.emitChange();
-          //   }
-        }
-      },
-      validatePickerValue(value) {
-        return (this.realData || []).some(item => item.value === value);
-      },
-      getRealValue(value) {
-        if (this.multiple) {
-          return (value || []).join(',');
-        }
-        return value || '';
-      },
-      onChange(val, isInit) {
-        if (val === '__error__') {
-          return;
-        }
-        if (this.multiple && Array.isArray(val)) {
-          const index = val.indexOf('__error__');
-          if (index !== -1) {
-            if (val.length === 1 ) {
-              return;
-            }
-            val.splice(index, 1);
-          }
-        }
-        val = this.getRealValue(val);
-        if (isInit !== true) {
-          this.$emit('update:lockedValue', val);
-        }
-        this.emitChange(val);
-      },
-      resetValue() {
-        this.onChange(this.multiple ? [] : '');
-      },
-      focus() {
-        const select = this.$refs.select;
-        const refreshSelect = this.$refs.refreshSelect;
-        if (select) {
-          select.focus();
-        } else if (refreshSelect) {
-          refreshSelect.focus();
-        }
-      },
-      filterMethod(query) {
-        this.query = query;
-      },
-      onBlur() {
-        this.query = '';
-      },
-    },
-  };
-</script>
-
-<style lang="less">
-  .ui-field-select {
-    .el-select {
-      width: 100%;
-    }
-
-    .el-input-group--append .el-select .el-input.is-focus .el-input__inner {
-      border-color: var(--color-primary);
-    }
-
-    .empty {
-      font-size: 12px;
-      color: #909399;
-      display: flex;
-      align-items: center;
-    }
-
-    .el-loading-mask .el-loading-spinner {
-      margin-top: -14px;
-    }
-  }
-</style>

package/src/components/field/field.slider.vue

@@ -1,66 +0,0 @@
-<template>
-  <el-slider v-bind="$attrs" v-on="_listeners" v-model="v" :min="min" :max="max" :range="range" @input="onInput"></el-slider>
-</template>
-
-<script>
-import debounce from 'lodash.debounce';
-import FieldMixin from './field.mixin';
-
-export default {
-  name: 'ui-field-slider',
-  mixins: [FieldMixin],
-  props: {
-    range: Boolean,
-    min: {
-      type: Number,
-      default: 0,
-    },
-    max: {
-      type: Number,
-      default: 100,
-    },
-  },
-  data() {
-    return {
-      v: this.getPickerValue(this.value),
-    };
-  },
-  watch: {
-    value() {
-      this.v = this.getPickerValue(this.value);
-    },
-  },
-  methods: {
-    getPickerValue(value) {
-      if (this.range) {
-        let [start, end] = value ? value.split(',') : [this.min, this.max];
-        start = Math.max(Number(start), this.min);
-        end = Math.min(Number(end), this.max);
-        if (isNaN(start)) {
-          start = this.min;
-        }
-        if (isNaN(end)) {
-          end = this.max;
-        }
-        start = Math.min(start, end);
-        end = Math.max(start, end);
-        return [start, end];
-      }
-      const num = Number(value);
-      return isNaN(num) ? this.min : num;
-    },
-    getRealValue(value) {
-      if (this.range) {
-        return value.join(',');
-      }
-      return value || '';
-    },
-    onInput: debounce(function(value) {
-      const _value = this.getRealValue(value);
-      this.emitChange(_value);
-    }, 200, {leading: true}),
-  },
-};
-</script>
-
-<style scoped></style>

package/src/components/field/field.switch.vue

@@ -1,14 +0,0 @@
-<template>
-  <el-switch v-bind="$attrs" :value="value" v-on="$listeners"></el-switch>
-</template>
-
-<script>
-import FieldMixin from './field.mixin';
-
-export default {
-  name: 'ui-field-switch',
-  mixins: [FieldMixin],
-};
-</script>
-
-<style scoped></style>

package/src/components/field/field.text.vue

@@ -1,66 +0,0 @@
-<template>
-  <el-input v-bind="$attrs" v-on="$listeners" :value="value" :type="type" :maxlength="maxlength" :clearable="clearable" :rows="rows" :autosize="autosize" :show-word-limit="showWordLimit"/>
-</template>
-
-<script>
-  import FieldMixin from './field.mixin';
-
-  export default {
-    name: 'ui-field-text',
-    inheritAttrs: false,
-    mixins: [FieldMixin],
-    props: {
-      type: {
-        type: String,
-        default: 'text',
-      },
-      maxlength: {
-        type: Number,
-        default() {
-          if (this.type === 'text') {
-            return 40;
-          }
-          return undefined;
-        },
-      },
-      clearable: {
-        type: Boolean,
-        default: true,
-      },
-      rows: {
-        type: Number,
-        default: 3,
-      },
-      autosize: {
-        type: [Boolean, Object],
-        default: () => ({minRows: 3, maxRows: 5}),
-      },
-      showWordLimit: {
-        type: Boolean,
-        default: true,
-      },
-    },
-  };
-</script>
-
-<style lang="less">
-
-
-  .el-input__suffix-inner {
-    display: flex;
-    align-items: center;
-    height: 100%;
-  }
-
-  .el-input--large .el-input__count .el-input__count-inner {
-    line-height: 38px;
-  }
-
-  .el-input--medium .el-input__count .el-input__count-inner {
-    line-height: 34px;
-  }
-
-  .el-input--mini .el-input__count .el-input__count-inner {
-    line-height: 26px;
-  }
-</style>

package/src/components/field/field.timepicker.vue

@@ -1,70 +0,0 @@
-<template>
-  <el-time-picker v-bind="$attrs" v-on="_listeners" :value="pickerValue" :is-range="isRange" :value-format="valueFormat" :start-placeholder="startPlaceholder" :end-placeholder="endPlaceholder" @input="onChange" class="ui-timepicker-field"></el-time-picker>
-</template>
-
-<script>
-import FieldMixin from './field.mixin';
-
-export default {
-  name: 'ui-field-timepicker',
-  mixins: [FieldMixin],
-  props: {
-    isRange: Boolean,
-    valueFormat: {
-      type: String,
-      default: 'HH:mm:ss',
-    },
-    startPlaceholder: {
-      type: String,
-      default: '开始时间',
-    },
-    endPlaceholder: {
-      type: String,
-      default: '结束时间',
-    },
-  },
-  // data() {
-  //   return {
-  //     v: this.getPickerValue(this.value),
-  //   };
-  // },
-  computed: {
-    pickerValue() {
-      return this.getPickerValue(this.value);
-    },
-  },
-  // watch: {
-  //   value() {
-  //     this.v = this.getPickerValue(this.value);
-  //   },
-  // },
-  methods: {
-    getPickerValue(value) {
-      if (this.isRange) {
-        return value ? value.split(',') : ['', ''];
-      }
-      return value;
-    },
-    getRealValue(value) {
-      if (this.isRange && Array.isArray(value)) {
-        return value.map((item) => item || '').join(',');
-      }
-      return value || '';
-    },
-    onChange(value) {
-      const _value = this.getRealValue(value);
-      this.emitChange(_value);
-    },
-    focus() {
-      const timepicker = this.$children[0];
-      timepicker && timepicker.focus();
-    },
-  },
-};
-</script>
-
-<style lang="less" scoped>
-.ui-timepicker-field.el-date-editor {
-  width: 100%;
-}
-</style>

package/src/components/field/field.timeselect.vue

@@ -1,24 +0,0 @@
-<template>
-  <el-time-select v-bind="$attrs" v-on="$listeners" :value="value" class="ui-timeselect-field"></el-time-select>
-</template>
-
-<script>
-import FieldMixin from './field.mixin';
-
-export default {
-  name: 'ui-field-timeselect',
-  mixins: [FieldMixin],
-  methods: {
-    focus() {
-      const timeselect = this.$children[0];
-      timeselect && timeselect.focus();
-    },
-  },
-};
-</script>
-
-<style lang="less" scoped>
-.ui-timeselect-field.el-date-editor {
-  width: 100%;
-}
-</style>

package/src/components/field/field.trigger.dialog.vue

@@ -1,50 +0,0 @@
-<template>
-  <div class="ui-field-trigger-dialog">
-    <el-input :placeholder="placeholder" :value="value" readonly @focus="show">
-      <el-button slot="append" :icon="icon" @click="show"></el-button>
-    </el-input>
-    <ui-dialog :title="placeholder" v-bind="dialog" v-on="$listeners" :visible.sync="visible" :cancel="cancel" :confirm="confirm">
-      <slot></slot>
-    </ui-dialog>
-  </div>
-</template>
-
-<script>
-import FieldMixin from './field.mixin';
-
-export default {
-  name: 'ui-field-trigger-dialog',
-  mixins: [FieldMixin],
-  props: {
-    placeholder: String,
-    cancel: {
-      type: Function,
-      default: (hide) => hide(),
-    },
-    confirm: {
-      type: Function,
-      default: (hide) => hide(),
-    },
-    icon: {
-      type: String,
-      default: 'el-icon-search',
-    },
-    dialog: [Object, String],
-  },
-  data() {
-    return {
-      visible: false,
-    };
-  },
-  methods: {
-    show() {
-      this.visible = true;
-    },
-  },
-};
-</script>
-
-<style lang="less" scoped>
-.ui-field-trigger-dialog {
-}
-</style>

package/src/components/field/field.trigger.popover.vue

@@ -1,63 +0,0 @@
-<template>
-  <el-popover v-bind="popover" v-on="$listeners" v-model="show" ref="popover" :width="popoverWidth" class="ui-field-trigger-popover" trigger="click">
-    <slot></slot>
-    <el-input slot="reference" :placeholder="placeholder" :value="value" readonly ref="trigger">
-      <template slot="prepend">
-        <ui-icon :name="prefixIcon"/>
-      </template>
-      <el-button slot="append" :icon="icon"></el-button>
-    </el-input>
-  </el-popover>
-</template>
-
-<script>
-import debounce from 'lodash.debounce';
-import FieldMixin from './field.mixin';
-
-export default {
-  name: 'ui-field-trigger-popover',
-  mixins: [FieldMixin],
-  props: {
-    placeholder: String,
-    icon: {
-      type: String,
-      default: 'el-icon-search',
-    },
-    popover: [Object, String],
-    visible: Boolean,
-    prefixIcon: String,
-  },
-  data() {
-    return {
-      show: this.visible,
-      popoverWidth: undefined,
-    };
-  },
-  watch: {
-    visible() {
-      this.show = this.visible;
-    },
-    show() {
-      this.$emit('update:visible', this.show);
-    },
-  },
-  mounted() {
-    this.computedPopoverWidth();
-  },
-  updated() {
-    this.computedPopoverWidth();
-  },
-  methods: {
-    computedPopoverWidth: debounce(function() {
-      this.popoverWidth = this.$refs.trigger.$el.offsetWidth;
-      this.$refs.popover.popperJS && this.$refs.popover.updatePopper();
-    }, 200),
-  },
-};
-</script>
-
-<style lang="less" scoped>
-.ui-field-trigger-popover {
-  width: 100%;
-}
-</style>