@flexilla/tabs - npm Package Compare versions

Comparing version 2.0.2 to 2.0.3

dist/tabs.js

 var M = Object.defineProperty;
-var O = (e, t, a) => t in e ? M(e, t, { enumerable: !0, configurable: !0, writable: !0, value: a }) : e[t] = a;
-var o = (e, t, a) => (O(e, typeof t != "symbol" ? t + "" : t, a), a);
-const g = (e, t = document.body) => t.querySelector(e), T = (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)), w = ({
-  newElement: e,
+var H = (a, t, e) => t in a ? M(a, t, { enumerable: !0, configurable: !0, writable: !0, value: e }) : a[t] = e;
+var r = (a, t, e) => (H(a, typeof t != "symbol" ? t + "" : t, e), e);
+const g = (a, t = document.body) => t.querySelector(a), f = (a, t = document.body) => {
+  const e = A(a, t);
+  return Array.from(e).find((n) => n.parentElement === t);
+}, A = (a, t = document.body) => Array.from(t.querySelectorAll(a)), O = ({
+  newElement: a,
   existingElement: t
 }) => {
-  if (!(e instanceof HTMLElement) || !(t instanceof HTMLElement))
+  if (!(a instanceof HTMLElement) || !(t instanceof HTMLElement))
     throw new Error("Both parameters must be valid HTML elements.");
-  const a = t.parentElement;
-  if (a)
-    a.insertBefore(e, t);
+  const e = t.parentElement;
+  if (e)
+    e.insertBefore(a, t);
   else
     throw new Error("Existing element must have a parent element.");
-}, E = (e, t) => {
-  for (const [a, n] of Object.entries(t))
-    e.setAttribute(a, n);
-}, H = "true", N = "false", v = "inactive", y = "active", S = "horizontal", u = "vertical";
-const V = "cubic-bezier(.48,1.55,.28,1)", R = { className: "", transformDuration: 0, transformEasing: "" }, $ = ({ activeTabTrigger: e, indicatorClassName: t, tabsOrientation: a, tabList: n }) => {
+}, E = (a, t) => {
+  for (const [e, n] of Object.entries(t))
+    a.setAttribute(e, n);
+}, N = "true", S = "false", I = "inactive", y = "active", V = "horizontal", m = "vertical";
+const R = "cubic-bezier(.48,1.55,.28,1)", _ = { className: "", transformDuration: 0, transformEasing: "" }, $ = ({ activeTabTrigger: a, indicatorClassName: t, tabsOrientation: e, tabList: n }) => {
   if (!t || t === "")
     return;
-  const c = t, i = document.createElement("span");
-  E(i, {
+  const o = t, s = document.createElement("span");
+  E(s, {
     "data-tab-indicator": "",
     "aria-hidden": "true"
   });
-  const h = a === u ? C : I;
-  i.style.setProperty(
+  const h = e === m ? v : C;
+  s.style.setProperty(
     "transform",
-    h(e)
+    h(a)
   );
-  const b = c ? c.split(" ") : [];
-  i.classList.add(...b);
-  const s = g(":first-child [data-tabs-trigger]", n), r = s.parentElement;
-  try {
-    r === n ? w({ newElement: i, existingElement: s }) : r.parentElement === n && w({ newElement: i, existingElement: r });
-  } catch (l) {
-    throw new Error(`Make sure the tab triggers are directly tablist children or their parent are. ${l}`);
-  }
-  return s && w({ newElement: i, existingElement: s }), i;
-}, I = (e) => {
+  const b = o ? o.split(" ") : [];
+  s.classList.add(...b);
+  const i = a.parentElement === n ? a : a.parentElement;
+  return O({
+    newElement: s,
+    existingElement: i
+  }), s;
+}, C = (a) => {
   const t = {
-    x: e.offsetLeft,
-    scaleX: e.offsetWidth / 100
+    x: a.offsetLeft,
+    scaleX: a.offsetWidth / 100
   };
   return `translateX(${t.x}px) scaleX(${t.scaleX})`;
-}, C = (e) => {
+}, v = (a) => {
   const t = {
-    y: e.offsetTop,
-    scaleY: e.offsetHeight / 10
+    y: a.offsetTop,
+    scaleY: a.offsetHeight / 10
   };
   return `translateY(${t.y}px) scaleY(${t.scaleY})`;
-}, D = ({ triggerElement: e, indicator_: t, tabsOrientation: a, transformDuration: n, transformEasing: c, tabList: i }) => {
-  i.style.setProperty("--un-tab-indicator-height", `${a === u ? 10 : e.clientHeight}px`), i.style.setProperty("--un-tab-indicator-width", `${a === u ? e.clientWidth : 100}px`), i.style.setProperty("--un-tab-indicator-top", `${a === u ? 0 : e.offsetTop}px`), i.style.setProperty("--un-tab-indicator-left", `${a === u ? e.offsetLeft : 0}px`), t instanceof HTMLElement && t.animate(
+}, D = ({ triggerElement: a, indicator_: t, tabsOrientation: e, transformDuration: n, transformEasing: o, tabList: s }) => {
+  s.style.setProperty("--un-tab-indicator-height", `${e === m ? 10 : a.clientHeight}px`), s.style.setProperty("--un-tab-indicator-width", `${e === m ? a.clientWidth : 100}px`), s.style.setProperty("--un-tab-indicator-top", `${e === m ? 0 : a.offsetTop}px`), s.style.setProperty("--un-tab-indicator-left", `${e === m ? a.offsetLeft : 0}px`), t instanceof HTMLElement && t.animate(
     [
       {
-        transform: a === u ? C(e) : I(e)
+        transform: e === m ? v(a) : C(a)
       }
@@ -66,69 +64,69 @@ ],
       duration: n,
-      easing: c
+      easing: o
     }
   );
-}, _ = (e, t) => {
-  for (const a of t)
-    a !== e && E(a, { "data-state": v, tabindex: "-1" });
-}, k = ({ tabsOrientation: e, indicatorTransformDuration: t, indicatorTransformEaseing: a, indicator: n, triggerElement: c, tabList: i }) => {
-  !(n instanceof HTMLSpanElement) || !(c instanceof HTMLElement) || D({
-    triggerElement: c,
+}, k = (a, t) => {
+  for (const e of t)
+    e !== a && (E(e, { "data-state": I, tabindex: "-1" }), e instanceof HTMLAnchorElement && e.setAttribute("aria-selected", "false"));
+}, F = ({ tabsOrientation: a, indicatorTransformDuration: t, indicatorTransformEaseing: e, indicator: n, triggerElement: o, tabList: s }) => {
+  !(n instanceof HTMLSpanElement) || !(o instanceof HTMLElement) || D({
+    triggerElement: o,
     indicator_: n,
-    tabsOrientation: e,
+    tabsOrientation: a,
     transformDuration: t,
-    transformEasing: a,
-    tabList: i
+    transformEasing: e,
+    tabList: s
   });
-}, F = (e, t) => {
-  for (const a of t)
-    a !== e && (E(a, { "data-state": v, "aria-hidden": H }), a.hidden = !0);
-}, L = ({ triggerElement: e, tabTriggers: t, tabsPanelContainer: a, showAnimation: n, tabsOrientation: c, indicatorTransformDuration: i, indicatorTransformEaseing: h, tabList: b }) => {
-  const s = T("[data-tab-panel][data-state=active]", a);
-  if (s && (E(s, { "data-state": "hidden" }), s.hidden = !0), !(e instanceof HTMLElement))
+}, U = (a, t) => {
+  for (const e of t)
+    e !== a && (E(e, { "data-state": I, "aria-hidden": N }), e.hidden = !0);
+}, w = ({ triggerElement: a, tabTriggers: t, tabsPanelContainer: e, showAnimation: n, tabsOrientation: o, indicatorTransformDuration: s, indicatorTransformEaseing: h, tabList: b }) => {
+  const i = f("[data-tab-panel][data-state=active]", e);
+  if (i && (E(i, { "data-state": "hidden" }), i.hidden = !0), !(a instanceof HTMLElement))
     return;
-  const r = T(`[data-tab-panel]#${e.getAttribute("data-target")}`, a);
-  if (!(r instanceof HTMLElement))
+  const c = f(`[data-tab-panel]#${a.getAttribute("data-target")}`, e);
+  if (!(c instanceof HTMLElement))
     return;
-  _(e, t), r.hidden = !1, E(r, { "data-state": y, "aria-hidden": N }), E(e, { "data-state": y, tabindex: "0" }), n && n !== "" && r.style.setProperty("--un-tab-show-animation", `${n}`);
+  k(a, t), c.hidden = !1, E(c, { "data-state": y, "aria-hidden": S }), E(a, { "data-state": y, tabindex: "0" }), a instanceof HTMLAnchorElement && a.setAttribute("aria-selected", "true"), n && n !== "" && c.style.setProperty("--un-tab-show-animation", `${n}`);
   const l = g("[data-tab-indicator]", b);
   D({
-    triggerElement: e,
+    triggerElement: a,
     indicator_: l,
-    tabsOrientation: c,
-    transformDuration: i,
+    tabsOrientation: o,
+    transformDuration: s,
     transformEasing: h,
     tabList: b
   });
-  const d = T("[data-fx-tabs]", r);
+  const d = f("[data-fx-tabs]", c);
   if (d instanceof HTMLElement) {
-    const f = T("[data-tab-list]", d), m = f.querySelector("[data-tabs-trigger][data-state=active]"), P = f.querySelector("span[data-tab-indicator]");
-    P instanceof HTMLSpanElement && m instanceof HTMLElement && !d.hasAttribute("data-nested-indicator-seteled") && (d.setAttribute("data-nested-indicator-seteled", ""), k({
-      tabsOrientation: c,
-      indicatorTransformDuration: i,
+    const T = f("[data-tab-list-wrapper]", d) || d, u = f("[data-tab-list]", T), p = u.querySelector("[data-tabs-trigger][data-state=active]"), P = u.querySelector("span[data-tab-indicator]");
+    P instanceof HTMLSpanElement && p instanceof HTMLElement && !d.hasAttribute("data-nested-indicator-seteled") && (d.setAttribute("data-nested-indicator-seteled", ""), F({
+      tabsOrientation: o,
+      indicatorTransformDuration: s,
       indicatorTransformEaseing: h,
       indicator: P,
-      triggerElement: m,
-      tabList: f
+      triggerElement: p,
+      tabList: u
     }));
   }
-  return { currentTabPanel: r };
-}, U = (e, t, a) => {
+  return { currentTabPanel: c };
+}, q = (a, t, e) => {
   const n = t.findIndex(
-    (s) => s.getAttribute("data-state") === y
-  ), c = e.key === "ArrowUp" || e.key === "ArrowLeft" ? -1 : 1, i = a === u, h = (s) => !t[s].hasAttribute("disabled"), b = (s, r, l) => {
-    let d = (s + r + l) % l;
+    (i) => i.getAttribute("data-state") === y
+  ), o = a.key === "ArrowUp" || a.key === "ArrowLeft" ? -1 : 1, s = e === m, h = (i) => !t[i].hasAttribute("disabled"), b = (i, c, l) => {
+    let d = (i + c + l) % l;
     for (; !h(d); )
-      d = (d + r + l) % l;
+      d = (d + c + l) % l;
     return d;
   };
-  if (i && (e.key === "ArrowUp" || e.key === "ArrowDown") || !i && (e.key === "ArrowLeft" || e.key === "ArrowRight")) {
-    e.preventDefault();
-    const s = b(
+  if (s && (a.key === "ArrowUp" || a.key === "ArrowDown") || !s && (a.key === "ArrowLeft" || a.key === "ArrowRight")) {
+    a.preventDefault();
+    const i = b(
       n,
-      c,
+      o,
       t.length
-    ), r = t[s];
-    r.focus(), r.click();
+    ), c = t[i];
+    c.focus(), c.click();
   }
-}, A = class A {
+}, L = class L {
   /**
@@ -139,20 +137,20 @@ * Tabs Components
    */
-  constructor(t, a = {}) {
-    o(this, "tabsElement");
-    o(this, "options");
-    o(this, "indicatorOptions");
-    o(this, "defaultTabValue");
-    o(this, "tabsOrientation");
-    o(this, "showAnimation");
-    o(this, "tabList");
-    o(this, "tabPanels");
-    o(this, "tabTriggers");
-    o(this, "activeTabTrigger");
-    o(this, "indicatorClassName");
-    o(this, "indicatorTransformEaseing");
-    o(this, "indicatorTransformDuration");
-    o(this, "panelsContainer");
-    o(this, "getDefActivePanelValue", (t) => {
-      const a = T("[data-tab-panel][data-state=active]", t);
-      return a == null ? void 0 : a.getAttribute("id");
+  constructor(t, e = {}) {
+    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 e = f("[data-tab-panel][data-state=active]", t);
+      return e == null ? void 0 : e.getAttribute("id");
     });
@@ -162,9 +160,9 @@ /**
      */
-    o(this, "changeTab", (t) => {
-      const a = g(`[data-tabs-trigger][data-target='${t}']`, this.tabList);
-      if (!(a instanceof HTMLElement))
+    r(this, "changeTab", (t) => {
+      const e = g(`[data-tabs-trigger][data-target='${t}']`, this.tabList);
+      if (!(e instanceof HTMLElement))
         return;
-      this.activeTabTrigger = a;
-      const n = L({
-        triggerElement: a,
+      this.activeTabTrigger = e;
+      const n = w({
+        triggerElement: e,
         tabTriggers: this.tabTriggers,
@@ -179,3 +177,3 @@ tabsPanelContainer: this.panelsContainer,
       this.options.onChangeTab && this.options.onChangeTab({
-        currentTrigger: a,
+        currentTrigger: e,
         currentPanel: n == null ? void 0 : n.currentTabPanel
@@ -187,16 +185,18 @@ });
       throw new Error("Please Provide a valid HTMLElement for the tabs component");
-    this.tabsElement = n, this.panelsContainer = T("[data-panels-container]", this.tabsElement) || this.tabsElement, this.options = a, this.indicatorOptions = this.options.indicatorOptions || R;
-    const { orientation: c, defaultValue: i, animationOnShow: h } = this.options;
-    this.defaultTabValue = i || this.tabsElement.dataset.defaultValue || this.getDefActivePanelValue(this.panelsContainer) || "", this.tabsOrientation = c || this.tabsElement.dataset.orientation || S, this.showAnimation = h || this.tabsElement.dataset.showAnimation || "", this.tabList = T("[data-list-wrapper] [data-tab-list]", this.tabsElement) || T("[data-tab-list]", this.tabsElement);
-    const b = p("[data-tab-panel]", this.panelsContainer);
-    if (this.tabPanels = b.filter((m) => m.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((m) => m instanceof HTMLElement))
+    this.tabsElement = n, this.panelsContainer = f("[data-panels-container]", this.tabsElement) || this.tabsElement, this.options = e, this.indicatorOptions = this.options.indicatorOptions || _;
+    const { orientation: o, defaultValue: s, animationOnShow: h } = this.options;
+    this.defaultTabValue = s || this.tabsElement.dataset.defaultValue || this.getDefActivePanelValue(this.panelsContainer) || "", this.tabsOrientation = o || this.tabsElement.dataset.orientation || V, this.showAnimation = h || this.tabsElement.dataset.showAnimation || "";
+    const b = f("[data-tab-list-wrapper]", this.tabsElement) || this.tabsElement;
+    this.tabList = f("[data-tab-list]", b);
+    const i = A("[data-tab-panel]", this.panelsContainer);
+    if (this.tabPanels = i.filter((p) => p.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 or must be wrapped inside another element with data-tab-list-wrapper");
+    if (!this.tabPanels.every((p) => p 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)
+    if (this.tabTriggers = A("[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 = g("[data-tabs-trigger][data-state=active]", this.tabList);
-    this.activeTabTrigger = g(`[data-tabs-trigger][data-target='${this.defaultTabValue}']`, this.tabList) || r || 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();
+    const l = g("[data-tabs-trigger][data-state=active]", this.tabList);
+    this.activeTabTrigger = g(`[data-tabs-trigger][data-target='${this.defaultTabValue}']`, this.tabList) || l || this.tabTriggers[0];
+    const { transformEasing: d, transformDuration: T, className: u } = this.indicatorOptions;
+    this.indicatorClassName = u || this.tabsElement.getAttribute("data-indicator-class-name") || "", this.indicatorTransformEaseing = d || this.tabsElement.dataset.indicatorTransformEasing || R, this.indicatorTransformDuration = T || parseInt(this.tabsElement.dataset.indicatorTransformDuration || "") || 600, this.init();
   }
@@ -220,5 +220,5 @@ init() {
   attachTriggerEvents(t) {
-    t instanceof HTMLElement && (t.addEventListener("click", (a) => {
-      a.preventDefault(), this.activeTabTrigger = t;
-      const n = L({
+    t instanceof HTMLElement && (t.addEventListener("click", (e) => {
+      e.preventDefault(), this.activeTabTrigger = t;
+      const n = w({
         triggerElement: t,
@@ -237,21 +237,21 @@ tabTriggers: this.tabTriggers,
       });
-    }), t.addEventListener("keydown", (a) => U(a, this.tabTriggers, this.tabsOrientation)));
+    }), t.addEventListener("keydown", (e) => q(e, this.tabTriggers, this.tabsOrientation)));
   }
-  initializeTab({ tabTriggers: t, tabPanels: a, tabsPanelContainer: n, showAnimation: c, tabsOrientation: i, indicatorTransformDuration: h, indicatorTransformEaseing: b, activeTabTrigger: s, indicatorClassName: r, tabList: l }) {
-    for (const m of t)
-      this.attachTriggerEvents(m);
+  initializeTab({ tabTriggers: t, tabPanels: e, tabsPanelContainer: n, showAnimation: o, tabsOrientation: s, indicatorTransformDuration: h, indicatorTransformEaseing: b, activeTabTrigger: i, indicatorClassName: c, tabList: l }) {
+    for (const u of t)
+      this.attachTriggerEvents(u);
     $({
-      activeTabTrigger: s,
-      indicatorClassName: r,
-      tabsOrientation: i,
+      activeTabTrigger: i,
+      indicatorClassName: c,
+      tabsOrientation: s,
       tabList: l
     });
-    const d = T(`[data-tab-panel]#${s.getAttribute("data-target")}`, n);
-    F(d, a);
-    const f = L({
-      triggerElement: s,
+    const d = f(`[data-tab-panel]#${i.getAttribute("data-target")}`, n);
+    U(d, e);
+    const T = w({
+      triggerElement: i,
       tabTriggers: t,
       tabsPanelContainer: n,
-      showAnimation: c,
-      tabsOrientation: i,
+      showAnimation: o,
+      tabsOrientation: s,
       indicatorTransformDuration: h,
@@ -262,4 +262,4 @@ indicatorTransformEaseing: b,
     this.options.onChangeTab && this.options.onChangeTab({
-      currentTrigger: s,
-      currentPanel: f == null ? void 0 : f.currentTabPanel
+      currentTrigger: i,
+      currentPanel: T == null ? void 0 : T.currentTabPanel
     });
@@ -272,10 +272,10 @@ }
    */
-o(A, "autoInit", (t = "[data-fx-tabs]") => {
-  const a = p(t);
-  for (const n of a)
-    new A(n);
+r(L, "autoInit", (t = "[data-fx-tabs]") => {
+  const e = A(t);
+  for (const n of e)
+    new L(n);
 });
-let x = A;
+let x = L;
 export {
   x as Tabs
 };

package.json

 {
   "name": "@flexilla/tabs",
   "private": false,
-  "version": "2.0.2",
+  "version": "2.0.3",
   "type": "module",
@@ -6,0 +6,0 @@ "description": "A versatile tabs component for organizing content in a tabbed interface, enhancing user navigation.",

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

25993

increased by0.05%

Worsened metrics

Lines of code

365

decreased by-0.27%

No dependency changes