@studiometa/ui 0.2.6 → 0.2.9

package/organisms/Frame/Frame.js

@@ -1 +1 @@
-import{Base as m}from"@studiometa/js-toolkit";import{nextFrame as c,historyPush as f}from"@studiometa/js-toolkit/utils";import p from"./FrameAnchor.js";import g from"./FrameForm.js";import F from"./FrameTarget.js";function u(){return{left:window.pageXOffset,top:window.pageYOffset}}const s=new Map;class a extends m{static config={name:"Frame",emits:["before-fetch","after-fetch","before-leave","after-leave","before-content","after-content","before-enter","after-enter"],log:!0,components:{FrameAnchor:p,FrameForm:g,FrameTarget:F,Frame:a},options:{history:Boolean}};get id(){return this.$el.id}getDirectChild(e){return this.$children[e]?this.$children.Frame?this.$children[e].filter(t=>this.$children.Frame.every(r=>r.$children[e]?!r.$children[e].includes(t):!0)):this.$children[e]:[]}get directChildFrameAnchor(){return this.getDirectChild("FrameAnchor")}get directChildFrameForm(){return this.getDirectChild("form")}get directChildFrameTarget(){return this.getDirectChild("FrameTarget")}mounted(){this.$options.history&&window.addEventListener("popstate",this)}destroyed(){window.removeEventListener("popstate",this)}handleEvent(e){e.type==="popstate"&&this.onWindowPopstate(e),e.type==="beforeunload"&&this.onWindowUnload()}onWindowUnload(){const{history:e}=window;!e.state||e.replaceState({...e.state,scroll:u()},"")}onWindowPopstate(e){this.goTo(window.location.href,e.state)}onFrameAnchorFrameClick(e,t){if(!this.directChildFrameAnchor.includes(this.$children.FrameAnchor[t]))return;this.$log("onAFrameClick",e,t),e.preventDefault();const r=this.$children.FrameAnchor[t];r.href!==window.location.href&&this.goTo(r.href)}onFrameFormFrameSubmit(e,t){if(!this.directChildFrameForm.includes(this.$children.FrameForm[t]))return;this.$log("onFrameFormFrameSubmit",e),e.preventDefault();const r=this.$children.FrameForm[t];this.goTo(r.action)}parseHTML(e=""){return new DOMParser().parseFromString(e,"text/html")}async goTo(e,t=null){this.$log("goTo",e);const r=new URL(e);if(r.origin!==window.location.origin)throw new Error("Cross origin request are not allowed.");this.$emit("before-fetch",e);const i=await this.fetch(e),n=this.parseHTML(i),l=n.querySelector(`#${this.id}`),h=new a(l);h.$children.registerAll(),this.$emit("after-fetch",e,i),this.$emit("before-leave"),await Promise.all(this.directChildFrameTarget.map(o=>o.leave())),this.$emit("after-leave"),this.$emit("before-content"),this.directChildFrameTarget.map((o,d)=>o.updateContent(h.directChildFrameTarget[d])),this.$options.history&&(document.title=n.title,f({path:r.pathname,search:r.searchParams})),t&&(document.scrollingElement.scrollTop=t.top,document.scrollingElement.scrollLeft=t.left),await c(),this.$root.$update(),await c(),this.$emit("after-content"),this.$emit("before-enter"),await Promise.all(this.directChildFrameTarget.map(o=>o.enter())),this.$emit("after-enter")}async fetch(e){const t=s.get(e);if(t)return t.status==="pending"?t.promise:t.content;const r=fetch(e);try{s.set(e,{promise:r,status:"pending",content:void 0});const i=await r.then(n=>n.text());return s.set(e,{promise:r,status:"resolved",content:i}),i}catch(i){return s.set(e,{promise:r,status:"error",content:i}),i}}}export{a as default};
+import{Base as f,isDirectChild as c,getDirectChildren as p}from"@studiometa/js-toolkit";import{nextFrame as m,historyPush as w}from"@studiometa/js-toolkit/utils";import g from"./FrameAnchor.js";import F from"./FrameForm.js";import u from"./FrameTarget.js";function $(){return{left:window.pageXOffset,top:window.pageYOffset}}const a=new Map;class s extends f{static config={name:"Frame",emits:["before-fetch","after-fetch","before-leave","after-leave","before-content","after-content","before-enter","after-enter"],log:!0,components:{FrameAnchor:g,FrameForm:F,FrameTarget:u,Frame:s},options:{history:Boolean}};get id(){return this.$el.id}getDirectChild(e){return this.$children[e]?this.$children.Frame?this.$children[e].filter(t=>this.$children.Frame.every(r=>r.$children[e]?!r.$children[e].includes(t):!0)):this.$children[e]:[]}get directChildrenFrameTarget(){return p(this,"Frame","FrameTarget")}mounted(){this.$options.history&&window.addEventListener("popstate",this)}destroyed(){window.removeEventListener("popstate",this)}handleEvent(e){e.type==="popstate"&&this.onWindowPopstate(e),e.type==="beforeunload"&&this.onWindowUnload()}onWindowUnload(){const{history:e}=window;!e.state||e.replaceState({...e.state,scroll:$()},"")}onWindowPopstate(e){this.goTo(window.location.href,e.state)}onFrameAnchorClick(e,t){if(!c(this,"Frame","FrameAnchor",this.$children.FrameAnchor[t]))return;this.$log("onAFrameClick",e,t),e.preventDefault();const r=this.$children.FrameAnchor[t];r.href!==window.location.href&&this.goTo(r.href)}onFrameFormSubmit(e,t){if(!c(this,"Frame","FrameForm",this.$children.FrameForm[t]))return;this.$log("onFrameFormFrameSubmit",e),e.preventDefault();const r=this.$children.FrameForm[t],i=new URL(r.action);i.search=new URLSearchParams(new FormData(r.$el)).toString(),this.goTo(i.toString())}parseHTML(e=""){return new DOMParser().parseFromString(e,"text/html")}async goTo(e,t=null){this.$log("goTo",e);const r=new URL(e);if(r.origin!==window.location.origin)throw new Error("Cross origin request are not allowed.");this.$emit("before-fetch",e);const i=await this.fetch(e),n=this.parseHTML(i),l=n.querySelector(`#${this.id}`),h=new s(l);h.$children.registerAll(),this.$emit("after-fetch",e,i),this.$emit("before-leave"),await Promise.all(this.directChildrenFrameTarget.map(o=>o.leave())),this.$emit("after-leave"),this.$emit("before-content"),this.directChildrenFrameTarget.map((o,d)=>o.updateContent(h.directChildrenFrameTarget[d])),this.$options.history&&(document.title=n.title,w({path:r.pathname,search:r.searchParams})),t&&(document.scrollingElement.scrollTop=t.top,document.scrollingElement.scrollLeft=t.left),await m(),this.$root.$update(),await m(),this.$emit("after-content"),this.$emit("before-enter"),await Promise.all(this.directChildrenFrameTarget.map(o=>o.enter())),this.$emit("after-enter")}async fetch(e){const t=a.get(e);if(t)return t.status==="pending"?t.promise:t.content;const r=fetch(e);try{a.set(e,{promise:r,status:"pending",content:void 0});const i=await r.then(n=>n.text());return a.set(e,{promise:r,status:"resolved",content:i}),i}catch(i){return a.set(e,{promise:r,status:"error",content:i}),i}}}export{s as default};

package/organisms/Frame/FrameAnchor.cjs

@@ -32,12 +32,8 @@ var FrameAnchor = class extends import_js_toolkit.Base {
   get href() {
     return this.$el.href;
   }
-  onClick(event) {
-    this.$emit("frame-click", event);
-  }
 };
 __publicField(FrameAnchor, "config", {
-  name: "FrameAnchor",
-  emits: ["frame-click"]
+  name: "FrameAnchor"
 });
 if (module.exports.default) module.exports = module.exports.default;

package/organisms/Frame/FrameAnchor.d.ts

@@ -12,7 +12,6 @@ export default class FrameAnchor extends Base {
      */
     static config: {
         name: string;
-        emits: string[];
     };
     /**
      * Get the URL.
@@ -21,13 +20,6 @@ export default class FrameAnchor extends Base {
      * @returns {string}
      */
     get href(): string;
-    /**
-     * Dispatch the link click event.
-     *
-     * @param   {MouseEvent} event
-     * @returns {void}
-     */
-    onClick(event: MouseEvent): void;
 }
 export type FrameAnchorInterface = FrameAnchor & {
     $el: HTMLAnchorElement;

package/organisms/Frame/FrameAnchor.js

@@ -1 +1 @@
-import{Base as r}from"@studiometa/js-toolkit";class t extends r{static config={name:"FrameAnchor",emits:["frame-click"]};get href(){return this.$el.href}onClick(e){this.$emit("frame-click",e)}}export{t as default};
+import{Base as e}from"@studiometa/js-toolkit";class r extends e{static config={name:"FrameAnchor"};get href(){return this.$el.href}}export{r as default};

package/organisms/Frame/FrameForm.cjs

@@ -32,12 +32,8 @@ var FrameForm = class extends import_js_toolkit.Base {
   get action() {
     return this.$el.action;
   }
-  onSubmit(event) {
-    this.$emit("frame-submit", event);
-  }
 };
 __publicField(FrameForm, "config", {
-  name: "FrameForm",
-  emits: ["frame-submit"]
+  name: "FrameForm"
 });
 if (module.exports.default) module.exports = module.exports.default;

package/organisms/Frame/FrameForm.d.ts

@@ -9,7 +9,6 @@
 export default class FrameForm extends Base {
     static config: {
         name: string;
-        emits: string[];
     };
     /**
      * Get the form action.
@@ -18,13 +17,6 @@ export default class FrameForm extends Base {
      * @returns {string}
      */
     get action(): string;
-    /**
-     * Dispatch the form `submit` event.
-     *
-     * @param   {SubmitEvent} event
-     * @returns {void}
-     */
-    onSubmit(event: SubmitEvent): void;
 }
 export type FrameFormInterface = FrameForm & {
     $el: HTMLFormElement;

package/organisms/Frame/FrameForm.js

@@ -1 +1 @@
-import{Base as e}from"@studiometa/js-toolkit";class m extends e{static config={name:"FrameForm",emits:["frame-submit"]};get action(){return this.$el.action}onSubmit(t){this.$emit("frame-submit",t)}}export{m as default};
+import{Base as e}from"@studiometa/js-toolkit";class t extends e{static config={name:"FrameForm"};get action(){return this.$el.action}}export{t as default};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@studiometa/ui",
-  "version": "0.2.6",
+  "version": "0.2.9",
   "description": "A set of opiniated, unstyled and accessible components",
   "publishConfig": {
     "access": "public"
@@ -29,7 +29,7 @@
   },
   "homepage": "https://github.com/studiometa/ui#readme",
   "dependencies": {
-    "@studiometa/js-toolkit": "^2.0.0",
+    "@studiometa/js-toolkit": "^2.4.1",
     "deepmerge": "^4.2.2"
   }
 }