@v2coding/ui 0.1.0

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

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

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

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

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

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

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

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

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