vue2-client 0.1.1 → 1.0.0

package/src/components/tool/DetailList.vue

@@ -0,0 +1,157 @@
+<template>
+  <div :class="['detail-list', size === 'small' ? 'small' : 'large', layout === 'vertical' ? 'vertical': 'horizontal']">
+    <div v-if="title" class="title">{{ title }}</div>
+    <a-row>
+      <slot></slot>
+    </a-row>
+  </div>
+</template>
+
+<script>
+import ACol from 'ant-design-vue/es/grid/Col'
+const Item = {
+  name: 'DetailListItem',
+  props: {
+    term: {
+      type: String,
+      required: false
+    }
+  },
+  inject: {
+    col: {
+      type: Number
+    }
+  },
+  methods: {
+    renderTerm (h, term) {
+      return term ? h(
+        'div',
+        {
+          attrs: {
+            class: 'term'
+          }
+        },
+        [term]
+      ) : null
+    },
+    renderContent (h, content) {
+      return h(
+        'div',
+        {
+          attrs: {
+            class: 'content'
+          }
+        },
+        [content]
+      )
+    }
+  },
+  render (h) {
+    const term = this.renderTerm(h, this.$props.term)
+    const content = this.renderContent(h, this.$slots.default)
+    return h(
+      ACol,
+      {
+        props: responsive[this.col]
+      },
+      [term, content]
+    )
+  }
+}
+
+const responsive = {
+  1: { xs: 24 },
+  2: { xs: 24, sm: 12 },
+  3: { xs: 24, sm: 12, md: 8 },
+  4: { xs: 24, sm: 12, md: 6 }
+}
+
+export default {
+  name: 'DetailList',
+  Item: Item,
+  props: {
+    // eslint-disable-next-line vue/require-default-prop
+    title: {
+      type: String,
+      required: false
+    },
+    col: {
+      type: Number,
+      required: false,
+      default: 3
+    },
+    size: {
+      type: String,
+      required: false,
+      default: 'large'
+    },
+    layout: {
+      type: String,
+      required: false,
+      default: 'horizontal'
+    }
+  },
+  provide () {
+    return {
+      col: this.col > 4 ? 4 : this.col
+    }
+  }
+}
+</script>
+
+<style lang="less">
+  .detail-list{
+    .title {
+      font-size: 16px;
+      color: @title-color;
+      font-weight: bolder;
+      margin-bottom: 16px;
+    }
+    .term {
+      // Line-height is 22px IE dom height will calculate error
+      line-height: 20px;
+      padding-bottom: 16px;
+      margin-right: 8px;
+      color: @title-color;
+      white-space: nowrap;
+      display: table-cell;
+      &:after {
+        content: ':';
+        margin: 0 8px 0 2px;
+        position: relative;
+        top: -0.5px;
+      }
+    }
+    .content{
+      line-height: 22px;
+      width: 100%;
+      padding-bottom: 16px;
+      color: @text-color;
+      display: table-cell;
+    }
+    &.small{
+      .title{
+        font-size: 14px;
+        color: @text-color;
+        font-weight: normal;
+        margin-bottom: 12px;
+      }
+      .term,.content{
+        padding-bottom: 8px;
+      }
+    }
+    &.large{
+      .term,.content{
+        padding-bottom: 16px;
+      }
+    }
+    &.vertical{
+      .term {
+        padding-bottom: 8px;
+      }
+      .term,.content{
+        display: block;
+      }
+    }
+  }
+</style>

package/src/components/tool/Drawer.vue

@@ -0,0 +1,142 @@
+<template>
+  <div >
+    <div :class="['mask', visible ? 'open' : 'close']" @click="close"></div>
+    <div :class="['drawer', placement, visible ? 'open' : 'close']">
+      <div ref="drawer" class="content beauty-scroll">
+        <slot></slot>
+      </div>
+      <div v-if="showHandler" :class="['handler-container', placement, visible ? 'open' : 'close']" ref="handler" @click="toggle">
+        <slot v-if="$slots.handler" name="handler"></slot>
+        <div v-else class="handler">
+          <a-icon :type="visible ? 'close' : 'bars'" />
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'Drawer',
+  data () {
+    return {
+    }
+  },
+  model: {
+    prop: 'visible',
+    event: 'change'
+  },
+  props: {
+    visible: {
+      type: Boolean,
+      required: false,
+      default: false
+    },
+    placement: {
+      type: String,
+      required: false,
+      default: 'left'
+    },
+    showHandler: {
+      type: Boolean,
+      required: false,
+      default: true
+    }
+  },
+  methods: {
+    open () {
+      this.$emit('change', true)
+    },
+    close () {
+      this.$emit('change', false)
+    },
+    toggle () {
+      this.$emit('change', !this.visible)
+    }
+  }
+}
+</script>
+
+<style lang="less" scoped>
+  .mask{
+    position: fixed;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    top: 0;
+    background-color: @shadow-color;
+    transition: all 0.5s;
+    z-index: 100;
+    &.open{
+      display: inline-block;
+    }
+    &.close{
+      display: none;
+    }
+  }
+  .drawer{
+    position: fixed;
+    transition: all 0.5s;
+    height: 100vh;
+    z-index: 100;
+    &.left{
+      left: 0px;
+      &.open{
+        .content{
+          box-shadow: 2px 0 8px @shadow-color;
+        }
+      }
+      &.close{
+        transform: translateX(-100%);
+      }
+    }
+    &.right{
+      right: 0px;
+      .content{
+        float: right;
+      }
+      &.open{
+        .content{
+          box-shadow: -2px 0 8px @shadow-color;
+        }
+      }
+      &.close{
+        transform: translateX(100%);
+      }
+    }
+  }
+  .content{
+    display: inline-block;
+    height: 100vh;
+    overflow-y: auto;
+  }
+  .handler-container{
+    position: absolute;
+    display: inline-block;
+    text-align: center;
+    transition: all 0.5s;
+    cursor: pointer;
+    top: 200px;
+    z-index: 100;
+    .handler {
+      height: 40px;
+      width: 40px;
+      background-color: @base-bg-color;
+      font-size: 26px;
+      box-shadow: 0 2px 8px @shadow-color;
+      line-height: 40px;
+    }
+    &.left{
+      right: -40px;
+      .handler{
+        border-radius: 0 5px 5px 0;
+      }
+    }
+    &.right{
+      left: -40px;
+      .handler{
+        border-radius: 5px 0 0 5px;
+      }
+    }
+  }
+</style>

package/src/components/tool/FooterToolBar.vue

@@ -0,0 +1,30 @@
+<template>
+  <div class="toolbar">
+    <div style="float: left">
+      <slot name="extra"></slot>
+    </div>
+    <div style="float: right">
+      <slot></slot>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'FooterToolBar'
+}
+</script>
+
+<style lang="less" scoped>
+  .toolbar{
+    position: fixed;
+    width: 100%;
+    bottom: 0;
+    right: 0;
+    box-shadow: 0 -1px 2px @shadow-color;
+    background: @base-bg-color;
+    border-top: 1px solid @border-color-split;
+    padding: 12px 24px;
+    z-index: 9;
+  }
+</style>

package/src/components/tool/HeadInfo.vue

@@ -0,0 +1,35 @@
+<template>
+  <div class="head-info">
+    <span>{{ title }}</span>
+    <p>{{ content }}</p>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'HeadInfo',
+  // eslint-disable-next-line vue/require-prop-types
+  props: ['title', 'content', 'bordered']
+}
+</script>
+
+<style lang="less" scoped>
+  .head-info{
+    text-align: center;
+    padding: 0 24px;
+    flex-grow: 1;
+    flex-shrink: 0;
+    align-self: center;
+    span{
+      color: @text-color-second;
+      display: inline-block;
+      font-size: 14px;
+      margin-bottom: 4px;
+    }
+    p{
+      color: @text-color;
+      font-size: 24px;
+      margin: 0;
+    }
+  }
+</style>

package/src/components/tool/TagSelect.vue

@@ -0,0 +1,83 @@
+<template>
+  <div class="tag-select">
+    <tag-select-option @click="toggleCheck">全部</tag-select-option>
+    <slot></slot>
+    <a @click="toggle" v-show="showTrigger" ref="trigger" class="trigger">展开<a-icon style="margin-left: 5px" :type="collapsed ? 'down' : 'up'"/></a>
+  </div>
+</template>
+
+<script>
+import TagSelectOption from './TagSelectOption'
+export default {
+  name: 'TagSelect',
+  Option: TagSelectOption,
+  components: { TagSelectOption },
+  data () {
+    return {
+      showTrigger: false,
+      collapsed: true,
+      screenWidth: document.body.clientWidth,
+      checkAll: false
+    }
+  },
+  watch: {
+    screenWidth: function () {
+      this.showTrigger = this.needTrigger()
+    },
+    collapsed: function (val) {
+      this.$el.style.maxHeight = val ? '39px' : '78px'
+    }
+  },
+  mounted () {
+    const _this = this
+    // 此处延迟执行，是为解决mouted未完全完成情况下引发的trigger显示bug
+    setTimeout(() => {
+      _this.showTrigger = _this.needTrigger()
+      _this.$refs.trigger.style.display = _this.showTrigger ? 'inline' : 'none'
+    }, 1)
+    window.onresize = () => {
+      return (() => {
+        window.screenWidth = document.body.clientWidth
+        _this.screenWidth = window.screenWidth
+      })()
+    }
+  },
+  methods: {
+    needTrigger () {
+      return this.$el.clientHeight < this.$el.scrollHeight || this.$el.scrollHeight > 39
+    },
+    toggle () {
+      this.collapsed = !this.collapsed
+    },
+    getAllTags () {
+      const tagList = this.$children.filter((item) => {
+        return item.isTagSelectOption
+      })
+      return tagList
+    },
+    toggleCheck () {
+      this.checkAll = !this.checkAll
+      const tagList = this.getAllTags()
+      tagList.forEach((item) => {
+        item.checked = this.checkAll
+      })
+    }
+  }
+}
+</script>
+
+<style lang="less" scoped>
+  .tag-select{
+    user-select: none;
+    position: relative;
+    overflow: hidden;
+    max-height: 39px;
+    padding-right: 50px;
+    display: inline-block;
+  }
+  .trigger{
+    position: absolute;
+    top: 0;
+    right: 0;
+  }
+</style>

package/src/components/tool/TagSelectOption.vue

@@ -0,0 +1,33 @@
+<template>
+  <a-checkable-tag @change="$emit('click')" class="tag-default" v-model="checked">
+    <slot></slot>
+  </a-checkable-tag>
+</template>
+
+<script>
+export default {
+  name: 'TagSelectOption',
+  props: {
+    size: {
+      type: String,
+      required: false,
+      default: 'default'
+    }
+  },
+  data () {
+    return {
+      checked: false,
+      isTagSelectOption: true
+    }
+  }
+}
+</script>
+
+<style lang="less" scoped>
+  .tag-default{
+    font-size: 14px;
+    padding: 0 8px;
+    height: auto;
+    margin-right: 24px;
+  }
+</style>

package/src/components/transition/PageToggleTransition.vue

@@ -0,0 +1,97 @@
+<template>
+  <transition
+    v-if="!disabled"
+    :enter-active-class="`animated ${enterAnimate} page-toggle-enter-active`"
+    :leave-active-class="`animated ${leaveAnimate} page-toggle-leave-active`"
+  >
+    <slot></slot>
+  </transition>
+  <div v-else><slot></slot></div>
+</template>
+
+<script>
+  import { preset as animates } from '@/config/default/animate.config'
+
+  export default {
+    name: 'PageToggleTransition',
+    props: {
+      disabled: {
+        type: Boolean,
+        default: false
+      },
+      animate: {
+        type: String,
+        validator (value) {
+          return animates.findIndex(item => item.name == value) != -1
+        },
+        default: 'bounce'
+      },
+      // eslint-disable-next-line vue/require-default-prop
+      direction: {
+        type: String,
+        validator (value) {
+          return ['x', 'y', 'left', 'right', 'up', 'down', 'downLeft', 'upRight', 'downRight', 'upLeft', 'downBig',
+            'upBig', 'downLeft', 'downRight', 'topRight', 'bottomLeft', 'topLeft', 'bottomRight', 'default'].indexOf(value) > -1
+        }
+      },
+      reverse: {
+        type: Boolean,
+        default: true
+      }
+    },
+    computed: {
+      enterAnimate () {
+        return this.activeClass(false)
+      },
+      leaveAnimate () {
+        return this.activeClass(true)
+      }
+    },
+    methods: {
+      activeClass (isLeave) {
+        const animate = animates.find(item => this.animate == item.name)
+        if (animate == undefined) {
+          return ''
+        }
+        let direction = ''
+        if (this.direction == undefined) {
+          direction = animate.directions[0]
+        } else {
+          direction = animate.directions.find(item => item == this.direction)
+        }
+        direction = (direction == undefined || direction === 'default') ? '' : direction
+        if (direction != '') {
+          direction = isLeave && this.reverse ? this.reversePosition(direction, animate.directions) : direction
+          direction = direction[0].toUpperCase() + direction.substring(1)
+        }
+        const t = isLeave ? 'Out' : 'In'
+        return animate.name + t + direction
+      },
+      reversePosition (direction, directions) {
+        if (direction.length == 0 || direction == 'x' || direction == 'y') {
+          return direction
+        }
+        let index = directions.indexOf(direction)
+        index = (index % 2 == 1) ? index - 1 : index + 1
+        return directions[index]
+      }
+    }
+  }
+</script>
+
+<style lang="less">
+  .page-toggle-enter-active{
+    position: absolute !important;
+    animation-duration: 0.8s !important;
+    width: calc(100%) !important;
+  }
+  .page-toggle-leave-active{
+    position: absolute !important;
+    animation-duration: 0.8s !important;
+    width: calc(100%) !important;
+  }
+  .page-toggle-enter{
+  }
+  .page-toggle-leave-to{
+  }
+</style>

package/src/config/config.js

@@ -0,0 +1,13 @@
+// 自定义配置，参考 ./default/setting.config.js，需要自定义的属性在这里配置即可
+module.exports = {
+  theme: {
+    color: '#1890ff',
+    mode: 'dark'
+  },
+  multiPage: true,
+  asyncRoutes: true,
+  animate: {
+    name: 'lightSpeed',
+    direction: 'left'
+  }
+}

package/src/config/default/admin.config.js

@@ -0,0 +1,18 @@
+// admin 配置
+const ADMIN = {
+  palettes: ['#f5222d', '#fa541c', '#fadb14', '#3eaf7c', '#13c2c2', '#1890ff', '#722ed1', '#eb2f96'],
+  animates: require('./animate.config').preset,
+  theme: {
+    mode: {
+      DARK: 'dark',
+      LIGHT: 'light',
+      NIGHT: 'night'
+    }
+  },
+  layout: {
+    SIDE: 'side',
+    HEAD: 'head'
+  }
+}
+
+module.exports = ADMIN

package/src/config/default/animate.config.js

@@ -0,0 +1,21 @@
+const directS = ['left', 'right']
+const direct1 = ['left', 'right', 'down', 'up']
+const direct1b = ['downBig', 'upBig', 'leftBig', 'rightBig']
+const direct2 = ['topLeft', 'bottomRight', 'topRight', 'bottomLeft']
+const direct3 = ['downLeft', 'upRight', 'downRight', 'upLeft']
+
+// animate.css 配置
+const ANIMATE = {
+  preset: [ // 预设动画配置
+    { name: 'back', alias: '渐近', directions: direct1 },
+    { name: 'bounce', alias: '弹跳', directions: direct1.concat('default') },
+    { name: 'fade', alias: '淡化', directions: direct1.concat(direct1b).concat(direct2).concat('default') },
+    { name: 'flip', alias: '翻转', directions: ['x', 'y'] },
+    { name: 'lightSpeed', alias: '光速', directions: directS },
+    { name: 'rotate', alias: '旋转', directions: direct3.concat('default') },
+    { name: 'roll', alias: '翻滚', directions: ['default'] },
+    { name: 'zoom', alias: '缩放', directions: direct1.concat('default') },
+    { name: 'slide', alias: '滑动', directions: direct1 }
+  ]
+}
+module.exports = ANIMATE