@flexilla/collapse - npm Package Compare versions

Comparing version 2.0.3 to 2.0.4

dist/collapse.js

@@ -1,19 +0,73 @@
-var r = Object.defineProperty;
-var p = (s, t, e) => t in s ? r(s, t, { enumerable: !0, configurable: !0, writable: !0, value: e }) : s[t] = e;
-var i = (s, t, e) => (p(s, typeof t != "symbol" ? t + "" : t, e), e);
-const n = (s, t, e, l, o) => {
-  if (!(s instanceof HTMLElement))
-    throw new Error("accordion item not a valid HTMLELement");
-  switch (s.setAttribute("aria-hidden", e === "open" ? "false" : "true"), s.setAttribute("data-state", e), l) {
-    case "horizontal": {
-      s.style.width = e === "open" ? `${o}px` : "0px";
-      break;
+var E = Object.defineProperty;
+var x = (t, e, s) => e in t ? E(t, e, { enumerable: !0, configurable: !0, writable: !0, value: s }) : t[e] = s;
+var i = (t, e, s) => x(t, typeof e != "symbol" ? e + "" : e, s);
+const y = (t, e) => {
+  t.setAttribute("aria-hidden", e === "open" ? "false" : "true"), t.setAttribute("data-state", e);
+}, w = async (t) => new Promise((e) => {
+  const s = t.getBoundingClientRect();
+  e(s.height);
+}), H = () => new Promise((t) => {
+  requestAnimationFrame(() => {
+    requestAnimationFrame(() => {
+      t();
+    });
+  });
+}), T = (t) => new Promise((e) => {
+  requestAnimationFrame(() => {
+    t(0), e();
+  });
+}), m = (t, e) => new Promise((s) => {
+  function n(a) {
+    a.propertyName === e && (t.removeEventListener("transitionend", n), s());
+  }
+  t.addEventListener("transitionend", n);
+}), g = (t, e = document.body) => e.querySelector(t), b = (t, e = document.body) => Array.from(e.querySelectorAll(t)), v = ({
+  element: t,
+  callback: e,
+  type: s,
+  keysCheck: n
+}) => {
+  const a = getComputedStyle(t), c = s === "transition" ? a.transition : a.animation;
+  if (c !== "none" && c !== "" && !n.includes(c)) {
+    const d = s === "transition" ? "transitionend" : "animationend", h = () => {
+      t.removeEventListener(d, h), e();
+    };
+    t.addEventListener(d, h, { once: !0 });
+  } else
+    e();
+}, S = ({
+  element: t,
+  callback: e
+}) => {
+  v({
+    element: t,
+    callback: e,
+    type: "transition",
+    keysCheck: ["all 0s ease 0s", "all"]
+  });
+}, o = (t, e, s) => {
+  const n = new CustomEvent(e, { detail: s });
+  t.dispatchEvent(n);
+}, r = (t, e) => o(e, t, { detail: e }), u = async (t, e, s) => {
+  t.style.maxHeight = "none";
+  const n = await w(t);
+  t.style.maxHeight = s === "expand" ? `${e}px` || "0px" : `${n}px`, await H(), await T(() => {
+    t.style.maxHeight = s === "expand" ? `${n}px` : `${e}px` || "0px";
+  });
+};
+async function A(t, e) {
+  t && (r("beforeopen", t), await u(t, e, "expand"), await m(t, "max-height"), t.style.maxHeight = "none", r("afteropen", t));
+}
+async function L(t, e) {
+  t && (r("beforeclose", t), u(t, e, "collapse"), await m(t, "max-height"), r("afterclose", t));
+}
+const p = ({ collapseElement: t, triggerElement: e, state: s, closeHeight: n }) => {
+  if (!(t instanceof HTMLElement)) throw new Error("accordion item not a valid HTMLElement");
+  t.dataset.state !== s && (s === "open" ? A(t, n || 0) : L(t, n || 0), S({
+    element: t,
+    callback() {
+      y(t, s), e instanceof HTMLElement && e.setAttribute("aria-expanded", s === "open" ? "true" : "false");
     }
-    default: {
-      s.style.height = e === "open" ? `${s.scrollHeight}px` : "0px";
-      break;
-    }
-  }
-  t instanceof HTMLElement && t.setAttribute("aria-expanded", e === "open" ? "true" : "false");
-}, h = (s, t = document.body) => Array.from(t.querySelectorAll(s)), a = class a {
+  }));
+}, l = class l {
   /**
@@ -25,5 +79,4 @@ * Collapse Component
    */
-  constructor(t, e = {}, l) {
+  constructor(e, s = {}, n) {
     i(this, "collapseElement");
-    i(this, "collapseOrientation");
     i(this, "defaultState");
@@ -33,39 +86,73 @@ i(this, "collapseId");
     i(this, "options");
-    i(this, "collapseElementWidth");
+    i(this, "closeHeight");
     i(this, "show", () => {
-      var t, e;
-      n(this.collapseElement, this.collapseTrigger, "open", this.collapseOrientation, this.collapseElementWidth), (e = (t = this.options).onToggle) == null || e.call(t, { isExpanded: !0 });
+      var e, s;
+      o(this.collapseElement, "beforeshow", {
+        isExpanded: !1
+      }), p({
+        collapseElement: this.collapseElement,
+        triggerElement: this.collapseTrigger,
+        state: "open",
+        closeHeight: this.closeHeight
+      }), (s = (e = this.options).onToggle) == null || s.call(e, { isExpanded: !0 }), o(this.collapseElement, "aftershow", {
+        isExpanded: !1
+      });
     });
     i(this, "hide", () => {
-      var t, e;
-      n(this.collapseElement, this.collapseTrigger, "close", this.collapseOrientation), (e = (t = this.options).onToggle) == null || e.call(t, { isExpanded: !1 });
+      var e, s;
+      o(this.collapseElement, "beforehide", {
+        isExpanded: !1
+      }), p({
+        collapseElement: this.collapseElement,
+        triggerElement: this.collapseTrigger,
+        state: "close",
+        closeHeight: this.closeHeight
+      }), (s = (e = this.options).onToggle) == null || s.call(e, { isExpanded: !1 }), o(this.collapseElement, "afterhide", {
+        isExpanded: !1
+      });
     });
     i(this, "toggle", () => {
-      var e, l;
-      const t = this.collapseElement.dataset.state === "close" ? "open" : "close";
-      n(this.collapseElement, this.collapseTrigger, t, this.collapseOrientation, this.collapseElementWidth), (l = (e = this.options).onToggle) == null || l.call(e, { isExpanded: t === "open" });
+      var s, n;
+      const e = this.collapseElement.dataset.state === "close" ? "open" : "close";
+      o(this.collapseElement, "beforetoggle", {
+        isExpanded: e === "open"
+      }), p({
+        collapseElement: this.collapseElement,
+        triggerElement: this.collapseTrigger,
+        state: e,
+        closeHeight: this.closeHeight
+      }), (n = (s = this.options).onToggle) == null || n.call(s, { isExpanded: e === "open" }), o(this.collapseElement, "aftertoggle", {
+        isExpanded: e === "open"
+      });
     });
-    const o = typeof t == "string" ? document.querySelector(`${t}`) : t;
-    if (!(o instanceof HTMLElement))
+    const a = typeof e == "string" ? document.querySelector(`${e}`) : e;
+    if (!(a instanceof HTMLElement))
       throw new Error("Provided element is not a valid HTMLElement");
-    this.collapseElement = o, this.collapseId = this.collapseElement.getAttribute("id"), this.collapseTrigger = document.querySelector(`${l}`) || document.querySelector(`[data-collapse-trigger][data-target*='${this.collapseId}']`), this.options = e, this.collapseOrientation = this.options.orientation || this.collapseElement.dataset.orientation || "vertical", this.defaultState = this.options.defaultState || this.collapseElement.dataset.defaultState || "close", this.collapseElement.setAttribute("data-state", this.defaultState), this.collapseElementWidth = this.collapseElement.clientWidth, this.init();
+    this.collapseElement = a, this.collapseId = this.collapseElement.getAttribute("id"), this.collapseTrigger = g(`${n}`) || g(`[data-collapse-trigger][data-target*='${this.collapseId}']`), this.options = s, this.defaultState = this.options.defaultState || this.collapseElement.dataset.defaultState || "close", this.closeHeight = this.options.closeHeight || parseInt(this.collapseElement.dataset.closeHeight || "0") || 0, this.initCollapse();
   }
-  init() {
-    this.collapseTrigger instanceof HTMLElement && this.collapseTrigger.addEventListener("click", this.toggle), this.defaultState === "close" && this.hide();
+  initCollapse() {
+    this.collapseTrigger instanceof HTMLElement && this.collapseTrigger.addEventListener("click", this.toggle), this.defaultState === "close" && this.hide(), this.defaultState === "open" && this.show();
   }
 };
 /**
+ * Collapse Component
+ * @param selector 
+ * @param triggerSelector 
+ * @param options 
+ */
+i(l, "init", (e, s = {}, n) => new l(e, s, n)), /**
  * auto init collapse components based on a provided selector
  * @param selector {string} default is [data-fx-collapse]
  */
-i(a, "autoInit", (t = "[data-fx-collapse]") => {
-  const e = h(t);
-  for (const l of e)
-    new a(l);
+i(l, "autoInit", (e = "[data-fx-collapse]") => {
+  const s = b(e);
+  for (const n of s)
+    new l(n);
 });
-let c = a;
-const g = (s, t = {}, e) => new c(s, t, e);
+let f = l;
 export {
-  c as Collapse,
-  g as fCollapse
+  f as Collapse,
+  L as collapse,
+  A as expand,
+  p as expandCollapseElement
 };

dist/index.d.ts

 export declare class Collapse {
     private collapseElement;
-    private collapseOrientation;
     private defaultState;
@@ -8,3 +7,3 @@ private collapseId;
     private options;
-    private collapseElementWidth;
+    private closeHeight;
     /**
@@ -20,4 +19,11 @@ * Collapse Component
     toggle: () => void;
-    private init;
+    private initCollapse;
     /**
+     * Collapse Component
+     * @param selector
+     * @param triggerSelector
+     * @param options
+     */
+    static init: (selector: string | HTMLElement, options?: CollapseOptions, triggerSelector?: string) => Collapse;
+    /**
      * auto init collapse components based on a provided selector
@@ -29,5 +35,7 @@ * @param selector {string} default is [data-fx-collapse]
 
+export declare function collapse(element: CollapsibleElement, closeHeight: number): Promise<void>;
+
 export declare type CollapseOptions = {
-    orientation?: "vertical" | "horizontal";
-    defaultState?: "open" | "close";
+    defaultState?: CollapseState;
+    closeHeight?: number;
     onToggle?: ({ isExpanded }: {
@@ -38,4 +46,27 @@ isExpanded: boolean;
 
-export declare const fCollapse: (selector: string | HTMLElement, options?: CollapseOptions, triggerSelector?: string) => Collapse;
+declare type CollapseState = "open" | "close";
 
+export declare type CollapsibleElement = HTMLElement & {
+    style: {
+        maxHeight: string;
+        transition: string;
+    };
+};
+
+export declare function expand(element: CollapsibleElement, closeHeight: number): Promise<void>;
+
+export declare const expandCollapseElement: ({ collapseElement, triggerElement, state, closeHeight }: {
+    collapseElement: CollapsibleElement;
+    triggerElement: HTMLElement | null;
+    state: "open" | "close";
+    closeHeight?: number | undefined;
+}) => void;
+
+export declare type ExpandCollapseOptions = {
+    collapseElement: HTMLElement;
+    triggerElement: HTMLElement | null;
+    state: CollapseState;
+    closeHeight?: number;
+};
+
 export { }

package.json

 {
   "name": "@flexilla/collapse",
   "private": false,
-  "version": "2.0.3",
+  "version": "2.0.4",
   "type": "module",
@@ -46,2 +46,5 @@ "description": "A versatile and interactive collapse component for creating collapsible sections in web applications, conserving space and improving user experience.",
   },
+  "dependencies": {
+    "@flexilla/utilities": "latest"
+  },
   "keywords": [
@@ -67,3 +70,3 @@ "collapse",
   "author": "johnkat-mj",
-  "gitHead": "98932fa7279389be90368e974e58fab0fb1ba654"
+  "gitHead": "2eb26c556c72eb0c607dfc2de61b3ca6ef3128c9"
 }

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

Major refactor

Supply chain risk

Package has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.

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

16287

increased by44.54%

Lines of code

235

increased by102.59%

Worsened metrics

Dependency count

1

increased byInfinity%

Number of medium supply chain risk alerts

1

increased byInfinity%

Dependency changes

• + Added@flexilla/utilities@latest

• + Added@flexilla/utilities@2.0.3(transitive)