@v2coding/ui 0.1.4 → 0.1.8

package/src/components/field/field.checkbox.vue

@@ -1,134 +0,0 @@
-<template>
-  <div class="ui-field-checkbox" v-loading="realLoading" element-loading-spinner="el-icon-loading">
-    <el-checkbox-group v-show="all && realData.length" class="all" :value="checkAll">
-      <component :is="optionComponent" :indeterminate="indeterminate" @change="onCheckAllChange" :border="ui === 'border'">全选</component>
-    </el-checkbox-group>
-    <el-divider v-show="all && realData.length" direction="vertical"></el-divider>
-    <el-checkbox-group v-bind="$attrs" :value="pickerValue" @input="onChange" class="options">
-      <component
-        :is="optionComponent"
-        v-for="item in realData"
-        :key="item.value"
-        :label="item.value"
-        :border="ui === 'border'"
-        :checked="item.checked"
-        :disabled="item.disabled"
-        :true-label="item.trueLabel"
-        :false-label="item.falseLabel"
-      >
-        {{ item.label }}
-      </component>
-    </el-checkbox-group>
-    <div v-if="isEmpty" class="empty">暂无数据!&emsp;<el-button v-show="realError" type="text" @click="init">重新加载</el-button>
-    </div>
-  </div>
-</template>
-
-<script>
-  import FieldMixin from './field.mixin';
-  import DataMixin from './field.data.mixin';
-
-  export default {
-    name: 'ui-field-checkbox',
-    mixins: [FieldMixin, DataMixin],
-    props: {
-      ui: {
-        type: String,
-        validator: (val) => ['default', 'border', 'button'].includes(val),
-      },
-      all: {
-        type: Boolean,
-        default: true,
-      },
-    },
-    computed: {
-      pickerValue() {
-        return this.valueToArr(this.value);
-      },
-      optionComponent() {
-        if (this.ui === 'button') {
-          return 'el-checkbox-button';
-        }
-        return 'el-checkbox';
-      },
-      checkAll() {
-        const valueArr = this.value ? this.value.split(',') : [];
-        return !this.realData.some((item) => !valueArr.includes(String(item.value)));
-      },
-      indeterminate() {
-        if (this.checkAll) {
-          return false;
-        }
-        return !!this.pickerValue.length;
-      },
-      isEmpty() {
-        return !this.realData.length;
-      },
-    },
-    methods: {
-      init() {
-        this.getData().then(() => {
-          this.done();
-        });
-      },
-      valueToArr(value) {
-        return value ? value.split(',') : [];
-      },
-      onCheckAllChange(checkAll) {
-        if (checkAll) {
-          const vals = this.realData.map(({value}) => value);
-          this.onChange(vals);
-        } else {
-          this.onChange([]);
-        }
-      },
-      onChange(val) {
-        this.emitChange(val.join(','));
-      },
-      resetValue() {
-        this.onChange([]);
-      },
-    },
-  };
-</script>
-
-<style lang="less" scoped>
-  .ui-field-checkbox {
-    .all {
-      display: flex;
-
-      > .el-checkbox {
-        margin-right: 0;
-      }
-    }
-
-    .options {
-      display: flex;
-      flex-direction: row;
-      align-items: center;
-    }
-
-    .empty {
-      display: inline-flex;
-      align-items: center;
-      font-size: 12px;
-      color: #909399;
-    }
-
-    ::v-deep .el-checkbox {
-      margin: 0 8px 0 0;
-    }
-
-    ::v-deep .el-checkbox.is-bordered + .el-checkbox.is-bordered {
-      margin-left: 0;
-    }
-
-    ::v-deep .el-divider {
-      margin: 0 10px;
-    }
-  }
-
-  ::v-deep .el-loading-mask .el-loading-spinner {
-    margin-top: -14px;
-  }
-</style>

package/src/components/field/field.color.vue

@@ -1,24 +0,0 @@
-<template>
-  <el-color-picker v-bind="$attrs" v-on="$listeners" :value="value" :show-alpha="showAlpha" class="ui-field-color"></el-color-picker>
-</template>
-
-<script>
-import FieldMixin from './field.mixin';
-
-export default {
-  name: 'ui-field-color',
-  mixins: [FieldMixin],
-  props: {
-    showAlpha: {
-      type: Boolean,
-      default: true,
-    },
-  },
-};
-</script>
-
-<style scoped>
-.ui-field-color {
-  width: 100%;
-}
-</style>

package/src/components/field/field.date.vue

@@ -1,145 +0,0 @@
-<template>
-  <el-date-picker
-    v-bind="$attrs"
-    v-on="_listeners"
-    :value="pickerValue"
-    :type="type"
-    :format="format"
-    :value-format="valueFormat"
-    :start-placeholder="startPlaceholder"
-    :end-placeholder="endPlaceholder"
-    :picker-options="realPickerOptions"
-    @input="onChange"
-    class="ui-date-field"
-  />
-</template>
-
-<script>
-  import FieldMixin from './field.mixin';
-  import {DisabledDate, Shortcuts} from './field.date.picker-options';
-
-  export default {
-  name: 'ui-field-date',
-  mixins: [FieldMixin],
-  props: {
-    type: {
-      type: String,
-      default: 'date',
-    },
-    format: {
-      type: String,
-      default() {
-        switch (this.type) {
-          case 'year':
-            return 'yyyy';
-          case 'month':
-          case 'monthrange':
-            return 'yyyy-MM';
-          case 'week':
-            return 'yyyy-WW';
-          case 'datetime':
-          case 'datetimerange':
-            return 'yyyy-MM-dd HH:mm:ss';
-          default:
-            return 'yyyy-MM-dd';
-        }
-      },
-    },
-    valueFormat: {
-      type: String,
-      default() {
-        return this.format;
-      },
-    },
-    startPlaceholder: {
-      type: String,
-      default: '请选择开始时间',
-    },
-    endPlaceholder: {
-      type: String,
-      default: '请选择结束时间',
-    },
-    pickerOptions: {
-      type: Object,
-    },
-    shortcuts: {
-      type: String,
-      default() {
-        if (this.type === 'date') {
-          return 'today,yesterday,lastMonth';
-        }
-        return '';
-      }
-    },
-    disabledDate: {
-      type: String,
-      validator: (val) => ['before', 'after'].includes(val),
-    },
-  },
-  computed: {
-    pickerValue() {
-      return this.getPickerValue(this.value);
-    },
-    realPickerOptions() {
-      if (this.pickerOptions) {
-        return this.pickerOptions;
-      }
-      const options = {};
-      if (this.shortcuts) {
-        const shortcuts = [];
-        this.shortcuts.split(',').reduce((prev, shortcut) => {
-          const sc = Shortcuts[shortcut];
-          if (sc) {
-            prev.push(sc);
-          }
-          return prev;
-        }, shortcuts);
-        shortcuts.length > 0 && (options.shortcuts = shortcuts);
-      }
-      if (this.disabledDate) {
-        const disabledDate = DisabledDate[this.disabledDate];
-        disabledDate && (options.disabledDate = disabledDate);
-      }
-      return options;
-    },
-  },
-  methods: {
-    getPickerValue(value) {
-      switch (this.type) {
-        case 'dates':
-        case 'daterange':
-        case 'monthrange':
-        case 'datetimerange':
-          return value ? value.split(',') : [];
-        default:
-          return value;
-      }
-    },
-    getRealValue(value) {
-      switch (this.type) {
-        case 'dates':
-        case 'daterange':
-        case 'monthrange':
-        case 'datetimerange':
-          return value ? value.join(',') : '';
-        default:
-          return value || '';
-      }
-    },
-    onChange(value) {
-      const _value = this.getRealValue(value);
-      this.emitChange(_value);
-    },
-    focus() {
-      const datepicker = this.$children[0];
-      datepicker && datepicker.focus();
-    },
-  },
-};
-</script>
-
-<style lang="less" scoped>
-.ui-date-field.el-date-editor {
-  width: 100%;
-}
-</style>

package/src/components/field/field.icons.vue

@@ -1,123 +0,0 @@
-<template>
-  <trigger-field popover v-bind="$attrs" :value="value" :visible.sync="visible" :prefix-icon="value" @hide="onHide">
-    <div class="ui-field-icons">
-      <el-input class="filter" v-model="filter" placeholder="输入名称快速查找" clearable/>
-      <div class="scroll">
-        <div class="icons" v-loading="iconsLoading">
-          <div v-for="icon in filteredIcons" :key="icon" class="icon" :class="{active: value === icon}" :title="icon" @click="sel(icon)">
-            <icon :name="icon"/>
-            <span class="ellipsis">{{ icon }}</span>
-          </div>
-        </div>
-      </div>
-    </div>
-  </trigger-field>
-</template>
-
-<script>
-import Icon from '../icon/icon';
-import FieldMixin from './field.mixin';
-import TriggerField from './field.trigger';
-import Iconfont from '../../config/config.iconfont';
-
-export default {
-  name: 'ui-field-icons',
-  mixins: [FieldMixin],
-  components: {Icon, TriggerField},
-  data() {
-    return {
-      filter: '',
-      icons: [],
-      iconsLoading: false,
-      visible: false,
-    };
-  },
-  computed: {
-    filteredIcons() {
-      return this.icons.filter((icon) => icon.toLowerCase().indexOf(String(this.filter).toLowerCase()) !== -1);
-    },
-  },
-  mounted() {
-    this.initIcons();
-  },
-  methods: {
-    async initIcons() {
-      this.iconsLoading = true;
-      const icons = await Iconfont.getIcons();
-      this.iconsLoading = false;
-      this.icons = icons;
-    },
-    onChange(val) {
-      this.$emit('input', val);
-      this.$emit('change', val);
-    },
-    sel(icon) {
-      this.onChange(icon);
-      this.visible = false;
-    },
-    onHide() {
-      this.filter = '';
-    },
-    focus() {
-      this.visible = true;
-    },
-  },
-};
-</script>
-
-<style lang="less" scoped>
-.ui-field-icons {
-  .filter {
-    margin-bottom: 10px;
-
-    ::v-deep .el-input__validateIcon {
-      display: none;
-    }
-  }
-
-  .scroll {
-    height: 200px;
-    overflow: auto;
-  }
-
-  .icons {
-    display: flex;
-    flex-wrap: wrap;
-
-    .icon {
-      flex: none;
-      width: 150px;
-      height: 28px;
-      margin: 2px;
-      padding: 4px;
-      border-radius: 2px;
-      cursor: pointer;
-      transition: all 0.3s;
-      overflow: hidden;
-      text-overflow: ellipsis;
-      white-space: nowrap;
-      display: flex;
-      flex-direction: row;
-      align-items: center;
-
-      &:hover {
-        background: #eaeaea;
-      }
-
-      &.active {
-        color: #409eff;
-        box-shadow: inset 0 0 3px #666;
-      }
-
-      .ui-icon {
-        margin-right: 4px;
-      }
-
-      span {
-        flex: 1;
-
-      }
-    }
-  }
-}
-</style>

package/src/components/field/field.number.vue

@@ -1,43 +0,0 @@
-<template>
-  <el-input-number v-bind="$attrs" v-on="$listeners" :value="pickerValue" class="ui-number-field" :controls-position="controlsPosition" />
-</template>
-
-<script>
-  import FieldMixin from './field.mixin';
-
-  export default {
-  name: 'ui-field-number',
-  mixins: [FieldMixin],
-  props: {
-    controlsPosition: {
-      type: String,
-      default: 'right',
-    },
-  },
-  computed: {
-    pickerValue() {
-      const v = [null, undefined, ''].includes(this.value) ? undefined : +this.value;
-      if (isNaN(v)) {
-        return undefined;
-      }
-      return v;
-    },
-  },
-    methods: {
-      focus() {
-        const numberInput = this.$children[0];
-        numberInput && numberInput.focus();
-      },
-    }
-};
-</script>
-
-<style lang="less" scoped>
-.ui-number-field {
-  width: 100%;
-
-  ::v-deep input {
-    text-align: initial;
-  }
-}
-</style>

package/src/components/field/field.radio.vue

@@ -1,100 +0,0 @@
-<template>
-  <div class="ui-field-radio" v-loading="realLoading" element-loading-spinner="el-icon-loading">
-    <el-radio-group v-bind="$attrs" v-on="$listeners" :value="value">
-      <component v-bind:is="optionComponent" v-bind="item" v-for="item in realData" :key="item.value" :label="item.value" :border="ui === 'border'" :title="item.label">
-        {{ item.label }}
-      </component>
-    </el-radio-group>
-    <div v-if="isEmpty" class="empty">暂无数据!&emsp;<el-button v-show="realError" type="text" @click="init">重新加载</el-button>
-    </div>
-  </div>
-</template>
-
-<script>
-  import FieldMixin from './field.mixin';
-  import DataMixin from './field.data.mixin';
-  import Objects from '../../util/objects';
-
-  export default {
-    name: 'ui-field-radio',
-    mixins: [FieldMixin, DataMixin],
-    props: {
-      ui: {
-        type: String,
-        validator: (val) => ['default', 'border', 'button'].includes(val),
-      },
-      initDefault: {
-        type: Boolean,
-        default: true,
-      },
-    },
-    computed: {
-      optionComponent() {
-        if (this.ui === 'button') {
-          return 'el-radio-button';
-        }
-        return 'el-radio';
-      },
-      isEmpty() {
-        return !this.realData.length;
-      },
-    },
-    watch: {
-      realData(data, o) {
-        if (!Objects.isEquals(data, o)) {
-          this.initDefaultValue();
-        }
-      },
-    },
-    methods: {
-      init() {
-        this.getData().then(() => {
-          this.done();
-          this.initDefaultValue();
-        });
-      },
-      initDefaultValue() {
-        if (!this.initDefault) {
-          return;
-        }
-        if (this.hasMatched()) {
-          return;
-        }
-        const first = this.realData.find(Boolean);
-        first && this.onChange(first.value);
-      },
-      hasMatched() {
-        return this.realData.some((item) => Object.is(item.value, this.value));
-      },
-      resetValue() {
-        this.onChange('');
-      },
-    },
-  };
-</script>
-
-<style lang="less" scoped>
-  .ui-field-radio {
-    .empty {
-      display: inline-flex;
-      align-items: center;
-      font-size: 12px;
-      color: #909399;
-    }
-
-    > .el-radio-group {
-      display: inline-flex;
-      flex-direction: row;
-      flex-wrap: wrap;
-      align-items: center;
-
-      .el-radio {
-        line-height: 36px;
-      }
-    }
-  }
-
-  ::v-deep .el-loading-mask .el-loading-spinner {
-    margin-top: -14px;
-  }
-</style>

package/src/components/field/field.rate.vue

@@ -1,37 +0,0 @@
-<template>
-  <el-rate v-bind="$attrs" v-on="_listeners" v-model="score" :max="max"></el-rate>
-</template>
-
-<script>
-import FieldMixin from './field.mixin';
-
-export default {
-  name: 'ui-field-rate',
-  mixins: [FieldMixin],
-  props: {
-    max: {
-      type: Number,
-      default: 5,
-    },
-  },
-  computed: {
-    score: {
-      get() {
-        if (!this.value) {
-          return 0;
-        }
-        const num = Number(this.value);
-        if (isNaN(num)) {
-          return 0;
-        }
-        return Math.min(num, this.max);
-      },
-      set(v) {
-        this.onChange(v);
-      }
-    },
-  },
-};
-</script>
-
-<style scoped></style>