@hypericon/mico 0.3.24 → 0.4.0

package/dist/esm/components/tab-panel/TabPanel.d.ts

@@ -0,0 +1,23 @@
+import m from "mithril";
+import { TabPanelSettings } from "./tab-panel-settings";
+export interface TabPanelAttrs {
+    /** Labels of the tabs, in order. Any undefined labels or children are completely ignored. */
+    labels: (string | m.Vnode<any> | undefined)[];
+    /** Optional settings to apply to the tab panel, alongside any default settings */
+    settings?: TabPanelSettings;
+    /** If present, this field is given a function that can then be used to request tab index changes */
+    getRequestFn?: (requestFn: (index: number) => void) => any;
+}
+interface TabPanelState {
+    /** The currently selected index */
+    index: number;
+    /** Function to set the selected index, clamping it within actual possibilities */
+    setIndex: (index: number) => void;
+    /** The total number of tabs in the panel (completely ignoring undefined children) */
+    tabCount: number;
+}
+/**
+ * If a child pane is undefined, it is completely ignored.
+ */
+export declare const TabPanel: m.Component<TabPanelAttrs, TabPanelState>;
+export {};

package/dist/esm/components/tab-panel/TabPanel.js

@@ -0,0 +1,88 @@
+import m from "mithril";
+import { DEFAULT_TAB_PANEL_SETTINGS as SETTINGS } from "./tab-panel-default-settings";
+/**
+ * If a child pane is undefined, it is completely ignored.
+ */
+export const TabPanel = {
+    oninit({ attrs, state, children }) {
+        var _a, _b, _c;
+        state.tabCount = countChildren(children);
+        state.setIndex = (index) => {
+            var _a, _b;
+            const lastIndex = state.tabCount - 1;
+            if (index < 0)
+                index = 0;
+            if (index > lastIndex)
+                index = lastIndex;
+            state.index = index;
+            if ((_a = attrs.settings) === null || _a === void 0 ? void 0 : _a.persistenceKey)
+                localStorage.setItem((_b = attrs.settings) === null || _b === void 0 ? void 0 : _b.persistenceKey, String(index));
+        };
+        if ((_a = attrs.settings) === null || _a === void 0 ? void 0 : _a.persistenceKey) {
+            const loaded = localStorage.getItem((_b = attrs.settings) === null || _b === void 0 ? void 0 : _b.persistenceKey);
+            state.setIndex(Number(loaded));
+        }
+        else {
+            state.setIndex(((_c = attrs.settings) === null || _c === void 0 ? void 0 : _c.initialIndex) || 0);
+        }
+        // If a request function has been asked for, return it
+        if (attrs.getRequestFn) {
+            attrs.getRequestFn(state.setIndex);
+        }
+    },
+    onremove({ attrs, state }) {
+        state.setIndex = () => undefined;
+    },
+    onbeforeupdate({ attrs, state, children }) {
+        // Ensure any children added/removed since last redraw are accounted for
+        if (children instanceof Array)
+            children = children.filter(c => c !== undefined);
+        state.tabCount = countChildren(children);
+    },
+    view({ attrs, state, children }) {
+        var _a, _b, _c, _d, _e, _f;
+        // Ignore undefined children and labels
+        if (children instanceof Array)
+            children = children.filter(c => c !== undefined);
+        const labels = attrs.labels.filter(l => l !== undefined);
+        return m("", {
+            class: `${SETTINGS.class.tabPanel} ${(_b = (_a = attrs.settings) === null || _a === void 0 ? void 0 : _a.classes) === null || _b === void 0 ? void 0 : _b.tabPanel}`,
+        }, [
+            // m(Draggable, {
+            //   // TODO: wire up to allow draggable scrolling on desktop
+            //   ondrag: ({ x, y }) => {},
+            // }, [
+            m("", {
+                class: `${SETTINGS.class.buttonBar} ${(_d = (_c = attrs.settings) === null || _c === void 0 ? void 0 : _c.classes) === null || _d === void 0 ? void 0 : _d.buttonBar}`,
+            }, indices(state.tabCount).map(index => {
+                var _a, _b, _c, _d, _e, _f;
+                return m("button", {
+                    class: (SETTINGS.class.tabButton + " " + ((_b = (_a = attrs.settings) === null || _a === void 0 ? void 0 : _a.classes) === null || _b === void 0 ? void 0 : _b.tabButton) + " " +
+                        (state.index === index ? SETTINGS.class.tabButtonSelected : SETTINGS.class.tabButtonUnselected) + " " +
+                        (state.index === index ? (_d = (_c = attrs.settings) === null || _c === void 0 ? void 0 : _c.classes) === null || _d === void 0 ? void 0 : _d.tabButtonSelected : (_f = (_e = attrs.settings) === null || _e === void 0 ? void 0 : _e.classes) === null || _f === void 0 ? void 0 : _f.tabButtonUnselected)),
+                    onclick: () => state.setIndex(index),
+                }, labels[index] || `Tab ${index + 1}`);
+            })),
+            // ]),
+            m("div", {
+                class: `${SETTINGS.class.selectedPane} ${(_f = (_e = attrs.settings) === null || _e === void 0 ? void 0 : _e.classes) === null || _f === void 0 ? void 0 : _f.selectedPane}`,
+            }, [
+                (!(children instanceof Array)) ? children :
+                    children.map((child, index) => m("", {
+                        style: `display: ${index === state.index ? "block" : "none"}`,
+                    }, child)),
+            ]),
+        ]);
+    }
+};
+function countChildren(children) {
+    if (children === undefined)
+        return 0;
+    if (children instanceof Array)
+        return children.filter(c => c !== undefined).length;
+    return 1;
+}
+/** Converts a count to a list of indices */
+function indices(count) {
+    return Array(count).fill(0).map((val, index) => index);
+}

package/dist/esm/components/tab-panel/index.d.ts

@@ -0,0 +1,3 @@
+export * from "./tab-panel-default-settings";
+export * from "./tab-panel-settings";
+export * from "./TabPanel";

package/dist/esm/components/tab-panel/index.js

@@ -0,0 +1,3 @@
+export * from "./tab-panel-default-settings";
+export * from "./tab-panel-settings";
+export * from "./TabPanel";

package/dist/esm/components/tab-panel/tab-panel-default-settings.d.ts

@@ -0,0 +1,17 @@
+export declare const DEFAULT_TAB_PANEL_SETTINGS: {
+    /** Optional CSS classes to apply to parts of the tab panel */
+    class: {
+        /** Space-separated CSS classes to apply to the entire tab panel */
+        tabPanel: string;
+        /** Space-separated CSS classes to apply to the panel's button bar */
+        buttonBar: string;
+        /** Space-separated CSS classes to apply to all tab buttons */
+        tabButton: string;
+        /** Space-separated CSS classes to apply to the currently-selected tab button */
+        tabButtonUnselected: string;
+        /** Space-separated CSS classes to apply to all the currently-unselected tab buttons */
+        tabButtonSelected: string;
+        /** Space-separated CSS classes to apply to the tab's contents pane displaying the selected child */
+        selectedPane: string;
+    };
+};

package/dist/esm/components/tab-panel/tab-panel-default-settings.js

@@ -0,0 +1,17 @@
+export const DEFAULT_TAB_PANEL_SETTINGS = {
+    /** Optional CSS classes to apply to parts of the tab panel */
+    class: {
+        /** Space-separated CSS classes to apply to the entire tab panel */
+        tabPanel: "",
+        /** Space-separated CSS classes to apply to the panel's button bar */
+        buttonBar: "",
+        /** Space-separated CSS classes to apply to all tab buttons */
+        tabButton: "",
+        /** Space-separated CSS classes to apply to the currently-selected tab button */
+        tabButtonUnselected: "",
+        /** Space-separated CSS classes to apply to all the currently-unselected tab buttons */
+        tabButtonSelected: "",
+        /** Space-separated CSS classes to apply to the tab's contents pane displaying the selected child */
+        selectedPane: "",
+    },
+};

package/dist/esm/components/tab-panel/tab-panel-settings.d.ts

@@ -0,0 +1,28 @@
+/**
+ * Settings that customise the behaviour of a tab panel
+ */
+export interface TabPanelSettings {
+    /** The index of the tab initially selected, default = 0 */
+    initialIndex?: number;
+    /** How to position the tabs in the row, default = "left" (NOT IMPLEMENTED) */
+    align?: "left" | "right" | "center" | "justify";
+    /** How to handle overflowing tabs in the row (NOT IMPLEMENTED) */
+    overflow?: "scroll" | "wrap" | "hide";
+    /** Optional key to use to persist the tab panel's selected tab to local storage */
+    persistenceKey?: string;
+    /** Optional CSS classes to apply to parts of the tab panel */
+    classes?: {
+        /** Space-separated CSS classes to apply to the entire tab panel */
+        tabPanel?: string;
+        /** Space-separated CSS classes to apply to the panel's button bar */
+        buttonBar?: string;
+        /** Space-separated CSS classes to apply to all tab buttons */
+        tabButton?: string;
+        /** Space-separated CSS classes to apply to the currently-selected tab button */
+        tabButtonSelected?: string;
+        /** Space-separated CSS classes to apply to all the currently-unselected tab buttons */
+        tabButtonUnselected?: string;
+        /** Space-separated CSS classes to apply to the tab's contents pane displaying the selected child */
+        selectedPane?: string;
+    };
+}

package/dist/esm/components/tab-panel/tab-panel-settings.js

@@ -0,0 +1,11 @@
+export {};
+// export const DEFAULT_TAB_PANEL_SETTINGS: TabPanelSettings = {
+//   classes: {
+//     tabPanel: "w-full my-4",
+//     buttonBar: "flex flex-row items-center overflow-scroll hide-scrollbar border-gray-800 border-b-2",
+//     tabButton: "btn border border-gray-800 outline-none focus:outline-none",
+//     tabButtonUnselected: "btn-dark",
+//     tabButtonSelected: "text-black bg-white",
+//     selectedPane: "",
+//   },
+// };

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

@@ -0,0 +1,64 @@
+import m from "mithril";
+export type TableCellDisplayFn<T> = (item: T, index: number) => m.Children;
+export interface TableColumnDefinitionOptions {
+    /** CSS classes to apply to all the cells in the column, including the header */
+    class?: string;
+    /** CSS stylees to apply to all the cells in the column, including the header */
+    style?: string;
+}
+export type TableColumnDefinition<T> = {
+    header: string | m.Vnode<any, any>;
+    cell: TableCellDisplayFn<T>;
+    /** Optional settings to tweak the column's behaviour */
+    options?: TableColumnDefinitionOptions;
+};
+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>, 
+/** Optional settings to tweak the column's behaviour */
+options?: TableColumnDefinitionOptions) => 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/esm/components/table/Table.js

@@ -0,0 +1,68 @@
+import m from "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
+ */
+export function typedTable() {
+    const typedTable = Table;
+    const col = (header, cell, options) => {
+        return { header, cell, options };
+    };
+    return Object.assign(Object.assign({}, typedTable), { col });
+}
+export const Table = {
+    view({ attrs }) {
+        var _a, _b, _c, _d;
+        return m("table.mico-table", {
+            class: attrs.class,
+            style: `${(_a = attrs.style) !== null && _a !== void 0 ? _a : ""} table-layout: ${((_b = attrs.layout) !== null && _b !== void 0 ? _b : "auto")};`,
+        }, [
+            m("thead", [
+                m("tr", [
+                    attrs.columns.map(col => {
+                        var _a, _b;
+                        return m("th", {
+                            class: (_a = col.options) === null || _a === void 0 ? void 0 : _a.class,
+                            style: (_b = col.options) === null || _b === void 0 ? void 0 : _b.style,
+                        }, [
+                            col.header,
+                        ]);
+                    }),
+                ]),
+            ]),
+            m("tbody", [
+                attrs.data.map((item, dataIndex) => {
+                    return m("tr", [
+                        attrs.columns.map((col, colIndex) => {
+                            var _a, _b, _c;
+                            return m("td", {
+                                class: (_a = col.options) === null || _a === void 0 ? void 0 : _a.class,
+                                style: (_b = col.options) === null || _b === void 0 ? void 0 : _b.style,
+                            }, [
+                                (_c = col.cell) === null || _c === void 0 ? void 0 : _c.call(col, item, dataIndex),
+                            ]);
+                        }),
+                    ]);
+                }),
+                ((_c = attrs.data) === null || _c === void 0 ? void 0 : _c.length) === 0 ? m("tr", [
+                    m("td.text-center.text-medium", {
+                        colspan: attrs.columns.length,
+                    }, [
+                        (_d = attrs.emptyMessage) !== null && _d !== void 0 ? _d : "No items",
+                    ]),
+                ]) : [],
+            ]),
+        ]);
+    }
+};

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

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

package/dist/esm/components/table/index.js

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

package/dist/esm/components/toast/index.d.ts

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

package/dist/esm/components/toast/index.js

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

package/dist/esm/components/toast/toast.d.ts

@@ -0,0 +1,15 @@
+import Toastify, { Options } from "toastify-js";
+import m from "mithril";
+import "toastify-js/src/toastify.css";
+export declare const DefaultToastOptions: Partial<Options>;
+/**
+ * Display a toast
+ * @param message The message string of Vnode to display
+ * @param options See this link for all options: https://github.com/apvarun/toastify-js#documentation
+ * @returns
+ */
+export declare function toast(message: string | m.Vnode<any, any>, options?: Options): {
+    options: Toastify.Options;
+    element: Element | null;
+    hide: () => void;
+};

package/dist/esm/components/toast/toast.js

@@ -0,0 +1,31 @@
+import Toastify, { reposition } from "toastify-js";
+import m from "mithril";
+import "toastify-js/src/toastify.css";
+export const DefaultToastOptions = {
+    className: "mico-toast",
+    gravity: "bottom",
+    oldestFirst: true,
+    position: "left",
+};
+/**
+ * Display a toast
+ * @param message The message string of Vnode to display
+ * @param options See this link for all options: https://github.com/apvarun/toastify-js#documentation
+ * @returns
+ */
+export function toast(message, options) {
+    if (!message)
+        message = "toast";
+    const toastifyOpts = Object.assign({}, DefaultToastOptions, options, typeof message === "string" ? { text: message } : undefined);
+    const toastify = Toastify(toastifyOpts);
+    toastify.showToast();
+    if (toastify.toastElement && typeof message !== "string" && "tag" in message) {
+        m.render(toastify.toastElement, message);
+        reposition();
+    }
+    return {
+        options: toastify.options,
+        element: toastify.toastElement,
+        hide: () => toastify.hideToast(),
+    };
+}

package/dist/esm/components/tooltip/index.d.ts

@@ -0,0 +1,3 @@
+export * from "./tooltip-defaults";
+export * from "./tooltip-function";
+export * from "./tooltip-interfaces";

package/dist/esm/components/tooltip/index.js

@@ -0,0 +1,3 @@
+export * from "./tooltip-defaults";
+export * from "./tooltip-function";
+export * from "./tooltip-interfaces";

package/dist/esm/components/tooltip/tooltip-defaults.d.ts

@@ -0,0 +1,23 @@
+import { TooltipPosition } from "./tooltip-interfaces";
+export declare const TOOLTIP_DEFAULTS: {
+    /** How to position the tooltips by default */
+    DEFAULT_POS: TooltipPosition;
+    /** Delay in milliseconds before showing the tooltip */
+    DEFAULT_DELAY: number;
+    /** CSS class to apply to all tooltips */
+    TOOLTIP_CLASS: string;
+    /** Maximum width in pixels */
+    MAX_WIDTH_PX: number;
+    /** Maximum height in pixels */
+    MAX_HEIGHT_PX: number;
+    /** Maximum width in pixels when the "jumbo" flag is set */
+    MAX_WIDTH_JUMBO_PX: number;
+    /** Maximum height in pixels when the "jumbo" flag is set */
+    MAX_HEIGHT_JUMBO_PX: number;
+    /** Whether to attach tooltips to the document body instead of the target element */
+    ATTACH_TO_BODY: boolean;
+    /** Optionally disable tooltips globally, e.g. on touch screens */
+    IS_ENABLED: boolean;
+    /** Log debug messages to the console */
+    ENABLE_DEBUG: boolean;
+};

package/dist/esm/components/tooltip/tooltip-defaults.js

@@ -0,0 +1,22 @@
+export const TOOLTIP_DEFAULTS = {
+    /** How to position the tooltips by default */
+    DEFAULT_POS: "cursor",
+    /** Delay in milliseconds before showing the tooltip */
+    DEFAULT_DELAY: 500,
+    /** CSS class to apply to all tooltips */
+    TOOLTIP_CLASS: "mico-tooltip",
+    /** Maximum width in pixels */
+    MAX_WIDTH_PX: 250,
+    /** Maximum height in pixels */
+    MAX_HEIGHT_PX: 100,
+    /** Maximum width in pixels when the "jumbo" flag is set */
+    MAX_WIDTH_JUMBO_PX: 400,
+    /** Maximum height in pixels when the "jumbo" flag is set */
+    MAX_HEIGHT_JUMBO_PX: 300,
+    /** Whether to attach tooltips to the document body instead of the target element */
+    ATTACH_TO_BODY: false,
+    /** Optionally disable tooltips globally, e.g. on touch screens */
+    IS_ENABLED: true,
+    /** Log debug messages to the console */
+    ENABLE_DEBUG: false,
+};

package/dist/esm/components/tooltip/tooltip-function.d.ts

@@ -0,0 +1,35 @@
+import { TooltipOptions } from "./tooltip-interfaces";
+/**
+ * Display a tooltip using the given mouse event.
+ * Call this function from an element's "mouseenter" event.
+ *
+ * e.g.:
+ * ```
+ * onmouseenter: (ev: MouseEvent) => tooltip(ev, "Howdy!"),
+ * ```
+ * @param ev
+ * @param tooltip Nothing is displayed if the tooltip text is empty
+ * @param opts
+ * @returns
+ */
+export declare function tooltip(ev: MouseEvent, tooltip: string, opts?: Partial<TooltipOptions>): void;
+/**
+ * Return an object that can be spread into an element's attrs to add a tooltip using the mouseenter event
+ *
+ * @example
+ * ```ts
+ * m("button", {
+ *   ...tooltipSpread("Click the button"),
+ * }, "Click me"),
+ * // is equivalent to:
+ * m("button", {
+*    onmousenter: (ev: Mousevent) => tooltip(ev, "Click the button"),
+ * }, "Click me"),
+ * ```
+ * @param value
+ * @param opts
+ * @returns
+ */
+export declare function tooltipSpread(value: string, opts?: Partial<TooltipOptions>): {
+    onmouseenter: (ev: MouseEvent) => void;
+};