@flexilla/tabs - npm Package Compare versions

Comparing version 1.2.1 to 1.2.2

dist/tabs.js

@@ -1,59 +0,59 @@
-var I = Object.defineProperty;
-var x = (a, t, e) => t in a ? I(a, t, { enumerable: !0, configurable: !0, writable: !0, value: e }) : a[t] = e;
-var c = (a, t, e) => (x(a, typeof t != "symbol" ? t + "" : t, e), e);
-const T = ({
-  selector: a,
+var C = Object.defineProperty;
+var v = (e, t, a) => t in e ? C(e, t, { enumerable: !0, configurable: !0, writable: !0, value: a }) : e[t] = a;
+var c = (e, t, a) => (v(e, typeof t != "symbol" ? t + "" : t, a), a);
+const u = ({
+  selector: e,
   parentElement: t
-}) => t.querySelector(a), g = ({
-  selector: a,
+}) => t.querySelector(e), g = ({
+  selector: e,
   parentElement: t
-}) => Array.from(t.querySelectorAll(a)), m = ({
-  selector: a,
+}) => Array.from(t.querySelectorAll(e)), E = ({
+  selector: e,
   parentElement: t
 }) => {
-  const e = g({ selector: a, parentElement: t });
-  return Array.from(e).find((s) => s.parentElement === t);
-}, C = ({
-  newElement: a,
+  const a = g({ selector: e, parentElement: t });
+  return Array.from(a).find((n) => n.parentElement === t);
+}, I = ({
+  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.");
-}, v = "true", D = "false", L = "inactive", A = "active", O = "horizontal", f = "vertical";
-const H = "cubic-bezier(.48,1.55,.28,1)", M = { className: "", transformDuration: 0, transformEasing: "" }, N = ({ activeTabTrigger: a, indicatorClassName: t, tabsOrientation: e, tabList: s }) => {
+}, D = "true", M = "false", w = "inactive", A = "active", H = "horizontal", T = "vertical";
+const N = "cubic-bezier(.48,1.55,.28,1)", O = { className: "", transformDuration: 0, transformEasing: "" }, S = ({ activeTabTrigger: e, indicatorClassName: t, tabsOrientation: a, tabList: n }) => {
   if (!t || t === "")
     return;
-  const r = t, n = document.createElement("span");
-  n.setAttribute("data-tab-indicator", ""), n.setAttribute("aria-hidden", "true");
-  const l = e === f ? w : P;
-  n.style.setProperty(
+  const o = t, s = document.createElement("span");
+  s.setAttribute("data-tab-indicator", ""), s.setAttribute("aria-hidden", "true");
+  const h = a === T ? y : P;
+  s.style.setProperty(
     "transform",
-    l(a)
+    h(e)
   );
-  const d = r ? r.split(" ") : [];
-  n.classList.add(...d);
-  const i = T({ selector: "[data-tabs-trigger]:first-child", parentElement: s });
-  return i && C({ newElement: n, existingElement: i }), n;
-}, P = (a) => {
+  const b = o ? o.split(" ") : [];
+  s.classList.add(...b);
+  const i = u({ selector: "[data-tabs-trigger]:first-child", parentElement: n });
+  return i && I({ newElement: s, existingElement: i }), s;
+}, P = (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})`;
-}, w = (a) => {
+}, y = (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})`;
-}, y = ({ triggerElement: a, indicator_: t, tabsOrientation: e, transformDuration: s, transformEasing: r, tabList: n }) => {
-  n.style.setProperty("--un-tab-indicator-height", `${e === f ? 10 : a.clientHeight}px`), n.style.setProperty("--un-tab-indicator-width", `${e === f ? a.clientWidth : 100}px`), n.style.setProperty("--un-tab-indicator-top", `${e === f ? 0 : a.offsetTop}px`), n.style.setProperty("--un-tab-indicator-left", `${e === f ? a.offsetLeft : 0}px`), t instanceof HTMLElement && t.animate(
+}, x = ({ triggerElement: e, indicator_: t, tabsOrientation: a, transformDuration: n, transformEasing: o, tabList: s }) => {
+  s.style.setProperty("--un-tab-indicator-height", `${a === T ? 10 : e.clientHeight}px`), s.style.setProperty("--un-tab-indicator-width", `${a === T ? e.clientWidth : 100}px`), s.style.setProperty("--un-tab-indicator-top", `${a === T ? 0 : e.offsetTop}px`), s.style.setProperty("--un-tab-indicator-left", `${a === T ? e.offsetLeft : 0}px`), t instanceof HTMLElement && t.animate(
     [
       {
-        transform: e === f ? w(a) : P(a)
+        transform: a === T ? y(e) : P(e)
       }
@@ -63,66 +63,73 @@ ],
       fill: "both",
-      duration: s,
-      easing: r
+      duration: n,
+      easing: o
     }
   );
-}, S = (a, t) => {
-  for (const e of t)
-    e !== a && e.setAttribute("data-state", L);
-}, _ = ({ currentTab: a, tabsOrientation: t, indicatorTransformDuration: e, indicatorTransformEaseing: s }) => {
-  if (!(a instanceof HTMLElement))
+}, _ = (e, t) => {
+  for (const a of t)
+    a !== e && a.setAttribute("data-state", w);
+}, R = ({ tabsOrientation: e, indicatorTransformDuration: t, indicatorTransformEaseing: a, indicator: n, triggerElement: o, tabList: s }) => {
+  !(n instanceof HTMLSpanElement) || !(o instanceof HTMLElement) || x({
+    triggerElement: o,
+    indicator_: n,
+    tabsOrientation: e,
+    transformDuration: t,
+    transformEasing: a,
+    tabList: s
+  });
+}, V = (e, t) => {
+  for (const a of t)
+    a !== e && (a.setAttribute("data-state", w), a.setAttribute("aria-hidden", D), a.hidden = !0, a.hasAttribute("data-initial-active") && a.setAttribute("data-initial-active", "false"));
+}, p = ({ triggerElement: e, tabTriggers: t, tabPanels: a, tabsPanelContainer: n, showAnimation: o, tabsOrientation: s, indicatorTransformDuration: h, indicatorTransformEaseing: b, tabList: i }) => {
+  if (!(e instanceof HTMLElement))
     return;
-  const r = m({ selector: "[data-fx-tabs]", parentElement: a });
+  const r = E(
+    { selector: `[data-tab-panel]#${e.getAttribute("data-target")}`, parentElement: n }
+  );
   if (!(r instanceof HTMLElement))
     return;
-  const n = m({ selector: "[data-tab-list]", parentElement: r }), l = n.querySelector("[data-tabs-trigger][data-state=active]"), d = n.querySelector("span[data-tab-indicator]");
-  !(d instanceof HTMLSpanElement) || !(l instanceof HTMLElement) || y({
-    triggerElement: l,
+  _(e, t), V(r, a), r.setAttribute("data-state", A), r.hidden = !1, e.setAttribute("data-state", A), r.setAttribute("aria-hidden", M), o && o !== "" && r.style.setProperty("--un-tab-show-animation", `${o}`);
+  const d = u({ selector: "[data-tab-indicator]", parentElement: i });
+  x({
+    triggerElement: e,
     indicator_: d,
-    tabsOrientation: t,
-    transformDuration: e,
-    transformEasing: s,
-    tabList: n
+    tabsOrientation: s,
+    transformDuration: h,
+    transformEasing: b,
+    tabList: i
   });
-}, R = (a, t) => {
-  for (const e of t)
-    e !== a && (e.setAttribute("data-state", L), e.setAttribute("aria-hidden", v), e.hidden = !0, e.hasAttribute("data-initial-active") && e.setAttribute("data-initial-active", "false"));
-}, p = ({ triggerElement: a, tabTriggers: t, tabPanels: e, tabsPanelContainer: s, showAnimation: r, tabsOrientation: n, indicatorTransformDuration: l, indicatorTransformEaseing: d, tabList: i }) => {
-  if (!(a instanceof HTMLElement))
-    return;
-  const o = m(
-    { selector: `[data-tab-panel]#${a.getAttribute("data-target")}`, parentElement: s }
-  );
-  if (!o)
-    return;
-  S(a, t), R(o, e), o.setAttribute("data-state", A), o.hidden = !1, a.setAttribute("data-state", A), o.setAttribute("aria-hidden", D), r && r !== "" && o.style.setProperty("--un-tab-show-animation", `${r}`);
-  const b = T({ selector: "[data-tab-indicator]", parentElement: i });
-  return y({
-    triggerElement: a,
-    indicator_: b,
-    tabsOrientation: n,
-    transformDuration: l,
-    transformEasing: d,
-    tabList: i
-  }), { currentTabPanel: o };
-}, V = (a, t, e) => {
-  const s = t.findIndex(
+  const l = E({ selector: "[data-fx-tabs]", parentElement: r });
+  if (l instanceof HTMLElement) {
+    const f = E({ selector: "[data-tab-list]", parentElement: l }), m = f.querySelector("[data-tabs-trigger][data-state=active]"), L = f.querySelector("span[data-tab-indicator]");
+    L instanceof HTMLSpanElement && m instanceof HTMLElement && !l.hasAttribute("data-nested-indicator-seteled") && (l.setAttribute("data-nested-indicator-seteled", ""), R({
+      tabsOrientation: s,
+      indicatorTransformDuration: h,
+      indicatorTransformEaseing: b,
+      indicator: L,
+      triggerElement: m,
+      tabList: f
+    }));
+  }
+  return { currentTabPanel: r };
+}, $ = (e, t, a) => {
+  const n = t.findIndex(
     (i) => i.getAttribute("data-state") === A
-  ), r = a.key === "ArrowUp" || a.key === "ArrowLeft" ? -1 : 1, n = e === f, l = (i) => !t[i].hasAttribute("disabled"), d = (i, o, b) => {
-    let h = (i + o + b) % b;
-    for (; !l(h); )
-      h = (h + o + b) % b;
-    return h;
+  ), o = e.key === "ArrowUp" || e.key === "ArrowLeft" ? -1 : 1, s = a === T, h = (i) => !t[i].hasAttribute("disabled"), b = (i, r, d) => {
+    let l = (i + r + d) % d;
+    for (; !h(l); )
+      l = (l + r + d) % d;
+    return l;
   };
-  if (n && (a.key === "ArrowUp" || a.key === "ArrowDown") || !n && (a.key === "ArrowLeft" || a.key === "ArrowRight")) {
-    a.preventDefault();
-    const i = d(
-      s,
-      r,
+  if (s && (e.key === "ArrowUp" || e.key === "ArrowDown") || !s && (e.key === "ArrowLeft" || e.key === "ArrowRight")) {
+    e.preventDefault();
+    const i = b(
+      n,
+      o,
       t.length
-    ), o = t[i];
-    o.focus(), o.click();
+    ), r = t[i];
+    r.focus(), r.click();
   }
 };
-class k {
-  constructor({ tabsElement: t, options: e = {}, indicatorOptions: s }) {
+class F {
+  constructor({ tabsElement: t, options: a = {}, indicatorOptions: n }) {
     c(this, "tabsElement");
@@ -146,8 +153,8 @@ c(this, "options");
     c(this, "changeTab", (t) => {
-      const e = T({ selector: `[data-tabs-trigger][data-target='${t}']`, parentElement: this.tabList });
-      if (!(e instanceof HTMLElement))
+      const a = u({ selector: `[data-tabs-trigger][data-target='${t}']`, parentElement: this.tabList });
+      if (!(a instanceof HTMLElement))
         return;
-      this.activeTabTrigger = e;
-      const s = p({
-        triggerElement: e,
+      this.activeTabTrigger = a;
+      const n = p({
+        triggerElement: a,
         tabTriggers: this.tabTriggers,
@@ -163,4 +170,4 @@ tabPanels: this.tabPanels,
       this.options.onChangeTab && this.options.onChangeTab({
-        currentTrigger: e,
-        currentPanel: s == null ? void 0 : s.currentTabPanel
+        currentTrigger: a,
+        currentPanel: n == null ? void 0 : n.currentTabPanel
       });
@@ -170,16 +177,16 @@ });
       throw new Error("Please Provide a valid HTMLElement for the tabs component");
-    this.tabsElement = t, this.panelsContainer = m({ selector: "[data-panels-container]", parentElement: this.tabsElement }) || this.tabsElement, this.options = e, this.indicatorOptions = s || M;
-    const { orientation: r, defaultValue: n, animationOnShow: l } = this.options;
-    this.defaultTabValue = n || this.tabsElement.dataset.defaultValue || "", this.tabsOrientation = r || this.tabsElement.dataset.orientation || O, this.showAnimation = l || this.tabsElement.dataset.showAnimation || "", this.tabList = m({ selector: "[data-tab-list]", parentElement: this.tabsElement });
-    const d = g({ selector: "[data-tab-panel]", parentElement: this.panelsContainer });
-    if (this.tabPanels = d.filter((E) => E.parentElement === this.panelsContainer), !(this.tabList instanceof HTMLElement))
+    this.tabsElement = t, this.panelsContainer = E({ selector: "[data-panels-container]", parentElement: this.tabsElement }) || this.tabsElement, this.options = a, this.indicatorOptions = n || O;
+    const { orientation: o, defaultValue: s, animationOnShow: h } = this.options;
+    this.defaultTabValue = s || this.tabsElement.dataset.defaultValue || "", this.tabsOrientation = o || this.tabsElement.dataset.orientation || H, this.showAnimation = h || this.tabsElement.dataset.showAnimation || "", this.tabList = E({ selector: "[data-tab-list]", parentElement: this.tabsElement });
+    const b = g({ selector: "[data-tab-panel]", parentElement: 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((E) => E instanceof HTMLElement))
+    if (!this.tabPanels.every((m) => m 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 = g({ selector: "[data-tabs-trigger]", parentElement: this.tabList }), this.tabTriggers.length <= 0)
       throw new Error("No trigger found, Tab component must have at least one trigger");
-    const o = T({ selector: "[data-tabs-trigger][data-state=active]", parentElement: this.tabList });
-    this.activeTabTrigger = T({ selector: `[data-tabs-trigger][data-target='${this.defaultTabValue}']`, parentElement: this.tabList }) || o || this.tabTriggers[0];
-    const { transformEasing: b, transformDuration: h, className: u } = this.indicatorOptions;
-    this.indicatorClassName = u || this.tabsElement.getAttribute("data-indicator-class-name") || "", this.indicatorTransformEaseing = b || this.tabsElement.dataset.indicatorTransformEasing || H, this.indicatorTransformDuration = h || parseInt(this.tabsElement.dataset.indicatorTransformDuration || "") || 600, this.init();
+    const r = u({ selector: "[data-tabs-trigger][data-state=active]", parentElement: this.tabList });
+    this.activeTabTrigger = u({ selector: `[data-tabs-trigger][data-target='${this.defaultTabValue}']`, parentElement: 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 || N, this.indicatorTransformDuration = l || parseInt(this.tabsElement.dataset.indicatorTransformDuration || "") || 600, this.init();
   }
@@ -203,5 +210,5 @@ init() {
   attachTriggerEvents(t) {
-    t instanceof HTMLElement && (t.addEventListener("click", (e) => {
-      e.preventDefault(), this.activeTabTrigger = t;
-      const s = p({
+    t instanceof HTMLElement && (t.addEventListener("click", (a) => {
+      a.preventDefault(), this.activeTabTrigger = t;
+      const n = p({
         triggerElement: t,
@@ -219,34 +226,29 @@ tabTriggers: this.tabTriggers,
         currentTrigger: t,
-        currentPanel: s == null ? void 0 : s.currentTabPanel
+        currentPanel: n == null ? void 0 : n.currentTabPanel
       });
-    }), t.addEventListener("keydown", (e) => V(e, this.tabTriggers, this.tabsOrientation)));
+    }), t.addEventListener("keydown", (a) => $(a, this.tabTriggers, this.tabsOrientation)));
   }
-  initializeTab({ tabTriggers: t, tabPanels: e, tabsPanelContainer: s, showAnimation: r, tabsOrientation: n, indicatorTransformDuration: l, indicatorTransformEaseing: d, activeTabTrigger: i, indicatorClassName: o, tabList: b }) {
-    for (const u of t)
-      this.attachTriggerEvents(u);
-    N({
+  initializeTab({ tabTriggers: t, tabPanels: a, tabsPanelContainer: n, showAnimation: o, tabsOrientation: s, indicatorTransformDuration: h, indicatorTransformEaseing: b, activeTabTrigger: i, indicatorClassName: r, tabList: d }) {
+    for (const f of t)
+      this.attachTriggerEvents(f);
+    S({
       activeTabTrigger: i,
-      indicatorClassName: o,
-      tabsOrientation: n,
-      tabList: b
+      indicatorClassName: r,
+      tabsOrientation: s,
+      tabList: d
     });
-    const h = p({
+    const l = p({
       triggerElement: i,
       tabTriggers: t,
-      tabPanels: e,
-      tabsPanelContainer: s,
-      showAnimation: r,
-      tabsOrientation: n,
-      indicatorTransformDuration: l,
-      indicatorTransformEaseing: d,
-      tabList: b
+      tabPanels: a,
+      tabsPanelContainer: n,
+      showAnimation: o,
+      tabsOrientation: s,
+      indicatorTransformDuration: h,
+      indicatorTransformEaseing: b,
+      tabList: d
     });
-    _({
-      currentTab: h == null ? void 0 : h.currentTabPanel,
-      tabsOrientation: n,
-      indicatorTransformDuration: l,
-      indicatorTransformEaseing: d
-    }), this.options.onChangeTab && this.options.onChangeTab({
+    this.options.onChangeTab && this.options.onChangeTab({
       currentTrigger: i,
-      currentPanel: h == null ? void 0 : h.currentTabPanel
+      currentPanel: l == null ? void 0 : l.currentTabPanel
     });
@@ -256,3 +258,3 @@ }
 export {
-  k as Tabs
+  F as Tabs
 };

package.json

 {
   "name": "@flexilla/tabs",
   "private": false,
-  "version": "1.2.1",
+  "version": "1.2.2",
   "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

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

Improved metrics

Total package byte prevSize

25193

increased by1.35%

Lines of code

340

increased by0.59%

Number of medium supply chain risk alerts

0

decreased by-100%

No dependency changes