@v2coding/ui 0.1.0

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

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

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

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

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

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

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

package/src/components/field/field.rich.vue

@@ -0,0 +1,165 @@
+<template>
+  <quill-editor :content="value" :options="realOptions" @change="onChange"></quill-editor>
+</template>
+
+<script>
+  import {Message} from 'element-ui';
+  import {Quill, quillEditor} from 'vue-quill-editor';
+  import FieldMixin from './field.mixin';
+  import {quillRedefine} from './field.rich.upload';
+  import 'quill/dist/quill.core.css';
+  import 'quill/dist/quill.snow.css';
+  import 'quill/dist/quill.bubble.css';
+  import Objects from '../../util/objects';
+  import {addFieldType} from '../form/form.field';
+
+  const Font = Quill.import('formats/font');
+
+  Font.whitelist = ['Arial', 'FangSong', 'HeiTi', 'Microsoft'];
+
+  Quill.register(Font, true);
+
+  const defaultConfig = {
+    upload: {
+      url: ({type}) => (type === 'oss' ? '/aliyun/oss' : '/api/oss/upload'), // 必填参数 图片上传地址
+      accept: 'image/png, image/gif, image/jpeg, image/bmp, image/x-icon', // 可选 可上传的图片格式
+      filename: 'file', // 必填参数 文件的参数名
+      type: 'oss', // default:上传至服务器; oss:上传至oss
+      afterUpload(result) {
+        if (!result.success) {
+          Message.error(result.message || '上传错误');
+          return;
+        }
+        return result.content.url;
+      },
+      beforeUpload: () => void 0,
+    },
+    placeholder: '请输入...',
+    theme: 'snow', // 主题
+    modules: {
+      toolbar: {
+        // 工具栏选项
+        container: [
+          ['bold', 'italic', 'underline', 'strike'],
+          ['blockquote', 'code-block'],
+          [{header: 1}, {header: 2}],
+          [{list: 'ordered'}, {list: 'bullet'}],
+          [{script: 'sub'}, {script: 'super'}],
+          [{indent: '-1'}, {indent: '+1'}],
+          [{direction: 'rtl'}],
+          [{size: ['small', false, 'large', 'huge']}],
+          [{header: [1, 2, 3, 4, 5, 6, false]}],
+          [{color: []}, {background: []}],
+          [{font: ['Arial', 'FangSong', 'HeiTi', 'Microsoft']}],
+          [{align: []}],
+          ['clean'],
+          ['link', 'image', 'video'],
+        ],
+      },
+    },
+  };
+
+  const RichField = {
+    name: 'ui-field-rich',
+    mixins: [FieldMixin],
+    components: {
+      quillEditor,
+    },
+    computed: {
+      realOptions() {
+        return quillRedefine(Objects.merge({}, defaultConfig, this.$attrs));
+      },
+    },
+    methods: {
+      onChange({html}) {
+        this.emitChange(html);
+      },
+    },
+  };
+
+  /**
+   * ui-form-item 添加 type="rich" 支持
+   */
+  const attachToFormItem = () => {
+    addFieldType('rich', RichField);
+  };
+
+  RichField.attachToFormItem = attachToFormItem;
+
+  export default RichField;
+</script>
+
+<style lang="less">
+  .quill-editor {
+    /*工具栏内用*/
+
+    .ql-font {
+      span[data-value="Arial"]::before {
+        content: "Arial" !important;
+        font-family: "Arial",serif;
+      }
+
+      span[data-value="FangSong"]::before {
+        content: "仿宋" !important;
+        font-family: "仿宋_GB2312", "FangSong_GB2312", "宋体", "SimSun", "STFangsong","STSong", serif;
+      }
+
+      span[data-value="HeiTi"]::before {
+        content: "黑体" !important;
+        font-family: "黑体", "SimHei", "微软正黑体", "Microsoft JhengHei", "STHeiti",serif;
+      }
+
+      span[data-value="Microsoft"]::before {
+        content: "微软雅黑" !important;
+        font-family: "微软雅黑", "Microsoft YaHei",serif;
+      }
+    }
+
+    /*编辑器内容用*/
+
+    .ql-font-Arial {
+      font-family: "Arial",serif;
+    }
+
+    .ql-font-FangSong {
+      font-family: "仿宋_GB2312", "FangSong_GB2312", "宋体", "SimSun", "STFangsong","STSong", serif;
+    }
+
+    .ql-font-HeiTi {
+      font-family: "黑体", "SimHei", "微软正黑体", "Microsoft JhengHei", "STHeiti",serif;
+    }
+
+    .ql-font-Microsoft {
+      font-family: "微软雅黑", "Microsoft YaHei",serif;
+    }
+  }
+</style>
+
+<style lang="less" scoped>
+  .quill-editor {
+    width: 100%;
+
+    display: flex;
+    align-items: initial !important;
+    flex-direction: column;
+
+    .ql-toolbar {
+      flex: none;
+    }
+
+    .ql-container {
+      flex: auto;
+      height: initial;
+      display: flex;
+      flex-direction: column;
+
+      .ql-editor {
+        flex: auto;
+      }
+    }
+  }
+
+  .quill-editor ::v-deep .ql-editor {
+    min-height: 200px;
+  }
+</style>