@v2coding/ui 0.1.1 → 0.1.6

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/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/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,

package/src/components/page/search-page.vue

@@ -0,0 +1,202 @@
+<template>
+  <document-title :title="title">
+    <multipane class="router-search-page" >
+      <div class="page-search-conditions" :class="{collapse}" :style="searchConditionsStyle">
+        <div v-show="!collapse" class="search-content">
+          <slot name="search"></slot>
+        </div>
+        <div class="indicator" @click="toggleCollapse"></div>
+      </div>
+      <multipane-resizer v-show="!collapse"/>
+      <div class="page-search-content" :class="{'page-content-direction-row': direction === 'row'}">
+        <slot></slot>
+      </div>
+    </multipane>
+  </document-title>
+</template>
+
+<script>
+  import {Multipane, MultipaneResizer} from 'vue-multipane';
+  import DocumentTitle from '../document-title';
+
+  export default {
+    name: 'ui-search-page',
+    components: {
+      Multipane,
+      MultipaneResizer,
+      DocumentTitle,
+    },
+    props: {
+      value: {
+        type: String,
+        default: '360px',
+      },
+      min: {
+        type: String,
+        default: '200px',
+      },
+      max: {
+        type: String,
+        default: '600px',
+      },
+      direction: {
+        type: String,
+        validator: (val) => ['row', 'column'].includes(val),
+        default: 'column',
+      },
+    },
+    data() {
+      return {
+        collapse: false,
+      }
+    },
+    computed: {
+      title() {
+        return this.$route.meta.name || '';
+      },
+      searchConditionsStyle() {
+        let width = this.value;
+        let min = this.min;
+        if (this.collapse) {
+          min = 0;
+          width = 0;
+        }
+        return {
+          width: width,
+          minWidth: min,
+          maxWidth: this.max,
+        };
+      },
+    },
+    methods: {
+      toggleCollapse() {
+        this.collapse = !this.collapse;
+      },
+    },
+  };
+</script>
+
+<style lang="scss">
+
+  .router-search-page {
+    height: 100%;
+
+    .page-search-conditions {
+      display: flex;
+      flex-direction: column;
+      position: relative;
+
+      .search-content {
+        flex: 1;
+        display: flex;
+        flex-direction: column;
+      }
+
+      .indicator {
+        position: absolute;
+        top: 50%;
+        right: 0;
+        transform: translateY(-50%);
+        width: 14px;
+        height: 36px;
+        opacity: 0.3;
+        background-color: #ccc;
+        transition-duration: 200ms;
+        transition-property: background-color, opacity;
+        transition-timing-function: ease-in-out;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        flex-direction: column;
+        border-radius: 4px 0 0 4px;
+        cursor: pointer;
+
+        &:hover {
+          opacity: 1;
+          background-color: var(--color-primary);
+        }
+
+        &:hover:before {
+          transform: rotate(24deg);
+        }
+        &:hover:after {
+          transform: rotate(-24deg);
+        }
+
+        &::before,
+        &::after {
+          content: '';
+          display: block;
+          position: relative;
+          width: 2px;
+          height: 10px;
+          background-color: #fff;
+          transition: all 300ms ease-in-out;
+        }
+        &::before {
+          bottom: -1px;
+        }
+        &::after {
+          top: -1px;
+        }
+      }
+
+      &.collapse {
+        z-index: 2;
+
+        .indicator {
+          border-radius: 0 4px 4px 0;
+          right: -14px;
+
+          &:hover:before {
+            transform: rotate(-24deg);
+          }
+          &:hover:after {
+            transform: rotate(24deg);
+          }
+        }
+      }
+    }
+
+    .page-search-content {
+      flex: 1;
+      position: relative;
+      display: flex;
+      flex-direction: column;
+      overflow: auto;
+
+      &.page-search-content-direction-row {
+        flex-direction: row;
+      }
+    }
+
+    &.layout-v > .multipane-resizer {
+      margin: 0;
+      left: 0;
+      position: relative;
+
+      &.collapse {
+        display: none;
+      }
+
+      &:before {
+        display: block;
+        content: "";
+        width: 3px;
+        height: 40px;
+        position: absolute;
+        top: 50%;
+        left: 50%;
+        transform: translate(-50%, -50%);
+        border-left: 1px solid #ccc;
+        border-right: 1px solid #ccc;
+      }
+
+      &:hover {
+        &:before {
+          border-color: #999;
+        }
+      }
+    }
+  }
+</style>

package/src/components/scroll-view/scroll-view.vue

@@ -1,14 +1,14 @@
 <template>
-  <div :class="['scroll-nav__nav-wrap', `is-${direction}`]">
-    <div :class="['scroll-nav__nav-control scroll-nav__nav-prev', scrollable ? 'scroll-nav__nav-active' : '', scrollable && scrollable.prev ? '' : 'is-disabled']" @click="scrollPrev">
+  <div :class="['ui-scroll-view__nav-wrap', `is-${direction}`]">
+    <div :class="['ui-scroll-view__nav-control ui-scroll-view__nav-prev', scrollable ? 'ui-scroll-view__nav-active' : '', scrollable && scrollable.prev ? '' : 'is-disabled']" @click="scrollPrev">
       <slot name="prev" :disabled="scrollable && !scrollable.prev"><div class="menu-nav-control"></div></slot>
     </div>
-    <div ref="navScroll" class="scroll-nav__nav-scroll">
-      <div ref="nav" :class="['scroll-nav__nav', `is-${direction}`]" :style="navStyle">
+    <div ref="navScroll" class="ui-scroll-view__nav-scroll">
+      <div ref="nav" :class="['ui-scroll-view__nav', `is-${direction}`]" :style="navStyle">
         <slot></slot>
       </div>
     </div>
-    <div :class="['scroll-nav__nav-control scroll-nav__nav-next', scrollable ? 'scroll-nav__nav-active' : '', scrollable && scrollable.next ? '' : 'is-disabled']" @click="scrollNext">
+    <div :class="['ui-scroll-view__nav-control ui-scroll-view__nav-next', scrollable ? 'ui-scroll-view__nav-active' : '', scrollable && scrollable.next ? '' : 'is-disabled']" @click="scrollNext">
       <slot name="next" :disabled="scrollable && !scrollable.next"><div class="menu-nav-control"></div></slot>
     </div>
   </div>
@@ -22,7 +22,7 @@ const firstUpperCase = str => {
 };
 
 export default {
-  name: 'ScrollNav',
+  name: 'ui-scroll-view',
   props: {
     direction: {
       type: String,
@@ -154,7 +154,7 @@ export default {
 </script>
 
 <style lang="less">
-.scroll-nav__nav-wrap {
+.ui-scroll-view__nav-wrap {
   overflow: hidden;
   position: relative;
   display: flex;
@@ -169,10 +169,10 @@ export default {
     flex-direction: column;
   }
 
-  .scroll-nav__nav-scroll {
+  .ui-scroll-view__nav-scroll {
     overflow: hidden;
 
-    .scroll-nav__nav {
+    .ui-scroll-view__nav {
       position: relative;
       transition: transform .3s;
       display: flex;
@@ -189,7 +189,7 @@ export default {
     }
   }
 
-  &.is-row .scroll-nav__nav-control {
+  &.is-row .ui-scroll-view__nav-control {
     flex: none;
     width: 50px;
     height: 100%;
@@ -200,7 +200,7 @@ export default {
     justify-content: center;
     visibility: hidden;
 
-    &.scroll-nav__nav-active {
+    &.ui-scroll-view__nav-active {
       visibility: visible;
     }
 
@@ -233,7 +233,7 @@ export default {
       }
     }
 
-    &.scroll-nav__nav-prev {
+    &.ui-scroll-view__nav-prev {
       .menu-nav-control::before {
         transform: rotate(18deg);
       }
@@ -243,7 +243,7 @@ export default {
       }
     }
 
-    &.scroll-nav__nav-next {
+    &.ui-scroll-view__nav-next {
       .menu-nav-control::before {
         transform: rotate(-18deg);
       }
@@ -253,7 +253,7 @@ export default {
       }
     }
 
-    &.scroll-nav__nav-prev:hover {
+    &.ui-scroll-view__nav-prev:hover {
       .menu-nav-control::before {
         transform: rotate(30deg);
       }
@@ -263,7 +263,7 @@ export default {
       }
     }
 
-    &.scroll-nav__nav-next:hover {
+    &.ui-scroll-view__nav-next:hover {
       .menu-nav-control::before {
         transform: rotate(-30deg);
       }
@@ -286,7 +286,7 @@ export default {
   &.is-column {
     height: 100%;
 
-    .scroll-nav__nav-control {
+    .ui-scroll-view__nav-control {
       flex: none;
       width: 100%;
       height: 35px;
@@ -297,7 +297,7 @@ export default {
       justify-content: center;
       visibility: hidden;
 
-      &.scroll-nav__nav-active {
+      &.ui-scroll-view__nav-active {
         visibility: visible;
       }
 
@@ -330,7 +330,7 @@ export default {
         }
       }
 
-      &.scroll-nav__nav-prev {
+      &.ui-scroll-view__nav-prev {
         .menu-nav-control::before {
           transform: rotate(-18deg);
         }
@@ -340,7 +340,7 @@ export default {
         }
       }
 
-      &.scroll-nav__nav-next {
+      &.ui-scroll-view__nav-next {
         .menu-nav-control::before {
           transform: rotate(18deg);
         }
@@ -350,7 +350,7 @@ export default {
         }
       }
 
-      &.scroll-nav__nav-prev:hover {
+      &.ui-scroll-view__nav-prev:hover {
         .menu-nav-control::before {
           transform: rotate(-30deg);
         }
@@ -360,7 +360,7 @@ export default {
         }
       }
 
-      &.scroll-nav__nav-next:hover {
+      &.ui-scroll-view__nav-next:hover {
         .menu-nav-control::before {
           transform: rotate(30deg);
         }