iov-design 2.15.44 → 2.15.46

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>

package/packages/theme-chalk/src/alert.scss

@@ -3,12 +3,12 @@
 
 @include b(alert) {
   width: 100%;
-  padding: $--alert-padding;
+  padding: 11px 12px;
   margin: 0;
   box-sizing: border-box;
-  border-radius: $--alert-border-radius;
+  border-radius: 4px;
   position: relative;
-  background-color: $--color-white;
+  background-color: #fff;
   overflow: hidden;
   opacity: 1;
   display: flex;
@@ -26,10 +26,10 @@
 
   @include when(dark) {
     .el-alert__closebtn {
-      color: $--color-white;
+      color: #fff;
     }
     .el-alert__description {
-      color: $--color-white;
+      color: #fff;
     }
   }
 
@@ -49,7 +49,7 @@
 
     &.is-dark {
       background-color: $--color-success-6;
-      color: $--color-white;
+      color: #fff;
     }
   }
 
@@ -65,7 +65,7 @@
 
     &.is-dark {
       background-color: $--color-primary-6;
-      color: $--color-white;
+      color: #fff;
     }
   }
 
@@ -81,7 +81,7 @@
 
     &.is-dark {
       background-color: $--color-warning-6;
-      color: $--color-white;
+      color: #fff;
     }
   }
 
@@ -97,7 +97,7 @@
 
     &.is-dark {
       background-color: $--color-danger-6;
-      color: $--color-white;
+      color: #fff;
     }
   }
 
@@ -107,30 +107,33 @@
 
   @include e(icon) {
     margin-right: 8px;
-    font-size: $--alert-icon-size;
-    width: $--alert-icon-size;
+    font-size: 16px;
+    width: 16px;
     @include when(big) {
-      font-size: $--alert-icon-large-size;
-      width: $--alert-icon-large-size;
+      font-size: 16px;
+      width: 16px;
+      align-self: flex-start;
     }
   }
 
   @include e(title) {
-    font-size: $--alert-title-font-size;
+    font-size: 12px;
+    line-height: 16px;
+    display: block;
     @include when(bold) {
       font-weight: 500;
     }
   }
 
   & .el-alert__description {
-    font-size: $--alert-description-font-size;
-    margin: 5px 0 0 0;
+    font-size: 12px;
+    margin: 4px 0 0 0;
     color: $--color-text-6;
     font-weight: 400;
   }
 
   @include e(closebtn) {
-    font-size: $--alert-close-font-size;
+    font-size: 14px;
     opacity: 1;
     position: absolute;
     top: 12px;
@@ -139,7 +142,7 @@
 
     @include when(customed) {
       font-style: normal;
-      font-size: $--alert-close-customed-font-size;
+      font-size: 12px;
       top: 11px;
     }
   }

package/packages/theme-chalk/src/common/var.scss

@@ -280,44 +280,11 @@ $--select-dropdown-border: solid 0.5px $--color-line-2 !default;
 
 /* Alert
 -------------------------- */
-$--alert-padding: 11px 12px !default;
-$--alert-border-radius: 4px !default;
-$--alert-title-font-size: 12px !default;
-$--alert-description-font-size: 12px !default;
-$--alert-close-font-size: 14px !default;
-$--alert-close-customed-font-size: 12px !default;
-
-$--alert-success-color: $--color-success-lighter !default;
-$--alert-info-color: $--color-info-lighter !default;
-$--alert-warning-color: $--color-warning-lighter !default;
-$--alert-danger-color: $--color-danger-lighter !default;
-
-$--alert-icon-size: 16px !default;
-$--alert-icon-large-size: 28px !default;
 
 /* MessageBox
 
 /* Message
 -------------------------- */
-$--message-shadow: $--box-shadow-base !default;
-$--message-min-width: 380px !default;
-$--message-background-color: #edf2fc !default;
-$--message-padding: 15px 15px 15px 20px !default;
-/// color||Color|0
-$--message-close-icon-color: $--color-text-placeholder !default;
-/// height||Other|4
-$--message-close-size: 16px !default;
-/// color||Color|0
-$--message-close-hover-color: $--color-text-secondary !default;
-
-/// color||Color|0
-$--message-success-font-color: $--color-success !default;
-/// color||Color|0
-$--message-info-font-color: $--color-info !default;
-/// color||Color|0
-$--message-warning-font-color: $--color-warning !default;
-/// color||Color|0
-$--message-danger-font-color: $--color-danger !default;
 
 /* Notification
 -------------------------- */
@@ -329,7 +296,7 @@ $--notification-shadow: $--box-shadow-light !default;
 /// color||Color|0
 $--notification-border-color: $--border-color-lighter !default;
 $--notification-icon-size: 24px !default;
-$--notification-close-font-size: $--message-close-size !default;
+$--notification-close-font-size: 14px !default;
 $--notification-group-margin-left: 13px !default;
 $--notification-group-margin-right: 8px !default;
 /// fontSize||Font|1

package/packages/theme-chalk/src/dialog.scss

@@ -10,13 +10,22 @@
   border-radius: 8px;
   box-sizing: border-box;
   width: 50%;
+  transform: translateY(-50%);
 
   @include when(fullscreen) {
     width: 100%;
-    margin-top: 0;
+    top: 0;
     margin-bottom: 0;
     height: 100%;
     overflow: auto;
+    transform: none;
+    display: flex;
+    flex-direction: column;
+    justify-content: space-between;
+    .el-dialog__body {
+      flex: 1;
+      max-height: none;
+    }
   }
 
   @include e(wrapper) {
@@ -79,22 +88,23 @@
   }
 
   @include e(footer) {
-    padding: 16px 24px 20px 0;
+    padding: 16px 24px 20px;
     text-align: right;
     box-sizing: border-box;
     font-size: 0;
+    &.el-dialog__footer--shadow {
+      box-shadow: 0 0 12px 0 rgba(196, 198, 207, 0.21);
+    }
   }
 
-  // 内容居中布局
   @include m(center) {
-    text-align: center;
 
     @include e(body) {
-      text-align: initial;
+      text-align: left;
     }
 
     @include e(footer) {
-      text-align: inherit;
+      text-align: center;
     }
   }
 }