@zkwq/business 0.0.1

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

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

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

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

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