@flexilla/tabs - npm Package Compare versions

Comparing version 1.2.0 to 1.2.1

dist/index.d.ts

 declare type IndicatorOptions = {
-    useIndicator: boolean;
     className?: string;
@@ -19,11 +18,14 @@ transformDuration?: number;
     private activeTabTrigger;
-    private useIndicator;
+    private indicatorClassName;
     private indicatorTransformEaseing;
     private indicatorTransformDuration;
-    private indicator;
     private panelsContainer;
     constructor({ tabsElement, options, indicatorOptions }: TabsParams);
-    init(): void;
-    attachTriggerEvents(triggerElement: HTMLElement): void;
-    initializeTab(): void;
+    private init;
+    private attachTriggerEvents;
+    private initializeTab;
+    /**
+     * @param tabValue {string} the value of the targeted tabpanel
+     */
+    changeTab: (tabValue: string) => void;
 }
@@ -30,0 +32,0 @@

dist/tabs.js

@@ -1,71 +0,59 @@
-var w = Object.defineProperty;
-var L = (e, t, a) => t in e ? w(e, t, { enumerable: !0, configurable: !0, writable: !0, value: a }) : e[t] = a;
-var r = (e, t, a) => (L(e, typeof t != "symbol" ? t + "" : t, a), a);
-const m = ({
-  selector: e,
+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,
   parentElement: t
-}) => t.querySelector(e), T = ({
-  selector: e,
+}) => t.querySelector(a), g = ({
+  selector: a,
   parentElement: t
-}) => Array.from(t.querySelectorAll(e)), E = ({
-  selector: e,
+}) => Array.from(t.querySelectorAll(a)), m = ({
+  selector: a,
   parentElement: t
 }) => {
-  const a = T({ selector: e, parentElement: t });
-  return Array.from(a).find((n) => n.parentElement === t);
-}, I = ({
-  newElement: e,
+  const e = g({ selector: a, parentElement: t });
+  return Array.from(e).find((s) => s.parentElement === t);
+}, C = ({
+  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.");
-}, x = "true", O = "false", g = "inactive", u = "active", P = "horizontal", f = "vertical";
-const v = "cubic-bezier(.48,1.55,.28,1)", D = (e) => {
-  if (!(e instanceof HTMLElement))
+}, 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 }) => {
+  if (!t || t === "")
     return;
-  const t = {
-    "--un-tab-indicator-height": "2px",
-    "--un-tab-indicator-top": "0px",
-    "--un-tab-indicator-left": "0px"
-  };
-  for (const [a, n] of Object.entries(t))
-    e.style.setProperty(a, n);
-}, N = ({ activeTabTrigger: e, useIndicator: t, tabsOrientation: a, tabsElement: n, indicatorOptions: c, tabList: o }) => {
-  if (!t)
-    return;
-  const { className: l } = c, h = l || n.dataset.indicatorClassName || "", s = document.createElement("span");
-  s.setAttribute("data-tab-indicator", ""), s.setAttribute("aria-hidden", "true");
-  const i = a === f ? y : A;
-  if (s.style.setProperty(
+  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(
     "transform",
-    i(e)
-  ), h) {
-    const b = h ? h.split(" ") : [];
-    s.classList.add(...b);
-  } else
-    D(s);
-  const d = m({ selector: ":first-child", parentElement: o });
-  return d && I({ newElement: s, existingElement: d }), s;
-}, A = (e) => {
+    l(a)
+  );
+  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 t = {
-    x: e.offsetLeft,
-    scaleX: e.offsetWidth / 100
+    x: a.offsetLeft,
+    scaleX: a.offsetWidth / 100
   };
   return `translateX(${t.x}px) scaleX(${t.scaleX})`;
-}, y = (e) => {
+}, w = (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})`;
-}, M = ({ triggerElement: e, indicator_: t, tabsOrientation: a, transformDuration: n, transformEasing: c }) => {
-  t instanceof HTMLElement && t.animate(
+}, 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(
     [
       {
-        transform: a === f ? y(e) : A(e)
+        transform: e === f ? w(a) : P(a)
       }
@@ -75,125 +63,185 @@ ],
       fill: "both",
-      duration: n,
-      easing: c
+      duration: s,
+      easing: r
     }
   );
-}, S = (e, t) => {
-  for (const a of t)
-    a !== e && a.setAttribute("data-state", g);
-}, C = (e, t) => {
-  for (const a of t)
-    a !== e && (a.setAttribute("data-state", g), a.setAttribute("aria-hidden", x), a.hidden = !0);
-}, p = ({ triggerElement: e, tabTriggers: t, tabPanels: a, tabsElement: n, showAnimation: c, indicator_: o, tabsOrientation: l, indicatorTransformDuration: h, indicatorTransformEaseing: s }) => {
-  if (!(e instanceof HTMLElement))
+}, 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))
     return;
-  const i = m(
-    { selector: `[data-tab-panel]#${e.getAttribute("data-target")}`, parentElement: n }
+  const r = m({ selector: "[data-fx-tabs]", parentElement: a });
+  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,
+    indicator_: d,
+    tabsOrientation: t,
+    transformDuration: e,
+    transformEasing: s,
+    tabList: n
+  });
+}, 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 (i)
-    return S(e, t), C(i, a), i.setAttribute("data-state", u), e.setAttribute("data-state", u), i.setAttribute("aria-hidden", O), i.hidden = !1, c && c !== "" && i.style.setProperty("--un-tab-show-animation", `${c}`), o instanceof HTMLElement && (o.style.setProperty("--un-tab-indicator-height", `${l === f ? 10 : e.clientHeight}px`), o.style.setProperty("--un-tab-indicator-width", `${l === f ? e.clientWidth : 100}px`), o.style.setProperty("--un-tab-indicator-top", `${l === f ? 0 : e.offsetTop}px`), o.style.setProperty("--un-tab-indicator-left", `${l === f ? e.offsetLeft : 0}px`)), M({
-      triggerElement: e,
-      indicator_: o,
-      tabsOrientation: l,
-      transformDuration: h,
-      transformEasing: s
-    }), { currentTabPanel: i };
-}, H = (e, t, a) => {
-  const n = t.findIndex(
-    (s) => s.getAttribute("data-state") === u
-  ), c = e.key === "ArrowUp" || e.key === "ArrowLeft" ? -1 : 1, o = a === f, l = (s) => !t[s].hasAttribute("disabled"), h = (s, i, d) => {
-    let b = (s + i + d) % d;
-    for (; !l(b); )
-      b = (b + i + d) % d;
-    return b;
+  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(
+    (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;
   };
-  if (o && (e.key === "ArrowUp" || e.key === "ArrowDown") || !o && (e.key === "ArrowLeft" || e.key === "ArrowRight")) {
-    e.preventDefault();
-    const s = h(
-      n,
-      c,
+  if (n && (a.key === "ArrowUp" || a.key === "ArrowDown") || !n && (a.key === "ArrowLeft" || a.key === "ArrowRight")) {
+    a.preventDefault();
+    const i = d(
+      s,
+      r,
       t.length
-    ), i = t[s];
-    i.focus(), i.click();
+    ), o = t[i];
+    o.focus(), o.click();
   }
 };
-class V {
-  constructor({ tabsElement: t, options: a = {}, indicatorOptions: n = { useIndicator: !1 } }) {
-    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, "useIndicator");
-    r(this, "indicatorTransformEaseing");
-    r(this, "indicatorTransformDuration");
-    r(this, "indicator");
-    r(this, "panelsContainer");
+class k {
+  constructor({ tabsElement: t, options: e = {}, indicatorOptions: s }) {
+    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");
+    /**
+     * @param tabValue {string} the value of the targeted tabpanel
+     */
+    c(this, "changeTab", (t) => {
+      const e = T({ selector: `[data-tabs-trigger][data-target='${t}']`, parentElement: this.tabList });
+      if (!(e instanceof HTMLElement))
+        return;
+      this.activeTabTrigger = e;
+      const s = p({
+        triggerElement: e,
+        tabTriggers: this.tabTriggers,
+        tabPanels: this.tabPanels,
+        tabsPanelContainer: this.panelsContainer,
+        showAnimation: this.showAnimation,
+        tabsOrientation: this.tabsOrientation,
+        indicatorTransformDuration: this.indicatorTransformDuration,
+        indicatorTransformEaseing: this.indicatorTransformEaseing,
+        tabList: this.tabList
+      });
+      this.options.onChangeTab && this.options.onChangeTab({
+        currentTrigger: e,
+        currentPanel: s == null ? void 0 : s.currentTabPanel
+      });
+    });
     if (!(t instanceof HTMLElement))
       throw new Error("Please Provide a valid HTMLElement for the tabs component");
-    this.tabsElement = t, this.panelsContainer = E({ selector: "[data-panels-container]", parentElement: this.tabsElement }) || this.tabsElement, this.options = a, this.indicatorOptions = n;
-    const { orientation: c, defaultValue: o, animationOnShow: l } = this.options;
-    this.defaultTabValue = o || this.tabsElement.dataset.defaultValue || "", this.tabsOrientation = c || this.tabsElement.dataset.orientation || P, this.showAnimation = l || this.tabsElement.dataset.showAnimation || "", this.tabList = E({ selector: "[data-tab-list]", parentElement: this.tabsElement });
-    const h = T({ selector: "[data-tab-panel]", parentElement: this.panelsContainer });
-    if (this.tabPanels = h.filter((b) => b.parentElement === this.panelsContainer), !(this.tabList instanceof HTMLElement))
-      throw new Error("TabList Element is required");
-    if (this.tabTriggers = T({ selector: "[data-tabs-trigger]", parentElement: this.tabList }), this.tabTriggers.length <= 0)
+    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))
+      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))
+      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");
-    this.activeTabTrigger = m({ selector: `[data-tabs-trigger][data-target='${this.defaultTabValue}']`, parentElement: this.tabList }) || this.tabTriggers[0];
-    const { transformEasing: s, transformDuration: i, useIndicator: d } = this.indicatorOptions;
-    this.useIndicator = d || this.tabsElement.hasAttribute("data-use-indicator") && this.tabsElement.getAttribute("data-use-indicator") !== "false" || !1, this.indicatorTransformEaseing = s || this.tabsElement.dataset.indicatorTransformEasing || v, this.indicatorTransformDuration = i || parseInt(this.tabsElement.dataset.indicatorTransformDuration || "") || 600, this.indicator = void 0, this.init();
+    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();
   }
   init() {
-    this.tabsElement.hasAttribute("data-fx-tabs") || this.tabsElement.setAttribute("data-fx-tabs", ""), this.initializeTab();
+    this.tabsElement.hasAttribute("data-fx-tabs") || this.tabsElement.setAttribute("data-fx-tabs", ""), this.initializeTab(
+      {
+        tabTriggers: this.tabTriggers,
+        tabPanels: this.tabPanels,
+        tabsPanelContainer: this.panelsContainer,
+        showAnimation: this.showAnimation,
+        tabsOrientation: this.tabsOrientation,
+        indicatorTransformDuration: this.indicatorTransformDuration,
+        indicatorTransformEaseing: this.indicatorTransformEaseing,
+        activeTabTrigger: this.activeTabTrigger,
+        indicatorClassName: this.indicatorClassName,
+        tabList: this.tabList
+      }
+    );
   }
   attachTriggerEvents(t) {
-    t instanceof HTMLElement && (t.addEventListener("click", (a) => {
-      a.preventDefault(), this.activeTabTrigger = t;
-      const n = p({
+    t instanceof HTMLElement && (t.addEventListener("click", (e) => {
+      e.preventDefault(), this.activeTabTrigger = t;
+      const s = p({
         triggerElement: t,
         tabTriggers: this.tabTriggers,
         tabPanels: this.tabPanels,
-        tabsElement: this.tabsElement,
+        tabsPanelContainer: this.panelsContainer,
         showAnimation: this.showAnimation,
-        indicator_: this.indicator,
         tabsOrientation: this.tabsOrientation,
         indicatorTransformDuration: this.indicatorTransformDuration,
-        indicatorTransformEaseing: this.indicatorTransformEaseing
+        indicatorTransformEaseing: this.indicatorTransformEaseing,
+        tabList: this.tabList
       });
       this.options.onChangeTab && this.options.onChangeTab({
         currentTrigger: t,
-        currentPanel: n == null ? void 0 : n.currentTabPanel
+        currentPanel: s == null ? void 0 : s.currentTabPanel
       });
-    }), t.addEventListener("keydown", (a) => H(a, this.tabTriggers, this.tabsOrientation)));
+    }), t.addEventListener("keydown", (e) => V(e, this.tabTriggers, this.tabsOrientation)));
   }
-  initializeTab() {
-    for (const n of this.tabTriggers)
-      this.attachTriggerEvents(n);
-    const t = N({
-      activeTabTrigger: this.activeTabTrigger,
-      useIndicator: this.useIndicator,
-      tabsOrientation: this.tabsOrientation,
-      tabsElement: this.tabsElement,
-      indicatorOptions: this.indicatorOptions,
-      tabList: this.tabList
+  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({
+      activeTabTrigger: i,
+      indicatorClassName: o,
+      tabsOrientation: n,
+      tabList: b
     });
-    this.indicator = t;
-    const a = p({
-      triggerElement: this.activeTabTrigger,
-      tabTriggers: this.tabTriggers,
-      tabPanels: this.tabPanels,
-      tabsElement: this.tabsElement,
-      showAnimation: this.showAnimation,
-      indicator_: this.indicator,
-      tabsOrientation: this.tabsOrientation,
-      indicatorTransformDuration: this.indicatorTransformDuration,
-      indicatorTransformEaseing: this.indicatorTransformEaseing
+    const h = p({
+      triggerElement: i,
+      tabTriggers: t,
+      tabPanels: e,
+      tabsPanelContainer: s,
+      showAnimation: r,
+      tabsOrientation: n,
+      indicatorTransformDuration: l,
+      indicatorTransformEaseing: d,
+      tabList: b
     });
-    this.options.onChangeTab && this.options.onChangeTab({
-      currentTrigger: this.activeTabTrigger,
-      currentPanel: a == null ? void 0 : a.currentTabPanel
+    _({
+      currentTab: h == null ? void 0 : h.currentTabPanel,
+      tabsOrientation: n,
+      indicatorTransformDuration: l,
+      indicatorTransformEaseing: d
+    }), this.options.onChangeTab && this.options.onChangeTab({
+      currentTrigger: i,
+      currentPanel: h == null ? void 0 : h.currentTabPanel
     });
@@ -203,3 +251,3 @@ }
 export {
-  V as Tabs
+  k as Tabs
 };

package.json

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

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

24857

increased by20.2%

Lines of code

338

increased by19.86%

Worsened metrics

Number of medium supply chain risk alerts

1

increased byInfinity%

No dependency changes