@hypericon/mico 0.2.0 → 0.2.2

package/README.md

@@ -6,3 +6,9 @@
 UI components and utilities built with Mithril. 
 
 <a href="https://www.npmjs.com/package/@hypericon/mico">![NPM badge](https://img.shields.io/npm/v/@hypericon/mico)</a>
+
+## Installation
+
+```sh
+$ npm i @hypericon/mico
+```

package/dist/components/index.d.ts

@@ -1,2 +1,4 @@
 export * from "./icon";
 export * from "./markdown";
+export * from "./menu";
+export * from "./table";

package/dist/components/index.js

@@ -21,12 +21,12 @@ Object.defineProperty(exports, "__esModule", { value: true });
 // export * from "./form";
 __exportStar(require("./icon"), exports);
 __exportStar(require("./markdown"), exports);
-// export * from "./menu";
+__exportStar(require("./menu"), exports);
 // export * from "./modal";
 // export * from "./pagination";
 // export * from "./popover";
 // export * from "./reorderable-list";
-// export * from "./table";
+__exportStar(require("./table"), exports);
 // export * from "./toast";
 // export * from "./tooltip";
 // export * from "./tree";

package/dist/components/markdown/Markdown.d.ts

@@ -22,6 +22,11 @@ export declare const Markdown: m.Component<{
     unsanitised?: boolean;
     /** Highlight syntax */
     highlight?: boolean;
+    /**
+     * Wrap all the given "markdown" in triple-backticks with the given language string and enable highlighting
+     * @example "typescript"
+     */
+    highlightAllAs?: string;
     /** CSS classes to apply to the container div */
     class?: string;
     /** CSS styles to apply to the container div */

package/dist/components/markdown/Markdown.js

@@ -27,7 +27,7 @@ exports.MARKDOWN_DEFAULT_OPTIONS = {
 exports.Markdown = {
     oncreate({ attrs }) {
         var _a;
-        if (attrs.highlight === true) {
+        if (attrs.highlight === true || Boolean(attrs.highlightAllAs)) {
             // console.log("highlighting...");
             (_a = window.hljs) === null || _a === void 0 ? void 0 : _a.highlightAll();
             // hljs.highlightAll();
@@ -41,7 +41,10 @@ exports.Markdown = {
     // },
     view({ attrs, children }) {
         var _a, _b, _c, _d, _e, _f;
-        const markdown = (_c = (_b = (_a = attrs.markdown) !== null && _a !== void 0 ? _a : (typeof children === "string" ? children : undefined)) !== null && _b !== void 0 ? _b : (children instanceof Array && children.length > 0 && typeof children[0] === "string" ? children[0] : undefined)) !== null && _c !== void 0 ? _c : "";
+        let markdown = (_c = (_b = (_a = attrs.markdown) !== null && _a !== void 0 ? _a : (typeof children === "string" ? children : undefined)) !== null && _b !== void 0 ? _b : (children instanceof Array && children.length > 0 && typeof children[0] === "string" ? children[0] : undefined)) !== null && _c !== void 0 ? _c : "";
+        if (attrs.highlightAllAs) {
+            markdown = "```" + attrs.highlightAllAs + "\n" + markdown + "\n" + "```";
+        }
         const parsed = marked_1.marked.parse(markdown, (_d = attrs.markedOptions) !== null && _d !== void 0 ? _d : exports.MARKDOWN_DEFAULT_OPTIONS);
         const sanitised = attrs.unsanitised === true ? parsed : dompurify_1.default.sanitize(parsed);
         const result = sanitised;

package/dist/components/menu/Menu.d.ts

@@ -0,0 +1,7 @@
+import m from "mithril";
+export declare const Menu: m.Component<{
+    x: number | undefined;
+    y: number | undefined;
+}, {
+    el?: HTMLDivElement;
+}>;

package/dist/components/menu/Menu.js

@@ -0,0 +1,79 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Menu = void 0;
+const mithril_1 = __importDefault(require("mithril"));
+const menu_constants_1 = require("./menu-constants");
+const menu_settings_1 = require("./menu-settings");
+exports.Menu = {
+    oninit() { },
+    oncreate({ dom }) {
+        if (dom) {
+            this.el = dom;
+            this.el.focus();
+        }
+    },
+    onupdate({ dom }) {
+        // if (dom) this.el = dom as HTMLDivElement;
+    },
+    view({ attrs, children, }) {
+        var _a, _b;
+        const maxWidthPx = Math.min(window.innerWidth, menu_constants_1.MENU_CONSTANTS.MAX_WIDTH_PX);
+        const maxHeightPx = window.innerHeight / 2;
+        const xPx = (_a = attrs.x) !== null && _a !== void 0 ? _a : 0;
+        const yPx = (_b = attrs.y) !== null && _b !== void 0 ? _b : 0;
+        const flipH = ((xPx + menu_constants_1.MENU_CONSTANTS.MIN_WIDTH_PX) > window.innerWidth);
+        const flipV = menu_settings_1.MENU_SETTINGS.ANCHOR === "page"
+            ? ((yPx + maxHeightPx - window.scrollY) > window.innerHeight)
+            : ((yPx + maxHeightPx) > window.innerHeight);
+        // console.log({
+        //   "yPx": yPx,
+        //   "maxHeightPx": maxHeightPx,
+        //   "window.scrollY": window.scrollY,
+        //   "window.innerHeight": window.innerHeight,
+        //   "flipV": flipV,
+        // });
+        // TODO: don't let the menu width actually touch the screen width; it will fall off the left hand side
+        const posH = flipH ? `right: ${window.innerWidth - xPx}px;` : `left: ${xPx}px;`;
+        const posV = flipV ? `bottom: ${window.innerHeight - yPx}px;` : `top: ${yPx}px;`;
+        return (0, mithril_1.default)("", {
+            key: Date.now(),
+            class: menu_settings_1.MENU_SETTINGS.MENU_CLASS,
+            style: `position: absolute; overflow-y: auto; overflow-x: hidden; ${posH} ${posV} z-index: 100; min-width: ${menu_constants_1.MENU_CONSTANTS.MIN_WIDTH_PX}px; max-width: ${maxWidthPx}px; max-height: ${maxHeightPx}px;`,
+            tabIndex: -1,
+            onkeydown: (ev) => {
+                var _a, _b, _c, _d, _e, _f;
+                const focussableElems = Array.from((_b = (_a = this.el) === null || _a === void 0 ? void 0 : _a.querySelectorAll("button, input, select, textarea")) !== null && _b !== void 0 ? _b : [])
+                    .filter(el => !Boolean(el.disabled));
+                let focusIndex = -1;
+                if (focussableElems) {
+                    for (let i = 0; i < focussableElems.length; i++) {
+                        const element = focussableElems[i];
+                        if (document.activeElement === element) {
+                            focusIndex = i;
+                            break;
+                        }
+                    }
+                }
+                if (ev.key === "ArrowDown") {
+                    // console.log("move down, focussable list:", focussableElems, "this.el", this.el);
+                    focusIndex += 1;
+                    if (focusIndex >= focussableElems.length)
+                        focusIndex = 0;
+                    (_d = (_c = focussableElems[focusIndex]).focus) === null || _d === void 0 ? void 0 : _d.call(_c);
+                }
+                if (ev.key === "ArrowUp") {
+                    // console.log("move up, focussable list:", focussableElems, "this.el", this.el);
+                    focusIndex -= 1;
+                    if (focusIndex < 0)
+                        focusIndex = focussableElems.length - 1;
+                    (_f = (_e = focussableElems[focusIndex]).focus) === null || _f === void 0 ? void 0 : _f.call(_e);
+                }
+            },
+        }, [
+            children,
+        ]);
+    }
+};

package/dist/components/menu/MenuButton.d.ts

@@ -0,0 +1,14 @@
+import m from "mithril";
+import { IconAttrs } from "../icon";
+export declare const MenuButton: m.Component<{
+    icon?: m.Vnode<any, any> | IconAttrs;
+    label?: string;
+    hint?: string;
+    disabled?: boolean;
+    onclick?: (ev: MouseEvent) => any;
+    onhover?: (ev: MouseEvent) => any;
+    onprev?: (ev: KeyboardEvent) => any;
+    onnext?: (ev: KeyboardEvent) => any;
+    class?: string;
+    style?: string;
+}>;

package/dist/components/menu/MenuButton.js

@@ -0,0 +1,47 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.MenuButton = void 0;
+const mithril_1 = __importDefault(require("mithril"));
+const icon_1 = require("../icon");
+const menu_settings_1 = require("./menu-settings");
+exports.MenuButton = {
+    view({ attrs }) {
+        var _a, _b;
+        return (0, mithril_1.default)("button", {
+            class: `${(_a = attrs.class) !== null && _a !== void 0 ? _a : ""} ${menu_settings_1.MENU_SETTINGS.MENU_BUTTON_CLASS}`,
+            style: `${(_b = attrs.style) !== null && _b !== void 0 ? _b : ""} width: 100%; height: 1.5rem; padding-right: 0.5rem; display: flex; align-items: center;`,
+            disabled: attrs.disabled,
+            onclick: (ev) => {
+                var _a;
+                (_a = attrs.onclick) === null || _a === void 0 ? void 0 : _a.call(attrs, ev);
+                mithril_1.default.redraw();
+            },
+        }, [
+            (0, mithril_1.default)("", {
+                // class: attrs.disabled ? "text-disabled" : "text-icon",
+                class: menu_settings_1.MENU_SETTINGS.MENU_BUTTON_ICON_CLASS,
+                style: "width: 2rem; flex: none; display: flex; align-items: center; justify-content: space-around;",
+            }, [
+                attrs.icon ? [
+                    ("fas" in attrs.icon || "far" in attrs.icon || "fab" in attrs.icon)
+                        ? (0, mithril_1.default)(icon_1.Icon, Object.assign({}, attrs.icon))
+                        : attrs.icon,
+                ] : [],
+            ]),
+            (0, mithril_1.default)("span", {
+                class: menu_settings_1.MENU_SETTINGS.MENU_BUTTON_LABEL_CLASS,
+                style: "overflow: hidden; text-overflow: ellipsis; white-space: nowrap;",
+            }, attrs.label),
+            (0, mithril_1.default)("", { style: "flex: 1 1 0%;" }),
+            attrs.hint
+                ? (0, mithril_1.default)("span", {
+                    class: menu_settings_1.MENU_SETTINGS.MENU_BUTTON_HINT_CLASS,
+                    style: "overflow: hidden; text-overflow: ellipsis; white-space: nowrap;",
+                }, attrs.hint)
+                : [],
+        ]);
+    }
+};

package/dist/components/menu/MenuSeparator.d.ts

@@ -0,0 +1,2 @@
+import m from "mithril";
+export declare const MenuSeparator: m.Component<{}>;

package/dist/components/menu/MenuSeparator.js

@@ -0,0 +1,17 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.MenuSeparator = void 0;
+const mithril_1 = __importDefault(require("mithril"));
+const menu_settings_1 = require("./menu-settings");
+exports.MenuSeparator = {
+    view() {
+        // return m(".my-2.ml-8.mr-2.border-b.border-slate-300");
+        return (0, mithril_1.default)("", {
+            class: menu_settings_1.MENU_SETTINGS.MENU_SEPARATOR_CLASS,
+            style: "margin: 0.25rem 0; border-bottom: 1px;",
+        });
+    }
+};

package/dist/components/menu/index.d.ts

@@ -0,0 +1,6 @@
+export * from "./Menu";
+export * from "./MenuButton";
+export * from "./MenuSeparator";
+export * from "./menu-constants";
+export * from "./menu-service";
+export * from "./menu-settings";

package/dist/components/menu/index.js

@@ -1 +1,22 @@
 "use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __exportStar = (this && this.__exportStar) || function(m, exports) {
+    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+__exportStar(require("./Menu"), exports);
+__exportStar(require("./MenuButton"), exports);
+__exportStar(require("./MenuSeparator"), exports);
+__exportStar(require("./menu-constants"), exports);
+__exportStar(require("./menu-service"), exports);
+__exportStar(require("./menu-settings"), exports);

package/dist/components/menu/menu-constants.d.ts

@@ -0,0 +1,4 @@
+export declare const MENU_CONSTANTS: {
+    readonly MIN_WIDTH_PX: 200;
+    readonly MAX_WIDTH_PX: 500;
+};

package/dist/components/menu/menu-constants.js

@@ -0,0 +1,7 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.MENU_CONSTANTS = void 0;
+exports.MENU_CONSTANTS = {
+    MIN_WIDTH_PX: 200,
+    MAX_WIDTH_PX: 500,
+};

package/dist/components/menu/menu-service.d.ts

@@ -0,0 +1,21 @@
+import m from "mithril";
+export declare class MenuService {
+    private containerEl;
+    private _menuVnode;
+    menuVnode$: import("rxjs").Observable<m.Vnode<any, any> | undefined>;
+    get menuVnode(): m.Vnode<any, any> | undefined;
+    get isOpen(): boolean;
+    constructor();
+    /**
+     * Show a new "right-click" menu at the position of the given mouse event,
+     * containing the given menu contents.
+     *
+     * This function handles stopping the mouse event propagation and aiting for any previous menus
+     * to be cleared.
+     * @param ev
+     * @param menuContents
+     */
+    show(ev: MouseEvent | undefined, menuContents: m.ChildArrayOrPrimitive): Promise<void>;
+    hide(): void;
+}
+export declare const menuService: MenuService;

package/dist/components/menu/menu-service.js

@@ -0,0 +1,78 @@
+"use strict";
+var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.menuService = exports.MenuService = void 0;
+const mithril_1 = __importDefault(require("mithril"));
+const rxjs_1 = require("rxjs");
+const Menu_1 = require("./Menu");
+const menu_settings_1 = require("./menu-settings");
+class MenuService {
+    get menuVnode() { return this._menuVnode.value; }
+    get isOpen() {
+        return Boolean(this.menuVnode);
+    }
+    constructor() {
+        this._menuVnode = new rxjs_1.BehaviorSubject(undefined);
+        this.menuVnode$ = this._menuVnode.asObservable();
+        this.containerEl = document.createElement("div");
+        this.containerEl.classList.add("menu-container");
+        document.body.append(this.containerEl);
+        document.addEventListener("click", () => {
+            if (this.isOpen) {
+                this.hide();
+            }
+        });
+        document.addEventListener("keydown", (ev) => {
+            if (this.isOpen && (ev.key === "Escape")) {
+                this.hide();
+            }
+        });
+    }
+    /**
+     * Show a new "right-click" menu at the position of the given mouse event,
+     * containing the given menu contents.
+     *
+     * This function handles stopping the mouse event propagation and aiting for any previous menus
+     * to be cleared.
+     * @param ev
+     * @param menuContents
+     */
+    show(ev, menuContents) {
+        return __awaiter(this, void 0, void 0, function* () {
+            ev === null || ev === void 0 ? void 0 : ev.stopPropagation();
+            if (this.isOpen) {
+                this.hide();
+            }
+            yield new Promise((resolve, reject) => {
+                setTimeout(() => resolve(), 0);
+            });
+            const menuVnode = (0, mithril_1.default)(Menu_1.Menu, {
+                x: ev === null || ev === void 0 ? void 0 : ev.clientX,
+                y: menu_settings_1.MENU_SETTINGS.ANCHOR === "page" ? ev === null || ev === void 0 ? void 0 : ev.pageY : ev === null || ev === void 0 ? void 0 : ev.clientY,
+            }, [
+                menuContents,
+            ]);
+            this._menuVnode.next(menuVnode);
+            mithril_1.default.render(this.containerEl, menuVnode);
+            // console.log("Added menu");
+        });
+    }
+    hide() {
+        this._menuVnode.next(undefined);
+        mithril_1.default.render(this.containerEl, []);
+        // console.log("Closed menu");
+    }
+}
+exports.MenuService = MenuService;
+exports.menuService = new MenuService();

package/dist/components/menu/menu-settings.d.ts

@@ -0,0 +1,9 @@
+export declare const MENU_SETTINGS: {
+    ANCHOR: "page" | "screen";
+    MENU_CLASS: string;
+    MENU_BUTTON_CLASS: string;
+    MENU_BUTTON_LABEL_CLASS: string;
+    MENU_BUTTON_ICON_CLASS: string;
+    MENU_BUTTON_HINT_CLASS: string;
+    MENU_SEPARATOR_CLASS: string;
+};

package/dist/components/menu/menu-settings.js

@@ -0,0 +1,12 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.MENU_SETTINGS = void 0;
+exports.MENU_SETTINGS = {
+    ANCHOR: "page",
+    MENU_CLASS: "",
+    MENU_BUTTON_CLASS: "",
+    MENU_BUTTON_LABEL_CLASS: "",
+    MENU_BUTTON_ICON_CLASS: "",
+    MENU_BUTTON_HINT_CLASS: "",
+    MENU_SEPARATOR_CLASS: "",
+};

package/dist/components/table/Table.d.ts

@@ -0,0 +1,54 @@
+import m from "mithril";
+export type TableCellDisplayFn<T> = (item: T, index: number) => string | number | boolean | m.Vnode<any, any> | null | undefined;
+export type TableColumnDefinition<T> = {
+    header: string | m.Vnode<any, any>;
+    cell: TableCellDisplayFn<T>;
+};
+export interface TableAttrs<T> {
+    /** The list of items to display as rows */
+    data: T[];
+    /** The definitions of the table columns */
+    columns: TableColumnDefinition<T>[];
+    /** Set the table to automatically size columns to fit (default), or use fixed column widths */
+    layout?: "auto" | "fixed";
+    /** Override the default message displayed when there are no data items */
+    emptyMessage?: string;
+    /** Any CSS classes to apply to the table */
+    class?: string;
+    /** Any CSS styles to apply to the table */
+    style?: string;
+}
+export interface TableState<T> {
+}
+/** Helper function to make it easier to define table columns */
+export type TableColumnDefinitionFn<T> = (
+/** The label or other element to display in the header */
+header: string | m.Vnode<any, any>, 
+/** Function defining how to display a cell in the column using the given row item */
+cell: TableCellDisplayFn<T>) => TableColumnDefinition<T>;
+/**
+ * Build a typed Table component which includes type checking for column definitions
+ * @example
+ * ```ts
+ * const PersonTable = typedTable<Person>();
+ * m(PersonTable, {
+ *   data: people, // `data` is type checked
+ *   columns: [
+ *     PersonTable.col("Name", p => p.name), // `p` is type checked
+ *     PersonTable.col("Age", p => findAge(p.dob)), // `p` is type checked
+ *    ],
+ * }),
+ * ```
+ * @returns
+ */
+export declare function typedTable<T>(): {
+    col: TableColumnDefinitionFn<T>;
+    oninit?(this: m._NoLifecycle<m.Component<TableAttrs<T>, TableState<T>> & TableState<T>>, vnode: m.Vnode<TableAttrs<T>, m._NoLifecycle<m.Component<TableAttrs<T>, TableState<T>> & TableState<T>>>): any;
+    oncreate?(this: m._NoLifecycle<m.Component<TableAttrs<T>, TableState<T>> & TableState<T>>, vnode: m.VnodeDOM<TableAttrs<T>, m._NoLifecycle<m.Component<TableAttrs<T>, TableState<T>> & TableState<T>>>): any;
+    onbeforeremove?(this: m._NoLifecycle<m.Component<TableAttrs<T>, TableState<T>> & TableState<T>>, vnode: m.VnodeDOM<TableAttrs<T>, m._NoLifecycle<m.Component<TableAttrs<T>, TableState<T>> & TableState<T>>>): void | Promise<any>;
+    onremove?(this: m._NoLifecycle<m.Component<TableAttrs<T>, TableState<T>> & TableState<T>>, vnode: m.VnodeDOM<TableAttrs<T>, m._NoLifecycle<m.Component<TableAttrs<T>, TableState<T>> & TableState<T>>>): any;
+    onbeforeupdate?(this: m._NoLifecycle<m.Component<TableAttrs<T>, TableState<T>> & TableState<T>>, vnode: m.Vnode<TableAttrs<T>, m._NoLifecycle<m.Component<TableAttrs<T>, TableState<T>> & TableState<T>>>, old: m.VnodeDOM<TableAttrs<T>, m._NoLifecycle<m.Component<TableAttrs<T>, TableState<T>> & TableState<T>>>): boolean | void;
+    onupdate?(this: m._NoLifecycle<m.Component<TableAttrs<T>, TableState<T>> & TableState<T>>, vnode: m.VnodeDOM<TableAttrs<T>, m._NoLifecycle<m.Component<TableAttrs<T>, TableState<T>> & TableState<T>>>): any;
+    view(this: m._NoLifecycle<m.Component<TableAttrs<T>, TableState<T>> & TableState<T>>, vnode: m.Vnode<TableAttrs<T>, m._NoLifecycle<m.Component<TableAttrs<T>, TableState<T>> & TableState<T>>>): void | m.Children;
+};
+export declare const Table: m.Component<TableAttrs<any>, TableState<any>>;

package/dist/components/table/Table.js

@@ -0,0 +1,68 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Table = exports.typedTable = void 0;
+const mithril_1 = __importDefault(require("mithril"));
+/**
+ * Build a typed Table component which includes type checking for column definitions
+ * @example
+ * ```ts
+ * const PersonTable = typedTable<Person>();
+ * m(PersonTable, {
+ *   data: people, // `data` is type checked
+ *   columns: [
+ *     PersonTable.col("Name", p => p.name), // `p` is type checked
+ *     PersonTable.col("Age", p => findAge(p.dob)), // `p` is type checked
+ *    ],
+ * }),
+ * ```
+ * @returns
+ */
+function typedTable() {
+    const typedTable = exports.Table;
+    const col = (header, cell) => {
+        return { header, cell };
+    };
+    return Object.assign(Object.assign({}, typedTable), { col });
+}
+exports.typedTable = typedTable;
+exports.Table = {
+    view({ attrs }) {
+        var _a, _b, _c, _d;
+        return (0, mithril_1.default)("table", {
+            class: attrs.class,
+            style: `${(_a = attrs.style) !== null && _a !== void 0 ? _a : ""} table-layout: ${((_b = attrs.layout) !== null && _b !== void 0 ? _b : "auto")};`,
+        }, [
+            (0, mithril_1.default)("thead", [
+                (0, mithril_1.default)("tr", [
+                    attrs.columns.map(col => {
+                        return (0, mithril_1.default)("th", [
+                            col.header,
+                        ]);
+                    }),
+                ]),
+            ]),
+            (0, mithril_1.default)("tbody", [
+                attrs.data.map(item => {
+                    return (0, mithril_1.default)("tr", [
+                        attrs.columns.map((col, index) => {
+                            var _a;
+                            return (0, mithril_1.default)("td", [
+                                (_a = col.cell) === null || _a === void 0 ? void 0 : _a.call(col, item, index),
+                            ]);
+                        }),
+                    ]);
+                }),
+                ((_c = attrs.data) === null || _c === void 0 ? void 0 : _c.length) === 0 ? (0, mithril_1.default)("tr", [
+                    (0, mithril_1.default)("td.text-center.text-medium", {
+                        colspan: attrs.columns.length,
+                    }, [
+                        (_d = attrs.emptyMessage) !== null && _d !== void 0 ? _d : "No items",
+                    ]),
+                ]) : [],
+            ]),
+        ]);
+    }
+};

package/dist/components/table/index.d.ts

@@ -0,0 +1 @@
+export * from "./Table";

package/dist/components/table/index.js

@@ -1 +1,17 @@
 "use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __exportStar = (this && this.__exportStar) || function(m, exports) {
+    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+__exportStar(require("./Table"), exports);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hypericon/mico",
-  "version": "0.2.0",
+  "version": "0.2.2",
   "description": "UI components and utilities with Mithril",
   "author": "Ed Johnson, Hypericon Ltd",
   "license": "MIT",
@@ -20,7 +20,8 @@
     "dompurify": "^3.0.3",
     "highlight.js": "^11.8.0",
     "marked": "^4.3.0",
-    "mithril": "^2.2.2"
+    "mithril": "^2.2.2",
+    "rxjs": "^7.8.1"
   },
   "devDependencies": {
     "@types/dompurify": "^3.0.2",