@flexilla/tabs - npm Package Compare versions

Comparing version 1.0.1 to 1.1.0

dist/tabs.js

 var y = Object.defineProperty;
-var w = (e, t, a) => t in e ? y(e, t, { enumerable: !0, configurable: !0, writable: !0, value: a }) : e[t] = a;
-var r = (e, t, a) => (w(e, typeof t != "symbol" ? t + "" : t, a), a);
+var w = (a, t, e) => t in a ? y(a, t, { enumerable: !0, configurable: !0, writable: !0, value: e }) : a[t] = e;
+var r = (a, t, e) => (w(a, typeof t != "symbol" ? t + "" : t, e), e);
 const u = ({
-  selector: e,
+  selector: a,
   parentElement: t
-}) => t.querySelector(e), p = ({
-  selector: e,
+}) => t.querySelector(a), m = ({
+  selector: a,
   parentElement: t
-}) => Array.from(t.querySelectorAll(e)), x = ({
-  newElement: e,
+}) => Array.from(t.querySelectorAll(a)), x = ({
+  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.");
-}, L = ({
-  newStyles: e,
+}, v = ({
+  newStyles: a,
   identifier: t
 }) => {
-  const a = document.head.querySelector("[data-fx-style]");
-  if (a) {
-    (a.textContent || "").includes(t) || (a.textContent += e);
+  const e = document.head.querySelector("[data-fx-style]");
+  if (e) {
+    (e.textContent || "").includes(t) || (e.textContent += a);
     return;
   }
-  const i = document.createElement("style");
-  i.textContent = e, i.setAttribute("data-fx-style", ""), document.head.appendChild(i);
-}, T = "true", m = "false", v = "horizontal", h = "vertical";
-const I = "cubic-bezier(.48,1.55,.28,1)", O = (e) => {
-  if (!(e instanceof HTMLElement))
+  const n = document.createElement("style");
+  n.textContent = a, n.setAttribute("data-fx-style", ""), document.head.appendChild(n);
+}, L = () => {
+  v({
+    newStyles: '[data-fx-tabs] [data-tab-panel]{display: none;animation: none;-webkit-animation: none;}[data-fx-tabs] [data-tab-panel][data-state="active"]{display: flex;}[data-fx-tabs] [data-tab-panel][data-state="active"]{animation: var(--un-tab-show-animation);-webkit-animation: var(--un-tab-show-animation);animation-fill-mode: both;}[data-fx-tabs] [data-tabs-trigger]{position:relative; }[data-tab-indicator]{position: absolute;transform-origin: 0 0;width: var(--un-tab-indicator-width);height: var(--un-tab-indicator-height);top: var(--un-tab-indicator-top);left: var(--un-tab-indicator-left);}',
+    identifier: "[data-fx-tabs]"
+  });
+}, I = "true", O = "false", E = "inactive", T = "active", P = "horizontal", h = "vertical";
+const S = "cubic-bezier(.48,1.55,.28,1)", D = (a) => {
+  if (!(a instanceof HTMLElement))
     return;
@@ -41,37 +46,37 @@ const t = {
   };
-  for (const [a, i] of Object.entries(t))
-    e.style.setProperty(a, i);
-}, P = ({ activeTabTrigger: e, useIndicator: t, tabsOrientation: a, tabsElement: i, indicatorOptions: c, tabList: o }) => {
+  for (const [e, n] of Object.entries(t))
+    a.style.setProperty(e, n);
+}, N = ({ activeTabTrigger: a, useIndicator: t, tabsOrientation: e, tabsElement: n, indicatorOptions: c, tabList: o }) => {
   if (!t)
     return;
-  const { className: l } = c, d = l || i.dataset.indicatorClassName || "", n = document.createElement("span");
-  n.setAttribute("data-tab-indicator", ""), n.setAttribute("aria-hidden", "true");
-  const s = a === h ? A : g;
-  if (n.style.setProperty(
+  const { className: l } = c, d = l || n.dataset.indicatorClassName || "", i = document.createElement("span");
+  i.setAttribute("data-tab-indicator", ""), i.setAttribute("aria-hidden", "true");
+  const s = e === h ? A : g;
+  if (i.style.setProperty(
     "transform",
-    s(e)
+    s(a)
   ), d) {
     const f = d ? d.split(" ") : [];
-    n.classList.add(...f);
+    i.classList.add(...f);
   } else
-    O(n);
+    D(i);
   const b = u({ selector: ":first-child", parentElement: o });
-  return b && x({ newElement: n, existingElement: b }), n;
-}, g = (e) => {
+  return b && x({ newElement: i, existingElement: b }), i;
+}, g = (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})`;
-}, A = (e) => {
+}, A = (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})`;
-}, S = ({ triggerElement: e, indicator_: t, tabsOrientation: a, transformDuration: i, transformEasing: c }) => {
+}, M = ({ triggerElement: a, indicator_: t, tabsOrientation: e, transformDuration: n, transformEasing: c }) => {
   t instanceof HTMLElement && t.animate(
     [
       {
-        transform: a === h ? A(e) : g(e)
+        transform: e === h ? A(a) : g(a)
       }
@@ -81,31 +86,31 @@ ],
       fill: "both",
-      duration: i,
+      duration: n,
       easing: c
     }
   );
-}, D = (e, t) => {
-  for (const a of t)
-    a !== e && a.setAttribute("aria-selected", m);
-}, H = (e, t) => {
-  for (const a of t)
-    a !== e && (a.setAttribute("aria-selected", m), a.setAttribute("aria-hidden", T), a.hidden = !0);
-}, E = ({ triggerElement: e, tabTriggers: t, tabPanels: a, tabsElement: i, showAnimation: c, indicator_: o, tabsOrientation: l, indicatorTransformDuration: d, indicatorTransformEaseing: n }) => {
-  if (!(e instanceof HTMLElement))
+}, C = (a, t) => {
+  for (const e of t)
+    e !== a && e.setAttribute("data-state", E);
+}, H = (a, t) => {
+  for (const e of t)
+    e !== a && (e.setAttribute("data-state", E), e.setAttribute("aria-hidden", I), e.hidden = !0);
+}, p = ({ triggerElement: a, tabTriggers: t, tabPanels: e, tabsElement: n, showAnimation: c, indicator_: o, tabsOrientation: l, indicatorTransformDuration: d, indicatorTransformEaseing: i }) => {
+  if (!(a instanceof HTMLElement))
     return;
   const s = u(
-    { selector: `[data-tab-panel]#${e.getAttribute("data-target")}`, parentElement: i }
+    { selector: `[data-tab-panel]#${a.getAttribute("data-target")}`, parentElement: n }
   );
   if (s)
-    return D(e, t), H(s, a), s.setAttribute("aria-selected", T), e.setAttribute("aria-selected", T), s.setAttribute("aria-hidden", m), s.hidden = !1, c && c !== "" && (console.log(`Hummm showAnimation ${c}`), s.style.setProperty("--un-tab-show-animation", `${c}`)), o instanceof HTMLElement && (o.style.setProperty("--un-tab-indicator-height", `${l === h ? 10 : e.clientHeight}px`), o.style.setProperty("--un-tab-indicator-width", `${l === h ? e.clientWidth : 100}px`), o.style.setProperty("--un-tab-indicator-top", `${l === h ? 0 : e.offsetTop}px`), o.style.setProperty("--un-tab-indicator-left", `${l === h ? e.offsetLeft : 0}px`)), S({
-      triggerElement: e,
+    return C(a, t), H(s, e), s.setAttribute("data-state", T), a.setAttribute("data-state", T), s.setAttribute("aria-hidden", O), s.hidden = !1, c && c !== "" && s.style.setProperty("--un-tab-show-animation", `${c}`), o instanceof HTMLElement && (o.style.setProperty("--un-tab-indicator-height", `${l === h ? 10 : a.clientHeight}px`), o.style.setProperty("--un-tab-indicator-width", `${l === h ? a.clientWidth : 100}px`), o.style.setProperty("--un-tab-indicator-top", `${l === h ? 0 : a.offsetTop}px`), o.style.setProperty("--un-tab-indicator-left", `${l === h ? a.offsetLeft : 0}px`)), M({
+      triggerElement: a,
       indicator_: o,
       tabsOrientation: l,
       transformDuration: d,
-      transformEasing: n
+      transformEasing: i
     }), { currentTabPanel: s };
-}, M = (e, t, a) => {
-  const i = t.findIndex(
-    (n) => n.getAttribute("aria-selected") === T
-  ), c = e.key === "ArrowUp" || e.key === "ArrowLeft" ? -1 : 1, o = a === h, l = (n) => !t[n].hasAttribute("disabled"), d = (n, s, b) => {
-    let f = (n + s + b) % b;
+}, R = (a, t, e) => {
+  const n = t.findIndex(
+    (i) => i.getAttribute("data-state") === T
+  ), c = a.key === "ArrowUp" || a.key === "ArrowLeft" ? -1 : 1, o = e === h, l = (i) => !t[i].hasAttribute("disabled"), d = (i, s, b) => {
+    let f = (i + s + b) % b;
     for (; !l(f); )
@@ -115,19 +120,14 @@ f = (f + s + b) % b;
   };
-  if (o && (e.key === "ArrowUp" || e.key === "ArrowDown") || !o && (e.key === "ArrowLeft" || e.key === "ArrowRight")) {
-    e.preventDefault();
-    const n = d(
-      i,
+  if (o && (a.key === "ArrowUp" || a.key === "ArrowDown") || !o && (a.key === "ArrowLeft" || a.key === "ArrowRight")) {
+    a.preventDefault();
+    const i = d(
+      n,
       c,
       t.length
-    ), s = t[n];
+    ), s = t[i];
     s.focus(), s.click();
   }
-}, N = () => {
-  L({
-    newStyles: '[data-fx-tabs] [data-tab-panel]{display: none;animation: none;-webkit-animation: none;}[data-fx-tabs] [data-tab-panel][aria-selected="true"]{display: flex;}[data-fx-tabs] [data-tab-panel][aria-selected="true"]{animation: var(--un-tab-show-animation);-webkit-animation: var(--un-tab-show-animation);animation-fill-mode: both;}[data-fx-tabs] [data-tabs-trigger]{position:relative; }[data-tab-indicator]{position: absolute;transform-origin: 0 0;width: var(--un-tab-indicator-width);height: var(--un-tab-indicator-height);top: var(--un-tab-indicator-top);left: var(--un-tab-indicator-left);}',
-    identifier: "[data-fx-modal]"
-  });
 };
-class $ {
-  constructor({ tabsElement: t, options: a = {}, indicatorOptions: i = { useIndicator: !1 } }) {
+class V {
+  constructor({ tabsElement: t, options: e = {}, indicatorOptions: n = { useIndicator: !1 } }) {
     r(this, "tabsElement");
@@ -149,19 +149,19 @@ r(this, "options");
       throw new Error("Please Provide a valid HTMLElement for the tabs component");
-    this.tabsElement = t, this.options = a, this.indicatorOptions = i;
+    this.tabsElement = t, this.options = e, this.indicatorOptions = n;
     const { orientation: c, defaultValue: o, animationOnShow: l } = this.options;
-    if (this.defaultTabValue = o || this.tabsElement.dataset.defaultValue || "", this.tabsOrientation = c || this.tabsElement.dataset.orientation || v, this.showAnimation = l || this.tabsElement.dataset.showAnimation || "", this.tabList = u({ selector: "[data-tab-list]", parentElement: this.tabsElement }), this.tabPanels = p({ selector: "[data-tab-panel]", parentElement: this.tabsElement }), !(this.tabList instanceof HTMLElement))
+    if (this.defaultTabValue = o || this.tabsElement.dataset.defaultValue || "", this.tabsOrientation = c || this.tabsElement.dataset.orientation || P, this.showAnimation = l || this.tabsElement.dataset.showAnimation || "", this.tabList = u({ selector: "[data-tab-list]", parentElement: this.tabsElement }), this.tabPanels = m({ selector: "[data-tab-panel]", parentElement: this.tabsElement }), !(this.tabList instanceof HTMLElement))
       throw new Error("TabList Element is required");
-    if (this.tabTriggers = p({ selector: "[data-tabs-trigger]", parentElement: this.tabList }), this.tabTriggers.length <= 0)
+    if (this.tabTriggers = m({ 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 = u({ selector: `[data-tabs-trigger][data-target='${this.defaultTabValue}']`, parentElement: this.tabsElement }) || this.tabTriggers[0];
-    const { transformEasing: d, transformDuration: n, useIndicator: s } = this.indicatorOptions;
-    this.useIndicator = s || this.tabsElement.hasAttribute("data-use-indicator") && this.tabsElement.getAttribute("data-use-indicator") !== "false" || !1, this.indicatorTransformEaseing = d || this.tabsElement.dataset.indicatorTransformEasing || I, this.indicatorTransformDuration = n || parseInt(this.tabsElement.dataset.indicatorTransformDuration || "") || 600, this.indicator = void 0, this.init();
+    const { transformEasing: d, transformDuration: i, useIndicator: s } = this.indicatorOptions;
+    this.useIndicator = s || this.tabsElement.hasAttribute("data-use-indicator") && this.tabsElement.getAttribute("data-use-indicator") !== "false" || !1, this.indicatorTransformEaseing = d || this.tabsElement.dataset.indicatorTransformEasing || S, this.indicatorTransformDuration = i || parseInt(this.tabsElement.dataset.indicatorTransformDuration || "") || 600, this.indicator = void 0, this.init();
   }
   init() {
-    this.tabsElement.setAttribute("data-fx-tabs", ""), N(), this.initializeTab();
+    this.tabsElement.setAttribute("data-fx-tabs", ""), this.initializeTab();
   }
   attachTriggerEvents(t) {
-    t instanceof HTMLElement && (t.addEventListener("click", (a) => {
-      a.preventDefault(), this.activeTabTrigger = t;
-      const i = E({
+    t instanceof HTMLElement && (t.addEventListener("click", (e) => {
+      e.preventDefault(), this.activeTabTrigger = t;
+      const n = p({
         triggerElement: t,
@@ -179,10 +179,10 @@ tabTriggers: this.tabTriggers,
         currentTrigger: t,
-        currentPanel: i == null ? void 0 : i.currentTabPanel
+        currentPanel: n == null ? void 0 : n.currentTabPanel
       });
-    }), t.addEventListener("keydown", (a) => M(a, this.tabTriggers, this.tabsOrientation)));
+    }), t.addEventListener("keydown", (e) => R(e, this.tabTriggers, this.tabsOrientation)));
   }
   initializeTab() {
-    for (const i of this.tabTriggers)
-      this.attachTriggerEvents(i);
-    const t = P({
+    for (const n of this.tabTriggers)
+      this.attachTriggerEvents(n);
+    const t = N({
       activeTabTrigger: this.activeTabTrigger,
@@ -196,3 +196,3 @@ useIndicator: this.useIndicator,
     this.indicator = t;
-    const a = E({
+    const e = p({
       triggerElement: this.activeTabTrigger,
@@ -210,8 +210,9 @@ tabTriggers: this.tabTriggers,
       currentTrigger: this.activeTabTrigger,
-      currentPanel: a == null ? void 0 : a.currentTabPanel
+      currentPanel: e == null ? void 0 : e.currentTabPanel
     });
   }
 }
+L();
 export {
-  $ as Tabs
+  V as Tabs
 };

package.json

 {
   "name": "@flexilla/tabs",
   "private": false,
-  "version": "1.0.1",
+  "version": "1.1.0",
   "type": "module",
@@ -42,3 +42,3 @@ "description": "A versatile tabs component for organizing content in a tabbed interface, enhancing user navigation.",
     "@biomejs/biome": "1.5.1",
-    "@flexilla/utilities": "^1.0.1",
+    "@flexilla/utilities": "^1.1.0",
     "typescript": "^5.2.2",
@@ -67,3 +67,3 @@ "vite": "^5.0.8",
   "author": "johnkat-mj",
-  "gitHead": "83fd699f629e3c87cedc15857e7335b80b3e5532"
+  "gitHead": "18549edaac73621574bb4df22436305c201c47c8"
 }

README.md

@@ -1,1 +0,1 @@
-# Accordion 
+# Tabs (@flexilla/tabs)

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

Lines of code

304

increased by0.33%

Number of medium supply chain risk alerts

0

decreased by-100%

Worsened metrics

Total package byte prevSize

21552

decreased by-0.26%

No dependency changes