@aochuang/common 1.0.0 → 1.0.1

package/components/menu/menu-group.vue

@@ -0,0 +1,240 @@
+<template>
+  <div class="ui-menu-group" :class="{'is-accordion': accordion, 'is-expanded': isExpanded, 'is-enable-indent': enableIndent}">
+    <router-link
+      v-if="isLink"
+      :to="path"
+      class="ui-menu-group__head"
+      @click="handleToggleClick"
+    >
+      <template slot-scope="{isActive, isExactActive, href}">
+        {{handleLinkActive(href, isActive, isExactActive)}}
+        <a :href="href" class="ui-menu-group__head-main" :class="[handleActiveLink(isActive, isExactActive, href) && 'router-link-active']">
+          <div class="ui-menu-group__text">
+            <ui-icon class="ui-menu-group__icon" v-if="icon" :name="icon"></ui-icon>
+            <strong class="ui-menu-group__title" :title="label">{{label}}</strong>
+          </div>
+          <slot name="append"></slot>
+          <span v-if="accordion" class="ui-menu-group__toggle">
+            <ui-icon name="arrow-left" :size="22"></ui-icon>
+          </span>
+        </a>
+      </template>
+    </router-link>
+    <div v-else class="ui-menu-group__head" @click="handleToggleClick">
+      <div class="ui-menu-group__head-main">
+        <div class="ui-menu-group__text">
+          <ui-icon class="ui-menu-group__icon" v-if="icon" :name="icon"></ui-icon>
+          <strong class="ui-menu-group__title" :title="label">{{label}}</strong>
+        </div>
+        <slot name="append"></slot>
+        <span v-if="accordion" class="ui-menu-group__toggle">
+          <ui-icon name="arrow-left" :size="22"></ui-icon>
+        </span>
+      </div>
+    </div>
+    <div class="ui-menu-group__body">
+      <slot></slot>
+    </div>
+  </div>
+</template>
+<script>
+import UiIcon from '../icon'
+
+export default {
+  name: 'UiMenuGroup',
+  inject: ['UiMenu'],
+  provide () {
+    return {
+      UiMenuGroup: this
+    }
+  },
+  components: {
+    UiIcon
+  },
+  props: {
+    label: {
+      type: String
+    },
+    icon: {
+      type: String
+    },
+    path: {
+      type: String
+    },
+    checkActiveMethod: {
+      type: Function
+    }
+  },
+  data () {
+    return {
+      ready: false
+    }
+  },
+  computed: {
+    index () {
+      let index = -1
+      const $vnodes = this.UiMenu.$slots.default || []
+      $vnodes.filter(v => v.componentOptions.tag === 'ui-menu-group').some((v, i) => {
+        if (v === this.$vnode) {
+          index = i
+          return true
+        }
+      })
+      return index
+    },
+    enableIndent () {
+      return this.UiMenu.enableIndent
+    },
+    isExpanded () {
+      if (this.accordion) {
+        return this.UiMenu.innerExpandedGroupIndex === this.index
+      }
+      return true
+    },
+    accordion () {
+      return this.UiMenu.accordion
+    },
+    tag () {
+      if (this.path) {
+        return 'router-link'
+      } else {
+        return 'div'
+      }
+    },
+    isLink () {
+      return !!this.path
+    },
+    activeLink () {
+      return this.UiMenu.activeLink
+    }
+  },
+  mounted () {
+    this.ready = true
+  },
+  methods: {
+    handleToggleClick () {
+      if (this.accordion) {
+        this.UiMenu.setExpandedGroupIndex(this.index)
+      }
+    },
+    handleLinkActive (href, isActive, isExactActive) {
+      if (isExactActive) {
+        this.UiMenu.activeLink = href
+      }
+    },
+    handleActiveLink (isActive, isExactActive, href) {
+      if (!this.ready) {
+        return false
+      }
+      if (this.checkActiveMethod) {
+        const rs = this.checkActiveMethod()
+        if (typeof rs === 'boolean') {
+          return rs
+        }
+      }
+      if (isExactActive) {
+        return true
+      }
+      if (isActive) {
+        if (this.activeLink && this.activeLink !== href) {
+          return false
+        } else {
+          return true
+        }
+      }
+      return false
+    }
+  }
+}
+</script>
+<style lang="less">
+.ui-menu-group__head-main{
+  display: block;
+}
+.ui-menu--static{
+  .ui-menu-group__head-main{
+    padding: 10px 20px;
+    height: 24px;
+    line-height: 24px;
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    justify-content: space-between;
+    position: relative;
+    color: #404040;
+    &:after{
+      content: '';
+      position: absolute;
+      top: 0;
+      bottom: 0;
+      right: 0;
+      transition: all 0.3s;
+      background-color: transparent;
+      width: 2px;
+    }
+    &.router-link-active{
+      background-color: #fcfbfe;
+      &:after{
+        background-color: #00A0EB;
+      }
+    }
+  }
+  .ui-menu-group__title{
+    min-width: 0;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+  }
+  .ui-menu-group__icon{
+    font-weight: normal;
+    color: #888;
+    display: inline-block;
+    vertical-align: top;
+    margin-right: 8px;
+    margin-left: -9px;
+  }
+  .ui-menu-group__body{
+    .ui-menu-item__main{
+      padding-left: 20px;
+      padding-right: 20px;
+    }
+  }
+  .ui-menu-group__toggle{
+    margin-right: -12px;
+    height: 20px;
+    line-height: 20px;
+    display: inline-block;
+    transition: all .3s;
+    transform: rotate(0deg);
+    .ui-icon{
+      color: #888;
+      font-weight: normal;
+    }
+  }
+  .ui-menu-group{
+    &.is-accordion{
+      .ui-menu-group__head-main{
+        cursor: pointer;
+      }
+      .ui-menu-group__body{
+        display: none;
+      }
+      &.is-expanded{
+        .ui-menu-group__toggle{
+          transform: rotate(270deg);
+        }
+        .ui-menu-group__body{
+          display: block;
+        }
+      }
+    }
+    &.is-enable-indent{
+      .ui-menu-group__body{
+        .ui-menu-item__main{
+          padding-left: 34px;
+        }
+      }
+    }
+  }
+}
+</style>

package/components/menu/menu-item.vue

@@ -0,0 +1,215 @@
+<template>
+  <div class="ui-menu-item" :class="className" @click="handleItemClick">
+    <component
+      :is="isLink ? 'router-link' : 'span'"
+      class="ui-menu-item__main"
+      :to="path"
+    >
+      <ui-icon v-if="icon" :name="icon" class="ui-menu-item__icon"></ui-icon>
+      <span v-if="label || $slots.default" class="ui-menu-item__text" :title="label">
+        <slot>{{label}}</slot>
+      </span>
+      <slot name="append"></slot>
+    </component>
+  </div>
+</template>
+<script>
+export default {
+  name: 'UiMenuItem',
+  inject: {
+    UiMenu: 'UiMenu',
+    UiMenuGroup: {
+      default: null
+    }
+  },
+  props: {
+    name: {
+      type: [String, Number]
+    },
+    label: {
+      type: String
+    },
+    icon: {
+      type: String
+    },
+    path: {
+      type: String
+    },
+    type: {
+      type: String,
+      default: 'default',
+      validator (value) {
+        return ['divided', 'default'].indexOf(value) >= 0
+      }
+    }
+  },
+  computed: {
+    router () {
+      return this.UiMenu.router
+    },
+    isActive () {
+      if (!this.name) {
+        return false
+      }
+      return this.UiMenu.current === this.name
+    },
+    isLink () {
+      return !!this.path
+    },
+    className () {
+      const cls = []
+      if (this.type === 'divided') {
+        cls.push('is-devided')
+      }
+      if (this.isActive) {
+        cls.push('is-active')
+      }
+      if (this.router) {
+        cls.push('is-router')
+      }
+      return cls
+    }
+  },
+  methods: {
+    handleItemClick () {
+      this.$emit('click')
+    }
+  }
+}
+</script>
+<style lang="less">
+.ui-menu-item{
+  display: block;
+}
+.ui-menu-item__main,
+.ui-menu-item__wrap{
+  display: block;
+}
+.ui-menu--float{
+  .ui-menu-item__main{
+    display: block;
+    line-height: 24px;
+    padding: 6px 12px;
+    cursor: pointer;
+    transition: all .3s;
+    &:hover{
+      background-color: #f0f8fc;
+      color: #00A0EB;
+    }
+  }
+  .ui-menu-item__icon{
+    display: inline-block;
+    vertical-align: top;
+    margin-right: 4px;
+  }
+  .ui-menu-item{
+    &.is-devided{
+      padding: 0;
+      height: 1px;
+      background: #eee;
+      margin: 6px 0;
+      .ui-menu-item__main{
+        display: none;
+      }
+    }
+  }
+}
+.ui-menu--static{
+  .ui-menu-item {
+    &.is-router .router-link-active, &.is-active .ui-menu-item__main{
+      color: #404040;
+      background-color: #fcfbfe;
+      .ui-menu-item__text{
+        color: #404040;
+      }
+      &:after{
+        background-color: #0052cc;
+      }
+    }
+  }
+  .ui-menu-item__main{
+    display: flex;
+    flex-direction: row;
+    width: 100%;
+    box-sizing: border-box;
+    line-height: 24px;
+    padding-top: 9px;
+    padding-bottom: 9px;
+    padding-left: 20px;
+    padding-right: 20px;
+    transition: all .3s;
+    position: relative;
+    cursor: pointer;
+    .ui-menu-item__text{
+      color: #888888;
+    }
+    &:hover{
+      color: #404040;
+      .ui-menu-item__text{
+        color: #404040;
+      }
+    }
+    &:after{
+      content: '';
+      position: absolute;
+      top: 0;
+      bottom: 0;
+      right: 0;
+      transition: all .3s;
+      background-color: transparent;
+      width: 2px;
+    }
+  }
+  .ui-menu-item__text{
+    flex: 1;
+    min-width: 0;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+  }
+}
+.ui-menu--box{
+  padding: 8px;
+  .ui-menu-item__main{
+    display: block;
+    line-height: 32px;
+    padding: 6px 12px;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    cursor: pointer;
+    transition: all .3s;
+    border: 1px solid transparent;
+    border-radius: 3px;
+    // &:hover{
+    //   background-color: #f0f8fc;
+    //   color: #00A0EB;
+    // }
+  }
+  .ui-menu-item__icon{
+    display: inline-block;
+    vertical-align: top;
+    margin-right: 4px;
+  }
+  .ui-menu-item{
+    &:not(:last-child) {
+      margin-bottom: 6px;
+    }
+    &:hover, &.is-active {
+      .ui-menu-item__main{
+        background-color: #deebff;
+        border-color: #4c9aff;
+      }
+    }
+    &.is-devided{
+      padding: 0;
+      height: 1px;
+      background: #eee;
+      margin: 6px 0;
+      .ui-menu-item__main{
+        display: none;
+      }
+    }
+  }
+}
+</style>

package/components/menu/menu.vue

@@ -0,0 +1,64 @@
+<template>
+  <div class="ui-menu" :class="['ui-menu--' + type]">
+    <slot></slot>
+  </div>
+</template>
+<script>
+export default {
+  name: 'UiMenu',
+  provide () {
+    return {
+      UiMenu: this
+    }
+  },
+  props: {
+    type: {
+      type: String,
+      default: 'static',
+      validator (value) {
+        return ['static', 'float', 'box'].indexOf(value) >= 0
+      }
+    },
+    current: {
+      type: [String, Number]
+    },
+    router: {
+      type: Boolean,
+      default: true
+    },
+    enableIndent: {
+      type: Boolean,
+      default: true
+    },
+    accordion: {
+      type: Boolean,
+      default: false
+    },
+    expandedGroupIndex: {
+      type: Number,
+      default: 0
+    }
+  },
+  data () {
+    return {
+      activeLink: null,
+      innerExpandedGroupIndex: this.expandedGroupIndex
+    }
+  },
+  watch: {
+    expandedGroupIndex (val) {
+      this.innerExpandedGroupIndex = val
+    }
+  },
+  methods: {
+    setExpandedGroupIndex (groupIndex) {
+      this.innerExpandedGroupIndex = groupIndex
+    }
+  }
+}
+</script>
+<style lang="less">
+.ui-menu--float{
+  padding: 6px 0;
+}
+</style>

package/components/message/index.js

@@ -0,0 +1,19 @@
+import {
+  warn,
+  success,
+  error
+} from './message'
+import './message.less'
+
+export const install = (Vue) => {
+  Vue.prototype.$warn = warn
+  Vue.prototype.$success = success
+  Vue.prototype.$error = error
+}
+
+export default {
+  install,
+  warn,
+  success,
+  error
+}

package/components/message/message.js

@@ -0,0 +1,28 @@
+import Message from 'element-ui/lib/message'
+import 'element-ui/lib/theme-chalk/icon.css'
+import 'element-ui/lib/theme-chalk/message.css'
+
+const warn = (message) => {
+  Message({
+    message,
+    type: 'warning'
+  })
+}
+const success = (message) => {
+  Message({
+    message,
+    type: 'success'
+  })
+}
+const error = (message) => {
+  Message({
+    message,
+    type: 'error'
+  })
+}
+
+export {
+  warn,
+  error,
+  success
+}

package/components/message/message.less

@@ -0,0 +1,6 @@
+body {
+    .el-message .el-message__content{
+        white-space: pre-wrap;
+        line-height: 1.7em;
+    }
+}

package/components/message-box/index.js

@@ -0,0 +1,10 @@
+import MessageBox from './message-box'
+
+MessageBox.install = (Vue) => {
+  Vue.prototype.$message = MessageBox.message
+  Vue.prototype.$alert = MessageBox.alert
+  Vue.prototype.$confirm = MessageBox.confirm
+  // Vue.prototype.$confirmDel = MessageBox.confirmDel
+}
+
+export default MessageBox