cy-element-ui 1.1.13 → 1.1.15

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

@@ -1,294 +1,294 @@
 <script>
-  import TabBar from './tab-bar';
-  import { addResizeListener, removeResizeListener } from 'element-ui/src/utils/resize-event';
+import TabBar from './tab-bar';
+import { addResizeListener, removeResizeListener } from 'element-ui/src/utils/resize-event';
 
-  function noop() {}
-  const firstUpperCase = str => {
-    return str.toLowerCase().replace(/( |^)[a-z]/g, (L) => L.toUpperCase());
-  };
+function noop() {}
+const firstUpperCase = str => {
+	return str.toLowerCase().replace(/( |^)[a-z]/g, (L) => L.toUpperCase());
+};
 
-  export default {
-    name: 'TabNav',
+export default {
+	name: 'TabNav',
 
-    components: {
-      TabBar
-    },
+	components: {
+		TabBar
+	},
 
-    inject: ['rootTabs'],
+	inject: ['rootTabs'],
 
-    props: {
-      panes: Array,
-      currentName: String,
-      editable: Boolean,
-      onTabClick: {
-        type: Function,
-        default: noop
-      },
-      onTabRemove: {
-        type: Function,
-        default: noop
-      },
-      type: String,
-      stretch: Boolean
-    },
+	props: {
+		panes: Array,
+		currentName: String,
+		editable: Boolean,
+		onTabClick: {
+			type: Function,
+			default: noop
+		},
+		onTabRemove: {
+			type: Function,
+			default: noop
+		},
+		type: String,
+		stretch: Boolean
+	},
 
-    data() {
-      return {
-        scrollable: false,
-        navOffset: 0,
-        isFocus: false,
-        focusable: true
-      };
-    },
+	data() {
+		return {
+			scrollable: false,
+			navOffset: 0,
+			isFocus: false,
+			focusable: true
+		};
+	},
 
-    computed: {
-      navStyle() {
-        const dir = ['top', 'bottom'].indexOf(this.rootTabs.tabPosition) !== -1 ? 'X' : 'Y';
-        return {
-          transform: `translate${dir}(-${this.navOffset}px)`
-        };
-      },
-      sizeName() {
-        return ['top', 'bottom'].indexOf(this.rootTabs.tabPosition) !== -1 ? 'width' : 'height';
-      }
-    },
+	computed: {
+		navStyle() {
+			const dir = ['top', 'bottom'].indexOf(this.rootTabs.tabPosition) !== -1 ? 'X' : 'Y';
+			return {
+				transform: `translate${ dir }(-${ this.navOffset }px)`
+			};
+		},
+		sizeName() {
+			return ['top', 'bottom'].indexOf(this.rootTabs.tabPosition) !== -1 ? 'width' : 'height';
+		}
+	},
 
-    methods: {
-      scrollPrev() {
-        const containerSize = this.$refs.navScroll[`offset${firstUpperCase(this.sizeName)}`];
-        const currentOffset = this.navOffset;
+	methods: {
+		scrollPrev() {
+			const containerSize = this.$refs.navScroll[`offset${ firstUpperCase(this.sizeName) }`];
+			const currentOffset = this.navOffset;
 
-        if (!currentOffset) return;
+			if (!currentOffset) return;
 
-        let newOffset = currentOffset > containerSize
-          ? currentOffset - containerSize
-          : 0;
+			let newOffset = currentOffset > containerSize
+				? currentOffset - containerSize
+				: 0;
 
-        this.navOffset = newOffset;
-      },
-      scrollNext() {
-        const navSize = this.$refs.nav[`offset${firstUpperCase(this.sizeName)}`];
-        const containerSize = this.$refs.navScroll[`offset${firstUpperCase(this.sizeName)}`];
-        const currentOffset = this.navOffset;
+			this.navOffset = newOffset;
+		},
+		scrollNext() {
+			const navSize = this.$refs.nav[`offset${ firstUpperCase(this.sizeName) }`];
+			const containerSize = this.$refs.navScroll[`offset${ firstUpperCase(this.sizeName) }`];
+			const currentOffset = this.navOffset;
 
-        if (navSize - currentOffset <= containerSize) return;
+			if (navSize - currentOffset <= containerSize) return;
 
-        let newOffset = navSize - currentOffset > containerSize * 2
-          ? currentOffset + containerSize
-          : (navSize - containerSize);
+			let newOffset = navSize - currentOffset > containerSize * 2
+				? currentOffset + containerSize
+				: (navSize - containerSize);
 
-        this.navOffset = newOffset;
-      },
-      scrollToActiveTab() {
-        if (!this.scrollable) return;
-        const nav = this.$refs.nav;
-        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 maxOffset = isHorizontal
-          ? nav.offsetWidth - navScrollBounding.width
-          : nav.offsetHeight - navScrollBounding.height;
-        const currentOffset = this.navOffset;
-        let newOffset = currentOffset;
+			this.navOffset = newOffset;
+		},
+		scrollToActiveTab() {
+			if (!this.scrollable) return;
+			const nav = this.$refs.nav;
+			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 maxOffset = isHorizontal
+				? nav.offsetWidth - navScrollBounding.width
+				: nav.offsetHeight - navScrollBounding.height;
+			const currentOffset = this.navOffset;
+			let newOffset = currentOffset;
 
-        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);
-          }
-        }
-        newOffset = Math.max(newOffset, 0);
-        this.navOffset = Math.min(newOffset, maxOffset);
-      },
-      update() {
-        if (!this.$refs.nav) return;
-        const sizeName = this.sizeName;
-        const navSize = this.$refs.nav[`offset${firstUpperCase(sizeName)}`];
-        const containerSize = this.$refs.navScroll[`offset${firstUpperCase(sizeName)}`];
-        const currentOffset = this.navOffset;
+			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);
+				}
+			}
+			newOffset = Math.max(newOffset, 0);
+			this.navOffset = Math.min(newOffset, maxOffset);
+		},
+		update() {
+			if (!this.$refs.nav) return;
+			const sizeName = this.sizeName;
+			const navSize = this.$refs.nav[`offset${ firstUpperCase(sizeName) }`];
+			const containerSize = this.$refs.navScroll[`offset${ firstUpperCase(sizeName) }`];
+			const currentOffset = this.navOffset;
 
-        if (containerSize < navSize) {
-          const currentOffset = this.navOffset;
-          this.scrollable = this.scrollable || {};
-          this.scrollable.prev = currentOffset;
-          this.scrollable.next = currentOffset + containerSize < navSize;
-          if (navSize - currentOffset < containerSize) {
-            this.navOffset = navSize - containerSize;
-          }
-        } else {
-          this.scrollable = false;
-          if (currentOffset > 0) {
-            this.navOffset = 0;
-          }
-        }
-      },
-      changeTab(e) {
-        const keyCode = e.keyCode;
-        let nextIndex;
-        let currentIndex, tabList;
-        if ([37, 38, 39, 40].indexOf(keyCode) !== -1) { // 左右上下键更换tab
-          tabList = e.currentTarget.querySelectorAll('[role=tab]');
-          currentIndex = Array.prototype.indexOf.call(tabList, e.target);
-        } else {
-          return;
-        }
-        if (keyCode === 37 || keyCode === 38) { // left
-          if (currentIndex === 0) { // first
-            nextIndex = tabList.length - 1;
-          } else {
-            nextIndex = currentIndex - 1;
-          }
-        } else { // right
-          if (currentIndex < tabList.length - 1) { // not last
-            nextIndex = currentIndex + 1;
-          } else {
-            nextIndex = 0;
-          }
-        }
-        tabList[nextIndex].focus(); // 改变焦点元素
-        tabList[nextIndex].click(); // 选中下一个tab
-        this.setFocus();
-      },
-      setFocus() {
-        if (this.focusable) {
-          this.isFocus = true;
-        }
-      },
-      removeFocus() {
-        this.isFocus = false;
-      },
-      visibilityChangeHandler() {
-        const visibility = document.visibilityState;
-        if (visibility === 'hidden') {
-          this.focusable = false;
-        } else if (visibility === 'visible') {
-          setTimeout(() => {
-            this.focusable = true;
-          }, 50);
-        }
-      },
-      windowBlurHandler() {
-        this.focusable = false;
-      },
-      windowFocusHandler() {
-        setTimeout(() => {
-          this.focusable = true;
-        }, 50);
-      }
-    },
+			if (containerSize < navSize) {
+				const currentOffset = this.navOffset;
+				this.scrollable = this.scrollable || {};
+				this.scrollable.prev = currentOffset;
+				this.scrollable.next = currentOffset + containerSize < navSize;
+				if (navSize - currentOffset < containerSize) {
+					this.navOffset = navSize - containerSize;
+				}
+			} else {
+				this.scrollable = false;
+				if (currentOffset > 0) {
+					this.navOffset = 0;
+				}
+			}
+		},
+		changeTab(e) {
+			const keyCode = e.keyCode;
+			let nextIndex;
+			let currentIndex, tabList;
+			if ([37, 38, 39, 40].indexOf(keyCode) !== -1) { // 左右上下键更换tab
+				tabList = e.currentTarget.querySelectorAll('[role=tab]');
+				currentIndex = Array.prototype.indexOf.call(tabList, e.target);
+			} else {
+				return;
+			}
+			if (keyCode === 37 || keyCode === 38) { // left
+				if (currentIndex === 0) { // first
+					nextIndex = tabList.length - 1;
+				} else {
+					nextIndex = currentIndex - 1;
+				}
+			} else { // right
+				if (currentIndex < tabList.length - 1) { // not last
+					nextIndex = currentIndex + 1;
+				} else {
+					nextIndex = 0;
+				}
+			}
+			tabList[nextIndex].focus(); // 改变焦点元素
+			tabList[nextIndex].click(); // 选中下一个tab
+			this.setFocus();
+		},
+		setFocus() {
+			if (this.focusable) {
+				this.isFocus = true;
+			}
+		},
+		removeFocus() {
+			this.isFocus = false;
+		},
+		visibilityChangeHandler() {
+			const visibility = document.visibilityState;
+			if (visibility === 'hidden') {
+				this.focusable = false;
+			} else if (visibility === 'visible') {
+				setTimeout(() => {
+					this.focusable = true;
+				}, 50);
+			}
+		},
+		windowBlurHandler() {
+			this.focusable = false;
+		},
+		windowFocusHandler() {
+			setTimeout(() => {
+				this.focusable = true;
+			}, 50);
+		}
+	},
 
-    updated() {
-      this.update();
-    },
+	updated() {
+		this.update();
+	},
 
-    render(h) {
-      const {
-        type,
-        panes,
-        editable,
-        stretch,
-        onTabClick,
-        onTabRemove,
-        navStyle,
-        scrollable,
-        scrollNext,
-        scrollPrev,
-        changeTab,
-        setFocus,
-        removeFocus
-      } = this;
-      const scrollBtn = scrollable
-        ? [
-          <span class={['el-tabs__nav-prev', scrollable.prev ? '' : 'is-disabled']} on-click={scrollPrev}><i class="el-icon-arrow-left"></i></span>,
-          <span class={['el-tabs__nav-next', scrollable.next ? '' : 'is-disabled']} on-click={scrollNext}><i class="el-icon-arrow-right"></i></span>
-        ] : null;
+	render(h) {
+		const {
+			type,
+			panes,
+			editable,
+			stretch,
+			onTabClick,
+			onTabRemove,
+			navStyle,
+			scrollable,
+			scrollNext,
+			scrollPrev,
+			changeTab,
+			setFocus,
+			removeFocus
+		} = this;
+		const scrollBtn = scrollable
+			? [
+				<span class={['el-tabs__nav-prev', scrollable.prev ? '' : 'is-disabled']} on-click={scrollPrev}><i class="el-icon-arrow-left"></i></span>,
+				<span class={['el-tabs__nav-next', scrollable.next ? '' : 'is-disabled']} on-click={scrollNext}><i class="el-icon-arrow-right"></i></span>
+			] : null;
 
-      const tabs = this._l(panes, (pane, index) => {
-        let tabName = pane.name || pane.index || index;
-        const closable = pane.isClosable || editable;
+		const tabs = this._l(panes, (pane, index) => {
+			let tabName = pane.name || pane.index || index;
+			const closable = pane.isClosable || editable;
 
-        pane.index = `${index}`;
+			pane.index = `${ index }`;
 
-        const btnClose = closable
-          ? <span class="el-icon-close" on-click={(ev) => { onTabRemove(pane, ev); }}></span>
-          : null;
+			const btnClose = closable
+				? <span class="el-icon-close" on-click={(ev) => { onTabRemove(pane, ev); }}></span>
+				: null;
 
-        const tabLabelContent = pane.$slots.label || pane.label;
-        const tabindex = pane.active ? 0 : -1;
-        return (
-          <div
-            class={{
-              'el-tabs__item': true,
-              [`is-${ this.rootTabs.tabPosition }`]: true,
-              'is-active': pane.active,
-              'is-disabled': pane.disabled,
-              'is-closable': closable,
-              'is-focus': this.isFocus
-            }}
-            id={`tab-${tabName}`}
-            key={`tab-${tabName}`}
-            aria-controls={`pane-${tabName}`}
-            role="tab"
-            aria-selected={ pane.active }
-            ref="tabs"
-            tabindex={tabindex}
-            refInFor
-            on-focus={ ()=> { setFocus(); }}
-            on-blur ={ ()=> { removeFocus(); }}
-            on-click={(ev) => { removeFocus(); onTabClick(pane, tabName, ev); }}
-            on-keydown={(ev) => { if (closable && (ev.keyCode === 46 || ev.keyCode === 8)) { onTabRemove(pane, ev);} }}
-          >
-            {tabLabelContent}
-            {btnClose}
-          </div>
-        );
-      });
-      return (
-        <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', `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>
-          </div>
-        </div>
-      );
-    },
+			const tabLabelContent = pane.$slots.label || pane.label;
+			const tabindex = pane.active ? 0 : -1;
+			return (
+				<div
+					class={{
+						'el-tabs__item': true,
+						[`is-${ this.rootTabs.tabPosition }`]: true,
+						'is-active': pane.active,
+						'is-disabled': pane.disabled,
+						'is-closable': closable,
+						'is-focus': this.isFocus
+					}}
+					id={`tab-${ tabName }`}
+					key={`tab-${ tabName }`}
+					aria-controls={`pane-${ tabName }`}
+					role="tab"
+					aria-selected={ pane.active }
+					ref="tabs"
+					tabindex={tabindex}
+					refInFor
+					on-focus={ () => { setFocus(); }}
+					on-blur ={ () => { removeFocus(); }}
+					on-click={(ev) => { removeFocus(); onTabClick(pane, tabName, ev); }}
+					on-keydown={(ev) => { if (closable && (ev.keyCode === 46 || ev.keyCode === 8)) { onTabRemove(pane, ev); } }}
+				>
+					{tabLabelContent}
+					{btnClose}
+				</div>
+			);
+		});
+		return (
+			<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', `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>
+				</div>
+			</div>
+		);
+	},
 
-    mounted() {
-      addResizeListener(this.$el, this.update);
-      document.addEventListener('visibilitychange', this.visibilityChangeHandler);
-      window.addEventListener('blur', this.windowBlurHandler);
-      window.addEventListener('focus', this.windowFocusHandler);
-      setTimeout(() => {
-        this.scrollToActiveTab();
-      }, 0);
-    },
+	mounted() {
+		addResizeListener(this.$el, this.update);
+		document.addEventListener('visibilitychange', this.visibilityChangeHandler);
+		window.addEventListener('blur', this.windowBlurHandler);
+		window.addEventListener('focus', this.windowFocusHandler);
+		setTimeout(() => {
+			this.scrollToActiveTab();
+		}, 0);
+	},
 
-    beforeDestroy() {
-      if (this.$el && this.update) removeResizeListener(this.$el, this.update);
-      document.removeEventListener('visibilitychange', this.visibilityChangeHandler);
-      window.removeEventListener('blur', this.windowBlurHandler);
-      window.removeEventListener('focus', this.windowFocusHandler);
-    }
-  };
+	beforeDestroy() {
+		if (this.$el && this.update) removeResizeListener(this.$el, this.update);
+		document.removeEventListener('visibilitychange', this.visibilityChangeHandler);
+		window.removeEventListener('blur', this.windowBlurHandler);
+		window.removeEventListener('focus', this.windowFocusHandler);
+	}
+};
 </script>