@v2coding/ui 0.1.7 → 0.1.8

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.lnglat.vue

@@ -1,236 +0,0 @@
-<template>
-  <div class="ui-field-latlng" v-loading="loading">
-    <div class="map"></div>
-    <div class="info" v-show="!loading">
-      <div class="input-item searchbox">
-        <div class="input-item-prepend">
-          <span class="input-item-text">搜索关键字</span>
-        </div>
-        <!--    form="__ignore__" 避免 enter提交表单    -->
-        <input ref="input" type="text" form="__ignore__" placeholder="请输入...">
-        <div ref="output" class="search-result"></div>
-      </div>
-    </div>
-  </div>
-</template>
-
-<script>
-  import gcoord from 'gcoord';
-  import {getAMap} from '../../config/config.amap';
-  import FieldMixin from './field.mixin';
-
-  const CoordTypes = {
-    bd09: gcoord.BD09,
-    gcj02: gcoord.GCJ02,
-    wgs84: gcoord.WGS84,
-  };
-
-  export default {
-    name: 'ui-field-latlng',
-    mixins: [FieldMixin],
-    props: {
-      coordType: {
-        type: String,
-        default: 'wgs84',
-        validator: (val) => Object.keys(CoordTypes).includes(val),
-      },
-    },
-    data() {
-      return {
-        loading: true,
-        keyword: '',
-      };
-    },
-    computed: {
-      point() {
-        if (!this.value) {
-          return null;
-        }
-        if (!this.isValidPoint(this.value)) {
-          return null;
-        }
-        const [lat, lng] = this.value.split(',');
-        return {lat: +lat, lng: +lng};
-      },
-    },
-    watch: {
-      point(p) {
-        this.onPointChange(p);
-      },
-    },
-    methods: {
-      init() {
-        getAMap(['AMap.ToolBar', 'AMap.Geolocation', 'AMap.AutoComplete']).then((AMap) => {
-          this.initMap(AMap);
-          this.loading = false;
-          this.done();
-        });
-      },
-      initMap(AMap) {
-        const map = new AMap.Map(this.$el.querySelector('.map'), {
-          zoom: 11,
-        });
-
-        map.addControl(new AMap.ToolBar({position: 'RT'}));
-        map.addControl(new AMap.Geolocation({position: 'RB'}));
-        const auto = new AMap.AutoComplete({
-          input: this.$refs.input,
-          output: this.$refs.output,
-        });
-
-        map.on('click', this.onMapClick);
-        auto.on('select', (event) => {
-          if (!event.poi || !event.poi.location) {
-            return;
-          }
-          map.setZoomAndCenter(16, event.poi.location);
-        });
-
-        this.map = map;
-
-        this.onPointChange(this.point);
-      },
-      isValidPoint(val) {
-        const [lat, lng] = val.split(',');
-        return !(isNaN(+lat) || isNaN(+lng));
-      },
-      onMapClick({lnglat}) {
-        let {lat, lng} = lnglat;
-        // 当前地图是 GCJ02 坐标系
-        if (this.coordType !== 'gcj02') {
-          [lng, lat] = gcoord.transform([lng, lat], gcoord.GCJ02, CoordTypes[this.coordType]);
-          lng = lng.toFixed(7) / 1;
-          lat = lat.toFixed(7) / 1;
-        }
-        this.onChange([lat, lng].join(','));
-      },
-      onPointChange(point) {
-        if (!this.map) {
-          return;
-        }
-        this.map.clearMap();
-        if (!point) {
-          return;
-        }
-        let {lng, lat} = point;
-        // 当前地图是 GCJ02 坐标系
-        if (this.coordType !== 'gcj02') {
-          [lng, lat] = gcoord.transform([lng, lat], CoordTypes[this.coordType], gcoord.GCJ02);
-        }
-        // eslint-disable-next-line no-undef
-        const marker = new AMap.Marker({position: new AMap.LngLat(lng, lat)});
-        this.map.add(marker);
-        this.map.setCenter([lng, lat]);
-      },
-    },
-  };
-</script>
-
-<style lang="less">
-  .ui-field-latlng {
-    width: 100%;
-    height: 280px;
-    position: relative;
-
-    .map {
-      width: 100%;
-      height: 100%;
-    }
-
-    .info {
-      position: absolute;
-      top: 0;
-      left: 0;
-      right: 0;
-      bottom: 0;
-      pointer-events: none;
-
-      .searchbox {
-        left: 12px;
-        top: 12px;
-        background-color: #fff;
-        box-shadow: 0 0 3px rgba(0, 0, 0, .5);
-        pointer-events: initial;
-        border-radius: 3px;
-        padding: 3px;
-
-        .search-result {
-          position: absolute;
-          top: calc(100% - 2px);
-          left: 0;
-          right: 0;
-          background-color: #fefefe;
-          box-shadow: 0 1px 3px #999 ;
-          visibility: hidden;
-          border-radius: 0 0 3px 3px;
-
-          .auto-item {
-            white-space: nowrap;
-            font-size: 12px;
-            cursor: pointer;
-            padding: 4px;
-            line-height: 14px;
-          }
-        }
-      }
-    }
-
-    .input-item {
-      position: relative;
-      display: inline-flex;
-      align-items: center;
-      width: 220px;
-      font-size: 12px;
-
-      .input-item-prepend {
-        margin-right: -1px;
-
-        .input-item-text {
-          padding: 0.25em 0.5em;
-          display: block;
-          text-justify: distribute-all-lines;
-          text-align-last: justify;
-          align-items: center;
-          margin-bottom: 0;
-          font-weight: 400;
-          line-height: 1.5;
-          color: #495057;
-          text-align: center;
-          white-space: nowrap;
-          background-color: #e9ecef;
-          border: 1px solid #ced4da;
-          border-radius: .25rem 0 0 .25rem;
-          box-sizing: border-box;
-        }
-      }
-
-      input {
-        position: relative;
-        flex: 1 1 auto;
-        width: 1%;
-        margin: 0;
-        background: #fff;
-        padding: 0.25em 0.5em;
-        display: inline-block;
-        line-height: 1.5;
-        color: #495057;
-        vertical-align: middle;
-        border: 1px solid #ced4da;
-        border-radius: 0 .25rem .25rem 0;
-        appearance: none;
-        box-sizing: border-box;
-
-        &:focus {
-          border-color: #80bdff;
-          outline: 0;
-          box-shadow: 0 0 0 0.1rem rgba(128, 189, 255, .1);
-        }
-      }
-    }
-
-    .amap-logo,
-    .amap-copyright {
-      display: none !important;
-    }
-  }
-</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>

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>