@v2coding/ui 0.1.34 → 0.1.36

package/dist/v2coding-ui.esm.js

@@ -7731,394 +7731,48 @@ const __vue_component__$g = /*#__PURE__*/normalizeComponent({
 
 var FormDialog = __vue_component__$g;
 
-// 判断参数是否是其中之一
-function oneOf(value, validList) {
-  for (let i = 0; i < validList.length; i++) {
-    if (value === validList[i]) {
-      return true;
-    }
-  }
-
-  return false;
-}
-
-/**
- * Get target DOM Node
- * @param {(Node|string|Boolean)} [node=document.body] DOM Node, CSS selector, or Boolean
- * @return {Node} The target that the el will be appended to
- */
-function getTarget(node) {
-  if (node === void 0) {
-    node = document.body;
-  }
-
-  if (node === true) {
-    return document.body;
-  }
-
-  return node instanceof window.Node ? node : document.querySelector(node);
-}
-
-const directive = {
-  inserted(el, _ref) {
-    let {
-      value
-    } = _ref;
-    if (el.dataset && el.dataset.transfer !== 'true') return false;
-    el.className = el.className ? el.className + ' v-transfer-dom' : 'v-transfer-dom';
-    const parentNode = el.parentNode;
-    if (!parentNode) return;
-    const home = document.createComment('');
-    let hasMovedOut = false;
-
-    if (value !== false) {
-      parentNode.replaceChild(home, el); // moving out, el is no longer in the document
-
-      getTarget(value).appendChild(el); // moving into new place
-
-      hasMovedOut = true;
-    }
-
-    if (!el.__transferDomData) {
-      el.__transferDomData = {
-        parentNode: parentNode,
-        home: home,
-        target: getTarget(value),
-        hasMovedOut: hasMovedOut
-      };
-    }
-  },
-
-  componentUpdated(el, _ref2) {
-    let {
-      value
-    } = _ref2;
-    if (el.dataset && el.dataset.transfer !== 'true') return false; // need to make sure children are done updating (vs. `update`)
-
-    const ref$1 = el.__transferDomData;
-    if (!ref$1) return; // homes.get(el)
-
-    const parentNode = ref$1.parentNode;
-    const home = ref$1.home;
-    const hasMovedOut = ref$1.hasMovedOut; // recall where home is
-
-    if (!hasMovedOut && value) {
-      // remove from document and leave placeholder
-      parentNode.replaceChild(home, el); // append to target
-
-      getTarget(value).appendChild(el);
-      el.__transferDomData = Object.assign({}, el.__transferDomData, {
-        hasMovedOut: true,
-        target: getTarget(value)
-      });
-    } else if (hasMovedOut && value === false) {
-      // previously moved, coming back home
-      parentNode.replaceChild(el, home);
-      el.__transferDomData = Object.assign({}, el.__transferDomData, {
-        hasMovedOut: false,
-        target: getTarget(value)
-      });
-    } else if (value) {
-      // already moved, going somewhere else
-      getTarget(value).appendChild(el);
-    }
-  },
-
-  unbind(el) {
-    if (el.dataset && el.dataset.transfer !== 'true') return false;
-    el.className = el.className.replace('v-transfer-dom', '');
-    const ref$1 = el.__transferDomData;
-    if (!ref$1) return;
-
-    if (el.__transferDomData.hasMovedOut === true) {
-      el.__transferDomData.parentNode && el.__transferDomData.parentNode.appendChild(el);
-    }
-
-    el.__transferDomData = null;
-  }
-
-};
-var TransferDom = directive;
-
-const on = function () {
-  return function (element, event, handler) {
-    let useCapture = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : false;
-
-    if (element && event && handler) {
-      element.addEventListener(event, handler, useCapture);
-    }
-  };
-}();
-const off = function () {
-  return function (element, event, handler) {
-    let useCapture = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : false;
-
-    if (element && event) {
-      element.removeEventListener(event, handler, useCapture);
-    }
-  };
-}();
-
 //
-const prefixCls = 'ui-drawer';
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
 var script$f = {
-  name: 'UiDrawer',
-  directives: {
-    TransferDom
-  },
+  name: 'ui-drawer',
+  inheritAttrs: false,
   props: {
-    value: {
-      type: Boolean,
-      default: false
-    },
-    title: {
-      type: String
-    },
+    value: Boolean,
+    visible: Boolean,
     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: {
+    customClass: {
       type: String
-    },
-    inner: {
-      type: Boolean,
-      default: false
-    },
-    // Whether drag and drop is allowed to adjust width
-    draggable: {
-      type: Boolean,
-      default: false
-    },
-    beforeClose: Function,
-    destroyOnClose: {
-      type: Boolean,
-      default: true
     }
   },
-
-  data() {
-    return {
-      prefixCls: prefixCls,
-      visible: this.value,
-      wrapShow: false,
-      showHead: true,
-      canMove: false,
-      dragWidth: this.width,
-      wrapperWidth: this.width,
-      wrapperLeft: 0,
-      minWidth: 256,
-      key: 0
-    };
-  },
-
   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
-      }];
+    realVisible() {
+      return this.visible || this.value;
     },
 
-    maskClasses() {
-      return [`${prefixCls}-mask`, {
-        [`${prefixCls}-mask-inner`]: this.inner
-      }];
+    realCustomClass() {
+      return `ui-drawer ${this.customClass || ''}`;
     }
 
   },
   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;
-
-      if (!val) {
-        if (this.destroyOnClose) {
-          this.$nextTick(() => {
-            this.key++;
-          });
-        }
-      }
-    },
-
-    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;
+    onUpdateVisible(visible) {
+      this.$emit('input', visible);
+      this.$emit('change', visible);
+      this.$emit('on-visible-change', visible);
     }
 
   }
@@ -8135,85 +7789,16 @@ var __vue_render__$e = function () {
 
   var _c = _vm._self._c || _h;
 
-  return _c('div', {
-    directives: [{
-      name: "transfer-dom",
-      rawName: "v-transfer-dom"
-    }],
-    attrs: {
-      "data-transfer": _vm.transfer
-    }
-  }, [_c('transition', {
+  return _c('el-drawer', _vm._g(_vm._b({
     attrs: {
-      "name": "fade"
-    }
-  }, [_vm.mask ? _c('div', {
-    directives: [{
-      name: "show",
-      rawName: "v-show",
-      value: _vm.visible,
-      expression: "visible"
-    }],
-    class: _vm.maskClasses,
-    style: _vm.maskStyle,
-    on: {
-      "click": _vm.handleMask
-    }
-  }) : _vm._e()]), _vm._v(" "), _c('div', {
-    class: _vm.wrapClasses,
-    on: {
-      "click": _vm.handleWrapClick
-    }
-  }, [_c('transition', {
-    attrs: {
-      "name": 'move-' + _vm.placement
-    }
-  }, [_c('div', {
-    directives: [{
-      name: "show",
-      rawName: "v-show",
-      value: _vm.visible,
-      expression: "visible"
-    }],
-    class: _vm.classes,
-    style: _vm.mainStyles
-  }, [_c('div', {
-    key: _vm.key,
-    ref: "content",
-    class: _vm.contentClasses
-  }, [_vm.closable ? _c('a', {
-    staticClass: "ui-drawer-close",
-    on: {
-      "click": _vm.close
-    }
-  }, [_vm._t("close", function () {
-    return [_c('i', {
-      staticClass: "el-icon-close"
-    })];
-  })], 2) : _vm._e(), _vm._v(" "), _vm.showHead ? _c('div', {
-    class: [_vm.prefixCls + '-header']
-  }, [_vm._t("header", function () {
-    return [_c('div', {
-      class: [_vm.prefixCls + '-header-inner']
-    }, [_vm._v(_vm._s(_vm.title))])];
-  })], 2) : _vm._e(), _vm._v(" "), _c('div', {
-    class: [_vm.prefixCls + '-body'],
-    style: _vm.styles
-  }, [_vm._t("default")], 2)]), _vm._v(" "), _vm.draggable ? _c('div', {
-    staticClass: "ui-drawer-drag",
-    class: {
-      'ui-drawer-drag-left': _vm.placement === 'left'
+      "size": _vm.width,
+      "visible": _vm.realVisible,
+      "custom-class": _vm.realCustomClass
     },
     on: {
-      "mousedown": _vm.handleTriggerMousedown
+      "update:visible": _vm.onUpdateVisible
     }
-  }, [_vm._t("trigger", function () {
-    return [_c('div', {
-      staticClass: "ui-drawer-drag-move-trigger"
-    }, [_c('div', {
-      staticClass: "ui-drawer-drag-move-trigger-point"
-    }, [_c('i'), _c('i'), _c('i'), _c('i'), _c('i')])])];
-  })], 2) : _vm._e()])])], 1)], 1);
+  }, 'el-drawer', _vm.$attrs, false), _vm.$listeners), [_vm._t("default")], 2);
 };
 
 var __vue_staticRenderFns__$e = [];
@@ -8221,8 +7806,8 @@ var __vue_staticRenderFns__$e = [];
 
 const __vue_inject_styles__$f = function (inject) {
   if (!inject) return;
-  inject("data-v-7fdf4d98_0", {
-    source: ".ui-drawer{width:auto;height:100%;position:fixed;top:0}.ui-drawer-inner{position:absolute}.ui-drawer-left{left:0}.ui-drawer-right{right:0}.ui-drawer-hidden{display:none!important}.ui-drawer-wrap{position:fixed;overflow:auto;top:0;right:0;bottom:0;left:0;z-index:1000;-webkit-overflow-scrolling:touch;outline:0}.ui-drawer-wrap-inner{position:absolute;overflow:hidden}.ui-drawer-wrap-dragging{user-select:none}.ui-drawer-wrap *{-webkit-tap-highlight-color:transparent}.ui-drawer-mask{position:fixed;top:0;bottom:0;left:0;right:0;background-color:rgba(55,55,55,.6);height:100%;z-index:1000}.ui-drawer-mask-hidden{display:none}.ui-drawer-mask-inner{position:absolute}.ui-drawer-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)}.ui-drawer-content-no-mask{pointer-events:auto}.ui-drawer-header{border-bottom:1px solid #e8eaec;padding:14px 16px;line-height:1}.ui-drawer-header p,.ui-drawer-header-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}.ui-drawer-close{z-index:1;font-size:12px;position:absolute;right:15px;top:15px;overflow:hidden;cursor:pointer}.ui-drawer-close .el-icon-close{font-size:20px;color:#999;transition:color .2s ease;position:relative;top:1px}.ui-drawer-close .el-icon-close:hover{color:#444}.ui-drawer-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}.ui-drawer-no-header .ui-drawer-body{height:100%}.ui-drawer-no-mask{pointer-events:none}.ui-drawer-no-mask .ui-drawer-drag{pointer-events:auto}.ui-drawer-drag{top:0;height:100%;width:0;position:absolute}.ui-drawer-drag-left{right:0}.ui-drawer-drag-move-trigger{width:8px;height:100px;line-height:100px;position:absolute;top:50%;background:#f3f3f3;transform:translate(-50%,-50%);border-radius:4px/6px;box-shadow:0 0 1px 1px rgba(0,0,0,.2);cursor:col-resize}.ui-drawer-drag-move-trigger-point{display:inline-block;width:50%;transform:translateX(50%)}.ui-drawer-drag-move-trigger-point i{display:block;border-bottom:1px solid silver;padding-bottom:2px}.fade-appear,.fade-enter-active{animation-duration:.15s;animation-fill-mode:both;animation-play-state:paused}.fade-leave-active{animation-duration:.15s;animation-fill-mode:both;animation-play-state:paused}.fade-appear,.fade-enter-active{animation-name:uiFadeInIn;animation-play-state:running}.fade-leave-active{animation-name:uiFadeInOut;animation-play-state:running}.fade-appear,.fade-enter-active{opacity:0;animation-timing-function:linear}.fade-leave-active{animation-timing-function:linear}@keyframes uiFadeIn{0%{opacity:0}100%{opacity:1}}@keyframes ivuFadeOut{0%{opacity:1}100%{opacity:0}}",
+  inject("data-v-f1a8d0b8_0", {
+    source: ".ui-drawer .el-drawer__header{margin:0;padding:14px 16px;height:50px;border-bottom:1px solid #e8eaec;display:flex;flex-direction:row;align-items:center}.ui-drawer .el-drawer__header>span:first-child{color:#17233d}.ui-drawer .el-drawer__body{height:calc(100% - 51px);display:flex;flex-direction:column}",
     map: undefined,
     media: undefined
   });
@@ -8296,20 +7881,6 @@ var script$e = {
     loading: Boolean,
     labelWidth: String,
     labelPosition: String,
-    // 是否将抽屉放置于 body 内
-    transfer: {
-      type: Boolean,
-      default: false
-    },
-    mask: {
-      type: Boolean,
-      default: false
-    },
-    // 是否设置抽屉在某个元素内打开，开启此属性时，应当关闭 transfer 属性
-    inner: {
-      type: Boolean,
-      default: true
-    },
     disabled: {
       type: Boolean,
       default: undefined
@@ -8472,15 +8043,12 @@ var __vue_render__$d = function () {
 
   return _c('ui-drawer', _vm._g(_vm._b({
     attrs: {
-      "class-name": "ui-form-drawer",
-      "value": _vm.visible,
-      "width": _vm.width,
-      "transfer": _vm.transfer,
-      "mask": _vm.mask,
-      "inner": _vm.inner
+      "custom-class": "ui-form-drawer",
+      "visible": _vm.visible,
+      "width": _vm.width
     },
     on: {
-      "on-visible-change": _vm.updateVisible
+      "update:visible": _vm.updateVisible
     }
   }, 'ui-drawer', _vm.$attrs, false), _vm.drawerListeners), [_c('div', {
     directives: [{
@@ -8529,8 +8097,8 @@ var __vue_staticRenderFns__$d = [];
 
 const __vue_inject_styles__$e = function (inject) {
   if (!inject) return;
-  inject("data-v-e849033e_0", {
-    source: ".ui-form-drawer{display:flex;flex-direction:column;padding:0;outline:0}.ui-form-drawer .ui-drawer-body{flex:1;padding:0;overflow:hidden;display:flex;flex-direction:column}.ui-form-drawer .ui-drawer-body>.el-form{flex:1;overflow:auto}.ui-form-drawer .ui-drawer-body>.action-button{flex:none}.ui-form-drawer .ui-form-drawer-wrapper{flex:1;overflow:hidden}.ui-form-drawer .ui-form-drawer-wrapper .el-form{width:100%;height:100%;overflow:auto;padding:16px;box-sizing:border-box}.ui-form-drawer .action-button{flex:none;padding:16px;border-top:1px solid #e8eaec;display:flex;flex-direction:row-reverse}.ui-form-drawer .action-button button+button{margin-right:16px}.ui-form-drawer .action-button::after{content:'';clear:both}",
+  inject("data-v-168074a3_0", {
+    source: ".ui-form-drawer{display:flex;flex-direction:column;padding:0;outline:0}.ui-form-drawer .el-drawer-body{flex:1;padding:0;overflow:hidden;display:flex;flex-direction:column}.ui-form-drawer .el-drawer-body>.el-form{flex:1;overflow:auto}.ui-form-drawer .el-drawer-body>.action-button{flex:none}.ui-form-drawer .ui-form-drawer-wrapper{flex:1;overflow:hidden}.ui-form-drawer .ui-form-drawer-wrapper .el-form{width:100%;height:100%;overflow:auto;padding:16px;box-sizing:border-box}.ui-form-drawer .action-button{flex:none;padding:16px;border-top:1px solid #e8eaec;display:flex;flex-direction:row-reverse}.ui-form-drawer .action-button button+button{margin-right:16px}.ui-form-drawer .action-button::after{content:'';clear:both}",
     map: undefined,
     media: undefined
   });