@web-utils/component 2.7.36 → 2.8.0

package/dist/components/fy-draggable/index.js

@@ -1,505 +0,0 @@
-import { s as setPx, w as getFixed } from "../../chunks/util.b0d0b0ad.js";
-import { n as normalizeComponent } from "../../chunks/vueComponentNormalizer.9c6b8b3d.js";
-var render = function() {
-  var _vm = this;
-  var _h = _vm.$createElement;
-  var _c = _vm._self._c || _h;
-  return _c("div", {
-    class: {
-      "avue-draggable__active": (_vm.active || _vm.overActive) && !_vm.readonly,
-      "avue-draggable__move": _vm.moveActive,
-      "avue-draggable__click": _vm.disabled
-    },
-    style: _vm.styleName,
-    on: {
-      "mousedown": function($event) {
-        $event.stopPropagation();
-        return _vm.handleMove.apply(null, arguments);
-      },
-      "mouseover": function($event) {
-        $event.stopPropagation();
-        return _vm.handleOver.apply(null, arguments);
-      },
-      "mouseout": function($event) {
-        $event.stopPropagation();
-        return _vm.handleOut.apply(null, arguments);
-      }
-    }
-  }, [_c("ElInput", {
-    ref: "input",
-    staticClass: "avue-draggable__focus",
-    model: {
-      value: _vm.value,
-      callback: function($$v) {
-        _vm.value = $$v;
-      },
-      expression: "value"
-    }
-  }), _c("div", {
-    ref: "wrapper",
-    staticClass: "avue-draggable__wrapper"
-  }, [(_vm.active || _vm.overActive || _vm.moveActive) && !_vm.readonly ? [_c("div", {
-    staticClass: "avue-draggable__line['left'])",
-    style: _vm.styleLineName
-  }), _c("div", {
-    staticClass: "avue-draggable__line['top'])",
-    style: _vm.styleLineName
-  }), _c("div", {
-    staticClass: "avue-draggable__line['label'])",
-    style: _vm.styleLabelName
-  }, [_vm._v(" " + _vm._s(_vm.baseLeft) + "," + _vm._s(_vm.baseTop) + " ")])] : _vm._e(), !_vm.readonly ? [_vm._l(_vm.rangeList, function(item, s) {
-    return [_vm.active ? _c("div", {
-      key: s,
-      staticClass: "avue-draggable__range[item.classname])",
-      style: [_vm.styleRangeName, _vm.getRangeStyle(item.classname)],
-      on: {
-        "mousedown": function($event) {
-          $event.stopPropagation();
-          return _vm.rangeMove($event, item.classname);
-        }
-      }
-    }) : _vm._e()];
-  })] : _vm._e(), _c("div", {
-    directives: [{
-      name: "show",
-      rawName: "v-show",
-      value: _vm.active || _vm.overActive,
-      expression: "active || overActive"
-    }],
-    staticClass: "avue-draggable__menu",
-    style: _vm.styleMenuName
-  }, [_vm._t("menu", null, {
-    "zIndex": _vm.zIndex,
-    "index": _vm.index
-  })], 2), _c("div", {
-    ref: "item",
-    staticClass: "avue-draggable__item"
-  }, [_vm._t("default")], 2), !_vm.disabled && _vm.mask ? _c("div", {
-    staticClass: "avue-draggable__mask"
-  }) : _vm._e()], 2)], 1);
-};
-var staticRenderFns = [];
-const FyDraggable_vue_vue_type_style_index_0_lang = "";
-const __vue2_script = {
-  name: "FyDraggable",
-  props: {
-    index: {
-      type: [String, Number]
-    },
-    mask: {
-      type: Boolean,
-      default: true
-    },
-    scale: {
-      type: Number,
-      default: 1
-    },
-    readonly: {
-      type: Boolean,
-      default: false
-    },
-    resize: {
-      type: Boolean,
-      default: true
-    },
-    disabled: {
-      type: Boolean,
-      default: false
-    },
-    lock: {
-      type: Boolean,
-      default: false
-    },
-    step: {
-      type: Number,
-      default: 1
-    },
-    zIndex: {
-      type: [Number, String],
-      default: 1
-    },
-    left: {
-      type: Number,
-      default: 0
-    },
-    top: {
-      type: Number,
-      default: 0
-    },
-    width: {
-      type: Number
-    },
-    height: {
-      type: Number
-    }
-  },
-  data() {
-    return {
-      first: true,
-      value: "",
-      baseWidth: 0,
-      baseHeight: 0,
-      baseLeft: 0,
-      baseTop: 0,
-      children: {},
-      moveActive: false,
-      overActive: false,
-      rangeActive: false,
-      active: false,
-      keyDown: null,
-      rangeList: [
-        {
-          classname: "left"
-        },
-        {
-          classname: "right"
-        },
-        {
-          classname: "top"
-        },
-        {
-          classname: "bottom"
-        },
-        {
-          classname: "top-left"
-        },
-        {
-          classname: "top-right"
-        },
-        {
-          classname: "bottom-left"
-        },
-        {
-          classname: "bottom-right"
-        }
-      ]
-    };
-  },
-  computed: {
-    scaleVal() {
-      return this.scale;
-    },
-    styleMenuName() {
-      return {
-        transformOrigin: "0 0",
-        transform: `scale(${this.scaleVal})`
-      };
-    },
-    styleLineName() {
-      return {
-        borderWidth: setPx(this.scaleVal)
-      };
-    },
-    styleRangeName() {
-      const calc = 10 * this.scaleVal;
-      return {
-        width: setPx(calc),
-        height: setPx(calc)
-      };
-    },
-    styleLabelName() {
-      return {
-        fontSize: setPx(18 * this.scaleVal)
-      };
-    },
-    styleName() {
-      return Object.assign(
-        (() => {
-          if (this.active) {
-            return Object.assign(
-              {
-                zIndex: 9999
-              },
-              this.styleLineName
-            );
-          }
-          return { zIndex: this.zIndex };
-        })(),
-        {
-          top: setPx(this.baseTop),
-          left: setPx(this.baseLeft),
-          width: setPx(this.baseWidth),
-          height: setPx(this.baseHeight)
-        }
-      );
-    }
-  },
-  watch: {
-    active(val) {
-      if (val) {
-        this.handleKeydown();
-      } else {
-        document.onkeydown = this.keyDown;
-      }
-    },
-    width(val) {
-      this.baseWidth = getFixed(val) || this.children.offsetWidth;
-    },
-    height(val) {
-      this.baseHeight = getFixed(val) || this.children.offsetHeight;
-    },
-    left(val) {
-      this.baseLeft = getFixed(val);
-    },
-    top(val) {
-      this.baseTop = getFixed(val);
-    },
-    baseWidth(val) {
-      this.$refs.wrapper.style.width = setPx(val);
-      if (this.resize && this.children.style) {
-        this.children.style.width = setPx(val);
-      }
-    },
-    baseHeight(val) {
-      this.$refs.wrapper.style.height = setPx(val);
-      if (this.resize && this.children.style) {
-        this.children.style.height = setPx(val);
-      }
-    },
-    baseLeft(n, o) {
-      if (this.first)
-        return;
-      this.setMove(n - o, 0);
-    },
-    baseTop(n, o) {
-      if (this.first)
-        return;
-      this.setMove(0, n - o);
-    }
-  },
-  mounted() {
-    this.init();
-  },
-  methods: {
-    init() {
-      this.children = this.$refs.item.firstChild;
-      this.baseWidth = getFixed(this.width) || this.children.offsetWidth;
-      this.baseHeight = getFixed(this.height) || this.children.offsetHeight;
-      this.baseLeft = getFixed(this.left);
-      this.baseTop = getFixed(this.top);
-      this.keyDown = document.onkeydown;
-      this.$nextTick(() => {
-        this.first = false;
-      });
-    },
-    setMove(left, top) {
-      this.$emit("move", {
-        index: this.index,
-        left,
-        top
-      });
-    },
-    setLeft(left) {
-      this.baseLeft = left;
-    },
-    setTop(top) {
-      this.baseTop = top;
-    },
-    getRangeStyle(postion) {
-      const calc = 10 * this.scaleVal / 2;
-      const result = {};
-      const list = postion.split("-");
-      list.forEach((ele) => {
-        result[ele] = setPx(-calc);
-      });
-      return result;
-    },
-    setOverActive(val) {
-      this.overActive = val;
-    },
-    setActive(val) {
-      this.active = val;
-    },
-    rangeMove(e, position) {
-      if (this.disabled || this.lock)
-        return;
-      let x, y;
-      let xp, yp;
-      let xc, yc;
-      this.rangeActive = true;
-      this.handleMouseDown();
-      let disX = e.clientX;
-      let disY = e.clientY;
-      document.onmousemove = (e2) => {
-        this.moveActive = true;
-        if (position === "right") {
-          x = true;
-          y = false;
-        } else if (position === "left") {
-          x = true;
-          xp = true;
-          xc = true;
-          y = false;
-        } else if (position === "top") {
-          x = false;
-          y = true;
-          yp = true;
-          yc = true;
-        } else if (position === "bottom") {
-          x = false;
-          y = true;
-        } else if (position === "bottom-right") {
-          x = true;
-          y = true;
-        } else if (position === "bottom-left") {
-          x = true;
-          y = true;
-          xp = true;
-          xc = true;
-        } else if (position === "top-right") {
-          x = true;
-          y = true;
-          yp = true;
-          yc = true;
-        } else if (position === "top-left") {
-          x = true;
-          y = true;
-          xp = true;
-          xc = true;
-          yp = true;
-          yc = true;
-        }
-        const left = e2.clientX - disX;
-        const top = e2.clientY - disY;
-        disX = e2.clientX;
-        disY = e2.clientY;
-        if (x) {
-          let calc = left * this.step;
-          if (xc)
-            calc = -calc;
-          if (xp)
-            this.baseLeft = getFixed(this.baseLeft - calc);
-          this.baseWidth = getFixed(this.baseWidth + calc);
-        }
-        if (y) {
-          let calc = top * this.step;
-          if (yc)
-            calc = -calc;
-          if (yp)
-            this.baseTop = getFixed(this.baseTop - calc);
-          this.baseHeight = getFixed(this.baseHeight + calc);
-        }
-      };
-      this.handleClear();
-    },
-    handleOut() {
-      this.overActive = false;
-      this.$emit("out", {
-        index: this.index,
-        width: this.baseWidth,
-        height: this.baseHeight,
-        left: this.baseLeft,
-        top: this.baseTop
-      });
-    },
-    handleOver() {
-      if (this.disabled)
-        return;
-      this.overActive = true;
-      this.$emit("over", {
-        index: this.index,
-        width: this.baseWidth,
-        height: this.baseHeight,
-        left: this.baseLeft,
-        top: this.baseTop
-      });
-    },
-    handleMove(e) {
-      if (this.disabled || this.lock)
-        return;
-      setTimeout(() => {
-        this.$refs.input.focus();
-      });
-      this.active = true;
-      this.handleMouseDown();
-      let disX = e.clientX;
-      let disY = e.clientY;
-      document.onmousemove = (e2) => {
-        const left = e2.clientX - disX;
-        const top = e2.clientY - disY;
-        disX = e2.clientX;
-        disY = e2.clientY;
-        this.baseLeft = getFixed(this.baseLeft + left * this.step);
-        this.baseTop = getFixed(this.baseTop + top * this.step);
-      };
-      this.handleClear();
-    },
-    handleClear() {
-      document.onmouseup = () => {
-        document.onmousemove = null;
-        document.onmouseup = null;
-        this.handleMouseUp();
-      };
-    },
-    handleKeydown() {
-      document.onkeydown = (event) => {
-        const e = event || window.event || arguments.callee.caller.arguments[0];
-        const step = 1 * this.step;
-        if (this.$refs.input.focused) {
-          if (e && e.keyCode == 38) {
-            this.baseTop = getFixed(this.baseTop - step);
-          } else if (e && e.keyCode == 37) {
-            this.baseLeft = getFixed(this.baseLeft - step);
-          } else if (e && e.keyCode == 40) {
-            this.baseTop = getFixed(this.baseTop + step);
-          } else if (e && e.keyCode == 39) {
-            this.baseLeft = getFixed(this.baseLeft + step);
-          }
-          event.stopPropagation();
-          event.preventDefault();
-          this.$emit("blur", {
-            index: this.index,
-            width: this.baseWidth,
-            height: this.baseHeight,
-            left: this.baseLeft,
-            top: this.baseTop
-          });
-          this.keyDown && this.keyDown(event);
-        }
-      };
-    },
-    handleMouseDown() {
-      this.moveActive = true;
-      this.$emit("focus", {
-        index: this.index,
-        width: this.baseWidth,
-        height: this.baseHeight,
-        left: this.baseLeft,
-        top: this.baseTop
-      });
-    },
-    handleMouseUp() {
-      this.moveActive = false;
-      this.rangeActive = false;
-      this.$emit("blur", {
-        index: this.index,
-        width: this.baseWidth,
-        height: this.baseHeight,
-        left: this.baseLeft,
-        top: this.baseTop
-      });
-    }
-  }
-};
-const __cssModules = {};
-var __component__ = /* @__PURE__ */ normalizeComponent(
-  __vue2_script,
-  render,
-  staticRenderFns,
-  false,
-  __vue2_injectStyles,
-  null,
-  null,
-  null
-);
-function __vue2_injectStyles(context) {
-  for (let o in __cssModules) {
-    this[o] = __cssModules[o];
-  }
-}
-const FyDraggable = /* @__PURE__ */ function() {
-  return __component__.exports;
-}();
-export {
-  FyDraggable as default
-};

package/dist/components/fy-draggable/style.css

@@ -1,136 +0,0 @@
-/* 全局公共颜色配置 */ /* 全局公共尺寸配置 */
-/* 应用头部高度 */
-/* 页面宽度 */
-/* 侧栏宽度 */
-/* 标签高度 */
-/* 页面头部工具条高度 */
-.avue-draggable {
-  padding: 10px;
-  position: absolute;
-  cursor: move;
-  -webkit-tap-highlight-color: transparent;
-  user-select: none;
-}
-.avue-draggable__focus {
-  opacity: 0;
-  position: absolute !important;
-  top: 0;
-  left: 0;
-  z-index: -1024;
-}
-.avue-draggable__mask {
-  width: 100%;
-  height: 100%;
-  border: 0;
-  position: absolute;
-  top: 0;
-  right: 0;
-  bottom: 0;
-  left: 0;
-  z-index: 1;
-}
-.avue-draggable--active {
-  cursor: move;
-  border: 1px dashed #09f;
-  background-color: rgba(115, 170, 229, 0.5);
-}
-.avue-draggable--move {
-  opacity: 0.6;
-  background-color: rgba(115, 170, 229, 0.5);
-}
-.avue-draggable--click {
-  cursor: pointer;
-}
-.avue-draggable__line--left {
-  position: absolute;
-  border-top: 1px dashed #09f;
-  width: 10000px;
-  height: 0;
-  top: 0;
-  transform: translateX(-100%);
-}
-.avue-draggable__line--top {
-  position: absolute;
-  border-left: 1px dashed #09f;
-  width: 0;
-  height: 10000px;
-  left: 0;
-  transform: translateY(-100%);
-}
-.avue-draggable__line--label {
-  top: -5px;
-  left: -8px;
-  position: absolute;
-  padding: 5px;
-  transform: translate(-100%, -100%);
-  color: #09f;
-  font-size: 18px;
-  white-space: nowrap;
-  cursor: move;
-}
-.avue-draggable__menu {
-  position: absolute;
-  top: 0px;
-  left: 0px;
-  background-color: #409EFF;
-  font-size: 25px;
-  color: #fff;
-  z-index: 9999;
-  cursor: pointer;
-}
-.avue-draggable__range {
-  position: absolute;
-  width: 10px;
-  height: 10px;
-  border-radius: 100%;
-  z-index: 9999;
-  background-color: #09f;
-}
-.avue-draggable__range--left, .avue-draggable__range--right {
-  top: 50%;
-  transform: translateY(-50%);
-}
-.avue-draggable__range--left:hover, .avue-draggable__range--right:hover {
-  cursor: ew-resize;
-}
-.avue-draggable__range--left {
-  left: -6px;
-}
-.avue-draggable__range--right {
-  right: -6px;
-}
-.avue-draggable__range--top, .avue-draggable__range--bottom {
-  left: 50%;
-  transform: translateX(-50%);
-}
-.avue-draggable__range--top:hover, .avue-draggable__range--bottom:hover {
-  cursor: ns-resize;
-}
-.avue-draggable__range--top {
-  top: -6px;
-}
-.avue-draggable__range--bottom {
-  bottom: -6px;
-}
-.avue-draggable__range--bottom-right:hover, .avue-draggable__range--top-left:hover {
-  cursor: nwse-resize;
-}
-.avue-draggable__range--bottom-left:hover, .avue-draggable__range--top-right:hover {
-  cursor: nesw-resize;
-}
-.avue-draggable__range--top-right {
-  top: -6px;
-  right: -6px;
-}
-.avue-draggable__range--top-left {
-  top: -6px;
-  left: -6px;
-}
-.avue-draggable__range--bottom-right {
-  bottom: -6px;
-  right: -6px;
-}
-.avue-draggable__range--bottom-left {
-  bottom: -6px;
-  left: -6px;
-}