@studiometa/ui 0.2.3 → 0.2.6

package/molecules/Accordion/Accordion.cjs

@@ -1,47 +1,24 @@
 var __create = Object.create;
 var __defProp = Object.defineProperty;
-var __defProps = Object.defineProperties;
 var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
-var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
 var __getOwnPropNames = Object.getOwnPropertyNames;
-var __getOwnPropSymbols = Object.getOwnPropertySymbols;
 var __getProtoOf = Object.getPrototypeOf;
 var __hasOwnProp = Object.prototype.hasOwnProperty;
-var __propIsEnum = Object.prototype.propertyIsEnumerable;
 var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
-var __spreadValues = (a, b) => {
-  for (var prop in b || (b = {}))
-    if (__hasOwnProp.call(b, prop))
-      __defNormalProp(a, prop, b[prop]);
-  if (__getOwnPropSymbols)
-    for (var prop of __getOwnPropSymbols(b)) {
-      if (__propIsEnum.call(b, prop))
-        __defNormalProp(a, prop, b[prop]);
-    }
-  return a;
-};
-var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
-var __markAsModule = (target) => __defProp(target, "__esModule", { value: true });
 var __export = (target, all) => {
   for (var name in all)
     __defProp(target, name, { get: all[name], enumerable: true });
 };
-var __reExport = (target, module2, copyDefault, desc) => {
-  if (module2 && typeof module2 === "object" || typeof module2 === "function") {
-    for (let key of __getOwnPropNames(module2))
-      if (!__hasOwnProp.call(target, key) && (copyDefault || key !== "default"))
-        __defProp(target, key, { get: () => module2[key], enumerable: !(desc = __getOwnPropDesc(module2, key)) || desc.enumerable });
+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 target;
-};
-var __toESM = (module2, isNodeMode) => {
-  return __reExport(__markAsModule(__defProp(module2 != null ? __create(__getProtoOf(module2)) : {}, "default", !isNodeMode && module2 && module2.__esModule ? { get: () => module2.default, enumerable: true } : { value: module2, enumerable: true })), module2);
+  return to;
 };
-var __toCommonJS = /* @__PURE__ */ ((cache) => {
-  return (module2, temp) => {
-    return cache && cache.get(module2) || (temp = __reExport(__markAsModule({}), module2, 1), cache && cache.set(module2, temp), temp);
-  };
-})(typeof WeakMap !== "undefined" ? /* @__PURE__ */ new WeakMap() : 0);
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target, mod));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
 var __publicField = (obj, key, value) => {
   __defNormalProp(obj, typeof key !== "symbol" ? key + "" : key, value);
   return value;
@@ -52,14 +29,15 @@ var Accordion_exports = {};
 __export(Accordion_exports, {
   default: () => Accordion
 });
+module.exports = __toCommonJS(Accordion_exports);
 var import_AccordionCore = __toESM(require("./AccordionCore.cjs"), 1);
 var import_AccordionItem = __toESM(require("./AccordionItem.cjs"), 1);
 var Accordion = class extends import_AccordionCore.default {
 };
-__publicField(Accordion, "config", __spreadProps(__spreadValues({}, import_AccordionCore.default.config), {
+__publicField(Accordion, "config", {
+  ...import_AccordionCore.default.config,
   components: {
     AccordionItem: import_AccordionItem.default
   }
-}));
-module.exports = __toCommonJS(Accordion_exports);
+});
 if (module.exports.default) module.exports = module.exports.default;

package/molecules/Accordion/Accordion.js

@@ -1,35 +1 @@
-var __defProp = Object.defineProperty;
-var __defProps = Object.defineProperties;
-var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
-var __getOwnPropSymbols = Object.getOwnPropertySymbols;
-var __hasOwnProp = Object.prototype.hasOwnProperty;
-var __propIsEnum = Object.prototype.propertyIsEnumerable;
-var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
-var __spreadValues = (a, b) => {
-  for (var prop in b || (b = {}))
-    if (__hasOwnProp.call(b, prop))
-      __defNormalProp(a, prop, b[prop]);
-  if (__getOwnPropSymbols)
-    for (var prop of __getOwnPropSymbols(b)) {
-      if (__propIsEnum.call(b, prop))
-        __defNormalProp(a, prop, b[prop]);
-    }
-  return a;
-};
-var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
-var __publicField = (obj, key, value) => {
-  __defNormalProp(obj, typeof key !== "symbol" ? key + "" : key, value);
-  return value;
-};
-import AccordionCore from "./AccordionCore.js";
-import AccordionItem from "./AccordionItem.js";
-class Accordion extends AccordionCore {
-}
-__publicField(Accordion, "config", __spreadProps(__spreadValues({}, AccordionCore.config), {
-  components: {
-    AccordionItem
-  }
-}));
-export {
-  Accordion as default
-};
+import o from"./AccordionCore.js";import c from"./AccordionItem.js";class r extends o{static config={...o.config,components:{AccordionItem:c}}}export{r as default};

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/Accordion/AccordionCore.cjs

@@ -3,24 +3,19 @@ var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
 var __getOwnPropNames = Object.getOwnPropertyNames;
 var __hasOwnProp = Object.prototype.hasOwnProperty;
 var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
-var __markAsModule = (target) => __defProp(target, "__esModule", { value: true });
 var __export = (target, all) => {
   for (var name in all)
     __defProp(target, name, { get: all[name], enumerable: true });
 };
-var __reExport = (target, module2, copyDefault, desc) => {
-  if (module2 && typeof module2 === "object" || typeof module2 === "function") {
-    for (let key of __getOwnPropNames(module2))
-      if (!__hasOwnProp.call(target, key) && (copyDefault || key !== "default"))
-        __defProp(target, key, { get: () => module2[key], enumerable: !(desc = __getOwnPropDesc(module2, key)) || desc.enumerable });
+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 target;
+  return to;
 };
-var __toCommonJS = /* @__PURE__ */ ((cache) => {
-  return (module2, temp) => {
-    return cache && cache.get(module2) || (temp = __reExport(__markAsModule({}), module2, 1), cache && cache.set(module2, temp), temp);
-  };
-})(typeof WeakMap !== "undefined" ? /* @__PURE__ */ new WeakMap() : 0);
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
 var __publicField = (obj, key, value) => {
   __defNormalProp(obj, typeof key !== "symbol" ? key + "" : key, value);
   return value;
@@ -31,6 +26,7 @@ var AccordionCore_exports = {};
 __export(AccordionCore_exports, {
   default: () => Accordion
 });
+module.exports = __toCommonJS(AccordionCore_exports);
 var import_js_toolkit = require("@studiometa/js-toolkit");
 var Accordion = class extends import_js_toolkit.Base {
   onAccordionItemOpen(index) {
@@ -56,5 +52,4 @@ __publicField(Accordion, "config", {
     }
   }
 });
-module.exports = __toCommonJS(AccordionCore_exports);
 if (module.exports.default) module.exports = module.exports.default;

package/molecules/Accordion/AccordionCore.d.ts

@@ -51,13 +51,13 @@ export default class Accordion extends Base {
      * @param {number} index
      * @return {void}
      */
-    onAccordionItemOpen(index: number): void;
+    onAccordionItemOpen(this: AccordionInterface, index: number): void;
     /**
      * @this {AccordionInterface}
      * @param {number} index
      * @return {void}
      */
-    onAccordionItemClose(index: number): void;
+    onAccordionItemClose(this: AccordionInterface, index: number): void;
 }
 export type AccordionItem = import('./AccordionItem').default;
 export type AccordionItemOptions = import('./AccordionItem').AccordionItemOptions;

package/molecules/Accordion/AccordionCore.js

@@ -1,34 +1 @@
-var __defProp = Object.defineProperty;
-var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
-var __publicField = (obj, key, value) => {
-  __defNormalProp(obj, typeof key !== "symbol" ? key + "" : key, value);
-  return value;
-};
-import { Base } from "@studiometa/js-toolkit";
-class Accordion extends Base {
-  onAccordionItemOpen(index) {
-    const accordionItem = this.$children.AccordionItem[index];
-    this.$emit("open", accordionItem, index);
-    if (this.$options.autoclose) {
-      this.$children.AccordionItem.filter((el, i) => index !== i).forEach((item) => item.close());
-    }
-  }
-  onAccordionItemClose(index) {
-    const accordionItem = this.$children.AccordionItem[index];
-    this.$emit("close", accordionItem, index);
-  }
-}
-__publicField(Accordion, "config", {
-  name: "Accordion",
-  emits: ["open", "close"],
-  options: {
-    autoclose: Boolean,
-    item: {
-      type: Object,
-      default: () => ({})
-    }
-  }
-});
-export {
-  Accordion as default
-};
+import{Base as i}from"@studiometa/js-toolkit";class n extends i{static config={name:"Accordion",emits:["open","close"],options:{autoclose:Boolean,item:{type:Object,default:()=>({})}}};onAccordionItemOpen(o){const c=this.$children.AccordionItem[o];this.$emit("open",c,o),this.$options.autoclose&&this.$children.AccordionItem.filter((t,e)=>o!==e).forEach(t=>t.close())}onAccordionItemClose(o){const c=this.$children.AccordionItem[o];this.$emit("close",c,o)}}export{n as default};

package/molecules/Accordion/AccordionItem.cjs

@@ -2,74 +2,34 @@ var __create = Object.create;
 var __defProp = Object.defineProperty;
 var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
 var __getOwnPropNames = Object.getOwnPropertyNames;
-var __getOwnPropSymbols = Object.getOwnPropertySymbols;
 var __getProtoOf = Object.getPrototypeOf;
 var __hasOwnProp = Object.prototype.hasOwnProperty;
-var __propIsEnum = Object.prototype.propertyIsEnumerable;
 var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
-var __markAsModule = (target) => __defProp(target, "__esModule", { value: true });
-var __objRest = (source, exclude) => {
-  var target = {};
-  for (var prop in source)
-    if (__hasOwnProp.call(source, prop) && exclude.indexOf(prop) < 0)
-      target[prop] = source[prop];
-  if (source != null && __getOwnPropSymbols)
-    for (var prop of __getOwnPropSymbols(source)) {
-      if (exclude.indexOf(prop) < 0 && __propIsEnum.call(source, prop))
-        target[prop] = source[prop];
-    }
-  return target;
-};
 var __export = (target, all) => {
   for (var name in all)
     __defProp(target, name, { get: all[name], enumerable: true });
 };
-var __reExport = (target, module2, copyDefault, desc) => {
-  if (module2 && typeof module2 === "object" || typeof module2 === "function") {
-    for (let key of __getOwnPropNames(module2))
-      if (!__hasOwnProp.call(target, key) && (copyDefault || key !== "default"))
-        __defProp(target, key, { get: () => module2[key], enumerable: !(desc = __getOwnPropDesc(module2, key)) || desc.enumerable });
+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 target;
-};
-var __toESM = (module2, isNodeMode) => {
-  return __reExport(__markAsModule(__defProp(module2 != null ? __create(__getProtoOf(module2)) : {}, "default", !isNodeMode && module2 && module2.__esModule ? { get: () => module2.default, enumerable: true } : { value: module2, enumerable: true })), module2);
+  return to;
 };
-var __toCommonJS = /* @__PURE__ */ ((cache) => {
-  return (module2, temp) => {
-    return cache && cache.get(module2) || (temp = __reExport(__markAsModule({}), module2, 1), cache && cache.set(module2, temp), temp);
-  };
-})(typeof WeakMap !== "undefined" ? /* @__PURE__ */ new WeakMap() : 0);
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target, mod));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
 var __publicField = (obj, key, value) => {
   __defNormalProp(obj, typeof key !== "symbol" ? key + "" : key, value);
   return value;
 };
-var __async = (__this, __arguments, generator) => {
-  return new Promise((resolve, reject) => {
-    var fulfilled = (value) => {
-      try {
-        step(generator.next(value));
-      } catch (e) {
-        reject(e);
-      }
-    };
-    var rejected = (value) => {
-      try {
-        step(generator.throw(value));
-      } catch (e) {
-        reject(e);
-      }
-    };
-    var step = (x) => x.done ? resolve(x.value) : Promise.resolve(x.value).then(fulfilled, rejected);
-    step((generator = generator.apply(__this, __arguments)).next());
-  });
-};
 
 // packages/ui/molecules/Accordion/AccordionItem.js
 var AccordionItem_exports = {};
 __export(AccordionItem_exports, {
   default: () => AccordionItem
 });
+module.exports = __toCommonJS(AccordionItem_exports);
 var import_deepmerge = __toESM(require("deepmerge"), 1);
 var import_js_toolkit = require("@studiometa/js-toolkit");
 var import_utils = require("@studiometa/js-toolkit/utils");
@@ -94,7 +54,7 @@ var _AccordionItem = class extends import_js_toolkit.Base {
     this.$refs.content.setAttribute("id", this.contentId);
     const { isOpen } = this.$options;
     this.updateAttributes(isOpen);
-    const _a = this.$options.styles, { container } = _a, otherStyles = __objRest(_a, ["container"]);
+    const { container, ...otherStyles } = this.$options.styles;
     const refs = this.$refs;
     Object.entries(otherStyles).filter(([refName]) => refs[refName]).forEach(([refName, { open, closed } = { open: "", closed: "" }]) => {
       (0, import_utils.transition)(refs[refName], { to: isOpen ? open : closed }, "keep");
@@ -120,69 +80,65 @@ var _AccordionItem = class extends import_js_toolkit.Base {
     this.$refs.content.setAttribute("aria-hidden", isOpen ? "false" : "true");
     this.$refs.btn.setAttribute("aria-expanded", isOpen ? "true" : "false");
   }
-  open() {
-    return __async(this, null, function* () {
-      if (this.$options.isOpen) {
-        return;
-      }
-      this.$log("open");
-      this.$emit("open");
-      this.$options.isOpen = true;
-      this.updateAttributes(this.$options.isOpen);
-      this.$refs.container.style.visibility = "";
-      const _a = this.$options.styles, { container } = _a, otherStyles = __objRest(_a, ["container"]);
-      const refs = this.$refs;
-      yield Promise.all([
-        (0, import_utils.transition)(refs.container, {
-          from: { height: "0" },
-          active: container.active,
-          to: { height: `${refs.content.offsetHeight}px` }
-        }).then(() => {
-          if (this.$options.isOpen) {
-            refs.content.style.position = "";
-          }
-          return Promise.resolve();
-        }),
-        ...Object.entries(otherStyles).filter(([refName]) => refs[refName]).map(([refName, { open, active, closed } = { open: "", active: "", closed: "" }]) => (0, import_utils.transition)(refs[refName], {
-          from: closed,
-          active,
-          to: open
-        }, "keep"))
-      ]);
-    });
+  async open() {
+    if (this.$options.isOpen) {
+      return;
+    }
+    this.$log("open");
+    this.$emit("open");
+    this.$options.isOpen = true;
+    this.updateAttributes(this.$options.isOpen);
+    this.$refs.container.style.visibility = "";
+    const { container, ...otherStyles } = this.$options.styles;
+    const refs = this.$refs;
+    await Promise.all([
+      (0, import_utils.transition)(refs.container, {
+        from: { height: "0" },
+        active: container.active,
+        to: { height: `${refs.content.offsetHeight}px` }
+      }).then(() => {
+        if (this.$options.isOpen) {
+          refs.content.style.position = "";
+        }
+        return Promise.resolve();
+      }),
+      ...Object.entries(otherStyles).filter(([refName]) => refs[refName]).map(([refName, { open, active, closed } = { open: "", active: "", closed: "" }]) => (0, import_utils.transition)(refs[refName], {
+        from: closed,
+        active,
+        to: open
+      }, "keep"))
+    ]);
   }
-  close() {
-    return __async(this, null, function* () {
-      if (!this.$options.isOpen) {
-        return;
-      }
-      this.$log("close");
-      this.$emit("close");
-      this.$options.isOpen = false;
-      const height = this.$refs.container.offsetHeight;
-      this.$refs.content.style.position = "absolute";
-      const _a = this.$options.styles, { container } = _a, otherStyles = __objRest(_a, ["container"]);
-      const refs = this.$refs;
-      yield Promise.all([
-        (0, import_utils.transition)(refs.container, {
-          from: { height: `${height}px` },
-          active: container.active,
-          to: { height: "0" }
-        }).then(() => {
-          if (!this.$options.isOpen) {
-            refs.container.style.height = "0";
-            refs.container.style.visibility = "invisible";
-            this.updateAttributes(this.$options.isOpen);
-          }
-          return Promise.resolve();
-        }),
-        ...Object.entries(otherStyles).filter(([refName]) => refs[refName]).map(([refName, { open, active, closed } = { open: "", active: "", closed: "" }]) => (0, import_utils.transition)(refs[refName], {
-          from: open,
-          active,
-          to: closed
-        }, "keep"))
-      ]);
-    });
+  async close() {
+    if (!this.$options.isOpen) {
+      return;
+    }
+    this.$log("close");
+    this.$emit("close");
+    this.$options.isOpen = false;
+    const height = this.$refs.container.offsetHeight;
+    this.$refs.content.style.position = "absolute";
+    const { container, ...otherStyles } = this.$options.styles;
+    const refs = this.$refs;
+    await Promise.all([
+      (0, import_utils.transition)(refs.container, {
+        from: { height: `${height}px` },
+        active: container.active,
+        to: { height: "0" }
+      }).then(() => {
+        if (!this.$options.isOpen) {
+          refs.container.style.height = "0";
+          refs.container.style.visibility = "invisible";
+          this.updateAttributes(this.$options.isOpen);
+        }
+        return Promise.resolve();
+      }),
+      ...Object.entries(otherStyles).filter(([refName]) => refs[refName]).map(([refName, { open, active, closed } = { open: "", active: "", closed: "" }]) => (0, import_utils.transition)(refs[refName], {
+        from: open,
+        active,
+        to: closed
+      }, "keep"))
+    ]);
   }
 };
 var AccordionItem = _AccordionItem;
@@ -200,9 +156,9 @@ __publicField(AccordionItem, "config", {
           active: "",
           closed: ""
         }
-      })
+      }),
+      merge: true
     }
   }
 });
-module.exports = __toCommonJS(AccordionItem_exports);
 if (module.exports.default) module.exports = module.exports.default;

package/molecules/Accordion/AccordionItem.d.ts

@@ -52,6 +52,7 @@ export default class AccordionItem extends Base {
                  * @return {AccordionItemStylesOption}
                  */
                 default: () => AccordionItemStylesOption;
+                merge: boolean;
             };
         };
     };
@@ -59,17 +60,17 @@ export default class AccordionItem extends Base {
      * Add aria-attributes on mounted.
      * @this {AccordionItemInterface}
      */
-    mounted(): void;
+    mounted(this: AccordionItemInterface): void;
     /**
      * Remove styles on destroy.
      * @this {AccordionItemInterface}
      */
-    destroyed(): void;
+    destroyed(this: AccordionItemInterface): void;
     /**
      * Handler for the click event on the `btn` ref.
      * @this {AccordionItemInterface}
      */
-    onBtnClick(): void;
+    onBtnClick(this: AccordionItemInterface): void;
     /**
      * Get the content ID.
      * @return {String}
@@ -81,17 +82,17 @@ export default class AccordionItem extends Base {
      * @this {AccordionItemInterface}
      * @param  {Boolean} isOpen The state of the item.
      */
-    updateAttributes(isOpen: boolean): void;
+    updateAttributes(this: AccordionItemInterface, isOpen: boolean): void;
     /**
      * Open an item.
      * @this {AccordionItemInterface}
      */
-    open(): Promise<void>;
+    open(this: AccordionItemInterface): Promise<void>;
     /**
      * Close an item.
      * @this {AccordionItemInterface}
      */
-    close(): Promise<void>;
+    close(this: AccordionItemInterface): Promise<void>;
 }
 export type BaseOptions = import('@studiometa/js-toolkit/Base').BaseOptions;
 export type AccordionInterface = import('./AccordionCore.js').AccordionInterface;