@fangzhongya/fang-ui 0.1.51 → 0.1.53

package/dist/directives/adjustment/index.cjs

@@ -0,0 +1,622 @@
+"use strict";
+Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: "Module" } });
+const lineToSmallHump = require("@fangzhongya/utils/name/lineToSmallHump");
+const getCss = require("@fangzhongya/utils/css/getCss");
+const splitUpper = require("@fangzhongya/utils/basic/string/splitUpper");
+const getShiftEvent = require("@fangzhongya/utils/dom/getShiftEvent");
+const setCss = require("@fangzhongya/utils/css/setCss");
+const interval = 10;
+const interval2 = 16;
+const overstep = 1e3;
+const unit = "px";
+function getPosition(el) {
+  const keys = ["left", "right", "top", "bottom", "width", "height"];
+  const obj = {};
+  for (const key of keys) {
+    if (el) {
+      obj[key] = Number(getCss.getCss(el, key).replaceAll(/[^0-9.-]/g, ""));
+    } else {
+      obj[key] = 0;
+    }
+  }
+  return obj;
+}
+function getNext(el, paren) {
+  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) {
+  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 getHeight(el) {
+  if (el) {
+    const h = getCss.getCss(el, "height");
+    const d = Number(h.replaceAll(/[^0-9.-]/g, "")) || el.clientHeight;
+    return d;
+  } else {
+    return 0;
+  }
+}
+function getWidth(el) {
+  if (el) {
+    const w = getCss.getCss(el, "width");
+    const d = Number(w.replaceAll(/[^0-9.-]/g, "")) || el.clientWidth;
+    return d;
+  } else {
+    return 0;
+  }
+}
+const cssHeightName = "v-adjust-xux-";
+const border = "3px dashed #1d8bfa";
+function getDomHeight() {
+  const name = "height";
+  const dom = document.querySelector("." + cssHeightName + name);
+  if (dom) {
+    return dom;
+  } else {
+    const xux = document.createElement("div");
+    xux.className = cssHeightName + name;
+    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 = border;
+    document.body.appendChild(xux);
+    return xux;
+  }
+}
+function getDomWidth() {
+  const name = "width";
+  const dom = document.querySelector("." + cssHeightName + name);
+  if (dom) {
+    return dom;
+  } else {
+    const xux = document.createElement("div");
+    xux.className = cssHeightName + name;
+    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 = border;
+    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.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.setCss(dom, "display", "block");
+      },
+      set: (top) => {
+        setCss.setCss(dom, "top", top + unit);
+      }
+    };
+  } else if (key == "right" || key == "left") {
+    const dom = getDomWidth();
+    return {
+      show: () => {
+        setCss.setCss(dom, "display", "block");
+      },
+      set: (top) => {
+        setCss.setCss(dom, "left", top + unit);
+      }
+    };
+  } else {
+    const dom1 = getDomWidth();
+    const dom2 = getDomHeight();
+    return {
+      show: () => {
+        setCss.setCss(dom1, "display", "block");
+        setCss.setCss(dom2, "display", "block");
+      },
+      set: (left, top) => {
+        setCss.setCss(dom1, "left", left + unit);
+        setCss.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.setCss(dom, "height", v + unit);
+        if (adjoin) {
+          setCss.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.setCss(dom, "height", v + unit);
+        if (adjoin) {
+          setCss.setCss(adjoin, "height", apo.height - z + unit);
+        }
+        if (position) {
+          setCss.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.setCss(dom, "width", v + unit);
+        if (adjoin) {
+          setCss.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.setCss(dom, "width", v + unit);
+        if (adjoin) {
+          setCss.setCss(adjoin, "width", apo.width - z + unit);
+        }
+        if (position) {
+          setCss.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.setCss(dom, "width", v + unit);
+        if (adjoin) {
+          setCss.setCss(adjoin, "width", apo.width - x + unit);
+        }
+      }
+      const n = obj.height + y;
+      if (n > 0) {
+        setCss.setCss(dom, "height", n + unit);
+        if (adjoin) {
+          setCss.setCss(adjoin, "height", apo.height - y + unit);
+        }
+        if (position) {
+          setCss.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.setCss(dom, "width", v + unit);
+        if (adjoin) {
+          setCss.setCss(adjoin, "width", apo.width - x + unit);
+        }
+      }
+      const n = obj.height + y;
+      if (n > 0) {
+        setCss.setCss(dom, "height", n + unit);
+        if (adjoin) {
+          setCss.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.setCss(dom, "width", v + unit);
+        if (adjoin) {
+          setCss.setCss(adjoin, "width", apo.width - x + unit);
+        }
+        if (position) {
+          setCss.setCss(dom, "left", obj.left - x + unit);
+        }
+      }
+      const n = obj.height + y;
+      if (n > 0) {
+        setCss.setCss(dom, "height", n + unit);
+        if (adjoin) {
+          setCss.setCss(adjoin, "height", apo.height - y + unit);
+        }
+        if (position) {
+          setCss.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.setCss(dom, "width", v + unit);
+        if (adjoin) {
+          setCss.setCss(adjoin, "width", apo.width - x + unit);
+        }
+        if (position) {
+          setCss.setCss(dom, "left", obj.left - x + unit);
+        }
+      }
+      const n = obj.height + y;
+      if (n > 0) {
+        setCss.setCss(dom, "height", n + unit);
+        if (adjoin) {
+          setCss.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.lineToSmallHump(key);
+  let obj = {
+    key,
+    el,
+    param
+  };
+  const noxux = param.noxux;
+  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)) || void 0;
+    } else {
+      obj.adjoin = param.adjoin;
+    }
+  }
+  if (param.interval) {
+    const newElement = document.createElement("div");
+    if (key == "right") {
+      newElement.style.width = param.interval + "px";
+      newElement.style.height = "100%";
+      el.insertAdjacentElement("afterend", newElement);
+    } else if (key == "left") {
+      newElement.style.width = param.interval + "px";
+      newElement.style.height = "100%";
+      el.insertAdjacentElement("beforebegin", newElement);
+    } else if (key == "top") {
+      newElement.style.height = param.interval + "px";
+      newElement.style.width = "100%";
+      el.insertAdjacentElement("beforebegin", newElement);
+    } else if (key == "bottom") {
+      newElement.style.height = param.interval + "px";
+      newElement.style.width = "100%";
+      el.insertAdjacentElement("afterend", newElement);
+    }
+    obj.adjoin = getAdjoin(newElement, key);
+    obj.el = newElement;
+  }
+  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);
+    }
+    if (!noxux) {
+      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);
+  obj.getVobj = (event, rect) => {
+    const x = setX(event, rect);
+    if (x < interval && x > 0 - interval) {
+      return obj;
+    }
+  };
+  return obj;
+}
+function getArr(obj, el) {
+  const arr = obj.all ? types : Object.keys(obj).filter((key) => types.includes(key));
+  return arr.toSorted((a, b) => {
+    return b.length - a.length;
+  }).map((key) => {
+    const v = obj.all ? obj.all : obj[key];
+    return getAdjustObj(el, key, v);
+  });
+}
+const vAdjustment = {
+  name: "Adjustment",
+  mounted(el, binding) {
+    const value = binding.value;
+    if (value.is === false) {
+      return;
+    }
+    if (value.dom) {
+      if (typeof value.dom == "string") {
+        el = el.querySelector(value.dom);
+      } else {
+        el = value.dom;
+      }
+    }
+    const often = value.often;
+    const onChange = value.onChange;
+    if (value && Object.keys(value).length > 0) {
+      const arr = getArr(value, el);
+      arr.forEach((item) => {
+        let vobj;
+        const bodyStyle = document.body.style;
+        const cursor = bodyStyle.cursor;
+        let status = true;
+        let isCur = false;
+        let eps;
+        let ecs;
+        let acs;
+        function getVobj(e) {
+          let is = true;
+          const v = item.getVobj(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;
+          }
+        }
+        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);
+            if (onChange && typeof onChange == "function") {
+              onChange(vobj, {
+                start: mousedownEvent,
+                end: event,
+                startPosit: ecs,
+                endPosit: getPosition(vobj.el)
+              });
+            }
+          }
+          remove();
+        };
+        function remove() {
+          bodyStyle.cursor = cursor;
+          status = true;
+          if (isCur) {
+            setCss.setCss(getDomHeight(), "display", "none");
+            setCss.setCss(getDomWidth(), "display", "none");
+          }
+          isCur = false;
+        }
+        const mousedown = (e, type) => {
+          if (isCur) {
+            mousedownEvent = e;
+            ecs = getPosition(el);
+            acs = getPosition(vobj.adjoin);
+            status = false;
+            vobj.setMousedown(e);
+            bodyStyle.cursor = vobj.cursor;
+            getShiftEvent.shiftEvent(
+              type,
+              document,
+              handleMouseMove,
+              handleMouseUp
+            );
+          }
+        };
+        item.el.addEventListener("mousemove", mousemove);
+        item.el.addEventListener("mouseout", mouseout);
+        item.el.addEventListener("mousedown", (e) => {
+          if (isCur) {
+            mousedown(e, "mouse");
+          }
+        });
+      });
+    }
+  }
+};
+exports.default = vAdjustment;

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

@@ -0,0 +1,7 @@
+import { Directive } from 'vue';
+/**
+ *  Adjustment
+ *  改变窗口大小
+ */
+declare const _default: Directive;
+export default _default;