@zkwq/business 0.0.4 → 0.0.6

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

@@ -1,174 +0,0 @@
-<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

@@ -1,57 +0,0 @@
-<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

@@ -1,294 +0,0 @@
-<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

@@ -1,56 +0,0 @@
-<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>