@flexilla/tabs - npm Package Compare versions

Comparing version 2.0.0 to 2.0.1

dist/index.d.ts

@@ -28,2 +28,3 @@ declare type IndicatorOptions = {
     constructor(tabs: string | HTMLElement, options?: TabsOptions);
+    private getDefActivePanelValue;
     private init;
@@ -36,2 +37,7 @@ private attachTriggerEvents;
     changeTab: (tabValue: string) => void;
+    /**
+     * auto init Tabs Elements based on the selector provided
+     * @param selector {string} default is [data-fx-tabs] attribute
+     */
+    static autoInit: (selector?: string) => void;
 }
@@ -38,0 +44,0 @@

dist/tabs.js

@@ -1,50 +0,56 @@
-var C = Object.defineProperty;
-var v = (a, t, e) => t in a ? C(a, t, { enumerable: !0, configurable: !0, writable: !0, value: e }) : a[t] = e;
-var c = (a, t, e) => (v(a, typeof t != "symbol" ? t + "" : t, e), e);
-const m = (a, t = document.body) => t.querySelector(a), g = (a, t = document.body) => {
-  const e = p(a, t);
-  return Array.from(e).find((n) => n.parentElement === t);
-}, p = (a, t = document.body) => Array.from(t.querySelectorAll(a)), I = ({
-  newElement: a,
+var D = Object.defineProperty;
+var O = (e, t, a) => t in e ? D(e, t, { enumerable: !0, configurable: !0, writable: !0, value: a }) : e[t] = a;
+var r = (e, t, a) => (O(e, typeof t != "symbol" ? t + "" : t, a), a);
+const g = (e, t = document.body) => t.querySelector(e), u = (e, t = document.body) => {
+  const a = p(e, t);
+  return Array.from(a).find((n) => n.parentElement === t);
+}, p = (e, t = document.body) => Array.from(t.querySelectorAll(e)), M = ({
+  newElement: e,
   existingElement: t
 }) => {
-  if (!(a instanceof HTMLElement) || !(t instanceof HTMLElement))
+  if (!(e instanceof HTMLElement) || !(t instanceof HTMLElement))
     throw new Error("Both parameters must be valid HTML elements.");
-  const e = t.parentElement;
-  if (e)
-    e.insertBefore(a, t);
+  const a = t.parentElement;
+  if (a)
+    a.insertBefore(e, t);
   else
     throw new Error("Existing element must have a parent element.");
-}, D = "true", M = "false", y = "inactive", A = "active", O = "horizontal", T = "vertical";
-const H = "cubic-bezier(.48,1.55,.28,1)", N = { className: "", transformDuration: 0, transformEasing: "" }, S = ({ activeTabTrigger: a, indicatorClassName: t, tabsOrientation: e, tabList: n }) => {
+}, E = (e, t) => {
+  for (const [a, n] of Object.entries(t))
+    e.setAttribute(a, n);
+}, H = "true", N = "false", x = "inactive", y = "active", S = "horizontal", m = "vertical";
+const V = "cubic-bezier(.48,1.55,.28,1)", R = { className: "", transformDuration: 0, transformEasing: "" }, _ = ({ activeTabTrigger: e, indicatorClassName: t, tabsOrientation: a, tabList: n }) => {
   if (!t || t === "")
     return;
   const o = t, i = document.createElement("span");
-  i.setAttribute("data-tab-indicator", ""), i.setAttribute("aria-hidden", "true");
-  const h = e === T ? P : w;
+  E(i, {
+    "data-tab-indicator": "",
+    "aria-hidden": "true"
+  });
+  const h = a === m ? I : v;
   i.style.setProperty(
     "transform",
-    h(a)
+    h(e)
   );
   const b = o ? o.split(" ") : [];
   i.classList.add(...b);
-  const s = m("[data-tabs-trigger]:first-child", n);
-  return s && I({ newElement: i, existingElement: s }), i;
-}, w = (a) => {
+  const s = g("[data-tabs-trigger]:first-child", n);
+  return s && M({ newElement: i, existingElement: s }), i;
+}, v = (e) => {
   const t = {
-    x: a.offsetLeft,
-    scaleX: a.offsetWidth / 100
+    x: e.offsetLeft,
+    scaleX: e.offsetWidth / 100
   };
   return `translateX(${t.x}px) scaleX(${t.scaleX})`;
-}, P = (a) => {
+}, I = (e) => {
   const t = {
-    y: a.offsetTop,
-    scaleY: a.offsetHeight / 10
+    y: e.offsetTop,
+    scaleY: e.offsetHeight / 10
   };
   return `translateY(${t.y}px) scaleY(${t.scaleY})`;
-}, x = ({ triggerElement: a, indicator_: t, tabsOrientation: e, transformDuration: n, transformEasing: o, tabList: i }) => {
-  i.style.setProperty("--un-tab-indicator-height", `${e === T ? 10 : a.clientHeight}px`), i.style.setProperty("--un-tab-indicator-width", `${e === T ? a.clientWidth : 100}px`), i.style.setProperty("--un-tab-indicator-top", `${e === T ? 0 : a.offsetTop}px`), i.style.setProperty("--un-tab-indicator-left", `${e === T ? a.offsetLeft : 0}px`), t instanceof HTMLElement && t.animate(
+}, C = ({ triggerElement: e, indicator_: t, tabsOrientation: a, transformDuration: n, transformEasing: o, tabList: i }) => {
+  i.style.setProperty("--un-tab-indicator-height", `${a === m ? 10 : e.clientHeight}px`), i.style.setProperty("--un-tab-indicator-width", `${a === m ? e.clientWidth : 100}px`), i.style.setProperty("--un-tab-indicator-top", `${a === m ? 0 : e.offsetTop}px`), i.style.setProperty("--un-tab-indicator-left", `${a === m ? e.offsetLeft : 0}px`), t instanceof HTMLElement && t.animate(
     [
       {
-        transform: e === T ? P(a) : w(a)
+        transform: a === m ? I(e) : v(e)
       }
@@ -58,57 +64,58 @@ ],
   );
-}, _ = (a, t) => {
-  for (const e of t)
-    e !== a && e.setAttribute("data-state", y);
-}, R = ({ tabsOrientation: a, indicatorTransformDuration: t, indicatorTransformEaseing: e, indicator: n, triggerElement: o, tabList: i }) => {
-  !(n instanceof HTMLSpanElement) || !(o instanceof HTMLElement) || x({
+}, $ = (e, t) => {
+  for (const a of t)
+    a !== e && E(a, { "data-state": x, tabindex: "-1" });
+}, k = ({ tabsOrientation: e, indicatorTransformDuration: t, indicatorTransformEaseing: a, indicator: n, triggerElement: o, tabList: i }) => {
+  !(n instanceof HTMLSpanElement) || !(o instanceof HTMLElement) || C({
     triggerElement: o,
     indicator_: n,
-    tabsOrientation: a,
+    tabsOrientation: e,
     transformDuration: t,
-    transformEasing: e,
+    transformEasing: a,
     tabList: i
   });
-}, V = (a, t) => {
-  for (const e of t)
-    e !== a && (e.setAttribute("data-state", y), e.setAttribute("aria-hidden", D), e.hidden = !0, e.hasAttribute("data-initial-active") && e.setAttribute("data-initial-active", "false"));
-}, E = ({ triggerElement: a, tabTriggers: t, tabPanels: e, tabsPanelContainer: n, showAnimation: o, tabsOrientation: i, indicatorTransformDuration: h, indicatorTransformEaseing: b, tabList: s }) => {
-  if (!(a instanceof HTMLElement))
+}, F = (e, t) => {
+  for (const a of t)
+    a !== e && (E(a, { "data-state": x, "aria-hidden": H }), a.hidden = !0);
+}, L = ({ triggerElement: e, tabTriggers: t, tabsPanelContainer: a, showAnimation: n, tabsOrientation: o, indicatorTransformDuration: i, indicatorTransformEaseing: h, tabList: b }) => {
+  const s = u("[data-tab-panel][data-state=active]", a);
+  if (s && (E(s, { "data-state": "hidden" }), s.hidden = !0), !(e instanceof HTMLElement))
     return;
-  const r = g(`[data-tab-panel]#${a.getAttribute("data-target")}`, n);
-  if (!(r instanceof HTMLElement))
+  const c = u(`[data-tab-panel]#${e.getAttribute("data-target")}`, a);
+  if (!(c instanceof HTMLElement))
     return;
-  _(a, t), V(r, e), r.setAttribute("data-state", A), r.hidden = !1, a.setAttribute("data-state", A), r.setAttribute("aria-hidden", M), o && o !== "" && r.style.setProperty("--un-tab-show-animation", `${o}`);
-  const d = m("[data-tab-indicator]", s);
-  x({
-    triggerElement: a,
-    indicator_: d,
-    tabsOrientation: i,
-    transformDuration: h,
-    transformEasing: b,
-    tabList: s
+  $(e, t), c.hidden = !1, E(c, { "data-state": y, "aria-hidden": N }), E(e, { "data-state": y, tabindex: "0" }), n && n !== "" && c.style.setProperty("--un-tab-show-animation", `${n}`);
+  const l = g("[data-tab-indicator]", b);
+  C({
+    triggerElement: e,
+    indicator_: l,
+    tabsOrientation: o,
+    transformDuration: i,
+    transformEasing: h,
+    tabList: b
   });
-  const l = g("[data-fx-tabs]", r);
-  if (l instanceof HTMLElement) {
-    const f = g("[data-tab-list]", l), u = f.querySelector("[data-tabs-trigger][data-state=active]"), L = f.querySelector("span[data-tab-indicator]");
-    L instanceof HTMLSpanElement && u instanceof HTMLElement && !l.hasAttribute("data-nested-indicator-seteled") && (l.setAttribute("data-nested-indicator-seteled", ""), R({
-      tabsOrientation: i,
-      indicatorTransformDuration: h,
-      indicatorTransformEaseing: b,
-      indicator: L,
-      triggerElement: u,
+  const d = u("[data-fx-tabs]", c);
+  if (d instanceof HTMLElement) {
+    const f = u("[data-tab-list]", d), T = f.querySelector("[data-tabs-trigger][data-state=active]"), w = f.querySelector("span[data-tab-indicator]");
+    w instanceof HTMLSpanElement && T instanceof HTMLElement && !d.hasAttribute("data-nested-indicator-seteled") && (d.setAttribute("data-nested-indicator-seteled", ""), k({
+      tabsOrientation: o,
+      indicatorTransformDuration: i,
+      indicatorTransformEaseing: h,
+      indicator: w,
+      triggerElement: T,
       tabList: f
     }));
   }
-  return { currentTabPanel: r };
-}, $ = (a, t, e) => {
+  return { currentTabPanel: c };
+}, U = (e, t, a) => {
   const n = t.findIndex(
-    (s) => s.getAttribute("data-state") === A
-  ), o = a.key === "ArrowUp" || a.key === "ArrowLeft" ? -1 : 1, i = e === T, h = (s) => !t[s].hasAttribute("disabled"), b = (s, r, d) => {
-    let l = (s + r + d) % d;
-    for (; !h(l); )
-      l = (l + r + d) % d;
-    return l;
+    (s) => s.getAttribute("data-state") === y
+  ), o = e.key === "ArrowUp" || e.key === "ArrowLeft" ? -1 : 1, i = a === m, h = (s) => !t[s].hasAttribute("disabled"), b = (s, c, l) => {
+    let d = (s + c + l) % l;
+    for (; !h(d); )
+      d = (d + c + l) % l;
+    return d;
   };
-  if (i && (a.key === "ArrowUp" || a.key === "ArrowDown") || !i && (a.key === "ArrowLeft" || a.key === "ArrowRight")) {
-    a.preventDefault();
+  if (i && (e.key === "ArrowUp" || e.key === "ArrowDown") || !i && (e.key === "ArrowLeft" || e.key === "ArrowRight")) {
+    e.preventDefault();
     const s = b(
@@ -118,7 +125,6 @@ n,
       t.length
-    ), r = t[s];
-    r.focus(), r.click();
+    ), c = t[s];
+    c.focus(), c.click();
   }
-};
-class F {
+}, A = class A {
   /**
@@ -129,29 +135,32 @@ * Tabs Components
    */
-  constructor(t, e = {}) {
-    c(this, "tabsElement");
-    c(this, "options");
-    c(this, "indicatorOptions");
-    c(this, "defaultTabValue");
-    c(this, "tabsOrientation");
-    c(this, "showAnimation");
-    c(this, "tabList");
-    c(this, "tabPanels");
-    c(this, "tabTriggers");
-    c(this, "activeTabTrigger");
-    c(this, "indicatorClassName");
-    c(this, "indicatorTransformEaseing");
-    c(this, "indicatorTransformDuration");
-    c(this, "panelsContainer");
+  constructor(t, a = {}) {
+    r(this, "tabsElement");
+    r(this, "options");
+    r(this, "indicatorOptions");
+    r(this, "defaultTabValue");
+    r(this, "tabsOrientation");
+    r(this, "showAnimation");
+    r(this, "tabList");
+    r(this, "tabPanels");
+    r(this, "tabTriggers");
+    r(this, "activeTabTrigger");
+    r(this, "indicatorClassName");
+    r(this, "indicatorTransformEaseing");
+    r(this, "indicatorTransformDuration");
+    r(this, "panelsContainer");
+    r(this, "getDefActivePanelValue", (t) => {
+      const a = u("[data-tab-panel][data-state=active]", t);
+      return a == null ? void 0 : a.getAttribute("id");
+    });
     /**
      * @param tabValue {string} the value of the targeted tabpanel
      */
-    c(this, "changeTab", (t) => {
-      const e = m(`[data-tabs-trigger][data-target='${t}']`, this.tabList);
-      if (!(e instanceof HTMLElement))
+    r(this, "changeTab", (t) => {
+      const a = g(`[data-tabs-trigger][data-target='${t}']`, this.tabList);
+      if (!(a instanceof HTMLElement))
         return;
-      this.activeTabTrigger = e;
-      const n = E({
-        triggerElement: e,
+      this.activeTabTrigger = a;
+      const n = L({
+        triggerElement: a,
         tabTriggers: this.tabTriggers,
-        tabPanels: this.tabPanels,
         tabsPanelContainer: this.panelsContainer,
@@ -165,23 +174,23 @@ showAnimation: this.showAnimation,
       this.options.onChangeTab && this.options.onChangeTab({
-        currentTrigger: e,
+        currentTrigger: a,
         currentPanel: n == null ? void 0 : n.currentTabPanel
       });
     });
-    const n = typeof t == "string" ? m(t) : t;
+    const n = typeof t == "string" ? g(t) : t;
     if (!(n instanceof HTMLElement))
       throw new Error("Please Provide a valid HTMLElement for the tabs component");
-    this.tabsElement = n, this.panelsContainer = g("[data-panels-container]", this.tabsElement) || this.tabsElement, this.options = e, this.indicatorOptions = this.options.indicatorOptions || N;
+    this.tabsElement = n, this.panelsContainer = u("[data-panels-container]", this.tabsElement) || this.tabsElement, this.options = a, this.indicatorOptions = this.options.indicatorOptions || R;
     const { orientation: o, defaultValue: i, animationOnShow: h } = this.options;
-    this.defaultTabValue = i || this.tabsElement.dataset.defaultValue || "", this.tabsOrientation = o || this.tabsElement.dataset.orientation || O, this.showAnimation = h || this.tabsElement.dataset.showAnimation || "", this.tabList = g("[data-tab-list]", this.tabsElement);
+    this.defaultTabValue = i || this.tabsElement.dataset.defaultValue || this.getDefActivePanelValue(this.panelsContainer) || "", this.tabsOrientation = o || this.tabsElement.dataset.orientation || S, this.showAnimation = h || this.tabsElement.dataset.showAnimation || "", this.tabList = u("[data-tab-list]", this.tabsElement);
     const b = p("[data-tab-panel]", this.panelsContainer);
-    if (this.tabPanels = b.filter((u) => u.parentElement === this.panelsContainer), !(this.tabList instanceof HTMLElement))
+    if (this.tabPanels = b.filter((T) => T.parentElement === this.panelsContainer), !(this.tabList instanceof HTMLElement))
       throw new Error("TabList Element is required, tabList must have a data-tab-list attribute and be direct descendant of the tabs");
-    if (!this.tabPanels.every((u) => u instanceof HTMLElement))
+    if (!this.tabPanels.every((T) => T instanceof HTMLElement))
       throw new Error("TabPanels Element are required, tabPanels must have a data-tab-panel attribute and be direct descendant of the tabs or the panels container (data-panels-container)");
     if (this.tabTriggers = p("[data-tabs-trigger]", this.tabList), this.tabTriggers.length <= 0)
       throw new Error("No trigger found, Tab component must have at least one trigger");
-    const r = m("[data-tabs-trigger][data-state=active]", this.tabList);
-    this.activeTabTrigger = m(`[data-tabs-trigger][data-target='${this.defaultTabValue}']`, this.tabList) || r || this.tabTriggers[0];
-    const { transformEasing: d, transformDuration: l, className: f } = this.indicatorOptions;
-    this.indicatorClassName = f || this.tabsElement.getAttribute("data-indicator-class-name") || "", this.indicatorTransformEaseing = d || this.tabsElement.dataset.indicatorTransformEasing || H, this.indicatorTransformDuration = l || parseInt(this.tabsElement.dataset.indicatorTransformDuration || "") || 600, this.init();
+    const c = g("[data-tabs-trigger][data-state=active]", this.tabList);
+    this.activeTabTrigger = g(`[data-tabs-trigger][data-target='${this.defaultTabValue}']`, this.tabList) || c || this.tabTriggers[0];
+    const { transformEasing: l, transformDuration: d, className: f } = this.indicatorOptions;
+    this.indicatorClassName = f || this.tabsElement.getAttribute("data-indicator-class-name") || "", this.indicatorTransformEaseing = l || this.tabsElement.dataset.indicatorTransformEasing || V, this.indicatorTransformDuration = d || parseInt(this.tabsElement.dataset.indicatorTransformDuration || "") || 600, this.init();
   }
@@ -205,8 +214,7 @@ init() {
   attachTriggerEvents(t) {
-    t instanceof HTMLElement && (t.addEventListener("click", (e) => {
-      e.preventDefault(), this.activeTabTrigger = t;
-      const n = E({
+    t instanceof HTMLElement && (t.addEventListener("click", (a) => {
+      a.preventDefault(), this.activeTabTrigger = t;
+      const n = L({
         triggerElement: t,
         tabTriggers: this.tabTriggers,
-        tabPanels: this.tabPanels,
         tabsPanelContainer: this.panelsContainer,
@@ -223,17 +231,18 @@ showAnimation: this.showAnimation,
       });
-    }), t.addEventListener("keydown", (e) => $(e, this.tabTriggers, this.tabsOrientation)));
+    }), t.addEventListener("keydown", (a) => U(a, this.tabTriggers, this.tabsOrientation)));
   }
-  initializeTab({ tabTriggers: t, tabPanels: e, tabsPanelContainer: n, showAnimation: o, tabsOrientation: i, indicatorTransformDuration: h, indicatorTransformEaseing: b, activeTabTrigger: s, indicatorClassName: r, tabList: d }) {
-    for (const f of t)
-      this.attachTriggerEvents(f);
-    S({
+  initializeTab({ tabTriggers: t, tabPanels: a, tabsPanelContainer: n, showAnimation: o, tabsOrientation: i, indicatorTransformDuration: h, indicatorTransformEaseing: b, activeTabTrigger: s, indicatorClassName: c, tabList: l }) {
+    for (const T of t)
+      this.attachTriggerEvents(T);
+    _({
       activeTabTrigger: s,
-      indicatorClassName: r,
+      indicatorClassName: c,
       tabsOrientation: i,
-      tabList: d
+      tabList: l
     });
-    const l = E({
+    const d = u(`[data-tab-panel]#${s.getAttribute("data-target")}`, n);
+    F(d, a);
+    const f = L({
       triggerElement: s,
       tabTriggers: t,
-      tabPanels: e,
       tabsPanelContainer: n,
@@ -244,12 +253,22 @@ showAnimation: o,
       indicatorTransformEaseing: b,
-      tabList: d
+      tabList: l
     });
     this.options.onChangeTab && this.options.onChangeTab({
       currentTrigger: s,
-      currentPanel: l == null ? void 0 : l.currentTabPanel
+      currentPanel: f == null ? void 0 : f.currentTabPanel
     });
   }
-}
+};
+/**
+   * auto init Tabs Elements based on the selector provided
+   * @param selector {string} default is [data-fx-tabs] attribute
+   */
+r(A, "autoInit", (t = "[data-fx-tabs]") => {
+  const a = p(t);
+  for (const n of a)
+    new A(n);
+});
+let P = A;
 export {
-  F as Tabs
+  P as Tabs
 };

package.json

 {
   "name": "@flexilla/tabs",
   "private": false,
-  "version": "2.0.0",
+  "version": "2.0.1",
   "type": "module",
@@ -67,3 +67,3 @@ "description": "A versatile tabs component for organizing content in a tabbed interface, enhancing user navigation.",
   "author": "johnkat-mj",
-  "gitHead": "b182c7035953bc34e8f350b834df9862bec8acb5"
+  "gitHead": "8435693ee1ff8e2f9d279b5d4026949530d7d05d"
 }

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

25336

increased by3.45%

Lines of code

360

increased by7.78%

No dependency changes