@studiometa/ui 0.2.1 → 0.2.4

package/molecules/Tabs/Tabs.cjs

@@ -3,54 +3,30 @@ var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
 var __getOwnPropNames = Object.getOwnPropertyNames;
 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 __markAsModule = (target) => __defProp(target, "__esModule", { value: true });
 var __export = (target, all) => {
   for (var name in all)
     __defProp(target, name, { get: all[name], enumerable: true });
 };
-var __reExport = (target, module2, copyDefault, desc) => {
-  if (module2 && typeof module2 === "object" || typeof module2 === "function") {
-    for (let key of __getOwnPropNames(module2))
-      if (!__hasOwnProp.call(target, key) && (copyDefault || key !== "default"))
-        __defProp(target, key, { get: () => module2[key], enumerable: !(desc = __getOwnPropDesc(module2, key)) || desc.enumerable });
+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 target;
+  return to;
 };
-var __toCommonJS = /* @__PURE__ */ ((cache) => {
-  return (module2, temp) => {
-    return cache && cache.get(module2) || (temp = __reExport(__markAsModule({}), module2, 1), cache && cache.set(module2, temp), temp);
-  };
-})(typeof WeakMap !== "undefined" ? /* @__PURE__ */ new WeakMap() : 0);
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
 var __publicField = (obj, key, value) => {
   __defNormalProp(obj, typeof key !== "symbol" ? key + "" : key, value);
   return value;
 };
-var __async = (__this, __arguments, generator) => {
-  return new Promise((resolve, reject) => {
-    var fulfilled = (value) => {
-      try {
-        step(generator.next(value));
-      } catch (e) {
-        reject(e);
-      }
-    };
-    var rejected = (value) => {
-      try {
-        step(generator.throw(value));
-      } catch (e) {
-        reject(e);
-      }
-    };
-    var step = (x) => x.done ? resolve(x.value) : Promise.resolve(x.value).then(fulfilled, rejected);
-    step((generator = generator.apply(__this, __arguments)).next());
-  });
-};
 
 // packages/ui/molecules/Tabs/Tabs.js
 var Tabs_exports = {};
 __export(Tabs_exports, {
   default: () => 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 {
@@ -77,55 +53,51 @@ var Tabs = class extends import_js_toolkit.Base {
     });
     this.enableItem(this.items[index]);
   }
-  enableItem(item) {
-    return __async(this, null, function* () {
-      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([
-        (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 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([
+      (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));
   }
-  disableItem(item) {
-    return __async(this, null, function* () {
-      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([
-        (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));
-    });
+  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([
+      (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));
   }
 };
 __publicField(Tabs, "config", {
@@ -144,9 +116,9 @@ __publicField(Tabs, "config", {
             visibility: "hidden"
           }
         }
-      })
+      }),
+      merge: true
     }
   }
 });
-module.exports = __toCommonJS(Tabs_exports);
 if (module.exports.default) module.exports = module.exports.default;

package/molecules/Tabs/Tabs.d.ts

@@ -13,8 +13,7 @@
  * @property {HTMLElement[]} content
  */
 /**
- * @typedef {import('@studiometa/js-toolkit/utils/css/styles.js').CssStyleObject} CssStyleObject
- * @typedef {Partial<Record<'open'|'active'|'closed', string|CssStyleObject>>} TabsStates
+ * @typedef {Partial<Record<'open'|'active'|'closed', string|Partial<CSSStyleDeclaration>>>} TabsStates
  * @typedef {Partial<Record<keyof TabsRefs, TabsStates>>} TabsStylesOption
  */
 /**
@@ -48,6 +47,7 @@ export default class Tabs extends Base {
                  * @return {TabsStylesOption}
                  */
                 default: () => TabsStylesOption;
+                merge: boolean;
             };
         };
     };
@@ -56,7 +56,7 @@ export default class Tabs extends Base {
      * @this {TabsInterface}
      * @return {void}
      */
-    mounted(): void;
+    mounted(this: TabsInterface): void;
     items: any;
     /**
      * Switch tab on button click.
@@ -66,7 +66,7 @@ export default class Tabs extends Base {
      * @param  {number} index The index of the clicked button.
      * @return {void}
      */
-    onBtnClick(event: Event, index: number): void;
+    onBtnClick(this: TabsInterface, event: Event, index: number): void;
     /**
      * Enable the given tab and its associated content.
      *
@@ -74,7 +74,7 @@ export default class Tabs extends Base {
      * @param  {TabItem}                item The item to enable.
      * @return {Promise<TabsInterface>}      Tabs instance.
      */
-    enableItem(item: TabItem): Promise<TabsInterface>;
+    enableItem(this: TabsInterface, item: TabItem): Promise<TabsInterface>;
     /**
      * Disable the given tab and its associated content.
      *
@@ -82,7 +82,7 @@ export default class Tabs extends Base {
      * @param  {TabItem}                item The item to disable.
      * @return {Promise<TabsInterface>}      The Tabs instance.
      */
-    disableItem(item: TabItem): Promise<TabsInterface>;
+    disableItem(this: TabsInterface, item: TabItem): Promise<TabsInterface>;
 }
 export type BaseOptions = import('@studiometa/js-toolkit/Base').BaseOptions;
 export type TabItem = {
@@ -94,8 +94,7 @@ export type TabsRefs = {
     btn: HTMLElement[];
     content: HTMLElement[];
 };
-export type CssStyleObject = import('@studiometa/js-toolkit/utils/css/styles.js').CssStyleObject;
-export type TabsStates = Partial<Record<'open' | 'active' | 'closed', string | CssStyleObject>>;
+export type TabsStates = Partial<Record<'open' | 'active' | 'closed', string | Partial<CSSStyleDeclaration>>>;
 export type TabsStylesOption = Partial<Record<keyof TabsRefs, TabsStates>>;
 export type TabsOptions = {
     styles: TabsStylesOption;

package/molecules/Tabs/Tabs.js

@@ -1,126 +1 @@
-var __defProp = Object.defineProperty;
-var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
-var __publicField = (obj, key, value) => {
-  __defNormalProp(obj, typeof key !== "symbol" ? key + "" : key, value);
-  return value;
-};
-var __async = (__this, __arguments, generator) => {
-  return new Promise((resolve, reject) => {
-    var fulfilled = (value) => {
-      try {
-        step(generator.next(value));
-      } catch (e) {
-        reject(e);
-      }
-    };
-    var rejected = (value) => {
-      try {
-        step(generator.throw(value));
-      } catch (e) {
-        reject(e);
-      }
-    };
-    var step = (x) => x.done ? resolve(x.value) : Promise.resolve(x.value).then(fulfilled, rejected);
-    step((generator = generator.apply(__this, __arguments)).next());
-  });
-};
-import { Base } from "@studiometa/js-toolkit";
-import { transition } from "@studiometa/js-toolkit/utils";
-class Tabs extends Base {
-  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]);
-  }
-  enableItem(item) {
-    return __async(this, null, function* () {
-      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));
-    });
-  }
-  disableItem(item) {
-    return __async(this, null, function* () {
-      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));
-    });
-  }
-}
-__publicField(Tabs, "config", {
-  name: "Tabs",
-  refs: ["btn[]", "content[]"],
-  emits: ["enable", "disable"],
-  options: {
-    styles: {
-      type: Object,
-      default: () => ({
-        content: {
-          closed: {
-            position: "absolute",
-            opacity: "0",
-            pointerEvents: "none",
-            visibility: "hidden"
-          }
-        }
-      })
-    }
-  }
-});
-export {
-  Tabs as default
-};
+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};

package/molecules/index.cjs

@@ -4,27 +4,21 @@ var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
 var __getOwnPropNames = Object.getOwnPropertyNames;
 var __getProtoOf = Object.getPrototypeOf;
 var __hasOwnProp = Object.prototype.hasOwnProperty;
-var __markAsModule = (target) => __defProp(target, "__esModule", { value: true });
 var __export = (target, all) => {
   for (var name in all)
     __defProp(target, name, { get: all[name], enumerable: true });
 };
-var __reExport = (target, module2, copyDefault, desc) => {
-  if (module2 && typeof module2 === "object" || typeof module2 === "function") {
-    for (let key of __getOwnPropNames(module2))
-      if (!__hasOwnProp.call(target, key) && (copyDefault || key !== "default"))
-        __defProp(target, key, { get: () => module2[key], enumerable: !(desc = __getOwnPropDesc(module2, key)) || desc.enumerable });
+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 target;
+  return to;
 };
-var __toESM = (module2, isNodeMode) => {
-  return __reExport(__markAsModule(__defProp(module2 != null ? __create(__getProtoOf(module2)) : {}, "default", !isNodeMode && module2 && module2.__esModule ? { get: () => module2.default, enumerable: true } : { value: module2, enumerable: true })), module2);
-};
-var __toCommonJS = /* @__PURE__ */ ((cache) => {
-  return (module2, temp) => {
-    return cache && cache.get(module2) || (temp = __reExport(__markAsModule({}), module2, 1), cache && cache.set(module2, temp), temp);
-  };
-})(typeof WeakMap !== "undefined" ? /* @__PURE__ */ new WeakMap() : 0);
+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
 var molecules_exports = {};
@@ -32,13 +26,20 @@ __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("./Menu/index.cjs"), module.exports);
+__reExport(molecules_exports, require("./Slider/index.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_Tabs = __toESM(require("./Tabs/Tabs.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);
-module.exports = __toCommonJS(molecules_exports);
+var import_Tabs = __toESM(require("./Tabs/Tabs.cjs"), 1);
 if (module.exports.default) module.exports = module.exports.default;

package/molecules/index.d.ts

@@ -1,5 +1,10 @@
+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 Tabs } from "./Tabs/Tabs.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";

package/molecules/index.js

@@ -1,12 +1 @@
-import { default as default2 } from "./Accordion/Accordion.js";
-import { default as default3 } from "./Accordion/AccordionItem.js";
-import { default as default4 } from "./Modal/Modal.js";
-import { default as default5 } from "./Tabs/Tabs.js";
-import { default as default6 } from "./Sticky/Sticky.js";
-export {
-  default2 as Accordion,
-  default3 as AccordionItem,
-  default4 as Modal,
-  default6 as Sticky,
-  default5 as Tabs
-};
+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};

package/organisms/Frame/Frame.cjs

@@ -0,0 +1,171 @@
+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) => {
+  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))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  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
+var Frame_exports = {};
+__export(Frame_exports, {
+  default: () => 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 cache = /* @__PURE__ */ new Map();
+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 directChildFrameAnchor() {
+    return this.getDirectChild("FrameAnchor");
+  }
+  get directChildFrameForm() {
+    return this.getDirectChild("form");
+  }
+  get directChildFrameTarget() {
+    return this.getDirectChild("FrameTarget");
+  }
+  onFrameAnchorFrameClick(event, index) {
+    if (!this.directChildFrameAnchor.includes(this.$children.FrameAnchor[index])) {
+      return;
+    }
+    this.$log("onAFrameClick", event, index);
+    event.preventDefault();
+    const anchor = this.$children.FrameAnchor[index];
+    if (anchor.href === window.location.href) {
+      return;
+    }
+    this.goTo(anchor.href);
+  }
+  onFrameFormFrameSubmit(event, index) {
+    if (!this.directChildFrameForm.includes(this.$children.FrameForm[index])) {
+      return;
+    }
+    this.$log("onFrameFormFrameSubmit", event);
+    event.preventDefault();
+    const form = this.$children.FrameForm[index];
+    this.goTo(form.action);
+  }
+  parseHTML(string = "") {
+    return new DOMParser().parseFromString(string, "text/html");
+  }
+  async goTo(url) {
+    this.$log("goTo", url);
+    const parsedUrl = new URL(url);
+    if (parsedUrl.origin !== window.location.origin) {
+      throw new Error("Cross origin request are not allowed.");
+    }
+    this.$emit("before-fetch", url);
+    const content = await this.fetch(url);
+    const doc = this.parseHTML(content);
+    const el = doc.querySelector(`#${this.id}`);
+    const newFrame = new _Frame(el);
+    newFrame.$children.registerAll();
+    this.$emit("after-fetch", url, content);
+    this.$emit("before-leave");
+    await Promise.all(this.directChildFrameTarget.map((target) => target.leave()));
+    this.$emit("after-leave");
+    this.$emit("before-content");
+    this.directChildFrameTarget.map((target, index) => target.updateContent(newFrame.directChildFrameTarget[index]));
+    if (this.$options.history) {
+      document.title = doc.title;
+      (0, import_utils.historyPush)({ path: parsedUrl.pathname, search: parsedUrl.searchParams });
+    }
+    await (0, import_utils.nextFrame)();
+    this.$root.$update();
+    await (0, import_utils.nextFrame)();
+    this.$emit("after-content");
+    this.$emit("before-enter");
+    await Promise.all(this.directChildFrameTarget.map((target) => target.enter()));
+    this.$emit("after-enter");
+  }
+  async fetch(url) {
+    const cached = cache.get(url);
+    if (cached) {
+      if (cached.status === "pending") {
+        return cached.promise;
+      }
+      return cached.content;
+    }
+    const promise = fetch(url);
+    try {
+      cache.set(url, {
+        promise,
+        status: "pending",
+        content: void 0
+      });
+      const content = await promise.then((response) => response.text());
+      cache.set(url, {
+        promise,
+        status: "resolved",
+        content
+      });
+      return content;
+    } catch (err) {
+      cache.set(url, {
+        promise,
+        status: "error",
+        content: err
+      });
+      return err;
+    }
+  }
+};
+var Frame = _Frame;
+__publicField(Frame, "config", {
+  name: "Frame",
+  emits: [
+    "before-fetch",
+    "after-fetch",
+    "before-leave",
+    "after-leave",
+    "before-content",
+    "after-content",
+    "before-enter",
+    "after-enter"
+  ],
+  log: true,
+  components: {
+    FrameAnchor: import_FrameAnchor.default,
+    FrameForm: import_FrameForm.default,
+    FrameTarget: import_FrameTarget.default,
+    Frame: _Frame
+  },
+  options: {
+    history: Boolean
+  }
+});
+if (module.exports.default) module.exports = module.exports.default;