@das-fed/ui 1.1.4 → 6.3.0-beta.1

package/packages/components/overlay/index.js

@@ -1,4 +1,7 @@
-import { createStyle, getCSS } from '@das-fed/utils/style';
+import { createStyle } from '@das-fed/utils/style';
+import { vScrollbar } from '@das-fed/ui';
+import { getVarValue } from '@das-fed/web';
+import '@das-fed/ui/global/theme';
 
 var commonjsGlobal = typeof globalThis !== 'undefined' ? globalThis : typeof window !== 'undefined' ? window : typeof global !== 'undefined' ? global : typeof self !== 'undefined' ? self : {};
 
@@ -17206,14 +17209,13 @@ lodash.exports;
 
 var lodashExports = lodash.exports;
 
-const getStyles = (className, styles) => {
-  if (!styles)
-    styles = {};
-  const overlayHandleColor = styles.handleColor || "var(--das-ui-scrollbar-thumb-color)";
-  styles.activeColor || "var(--das-ui-scrollbar-thumb-hover-color)";
-  const size = "calc(var(--das-ui-scrollbar-thumb-size) + var(--das-ui-scrollbar-padding) * 2)";
-  const padding = "var(--das-ui-scrollbar-padding)";
-  return [
+const createOverlayStyle = (className, styles) => {
+  if (!styles) styles = {};
+  const overlayHandleColor = styles.handleColor || getVarValue("--das-ui-scrollbar-thumb-color").value;
+  const overlayHandleActiveColor = styles.activeColor || getVarValue("--das-ui-scrollbar-thumb-hover-color").value;
+  const size = getVarValue("--das-ui-scrollbar-thumb-size").value || "10px";
+  const padding = getVarValue("--das-ui-scrollbar-padding").value || "1px";
+  return createStyle(className, [
     {
       className: `.${className}`,
       style: styles
@@ -17229,93 +17231,113 @@ const getStyles = (className, styles) => {
     {
       className: `.${className}::-webkit-scrollbar-corner`,
       style: {
-        "background-color": "transparent"
+        "background-color": "rgba(0, 0, 0, 0)"
+      }
+    },
+    {
+      className: `.${className}::-webkit-scrollbar-thumb:vertical`,
+      style: {
+        "border-radius": size,
+        border: `${padding} solid rgba(0, 0, 0, 0)`,
+        "background-clip": "content-box",
+        "background-color": `rgba(0, 0, 0, 0)`
+      }
+    },
+    {
+      className: `.${className}::-webkit-scrollbar-thumb:horizontal`,
+      style: {
+        "border-radius": size,
+        border: `${padding} solid rgba(0, 0, 0, 0)`,
+        "background-clip": "content-box",
+        "background-color": `rgba(0, 0, 0, 0)`
       }
     },
     {
-      clsssName: `.${className}::-webkit-scrollbar-track`,
+      className: `.${className}:hover::-webkit-scrollbar`,
       style: {
+        width: size,
+        height: size,
         "background-color": "transparent"
       }
     },
     {
-      className: `.${className}::-webkit-scrollbar-thumb`,
+      className: `.${className}:hover::-webkit-scrollbar-corner`,
+      style: {
+        "background-color": "rgba(0,0,0,0)"
+      }
+    },
+    {
+      className: `.${className}:hover::-webkit-scrollbar-thumb:vertical`,
       style: {
         "border-radius": size,
-        border: `${padding} solid transparent`,
+        border: `${padding} solid rgba(0, 0, 0, 0)`,
         "background-clip": "content-box",
-        "background-color": "transparent",
-        transition: "border 0.15s"
+        "background-color": `${overlayHandleColor}`
+      }
+    },
+    {
+      className: `.${className}:hover::-webkit-scrollbar-thumb:vertical:hover`,
+      style: {
+        "background-color": `${overlayHandleActiveColor}`
       }
     },
     {
-      className: `.${className}:hover::-webkit-scrollbar-thumb`,
+      className: `.${className}:hover::-webkit-scrollbar-thumb:horizontal`,
       style: {
         "border-radius": size,
-        border: `${padding} solid transparent`,
+        border: `${padding} solid rgba(0, 0, 0, 0)`,
         "background-clip": "content-box",
-        "background-color": overlayHandleColor,
-        cursor: "pointer"
+        "background-color": `${overlayHandleColor}`
       }
     },
     {
-      className: `.${className}::-webkit-scrollbar-thumb:hover`,
+      className: `.${className}:hover::-webkit-scrollbar-thumb:horizontal:hover`,
       style: {
-        border: "none",
-        "background-color": " var(--das-ui-scrollbar-thumb-hover-color)"
+        "background-color": `${overlayHandleActiveColor}`
       }
     }
-  ];
+  ]);
 };
-const createOverlayStyle = (className, styles) => {
-  const style = getStyles(className, styles);
-  return createStyle(className, style);
-};
-const getEl = async (el2, options) => {
-  let res = el2;
+const getEl = async (el, options) => {
+  let res = el;
   if (options.target) {
-    if (typeof options.target === "string")
-      res = options.target;
-    if (typeof options.target === "function")
-      res = await options.target(el2);
+    if (typeof options.target === "string") res = options.target;
+    if (typeof options.target === "function") res = await options.target(el);
   }
-  if (!res)
-    return;
+  if (!res) return;
   let visible = true;
   if (options.visible !== void 0) {
     if (typeof options.visible === "function") {
-      visible = options.visible(el2);
+      visible = options.visible(el);
     } else {
       visible = options.visible;
     }
   }
-  if (!visible)
-    return;
+  if (!visible) return;
   return res;
 };
 const getVisible = (options) => {
   let visible = true;
   if (options.visible !== void 0) {
     if (typeof options.visible === "function") {
-      visible = options.visible(el);
+      visible = options.visible();
     } else {
       visible = options.visible;
     }
   }
-  if (visible === false)
-    return { x: false, y: false };
+  if (visible === false) return { x: false, y: false };
   let x = true;
   let y = true;
   if (options.x !== void 0) {
     if (typeof options.x === "function") {
-      x = options.x(el);
+      x = options.x();
     } else {
       x = options.x;
     }
   }
   if (options.y !== void 0) {
     if (typeof options.y === "function") {
-      y = options.y(el);
+      y = options.y();
     } else {
       y = options.y;
     }
@@ -17344,75 +17366,62 @@ const getOverlayStyle = (options) => {
     "overflow-x": x ? xOverflow : "hidden",
     "overflow-y": y ? yOverflow : "hidden"
   };
-  if (options["z-index"] !== void 0)
-    res["z-index"] = options["z-index"];
-  if (options.handleColor)
-    res.handleColor = options.handleColor;
-  if (options.activeColor)
-    res.activeColor = options.activeColor;
+  if (options["z-index"] !== void 0) res["z-index"] = options["z-index"];
+  if (options.handleColor) res.handleColor = options.handleColor;
+  if (options.activeColor) res.activeColor = options.activeColor;
   return res;
 };
-const getOverlayStyleSheet = (className) => {
-  if (!document.getElementById(className)) {
-    const style2 = document.createElement("style");
-    style2.appendChild(document.createTextNode(""));
-    style2.setAttribute("id", className);
-    document.head.appendChild(style2);
-  }
-  const style = document.getElementById(className);
-  return style.sheet;
-};
-const setOverlayStyle = (className, styles) => {
-  const sheet = getOverlayStyleSheet(className);
-  const data = getStyles(className, styles);
-  for (const item of data) {
-    sheet.insertRule(`${item.className} {${getCSS(item.style)}}`, sheet.cssRules.length);
-  }
-};
-const resetOverlayStyle = (el2) => {
-  const className = el2.overlayClassName;
-  const style = document.getElementById(className);
-  style.remove();
-  el2.classList.remove(className);
+const reset = (el) => {
+  const className = el.overlayClassName;
+  const style = Object.values(document.styleSheets).find((item) => item.ownerNode.id === className);
+  style && style.ownerNode.remove();
+  el.classList.remove(className);
 };
+createOverlayStyle("das-overlay", {
+  position: "relative",
+  "overflow-x": "overlay !important",
+  "overflow-y": "overlay !important"
+});
 const overlay = {
-  beforeMount: async (el2, binding, vnode) => {
+  beforeMount: async (el, binding, vnode) => {
+    const options = (vnode ? binding.value : binding) || {};
+    if (options.usePrevOverlay) {
+      el.overlayEl = await getEl(el, options);
+      if (!el.overlayEl) return;
+      el.overlayStyle = getOverlayStyle(options);
+      const overlayClassName = `das-overlay-${+/* @__PURE__ */ new Date()}`;
+      el.overlayEl.overlayClassName = overlayClassName;
+      await createOverlayStyle(overlayClassName, el.overlayStyle);
+      el.overlayEl.classList.add(overlayClassName);
+    }
+  },
+  updated: async (el, binding, vnode) => {
     const options = (vnode ? binding.value : binding) || {};
-    el2.overlayEl = await getEl(el2, options);
-    if (!el2.overlayEl)
-      return;
-    el2.overlayStyle = getOverlayStyle(options);
-    const overlayClassName = `das-overlay-${+/* @__PURE__ */ new Date()}`;
-    el2.overlayEl.overlayClassName = overlayClassName;
-    await setOverlayStyle(overlayClassName, el2.overlayStyle);
-    el2.overlayEl.classList.add(overlayClassName);
+    if (options.usePrevOverlay) {
+      const overlayEl = await getEl(el, options);
+      const overlayStyle = getOverlayStyle(options);
+      if (!overlayEl) {
+        if (el.overlayEl) reset(el.overlayEl);
+        return;
+      }
+      let needUpdate = options.needUpdate ?? false;
+      if (!lodashExports.isEqual(el.overlayEl, overlayEl)) needUpdate = true;
+      if (!lodashExports.isEqual(el.overlayStyle, overlayStyle)) needUpdate = true;
+      if (!needUpdate) return;
+      setTimeout(() => {
+        reset(overlayEl);
+        overlay.beforeMount(el, binding, vnode);
+      }, 1e3);
+    }
   },
-  updated: async (el2, binding, vnode) => {
+  mounted: async (el, binding, vnode) => {
     const options = (vnode ? binding.value : binding) || {};
-    const overlayEl = await getEl(el2, options);
-    const overlayStyle = getOverlayStyle(options);
-    if (!overlayEl) {
-      if (el2.overlayEl)
-        resetOverlayStyle(el2.overlayEl);
-      return;
+    if (!options.usePrevOverlay) {
+      setTimeout(() => {
+        vScrollbar.mounted(el, binding, vnode);
+      });
     }
-    let needUpdate = options.needUpdate ?? false;
-    if (!lodashExports.isEqual(el2.overlayEl, overlayEl))
-      needUpdate = true;
-    if (!lodashExports.isEqual(el2.overlayStyle, overlayStyle))
-      needUpdate = true;
-    if (!needUpdate)
-      return;
-    setTimeout(() => {
-      resetOverlayStyle(overlayEl);
-      overlay.beforeMount(el2, binding, vnode);
-    }, 1e3);
   }
 };
-createOverlayStyle("das-overlay", {
-  position: "relative",
-  "overflow-x": "overlay !important",
-  "overflow-y": "overlay !important"
-});
 
 export { overlay as default, overlay as vOverlay };