@flexilla/modal - npm Package Compare versions

Comparing version 2.0.1 to 2.0.2

dist/index.d.ts

@@ -0,1 +1,3 @@
+export declare const fModal: (modal: string | HTMLElement, options?: ModalOptions, triggerElement?: string | HTMLElement) => Modal;
+
 export declare class Modal {
@@ -2,0 +4,0 @@ private modalElement;

dist/modal.js

@@ -1,5 +0,5 @@
-var Y = Object.defineProperty;
-var _ = (t, e, o) => e in t ? Y(t, e, { enumerable: !0, configurable: !0, writable: !0, value: o }) : t[e] = o;
-var d = (t, e, o) => (_(t, typeof e != "symbol" ? e + "" : e, o), o);
-const c = (t, e = document.body) => e.querySelector(t), A = (t, e = document.body) => Array.from(e.querySelectorAll(t)), $ = ({
+var W = Object.defineProperty;
+var Y = (t, e, o) => e in t ? W(t, e, { enumerable: !0, configurable: !0, writable: !0, value: o }) : t[e] = o;
+var l = (t, e, o) => (Y(t, typeof e != "symbol" ? e + "" : e, o), o);
+const r = (t, e = document.body) => e.querySelector(t), A = (t, e = document.body) => Array.from(e.querySelectorAll(t)), $ = ({
   newElement: t,
@@ -20,16 +20,17 @@ existingElement: e
   const o = getComputedStyle(t).transition;
-  o !== "none" && o !== "" && o !== "all 0s ease 0s" ? t.addEventListener(
+  o !== "none" && o !== "" && o !== "all 0s ease 0s" && o !== "all" ? t.addEventListener(
     "transitionend",
-    function n() {
-      t.removeEventListener("transitionend", n), e();
+    function a() {
+      t.removeEventListener("transitionend", a), e();
     },
     { once: !0 }
   ) : e();
-}, K = (t, e) => {
-  e.removeChild(t);
-}, T = (t, e) => {
-  D({
+}, K = (t) => {
+  var e;
+  (e = t.parentElement) == null || e.removeChild(t);
+}, P = (t) => {
+  t.setAttribute("data-state", "close"), D({
     element: t,
     callback() {
-      K(t, e);
+      K(t);
     }
@@ -40,7 +41,9 @@ });
   return o.setAttribute("aria-hidden", "true"), o.setAttribute("data-state", "open"), $({ newElement: o, existingElement: t }), o.classList.add(...e), o.setAttribute("data-modal-overlay", "overlay-bg"), o;
-}, v = (t, e, o) => {
+}, w = (t, e, o) => {
   if (!(e instanceof HTMLElement))
     throw new Error("No modal-content found");
-  t.setAttribute("aria-hidden", o === "open" ? "false" : "true"), t.setAttribute("data-state", o === "open" ? "open" : "close"), e.setAttribute("data-state", o === "open" ? "open" : "close");
-}, O = (t, e, o) => {
+  t.setAttribute("aria-hidden", o === "open" ? "false" : "true"), t.setAttribute("data-state", o), e.setAttribute("data-state", o);
+  const a = r("[data-modal-overlay]", t);
+  a instanceof HTMLElement && a.setAttribute("data-state", o);
+}, j = (t, e, o) => {
   if (!t) {
@@ -50,62 +53,72 @@ e || (document.body.style.overflowY = "auto");
   }
-  A("[data-fx-modal][data-state=open]:not([data-allow-body-scroll=true]").filter((m) => m !== o).length === 0 && !e && (document.body.style.overflowY = "auto");
-}, j = (t, e, o) => {
-  var g;
+  A("[data-fx-modal][data-state=open]:not([data-allow-body-scroll=true]").filter((f) => f !== o).length === 0 && !e && (document.body.style.overflowY = "auto");
+}, z = (t, e, o) => {
+  var C;
   if (!(t instanceof HTMLElement))
     throw new Error("Modal Element must be a valid element");
-  const { animateContent: n, allowBodyScroll: l, preventCloseModal: m, overlayClass: h, onShow: u, onHide: y, onToggle: i, enableStackedModals: E } = o, b = l || t.hasAttribute("data-allow-body-scroll") && t.getAttribute("data-allow-body-scroll") !== "false", H = m || t.hasAttribute("data-prevent-close-modal") && t.getAttribute("data-prevent-close-modal") !== "false", L = E || t.hasAttribute("data-enable-stacked") && t.getAttribute("data-enable-stacked") !== "false", P = (h == null ? void 0 : h.split(" ")) || ((g = t.dataset.modalOverlay) == null ? void 0 : g.split(" ")) || "";
-  let w = !1;
-  t.setAttribute("data-allow-body-scroll", `${b}`);
-  const a = c("[data-modal-content]", t), k = A("[data-close-modal]", t);
-  if (!(a instanceof HTMLElement))
+  const { animateContent: a, allowBodyScroll: c, preventCloseModal: f, overlayClass: m, onShow: u, onHide: h, onToggle: d, enableStackedModals: p } = o, E = c || t.hasAttribute("data-allow-body-scroll") && t.getAttribute("data-allow-body-scroll") !== "false", k = f || t.hasAttribute("data-prevent-close-modal") && t.getAttribute("data-prevent-close-modal") !== "false", S = p || t.hasAttribute("data-enable-stacked") && t.getAttribute("data-enable-stacked") !== "false", _ = (m == null ? void 0 : m.split(" ")) || ((C = t.dataset.modalOverlay) == null ? void 0 : C.split(" ")) || "";
+  let b = !1;
+  t.setAttribute("data-allow-body-scroll", `${E}`);
+  const n = r("[data-modal-content]", t), B = A("[data-close-modal]", t);
+  if (!(n instanceof HTMLElement))
     throw new Error("Modal content element not found");
-  const S = a.dataset.enterAnimation || "", B = a.dataset.exitAnimation || "";
-  a.setAttribute("data-state", "close");
-  const x = (s) => {
-    document.removeEventListener("keydown", x), s.key === "Escape" && !H && M();
+  const O = n.dataset.enterAnimation || "", g = n.dataset.exitAnimation || "";
+  n.setAttribute("data-state", "close");
+  const I = () => {
+    const s = r("[data-modal-overlay]", t);
+    P(s);
+  }, L = (s) => {
+    document.removeEventListener("keydown", L), s.key === "Escape" && !k && (v(), I());
   }, q = (s) => {
-    if (L)
+    if (S)
       return;
-    const f = A("[data-fx-modal][data-state=open]");
-    for (const r of f)
-      if (r !== s) {
-        const N = c("[data-modal-content]", r);
-        v(r, N, "close");
-        const W = c("[data-modal-overlay]", r);
-        T(W, r);
+    const y = A("[data-fx-modal][data-state=open]");
+    for (const i of y)
+      if (i !== s) {
+        const H = r("[data-modal-overlay]", i);
+        H.setAttribute("data-state", "close");
+        const N = r("[data-modal-content]", i);
+        w(i, N, "close"), P(H);
       }
-  }, I = () => {
+  }, T = () => {
+    if (t.getAttribute("data-state") === "open")
+      return;
     q(t);
-    const s = R({
-      modalContent: a,
-      overlayClassName: P
+    const y = R({
+      modalContent: n,
+      overlayClassName: _
     });
-    if (n || S !== "") {
-      const f = n ? n.enterAnimation : S;
-      f !== "" && a.style.setProperty("--un-modal-animation", f), v(t, a, "open");
+    if (a || O !== "") {
+      const i = a ? a.enterAnimation : O;
+      i !== "" && n.style.setProperty("--un-modal-animation", i), w(t, n, "open");
     } else
-      v(t, a, "open");
-    b || (document.body.style.overflow = "hidden"), w || (document.addEventListener("keydown", x), w = !0), !H && s.addEventListener("click", M), u == null || u(), i == null || i({ isHidden: !1 });
-  }, M = () => {
-    if (n != null && n.exitAnimation && n.exitAnimation !== "" || B !== "") {
-      const f = n ? n.exitAnimation || "" : B;
-      a.setAttribute("data-state", "close"), a.style.setProperty("--un-modal-animation", f), a.addEventListener(
+      w(t, n, "open");
+    E || (document.body.style.overflow = "hidden"), b || (document.addEventListener("keydown", L), b = !0), t.focus(), !k && y.addEventListener("click", v), u == null || u(), d == null || d({ isHidden: !1 });
+  }, v = () => {
+    const s = () => {
+      w(t, n, "close"), j(S, E, t), I();
+    }, y = (i) => {
+      n.addEventListener(
         "animationend",
-        function r() {
-          a.removeEventListener("animationend", r), v(t, a, "close"), a.style.removeProperty("--un-modal-animation"), O(L, b, t);
+        function() {
+          i();
         },
         { once: !0 }
       );
+    };
+    if (a != null && a.exitAnimation && a.exitAnimation !== "" || g !== "") {
+      const i = a ? a.exitAnimation || "" : g;
+      n.setAttribute("data-state", "close"), n.style.setProperty("--un-modal-animation", i), y(() => {
+        n.style.removeProperty("--un-modal-animation"), s();
+      });
     } else
-      v(t, a, "close"), O(L, b, t);
-    w && (document.removeEventListener("keydown", x), w = !1);
-    const s = c("[data-modal-overlay]", t);
-    T(s, t), y == null || y(), i == null || i({ isHidden: !0 });
+      s();
+    b && (document.removeEventListener("keydown", L), b = !1), t.blur(), h == null || h(), d == null || d({ isHidden: !0 });
   };
   return { autoInitModal: () => {
-    if (e instanceof HTMLElement && e.addEventListener("click", I), k.length > 0)
-      for (const s of k)
-        s.addEventListener("click", M);
-  }, showModal: I, hideModal: M, isHidden: () => t.dataset.state === "close" };
-}, p = class p {
+    if (e instanceof HTMLElement && e.addEventListener("click", T), B.length > 0)
+      for (const s of B)
+        s.addEventListener("click", v);
+  }, showModal: T, hideModal: v, isHidden: () => t.dataset.state === "close" };
+}, M = class M {
   /**
@@ -117,15 +130,15 @@ * Modal Component
    */
-  constructor(e, o = {}, n) {
-    d(this, "modalElement");
-    d(this, "showModal");
-    d(this, "hideModal");
-    d(this, "isHidden");
-    d(this, "options");
-    d(this, "state");
-    const l = typeof e == "string" ? c(e) : e;
-    if (!(l instanceof HTMLElement))
+  constructor(e, o = {}, a) {
+    l(this, "modalElement");
+    l(this, "showModal");
+    l(this, "hideModal");
+    l(this, "isHidden");
+    l(this, "options");
+    l(this, "state");
+    const c = typeof e == "string" ? r(e) : e;
+    if (!(c instanceof HTMLElement))
       throw new Error("Invalid provided HTMLElement");
-    this.modalElement = l, this.options = o, this.state = (o == null ? void 0 : o.defaultState) || this.modalElement.dataset.state || "close", this.modalElement.hasAttribute("data-fx-modal") || this.modalElement.setAttribute("data-fx-modal", "");
-    const m = l.dataset.modalId, h = (typeof n == "string" ? c(n) : n) || c(`[data-modal-target='${m}']`), { showModal: u, hideModal: y, autoInitModal: i, isHidden: E } = j(l, h, this.options);
-    this.state === "open" && u(), i(), this.showModal = u, this.hideModal = y, this.isHidden = E;
+    this.modalElement = c, this.options = o, this.state = (o == null ? void 0 : o.defaultState) || this.modalElement.dataset.state || "close", this.modalElement.hasAttribute("data-fx-modal") || this.modalElement.setAttribute("data-fx-modal", "");
+    const f = c.dataset.modalId, m = (typeof a == "string" ? r(a) : a) || r(`[data-modal-target='${f}']`), { showModal: u, hideModal: h, autoInitModal: d, isHidden: p } = z(c, m, this.options);
+    this.state === "open" && u(), d(), this.showModal = u, this.hideModal = h, this.isHidden = p;
   }
@@ -137,10 +150,12 @@ };
  */
-d(p, "autoInit", (e = "[data-fx-modal]") => {
+l(M, "autoInit", (e = "[data-fx-modal]") => {
   const o = A(e);
-  for (const n of o)
-    new p(n);
+  for (const a of o)
+    new M(a);
 });
-let C = p;
+let x = M;
+const Q = (t, e = {}, o) => new x(t, e, o);
 export {
-  C as Modal
+  x as Modal,
+  Q as fModal
 };

package.json

 {
   "name": "@flexilla/modal",
   "private": false,
-  "version": "2.0.1",
+  "version": "2.0.2",
   "type": "module",
@@ -70,3 +70,3 @@ "description": "A customizable modal component for creating interactive pop-up dialogs in web applications.",
   "author": "johnkat-mj",
-  "gitHead": "8435693ee1ff8e2f9d279b5d4026949530d7d05d"
+  "gitHead": "98932fa7279389be90368e974e58fab0fb1ba654"
 }

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

Total package byte prevSize

19520

increased by4.03%

Lines of code

224

increased by7.69%

No dependency changes