@studiometa/ui 0.1.1 → 0.2.0

package/molecules/Modal/Modal.js

@@ -0,0 +1,151 @@
+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, focusTrap } from "@studiometa/js-toolkit/utils";
+const { trap, untrap, saveActiveElement } = focusTrap();
+class Modal extends Base {
+  get onOpenClick() {
+    return this.open;
+  }
+  get onCloseClick() {
+    return this.close;
+  }
+  get onOverlayClick() {
+    return this.close;
+  }
+  mounted() {
+    this.isOpen = false;
+    this.close();
+    if (this.$options.move) {
+      const target = document.querySelector(this.$options.move) || document.body;
+      this.__refsBackup = this.$refs;
+      this.__refModalPlaceholder = document.createComment("");
+      this.__refModalParentBackup = this.$refs.modal.parentElement || this.$el;
+      this.__refModalParentBackup.insertBefore(this.__refModalPlaceholder, this.$refs.modal);
+      target.appendChild(this.$refs.modal);
+    }
+    return this;
+  }
+  get $refs() {
+    const $refs = super.$refs;
+    if (this.$options.move && this.__refsBackup) {
+      Object.entries(this.__refsBackup).forEach(([key, ref]) => {
+        if (!$refs[key]) {
+          $refs[key] = ref;
+        }
+      });
+    }
+    return $refs;
+  }
+  destroyed() {
+    this.close();
+    if (this.$options.move && this.__refModalParentBackup) {
+      this.__refModalParentBackup.insertBefore(this.$refs.modal, this.__refModalPlaceholder);
+      this.__refModalPlaceholder.remove();
+      delete this.__refModalPlaceholder;
+      delete this.__refModalParentBackup;
+    }
+    return this;
+  }
+  keyed({ event, isUp, isDown, ESC }) {
+    if (!this.isOpen) {
+      return;
+    }
+    if (isDown) {
+      trap(this.$refs.modal, event);
+    }
+    if (ESC && isUp) {
+      this.close();
+    }
+  }
+  open() {
+    return __async(this, null, function* () {
+      if (this.isOpen) {
+        return Promise.resolve(this);
+      }
+      this.$refs.modal.setAttribute("aria-hidden", "false");
+      document.documentElement.style.overflow = "hidden";
+      this.isOpen = true;
+      this.$emit("open");
+      const refs = this.$refs;
+      return Promise.all(Object.entries(this.$options.styles).map(([refName, { open, active, closed } = { open: "", active: "", closed: "" }]) => transition(refs[refName], {
+        from: closed,
+        active,
+        to: open
+      }, "keep"))).then(() => {
+        if (this.$options.autofocus && this.$refs.modal.querySelector(this.$options.autofocus)) {
+          saveActiveElement();
+          const autofocusElement = this.$refs.modal.querySelector(this.$options.autofocus);
+          autofocusElement.focus();
+        }
+        return Promise.resolve(this);
+      });
+    });
+  }
+  close() {
+    return __async(this, null, function* () {
+      if (!this.isOpen) {
+        return Promise.resolve(this);
+      }
+      this.$refs.modal.setAttribute("aria-hidden", "true");
+      document.documentElement.style.overflow = "";
+      this.isOpen = false;
+      untrap();
+      this.$emit("close");
+      const refs = this.$refs;
+      return Promise.all(Object.entries(this.$options.styles).map(([refName, { open, active, closed } = { open: "", active: "", closed: "" }]) => transition(refs[refName], {
+        from: open,
+        active,
+        to: closed
+      }, "keep"))).then(() => Promise.resolve(this));
+    });
+  }
+}
+__publicField(Modal, "config", {
+  name: "Modal",
+  refs: ["close", "container", "content", "modal", "open", "overlay"],
+  emits: ["open", "close"],
+  options: {
+    move: String,
+    autofocus: { type: String, default: "[autofocus]" },
+    styles: {
+      type: Object,
+      default: () => ({
+        modal: {
+          closed: {
+            opacity: "0",
+            pointerEvents: "none",
+            visibility: "hidden"
+          }
+        }
+      })
+    }
+  }
+});
+export {
+  Modal as default
+};

package/molecules/Sticky/Sticky.cjs

@@ -0,0 +1,133 @@
+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/molecules/Sticky/Sticky.js
+var Sticky_exports = {};
+__export(Sticky_exports, {
+  default: () => Sticky
+});
+var import_js_toolkit = require("@studiometa/js-toolkit");
+var import_primitives = require("../../primitives/index.cjs");
+var _Sticky = class extends import_js_toolkit.Base {
+  constructor() {
+    super(...arguments);
+    __publicField(this, "isSticky", false);
+    __publicField(this, "isVisible", true);
+  }
+  set y(value) {
+    this.$refs.inner.style.transform = `translateY(${value}px) translateZ(0px)`;
+  }
+  get instances() {
+    return Array.from(_Sticky.instances);
+  }
+  mounted() {
+    _Sticky.instances.add(this);
+    this.setSentinelSize();
+  }
+  resized() {
+    this.setSentinelSize();
+  }
+  destroyed() {
+    _Sticky.instances.delete(this);
+  }
+  scrolled(props) {
+    if (!this.isSticky || props.y === props.last.y) {
+      return;
+    }
+    if (props.direction.y === "DOWN" && this.$options.hideWhenDown || props.direction.y === "UP" && this.$options.hideWhenUp) {
+      this.hide();
+    } else {
+      this.show();
+    }
+  }
+  onSentinelIntersected([entry]) {
+    this.isSticky = entry.isIntersecting && entry.boundingClientRect.y < 0;
+    this.setPosition();
+  }
+  hide() {
+    if (!this.isVisible) {
+      return;
+    }
+    this.isVisible = false;
+    this.$el.classList.add("pointer-events-none");
+    this.instances.forEach((instance, index) => instance.setPosition(index));
+  }
+  show() {
+    if (this.isVisible) {
+      return;
+    }
+    this.isVisible = true;
+    this.$el.classList.remove("pointer-events-none");
+    this.instances.forEach((instance, index) => instance.setPosition(index));
+  }
+  setSentinelSize() {
+    const { instances } = this;
+    const index = instances.findIndex((instance) => instance === this);
+    const height = instances.slice(0, index).filter((instance) => this.closestRelativeElement(instance.$el).contains(this.$el)).reduce((acc, instance) => acc + instance.$el.offsetHeight, 0);
+    this.$refs.sentinelRef.style.height = `${height + 1}px`;
+    this.$el.style.top = `${height}px`;
+    this.$el.style.zIndex = String(this.$options.zIndex - index);
+  }
+  setPosition(index) {
+    if (!this.isSticky) {
+      this.y = 0;
+      return;
+    }
+    const { instances } = this;
+    index = index != null ? index : instances.findIndex((instance) => instance === this);
+    this.y = instances.slice(0, index).filter((instance) => instance.isSticky && !instance.isVisible).reduce((y, instance) => {
+      return y - instance.$refs.inner.offsetHeight;
+    }, this.isVisible ? 0 : this.$refs.inner.offsetHeight * -1);
+  }
+  closestRelativeElement(element) {
+    let parent = element.parentElement;
+    while (getComputedStyle(parent).position !== "relative" && parent.parentElement) {
+      parent = parent.parentElement;
+    }
+    return parent;
+  }
+};
+var Sticky = _Sticky;
+__publicField(Sticky, "config", {
+  name: "Sticky",
+  refs: ["inner", "sentinelRef"],
+  components: {
+    Sentinel: import_primitives.Sentinel
+  },
+  options: {
+    zIndex: {
+      type: Number,
+      default: 100
+    },
+    hideWhenUp: Boolean,
+    hideWhenDown: Boolean
+  }
+});
+__publicField(Sticky, "instances", /* @__PURE__ */ new Set());
+module.exports = __toCommonJS(Sticky_exports);
+if (module.exports.default) module.exports = module.exports.default;

package/molecules/Sticky/Sticky.d.ts

@@ -0,0 +1,141 @@
+/**
+ * @typedef {Object} StickyRefs
+ * @property {HTMLElement} inner
+ * @property {HTMLElement} sentinelRef
+ */
+/**
+ * @typedef {Object} StickyPrivateInterface
+ * @property {StickyRefs} $refs
+ * @property {{ zIndex: number, hideWhenUp: boolean, hideWhenDown: boolean }} $options
+ * @property {{ Sentinel: Sentinel[] }} $children
+ */
+/**
+ * @typedef {Sticky & StickyPrivateInterface} StickyInterface
+ */
+/**
+ * Sticky class.
+ */
+export default class Sticky extends Base {
+    /**
+     * Config.
+     */
+    static config: {
+        name: string;
+        refs: string[];
+        components: {
+            Sentinel: typeof Sentinel;
+        };
+        options: {
+            zIndex: {
+                type: NumberConstructor;
+                default: number;
+            };
+            hideWhenUp: BooleanConstructor;
+            hideWhenDown: BooleanConstructor;
+        };
+    };
+    /**
+     * Holder for all instances.
+     * @type {Set<StickyInterface>}
+     */
+    static instances: Set<StickyInterface>;
+    /**
+     * Is the component sticky?
+     * @type {boolean}
+     */
+    isSticky: boolean;
+    /**
+     * Is the component visible?
+     * @type {Boolean}
+     */
+    isVisible: boolean;
+    /**
+     * Set the Y value.
+     *
+     * @this    {StickyInterface}
+     * @param   {number} value
+     * @returns {void}
+     */
+    set y(arg: number);
+    /**
+     * Get instances as array.
+     * @return {Array<StickyInterface>}
+     */
+    get instances(): StickyInterface[];
+    /**
+     * Mounted hook.
+     * @this {StickyInterface}
+     */
+    mounted(): void;
+    /**
+     * Resized hook.
+     * @this {StickyInterface}
+     * @returns {void}
+     */
+    resized(): void;
+    /**
+     * Destroyed hook.
+     * @this {StickyInterface}
+     */
+    destroyed(): void;
+    /**
+     * Scrolled hook.
+     * @this {StickyInterface}
+     */
+    scrolled(props: any): void;
+    /**
+     * Listen to the sentinel's `intersected` event to set the `isSticky` value.
+     *
+     * @param   {IntersectionObserverEntry[]} entries
+     * @returns {void}
+     */
+    onSentinelIntersected([entry]: IntersectionObserverEntry[]): void;
+    /**
+     * Hide the sticky component when another one is sticky.
+     * @this {StickyInterface}
+     */
+    hide(): void;
+    /**
+     * Show the sticky component when the other one is not sticky anymore.
+     * @this {StickyInterface}
+     */
+    show(): void;
+    /**
+     * Set the sentinel height based on the previous instances.
+     * @this {StickyInterface}
+     */
+    setSentinelSize(): void;
+    /**
+     * Set the component's position.
+     *
+     * @this    {StickyInterface}
+     * @param   {number} [index] The instance index in all the pages' instances.
+     * @returns {void}
+     */
+    setPosition(index?: number): void;
+    /**
+     * Find the first parent which has a relative position.
+     *
+     * @param   {HTMLElement} element
+     * @returns {HTMLElement}
+     */
+    closestRelativeElement(element: HTMLElement): HTMLElement;
+}
+export type StickyRefs = {
+    inner: HTMLElement;
+    sentinelRef: HTMLElement;
+};
+export type StickyPrivateInterface = {
+    $refs: StickyRefs;
+    $options: {
+        zIndex: number;
+        hideWhenUp: boolean;
+        hideWhenDown: boolean;
+    };
+    $children: {
+        Sentinel: Sentinel[];
+    };
+};
+export type StickyInterface = Sticky & StickyPrivateInterface;
+import { Base } from "@studiometa/js-toolkit";
+import { Sentinel } from "../../primitives/index.js";

package/molecules/Sticky/Sticky.js

@@ -0,0 +1,107 @@
+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 { Sentinel } from "../../primitives/index.js";
+const _Sticky = class extends Base {
+  constructor() {
+    super(...arguments);
+    __publicField(this, "isSticky", false);
+    __publicField(this, "isVisible", true);
+  }
+  set y(value) {
+    this.$refs.inner.style.transform = `translateY(${value}px) translateZ(0px)`;
+  }
+  get instances() {
+    return Array.from(_Sticky.instances);
+  }
+  mounted() {
+    _Sticky.instances.add(this);
+    this.setSentinelSize();
+  }
+  resized() {
+    this.setSentinelSize();
+  }
+  destroyed() {
+    _Sticky.instances.delete(this);
+  }
+  scrolled(props) {
+    if (!this.isSticky || props.y === props.last.y) {
+      return;
+    }
+    if (props.direction.y === "DOWN" && this.$options.hideWhenDown || props.direction.y === "UP" && this.$options.hideWhenUp) {
+      this.hide();
+    } else {
+      this.show();
+    }
+  }
+  onSentinelIntersected([entry]) {
+    this.isSticky = entry.isIntersecting && entry.boundingClientRect.y < 0;
+    this.setPosition();
+  }
+  hide() {
+    if (!this.isVisible) {
+      return;
+    }
+    this.isVisible = false;
+    this.$el.classList.add("pointer-events-none");
+    this.instances.forEach((instance, index) => instance.setPosition(index));
+  }
+  show() {
+    if (this.isVisible) {
+      return;
+    }
+    this.isVisible = true;
+    this.$el.classList.remove("pointer-events-none");
+    this.instances.forEach((instance, index) => instance.setPosition(index));
+  }
+  setSentinelSize() {
+    const { instances } = this;
+    const index = instances.findIndex((instance) => instance === this);
+    const height = instances.slice(0, index).filter((instance) => this.closestRelativeElement(instance.$el).contains(this.$el)).reduce((acc, instance) => acc + instance.$el.offsetHeight, 0);
+    this.$refs.sentinelRef.style.height = `${height + 1}px`;
+    this.$el.style.top = `${height}px`;
+    this.$el.style.zIndex = String(this.$options.zIndex - index);
+  }
+  setPosition(index) {
+    if (!this.isSticky) {
+      this.y = 0;
+      return;
+    }
+    const { instances } = this;
+    index = index != null ? index : instances.findIndex((instance) => instance === this);
+    this.y = instances.slice(0, index).filter((instance) => instance.isSticky && !instance.isVisible).reduce((y, instance) => {
+      return y - instance.$refs.inner.offsetHeight;
+    }, this.isVisible ? 0 : this.$refs.inner.offsetHeight * -1);
+  }
+  closestRelativeElement(element) {
+    let parent = element.parentElement;
+    while (getComputedStyle(parent).position !== "relative" && parent.parentElement) {
+      parent = parent.parentElement;
+    }
+    return parent;
+  }
+};
+let Sticky = _Sticky;
+__publicField(Sticky, "config", {
+  name: "Sticky",
+  refs: ["inner", "sentinelRef"],
+  components: {
+    Sentinel
+  },
+  options: {
+    zIndex: {
+      type: Number,
+      default: 100
+    },
+    hideWhenUp: Boolean,
+    hideWhenDown: Boolean
+  }
+});
+__publicField(Sticky, "instances", /* @__PURE__ */ new Set());
+export {
+  Sticky as default
+};

package/molecules/Tabs/Tabs.cjs

@@ -0,0 +1,152 @@
+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;
+};
+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/Tabs/Tabs.js
+var Tabs_exports = {};
+__export(Tabs_exports, {
+  default: () => Tabs
+});
+var import_js_toolkit = require("@studiometa/js-toolkit");
+var import_utils = require("@studiometa/js-toolkit/utils");
+var Tabs = class extends import_js_toolkit.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([
+        (0, import_utils.transition)(btn, {
+          from: btnStyles.closed,
+          active: btnStyles.active,
+          to: btnStyles.open
+        }, "keep"),
+        (0, import_utils.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([
+        (0, import_utils.transition)(btn, {
+          from: btnStyles.open,
+          active: btnStyles.active,
+          to: btnStyles.closed
+        }, "keep"),
+        (0, import_utils.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"
+          }
+        }
+      })
+    }
+  }
+});
+module.exports = __toCommonJS(Tabs_exports);
+if (module.exports.default) module.exports = module.exports.default;