@studiometa/ui 0.2.13 → 0.2.15

package/molecules/Tabs/Tabs.js

@@ -1 +1,115 @@
-import{Base as a}from"@studiometa/js-toolkit";import{transition as o}from"@studiometa/js-toolkit/utils";class l extends a{static config={name:"Tabs",refs:["btn[]","content[]"],emits:["enable","disable"],options:{styles:{type:Object,default:()=>({content:{closed:{position:"absolute",opacity:"0",pointerEvents:"none",visibility:"hidden"}}}),merge:!0}}};mounted(){this.items=this.$refs.btn.map((t,s)=>{const i=`${this.$id}-${s}`,e=this.$refs.content[s];t.setAttribute("id",i),e.setAttribute("aria-labelledby",i);const n={btn:t,content:e,isEnabled:s>0};return s>0?this.disableItem(n):this.enableItem(n),n})}onBtnClick(t,s){this.items.forEach((i,e)=>{e!==s&&this.disableItem(i)}),this.enableItem(this.items[s])}async enableItem(t){if(!t||t.isEnabled)return Promise.resolve(this);t.isEnabled=!0;const{btn:s,content:i}=t,e=this.$options.styles.btn||{},n=this.$options.styles.content||{};return i.setAttribute("aria-hidden","false"),this.$emit("enable",t),Promise.all([o(s,{from:e.closed,active:e.active,to:e.open},"keep"),o(i,{from:n.closed,active:n.active,to:n.open},"keep")]).then(()=>Promise.resolve(this))}async disableItem(t){if(!t||!t.isEnabled)return Promise.resolve(this);t.isEnabled=!1;const{btn:s,content:i}=t,e=this.$options.styles.btn||{},n=this.$options.styles.content||{};return i.setAttribute("aria-hidden","true"),this.$emit("disable",t),Promise.all([o(s,{from:e.open,active:e.active,to:e.closed},"keep"),o(i,{from:n.open,active:n.active,to:n.closed},"keep")]).then(()=>Promise.resolve(this))}}export{l as default};
+import { Base } from "@studiometa/js-toolkit";
+import { transition } from "@studiometa/js-toolkit/utils";
+class Tabs extends Base {
+  static config = {
+    name: "Tabs",
+    refs: ["btn[]", "content[]"],
+    emits: ["enable", "disable"],
+    options: {
+      styles: {
+        type: Object,
+        default: () => ({
+          content: {
+            closed: {
+              position: "absolute",
+              opacity: "0",
+              pointerEvents: "none",
+              visibility: "hidden"
+            }
+          }
+        }),
+        merge: true
+      }
+    }
+  };
+  items;
+  mounted() {
+    this.items = this.$refs.btn.map((btn, index) => {
+      const id = `${this.$id}-${index}`;
+      const content = this.$refs.content[index];
+      btn.setAttribute("id", id);
+      content.setAttribute("aria-labelledby", id);
+      const item = { btn, content, isEnabled: index > 0 };
+      if (index > 0) {
+        this.disableItem(item);
+      } else {
+        this.enableItem(item);
+      }
+      return item;
+    });
+  }
+  onBtnClick(event, index) {
+    this.items.forEach((item, i) => {
+      if (i !== index) {
+        this.disableItem(item);
+      }
+    });
+    this.enableItem(this.items[index]);
+  }
+  async enableItem(item) {
+    if (!item || item.isEnabled) {
+      return Promise.resolve(this);
+    }
+    item.isEnabled = true;
+    const { btn, content } = item;
+    const btnStyles = this.$options.styles.btn || {};
+    const contentStyles = this.$options.styles.content || {};
+    content.setAttribute("aria-hidden", "false");
+    this.$emit("enable", item);
+    return Promise.all([
+      transition(
+        btn,
+        {
+          from: btnStyles.closed,
+          active: btnStyles.active,
+          to: btnStyles.open
+        },
+        "keep"
+      ),
+      transition(
+        content,
+        {
+          from: contentStyles.closed,
+          active: contentStyles.active,
+          to: contentStyles.open
+        },
+        "keep"
+      )
+    ]).then(() => Promise.resolve(this));
+  }
+  async disableItem(item) {
+    if (!item || !item.isEnabled) {
+      return Promise.resolve(this);
+    }
+    item.isEnabled = false;
+    const { btn, content } = item;
+    const btnStyles = this.$options.styles.btn || {};
+    const contentStyles = this.$options.styles.content || {};
+    content.setAttribute("aria-hidden", "true");
+    this.$emit("disable", item);
+    return Promise.all([
+      transition(
+        btn,
+        {
+          from: btnStyles.open,
+          active: btnStyles.active,
+          to: btnStyles.closed
+        },
+        "keep"
+      ),
+      transition(
+        content,
+        {
+          from: contentStyles.open,
+          active: contentStyles.active,
+          to: contentStyles.closed
+        },
+        "keep"
+      )
+    ]).then(() => Promise.resolve(this));
+  }
+}
+export {
+  Tabs
+};
+//# sourceMappingURL=Tabs.js.map

package/molecules/Tabs/Tabs.js.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/index.cjs

@@ -0,0 +1,21 @@
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+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/Tabs/index.ts
+var Tabs_exports = {};
+module.exports = __toCommonJS(Tabs_exports);
+__reExport(Tabs_exports, require("./Tabs.cjs"), module.exports);
+if (module.exports.default) module.exports = module.exports.default;
+//# sourceMappingURL=index.cjs.map

package/molecules/Tabs/index.cjs.map

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

package/molecules/Tabs/index.d.ts

@@ -0,0 +1 @@
+export * from './Tabs.js';

package/molecules/Tabs/index.js

@@ -0,0 +1,2 @@
+export * from "./Tabs.js";
+//# sourceMappingURL=index.js.map

package/molecules/Tabs/index.js.map

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

package/molecules/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))
@@ -17,29 +11,19 @@ var __copyProps = (to, from, except, desc) => {
   return to;
 };
 var __reExport = (target, mod, secondTarget) => (__copyProps(target, mod, "default"), secondTarget && __copyProps(secondTarget, mod, "default"));
-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 __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
 
-// packages/ui/molecules/index.js
+// packages/ui/molecules/index.ts
 var molecules_exports = {};
-__export(molecules_exports, {
-  Accordion: () => import_Accordion.default,
-  AccordionItem: () => import_AccordionItem.default,
-  Modal: () => import_Modal.default,
-  ModalWithTransition: () => import_ModalWithTransition.default,
-  Panel: () => import_Panel.default,
-  Sticky: () => import_Sticky.default,
-  Tabs: () => import_Tabs.default
-});
 module.exports = __toCommonJS(molecules_exports);
+__reExport(molecules_exports, require("./Accordion/Accordion.cjs"), module.exports);
+__reExport(molecules_exports, require("./Accordion/AccordionItem.cjs"), module.exports);
 __reExport(molecules_exports, require("./Menu/index.cjs"), module.exports);
 __reExport(molecules_exports, require("./Slider/index.cjs"), module.exports);
+__reExport(molecules_exports, require("./Sticky/Sticky.cjs"), module.exports);
 __reExport(molecules_exports, require("./TableOfContent/index.cjs"), module.exports);
-var import_Accordion = __toESM(require("./Accordion/Accordion.cjs"), 1);
-var import_AccordionItem = __toESM(require("./Accordion/AccordionItem.cjs"), 1);
-var import_Modal = __toESM(require("./Modal/Modal.cjs"), 1);
-var import_ModalWithTransition = __toESM(require("./Modal/ModalWithTransition.cjs"), 1);
-var import_Panel = __toESM(require("./Panel/Panel.cjs"), 1);
-var import_Sticky = __toESM(require("./Sticky/Sticky.cjs"), 1);
-var import_Tabs = __toESM(require("./Tabs/Tabs.cjs"), 1);
+__reExport(molecules_exports, require("./Tabs/index.cjs"), module.exports);
+__reExport(molecules_exports, require("./Modal/index.cjs"), module.exports);
+__reExport(molecules_exports, require("./Panel/index.cjs"), module.exports);
 if (module.exports.default) module.exports = module.exports.default;
+//# sourceMappingURL=index.cjs.map

package/molecules/index.cjs.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../packages/ui/molecules/index.ts"],
+  "sourcesContent": ["export * from './Accordion/Accordion.js';\nexport * from './Accordion/AccordionItem.js';\nexport * from './Menu/index.js';\nexport * from './Slider/index.js';\nexport * from './Sticky/Sticky.js';\nexport * from './TableOfContent/index.js';\nexport * from './Tabs/index.js';\nexport * from './Modal/index.js';\nexport * from './Panel/index.js';\n"],
+  "mappings": ";;;;;;;;;;;;;;;;AAAA;AAAA;AAAA,8BAAc,sCAAd;AACA,8BAAc,0CADd;AAEA,8BAAc,6BAFd;AAGA,8BAAc,+BAHd;AAIA,8BAAc,gCAJd;AAKA,8BAAc,uCALd;AAMA,8BAAc,6BANd;AAOA,8BAAc,8BAPd;AAQA,8BAAc,8BARd;",
+  "names": []
+}

package/molecules/index.d.ts

@@ -1,10 +1,9 @@
-export * from "./Menu/index.js";
-export * from "./Slider/index.js";
-export * from "./TableOfContent/index.js";
-export { default as Accordion } from "./Accordion/Accordion.js";
-export { default as AccordionItem } from "./Accordion/AccordionItem.js";
-export { default as Modal } from "./Modal/Modal.js";
-export { default as ModalWithTransition } from "./Modal/ModalWithTransition.js";
-export { default as Panel } from "./Panel/Panel.js";
-export { default as Sticky } from "./Sticky/Sticky.js";
-export { default as Tabs } from "./Tabs/Tabs.js";
+export * from './Accordion/Accordion.js';
+export * from './Accordion/AccordionItem.js';
+export * from './Menu/index.js';
+export * from './Slider/index.js';
+export * from './Sticky/Sticky.js';
+export * from './TableOfContent/index.js';
+export * from './Tabs/index.js';
+export * from './Modal/index.js';
+export * from './Panel/index.js';

package/molecules/index.js

@@ -1 +1,10 @@
-export*from"./Menu/index.js";export*from"./Slider/index.js";export*from"./TableOfContent/index.js";import{default as f}from"./Accordion/Accordion.js";import{default as m}from"./Accordion/AccordionItem.js";import{default as p}from"./Modal/Modal.js";import{default as s}from"./Modal/ModalWithTransition.js";import{default as i}from"./Panel/Panel.js";import{default as n}from"./Sticky/Sticky.js";import{default as M}from"./Tabs/Tabs.js";export{f as Accordion,m as AccordionItem,p as Modal,s as ModalWithTransition,i as Panel,n as Sticky,M as Tabs};
+export * from "./Accordion/Accordion.js";
+export * from "./Accordion/AccordionItem.js";
+export * from "./Menu/index.js";
+export * from "./Slider/index.js";
+export * from "./Sticky/Sticky.js";
+export * from "./TableOfContent/index.js";
+export * from "./Tabs/index.js";
+export * from "./Modal/index.js";
+export * from "./Panel/index.js";
+//# sourceMappingURL=index.js.map

package/molecules/index.js.map

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

package/organisms/Frame/Frame.cjs

@@ -1,8 +1,6 @@
-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 __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
 var __export = (target, all) => {
@@ -17,24 +15,23 @@ 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 __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
 var __publicField = (obj, key, value) => {
   __defNormalProp(obj, typeof key !== "symbol" ? key + "" : key, value);
   return value;
 };
 
-// packages/ui/organisms/Frame/Frame.js
+// packages/ui/organisms/Frame/Frame.ts
 var Frame_exports = {};
 __export(Frame_exports, {
-  default: () => Frame
+  Frame: () => Frame
 });
 module.exports = __toCommonJS(Frame_exports);
 var import_js_toolkit = require("@studiometa/js-toolkit");
 var import_utils = require("@studiometa/js-toolkit/utils");
-var import_FrameAnchor = __toESM(require("./FrameAnchor.cjs"), 1);
-var import_FrameForm = __toESM(require("./FrameForm.cjs"), 1);
-var import_FrameTarget = __toESM(require("./FrameTarget.cjs"), 1);
+var import_FrameAnchor = require("./FrameAnchor.cjs");
+var import_FrameForm = require("./FrameForm.cjs");
+var import_FrameTarget = require("./FrameTarget.cjs");
 function getScrollPosition() {
   return {
     left: window.pageXOffset,
@@ -46,43 +43,21 @@ var _Frame = class extends import_js_toolkit.Base {
   get id() {
     return this.$el.id;
   }
-  getDirectChild(name) {
-    if (!this.$children[name]) {
-      return [];
-    }
-    if (!this.$children.Frame) {
-      return this.$children[name];
-    }
-    return this.$children[name].filter((child) => this.$children.Frame.every((frame) => frame.$children[name] ? !frame.$children[name].includes(child) : true));
-  }
   get directChildrenFrameTarget() {
     return (0, import_js_toolkit.getDirectChildren)(this, "Frame", "FrameTarget");
   }
-  mounted() {
-    if (this.$options.history) {
-      window.addEventListener("popstate", this);
-    }
-  }
-  destroyed() {
-    window.removeEventListener("popstate", this);
-  }
-  handleEvent(event) {
-    if (event.type === "popstate") {
-      this.onWindowPopstate(event);
-    }
-    if (event.type === "beforeunload") {
-      this.onWindowUnload();
-    }
-  }
   onWindowUnload() {
     const { history } = window;
     if (!history.state) {
       return;
     }
-    history.replaceState({
-      ...history.state,
-      scroll: getScrollPosition()
-    }, "");
+    history.replaceState(
+      {
+        ...history.state,
+        scroll: getScrollPosition()
+      },
+      ""
+    );
   }
   onWindowPopstate(event) {
     this.goTo(window.location.href, event.state);
@@ -130,7 +105,9 @@ var _Frame = class extends import_js_toolkit.Base {
     await Promise.all(this.directChildrenFrameTarget.map((target) => target.leave()));
     this.$emit("after-leave");
     this.$emit("before-content");
-    this.directChildrenFrameTarget.map((target, index) => target.updateContent(newFrame.directChildrenFrameTarget[index]));
+    this.directChildrenFrameTarget.map(
+      (target, index) => target.updateContent(newFrame.directChildrenFrameTarget[index])
+    );
     if (this.$options.history) {
       document.title = doc.title;
       (0, import_utils.historyPush)({ path: parsedUrl.pathname, search: parsedUrl.searchParams });
@@ -155,14 +132,14 @@ var _Frame = class extends import_js_toolkit.Base {
       }
       return cached.content;
     }
-    const promise = fetch(url);
+    const promise = fetch(url).then((response) => response.text());
     try {
       cache.set(url, {
         promise,
         status: "pending",
         content: void 0
       });
-      const content = await promise.then((response) => response.text());
+      const content = await promise;
       cache.set(url, {
         promise,
         status: "resolved",
@@ -193,9 +170,9 @@ __publicField(Frame, "config", {
     "after-enter"
   ],
   components: {
-    FrameAnchor: import_FrameAnchor.default,
-    FrameForm: import_FrameForm.default,
-    FrameTarget: import_FrameTarget.default,
+    FrameAnchor: import_FrameAnchor.FrameAnchor,
+    FrameForm: import_FrameForm.FrameForm,
+    FrameTarget: import_FrameTarget.FrameTarget,
     Frame: _Frame
   },
   options: {
@@ -203,3 +180,4 @@ __publicField(Frame, "config", {
   }
 });
 if (module.exports.default) module.exports = module.exports.default;
+//# sourceMappingURL=Frame.cjs.map

package/organisms/Frame/Frame.cjs.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../packages/ui/organisms/Frame/Frame.ts"],
+  "sourcesContent": ["import { Base, isDirectChild, getDirectChildren } from '@studiometa/js-toolkit';\nimport type { BaseProps, BaseConfig } from '@studiometa/js-toolkit';\nimport { nextFrame, historyPush } from '@studiometa/js-toolkit/utils';\nimport { FrameAnchor } from './FrameAnchor.js';\nimport { FrameForm } from './FrameForm.js';\nimport { FrameTarget } from './FrameTarget.js';\n\n/**\n * Get the scroll position.\n */\nfunction getScrollPosition() {\n  return {\n    left: window.pageXOffset,\n    top: window.pageYOffset,\n  };\n}\n\n/**\n * The fetch cache.\n */\nconst cache: Map<\n  string,\n  { promise: Promise<string>; status: 'pending' | 'resolved' | 'error'; content: string }\n> = new Map();\n\nexport interface FrameProps extends BaseProps {\n  $children: {\n    FrameAnchor: FrameAnchor[];\n    FrameForm: FrameForm[];\n    FrameTarget: FrameTarget[];\n    // eslint-disable-next-line no-use-before-define\n    Frame: Frame[];\n  };\n  $options: {\n    history: boolean;\n  };\n}\n\n/**\n * Class.\n */\nexport class Frame<T extends BaseProps = BaseProps> extends Base<T & FrameProps> {\n  /**\n   * Config.\n   */\n  static config: BaseConfig = {\n    name: 'Frame',\n    emits: [\n      'before-fetch',\n      'after-fetch',\n      'before-leave',\n      'after-leave',\n      'before-content',\n      'after-content',\n      'before-enter',\n      'after-enter',\n    ],\n    components: {\n      FrameAnchor,\n      FrameForm,\n      FrameTarget,\n      Frame,\n    },\n    options: {\n      history: Boolean,\n    },\n  };\n\n  /**\n   * Get uniq id.\n   */\n  get id() {\n    return this.$el.id;\n  }\n\n  /**\n   * Get direct `FrameTarget` children.\n   */\n  get directChildrenFrameTarget(): FrameTarget[] {\n    return getDirectChildren(this, 'Frame', 'FrameTarget');\n  }\n\n  /**\n   * Prevent scroll top on unload.\n   */\n  onWindowUnload() {\n    const { history } = window;\n\n    if (!history.state) {\n      return;\n    }\n\n    history.replaceState(\n      {\n        ...history.state,\n        scroll: getScrollPosition(),\n      },\n      '',\n    );\n  }\n\n  /**\n   * Go to the previous URL on `popstate` event.\n   */\n  onWindowPopstate(event: PopStateEvent) {\n    this.goTo(window.location.href, event.state);\n  }\n\n  /**\n   * Prevent click on `FrameAnchor`.\n   */\n  onFrameAnchorClick(index: number, event: MouseEvent) {\n    // Prevent propagation of nested frames\n    if (!isDirectChild(this, 'Frame', 'FrameAnchor', this.$children.FrameAnchor[index])) {\n      return;\n    }\n\n    this.$log('onAFrameClick', index, event);\n    event.preventDefault();\n    const anchor = this.$children.FrameAnchor[index];\n\n    // Do nothing when clicking links on the same page\n    // @todo handle hash change\n    if (anchor.href === window.location.href) {\n      return;\n    }\n\n    this.goTo(anchor.href);\n  }\n\n  /**\n   * Prevent submit on forms.\n   */\n  onFrameFormSubmit(index:number, event:SubmitEvent) {\n    // Prevent propagation of nested frames\n    if (!isDirectChild(this, 'Frame', 'FrameForm', this.$children.FrameForm[index])) {\n      return;\n    }\n\n    this.$log('onFrameFormFrameSubmit', index, event);\n    event.preventDefault();\n    const form = this.$children.FrameForm[index];\n    const url = new URL(form.action);\n    // @ts-ignore\n    url.search = new URLSearchParams(new FormData(form.$el)).toString();\n    // @todo handle post request\n    this.goTo(url.toString());\n  }\n\n  /**\n   * Parge an HTML string into a DOM object.\n   */\n  parseHTML(string = '') {\n    return new DOMParser().parseFromString(string, 'text/html');\n  }\n\n  /**\n   * Go to the given url.\n   */\n  async goTo(url:string, scroll:{ top: number, left: number } = null) {\n    this.$log('goTo', url);\n    const parsedUrl = new URL(url);\n\n    if (parsedUrl.origin !== window.location.origin) {\n      throw new Error('Cross origin request are not allowed.');\n    }\n\n    this.$emit('before-fetch', url);\n\n    // @todo add option to use content as is or to parse it and extract the new frame\n    const content = await this.fetch(url);\n    const doc = this.parseHTML(content);\n    const el = doc.querySelector(`#${this.id}`);\n    // @todo manage el === null\n    const newFrame = new Frame(el as HTMLElement);\n    newFrame.$children.registerAll();\n\n    this.$emit('after-fetch', url, content);\n\n    this.$emit('before-leave');\n    // Leave all\n    await Promise.all(this.directChildrenFrameTarget.map((target) => target.leave()));\n\n    this.$emit('after-leave');\n    this.$emit('before-content');\n\n    // Update content\n    // @todo insert non existing FrameTarget as well\n    this.directChildrenFrameTarget.map((target, index) =>\n      target.updateContent(newFrame.directChildrenFrameTarget[index]),\n    );\n\n    // Push history\n    if (this.$options.history) {\n      document.title = doc.title;\n      historyPush({ path: parsedUrl.pathname, search: parsedUrl.searchParams });\n    }\n\n    if (scroll) {\n      document.scrollingElement.scrollTop = scroll.top;\n      document.scrollingElement.scrollLeft = scroll.left;\n    }\n\n    // Update components\n    await nextFrame();\n    this.$root.$update();\n    await nextFrame();\n\n    this.$emit('after-content');\n    this.$emit('before-enter');\n\n    // Enter all\n    await Promise.all(this.directChildrenFrameTarget.map((target) => target.enter()));\n\n    this.$emit('after-enter');\n  }\n\n  /**\n   * Fetch the given url.\n   */\n  async fetch(url:string):Promise<string> {\n    const cached = cache.get(url);\n\n    if (cached) {\n      if (cached.status === 'pending') {\n        return cached.promise;\n      }\n\n      return cached.content;\n    }\n\n    const promise = fetch(url).then((response) => response.text());\n\n    try {\n      cache.set(url, {\n        promise,\n        status: 'pending',\n        content: undefined,\n      });\n\n      const content = await promise;\n\n      cache.set(url, {\n        promise,\n        status: 'resolved',\n        content,\n      });\n\n      return content;\n    } catch (err) {\n      cache.set(url, {\n        promise,\n        status: 'error',\n        content: err,\n      });\n\n      return err;\n    }\n  }\n}\n"],
+  "mappings": "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",
+  "names": []
+}

package/organisms/Frame/Frame.d.ts

@@ -1,141 +1,64 @@
-/**
- * @typedef {Object} FrameOptions
- * @property {boolean} history
- * @property {'replace'|'prepend'|'append'} position
- * @property {string} target
- */
-/**
- * @typedef {Frame & {
- *   $children: {
- *     FrameAnchor: FrameAnchor[],
- *     FrameForm: FrameForm[],
- *     FrameTarget: FrameTarget[],
- *     Frame: Frame[],
- *   }
- * }} FrameInterface
- */
+import { Base } from '@studiometa/js-toolkit';
+import type { BaseProps, BaseConfig } from '@studiometa/js-toolkit';
+import { FrameAnchor } from './FrameAnchor.js';
+import { FrameForm } from './FrameForm.js';
+import { FrameTarget } from './FrameTarget.js';
+export interface FrameProps extends BaseProps {
+    $children: {
+        FrameAnchor: FrameAnchor[];
+        FrameForm: FrameForm[];
+        FrameTarget: FrameTarget[];
+        Frame: Frame[];
+    };
+    $options: {
+        history: boolean;
+    };
+}
 /**
  * Class.
  */
-export default class Frame extends Base {
+export declare class Frame<T extends BaseProps = BaseProps> extends Base<T & FrameProps> {
     /**
      * Config.
      */
-    static config: {
-        name: string;
-        emits: string[];
-        components: {
-            FrameAnchor: typeof FrameAnchor;
-            FrameForm: typeof FrameForm;
-            FrameTarget: typeof FrameTarget;
-            Frame: typeof Frame;
-        };
-        options: {
-            history: BooleanConstructor;
-        };
-    };
+    static config: BaseConfig;
     /**
      * Get uniq id.
-     * @returns {string}
      */
     get id(): string;
-    /**
-     * Get direct children.
-     *
-     * @this    {FrameInterface}
-     * @param   {string} name
-     * @returns {any[]}
-     */
-    getDirectChild(this: FrameInterface, name: string): any[];
     /**
      * Get direct `FrameTarget` children.
-     * @returns {FrameTarget[]}
      */
     get directChildrenFrameTarget(): FrameTarget[];
-    /**
-     * Mounted hook.
-     * @returns {void}
-     */
-    mounted(): void;
-    /**
-     * Destroyed hook.
-     * @returns {void}
-     */
-    destroyed(): void;
-    /**
-     * Dispatch events.
-     * @param   {PopStateEvent} event
-     * @returns {void}
-     */
-    handleEvent(event: PopStateEvent): void;
     /**
      * Prevent scroll top on unload.
-     *
-     * @returns {void}
      */
     onWindowUnload(): void;
     /**
      * Go to the previous URL on `popstate` event.
-     *
-     * @param   {PopStateEvent} event
-     * @returns {void}
      */
     onWindowPopstate(event: PopStateEvent): void;
     /**
      * Prevent click on `FrameAnchor`.
-     *
-     * @this    {FrameInterface}
-     * @param   {number} index
-     * @param   {MouseEvent} event
-     * @returns {void}
      */
-    onFrameAnchorClick(this: FrameInterface, index: number, event: MouseEvent): void;
+    onFrameAnchorClick(index: number, event: MouseEvent): void;
     /**
      * Prevent submit on forms.
-     *
-     * @this    {FrameInterface}
-     * @param   {number} index
-     * @param   {SubmitEvent} event
-     * @returns {void}
      */
-    onFrameFormSubmit(this: FrameInterface, index: number, event: SubmitEvent): void;
+    onFrameFormSubmit(index: number, event: SubmitEvent): void;
     /**
      * Parge an HTML string into a DOM object.
-     * @param   {string} string
-     * @returns {Document}
      */
     parseHTML(string?: string): Document;
     /**
      * Go to the given url.
-     * @param   {string} url
-     * @param   {null|{ top: number, left: number }} [scroll]
-     * @returns {Promise<void>}
      */
-    goTo(url: string, scroll?: null | {
+    goTo(url: string, scroll?: {
         top: number;
         left: number;
     }): Promise<void>;
     /**
      * Fetch the given url.
-     * @param   {string} url
-     * @returns {Promise<string>}
      */
     fetch(url: string): Promise<string>;
 }
-export type FrameOptions = {
-    history: boolean;
-    position: 'replace' | 'prepend' | 'append';
-    target: string;
-};
-export type FrameInterface = Frame & {
-    $children: {
-        FrameAnchor: FrameAnchor[];
-        FrameForm: FrameForm[];
-        FrameTarget: FrameTarget[];
-        Frame: Frame[];
-    };
-};
-import { Base } from "@studiometa/js-toolkit";
-import FrameTarget from "./FrameTarget.js";
-import FrameAnchor from "./FrameAnchor.js";
-import FrameForm from "./FrameForm.js";