@fangzhongya/fang-ui 0.1.34 → 0.1.36

package/dist/directives/adjust/index.cjs

@@ -12,13 +12,13 @@ const unit = "px";
 function getPosition(el) {
   const keys = ["left", "right", "top", "bottom", "width", "height"];
   const obj = {};
-  keys.forEach((key) => {
+  for (const key of keys) {
     if (el) {
-      obj[key] = Number(getCss.getCss(el, key).replace(/[a-z|A-Z|%]*$/, ""));
+      obj[key] = Number(getCss.getCss(el, key).replaceAll(/[^0-9.-]/g, ""));
     } else {
       obj[key] = 0;
     }
-  });
+  }
   return obj;
 }
 function getNext(el, paren) {
@@ -67,7 +67,7 @@ function getAdjoin(el, type) {
 function getHeight(el) {
   if (el) {
     const h = getCss.getCss(el, "height");
-    const d = Number(h.replace(/[a-z|A-Z]*$/, "")) || el.clientHeight;
+    const d = Number(h.replaceAll(/[^0-9.-]/g, "")) || el.clientHeight;
     return d;
   } else {
     return 0;
@@ -76,7 +76,7 @@ function getHeight(el) {
 function getWidth(el) {
   if (el) {
     const w = getCss.getCss(el, "width");
-    const d = Number(w.replace(/[a-z|A-Z]*$/, "")) || el.clientWidth;
+    const d = Number(w.replaceAll(/[^0-9.-]/g, "")) || el.clientWidth;
     return d;
   } else {
     return 0;
@@ -482,7 +482,7 @@ function getAdjustObj(el, key, param) {
 }
 function getArr(obj, el) {
   const arr = obj.all ? types : Object.keys(obj);
-  return arr.sort((a, b) => {
+  return arr.toSorted((a, b) => {
     return b.length - a.length;
   }).map((key) => {
     const v = obj.all ? obj.all : obj[key];

package/dist/directives/adjust/index.js

@@ -10,13 +10,13 @@ const unit = "px";
 function getPosition(el) {
   const keys = ["left", "right", "top", "bottom", "width", "height"];
   const obj = {};
-  keys.forEach((key) => {
+  for (const key of keys) {
     if (el) {
-      obj[key] = Number(getCss(el, key).replace(/[a-z|A-Z|%]*$/, ""));
+      obj[key] = Number(getCss(el, key).replaceAll(/[^0-9.-]/g, ""));
     } else {
       obj[key] = 0;
     }
-  });
+  }
   return obj;
 }
 function getNext(el, paren) {
@@ -65,7 +65,7 @@ function getAdjoin(el, type) {
 function getHeight(el) {
   if (el) {
     const h = getCss(el, "height");
-    const d = Number(h.replace(/[a-z|A-Z]*$/, "")) || el.clientHeight;
+    const d = Number(h.replaceAll(/[^0-9.-]/g, "")) || el.clientHeight;
     return d;
   } else {
     return 0;
@@ -74,7 +74,7 @@ function getHeight(el) {
 function getWidth(el) {
   if (el) {
     const w = getCss(el, "width");
-    const d = Number(w.replace(/[a-z|A-Z]*$/, "")) || el.clientWidth;
+    const d = Number(w.replaceAll(/[^0-9.-]/g, "")) || el.clientWidth;
     return d;
   } else {
     return 0;
@@ -480,7 +480,7 @@ function getAdjustObj(el, key, param) {
 }
 function getArr(obj, el) {
   const arr = obj.all ? types : Object.keys(obj);
-  return arr.sort((a, b) => {
+  return arr.toSorted((a, b) => {
     return b.length - a.length;
   }).map((key) => {
     const v = obj.all ? obj.all : obj[key];

package/dist/directives/drag/index.cjs

@@ -8,9 +8,9 @@ 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]*$/, ""));
-  });
+  for (const key of keys) {
+    obj[key] = Number(getCss.getCss(el, key).replaceAll(/[^0-9.-]/g, ""));
+  }
   return obj;
 }
 function setDom(dom, el, value) {

package/dist/directives/drag/index.js

@@ -6,9 +6,9 @@ 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]*$/, ""));
-  });
+  for (const key of keys) {
+    obj[key] = Number(getCss(el, key).replaceAll(/[^0-9.-]/g, ""));
+  }
   return obj;
 }
 function setDom(dom, el, value) {

package/dist/directives/expose/index.cjs

@@ -3,26 +3,23 @@ Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toString
 const hasOwn = require("@fangzhongya/utils/basic/object/hasOwn");
 const index = {
   name: "expose",
-  created(el, binding, vnode, ...arr) {
+  created(el, binding, vnode) {
     var _a, _b, _c, _d;
-    console.log("arr", arr);
+    if (!(binding == null ? void 0 : binding.instance)) return;
     const exposed = ((_b = (_a = vnode == null ? void 0 : vnode.ref) == null ? void 0 : _a.i) == null ? void 0 : _b.exposed) ?? ((_d = (_c = vnode == null ? void 0 : vnode.ref) == null ? void 0 : _c.i) == null ? void 0 : _d.proxy);
-    if (exposed) {
-      if (binding == null ? void 0 : binding.instance) {
-        const instance = binding.instance;
-        let value = binding.value;
-        if (value && typeof value == "string") {
-          instance[value] = exposed;
-        } else {
-          Object.keys(exposed).forEach((key) => {
-            if (!hasOwn.hasOwn(instance, key)) {
-              instance[key] = exposed[key];
-            }
-          });
-        }
-        binding.instance = instance;
+    if (!exposed) return;
+    const instance = binding.instance;
+    const value = binding.value;
+    if (value && typeof value === "string") {
+      instance[value] = exposed;
+      return;
+    }
+    for (const key of Object.keys(exposed)) {
+      if (!hasOwn.hasOwn(instance, key)) {
+        instance[key] = exposed[key];
       }
     }
+    binding.instance = instance;
   }
 };
 exports.default = index;

package/dist/directives/expose/index.js

@@ -1,26 +1,23 @@
 import { hasOwn } from "@fangzhongya/utils/basic/object/hasOwn";
 const index = {
   name: "expose",
-  created(el, binding, vnode, ...arr) {
+  created(el, binding, vnode) {
     var _a, _b, _c, _d;
-    console.log("arr", arr);
+    if (!(binding == null ? void 0 : binding.instance)) return;
     const exposed = ((_b = (_a = vnode == null ? void 0 : vnode.ref) == null ? void 0 : _a.i) == null ? void 0 : _b.exposed) ?? ((_d = (_c = vnode == null ? void 0 : vnode.ref) == null ? void 0 : _c.i) == null ? void 0 : _d.proxy);
-    if (exposed) {
-      if (binding == null ? void 0 : binding.instance) {
-        const instance = binding.instance;
-        let value = binding.value;
-        if (value && typeof value == "string") {
-          instance[value] = exposed;
-        } else {
-          Object.keys(exposed).forEach((key) => {
-            if (!hasOwn(instance, key)) {
-              instance[key] = exposed[key];
-            }
-          });
-        }
-        binding.instance = instance;
+    if (!exposed) return;
+    const instance = binding.instance;
+    const value = binding.value;
+    if (value && typeof value === "string") {
+      instance[value] = exposed;
+      return;
+    }
+    for (const key of Object.keys(exposed)) {
+      if (!hasOwn(instance, key)) {
+        instance[key] = exposed[key];
       }
     }
+    binding.instance = instance;
   }
 };
 export {

package/dist/directives/scroll/index.cjs

@@ -1,106 +1,141 @@
 "use strict";
 Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: "Module" } });
 const vue = require("vue");
-const vScroll = {
-  name: "scroll",
-  mounted(el, binding) {
-    const value = binding.value;
-    let fun = () => {
+function parseConfig(el, value) {
+  const scrollSelector = el.getAttribute("scroll-selector");
+  const scrollDistance = el.getAttribute("scroll-distance");
+  const baseConfig = {
+    fun: () => {
+    },
+    isEnabled: true,
+    selector: scrollSelector || null,
+    distance: scrollDistance ? Number.parseInt(scrollDistance, 10) : 10,
+    loadText: "加载中...",
+    endText: "无更多数据",
+    cssname: "v-scroll-add",
+    isFunctionBinding: false
+  };
+  if (typeof value === "function") {
+    return {
+      ...baseConfig,
+      fun: value,
+      isFunctionBinding: true
     };
-    let is = true;
-    let selector = el.getAttribute(`scroll-selector`);
-    let distance = el.getAttribute(`scroll-distance`) || 10;
-    let loadText = "加载中...";
-    let endText = "无更多数据";
-    let cssname = "v-scroll-add";
-    let isf = false;
-    if (typeof value === "function") {
-      isf = true;
-      fun = value;
-    } else {
-      fun = value.onChange;
-      is = value.is;
-      if (value.dom) {
-        selector = value.dom;
-      }
-      if (value.distance) {
-        distance = value.distance;
-      }
-      if (value.loadText) {
-        loadText = value.loadText;
-      }
-      if (value.endText) {
-        endText = value.endText;
-      }
-      if (value.cssname) {
-        cssname = value.cssname;
+  }
+  return {
+    ...baseConfig,
+    fun: value.onChange,
+    isEnabled: value.is ?? true,
+    selector: value.dom || baseConfig.selector,
+    distance: value.distance || baseConfig.distance,
+    loadText: value.loadText || baseConfig.loadText,
+    endText: value.endText || baseConfig.endText,
+    cssname: value.cssname || baseConfig.cssname
+  };
+}
+function getScrollContainer(el, selector) {
+  if (!selector) return el;
+  if (typeof selector === "string") {
+    const foundElement = el.querySelector(selector);
+    return foundElement || el;
+  }
+  return selector;
+}
+function createStatusElement(scrollContainer, cssname) {
+  const statusElement = document.createElement("div");
+  statusElement.className = cssname;
+  statusElement.style.display = "none";
+  scrollContainer.appendChild(statusElement);
+  return statusElement;
+}
+function setupStatusWatchers(statusElement, value, config) {
+  if (value.load) {
+    vue.watch(
+      () => vue.toValue(value.load),
+      (isLoading) => {
+        if (isLoading) {
+          statusElement.className = `${config.cssname} ${config.cssname}-load`;
+          statusElement.style.display = "block";
+          statusElement.textContent = config.loadText;
+        } else {
+          statusElement.style.display = "none";
+        }
       }
-    }
-    let t;
-    let tm = () => {
-      clearTimeout(t);
-      t = setTimeout(() => {
-        if (isf) {
-          fun();
+    );
+  }
+  if (value.end) {
+    vue.watch(
+      () => vue.toValue(value.end),
+      (isEnd) => {
+        if (isEnd) {
+          setTimeout(() => {
+            statusElement.className = `${config.cssname} ${config.cssname}-end`;
+            statusElement.style.display = "block";
+            statusElement.textContent = config.endText;
+          }, 100);
         } else {
-          if (!vue.toValue(value.load) && !vue.toValue(value.end)) {
-            fun();
-          }
+          statusElement.style.display = "none";
         }
-      }, 100);
-    };
-    let dom = el;
-    if (selector) {
-      if (typeof selector == "string") {
-        dom = el.querySelector(selector);
+      }
+    );
+  }
+}
+function createScrollHandler(scrollContainer, config, value) {
+  let debounceTimer;
+  const handleScrollEnd = () => {
+    clearTimeout(debounceTimer);
+    debounceTimer = setTimeout(() => {
+      if (config.isFunctionBinding) {
+        config.fun();
       } else {
-        dom = selector;
+        const scrollValue = value;
+        const loadValue = scrollValue.load ? vue.toValue(scrollValue.load) : false;
+        const endValue = scrollValue.end ? vue.toValue(scrollValue.end) : false;
+        if (!loadValue && !endValue) {
+          config.fun();
+        }
       }
+    }, 100);
+  };
+  return () => {
+    const remainingScroll = scrollContainer.scrollHeight - scrollContainer.scrollTop;
+    const visibleHeight = scrollContainer.clientHeight;
+    if (remainingScroll - config.distance <= visibleHeight) {
+      handleScrollEnd();
     }
-    if (dom && is) {
-      if (!isf) {
-        const adddmm = document.createElement("div");
-        adddmm.className = cssname;
-        adddmm.style.display = "none";
-        dom.appendChild(adddmm);
-        vue.watch(value.load, () => {
-          const v = vue.toValue(value.load);
-          if (v) {
-            adddmm.className = cssname + " " + cssname + "-load";
-            adddmm.style.display = "block";
-            adddmm.innerText = loadText;
-          } else {
-            adddmm.style.display = "none";
-          }
-        });
-        vue.watch(value.end, () => {
-          const v = vue.toValue(value.end);
-          if (v) {
-            setTimeout(() => {
-              adddmm.className = cssname + " " + cssname + "-end";
-              adddmm.style.display = "block";
-              adddmm.innerText = endText;
-            }, 100);
-          } else {
-            adddmm.style.display = "none";
-          }
-        });
-      }
-      dom.style.overflowY = "auto";
-      dom.addEventListener(
-        "scroll",
-        function() {
-          let d = this;
-          const s = d.scrollHeight - d.scrollTop;
-          const h = d.clientHeight;
-          if (s - distance < h) {
-            tm();
-          }
-        },
-        {
-          passive: true
-        }
+  };
+}
+const vScroll = {
+  name: "scroll",
+  mounted(el, binding) {
+    const value = binding.value;
+    const config = parseConfig(el, value);
+    const scrollContainer = getScrollContainer(el, config.selector);
+    if (!scrollContainer || !config.isEnabled) return;
+    scrollContainer.style.overflowY = "auto";
+    if (!config.isFunctionBinding) {
+      const statusElement = createStatusElement(
+        scrollContainer,
+        config.cssname
       );
+      setupStatusWatchers(statusElement, value, config);
+    }
+    const scrollHandler = createScrollHandler(
+      scrollContainer,
+      config,
+      value
+    );
+    scrollContainer.addEventListener("scroll", scrollHandler, {
+      passive: true
+    });
+    el._scrollCleanup = () => {
+      scrollContainer.removeEventListener("scroll", scrollHandler);
+    };
+  },
+  unmounted(el) {
+    if (el._scrollCleanup) {
+      el._scrollCleanup();
+      delete el._scrollCleanup;
     }
   }
 };

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

@@ -1,6 +1,11 @@
 import { Directive } from 'vue';
 /**
- *  scroll
+ * 滚动加载指令
  */
 declare const _default: Directive;
 export default _default;
+declare global {
+    interface HTMLElement {
+        _scrollCleanup?: () => void;
+    }
+}