mazey-element-ui 2.0.1 → 2.15.16

package/packages/tabs/src/tab-nav.vue

@@ -1,6 +1,6 @@
 <script>
   import TabBar from './tab-bar';
-  import { addResizeListener, removeResizeListener } from 'element-ui/src/utils/resize-event';
+  import { addResizeListener, removeResizeListener } from 'mazey-element-ui/src/utils/resize-event';
 
   function noop() {}
   const firstUpperCase = str => {
@@ -28,7 +28,8 @@
         type: Function,
         default: noop
       },
-      type: String
+      type: String,
+      stretch: Boolean
     },
 
     data() {
@@ -84,22 +85,32 @@
         const activeTab = this.$el.querySelector('.is-active');
         if (!activeTab) return;
         const navScroll = this.$refs.navScroll;
+        const isHorizontal = ['top', 'bottom'].indexOf(this.rootTabs.tabPosition) !== -1;
         const activeTabBounding = activeTab.getBoundingClientRect();
         const navScrollBounding = navScroll.getBoundingClientRect();
-        const navBounding = nav.getBoundingClientRect();
+        const maxOffset = isHorizontal
+          ? nav.offsetWidth - navScrollBounding.width
+          : nav.offsetHeight - navScrollBounding.height;
         const currentOffset = this.navOffset;
         let newOffset = currentOffset;
 
-        if (activeTabBounding.left < navScrollBounding.left) {
-          newOffset = currentOffset - (navScrollBounding.left - activeTabBounding.left);
-        }
-        if (activeTabBounding.right > navScrollBounding.right) {
-          newOffset = currentOffset + activeTabBounding.right - navScrollBounding.right;
-        }
-        if (navBounding.right < navScrollBounding.right) {
-          newOffset = nav.offsetWidth - navScrollBounding.width;
+        if (isHorizontal) {
+          if (activeTabBounding.left < navScrollBounding.left) {
+            newOffset = currentOffset - (navScrollBounding.left - activeTabBounding.left);
+          }
+          if (activeTabBounding.right > navScrollBounding.right) {
+            newOffset = currentOffset + activeTabBounding.right - navScrollBounding.right;
+          }
+        } else {
+          if (activeTabBounding.top < navScrollBounding.top) {
+            newOffset = currentOffset - (navScrollBounding.top - activeTabBounding.top);
+          }
+          if (activeTabBounding.bottom > navScrollBounding.bottom) {
+            newOffset = currentOffset + (activeTabBounding.bottom - navScrollBounding.bottom);
+          }
         }
-        this.navOffset = Math.max(newOffset, 0);
+        newOffset = Math.max(newOffset, 0);
+        this.navOffset = Math.min(newOffset, maxOffset);
       },
       update() {
         if (!this.$refs.nav) return;
@@ -187,6 +198,7 @@
         type,
         panes,
         editable,
+        stretch,
         onTabClick,
         onTabRemove,
         navStyle,
@@ -226,6 +238,7 @@
               'is-focus': this.isFocus
             }}
             id={`tab-${tabName}`}
+            key={`tab-${tabName}`}
             aria-controls={`pane-${tabName}`}
             role="tab"
             aria-selected={ pane.active }
@@ -246,7 +259,13 @@
         <div class={['el-tabs__nav-wrap', scrollable ? 'is-scrollable' : '', `is-${ this.rootTabs.tabPosition }`]}>
           {scrollBtn}
           <div class={['el-tabs__nav-scroll']} ref="navScroll">
-            <div class="el-tabs__nav" ref="nav" style={navStyle} role="tablist" on-keydown={ changeTab }>
+            <div
+              class={['el-tabs__nav', `is-${ this.rootTabs.tabPosition }`, stretch && ['top', 'bottom'].indexOf(this.rootTabs.tabPosition) !== -1 ? 'is-stretch' : '']}
+              ref="nav"
+              style={navStyle}
+              role="tablist"
+              on-keydown={ changeTab }
+            >
               {!type ? <tab-bar tabs={panes}></tab-bar> : null}
               {tabs}
             </div>
@@ -260,6 +279,9 @@
       document.addEventListener('visibilitychange', this.visibilityChangeHandler);
       window.addEventListener('blur', this.windowBlurHandler);
       window.addEventListener('focus', this.windowFocusHandler);
+      setTimeout(() => {
+        this.scrollToActiveTab();
+      }, 0);
     },
 
     beforeDestroy() {
@@ -270,4 +292,3 @@
     }
   };
 </script>
-

package/packages/tabs/src/tab-pane.vue

@@ -1,7 +1,7 @@
 <template>
   <div
     class="el-tab-pane"
-    v-if="!lazy || active"
+    v-if="(!lazy || loaded) || active"
     v-show="active"
     role="tabpanel"
     :aria-hidden="!active"
@@ -28,7 +28,8 @@
 
     data() {
       return {
-        index: null
+        index: null,
+        loaded: false
       };
     },
 
@@ -37,28 +38,19 @@
         return this.closable || this.$parent.closable;
       },
       active() {
-        return this.$parent.currentName === (this.name || this.index);
+        const active = this.$parent.currentName === (this.name || this.index);
+        if (active) {
+          this.loaded = true;
+        }
+        return active;
       },
       paneName() {
         return this.name || this.index;
       }
     },
 
-    mounted() {
-      this.$parent.addPanes(this);
-    },
-
-    destroyed() {
-      if (this.$el && this.$el.parentNode) {
-        this.$el.parentNode.removeChild(this.$el);
-      }
-      this.$parent.removePanes(this);
-    },
-
-    watch: {
-      label() {
-        this.$parent.$forceUpdate();
-      }
+    updated() {
+      this.$parent.$emit('tab-nav-update');
     }
   };
 </script>

package/packages/tabs/src/tabs.vue

@@ -19,7 +19,8 @@
         type: String,
         default: 'top'
       },
-      beforeLeave: Function
+      beforeLeave: Function,
+      stretch: Boolean
     },
 
     provide() {
@@ -44,14 +45,30 @@
       },
       currentName(value) {
         if (this.$refs.nav) {
-          this.$nextTick(_ => {
-            this.$refs.nav.scrollToActiveTab();
+          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);
@@ -73,32 +90,25 @@
           this.$emit('input', value);
         };
         if (this.currentName !== value && this.beforeLeave) {
-          const before = this.beforeLeave();
+          const before = this.beforeLeave(value, this.currentName);
           if (before && before.then) {
-            before.then(() => {
-              changeCurrentName();
-            });
+            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();
         }
-      },
-      addPanes(item) {
-        const index = this.$slots.default.filter(item => {
-          return item.elm.nodeType === 1 && /\bel-tab-pane\b/.test(item.elm.className);
-        }).indexOf(item.$vnode);
-        this.panes.splice(index, 0, item);
-      },
-      removePanes(item) {
-        const panes = this.panes;
-        const index = panes.indexOf(item);
-        if (index > -1) {
-          panes.splice(index, 1);
-        }
       }
     },
+
     render(h) {
       let {
         type,
@@ -109,7 +119,8 @@
         panes,
         editable,
         addable,
-        tabPosition
+        tabPosition,
+        stretch
       } = this;
 
       const newButton = editable || addable
@@ -132,7 +143,8 @@
           onTabRemove: handleTabRemove,
           editable,
           type,
-          panes
+          panes,
+          stretch
         },
         ref: 'nav'
       };
@@ -159,10 +171,21 @@
         </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/tag/src/tag.vue

@@ -1,20 +1,3 @@
-<template>
-  <transition :name="disableTransitions ? '' : 'el-zoom-in-center'">
-    <span
-      class="el-tag"
-      :class="[
-        type ? 'el-tag--' + type : '',
-        tagSize && `el-tag--${tagSize}`,
-        {'is-hit': hit}
-      ]"
-      :style="{backgroundColor: color}">
-      <slot></slot>
-      <i class="el-tag__close el-icon-close"
-        v-if="closable"
-        @click.stop="handleClose"></i>
-    </span>
-  </transition>
-</template>
 <script>
   export default {
     name: 'ElTag',
@@ -25,17 +8,51 @@
       hit: Boolean,
       disableTransitions: Boolean,
       color: String,
-      size: String
+      size: String,
+      effect: {
+        type: String,
+        default: 'light',
+        validator(val) {
+          return ['dark', 'light', 'plain'].indexOf(val) !== -1;
+        }
+      }
     },
     methods: {
       handleClose(event) {
+        event.stopPropagation();
         this.$emit('close', event);
+      },
+      handleClick(event) {
+        this.$emit('click', event);
       }
     },
     computed: {
       tagSize() {
         return this.size || (this.$ELEMENT || {}).size;
       }
+    },
+    render(h) {
+      const { type, tagSize, hit, effect } = this;
+      const classes = [
+        'el-tag',
+        type ? `el-tag--${type}` : '',
+        tagSize ? `el-tag--${tagSize}` : '',
+        effect ? `el-tag--${effect}` : '',
+        hit && 'is-hit'
+      ];
+      const tagEl = (
+        <span
+          class={ classes }
+          style={{ backgroundColor: this.color }}
+          on-click={ this.handleClick }>
+          { this.$slots.default }
+          {
+            this.closable && <i class="el-tag__close el-icon-close" on-click={ this.handleClose }></i>
+          }
+        </span>
+      );
+
+      return this.disableTransitions ? tagEl : <transition name="el-zoom-in-center">{ tagEl }</transition>;
     }
   };
 </script>

package/packages/theme-chalk/gulpfile.js

@@ -0,0 +1,33 @@
+'use strict';
+
+const { series, src, dest } = require('gulp');
+const sass = require('gulp-sass')(require('sass'));
+const autoprefixer = require('gulp-autoprefixer');
+const cleanCSS = require('gulp-clean-css');
+
+function compile() {
+  return src('./src/*.scss')
+    .pipe(sass.sync({
+      quietDeps: true,
+      silenceDeprecations: [
+        'color-functions',
+        'function-units',
+        'global-builtin',
+        'import',
+        'legacy-js-api',
+        'slash-div'
+      ]
+    }))
+    .pipe(autoprefixer({
+      cascade: false
+    }))
+    .pipe(cleanCSS())
+    .pipe(dest('./lib'));
+}
+
+function copyfont() {
+  return src('./src/fonts/**')
+    .pipe(dest('./lib/fonts'));
+}
+
+exports.build = series(compile, copyfont);

package/packages/theme-chalk/package.json

@@ -0,0 +1,36 @@
+{
+  "name": "element-theme-chalk",
+  "version": "2.15.15",
+  "description": "Element component chalk theme.",
+  "main": "lib/index.css",
+  "style": "lib/index.css",
+  "files": [
+    "lib",
+    "src"
+  ],
+  "scripts": {
+    "build": "gulp build"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/chengchuu/mazey-element-ui.git",
+    "directory": "packages/theme-chalk"
+  },
+  "keywords": [
+    "element",
+    "theme"
+  ],
+  "author": "yi.shyang@ele.me",
+  "license": "MIT",
+  "bugs": {
+    "url": "https://github.com/chengchuu/mazey-element-ui/issues"
+  },
+  "homepage": "https://chengchuu.github.io/mazey-element-ui/",
+  "devDependencies": {
+    "gulp": "^3.9.1",
+    "gulp-cssmin": "^0.1.7",
+    "gulp-sass": "^3.1.0",
+    "gulp-autoprefixer": "^4.0.0"
+  },
+  "dependencies": {}
+}

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

@@ -15,22 +15,51 @@
   align-items: center;
   transition: opacity .2s;
 
+  @include when(light) {
+    .el-alert__closebtn {
+      color: $--color-text-placeholder;
+    }
+  }
+
+  @include when(dark) {
+    .el-alert__closebtn {
+      color: $--color-white;
+    }
+    .el-alert__description {
+      color: $--color-white;
+    }
+  }
+
   @include when(center) {
     justify-content: center;
   }
 
   @include m(success) {
-    background-color: $--alert-success-color;
-    color: $--color-success;
-
-    .el-alert__description {
+    &.is-light {
+      background-color: $--alert-success-color;
       color: $--color-success;
+
+      .el-alert__description {
+        color: $--color-success;
+      }
+    }
+
+    &.is-dark {
+      background-color: $--color-success;
+      color: $--color-white;
     }
   }
 
   @include m(info) {
-    background-color: $--alert-info-color;
-    color: $--color-info;
+    &.is-light {
+      background-color: $--alert-info-color;
+      color: $--color-info;
+    }
+
+    &.is-dark {
+      background-color: $--color-info;
+      color: $--color-white;
+    }
 
     .el-alert__description {
       color: $--color-info;
@@ -38,20 +67,34 @@
   }
 
   @include m(warning) {
-    background-color: $--alert-warning-color;
-    color: $--color-warning;
-
-    .el-alert__description {
+    &.is-light {
+      background-color: $--alert-warning-color;
       color: $--color-warning;
+
+      .el-alert__description {
+        color: $--color-warning;
+      }
+    }
+
+    &.is-dark {
+      background-color: $--color-warning;
+      color: $--color-white;
     }
   }
 
   @include m(error) {
-    background-color: $--alert-danger-color;
-    color: $--color-danger;
-
-    .el-alert__description {
+    &.is-light {
+      background-color: $--alert-danger-color;
       color: $--color-danger;
+
+      .el-alert__description {
+        color: $--color-danger;
+      }
+    }
+
+    &.is-dark {
+      background-color: $--color-danger;
+      color: $--color-white;
     }
   }
 
@@ -84,7 +127,6 @@
 
   @include e(closebtn) {
     font-size: $--alert-close-font-size;
-    color: $--color-text-placeholder;
     opacity: 1;
     position: absolute;
     top: 12px;

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

@@ -14,15 +14,14 @@
   margin: 5px 0;
   box-shadow: $--box-shadow-light;
   border-radius: $--border-radius-base;
+  border: 1px solid $--border-color-light;
+  box-sizing: border-box;
+  background-color: $--color-white;
 
   @include e(wrap) {
     max-height: 280px;
     padding: 10px 0;
     box-sizing: border-box;
-    overflow: auto;
-    background-color: $--color-white;
-    border: 1px solid $--border-color-light;
-    border-radius: $--border-radius-base;
   }
 
   @include e(list) {

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

@@ -0,0 +1,51 @@
+@import "mixins/mixins";
+@import "common/var";
+
+@include b(avatar) {
+  display: inline-block;
+  box-sizing: border-box;
+  text-align: center;
+  overflow: hidden;
+  color: $--avatar-font-color;
+  background: $--avatar-background-color;
+  width: $--avatar-large-size;
+  height: $--avatar-large-size;
+  line-height: $--avatar-large-size;
+  font-size: $--avatar-text-font-size;
+
+  >img {
+    display: block;
+    height: 100%;
+    vertical-align: middle;
+  }
+
+  @include m(circle) {
+    border-radius: 50%;
+  }
+
+  @include m(square) {
+    border-radius: $--avatar-border-radius;
+  }
+
+  @include m(icon) {
+    font-size: $--avatar-icon-font-size;
+  }
+
+  @include m(large) {
+    width: $--avatar-large-size;
+    height: $--avatar-large-size;
+    line-height: $--avatar-large-size;
+  }
+
+  @include m(medium) {
+    width: $--avatar-medium-size;
+    height: $--avatar-medium-size;
+    line-height: $--avatar-medium-size;
+  }
+
+  @include m(small) {
+    width: $--avatar-small-size;
+    height: $--avatar-small-size;
+    line-height: $--avatar-small-size;
+  }
+}

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

@@ -0,0 +1,22 @@
+@import "mixins/mixins";
+@import "common/var";
+
+@include b(backtop) {
+  position: fixed;
+  background-color: $--backtop-background-color;
+  width: 40px;
+  height: 40px;
+  border-radius: 50%;
+  color: $--backtop-font-color;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 20px;
+  box-shadow: 0 0 6px rgba(0,0,0, .12);
+  cursor: pointer;
+  z-index: 5;
+
+  &:hover {
+    background-color: $--backtop-hover-background-color
+  }
+}

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

@@ -7,7 +7,7 @@
   display: inline-block;
 
   @include e(content) {
-    background-color: $--badge-fill;
+    background-color: $--badge-background-color;
     border-radius: $--badge-radius;
     color: $--color-white;
     display: inline-block;
@@ -37,5 +37,21 @@
       right: 0;
       border-radius: 50%;
     }
+
+    @each $type in (primary, success, warning, info, danger) {
+      @include m($type) {
+        @if $type == primary {
+          background-color: $--color-primary;
+        } @else if $type == success {
+          background-color: $--color-success;
+        } @else if $type == warning {
+          background-color: $--color-warning;
+        } @else if $type == info {
+          background-color: $--color-info;
+        } @else {
+          background-color: $--color-danger;
+        }
+      }
+    }
   }
 }