@studiometa/ui 0.1.1 → 0.2.2

package/molecules/Modal/ModalWithTransition.js

@@ -0,0 +1,69 @@
+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 Modal from "./Modal.js";
+class ModalWithTransition extends Modal {
+  open() {
+    this.$refs.modal.style.visibility = "";
+    return super.open();
+  }
+  close() {
+    var __superGet = (key) => super[key];
+    return __async(this, null, function* () {
+      yield __superGet("close").call(this);
+      this.$refs.modal.style.visibility = "hidden";
+      return Promise.resolve();
+    });
+  }
+}
+__publicField(ModalWithTransition, "config", {
+  name: "ModalWithTransition",
+  options: {
+    styles: {
+      type: Object,
+      default: () => ({
+        modal: {
+          closed: {
+            opacity: "0",
+            pointerEvents: "none"
+          },
+          active: "transition duration-500 ease-out-expo"
+        },
+        overlay: {
+          closed: "opacity-0",
+          active: "transition duration-500 ease-out-expo"
+        },
+        container: {
+          closed: "transform scale-95 opacity-0",
+          active: "transition duration-500 ease-out-expo"
+        }
+      })
+    }
+  }
+});
+export {
+  ModalWithTransition as default
+};

package/molecules/Panel/Panel.cjs

@@ -0,0 +1,148 @@
+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__ */ ((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;
+};
+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/Panel/Panel.js
+var Panel_exports = {};
+__export(Panel_exports, {
+  default: () => Panel
+});
+var import_utils = require("@studiometa/js-toolkit/utils");
+var import_Modal = __toESM(require("../Modal/Modal.cjs"), 1);
+var _Panel = class extends import_Modal.default {
+  get translateClass() {
+    var _a;
+    return (_a = _Panel.translateClasses[this.$options.position]) != null ? _a : _Panel.translateClasses[_Panel.config.options.position.default];
+  }
+  get containerOffset() {
+    const { offsetTop, offsetLeft, offsetWidth, offsetHeight } = this.$refs.container;
+    const store = {
+      top: {
+        translateY: (offsetTop + offsetHeight) * -1
+      },
+      right: {
+        translateX: window.innerWidth - offsetLeft + offsetWidth * 2
+      },
+      bottom: {
+        translateY: window.innerHeight - offsetTop + offsetHeight * 2
+      },
+      left: {
+        translateX: (offsetLeft + offsetWidth) * -1
+      }
+    };
+    return (0, import_utils.matrix)(store[this.$options.position]);
+  }
+  open() {
+    var __superGet = (key) => super[key];
+    return __async(this, null, function* () {
+      if (this.isOpen) {
+        return Promise.resolve();
+      }
+      this.$refs.modal.classList.remove("pointer-events-none");
+      (0, import_utils.transition)(this.$refs.container, {
+        from: {
+          transform: this.containerOffset
+        },
+        to: {
+          transform: "none"
+        }
+      }, "keep");
+      (0, import_utils.transition)(this.$refs.overlay, {
+        from: "opacity-0"
+      });
+      return __superGet("open").call(this);
+    });
+  }
+  close() {
+    var __superGet = (key) => super[key];
+    return __async(this, null, function* () {
+      if (!this.isOpen || this.isClosing) {
+        return Promise.resolve();
+      }
+      this.isClosing = true;
+      this.$refs.modal.classList.add("pointer-events-none");
+      yield Promise.all([
+        (0, import_utils.transition)(this.$refs.container, {
+          from: {
+            transform: "none"
+          },
+          to: {
+            transform: this.containerOffset
+          }
+        }, "keep"),
+        (0, import_utils.transition)(this.$refs.overlay, {
+          to: "opacity-0"
+        }, "keep")
+      ]);
+      this.isClosing = false;
+      return __superGet("close").call(this);
+    });
+  }
+};
+var Panel = _Panel;
+__publicField(Panel, "config", {
+  name: "Panel",
+  options: {
+    position: {
+      type: String,
+      default: "left"
+    }
+  }
+});
+__publicField(Panel, "translateClasses", {
+  top: "-translate-y-full",
+  right: "translate-x-full",
+  bottom: "translate-y-full",
+  left: "-translate-x-full"
+});
+module.exports = __toCommonJS(Panel_exports);
+if (module.exports.default) module.exports = module.exports.default;

package/molecules/Panel/Panel.d.ts

@@ -0,0 +1,42 @@
+/**
+ * @typedef {import('../Modal/Modal.js').ModalInterface} ModalInterface
+ * @typedef {Panel & ModalInterface} PanelInterface
+ * @typedef {typeof Modal} ModalConstructor
+ */
+/**
+ * Panel class.
+ */
+export default class Panel extends Modal {
+    /**
+     * Config.
+     */
+    static config: {
+        name: string;
+        options: {
+            position: {
+                type: StringConstructor;
+                default: string;
+            };
+        };
+    };
+    static translateClasses: {
+        top: string;
+        right: string;
+        bottom: string;
+        left: string;
+    };
+    /**
+     * Get the translation class.
+     * @returns {string}
+     */
+    get translateClass(): string;
+    /**
+     * @this {PanelInterface}
+     */
+    get containerOffset(): string;
+    isClosing: boolean;
+}
+export type ModalInterface = import('../Modal/Modal.js').ModalInterface;
+export type PanelInterface = Panel & ModalInterface;
+export type ModalConstructor = typeof Modal;
+import Modal from "../Modal/Modal.js";

package/molecules/Panel/Panel.js

@@ -0,0 +1,117 @@
+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 { transition, matrix } from "@studiometa/js-toolkit/utils";
+import Modal from "../Modal/Modal.js";
+const _Panel = class extends Modal {
+  get translateClass() {
+    var _a;
+    return (_a = _Panel.translateClasses[this.$options.position]) != null ? _a : _Panel.translateClasses[_Panel.config.options.position.default];
+  }
+  get containerOffset() {
+    const { offsetTop, offsetLeft, offsetWidth, offsetHeight } = this.$refs.container;
+    const store = {
+      top: {
+        translateY: (offsetTop + offsetHeight) * -1
+      },
+      right: {
+        translateX: window.innerWidth - offsetLeft + offsetWidth * 2
+      },
+      bottom: {
+        translateY: window.innerHeight - offsetTop + offsetHeight * 2
+      },
+      left: {
+        translateX: (offsetLeft + offsetWidth) * -1
+      }
+    };
+    return matrix(store[this.$options.position]);
+  }
+  open() {
+    var __superGet = (key) => super[key];
+    return __async(this, null, function* () {
+      if (this.isOpen) {
+        return Promise.resolve();
+      }
+      this.$refs.modal.classList.remove("pointer-events-none");
+      transition(this.$refs.container, {
+        from: {
+          transform: this.containerOffset
+        },
+        to: {
+          transform: "none"
+        }
+      }, "keep");
+      transition(this.$refs.overlay, {
+        from: "opacity-0"
+      });
+      return __superGet("open").call(this);
+    });
+  }
+  close() {
+    var __superGet = (key) => super[key];
+    return __async(this, null, function* () {
+      if (!this.isOpen || this.isClosing) {
+        return Promise.resolve();
+      }
+      this.isClosing = true;
+      this.$refs.modal.classList.add("pointer-events-none");
+      yield Promise.all([
+        transition(this.$refs.container, {
+          from: {
+            transform: "none"
+          },
+          to: {
+            transform: this.containerOffset
+          }
+        }, "keep"),
+        transition(this.$refs.overlay, {
+          to: "opacity-0"
+        }, "keep")
+      ]);
+      this.isClosing = false;
+      return __superGet("close").call(this);
+    });
+  }
+};
+let Panel = _Panel;
+__publicField(Panel, "config", {
+  name: "Panel",
+  options: {
+    position: {
+      type: String,
+      default: "left"
+    }
+  }
+});
+__publicField(Panel, "translateClasses", {
+  top: "-translate-y-full",
+  right: "translate-x-full",
+  bottom: "translate-y-full",
+  left: "-translate-x-full"
+});
+export {
+  Panel as default
+};

package/molecules/Slider/AbstractSliderChild.cjs

@@ -0,0 +1,74 @@
+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__ */ ((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/molecules/Slider/AbstractSliderChild.js
+var AbstractSliderChild_exports = {};
+__export(AbstractSliderChild_exports, {
+  default: () => AbstractSliderChild
+});
+var import_js_toolkit = require("@studiometa/js-toolkit");
+var import_utils = require("@studiometa/js-toolkit/utils");
+var import_Slider = __toESM(require("./Slider.cjs"), 1);
+var AbstractSliderChild = class extends import_js_toolkit.Base {
+  constructor() {
+    super(...arguments);
+    __publicField(this, "$parent");
+  }
+  mounted() {
+    if (!(this.$parent instanceof import_Slider.default)) {
+      throw new Error(`The \`${this.$options.name}\` component must be a direct child of a \`Slider\` component.`);
+    }
+    this.$parent.$on("index", this);
+  }
+  resized() {
+    (0, import_utils.nextFrame)(() => {
+      this.update(this.$parent.currentIndex);
+    });
+  }
+  destroyed() {
+    this.$parent.$off("index", this);
+  }
+  handleEvent(event) {
+    if (event.type === "index") {
+      this.update(event.detail[0]);
+    }
+  }
+  update(index) {
+    throw new Error(`The \`AbstractSliderChild.update(${index})\` method must be implemented.`);
+  }
+};
+__publicField(AbstractSliderChild, "config", {
+  name: "AbstractSliderChild"
+});
+module.exports = __toCommonJS(AbstractSliderChild_exports);
+if (module.exports.default) module.exports = module.exports.default;

package/molecules/Slider/AbstractSliderChild.d.ts

@@ -0,0 +1,55 @@
+/**
+ * @typedef {AbstractSliderChild & { $parent: Slider, $refs: { progress: HTMLElement } }} AbstractSliderChildInterface
+ */
+/**
+ * AbstractSliderChild class.
+ */
+export default class AbstractSliderChild extends Base {
+    /**
+     * Config.
+     */
+    static config: {
+        name: string;
+    };
+    /**
+     * Listen to the `goto` event of the parent on mount.
+     * @returns {void}
+     */
+    mounted(): void;
+    /**
+     * Trigger update on resize.
+     *
+     * @this    {AbstractSliderChildInterface}
+     * @returns {void}
+     */
+    resized(): void;
+    /**
+     * Remove the event listener.
+     *
+     * @returns {void}
+     */
+    destroyed(): void;
+    /**
+     * Dispatch event.
+     *
+     * @param   {CustomEvent} event
+     * @returns {void}
+     */
+    handleEvent(event: CustomEvent): void;
+    /**
+     * Update the child component with the given index.
+     *
+     * @this    {AbstractSliderChildInterface}
+     * @param   {number} index The new active index.
+     * @returns {void}
+     */
+    update(index: number): void;
+}
+export type AbstractSliderChildInterface = AbstractSliderChild & {
+    $parent: Slider;
+    $refs: {
+        progress: HTMLElement;
+    };
+};
+import { Base } from "@studiometa/js-toolkit";
+import Slider from "./Slider.js";

package/molecules/Slider/AbstractSliderChild.js

@@ -0,0 +1,43 @@
+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";
+import { nextFrame } from "@studiometa/js-toolkit/utils";
+import Slider from "./Slider.js";
+class AbstractSliderChild extends Base {
+  constructor() {
+    super(...arguments);
+    __publicField(this, "$parent");
+  }
+  mounted() {
+    if (!(this.$parent instanceof Slider)) {
+      throw new Error(`The \`${this.$options.name}\` component must be a direct child of a \`Slider\` component.`);
+    }
+    this.$parent.$on("index", this);
+  }
+  resized() {
+    nextFrame(() => {
+      this.update(this.$parent.currentIndex);
+    });
+  }
+  destroyed() {
+    this.$parent.$off("index", this);
+  }
+  handleEvent(event) {
+    if (event.type === "index") {
+      this.update(event.detail[0]);
+    }
+  }
+  update(index) {
+    throw new Error(`The \`AbstractSliderChild.update(${index})\` method must be implemented.`);
+  }
+}
+__publicField(AbstractSliderChild, "config", {
+  name: "AbstractSliderChild"
+});
+export {
+  AbstractSliderChild as default
+};