@zkwq/business 0.0.4 → 0.0.6

package/src/components/base/ui/drawer/Drawer.vue

@@ -1,202 +0,0 @@
-<template>
-  <transition
-    name="base-drawer-fade"
-    @after-enter="afterEnter"
-    @after-leave="afterLeave">
-      <div
-      class="base-drawer__wrapper"
-      tabindex="-1"
-      v-show="visible">
-        <div
-          class="base-drawer__container"
-          :class="visible && 'base-drawer__open'"
-          @click.self="handleWrapperClick"
-          role="document"
-          tabindex="-1">
-            <div
-              aria-modal="true"
-              aria-labelledby="base-drawer__title"
-              :aria-label="title"
-              class="base-drawer"
-              :class="[direction, customClass]"
-              :style="isHorizontal ? `width: ${size}` : `height: ${size}`"
-              ref="drawer"
-              role="dialog"
-              tabindex="-1"
-            >
-              <header class="base-drawer__header" id="base-drawer__title" v-if="withHeader">
-                <slot name="title">
-                  <span role="heading" tabindex="0">{{ title }}</span>
-                </slot>
-                <slot name="actions"></slot>
-                <button
-                  :aria-label="`close ${title || 'drawer'}`"
-                  class="base-drawer__close-btn"
-                  type="button"
-                  v-if="showClose"
-                  @click="closeDrawer">
-                  <i class="base-dialog__close base-icon base-icon-close"></i>
-                </button>
-              </header>
-              <base-scrollbar class="App__scroll">
-                  <section class="base-drawer__body" v-if="rendered">
-                    <slot></slot>
-                  </section>
-                </base-scrollbar>
-            </div>
-        </div>
-     </div>
-  </transition>
-</template>
-
-<script>
-import Popup from '../util/popup'
-import emitter from '../mixin/emitter'
-import Utils from '../util/aria-utils'
-import BaseScrollbar from '../scrollbar'
-export default {
-  name: 'BaseDrawer',
-  components: {BaseScrollbar},
-  mixins: [Popup, emitter],
-  props: {
-    appendToBody: {
-      type: Boolean,
-      default: false
-    },
-    beforeClose: {
-      type: Function
-    },
-    customClass: {
-      type: String,
-      default: ''
-    },
-    closeOnPressEscape: {
-      type: Boolean,
-      default: true
-    },
-    destroyOnClose: {
-      type: Boolean,
-      default: false
-    },
-    modal: {
-      type: Boolean,
-      default: true
-    },
-    direction: {
-      type: String,
-      default: 'rtl',
-      validator(val) {
-        return ['ltr', 'rtl', 'ttb', 'btt'].indexOf(val) !== -1
-      }
-    },
-    modalAppendToBody: {
-      type: Boolean,
-      default: true
-    },
-    showClose: {
-      type: Boolean,
-      default: true
-    },
-    size: {
-      type: String,
-      default: '30%'
-    },
-    title: {
-      type: String,
-      default: ''
-    },
-    visible: {
-      type: Boolean
-    },
-    wrapperClosable: {
-      type: Boolean,
-      default: true
-    },
-    withHeader: {
-      type: Boolean,
-      default: true
-    }
-  },
-  computed: {
-    isHorizontal () {
-      return this.direction === 'rtl' || this.direction === 'ltr'
-    }
-  },
-  data () {
-    return {
-      closed: false,
-      prevActiveElement: null
-    }
-  },
-  watch: {
-    visible (val) {
-      if (val) {
-        this.closed = false
-        this.$emit('open')
-        if (this.appendToBody) {
-          document.body.appendChild(this.$el)
-        }
-        this.prevActiveElement = document.activeElement
-        this.$nextTick(() => {
-          Utils.focusFirstDescendant(this.$refs.drawer)
-        })
-      } else {
-        if (!this.closed) this.$emit('close')
-        this.$nextTick(() => {
-          if (this.prevActiveElement) {
-            this.prevActiveElement.focus()
-          }
-        })
-      }
-    }
-  },
-  methods: {
-    afterEnter () {
-      this.$emit('opened')
-    },
-    afterLeave () {
-      this.$emit('closed')
-    },
-    hide (cancel) {
-      if (cancel !== false) {
-        this.$emit('update:visible', false)
-        this.$emit('close')
-        if (this.destroyOnClose === true) {
-          this.rendered = false
-        }
-        this.closed = true
-      }
-    },
-    handleWrapperClick () {
-      if (this.wrapperClosable) {
-        this.closeDrawer()
-      }
-    },
-    closeDrawer () {
-      if (typeof this.beforeClose === 'function') {
-        this.beforeClose(this.hide)
-      } else {
-        this.hide()
-      }
-    },
-    handleClose () {
-      // This method here will be called by PopupManger, when the `closeOnPressEscape` was set to true
-      // pressing `ESC` will call this method, and also close the drawer.
-      // This method also calls `beforeClose` if there was one.
-      this.closeDrawer()
-    }
-  },
-  mounted () {
-    if (this.visible) {
-      this.rendered = true
-      this.open()
-    }
-  },
-  destroyed () {
-    // if appendToBody is true, remove DOM node after destroy
-    if (this.appendToBody && this.$el && this.$el.parentNode) {
-      this.$el.parentNode.removeChild(this.$el)
-    }
-  }
-}
-</script>

package/src/components/base/ui/dropdown/dropdown-item.vue

@@ -1,39 +0,0 @@
-<template>
-  <li
-    class="base-dropdown-menu__item"
-    :class="{
-      'is-disabled': disabled,
-      'base-dropdown-menu__item--divided': divided
-    }"
-    @click="handleClick"
-    :aria-disabled="disabled"
-    :tabindex="disabled ? null : -1"
-    v-ripple
-  >
-    <i :class="icon" v-if="icon"></i>
-    <slot></slot>
-  </li>
-</template>
-<script>
-import Emitter from '../mixin/emitter'
-import Ripple from '../directive/ripple'
-export default {
-  name: 'BaseDropdownItem',
-  mixins: [Emitter],
-  directives: {
-    Ripple
-  },
-  props: {
-  command: {},
-  disabled: Boolean,
-  divided: Boolean,
-  icon: String
-},
-
-  methods: {
-  handleClick(e) {
-    this.dispatch('BaseDropdown', 'menu-item-click', [this.command, this])
-  }
-}
-}
-</script>

package/src/components/base/ui/dropdown/dropdown-menu.vue

@@ -1,63 +0,0 @@
-<template>
-  <transition name="base-slide-y" @after-leave="doDestroy">
-    <ul class="base-dropdown-menu base-popper" :class="[size && `base-dropdown-menu--${size}`]" v-show="showPopper">
-      <slot></slot>
-    </ul>
-  </transition>
-</template>
-<script>
-  import Popper from '../util/vue-popper'
-
-  export default {
-    name: 'BaseDropdownMenu',
-
-    componentName: 'BaseDropdownMenu',
-
-    mixins: [Popper],
-
-    props: {
-      visibleArrow: {
-        type: Boolean,
-        default: true
-      },
-      arrowOffset: {
-        type: Number,
-        default: 0
-      }
-    },
-
-    data() {
-      return {
-        size: this.dropdown.dropdownSize
-      }
-    },
-
-    inject: ['dropdown'],
-
-    created() {
-      this.$on('updatePopper', () => {
-        if (this.showPopper) this.updatePopper()
-      })
-      this.$on('visible', val => {
-        this.showPopper = val
-      })
-    },
-
-    mounted() {
-      this.dropdown.popperElm = this.popperElm = this.$el
-      this.referenceElm = this.dropdown.$el
-      // compatible with 2.6 new v-slot syntax
-      // issue link https://github.com/ElemeFE/element/issues/14345
-      this.dropdown.initDomOperation()
-    },
-
-    watch: {
-      'dropdown.placement': {
-        immediate: true,
-        handler(val) {
-          this.currentPlacement = val
-        }
-      }
-    }
-  }
-</script>

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

@@ -1,308 +0,0 @@
-<script lang="jsx"  type="text/jsx">
-import Clickoutside from '../util/clickoutside'
-import Emitter from '../mixin/emitter'
-import Migrating from '../mixin/migrating'
-import BaseButton from '../button/Button'
-import BaseButtonGroup from '../button/ButtonGroup'
-import { generateId } from '../util'
-
-export default {
-  name: 'BaseDropdown',
-
-  componentName: 'BaseDropdown',
-
-  mixins: [Emitter, Migrating],
-
-  directives: { Clickoutside },
-
-  components: {
-    BaseButton,
-    BaseButtonGroup
-  },
-
-  provide() {
-    return {
-      dropdown: this
-    }
-  },
-
-  props: {
-    trigger: {
-      type: String,
-      default: 'hover'
-    },
-    type: String,
-    size: {
-      type: String,
-      default: ''
-    },
-    splitButton: Boolean,
-    hideOnClick: {
-      type: Boolean,
-      default: true
-    },
-    placement: {
-      type: String,
-      default: 'bottom-end'
-    },
-    visibleArrow: {
-      default: true
-    },
-    showTimeout: {
-      type: Number,
-      default: 150
-    },
-    hideTimeout: {
-      type: Number,
-      default: 150
-    },
-    tabindex: {
-      type: Number,
-      default: 0
-    }
-  },
-
-  data() {
-    return {
-      timeout: null,
-      visible: false,
-      triggerElm: null,
-      menuItems: null,
-      menuItemsArray: null,
-      dropdownElm: null,
-      focusing: false,
-      listId: `dropdown-menu-${generateId()}`
-    }
-  },
-
-  computed: {
-    dropdownSize() {
-      return this.size || (this.$ELEMENT || {}).size
-    }
-  },
-
-  mounted() {
-    this.$on('menu-item-click', this.handleMenuItemClick)
-  },
-
-  watch: {
-    visible (val) {
-      this.broadcast('BaseDropdownMenu', 'visible', val)
-      this.$emit('visible-change', val)
-    },
-    focusing (val) {
-      const selfDefine = this.$el.querySelector('.base-dropdown-selfdefine')
-      if (selfDefine) { // 自定义
-        if (val) {
-          selfDefine.className += ' focusing'
-        } else {
-          selfDefine.className = selfDefine.className.replace('focusing', '')
-        }
-      }
-    }
-  },
-
-  methods: {
-    getMigratingConfig() {
-      return {
-        props: {
-          'menu-align': 'menu-align is renamed to placement.'
-        }
-      }
-    },
-    show() {
-      if (this.triggerElm.disabled) return
-      clearTimeout(this.timeout)
-      this.timeout = setTimeout(() => {
-        this.visible = true
-      }, this.trigger === 'click' ? 0 : this.showTimeout)
-    },
-    hide() {
-      if (this.triggerElm.disabled) return
-      this.removeTabindex()
-      if (this.tabindex >= 0) {
-        this.resetTabindex(this.triggerElm)
-      }
-      clearTimeout(this.timeout)
-      this.timeout = setTimeout(() => {
-        this.visible = false
-      }, this.trigger === 'click' ? 0 : this.hideTimeout)
-    },
-    handleClick() {
-      if (this.triggerElm.disabled) return
-      if (this.visible) {
-        this.hide()
-      } else {
-        this.show()
-      }
-    },
-    handleTriggerKeyDown(ev) {
-      const keyCode = ev.keyCode
-      if ([38, 40].indexOf(keyCode) > -1) { // up/down
-        this.removeTabindex()
-        this.resetTabindex(this.menuItems[0])
-        this.menuItems[0].focus()
-        ev.preventDefault()
-        ev.stopPropagation()
-      } else if (keyCode === 13) { // space enter选中
-        this.handleClick()
-      } else if ([9, 27].indexOf(keyCode) > -1) { // tab || esc
-        this.hide()
-      }
-    },
-    handleItemKeyDown(ev) {
-      const keyCode = ev.keyCode
-      const target = ev.target
-      const currentIndex = this.menuItemsArray.indexOf(target)
-      const max = this.menuItemsArray.length - 1
-      let nextIndex
-      if ([38, 40].indexOf(keyCode) > -1) { // up/down
-        if (keyCode === 38) { // up
-          nextIndex = currentIndex !== 0 ? currentIndex - 1 : 0
-        } else { // down
-          nextIndex = currentIndex < max ? currentIndex + 1 : max
-        }
-        this.removeTabindex()
-        this.resetTabindex(this.menuItems[nextIndex])
-        this.menuItems[nextIndex].focus()
-        ev.preventDefault()
-        ev.stopPropagation()
-      } else if (keyCode === 13) { // enter选中
-        this.triggerElmFocus()
-        target.click()
-        if (this.hideOnClick) { // click关闭
-          this.visible = false
-        }
-      } else if ([9, 27].indexOf(keyCode) > -1) { // tab // esc
-        this.hide()
-        this.triggerElmFocus()
-      }
-    },
-    resetTabindex(ele) { // 下次tab时组件聚焦元素
-      this.removeTabindex()
-      ele.setAttribute('tabindex', '0') // 下次期望的聚焦元素
-    },
-    removeTabindex() {
-      this.triggerElm.setAttribute('tabindex', '-1')
-      this.menuItemsArray.forEach((item) => {
-        item.setAttribute('tabindex', '-1')
-      })
-    },
-    initAria() {
-      this.dropdownElm.setAttribute('id', this.listId)
-      this.triggerElm.setAttribute('aria-haspopup', 'list')
-      this.triggerElm.setAttribute('aria-controls', this.listId)
-
-      if (!this.splitButton) { // 自定义
-        this.triggerElm.setAttribute('role', 'button')
-        this.triggerElm.setAttribute('tabindex', this.tabindex)
-        this.triggerElm.setAttribute('class', (this.triggerElm.getAttribute('class') || '') + ' base-dropdown-selfdefine') // 控制
-      }
-    },
-    initEvent() {
-      let { trigger, show, hide, handleClick, splitButton, handleTriggerKeyDown, handleItemKeyDown } = this
-      this.triggerElm = splitButton
-        ? this.$refs.trigger.$el
-        : this.$slots.default[0].elm
-
-      let dropdownElm = this.dropdownElm
-
-      this.triggerElm.addEventListener('keydown', handleTriggerKeyDown) // triggerElm keydown
-      dropdownElm.addEventListener('keydown', handleItemKeyDown, true) // item keydown
-      // 控制自定义元素的样式
-      if (!splitButton) {
-        this.triggerElm.addEventListener('focus', () => {
-          this.focusing = true
-        })
-        this.triggerElm.addEventListener('blur', () => {
-          this.focusing = false
-        })
-        this.triggerElm.addEventListener('click', () => {
-          this.focusing = false
-        })
-      }
-      if (trigger === 'hover') {
-        this.triggerElm.addEventListener('mouseenter', show)
-        this.triggerElm.addEventListener('mouseleave', hide)
-        dropdownElm.addEventListener('mouseenter', show)
-        dropdownElm.addEventListener('mouseleave', hide)
-      } else if (trigger === 'click') {
-        this.triggerElm.addEventListener('click', handleClick)
-      }
-    },
-    removeEvent() {
-      let { trigger, show, hide, handleClick, splitButton, handleTriggerKeyDown, handleItemKeyDown } = this
-      this.triggerElm = splitButton
-        ? this.$refs.trigger.$el
-        : this.$slots.default[0].elm
-      let dropdownElm = this.dropdownElm
-      this.triggerElm.removeEventListener('keydown', handleTriggerKeyDown) // triggerElm keydown
-      dropdownElm.removeEventListener('keydown', handleItemKeyDown, true) // item keydown
-      // 控制自定义元素的样式
-      if (!splitButton) {
-        this.triggerElm.removeEventListener('focus', () => {
-          this.focusing = true
-        })
-        this.triggerElm.removeEventListener('blur', () => {
-          this.focusing = false
-        })
-        this.triggerElm.removeEventListener('click', () => {
-          this.focusing = false
-        })
-      }
-      if (trigger === 'hover') {
-        this.triggerElm.removeEventListener('mouseenter', show)
-        this.triggerElm.removeEventListener('mouseleave', hide)
-        dropdownElm.removeEventListener('mouseenter', show)
-        dropdownElm.removeEventListener('mouseleave', hide)
-      } else if (trigger === 'click') {
-        this.triggerElm.removeEventListener('click', handleClick)
-      }
-    },
-    handleMenuItemClick(command, instance) {
-      if (this.hideOnClick) {
-        this.visible = false
-      }
-      this.$emit('command', command, instance)
-    },
-    triggerElmFocus() {
-      this.triggerElm.focus && this.triggerElm.focus()
-    },
-    initDomOperation() {
-      this.dropdownElm = this.popperElm
-      this.menuItems = this.dropdownElm.querySelectorAll("[tabindex='-1']")
-      this.menuItemsArray = [].slice.call(this.menuItems)
-
-      this.initEvent()
-      this.initAria()
-    }
-  },
-
-  render(h) {
-    let { hide, splitButton, type, dropdownSize } = this
-
-    const handleMainButtonClick = (event) => {
-      this.$emit('click', event)
-      hide()
-    }
-
-    let triggerElm = !splitButton
-      ? this.$slots.default
-      : (<base-button-group>
-        <base-button type={type} size={dropdownSize} nativeOn-click={handleMainButtonClick}>
-          {this.$slots.default}
-        </base-button>
-        <base-button ref="trigger" type={type} size={dropdownSize} class="base-dropdown__caret-button">
-          <i class="base-dropdown__icon base-icon-arrow-down"></i>
-        </base-button>
-      </base-button-group>)
-
-    return (
-      <div class="base-dropdown" v-clickoutside={hide}>
-        {triggerElm}
-        {this.$slots.dropdown}
-      </div>
-    )
-  }
-}
-</script>