@v2coding/ui 0.1.0 → 0.1.5

package/src/components/field/field.lnglat.vue

@@ -0,0 +1,236 @@
+<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.rich.vue

@@ -11,7 +11,6 @@
   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');
 
@@ -77,15 +76,6 @@
     },
   };
 
-  /**
-   * ui-form-item 添加 type="rich" 支持
-   */
-  const attachToFormItem = () => {
-    addFieldType('rich', RichField);
-  };
-
-  RichField.attachToFormItem = attachToFormItem;
-
   export default RichField;
 </script>
 

package/src/components/form/form.item.vue

@@ -152,9 +152,6 @@ export default {
   },
   methods: {
     registeredField () {
-      if (this.ignore) {
-        return;
-      }
       this.uiForm.addField(this.name, this.fieldValue, this);
     },
     resetField (...args) {

package/src/components/form/form.vue

@@ -8,6 +8,8 @@
 <script>
   import throttle from 'lodash.throttle';
   import Objects from '../../util/objects';
+  import FormItem from './form.item';
+  import TableSelectItem from '../table/table.select.item';
 
   export default {
     name: 'ui-form',
@@ -59,8 +61,6 @@
         fieldList: [],// [[name, value], ...]
       };
     },
-    created() {
-    },
     computed: {
       model() {
         return Object.fromEntries(this.fieldList);
@@ -71,7 +71,11 @@
         return listeners;
       },
     },
+    beforeCreate() {
+      this.isMounted = false;
+    },
     mounted() {
+      this.isMounted = true;
       this.$el.addEventListener('reset', this.onReset);
       this.checkFieldsReady();
     },
@@ -104,11 +108,12 @@
         if (!Objects.isObject(values)) {
           values = {};
         }
-        this.fieldList.slice().forEach(([name, , field]) => {
-          if (Object.prototype.hasOwnProperty.call(values, name)) {
-            field.resetField(values[name]);
+        const formItems = this.getFormItems();
+        formItems.forEach(item => {
+          if (Object.prototype.hasOwnProperty.call(values, item.name)) {
+            item.resetField(values[item.name]);
           } else {
-            field.resetField();
+            item.resetField();
           }
         });
       },
@@ -119,19 +124,40 @@
         if (!values || !Objects.isObject(values)) {
           return;
         }
+        const formItems = this.getFormItems();
         Object.entries(values).forEach(([fieldName, fieldValue]) => {
-          const fieldItem = this.fieldList.find(([name]) => name === fieldName);
+          const fieldItem = formItems.find(item => item.name === fieldName);
           if (!fieldItem) {
             return;
           }
-          fieldItem[2].fieldValue = fieldValue;
+          fieldItem.fieldValue = fieldValue;
         });
       },
       /**
        * @public
        */
       getValues() {
-        return Object.fromEntries(this.fieldList);
+        const formItems = this.getFormItems();
+        return formItems.reduce((values, item) => {
+          if (item.ignore === true) {
+            return values;
+          }
+          return {...values, [item.name]: item.fieldValue};
+        }, {});
+      },
+      getFormItems() {
+        const listSearchItem = (items) => {
+          return items.reduce((results, item) => {
+            // TableSelectItem mixins FormItem
+            if ([FormItem.name, TableSelectItem.name].includes(item.$options.name)) {
+              results.push(item);
+            } else {
+              results.push(...listSearchItem(item.$children || []));
+            }
+            return results;
+          }, []);
+        };
+        return listSearchItem(this.$children);
       },
       /**
        * @private
@@ -207,31 +233,14 @@
         }
         this[`onField${e}`](...args);
       },
-      getAllFields() {
-        const getFormFields = (components) => {
-          if (!Array.isArray(components) || !components.length) {
-            return [];
-          }
-          return components.reduce((total, component) => {
-            // ui-table-select-item mixins ui-form-item
-            if (['ui-form-item', 'ui-table-select-item'].includes(component.$options.name)) {
-              !component.ignore && component.name && total.push(component.name);
-            } else {
-              total.push(...getFormFields(component.$children));
-            }
-            return total;
-          }, []);
-        };
-        this.formFields = getFormFields(this.$children);
-        return this.formFields;
-      },
       /**
        * @private
        */
       onFieldPending(component) {
-        if(component.name) {
-          this.fieldStatus.push({name: component.name, status: false, instance: component});
+        if (!component.name) {
+          return;
         }
+        this.fieldStatus.push({name: component.name, status: false, instance: component});
       },
       /**
        * @private
@@ -244,8 +253,8 @@
           const i = this.fieldList.findIndex(item => item[0] === component.name);
           this.fieldList.splice(i, 1);
         }
-        const formFields = this.getAllFields();
-        if (formFields.length === this.fieldStatus.length) {
+        const formItems = this.getFormItems();
+        if (formItems.length === this.fieldStatus.length) {
           this.checkFieldsReady();
         }
       },
@@ -257,13 +266,9 @@
           return;
         }
         const index = this.fieldStatus.findIndex(item => item.name === component.name);
-        if (index === -1) {
-          this.fieldStatus.push({name: component.name, status: true, instance: component});
-        } else {
-          this.fieldStatus.splice(index, 1, {name: component.name, status: true, instance: component});
-        }
-        const formFields = this.getAllFields();
-        if (formFields.length === this.fieldStatus.length) {
+        index !== -1 && this.fieldStatus.splice(index, 1, {name: component.name, status: true, instance: component});
+        const formItems = this.getFormItems();
+        if (formItems.length === this.fieldStatus.length) {
           this.checkFieldsReady();
         }
       },
@@ -277,8 +282,12 @@
         }
       },
       checkFieldsReady() {
+        if (!this.isMounted) {
+          return;
+        }
         const isPending = this.fieldStatus.some(item => !item.status);
-        if (!isPending) {
+        if (!isPending && !this.isReady) {
+          this.isReady = true;
           this.$emit('ready');
         }
       },

package/src/components/head-menu/{index.vue → head-menu.vue}

@@ -16,7 +16,7 @@
   import MenuItem from './menu-item';
 
   export default {
-    name: 'head-menu',
+    name: 'ui-head-menu',
     components: {MenuItem},
     provide() {
       return {

package/src/components/head-menu/menu-item.vue

@@ -31,20 +31,16 @@
         return ['nav-menu-submenu-popup', this.theme].join(' ');
       },
     },
-    render() {
+    render(createElement) {
       if (this.isLeaf) {
-        return (
-          <el-menu-item index={this.index} route={this.route}>
-            <template slot="title">{this.item.name}</template>
-          </el-menu-item>
-        );
+        return createElement('el-menu-item', {props: {index: this.index, route: this.route}}, [
+            createElement('template', {slot: 'title'}, [this.item.name]),
+        ]);
       }
-      return (
-        <el-submenu index={this.index} popperClass={this.popperClass} popper-append-to-body={false}>
-          <template slot="title">{this.item.name}</template>
-          {this.item.children.map(child => <head-menu-submenu key={child.id} item={child}/>)}
-        </el-submenu>
-      );
+      return createElement('el-submenu', {props: {index: this.index, popperClass: this.popperClass, popperAppendToBody: false}}, [
+          createElement('template', {slot: 'title'}, [this.item.name]),
+          ...this.item.children.map(child => createElement('head-menu-submenu', {key: child.id, props: {item: child}})),
+      ]);
     },
   };
 </script>

package/src/components/history/{index.vue → history.vue}

@@ -1,6 +1,6 @@
 <template>
   <div class="history" v-show="visible">
-    <scroll-nav ref="menus" class="history-tabs">
+    <scroll-view ref="menus" class="history-tabs">
       <div
         v-for="item in items"
         :key="item.path"
@@ -10,7 +10,7 @@
         <span class="ellipsis" :title="item.title">{{ item.title }}</span>
         <i class="el-icon-close" @click.stop="onTabRemove(item.path)"></i>
       </div>
-    </scroll-nav>
+    </scroll-view>
     <div class="contextmenu" :style="contextmenu">
       <div
         class="modal"
@@ -54,8 +54,11 @@
 </template>
 
 <script>
+import ScrollView from '../scroll-view/scroll-view';
+
 export default {
-  name: "History",
+  name: "ui-history",
+  components: {ScrollView},
   props: {
     items: Array,
     current: null,
@@ -106,7 +109,7 @@ export default {
       this.$emit("remove-history", { type: "current", name: path });
     },
     onContextMenu(event) {
-      const container = this.$el.querySelector(".scroll-nav__nav");
+      const container = this.$el.querySelector(".ui-scroll-view__nav");
       const index = this.getChildContainIndex(container, event.target);
       const rect = this.$el.getBoundingClientRect();
       if (index !== -1) {
@@ -159,15 +162,13 @@ export default {
 </script>
 
 <style lang="scss">
-@import "../../assets/style/var";
-
 .history {
   flex: none;
   height: 40px;
   position: relative;
   margin: 10px 0 0;
 
-  .history-tabs.scroll-nav__nav-wrap {
+  .history-tabs.ui-scroll-view__nav-wrap {
     left: 0;
     right: 0;
     top: 0;
@@ -175,11 +176,11 @@ export default {
     position: absolute;
     align-items: flex-end;
 
-    .scroll-nav__nav-scroll {
+    .ui-scroll-view__nav-scroll {
       flex: 1;
     }
 
-    .scroll-nav__nav-control {
+    .ui-scroll-view__nav-control {
       width: 20px;
       height: 30px;
 
@@ -193,7 +194,7 @@ export default {
       }
     }
 
-    .scroll-nav__nav {
+    .ui-scroll-view__nav {
       align-items: flex-end;
     }
 

package/src/components/icon/icon.vue

@@ -37,7 +37,7 @@ export default {
 };
 </script>
 
-<style scoped>
+<style lang="less" scoped>
 .ui-icon {
   width: 1em;
   height: 1em;
@@ -45,10 +45,10 @@ export default {
   fill: currentColor;
   overflow: hidden;
   display: inline-block;
-}
 
-.ui-icon.ui-icon-loading {
-  animation: rotating 2s linear infinite;
+  &.ui-icon-loading {
+    animation: rotating 2s linear infinite;
+  }
 }
 
 @keyframes rotating {

package/src/components/minimize/{index.vue → minimize.vue}

@@ -9,7 +9,7 @@
 
 <script>
 export default {
-  name: 'minimize',
+  name: 'ui-minimize',
   props: {
     direction: {
       validator: (val) => ['top', 'right', 'bottom', 'left'].indexOf(val) !== -1,