iov-design 2.15.45 → 2.15.46

package/lib/theme-chalk/message.css

@@ -1 +1 @@
-.el-message__closeBtn:focus,.el-message__content:focus{outline-width:0}.el-message{min-width:380px;-webkit-box-sizing:border-box;box-sizing:border-box;border-radius:4px;border-width:1px;border-style:solid;border-color:#EBEEF5;position:fixed;left:50%;top:20px;-webkit-transform:translateX(-50%);transform:translateX(-50%);background-color:#edf2fc;-webkit-transition:opacity .3s,top .4s,-webkit-transform .4s;transition:opacity .3s,top .4s,-webkit-transform .4s;transition:opacity .3s,transform .4s,top .4s;transition:opacity .3s,transform .4s,top .4s,-webkit-transform .4s;overflow:hidden;padding:15px 15px 15px 20px;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center}.el-message.is-center{-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center}.el-message.is-closable .el-message__content{padding-right:16px}.el-message p{margin:0}.el-message--info .el-message__content{color:#0D1722}.el-message--success{background-color:#e9f7ef;border-color:#d3f0df}.el-message--success .el-message__content{color:#23B25D}.el-message--warning{background-color:#fff2e6;border-color:#ffe5cc}.el-message--warning .el-message__content{color:#FF7D00}.el-message--error{background-color:#feecec;border-color:#fdd9d9}.el-message--error .el-message__content{color:#F53F3F}.el-message__icon{margin-right:10px}.el-message__content{padding:0;font-size:14px;line-height:1}.el-message__closeBtn{position:absolute;top:50%;right:15px;-webkit-transform:translateY(-50%);transform:translateY(-50%);cursor:pointer;color:#C6C7CA;font-size:16px}.el-message__closeBtn:hover{color:#909399}.el-message .el-icon-success{color:#23B25D}.el-message .el-icon-error{color:#F53F3F}.el-message .el-icon-info{color:#0D1722}.el-message .el-icon-warning{color:#FF7D00}.el-message-fade-enter,.el-message-fade-leave-active{opacity:0;-webkit-transform:translate(-50%,-100%);transform:translate(-50%,-100%)}
+.el-message__closeBtn:focus,.el-message__content:focus{outline-width:0}.el-message{min-width:204px;-webkit-box-sizing:border-box;box-sizing:border-box;border-radius:4px;border:1px solid #DCDFE6;position:fixed;left:50%;top:46px;-webkit-transform:translateX(-50%);transform:translateX(-50%);background-color:#fff;-webkit-transition:opacity .3s,top .4s,-webkit-transform .4s;transition:opacity .3s,top .4s,-webkit-transform .4s;transition:opacity .3s,transform .4s,top .4s;transition:opacity .3s,transform .4s,top .4s,-webkit-transform .4s;overflow:hidden;padding:13px 16px;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-shadow:0 4px 18px 0 rgba(73,75,83,.1);box-shadow:0 4px 18px 0 rgba(73,75,83,.1)}.el-message.is-center{-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center}.el-message.is-closable .el-message__content{padding-right:24px}.el-message p{margin:0}.el-message--error .el-message__content,.el-message--info .el-message__content,.el-message--success .el-message__content,.el-message--warning .el-message__content{color:#212026}.el-message__icon{margin-right:8px;font-size:16px}.el-message__content{padding:0;font-size:13px;line-height:16px}.el-message__closeBtn{position:absolute;top:50%;right:16px;-webkit-transform:translateY(-50%);transform:translateY(-50%);cursor:pointer;color:#777D87;font-size:14px}.el-message__closeBtn:hover{color:#494B53}.el-message .iov-icon-fill-success{color:#23B25D}.el-message .iov-icon-fill-explain{color:#3F57FF}.el-message .iov-icon-fill-warning{color:#FF7D00}.el-message .iov-icon-fill-fail{color:#F53F3F}.el-message-fade-enter,.el-message-fade-leave-active{opacity:0;-webkit-transform:translate(-50%,-100%);transform:translate(-50%,-100%)}

package/lib/theme-chalk/notification.css

@@ -1 +1 @@
-.el-notification{display:-webkit-box;display:-ms-flexbox;display:flex;width:330px;padding:14px 26px 14px 13px;border-radius:8px;-webkit-box-sizing:border-box;box-sizing:border-box;border:1px solid #EBEEF5;position:fixed;background-color:#FFF;-webkit-box-shadow:0 2px 12px 0 rgba(0,0,0,.1);box-shadow:0 2px 12px 0 rgba(0,0,0,.1);-webkit-transition:opacity .3s,left .3s,right .3s,top .4s,bottom .3s,-webkit-transform .3s;transition:opacity .3s,left .3s,right .3s,top .4s,bottom .3s,-webkit-transform .3s;transition:opacity .3s,transform .3s,left .3s,right .3s,top .4s,bottom .3s;transition:opacity .3s,transform .3s,left .3s,right .3s,top .4s,bottom .3s,-webkit-transform .3s;overflow:hidden}.el-notification.right{right:16px}.el-notification.left{left:16px}.el-notification__group{margin-left:13px;margin-right:8px}.el-notification__title{font-weight:700;font-size:16px;color:#303133;margin:0}.el-notification__content{font-size:14px;line-height:21px;margin:6px 0 0;color:#212026;text-align:justify}.el-notification__content p{margin:0}.el-notification__icon{height:24px;width:24px;font-size:24px}.el-notification__closeBtn{position:absolute;top:18px;right:15px;cursor:pointer;color:#909399;font-size:16px}.el-notification__closeBtn:hover{color:#212026}.el-notification .el-icon-success{color:#23B25D}.el-notification .el-icon-error{color:#F53F3F}.el-notification .el-icon-info{color:#0D1722}.el-notification .el-icon-warning{color:#FF7D00}.el-notification-fade-enter.right{right:0;-webkit-transform:translateX(100%);transform:translateX(100%)}.el-notification-fade-enter.left{left:0;-webkit-transform:translateX(-100%);transform:translateX(-100%)}.el-notification-fade-leave-active{opacity:0}
+.el-notification{display:-webkit-box;display:-ms-flexbox;display:flex;width:330px;padding:14px 26px 14px 13px;border-radius:8px;-webkit-box-sizing:border-box;box-sizing:border-box;border:1px solid #EBEEF5;position:fixed;background-color:#FFF;-webkit-box-shadow:0 2px 12px 0 rgba(0,0,0,.1);box-shadow:0 2px 12px 0 rgba(0,0,0,.1);-webkit-transition:opacity .3s,left .3s,right .3s,top .4s,bottom .3s,-webkit-transform .3s;transition:opacity .3s,left .3s,right .3s,top .4s,bottom .3s,-webkit-transform .3s;transition:opacity .3s,transform .3s,left .3s,right .3s,top .4s,bottom .3s;transition:opacity .3s,transform .3s,left .3s,right .3s,top .4s,bottom .3s,-webkit-transform .3s;overflow:hidden}.el-notification.right{right:16px}.el-notification.left{left:16px}.el-notification__group{margin-left:13px;margin-right:8px}.el-notification__title{font-weight:700;font-size:16px;color:#303133;margin:0}.el-notification__content{font-size:14px;line-height:21px;margin:6px 0 0;color:#212026;text-align:justify}.el-notification__content p{margin:0}.el-notification__icon{height:24px;width:24px;font-size:24px}.el-notification__closeBtn{position:absolute;top:18px;right:15px;cursor:pointer;color:#909399;font-size:14px}.el-notification__closeBtn:hover{color:#212026}.el-notification .el-icon-success{color:#23B25D}.el-notification .el-icon-error{color:#F53F3F}.el-notification .el-icon-info{color:#0D1722}.el-notification .el-icon-warning{color:#FF7D00}.el-notification-fade-enter.right{right:0;-webkit-transform:translateX(100%);transform:translateX(100%)}.el-notification-fade-enter.left{left:0;-webkit-transform:translateX(-100%);transform:translateX(-100%)}.el-notification-fade-leave-active{opacity:0}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "iov-design",
-  "version": "2.15.45",
+  "version": "2.15.46",
   "description": "A Component Library for Vue.js.",
   "main": "lib/iov-design.common.js",
   "files": [

package/packages/dialog/src/component.vue

@@ -27,8 +27,8 @@
             <i class="el-dialog__close el-icon iov-icon-close" v-if="showClose" @click="handleClose"></i>
           </span>
         </div>
-        <div class="el-dialog__body" :class="type === 'form' ? 'el-dialog__body--form' : 'el-dialog__body--desc'" v-if="rendered"><slot></slot></div>
-        <div class="el-dialog__footer" v-if="$slots.footer">
+        <div class="el-dialog__body" ref="body" :class="type === 'form' ? 'el-dialog__body--form' : 'el-dialog__body--desc'" v-if="rendered"><slot></slot></div>
+        <div class="el-dialog__footer" ref="footer" v-if="$slots.footer">
           <slot name="footer"></slot>
         </div>
       </div>
@@ -103,7 +103,7 @@
 
       top: {
         type: String,
-        default: '15vh'
+        default: '50%'
       },
       beforeClose: Function,
       center: {
@@ -149,7 +149,7 @@
       style() {
         let style = {};
         if (!this.fullscreen) {
-          style.marginTop = this.top;
+          style.top = this.top;
           if (this.width) {
             style.width = this.width;
           }
@@ -189,10 +189,47 @@
         this.broadcast('ElDropdownMenu', 'updatePopper');
       },
       afterEnter() {
+        this.onDialogOpened();
         this.$emit('opened');
       },
       afterLeave() {
         this.$emit('closed');
+      },
+
+      onDialogOpened() {
+        this.$nextTick(() => {
+          this.checkOverflow();
+          this.observeContentChanges();
+        });
+      },
+
+      // 检查内容是否超过body高度
+      checkOverflow() {
+        const body = this.$refs.body;
+        const footer = this.$refs.footer;
+        if (!body || !footer) return;
+        if (body.scrollHeight > body.clientHeight) {
+          footer.classList.add('el-dialog__footer--shadow');
+        } else {
+          footer.classList.remove('el-dialog__footer--shadow');
+        }
+      },
+      // 监听节点变化
+      observeContentChanges() {
+        const body = this.$refs.body;
+        if (!body) return;
+        if (this._mutationObserver) {
+          this._mutationObserver.disconnect();
+        }
+        this._mutationObserver = new MutationObserver(() => {
+          this.checkOverflow();
+        });
+        // 监听子节点及文本节点的内容变化
+        this._mutationObserver.observe(body, {
+          childList: true,
+          subtree: true,
+          characterData: true
+        });
       }
     },
 
@@ -211,6 +248,9 @@
       if (this.appendToBody && this.$el && this.$el.parentNode) {
         this.$el.parentNode.removeChild(this.$el);
       }
+      if (this._mutationObserver) {
+        this._mutationObserver.disconnect();
+      }
     }
   };
 </script>

package/packages/empty/src/index.vue

@@ -44,7 +44,10 @@ export default {
       type: Number,
       default: 1
     },
-    imageSize: Number,
+    imageSize: {
+      type: Number,
+      default: 140
+    },
     description: {
       type: String,
       default: ''

package/packages/message/src/main.js

@@ -33,7 +33,7 @@ const Message = function(options) {
   }
   instance.$mount();
   document.body.appendChild(instance.$el);
-  let verticalOffset = options.offset || 20;
+  let verticalOffset = options.offset || 46;
   instances.forEach(item => {
     verticalOffset += item.$el.offsetHeight + 16;
   });

package/packages/message/src/main.vue

@@ -19,17 +19,17 @@
         <p v-if="!dangerouslyUseHTMLString" class="el-message__content">{{ message }}</p>
         <p v-else v-html="message" class="el-message__content"></p>
       </slot>
-      <i v-if="showClose" class="el-message__closeBtn el-icon-close" @click="close"></i>
+      <i v-if="showClose" class="el-message__closeBtn iov-icon-close" @click="close"></i>
     </div>
   </transition>
 </template>
 
 <script type="text/babel">
-  const typeMap = {
+  let typeMap = {
     success: 'success',
-    info: 'info',
+    info: 'explain',
     warning: 'warning',
-    error: 'error'
+    error: 'fail'
   };
 
   export default {
@@ -44,7 +44,7 @@
         onClose: null,
         showClose: false,
         closed: false,
-        verticalOffset: 20,
+        verticalOffset: 46,
         timer: null,
         dangerouslyUseHTMLString: false,
         center: false
@@ -54,7 +54,7 @@
     computed: {
       typeClass() {
         return this.type && !this.iconClass
-          ? `el-message__icon el-icon-${ typeMap[this.type] }`
+          ? `el-message__icon iov-icon-fill-${ typeMap[this.type] }`
           : '';
       },
       positionStyle() {

package/packages/tabs/src/tabs.vue

@@ -1,196 +1,196 @@
-<script>
-  import TabNav from './tab-nav';
-
-  export default {
-    name: 'ElTabs',
-
-    components: {
-      TabNav
-    },
-
-    props: {
-      type: String,
-      size: String,
-      activeName: String,
-      closable: Boolean,
-      addable: Boolean,
-      value: {},
-      editable: Boolean,
-      tabPosition: {
-        type: String,
-        default: 'top'
-      },
-      beforeLeave: Function,
-      stretch: Boolean
-    },
-
-    provide() {
-      return {
-        rootTabs: this
-      };
-    },
-
-    data() {
-      return {
-        currentName: this.value || this.activeName,
-        panes: []
-      };
-    },
-
-    watch: {
-      activeName(value) {
-        this.setCurrentName(value);
-      },
-      value(value) {
-        this.setCurrentName(value);
-      },
-      currentName(value) {
-        if (this.$refs.nav) {
-          this.$nextTick(() => {
-            this.$refs.nav.$nextTick(_ => {
-              this.$refs.nav.scrollToActiveTab();
-            });
-          });
-        }
-      }
-    },
-
-    methods: {
-      calcPaneInstances(isForceUpdate = false) {
-        if (this.$slots.default) {
-          const paneSlots = this.$slots.default.filter(vnode => vnode.tag &&
-            vnode.componentOptions && vnode.componentOptions.Ctor.options.name === 'ElTabPane');
-          // update indeed
-          const panes = paneSlots.map(({ componentInstance }) => componentInstance);
-          const panesChanged = !(panes.length === this.panes.length && panes.every((pane, index) => pane === this.panes[index]));
-          if (isForceUpdate || panesChanged) {
-            this.panes = panes;
-          }
-        } else if (this.panes.length !== 0) {
-          this.panes = [];
-        }
-      },
-      handleTabClick(tab, tabName, event) {
-        if (tab.disabled) return;
-        this.setCurrentName(tabName);
-        this.$emit('tab-click', tab, event);
-      },
-      handleTabRemove(pane, ev) {
-        if (pane.disabled) return;
-        ev.stopPropagation();
-        this.$emit('edit', pane.name, 'remove');
-        this.$emit('tab-remove', pane.name);
-      },
-      handleTabAdd() {
-        this.$emit('edit', null, 'add');
-        this.$emit('tab-add');
-      },
-      setCurrentName(value) {
-        const changeCurrentName = () => {
-          this.currentName = value;
-          this.$emit('input', value);
-        };
-        if (this.currentName !== value && this.beforeLeave) {
-          const before = this.beforeLeave(value, this.currentName);
-          if (before && before.then) {
-            before
-              .then(() => {
-                changeCurrentName();
-                this.$refs.nav && this.$refs.nav.removeFocus();
-              }, () => {
-                // https://github.com/ElemeFE/element/pull/14816
-                // ignore promise rejection in `before-leave` hook
-              });
-          } else if (before !== false) {
-            changeCurrentName();
-          }
-        } else {
-          changeCurrentName();
-        }
-      }
-    },
-
-    render(h) {
-      let {
-        type,
-        size,
-        handleTabClick,
-        handleTabRemove,
-        handleTabAdd,
-        currentName,
-        panes,
-        editable,
-        addable,
-        tabPosition,
-        stretch
-      } = this;
-
-      const newButton = editable || addable
-        ? (
-          <span
-            class="el-tabs__new-tab"
-            on-click={ handleTabAdd }
-            tabindex="0"
-            on-keydown={ (ev) => { if (ev.keyCode === 13) { handleTabAdd(); }} }
-          >
-            <i class="iov-icon-plus"></i>
-          </span>
-        )
-        : null;
-
-      const navData = {
-        props: {
-          currentName,
-          onTabClick: handleTabClick,
-          onTabRemove: handleTabRemove,
-          editable,
-          type,
-          panes,
-          stretch
-        },
-        ref: 'nav'
-      };
-      const header = (
-        <div class={['el-tabs__header', `is-${tabPosition}`]}>
-          {newButton}
-          <tab-nav { ...navData }></tab-nav>
-        </div>
-      );
-      const panels = (
-        <div class="el-tabs__content">
-          {this.$slots.default}
-        </div>
-      );
-
-      return (
-        <div class={{
-          'el-tabs': true,
-          'el-tabs--normal': !type,
-          'el-tabs--card': type === 'card',
-          'el-tabs--capsule': type === 'capsule',
-          [`el-tabs--${size}`]: size,
-          [`el-tabs--${tabPosition}`]: true,
-          'el-tabs--border-card': type === 'border-card'
-        }}>
-          { tabPosition !== 'bottom' ? [header, panels] : [panels, header] }
-        </div>
-      );
-    },
-
-    created() {
-      if (!this.currentName) {
-        this.setCurrentName('0');
-      }
-
-      this.$on('tab-nav-update', this.calcPaneInstances.bind(null, true));
-    },
-
-    mounted() {
-      this.calcPaneInstances();
-    },
-
-    updated() {
-      this.calcPaneInstances();
-    }
-  };
-</script>
+<script>
+  import TabNav from './tab-nav';
+
+  export default {
+    name: 'ElTabs',
+
+    components: {
+      TabNav
+    },
+
+    props: {
+      type: String,
+      size: String,
+      activeName: String,
+      closable: Boolean,
+      addable: Boolean,
+      value: {},
+      editable: Boolean,
+      tabPosition: {
+        type: String,
+        default: 'top'
+      },
+      beforeLeave: Function,
+      stretch: Boolean
+    },
+
+    provide() {
+      return {
+        rootTabs: this
+      };
+    },
+
+    data() {
+      return {
+        currentName: this.value || this.activeName,
+        panes: []
+      };
+    },
+
+    watch: {
+      activeName(value) {
+        this.setCurrentName(value);
+      },
+      value(value) {
+        this.setCurrentName(value);
+      },
+      currentName(value) {
+        if (this.$refs.nav) {
+          this.$nextTick(() => {
+            this.$refs.nav.$nextTick(_ => {
+              this.$refs.nav.scrollToActiveTab();
+            });
+          });
+        }
+      }
+    },
+
+    methods: {
+      calcPaneInstances(isForceUpdate = false) {
+        if (this.$slots.default) {
+          const paneSlots = this.$slots.default.filter(vnode => vnode.tag &&
+            vnode.componentOptions && vnode.componentOptions.Ctor.options.name === 'ElTabPane');
+          // update indeed
+          const panes = paneSlots.map(({ componentInstance }) => componentInstance);
+          const panesChanged = !(panes.length === this.panes.length && panes.every((pane, index) => pane === this.panes[index]));
+          if (isForceUpdate || panesChanged) {
+            this.panes = panes;
+          }
+        } else if (this.panes.length !== 0) {
+          this.panes = [];
+        }
+      },
+      handleTabClick(tab, tabName, event) {
+        if (tab.disabled) return;
+        this.setCurrentName(tabName);
+        this.$emit('tab-click', tab, event);
+      },
+      handleTabRemove(pane, ev) {
+        if (pane.disabled) return;
+        ev.stopPropagation();
+        this.$emit('edit', pane.name, 'remove');
+        this.$emit('tab-remove', pane.name);
+      },
+      handleTabAdd() {
+        this.$emit('edit', null, 'add');
+        this.$emit('tab-add');
+      },
+      setCurrentName(value) {
+        const changeCurrentName = () => {
+          this.currentName = value;
+          this.$emit('input', value);
+        };
+        if (this.currentName !== value && this.beforeLeave) {
+          const before = this.beforeLeave(value, this.currentName);
+          if (before && before.then) {
+            before
+              .then(() => {
+                changeCurrentName();
+                this.$refs.nav && this.$refs.nav.removeFocus();
+              }, () => {
+                // https://github.com/ElemeFE/element/pull/14816
+                // ignore promise rejection in `before-leave` hook
+              });
+          } else if (before !== false) {
+            changeCurrentName();
+          }
+        } else {
+          changeCurrentName();
+        }
+      }
+    },
+
+    render(h) {
+      let {
+        type,
+        size,
+        handleTabClick,
+        handleTabRemove,
+        handleTabAdd,
+        currentName,
+        panes,
+        editable,
+        addable,
+        tabPosition,
+        stretch
+      } = this;
+
+      const newButton = editable || addable
+        ? (
+          <span
+            class="el-tabs__new-tab"
+            on-click={ handleTabAdd }
+            tabindex="0"
+            on-keydown={ (ev) => { if (ev.keyCode === 13) { handleTabAdd(); }} }
+          >
+            <i class="iov-icon-plus"></i>
+          </span>
+        )
+        : null;
+
+      const navData = {
+        props: {
+          currentName,
+          onTabClick: handleTabClick,
+          onTabRemove: handleTabRemove,
+          editable,
+          type,
+          panes,
+          stretch
+        },
+        ref: 'nav'
+      };
+      const header = (
+        <div class={['el-tabs__header', `is-${tabPosition}`]}>
+          {newButton}
+          <tab-nav { ...navData }></tab-nav>
+        </div>
+      );
+      const panels = (
+        <div class="el-tabs__content">
+          {this.$slots.default}
+        </div>
+      );
+
+      return (
+        <div class={{
+          'el-tabs': true,
+          'el-tabs--normal': !type,
+          'el-tabs--card': type === 'card',
+          'el-tabs--capsule': type === 'capsule',
+          [`el-tabs--${size}`]: size,
+          [`el-tabs--${tabPosition}`]: true,
+          'el-tabs--border-card': type === 'border-card'
+        }}>
+          { tabPosition !== 'bottom' ? [header, panels] : [panels, header] }
+        </div>
+      );
+    },
+
+    created() {
+      if (!this.currentName) {
+        this.setCurrentName('0');
+      }
+
+      this.$on('tab-nav-update', this.calcPaneInstances.bind(null, true));
+    },
+
+    mounted() {
+      this.calcPaneInstances();
+    },
+
+    updated() {
+      this.calcPaneInstances();
+    }
+  };
+</script>