Merge pull request #530 from DaoCloud/release/1.0.5

release 1.0.5

Author: CIN

changelogs/v1.0.5.md

@@ -0,0 +1,41 @@
+<a name="1.0.5"></a>
+# 1.0.5 (2018-07-27)
+
+
+## Bug Fixes
+
+- **dao-editable-table:** 修复 editable-table 中 icon 及下拉框没对齐
+  ([5b9e410b](https://github.com/DaoCloud/dao-style-vue/commit/5b9e410b8a4405f05ee5ae26b5253512512d739f))
+- **dialog:**
+  - shrink
+  ([faebf12f](https://github.com/DaoCloud/dao-style-vue/commit/faebf12f0c4cdcb2cabe644f873537330a138719))
+  - update dialog doc and fix dialog demo
+  ([88ae385f](https://github.com/DaoCloud/dao-style-vue/commit/88ae385f2e9cb2cc96effbc643d325b0e78ac180))
+- **select:** 修复 select 在同时有 search 和 tab 时会有两个 scroll bar 的问题
+  ([bcb36de5](https://github.com/DaoCloud/dao-style-vue/commit/bcb36de510ff6fcf5c363c339b2cfc4df1ed17e6))
+- **setting-layout:** 修复 v-show 对 setting-layout 不起作用的问题
+  ([13a97ad7](https://github.com/DaoCloud/dao-style-vue/commit/13a97ad7e0d1fe45dcf714d2adeb137ca50cd17e))
+
+
+## Features
+
+- **dialog:**
+  - 默认距离顶部 100 px
+  ([88eccb67](https://github.com/DaoCloud/dao-style-vue/commit/88eccb67cf2763e459598d513432c0cda8cf3936))
+  - 样式调整
+  ([5f1f5a0a](https://github.com/DaoCloud/dao-style-vue/commit/5f1f5a0ae612651e7ce92996f1d4eb05d1f6c4bc))
+  - add title slot
+  ([02dc278d](https://github.com/DaoCloud/dao-style-vue/commit/02dc278dc3296144a2743d6df03abc37e508d1f6))
+  - 调整参数默认为点击外部不关闭对话框
+  ([0544e6f9](https://github.com/DaoCloud/dao-style-vue/commit/0544e6f9f8251256d93c311497a76fe51f887339))
+  -  dialog header 支持 string 配置
+  ([6d4bd243](https://github.com/DaoCloud/dao-style-vue/commit/6d4bd243da8d204384d947dfdf3efed96333bde2))
+- **info-card-empty-state:** 增加info-card表格对空状态的支持
+  ([f3a6acf0](https://github.com/DaoCloud/dao-style-vue/commit/f3a6acf03a9fad732b1f24c13c648d2eead78735))
+
+
+## Docs
+
+- **dialog:** default padding bottom
+  ([b85502f6](https://github.com/DaoCloud/dao-style-vue/commit/b85502f6d0c21b4c3c398a697c05a2e6f1160574))
+

dist/dao-style.min.js

@@ -11,14 +11,18 @@ dialog 是一个弹出框组件。代码请参照目录: [src/components/dao-dia
 参数名 | 类型 | 说明 | 默认值 | 是否必填
 -|-|-|-|-
 visible | Boolean | 控制 dao-dialog 是否显示的参数, 与父组件双向绑定 ( 需要加 sync 修饰符 ) | false | 是
-header | Object/Boolean | header 配置对象, 具体内容见 [header 对象](#header) (当传入 header slot 时，该配置将不会生效), 当任何时候都不需要 header 时可以传入 false| [header](#header) | 否
+header | Object/Boolean/String | header 配置对象, 具体内容见 [header 对象](#header) (当传入 header slot 时，该配置将不会生效), 当任何时候都不需要 header 时可以传入 false| [header](#header) | 否
 footer | Object | footer 配置对象, 具体内容见 [footer 对象](#footer) (当传入 footer slot 时，该配置将不会生效)， 当任何时候都不需要 footer 时可以传入 false| [footer](#footer) |  否
 size | String/Object | 设置 dialog 的大小。 可选 `sm`, `md`, `lg`, 或者传入 { width: *, height: * } 具体指定 | 'md'  | 否
 containerClass | String | dialog 的容器类名 | - | 否
 closeOnClickOutside | Boolean | 设置点击 dialog 外面( 遮罩层 ) 是否隐藏 dialog | true | 否
 closeOnPressEscape | Boolean | 设置按键 ESC 时是否隐藏 dialog | true | 否
 allowResize | Boolean | 是否可以拖拽调整大小 | false | 否
 lockScroll | Boolean | 对话框出现时是否将 body 锁定不滚动 | true | 否
+top | String | dao-dialog 的 margin-top | 100px | 否
+bottom | String | dao-dialog 的 margin-bottom | 20px | 否
+middle | Boolean | dao-dialog 垂直是否居中 | false | 否
+
 
 #### header 对象 <span id="header"></span>
 
@@ -51,5 +55,6 @@ cancel | Dialog 点击 取消 时的触发 | -
 名称 | 说明
 -|-
  -- | dialog body 内容
-header | dialog header 的内容
+header | dialog header 的内容(同时配置的 title slot 将不会生效)
 footer | dialog footer 的内容
+title | dialog title 的内容

dist/styles/dao-style.css

@@ -30,6 +30,9 @@ info-card 将以表格形式展示
     <div slot="title">
       TEXT
     </div>
+    <div slot="empty">
+      表格为空
+    </div>  // 支持当tableValue中的body为空时，展示空状态
 </dao-info-card>
 ```
 

docs/dao-dialog.md

@@ -13,9 +13,12 @@
         <div class="config-section">锁定 body 滚动: <b>{{config.lockScroll}}</b></div>
         <div class="config-section">header: <b>{{config.header}}</b></div>
         <div class="config-section">footer: <b>{{config.footer}}</b></div>
+        <div class="config-section">垂直居中: <b>{{config.middle}}</b></div>
+        <div class="config-section">top: <b>{{config.top}}</b></div>
+        <div class="config-section">bottom: <b>{{config.bottom}}</b></div>
       </div>
       <div slot="content">
-        <button class="dao-btn blue" @click="config.visible = true">{{config.header.title}}</button>
+        <button class="dao-btn blue" @click="config.visible = true">{{config.header.title || config.header}}</button>
         <dao-dialog
           :visible.sync="config.visible"
           @before-close="onBeforeClose"
@@ -24,8 +27,11 @@
           @opened="onOpened"
           @confirm="onConfirm"
           @cancel="onCancel"
+          :middle="config.middle"
           :header="config.header"
           :footer="config.footer"
+          :top="config.top"
+          :bottom="config.bottom"
           :allowResize="config.allowResize"
           :containerClass="config.containerClass"
           :closeOnClickOutside="config.closeOnClickOutside"
@@ -145,9 +151,9 @@
         定制 header, 定制 footer
       </div>
       <div slot="content">
-        <button class="dao-btn blue" @click="custom.visible = true">打开对话框</button>
+        <button class="dao-btn blue" @click="customHeaderAndBody.visible = true">打开对话框</button>
         <dao-dialog
-          :visible.sync="custom.visible"
+          :visible.sync="customHeaderAndBody.visible"
           @before-close="onBeforeClose"
           @closed="onClosed"
           @before-open="onBeforeOpen"
@@ -177,6 +183,28 @@
         </dao-dialog>
       </div>
     </dao-setting-section>
+     <dao-setting-section >
+      <div slot="section-title">
+        定制 header 的 title
+      </div>
+      <div slot="content">
+        <button class="dao-btn blue" @click="customTitle.visible = true">打开对话框</button>
+        <dao-dialog
+          :visible.sync="customTitle.visible"
+          @before-close="onBeforeClose"
+          @closed="onClosed"
+          @before-open="onBeforeOpen"
+          @opened="onOpened"
+          @confirm="onConfirm"
+          @cancel="onCancel"
+          :closeOnClickOutside="true">
+          <div slot="title"><i>自定义 title</i></div>
+          <div class="body">
+            <h1>只是自定义了 title</h1>
+          </div>
+        </dao-dialog>
+      </div>
+    </dao-setting-section>
   </dao-setting-layout>
 
   <!-- 定制化 -->
@@ -222,9 +250,7 @@
         configs: [
           {
             visible: false,
-            header: {
-              title: '最简单的默认版本',
-            },
+            header: '最简单的默认版本',
           },
           {
             visible: false,
@@ -271,9 +297,9 @@
           {
             visible: false,
             header: {
-              title: '可以通过 ESC 关闭 Dialog',
+              title: '不可以通过 ESC 关闭 Dialog',
             },
-            closeOnPressEscape: true,
+            closeOnPressEscape: false,
           },
           {
             visible: false,
@@ -282,6 +308,21 @@
             },
             lockScroll: false,
           },
+          {
+            visible: false,
+            header: {
+              title: '垂直居中',
+            },
+            middle: true,
+          },
+          {
+            visible: false,
+            header: {
+              title: '修改 top 和 bottom',
+            },
+            top: '30px',
+            bottom: '50px',
+          },
           {
             visible: false,
             header: {
@@ -326,7 +367,10 @@
             // showFooter: true,
           },
         },
-        custom: {
+        customHeaderAndBody: {
+          visible: false,
+        },
+        customTitle: {
           visible: false,
         },
         fatherDialog: {

docs/dao-info-card.md

@@ -78,6 +78,15 @@
       </dao-dropdown>
     </div>
   </dao-info-card>
+  <br>
+  <dao-info-card size="lg" :tableValue="tablevalue5">
+    <div slot="title">
+      TEXT
+    </div>
+    <div slot="empty" class="empty-table-body">
+      表格为空
+    </div>
+  </dao-info-card>
 </div>
 </template>
 <script>
@@ -190,15 +199,31 @@ export default {
           tnumber: 2000,
         }],
       },
+      tablevalue5: {
+        header: [
+          '容器端口',
+          '负载均衡端口',
+          '协议',
+        ],
+        body: [],
+      }
     };
   },
 };
 </script>
 
-<style>
+<style lang="scss">
+@import '../../src/components/dao-color.scss';
 .icon-more {
   width: 18px;
   height: 18px;
-  fill: #9ba3af; 
+  fill: $grey-dark; 
+}
+.empty-table-body {
+  padding: 40px;
+  text-align: center;
+  color: $grey-dark;
+  background-color: $white-lighter;
+  border: 1px dashed $white-dark;
 }
 </style>

examples/routers/dialog.vue

@@ -1,7 +1,7 @@
 <template>
   <div>
     <button class="dao-btn blue" @click="show = !show">切换 Layout</button>
-    <dao-setting-layout v-if="show">
+    <dao-setting-layout v-if="show" class="test-class">
       <template slot="layout-title">大标题</template>
       <template slot="layout-title-helper">大标题一定要有，表单必有头</template>
       <dao-setting-section>
@@ -66,13 +66,15 @@
 </template>
 <script>
 export default {
-  data () {
+  data() {
     return {
       show: true,
     };
   },
 };
 </script>
 <style lang="scss">
-  
+  .test-class {
+    color: red;
+  }
 </style>

examples/routers/info-card.vue

@@ -1,8 +1,8 @@
 <template>
   <div class="dao-dialog-footer">
     <slot>
-      <button class="dao-btn ghost" @click="onCancel">{{configure.cancelText}}</button>
-      <button class="dao-btn blue" @click="onConfirm"
+      <button class="dao-btn ghost" @click="onCancel">{{configure.cancelText}}</button><!--
+   --><button class="dao-btn blue" @click="onConfirm"
         :disabled="configure.confirmDisabled">{{configure.confirmText}}</button>
     </slot>
   </div>

examples/routers/setting-layout.vue

@@ -1,7 +1,7 @@
 <template>
   <div class="dao-dialog-header">
     <slot>
-      <span :class="{ 'center': !configure.showClose}"> {{configure.title}} </span>
+      <span :class="{ 'center': !configure.showClose}"> <slot name="title">{{configure.title}}</slot> </span>
       <div v-if="configure.showClose" class="dao-close" @click="onClose" >
         <svg preserveAspectRatio="xMidYMid" width="34" height="34" viewBox="0 0 34 34">
           <path d="M17.000,0.001 C7.612,0.001 0.001,7.612 0.001,17.000 C0.001,26.388 7.612,33.999 17.000,33.999 C26.388,33.999 33.999,26.388 33.999,17.000 C33.999,7.612 26.388,0.001 17.000,0.001 ZM24.166,21.666 C24.166,21.666 21.666,24.166 21.666,24.166 C21.666,24.166 17.000,19.500 17.000,19.500 C17.000,19.500 12.334,24.166 12.334,24.166 C12.334,24.166 9.834,21.666 9.834,21.666 C9.834,21.666 14.500,17.000 14.500,17.000 C14.500,17.000 9.834,12.335 9.834,12.335 C9.834,12.335 12.334,9.834 12.334,9.834 C12.334,9.834 17.000,14.500 17.000,14.500 C17.000,14.500 21.666,9.834 21.666,9.834 C21.666,9.834 24.166,12.335 24.166,12.335 C24.166,12.335 19.500,17.000 19.500,17.000 C19.500,17.000 24.166,21.666 24.166,21.666 Z" id="path-1" fill-rule="evenodd"/>

src/components/dao-dialog/dao-dialog-footer/dao-dialog-footer.vue

@@ -1,9 +1,8 @@
 @import '../dao-color.scss';
-$font-color: #3d444f;
-$dialog-overlay: rgba(31, 33, 38, .3);
-$dialog-header-bg-color: #f5f7fa;
-$dialog-header-bg-img: linear-gradient(0deg, rgb(242,244,247) 0%, rgb(245,247,250) 100%);
-
+$dialog-overlay: rgba(31, 33, 38, 0.2);
+$dialog-header-bg-color: #F5F7FA;
+$dialog-header-bg-img: linear-gradient(0deg, rgb(242, 244, 247) 0%, rgb(245, 247, 250) 100%);
+$dialog-border-color: #CCD1D9;
 .dao-dialog {
   &-backdrop {
     position: fixed;
@@ -18,11 +17,13 @@ $dialog-header-bg-img: linear-gradient(0deg, rgb(242,244,247) 0%, rgb(245,247,25
     display: flex;
     align-items: center;
     flex-direction: column;
-    justify-content: space-between;
+    &.middle {
+      justify-content: space-between;
+    }
   }
-  &-padding-block{
+  &-padding-block {
     width: 100%;
-    height: 20px;
+    flex-shrink: 0;
   }
   &-container {
     max-height: 100vh;
@@ -33,7 +34,7 @@ $dialog-header-bg-img: linear-gradient(0deg, rgb(242,244,247) 0%, rgb(245,247,25
     width: 600px;
     border-radius: 4px;
     background-color: $white;
-    box-shadow: 0 3px 30px 0 rgba(0, 0, 0, .2);
+    box-shadow: 0 15px 35px 0 rgba(61, 68, 79, 0.10), 0 5px 15px 0 rgba(0, 0, 0, 0.10);
     overflow: hidden;
     position: relative;
     .resizer {
@@ -47,20 +48,20 @@ $dialog-header-bg-img: linear-gradient(0deg, rgb(242,244,247) 0%, rgb(245,247,25
       background: url($resizeSvg);
     }
     .dao-dialog {
-      &-header{
+      &-header {
         display: flex;
         flex: 0 0 auto;
         justify-content: space-between;
         padding: 10px 20px;
         background-color: $dialog-header-bg-color;
         background-image: $dialog-header-bg-img;
         border-radius: 4px 4px 0 0;
-        box-shadow: inset 0 -1px 0  #e4e7ed;
-        color: $font-color;
+        box-shadow: inset 0 -1px 0 $dialog-border-color;
+        color: $black-dark;
         font-size: 16px;
         font-weight: 400;
         line-height: 20px;
-        .center{
+        .center {
           flex: 1;
           text-align: center;
           padding: 0 30px;
@@ -79,10 +80,10 @@ $dialog-header-bg-img: linear-gradient(0deg, rgb(242,244,247) 0%, rgb(245,247,25
           }
         }
       }
-      &-body{
+      &-body {
         flex: 1 1 auto;
         background-color: white;
-        color: $font-color;
+        color: $black-dark;
         font-size: 14px;
         font-weight: 400;
         line-height: 21px;
@@ -92,11 +93,10 @@ $dialog-header-bg-img: linear-gradient(0deg, rgb(242,244,247) 0%, rgb(245,247,25
         flex: 0 0 auto;
         padding: 10px 20px;
         text-align: right;
-        border-top: 1px solid $white-dark;
+        border-top: 1px solid $dialog-border-color;
         background-color: $dialog-header-bg-color;
         background-image: $dialog-header-bg-img;
         border-radius: 0 0 4px 4px;
-        box-shadow: inset 0 -1px 0  #e4e7ed;
         user-select: none;
       }
     }
@@ -121,4 +121,4 @@ $dialog-header-bg-img: linear-gradient(0deg, rgb(242,244,247) 0%, rgb(245,247,25
 
 .dao-dialog-leave-active .dao-dialog-container {
   transform: translate(0, 0);
-}
+}