@zkwq/business 0.0.1

package/src/components/base/ui/tabs/tabs.vue

@@ -0,0 +1,191 @@
+<script lang="jsx"  type="text/jsx">
+  import TabNav from './tab-nav';
+
+  export default {
+    name: 'BaseTabs',
+
+    components: {
+      TabNav
+    },
+
+    props: {
+      type: 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 === 'BaseTabPane');
+          // 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,
+        handleTabClick,
+        handleTabRemove,
+        handleTabAdd,
+        currentName,
+        panes,
+        editable,
+        addable,
+        tabPosition,
+        stretch
+      } = this;
+
+      const newButton = editable || addable
+        ? (
+          <span
+            class="base-tabs__new-tab"
+            on-click={ handleTabAdd }
+            tabindex="0"
+            on-keydown={ (ev) => { if (ev.keyCode === 13) { handleTabAdd(); }} }
+          >
+            <i class="base-icon-plus"></i>
+          </span>
+        )
+        : null;
+
+      const navData = {
+        props: {
+          currentName,
+          onTabClick: handleTabClick,
+          onTabRemove: handleTabRemove,
+          editable,
+          type,
+          panes,
+          stretch
+        },
+        ref: 'nav'
+      };
+      const header = (
+        <div class={['base-tabs__header', `is-${tabPosition}`]}>
+          {newButton}
+          <tab-nav { ...navData }></tab-nav>
+        </div>
+      );
+      const panels = (
+        <div class="base-tabs__content">
+          {this.$slots.default}
+        </div>
+      );
+
+      return (
+        <div class={{
+          'base-tabs': true,
+          'base-tabs--card': type === 'card',
+          [`base-tabs--${tabPosition}`]: true,
+          'base-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/src/components/base/ui/tag/Tag.vue

@@ -0,0 +1,60 @@
+<script lang="jsx"  type="text/jsx">
+  export default {
+    name: 'BaseTag',
+    props: {
+      text: String,
+      closable: Boolean,
+      type: String,
+      hit: Boolean,
+      disableTransitions: Boolean,
+      color: String,
+      size: String,
+      round: Boolean,
+      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, round } = this
+      const classes = [
+        'base-tag',
+        type ? `base-tag--${type}` : '',
+        tagSize ? `base-tag--${tagSize}` : '',
+        effect ? `base-tag--${effect}` : '',
+        hit && 'is-hit',
+        round && 'is-round',
+      ]
+      const tagBase = (
+        <span
+          class={ classes }
+          style={{ backgroundColor: this.color }}
+          on-click={ this.handleClick }>
+          { this.$slots.default }
+          {
+            this.closable && <i class="base-tag__close base-icon-close" on-click={ this.handleClose }></i>
+          }
+        </span>
+      )
+
+      return this.disableTransitions ? tagBase : <transition name="base-zoom-in-center">{ tagBase }</transition>
+    }
+  }
+</script>

package/src/components/base/ui/tooltip/tooltip.jsx

@@ -0,0 +1,234 @@
+import Popper from '../util/vue-popper'
+import debounce from '../util/debounce'
+import { addClass, removeClass, on, off } from '../util/dom'
+import { generateId } from '../util/index'
+import Vue from 'vue'
+
+export default {
+  name: 'BaseTooltip',
+  mixins: [Popper],
+  props: {
+    openDelay: {
+      type: Number,
+      default: 0
+    },
+    disabled: Boolean,
+    manual: Boolean,
+    effect: {
+      type: String,
+      default: 'dark'
+    },
+    arrowOffset: {
+      type: Number,
+      default: 0
+    },
+    popperClass: String,
+    content: String,
+    visibleArrow: {
+      default: false
+    },
+    transition: {
+      type: String,
+      default: 'base-tooltip'
+    },
+    popperOptions: {
+      default() {
+        return {
+          boundariesPadding: 10,
+          gpuAcceleration: false
+        }
+      }
+    },
+    enterable: {
+      type: Boolean,
+      default: true
+    },
+    hideAfter: {
+      type: Number,
+      default: 0
+    },
+    tabindex: {
+      type: Number,
+      default: 0
+    }
+  },
+  data() {
+    return {
+      tooltipId: `base-tooltip-${generateId()}`,
+      timeoutPending: null,
+      focusing: false
+    }
+  },
+  beforeCreate() {
+    if (this.$isServer) return
+
+    this.popperVM = new Vue({
+      data: { node: '' },
+      render(h) {
+        return this.node
+      }
+    }).$mount()
+
+    this.debounceClose = debounce(200, () => this.handleClosePopper())
+  },
+  render(h) {
+    if (this.popperVM) {
+      this.popperVM.node = (
+        <transition
+          name={ this.transition }
+          onAfterLeave={ this.doDestroy }>
+          <div
+            onMouseleave={ () => { this.setExpectedState(false); this.debounceClose() } }
+            onMouseenter= { () => { this.setExpectedState(true) } }
+            ref="popper"
+            role="tooltip"
+            id={this.tooltipId}
+            aria-hidden={ (this.disabled || !this.showPopper) ? 'true' : 'false' }
+            v-show={!this.disabled && this.showPopper}
+            class={
+              ['base-tooltip__popper', 'is-' + this.effect, this.popperClass]
+            }>
+            { this.$slots.content || this.content }
+          </div>
+        </transition>)
+    }
+
+    const firstElement = this.getFirstElement()
+    if (!firstElement) return null
+
+    const data = firstElement.data = firstElement.data || {}
+    data.staticClass = this.addTooltipClass(data.staticClass)
+
+    return firstElement
+  },
+  mounted() {
+    this.referenceElm = this.$el
+    if (this.$el.nodeType === 1) {
+      this.$el.setAttribute('aria-describedby', this.tooltipId)
+      this.$el.setAttribute('tabindex', this.tabindex)
+      on(this.referenceElm, 'mouseenter', this.show)
+      on(this.referenceElm, 'mouseleave', this.hide)
+      on(this.referenceElm, 'focus', () => {
+        if (!this.$slots.default || !this.$slots.default.length) {
+          this.handleFocus()
+          return
+        }
+        const instance = this.$slots.default[0].componentInstance
+        if (instance && instance.focus) {
+          instance.focus()
+        } else {
+          this.handleFocus()
+        }
+      })
+      on(this.referenceElm, 'blur', this.handleBlur)
+      on(this.referenceElm, 'click', this.removeFocusing)
+    }
+
+    if (this.value && this.popperVM) {
+      this.popperVM.$nextTick(() => {
+        if (this.value) {
+          this.updatePopper()
+        }
+      })
+    }
+  },
+  watch: {
+    focusing(val) {
+      if (val) {
+        addClass(this.referenceElm, 'focusing')
+      } else {
+        removeClass(this.referenceElm, 'focusing')
+      }
+    }
+  },
+  methods: {
+    show() {
+      this.setExpectedState(true)
+      this.handleShowPopper()
+    },
+
+    hide() {
+      this.setExpectedState(false)
+      this.debounceClose()
+    },
+    handleFocus() {
+      this.focusing = true
+      this.show()
+    },
+    handleBlur() {
+      this.focusing = false
+      this.hide()
+    },
+    removeFocusing() {
+      this.focusing = false
+    },
+
+    addTooltipClass(prev) {
+      if (!prev) {
+        return 'base-tooltip'
+      } else {
+        return 'base-tooltip ' + prev.replace('base-tooltip', '')
+      }
+    },
+
+    handleShowPopper() {
+      if (!this.expectedState || this.manual) return
+      clearTimeout(this.timeout)
+      this.timeout = setTimeout(() => {
+        this.showPopper = true
+      }, this.openDelay)
+
+      if (this.hideAfter > 0) {
+        this.timeoutPending = setTimeout(() => {
+          this.showPopper = false
+        }, this.hideAfter)
+      }
+    },
+
+    handleClosePopper() {
+      if (this.enterable && this.expectedState || this.manual) return
+      clearTimeout(this.timeout)
+
+      if (this.timeoutPending) {
+        clearTimeout(this.timeoutPending)
+      }
+      this.showPopper = false
+
+      if (this.disabled) {
+        this.doDestroy()
+      }
+    },
+
+    setExpectedState(expectedState) {
+      if (expectedState === false) {
+        clearTimeout(this.timeoutPending)
+      }
+      this.expectedState = expectedState
+    },
+
+    getFirstElement() {
+      const slots = this.$slots.default
+      if (!Array.isArray(slots)) return null
+      let element = null
+      for (let index = 0; index < slots.length; index++) {
+        if (slots[index] && slots[index].tag) {
+          element = slots[index]
+        }
+      }
+      return element
+    }
+  },
+  beforeDestroy() {
+    this.popperVM && this.popperVM.$destroy()
+  },
+  destroyed() {
+    const reference = this.referenceElm
+    if (reference.nodeType === 1) {
+      off(reference, 'mouseenter', this.show)
+      off(reference, 'mouseleave', this.hide)
+      off(reference, 'focus', this.handleFocus)
+      off(reference, 'blur', this.handleBlur)
+      off(reference, 'click', this.removeFocusing)
+    }
+  }
+}