@v2coding/ui 0.1.4 → 0.1.8

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@v2coding/ui",
-  "version": "0.1.4",
+  "version": "0.1.8",
   "description": "",
 
   "main": "dist/v2coding-ui.ssr.js",
@@ -9,8 +9,7 @@
   "unpkg": "dist/v2coding-ui.min.js",
 
   "files": [
-    "dist/*",
-    "src/**/*.vue"
+    "dist/*"
   ],
   "sideEffects": false,
 

package/src/components/dialog/dialog.vue

@@ -1,179 +0,0 @@
-<template>
-  <el-dialog v-dialogDrag v-bind="$attrs" :visible="visible" @update:visible="updateVisible" :width="width" :close-on-click-modal="closeOnClickModal" :destroy-on-close="destroyOnClose" @open="onOpen" :show-close="false" @opened="onOpened" @close="onClose" @closed="onClosed" ref="_dialog" class="ui-dialog">
-    <div v-if="title" slot="title" class="title">
-      {{ title }}
-      <span class="close" @click="close">
-        <i class="el-icon-close"></i>
-      </span>
-    </div>
-    <slot></slot>
-    <div v-if="buttons && buttons.length" slot="footer">
-      <el-button v-for="(button, index) in buttons" :key="index" size="medium" v-bind="button" @click="button.handle(close)">{{ button.text }}</el-button>
-    </div>
-  </el-dialog>
-</template>
-
-<script>
-  export default {
-    name: 'ui-dialog',
-    props: {
-      title: String,
-      visible: Boolean,
-      width: {
-        type: String,
-        default: '600px',
-      },
-      // 默认取消按钮点击触发函数
-      cancel: {
-        type: Function,
-        default: (hide) => hide(),
-      },
-      closeOnClickModal: {
-        type: Boolean,
-        default: false,
-      },
-      destroyOnClose: {
-        type: Boolean,
-        default: true,
-      },
-      autoFocus: {
-        type: Boolean,
-        default: false,
-      },
-      // 默认确定按钮点击触发函数
-      confirm: {
-        type: Function,
-        default: (hide) => hide(),
-      },
-      /**
-       * {
-       *   text: '',          // required
-       *   handle: () => {},  // required
-       *   icon: '',          // optional
-       *   ... el-button`s options
-       * }
-       */
-      buttons: {
-        type: null,
-        default() {
-          return [
-            {text: '取消', icon: 'el-icon-error', handle: this.cancel},
-            {text: '确定', icon: 'el-icon-success', type: 'primary', handle: this.confirm},
-          ];
-        },
-      },
-    },
-    deactivated() {
-      this.close();
-    },
-    beforeDestroy() {
-      this.close();
-    },
-    methods: {
-      close() {
-        this.updateVisible(false);
-      },
-      updateVisible(visible) {
-        this.$emit('update:visible', visible);
-      },
-      onOpen() {
-        this.$emit('open');
-      },
-      onOpened() {
-        if (this.autoFocus) {
-          const input = this.$el.querySelector('input');
-          input && input.focus();
-        }
-        this.$emit('opened');
-      },
-      onClose() {
-        this.$emit('close');
-      },
-      onClosed() {
-        this.$emit('closed');
-      },
-    },
-  };
-</script>
-
-<style lang="scss" scoped>
-
-  .ui-dialog {
-
-    ::v-deep .el-dialog {
-      margin-bottom: 0;
-
-      .title {
-        position: relative;
-        line-height: 28px;
-        padding: 12px 48px 12px 24px;
-        word-break: keep-all;
-        overflow: hidden;
-        text-overflow: ellipsis;
-        white-space: nowrap;
-        border-bottom: 1px solid #e8e8e8;
-        color: #202124;
-        font-weight: 500;
-        font-size: 16px;
-
-        .close {
-          position: absolute;
-          right: 0;
-          top: 0;
-          bottom: 0;
-          width: 53px;
-          height: 53px;
-          display: inline-block;
-          text-align: center;
-          cursor: pointer;
-          transition: all 0.3s;
-          user-select: none;
-
-          &:hover {
-            color: var(--color-primary);
-          }
-
-          & > i {
-            font-size: 20px;
-            line-height: 53px;
-          }
-        }
-      }
-    }
-  }
-
-  ::v-deep .el-form .ui-form-fieldset:first-child {
-    margin-top: 0;
-  }
-
-  ::v-deep .el-form .ui-form-fieldset:last-child {
-    margin-bottom: 0;
-  }
-
-  ::v-deep .el-dialog__header {
-    padding: 0;
-    user-select: none;
-  }
-
-  ::v-deep .el-dialog__body {
-    padding-bottom: 20px;
-  }
-
-  ::v-deep .el-dialog__footer {
-    padding: 10px 20px;
-    border-top: 1px solid #dcdfe6;
-  }
-
-  .el-dialog__footer .el-button {
-    border-radius: 2px;
-  }
-
-  @keyframes rotate {
-    from {
-      transform: rotate(0deg);
-    }
-    to {
-      transform: rotate(360deg);
-    }
-  }
-</style>

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>