@aochuang/common 1.0.0 → 1.0.1

package/components/dialog/dialog.vue

@@ -0,0 +1,182 @@
+<template>
+  <el-dialog
+    class="ui-dialog"
+    :class="['ui-dialog--' + size, {'is-closeable': closeable, 'is-hide-header': hideHeader}]"
+    top="2vh"
+    :append-to-body="true"
+    :visible.sync="dialogVisible"
+    :title="title"
+    :width="width"
+    :close-on-press-escape="closeable"
+    @close="handleClose"
+    @open="handleOpen"
+    @opened="handleOpended"
+    @closed="handleClosed"
+    :close-on-click-modal="closeOnClickModal"
+  >
+    <slot slot="title" name="title">
+      <span class="el-dialog__title">{{ title }}</span>
+    </slot>
+    <slot v-if="showContent"></slot>
+  </el-dialog>
+</template>
+<script>
+import ElDialog from 'element-ui/lib/dialog'
+import 'element-ui/lib/theme-chalk/dialog.css'
+import { getDialogOpenCallback, getDialogCloseCallback } from './utils'
+
+export default {
+  name: 'UiDialog',
+  components: {
+    ElDialog
+  },
+  provide () {
+    return {
+      UiDialog: this
+    }
+  },
+  model: {
+    prop: 'visible',
+    event: 'input'
+  },
+  props: {
+    width: {
+      type: String
+    },
+    title: {
+      type: String
+    },
+    size: {
+      type: String,
+      default: 'small',
+      validator: (value) => {
+        return ['large', 'medium', 'small', 'mini', 'auto'].indexOf(value) >= 0
+      }
+    },
+    hideHeader: {
+      type: Boolean,
+      default: false
+    },
+    visible: {
+      type: Boolean,
+      default: false
+    },
+    closeable: {
+      type: Boolean,
+      default: true
+    },
+    closeOnClickModal: {
+      type: Boolean,
+      default: false
+    }
+  },
+  data () {
+    return {
+      showContent: this.visible
+    }
+  },
+  computed: {
+    dialogVisible: {
+      get () {
+        return this.visible
+      },
+      set (val) {
+        this.$emit('input', val)
+      }
+    }
+  },
+  methods: {
+    handleOpen () {
+      this.$emit('open')
+      this.showContent = true
+      const openCallback = getDialogOpenCallback()
+      if (openCallback) {
+        openCallback()
+      }
+    },
+    handleOpended () {
+      this.$emit('opened')
+    },
+    handleClose () {
+      this.$emit('close')
+    },
+    handleClosed () {
+      const closeCallback = getDialogCloseCallback()
+      if (closeCallback) {
+        closeCallback()
+      }
+      this.showContent = false
+      this.$emit('closed')
+    },
+    close () {
+      this.dialogVisible = false
+    }
+  }
+}
+</script>
+<style lang="less">
+.ui-dialog{
+  &:not(.is-closeable) {
+    .el-dialog__header{
+      .el-dialog__headerbtn{
+        display: none;
+      }
+    }
+  }
+  .el-dialog__header{
+    border-bottom: 1px solid #eee;
+    padding: 15px 22px;
+    background-color: #F9FAFB;
+    border-top-left-radius: 3px;
+    border-top-right-radius: 3px;
+  }
+  .el-dialog__body{
+    color: #404040;
+    padding: 0;
+    height: min-content;
+  }
+  .el-dialog__headerbtn{
+    top: 18px;
+  }
+  &.is-hide-header {
+    .el-dialog__header{
+      padding: 0;
+      border-bottom: 0;
+    }
+    .el-dialog__title{
+      display: none;
+    }
+    .el-dialog__headerbtn{
+      z-index: 10;
+    }
+  }
+}
+.ui-dialog--small{
+  .el-dialog{
+    width: 600px;
+  }
+}
+.ui-dialog--mini{
+  .el-dialog{
+    width: 420px;
+  }
+}
+.ui-dialog--medium{
+  .el-dialog{
+    width: 800px;
+  }
+}
+.ui-dialog--large{
+  .el-dialog{
+    width: 1100px;
+  }
+}
+.ui-dialog--auto{
+  text-align: center;
+  .el-dialog{
+    text-align: left;
+    width: auto;
+    display: inline-block;
+  }
+}
+</style>

package/components/dialog/index.js

@@ -0,0 +1,14 @@
+import Dialog from './dialog.vue'
+import { setDialogOpenCallback, setDialogCloseCallback } from './utils'
+
+Dialog.install = (Vue, options) => {
+  Vue.component(Dialog.name, Dialog)
+  if (options && options.onOpenDialog) {
+    setDialogOpenCallback(options.onOpenDialog)
+  }
+  if (options && options.onCloseDialog) {
+    setDialogCloseCallback(options.onCloseDialog)
+  }
+}
+
+export default Dialog

package/components/dialog/utils.js

@@ -0,0 +1,20 @@
+const DialogCallbacks = {
+  dialogOpenCallback: null,
+  dialogCloseCallback: null
+}
+
+export function setDialogOpenCallback (fn) {
+  DialogCallbacks.dialogOpenCallback = fn
+}
+
+export function getDialogOpenCallback () {
+  return DialogCallbacks.dialogOpenCallback
+}
+
+export function setDialogCloseCallback (fn) {
+  DialogCallbacks.dialogCloseCallback = fn
+}
+
+export function getDialogCloseCallback () {
+  return DialogCallbacks.dialogCloseCallback
+}

package/components/drawer/drawer.vue

@@ -0,0 +1,186 @@
+<template>
+  <el-drawer
+    class="ui-drawer"
+    :class="[{'has-modal': innerModal}]"
+    :visible.sync="visible"
+    :with-header="false"
+    :size="width"
+    :modal="innerModal"
+    :wrapper-closable="modalClosable"
+    :append-to-body="true"
+    @open="handleDrawerOpen"
+    @close="handleDrawerClose"
+  >
+    <div class="ui-drawer__close" @click="handleCloseClick">
+      <i class="wk wk-d-arrow-right"></i>
+    </div>
+    <slot v-if="visible"></slot>
+  </el-drawer>
+</template>
+<script>
+import ElDrawer from 'element-ui/lib/drawer'
+import 'element-ui/lib/theme-chalk/drawer.css'
+import { getDrawerOpenCallback, getDrawerCloseCallback, selfAddDrawerNumber, selfSubDrawerNumber, getDrawerNumber } from './utils'
+
+export default {
+  name: 'UiDrawer',
+  provide () {
+    return {
+      UiDrawer: this
+    }
+  },
+  components: {
+    ElDrawer
+  },
+  props: {
+    size: {
+      type: String,
+      default: 'mini',
+      validator (value) {
+        return ['mini', 'small', 'medium', 'large', 'maxlarge'].includes(value)
+      }
+    },
+    modal: {
+      type: [String, Boolean],
+      default: true,
+      validator (value) {
+        return [true, false, 'auto'].includes(value)
+      }
+    },
+    modalClosable: {
+      type: Boolean,
+      default: false
+    },
+    value: {
+      type: Boolean
+    }
+  },
+  data () {
+    return {
+      autoModal: false
+    }
+  },
+  computed: {
+    innerModal () {
+      if (this.modal === 'auto') {
+        return this.autoModal
+      } else {
+        return !!this.modal
+      }
+    },
+    visible: {
+      get () {
+        return this.value
+      },
+      set (val) {
+        this.$emit('input', val)
+      }
+    },
+    width () {
+      const map = {
+        mini: '540px',
+        small: '720px',
+        medium: '800px',
+        large: '980px',
+        maxlarge: '1200px'
+      }
+      return map[this.size]
+    }
+  },
+  mounted () {
+    const $app = window.document.getElementById('app')
+    if ($app) {
+      $app.addEventListener('click', this.handleDocumentClick)
+    }
+  },
+  methods: {
+    handleDocumentClick () {
+      if (!this.innerModal) {
+        this.close()
+      }
+    },
+    handleCloseClick () {
+      this.$emit('input', false)
+    },
+    handleDrawerOpen () {
+      const openCallback = getDrawerOpenCallback()
+      if (openCallback) {
+        openCallback()
+      }
+      selfAddDrawerNumber()
+      if (getDrawerNumber() === 1) {
+        this.autoModal = false
+      } else {
+        this.autoModal = true
+      }
+      this.$emit('open')
+    },
+    handleDrawerClose () {
+      const closeCallback = getDrawerCloseCallback()
+      if (closeCallback) {
+        closeCallback()
+      }
+      this.$emit('close')
+      selfSubDrawerNumber()
+    },
+    close () {
+      this.visible = false
+    }
+  }
+}
+</script>
+<style lang="scss">
+body {
+  .el-drawer{
+    outline: 0;
+    overflow: initial;
+  }
+  .el-drawer__body{
+    min-height: 0;
+  }
+  .el-drawer__wrapper {
+    outline: 0;
+    &:not(.has-modal) {
+      pointer-events: none;
+      > .el-drawer__container{
+        > .el-drawer{
+          pointer-events: initial;
+        }
+      }
+    }
+  }
+  .el-drawer__header {
+    > span{
+      outline: 0;
+    }
+  }
+  .ui-drawer__close{
+    position: absolute;
+    left: -38px;
+    top: 108px;
+    width: 26px;
+    height: 26px;
+    line-height: 26px;
+    padding: 6px;
+    text-align: center;
+    cursor: pointer;
+    transition: all .3s;
+    background-color: var(--el-button-primary);
+    border-color: var(--el-button-primary);
+    border-top-left-radius: 4px;
+    border-bottom-left-radius: 4px;
+    border-top-right-radius: 0;
+    border-bottom-right-radius: 0;
+    color: #fff;
+    box-sizing: content-box;
+    i {
+      font-size: 26px;
+    }
+    &:hover {
+      background: var(--el-button-primary-light-3);
+      border-color: var(--el-button-primary-light-3);
+      color: #FFF;
+    }
+  }
+}
+</style>

package/components/drawer/index.js

@@ -0,0 +1,14 @@
+import UiDrawer from './drawer'
+import { setDrawerOpenCallback, setDrawerCloseCallback } from './utils'
+
+UiDrawer.install = (Vue, options = {}) => {
+  Vue.component(UiDrawer.name, UiDrawer)
+  if (options && options.onOpenDrawer) {
+    setDrawerOpenCallback(options.onOpenDrawer)
+  }
+  if (options && options.onCloseDrawer) {
+    setDrawerCloseCallback(options.onCloseDrawer)
+  }
+}
+
+export default UiDrawer

package/components/drawer/utils.js

@@ -0,0 +1,36 @@
+const DrawerCallbacks = {
+  drawerOpenCallback: null,
+  drawerCloseCallback: null
+}
+
+const drawerNumberInfo = {
+  value: 0
+}
+
+export function setDrawerOpenCallback (fn) {
+  DrawerCallbacks.drawerOpenCallback = fn
+}
+
+export function getDrawerOpenCallback () {
+  return DrawerCallbacks.drawerOpenCallback
+}
+
+export function setDrawerCloseCallback (fn) {
+  DrawerCallbacks.drawerCloseCallback = fn
+}
+
+export function getDrawerCloseCallback () {
+  return DrawerCallbacks.drawerCloseCallback
+}
+
+export function selfAddDrawerNumber () {
+  drawerNumberInfo.value = drawerNumberInfo.value + 1
+}
+
+export function selfSubDrawerNumber () {
+  drawerNumberInfo.value = drawerNumberInfo.value - 1
+}
+
+export function getDrawerNumber () {
+  return drawerNumberInfo.value
+}

package/components/dropdown/dropdown-item.vue

@@ -0,0 +1,63 @@
+<script>
+import { unique } from '../../utils/util'
+
+export default {
+  name: 'UiDropdownItem',
+  inject: ['UiDropdown'],
+  props: {
+    label: {
+      type: String
+    },
+    value: {
+      type: String
+    },
+    icon: {
+      type: String
+    },
+    divided: {
+      type: Boolean
+    },
+    type: {
+      type: String
+    },
+    disabled: {
+      type: Boolean
+    }
+  },
+  computed: {
+    props () {
+      return {
+        label: this.label,
+        type: this.type,
+        icon: this.icon,
+        divided: this.divided,
+        disabled: this.disabled
+      }
+    }
+  },
+  watch: {
+    props () {
+      this.UiDropdown.updateOptionProps(this.id, this.props)
+    }
+  },
+  created () {
+    this.id = unique()
+    this.UiDropdown.addOption({
+      id: this.id,
+      props: this.props,
+      click: (evt) => {
+        this.$emit('click', evt)
+      },
+      render: () => {
+        return this.$slot.default ? this.$slot.default() : null
+      }
+    })
+  },
+  render () {
+    return null
+  },
+  beforeDestroy () {
+    this.UiDropdown.removeOption(this.id)
+  }
+}
+</script>