@qnc/qnc_data_tables 1.0.4 → 1.0.7-a

package/dist/event_names.ts

@@ -0,0 +1 @@
+export const SELECTION_CHANGE = "qnc-data-tables-selection-change";

package/dist/index.d.ts

@@ -0,0 +1,5 @@
+export { define_custom_element } from "./custom_element.js";
+export { Renderer } from "./renderer.js";
+export type { TableOptions } from "./table_options.js";
+export { create_style } from "./create_style.js";
+export { register_selection_fieldset_controller_custom_element } from "./selection_fieldset_controller.js";

package/dist/index.js

@@ -0,0 +1,4 @@
+export { define_custom_element } from "./custom_element.js";
+export { Renderer } from "./renderer.js";
+export { create_style } from "./create_style.js";
+export { register_selection_fieldset_controller_custom_element } from "./selection_fieldset_controller.js";

package/dist/index.ts

@@ -0,0 +1,5 @@
+export { define_custom_element } from "./custom_element.js";
+export { Renderer } from "./renderer.js";
+export type { TableOptions } from "./table_options.js";
+export { create_style } from "./create_style.js";
+export { register_selection_fieldset_controller_custom_element } from "./selection_fieldset_controller.js";

package/dist/mithril_view.d.ts

@@ -0,0 +1,16 @@
+import m from "mithril";
+import { AppState } from "./state_types.js";
+import { Renderer } from "./renderer.js";
+type Updaters = {
+    set_page_size: (page_size: number) => void;
+    set_page_number: (page_number: number) => void;
+    set_column_enabled: (column_key: string, enabled: boolean) => void;
+    sort_by_function: (sort_function_key: string) => void;
+    sort_by_column: (column_key: string, direction: "forward" | "reverse") => void;
+    set_column_width: (column_key: string, width: number) => void;
+    set_column_order: (keys: string[]) => void;
+    set_selected: (pk: string, selected: boolean) => void;
+    bulk_set_selected: (pks: Iterable<string>, selected: boolean) => void;
+};
+export declare function app_view(state: AppState<string>, renderer: Renderer, updaters: Updaters): (m.Vnode<any, any> | m.Vnode<any, any>[])[];
+export {};

package/dist/mithril_view.js

@@ -0,0 +1,484 @@
+import m, { redraw, trust } from "mithril";
+import { enable } from "@qnc/drag_sorter";
+import { begin_header_drag } from "./column_resizing.js";
+function classes(...values) {
+    return values.filter(Boolean).join(" ");
+}
+export function app_view(state, renderer, updaters) {
+    return [
+        m("style", state.row_width_style_string.get()),
+        top_control_bar({
+            current_page: state.page_number,
+            set_page: updaters.set_page_number,
+            total_pages: state.accessible_result_count !== null
+                ? Math.ceil(state.accessible_result_count / state.page_size)
+                : null,
+            page_size: state.page_size,
+            set_page_size: updaters.set_page_size,
+            result_count: state.result_count,
+            result_count_loading: state.fetching_result_count,
+            accessible_result_count: state.accessible_result_count,
+            extra_sort_functions: state.extra_sort_functions,
+            sort_by_function: updaters.sort_by_function,
+            current_sort: state.current_sort,
+        }),
+        column_controls(state.columns, updaters, renderer),
+        m("form", [
+            render_with_loader(state.fetching_page_data, [
+                table(state.columns, updaters, state.table_data, renderer, state.sort_state_interpreter, state.fill_last_page, state.page_size, state.table_key, state.include_selection_column, state.table_overflows_left, state.table_overflows_right, state.row_width_style_string, state.selected_pks),
+                state.include_selection_column &&
+                    selection_controls(state, updaters),
+            ]),
+        ]),
+    ];
+}
+function table(columns, updaters, data, renderer, sort_state_interpreter, fill_last_page, page_size, table_key, include_selection_column, table_overflows_left, table_overflows_right, row_width_style_string, selected_pks) {
+    return m("div", {
+        class: classes(`qnc-data-table qnc-data-table-${CSS.escape(table_key)}`, table_overflows_left.get() && "qdt-overflows-left", table_overflows_right.get() && "qdt-overflows-right"),
+        role: "table",
+        // style: all_columns().map(c=>`${column_width_property_name(c.key)}: ${c.width}px`).join(';')
+    }, m("div", {
+        class: "qnc-data-table-head",
+        role: "rowgroup",
+    }, header_row({
+        columns,
+        updaters,
+        sort_state_interpreter,
+        table_key,
+        include_selection_column,
+        renderer,
+        table_overflows_left,
+        table_overflows_right,
+        row_width_style_string,
+    })), m("div", {
+        class: "qnc-data-table-body",
+        role: "rowgroup",
+    }, table_rows(columns, data, fill_last_page, page_size, table_key, include_selection_column, updaters, selected_pks)));
+}
+function HeaderComponent(initialVnode) {
+    let sticky_style_string = "";
+    function setup_detector(detector, watched_value) {
+        const table = detector.closest(".qnc-data-table");
+        if (!table)
+            throw new Error("could not find parent table element");
+        new IntersectionObserver(function (entries, observer) {
+            var _a;
+            watched_value.set(!((_a = entries[0]) === null || _a === void 0 ? void 0 : _a.isIntersecting));
+        }, {
+            root: table,
+        }).observe(detector);
+    }
+    // Note: layout tightlty coupled to recompute_sticky_style_string
+    function raw_header_row(columns, updaters, renderer, sort_state_interpreter, table_key, table_overflows_left, table_overflows_right, include_selection_column) {
+        return m("div", {
+            role: "row",
+            className: `qnc-data-table-row qnc-data-table-header-row qnc-data-table-row qnc-data-table-row-${CSS.escape(table_key)}`,
+        }, 
+        // "overflow-left detector"
+        m("div", {
+            role: "columnheader",
+            style: "padding: 0; width: 0; border: none;",
+        }, m("div", {
+            style: "width: 1px; height: 1px; background-color: transparent; pointerEvents: none;",
+            oncreate: (vnode) => {
+                setup_detector(vnode.dom, table_overflows_left);
+            },
+        })), include_selection_column && empty_checkbox_cell(table_key), columns.fixed_enabled_columns.map((c) => header_cell(renderer, c, sort_state_interpreter, updaters, true, table_key)), m("div", {
+            role: "columnheader",
+            class: `qdt-overflow-indicator-cell qdt-overflow-indicator-cell-left qnc-data-table-fixed-cell-${CSS.escape(table_key)}`,
+        }), columns.sortable_enabled_columns.map((c) => header_cell(renderer, c, sort_state_interpreter, updaters, false, table_key)), empty_expanding_cell("columnheader"), m("div", {
+            role: "columnheader",
+            class: `qdt-overflow-indicator-cell qdt-overflow-indicator-cell-right`,
+        }), 
+        // "overflow-right detector"
+        m("div", {
+            role: "columnheader",
+            style: "padding: 0; width: 0; border: none; position: relative;",
+        }, m("div", {
+            style: "position: absolute; right: 0; width: 1px; height: 1px; background-color: transparent; pointerEvents: none;",
+            oncreate: (vnode) => {
+                setup_detector(vnode.dom, table_overflows_right);
+            },
+        })));
+    }
+    // Note: tightlty coupled to raw_header_row layout
+    function recompute_sticky_style_string(header_element, include_selection_column, columns, table_key) {
+        const old_value = sticky_style_string;
+        sticky_style_string = "";
+        const fixed_column_count = (include_selection_column ? 1 : 0) +
+            columns.fixed_enabled_columns.length +
+            1; // the "sticky divider" column, where box-shadow is rendered
+        let previous_width = 0;
+        const start_index = 1; // skip over the "scroll detector" column
+        let i = start_index; // i will range over "element index" of all fixed column headers
+        const end_index = start_index +
+            fixed_column_count + // all fixed columns
+            1; // left overflow indicator cell
+        while (i < end_index) {
+            const cell = header_element.children[i];
+            if (!cell)
+                break;
+            sticky_style_string += `.qnc-data-table-fixed-cell-${CSS.escape(table_key)}:nth-child(${i + 1}) {
+                position: sticky;
+                left: ${previous_width}px;
+                z-index: 2;
+            }`;
+            previous_width += cell.clientWidth;
+            i++;
+        }
+        return sticky_style_string != old_value;
+    }
+    /*
+        Rows need explicit min-width.
+        Otherwise, they are only as wide as table, and cells overflow.
+        This causes problems if:
+        1. there are any background colours/borders on rows
+        2. there are sticky columns, and row content is more than two table-widths wide (eventually, the sticky columns get pushed out view)
+
+        #1. can be solved by putting all colours/borders on cells, rather than rows, but issue #2 still requires fixed row widths.
+
+        While we _could_ compute the expected width based on columns.map(c => c.width), that approach would also require us to know the padding per cell (which might change based on media query). So let's just _measure_ the actual rendered width, instead.
+        
+        Note: this isn't foolproof, either. In hindsight, I'd have preferred to just calculate this based on column widths (perhaps setting `box-sizing: border-box` on them, so we wouldn't have to worry about padding).
+    */
+    function get_row_width_style(header, table_key) {
+        let row_width = 0;
+        let cell = header.firstElementChild;
+        while (cell) {
+            // skip the "empty expanding column"; otherwise, row width will never shrink, even when it should
+            if (!cell.classList.contains("qdt-empty-expanding-cell")) {
+                row_width += cell.clientWidth;
+            }
+            cell = cell.nextElementSibling;
+        }
+        return `.qnc-data-table-row-${CSS.escape(table_key)} {min-width: ${row_width}px;}`;
+    }
+    return {
+        oncreate(vnode) {
+            const { columns, include_selection_column, table_key, row_width_style_string, } = vnode.attrs;
+            row_width_style_string.set(get_row_width_style(vnode.dom, table_key));
+            if (recompute_sticky_style_string(vnode.dom, include_selection_column, columns, table_key))
+                redraw();
+        },
+        onupdate(vnode) {
+            const { columns, include_selection_column, table_key, row_width_style_string, } = vnode.attrs;
+            row_width_style_string.set(get_row_width_style(vnode.dom, table_key));
+            // Optimization opportunity: we _could_ hash (column order, column widths, include_selection_count)
+            // and return early whenever unchanged
+            if (recompute_sticky_style_string(vnode.dom, include_selection_column, columns, table_key))
+                redraw();
+        },
+        view(vnode) {
+            const { columns, updaters, renderer, sort_state_interpreter, table_key, table_overflows_left, table_overflows_right, include_selection_column, } = vnode.attrs;
+            return [
+                raw_header_row(columns, updaters, renderer, sort_state_interpreter, table_key, table_overflows_left, table_overflows_right, include_selection_column),
+                m("style", sticky_style_string),
+            ];
+        },
+    };
+}
+function header_row(attrs) {
+    return m(HeaderComponent, attrs);
+}
+function header_cell(renderer, column, sort_state_interpreter, updaters, fixed, table_key) {
+    const sort_direction = sort_state_interpreter(column.key);
+    return m("div", {
+        role: "columnheader",
+        style: {
+            width: column.width + "px",
+        },
+        class: classes("qdt-cell", "qdt-resizable-header", fixed && `qnc-data-table-fixed-cell-${CSS.escape(table_key)}`),
+    }, m("div", // the only reason this div is here is so that it has "overflow: hidden;", while the parent element has "overflow: visible" (to allow resize handle to overflow)
+    renderer.render_header({
+        label: renderer.render_with_optional_help_text(column.display, column.help_text),
+        sortable: column.sortable,
+        sorted: sort_direction || "no",
+        set_sort: function (direction) {
+            updaters.sort_by_column(column.key, direction);
+        },
+    })), m("span", {
+        onmousedown: (e) => {
+            e.preventDefault(); // prevent text highlighting
+            begin_header_drag(e, (width) => {
+                updaters.set_column_width(column.key, width);
+                m.redraw();
+            }, column.width, () => {
+                m.redraw();
+            });
+        },
+        class: "qdt-column-resizer",
+    }));
+}
+function table_rows(columns, data, fill_last_page, page_size, table_key, include_selection_column, updaters, selected_pks) {
+    return [
+        data.map((row) => table_row(row, columns, table_key, include_selection_column
+            ? checkbox_cell(row[0], updaters, selected_pks, table_key)
+            : null)),
+        fill_last_page &&
+            Array.from(Array(Math.max(0, page_size - data.length))).map((x) => raw_table_row(columns.fixed_enabled_columns.map((c) => data_cell(c, null, true, table_key)), columns.sortable_enabled_columns.map((c) => data_cell(c, null, false, table_key)), table_key, null)),
+    ];
+}
+function raw_table_row(fixed_cells, sortable_cells, table_key, checkbox_cell) {
+    return m("div", {
+        role: "row",
+        className: `qnc-data-table-row qnc-data-table-body-row qnc-data-table-row qnc-data-table-row-${CSS.escape(table_key)}`,
+    }, 
+    // Empty "scroll detector" column
+    m("div", {
+        role: "cell",
+        style: "width: 0px; padding: 0; border: none;",
+    }), checkbox_cell, 
+    // include_selection_column && checkbox_cell(pk, updaters, selected_pks),
+    fixed_cells, m("div", {
+        role: "cell",
+        class: `qdt-overflow-indicator-cell qdt-overflow-indicator-cell-left qnc-data-table-fixed-cell-${CSS.escape(table_key)}`,
+    }), sortable_cells, empty_expanding_cell(), m("div", {
+        role: "cell",
+        class: `qdt-overflow-indicator-cell qdt-overflow-indicator-cell-right`,
+    }), 
+    // Empty "overflow detector" column
+    m("div", {
+        role: "cell",
+        style: "width: 0px; padding: 0; border: none;",
+    }));
+}
+// #coupled-cell-functions: these functions are tightly coupled. TODO: move to a separate module
+function data_cell(column, content, fixed, table_key) {
+    return m("div", {
+        role: "cell",
+        style: {
+            width: column.width + "px",
+        },
+        class: classes("qdt-cell", fixed && `qnc-data-table-fixed-cell-${CSS.escape(table_key)}`),
+    }, content);
+}
+// Note: layout tightly coupled to HeaderRow
+function table_row(row, columns, table_key, checkbox_cell) {
+    const [id, cell_map] = row;
+    return raw_table_row(columns.fixed_enabled_columns.map((c) => data_cell(c, trust(cell_map.get(c.key) || ""), true, table_key)), columns.sortable_enabled_columns.map((c) => data_cell(c, trust(cell_map.get(c.key) || ""), false, table_key)), table_key, checkbox_cell);
+}
+// #coupled-cell-functions: these functions are tightly coupled. TODO: move to a separate module
+function empty_checkbox_cell(table_key) {
+    return m("div", {
+        role: "columnheader",
+        style: { width: "auto" }, // This is the only auto-width column; it works because every row has the same content
+        className: `qdt-cell qnc-data-table-fixed-cell-${CSS.escape(table_key)}`,
+    }, 
+    // Render an invisible checkbox, so this header cell takes up the same width as the rest of the checkbox cells
+    m("label", { className: "qdt-row-checkbox-label" }, m("input", {
+        type: "checkbox",
+        style: {
+            visibility: "hidden",
+            pointerEvents: "none",
+        },
+        tabIndex: -1,
+    })));
+}
+// #coupled-cell-functions: these functions are tightly coupled. TODO: move to a separate module
+function checkbox_cell(pk, updaters, selected_pks, table_key) {
+    return m("div", {
+        role: "cell",
+        style: { width: "auto" }, // This is the only auto-width column; it works because every row has the same content
+        className: `qdt-cell qnc-data-table-fixed-cell-${CSS.escape(table_key)}`,
+    }, m("label", { className: "qdt-row-checkbox-label" }, m("input", {
+        type: "checkbox",
+        checked: selected_pks.has(pk),
+        onchange: (e) => {
+            updaters.set_selected(pk, !selected_pks.has(pk));
+            // TODO: handle shift+clicking, like django_data_tables did
+        },
+    })));
+}
+function empty_expanding_cell(role = "cell") {
+    return m("div", {
+        style: { flexGrow: "1", padding: "0", flexBasis: "0px" },
+        class: "qdt-empty-expanding-cell",
+        // Just in case users are using this in their selector for default cell background/border
+        role: role,
+    });
+}
+function extra_sort_function_widget(current_sort, extra_sort_functions, sort_by_function) {
+    // TODO: update checkbox-dropdown to work with radio buttons, publish on npm, document that it should always be included as a peer dependency
+    // use that, so we can make help text smaller, and not show in "summary"
+    const current_function_key = current_sort &&
+        current_sort.type == "function" &&
+        current_sort.function_key;
+    return m("label", "sort by: ", m("select", {
+        onchange: (e) => {
+            const key = e.target.value;
+            if (key)
+                sort_by_function(key);
+        },
+    }, current_sort == null && m("option", "-----"), current_sort &&
+        current_sort.type == "column" &&
+        m("option", "(selected column)"), extra_sort_functions.map((esf) => m("option", {
+        selected: current_function_key == esf.key,
+        value: esf.key,
+    }, esf.display, esf.help_text && ` (${esf.help_text})`))));
+}
+function top_control_bar(options) {
+    function space_horizontally(gap, items) {
+        return m("div", { style: { overflow: "hidden" } }, m("div", { style: { display: "flex", marginRight: "-" + gap } }, items.map((item) => m("div", { style: { marginRight: gap } }, item, " "))));
+    }
+    const { current_page, set_page, total_pages, page_size, set_page_size, result_count, result_count_loading, accessible_result_count, } = options;
+    return [
+        space_horizontally("2em", [
+            // Paginator
+            [
+                m("button", {
+                    type: "button",
+                    disabled: current_page <= 1,
+                    onclick: (e) => set_page(current_page - 1),
+                }, "<"),
+                " Page ",
+                m("input", {
+                    type: "number",
+                    value: current_page,
+                    max: total_pages,
+                    style: { width: "3.5em" },
+                    onchange: function (e) {
+                        set_page(parseInt(e.target.value));
+                    },
+                }),
+                " of ",
+                total_pages !== null && total_pages !== void 0 ? total_pages : "?",
+                " ",
+                m("button", {
+                    type: "button",
+                    disabled: current_page >= (total_pages !== null && total_pages !== void 0 ? total_pages : 1),
+                    onclick: (e) => set_page(current_page + 1),
+                }, ">"),
+            ],
+            // Results per page
+            m("label", m("input", {
+                value: page_size,
+                type: "number",
+                style: { width: "3.5em" },
+                onchange: function (e) {
+                    set_page_size(parseInt(e.target.value));
+                },
+            }), " results per page"),
+            // Result count
+            render_with_loader(result_count_loading, m("span", m("b", result_count), " result(s) total.")),
+            options.extra_sort_functions.length &&
+                extra_sort_function_widget(options.current_sort, options.extra_sort_functions, options.sort_by_function),
+        ]),
+        m("div", accessible_result_count !== null &&
+            result_count !== null &&
+            accessible_result_count < result_count &&
+            m("div", { style: { color: "red", fontWeight: "bold" } }, m("sup", "*"), "The result table is limited to the first ", accessible_result_count, " results.")),
+    ];
+}
+function column_controls(columns, updaters, renderer) {
+    return m("details", { className: "qdt-column-details" }, m("summary", "Columns"), m("ol", {
+        oncreate: (vnode) => enable(vnode.dom, {
+            onchange: (container) => {
+                updaters.set_column_order(Array.from(container.children).map(function (li) {
+                    if (!(li instanceof HTMLElement))
+                        throw new Error(`unexpected child: ${li}`);
+                    const value = li.dataset.key;
+                    if (typeof value == "undefined")
+                        throw new Error("column li missing [data-key]");
+                    return value;
+                }));
+            },
+            stationary_list_item_markers: true,
+            handle_selector: ".handle",
+        }),
+    }, columns.all_sortable_columns.map((c) => m("li", {
+        "data-key": c.key,
+        key: c.key,
+        className: "qnc-data-table-column-item",
+    }, m("label", m("input", {
+        type: "checkbox",
+        checked: c.enabled,
+        onclick: (e) => updaters.set_column_enabled(c.key, !c.enabled),
+    }), " ", c.display, " ", 
+    // don't wrap c.display in help text, because it's part of the drag handle
+    c.help_text &&
+        renderer.render_with_help_text("", c.help_text), " ", m("span.handle", { style: { padding: "0 0.5em", cursor: "grab" } }, "↕︎"))))));
+}
+// I'd like to replace this with some kind of <qdt-loading-container> (make a new package on npm) which is user-styleable
+// Alternatively (or as part of that work), we could make use of <qnc-spinner-uppercase>
+// https://tracker.quadrant.net/issues/271/
+function render_with_loader(loading, content) {
+    return m("div", {
+        style: {
+            "--qdt-loading-spinner-size": "1em",
+            minWidth: "var(--qdt-loading-spinner-size)",
+            minHeight: "var(--qdt-loading-spinner-size)",
+            position: "relative",
+            isolation: "isolate", // force new stacking context
+        },
+    }, 
+    // content wrapper
+    m("div", {
+        style: {
+            opacity: loading ? "50%" : "",
+        },
+    }, content), 
+    // spinner
+    m("div", {
+        style: {
+            display: loading ? "block" : "none",
+            pointerEvents: "none",
+            zIndex: 2147483647,
+            position: "absolute",
+            top: "calc(50% - calc(var(--qdt-loading-spinner-size)/2))",
+            left: "calc(50% - calc(var(--qdt-loading-spinner-size)/2))",
+            borderRadius: "1000px",
+            border: "1px solid black",
+            borderWidth: "calc(var(--qdt-loading-spinner-size)/2)",
+            borderLeftColor: "white",
+            borderRightColor: "white",
+            opacity: "0.5",
+            animation: "qdt-loader-spin 1.2s linear infinite",
+        },
+    }));
+}
+function selection_controls(state, updaters) {
+    const page_ids = state.table_data.map(([pk, cells]) => pk);
+    const entire_page_selected = contains_all(state.selected_pks, new Set(page_ids));
+    const all_results_selected = contains_all(state.selected_pks, new Set(state.filtered_pks));
+    function clear_page() {
+        updaters.bulk_set_selected(page_ids, false);
+    }
+    function select_page() {
+        updaters.bulk_set_selected(page_ids, true);
+    }
+    function clear_table() {
+        updaters.bulk_set_selected(state.filtered_pks, false);
+    }
+    function select_table() {
+        updaters.bulk_set_selected(state.filtered_pks, true);
+    }
+    function clear_selection() {
+        updaters.bulk_set_selected(state.selected_pks, false);
+    }
+    const selection_operators = [
+        entire_page_selected
+            ? m("button", { onclick: clear_page, type: "button" }, "Deselect Current Page")
+            : m("button", { onclick: select_page, type: "button" }, "Select Current Page"),
+        all_results_selected
+            ? m("button", { onclick: clear_table, type: "button" }, "Deselect All Results")
+            : m("button", { onclick: select_table, type: "button" }, "Select All Results"),
+        m("button", {
+            onclick: clear_selection,
+            disabled: state.selected_pks.size == 0,
+            type: "button",
+        }, "Clear Selection"),
+    ];
+    return m("div.qdt-selection-controls", selection_operators);
+}
+const contains_all = Set.prototype.isSubsetOf
+    ? function (possible_superset, possible_subset) {
+        // @ts-ignore
+        return possible_subset.isSubsetOf(possible_superset);
+    }
+    : function (possible_superset, possible_subset) {
+        for (const value of possible_subset) {
+            if (!possible_superset.has(value))
+                return false;
+        }
+        return true;
+    };