@studiometa/ui 0.2.1 → 0.2.4

package/molecules/Sticky/Sticky.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,14 +26,12 @@ var Sticky_exports = {};
 __export(Sticky_exports, {
   default: () => Sticky
 });
+module.exports = __toCommonJS(Sticky_exports);
 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);
-  }
+  isSticky = false;
+  isVisible = true;
   set y(value) {
     this.$refs.inner.style.transform = `translateY(${value}px) translateZ(0px)`;
   }
@@ -99,7 +92,7 @@ var _Sticky = class extends import_js_toolkit.Base {
       return;
     }
     const { instances } = this;
-    index = index != null ? index : instances.findIndex((instance) => instance === this);
+    index = 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);
@@ -129,5 +122,4 @@ __publicField(Sticky, "config", {
   }
 });
 __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

@@ -66,23 +66,23 @@ export default class Sticky extends Base {
      * Mounted hook.
      * @this {StickyInterface}
      */
-    mounted(): void;
+    mounted(this: StickyInterface): void;
     /**
      * Resized hook.
      * @this {StickyInterface}
      * @returns {void}
      */
-    resized(): void;
+    resized(this: StickyInterface): void;
     /**
      * Destroyed hook.
      * @this {StickyInterface}
      */
-    destroyed(): void;
+    destroyed(this: StickyInterface): void;
     /**
      * Scrolled hook.
      * @this {StickyInterface}
      */
-    scrolled(props: any): void;
+    scrolled(this: StickyInterface, props: any): void;
     /**
      * Listen to the sentinel's `intersected` event to set the `isSticky` value.
      *
@@ -94,17 +94,17 @@ export default class Sticky extends Base {
      * Hide the sticky component when another one is sticky.
      * @this {StickyInterface}
      */
-    hide(): void;
+    hide(this: StickyInterface): void;
     /**
      * Show the sticky component when the other one is not sticky anymore.
      * @this {StickyInterface}
      */
-    show(): void;
+    show(this: StickyInterface): void;
     /**
      * Set the sentinel height based on the previous instances.
      * @this {StickyInterface}
      */
-    setSentinelSize(): void;
+    setSentinelSize(this: StickyInterface): void;
     /**
      * Set the component's position.
      *
@@ -112,7 +112,7 @@ export default class Sticky extends Base {
      * @param   {number} [index] The instance index in all the pages' instances.
      * @returns {void}
      */
-    setPosition(index?: number): void;
+    setPosition(this: StickyInterface, index?: number): void;
     /**
      * Find the first parent which has a relative position.
      *

package/molecules/Sticky/Sticky.js

@@ -1,107 +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";
-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
-};
+import{Base as o}from"@studiometa/js-toolkit";import{Sentinel as h}from"../../primitives/index.js";class n extends o{static config={name:"Sticky",refs:["inner","sentinelRef"],components:{Sentinel:h},options:{zIndex:{type:Number,default:100},hideWhenUp:Boolean,hideWhenDown:Boolean}};static instances=new Set;isSticky=!1;isVisible=!0;set y(e){this.$refs.inner.style.transform=`translateY(${e}px) translateZ(0px)`}get instances(){return Array.from(n.instances)}mounted(){n.instances.add(this),this.setSentinelSize()}resized(){this.setSentinelSize()}destroyed(){n.instances.delete(this)}scrolled(e){!this.isSticky||e.y===e.last.y||(e.direction.y==="DOWN"&&this.$options.hideWhenDown||e.direction.y==="UP"&&this.$options.hideWhenUp?this.hide():this.show())}onSentinelIntersected([e]){this.isSticky=e.isIntersecting&&e.boundingClientRect.y<0,this.setPosition()}hide(){!this.isVisible||(this.isVisible=!1,this.$el.classList.add("pointer-events-none"),this.instances.forEach((e,t)=>e.setPosition(t)))}show(){this.isVisible||(this.isVisible=!0,this.$el.classList.remove("pointer-events-none"),this.instances.forEach((e,t)=>e.setPosition(t)))}setSentinelSize(){const{instances:e}=this,t=e.findIndex(s=>s===this),i=e.slice(0,t).filter(s=>this.closestRelativeElement(s.$el).contains(this.$el)).reduce((s,l)=>s+l.$el.offsetHeight,0);this.$refs.sentinelRef.style.height=`${i+1}px`,this.$el.style.top=`${i}px`,this.$el.style.zIndex=String(this.$options.zIndex-t)}setPosition(e){if(!this.isSticky){this.y=0;return}const{instances:t}=this;e=e??t.findIndex(i=>i===this),this.y=t.slice(0,e).filter(i=>i.isSticky&&!i.isVisible).reduce((i,s)=>i-s.$refs.inner.offsetHeight,this.isVisible?0:this.$refs.inner.offsetHeight*-1)}closestRelativeElement(e){let t=e.parentElement;for(;getComputedStyle(t).position!=="relative"&&t.parentElement;)t=t.parentElement;return t}}export{n as default};

package/molecules/TableOfContent/TableOfContent.cjs

@@ -0,0 +1,66 @@
+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 __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+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 to;
+};
+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;
+};
+
+// packages/ui/molecules/TableOfContent/TableOfContent.js
+var TableOfContent_exports = {};
+__export(TableOfContent_exports, {
+  default: () => TableOfContent
+});
+module.exports = __toCommonJS(TableOfContent_exports);
+var import_js_toolkit = require("@studiometa/js-toolkit");
+var import_TableOfContentAnchor = __toESM(require("./TableOfContentAnchor.cjs"), 1);
+var TableOfContent = class extends import_js_toolkit.Base {
+  mounted() {
+    if (this.$options.withTemplate) {
+      this.generateAnchors();
+      this.$update();
+    }
+  }
+  generateAnchors() {
+    document.querySelectorAll(this.$options.contentSelector).forEach((section) => {
+      const tpl = document.createElement("div");
+      tpl.innerHTML = this.$refs.itemTemplate.innerHTML;
+      const li = tpl.querySelector("li");
+      const anchor = li.querySelector("a");
+      anchor.href = `#${section.id}`;
+      anchor.innerHTML = section.textContent;
+      anchor.dataset.component = "TableOfContentAnchor";
+      this.$refs.list.appendChild(li);
+    });
+  }
+};
+__publicField(TableOfContent, "config", {
+  name: "TableOfContent",
+  refs: ["itemTemplate", "list"],
+  components: {
+    TableOfContentAnchor: import_TableOfContentAnchor.default
+  },
+  options: {
+    contentSelector: String,
+    withTemplate: Boolean
+  }
+});
+if (module.exports.default) module.exports = module.exports.default;

package/molecules/TableOfContent/TableOfContent.d.ts

@@ -0,0 +1,59 @@
+/**
+ * @typedef {TableOfContent & {
+ *   $refs: {
+ *     itemTemplate: HTMLTemplateElement,
+ *     list: HTMLUListElement
+ *   },
+ *   $options: {
+ *     contentSelector: string,
+ *     withTemplate: boolean,
+ *   }
+ * }} TableOfContentInterface
+ */
+/**
+ * TableOfContent class.
+ */
+export default class TableOfContent extends Base {
+    /**
+     * Config.
+     */
+    static config: {
+        name: string;
+        refs: string[];
+        components: {
+            TableOfContentAnchor: typeof TableOfContentAnchor;
+        };
+        options: {
+            contentSelector: StringConstructor;
+            withTemplate: BooleanConstructor;
+        };
+    };
+    /**
+     * Generate anchors on mount and update the component to instantiate the
+     * `TableOfContentAnchor` components.
+     * @returns {void}
+     */
+    mounted(): void;
+    /**
+     * Generate all anchors.
+     *
+     * @todo Read anchor template from a ref?
+     * @todo Better API to easily override the template function, maybe a `render` function?
+     *
+     * @this    {TableOfContentInterface}
+     * @returns {void}
+     */
+    generateAnchors(this: TableOfContentInterface): void;
+}
+export type TableOfContentInterface = TableOfContent & {
+    $refs: {
+        itemTemplate: HTMLTemplateElement;
+        list: HTMLUListElement;
+    };
+    $options: {
+        contentSelector: string;
+        withTemplate: boolean;
+    };
+};
+import { Base } from "@studiometa/js-toolkit";
+import TableOfContentAnchor from "./TableOfContentAnchor.js";

package/molecules/TableOfContent/TableOfContent.js

@@ -0,0 +1 @@
+import{Base as r}from"@studiometa/js-toolkit";import i from"./TableOfContentAnchor.js";class l extends r{static config={name:"TableOfContent",refs:["itemTemplate","list"],components:{TableOfContentAnchor:i},options:{contentSelector:String,withTemplate:Boolean}};mounted(){this.$options.withTemplate&&(this.generateAnchors(),this.$update())}generateAnchors(){document.querySelectorAll(this.$options.contentSelector).forEach(t=>{const n=document.createElement("div");n.innerHTML=this.$refs.itemTemplate.innerHTML;const o=n.querySelector("li"),e=o.querySelector("a");e.href=`#${t.id}`,e.innerHTML=t.textContent,e.dataset.component="TableOfContentAnchor",this.$refs.list.appendChild(o)})}}export{l as default};

package/molecules/TableOfContent/TableOfContentAnchor.cjs

@@ -0,0 +1,60 @@
+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 __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+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 to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var __publicField = (obj, key, value) => {
+  __defNormalProp(obj, typeof key !== "symbol" ? key + "" : key, value);
+  return value;
+};
+
+// packages/ui/molecules/TableOfContent/TableOfContentAnchor.js
+var TableOfContentAnchor_exports = {};
+__export(TableOfContentAnchor_exports, {
+  default: () => TableOfContentAnchor
+});
+module.exports = __toCommonJS(TableOfContentAnchor_exports);
+var import_atoms = require("../../atoms/index.cjs");
+var TableOfContentAnchor = class extends import_atoms.AnchorScrollTo {
+  get sentinel() {
+    return document.querySelector(this.targetSelector);
+  }
+  mounted() {
+    if (!this.sentinel) {
+      return;
+    }
+    this.observer = new IntersectionObserver(([entry]) => {
+      const shouldActivate = entry.isIntersecting && entry.boundingClientRect.y < 100 && entry.boundingClientRect.y > 100;
+      this.$el.classList.toggle(this.$options.activeClass, shouldActivate);
+      this.$emit("should-activate", shouldActivate);
+    });
+    this.observer.observe(this.sentinel);
+  }
+  destroyed() {
+    this.observer.disconnect();
+  }
+};
+__publicField(TableOfContentAnchor, "config", {
+  name: "TableOfContentAnchor",
+  emits: ["should-activate"],
+  options: {
+    activeClass: {
+      type: String,
+      default: "is-active"
+    }
+  }
+});
+if (module.exports.default) module.exports = module.exports.default;

package/molecules/TableOfContent/TableOfContentAnchor.d.ts

@@ -0,0 +1,36 @@
+/**
+ * TableOfContentAnchor class.
+ */
+export default class TableOfContentAnchor extends AnchorScrollTo {
+    /**
+     * Config.
+     */
+    static config: {
+        name: string;
+        emits: string[];
+        options: {
+            activeClass: {
+                type: StringConstructor;
+                default: string;
+            };
+        };
+    };
+    /**
+     * Get the sentinel.
+     * @returns {HTMLElement}
+     */
+    get sentinel(): HTMLElement;
+    /**
+     * Init observer on mount.
+     * @returns {void}
+     */
+    mounted(): void;
+    observer: IntersectionObserver;
+    /**
+     * Destroy observer on destroy.
+     *
+     * @returns {void}
+     */
+    destroyed(): void;
+}
+import { AnchorScrollTo } from "../../atoms/index.js";

package/molecules/TableOfContent/TableOfContentAnchor.js

@@ -0,0 +1 @@
+import{AnchorScrollTo as s}from"../../atoms/index.js";class i extends s{static config={name:"TableOfContentAnchor",emits:["should-activate"],options:{activeClass:{type:String,default:"is-active"}}};get sentinel(){return document.querySelector(this.targetSelector)}mounted(){!this.sentinel||(this.observer=new IntersectionObserver(([e])=>{const t=e.isIntersecting&&e.boundingClientRect.y<100&&e.boundingClientRect.y>100;this.$el.classList.toggle(this.$options.activeClass,t),this.$emit("should-activate",t)}),this.observer.observe(this.sentinel))}destroyed(){this.observer.disconnect()}}export{i as default};

package/molecules/TableOfContent/index.cjs

@@ -0,0 +1,31 @@
+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 __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+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 to;
+};
+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/TableOfContent/index.js
+var TableOfContent_exports = {};
+__export(TableOfContent_exports, {
+  TableOfContent: () => import_TableOfContent.default,
+  TableOfContentAnchor: () => import_TableOfContentAnchor.default
+});
+module.exports = __toCommonJS(TableOfContent_exports);
+var import_TableOfContent = __toESM(require("./TableOfContent.cjs"), 1);
+var import_TableOfContentAnchor = __toESM(require("./TableOfContentAnchor.cjs"), 1);
+if (module.exports.default) module.exports = module.exports.default;

package/molecules/TableOfContent/index.d.ts

@@ -0,0 +1,2 @@
+export { default as TableOfContent } from "./TableOfContent.js";
+export { default as TableOfContentAnchor } from "./TableOfContentAnchor.js";

package/molecules/TableOfContent/index.js

@@ -0,0 +1 @@
+import{default as o}from"./TableOfContent.js";import{default as f}from"./TableOfContentAnchor.js";export{o as TableOfContent,f as TableOfContentAnchor};