@v2coding/ui 0.1.7 → 0.1.8

package/src/components/drawer/drawer.vue

@@ -1,523 +0,0 @@
-<template>
-  <div v-transfer-dom :data-transfer="transfer">
-    <transition name="fade">
-      <div :class="maskClasses" :style="maskStyle" v-show="visible" v-if="mask" @click="handleMask"></div>
-    </transition>
-    <div :class="wrapClasses" @click="handleWrapClick">
-      <transition :name="'move-' + placement">
-        <div :class="classes" :style="mainStyles" v-show="visible">
-          <div :class="contentClasses" ref="content">
-            <a class="ui-drawer-close" v-if="closable" @click="close">
-              <slot name="close">
-                <i class="el-icon-close"></i>
-              </slot>
-            </a>
-            <div :class="[prefixCls + '-header']" v-if="showHead"><slot name="header"><div :class="[prefixCls + '-header-inner']">{{ title }}</div></slot></div>
-            <div :class="[prefixCls + '-body']" :style="styles"><slot></slot></div>
-          </div>
-          <div class="ui-drawer-drag" :class="{ 'ui-drawer-drag-left': placement === 'left' }" v-if="draggable" @mousedown="handleTriggerMousedown">
-            <slot name="trigger">
-              <div class="ui-drawer-drag-move-trigger">
-                <div class="ui-drawer-drag-move-trigger-point">
-                  <i></i><i></i><i></i><i></i><i></i>
-                </div>
-              </div>
-            </slot>
-          </div>
-        </div>
-      </transition>
-    </div>
-  </div>
-</template>
-<script>
-  import { oneOf} from './assist';
-  import TransferDom from './transfer-dom';
-  import { on, off } from './dom';
-
-  const prefixCls = 'ui-drawer';
-
-  export default {
-    name: 'UiDrawer',
-    directives: { TransferDom },
-    props: {
-      value: {
-        type: Boolean,
-        default: false
-      },
-      title: {
-        type: String
-      },
-      width: {
-        type: [Number, String],
-        default: 256
-      },
-      closable: {
-        type: Boolean,
-        default: true
-      },
-      maskClosable: {
-        type: Boolean,
-        default: true
-      },
-      mask: {
-        type: Boolean,
-        default: true
-      },
-      maskStyle: {
-        type: Object
-      },
-      styles: {
-        type: Object
-      },
-      scrollable: {
-        type: Boolean,
-        default: false
-      },
-      placement: {
-        validator (value) {
-          return oneOf(value, ['left', 'right']);
-        },
-        default: 'right'
-      },
-      zIndex: {
-        type: Number,
-        default: 1000
-      },
-      transfer: {
-        type: Boolean,
-        default: true,
-      },
-      className: {
-        type: String
-      },
-      inner: {
-        type: Boolean,
-        default: false
-      },
-      // Whether drag and drop is allowed to adjust width
-      draggable: {
-        type: Boolean,
-        default: false
-      },
-      beforeClose: Function,
-    },
-    data () {
-      return {
-        prefixCls: prefixCls,
-        visible: this.value,
-        wrapShow: false,
-        showHead: true,
-        canMove: false,
-        dragWidth: this.width,
-        wrapperWidth: this.width,
-        wrapperLeft: 0,
-        minWidth: 256
-      };
-    },
-    computed: {
-      wrapClasses () {
-        return [
-          `${prefixCls}-wrap`,
-          {
-            [`${prefixCls}-hidden`]: !this.wrapShow,
-            [`${this.className}`]: !!this.className,
-            [`${prefixCls}-no-mask`]: !this.mask,
-            [`${prefixCls}-wrap-inner`]: this.inner,
-            [`${prefixCls}-wrap-dragging`]: this.canMove
-          }
-        ];
-      },
-      mainStyles () {
-        let style = {};
-        const width = parseInt(this.dragWidth);
-        const styleWidth = {
-          width: width <= 100 ? `${width}%` : `${width}px`
-        };
-        Object.assign(style, styleWidth);
-        return style;
-      },
-      contentClasses () {
-        return [
-          `${prefixCls}-content`,
-          {
-            [`${prefixCls}-content-no-mask`]: !this.mask
-          }
-        ];
-      },
-      classes () {
-        return [
-          `${prefixCls}`,
-          `${prefixCls}-${this.placement}`,
-          {
-            [`${prefixCls}-no-header`]: !this.showHead,
-            [`${prefixCls}-inner`]: this.inner
-          }
-        ];
-      },
-      maskClasses () {
-        return [
-          `${prefixCls}-mask`,
-          {
-            [`${prefixCls}-mask-inner`]: this.inner
-          }
-        ];
-      }
-    },
-    methods: {
-      close () {
-        if (!this.beforeClose) {
-          return this.handleClose();
-        }
-        const before = this.beforeClose();
-        if (before && before.then) {
-          before.then(() => {
-            this.handleClose();
-          });
-        } else {
-          this.handleClose();
-        }
-      },
-      handleClose () {
-        this.visible = false;
-        this.$emit('input', false);
-        this.$emit('on-close');
-      },
-      handleMask () {
-        if (this.maskClosable && this.mask) {
-          this.close();
-        }
-      },
-      handleWrapClick (event) {
-        // use indexOf,do not use === ,because ivu-modal-wrap can have other custom className
-        const className = event.target.getAttribute('class');
-        if (className && className.indexOf(`${prefixCls}-wrap`) > -1) this.handleMask();
-      },
-      handleMousemove (event) {
-        if (!this.canMove || !this.draggable) return;
-        // 更新容器宽度和距离左侧页面距离，如果是window则距左侧距离为0
-        this.handleSetWrapperWidth();
-        const left = event.pageX - this.wrapperLeft;
-        // 如果抽屉方向为右边，宽度计算需用容器宽度减去left
-        let width = this.placement === 'right' ? this.wrapperWidth - left : left;
-        // 限定最小宽度
-        width = Math.max(width, parseFloat(this.minWidth));
-        event.atMin = width === parseFloat(this.minWidth);
-        // 如果当前width不大于100，视为百分比
-        if (width <= 100) width = (width / this.wrapperWidth) * 100;
-        this.dragWidth = width;
-        this.$emit('on-resize-width', parseInt(this.dragWidth));
-      },
-      handleSetWrapperWidth () {
-        const {
-          width,
-          left
-        } = this.$el.getBoundingClientRect();
-        this.wrapperWidth = width;
-        this.wrapperLeft = left;
-      },
-      handleMouseup () {
-        if (!this.draggable) return;
-        this.canMove = false;
-      },
-      handleTriggerMousedown () {
-        this.canMove = true;
-        // 防止鼠标选中抽屉中文字，造成拖动trigger触发浏览器原生拖动行为
-        window.getSelection().removeAllRanges();
-      },
-    },
-    mounted () {
-      if (this.visible) {
-        this.wrapShow = true;
-      }
-      let showHead = true;
-      if (this.$slots.header === undefined && !this.title) {
-        showHead = false;
-      }
-      this.showHead = showHead;
-      on(document, 'mousemove', this.handleMousemove);
-      on(document, 'mouseup', this.handleMouseup);
-      this.handleSetWrapperWidth();
-    },
-    beforeDestroy () {
-      off(document, 'mousemove', this.handleMousemove);
-      off(document, 'mouseup', this.handleMouseup);
-    },
-    watch: {
-      value (val) {
-        this.visible = val;
-      },
-      visible (val) {
-        if (val === false) {
-          this.timer = setTimeout(() => {
-            this.wrapShow = false;
-          }, 300);
-        } else {
-          if (this.timer) clearTimeout(this.timer);
-          this.wrapShow = true;
-        }
-        this.$emit('on-visible-change', val);
-      },
-      title (val) {
-        if (this.$slots.header === undefined) {
-          this.showHead = !!val;
-        }
-      },
-      width (val) {
-        this.dragWidth = val;
-      }
-    }
-  };
-</script>
-
-<style lang="less">
-  @drawer-prefix-cls: ~"ui-drawer";
-
-  .content-header() {
-    border-bottom: 1px solid #e8eaec;
-    padding: 14px 16px;
-    line-height: 1;
-
-    p,
-    &-inner
-    {
-      display: inline-block;
-      width: 100%;
-      height: 20px;
-      line-height: 20px;
-      font-size: 16px;
-      color: #17233d;
-      font-weight: 500;
-      overflow: hidden;
-      text-overflow: ellipsis;
-      white-space: nowrap;
-    }
-    p i, p span{
-      //vertical-align: middle;
-    }
-  }
-
-  .content-close(@top: 0, @icon-font-size: 22px) {
-    font-size: 12px;
-    position: absolute;
-    right: 15px;
-    top: 15px;
-    overflow: hidden;
-    cursor: pointer;
-
-    .el-icon-close {
-      font-size: @icon-font-size;
-      color: #999;
-      transition: color .2s ease;
-      position: relative;
-      top: @top;
-      &:hover {
-        color: #444;
-      }
-    }
-  }
-
-  .mask() {
-    position: fixed;
-    top: 0;
-    bottom: 0;
-    left: 0;
-    right: 0;
-    background-color: rgba(55, 55, 55, 0.6);
-    height: 100%;
-    z-index: 1000;
-
-    &-hidden {
-      display: none;
-    }
-  }
-
-  .@{drawer-prefix-cls} {
-    width: auto;
-    height: 100%;
-    position: fixed;
-    top: 0;
-
-    &-inner{
-      position: absolute;
-    }
-
-    &-left{
-      left: 0;
-    }
-    &-right{
-      right: 0;
-    }
-
-    &-hidden {
-      display: none !important;
-    }
-
-    &-wrap {
-      position: fixed;
-      overflow: auto;
-      top: 0;
-      right: 0;
-      bottom: 0;
-      left: 0;
-      z-index: 1000;
-      -webkit-overflow-scrolling: touch;
-      outline: 0;
-
-      &-inner{
-        position: absolute;
-        overflow: hidden;
-      }
-
-      &-dragging{
-        user-select: none;
-      }
-    }
-
-    &-wrap * {
-      -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
-    }
-
-    &-mask {
-      .mask;
-      &-inner{
-        position: absolute;
-      }
-    }
-
-    &-content {
-      width: 100%;
-      height: 100%;
-      position: absolute;
-      top: 0;
-      bottom: 0;
-      background-color: #fff;
-      border: 0;
-      background-clip: padding-box;
-      box-shadow: 0 4px 12px rgba(0,0,0,.15);
-
-      &-no-mask{
-        pointer-events: auto;
-      }
-    }
-
-    &-header {
-      .content-header;
-    }
-
-    &-close {
-      z-index: 1;
-      .content-close(1px, 20px);
-    }
-
-    &-body {
-      width: 100%;
-      height: calc(~'100% - 51px');
-      padding: 16px;
-      font-size: 14px;
-      line-height: 1.5;
-      word-wrap: break-word;
-      position: absolute;
-      overflow: auto;
-      box-sizing: border-box;
-    }
-
-    &-no-header &-body{
-      height: 100%;
-    }
-
-    &-no-mask{
-      pointer-events: none;
-
-      .@{drawer-prefix-cls}-drag{
-        pointer-events: auto;
-      }
-    }
-
-    &-drag{
-      top: 0;
-      height: 100%;
-      width: 0;
-      position: absolute;
-      &-left{
-        right: 0;
-      }
-      &-move-trigger{
-        width: 8px;
-        height: 100px;
-        line-height: 100px;
-        position: absolute;
-        top: 50%;
-        background: rgb(243, 243, 243);
-        transform: translate(-50%, -50%);
-        border-radius: ~"4px / 6px";
-        box-shadow: 0 0 1px 1px rgba(0, 0, 0, .2);
-        cursor: col-resize;
-        &-point{
-          display: inline-block;
-          width: 50%;
-          transform: translateX(50%);
-          i{
-            display: block;
-            border-bottom: 1px solid rgb(192, 192, 192);
-            padding-bottom: 2px;
-          }
-        }
-      }
-    }
-  }
-
-  .motion-common(@time) {
-    animation-duration: @time;
-    animation-fill-mode: both;
-  }
-
-  .make-motion(@className, @keyframeName, @time: .3s) {
-    .@{className}-enter-active, .@{className}-appear {
-      .motion-common(@time);
-      animation-play-state: paused;
-    }
-    .@{className}-leave-active {
-      .motion-common(@time);
-      animation-play-state: paused;
-    }
-    .@{className}-enter-active, .@{className}-appear {
-      animation-name: ~"@{keyframeName}In";
-      animation-play-state: running;
-    }
-    .@{className}-leave-active {
-      animation-name: ~"@{keyframeName}Out";
-      animation-play-state: running;
-    }
-  }
-
-  .fade-motion(@className, @keyframeName) {
-    .make-motion(@className, @keyframeName, .15s);
-    .@{className}-enter-active, .@{className}-appear {
-      opacity: 0;
-      animation-timing-function: linear;
-    }
-    .@{className}-leave-active {
-      animation-timing-function: linear;
-    }
-  }
-
-  .fade-motion(fade, uiFadeIn);
-
-  @keyframes uiFadeIn {
-    0% {
-      opacity: 0;
-    }
-    100% {
-      opacity: 1;
-    }
-  }
-
-  @keyframes ivuFadeOut {
-    0% {
-      opacity: 1;
-    }
-    100% {
-      opacity: 0;
-    }
-  }
-</style>

package/src/components/exports/index.vue

@@ -1,53 +0,0 @@
-<template>
-  <div class="export-wrapper" @click="handleExport">
-    <slot>导出</slot>
-  </div>
-</template>
-
-<script>
-  import exports from './exports';
-
-  const Export = {
-    name: 'ui-export',
-    props: {},
-    methods: {
-      handleExport() {
-        const data = [
-          {id: 1, name: 'i那是大', age: 10, sex: 1},
-          {id: 2, name: 'asdasd 123安师大', age: 12, sex: 0},
-          {id: 3, name: '安达充再擦', age: 11, sex: 1},
-          {id: 4, name: '1发撒说', age: 14, sex: 2},
-        ];
-        const columns = [
-          {key: 'id', title: 'ID'},
-          {key: 'name', title: '名称'},
-          {key: 'age', title: '年龄'},
-          {
-            title: '性别',
-            transform: ({sex}) => {
-              if (sex === 1) {
-                return '男';
-              }
-              if (sex === 2) {
-                return '女';
-              }
-              return '保密';
-            },
-          },
-        ];
-        const filename = 'file.xlsx';
-        exports(data, filename, columns);
-      },
-    },
-  };
-
-  export default {
-    install: (Vue) => {
-      Vue.component(Export.name, Export);
-    },
-  };
-</script>
-
-<style scoped>
-
-</style>