@studiometa/ui 0.2.47 → 0.2.49

package/molecules/AnchorNav/AnchorNav.js

@@ -0,0 +1,41 @@
+import { Base } from "@studiometa/js-toolkit";
+import { AnchorNavLink } from "./AnchorNavLink.js";
+import { AnchorNavTarget } from "./AnchorNavTarget.js";
+class AnchorNav extends Base {
+  /**
+   * Config
+   */
+  static config = {
+    name: "AnchorNav",
+    components: {
+      AnchorNavLink,
+      AnchorNavTarget
+    }
+  };
+  /**
+   * Listen to the AnchorNavTarget that is mounted
+   */
+  onAnchorNavTargetMounted(index) {
+    const { id } = this.$children.AnchorNavTarget[index].$el;
+    this.$children.AnchorNavLink.forEach((anchorNavLink) => {
+      if (id === anchorNavLink.targetId) {
+        anchorNavLink.enter();
+      }
+    });
+  }
+  /**
+   * Listen to the AnchorNavTarget that is destroyed
+   */
+  onAnchorNavTargetDestroyed(index) {
+    const { id } = this.$children.AnchorNavTarget[index].$el;
+    this.$children.AnchorNavLink.forEach((anchorNavLink) => {
+      if (id === anchorNavLink.targetId) {
+        anchorNavLink.leave();
+      }
+    });
+  }
+}
+export {
+  AnchorNav
+};
+//# sourceMappingURL=AnchorNav.js.map

package/molecules/AnchorNav/AnchorNav.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../packages/ui/molecules/AnchorNav/AnchorNav.ts"],
+  "sourcesContent": ["import { Base } from '@studiometa/js-toolkit';\nimport type { BaseProps, BaseConfig } from '@studiometa/js-toolkit';\nimport { AnchorNavLink } from './AnchorNavLink.js';\nimport { AnchorNavTarget } from './AnchorNavTarget.js';\n\nexport interface AnchorNavProps extends BaseProps {\n  $children: {\n    AnchorNavLink: AnchorNavLink[];\n    AnchorNavTarget: AnchorNavTarget[];\n  };\n}\n\nexport class AnchorNav<T extends BaseProps = BaseProps> extends Base<T & AnchorNavProps> {\n  /**\n   * Config\n   */\n  static config: BaseConfig = {\n    name: 'AnchorNav',\n    components: {\n      AnchorNavLink,\n      AnchorNavTarget,\n    },\n  };\n\n  /**\n   * Listen to the AnchorNavTarget that is mounted\n   */\n  onAnchorNavTargetMounted(index) {\n    const { id } = this.$children.AnchorNavTarget[index].$el;\n    this.$children.AnchorNavLink.forEach((anchorNavLink) => {\n      if (id === anchorNavLink.targetId) {\n        anchorNavLink.enter();\n      }\n    });\n  }\n\n  /**\n   * Listen to the AnchorNavTarget that is destroyed\n   */\n  onAnchorNavTargetDestroyed(index) {\n    const { id } = this.$children.AnchorNavTarget[index].$el;\n    this.$children.AnchorNavLink.forEach((anchorNavLink) => {\n      if (id === anchorNavLink.targetId) {\n        anchorNavLink.leave();\n      }\n    });\n  }\n}\n"],
+  "mappings": "AAAA,SAAS,YAAY;AAErB,SAAS,qBAAqB;AAC9B,SAAS,uBAAuB;AASzB,MAAM,kBAAmD,KAAyB;AAAA;AAAA;AAAA;AAAA,EAIvF,OAAO,SAAqB;AAAA,IAC1B,MAAM;AAAA,IACN,YAAY;AAAA,MACV;AAAA,MACA;AAAA,IACF;AAAA,EACF;AAAA;AAAA;AAAA;AAAA,EAKA,yBAAyB,OAAO;AAC9B,UAAM,EAAE,GAAG,IAAI,KAAK,UAAU,gBAAgB,KAAK,EAAE;AACrD,SAAK,UAAU,cAAc,QAAQ,CAAC,kBAAkB;AACtD,UAAI,OAAO,cAAc,UAAU;AACjC,sBAAc,MAAM;AAAA,MACtB;AAAA,IACF,CAAC;AAAA,EACH;AAAA;AAAA;AAAA;AAAA,EAKA,2BAA2B,OAAO;AAChC,UAAM,EAAE,GAAG,IAAI,KAAK,UAAU,gBAAgB,KAAK,EAAE;AACrD,SAAK,UAAU,cAAc,QAAQ,CAAC,kBAAkB;AACtD,UAAI,OAAO,cAAc,UAAU;AACjC,sBAAc,MAAM;AAAA,MACtB;AAAA,IACF,CAAC;AAAA,EACH;AACF;",
+  "names": []
+}

package/molecules/AnchorNav/AnchorNavLink.cjs

@@ -0,0 +1,40 @@
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+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 __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// packages/ui/molecules/AnchorNav/AnchorNavLink.ts
+var AnchorNavLink_exports = {};
+__export(AnchorNavLink_exports, {
+  AnchorNavLink: () => AnchorNavLink
+});
+module.exports = __toCommonJS(AnchorNavLink_exports);
+var import_AnchorScrollTo = require("../../atoms/AnchorScrollTo/AnchorScrollTo.cjs");
+var import_decorators = require("../../decorators/index.cjs");
+var AnchorNavLink = class extends (0, import_decorators.withTransition)(import_AnchorScrollTo.AnchorScrollTo) {
+  /**
+   * Config.
+   */
+  static config = {
+    ...import_AnchorScrollTo.AnchorScrollTo.config,
+    name: "AnchorNavLink"
+  };
+  get targetId() {
+    return this.$el.hash.replace(/^#/, "");
+  }
+};
+if (module.exports.default) module.exports = module.exports.default;
+//# sourceMappingURL=AnchorNavLink.cjs.map

package/molecules/AnchorNav/AnchorNavLink.cjs.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../packages/ui/molecules/AnchorNav/AnchorNavLink.ts"],
+  "sourcesContent": ["import type { BaseConfig } from '@studiometa/js-toolkit';\nimport { AnchorScrollTo, AnchorScrollToProps } from '../../atoms/AnchorScrollTo/AnchorScrollTo.js';\nimport { withTransition } from '../../decorators/index.js';\n\nexport interface AnchorNavLinkProps extends AnchorScrollToProps {\n  $options: {\n    id: string;\n  };\n}\n\n/**\n * Manage a slider item and its state transition.\n */\nexport class AnchorNavLink extends withTransition(AnchorScrollTo)<AnchorNavLinkProps> {\n  /**\n   * Config.\n   */\n  static config: BaseConfig = {\n    ...AnchorScrollTo.config,\n    name: 'AnchorNavLink',\n  };\n\n  get targetId() {\n    return this.$el.hash.replace(/^#/, '');\n  }\n}\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AACA,4BAAoD;AACpD,wBAA+B;AAWxB,IAAM,gBAAN,kBAA4B,kCAAe,oCAAc,EAAsB;AAAA;AAAA;AAAA;AAAA,EAIpF,OAAO,SAAqB;AAAA,IAC1B,GAAG,qCAAe;AAAA,IAClB,MAAM;AAAA,EACR;AAAA,EAEA,IAAI,WAAW;AACb,WAAO,KAAK,IAAI,KAAK,QAAQ,MAAM,EAAE;AAAA,EACvC;AACF;",
+  "names": []
+}

package/molecules/AnchorNav/AnchorNavLink.d.ts

@@ -0,0 +1,19 @@
+import type { BaseConfig } from '@studiometa/js-toolkit';
+import { AnchorScrollToProps } from '../../atoms/AnchorScrollTo/AnchorScrollTo.js';
+export interface AnchorNavLinkProps extends AnchorScrollToProps {
+    $options: {
+        id: string;
+    };
+}
+declare const AnchorNavLink_base: import("@studiometa/js-toolkit").BaseDecorator<import("decorators/withTransition.js").TransitionInterface, import("@studiometa/js-toolkit").Base<import("@studiometa/js-toolkit").BaseProps>, import("decorators/withTransition.js").TransitionProps>;
+/**
+ * Manage a slider item and its state transition.
+ */
+export declare class AnchorNavLink extends AnchorNavLink_base<AnchorNavLinkProps> {
+    /**
+     * Config.
+     */
+    static config: BaseConfig;
+    get targetId(): string;
+}
+export {};

package/molecules/AnchorNav/AnchorNavLink.js

@@ -0,0 +1,18 @@
+import { AnchorScrollTo } from "../../atoms/AnchorScrollTo/AnchorScrollTo.js";
+import { withTransition } from "../../decorators/index.js";
+class AnchorNavLink extends withTransition(AnchorScrollTo) {
+  /**
+   * Config.
+   */
+  static config = {
+    ...AnchorScrollTo.config,
+    name: "AnchorNavLink"
+  };
+  get targetId() {
+    return this.$el.hash.replace(/^#/, "");
+  }
+}
+export {
+  AnchorNavLink
+};
+//# sourceMappingURL=AnchorNavLink.js.map

package/molecules/AnchorNav/AnchorNavLink.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../packages/ui/molecules/AnchorNav/AnchorNavLink.ts"],
+  "sourcesContent": ["import type { BaseConfig } from '@studiometa/js-toolkit';\nimport { AnchorScrollTo, AnchorScrollToProps } from '../../atoms/AnchorScrollTo/AnchorScrollTo.js';\nimport { withTransition } from '../../decorators/index.js';\n\nexport interface AnchorNavLinkProps extends AnchorScrollToProps {\n  $options: {\n    id: string;\n  };\n}\n\n/**\n * Manage a slider item and its state transition.\n */\nexport class AnchorNavLink extends withTransition(AnchorScrollTo)<AnchorNavLinkProps> {\n  /**\n   * Config.\n   */\n  static config: BaseConfig = {\n    ...AnchorScrollTo.config,\n    name: 'AnchorNavLink',\n  };\n\n  get targetId() {\n    return this.$el.hash.replace(/^#/, '');\n  }\n}\n"],
+  "mappings": "AACA,SAAS,sBAA2C;AACpD,SAAS,sBAAsB;AAWxB,MAAM,sBAAsB,eAAe,cAAc,EAAsB;AAAA;AAAA;AAAA;AAAA,EAIpF,OAAO,SAAqB;AAAA,IAC1B,GAAG,eAAe;AAAA,IAClB,MAAM;AAAA,EACR;AAAA,EAEA,IAAI,WAAW;AACb,WAAO,KAAK,IAAI,KAAK,QAAQ,MAAM,EAAE;AAAA,EACvC;AACF;",
+  "names": []
+}

package/molecules/AnchorNav/AnchorNavTarget.cjs

@@ -0,0 +1,35 @@
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+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 __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// packages/ui/molecules/AnchorNav/AnchorNavTarget.ts
+var AnchorNavTarget_exports = {};
+__export(AnchorNavTarget_exports, {
+  AnchorNavTarget: () => AnchorNavTarget
+});
+module.exports = __toCommonJS(AnchorNavTarget_exports);
+var import_js_toolkit = require("@studiometa/js-toolkit");
+var AnchorNavTarget = class extends (0, import_js_toolkit.withMountWhenInView)(import_js_toolkit.Base) {
+  /**
+   * Config.
+   */
+  static config = {
+    name: "AnchorNavTarget"
+  };
+};
+if (module.exports.default) module.exports = module.exports.default;
+//# sourceMappingURL=AnchorNavTarget.cjs.map

package/molecules/AnchorNav/AnchorNavTarget.cjs.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../packages/ui/molecules/AnchorNav/AnchorNavTarget.ts"],
+  "sourcesContent": ["import { Base, withMountWhenInView } from '@studiometa/js-toolkit';\nimport type { BaseProps, BaseConfig } from '@studiometa/js-toolkit';\n\n/**\n * Manage a sticky table section.\n */\nexport class AnchorNavTarget extends withMountWhenInView(Base)<BaseProps> {\n  /**\n   * Config.\n   */\n  static config: BaseConfig = {\n    name: 'AnchorNavTarget',\n  };\n}\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,wBAA0C;AAMnC,IAAM,kBAAN,kBAA8B,uCAAoB,sBAAI,EAAa;AAAA;AAAA;AAAA;AAAA,EAIxE,OAAO,SAAqB;AAAA,IAC1B,MAAM;AAAA,EACR;AACF;",
+  "names": []
+}

package/molecules/AnchorNav/AnchorNavTarget.d.ts

@@ -0,0 +1,13 @@
+import { Base } from '@studiometa/js-toolkit';
+import type { BaseProps, BaseConfig } from '@studiometa/js-toolkit';
+declare const AnchorNavTarget_base: import("@studiometa/js-toolkit").BaseDecorator<import("@studiometa/js-toolkit").WithMountWhenInViewInterface, Base<BaseProps>, import("@studiometa/js-toolkit").WithMountWhenInViewProps>;
+/**
+ * Manage a sticky table section.
+ */
+export declare class AnchorNavTarget extends AnchorNavTarget_base<BaseProps> {
+    /**
+     * Config.
+     */
+    static config: BaseConfig;
+}
+export {};

package/molecules/AnchorNav/AnchorNavTarget.js

@@ -0,0 +1,13 @@
+import { Base, withMountWhenInView } from "@studiometa/js-toolkit";
+class AnchorNavTarget extends withMountWhenInView(Base) {
+  /**
+   * Config.
+   */
+  static config = {
+    name: "AnchorNavTarget"
+  };
+}
+export {
+  AnchorNavTarget
+};
+//# sourceMappingURL=AnchorNavTarget.js.map

package/molecules/AnchorNav/AnchorNavTarget.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../packages/ui/molecules/AnchorNav/AnchorNavTarget.ts"],
+  "sourcesContent": ["import { Base, withMountWhenInView } from '@studiometa/js-toolkit';\nimport type { BaseProps, BaseConfig } from '@studiometa/js-toolkit';\n\n/**\n * Manage a sticky table section.\n */\nexport class AnchorNavTarget extends withMountWhenInView(Base)<BaseProps> {\n  /**\n   * Config.\n   */\n  static config: BaseConfig = {\n    name: 'AnchorNavTarget',\n  };\n}\n"],
+  "mappings": "AAAA,SAAS,MAAM,2BAA2B;AAMnC,MAAM,wBAAwB,oBAAoB,IAAI,EAAa;AAAA;AAAA;AAAA;AAAA,EAIxE,OAAO,SAAqB;AAAA,IAC1B,MAAM;AAAA,EACR;AACF;",
+  "names": []
+}

package/molecules/AnchorNav/index.cjs

@@ -0,0 +1,23 @@
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+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 __reExport = (target, mod, secondTarget) => (__copyProps(target, mod, "default"), secondTarget && __copyProps(secondTarget, mod, "default"));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// packages/ui/molecules/AnchorNav/index.ts
+var AnchorNav_exports = {};
+module.exports = __toCommonJS(AnchorNav_exports);
+__reExport(AnchorNav_exports, require("./AnchorNav.cjs"), module.exports);
+__reExport(AnchorNav_exports, require("./AnchorNavLink.cjs"), module.exports);
+__reExport(AnchorNav_exports, require("./AnchorNavTarget.cjs"), module.exports);
+if (module.exports.default) module.exports = module.exports.default;
+//# sourceMappingURL=index.cjs.map

package/molecules/AnchorNav/index.cjs.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../packages/ui/molecules/AnchorNav/index.ts"],
+  "sourcesContent": ["export * from './AnchorNav.js';\nexport * from './AnchorNavLink.js';\nexport * from './AnchorNavTarget.js';\n"],
+  "mappings": ";;;;;;;;;;;;;;;;AAAA;AAAA;AAAA,8BAAc,4BAAd;AACA,8BAAc,gCADd;AAEA,8BAAc,kCAFd;",
+  "names": []
+}

package/molecules/AnchorNav/index.d.ts

@@ -0,0 +1,3 @@
+export * from './AnchorNav.js';
+export * from './AnchorNavLink.js';
+export * from './AnchorNavTarget.js';

package/molecules/AnchorNav/index.js

@@ -0,0 +1,4 @@
+export * from "./AnchorNav.js";
+export * from "./AnchorNavLink.js";
+export * from "./AnchorNavTarget.js";
+//# sourceMappingURL=index.js.map

package/molecules/AnchorNav/index.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../packages/ui/molecules/AnchorNav/index.ts"],
+  "sourcesContent": ["export * from './AnchorNav.js';\nexport * from './AnchorNavLink.js';\nexport * from './AnchorNavTarget.js';\n"],
+  "mappings": "AAAA,cAAc;AACd,cAAc;AACd,cAAc;",
+  "names": []
+}

package/molecules/IconList/IconList.twig

@@ -0,0 +1,83 @@
+{#
+/**
+ * @file
+ * Icon list component.
+ *
+ * @param array  $attr        Shorthand of $list_attr.
+ * @param array  $list_attr   List attributes.
+ * @param array  $item_attr   List item attributes.
+ * @param array  $icon_attr   Icon attibutes.
+ * @param array  $action_attr Action attributes.
+ * @param string $action_tag  Action tag.
+ * @param array  $items       Items:
+ *   - Use the icon name in key and the url in value for each entry of this array.
+ *   - You can pass an array instead of the url to pass custom attributes to the action.
+ *
+ * @block $item
+ *   Use this block to override the component behavior inside the list items.
+ * @block $icon
+ *   Use this block to override the icons.
+ */
+#}
+
+{% set list_attributes =
+  merge_html_attributes(
+    attr ?? list_attr ?? null,
+    { class: ['flex justify-start items-center gap-3'] }
+  )
+%}
+
+{% set item_attributes = merge_html_attributes(item_attr ?? null, {}) %}
+
+{% set icon_attributes = merge_html_attributes(icon_attr ?? null, { class: 'flex items-center' }) %}
+
+<ul {{ html_attributes(list_attributes) }}>
+  {% for name, value in items %}
+    {%- set rendered_icon -%}
+      {%- block icon -%}
+        {%- include '@ui/atoms/Icon/IconInline.twig' with {
+          name: name,
+          attr: icon_attributes,
+          ignore_missing: true
+        } only -%}
+      {%- endblock -%}
+    {%- endset -%}
+
+    {% if rendered_icon is not empty %}
+      {% if value is iterable %}
+        {% set href = value.attr.href ?? value.href ?? null %}
+        {% set label = value.attr.label ?? value.label ?? (name|capitalize) %}
+        {% set title = value.attr.title ?? value.title %}
+        {% set tag = value.tag
+          ?? (action_tag|default(href is defined and href is not null ? 'a' : 'button'))
+        %}
+        {% set current_attr = merge_html_attributes(value.attr ?? {}, action_attr) %}
+      {% else %}
+        {% set href = value %}
+        {% set label = name|capitalize %}
+        {% set tag = action_tag|default('a') %}
+        {% set current_attr = action_attr %}
+      {% endif %}
+
+      {% set action_attributes =
+        merge_html_attributes(
+          current_attr ?? null,
+          {
+            title: title ?? label,
+            aria_label: label,
+            class: 'block p-1 hover:opacity-80 cursor-pointer'
+          }|merge(tag == 'button' ? { type: 'button' } : { href: href })
+        )
+      %}
+
+      <li {{ html_attributes(item_attributes) }}>
+        {% block item %}
+          {% html_element tag with action_attributes %}
+            {{ rendered_icon }}
+            <span class="sr-only">{{ label }}</span>
+          {% end_html_element %}
+        {% endblock %}
+      </li>
+    {% endif %}
+  {% endfor %}
+</ul>

package/molecules/index.cjs

@@ -21,6 +21,7 @@ __reExport(molecules_exports, require("./Accordion/AccordionItem.cjs"), module.e
 __reExport(molecules_exports, require("./Menu/index.cjs"), module.exports);
 __reExport(molecules_exports, require("./Slider/index.cjs"), module.exports);
 __reExport(molecules_exports, require("./Sticky/Sticky.cjs"), module.exports);
+__reExport(molecules_exports, require("./AnchorNav/index.cjs"), module.exports);
 __reExport(molecules_exports, require("./TableOfContent/index.cjs"), module.exports);
 __reExport(molecules_exports, require("./Tabs/index.cjs"), module.exports);
 __reExport(molecules_exports, require("./Modal/index.cjs"), module.exports);

package/molecules/index.cjs.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../packages/ui/molecules/index.ts"],
-  "sourcesContent": ["export * from './Accordion/Accordion.js';\nexport * from './Accordion/AccordionItem.js';\nexport * from './Menu/index.js';\nexport * from './Slider/index.js';\nexport * from './Sticky/Sticky.js';\nexport * from './TableOfContent/index.js';\nexport * from './Tabs/index.js';\nexport * from './Modal/index.js';\nexport * from './Panel/index.js';\n"],
-  "mappings": ";;;;;;;;;;;;;;;;AAAA;AAAA;AAAA,8BAAc,sCAAd;AACA,8BAAc,0CADd;AAEA,8BAAc,6BAFd;AAGA,8BAAc,+BAHd;AAIA,8BAAc,gCAJd;AAKA,8BAAc,uCALd;AAMA,8BAAc,6BANd;AAOA,8BAAc,8BAPd;AAQA,8BAAc,8BARd;",
+  "sourcesContent": ["export * from './Accordion/Accordion.js';\nexport * from './Accordion/AccordionItem.js';\nexport * from './Menu/index.js';\nexport * from './Slider/index.js';\nexport * from './Sticky/Sticky.js';\nexport * from './AnchorNav/index.js';\nexport * from './TableOfContent/index.js';\nexport * from './Tabs/index.js';\nexport * from './Modal/index.js';\nexport * from './Panel/index.js';\n"],
+  "mappings": ";;;;;;;;;;;;;;;;AAAA;AAAA;AAAA,8BAAc,sCAAd;AACA,8BAAc,0CADd;AAEA,8BAAc,6BAFd;AAGA,8BAAc,+BAHd;AAIA,8BAAc,gCAJd;AAKA,8BAAc,kCALd;AAMA,8BAAc,uCANd;AAOA,8BAAc,6BAPd;AAQA,8BAAc,8BARd;AASA,8BAAc,8BATd;",
   "names": []
 }

package/molecules/index.d.ts

@@ -3,6 +3,7 @@ export * from './Accordion/AccordionItem.js';
 export * from './Menu/index.js';
 export * from './Slider/index.js';
 export * from './Sticky/Sticky.js';
+export * from './AnchorNav/index.js';
 export * from './TableOfContent/index.js';
 export * from './Tabs/index.js';
 export * from './Modal/index.js';

package/molecules/index.js

@@ -3,6 +3,7 @@ export * from "./Accordion/AccordionItem.js";
 export * from "./Menu/index.js";
 export * from "./Slider/index.js";
 export * from "./Sticky/Sticky.js";
+export * from "./AnchorNav/index.js";
 export * from "./TableOfContent/index.js";
 export * from "./Tabs/index.js";
 export * from "./Modal/index.js";

package/molecules/index.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../packages/ui/molecules/index.ts"],
-  "sourcesContent": ["export * from './Accordion/Accordion.js';\nexport * from './Accordion/AccordionItem.js';\nexport * from './Menu/index.js';\nexport * from './Slider/index.js';\nexport * from './Sticky/Sticky.js';\nexport * from './TableOfContent/index.js';\nexport * from './Tabs/index.js';\nexport * from './Modal/index.js';\nexport * from './Panel/index.js';\n"],
-  "mappings": "AAAA,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;",
+  "sourcesContent": ["export * from './Accordion/Accordion.js';\nexport * from './Accordion/AccordionItem.js';\nexport * from './Menu/index.js';\nexport * from './Slider/index.js';\nexport * from './Sticky/Sticky.js';\nexport * from './AnchorNav/index.js';\nexport * from './TableOfContent/index.js';\nexport * from './Tabs/index.js';\nexport * from './Modal/index.js';\nexport * from './Panel/index.js';\n"],
+  "mappings": "AAAA,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;",
   "names": []
 }

package/organisms/Frame/Frame.cjs

@@ -92,7 +92,7 @@ var Frame = class _Frame extends import_js_toolkit.Base {
    * Go to the previous URL on `popstate` event.
    */
   onWindowPopstate(event) {
-    this.goTo(window.location.href, event.state);
+    this.goTo(window.location.href, null, event.state);
   }
   /**
    * Prevent click on `FrameAnchor`.
@@ -120,8 +120,13 @@ var Frame = class _Frame extends import_js_toolkit.Base {
     event.preventDefault();
     const form = this.$children.FrameForm[index];
     const url = new URL(form.action);
-    url.search = new URLSearchParams(new FormData(form.$el)).toString();
-    this.goTo(url.toString());
+    if (form.$el.method === "get") {
+      url.search = new URLSearchParams(new FormData(form.$el)).toString();
+      this.goTo(url.toString());
+    }
+    if (form.$el.method === "post") {
+      this.goTo(url.toString(), new FormData(form.$el));
+    }
   }
   /**
    * Parge an HTML string into a DOM object.
@@ -132,14 +137,14 @@ var Frame = class _Frame extends import_js_toolkit.Base {
   /**
    * Go to the given url.
    */
-  async goTo(url, scroll = null) {
+  async goTo(url, formData = null, scroll = null) {
     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 content = await this.fetch(url, formData);
     const doc = this.parseHTML(content);
     const el = doc.querySelector(`#${this.id}`);
     const newFrame = new _Frame(el);
@@ -152,7 +157,7 @@ var Frame = class _Frame extends import_js_toolkit.Base {
     this.directChildrenFrameTarget.map(
       (target, index) => target.updateContent(newFrame.directChildrenFrameTarget[index])
     );
-    if (this.$options.history) {
+    if (this.$options.history && formData === null) {
       document.title = doc.title;
       (0, import_utils.historyPush)({ path: parsedUrl.pathname, search: parsedUrl.searchParams });
     }
@@ -171,7 +176,15 @@ var Frame = class _Frame extends import_js_toolkit.Base {
   /**
    * Fetch the given url.
    */
-  async fetch(url) {
+  async fetch(url, formData = null) {
+    if (formData) {
+      const promise2 = fetch(url, {
+        method: "post",
+        body: formData
+      }).then((response) => response.text());
+      const content = await promise2;
+      return content;
+    }
     const cached = cache.get(url);
     if (cached) {
       if (cached.status === "pending") {

package/organisms/Frame/Frame.cjs.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../packages/ui/organisms/Frame/Frame.ts"],
-  "sourcesContent": ["import { Base, isDirectChild, getDirectChildren } from '@studiometa/js-toolkit';\nimport type { BaseProps, BaseConfig } from '@studiometa/js-toolkit';\nimport { nextFrame, historyPush } from '@studiometa/js-toolkit/utils';\nimport { FrameAnchor } from './FrameAnchor.js';\nimport { FrameForm } from './FrameForm.js';\nimport { FrameTarget } from './FrameTarget.js';\n\n/**\n * Get the scroll position.\n */\nfunction getScrollPosition() {\n  return {\n    left: window.pageXOffset,\n    top: window.pageYOffset,\n  };\n}\n\n/**\n * The fetch cache.\n */\nconst cache: Map<\n  string,\n  { promise: Promise<string>; status: 'pending' | 'resolved' | 'error'; content: string }\n> = new Map();\n\nexport interface FrameProps extends BaseProps {\n  $children: {\n    FrameAnchor: FrameAnchor[];\n    FrameForm: FrameForm[];\n    FrameTarget: FrameTarget[];\n    // eslint-disable-next-line no-use-before-define\n    Frame: Frame[];\n  };\n  $options: {\n    history: boolean;\n  };\n}\n\n/**\n * Class.\n */\nexport class Frame<T extends BaseProps = BaseProps> extends Base<T & FrameProps> {\n  /**\n   * Config.\n   */\n  static config: BaseConfig = {\n    name: 'Frame',\n    emits: [\n      'before-fetch',\n      'after-fetch',\n      'before-leave',\n      'after-leave',\n      'before-content',\n      'after-content',\n      'before-enter',\n      'after-enter',\n    ],\n    components: {\n      FrameAnchor,\n      FrameForm,\n      FrameTarget,\n      Frame,\n    },\n    options: {\n      history: Boolean,\n    },\n  };\n\n  /**\n   * Get uniq id.\n   */\n  get id() {\n    return this.$el.id;\n  }\n\n  /**\n   * Get direct `FrameTarget` children.\n   */\n  get directChildrenFrameTarget(): FrameTarget[] {\n    return getDirectChildren(this, 'Frame', 'FrameTarget');\n  }\n\n  /**\n   * Prevent scroll top on unload.\n   */\n  onWindowUnload() {\n    const { history } = window;\n\n    if (!history.state) {\n      return;\n    }\n\n    history.replaceState(\n      {\n        ...history.state,\n        scroll: getScrollPosition(),\n      },\n      '',\n    );\n  }\n\n  /**\n   * Go to the previous URL on `popstate` event.\n   */\n  onWindowPopstate(event: PopStateEvent) {\n    this.goTo(window.location.href, event.state);\n  }\n\n  /**\n   * Prevent click on `FrameAnchor`.\n   */\n  onFrameAnchorClick(index: number, event: MouseEvent) {\n    // Prevent propagation of nested frames\n    if (!isDirectChild(this, 'Frame', 'FrameAnchor', this.$children.FrameAnchor[index])) {\n      return;\n    }\n\n    this.$log('onAFrameClick', index, event);\n    event.preventDefault();\n    const anchor = this.$children.FrameAnchor[index];\n\n    // Do nothing when clicking links on the same page\n    // @todo handle hash change\n    if (anchor.href === window.location.href) {\n      return;\n    }\n\n    this.goTo(anchor.href);\n  }\n\n  /**\n   * Prevent submit on forms.\n   */\n  onFrameFormSubmit(index: number, event: SubmitEvent) {\n    // Prevent propagation of nested frames\n    if (!isDirectChild(this, 'Frame', 'FrameForm', this.$children.FrameForm[index])) {\n      return;\n    }\n\n    this.$log('onFrameFormFrameSubmit', index, event);\n    event.preventDefault();\n    const form = this.$children.FrameForm[index];\n    const url = new URL(form.action);\n    // @ts-ignore\n    url.search = new URLSearchParams(new FormData(form.$el)).toString();\n    // @todo handle post request\n    this.goTo(url.toString());\n  }\n\n  /**\n   * Parge an HTML string into a DOM object.\n   */\n  parseHTML(string = '') {\n    return new DOMParser().parseFromString(string, 'text/html');\n  }\n\n  /**\n   * Go to the given url.\n   */\n  async goTo(url: string, scroll: { top: number; left: number } = null) {\n    this.$log('goTo', url);\n    const parsedUrl = new URL(url);\n\n    if (parsedUrl.origin !== window.location.origin) {\n      throw new Error('Cross origin request are not allowed.');\n    }\n\n    this.$emit('before-fetch', url);\n\n    // @todo add option to use content as is or to parse it and extract the new frame\n    const content = await this.fetch(url);\n    const doc = this.parseHTML(content);\n    const el = doc.querySelector(`#${this.id}`);\n    // @todo manage el === null\n    const newFrame = new Frame(el as HTMLElement);\n    newFrame.$children.registerAll();\n\n    this.$emit('after-fetch', url, content);\n\n    this.$emit('before-leave');\n    // Leave all\n    await Promise.all(this.directChildrenFrameTarget.map((target) => target.leave()));\n\n    this.$emit('after-leave');\n    this.$emit('before-content');\n\n    // Update content\n    // @todo insert non existing FrameTarget as well\n    this.directChildrenFrameTarget.map((target, index) =>\n      target.updateContent(newFrame.directChildrenFrameTarget[index]),\n    );\n\n    // Push history\n    if (this.$options.history) {\n      document.title = doc.title;\n      historyPush({ path: parsedUrl.pathname, search: parsedUrl.searchParams });\n    }\n\n    if (scroll) {\n      document.scrollingElement.scrollTop = scroll.top;\n      document.scrollingElement.scrollLeft = scroll.left;\n    }\n\n    // Update components\n    await nextFrame();\n    this.$root.$update();\n    await nextFrame();\n\n    this.$emit('after-content');\n    this.$emit('before-enter');\n\n    // Enter all\n    await Promise.all(this.directChildrenFrameTarget.map((target) => target.enter()));\n\n    this.$emit('after-enter');\n  }\n\n  /**\n   * Fetch the given url.\n   */\n  async fetch(url: string): Promise<string> {\n    const cached = cache.get(url);\n\n    if (cached) {\n      if (cached.status === 'pending') {\n        return cached.promise;\n      }\n\n      return cached.content;\n    }\n\n    const promise = fetch(url).then((response) => response.text());\n\n    try {\n      cache.set(url, {\n        promise,\n        status: 'pending',\n        content: undefined,\n      });\n\n      const content = await promise;\n\n      cache.set(url, {\n        promise,\n        status: 'resolved',\n        content,\n      });\n\n      return content;\n    } catch (err) {\n      cache.set(url, {\n        promise,\n        status: 'error',\n        content: err,\n      });\n\n      return err;\n    }\n  }\n}\n"],
-  "mappings": "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",
-  "names": []
+  "sourcesContent": ["import { Base, isDirectChild, getDirectChildren } from '@studiometa/js-toolkit';\nimport type { BaseProps, BaseConfig } from '@studiometa/js-toolkit';\nimport { nextFrame, historyPush } from '@studiometa/js-toolkit/utils';\nimport { FrameAnchor } from './FrameAnchor.js';\nimport { FrameForm } from './FrameForm.js';\nimport { FrameTarget } from './FrameTarget.js';\n\n/**\n * Get the scroll position.\n */\nfunction getScrollPosition() {\n  return {\n    left: window.pageXOffset,\n    top: window.pageYOffset,\n  };\n}\n\n/**\n * The fetch cache.\n */\nconst cache: Map<\n  string,\n  { promise: Promise<string>; status: 'pending' | 'resolved' | 'error'; content: string }\n> = new Map();\n\nexport interface FrameProps extends BaseProps {\n  $children: {\n    FrameAnchor: FrameAnchor[];\n    FrameForm: FrameForm[];\n    FrameTarget: FrameTarget[];\n    // eslint-disable-next-line no-use-before-define\n    Frame: Frame[];\n  };\n  $options: {\n    history: boolean;\n  };\n}\n\n/**\n * Class.\n */\nexport class Frame<T extends BaseProps = BaseProps> extends Base<T & FrameProps> {\n  /**\n   * Config.\n   */\n  static config: BaseConfig = {\n    name: 'Frame',\n    emits: [\n      'before-fetch',\n      'after-fetch',\n      'before-leave',\n      'after-leave',\n      'before-content',\n      'after-content',\n      'before-enter',\n      'after-enter',\n    ],\n    components: {\n      FrameAnchor,\n      FrameForm,\n      FrameTarget,\n      Frame,\n    },\n    options: {\n      history: Boolean,\n    },\n  };\n\n  /**\n   * Get uniq id.\n   */\n  get id() {\n    return this.$el.id;\n  }\n\n  /**\n   * Get direct `FrameTarget` children.\n   */\n  get directChildrenFrameTarget(): FrameTarget[] {\n    return getDirectChildren(this, 'Frame', 'FrameTarget');\n  }\n\n  /**\n   * Prevent scroll top on unload.\n   */\n  onWindowUnload() {\n    const { history } = window;\n\n    if (!history.state) {\n      return;\n    }\n\n    history.replaceState(\n      {\n        ...history.state,\n        scroll: getScrollPosition(),\n      },\n      '',\n    );\n  }\n\n  /**\n   * Go to the previous URL on `popstate` event.\n   */\n  onWindowPopstate(event: PopStateEvent) {\n    this.goTo(window.location.href, null, event.state);\n  }\n\n  /**\n   * Prevent click on `FrameAnchor`.\n   */\n  onFrameAnchorClick(index: number, event: MouseEvent) {\n    // Prevent propagation of nested frames\n    if (!isDirectChild(this, 'Frame', 'FrameAnchor', this.$children.FrameAnchor[index])) {\n      return;\n    }\n\n    this.$log('onAFrameClick', index, event);\n    event.preventDefault();\n    const anchor = this.$children.FrameAnchor[index];\n\n    // Do nothing when clicking links on the same page\n    // @todo handle hash change\n    if (anchor.href === window.location.href) {\n      return;\n    }\n\n    this.goTo(anchor.href);\n  }\n\n  /**\n   * Prevent submit on forms.\n   */\n  onFrameFormSubmit(index: number, event: SubmitEvent) {\n    // Prevent propagation of nested frames\n    if (!isDirectChild(this, 'Frame', 'FrameForm', this.$children.FrameForm[index])) {\n      return;\n    }\n\n    this.$log('onFrameFormFrameSubmit', index, event);\n    event.preventDefault();\n    const form = this.$children.FrameForm[index];\n    const url = new URL(form.action);\n\n    if (form.$el.method === 'get') {\n      // @ts-ignore\n      url.search = new URLSearchParams(new FormData(form.$el)).toString();\n      this.goTo(url.toString());\n    }\n\n    if (form.$el.method === 'post') {\n      this.goTo(url.toString(), new FormData(form.$el));\n    }\n  }\n\n  /**\n   * Parge an HTML string into a DOM object.\n   */\n  parseHTML(string = '') {\n    return new DOMParser().parseFromString(string, 'text/html');\n  }\n\n  /**\n   * Go to the given url.\n   */\n  async goTo(url: string, formData: FormData = null, scroll: { top: number; left: number } = null) {\n    this.$log('goTo', url);\n    const parsedUrl = new URL(url);\n\n    if (parsedUrl.origin !== window.location.origin) {\n      throw new Error('Cross origin request are not allowed.');\n    }\n\n    this.$emit('before-fetch', url);\n\n    // @todo add option to use content as is or to parse it and extract the new frame\n    const content = await this.fetch(url, formData);\n    const doc = this.parseHTML(content);\n    const el = doc.querySelector(`#${this.id}`);\n    // @todo manage el === null\n    const newFrame = new Frame(el as HTMLElement);\n    newFrame.$children.registerAll();\n\n    this.$emit('after-fetch', url, content);\n\n    this.$emit('before-leave');\n    // Leave all\n    await Promise.all(this.directChildrenFrameTarget.map((target) => target.leave()));\n\n    this.$emit('after-leave');\n    this.$emit('before-content');\n\n    // Update content\n    // @todo insert non existing FrameTarget as well\n    this.directChildrenFrameTarget.map((target, index) =>\n      target.updateContent(newFrame.directChildrenFrameTarget[index]),\n    );\n\n    // Push history\n    if (this.$options.history && formData === null) {\n      document.title = doc.title;\n      historyPush({ path: parsedUrl.pathname, search: parsedUrl.searchParams });\n    }\n\n    if (scroll) {\n      document.scrollingElement.scrollTop = scroll.top;\n      document.scrollingElement.scrollLeft = scroll.left;\n    }\n\n    // Update components\n    await nextFrame();\n    this.$root.$update();\n    await nextFrame();\n\n    this.$emit('after-content');\n    this.$emit('before-enter');\n\n    // Enter all\n    await Promise.all(this.directChildrenFrameTarget.map((target) => target.enter()));\n\n    this.$emit('after-enter');\n  }\n\n  /**\n   * Fetch the given url.\n   */\n  async fetch(url: string, formData: FormData = null): Promise<string> {\n    // @note skip cache for POST requests.\n    if (formData) {\n      const promise = fetch(url, {\n        method: 'post',\n        body: formData,\n      }).then((response) => response.text());\n\n      const content = await promise;\n      return content;\n    }\n\n    const cached = cache.get(url);\n\n    if (cached) {\n      if (cached.status === 'pending') {\n        return cached.promise;\n      }\n\n      return cached.content;\n    }\n\n    const promise = fetch(url).then((response) => response.text());\n\n    try {\n      cache.set(url, {\n        promise,\n        status: 'pending',\n        content: undefined,\n      });\n\n      const content = await promise;\n\n      cache.set(url, {\n        promise,\n        status: 'resolved',\n        content,\n      });\n\n      return content;\n    } catch (err) {\n      cache.set(url, {\n        promise,\n        status: 'error',\n        content: err,\n      });\n\n      return err;\n    }\n  }\n}\n"],
+  "mappings": "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",
+  "names": ["promise"]
 }

package/organisms/Frame/Frame.d.ts

@@ -53,12 +53,12 @@ export declare class Frame<T extends BaseProps = BaseProps> extends Base<T & Fra
     /**
      * Go to the given url.
      */
-    goTo(url: string, scroll?: {
+    goTo(url: string, formData?: FormData, scroll?: {
         top: number;
         left: number;
     }): Promise<void>;
     /**
      * Fetch the given url.
      */
-    fetch(url: string): Promise<string>;
+    fetch(url: string, formData?: FormData): Promise<string>;
 }

package/organisms/Frame/Frame.js

@@ -68,7 +68,7 @@ class Frame extends Base {
    * Go to the previous URL on `popstate` event.
    */
   onWindowPopstate(event) {
-    this.goTo(window.location.href, event.state);
+    this.goTo(window.location.href, null, event.state);
   }
   /**
    * Prevent click on `FrameAnchor`.
@@ -96,8 +96,13 @@ class Frame extends Base {
     event.preventDefault();
     const form = this.$children.FrameForm[index];
     const url = new URL(form.action);
-    url.search = new URLSearchParams(new FormData(form.$el)).toString();
-    this.goTo(url.toString());
+    if (form.$el.method === "get") {
+      url.search = new URLSearchParams(new FormData(form.$el)).toString();
+      this.goTo(url.toString());
+    }
+    if (form.$el.method === "post") {
+      this.goTo(url.toString(), new FormData(form.$el));
+    }
   }
   /**
    * Parge an HTML string into a DOM object.
@@ -108,14 +113,14 @@ class Frame extends Base {
   /**
    * Go to the given url.
    */
-  async goTo(url, scroll = null) {
+  async goTo(url, formData = null, scroll = null) {
     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 content = await this.fetch(url, formData);
     const doc = this.parseHTML(content);
     const el = doc.querySelector(`#${this.id}`);
     const newFrame = new Frame(el);
@@ -128,7 +133,7 @@ class Frame extends Base {
     this.directChildrenFrameTarget.map(
       (target, index) => target.updateContent(newFrame.directChildrenFrameTarget[index])
     );
-    if (this.$options.history) {
+    if (this.$options.history && formData === null) {
       document.title = doc.title;
       historyPush({ path: parsedUrl.pathname, search: parsedUrl.searchParams });
     }
@@ -147,7 +152,15 @@ class Frame extends Base {
   /**
    * Fetch the given url.
    */
-  async fetch(url) {
+  async fetch(url, formData = null) {
+    if (formData) {
+      const promise2 = fetch(url, {
+        method: "post",
+        body: formData
+      }).then((response) => response.text());
+      const content = await promise2;
+      return content;
+    }
     const cached = cache.get(url);
     if (cached) {
       if (cached.status === "pending") {