@flexilla/modal - npm Package Compare versions

Comparing version 1.1.0 to 1.2.0

dist/modal.js

@@ -1,5 +0,5 @@
-var P = Object.defineProperty;
-var N = (t, e, n) => e in t ? P(t, e, { enumerable: !0, configurable: !0, writable: !0, value: n }) : t[e] = n;
-var d = (t, e, n) => (N(t, typeof e != "symbol" ? e + "" : e, n), n);
-const p = ({
+var q = Object.defineProperty;
+var N = (t, e, n) => e in t ? q(t, e, { enumerable: !0, configurable: !0, writable: !0, value: n }) : t[e] = n;
+var r = (t, e, n) => (N(t, typeof e != "symbol" ? e + "" : e, n), n);
+const y = ({
   selector: t,
@@ -22,13 +22,2 @@ parentElement: e
 }, Y = ({
-  newStyles: t,
-  identifier: e
-}) => {
-  const n = document.head.querySelector("[data-fx-style]");
-  if (n) {
-    (n.textContent || "").includes(e) || (n.textContent += t);
-    return;
-  }
-  const o = document.createElement("style");
-  o.textContent = t, o.setAttribute("data-fx-style", ""), document.head.appendChild(o);
-}, $ = ({
   element: t,
@@ -40,29 +29,24 @@ callback: e
     "transitionend",
-    function o() {
-      t.removeEventListener("transitionend", o), e();
+    function a() {
+      t.removeEventListener("transitionend", a), e();
     },
     { once: !0 }
   ) : e();
-}, j = () => {
-  Y({
-    newStyles: '[data-fx-modal][data-state="open"] {display: flex;}[data-fx-modal][data-state="close"]{display: none;} [data-fx-modal][data-state="open"] [data-modal-content] { animation-fill-mode: both;animation: var(--un-modal-animation);-webkit-animation: var(--un-modal-animation);} [data-fx-modal] [data-modal-content][data-state="close"]{animation: var(--un-modal-animation);-webkit-animation: var(--un-modal-animation);} [data-modal-overlay]{position: fixed;inset: 0;}',
-    identifier: "[data-fx-modal]"
-  });
-}, D = (t, e) => {
+}, $ = (t, e) => {
   e.removeChild(t);
 }, B = (t, e) => {
-  $({
+  Y({
     element: t,
     callback() {
-      D(t, e);
+      $(t, e);
     }
   });
-}, K = ({ modalContent: t, overlayClassName: e }) => {
+}, D = ({ modalContent: t, overlayClassName: e }) => {
   const n = document.createElement("span");
   return n.setAttribute("aria-hidden", "true"), n.setAttribute("data-state", "open"), W({ newElement: n, existingElement: t }), n.classList.add(...e), n.setAttribute("data-modal-overlay", "overlay-bg"), n;
-}, y = (t, e, n) => {
+}, h = (t, e, n) => {
   if (!(e instanceof HTMLElement))
     throw new Error("No modal-content found");
   t.setAttribute("aria-hidden", n === "open" ? "false" : "true"), t.setAttribute("data-state", n === "open" ? "open" : "close"), e.setAttribute("data-state", n === "open" ? "open" : "close");
-}, C = (t, e, n) => {
+}, I = (t, e, n) => {
   if (!t) {
@@ -73,46 +57,46 @@ e || (document.body.style.overflowY = "auto");
   A({ selector: "[data-fx-modal][data-state=open]:not([data-allow-body-scroll=true]", parentElement: document.documentElement }).filter((c) => c !== n).length === 0 && !e && (document.body.style.overflowY = "auto");
-}, R = (t, e, n) => {
+}, K = (t, e, n) => {
   var g;
   if (!(t instanceof HTMLElement))
     throw new Error("Modal Element must be a valid element");
-  const { animateContent: o, allowBodyScroll: h, preventCloseModal: c, overlayClass: m, onShow: u, onHide: f, onToggle: i, enableStackedModals: I } = n, v = h || t.hasAttribute("data-allow-body-scroll") && t.getAttribute("data-allow-body-scroll") !== "false", x = c || t.hasAttribute("data-prevent-close-modal") && t.getAttribute("data-prevent-close-modal") !== "false", E = I || t.hasAttribute("data-enable-stacked") && t.getAttribute("data-enable-stacked") !== "false", T = (m == null ? void 0 : m.split(" ")) || ((g = t.dataset.modalOverlay) == null ? void 0 : g.split(" ")) || "";
-  let w = !1;
+  const { animateContent: a, allowBodyScroll: p, preventCloseModal: c, overlayClass: u, onShow: m, onHide: f, onToggle: i, enableStackedModals: T } = n, v = p || t.hasAttribute("data-allow-body-scroll") && t.getAttribute("data-allow-body-scroll") !== "false", L = c || t.hasAttribute("data-prevent-close-modal") && t.getAttribute("data-prevent-close-modal") !== "false", E = T || t.hasAttribute("data-enable-stacked") && t.getAttribute("data-enable-stacked") !== "false", O = (u == null ? void 0 : u.split(" ")) || ((g = t.dataset.modalOverlay) == null ? void 0 : g.split(" ")) || "";
+  let b = !1;
   t.setAttribute("data-allow-body-scroll", `${v}`);
-  const a = p({ selector: "[data-modal-content]", parentElement: t }), L = A({ selector: "[data-close-modal]", parentElement: t });
-  if (!(a instanceof HTMLElement))
+  const o = y({ selector: "[data-modal-content]", parentElement: t }), H = A({ selector: "[data-close-modal]", parentElement: t });
+  if (!(o instanceof HTMLElement))
     throw new Error("Modal content element not found");
-  const S = a.dataset.enterAnimation || "", k = a.dataset.exitAnimation || "";
-  a.setAttribute("data-state", "close");
+  const x = o.dataset.enterAnimation || "", k = o.dataset.exitAnimation || "";
+  o.setAttribute("data-state", "close");
   const M = (s) => {
-    document.removeEventListener("keydown", M), s.key === "Escape" && !x && b();
-  }, O = (s) => {
+    document.removeEventListener("keydown", M), s.key === "Escape" && !L && w();
+  }, C = (s) => {
     if (E)
       return;
-    const r = A({ selector: "[data-fx-modal][data-state=open]", parentElement: document.documentElement });
-    for (const l of r)
+    const d = A({ selector: "[data-fx-modal][data-state=open]", parentElement: document.documentElement });
+    for (const l of d)
       if (l !== s) {
-        const _ = p({ selector: "[data-modal-content]", parentElement: l });
-        y(l, _, "close");
-        const q = p({ selector: "[data-modal-overlay]", parentElement: l });
-        B(q, l);
+        const _ = y({ selector: "[data-modal-content]", parentElement: l });
+        h(l, _, "close");
+        const P = y({ selector: "[data-modal-overlay]", parentElement: l });
+        B(P, l);
       }
-  }, H = () => {
-    O(t);
-    const s = K({
-      modalContent: a,
-      overlayClassName: T
+  }, S = () => {
+    C(t);
+    const s = D({
+      modalContent: o,
+      overlayClassName: O
     });
-    if (o || S !== "") {
-      const r = o ? o.enterAnimation : S;
-      r !== "" && a.style.setProperty("--un-modal-animation", r), y(t, a, "open");
+    if (a || x !== "") {
+      const d = a ? a.enterAnimation : x;
+      d !== "" && o.style.setProperty("--un-modal-animation", d), h(t, o, "open");
     } else
-      y(t, a, "open");
-    v || (document.body.style.overflow = "hidden"), w || (document.addEventListener("keydown", M), w = !0), !x && s.addEventListener("click", b), u == null || u(), i == null || i({ isHidden: !1 });
-  }, b = () => {
-    if (o != null && o.exitAnimation && o.exitAnimation !== "" || k !== "") {
-      const r = o ? o.exitAnimation || "" : k;
-      a.setAttribute("data-state", "close"), a.style.setProperty("--un-modal-animation", r), a.addEventListener(
+      h(t, o, "open");
+    v || (document.body.style.overflow = "hidden"), b || (document.addEventListener("keydown", M), b = !0), !L && s.addEventListener("click", w), m == null || m(), i == null || i({ isHidden: !1 });
+  }, w = () => {
+    if (a != null && a.exitAnimation && a.exitAnimation !== "" || k !== "") {
+      const d = a ? a.exitAnimation || "" : k;
+      o.setAttribute("data-state", "close"), o.style.setProperty("--un-modal-animation", d), o.addEventListener(
         "animationend",
         function l() {
-          a.removeEventListener("animationend", l), y(t, a, "close"), a.style.removeProperty("--un-modal-animation"), C(E, v, t);
+          o.removeEventListener("animationend", l), h(t, o, "close"), o.style.removeProperty("--un-modal-animation"), I(E, v, t);
         },
@@ -122,37 +106,36 @@ { once: !0 }
     } else
-      y(t, a, "close"), C(E, v, t);
-    w && (document.removeEventListener("keydown", M), w = !1);
-    const s = p({ selector: "[data-modal-overlay]", parentElement: t });
+      h(t, o, "close"), I(E, v, t);
+    b && (document.removeEventListener("keydown", M), b = !1);
+    const s = y({ selector: "[data-modal-overlay]", parentElement: t });
     B(s, t), f == null || f(), i == null || i({ isHidden: !0 });
   };
   return { autoInitModal: () => {
-    if (e instanceof HTMLElement && e.addEventListener("click", H), L.length > 0)
-      for (const s of L)
-        s.addEventListener("click", b);
-  }, showModal: H, hideModal: b, isHidden: () => t.dataset.state === "close" };
+    if (e instanceof HTMLElement && e.addEventListener("click", S), H.length > 0)
+      for (const s of H)
+        s.addEventListener("click", w);
+  }, showModal: S, hideModal: w, isHidden: () => t.dataset.state === "close" };
 };
-class J {
-  constructor({ modalElement: e, triggerElement: n, options: o = {} }) {
-    d(this, "modalElement");
-    d(this, "showModal");
-    d(this, "hideModal");
-    d(this, "isHidden");
-    d(this, "options");
+class F {
+  constructor({ modalElement: e, triggerElement: n, options: a = {} }) {
+    r(this, "modalElement");
+    r(this, "showModal");
+    r(this, "hideModal");
+    r(this, "isHidden");
+    r(this, "options");
     /**
      * Creates and initializes a modal.
      */
-    d(this, "instance");
+    r(this, "instance");
     if (this.instance = this, !(e instanceof HTMLElement))
       throw new Error("Invalid provided HTMLElement");
-    this.modalElement = e, this.options = o, this.modalElement.setAttribute("data-fx-modal", "");
-    const h = e.dataset.modalId, c = n || p({
-      selector: `[data-modal-target='${h}']`,
+    this.modalElement = e, this.options = a, this.modalElement.hasAttribute("data-fx-modal") || this.modalElement.setAttribute("data-fx-modal", "");
+    const p = e.dataset.modalId, c = n || y({
+      selector: `[data-modal-target='${p}']`,
       parentElement: document.body
-    }), { showModal: m, hideModal: u, autoInitModal: f, isHidden: i } = R(e, c, this.options);
-    f(), this.showModal = m, this.hideModal = u, this.isHidden = i;
+    }), { showModal: u, hideModal: m, autoInitModal: f, isHidden: i } = K(e, c, this.options);
+    f(), this.showModal = u, this.hideModal = m, this.isHidden = i;
   }
 }
-j();
 export {
-  J as Modal
+  F as Modal
 };

package.json

 {
   "name": "@flexilla/modal",
   "private": false,
-  "version": "1.1.0",
+  "version": "1.2.0",
   "type": "module",
@@ -23,3 +23,4 @@ "description": "A customizable modal component for creating interactive pop-up dialogs in web applications.",
       }
-    }
+    },
+    "./modal.css":"./dist/modal.css"
   },
@@ -43,3 +44,3 @@ "files": [
     "@biomejs/biome": "1.5.1",
-    "@flexilla/utilities": "^1.1.0",
+    "@flexilla/utilities": "latest",
     "typescript": "^5.2.2",
@@ -70,4 +71,3 @@ "vite": "^5.0.8",
   "license": "MIT",
-  "author": "johnkat-mj",
-  "gitHead": "18549edaac73621574bb4df22436305c201c47c8"
+  "author": "johnkat-mj"
 }

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Number of package files

7

increased by16.67%

Worsened metrics

Total package byte prevSize

18849

decreased by-5.34%

Lines of code

207

decreased by-8.41%

No dependency changes