@studiometa/ui 0.2.3 → 0.2.6

package/molecules/Tabs/Tabs.js

@@ -1,126 +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;
-};
-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());
-  });
-};
-import { Base } from "@studiometa/js-toolkit";
-import { transition } from "@studiometa/js-toolkit/utils";
-class Tabs extends Base {
-  mounted() {
-    this.items = this.$refs.btn.map((btn, index) => {
-      const id = `${this.$id}-${index}`;
-      const content = this.$refs.content[index];
-      btn.setAttribute("id", id);
-      content.setAttribute("aria-labelledby", id);
-      const item = { btn, content, isEnabled: index > 0 };
-      if (index > 0) {
-        this.disableItem(item);
-      } else {
-        this.enableItem(item);
-      }
-      return item;
-    });
-  }
-  onBtnClick(event, index) {
-    this.items.forEach((item, i) => {
-      if (i !== index) {
-        this.disableItem(item);
-      }
-    });
-    this.enableItem(this.items[index]);
-  }
-  enableItem(item) {
-    return __async(this, null, function* () {
-      if (!item || item.isEnabled) {
-        return Promise.resolve(this);
-      }
-      item.isEnabled = true;
-      const { btn, content } = item;
-      const btnStyles = this.$options.styles.btn || {};
-      const contentStyles = this.$options.styles.content || {};
-      content.setAttribute("aria-hidden", "false");
-      this.$emit("enable", item);
-      return Promise.all([
-        transition(btn, {
-          from: btnStyles.closed,
-          active: btnStyles.active,
-          to: btnStyles.open
-        }, "keep"),
-        transition(content, {
-          from: contentStyles.closed,
-          active: contentStyles.active,
-          to: contentStyles.open
-        }, "keep")
-      ]).then(() => Promise.resolve(this));
-    });
-  }
-  disableItem(item) {
-    return __async(this, null, function* () {
-      if (!item || !item.isEnabled) {
-        return Promise.resolve(this);
-      }
-      item.isEnabled = false;
-      const { btn, content } = item;
-      const btnStyles = this.$options.styles.btn || {};
-      const contentStyles = this.$options.styles.content || {};
-      content.setAttribute("aria-hidden", "true");
-      this.$emit("disable", item);
-      return Promise.all([
-        transition(btn, {
-          from: btnStyles.open,
-          active: btnStyles.active,
-          to: btnStyles.closed
-        }, "keep"),
-        transition(content, {
-          from: contentStyles.open,
-          active: contentStyles.active,
-          to: contentStyles.closed
-        }, "keep")
-      ]).then(() => Promise.resolve(this));
-    });
-  }
-}
-__publicField(Tabs, "config", {
-  name: "Tabs",
-  refs: ["btn[]", "content[]"],
-  emits: ["enable", "disable"],
-  options: {
-    styles: {
-      type: Object,
-      default: () => ({
-        content: {
-          closed: {
-            position: "absolute",
-            opacity: "0",
-            pointerEvents: "none",
-            visibility: "hidden"
-          }
-        }
-      })
-    }
-  }
-});
-export {
-  Tabs as default
-};
+import{Base as a}from"@studiometa/js-toolkit";import{transition as o}from"@studiometa/js-toolkit/utils";class l extends a{static config={name:"Tabs",refs:["btn[]","content[]"],emits:["enable","disable"],options:{styles:{type:Object,default:()=>({content:{closed:{position:"absolute",opacity:"0",pointerEvents:"none",visibility:"hidden"}}}),merge:!0}}};mounted(){this.items=this.$refs.btn.map((t,s)=>{const i=`${this.$id}-${s}`,e=this.$refs.content[s];t.setAttribute("id",i),e.setAttribute("aria-labelledby",i);const n={btn:t,content:e,isEnabled:s>0};return s>0?this.disableItem(n):this.enableItem(n),n})}onBtnClick(t,s){this.items.forEach((i,e)=>{e!==s&&this.disableItem(i)}),this.enableItem(this.items[s])}async enableItem(t){if(!t||t.isEnabled)return Promise.resolve(this);t.isEnabled=!0;const{btn:s,content:i}=t,e=this.$options.styles.btn||{},n=this.$options.styles.content||{};return i.setAttribute("aria-hidden","false"),this.$emit("enable",t),Promise.all([o(s,{from:e.closed,active:e.active,to:e.open},"keep"),o(i,{from:n.closed,active:n.active,to:n.open},"keep")]).then(()=>Promise.resolve(this))}async disableItem(t){if(!t||!t.isEnabled)return Promise.resolve(this);t.isEnabled=!1;const{btn:s,content:i}=t,e=this.$options.styles.btn||{},n=this.$options.styles.content||{};return i.setAttribute("aria-hidden","true"),this.$emit("disable",t),Promise.all([o(s,{from:e.open,active:e.active,to:e.closed},"keep"),o(i,{from:n.open,active:n.active,to:n.closed},"keep")]).then(()=>Promise.resolve(this))}}export{l as default};

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/molecules/index.cjs

@@ -4,27 +4,21 @@ var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
 var __getOwnPropNames = Object.getOwnPropertyNames;
 var __getProtoOf = Object.getPrototypeOf;
 var __hasOwnProp = Object.prototype.hasOwnProperty;
-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 __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);
-};
-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 __reExport = (target, mod, secondTarget) => (__copyProps(target, mod, "default"), secondTarget && __copyProps(secondTarget, mod, "default"));
+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);
 
 // packages/ui/molecules/index.js
 var molecules_exports = {};
@@ -37,8 +31,10 @@ __export(molecules_exports, {
   Sticky: () => import_Sticky.default,
   Tabs: () => import_Tabs.default
 });
-__reExport(molecules_exports, require("./Slider/index.cjs"));
-__reExport(molecules_exports, require("./TableOfContent/index.cjs"));
+module.exports = __toCommonJS(molecules_exports);
+__reExport(molecules_exports, require("./Menu/index.cjs"), module.exports);
+__reExport(molecules_exports, require("./Slider/index.cjs"), module.exports);
+__reExport(molecules_exports, require("./TableOfContent/index.cjs"), module.exports);
 var import_Accordion = __toESM(require("./Accordion/Accordion.cjs"), 1);
 var import_AccordionItem = __toESM(require("./Accordion/AccordionItem.cjs"), 1);
 var import_Modal = __toESM(require("./Modal/Modal.cjs"), 1);
@@ -46,5 +42,4 @@ var import_ModalWithTransition = __toESM(require("./Modal/ModalWithTransition.cj
 var import_Panel = __toESM(require("./Panel/Panel.cjs"), 1);
 var import_Sticky = __toESM(require("./Sticky/Sticky.cjs"), 1);
 var import_Tabs = __toESM(require("./Tabs/Tabs.cjs"), 1);
-module.exports = __toCommonJS(molecules_exports);
 if (module.exports.default) module.exports = module.exports.default;

package/molecules/index.d.ts

@@ -1,3 +1,4 @@
+export * from "./Menu/index.js";
 export * from "./Slider/index.js";
 export * from "./TableOfContent/index.js";
 export { default as Accordion } from "./Accordion/Accordion.js";

package/molecules/index.js

@@ -1,18 +1 @@
-export * from "./Slider/index.js";
-export * from "./TableOfContent/index.js";
-import { default as default2 } from "./Accordion/Accordion.js";
-import { default as default3 } from "./Accordion/AccordionItem.js";
-import { default as default4 } from "./Modal/Modal.js";
-import { default as default5 } from "./Modal/ModalWithTransition.js";
-import { default as default6 } from "./Panel/Panel.js";
-import { default as default7 } from "./Sticky/Sticky.js";
-import { default as default8 } from "./Tabs/Tabs.js";
-export {
-  default2 as Accordion,
-  default3 as AccordionItem,
-  default4 as Modal,
-  default5 as ModalWithTransition,
-  default6 as Panel,
-  default7 as Sticky,
-  default8 as Tabs
-};
+export*from"./Menu/index.js";export*from"./Slider/index.js";export*from"./TableOfContent/index.js";import{default as f}from"./Accordion/Accordion.js";import{default as m}from"./Accordion/AccordionItem.js";import{default as p}from"./Modal/Modal.js";import{default as s}from"./Modal/ModalWithTransition.js";import{default as i}from"./Panel/Panel.js";import{default as n}from"./Sticky/Sticky.js";import{default as M}from"./Tabs/Tabs.js";export{f as Accordion,m as AccordionItem,p as Modal,s as ModalWithTransition,i as Panel,n as Sticky,M as Tabs};

package/organisms/Frame/Frame.cjs

@@ -5,62 +5,42 @@ var __getOwnPropNames = Object.getOwnPropertyNames;
 var __getProtoOf = Object.getPrototypeOf;
 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 __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);
-};
-var __toCommonJS = /* @__PURE__ */ ((cache2) => {
-  return (module2, temp) => {
-    return cache2 && cache2.get(module2) || (temp = __reExport(__markAsModule({}), module2, 1), cache2 && cache2.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/organisms/Frame/Frame.js
 var Frame_exports = {};
 __export(Frame_exports, {
   default: () => Frame
 });
+module.exports = __toCommonJS(Frame_exports);
 var import_js_toolkit = require("@studiometa/js-toolkit");
 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() {
@@ -84,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;
@@ -108,70 +117,70 @@ var _Frame = class extends import_js_toolkit.Base {
   parseHTML(string = "") {
     return new DOMParser().parseFromString(string, "text/html");
   }
-  goTo(url) {
-    return __async(this, null, function* () {
-      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 = yield this.fetch(url);
-      const doc = this.parseHTML(content);
-      const el = doc.querySelector(`#${this.id}`);
-      const newFrame = new _Frame(el);
-      newFrame.$children.registerAll();
-      this.$emit("after-fetch", url, content);
-      this.$emit("before-leave");
-      yield Promise.all(this.directChildFrameTarget.map((target) => target.leave()));
-      this.$emit("after-leave");
-      this.$emit("before-content");
-      this.directChildFrameTarget.map((target, index) => target.updateContent(newFrame.directChildFrameTarget[index]));
-      if (this.$options.history) {
-        document.title = doc.title;
-        (0, import_utils.historyPush)({ path: parsedUrl.pathname, search: parsedUrl.searchParams });
-      }
-      yield (0, import_utils.nextFrame)();
-      this.$root.$update();
-      yield (0, import_utils.nextFrame)();
-      this.$emit("after-content");
-      this.$emit("before-enter");
-      yield Promise.all(this.directChildFrameTarget.map((target) => target.enter()));
-      this.$emit("after-enter");
-    });
-  }
-  fetch(url) {
-    return __async(this, null, function* () {
-      const cached = cache.get(url);
-      if (cached) {
-        if (cached.status === "pending") {
-          return cached.promise;
-        }
-        return cached.content;
-      }
-      const promise = fetch(url);
-      try {
-        cache.set(url, {
-          promise,
-          status: "pending",
-          content: void 0
-        });
-        const content = yield promise.then((response) => response.text());
-        cache.set(url, {
-          promise,
-          status: "resolved",
-          content
-        });
-        return content;
-      } catch (err) {
-        cache.set(url, {
-          promise,
-          status: "error",
-          content: err
-        });
-        return err;
+  async goTo(url, 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 doc = this.parseHTML(content);
+    const el = doc.querySelector(`#${this.id}`);
+    const newFrame = new _Frame(el);
+    newFrame.$children.registerAll();
+    this.$emit("after-fetch", url, content);
+    this.$emit("before-leave");
+    await Promise.all(this.directChildFrameTarget.map((target) => target.leave()));
+    this.$emit("after-leave");
+    this.$emit("before-content");
+    this.directChildFrameTarget.map((target, index) => target.updateContent(newFrame.directChildFrameTarget[index]));
+    if (this.$options.history) {
+      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)();
+    this.$emit("after-content");
+    this.$emit("before-enter");
+    await Promise.all(this.directChildFrameTarget.map((target) => target.enter()));
+    this.$emit("after-enter");
+  }
+  async fetch(url) {
+    const cached = cache.get(url);
+    if (cached) {
+      if (cached.status === "pending") {
+        return cached.promise;
       }
-    });
+      return cached.content;
+    }
+    const promise = fetch(url);
+    try {
+      cache.set(url, {
+        promise,
+        status: "pending",
+        content: void 0
+      });
+      const content = await promise.then((response) => response.text());
+      cache.set(url, {
+        promise,
+        status: "resolved",
+        content
+      });
+      return content;
+    } catch (err) {
+      cache.set(url, {
+        promise,
+        status: "error",
+        content: err
+      });
+      return err;
+    }
   }
 };
 var Frame = _Frame;
@@ -198,5 +207,4 @@ __publicField(Frame, "config", {
     history: Boolean
   }
 });
-module.exports = __toCommonJS(Frame_exports);
 if (module.exports.default) module.exports = module.exports.default;

package/organisms/Frame/Frame.d.ts

@@ -47,7 +47,7 @@ export default class Frame extends Base {
      * @param   {string} name
      * @returns {any[]}
      */
-    getDirectChild(name: string): any[];
+    getDirectChild(this: FrameInterface, name: string): any[];
     /**
      * Get direct `FrameAnchor` children.
      * @returns {FrameAnchor[]}
@@ -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`.
      *
@@ -71,7 +100,7 @@ export default class Frame extends Base {
      * @param   {number} index
      * @returns {void}
      */
-    onFrameAnchorFrameClick(event: MouseEvent, index: number): void;
+    onFrameAnchorFrameClick(this: FrameInterface, event: MouseEvent, index: number): void;
     /**
      * Prevent submit on forms.
      *
@@ -80,7 +109,7 @@ export default class Frame extends Base {
      * @param   {number} index
      * @returns {void}
      */
-    onFrameFormFrameSubmit(event: SubmitEvent, index: number): void;
+    onFrameFormFrameSubmit(this: FrameInterface, event: SubmitEvent, index: number): void;
     /**
      * Parge an HTML string into a DOM object.
      * @param   {string} string
@@ -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