@studiometa/ui 0.2.13 → 0.2.15

package/molecules/TableOfContent/TableOfContent.d.ts

@@ -1,37 +1,30 @@
-/**
- * @typedef {TableOfContent & {
- *   $refs: {
- *     itemTemplate: HTMLTemplateElement,
- *     list: HTMLUListElement
- *   },
- *   $options: {
- *     contentSelector: string,
- *     withTemplate: boolean,
- *   }
- * }} TableOfContentInterface
- */
+import { Base } from '@studiometa/js-toolkit';
+import type { BaseProps, BaseConfig } from '@studiometa/js-toolkit';
+import { TableOfContentAnchor } from './TableOfContentAnchor.js';
+export interface TableOfContentProps extends BaseProps {
+    $refs: {
+        itemTemplate: HTMLTemplateElement;
+        list: HTMLUListElement;
+    };
+    $options: {
+        contentSelector: string;
+        withTemplate: boolean;
+    };
+    $children: {
+        TableOfContentAnchor: TableOfContentAnchor[];
+    };
+}
 /**
  * TableOfContent class.
  */
-export default class TableOfContent extends Base {
+export declare class TableOfContent<T extends BaseProps = BaseProps> extends Base<T & TableOfContentProps> {
     /**
      * Config.
      */
-    static config: {
-        name: string;
-        refs: string[];
-        components: {
-            TableOfContentAnchor: typeof TableOfContentAnchor;
-        };
-        options: {
-            contentSelector: StringConstructor;
-            withTemplate: BooleanConstructor;
-        };
-    };
+    static config: BaseConfig;
     /**
      * Generate anchors on mount and update the component to instantiate the
      * `TableOfContentAnchor` components.
-     * @returns {void}
      */
     mounted(): void;
     /**
@@ -39,21 +32,6 @@ export default class TableOfContent extends Base {
      *
      * @todo Read anchor template from a ref?
      * @todo Better API to easily override the template function, maybe a `render` function?
-     *
-     * @this    {TableOfContentInterface}
-     * @returns {void}
      */
-    generateAnchors(this: TableOfContentInterface): void;
+    generateAnchors(): void;
 }
-export type TableOfContentInterface = TableOfContent & {
-    $refs: {
-        itemTemplate: HTMLTemplateElement;
-        list: HTMLUListElement;
-    };
-    $options: {
-        contentSelector: string;
-        withTemplate: boolean;
-    };
-};
-import { Base } from "@studiometa/js-toolkit";
-import TableOfContentAnchor from "./TableOfContentAnchor.js";

package/molecules/TableOfContent/TableOfContent.js

@@ -1 +1,37 @@
-import{Base as r}from"@studiometa/js-toolkit";import i from"./TableOfContentAnchor.js";class l extends r{static config={name:"TableOfContent",refs:["itemTemplate","list"],components:{TableOfContentAnchor:i},options:{contentSelector:String,withTemplate:Boolean}};mounted(){this.$options.withTemplate&&(this.generateAnchors(),this.$update())}generateAnchors(){document.querySelectorAll(this.$options.contentSelector).forEach(t=>{const n=document.createElement("div");n.innerHTML=this.$refs.itemTemplate.innerHTML;const o=n.querySelector("li"),e=o.querySelector("a");e.href=`#${t.id}`,e.innerHTML=t.textContent,e.dataset.component="TableOfContentAnchor",this.$refs.list.appendChild(o)})}}export{l as default};
+import { Base } from "@studiometa/js-toolkit";
+import { TableOfContentAnchor } from "./TableOfContentAnchor.js";
+class TableOfContent extends Base {
+  static config = {
+    name: "TableOfContent",
+    refs: ["itemTemplate", "list"],
+    components: {
+      TableOfContentAnchor
+    },
+    options: {
+      contentSelector: String,
+      withTemplate: Boolean
+    }
+  };
+  mounted() {
+    if (this.$options.withTemplate) {
+      this.generateAnchors();
+      this.$update();
+    }
+  }
+  generateAnchors() {
+    document.querySelectorAll(this.$options.contentSelector).forEach((section) => {
+      const tpl = document.createElement("div");
+      tpl.innerHTML = this.$refs.itemTemplate.innerHTML;
+      const li = tpl.querySelector("li");
+      const anchor = li.querySelector("a");
+      anchor.href = `#${section.id}`;
+      anchor.innerHTML = section.textContent;
+      anchor.dataset.component = "TableOfContentAnchor";
+      this.$refs.list.append(li);
+    });
+  }
+}
+export {
+  TableOfContent
+};
+//# sourceMappingURL=TableOfContent.js.map

package/molecules/TableOfContent/TableOfContent.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../packages/ui/molecules/TableOfContent/TableOfContent.ts"],
+  "sourcesContent": ["import { Base } from '@studiometa/js-toolkit';\nimport type { BaseProps, BaseConfig } from '@studiometa/js-toolkit';\nimport { TableOfContentAnchor } from './TableOfContentAnchor.js';\n\nexport interface TableOfContentProps extends BaseProps {\n  $refs: {\n    itemTemplate: HTMLTemplateElement;\n    list: HTMLUListElement;\n  };\n  $options: {\n    contentSelector: string;\n    withTemplate: boolean;\n  };\n  $children: {\n    TableOfContentAnchor: TableOfContentAnchor[];\n  };\n}\n\n/**\n * TableOfContent class.\n */\nexport class TableOfContent<T extends BaseProps = BaseProps> extends Base<T & TableOfContentProps> {\n  /**\n   * Config.\n   */\n  static config: BaseConfig = {\n    name: 'TableOfContent',\n    refs: ['itemTemplate', 'list'],\n    components: {\n      TableOfContentAnchor,\n    },\n    options: {\n      contentSelector: String,\n      withTemplate: Boolean,\n    },\n  };\n\n  /**\n   * Generate anchors on mount and update the component to instantiate the\n   * `TableOfContentAnchor` components.\n   */\n  mounted() {\n    if (this.$options.withTemplate) {\n      this.generateAnchors();\n      this.$update();\n    }\n  }\n\n  /**\n   * Generate all anchors.\n   *\n   * @todo Read anchor template from a ref?\n   * @todo Better API to easily override the template function, maybe a `render` function?\n   */\n  generateAnchors() {\n    document.querySelectorAll(this.$options.contentSelector).forEach((section) => {\n      const tpl = document.createElement('div');\n      tpl.innerHTML = this.$refs.itemTemplate.innerHTML;\n      const li = tpl.querySelector('li');\n      const anchor = li.querySelector('a');\n      anchor.href = `#${section.id}`;\n      anchor.innerHTML = section.textContent;\n      anchor.dataset.component = 'TableOfContentAnchor';\n      this.$refs.list.append(li);\n    });\n  }\n}\n"],
+  "mappings": "AAAA,SAAS,YAAY;AAErB,SAAS,4BAA4B;AAmB9B,MAAM,uBAAwD,KAA8B;AAAA,EAIjG,OAAO,SAAqB;AAAA,IAC1B,MAAM;AAAA,IACN,MAAM,CAAC,gBAAgB,MAAM;AAAA,IAC7B,YAAY;AAAA,MACV;AAAA,IACF;AAAA,IACA,SAAS;AAAA,MACP,iBAAiB;AAAA,MACjB,cAAc;AAAA,IAChB;AAAA,EACF;AAAA,EAMA,UAAU;AACR,QAAI,KAAK,SAAS,cAAc;AAC9B,WAAK,gBAAgB;AACrB,WAAK,QAAQ;AAAA,IACf;AAAA,EACF;AAAA,EAQA,kBAAkB;AAChB,aAAS,iBAAiB,KAAK,SAAS,eAAe,EAAE,QAAQ,CAAC,YAAY;AAC5E,YAAM,MAAM,SAAS,cAAc,KAAK;AACxC,UAAI,YAAY,KAAK,MAAM,aAAa;AACxC,YAAM,KAAK,IAAI,cAAc,IAAI;AACjC,YAAM,SAAS,GAAG,cAAc,GAAG;AACnC,aAAO,OAAO,IAAI,QAAQ;AAC1B,aAAO,YAAY,QAAQ;AAC3B,aAAO,QAAQ,YAAY;AAC3B,WAAK,MAAM,KAAK,OAAO,EAAE;AAAA,IAC3B,CAAC;AAAA,EACH;AACF;",
+  "names": []
+}

package/molecules/TableOfContent/TableOfContentAnchor.cjs

@@ -21,14 +21,15 @@ var __publicField = (obj, key, value) => {
   return value;
 };
 
-// packages/ui/molecules/TableOfContent/TableOfContentAnchor.js
+// packages/ui/molecules/TableOfContent/TableOfContentAnchor.ts
 var TableOfContentAnchor_exports = {};
 __export(TableOfContentAnchor_exports, {
-  default: () => TableOfContentAnchor
+  TableOfContentAnchor: () => TableOfContentAnchor
 });
 module.exports = __toCommonJS(TableOfContentAnchor_exports);
 var import_atoms = require("../../atoms/index.cjs");
 var TableOfContentAnchor = class extends import_atoms.AnchorScrollTo {
+  __observer;
   get sentinel() {
     return document.querySelector(this.targetSelector);
   }
@@ -36,15 +37,15 @@ var TableOfContentAnchor = class extends import_atoms.AnchorScrollTo {
     if (!this.sentinel) {
       return;
     }
-    this.observer = new IntersectionObserver(([entry]) => {
+    this.__observer = new IntersectionObserver(([entry]) => {
       const shouldActivate = entry.isIntersecting && entry.boundingClientRect.y < 100 && entry.boundingClientRect.y > 100;
       this.$el.classList.toggle(this.$options.activeClass, shouldActivate);
       this.$emit("should-activate", shouldActivate);
     });
-    this.observer.observe(this.sentinel);
+    this.__observer.observe(this.sentinel);
   }
   destroyed() {
-    this.observer.disconnect();
+    this.__observer.disconnect();
   }
 };
 __publicField(TableOfContentAnchor, "config", {
@@ -58,3 +59,4 @@ __publicField(TableOfContentAnchor, "config", {
   }
 });
 if (module.exports.default) module.exports = module.exports.default;
+//# sourceMappingURL=TableOfContentAnchor.cjs.map

package/molecules/TableOfContent/TableOfContentAnchor.cjs.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../packages/ui/molecules/TableOfContent/TableOfContentAnchor.ts"],
+  "sourcesContent": ["import type { BaseProps, BaseConfig } from '@studiometa/js-toolkit';\nimport { AnchorScrollTo } from '../../atoms/index.js';\n\nexport interface TableOfContentAnchorProps extends BaseProps {\n  $options: {\n    activeClass: string;\n  };\n}\n\n/**\n * TableOfContentAnchor class.\n */\nexport class TableOfContentAnchor<T extends BaseProps = BaseProps> extends AnchorScrollTo<\n  T & TableOfContentAnchorProps\n> {\n  /**\n   * Config.\n   */\n  static config: BaseConfig = {\n    name: 'TableOfContentAnchor',\n    emits: ['should-activate'],\n    options: {\n      activeClass: {\n        type: String,\n        default: 'is-active',\n      },\n    },\n  };\n\n  /**\n   * Observer.\n   * @private\n   */\n  __observer: IntersectionObserver;\n\n  /**\n   * Get the sentinel.\n   */\n  get sentinel():HTMLElement {\n    return document.querySelector(this.targetSelector) as HTMLElement;\n  }\n\n  /**\n   * Init observer on mount.\n   */\n  mounted() {\n    if (!this.sentinel) {\n      return;\n    }\n\n    this.__observer = new IntersectionObserver(([entry]) => {\n      const shouldActivate =\n        entry.isIntersecting &&\n        entry.boundingClientRect.y < 100 &&\n        entry.boundingClientRect.y > 100;\n      this.$el.classList.toggle(this.$options.activeClass, shouldActivate);\n      this.$emit('should-activate', shouldActivate);\n    });\n\n    this.__observer.observe(this.sentinel);\n  }\n\n  /**\n   * Destroy observer on destroy.\n   */\n  destroyed() {\n    this.__observer.disconnect();\n  }\n}\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AACA,mBAA+B;AAWxB,IAAM,uBAAN,cAAoE,4BAEzE;AAAA,EAmBA;AAAA,EAKA,IAAI,WAAuB;AACzB,WAAO,SAAS,cAAc,KAAK,cAAc;AAAA,EACnD;AAAA,EAKA,UAAU;AACR,QAAI,CAAC,KAAK,UAAU;AAClB;AAAA,IACF;AAEA,SAAK,aAAa,IAAI,qBAAqB,CAAC,CAAC,KAAK,MAAM;AACtD,YAAM,iBACJ,MAAM,kBACN,MAAM,mBAAmB,IAAI,OAC7B,MAAM,mBAAmB,IAAI;AAC/B,WAAK,IAAI,UAAU,OAAO,KAAK,SAAS,aAAa,cAAc;AACnE,WAAK,MAAM,mBAAmB,cAAc;AAAA,IAC9C,CAAC;AAED,SAAK,WAAW,QAAQ,KAAK,QAAQ;AAAA,EACvC;AAAA,EAKA,YAAY;AACV,SAAK,WAAW,WAAW;AAAA,EAC7B;AACF;AAlDE,cANW,sBAMJ,UAAqB;AAAA,EAC1B,MAAM;AAAA,EACN,OAAO,CAAC,iBAAiB;AAAA,EACzB,SAAS;AAAA,IACP,aAAa;AAAA,MACX,MAAM;AAAA,MACN,SAAS;AAAA,IACX;AAAA,EACF;AACF;",
+  "names": []
+}

package/molecules/TableOfContent/TableOfContentAnchor.d.ts

@@ -1,36 +1,33 @@
+import type { BaseProps, BaseConfig } from '@studiometa/js-toolkit';
+import { AnchorScrollTo } from '../../atoms/index.js';
+export interface TableOfContentAnchorProps extends BaseProps {
+    $options: {
+        activeClass: string;
+    };
+}
 /**
  * TableOfContentAnchor class.
  */
-export default class TableOfContentAnchor extends AnchorScrollTo {
+export declare class TableOfContentAnchor<T extends BaseProps = BaseProps> extends AnchorScrollTo<T & TableOfContentAnchorProps> {
     /**
      * Config.
      */
-    static config: {
-        name: string;
-        emits: string[];
-        options: {
-            activeClass: {
-                type: StringConstructor;
-                default: string;
-            };
-        };
-    };
+    static config: BaseConfig;
+    /**
+     * Observer.
+     * @private
+     */
+    __observer: IntersectionObserver;
     /**
      * Get the sentinel.
-     * @returns {HTMLElement}
      */
     get sentinel(): HTMLElement;
     /**
      * Init observer on mount.
-     * @returns {void}
      */
     mounted(): void;
-    observer: IntersectionObserver;
     /**
      * Destroy observer on destroy.
-     *
-     * @returns {void}
      */
     destroyed(): void;
 }
-import { AnchorScrollTo } from "../../atoms/index.js";

package/molecules/TableOfContent/TableOfContentAnchor.js

@@ -1 +1,35 @@
-import{AnchorScrollTo as s}from"../../atoms/index.js";class i extends s{static config={name:"TableOfContentAnchor",emits:["should-activate"],options:{activeClass:{type:String,default:"is-active"}}};get sentinel(){return document.querySelector(this.targetSelector)}mounted(){!this.sentinel||(this.observer=new IntersectionObserver(([e])=>{const t=e.isIntersecting&&e.boundingClientRect.y<100&&e.boundingClientRect.y>100;this.$el.classList.toggle(this.$options.activeClass,t),this.$emit("should-activate",t)}),this.observer.observe(this.sentinel))}destroyed(){this.observer.disconnect()}}export{i as default};
+import { AnchorScrollTo } from "../../atoms/index.js";
+class TableOfContentAnchor extends AnchorScrollTo {
+  static config = {
+    name: "TableOfContentAnchor",
+    emits: ["should-activate"],
+    options: {
+      activeClass: {
+        type: String,
+        default: "is-active"
+      }
+    }
+  };
+  __observer;
+  get sentinel() {
+    return document.querySelector(this.targetSelector);
+  }
+  mounted() {
+    if (!this.sentinel) {
+      return;
+    }
+    this.__observer = new IntersectionObserver(([entry]) => {
+      const shouldActivate = entry.isIntersecting && entry.boundingClientRect.y < 100 && entry.boundingClientRect.y > 100;
+      this.$el.classList.toggle(this.$options.activeClass, shouldActivate);
+      this.$emit("should-activate", shouldActivate);
+    });
+    this.__observer.observe(this.sentinel);
+  }
+  destroyed() {
+    this.__observer.disconnect();
+  }
+}
+export {
+  TableOfContentAnchor
+};
+//# sourceMappingURL=TableOfContentAnchor.js.map

package/molecules/TableOfContent/TableOfContentAnchor.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../packages/ui/molecules/TableOfContent/TableOfContentAnchor.ts"],
+  "sourcesContent": ["import type { BaseProps, BaseConfig } from '@studiometa/js-toolkit';\nimport { AnchorScrollTo } from '../../atoms/index.js';\n\nexport interface TableOfContentAnchorProps extends BaseProps {\n  $options: {\n    activeClass: string;\n  };\n}\n\n/**\n * TableOfContentAnchor class.\n */\nexport class TableOfContentAnchor<T extends BaseProps = BaseProps> extends AnchorScrollTo<\n  T & TableOfContentAnchorProps\n> {\n  /**\n   * Config.\n   */\n  static config: BaseConfig = {\n    name: 'TableOfContentAnchor',\n    emits: ['should-activate'],\n    options: {\n      activeClass: {\n        type: String,\n        default: 'is-active',\n      },\n    },\n  };\n\n  /**\n   * Observer.\n   * @private\n   */\n  __observer: IntersectionObserver;\n\n  /**\n   * Get the sentinel.\n   */\n  get sentinel():HTMLElement {\n    return document.querySelector(this.targetSelector) as HTMLElement;\n  }\n\n  /**\n   * Init observer on mount.\n   */\n  mounted() {\n    if (!this.sentinel) {\n      return;\n    }\n\n    this.__observer = new IntersectionObserver(([entry]) => {\n      const shouldActivate =\n        entry.isIntersecting &&\n        entry.boundingClientRect.y < 100 &&\n        entry.boundingClientRect.y > 100;\n      this.$el.classList.toggle(this.$options.activeClass, shouldActivate);\n      this.$emit('should-activate', shouldActivate);\n    });\n\n    this.__observer.observe(this.sentinel);\n  }\n\n  /**\n   * Destroy observer on destroy.\n   */\n  destroyed() {\n    this.__observer.disconnect();\n  }\n}\n"],
+  "mappings": "AACA,SAAS,sBAAsB;AAWxB,MAAM,6BAA8D,eAEzE;AAAA,EAIA,OAAO,SAAqB;AAAA,IAC1B,MAAM;AAAA,IACN,OAAO,CAAC,iBAAiB;AAAA,IACzB,SAAS;AAAA,MACP,aAAa;AAAA,QACX,MAAM;AAAA,QACN,SAAS;AAAA,MACX;AAAA,IACF;AAAA,EACF;AAAA,EAMA;AAAA,EAKA,IAAI,WAAuB;AACzB,WAAO,SAAS,cAAc,KAAK,cAAc;AAAA,EACnD;AAAA,EAKA,UAAU;AACR,QAAI,CAAC,KAAK,UAAU;AAClB;AAAA,IACF;AAEA,SAAK,aAAa,IAAI,qBAAqB,CAAC,CAAC,KAAK,MAAM;AACtD,YAAM,iBACJ,MAAM,kBACN,MAAM,mBAAmB,IAAI,OAC7B,MAAM,mBAAmB,IAAI;AAC/B,WAAK,IAAI,UAAU,OAAO,KAAK,SAAS,aAAa,cAAc;AACnE,WAAK,MAAM,mBAAmB,cAAc;AAAA,IAC9C,CAAC;AAED,SAAK,WAAW,QAAQ,KAAK,QAAQ;AAAA,EACvC;AAAA,EAKA,YAAY;AACV,SAAK,WAAW,WAAW;AAAA,EAC7B;AACF;",
+  "names": []
+}

package/molecules/TableOfContent/index.cjs

@@ -1,13 +1,7 @@
-var __create = Object.create;
 var __defProp = Object.defineProperty;
 var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
 var __getOwnPropNames = Object.getOwnPropertyNames;
-var __getProtoOf = Object.getPrototypeOf;
 var __hasOwnProp = Object.prototype.hasOwnProperty;
-var __export = (target, all) => {
-  for (var name in all)
-    __defProp(target, name, { get: all[name], enumerable: true });
-};
 var __copyProps = (to, from, except, desc) => {
   if (from && typeof from === "object" || typeof from === "function") {
     for (let key of __getOwnPropNames(from))
@@ -16,16 +10,13 @@ var __copyProps = (to, from, except, desc) => {
   }
   return to;
 };
-var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target, mod));
+var __reExport = (target, mod, secondTarget) => (__copyProps(target, mod, "default"), secondTarget && __copyProps(secondTarget, mod, "default"));
 var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
 
-// packages/ui/molecules/TableOfContent/index.js
+// packages/ui/molecules/TableOfContent/index.ts
 var TableOfContent_exports = {};
-__export(TableOfContent_exports, {
-  TableOfContent: () => import_TableOfContent.default,
-  TableOfContentAnchor: () => import_TableOfContentAnchor.default
-});
 module.exports = __toCommonJS(TableOfContent_exports);
-var import_TableOfContent = __toESM(require("./TableOfContent.cjs"), 1);
-var import_TableOfContentAnchor = __toESM(require("./TableOfContentAnchor.cjs"), 1);
+__reExport(TableOfContent_exports, require("./TableOfContent.cjs"), module.exports);
+__reExport(TableOfContent_exports, require("./TableOfContentAnchor.cjs"), module.exports);
 if (module.exports.default) module.exports = module.exports.default;
+//# sourceMappingURL=index.cjs.map

package/molecules/TableOfContent/index.cjs.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../packages/ui/molecules/TableOfContent/index.ts"],
+  "sourcesContent": ["export * from './TableOfContent.js';\nexport * from './TableOfContentAnchor.js';\n"],
+  "mappings": ";;;;;;;;;;;;;;;;AAAA;AAAA;AAAA,mCAAc,iCAAd;AACA,mCAAc,uCADd;",
+  "names": []
+}

package/molecules/TableOfContent/index.d.ts

@@ -1,2 +1,2 @@
-export { default as TableOfContent } from "./TableOfContent.js";
-export { default as TableOfContentAnchor } from "./TableOfContentAnchor.js";
+export * from './TableOfContent.js';
+export * from './TableOfContentAnchor.js';

package/molecules/TableOfContent/index.js

@@ -1 +1,3 @@
-import{default as o}from"./TableOfContent.js";import{default as f}from"./TableOfContentAnchor.js";export{o as TableOfContent,f as TableOfContentAnchor};
+export * from "./TableOfContent.js";
+export * from "./TableOfContentAnchor.js";
+//# sourceMappingURL=index.js.map

package/molecules/TableOfContent/index.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../packages/ui/molecules/TableOfContent/index.ts"],
+  "sourcesContent": ["export * from './TableOfContent.js';\nexport * from './TableOfContentAnchor.js';\n"],
+  "mappings": "AAAA,cAAc;AACd,cAAc;",
+  "names": []
+}

package/molecules/Tabs/Tabs.cjs

@@ -21,15 +21,16 @@ var __publicField = (obj, key, value) => {
   return value;
 };
 
-// packages/ui/molecules/Tabs/Tabs.js
+// packages/ui/molecules/Tabs/Tabs.ts
 var Tabs_exports = {};
 __export(Tabs_exports, {
-  default: () => Tabs
+  Tabs: () => Tabs
 });
 module.exports = __toCommonJS(Tabs_exports);
 var import_js_toolkit = require("@studiometa/js-toolkit");
 var import_utils = require("@studiometa/js-toolkit/utils");
 var Tabs = class extends import_js_toolkit.Base {
+  items;
   mounted() {
     this.items = this.$refs.btn.map((btn, index) => {
       const id = `${this.$id}-${index}`;
@@ -64,16 +65,24 @@ var Tabs = class extends import_js_toolkit.Base {
     content.setAttribute("aria-hidden", "false");
     this.$emit("enable", item);
     return Promise.all([
-      (0, import_utils.transition)(btn, {
-        from: btnStyles.closed,
-        active: btnStyles.active,
-        to: btnStyles.open
-      }, "keep"),
-      (0, import_utils.transition)(content, {
-        from: contentStyles.closed,
-        active: contentStyles.active,
-        to: contentStyles.open
-      }, "keep")
+      (0, import_utils.transition)(
+        btn,
+        {
+          from: btnStyles.closed,
+          active: btnStyles.active,
+          to: btnStyles.open
+        },
+        "keep"
+      ),
+      (0, import_utils.transition)(
+        content,
+        {
+          from: contentStyles.closed,
+          active: contentStyles.active,
+          to: contentStyles.open
+        },
+        "keep"
+      )
     ]).then(() => Promise.resolve(this));
   }
   async disableItem(item) {
@@ -87,16 +96,24 @@ var Tabs = class extends import_js_toolkit.Base {
     content.setAttribute("aria-hidden", "true");
     this.$emit("disable", item);
     return Promise.all([
-      (0, import_utils.transition)(btn, {
-        from: btnStyles.open,
-        active: btnStyles.active,
-        to: btnStyles.closed
-      }, "keep"),
-      (0, import_utils.transition)(content, {
-        from: contentStyles.open,
-        active: contentStyles.active,
-        to: contentStyles.closed
-      }, "keep")
+      (0, import_utils.transition)(
+        btn,
+        {
+          from: btnStyles.open,
+          active: btnStyles.active,
+          to: btnStyles.closed
+        },
+        "keep"
+      ),
+      (0, import_utils.transition)(
+        content,
+        {
+          from: contentStyles.open,
+          active: contentStyles.active,
+          to: contentStyles.closed
+        },
+        "keep"
+      )
     ]).then(() => Promise.resolve(this));
   }
 };
@@ -122,3 +139,4 @@ __publicField(Tabs, "config", {
   }
 });
 if (module.exports.default) module.exports = module.exports.default;
+//# sourceMappingURL=Tabs.cjs.map

package/molecules/Tabs/Tabs.cjs.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../packages/ui/molecules/Tabs/Tabs.ts"],
+  "sourcesContent": ["import { Base } from '@studiometa/js-toolkit';\nimport type { BaseProps, BaseConfig } from '@studiometa/js-toolkit';\nimport { transition } from '@studiometa/js-toolkit/utils';\n\ntype TabItem = {\n  btn: HTMLElement;\n  content: HTMLElement;\n  isEnabled: boolean;\n};\n\ntype TabsStates = Partial<\n  Record<'open' | 'active' | 'closed', string | Partial<CSSStyleDeclaration>>\n>;\n// eslint-disable-next-line no-use-before-define\ntype TabsStylesOption = Partial<Record<keyof TabsProps['$refs'], TabsStates>>;\n\nexport interface TabsProps extends BaseProps {\n  $options: {\n    styles: TabsStylesOption;\n  };\n  $refs: {\n    btn: HTMLElement[];\n    content: HTMLElement[];\n  };\n}\n\n/**\n * Tabs class.\n */\nexport class Tabs<T extends BaseProps = BaseProps> extends Base<T & TabsProps> {\n  /**\n   * Config.\n   */\n  static config: BaseConfig = {\n    name: 'Tabs',\n    refs: ['btn[]', 'content[]'],\n    emits: ['enable', 'disable'],\n    options: {\n      styles: {\n        type: Object,\n        default: (): TabsStylesOption => ({\n          content: {\n            closed: {\n              position: 'absolute',\n              opacity: '0',\n              pointerEvents: 'none',\n              visibility: 'hidden',\n            },\n          },\n        }),\n        merge: true,\n      },\n    },\n  };\n\n  items: TabItem[];\n\n  /**\n   * Initialize the component's behaviours.\n   * @returns {void}\n   */\n  mounted() {\n    this.items = this.$refs.btn.map((btn, index) => {\n      const id = `${this.$id}-${index}`;\n      const content = this.$refs.content[index];\n      btn.setAttribute('id', id);\n      content.setAttribute('aria-labelledby', id);\n\n      const item = { btn, content, isEnabled: index > 0 };\n      if (index > 0) {\n        this.disableItem(item);\n      } else {\n        this.enableItem(item);\n      }\n      return item;\n    });\n  }\n\n  /**\n   * Switch tab on button click.\n   */\n  onBtnClick(event:MouseEvent, index:number) {\n    this.items.forEach((item, i) => {\n      if (i !== index) {\n        this.disableItem(item);\n      }\n    });\n\n    this.enableItem(this.items[index]);\n  }\n\n  /**\n   * Enable the given tab and its associated content.\n   */\n  async enableItem(item:TabItem):Promise<this> {\n    if (!item || item.isEnabled) {\n      return Promise.resolve(this);\n    }\n\n    item.isEnabled = true;\n    const { btn, content } = item;\n    const btnStyles = this.$options.styles.btn || {};\n    const contentStyles = this.$options.styles.content || {};\n\n    content.setAttribute('aria-hidden', 'false');\n    this.$emit('enable', item);\n\n    return Promise.all([\n      transition(\n        btn,\n        {\n          from: btnStyles.closed,\n          active: btnStyles.active,\n          to: btnStyles.open,\n        },\n        'keep',\n      ),\n      transition(\n        content,\n        {\n          from: contentStyles.closed,\n          active: contentStyles.active,\n          to: contentStyles.open,\n        },\n        'keep',\n      ),\n    ]).then(() => Promise.resolve(this));\n  }\n\n  /**\n   * Disable the given tab and its associated content.\n   */\n  async disableItem(item:TabItem):Promise<this> {\n    if (!item || !item.isEnabled) {\n      return Promise.resolve(this);\n    }\n\n    item.isEnabled = false;\n    const { btn, content } = item;\n    const btnStyles = this.$options.styles.btn || {};\n    const contentStyles = this.$options.styles.content || {};\n\n    content.setAttribute('aria-hidden', 'true');\n    this.$emit('disable', item);\n\n    return Promise.all([\n      transition(\n        btn,\n        {\n          from: btnStyles.open,\n          active: btnStyles.active,\n          to: btnStyles.closed,\n        },\n        'keep',\n      ),\n      transition(\n        content,\n        {\n          from: contentStyles.open,\n          active: contentStyles.active,\n          to: contentStyles.closed,\n        },\n        'keep',\n      ),\n    ]).then(() => Promise.resolve(this));\n  }\n}\n"],
+  "mappings": "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",
+  "names": []
+}

package/molecules/Tabs/Tabs.d.ts

@@ -1,108 +1,46 @@
-/**
- * @typedef {import('@studiometa/js-toolkit/Base').BaseOptions} BaseOptions
- */
-/**
- * @typedef {Object} TabItem
- * @property {HTMLElement} btn
- * @property {HTMLElement} content
- * @property {Boolean} isEnabled
- */
-/**
- * @typedef {Object} TabsRefs
- * @property {HTMLElement[]} btn
- * @property {HTMLElement[]} content
- */
-/**
- * @typedef {Partial<Record<'open'|'active'|'closed', string|Partial<CSSStyleDeclaration>>>} TabsStates
- * @typedef {Partial<Record<keyof TabsRefs, TabsStates>>} TabsStylesOption
- */
-/**
- * @typedef {Object} TabsOptions
- * @property {TabsStylesOption} styles
- */
-/**
- * @typedef {Object} TabsPrivateInterface
- * @property {TabsOptions} $options
- * @property {TabsRefs} $refs
- * @property {Array<TabItem>} items
- */
-/**
- * @typedef {Tabs & TabsPrivateInterface} TabsInterface
- */
+import { Base } from '@studiometa/js-toolkit';
+import type { BaseProps, BaseConfig } from '@studiometa/js-toolkit';
+declare type TabItem = {
+    btn: HTMLElement;
+    content: HTMLElement;
+    isEnabled: boolean;
+};
+declare type TabsStates = Partial<Record<'open' | 'active' | 'closed', string | Partial<CSSStyleDeclaration>>>;
+declare type TabsStylesOption = Partial<Record<keyof TabsProps['$refs'], TabsStates>>;
+export interface TabsProps extends BaseProps {
+    $options: {
+        styles: TabsStylesOption;
+    };
+    $refs: {
+        btn: HTMLElement[];
+        content: HTMLElement[];
+    };
+}
 /**
  * Tabs class.
  */
-export default class Tabs extends Base {
+export declare class Tabs<T extends BaseProps = BaseProps> extends Base<T & TabsProps> {
     /**
-     * Tabs config.
+     * Config.
      */
-    static config: {
-        name: string;
-        refs: string[];
-        emits: string[];
-        options: {
-            styles: {
-                type: ObjectConstructor;
-                /**
-                 * @return {TabsStylesOption}
-                 */
-                default: () => TabsStylesOption;
-                merge: boolean;
-            };
-        };
-    };
+    static config: BaseConfig;
+    items: TabItem[];
     /**
      * Initialize the component's behaviours.
-     * @this {TabsInterface}
-     * @return {void}
+     * @returns {void}
      */
-    mounted(this: TabsInterface): void;
-    items: any;
+    mounted(): void;
     /**
      * Switch tab on button click.
-     *
-     * @this {TabsInterface}
-     * @param  {Event}  event The click event object.
-     * @param  {number} index The index of the clicked button.
-     * @return {void}
      */
-    onBtnClick(this: TabsInterface, event: Event, index: number): void;
+    onBtnClick(event: MouseEvent, index: number): void;
     /**
      * Enable the given tab and its associated content.
-     *
-     * @this {TabsInterface}
-     * @param  {TabItem}                item The item to enable.
-     * @return {Promise<TabsInterface>}      Tabs instance.
      */
-    enableItem(this: TabsInterface, item: TabItem): Promise<TabsInterface>;
+    enableItem(item: TabItem): Promise<this>;
     /**
      * Disable the given tab and its associated content.
-     *
-     * @this {TabsInterface}
-     * @param  {TabItem}                item The item to disable.
-     * @return {Promise<TabsInterface>}      The Tabs instance.
      */
-    disableItem(this: TabsInterface, item: TabItem): Promise<TabsInterface>;
+    disableItem(item: TabItem): Promise<this>;
 }
-export type BaseOptions = import('@studiometa/js-toolkit/Base').BaseOptions;
-export type TabItem = {
-    btn: HTMLElement;
-    content: HTMLElement;
-    isEnabled: boolean;
-};
-export type TabsRefs = {
-    btn: HTMLElement[];
-    content: HTMLElement[];
-};
-export type TabsStates = Partial<Record<'open' | 'active' | 'closed', string | Partial<CSSStyleDeclaration>>>;
-export type TabsStylesOption = Partial<Record<keyof TabsRefs, TabsStates>>;
-export type TabsOptions = {
-    styles: TabsStylesOption;
-};
-export type TabsPrivateInterface = {
-    $options: TabsOptions;
-    $refs: TabsRefs;
-    items: Array<TabItem>;
-};
-export type TabsInterface = Tabs & TabsPrivateInterface;
-import { Base } from "@studiometa/js-toolkit";
+export {};