@studiometa/ui 0.1.1 → 0.2.2

package/molecules/index.cjs

@@ -0,0 +1,50 @@
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+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 });
+  }
+  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);
+};
+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);
+
+// packages/ui/molecules/index.js
+var molecules_exports = {};
+__export(molecules_exports, {
+  Accordion: () => import_Accordion.default,
+  AccordionItem: () => import_AccordionItem.default,
+  Modal: () => import_Modal.default,
+  ModalWithTransition: () => import_ModalWithTransition.default,
+  Panel: () => import_Panel.default,
+  Sticky: () => import_Sticky.default,
+  Tabs: () => import_Tabs.default
+});
+__reExport(molecules_exports, require("./Slider/index.cjs"));
+__reExport(molecules_exports, require("./TableOfContent/index.cjs"));
+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);
+var import_ModalWithTransition = __toESM(require("./Modal/ModalWithTransition.cjs"), 1);
+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

@@ -0,0 +1,9 @@
+export * from "./Slider/index.js";
+export * from "./TableOfContent/index.js";
+export { default as Accordion } from "./Accordion/Accordion.js";
+export { default as AccordionItem } from "./Accordion/AccordionItem.js";
+export { default as Modal } from "./Modal/Modal.js";
+export { default as ModalWithTransition } from "./Modal/ModalWithTransition.js";
+export { default as Panel } from "./Panel/Panel.js";
+export { default as Sticky } from "./Sticky/Sticky.js";
+export { default as Tabs } from "./Tabs/Tabs.js";

package/molecules/index.js

@@ -0,0 +1,18 @@
+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
+};

package/organisms/Frame/Frame.cjs

@@ -0,0 +1,202 @@
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+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 });
+  }
+  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);
+};
+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 __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
+});
+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);
+var cache = /* @__PURE__ */ new Map();
+var _Frame = class extends import_js_toolkit.Base {
+  get id() {
+    return this.$el.id;
+  }
+  getDirectChild(name) {
+    if (!this.$children[name]) {
+      return [];
+    }
+    if (!this.$children.Frame) {
+      return this.$children[name];
+    }
+    return this.$children[name].filter((child) => this.$children.Frame.every((frame) => frame.$children[name] ? !frame.$children[name].includes(child) : true));
+  }
+  get directChildFrameAnchor() {
+    return this.getDirectChild("FrameAnchor");
+  }
+  get directChildFrameForm() {
+    return this.getDirectChild("form");
+  }
+  get directChildFrameTarget() {
+    return this.getDirectChild("FrameTarget");
+  }
+  onFrameAnchorFrameClick(event, index) {
+    if (!this.directChildFrameAnchor.includes(this.$children.FrameAnchor[index])) {
+      return;
+    }
+    this.$log("onAFrameClick", event, index);
+    event.preventDefault();
+    const anchor = this.$children.FrameAnchor[index];
+    if (anchor.href === window.location.href) {
+      return;
+    }
+    this.goTo(anchor.href);
+  }
+  onFrameFormFrameSubmit(event, index) {
+    if (!this.directChildFrameForm.includes(this.$children.FrameForm[index])) {
+      return;
+    }
+    this.$log("onFrameFormFrameSubmit", event);
+    event.preventDefault();
+    const form = this.$children.FrameForm[index];
+    this.goTo(form.action);
+  }
+  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;
+      }
+    });
+  }
+};
+var Frame = _Frame;
+__publicField(Frame, "config", {
+  name: "Frame",
+  emits: [
+    "before-fetch",
+    "after-fetch",
+    "before-leave",
+    "after-leave",
+    "before-content",
+    "after-content",
+    "before-enter",
+    "after-enter"
+  ],
+  log: true,
+  components: {
+    FrameAnchor: import_FrameAnchor.default,
+    FrameForm: import_FrameForm.default,
+    FrameTarget: import_FrameTarget.default,
+    Frame: _Frame
+  },
+  options: {
+    history: Boolean
+  }
+});
+module.exports = __toCommonJS(Frame_exports);
+if (module.exports.default) module.exports = module.exports.default;

package/organisms/Frame/Frame.d.ts

@@ -0,0 +1,119 @@
+/**
+ * @typedef {Object} FrameOptions
+ * @property {boolean} history
+ * @property {'replace'|'prepend'|'append'} position
+ * @property {string} target
+ */
+/**
+ * @typedef {Frame & {
+ *   $children: {
+ *     FrameAnchor: FrameAnchor[],
+ *     FrameForm: FrameForm[],
+ *     FrameTarget: FrameTarget[],
+ *     Frame: Frame[],
+ *   }
+ * }} FrameInterface
+ */
+/**
+ * Class.
+ */
+export default class Frame extends Base {
+    /**
+     * Config.
+     */
+    static config: {
+        name: string;
+        emits: string[];
+        log: boolean;
+        components: {
+            FrameAnchor: typeof FrameAnchor;
+            FrameForm: typeof FrameForm;
+            FrameTarget: typeof FrameTarget;
+            Frame: typeof Frame;
+        };
+        options: {
+            history: BooleanConstructor;
+        };
+    };
+    /**
+     * Get uniq id.
+     * @returns {string}
+     */
+    get id(): string;
+    /**
+     * Get direct children.
+     *
+     * @this    {FrameInterface}
+     * @param   {string} name
+     * @returns {any[]}
+     */
+    getDirectChild(name: string): any[];
+    /**
+     * Get direct `FrameAnchor` children.
+     * @returns {FrameAnchor[]}
+     */
+    get directChildFrameAnchor(): FrameAnchor[];
+    /**
+     * Get direct `FrameForm` children.
+     * @returns {FrameForm[]}
+     */
+    get directChildFrameForm(): FrameForm[];
+    /**
+     * Get direct `FrameTarget` children.
+     * @returns {FrameTarget[]}
+     */
+    get directChildFrameTarget(): FrameTarget[];
+    /**
+     * Prevent click on `FrameAnchor`.
+     *
+     * @this    {FrameInterface}
+     * @param   {MouseEvent} event
+     * @param   {number} index
+     * @returns {void}
+     */
+    onFrameAnchorFrameClick(event: MouseEvent, index: number): void;
+    /**
+     * Prevent submit on forms.
+     *
+     * @this    {FrameInterface}
+     * @param   {SubmitEvent} event
+     * @param   {number} index
+     * @returns {void}
+     */
+    onFrameFormFrameSubmit(event: SubmitEvent, index: number): void;
+    /**
+     * Parge an HTML string into a DOM object.
+     * @param   {string} string
+     * @returns {Document}
+     */
+    parseHTML(string?: string): Document;
+    /**
+     * Go to the given url.
+     * @param   {string} url
+     * @returns {Promise<void>}
+     */
+    goTo(url: string): Promise<void>;
+    /**
+     * Fetch the given url.
+     * @param   {string} url
+     * @returns {Promise<string>}
+     */
+    fetch(url: string): Promise<string>;
+}
+export type FrameOptions = {
+    history: boolean;
+    position: 'replace' | 'prepend' | 'append';
+    target: string;
+};
+export type FrameInterface = Frame & {
+    $children: {
+        FrameAnchor: FrameAnchor[];
+        FrameForm: FrameForm[];
+        FrameTarget: FrameTarget[];
+        Frame: Frame[];
+    };
+};
+import { Base } from "@studiometa/js-toolkit";
+import FrameAnchor from "./FrameAnchor.js";
+import FrameForm from "./FrameForm.js";
+import FrameTarget from "./FrameTarget.js";

package/organisms/Frame/Frame.js

@@ -0,0 +1,171 @@
+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 { nextFrame, historyPush } from "@studiometa/js-toolkit/utils";
+import FrameAnchor from "./FrameAnchor.js";
+import FrameForm from "./FrameForm.js";
+import FrameTarget from "./FrameTarget.js";
+const cache = /* @__PURE__ */ new Map();
+const _Frame = class extends Base {
+  get id() {
+    return this.$el.id;
+  }
+  getDirectChild(name) {
+    if (!this.$children[name]) {
+      return [];
+    }
+    if (!this.$children.Frame) {
+      return this.$children[name];
+    }
+    return this.$children[name].filter((child) => this.$children.Frame.every((frame) => frame.$children[name] ? !frame.$children[name].includes(child) : true));
+  }
+  get directChildFrameAnchor() {
+    return this.getDirectChild("FrameAnchor");
+  }
+  get directChildFrameForm() {
+    return this.getDirectChild("form");
+  }
+  get directChildFrameTarget() {
+    return this.getDirectChild("FrameTarget");
+  }
+  onFrameAnchorFrameClick(event, index) {
+    if (!this.directChildFrameAnchor.includes(this.$children.FrameAnchor[index])) {
+      return;
+    }
+    this.$log("onAFrameClick", event, index);
+    event.preventDefault();
+    const anchor = this.$children.FrameAnchor[index];
+    if (anchor.href === window.location.href) {
+      return;
+    }
+    this.goTo(anchor.href);
+  }
+  onFrameFormFrameSubmit(event, index) {
+    if (!this.directChildFrameForm.includes(this.$children.FrameForm[index])) {
+      return;
+    }
+    this.$log("onFrameFormFrameSubmit", event);
+    event.preventDefault();
+    const form = this.$children.FrameForm[index];
+    this.goTo(form.action);
+  }
+  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;
+        historyPush({ path: parsedUrl.pathname, search: parsedUrl.searchParams });
+      }
+      yield nextFrame();
+      this.$root.$update();
+      yield 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;
+      }
+    });
+  }
+};
+let Frame = _Frame;
+__publicField(Frame, "config", {
+  name: "Frame",
+  emits: [
+    "before-fetch",
+    "after-fetch",
+    "before-leave",
+    "after-leave",
+    "before-content",
+    "after-content",
+    "before-enter",
+    "after-enter"
+  ],
+  log: true,
+  components: {
+    FrameAnchor,
+    FrameForm,
+    FrameTarget,
+    Frame: _Frame
+  },
+  options: {
+    history: Boolean
+  }
+});
+export {
+  Frame as default
+};

package/organisms/Frame/FrameAnchor.cjs

@@ -0,0 +1,48 @@
+var __defProp = Object.defineProperty;
+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 });
+  }
+  return target;
+};
+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 __publicField = (obj, key, value) => {
+  __defNormalProp(obj, typeof key !== "symbol" ? key + "" : key, value);
+  return value;
+};
+
+// packages/ui/organisms/Frame/FrameAnchor.js
+var FrameAnchor_exports = {};
+__export(FrameAnchor_exports, {
+  default: () => FrameAnchor
+});
+var import_js_toolkit = require("@studiometa/js-toolkit");
+var FrameAnchor = class extends import_js_toolkit.Base {
+  get href() {
+    return this.$el.href;
+  }
+  onClick(event) {
+    this.$emit("frame-click", event);
+  }
+};
+__publicField(FrameAnchor, "config", {
+  name: "FrameAnchor",
+  emits: ["frame-click"]
+});
+module.exports = __toCommonJS(FrameAnchor_exports);
+if (module.exports.default) module.exports = module.exports.default;

package/organisms/Frame/FrameAnchor.d.ts

@@ -0,0 +1,35 @@
+/**
+ * @typedef {FrameAnchor & {
+ *   $el: HTMLAnchorElement
+ * }} FrameAnchorInterface
+ */
+/**
+ * FrameAnchor class.
+ */
+export default class FrameAnchor extends Base {
+    /**
+     * Config.
+     */
+    static config: {
+        name: string;
+        emits: string[];
+    };
+    /**
+     * Get the URL.
+     *
+     * @this    {FrameAnchorInterface}
+     * @returns {string}
+     */
+    get href(): string;
+    /**
+     * Dispatch the link click event.
+     *
+     * @param   {MouseEvent} event
+     * @returns {void}
+     */
+    onClick(event: MouseEvent): void;
+}
+export type FrameAnchorInterface = FrameAnchor & {
+    $el: HTMLAnchorElement;
+};
+import { Base } from "@studiometa/js-toolkit";

package/organisms/Frame/FrameAnchor.js

@@ -0,0 +1,22 @@
+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 FrameAnchor extends Base {
+  get href() {
+    return this.$el.href;
+  }
+  onClick(event) {
+    this.$emit("frame-click", event);
+  }
+}
+__publicField(FrameAnchor, "config", {
+  name: "FrameAnchor",
+  emits: ["frame-click"]
+});
+export {
+  FrameAnchor as default
+};