@v2coding/ui 0.1.0 → 0.1.5

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);
         }

package/src/components/table/table.select.vue

@@ -104,7 +104,7 @@
         const listSearchItem = (items) => {
           return items.reduce((results, item) => {
             if (item.$options.name === TableSelectItem.name) {
-              if (item.ignore === false) {
+              if (!item.ignore) {
                 results.push(item);
               }
             } else {

package/src/components/table/table.vue

@@ -20,7 +20,7 @@
         </div>
       </div>
     </div>
-    <flex-scroll-view>
+    <fill-view>
       <el-table
         ref="table"
         height="100%"
@@ -42,7 +42,7 @@
           <div class="ui-table-empty">暂无数据</div>
         </template>
       </el-table>
-    </flex-scroll-view>
+    </fill-view>
     <div v-show="hasPagination" class="footer-bar">
       <slot name="footer-bar"/>
     </div>
@@ -50,6 +50,7 @@
   </div>
 </template>
 <script>
+  import FillView from '../fill-view/fill-view';
   import ExportsMixin from '../exports/mixin';
   import RemoteExportsDialog from '../exports/remote-exports-dialog';
 
@@ -595,12 +596,13 @@
       // },
     },
     components: {
+      FillView,
       RemoteExportsDialog,
       Refresh: {
         render(createElement) {
           return createElement('el-tooltip', {props: {content: '刷新'}}, [
               createElement('el-button', {
-                props: {icon: 'el-icon-fa-refresh', size: 'mini', circle: true},
+                props: {icon: 'el-icon-refresh', size: 'mini', circle: true},
                 on: {click: this.$parent.reload},
               }),
           ]);
@@ -610,7 +612,7 @@
         render(createElement) {
           return createElement('el-tooltip', {props: {content: '导出Excel'}}, [
               createElement('el-button', {
-                props: {icon: 'el-icon-fa-cloud-download', size: 'mini', circle: true},
+                props: {icon: 'el-icon-download', size: 'mini', circle: true},
                 on: {click: this.$parent.exportsRemote},
               }),
           ]);
@@ -665,7 +667,7 @@
           }
           return createElement('el-tooltip', {props: {content: this.$parent.searchBarVisible ? '隐藏查询区域' : '显示查询区域'}}, [
               createElement('el-button', {
-                props: {icon: 'el-icon-fa-search', circle: true},
+                props: {icon: 'el-icon-search', circle: true},
                 on: {click: this.$parent.toggleSearchBarVisible},
               }),
           ]);
@@ -777,7 +779,7 @@
 
     .ui-table-empty {
       padding-top: 110px;
-      background: url("../../../assets/img/empty.svg") center top no-repeat;
+      background: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTg0IiBoZWlnaHQ9IjE1MiIgdmlld0JveD0iMCAwIDE4NCAxNTIiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CiAgPGcgZmlsbD0ibm9uZSIgZmlsbC1ydWxlPSJldmVub2RkIj4KICAgIDxnIHRyYW5zZm9ybT0idHJhbnNsYXRlKDI0IDMxLjY3KSI+CiAgICAgIDxlbGxpcHNlIGZpbGwtb3BhY2l0eT0iLjgiIGZpbGw9IiNGNUY1RjciIGN4PSI2Ny43OTciIGN5PSIxMDYuODkiIHJ4PSI2Ny43OTciIHJ5PSIxMi42NjgiPjwvZWxsaXBzZT4KICAgICAgPHBhdGggZD0iTTEyMi4wMzQgNjkuNjc0TDk4LjEwOSA0MC4yMjljLTEuMTQ4LTEuMzg2LTIuODI2LTIuMjI1LTQuNTkzLTIuMjI1aC01MS40NGMtMS43NjYgMC0zLjQ0NC44MzktNC41OTIgMi4yMjVMMTMuNTYgNjkuNjc0djE1LjM4M2gxMDguNDc1VjY5LjY3NHoiIGZpbGw9IiNBRUI4QzIiPjwvcGF0aD4KICAgICAgPHBhdGggZD0iTTEwMS41MzcgODYuMjE0TDgwLjYzIDYxLjEwMmMtMS4wMDEtMS4yMDctMi41MDctMS44NjctNC4wNDgtMS44NjdIMzEuNzI0Yy0xLjU0IDAtMy4wNDcuNjYtNC4wNDggMS44NjdMNi43NjkgODYuMjE0djEzLjc5Mmg5NC43NjhWODYuMjE0eiIgZmlsbD0idXJsKCNsaW5lYXJHcmFkaWVudC0xKSIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoMTMuNTYpIj48L3BhdGg+CiAgICAgIDxwYXRoIGQ9Ik0zMy44MyAwaDY3LjkzM2E0IDQgMCAwIDEgNCA0djkzLjM0NGE0IDQgMCAwIDEtNCA0SDMzLjgzYTQgNCAwIDAgMS00LTRWNGE0IDQgMCAwIDEgNC00eiIgZmlsbD0iI0Y1RjVGNyI+PC9wYXRoPgogICAgICA8cGF0aAogICAgICAgIGQ9Ik00Mi42NzggOS45NTNoNTAuMjM3YTIgMiAwIDAgMSAyIDJWMzYuOTFhMiAyIDAgMCAxLTIgMkg0Mi42NzhhMiAyIDAgMCAxLTItMlYxMS45NTNhMiAyIDAgMCAxIDItMnpNNDIuOTQgNDkuNzY3aDQ5LjcxM2EyLjI2MiAyLjI2MiAwIDEgMSAwIDQuNTI0SDQyLjk0YTIuMjYyIDIuMjYyIDAgMCAxIDAtNC41MjR6TTQyLjk0IDYxLjUzaDQ5LjcxM2EyLjI2MiAyLjI2MiAwIDEgMSAwIDQuNTI1SDQyLjk0YTIuMjYyIDIuMjYyIDAgMCAxIDAtNC41MjV6TTEyMS44MTMgMTA1LjAzMmMtLjc3NSAzLjA3MS0zLjQ5NyA1LjM2LTYuNzM1IDUuMzZIMjAuNTE1Yy0zLjIzOCAwLTUuOTYtMi4yOS02LjczNC01LjM2YTcuMzA5IDcuMzA5IDAgMCAxLS4yMjItMS43OVY2OS42NzVoMjYuMzE4YzIuOTA3IDAgNS4yNSAyLjQ0OCA1LjI1IDUuNDJ2LjA0YzAgMi45NzEgMi4zNyA1LjM3IDUuMjc3IDUuMzdoMzQuNzg1YzIuOTA3IDAgNS4yNzctMi40MjEgNS4yNzctNS4zOTNWNzUuMWMwLTIuOTcyIDIuMzQzLTUuNDI2IDUuMjUtNS40MjZoMjYuMzE4djMzLjU2OWMwIC42MTctLjA3NyAxLjIxNi0uMjIxIDEuNzg5eiIKICAgICAgICBmaWxsPSIjRENFMEU2Ij48L3BhdGg+CiAgICA8L2c+CiAgICA8cGF0aCBkPSJNMTQ5LjEyMSAzMy4yOTJsLTYuODMgMi42NWExIDEgMCAwIDEtMS4zMTctMS4yM2wxLjkzNy02LjIwN2MtMi41ODktMi45NDQtNC4xMDktNi41MzQtNC4xMDktMTAuNDA4QzEzOC44MDIgOC4xMDIgMTQ4LjkyIDAgMTYxLjQwMiAwIDE3My44ODEgMCAxODQgOC4xMDIgMTg0IDE4LjA5N2MwIDkuOTk1LTEwLjExOCAxOC4wOTctMjIuNTk5IDE4LjA5Ny00LjUyOCAwLTguNzQ0LTEuMDY2LTEyLjI4LTIuOTAyeiIgZmlsbD0iI0RDRTBFNiI+PC9wYXRoPgogICAgPGcgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoMTQ5LjY1IDE1LjM4MykiIGZpbGw9IiNGRkYiPgogICAgICA8ZWxsaXBzZSBjeD0iMjAuNjU0IiBjeT0iMy4xNjciIHJ4PSIyLjg0OSIgcnk9IjIuODE1Ij48L2VsbGlwc2U+CiAgICAgIDxwYXRoIGQ9Ik01LjY5OCA1LjYzSDBMMi44OTguNzA0ek05LjI1OS43MDRoNC45ODVWNS42M0g5LjI1OXoiPjwvcGF0aD4KICAgIDwvZz4KICA8L2c+Cjwvc3ZnPgo=) center top no-repeat;
       background-size: auto 100px;
       color: rgba(0, 0, 0, 0.65);
       font-size: 14px;