@studiometa/ui 0.2.5 → 0.2.6

package/atoms/Button/Button.twig

@@ -0,0 +1,68 @@
+{#
+/**
+ * @file
+ * Button component.
+ *
+ * @param string $label
+ * @param string $tag
+ * @param string $href
+ * @param array $attr
+ * @param string $icon
+ * @param array|string $icon_classes
+ * @param 'start'|'end' $icon_position
+ * @param boolean $icon_only
+ */
+#}
+
+{# Customizable tag with a default value. #}
+{% set tag =
+  tag|default(href is defined or (attr is defined and attr.href is defined) ? 'a' : 'button')
+%}
+
+{# Default icon values #}
+{% set icon_position = icon_position|default('start') %}
+{% set icon_only = icon_only|default(false) %}
+
+{# Final attributes are a merge of the defaults, the given and then the required #}
+{% set attributes =
+  merge_html_attributes(
+    attr ?? null,
+    {
+      title: label,
+      type: tag == 'button' ? 'button' : false,
+      href: tag == 'a' and href is defined ? href : false,
+      aria_label: icon_only ? label : false
+    },
+    { class: ['btn'] }
+  )
+%}
+
+{% set rendered_icon %}
+  {% block icon %}
+    {% include '@ui/atoms/Icon/Icon.twig' with {
+      name: icon ?? '',
+      classes: icon_classes ?? {
+        'mr-3': not icon_only and icon_position == 'start',
+        'ml-3': not icon_only and icon_position == 'end',
+       }
+    } %}
+  {% endblock %}
+{% endset %}
+
+{% html_element tag with attributes %}
+  {% block content %}
+    {% if icon is defined and icon_position == 'start' %}
+      {{ rendered_icon }}
+    {% endif %}
+    {% block label %}
+      {% if icon_only %}
+        <span class="sr-only">{{ label }}</span>
+      {% else %}
+        {{ label }}
+      {% endif %}
+    {% endblock %}
+    {% if icon is defined and icon_position == 'end' %}
+      {{ rendered_icon }}
+    {% endif %}
+  {% endblock %}
+{% end_html_element %}

package/atoms/Button/StyledButton.twig

@@ -0,0 +1,47 @@
+{#
+/**
+ * @file
+ *   Styled button.
+ *
+ * @param 'primary'|'secondary'|'tertiary' $theme
+ */
+#}
+
+{% extends '@ui/atoms/Button/Button.twig' %}
+
+{% set icon_only = icon_only|default(false) %}
+
+{% set theme = theme|default('primary') %}
+
+{% set theme_shared = [
+  'rounded cursor-pointer transition',
+  'disabled:cursor-not-allowed',
+  {
+    'inline-block': icon is not defined,
+    'inline-flex items-center': icon is defined,
+    'px-6 py-4': not icon_only,
+    'p-4': icon_only
+  }
+] %}
+
+{% set theme_primary = ['text-white bg-black', 'hover:bg-opacity-75 disabled:bg-opacity-50'] %}
+
+{% set theme_secondary = [
+  'ring ring-inset ring-2 ring-black ring-opacity-25',
+  {
+    'hover:ring-opacity-100': (attr is defined and attr.disabled is not defined)
+      or attr is not defined
+  }
+] %}
+
+{% set attr =
+  attr
+    |default({})
+    |merge({
+      class: [
+        theme_shared,
+        theme == 'primary' ? theme_primary : '',
+        theme == 'secondary' ? theme_secondary : ''
+      ]
+    })
+%}

package/atoms/Cursor/Cursor.twig

@@ -0,0 +1,28 @@
+{#
+/**
+ * @file
+ *   Cursor component.
+ *
+ * @param array $attr
+ *   Custom attributes for the root element.
+ *
+ * @block $content
+ *   Custom content for the root element, defaults to `''`.
+ */
+#}
+
+{% set attributes =
+  merge_html_attributes(
+    attr ?? null,
+    {
+      data_component: 'Cursor',
+      class: 'fixed top-0 left-0 w-12 h-12 -mt-6 -ml-6 rounded-full bg-black'
+    },
+    { class: 'pointer-events-none' }
+  )
+%}
+
+<div {{ html_attributes(attributes) }}>
+  {% block content %}
+  {% endblock %}
+</div>

package/atoms/Figure/Figure.twig

@@ -0,0 +1,120 @@
+{#
+/**
+ * @file
+ * Figure component.
+ *
+ * @param string $src
+ * @param string $srcset
+ * @param string $sizes
+ * @param number $width
+ * @param number $height
+ * @param string $alt
+ * @param string $caption
+ * @param boolean $lazy
+ * @param 'cover'|'contain'|'fill'|'none' $fit
+ *   Define how the image will fit.
+ * @param boolean $absolute
+ *   Use absolute position on the image holder instead of relative.
+ * @param boolean $inline
+ *   Wether to enable the display of the figure inline or not. When `inline`, the root element
+ *   will have a max-width set corresponding to the `width` given. Use with caution.
+ * @param array $attr
+ *   Custom attributes for the root element.
+ * @param array $inner_attr
+ *   Custom attributes for the inner element.
+ * @param array $img_attr
+ *   Custom attributes for the image element.
+ * @param array $caption_attr
+ *   Custom attributes for the caption element.
+ *
+ * @block $caption
+ *   Use this block to customize the image's caption.
+ *
+ * @todo
+ *  - twicpics: use TwicPics to serve image at the right size
+ *  - loading: display a loader while loading, the fallback image if there was an error
+ *  - mode: img | background → is it really necessary with `object-fit-...`?
+ */
+#}
+
+{% set absolute = absolute|default(false) %}
+{% set inline = inline|default(false) %}
+{% set fit = fit ?? null %}
+{% set height = height|default(100) %}
+{% set width = width|default(100) %}
+{% set lazy = lazy ?? true %}
+
+{%- set placeholder_markup -%}
+  <svg xmlns="http://www.w3.org/2000/svg"
+    viewbox="0 0 {{ width }} {{ height }}"
+    width="{{ width }}"
+    height="{{ height }}">
+    <rect x="0" y="0" width="{{ width }}" height="{{ height }}" fill="#eee" />
+  </svg>
+{%- endset -%}
+{% set generic_placeholder = 'data:image/svg+xml,%s'|format(placeholder_markup|url_encode) %}
+
+{% set attributes =
+  merge_html_attributes(
+    attr ?? null,
+    { data_component: 'Figure', class: ['figure', 'w-full'] },
+    {
+      style: { height: absolute ? '100%' : '', maxWidth: inline ? width ~ 'px' : '' },
+      data_option_lazy: lazy
+    }
+  )
+%}
+
+{% set img_attributes =
+  merge_html_attributes(
+    img_attr ?? null,
+    { class: 'figure__img' },
+    {
+      class: [
+        'absolute inset-0 w-full max-w-none h-full',
+        {
+          'object-cover': fit == 'cover',
+          'object-contain': fit == 'contain',
+          'object-fill': fit == 'fill',
+          'object-none': fit == 'none'
+        }
+      ],
+      src: lazy ? placeholder|default(generic_placeholder) : src,
+      data_src: lazy ? src|default(generic_placeholder) : src,
+      alt: alt|default(''),
+      width: width|default(false),
+      height: height|default(false),
+      srcset: srcset|default(false),
+      sizes: sizes|default(false),
+      data_ref: 'img'
+    }
+  )
+%}
+
+{% set inner_attributes =
+  merge_html_attributes(
+    inner_attr ?? null,
+    { class: ['figure__inner'] },
+    {
+      class: absolute ? ['absolute', 'inset-0'] : ['relative', 'w-full', 'h-0'],
+      style: { paddingTop: absolute ? '' : height * 100 / width ~ '%' }
+    }
+  )
+%}
+
+{% set caption_attributes =
+  merge_html_attributes(caption_attr ?? null, { class: 'figure__caption' })
+%}
+
+<figure {{ html_attributes(attributes) }}>
+  <div {{ html_attributes(inner_attributes) }}>
+    <img {{ html_attributes(img_attributes) }} />
+  </div>
+  {% if caption is defined %}
+    {% block caption %}
+      <figcaption {{ html_attributes(caption_attributes) }}>
+        {{ caption }}
+      </figcaption>
+    {% endblock %}
+  {% endif %}
+</figure>

package/atoms/Icon/Icon.twig

@@ -0,0 +1,13 @@
+{#
+/**
+ * @file
+ * Icon component
+ *
+ * @param string $name The file name of the icon.
+ * @param string[] $classes Additional classes.
+ */
+#}
+
+<span class="icon {{ 'icon--%s'|format(name) }} {{ html_classes(classes|default('inline-block')) }}">
+  {{ source('@svg/%s.svg'|format(name), ignore_missing = true) }}
+</span>

package/atoms/LargeText/LargeText.twig

@@ -0,0 +1,49 @@
+{#
+/**
+ * @file
+ *   LargeText component.
+ *
+ * @param string $content
+ *   The text content.
+ * @param number $repeat
+ *   The number of times the content should be repeated, defaults to 2.
+ * @param array $attr
+ *   Custom attributes for the root element.
+ * @param array $target_attr
+ *   Custom attributes for the target element.
+ */
+#}
+
+{% set attributes =
+  merge_html_attributes(
+    attr ?? null,
+    { data_component: 'LargeText' },
+    { class: 'overflow-x-hidden pointer-events-none' }
+  )
+%}
+
+{% set target_attributes =
+  merge_html_attributes(
+    target_attr ?? null,
+    { class: 'text-9xl font-bold' },
+    { data_ref: 'target', class: 'relative inline-block whitespace-nowrap' }
+  )
+%}
+
+{% set position_factor = attributes.data_option_sensitivity is defined
+  and attributes.data_option_sensitivity < 0
+  ? - 100
+  : 100
+%}
+
+<div {{ html_attributes(attributes) }}>
+  <span {{ html_attributes(target_attributes) }}>
+    {% for count in 1..repeat ?? 2 %}
+      {% set content_attributes = {
+        style: { left: loop.first ? '' : loop.index0 * position_factor ~ '%' },
+        class: { 'absolute top-0': not loop.first }
+      } %}
+      <span {{ html_attributes(content_attributes) }}>&nbsp;{{ content }}</span>
+    {% endfor %}
+  </span>
+</div>

package/index.cjs

@@ -19,4 +19,5 @@ module.exports = __toCommonJS(ui_exports);
 __reExport(ui_exports, require("./primitives/index.cjs"), module.exports);
 __reExport(ui_exports, require("./atoms/index.cjs"), module.exports);
 __reExport(ui_exports, require("./molecules/index.cjs"), module.exports);
+__reExport(ui_exports, require("./organisms/index.cjs"), module.exports);
 if (module.exports.default) module.exports = module.exports.default;

package/index.d.ts

@@ -1,3 +1,4 @@
 export * from "./primitives/index.js";
 export * from "./atoms/index.js";
 export * from "./molecules/index.js";
+export * from "./organisms/index.js";

package/index.js

@@ -1 +1 @@
-export*from"./primitives/index.js";export*from"./atoms/index.js";export*from"./molecules/index.js";
+export*from"./primitives/index.js";export*from"./atoms/index.js";export*from"./molecules/index.js";export*from"./organisms/index.js";

package/molecules/Accordion/Accordion.twig

@@ -0,0 +1,54 @@
+{#
+/**
+ * @file
+ * Accordion component.
+ *
+ * @param array<{ title: string, content: unknown, attr: array }> $items
+ *   The items of the accordion.
+ * @param array $attr
+ *   Use it to customize the root element attributes.
+ * @param array $item_attr
+ *   Use it to customize each item element attributes.
+ * @param array $item_container_attr
+ *   Use it to customize each item container element attributes.
+ *
+ * @block $title
+ *   Use it to customize each item's title.
+ * @block $content
+ *   Use it to customize each item's content.
+ */
+#}
+
+{% set attributes = merge_html_attributes(attr ?? null, { data_component: 'Accordion' }) %}
+
+<div {{ html_attributes(attributes) }}>
+  {% for item in items %}
+    {% set item_attributes = merge_html_attributes(item_attr ?? null, { data_component: 'AccordionItem' }, item.attr ?? null) %}
+    {% set is_open = item_attributes.data_option_is_open ?? false %}
+    <div {{ html_attributes(item_attributes) }}>
+      <button data-ref="btn" class="block w-full" aria-expanded="{{ is_open ? 'true' : 'false' }}">
+        {% block title %}
+          {{ item.title }}
+        {% endblock %}
+      </button>
+      {% set item_container_attributes =
+        merge_html_attributes(
+          item_container_attr ?? null,
+          {},
+          {
+            data_ref: 'container',
+            style: { visibility: is_open ? '' : 'hidden', height: is_open ? '' : '0' },
+            class: 'relative overflow-hidden'
+          }
+        )
+      %}
+      <div {{ html_attributes(item_container_attributes) }}>
+        <div data-ref="content" aria-hidden="true">
+          {% block content %}
+            {{ item.content }}
+          {% endblock %}
+        </div>
+      </div>
+    </div>
+  {% endfor %}
+</div>

package/molecules/Modal/Modal.twig

@@ -0,0 +1,108 @@
+{#
+/**
+ * @file
+ * Modal component.
+ *
+ * @param array $attr
+ *   Use it to customize the root element attributes.
+ * @param array $modal_attr
+ *   Use it to customize the modal element attributes.
+ * @param array $overlay_attr
+ *   Use it to customize the overlay element attributes.
+ * @param array $wrapper_attr
+ *   Use it to customize the wrapper element attributes.
+ * @param array $container_atrr
+ *   Use it to customize the container element attributes.
+ * @param array $content_atrr
+ *   Use it to customize the content element attributes.
+ *
+ * @block $open
+ *   Use this block to customize the open trigger button.
+ * @block $close
+ *   Use this block to customize the close trigger button.
+ * @block $content
+ *   Use this block to set the modal's content.
+ */
+#}
+
+{# Root attributes #}
+{% set attributes = merge_html_attributes(attr ?? null, { data_component: 'Modal' }) %}
+
+{# Modal attributes #}
+{% set modal_attributes =
+  merge_html_attributes(
+    modal_attr ?? null,
+    { class: 'z-goku fixed inset-0' },
+    {
+      data_ref: 'modal',
+      role: 'dialog',
+      aria_modal: true,
+      aria_hidden: true,
+      style: { opacity: '0', pointer_events: 'none', visibility: 'hidden' }
+    }
+  )
+%}
+
+{# Overlay attributes #}
+{% set overlay_attributes =
+  merge_html_attributes(
+    overlay_attr ?? null,
+    { class: 'z-under absolute inset-0 bg-black bg-opacity-75' },
+    { data_ref: 'overlay', tabindex: '-1' }
+  )
+%}
+
+{% set wrapper_attributes =
+  merge_html_attributes(
+    wrapper_attr ?? null,
+    { class: 'absolute inset-0 flex items-center justify-center' },
+    { class: 'pointer-events-none' }
+  )
+%}
+
+{# Container attributes #}
+{% set container_attributes =
+  merge_html_attributes(
+    container_attr ?? null,
+    { class: 'bg-white rounded shadow-l' },
+    {
+      data_ref: 'container',
+      class: 'z-above relative max-h-full overflow-x-hidden overflow-y-auto pointer-events-auto'
+    }
+  )
+%}
+
+{# Content attributes #}
+{% set content_attributes =
+  merge_html_attributes(
+    content_attr ?? null,
+    { class: 'max-w-3xl p-16 pt-20' },
+    { data_ref: 'content' }
+  )
+%}
+
+<div {{ html_attributes(attributes) }}>
+  {% block open %}
+    {% include '@ui/atoms/Button/Button.twig' with { label: 'Open', attr: { data_ref: 'open' } } %}
+  {% endblock %}
+  <div {{ html_attributes(modal_attributes) }}>
+    <div {{ html_attributes(overlay_attributes) }}></div>
+    <div {{ html_attributes(wrapper_attributes) }}>
+      <div {{ html_attributes(container_attributes) }}>
+        {% block close %}
+          <div class="absolute top-0 right-0 m-2">
+            {% include '@ui/atoms/Button/Button.twig' with {
+              label: 'Close',
+              attr: { data_ref: 'close' }
+            } %}
+          </div>
+        {% endblock %}
+        <div {{ html_attributes(content_attributes) }}>
+          {% block content %}
+            No content.
+          {% endblock %}
+        </div>
+      </div>
+    </div>
+  </div>
+</div>

package/molecules/Modal/StyledModal.twig

@@ -0,0 +1,39 @@
+{#
+/**
+ * @file
+ * Modal component.
+ *
+ * @param array $attr
+ *   Use it to customize the root element attributes.
+ * @param array $modal_attr
+ *   Use it to customize the modal element attributes.
+ * @param array $overlay_attr
+ *   Use it to customize the overlay element attributes.
+ * @param array $container_atrr
+ *   Use it to customize the container element attributes.
+ * @param array $content_atrr
+ *   Use it to customize the content element attributes.
+ *
+ * @block $open
+ *   Use this block to customize the open trigger button.
+ * @block $close
+ *   Use this block to customize the close trigger button.
+ * @block $content
+ *   Use this block to set the modal's content.
+ */
+#}
+
+{% extends '@ui/molecules/Modal/Modal.twig' %}
+
+{% block open %}
+  {% include '@ui/atoms/Button/StyledButton.twig' with { label: 'Open', attr: { data_ref: 'open' } } %}
+{% endblock %}
+
+{% block close %}
+  <div class="absolute top-0 right-0 m-2">
+    {% include '@ui/atoms/Button/StyledButton.twig' with {
+      label: 'Close',
+      attr: { data_ref: 'close' }
+    } %}
+  </div>
+{% endblock %}

package/molecules/Panel/Panel.twig

@@ -0,0 +1,73 @@
+{#
+/**
+ * @file
+ *   Panel component.
+ *
+ * @param 'top'|'right'|'bottom'|'left' $position
+ *   Position of the panel.
+ * @param array $wrapper_attr
+ *   Custom attributes for the wrapper element.
+ */
+#}
+
+{% extends '@ui/molecules/Modal/Modal.twig' %}
+
+{% set position = position ?? 'left' %}
+
+{% set attr =
+  merge_html_attributes(attr ?? null, { data_component: 'Panel', data_option_position: position })
+%}
+
+{% set overlay_attr =
+  merge_html_attributes(
+    overlay_attr ?? null,
+    { class: 'z-under absolute inset-0 bg-black bg-opacity-75' },
+    { class: 'transition duration-500 opacity-0' }
+  )
+%}
+
+{% set wrapper_attr =
+  merge_html_attributes(
+    wrapper_attr ?? null,
+    {},
+    {
+      class: [
+        'z-above absolute top-0 w-full h-full flex pointer-events-none',
+        {
+          'top-0 left-0 items-start justify-center': position == 'top',
+          'top-0 right-0 items-center justify-end': position == 'right',
+          'bottom-0 left-0 items-end justify-center': position == 'bottom',
+          'top-0 left-0 items-center justify-start': position == 'left'
+        }
+      ]
+    }
+  )
+%}
+
+{% set container_attr =
+  merge_html_attributes(
+    container_attr ?? null,
+    {
+      class: [
+        'max-w-2xl',
+        {
+          'w-full': position == 'top',
+          'h-full': position == 'right',
+          'w-full': position == 'bottom',
+          'h-full': position == 'left'
+        }
+      ]
+    },
+    {
+      class: [
+        'transform transition duration-500',
+        {
+          '-translate-y-full': position == 'top',
+          'translate-x-full': position == 'right',
+          'translate-y-full': position == 'bottom',
+          '-translate-x-full': position == 'left'
+        }
+      ]
+    }
+  )
+%}

package/molecules/Panel/StyledPanel.twig

@@ -0,0 +1,28 @@
+{#
+/**
+ * @file
+ *   Panel component.
+ *
+ * @param 'left'|'right' $position
+ *   Position of the panel.
+ * @param array $wrapper_attr
+ *   Custom attributes for the wrapper element.
+ */
+#}
+
+{% extends '@ui/molecules/Panel/Panel.twig' %}
+
+{% set container_attr = merge_html_attributes(container_attr ?? null, required={ class: 'bg-white' }) %}
+
+{% block open %}
+  {% include '@ui/atoms/Button/StyledButton.twig' with { label: 'Open', attr: { data_ref: 'open' } } %}
+{% endblock %}
+
+{% block close %}
+  <div class="absolute top-0 right-0 m-2">
+    {% include '@ui/atoms/Button/StyledButton.twig' with {
+      label: 'Close',
+      attr: { data_ref: 'close' }
+    } %}
+  </div>
+{% endblock %}

package/molecules/Sticky/Sticky.twig

@@ -0,0 +1,31 @@
+{#
+/**
+ * @file
+ *   Sticky component.
+ *
+ * @param array $attr
+ *   Custom attributes for the root element.
+ * @param array $innner_attr
+ *   Custom attributes for the inner element.
+ *
+ * @block $content
+ *   Use this block to set the content of the sticky element.
+ */
+#}
+
+{% set default_attributes = { data_component: 'Sticky', class: 'z-10 sticky top-0 w-full' } %}
+{% set attributes = attr|default({})|merge_html_attributes(default_attributes) %}
+
+{% set default_inner_attributes = { data_ref: 'inner', class:'transition duration-500 ease-out-expo' } %}
+{% set inner_attributes = inner_attr|default({})|merge_html_attributes(default_inner_attributes) %}
+
+<div {{ html_attributes(attributes) }}>
+  <div data-ref="sentinelRef"
+    data-component="Sentinel"
+    class="absolute bottom-full w-full h-px pointer-events-none"></div>
+  <div {{ html_attributes(inner_attributes) }}>
+    {% block content %}
+      {{ content ?? '' }}
+    {% endblock %}
+  </div>
+</div>

package/molecules/Tabs/Tabs.twig

@@ -0,0 +1,20 @@
+<div data-component="Tabs" data-option-styles='{ "btn": { "open": { "borderBottomColor": "#fff" } } }'>
+  {% block title_wrapper %}
+    {% for item in items %}
+      <button data-ref="btn[]" style="border-bottom: 1px solid transparent;">
+        {% block title %}
+          {{ item.title }}
+        {% endblock %}
+      </button>
+    {% endfor %}
+  {% endblock %}
+  {% block content_wrapper %}
+      {% for item in items %}
+        <div data-ref="content[]" aria-hidden="false">
+          {% block content %}
+            {{ item.content }}
+          {% endblock %}
+        </div>
+      {% endfor %}
+  {% endblock %}
+</div>

package/organisms/Frame/Frame.cjs

@@ -35,6 +35,12 @@ 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);
+function getScrollPosition() {
+  return {
+    left: window.pageXOffset,
+    top: window.pageYOffset
+  };
+}
 var cache = /* @__PURE__ */ new Map();
 var _Frame = class extends import_js_toolkit.Base {
   get id() {
@@ -58,6 +64,35 @@ var _Frame = class extends import_js_toolkit.Base {
   get directChildFrameTarget() {
     return this.getDirectChild("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()
+    }, "");
+  }
+  onWindowPopstate(event) {
+    this.goTo(window.location.href, event.state);
+  }
   onFrameAnchorFrameClick(event, index) {
     if (!this.directChildFrameAnchor.includes(this.$children.FrameAnchor[index])) {
       return;
@@ -82,7 +117,7 @@ var _Frame = class extends import_js_toolkit.Base {
   parseHTML(string = "") {
     return new DOMParser().parseFromString(string, "text/html");
   }
-  async goTo(url) {
+  async goTo(url, scroll = null) {
     this.$log("goTo", url);
     const parsedUrl = new URL(url);
     if (parsedUrl.origin !== window.location.origin) {
@@ -104,6 +139,10 @@ var _Frame = class extends import_js_toolkit.Base {
       document.title = doc.title;
       (0, import_utils.historyPush)({ path: parsedUrl.pathname, search: parsedUrl.searchParams });
     }
+    if (scroll) {
+      document.scrollingElement.scrollTop = scroll.top;
+      document.scrollingElement.scrollLeft = scroll.left;
+    }
     await (0, import_utils.nextFrame)();
     this.$root.$update();
     await (0, import_utils.nextFrame)();

package/organisms/Frame/Frame.d.ts

@@ -63,6 +63,35 @@ export default class Frame extends Base {
      * @returns {FrameTarget[]}
      */
     get directChildFrameTarget(): 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`.
      *
@@ -90,9 +119,13 @@ export default class Frame extends Base {
     /**
      * Go to the given url.
      * @param   {string} url
+     * @param   {null|{ top: number, left: number }} [scroll]
      * @returns {Promise<void>}
      */
-    goTo(url: string): Promise<void>;
+    goTo(url: string, scroll?: null | {
+        top: number;
+        left: number;
+    }): Promise<void>;
     /**
      * Fetch the given url.
      * @param   {string} url

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.5",
+  "version": "0.2.6",
   "description": "A set of opiniated, unstyled and accessible components",
   "publishConfig": {
     "access": "public"