@qnc/qnc_data_tables 1.2.0 → 1.3.0

package/dist/optional_storage.d.ts

@@ -1,6 +0,0 @@
-/** Two purposes: automatic key-prefixing, and the ability to create a "dummy storage" */
-export declare function optional_storage_wrapper(storage: Storage | null, key_prefix: string): {
-    get(key: string): string | null;
-    set(key: string, value: string): void;
-};
-export type OptionalStorage = ReturnType<typeof optional_storage_wrapper>;

package/dist/optional_storage.js

@@ -1,18 +0,0 @@
-/** Two purposes: automatic key-prefixing, and the ability to create a "dummy storage" */
-export function optional_storage_wrapper(storage, key_prefix) {
-    if (!storage)
-        return {
-            get(key) {
-                return null;
-            },
-            set(key, value) { },
-        };
-    return {
-        get(key) {
-            return storage.getItem(`${key_prefix}${key}`);
-        },
-        set(key, value) {
-            storage.setItem(`${key_prefix}${key}`, value);
-        },
-    };
-}

package/dist/optional_storage.ts

@@ -1,23 +0,0 @@
-/** Two purposes: automatic key-prefixing, and the ability to create a "dummy storage" */
-export function optional_storage_wrapper(
-    storage: Storage | null,
-    key_prefix: string,
-) {
-    if (!storage)
-        return {
-            get(key: string) {
-                return null;
-            },
-            set(key: string, value: string) {},
-        };
-    return {
-        get(key: string) {
-            return storage.getItem(`${key_prefix}${key}`);
-        },
-        set(key: string, value: string) {
-            storage.setItem(`${key_prefix}${key}`, value);
-        },
-    };
-}
-
-export type OptionalStorage = ReturnType<typeof optional_storage_wrapper>;

package/dist/overflow_class_manager.d.ts

@@ -1,20 +0,0 @@
-/**
-    Responsible for toggling "[PREFIX][SIDE]" classes on a possibly-overflowing element.
-
-    Nothing project-specific here
- */
-export declare class OverflowClassManager {
-    readonly root: Element;
-    readonly class_prefix: string;
-    constructor(root: Element, class_prefix: string);
-    /**
-        detector _may_ have zero size; that's okay (it _should_ have 0 size in at least one dimension)
-
-        detector _may_ be longer (in one dimension) than root; that's also okay
-
-        detector should be positioned [side]-most inside the root (this is tricky if root has padding).
-
-        If root element can scroll in both directions, you need to be careful about how you setup your detectors. Eg. right detector should either be full-height, or should use sticky positioning so that it never goes completely above or completely below root. The only way right detector should not intersect (at all) with root is if it is to-the-right-of root.
-     */
-    setup_overflow_detector(detector: Element, side: "left" | "right" | "top" | "bottom"): void;
-}

package/dist/overflow_class_manager.js

@@ -1,30 +0,0 @@
-/**
-    Responsible for toggling "[PREFIX][SIDE]" classes on a possibly-overflowing element.
-
-    Nothing project-specific here
- */
-export class OverflowClassManager {
-    constructor(root, class_prefix) {
-        this.root = root;
-        this.class_prefix = class_prefix;
-    }
-    /**
-        detector _may_ have zero size; that's okay (it _should_ have 0 size in at least one dimension)
-
-        detector _may_ be longer (in one dimension) than root; that's also okay
-
-        detector should be positioned [side]-most inside the root (this is tricky if root has padding).
-
-        If root element can scroll in both directions, you need to be careful about how you setup your detectors. Eg. right detector should either be full-height, or should use sticky positioning so that it never goes completely above or completely below root. The only way right detector should not intersect (at all) with root is if it is to-the-right-of root.
-     */
-    setup_overflow_detector(detector, side) {
-        const class_name = `${this.class_prefix}${side}`;
-        new IntersectionObserver((entries, observer) => {
-            if (entries[0]) {
-                this.root.classList.toggle(class_name, !entries[0].isIntersecting);
-            }
-        }, {
-            root: this.root,
-        }).observe(detector);
-    }
-}

package/dist/overflow_class_manager.ts

@@ -1,40 +0,0 @@
-/**
-    Responsible for toggling "[PREFIX][SIDE]" classes on a possibly-overflowing element.
-
-    Nothing project-specific here
- */
-export class OverflowClassManager {
-    constructor(
-        readonly root: Element,
-        readonly class_prefix: string,
-    ) {}
-
-    /**
-        detector _may_ have zero size; that's okay (it _should_ have 0 size in at least one dimension)
-
-        detector _may_ be longer (in one dimension) than root; that's also okay
-
-        detector should be positioned [side]-most inside the root (this is tricky if root has padding).
-
-        If root element can scroll in both directions, you need to be careful about how you setup your detectors. Eg. right detector should either be full-height, or should use sticky positioning so that it never goes completely above or completely below root. The only way right detector should not intersect (at all) with root is if it is to-the-right-of root.
-     */
-    setup_overflow_detector(
-        detector: Element,
-        side: "left" | "right" | "top" | "bottom",
-    ) {
-        const class_name = `${this.class_prefix}${side}`;
-        new IntersectionObserver(
-            (entries, observer) => {
-                if (entries[0]) {
-                    this.root.classList.toggle(
-                        class_name,
-                        !entries[0].isIntersecting,
-                    );
-                }
-            },
-            {
-                root: this.root,
-            },
-        ).observe(detector);
-    }
-}

package/dist/prepare_cell_html.d.ts

@@ -1,5 +0,0 @@
-/**
-    If html represents exactly one node, and that node is an HTMLElement, return that element.
-    Otherwise, wrap in a div.
- */
-export declare function prepare_cell_html(html: string): HTMLElement;

package/dist/prepare_cell_html.js

@@ -1,38 +0,0 @@
-/**
-    If html represents exactly one node, and that node is an HTMLElement, return that element.
-    Otherwise, wrap in a div.
- */
-export function prepare_cell_html(html) {
-    const t = document.createElement("template");
-    t.innerHTML = html;
-    if (t.content.childNodes.length == 1 &&
-        t.content.children[0] instanceof HTMLElement) {
-        const element = t.content.children[0];
-        if (element.hasAttribute("data-qdt-full-cell"))
-            return element;
-        if (element instanceof HTMLDivElement ||
-            element instanceof HTMLAnchorElement) {
-            return as_flex_container(element, "div");
-        }
-        if (element instanceof HTMLButtonElement ||
-            element instanceof HTMLLabelElement) {
-            return as_flex_container(element, "span");
-        }
-        return doubly_wrapped(html);
-    }
-    return doubly_wrapped(html);
-}
-function as_flex_container(element, wrapper_tag) {
-    const inner = document.createElement(wrapper_tag);
-    for (const child of Array.from(element.childNodes)) {
-        inner.appendChild(child);
-    }
-    element.appendChild(inner);
-    element.classList.add("qdt-flex-cell");
-    return element;
-}
-function doubly_wrapped(content) {
-    const outer = document.createElement("div");
-    outer.innerHTML = content;
-    return as_flex_container(outer, "div");
-}

package/dist/prepare_cell_html.ts

@@ -1,48 +0,0 @@
-/**
-    If html represents exactly one node, and that node is an HTMLElement, return that element.
-    Otherwise, wrap in a div.
- */
-export function prepare_cell_html(html: string): HTMLElement {
-    const t = document.createElement("template");
-    t.innerHTML = html;
-    if (
-        t.content.childNodes.length == 1 &&
-        t.content.children[0] instanceof HTMLElement
-    ) {
-        const element = t.content.children[0];
-        if (element.hasAttribute("data-qdt-full-cell")) return element;
-
-        if (
-            element instanceof HTMLDivElement ||
-            element instanceof HTMLAnchorElement
-        ) {
-            return as_flex_container(element, "div");
-        }
-        if (
-            element instanceof HTMLButtonElement ||
-            element instanceof HTMLLabelElement
-        ) {
-            return as_flex_container(element, "span");
-        }
-        return doubly_wrapped(html);
-    }
-    return doubly_wrapped(html);
-}
-
-function as_flex_container(
-    element: HTMLElement,
-    wrapper_tag: string,
-): HTMLElement {
-    const inner = document.createElement(wrapper_tag);
-    for (const child of Array.from(element.childNodes)) {
-        inner.appendChild(child);
-    }
-    element.appendChild(inner);
-    element.classList.add("qdt-flex-cell");
-    return element;
-}
-function doubly_wrapped(content: string): HTMLElement {
-    const outer = document.createElement("div");
-    outer.innerHTML = content;
-    return as_flex_container(outer, "div");
-}

package/dist/renderer.d.ts

@@ -1,16 +0,0 @@
-import m from "mithril";
-export declare class Renderer {
-    /**
-        Given some phrasing content and some help text, return an "augmented" version of that phrasing content with some means of accessing the help text.
-        The help text might be long; it should not take up space on the page.
-        The final rendered result should not be much wider than the initial phrasing content (this may be used inside space-constrained locations, like <th> elements).
-    */
-    render_with_help_text(phrasing_content: m.Children, help: string): m.Vnode<any, any>;
-    render_with_optional_help_text(phrasing_content: m.Children, help: string): m.Children;
-    render_header(args: {
-        label: m.Children;
-        sortable: boolean;
-        sorted: "no" | "forward" | "reverse";
-        set_sort: (direction: "forward" | "reverse") => void;
-    }): m.Vnode<any, any>;
-}

package/dist/renderer.js

@@ -1,51 +0,0 @@
-/*
-    Here we implement a class for performing various low-level rendering operations, which users might want to override (ie. so that the generated markup works better with their stylesheet or to use custom components that are used elsewhere on their site). You should NOT implement a custom Renderer in order to change or add functionality (and we'll do our best with the method signatures/documentation to prevent that).
-*/
-import m from "mithril";
-export class Renderer {
-    /**
-        Given some phrasing content and some help text, return an "augmented" version of that phrasing content with some means of accessing the help text.
-        The help text might be long; it should not take up space on the page.
-        The final rendered result should not be much wider than the initial phrasing content (this may be used inside space-constrained locations, like <th> elements).
-    */
-    render_with_help_text(phrasing_content, help) {
-        return m("span", { title: help }, phrasing_content, m("span", {
-            tabindex: 0,
-            onclick: function (e) {
-                alert(help);
-                // This allows you to render help text inside other interactive elements
-                e.preventDefault();
-                e.stopPropagation();
-            },
-            onkeydown: function (e) {
-                if (e.key == "Enter" || e.key == " ") {
-                    this.click();
-                    // in case you pressed space, don't scroll page
-                    e.preventDefault();
-                }
-            },
-            className: "qnc-data-table-help-text",
-        }));
-    }
-    render_with_optional_help_text(phrasing_content, help) {
-        if (help)
-            return this.render_with_help_text(phrasing_content, help);
-        return phrasing_content;
-    }
-    render_header(args) {
-        // entire header text is a (clickable) button (similar to many file browser and other UIs) :
-        if (args.sortable)
-            return m("button", {
-                onclick: () => args.set_sort(args.sorted == "forward" ? "reverse" : "forward"),
-                className: "qnc-data-table-header-button",
-                type: "button",
-            }, 
-            // The wrapping span is so that you can see (in your browser's dev tools) exactly how wide the button content is, in case you want to fix column width at that width
-            // (note - button _might_ also suffice for this, but users might style button as full-width, for increased click target size)
-            m("span", m("span", { className: "qnc-data-table-header-button-text" }, args.label), args.sorted == "forward" &&
-                m("span", { className: "qnc-data-table-sort-indicator" }, " ▲"), args.sorted == "reverse" &&
-                m("span", { className: "qnc-data-table-sort-indicator" }, " ▼")));
-        // The wrapping span is so that you can see (in your browser's dev tools) exactly how wide the text content is, in case you want to fix column width at that width
-        return m("span", args.label);
-    }
-}

package/dist/renderer.ts

@@ -1,86 +0,0 @@
-/*
-    Here we implement a class for performing various low-level rendering operations, which users might want to override (ie. so that the generated markup works better with their stylesheet or to use custom components that are used elsewhere on their site). You should NOT implement a custom Renderer in order to change or add functionality (and we'll do our best with the method signatures/documentation to prevent that).
-*/
-import m from "mithril";
-
-export class Renderer {
-    /** 
-        Given some phrasing content and some help text, return an "augmented" version of that phrasing content with some means of accessing the help text. 
-        The help text might be long; it should not take up space on the page.
-        The final rendered result should not be much wider than the initial phrasing content (this may be used inside space-constrained locations, like <th> elements).
-    */
-    render_with_help_text(phrasing_content: m.Children, help: string) {
-        return m(
-            "span",
-            { title: help },
-            phrasing_content,
-            m("span", {
-                tabindex: 0,
-                onclick: function (e: MouseEvent) {
-                    alert(help);
-                    // This allows you to render help text inside other interactive elements
-                    e.preventDefault();
-                    e.stopPropagation();
-                },
-                onkeydown: function (e: KeyboardEvent) {
-                    if (e.key == "Enter" || e.key == " ") {
-                        this.click();
-                        // in case you pressed space, don't scroll page
-                        e.preventDefault();
-                    }
-                },
-                className: "qnc-data-table-help-text",
-            }),
-        );
-    }
-    render_with_optional_help_text(phrasing_content: m.Children, help: string) {
-        if (help) return this.render_with_help_text(phrasing_content, help);
-        return phrasing_content;
-    }
-    render_header(args: {
-        label: m.Children;
-        sortable: boolean;
-        sorted: "no" | "forward" | "reverse";
-        set_sort: (direction: "forward" | "reverse") => void;
-    }) {
-        // entire header text is a (clickable) button (similar to many file browser and other UIs) :
-        if (args.sortable)
-            return m(
-                "button",
-                {
-                    onclick: () =>
-                        args.set_sort(
-                            args.sorted == "forward" ? "reverse" : "forward",
-                        ),
-                    className: "qnc-data-table-header-button",
-                    type: "button",
-                },
-
-                // The wrapping span is so that you can see (in your browser's dev tools) exactly how wide the button content is, in case you want to fix column width at that width
-                // (note - button _might_ also suffice for this, but users might style button as full-width, for increased click target size)
-                m(
-                    "span",
-                    m(
-                        "span",
-                        { className: "qnc-data-table-header-button-text" },
-                        args.label,
-                    ),
-                    args.sorted == "forward" &&
-                        m(
-                            "span",
-                            { className: "qnc-data-table-sort-indicator" },
-                            " ▲",
-                        ),
-                    args.sorted == "reverse" &&
-                        m(
-                            "span",
-                            { className: "qnc-data-table-sort-indicator" },
-                            " ▼",
-                        ),
-                ),
-            );
-
-        // The wrapping span is so that you can see (in your browser's dev tools) exactly how wide the text content is, in case you want to fix column width at that width
-        return m("span", args.label);
-    }
-}

package/dist/selection_fieldset_controller.d.ts

@@ -1,35 +0,0 @@
-import { TableManager } from "./table_manager.js";
-/**
-    Intended to wrap a <fieldset> element of "selection action buttons".
-    Responsible for:
-    - dynamically updating fieldset's "disabled" attribute
-    - dynamically updating fieldset's legend (to include # of selected items)
-    - providing access to the TableManager of the connected data table
-
-    Intended for use when you're generating selection action buttons on your backend (in initial page HTML).
-
-    If you're building selection action buttons on the front-end, this is probably not the best approach.
- */
-export declare class QdtSelectionFieldsetController extends HTMLElement {
-    private fieldset;
-    private legend;
-    private table;
-    private on_selection_change;
-    constructor();
-    connectedCallback(): void;
-    private static get selected_attributes();
-    attributeChangedCallback(name: string, old_value: string, new_value: string): void;
-    private connect_table;
-    private connect_fieldset;
-    private render;
-    required_table_manager(): TableManager;
-}
-/**
-    Registers a custom element (<qdt-selection-fieldset-controller>) for wrapping a <fieldset> element.
-    The custom element:
-    - requires a "table-id" attribute to be set, which must be the id of a data table element
-    - dynamically updates the fieldset's "disabled" attribute
-    - dynamically updates the fieldset's legend (to include # of selected items)
-    - provides access to the TableManager of the connected data table
- */
-export declare function register_selection_fieldset_controller_custom_element(): void;

package/dist/selection_fieldset_controller.js

@@ -1,85 +0,0 @@
-import { BaseQncDataTable } from "./custom_element.js";
-/**
-    Intended to wrap a <fieldset> element of "selection action buttons".
-    Responsible for:
-    - dynamically updating fieldset's "disabled" attribute
-    - dynamically updating fieldset's legend (to include # of selected items)
-    - providing access to the TableManager of the connected data table
-
-    Intended for use when you're generating selection action buttons on your backend (in initial page HTML).
-
-    If you're building selection action buttons on the front-end, this is probably not the best approach.
- */
-export class QdtSelectionFieldsetController extends HTMLElement {
-    constructor() {
-        super();
-        this.fieldset = null;
-        this.legend = null;
-        this.table = null;
-        this.on_selection_change = () => this.render();
-    }
-    connectedCallback() {
-        this.connect_table();
-        this.connect_fieldset();
-        this.render();
-    }
-    static get selected_attributes() {
-        return ["table-id"];
-    }
-    attributeChangedCallback(name, old_value, new_value) {
-        this.connect_table();
-        this.render();
-    }
-    connect_table() {
-        this.table = null;
-        const id = this.getAttribute("table-id");
-        if (!id) {
-            console.error(`${this.tagName} requires "table-id" attribute`);
-            return;
-        }
-        const table = document.getElementById(id);
-        if (!table) {
-            console.error(`"${id}" does not reference any element by id`);
-            return;
-        }
-        if (!(table instanceof BaseQncDataTable)) {
-            console.error(`"${id}" references an HTML element, but it is not a BaseQncDataTable`);
-            return;
-        }
-        this.table = table;
-        this.table
-            .required_table_manager()
-            .add_selected_ids_changed_listener(this.on_selection_change);
-    }
-    connect_fieldset() {
-        this.fieldset = this.querySelector("fieldset");
-        if (!this.fieldset)
-            console.warn("Could not find a fieldset descendant. Our presence is meaningless.");
-        this.legend = this.querySelector("legend");
-    }
-    render() {
-        const selected_count = this.table
-            ? this.table.required_table_manager().selected_ids.size
-            : 0;
-        if (this.fieldset)
-            this.fieldset.disabled = selected_count == 0;
-        if (this.legend)
-            this.legend.innerText = `With ${selected_count} selected item(s):`;
-    }
-    required_table_manager() {
-        if (!this.table)
-            throw new Error("We are not connected to a table");
-        return this.table.required_table_manager();
-    }
-}
-/**
-    Registers a custom element (<qdt-selection-fieldset-controller>) for wrapping a <fieldset> element.
-    The custom element:
-    - requires a "table-id" attribute to be set, which must be the id of a data table element
-    - dynamically updates the fieldset's "disabled" attribute
-    - dynamically updates the fieldset's legend (to include # of selected items)
-    - provides access to the TableManager of the connected data table
- */
-export function register_selection_fieldset_controller_custom_element() {
-    customElements.define("qdt-selection-fieldset-controller", QdtSelectionFieldsetController);
-}

package/dist/selection_fieldset_controller.ts

@@ -1,104 +0,0 @@
-import { TableManager } from "./table_manager.js";
-import { BaseQncDataTable } from "./custom_element.js";
-
-/**
-    Intended to wrap a <fieldset> element of "selection action buttons".
-    Responsible for:
-    - dynamically updating fieldset's "disabled" attribute
-    - dynamically updating fieldset's legend (to include # of selected items)
-    - providing access to the TableManager of the connected data table
-
-    Intended for use when you're generating selection action buttons on your backend (in initial page HTML).
-
-    If you're building selection action buttons on the front-end, this is probably not the best approach.
- */
-export class QdtSelectionFieldsetController extends HTMLElement {
-    private fieldset: HTMLFieldSetElement | null = null;
-    private legend: HTMLLegendElement | null = null;
-    private table: BaseQncDataTable | null = null;
-
-    private on_selection_change: () => void;
-
-    constructor() {
-        super();
-        this.on_selection_change = () => this.render();
-    }
-
-    connectedCallback() {
-        this.connect_table();
-        this.connect_fieldset();
-        this.render();
-    }
-
-    private static get selected_attributes() {
-        return ["table-id"];
-    }
-
-    attributeChangedCallback(
-        name: string,
-        old_value: string,
-        new_value: string,
-    ) {
-        this.connect_table();
-        this.render();
-    }
-    private connect_table() {
-        this.table = null;
-
-        const id = this.getAttribute("table-id");
-        if (!id) {
-            console.error(`${this.tagName} requires "table-id" attribute`);
-            return;
-        }
-        const table = document.getElementById(id);
-        if (!table) {
-            console.error(`"${id}" does not reference any element by id`);
-            return;
-        }
-        if (!(table instanceof BaseQncDataTable)) {
-            console.error(
-                `"${id}" references an HTML element, but it is not a BaseQncDataTable`,
-            );
-            return;
-        }
-        this.table = table;
-        this.table
-            .required_table_manager()
-            .add_selected_ids_changed_listener(this.on_selection_change);
-    }
-    private connect_fieldset() {
-        this.fieldset = this.querySelector("fieldset");
-        if (!this.fieldset)
-            console.warn(
-                "Could not find a fieldset descendant. Our presence is meaningless.",
-            );
-        this.legend = this.querySelector("legend");
-    }
-    private render() {
-        const selected_count = this.table
-            ? this.table.required_table_manager().selected_ids.size
-            : 0;
-
-        if (this.fieldset) this.fieldset.disabled = selected_count == 0;
-        if (this.legend)
-            this.legend.innerText = `With ${selected_count} selected item(s):`;
-    }
-    required_table_manager(): TableManager {
-        if (!this.table) throw new Error("We are not connected to a table");
-        return this.table.required_table_manager();
-    }
-}
-/**
-    Registers a custom element (<qdt-selection-fieldset-controller>) for wrapping a <fieldset> element.
-    The custom element:
-    - requires a "table-id" attribute to be set, which must be the id of a data table element
-    - dynamically updates the fieldset's "disabled" attribute
-    - dynamically updates the fieldset's legend (to include # of selected items)
-    - provides access to the TableManager of the connected data table
- */
-export function register_selection_fieldset_controller_custom_element() {
-    customElements.define(
-        "qdt-selection-fieldset-controller",
-        QdtSelectionFieldsetController,
-    );
-}