@studiometa/ui 0.2.9 → 0.2.10

package/molecules/Menu/MenuList.cjs

@@ -96,7 +96,6 @@ var _MenuList = class extends import_Transition.default {
     this.$emit("items-close");
   }
   toggle() {
-    console.log(this.$id, "toggle", this.isOpen);
     if (this.isOpen) {
       this.close();
     } else {

package/molecules/Menu/MenuList.js

@@ -1 +1 @@
-import n from"../../primitives/Transition/Transition.js";const o=["a[href]:not([inert])","area[href]:not([inert])","input:not([disabled]):not([inert])","select:not([disabled]):not([inert])","textarea:not([disabled]):not([inert])","button:not([disabled]):not([inert])","iframe:not([inert])","audio:not([inert])","video:not([inert])","[contenteditable]:not([inert])","[tabindex]:not([inert])"].join(",");class s extends n{static config={...n.config,name:"MenuList",emits:["items-open","items-close","items-mouseleave"],components:{MenuList:s}};isOpen=!1;isHover=!1;get $options(){const e=super.$options;return e.leaveKeep=!0,e.enterKeep=!0,e}mounted(){this.__updateTabIndexes("close")}onMouseenter(){this.isHover=!0}onMouseleave(){this.isHover=!1}open(){if(this.isOpen)return;const e=t=>{this.$el.contains(t.target)||(document.removeEventListener("click",e),this.close())};document.addEventListener("click",e),this.__updateTabIndexes("open"),this.$el.setAttribute("aria-hidden","false"),this.isOpen=!0,this.enter(),this.$emit("items-open")}close(){!this.isOpen||(this.$children.MenuList.forEach(e=>{e.close()}),document.activeElement instanceof HTMLElement&&this.$el.contains(document.activeElement)&&document.activeElement.blur(),this.$el.setAttribute("aria-hidden","true"),this.__updateTabIndexes("close"),this.isOpen=!1,this.leave(),this.$emit("items-close"))}toggle(){console.log(this.$id,"toggle",this.isOpen),this.isOpen?this.close():this.open()}__updateTabIndexes(e="open"){Array.from(this.$el.querySelectorAll(o)).filter(i=>this.__filterFocusableItems(i)).forEach(i=>{e==="close"?i.setAttribute("tabindex","-1"):i.removeAttribute("tabindex")})}__filterFocusableItems(e){let t=e.parentElement;for(;t&&(!t.__base__||!t.__base__.has(this.constructor));)t=t.parentElement;return t===null||t===this.$el}}export{s as default};
+import s from"../../primitives/Transition/Transition.js";const o=["a[href]:not([inert])","area[href]:not([inert])","input:not([disabled]):not([inert])","select:not([disabled]):not([inert])","textarea:not([disabled]):not([inert])","button:not([disabled]):not([inert])","iframe:not([inert])","audio:not([inert])","video:not([inert])","[contenteditable]:not([inert])","[tabindex]:not([inert])"].join(",");class n extends s{static config={...s.config,name:"MenuList",emits:["items-open","items-close","items-mouseleave"],components:{MenuList:n}};isOpen=!1;isHover=!1;get $options(){const e=super.$options;return e.leaveKeep=!0,e.enterKeep=!0,e}mounted(){this.__updateTabIndexes("close")}onMouseenter(){this.isHover=!0}onMouseleave(){this.isHover=!1}open(){if(this.isOpen)return;const e=t=>{this.$el.contains(t.target)||(document.removeEventListener("click",e),this.close())};document.addEventListener("click",e),this.__updateTabIndexes("open"),this.$el.setAttribute("aria-hidden","false"),this.isOpen=!0,this.enter(),this.$emit("items-open")}close(){!this.isOpen||(this.$children.MenuList.forEach(e=>{e.close()}),document.activeElement instanceof HTMLElement&&this.$el.contains(document.activeElement)&&document.activeElement.blur(),this.$el.setAttribute("aria-hidden","true"),this.__updateTabIndexes("close"),this.isOpen=!1,this.leave(),this.$emit("items-close"))}toggle(){this.isOpen?this.close():this.open()}__updateTabIndexes(e="open"){Array.from(this.$el.querySelectorAll(o)).filter(i=>this.__filterFocusableItems(i)).forEach(i=>{e==="close"?i.setAttribute("tabindex","-1"):i.removeAttribute("tabindex")})}__filterFocusableItems(e){let t=e.parentElement;for(;t&&(!t.__base__||!t.__base__.has(this.constructor));)t=t.parentElement;return t===null||t===this.$el}}export{n as default};

package/organisms/Frame/Frame.cjs

@@ -87,11 +87,11 @@ var _Frame = class extends import_js_toolkit.Base {
   onWindowPopstate(event) {
     this.goTo(window.location.href, event.state);
   }
-  onFrameAnchorClick(event, index) {
+  onFrameAnchorClick(index, event) {
     if (!(0, import_js_toolkit.isDirectChild)(this, "Frame", "FrameAnchor", this.$children.FrameAnchor[index])) {
       return;
     }
-    this.$log("onAFrameClick", event, index);
+    this.$log("onAFrameClick", index, event);
     event.preventDefault();
     const anchor = this.$children.FrameAnchor[index];
     if (anchor.href === window.location.href) {
@@ -99,11 +99,11 @@ var _Frame = class extends import_js_toolkit.Base {
     }
     this.goTo(anchor.href);
   }
-  onFrameFormSubmit(event, index) {
+  onFrameFormSubmit(index, event) {
     if (!(0, import_js_toolkit.isDirectChild)(this, "Frame", "FrameForm", this.$children.FrameForm[index])) {
       return;
     }
-    this.$log("onFrameFormFrameSubmit", event);
+    this.$log("onFrameFormFrameSubmit", index, event);
     event.preventDefault();
     const form = this.$children.FrameForm[index];
     const url = new URL(form.action);
@@ -192,7 +192,6 @@ __publicField(Frame, "config", {
     "before-enter",
     "after-enter"
   ],
-  log: true,
   components: {
     FrameAnchor: import_FrameAnchor.default,
     FrameForm: import_FrameForm.default,

package/organisms/Frame/Frame.d.ts

@@ -24,7 +24,6 @@ export default class Frame extends Base {
     static config: {
         name: string;
         emits: string[];
-        log: boolean;
         components: {
             FrameAnchor: typeof FrameAnchor;
             FrameForm: typeof FrameForm;
@@ -86,20 +85,20 @@ export default class Frame extends Base {
      * Prevent click on `FrameAnchor`.
      *
      * @this    {FrameInterface}
-     * @param   {MouseEvent} event
      * @param   {number} index
+     * @param   {MouseEvent} event
      * @returns {void}
      */
-    onFrameAnchorClick(this: FrameInterface, event: MouseEvent, index: number): void;
+    onFrameAnchorClick(this: FrameInterface, index: number, event: MouseEvent): void;
     /**
      * Prevent submit on forms.
      *
      * @this    {FrameInterface}
-     * @param   {SubmitEvent} event
      * @param   {number} index
+     * @param   {SubmitEvent} event
      * @returns {void}
      */
-    onFrameFormSubmit(this: FrameInterface, event: SubmitEvent, index: number): void;
+    onFrameFormSubmit(this: FrameInterface, index: number, event: SubmitEvent): void;
     /**
      * Parge an HTML string into a DOM object.
      * @param   {string} string

package/organisms/Frame/Frame.js

@@ -1 +1 @@
-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};
+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"],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(r=>this.$children.Frame.every(t=>t.$children[e]?!t.$children[e].includes(r):!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,r){if(!c(this,"Frame","FrameAnchor",this.$children.FrameAnchor[e]))return;this.$log("onAFrameClick",e,r),r.preventDefault();const t=this.$children.FrameAnchor[e];t.href!==window.location.href&&this.goTo(t.href)}onFrameFormSubmit(e,r){if(!c(this,"Frame","FrameForm",this.$children.FrameForm[e]))return;this.$log("onFrameFormFrameSubmit",e,r),r.preventDefault();const t=this.$children.FrameForm[e],i=new URL(t.action);i.search=new URLSearchParams(new FormData(t.$el)).toString(),this.goTo(i.toString())}parseHTML(e=""){return new DOMParser().parseFromString(e,"text/html")}async goTo(e,r=null){this.$log("goTo",e);const t=new URL(e);if(t.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:t.pathname,search:t.searchParams})),r&&(document.scrollingElement.scrollTop=r.top,document.scrollingElement.scrollLeft=r.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 r=a.get(e);if(r)return r.status==="pending"?r.promise:r.content;const t=fetch(e);try{a.set(e,{promise:t,status:"pending",content:void 0});const i=await t.then(n=>n.text());return a.set(e,{promise:t,status:"resolved",content:i}),i}catch(i){return a.set(e,{promise:t,status:"error",content:i}),i}}}export{s as default};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@studiometa/ui",
-  "version": "0.2.9",
+  "version": "0.2.10",
   "description": "A set of opiniated, unstyled and accessible components",
   "publishConfig": {
     "access": "public"