@aochuang/common 1.0.0 → 1.0.126

package/components/loading/loading.vue

@@ -0,0 +1,130 @@
+<template>
+  <div class="ui-loading" :class="['ui-loading--' + size, 'ui-loading--' + type, 'is-' + dir]">
+    <span class="ui-loading__icon"></span>
+    <span class="ui-loading__text" v-if="$slots.default || text">
+      <slot>{{ text }}</slot>
+    </span>
+  </div>
+</template>
+<script>
+export default {
+  name: 'UiLoading',
+  props: {
+    type: {
+      type: String,
+      default: 'default',
+      validator(value) {
+        return ['default', 'primary', 'success', 'warning', 'danger', 'info'].includes(value)
+      }
+    },
+    dir: {
+      type: String,
+      default: 'horizon',
+      validator (value) {
+        return ['horizon', 'vertical'].includes(value)
+      }
+    },
+    text: {
+      type: String
+    },
+    size: {
+      type: String,
+      default: 'small',
+      validator(value) {
+        return ['small', 'mini', 'medium'].includes(value)
+      }
+    }
+  }
+}
+</script>
+<style lang="less">
+.ui-loading{
+  &.is-horizon{
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    .ui-loading__text{
+      margin-left: 6px;
+    }
+  }
+  &.is-vertical{
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    .ui-loading__text{
+      margin-top: 6px;
+    }
+  }
+}
+.ui-loading__text{
+  color: rgba(0,0,0,.5);
+}
+.ui-loading--medium {
+  .ui-loading__icon{
+    width: 24px;
+    height: 24px;
+    border-width: 6px;
+  }
+}
+.ui-loading--small {
+  .ui-loading__icon{
+    width: 20px;
+    height: 20px;
+    border-width: 3px;
+  }
+}
+.ui-loading--mini {
+  .ui-loading__icon{
+    width: 12px;
+    height: 12px;
+    border-width: 2px;
+  }
+}
+.ui-loading--default {
+  .ui-loading__icon{
+    border-color: #999;
+  }
+}
+.ui-loading--primary {
+  .ui-loading__icon{
+    border-color: #5f9efa;
+  }
+}
+.ui-loading--success {
+  .ui-loading__icon{
+    border-color: #7ebf4a;
+  }
+}
+.ui-loading--info {
+  .ui-loading__icon{
+    border-color: #999;
+  }
+}
+.ui-loading--warning {
+  .ui-loading__icon{
+    border-color: #dba54a;
+  }
+}
+.ui-loading--danger {
+  .ui-loading__icon{
+    border-color: #e3756f;
+  }
+}
+.ui-loading__icon{
+  display: inline-block;
+  border-style: solid;
+  border-color: #999;
+  border-radius: 50%;
+  border-right-color: transparent!important;
+  animation: rotating .7s linear infinite;
+}
+@keyframes rotating{
+  0% {
+      transform: rotate(0);
+  }
+  100% {
+      transform: rotate(1turn);
+  }
+}
+</style>

package/components/menu/index.js

@@ -0,0 +1,20 @@
+import Menu from './menu'
+import MenuGroup from './menu-group'
+import MenuItem from './menu-item'
+
+Menu.install = (Vue) => {
+  Vue.component(Menu.name, Menu)
+  Vue.component(MenuGroup.name, MenuGroup)
+  Vue.component(MenuItem.name, MenuItem)
+}
+
+Menu.MenuGroup = MenuGroup
+Menu.MenuItem = MenuItem
+
+export {
+  Menu,
+  MenuGroup,
+  MenuItem
+}
+
+export default Menu

package/components/menu/menu-group.vue

@@ -0,0 +1,245 @@
+<template>
+  <div class="ui-menu-group" :class="{'is-accordion': accordion, 'is-expanded': isExpanded, 'is-enable-indent': enableIndent}">
+    <router-link
+      v-if="isLink"
+      :to="path"
+      :exact="exact"
+      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
+    },
+    exact: {
+      type: Boolean,
+      default: true
+    },
+    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 (!this.exact && 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,269 @@
+<template>
+  <div class="ui-menu-item" :class="className" @click="handleItemClick">
+    <component
+      :is="isLink ? 'router-link' : 'span'"
+      class="ui-menu-item__main"
+      :to="path"
+      :exact="exact"
+    >
+      <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
+    },
+    exact: {
+      type: Boolean,
+      default: true
+    },
+    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 {
+    &.is-active .ui-menu-item__main{
+      background-color: #edf3fb;
+      color: #0052CC;
+    }
+  }
+  .ui-menu-item__main{
+    display: block;
+    line-height: 24px;
+    padding: 6px 12px;
+    cursor: pointer;
+    transition: all .3s;
+    &:hover{
+      background-color: #f8f8f8;
+    }
+  }
+  .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;
+      }
+    }
+  }
+}
+.ui-menu--radius{
+  padding: 8px;
+  .ui-menu-item__main{
+    display: block;
+    line-height: 24px;
+    padding: 6px 8px;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    cursor: pointer;
+    transition: all .3s;
+    border-radius: 5px;
+    color: #4E5969;
+    &:hover{
+      background-color: #f7f8fa;
+      color: #4c9aff;
+    }
+  }
+  .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: #f7f8fa;
+        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', 'radius'].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>