@studiometa/ui 1.0.0-beta.1 → 1.0.0-rc.1

package/TableOfContent/TableOfContent.js

@@ -1,50 +0,0 @@
-import { Base } from "@studiometa/js-toolkit";
-import { TableOfContentAnchor } from "./TableOfContentAnchor.js";
-import { withDeprecation } from "../decorators/withDeprecation.js";
-class TableOfContent extends withDeprecation(Base) {
-  /**
-   * Config.
-   */
-  static config = {
-    name: "TableOfContent",
-    refs: ["itemTemplate", "list"],
-    components: {
-      TableOfContentAnchor
-    },
-    options: {
-      contentSelector: String,
-      withTemplate: Boolean
-    }
-  };
-  /**
-   * Generate anchors on mount and update the component to instantiate the
-   * `TableOfContentAnchor` components.
-   */
-  mounted() {
-    if (this.$options.withTemplate) {
-      this.generateAnchors();
-      this.$update();
-    }
-  }
-  /**
-   * Generate all anchors.
-   * @todo Read anchor template from a ref?
-   * @todo Better API to easily override the template function, maybe a `render` function?
-   */
-  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.append(li);
-    });
-  }
-}
-export {
-  TableOfContent
-};
-//# sourceMappingURL=TableOfContent.js.map

package/TableOfContent/TableOfContent.js.map

@@ -1,7 +0,0 @@
-{
-  "version": 3,
-  "sources": ["../../packages/ui/TableOfContent/TableOfContent.ts"],
-  "sourcesContent": ["import { Base } from '@studiometa/js-toolkit';\nimport type { BaseProps, BaseConfig } from '@studiometa/js-toolkit';\nimport { TableOfContentAnchor } from './TableOfContentAnchor.js';\nimport { withDeprecation } from '../decorators/withDeprecation.js';\n\nexport interface TableOfContentProps extends BaseProps {\n  $refs: {\n    itemTemplate: HTMLTemplateElement;\n    list: HTMLUListElement;\n  };\n  $options: {\n    contentSelector: string;\n    withTemplate: boolean;\n  };\n  $children: {\n    TableOfContentAnchor: TableOfContentAnchor[];\n  };\n}\n\n/**\n * TableOfContent class.\n * @deprecated\n */\nexport class TableOfContent<T extends BaseProps = BaseProps> extends withDeprecation(Base)<\n  T & TableOfContentProps\n> {\n  /**\n   * Config.\n   */\n  static config: BaseConfig = {\n    name: 'TableOfContent',\n    refs: ['itemTemplate', 'list'],\n    components: {\n      TableOfContentAnchor,\n    },\n    options: {\n      contentSelector: String,\n      withTemplate: Boolean,\n    },\n  };\n\n  /**\n   * Generate anchors on mount and update the component to instantiate the\n   * `TableOfContentAnchor` components.\n   */\n  mounted() {\n    if (this.$options.withTemplate) {\n      this.generateAnchors();\n      this.$update();\n    }\n  }\n\n  /**\n   * Generate all anchors.\n   * @todo Read anchor template from a ref?\n   * @todo Better API to easily override the template function, maybe a `render` function?\n   */\n  generateAnchors() {\n    document.querySelectorAll(this.$options.contentSelector).forEach((section) => {\n      const tpl = document.createElement('div');\n      tpl.innerHTML = this.$refs.itemTemplate.innerHTML;\n      const li = tpl.querySelector('li');\n      const anchor = li.querySelector('a');\n      anchor.href = `#${section.id}`;\n      anchor.innerHTML = section.textContent;\n      anchor.dataset.component = 'TableOfContentAnchor';\n      this.$refs.list.append(li);\n    });\n  }\n}\n"],
-  "mappings": "AAAA,SAAS,YAAY;AAErB,SAAS,4BAA4B;AACrC,SAAS,uBAAuB;AAoBzB,MAAM,uBAAwD,gBAAgB,IAAI,EAEvF;AAAA;AAAA;AAAA;AAAA,EAIA,OAAO,SAAqB;AAAA,IAC1B,MAAM;AAAA,IACN,MAAM,CAAC,gBAAgB,MAAM;AAAA,IAC7B,YAAY;AAAA,MACV;AAAA,IACF;AAAA,IACA,SAAS;AAAA,MACP,iBAAiB;AAAA,MACjB,cAAc;AAAA,IAChB;AAAA,EACF;AAAA;AAAA;AAAA;AAAA;AAAA,EAMA,UAAU;AACR,QAAI,KAAK,SAAS,cAAc;AAC9B,WAAK,gBAAgB;AACrB,WAAK,QAAQ;AAAA,IACf;AAAA,EACF;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAOA,kBAAkB;AAChB,aAAS,iBAAiB,KAAK,SAAS,eAAe,EAAE,QAAQ,CAAC,YAAY;AAC5E,YAAM,MAAM,SAAS,cAAc,KAAK;AACxC,UAAI,YAAY,KAAK,MAAM,aAAa;AACxC,YAAM,KAAK,IAAI,cAAc,IAAI;AACjC,YAAM,SAAS,GAAG,cAAc,GAAG;AACnC,aAAO,OAAO,IAAI,QAAQ,EAAE;AAC5B,aAAO,YAAY,QAAQ;AAC3B,aAAO,QAAQ,YAAY;AAC3B,WAAK,MAAM,KAAK,OAAO,EAAE;AAAA,IAC3B,CAAC;AAAA,EACH;AACF;",
-  "names": []
-}

package/TableOfContent/TableOfContentAnchor.d.ts

@@ -1,36 +0,0 @@
-import type { BaseProps, BaseConfig } from '@studiometa/js-toolkit';
-import { AnchorScrollTo } from '../AnchorScrollTo/index.js';
-export interface TableOfContentAnchorProps extends BaseProps {
-    $options: {
-        activeClass: string;
-    };
-}
-declare const TableOfContentAnchor_base: import("@studiometa/js-toolkit").BaseDecorator<import("../decorators/withDeprecation.js").DeprecationInterface, AnchorScrollTo<BaseProps>, import("../decorators/withDeprecation.js").DeprecationProps>;
-/**
- * TableOfContentAnchor class.
- * @deprecated
- */
-export declare class TableOfContentAnchor<T extends BaseProps = BaseProps> extends TableOfContentAnchor_base<T & TableOfContentAnchorProps> {
-    /**
-     * Config.
-     */
-    static config: BaseConfig;
-    /**
-     * Observer.
-     * @private
-     */
-    __observer: IntersectionObserver;
-    /**
-     * Get the sentinel.
-     */
-    get sentinel(): HTMLElement;
-    /**
-     * Init observer on mount.
-     */
-    mounted(): void;
-    /**
-     * Destroy observer on destroy.
-     */
-    destroyed(): void;
-}
-export {};

package/TableOfContent/TableOfContentAnchor.js

@@ -1,54 +0,0 @@
-import { AnchorScrollTo } from "../AnchorScrollTo/index.js";
-import { withDeprecation } from "../decorators/withDeprecation.js";
-class TableOfContentAnchor extends withDeprecation(
-  AnchorScrollTo
-) {
-  /**
-   * Config.
-   */
-  static config = {
-    name: "TableOfContentAnchor",
-    emits: ["should-activate"],
-    options: {
-      activeClass: {
-        type: String,
-        default: "is-active"
-      }
-    }
-  };
-  /**
-   * Observer.
-   * @private
-   */
-  __observer;
-  /**
-   * Get the sentinel.
-   */
-  get sentinel() {
-    return document.querySelector(this.targetSelector);
-  }
-  /**
-   * Init observer on mount.
-   */
-  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);
-  }
-  /**
-   * Destroy observer on destroy.
-   */
-  destroyed() {
-    this.__observer.disconnect();
-  }
-}
-export {
-  TableOfContentAnchor
-};
-//# sourceMappingURL=TableOfContentAnchor.js.map

package/TableOfContent/TableOfContentAnchor.js.map

@@ -1,7 +0,0 @@
-{
-  "version": 3,
-  "sources": ["../../packages/ui/TableOfContent/TableOfContentAnchor.ts"],
-  "sourcesContent": ["import type { BaseProps, BaseConfig } from '@studiometa/js-toolkit';\nimport { AnchorScrollTo } from '../AnchorScrollTo/index.js';\nimport { withDeprecation } from '../decorators/withDeprecation.js';\n\nexport interface TableOfContentAnchorProps extends BaseProps {\n  $options: {\n    activeClass: string;\n  };\n}\n\n/**\n * TableOfContentAnchor class.\n * @deprecated\n */\nexport class TableOfContentAnchor<T extends BaseProps = BaseProps> extends withDeprecation<AnchorScrollTo>(\n  AnchorScrollTo,\n)<T & TableOfContentAnchorProps> {\n  /**\n   * Config.\n   */\n  static config: BaseConfig = {\n    name: 'TableOfContentAnchor',\n    emits: ['should-activate'],\n    options: {\n      activeClass: {\n        type: String,\n        default: 'is-active',\n      },\n    },\n  };\n\n  /**\n   * Observer.\n   * @private\n   */\n  __observer: IntersectionObserver;\n\n  /**\n   * Get the sentinel.\n   */\n  get sentinel(): HTMLElement {\n    return document.querySelector(this.targetSelector) as HTMLElement;\n  }\n\n  /**\n   * Init observer on mount.\n   */\n  mounted() {\n    if (!this.sentinel) {\n      return;\n    }\n\n    this.__observer = new IntersectionObserver(([entry]) => {\n      const shouldActivate =\n        entry.isIntersecting &&\n        entry.boundingClientRect.y < 100 &&\n        entry.boundingClientRect.y > -100;\n      this.$el.classList.toggle(this.$options.activeClass, shouldActivate);\n      this.$emit('should-activate', shouldActivate);\n    });\n\n    this.__observer.observe(this.sentinel);\n  }\n\n  /**\n   * Destroy observer on destroy.\n   */\n  destroyed() {\n    this.__observer.disconnect();\n  }\n}\n"],
-  "mappings": "AACA,SAAS,sBAAsB;AAC/B,SAAS,uBAAuB;AAYzB,MAAM,6BAA8D;AAAA,EACzE;AACF,EAAiC;AAAA;AAAA;AAAA;AAAA,EAI/B,OAAO,SAAqB;AAAA,IAC1B,MAAM;AAAA,IACN,OAAO,CAAC,iBAAiB;AAAA,IACzB,SAAS;AAAA,MACP,aAAa;AAAA,QACX,MAAM;AAAA,QACN,SAAS;AAAA,MACX;AAAA,IACF;AAAA,EACF;AAAA;AAAA;AAAA;AAAA;AAAA,EAMA;AAAA;AAAA;AAAA;AAAA,EAKA,IAAI,WAAwB;AAC1B,WAAO,SAAS,cAAc,KAAK,cAAc;AAAA,EACnD;AAAA;AAAA;AAAA;AAAA,EAKA,UAAU;AACR,QAAI,CAAC,KAAK,UAAU;AAClB;AAAA,IACF;AAEA,SAAK,aAAa,IAAI,qBAAqB,CAAC,CAAC,KAAK,MAAM;AACtD,YAAM,iBACJ,MAAM,kBACN,MAAM,mBAAmB,IAAI,OAC7B,MAAM,mBAAmB,IAAI;AAC/B,WAAK,IAAI,UAAU,OAAO,KAAK,SAAS,aAAa,cAAc;AACnE,WAAK,MAAM,mBAAmB,cAAc;AAAA,IAC9C,CAAC;AAED,SAAK,WAAW,QAAQ,KAAK,QAAQ;AAAA,EACvC;AAAA;AAAA;AAAA;AAAA,EAKA,YAAY;AACV,SAAK,WAAW,WAAW;AAAA,EAC7B;AACF;",
-  "names": []
-}

package/TableOfContent/index.d.ts

@@ -1,2 +0,0 @@
-export * from './TableOfContent.js';
-export * from './TableOfContentAnchor.js';

package/TableOfContent/index.js

@@ -1,3 +0,0 @@
-export * from "./TableOfContent.js";
-export * from "./TableOfContentAnchor.js";
-//# sourceMappingURL=index.js.map

package/TableOfContent/index.js.map

@@ -1,7 +0,0 @@
-{
-  "version": 3,
-  "sources": ["../../packages/ui/TableOfContent/index.ts"],
-  "sourcesContent": ["export * from './TableOfContent.js';\nexport * from './TableOfContentAnchor.js';\n"],
-  "mappings": "AAAA,cAAc;AACd,cAAc;",
-  "names": []
-}