@zkwq/business 0.0.1

package/src/components/base/ui/switch/index.vue

@@ -0,0 +1,174 @@
+<template>
+  <div
+    class="base-switch"
+    :class="{ 'is-disabled': switchDisabled, 'is-checked': checked }"
+    role="switch"
+    :aria-checked="checked"
+    :aria-disabled="switchDisabled"
+    @click.prevent="switchValue"
+  >
+    <input
+      class="base-switch__input"
+      type="checkbox"
+      @change="handleChange"
+      ref="input"
+      :id="id"
+      :name="name"
+      :true-value="activeValue"
+      :false-value="inactiveValue"
+      :disabled="switchDisabled"
+      @keydown.enter="switchValue"
+    >
+    <span
+      :class="['base-switch__label', 'base-switch__label--left', !checked ? 'is-active' : '']"
+      v-if="inactiveIconClass || inactiveText">
+      <i :class="[inactiveIconClass]" v-if="inactiveIconClass"></i>
+      <span v-if="!inactiveIconClass && inactiveText" :aria-hidden="checked">{{ inactiveText }}</span>
+    </span>
+    <span class="base-switch__core" ref="core" :style="{ 'width': coreWidth + 'px' }">
+    </span>
+    <span
+      :class="['base-switch__label', 'base-switch__label--right', checked ? 'is-active' : '']"
+      v-if="activeIconClass || activeText">
+      <i :class="[activeIconClass]" v-if="activeIconClass"></i>
+      <span v-if="!activeIconClass && activeText" :aria-hidden="!checked">{{ activeText }}</span>
+    </span>
+  </div>
+</template>
+<script>
+  import emitter from '../mixin/emitter';
+  import Focus from '../mixin/focus';
+  import Migrating from '../mixin/migrating';
+
+  export default {
+    name: 'BaseSwitch',
+    mixins: [Focus('input'), Migrating, emitter],
+    inject: {
+      baseForm: {
+        default: ''
+      }
+    },
+    props: {
+      value: {
+        type: [Boolean, String, Number],
+        default: false
+      },
+      disabled: {
+        type: Boolean,
+        default: false
+      },
+      width: {
+        type: Number,
+        default: 40
+      },
+      activeIconClass: {
+        type: String,
+        default: ''
+      },
+      inactiveIconClass: {
+        type: String,
+        default: ''
+      },
+      activeText: String,
+      inactiveText: String,
+      activeColor: {
+        type: String,
+        default: ''
+      },
+      inactiveColor: {
+        type: String,
+        default: ''
+      },
+      activeValue: {
+        type: [Boolean, String, Number],
+        default: true
+      },
+      inactiveValue: {
+        type: [Boolean, String, Number],
+        default: false
+      },
+      name: {
+        type: String,
+        default: ''
+      },
+      validateEvent: {
+        type: Boolean,
+        default: true
+      },
+      id: String
+    },
+    data() {
+      return {
+        coreWidth: this.width
+      };
+    },
+    created() {
+      if (!~[this.activeValue, this.inactiveValue].indexOf(this.value)) {
+        this.$emit('input', this.inactiveValue);
+      }
+    },
+    computed: {
+      checked() {
+        return this.value === this.activeValue;
+      },
+      switchDisabled() {
+        return this.disabled || (this.baseForm || {}).disabled;
+      }
+    },
+    watch: {
+      checked() {
+        this.$refs.input.checked = this.checked;
+        if (this.activeColor || this.inactiveColor) {
+          this.setBackgroundColor();
+        }
+        if (this.validateEvent) {
+          this.dispatch('BaseFormItem', 'base.form.change', [this.value]);
+        }
+      }
+    },
+    methods: {
+      handleChange(event) {
+        const val = this.checked ? this.inactiveValue : this.activeValue;
+        this.$emit('input', val);
+        this.$emit('change', val);
+        this.$nextTick(() => {
+          // set input's checked property
+          // in case parent refuses to change component's value
+          if (this.$refs.input) {
+            this.$refs.input.checked = this.checked;
+          }
+        });
+      },
+      setBackgroundColor() {
+        let newColor = this.checked ? this.activeColor : this.inactiveColor;
+        this.$refs.core.style.borderColor = newColor;
+        this.$refs.core.style.backgroundColor = newColor;
+      },
+      switchValue() {
+        !this.switchDisabled && this.handleChange();
+      },
+      getMigratingConfig() {
+        return {
+          props: {
+            'on-color': 'on-color is renamed to active-color.',
+            'off-color': 'off-color is renamed to inactive-color.',
+            'on-text': 'on-text is renamed to active-text.',
+            'off-text': 'off-text is renamed to inactive-text.',
+            'on-value': 'on-value is renamed to active-value.',
+            'off-value': 'off-value is renamed to inactive-value.',
+            'on-icon-class': 'on-icon-class is renamed to active-icon-class.',
+            'off-icon-class': 'off-icon-class is renamed to inactive-icon-class.'
+          }
+        };
+      }
+    },
+    mounted() {
+      /* istanbul ignore if */
+      this.coreWidth = this.width || 40;
+      if (this.activeColor || this.inactiveColor) {
+        this.setBackgroundColor();
+      }
+      this.$refs.input.checked = this.checked;
+    }
+  };
+</script>

package/src/components/base/ui/tabs/tab-bar.vue

@@ -0,0 +1,57 @@
+<template>
+  <div class="base-tabs__active-bar" :class="`is-${ rootTabs.tabPosition }`" :style="barStyle"></div>
+</template>
+<script>
+  import { arrayFind } from '../util';
+  export default {
+    name: 'TabBar',
+
+    props: {
+      tabs: Array
+    },
+
+    inject: ['rootTabs'],
+
+    computed: {
+      barStyle: {
+        get() {
+          let style = {};
+          let offset = 0;
+          let tabSize = 0;
+          const sizeName = ['top', 'bottom'].indexOf(this.rootTabs.tabPosition) !== -1 ? 'width' : 'height';
+          const sizeDir = sizeName === 'width' ? 'x' : 'y';
+          const firstUpperCase = str => {
+            return str.toLowerCase().replace(/( |^)[a-z]/g, (L) => L.toUpperCase());
+          };
+          this.tabs.every((tab, index) => {
+            let $el = arrayFind(this.$parent.$refs.tabs || [], t => t.id.replace('tab-', '') === tab.paneName);
+            if (!$el) { return false; }
+
+            if (!tab.active) {
+              offset += $el[`client${firstUpperCase(sizeName)}`];
+              return true;
+            } else {
+              tabSize = $el[`client${firstUpperCase(sizeName)}`];
+              const tabStyles = window.getComputedStyle($el);
+              if (sizeName === 'width' && this.tabs.length > 1) {
+                tabSize -= parseFloat(tabStyles.paddingLeft) + parseFloat(tabStyles.paddingRight);
+              }
+              if (sizeName === 'width') {
+                offset += parseFloat(tabStyles.paddingLeft);
+              }
+              return false;
+            }
+          });
+
+          const transform = `translate${firstUpperCase(sizeDir)}(${offset}px)`;
+          style[sizeName] = tabSize + 'px';
+          style.transform = transform;
+          style.msTransform = transform;
+          style.webkitTransform = transform;
+
+          return style;
+        }
+      }
+    }
+  };
+</script>

package/src/components/base/ui/tabs/tab-nav.vue

@@ -0,0 +1,294 @@
+<script lang="jsx">
+  import TabBar from './tab-bar';
+  import { addResizeListener, removeResizeListener } from '../util/resize-events';
+
+  function noop() {}
+  const firstUpperCase = str => {
+    return str.toLowerCase().replace(/( |^)[a-z]/g, (L) => L.toUpperCase());
+  };
+
+  export default {
+    name: 'TabNav',
+
+    components: {
+      TabBar
+    },
+
+    inject: ['rootTabs'],
+
+    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
+      };
+    },
+
+    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;
+
+        if (!currentOffset) return;
+
+        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;
+
+        if (navSize - currentOffset <= containerSize) return;
+
+        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;
+
+        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);
+      }
+    },
+
+    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={['base-tabs__nav-prev', scrollable.prev ? '' : 'is-disabled']} on-click={scrollPrev}><i class="base-icon-arrow-left"></i></span>,
+          <span class={['base-tabs__nav-next', scrollable.next ? '' : 'is-disabled']} on-click={scrollNext}><i class="base-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;
+
+        pane.index = `${index}`;
+
+        const btnClose = closable
+          ? <span class="base-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={{
+              'base-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={['base-tabs__nav-wrap', scrollable ? 'is-scrollable' : '', `is-${ this.rootTabs.tabPosition }`]}>
+          {scrollBtn}
+          <div class={['base-tabs__nav-scroll']} ref="navScroll">
+            <div
+              class={['base-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);
+    },
+
+    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>

package/src/components/base/ui/tabs/tab-pane.vue

@@ -0,0 +1,56 @@
+<template>
+  <div
+    class="base-tab-pane"
+    v-if="(!lazy || loaded) || active"
+    v-show="active"
+    role="tabpanel"
+    :aria-hidden="!active"
+    :id="`pane-${paneName}`"
+    :aria-labelledby="`tab-${paneName}`"
+  >
+    <slot></slot>
+  </div>
+</template>
+<script>
+  export default {
+    name: 'BaseTabPane',
+
+    componentName: 'BaseTabPane',
+
+    props: {
+      label: String,
+      labelContent: Function,
+      name: String,
+      closable: Boolean,
+      disabled: Boolean,
+      lazy: Boolean
+    },
+
+    data() {
+      return {
+        index: null,
+        loaded: false
+      };
+    },
+
+    computed: {
+      isClosable() {
+        return this.closable || this.$parent.closable;
+      },
+      active() {
+        const active = this.$parent.currentName === (this.name || this.index);
+        if (active) {
+          this.loaded = true;
+        }
+        return active;
+      },
+      paneName() {
+        return this.name || this.index;
+      }
+    },
+
+    updated() {
+      this.$parent.$emit('tab-nav-update');
+    }
+  };
+</script>