@flexilla/tabs - npm Package Compare versions

Comparing version 1.2.3 to 2.0.0

dist/index.d.ts

@@ -22,3 +22,8 @@ declare type IndicatorOptions = {
     private panelsContainer;
-    constructor({ tabsElement, options, indicatorOptions }: TabsParams);
+    /**
+     * Tabs Components
+     * @param tabs
+     * @param options
+     */
+    constructor(tabs: string | HTMLElement, options?: TabsOptions);
     private init;
@@ -37,2 +42,3 @@ private attachTriggerEvents;
     animationOnShow?: string;
+    indicatorOptions?: IndicatorOptions;
     onChange?: () => void;
@@ -45,8 +51,2 @@ onChangeTab?: ({ currentTrigger, currentPanel }: {
 
-export declare type TabsParams = {
-    tabsElement: HTMLElement;
-    options?: TabsOptions;
-    indicatorOptions?: IndicatorOptions;
-};
-
 export { }

dist/tabs.js

 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(e), g = ({
-  selector: e,
-  parentElement: t
-}) => Array.from(t.querySelectorAll(e)), E = ({
-  selector: e,
-  parentElement: t
-}) => {
-  const a = g({ selector: e, parentElement: t });
-  return Array.from(a).find((n) => n.parentElement === t);
-}, I = ({
-  newElement: e,
+var v = (a, t, e) => t in a ? C(a, t, { enumerable: !0, configurable: !0, writable: !0, value: e }) : a[t] = e;
+var c = (a, t, e) => (v(a, typeof t != "symbol" ? t + "" : t, e), e);
+const m = (a, t = document.body) => t.querySelector(a), g = (a, t = document.body) => {
+  const e = p(a, t);
+  return Array.from(e).find((n) => n.parentElement === t);
+}, p = (a, t = document.body) => Array.from(t.querySelectorAll(a)), I = ({
+  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.");
-}, 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 }) => {
+}, D = "true", M = "false", y = "inactive", A = "active", O = "horizontal", T = "vertical";
+const H = "cubic-bezier(.48,1.55,.28,1)", N = { className: "", transformDuration: 0, transformEasing: "" }, S = ({ activeTabTrigger: a, indicatorClassName: t, tabsOrientation: e, tabList: n }) => {
   if (!t || t === "")
     return;
-  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(
+  const o = t, i = document.createElement("span");
+  i.setAttribute("data-tab-indicator", ""), i.setAttribute("aria-hidden", "true");
+  const h = e === T ? P : w;
+  i.style.setProperty(
     "transform",
-    h(e)
+    h(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) => {
+  i.classList.add(...b);
+  const s = m("[data-tabs-trigger]:first-child", n);
+  return s && I({ newElement: i, existingElement: s }), i;
+}, w = (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) => {
+}, P = (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})`;
-}, 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(
+}, x = ({ triggerElement: a, indicator_: t, tabsOrientation: e, transformDuration: n, transformEasing: o, tabList: i }) => {
+  i.style.setProperty("--un-tab-indicator-height", `${e === T ? 10 : a.clientHeight}px`), i.style.setProperty("--un-tab-indicator-width", `${e === T ? a.clientWidth : 100}px`), i.style.setProperty("--un-tab-indicator-top", `${e === T ? 0 : a.offsetTop}px`), i.style.setProperty("--un-tab-indicator-left", `${e === T ? a.offsetLeft : 0}px`), t instanceof HTMLElement && t.animate(
     [
       {
-        transform: a === T ? y(e) : P(e)
+        transform: e === T ? P(a) : w(a)
       }
@@ -67,44 +58,42 @@ ],
   );
-}, _ = (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 }) => {
+}, _ = (a, t) => {
+  for (const e of t)
+    e !== a && e.setAttribute("data-state", y);
+}, R = ({ tabsOrientation: a, indicatorTransformDuration: t, indicatorTransformEaseing: e, indicator: n, triggerElement: o, tabList: i }) => {
   !(n instanceof HTMLSpanElement) || !(o instanceof HTMLElement) || x({
     triggerElement: o,
     indicator_: n,
-    tabsOrientation: e,
+    tabsOrientation: a,
     transformDuration: t,
-    transformEasing: a,
-    tabList: s
+    transformEasing: e,
+    tabList: i
   });
-}, 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))
+}, V = (a, t) => {
+  for (const e of t)
+    e !== a && (e.setAttribute("data-state", y), e.setAttribute("aria-hidden", D), e.hidden = !0, e.hasAttribute("data-initial-active") && e.setAttribute("data-initial-active", "false"));
+}, E = ({ triggerElement: a, tabTriggers: t, tabPanels: e, tabsPanelContainer: n, showAnimation: o, tabsOrientation: i, indicatorTransformDuration: h, indicatorTransformEaseing: b, tabList: s }) => {
+  if (!(a instanceof HTMLElement))
     return;
-  const r = E(
-    { selector: `[data-tab-panel]#${e.getAttribute("data-target")}`, parentElement: n }
-  );
+  const r = g(`[data-tab-panel]#${a.getAttribute("data-target")}`, n);
   if (!(r instanceof HTMLElement))
     return;
-  _(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 });
+  _(a, t), V(r, e), r.setAttribute("data-state", A), r.hidden = !1, a.setAttribute("data-state", A), r.setAttribute("aria-hidden", M), o && o !== "" && r.style.setProperty("--un-tab-show-animation", `${o}`);
+  const d = m("[data-tab-indicator]", s);
   x({
-    triggerElement: e,
+    triggerElement: a,
     indicator_: d,
-    tabsOrientation: s,
+    tabsOrientation: i,
     transformDuration: h,
     transformEasing: b,
-    tabList: i
+    tabList: s
   });
-  const l = E({ selector: "[data-fx-tabs]", parentElement: r });
+  const l = g("[data-fx-tabs]", 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,
+    const f = g("[data-tab-list]", l), u = f.querySelector("[data-tabs-trigger][data-state=active]"), L = f.querySelector("span[data-tab-indicator]");
+    L instanceof HTMLSpanElement && u instanceof HTMLElement && !l.hasAttribute("data-nested-indicator-seteled") && (l.setAttribute("data-nested-indicator-seteled", ""), R({
+      tabsOrientation: i,
       indicatorTransformDuration: h,
       indicatorTransformEaseing: b,
       indicator: L,
-      triggerElement: m,
+      triggerElement: u,
       tabList: f
@@ -114,7 +103,7 @@ }));
   return { currentTabPanel: r };
-}, $ = (e, t, a) => {
+}, $ = (a, t, e) => {
   const n = t.findIndex(
-    (i) => i.getAttribute("data-state") === A
-  ), 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;
+    (s) => s.getAttribute("data-state") === A
+  ), o = a.key === "ArrowUp" || a.key === "ArrowLeft" ? -1 : 1, i = e === T, h = (s) => !t[s].hasAttribute("disabled"), b = (s, r, d) => {
+    let l = (s + r + d) % d;
     for (; !h(l); )
@@ -124,9 +113,9 @@ l = (l + r + d) % d;
   };
-  if (s && (e.key === "ArrowUp" || e.key === "ArrowDown") || !s && (e.key === "ArrowLeft" || e.key === "ArrowRight")) {
-    e.preventDefault();
-    const i = b(
+  if (i && (a.key === "ArrowUp" || a.key === "ArrowDown") || !i && (a.key === "ArrowLeft" || a.key === "ArrowRight")) {
+    a.preventDefault();
+    const s = b(
       n,
       o,
       t.length
-    ), r = t[i];
+    ), r = t[s];
     r.focus(), r.click();
@@ -136,3 +125,8 @@ }
 class F {
-  constructor({ tabsElement: t, options: a = {}, indicatorOptions: n }) {
+  /**
+   * Tabs Components
+   * @param tabs 
+   * @param options 
+   */
+  constructor(t, e = {}) {
     c(this, "tabsElement");
@@ -156,8 +150,8 @@ c(this, "options");
     c(this, "changeTab", (t) => {
-      const a = u({ selector: `[data-tabs-trigger][data-target='${t}']`, parentElement: this.tabList });
-      if (!(a instanceof HTMLElement))
+      const e = m(`[data-tabs-trigger][data-target='${t}']`, this.tabList);
+      if (!(e instanceof HTMLElement))
         return;
-      this.activeTabTrigger = a;
-      const n = p({
-        triggerElement: a,
+      this.activeTabTrigger = e;
+      const n = E({
+        triggerElement: e,
         tabTriggers: this.tabTriggers,
@@ -173,22 +167,23 @@ tabPanels: this.tabPanels,
       this.options.onChangeTab && this.options.onChangeTab({
-        currentTrigger: a,
+        currentTrigger: e,
         currentPanel: n == null ? void 0 : n.currentTabPanel
       });
     });
-    if (!(t instanceof HTMLElement))
+    const n = typeof t == "string" ? m(t) : t;
+    if (!(n 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 || 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))
+    this.tabsElement = n, this.panelsContainer = g("[data-panels-container]", this.tabsElement) || this.tabsElement, this.options = e, this.indicatorOptions = this.options.indicatorOptions || N;
+    const { orientation: o, defaultValue: i, animationOnShow: h } = this.options;
+    this.defaultTabValue = i || this.tabsElement.dataset.defaultValue || "", this.tabsOrientation = o || this.tabsElement.dataset.orientation || O, this.showAnimation = h || this.tabsElement.dataset.showAnimation || "", this.tabList = g("[data-tab-list]", this.tabsElement);
+    const b = p("[data-tab-panel]", this.panelsContainer);
+    if (this.tabPanels = b.filter((u) => u.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))
+    if (!this.tabPanels.every((u) => u 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)
+    if (this.tabTriggers = p("[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 = 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 r = m("[data-tabs-trigger][data-state=active]", this.tabList);
+    this.activeTabTrigger = m(`[data-tabs-trigger][data-target='${this.defaultTabValue}']`, 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();
+    this.indicatorClassName = f || this.tabsElement.getAttribute("data-indicator-class-name") || "", this.indicatorTransformEaseing = d || this.tabsElement.dataset.indicatorTransformEasing || H, this.indicatorTransformDuration = l || parseInt(this.tabsElement.dataset.indicatorTransformDuration || "") || 600, this.init();
   }
@@ -212,5 +207,5 @@ init() {
   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 n = E({
         triggerElement: t,
@@ -230,20 +225,20 @@ tabTriggers: this.tabTriggers,
       });
-    }), t.addEventListener("keydown", (a) => $(a, this.tabTriggers, this.tabsOrientation)));
+    }), t.addEventListener("keydown", (e) => $(e, this.tabTriggers, this.tabsOrientation)));
   }
-  initializeTab({ tabTriggers: t, tabPanels: a, tabsPanelContainer: n, showAnimation: o, tabsOrientation: s, indicatorTransformDuration: h, indicatorTransformEaseing: b, activeTabTrigger: i, indicatorClassName: r, tabList: d }) {
+  initializeTab({ tabTriggers: t, tabPanels: e, tabsPanelContainer: n, showAnimation: o, tabsOrientation: i, indicatorTransformDuration: h, indicatorTransformEaseing: b, activeTabTrigger: s, indicatorClassName: r, tabList: d }) {
     for (const f of t)
       this.attachTriggerEvents(f);
     S({
-      activeTabTrigger: i,
+      activeTabTrigger: s,
       indicatorClassName: r,
-      tabsOrientation: s,
+      tabsOrientation: i,
       tabList: d
     });
-    const l = p({
-      triggerElement: i,
+    const l = E({
+      triggerElement: s,
       tabTriggers: t,
-      tabPanels: a,
+      tabPanels: e,
       tabsPanelContainer: n,
       showAnimation: o,
-      tabsOrientation: s,
+      tabsOrientation: i,
       indicatorTransformDuration: h,
@@ -254,3 +249,3 @@ indicatorTransformEaseing: b,
     this.options.onChangeTab && this.options.onChangeTab({
-      currentTrigger: i,
+      currentTrigger: s,
       currentPanel: l == null ? void 0 : l.currentTabPanel
@@ -257,0 +252,0 @@ });

package.json

 {
   "name": "@flexilla/tabs",
   "private": false,
-  "version": "1.2.3",
+  "version": "2.0.0",
   "type": "module",
@@ -24,3 +24,3 @@ "description": "A versatile tabs component for organizing content in a tabbed interface, enhancing user navigation.",
     },
-    "./tabs.css":"./dist/tabs.css"
+    "./tabs.css": "./dist/tabs.css"
   },
@@ -67,3 +67,4 @@ "files": [
   "license": "MIT",
-  "author": "johnkat-mj"
+  "author": "johnkat-mj",
+  "gitHead": "b182c7035953bc34e8f350b834df9862bec8acb5"
 }

No alert changes

Worsened metrics

Total package byte prevSize

24490

decreased by-2.79%

Lines of code

334

decreased by-1.76%

No dependency changes