@flexilla/tabs - npm Package Compare versions

Comparing version 1.1.0 to 1.2.0

dist/index.d.ts

@@ -1,15 +0,4 @@
-declare type DefaultIndicator = {
-    position: "fill-trigger";
-};
-
-declare type IndicatorBottomTop = {
-    position: "bottom" | "top";
-    height: string;
-    width: "full" | string;
-};
-
 declare type IndicatorOptions = {
     useIndicator: boolean;
     className?: string;
-    customize?: DefaultIndicator | IndicatorBottomTop | IndicatorRightLeft;
     transformDuration?: number;
@@ -19,8 +8,2 @@ transformEasing?: string;
 
-declare type IndicatorRightLeft = {
-    position: "left" | "right";
-    height: "full" | string;
-    width: string;
-};
-
 export declare class Tabs {
@@ -41,2 +24,3 @@ private tabsElement;
     private indicator;
+    private panelsContainer;
     constructor({ tabsElement, options, indicatorOptions }: TabsParams);
@@ -43,0 +27,0 @@ init(): void;

dist/tabs.js

@@ -1,41 +0,31 @@
-var y = Object.defineProperty;
-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: a,
+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,
   parentElement: t
-}) => t.querySelector(a), m = ({
-  selector: a,
+}) => t.querySelector(e), T = ({
+  selector: e,
   parentElement: t
-}) => Array.from(t.querySelectorAll(a)), x = ({
-  newElement: a,
+}) => Array.from(t.querySelectorAll(e)), E = ({
+  selector: e,
+  parentElement: t
+}) => {
+  const a = T({ 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 = ({
-  newStyles: a,
-  identifier: t
-}) => {
-  const e = document.head.querySelector("[data-fx-style]");
-  if (e) {
-    (e.textContent || "").includes(t) || (e.textContent += a);
+}, 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))
     return;
-  }
-  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;
   const t = {
@@ -46,37 +36,37 @@ "--un-tab-indicator-height": "2px",
   };
-  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 }) => {
+  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, 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(
+  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(
     "transform",
-    s(a)
-  ), d) {
-    const f = d ? d.split(" ") : [];
-    i.classList.add(...f);
+    i(e)
+  ), h) {
+    const b = h ? h.split(" ") : [];
+    s.classList.add(...b);
   } else
-    D(i);
-  const b = u({ selector: ":first-child", parentElement: o });
-  return b && x({ newElement: i, existingElement: b }), i;
-}, g = (a) => {
+    D(s);
+  const d = m({ selector: ":first-child", parentElement: o });
+  return d && I({ newElement: s, existingElement: d }), s;
+}, A = (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})`;
-}, A = (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})`;
-}, M = ({ triggerElement: a, indicator_: t, tabsOrientation: e, transformDuration: n, transformEasing: c }) => {
+}, M = ({ triggerElement: e, indicator_: t, tabsOrientation: a, transformDuration: n, transformEasing: c }) => {
   t instanceof HTMLElement && t.animate(
     [
       {
-        transform: e === h ? A(a) : g(a)
+        transform: a === f ? y(e) : A(e)
       }
@@ -90,43 +80,43 @@ ],
   );
-}, 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))
+}, 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))
     return;
-  const s = u(
-    { selector: `[data-tab-panel]#${a.getAttribute("data-target")}`, parentElement: n }
+  const i = m(
+    { selector: `[data-tab-panel]#${e.getAttribute("data-target")}`, parentElement: n }
   );
-  if (s)
-    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,
+  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: d,
-      transformEasing: i
-    }), { currentTabPanel: s };
-}, R = (a, t, e) => {
+      transformDuration: h,
+      transformEasing: s
+    }), { currentTabPanel: i };
+}, H = (e, t, a) => {
   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); )
-      f = (f + s + b) % b;
-    return f;
+    (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 && (a.key === "ArrowUp" || a.key === "ArrowDown") || !o && (a.key === "ArrowLeft" || a.key === "ArrowRight")) {
-    a.preventDefault();
-    const i = d(
+  if (o && (e.key === "ArrowUp" || e.key === "ArrowDown") || !o && (e.key === "ArrowLeft" || e.key === "ArrowRight")) {
+    e.preventDefault();
+    const s = h(
       n,
       c,
       t.length
-    ), s = t[i];
-    s.focus(), s.click();
+    ), i = t[s];
+    i.focus(), i.click();
   }
 };
 class V {
-  constructor({ tabsElement: t, options: e = {}, indicatorOptions: n = { useIndicator: !1 } }) {
+  constructor({ tabsElement: t, options: a = {}, indicatorOptions: n = { useIndicator: !1 } }) {
     r(this, "tabsElement");
@@ -146,20 +136,23 @@ r(this, "options");
     r(this, "indicator");
+    r(this, "panelsContainer");
     if (!(t instanceof HTMLElement))
       throw new Error("Please Provide a valid HTMLElement for the tabs component");
-    this.tabsElement = t, this.options = e, this.indicatorOptions = n;
+    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;
-    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))
+    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 = m({ selector: "[data-tabs-trigger]", parentElement: this.tabList }), this.tabTriggers.length <= 0)
+    if (this.tabTriggers = T({ 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: 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();
+    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();
   }
   init() {
-    this.tabsElement.setAttribute("data-fx-tabs", ""), this.initializeTab();
+    this.tabsElement.hasAttribute("data-fx-tabs") || this.tabsElement.setAttribute("data-fx-tabs", ""), this.initializeTab();
   }
   attachTriggerEvents(t) {
-    t instanceof HTMLElement && (t.addEventListener("click", (e) => {
-      e.preventDefault(), this.activeTabTrigger = t;
+    t instanceof HTMLElement && (t.addEventListener("click", (a) => {
+      a.preventDefault(), this.activeTabTrigger = t;
       const n = p({
@@ -180,3 +173,3 @@ triggerElement: t,
       });
-    }), t.addEventListener("keydown", (e) => R(e, this.tabTriggers, this.tabsOrientation)));
+    }), t.addEventListener("keydown", (a) => H(a, this.tabTriggers, this.tabsOrientation)));
   }
@@ -195,3 +188,3 @@ initializeTab() {
     this.indicator = t;
-    const e = p({
+    const a = p({
       triggerElement: this.activeTabTrigger,
@@ -209,9 +202,8 @@ tabTriggers: this.tabTriggers,
       currentTrigger: this.activeTabTrigger,
-      currentPanel: e == null ? void 0 : e.currentTabPanel
+      currentPanel: a == null ? void 0 : a.currentTabPanel
     });
   }
 }
-L();
 export {
   V as Tabs
 };

package.json

 {
   "name": "@flexilla/tabs",
   "private": false,
-  "version": "1.1.0",
+  "version": "1.2.0",
   "type": "module",
@@ -23,3 +23,4 @@ "description": "A versatile tabs component for organizing content in a tabbed interface, enhancing user navigation.",
       }
-    }
+    },
+    "./tabs.css":"./dist/tabs.css"
   },
@@ -43,3 +44,3 @@ "files": [
     "@biomejs/biome": "1.5.1",
-    "@flexilla/utilities": "^1.1.0",
+    "@flexilla/utilities": "latest",
     "typescript": "^5.2.2",
@@ -67,4 +68,3 @@ "vite": "^5.0.8",
   "license": "MIT",
-  "author": "johnkat-mj",
-  "gitHead": "18549edaac73621574bb4df22436305c201c47c8"
+  "author": "johnkat-mj"
 }

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

Number of package files

7

increased by16.67%

Worsened metrics

Total package byte prevSize

20679

decreased by-4.05%

Lines of code

282

decreased by-7.24%

No dependency changes