@studiometa/ui 0.2.4 → 0.2.7

package/organisms/Frame/Frame.js

@@ -1 +1 @@
-import{Base as l}from"@studiometa/js-toolkit";import{nextFrame as c,historyPush as d}from"@studiometa/js-toolkit/utils";import f from"./FrameAnchor.js";import F from"./FrameForm.js";import g from"./FrameTarget.js";const n=new Map;class a extends l{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:f,FrameForm:F,FrameTarget:g,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")}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){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 r=await this.fetch(e),i=this.parseHTML(r),h=i.querySelector(`#${this.id}`),s=new a(h);s.$children.registerAll(),this.$emit("after-fetch",e,r),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,m)=>o.updateContent(s.directChildFrameTarget[m])),this.$options.history&&(document.title=i.title,d({path:t.pathname,search:t.searchParams})),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=n.get(e);if(t)return t.status==="pending"?t.promise:t.content;const r=fetch(e);try{n.set(e,{promise:r,status:"pending",content:void 0});const i=await r.then(h=>h.text());return n.set(e,{promise:r,status:"resolved",content:i}),i}catch(i){return n.set(e,{promise:r,status:"error",content:i}),i}}}export{a as default};
+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};

package/organisms/Frame/FrameTarget.cjs

@@ -40,19 +40,19 @@ var _FrameTarget = class extends import_primitives.Transition {
   }
   async enter() {
     this.$log("enter");
-    const { enterFrom: from, enterActive: active, enterTo: to, leaveTo } = this.$options;
+    const { enterFrom: from, enterActive: active, enterTo: to, leaveTo, enterKeep } = this.$options;
     const transitionStyles = { from, active, to };
     switch (this.$options.mode) {
       case "append":
       case "prepend":
         await Promise.all(Array.from(this.$el.children).filter((child) => from.split(" ").every((className) => child.classList.contains(className))).map((child) => {
-          return (0, import_utils.transition)(child, transitionStyles);
+          return (0, import_utils.transition)(child, transitionStyles, enterKeep && "keep");
         }));
         break;
       case "replace":
       default:
         transitionStyles.from = Array.from(new Set([from, leaveTo].flat())).join(" ");
-        await (0, import_utils.transition)(this.$el, transitionStyles);
+        await (0, import_utils.transition)(this.$el, transitionStyles, enterKeep && "keep");
     }
   }
   updateContent(newTarget) {

package/organisms/Frame/FrameTarget.js

@@ -1 +1 @@
-import{transition as s}from"@studiometa/js-toolkit/utils";import{Transition as r}from"../../primitives/index.js";class o extends r{static config={...r.config,name:"FrameTarget",log:!0,options:{...r.config.options,mode:{type:String,default:"replace"},id:String}};static __INSERT_MODES={prepend:"afterbegin",append:"beforeend"};get $options(){const e=super.$options;return e.leaveKeep=!0,e}get id(){return this.$options.id??this.$el.id}async enter(){this.$log("enter");const{enterFrom:e,enterActive:t,enterTo:a,leaveTo:p}=this.$options,i={from:e,active:t,to:a};switch(this.$options.mode){case"append":case"prepend":await Promise.all(Array.from(this.$el.children).filter(n=>e.split(" ").every(l=>n.classList.contains(l))).map(n=>s(n,i)));break;case"replace":default:i.from=Array.from(new Set([e,p].flat())).join(" "),await s(this.$el,i)}}updateContent(e){switch(this.$options.mode){case"prepend":case"append":Array.from(e.$el.children).forEach(t=>{t.classList.add(...this.$options.enterFrom.split(" "))}),this.$el.insertAdjacentHTML(o.__INSERT_MODES[this.$options.mode],e.$el.innerHTML);break;case"replace":default:this.$el.innerHTML=e.$el.innerHTML;break}}}export{o as default};
+import{transition as a}from"@studiometa/js-toolkit/utils";import{Transition as r}from"../../primitives/index.js";class o extends r{static config={...r.config,name:"FrameTarget",log:!0,options:{...r.config.options,mode:{type:String,default:"replace"},id:String}};static __INSERT_MODES={prepend:"afterbegin",append:"beforeend"};get $options(){const e=super.$options;return e.leaveKeep=!0,e}get id(){return this.$options.id??this.$el.id}async enter(){this.$log("enter");const{enterFrom:e,enterActive:t,enterTo:p,leaveTo:l,enterKeep:s}=this.$options,i={from:e,active:t,to:p};switch(this.$options.mode){case"append":case"prepend":await Promise.all(Array.from(this.$el.children).filter(n=>e.split(" ").every(c=>n.classList.contains(c))).map(n=>a(n,i,s&&"keep")));break;case"replace":default:i.from=Array.from(new Set([e,l].flat())).join(" "),await a(this.$el,i,s&&"keep")}}updateContent(e){switch(this.$options.mode){case"prepend":case"append":Array.from(e.$el.children).forEach(t=>{t.classList.add(...this.$options.enterFrom.split(" "))}),this.$el.insertAdjacentHTML(o.__INSERT_MODES[this.$options.mode],e.$el.innerHTML);break;case"replace":default:this.$el.innerHTML=e.$el.innerHTML;break}}}export{o as default};

package/organisms/ImageGrid/ImageGrid.twig

@@ -0,0 +1,42 @@
+{#
+/**
+ * @file
+ *   Image Grid.
+ *
+ * @param array<Figure> $images
+ *   List of images to display. See Figure.twig for the composition of each image.
+ * @param array $attr
+ *   Custom attributes for the root element.
+ * @param array $inner_attr
+ *   Custom attributes for the inner element.
+ * @param array $image_attr
+ *   Custom attributes for the images' elements.
+ */
+#}
+
+{% set attributes = merge_html_attributes(attr ?? null, { class: 'image-grid' }) %}
+{% set inner_attributes =
+  merge_html_attributes(inner_attr ?? null, { class: 'image-grid__inner s:grid grid-cols-12 gap-10' })
+%}
+
+<div {{ html_attributes(attributes) }}>
+  <div {{ html_attributes(inner_attributes) }}>
+    {% for image in images %}
+      {% set modulo = loop.index % 5 %}
+      {% set image_attributes = merge_html_attributes(image_attr ?? null, {
+        class: 'image-grid__img'
+      }, {
+        class: {
+          's:col-span-7': modulo == 1 or modulo == 4,
+          's:col-span-5 mt-10': modulo == 2,
+          's:col-span-5 mt-10 clear-m-left': modulo == 3 and not loop.last,
+          's:col-start-2 s:col-end-11': modulo == 0 or (modulo in [0,3] and loop.last),
+          's:col-start-2 s:col-end-13': loop.first and loop.last
+        }
+      }) %}
+      <div {{ html_attributes(image_attributes) }}>
+        {% include '@ui/atoms/Figure/Figure.twig' with image only %}
+      </div>
+    {% endfor %}
+  </div>
+</div>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@studiometa/ui",
-  "version": "0.2.4",
+  "version": "0.2.7",
   "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-rc.2",
+    "@studiometa/js-toolkit": "^2.0.0",
     "deepmerge": "^4.2.2"
   }
 }