@fangzhongya/fang-ui 0.0.3 → 0.0.5

package/dist/directives/adjust/index.js

@@ -0,0 +1,556 @@
+import { lineToSmallHump } from "@fangzhongya/utils/name/lineToSmallHump";
+import { getCss } from "@fangzhongya/utils/css/getCss";
+import { splitUpper } from "@fangzhongya/utils/basic/string/splitUpper";
+import { shiftEvent } from "@fangzhongya/utils/dom/getShiftEvent";
+import { setCss } from "@fangzhongya/utils/css/setCss";
+const interval = 8;
+const interval2 = 14;
+const overstep = 1e3;
+const unit = "px";
+function getPosition(el) {
+  const keys = ["left", "right", "top", "bottom", "width", "height"];
+  const obj = {};
+  keys.forEach((key) => {
+    if (el) {
+      obj[key] = Number(getCss(el, key).replace(/[a-z|A-Z]*$/, ""));
+    } else {
+      obj[key] = 0;
+    }
+  });
+  return obj;
+}
+function getNext(el, paren) {
+  if (!paren) {
+    paren = el.parentElement || el;
+  }
+  const cs = paren.childNodes;
+  let index = 0;
+  let k = cs.length;
+  for (; index < cs.length; index++) {
+    const element = cs[index];
+    if (element === el) {
+      k = index;
+    }
+    if (k < index && element.nodeType == 1) {
+      break;
+    }
+  }
+  return cs[index];
+}
+function getFront(el, paren) {
+  if (!paren) {
+    paren = el.parentElement || el;
+  }
+  const cs = paren.childNodes;
+  let index = cs.length - 1;
+  let k = -1;
+  for (; index >= 0; index--) {
+    const element = cs[index];
+    if (element === el) {
+      k = index;
+    }
+    if (k > index && element.nodeType == 1) {
+      break;
+    }
+  }
+  return cs[index];
+}
+function getAdjoin(el, type) {
+  if (type == "bottom" || type == "right") {
+    return getNext(el);
+  } else {
+    return getFront(el);
+  }
+}
+function getDomHeight() {
+  const dom = document.querySelector(".v-adjust-xux-height");
+  if (dom) {
+    return dom;
+  } else {
+    const xux = document.createElement("div");
+    xux.className = "v-adjust-xux-height";
+    xux.style.zIndex = "100000";
+    xux.style.position = "fixed";
+    xux.style.left = "0";
+    xux.style.right = "0";
+    xux.style.height = "0";
+    xux.style.display = "none";
+    xux.style.borderBottom = "3px dashed #1d8bfa";
+    document.body.appendChild(xux);
+    return xux;
+  }
+}
+function getDomWidth() {
+  const dom = document.querySelector(".v-adjust-xux-width");
+  if (dom) {
+    return dom;
+  } else {
+    const xux = document.createElement("div");
+    xux.className = "v-adjust-xux-width";
+    xux.style.zIndex = "100000";
+    xux.style.position = "fixed";
+    xux.style.top = "0";
+    xux.style.bottom = "0";
+    xux.style.width = "0";
+    xux.style.display = "none";
+    xux.style.borderLeft = "3px dashed #1d8bfa";
+    document.body.appendChild(xux);
+    return xux;
+  }
+}
+function getCursor(type) {
+  if (type == "bottom" || type == "top") {
+    return "row-resize";
+  } else if (type == "right" || type == "left") {
+    return "col-resize";
+  } else if (type == "topRight") {
+    return "ne-resize";
+  } else if (type == "topLeft") {
+    return "nw-resize";
+  } else if (type == "bottomRight") {
+    return "se-resize";
+  } else if (type == "bottomLeft") {
+    return "sw-resize";
+  } else {
+    return "";
+  }
+}
+function getX(key, disabled) {
+  const ks = splitUpper(key);
+  if (ks.length == 1) {
+    if (key == "bottom" || key == "top") {
+      return (event, rect) => {
+        if (disabled && disabled()) {
+          return overstep;
+        }
+        return rect[key] - event.pageY;
+      };
+    } else if (key == "right" || key == "left") {
+      return (event, rect) => {
+        if (disabled && disabled()) {
+          return overstep;
+        }
+        return rect[key] - event.pageX;
+      };
+    } else {
+      return (event, rect) => {
+        if (disabled && disabled()) {
+          return overstep;
+        }
+        return 0;
+      };
+    }
+  } else {
+    const k1 = ks[0];
+    const k2 = ks[1];
+    return (event, rect) => {
+      if (disabled && disabled()) {
+        return overstep;
+      }
+      const y = rect[k1] - event.pageY;
+      const x = rect[k2] - event.pageX;
+      if (x < interval2 && x > 0 - interval2 && y < interval && y > 0 - interval2) {
+        return 0;
+      } else {
+        return overstep;
+      }
+    };
+  }
+}
+function getDomsObj(key) {
+  if (key == "bottom" || key == "top") {
+    const dom = getDomHeight();
+    return {
+      show: () => {
+        setCss(dom, "display", "block");
+      },
+      set: (top) => {
+        setCss(dom, "top", top + unit);
+      }
+    };
+  } else if (key == "right" || key == "left") {
+    const dom = getDomWidth();
+    return {
+      show: () => {
+        setCss(dom, "display", "block");
+      },
+      set: (top) => {
+        setCss(dom, "left", top + unit);
+      }
+    };
+  } else {
+    const dom1 = getDomWidth();
+    const dom2 = getDomHeight();
+    return {
+      show: () => {
+        setCss(dom1, "display", "block");
+        setCss(dom2, "display", "block");
+      },
+      set: (left, top) => {
+        setCss(dom1, "left", left + unit);
+        setCss(dom2, "top", top + unit);
+      }
+    };
+  }
+}
+function getMousemove(key, set) {
+  if (key == "bottom") {
+    return (mousedownEvent, rect, event) => {
+      const y = event.clientY - mousedownEvent.clientY + rect.bottom;
+      set(y, 0);
+    };
+  } else if (key == "top") {
+    return (mousedownEvent, rect, event) => {
+      const y = event.clientY - mousedownEvent.clientY + rect.top;
+      set(y, 0);
+    };
+  } else if (key == "right") {
+    return (mousedownEvent, rect, event) => {
+      const y = event.clientX - mousedownEvent.clientX + rect.right;
+      set(y, 0);
+    };
+  } else if (key == "left") {
+    return (mousedownEvent, rect, event) => {
+      const y = event.clientX - mousedownEvent.clientX + rect.left;
+      set(y, 0);
+    };
+  } else if (key == "topRight") {
+    return (mousedownEvent, rect, event) => {
+      const x = event.clientX - mousedownEvent.clientX + rect.right;
+      const y = event.clientY - mousedownEvent.clientY + rect.top;
+      set(x, y);
+    };
+  } else if (key == "bottomRight") {
+    return (mousedownEvent, rect, event) => {
+      const x = event.clientX - mousedownEvent.clientX + rect.right;
+      const y = event.clientY - mousedownEvent.clientY + rect.bottom;
+      set(x, y);
+    };
+  } else if (key == "topLeft") {
+    return (mousedownEvent, rect, event) => {
+      const x = event.clientX - mousedownEvent.clientX + rect.left;
+      const y = event.clientY - mousedownEvent.clientY + rect.top;
+      set(x, y);
+    };
+  } else if (key == "bottomLeft") {
+    return (mousedownEvent, rect, event) => {
+      const x = event.clientX - mousedownEvent.clientX + rect.left;
+      const y = event.clientY - mousedownEvent.clientY + rect.bottom;
+      set(x, y);
+    };
+  } else {
+    return (mousedownEvent, rect, event) => {
+      const x = event.clientX - mousedownEvent.clientX + rect.right;
+      const y = event.clientY - mousedownEvent.clientY + rect.top;
+      set(x, y);
+    };
+  }
+}
+function getValue(key, adjoin, position) {
+  if (key == "bottom") {
+    return (dom, z, y, obj, apo) => {
+      const v = obj.height + z;
+      if (v > 0) {
+        setCss(dom, "height", v + unit);
+        if (adjoin) {
+          setCss(adjoin, "height", apo.height - z + unit);
+        }
+      }
+    };
+  } else if (key == "top") {
+    return (dom, z, y, obj, apo) => {
+      const v = obj.height + z;
+      if (v > 0) {
+        setCss(dom, "height", v + unit);
+        if (adjoin) {
+          setCss(adjoin, "height", apo.height - z + unit);
+        }
+        if (position) {
+          setCss(dom, "top", obj.top - z + unit);
+        }
+      }
+    };
+  } else if (key == "right") {
+    return (dom, z, y, obj, apo) => {
+      const v = obj.width + z;
+      if (v > 0) {
+        setCss(dom, "width", v + unit);
+        if (adjoin) {
+          setCss(adjoin, "width", apo.width - z + unit);
+        }
+      }
+    };
+  } else if (key == "left") {
+    return (dom, z, y, obj, apo) => {
+      const v = obj.width + z;
+      if (v > 0) {
+        setCss(dom, "width", v + unit);
+        if (adjoin) {
+          setCss(adjoin, "width", apo.width - z + unit);
+        }
+        if (position) {
+          setCss(dom, "left", obj.left - z + unit);
+        }
+      }
+    };
+  } else if (key == "topRight") {
+    return (dom, x, y, obj, apo) => {
+      const v = obj.width + x;
+      if (v > 0) {
+        setCss(dom, "width", v + unit);
+        if (adjoin) {
+          setCss(adjoin, "width", apo.width - x + unit);
+        }
+      }
+      const n = obj.height + y;
+      if (n > 0) {
+        setCss(dom, "height", n + unit);
+        if (adjoin) {
+          setCss(adjoin, "height", apo.height - y + unit);
+        }
+        if (position) {
+          setCss(dom, "top", obj.top - y + unit);
+        }
+      }
+    };
+  } else if (key == "bottomRight") {
+    return (dom, x, y, obj, apo) => {
+      const v = obj.width + x;
+      if (v > 0) {
+        setCss(dom, "width", v + unit);
+        if (adjoin) {
+          setCss(adjoin, "width", apo.width - x + unit);
+        }
+      }
+      const n = obj.height + y;
+      if (n > 0) {
+        setCss(dom, "height", n + unit);
+        if (adjoin) {
+          setCss(adjoin, "height", apo.height - y + unit);
+        }
+      }
+    };
+  } else if (key == "topLeft") {
+    return (dom, x, y, obj, apo) => {
+      const v = obj.width + x;
+      if (v > 0) {
+        setCss(dom, "width", v + unit);
+        if (adjoin) {
+          setCss(adjoin, "width", apo.width - x + unit);
+        }
+        if (position) {
+          setCss(dom, "left", obj.left - x + unit);
+        }
+      }
+      const n = obj.height + y;
+      if (n > 0) {
+        setCss(dom, "height", n + unit);
+        if (adjoin) {
+          setCss(adjoin, "height", apo.height - y + unit);
+        }
+        if (position) {
+          setCss(dom, "top", obj.top - y + unit);
+        }
+      }
+    };
+  } else if (key == "bottomLeft") {
+    return (dom, x, y, obj, apo) => {
+      const v = obj.width + x;
+      if (v > 0) {
+        setCss(dom, "width", v + unit);
+        if (adjoin) {
+          setCss(adjoin, "width", apo.width - x + unit);
+        }
+        if (position) {
+          setCss(dom, "left", obj.left - x + unit);
+        }
+      }
+      const n = obj.height + y;
+      if (n > 0) {
+        setCss(dom, "height", n + unit);
+        if (adjoin) {
+          setCss(adjoin, "height", apo.height - y + unit);
+        }
+      }
+    };
+  } else {
+    return (dom, z, y, obj, apo) => {
+    };
+  }
+}
+const types = [
+  "bottom",
+  "top",
+  "right",
+  "left",
+  "topRight",
+  "bottomRight",
+  "topLeft",
+  "bottomLeft"
+];
+function getAdjustObj(el, key, param) {
+  var _a;
+  key = lineToSmallHump(key);
+  let obj = {};
+  if (param.adjoin) {
+    if (typeof param.adjoin == "boolean") {
+      obj.adjoin = getAdjoin(el, key);
+    } else if (typeof param.adjoin == "string") {
+      obj.adjoin = (_a = el.parentElement) == null ? void 0 : _a.querySelector(param.adjoin);
+    } else {
+      obj.adjoin = param.adjoin;
+    }
+  }
+  obj.cursor = getCursor(key);
+  obj.domObj = getDomsObj(key);
+  obj.setMousemove = getMousemove(key, obj.domObj.set);
+  obj.setMousedown = (mousedownEvent) => {
+    if (key == "bottom" || key == "top") {
+      obj.domObj.set(mousedownEvent.clientY, 0);
+    } else if (key == "right" || key == "left") {
+      obj.domObj.set(mousedownEvent.clientX, 0);
+    } else {
+      obj.domObj.set(mousedownEvent.clientX, mousedownEvent.clientY);
+    }
+    obj.domObj.show();
+  };
+  obj.setValue = getValue(key, obj.adjoin, param.position);
+  obj.setMouseup = (mousedownEvent, event, ecs, acs) => {
+    let x = 0;
+    let y = 0;
+    if (key == "bottom") {
+      x = event.clientY - mousedownEvent.clientY;
+    } else if (key == "top") {
+      x = mousedownEvent.clientY - event.clientY;
+    } else if (key == "right") {
+      x = event.clientX - mousedownEvent.clientX;
+    } else if (key == "left") {
+      x = mousedownEvent.clientX - event.clientX;
+    } else if (key == "topRight") {
+      y = mousedownEvent.clientY - event.clientY;
+      x = event.clientX - mousedownEvent.clientX;
+    } else if (key == "bottomRight") {
+      y = event.clientY - mousedownEvent.clientY;
+      x = event.clientX - mousedownEvent.clientX;
+    } else if (key == "topLeft") {
+      y = mousedownEvent.clientY - event.clientY;
+      x = mousedownEvent.clientX - event.clientX;
+    } else if (key == "bottomLeft") {
+      y = event.clientY - mousedownEvent.clientY;
+      x = mousedownEvent.clientX - event.clientX;
+    }
+    obj.setValue(el, x, y, ecs, acs);
+  };
+  const setX = getX(key, param.getDisabled);
+  return (event, rect) => {
+    const x = setX(event, rect);
+    if (x < interval && x > 0 - interval) {
+      return obj;
+    }
+  };
+}
+function getArr(obj, el) {
+  const arr = obj.all ? types : Object.keys(obj);
+  return arr.sort((a, b) => {
+    return b.length - a.length;
+  }).map((key) => {
+    const v = obj.all ? obj.all : obj[key];
+    return getAdjustObj(el, key, v);
+  });
+}
+const vAdjust = {
+  name: "Adjust",
+  mounted(el, binding) {
+    const value = binding.value;
+    const often = value.often;
+    delete value.often;
+    if (value && Object.keys(value).length > 0) {
+      let getVobj = function(e) {
+        let is = true;
+        for (let index = 0; index < arr.length; index++) {
+          const v = arr[index](e, eps);
+          if (v) {
+            vobj = v;
+            isCur = true;
+            is = false;
+            bodyStyle.cursor = vobj.cursor;
+            return true;
+          }
+        }
+        if (is) {
+          isCur = false;
+          bodyStyle.cursor = cursor;
+          return false;
+        }
+      }, remove = function() {
+        bodyStyle.cursor = cursor;
+        status = true;
+        isCur = false;
+        setCss(getDomHeight(), "display", "none");
+        setCss(getDomWidth(), "display", "none");
+      };
+      const arr = getArr(value, el);
+      let vobj;
+      const bodyStyle = document.body.style;
+      const cursor = bodyStyle.cursor;
+      let status = true;
+      let isCur = false;
+      let eps;
+      let ecs;
+      let acs;
+      const mousemove = (e) => {
+        if (status) {
+          eps = el.getBoundingClientRect();
+          getVobj(e);
+        }
+      };
+      const mouseout = (e) => {
+        if (status) {
+          remove();
+        }
+      };
+      let mousedownEvent;
+      const handleMouseMove = (event) => {
+        vobj.setMousemove(mousedownEvent, eps, event);
+        if (often) {
+          vobj.setMouseup(mousedownEvent, event, ecs, acs);
+        }
+      };
+      const handleMouseUp = (event) => {
+        if (isCur) {
+          vobj.setMouseup(mousedownEvent, event, ecs, acs);
+        }
+        remove();
+      };
+      const mousedown = (e, type) => {
+        if (isCur) {
+          mousedownEvent = e;
+          ecs = getPosition(el);
+          acs = getPosition(vobj.adjoin);
+          status = false;
+          vobj.setMousedown(e);
+          bodyStyle.cursor = vobj.cursor;
+          shiftEvent(type, document, handleMouseMove, handleMouseUp);
+        }
+      };
+      el.addEventListener("mousemove", mousemove);
+      el.addEventListener("mouseout", mouseout);
+      el.addEventListener("touchstart", (e) => {
+        const changedTouches = e.changedTouches[0];
+        eps = el.getBoundingClientRect();
+        const is = getVobj(changedTouches);
+        if (is) {
+          mousedown(changedTouches, "touch");
+        }
+      });
+      el.addEventListener("mousedown", (e) => {
+        if (isCur) {
+          mousedown(e, "mouse");
+        }
+      });
+    }
+  }
+};
+export {
+  vAdjust as default
+};

package/dist/directives/drag/index.cjs

@@ -0,0 +1,78 @@
+"use strict";
+Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: "Module" } });
+const getCss = require("@fangzhongya/utils/css/getCss");
+const setCss = require("@fangzhongya/utils/css/setCss");
+const getLocus = require("@fangzhongya/utils/dom/getLocus");
+const getShiftEvent = require("@fangzhongya/utils/dom/getShiftEvent");
+const interval = 0;
+function getPosition(el) {
+  const keys = ["left", "right", "top", "bottom", "width", "height"];
+  const obj = {};
+  keys.forEach((key) => {
+    obj[key] = Number(getCss.getCss(el, key).replace(/[a-z|A-Z]*$/, ""));
+  });
+  return obj;
+}
+function setDom(dom, el, value) {
+  if (dom) {
+    let ecs;
+    let mousedownEvent;
+    const bodyStyle = document.body.style;
+    const cursor = bodyStyle.cursor;
+    const setValue = (event) => {
+      const x = event.clientX - mousedownEvent.clientX;
+      const y = event.clientY - mousedownEvent.clientY;
+      setCss.setCss(el, {
+        left: ecs.left + x + "px",
+        top: ecs.top + y + "px"
+      });
+    };
+    const handleMouseMove = (event) => {
+      if (typeof value.often == "undefined" || value.often) {
+        setValue(event);
+      }
+    };
+    const handleMouseUp = (event) => {
+      setValue(event);
+      if (value.onMouseup) {
+        value.onMouseup(
+          event,
+          mousedownEvent,
+          getPosition(el),
+          getLocus.getLocus(event, mousedownEvent)
+        );
+      }
+      bodyStyle.cursor = cursor;
+    };
+    const mousedown = (e) => {
+      const eps = dom.getBoundingClientRect();
+      if (e.clientX > eps.right - interval || e.clientX < eps.left + interval || e.clientY > eps.bottom - interval || e.clientY < eps.top + interval) {
+        return;
+      }
+      ecs = getPosition(el);
+      if (value.onMousedown) {
+        const rv = value.onMousedown(e, ecs);
+        if (rv) {
+          ecs = rv;
+        }
+      }
+      mousedownEvent = e;
+      bodyStyle.cursor = "move";
+      return true;
+    };
+    getShiftEvent.pressEvent(dom, mousedown, handleMouseMove, handleMouseUp);
+    setCss.setCss(dom, "cursor", "move");
+  }
+}
+const vDrag = {
+  name: "Drag",
+  mounted(el, binding) {
+    const value = binding.value;
+    let dom = el;
+    if (value.dom && typeof value.dom == "string") {
+      dom = el.querySelector(value.dom);
+    }
+    setDom(dom, el, value);
+  }
+};
+exports.default = vDrag;

package/dist/directives/drag/index.d.ts

@@ -0,0 +1,6 @@
+import { Directive } from 'vue';
+/**
+ *  Drag
+ */
+declare const _default: Directive;
+export default _default;

package/dist/directives/drag/index.js

@@ -0,0 +1,78 @@
+import { getCss } from "@fangzhongya/utils/css/getCss";
+import { setCss } from "@fangzhongya/utils/css/setCss";
+import { getLocus } from "@fangzhongya/utils/dom/getLocus";
+import { pressEvent } from "@fangzhongya/utils/dom/getShiftEvent";
+const interval = 0;
+function getPosition(el) {
+  const keys = ["left", "right", "top", "bottom", "width", "height"];
+  const obj = {};
+  keys.forEach((key) => {
+    obj[key] = Number(getCss(el, key).replace(/[a-z|A-Z]*$/, ""));
+  });
+  return obj;
+}
+function setDom(dom, el, value) {
+  if (dom) {
+    let ecs;
+    let mousedownEvent;
+    const bodyStyle = document.body.style;
+    const cursor = bodyStyle.cursor;
+    const setValue = (event) => {
+      const x = event.clientX - mousedownEvent.clientX;
+      const y = event.clientY - mousedownEvent.clientY;
+      setCss(el, {
+        left: ecs.left + x + "px",
+        top: ecs.top + y + "px"
+      });
+    };
+    const handleMouseMove = (event) => {
+      if (typeof value.often == "undefined" || value.often) {
+        setValue(event);
+      }
+    };
+    const handleMouseUp = (event) => {
+      setValue(event);
+      if (value.onMouseup) {
+        value.onMouseup(
+          event,
+          mousedownEvent,
+          getPosition(el),
+          getLocus(event, mousedownEvent)
+        );
+      }
+      bodyStyle.cursor = cursor;
+    };
+    const mousedown = (e) => {
+      const eps = dom.getBoundingClientRect();
+      if (e.clientX > eps.right - interval || e.clientX < eps.left + interval || e.clientY > eps.bottom - interval || e.clientY < eps.top + interval) {
+        return;
+      }
+      ecs = getPosition(el);
+      if (value.onMousedown) {
+        const rv = value.onMousedown(e, ecs);
+        if (rv) {
+          ecs = rv;
+        }
+      }
+      mousedownEvent = e;
+      bodyStyle.cursor = "move";
+      return true;
+    };
+    pressEvent(dom, mousedown, handleMouseMove, handleMouseUp);
+    setCss(dom, "cursor", "move");
+  }
+}
+const vDrag = {
+  name: "Drag",
+  mounted(el, binding) {
+    const value = binding.value;
+    let dom = el;
+    if (value.dom && typeof value.dom == "string") {
+      dom = el.querySelector(value.dom);
+    }
+    setDom(dom, el, value);
+  }
+};
+export {
+  vDrag as default
+};