@v2coding/ui 0.1.4 → 0.1.8

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

@@ -1,155 +0,0 @@
-<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';
-
-  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);
-      },
-    },
-  };
-
-  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>

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>