@hypericon/mico 0.3.24 → 0.4.0

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

@@ -0,0 +1,200 @@
+import { TOOLTIP_DEFAULTS } from "./tooltip-defaults";
+/**
+ * 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 function tooltip(ev, tooltip, opts) {
+    var _a;
+    if (TOOLTIP_DEFAULTS.IS_ENABLED === false)
+        return;
+    // If there is no tooltip, don't bother
+    if (!tooltip)
+        return;
+    const target = ev.currentTarget;
+    const eventTarget = ev.target;
+    TOOLTIP_DEFAULTS.ENABLE_DEBUG && console.log(`target is ${target === null || target === void 0 ? void 0 : target.tagName}`);
+    TOOLTIP_DEFAULTS.ENABLE_DEBUG && console.log(`event target is ${eventTarget === null || eventTarget === void 0 ? void 0 : eventTarget.tagName}`);
+    if (!target) {
+        TOOLTIP_DEFAULTS.ENABLE_DEBUG && console.log("No target; returning from tooltip()");
+        return;
+    }
+    // if (target?.classList.contains(TOOLTIP_CLASS) || eventTarget?.classList.contains(TOOLTIP_CLASS)) {
+    //   return logger.debug("Target is tooltip div; returning from tooltip()");
+    // }
+    // This helps avoid re-adding tooltips when mousing over the tooltip itself
+    let hasTooltip = false;
+    target.childNodes.forEach((child, key, parent) => {
+        var _a;
+        if ((_a = child === null || child === void 0 ? void 0 : child.classList) === null || _a === void 0 ? void 0 : _a.contains(TOOLTIP_DEFAULTS.TOOLTIP_CLASS)) {
+            hasTooltip = true;
+        }
+    });
+    if (hasTooltip) {
+        TOOLTIP_DEFAULTS.ENABLE_DEBUG && console.log("Target already has tooltip; returning from tooltip()");
+        return;
+    }
+    const mousePos = { x: ev.x, y: ev.y };
+    const latestPosFn = (ev) => {
+        mousePos.x = ev.x;
+        mousePos.y = ev.y;
+    };
+    target.addEventListener("mousemove", latestPosFn);
+    const timeout = setTimeout(() => {
+        displayTooltip({ ev, target, tooltip, opts, mousePos });
+    }, (_a = opts === null || opts === void 0 ? void 0 : opts.delay) !== null && _a !== void 0 ? _a : TOOLTIP_DEFAULTS.DEFAULT_DELAY);
+    const clearFn = (ev) => {
+        TOOLTIP_DEFAULTS.ENABLE_DEBUG && console.log("Clearing tooltip timeout");
+        clearTimeout(timeout);
+        target.removeEventListener("mouseleave", clearFn);
+        target.removeEventListener("mousemove", latestPosFn);
+    };
+    target.addEventListener("mouseleave", clearFn);
+}
+/**
+ * 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 function tooltipSpread(value, opts) {
+    return {
+        onmouseenter: (ev) => tooltip(ev, value, opts),
+    };
+}
+/**
+ * TODO: consider adding arrows to top/bottom/left/right positioned tooltips
+ * e.g.: https://getbootstrap.com/docs/3.4/javascript/#tooltips
+ */
+function displayTooltip(settings) {
+    var _a, _b, _c;
+    const { ev, target, tooltip, opts, mousePos } = settings;
+    const cursorOffsetX = 5;
+    const cursorOffsetY = 20;
+    const pos = (_a = opts === null || opts === void 0 ? void 0 : opts.pos) !== null && _a !== void 0 ? _a : TOOLTIP_DEFAULTS.DEFAULT_POS;
+    let targetRect = target.getBoundingClientRect();
+    // targetRect = new DOMRect(targetRect.x, targetRect.y, targetRect.width, targetRect.height);
+    let targetCenter = {
+        x: targetRect.left + (targetRect.width / 2),
+        y: targetRect.top + (targetRect.height / 2),
+    };
+    const maxWidth = (opts === null || opts === void 0 ? void 0 : opts.jumbo) === true ? TOOLTIP_DEFAULTS.MAX_WIDTH_JUMBO_PX : TOOLTIP_DEFAULTS.MAX_WIDTH_PX;
+    const maxHeight = (opts === null || opts === void 0 ? void 0 : opts.jumbo) === true ? TOOLTIP_DEFAULTS.MAX_HEIGHT_JUMBO_PX : TOOLTIP_DEFAULTS.MAX_HEIGHT_PX;
+    const attachToBody = (_c = (_b = settings.opts) === null || _b === void 0 ? void 0 : _b.attachToBody) !== null && _c !== void 0 ? _c : TOOLTIP_DEFAULTS.ATTACH_TO_BODY;
+    TOOLTIP_DEFAULTS.ENABLE_DEBUG && console.log(`display tooltip "${tooltip}" on element ${target.tagName}`);
+    const tooltipEl = document.createElement("div");
+    tooltipEl.innerText = tooltip;
+    // tooltipEl.classList.value = "px-2 py-1 text-xs text-dark font-normal rounded border border-primary bg-white fade-in-100 no-select";
+    tooltipEl.classList.add("mico-tooltip-fade-in");
+    tooltipEl.classList.add(TOOLTIP_DEFAULTS.TOOLTIP_CLASS);
+    tooltipEl.style.position = "fixed";
+    tooltipEl.style.maxWidth = `${maxWidth}px`;
+    tooltipEl.style.maxHeight = `${maxHeight}px`;
+    tooltipEl.style.zIndex = "1000";
+    tooltipEl.style.whiteSpace = "normal";
+    tooltipEl.style.opacity = "1";
+    tooltipEl.style.textAlign = "left";
+    tooltipEl.style.overflow = "hidden";
+    tooltipEl.setAttribute("role", "tooltip");
+    // // Add the tooltip before positioning it to read its dimensions
+    // console.log(`tooltipEl width: ${tooltipEl.clientWidth}`);
+    // console.log(`tooltipEl height: ${tooltipEl.clientHeight}`);
+    if (attachToBody === true) {
+        document.body.append(tooltipEl);
+    }
+    else {
+        target.append(tooltipEl);
+    }
+    // console.log(`tooltipEl width: ${tooltipEl.clientWidth}`);
+    // console.log(`tooltipEl height: ${tooltipEl.clientHeight}`);
+    if (pos === "cursor" || pos === "follow") {
+        tooltipEl.style.top = `${mousePos.y + cursorOffsetY}px`;
+        if (mousePos.x < window.innerWidth - maxWidth) {
+            tooltipEl.style.left = `${mousePos.x + cursorOffsetX}px`;
+        }
+        else {
+            tooltipEl.style.right = `${document.documentElement.clientWidth - mousePos.x - cursorOffsetX}px`;
+        }
+    }
+    else if (pos === "top") {
+        tooltipEl.style.bottom = `${window.innerHeight - targetRect.top}px`; // - window.scrollY
+        tooltipEl.style.left = `${targetCenter.x - tooltipEl.clientWidth / 2}px`;
+    }
+    else if (pos === "bottom") {
+        tooltipEl.style.top = `${targetRect.bottom}px`; // + window.scrollY
+        tooltipEl.style.left = `${targetCenter.x - tooltipEl.clientWidth / 2}px`;
+    }
+    else if (pos === "left") {
+        tooltipEl.style.right = `${document.documentElement.clientWidth - targetRect.left}px`;
+        tooltipEl.style.top = `${targetCenter.y - tooltipEl.clientHeight / 2}px`;
+    }
+    else if (pos === "right") {
+        tooltipEl.style.left = `${targetRect.right}px`;
+        tooltipEl.style.top = `${targetCenter.y - tooltipEl.clientHeight / 2}px`;
+    }
+    if (pos === "follow") {
+        const followFn = (ev) => {
+            tooltipEl.style.top = `${ev.y + cursorOffsetY}px`; // + window.scrollY
+            if (mousePos.x < window.innerWidth - maxWidth) {
+                tooltipEl.style.left = `${ev.x + cursorOffsetX}px`;
+                tooltipEl.style.right = "";
+            }
+            else {
+                tooltipEl.style.right = `${document.documentElement.clientWidth - ev.x - cursorOffsetX}px`;
+                tooltipEl.style.left = "";
+            }
+        };
+        const cleanupFn = () => {
+            target.removeEventListener("mousemove", followFn);
+            target.removeEventListener("mouseleave", cleanupFn);
+        };
+        target.addEventListener("mousemove", followFn);
+        target.addEventListener("mouseleave", cleanupFn);
+    }
+    TOOLTIP_DEFAULTS.ENABLE_DEBUG && console.log(`displaying tooltip at: ${tooltipEl.style.left}, ${tooltipEl.style.top}`);
+    const removeFn = () => {
+        TOOLTIP_DEFAULTS.ENABLE_DEBUG && console.log(`Removing tooltip ${tooltip} from el ${target.tagName}`);
+        tooltipEl.onanimationend = (ev) => {
+            TOOLTIP_DEFAULTS.ENABLE_DEBUG && console.log(ev.animationName);
+            if (attachToBody === true) {
+                document.body.removeChild(tooltipEl);
+            }
+            else {
+                target.removeChild(tooltipEl);
+            }
+        };
+        tooltipEl.classList.replace("mico-tooltip-fade-in", "mico-tooltip-fade-out");
+        target.removeEventListener("mouseleave", removeFn);
+        tooltipEl.removeEventListener("mouseenter", removeFn);
+    };
+    target.addEventListener("mouseleave", removeFn);
+    tooltipEl.addEventListener("mouseenter", removeFn);
+    if (attachToBody === true) {
+        const bodyListener = (ev) => {
+            if (ev.target && !target.contains(ev.target)) {
+                removeFn();
+                document.body.removeEventListener("mousemove", bodyListener);
+            }
+        };
+        document.body.addEventListener("mousemove", bodyListener);
+    }
+}

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

@@ -0,0 +1,11 @@
+export interface TooltipOptions {
+    /** Specify the position of the tooltip */
+    pos: TooltipPosition;
+    /** Override the default delay in milliseconds */
+    delay: number;
+    /** Increase the maximum width and height of the tooltip */
+    jumbo: boolean;
+    /** The tooltip should be attached to the document instead of the moused-over element */
+    attachToBody: boolean;
+}
+export type TooltipPosition = "cursor" | "top" | "bottom" | "left" | "right" | "follow";

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

@@ -0,0 +1 @@
+export {};

package/dist/esm/components/tree/Tree.d.ts

@@ -0,0 +1,110 @@
+import m from "mithril";
+import { TreeNode } from "./tree-node.interface";
+/**
+ * An untyped tree component (see `createTree<T>()`)
+ */
+export declare const Tree: m.Component<{
+    /** The root list of nodes to display in the tree (circular references will crash) */
+    nodes: TreeNode<any>[];
+    /** Enable drag and drop reordering */
+    enableReordering?: boolean | undefined;
+    /** Enable expanding/collapsing of nodes with children */
+    enableToggling?: boolean | undefined;
+    /** Enable debug logging of certain events */
+    enableLogging?: boolean | undefined;
+    /** Function called when a node with children is toggled */
+    ontoggle?: ((toggle: {
+        node: TreeNode<any>;
+        expanded: boolean;
+        recursive: boolean;
+    }) => void) | undefined;
+    /** Function called when a node label is clicked */
+    onclick?: ((click: {
+        ev: MouseEvent;
+        node: TreeNode<any>;
+    }) => void) | undefined;
+    /** Function called when a node has been dragged to a new position in the tree */
+    onreorder?: ((reorder: {
+        moved: any;
+        target: any;
+        above: boolean;
+    }) => void) | undefined;
+    /** Optional message to display in defined but empty children lists */
+    emptyChildrenMessage?: string | undefined;
+    /** Optionally override the default icon for a collapsed node */
+    collapsedIcon?: m.Vnode<any, any> | undefined;
+    /** Optionally override the default icon for an expanded node */
+    expandedIcon?: m.Vnode<any, any> | undefined;
+    /** Optionally override the default toggle icon for a node that cannot toggle */
+    noToggleIcon?: m.Vnode<any, any> | undefined;
+    /** Optionally enable toggling of expansion nodes by clicking their labels */
+    toggleExpansionWithLabel?: boolean | undefined;
+    /** Optionally override the default nesting width */
+    nestingWidth?: string | undefined;
+    /** Optionally override the default toggle button width */
+    toggleButtonWidth?: string | undefined;
+    /** Optional CSS classes to apply to the root div */
+    class?: string | undefined;
+    /** Optional CSS styles to apply to the root div */
+    style?: string | undefined;
+}, {
+    isReordering: boolean;
+    thisEl: Element;
+    targetRect: DOMRect | undefined;
+    targettingTop: boolean;
+}>;
+/**
+ * Build a component to display nested nodes in a tree.
+ *
+ * Nodes with children are collapsable, and nodes can be arbitrarily reordered.
+ */
+export declare function createTree<TNodeData extends object = {}>(): m.Component<{
+    /** The root list of nodes to display in the tree (circular references will crash) */
+    nodes: TreeNode<TNodeData>[];
+    /** Enable drag and drop reordering */
+    enableReordering?: boolean | undefined;
+    /** Enable expanding/collapsing of nodes with children */
+    enableToggling?: boolean | undefined;
+    /** Enable debug logging of certain events */
+    enableLogging?: boolean | undefined;
+    /** Function called when a node with children is toggled */
+    ontoggle?: ((toggle: {
+        node: TreeNode<TNodeData>;
+        expanded: boolean;
+        recursive: boolean;
+    }) => void) | undefined;
+    /** Function called when a node label is clicked */
+    onclick?: ((click: {
+        ev: MouseEvent;
+        node: TreeNode<TNodeData>;
+    }) => void) | undefined;
+    /** Function called when a node has been dragged to a new position in the tree */
+    onreorder?: ((reorder: {
+        moved: TNodeData;
+        target: TNodeData;
+        above: boolean;
+    }) => void) | undefined;
+    /** Optional message to display in defined but empty children lists */
+    emptyChildrenMessage?: string | undefined;
+    /** Optionally override the default icon for a collapsed node */
+    collapsedIcon?: m.Vnode<any, any> | undefined;
+    /** Optionally override the default icon for an expanded node */
+    expandedIcon?: m.Vnode<any, any> | undefined;
+    /** Optionally override the default toggle icon for a node that cannot toggle */
+    noToggleIcon?: m.Vnode<any, any> | undefined;
+    /** Optionally enable toggling of expansion nodes by clicking their labels */
+    toggleExpansionWithLabel?: boolean | undefined;
+    /** Optionally override the default nesting width */
+    nestingWidth?: string | undefined;
+    /** Optionally override the default toggle button width */
+    toggleButtonWidth?: string | undefined;
+    /** Optional CSS classes to apply to the root div */
+    class?: string | undefined;
+    /** Optional CSS styles to apply to the root div */
+    style?: string | undefined;
+}, {
+    isReordering: boolean;
+    thisEl: Element;
+    targetRect: DOMRect | undefined;
+    targettingTop: boolean;
+}>;

package/dist/esm/components/tree/Tree.js

@@ -0,0 +1,222 @@
+import { compareObjects } from "@hypericon/utils";
+import m from "mithril";
+import { Icon } from "../icon";
+const DATA_TRANSFER_TYPE = "application/tree-data";
+const DEFAULT_NESTING_WIDTH = "1.5rem";
+const DEFAULT_TOGGLE_WIDTH = "1.5rem";
+/**
+ * An untyped tree component (see `createTree<T>()`)
+ */
+export const Tree = createTree();
+/**
+ * Build a component to display nested nodes in a tree.
+ *
+ * Nodes with children are collapsable, and nodes can be arbitrarily reordered.
+ */
+export function createTree() {
+    // /** Reference to the TreeItem currently being dragged */
+    // let draggedTreeItem: TreeItem<T> | undefined = undefined;
+    const Tree = {
+        oninit() {
+            this.isReordering = false;
+        },
+        oncreate({ dom }) {
+            this.thisEl = dom;
+        },
+        view({ attrs }) {
+            var _a, _b;
+            const nodes = attrs.nodes;
+            return m(".mico-tree", {
+                style: `${(_a = attrs.style) !== null && _a !== void 0 ? _a : ""} position: relative;`,
+                class: `${(_b = attrs.class) !== null && _b !== void 0 ? _b : ""}`
+            }, [
+                m("ul", nodes.map((node, i) => {
+                    return m(TreeNode, {
+                        // key: i, // item.key,
+                        node,
+                        enableReordering: attrs.enableReordering,
+                        enableToggling: attrs.enableToggling,
+                        enableLogging: attrs.enableLogging,
+                        ontoggle: attrs.ontoggle,
+                        onclick: attrs.onclick,
+                        onreorder: attrs.onreorder,
+                        emptyChildrenMessage: attrs.emptyChildrenMessage,
+                        collapsedIcon: attrs.collapsedIcon,
+                        expandedIcon: attrs.expandedIcon,
+                        noToggleIcon: attrs.noToggleIcon,
+                        toggleExpansionWithLabel: attrs.toggleExpansionWithLabel,
+                        nestingWidth: attrs.nestingWidth || DEFAULT_NESTING_WIDTH,
+                        toggleButtonWidth: attrs.toggleButtonWidth || DEFAULT_TOGGLE_WIDTH,
+                    });
+                })),
+            ]);
+        }
+    };
+    const TreeNode = {
+        oninit({ attrs }) {
+            const { enableReordering } = attrs;
+            this.isReorderingOver = false;
+            this.handleClick = (ev, node) => {
+                var _a;
+                (_a = attrs.onclick) === null || _a === void 0 ? void 0 : _a.call(attrs, { ev, node });
+            };
+            this.handleDragStart = (ev, node) => {
+                if (!enableReordering)
+                    return;
+                if (!ev.dataTransfer)
+                    return;
+                if (node.draggable === false)
+                    return;
+                attrs.enableLogging && console.log(`start dragging`, node.data);
+                ev.dataTransfer.setData(DATA_TRANSFER_TYPE, JSON.stringify(node.data));
+                ev.dataTransfer.effectAllowed = "move";
+                // attrs.reorderstart?.();
+            };
+            this.handleDragOver = (ev, node) => {
+                ev.preventDefault();
+                if (!enableReordering)
+                    return;
+                // attrs.enableLogging && console.log(`on dragover`, ev.dataTransfer?.getData(DATA_TRANSFER_TYPE), "over", item.data);
+                // ev.target;
+                // ev.x;
+                const overDiv = ev.currentTarget;
+                const targetRect = overDiv.getBoundingClientRect();
+                const topToMouse = ev.clientY - targetRect.top;
+                const isAbove = topToMouse < (targetRect.height - topToMouse);
+                this.isTargettingAbove = isAbove;
+                this.isReorderingOver = true;
+                // attrs.reorderover?.(overDiv, ev.clientY);
+            };
+            this.handleDrag = (ev, node) => {
+                // attrs.enableLogging && console.log(`on drag`, item.data);
+            };
+            this.handleDragLeave = (ev, node) => {
+                this.isReorderingOver = false;
+            };
+            this.handleDrop = (ev, node) => {
+                var _a;
+                ev.preventDefault();
+                if (!enableReordering)
+                    return;
+                if (ev.dataTransfer) {
+                    ev.dataTransfer.dropEffect = "move";
+                    const movedNodeData = JSON.parse(ev.dataTransfer.getData(DATA_TRANSFER_TYPE));
+                    attrs.enableLogging && console.log(`on drop`, movedNodeData, "on", node.data);
+                    // attrs.reorderfinish?.();
+                    const droppedOnSelf = compareObjects(movedNodeData, node.data);
+                    if (!droppedOnSelf) {
+                        (_a = attrs.onreorder) === null || _a === void 0 ? void 0 : _a.call(attrs, { moved: movedNodeData, target: node.data, above: this.isTargettingAbove });
+                    }
+                }
+                this.isReorderingOver = false;
+            };
+            this.handleDragEnd = (ev, node) => {
+                var _a;
+                attrs.enableLogging && console.log(`drag end, dropEffect:`, (_a = ev.dataTransfer) === null || _a === void 0 ? void 0 : _a.dropEffect);
+                // "move" on success, "none" on failure/cancellation
+                // attrs.reorderfinish?.();
+                this.isReorderingOver = false;
+            };
+        },
+        view({ attrs }) {
+            const { node, enableToggling, enableReordering, emptyChildrenMessage } = attrs;
+            const canHaveChildren = node.children !== undefined;
+            const hasChildren = node.children !== undefined && (node.children.length > 0);
+            const expanded = canHaveChildren && node.expanded;
+            const collapsed = canHaveChildren && !node.expanded;
+            const targettingDragClass = this.isReorderingOver ? (this.isTargettingAbove ? "mico-tree-reorder-above" : "mico-tree-reorder-below") : "";
+            return m("li.mico-tree-node", {
+            // key: item.key,
+            }, [
+                // The items's label (either a string or Vnode) and expand/collapse control (if there are children)
+                m("", {
+                    style: `display: flex; align-items: stretch; max-width: 100%; overflow-x: hidden; ${(attrs.toggleExpansionWithLabel && enableToggling) ? `cursor: pointer;` : ``}`,
+                }, [
+                    expanded ? m("button.mico-tree-toggle", {
+                        style: `width: ${attrs.toggleButtonWidth}; flex: none;`,
+                        // class: enableToggling ? `hover:text-primary` : `text-view-icon`,
+                        disabled: !enableToggling,
+                        onclick: (ev) => {
+                            var _a;
+                            if (!enableToggling)
+                                return;
+                            node.expanded = false;
+                            (_a = attrs.ontoggle) === null || _a === void 0 ? void 0 : _a.call(attrs, { node, expanded: false, recursive: ev.altKey });
+                        },
+                    }, attrs.expandedIcon || m(Icon, { fas: "chevron-down" })) : undefined,
+                    collapsed ? m("button.mico-tree-toggle", {
+                        style: `width: ${attrs.toggleButtonWidth}; flex: none;`,
+                        // class: enableToggling ? `hover:text-primary` : `text-view-icon`,
+                        disabled: !enableToggling,
+                        onclick: (ev) => {
+                            var _a;
+                            if (!enableToggling)
+                                return;
+                            node.expanded = true;
+                            (_a = attrs.ontoggle) === null || _a === void 0 ? void 0 : _a.call(attrs, { node, expanded: true, recursive: ev.altKey });
+                        },
+                    }, attrs.collapsedIcon || m(Icon, { fas: "chevron-right" })) : undefined,
+                    (!canHaveChildren) ? m(".mico-tree-toggle", {
+                        style: `width: ${attrs.toggleButtonWidth}; flex: none;`,
+                    }, attrs.noToggleIcon || m(Icon, { fas: "caret-right" })) : [],
+                    m(".mico-tree-label", {
+                        class: `${targettingDragClass}`,
+                        style: "position: relative; flex: 1 1 0%; overflow-x: hidden;",
+                        draggable: enableReordering && (node.draggable !== false),
+                        onclick: (ev) => {
+                            var _a;
+                            this.handleClick(ev, node);
+                            // If labels should toggle expansion, toggle expansion
+                            if (attrs.toggleExpansionWithLabel && enableToggling) {
+                                node.expanded = !expanded;
+                                (_a = attrs.ontoggle) === null || _a === void 0 ? void 0 : _a.call(attrs, { node, expanded: !expanded, recursive: ev.altKey });
+                            }
+                        },
+                        ondragstart: (ev) => this.handleDragStart(ev, node),
+                        ondrag: (ev) => this.handleDrag(ev, node),
+                        ondragover: (ev) => this.handleDragOver(ev, node),
+                        ondragleave: (ev) => this.handleDragLeave(ev, node),
+                        ondrop: (ev) => this.handleDrop(ev, node),
+                        ondragend: (ev) => this.handleDragEnd(ev, node),
+                    }, [
+                        (typeof node.label === "string")
+                            ? m("span", node.label)
+                            : node.label,
+                    ]),
+                ]),
+                // Any nested children within the item
+                (expanded) ? m("ul", {
+                    style: `margin-left: ${attrs.nestingWidth};`,
+                }, [
+                    ...(node.children || []).map((child, i) => {
+                        return m(TreeNode, {
+                            // key: child.key,
+                            node: child,
+                            enableToggling: attrs.enableToggling,
+                            enableReordering: attrs.enableReordering,
+                            ontoggle: attrs.ontoggle,
+                            onclick: attrs.onclick,
+                            onreorder: attrs.onreorder,
+                            // reorderstart: attrs.reorderstart,
+                            // reorderover: attrs.reorderover,
+                            // reorderfinish: attrs.reorderfinish,
+                            emptyChildrenMessage: attrs.emptyChildrenMessage,
+                            collapsedIcon: attrs.collapsedIcon,
+                            expandedIcon: attrs.expandedIcon,
+                            noToggleIcon: attrs.noToggleIcon,
+                            toggleExpansionWithLabel: attrs.toggleExpansionWithLabel,
+                            nestingWidth: attrs.nestingWidth,
+                            toggleButtonWidth: attrs.toggleButtonWidth,
+                        });
+                    }),
+                ]) : [],
+                (canHaveChildren && !hasChildren && expanded && emptyChildrenMessage !== undefined) ? [
+                    m("span.mico-tree-empty-children", {
+                        style: `margin-left: ${attrs.toggleButtonWidth};`,
+                    }, emptyChildrenMessage)
+                ] : [],
+            ]);
+        }
+    };
+    return Tree;
+}

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

@@ -0,0 +1,3 @@
+export * from "./Tree";
+export * from "./tree-node.interface";
+export * from "./tree-utils";

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

@@ -0,0 +1,3 @@
+export * from "./Tree";
+export * from "./tree-node.interface";
+export * from "./tree-utils";

package/dist/esm/components/tree/tree-node.interface.d.ts

@@ -0,0 +1,9 @@
+import m from "mithril";
+export interface TreeNode<T extends object = {}> {
+    label: string | m.Vnode<any>;
+    expanded: boolean;
+    /** Optionally disable dragging where it would otherwise be enabled */
+    draggable?: boolean;
+    children?: TreeNode<T>[];
+    data: T;
+}

package/dist/esm/components/tree/tree-node.interface.js

@@ -0,0 +1 @@
+export {};

package/dist/esm/components/tree/tree-utils.d.ts

@@ -0,0 +1,11 @@
+import { TreeNode } from "./tree-node.interface";
+/**
+ * Recursively find the list of all descendants of the given node.
+ *
+ * The given node itself is not included in the list of descendants.
+ *
+ * Performs a depth-first traversal.
+ * @param node
+ * @returns
+ */
+export declare function allTreeDescendants<T extends object = {}>(node: TreeNode<T>): T[];

package/dist/esm/components/tree/tree-utils.js

@@ -0,0 +1,18 @@
+/**
+ * Recursively find the list of all descendants of the given node.
+ *
+ * The given node itself is not included in the list of descendants.
+ *
+ * Performs a depth-first traversal.
+ * @param node
+ * @returns
+ */
+export function allTreeDescendants(node) {
+    var _a;
+    const descendants = [];
+    for (const child of (_a = node.children) !== null && _a !== void 0 ? _a : []) {
+        descendants.push(child.data);
+        descendants.push(...allTreeDescendants(child));
+    }
+    return descendants;
+}

package/dist/esm/index.d.ts

@@ -0,0 +1,2 @@
+export * from "./components";
+export * from "./utils";

package/dist/esm/index.js

@@ -0,0 +1,2 @@
+export * from "./components";
+export * from "./utils";

package/dist/esm/utils/date-time.d.ts

@@ -0,0 +1,3 @@
+export type DateToHtmlResult<T extends Date | undefined | null> = T extends Date ? string : T extends undefined ? undefined : T extends null ? null : never;
+export declare function dateToHtml<T extends Date | undefined | null>(d: T): DateToHtmlResult<T>;
+export declare function dateToHtmlUTC<T extends Date | undefined | null>(d: T): DateToHtmlResult<T>;

package/dist/esm/utils/date-time.js

@@ -0,0 +1,22 @@
+export function dateToHtml(d) {
+    if (d === undefined)
+        return undefined;
+    if (d === null)
+        return null;
+    return [
+        String(d.getFullYear()),
+        String(d.getMonth() + 1).padStart(2, "0"),
+        String(d.getDate()).padStart(2, "0"),
+    ].join("-");
+}
+export function dateToHtmlUTC(d) {
+    if (d === undefined)
+        return undefined;
+    if (d === null)
+        return null;
+    return [
+        String(d.getUTCFullYear()),
+        String(d.getUTCMonth() + 1).padStart(2, "0"),
+        String(d.getUTCDate()).padStart(2, "0"),
+    ].join("-");
+}

package/dist/esm/utils/dom.d.ts

@@ -0,0 +1,16 @@
+/**
+ *
+ * @param x
+ * @param y
+ * @param element
+ * @param strict
+ * @returns
+ */
+export declare function coordsWithinElement(x: number, y: number, element: Element, strict?: boolean): boolean;
+/**
+ * Find whether a mouse event is within a given DOM element using clientX/Y and the bounding client rect
+ * @param ev
+ * @param element
+ * @returns
+ */
+export declare function mouseWithinElement(ev: MouseEvent, element: Element): boolean;