Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More
Socket
Sign inDemoInstall
Socket

@flexilla/modal

Package Overview
Dependencies
Maintainers
1
Versions
9
Alerts
File Explorer

Advanced tools

Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

@flexilla/modal - npm Package Compare versions

Comparing version 2.0.0 to 2.0.1

5

dist/index.d.ts

@@ -15,2 +15,7 @@ export declare class Modal {

constructor(modal: string | HTMLElement, options?: ModalOptions, triggerElement?: string | HTMLElement);
/**
* auto init Modals based on the selector provided
* @param selector {string} default is [data-fx-modal] attribute
*/
static autoInit: (selector?: string) => void;
}

@@ -17,0 +22,0 @@

129

dist/modal.js

@@ -1,5 +0,5 @@

var q = Object.defineProperty;
var N = (t, e, o) => e in t ? q(t, e, { enumerable: !0, configurable: !0, writable: !0, value: o }) : t[e] = o;
var r = (t, e, o) => (N(t, typeof e != "symbol" ? e + "" : e, o), o);
const c = (t, e = document.body) => e.querySelector(t), L = (t, e = document.body) => Array.from(e.querySelectorAll(t)), W = ({
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)), $ = ({
newElement: t,

@@ -15,3 +15,3 @@ existingElement: e

throw new Error("Existing element must have a parent element.");
}, Y = ({
}, D = ({
element: t,

@@ -28,14 +28,14 @@ callback: e

) : e();
}, $ = (t, e) => {
}, K = (t, e) => {
e.removeChild(t);
}, I = (t, e) => {
Y({
}, T = (t, e) => {
D({
element: t,
callback() {
$(t, e);
K(t, e);
}
});
}, D = ({ modalContent: t, overlayClassName: e }) => {
}, R = ({ modalContent: t, overlayClassName: e }) => {
const o = document.createElement("span");
return o.setAttribute("aria-hidden", "true"), o.setAttribute("data-state", "open"), W({ newElement: o, existingElement: t }), o.classList.add(...e), o.setAttribute("data-modal-overlay", "overlay-bg"), o;
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) => {

@@ -45,3 +45,3 @@ if (!(e instanceof HTMLElement))

t.setAttribute("aria-hidden", o === "open" ? "false" : "true"), t.setAttribute("data-state", o === "open" ? "open" : "close"), e.setAttribute("data-state", o === "open" ? "open" : "close");
}, T = (t, e, o) => {
}, O = (t, e, o) => {
if (!t) {

@@ -51,47 +51,47 @@ e || (document.body.style.overflowY = "auto");

}
L("[data-fx-modal][data-state=open]:not([data-allow-body-scroll=true]").filter((m) => m !== o).length === 0 && !e && (document.body.style.overflowY = "auto");
}, K = (t, e, o) => {
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;
if (!(t instanceof HTMLElement))
throw new Error("Modal Element must be a valid element");
const { animateContent: n, allowBodyScroll: d, preventCloseModal: m, overlayClass: h, onShow: u, onHide: y, onToggle: i, enableStackedModals: A } = o, b = d || 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", p = A || t.hasAttribute("data-enable-stacked") && t.getAttribute("data-enable-stacked") !== "false", O = (h == null ? void 0 : h.split(" ")) || ((g = t.dataset.modalOverlay) == null ? void 0 : g.split(" ")) || "";
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), x = L("[data-close-modal]", t);
const a = c("[data-modal-content]", t), k = A("[data-close-modal]", t);
if (!(a instanceof HTMLElement))
throw new Error("Modal content element not found");
const k = a.dataset.enterAnimation || "", S = a.dataset.exitAnimation || "";
const S = a.dataset.enterAnimation || "", B = a.dataset.exitAnimation || "";
a.setAttribute("data-state", "close");
const E = (s) => {
document.removeEventListener("keydown", E), s.key === "Escape" && !H && M();
}, C = (s) => {
if (p)
const x = (s) => {
document.removeEventListener("keydown", x), s.key === "Escape" && !H && M();
}, q = (s) => {
if (L)
return;
const f = L("[data-fx-modal][data-state=open]");
for (const l of f)
if (l !== s) {
const _ = c("[data-modal-content]", l);
v(l, _, "close");
const P = c("[data-modal-overlay]", l);
I(P, l);
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);
}
}, B = () => {
C(t);
const s = D({
}, I = () => {
q(t);
const s = R({
modalContent: a,
overlayClassName: O
overlayClassName: P
});
if (n || k !== "") {
const f = n ? n.enterAnimation : k;
if (n || S !== "") {
const f = n ? n.enterAnimation : S;
f !== "" && a.style.setProperty("--un-modal-animation", f), v(t, a, "open");
} else
v(t, a, "open");
b || (document.body.style.overflow = "hidden"), w || (document.addEventListener("keydown", E), w = !0), !H && s.addEventListener("click", M), u == null || u(), i == null || i({ isHidden: !1 });
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 !== "" || S !== "") {
const f = n ? n.exitAnimation || "" : S;
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(
"animationend",
function l() {
a.removeEventListener("animationend", l), v(t, a, "close"), a.style.removeProperty("--un-modal-animation"), T(p, b, t);
function r() {
a.removeEventListener("animationend", r), v(t, a, "close"), a.style.removeProperty("--un-modal-animation"), O(L, b, t);
},

@@ -101,14 +101,13 @@ { once: !0 }

} else
v(t, a, "close"), T(p, b, t);
w && (document.removeEventListener("keydown", E), w = !1);
v(t, a, "close"), O(L, b, t);
w && (document.removeEventListener("keydown", x), w = !1);
const s = c("[data-modal-overlay]", t);
I(s, t), y == null || y(), i == null || i({ isHidden: !0 });
T(s, t), y == null || y(), i == null || i({ isHidden: !0 });
};
return { autoInitModal: () => {
if (e instanceof HTMLElement && e.addEventListener("click", B), x.length > 0)
for (const s of x)
if (e instanceof HTMLElement && e.addEventListener("click", I), k.length > 0)
for (const s of k)
s.addEventListener("click", M);
}, showModal: B, hideModal: M, isHidden: () => t.dataset.state === "close" };
};
class F {
}, showModal: I, hideModal: M, isHidden: () => t.dataset.state === "close" };
}, p = class p {
/**

@@ -121,18 +120,28 @@ * Modal Component

constructor(e, o = {}, n) {
r(this, "modalElement");
r(this, "showModal");
r(this, "hideModal");
r(this, "isHidden");
r(this, "options");
r(this, "state");
const d = typeof e == "string" ? c(e) : e;
if (!(d instanceof HTMLElement))
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))
throw new Error("Invalid provided HTMLElement");
this.modalElement = d, 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 = d.dataset.modalId, h = (typeof n == "string" ? c(n) : n) || c(`[data-modal-target='${m}']`), { showModal: u, hideModal: y, autoInitModal: i, isHidden: A } = K(d, h, this.options);
this.state === "open" && u(), i(), this.showModal = u, this.hideModal = y, this.isHidden = A;
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;
}
}
};
/**
* auto init Modals based on the selector provided
* @param selector {string} default is [data-fx-modal] attribute
*/
d(p, "autoInit", (e = "[data-fx-modal]") => {
const o = A(e);
for (const n of o)
new p(n);
});
let C = p;
export {
F as Modal
C as Modal
};
{
"name": "@flexilla/modal",
"private": false,
"version": "2.0.0",
"version": "2.0.1",
"type": "module",

@@ -70,3 +70,3 @@ "description": "A customizable modal component for creating interactive pop-up dialogs in web applications.",

"author": "johnkat-mj",
"gitHead": "b182c7035953bc34e8f350b834df9862bec8acb5"
"gitHead": "8435693ee1ff8e2f9d279b5d4026949530d7d05d"
}

Sorry, the diff of this file is not supported yet

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

Packages

npm

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc