@hypericon/mico 0.3.24 → 0.4.0

package/README.md

@@ -7,6 +7,8 @@ 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>
 
+Since version 0.4.0, includes ESM and CJS versions.
+
 ## Installation
 
 ```sh

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

@@ -0,0 +1 @@
+"use strict";

package/dist/esm/components/data-grid/index.js

@@ -0,0 +1 @@
+"use strict";

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

@@ -0,0 +1 @@
+"use strict";

package/dist/esm/components/dialog/Dialog.d.ts

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

package/dist/esm/components/dialog/Dialog.js

@@ -0,0 +1,10 @@
+export {};
+// export const Dialog: m.Component<{
+//   created?: (args: {}) => any,
+// }> = {
+//   view({ attrs, children }) {
+//     return m("dialog", {}, [
+//       children,
+//     ]);
+//   }
+// };

package/dist/esm/components/dialog/dialog-manager.d.ts

@@ -0,0 +1,45 @@
+import m from "mithril";
+export interface DialogManagerOptions {
+    containerEl?: HTMLElement;
+    debug?: boolean;
+}
+export interface OpenDialogResult {
+    close: () => Promise<void>;
+}
+export declare class DialogManager {
+    private containerEl;
+    private currentDialog;
+    get isOpen(): boolean;
+    private debug;
+    constructor(options?: DialogManagerOptions);
+    /**
+     * Open a new dialog with the given contents.
+     *
+     * Note: to make use of Mithril's auto-redraw system, the dialog must be defined as a component,
+     * not a Vnode.
+     *
+     * Example:
+     * ```ts
+     * open(MyDialog, { ... }); // WILL redraw
+     * open(m("h1", "...")); // will NOT redraw
+     * ```
+     * @param dialog
+     * @param attrs
+     * @returns once the dialog has been created and is being displayed to the user
+     */
+    open<A = {}>(dialog: m.Component<A, any> | m.Vnode<any, any>, attrs?: A, opts?: {
+        backdropDismiss?: boolean;
+        noEscape?: boolean;
+    }): Promise<void>;
+    private _open;
+    private openWithComponent;
+    private openWithVnode;
+    /**
+     * Close the open dialog.
+     *
+     * Silently does nothing if no dialog is open.
+     */
+    close(): void;
+    private closeThis;
+}
+export declare const dialogMgr: DialogManager;

package/dist/esm/components/dialog/dialog-manager.js

@@ -0,0 +1,163 @@
+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());
+    });
+};
+import m from "mithril";
+import { mouseWithinElement } from "../../utils";
+export class DialogManager {
+    get isOpen() { return this.currentDialog !== undefined; }
+    constructor(options) {
+        this.debug = false;
+        if (options === null || options === void 0 ? void 0 : options.debug)
+            this.debug = options.debug;
+        if (options === null || options === void 0 ? void 0 : options.containerEl) {
+            this.containerEl = options.containerEl;
+        }
+        else {
+            this.containerEl = document.createElement("div");
+            this.containerEl.classList.add("mico-dialog-container");
+            document.body.append(this.containerEl);
+        }
+    }
+    /**
+     * Open a new dialog with the given contents.
+     *
+     * Note: to make use of Mithril's auto-redraw system, the dialog must be defined as a component,
+     * not a Vnode.
+     *
+     * Example:
+     * ```ts
+     * open(MyDialog, { ... }); // WILL redraw
+     * open(m("h1", "...")); // will NOT redraw
+     * ```
+     * @param dialog
+     * @param attrs
+     * @returns once the dialog has been created and is being displayed to the user
+     */
+    open(dialog, attrs, opts) {
+        return __awaiter(this, void 0, void 0, function* () {
+            const element = this.containerEl;
+            const manager = this;
+            const dialogId = `${Math.random().toString().replace("0.", "")}`;
+            return new Promise((resolve, reject) => {
+                m.mount(element, {
+                    oninit() {
+                        // 
+                    },
+                    oncreate({ dom }) {
+                        var _a;
+                        const dialog = dom;
+                        (_a = dialog.showModal) === null || _a === void 0 ? void 0 : _a.call(dialog);
+                        manager.currentDialog = dialog;
+                        // Optionally wire up the backdrop to dismiss the dialog
+                        if ((opts === null || opts === void 0 ? void 0 : opts.backdropDismiss) === true) {
+                            dialog.addEventListener("click", (ev) => {
+                                // console.log(ev);
+                                if (ev.target !== dom)
+                                    return;
+                                const isInDialog = mouseWithinElement(ev, dom);
+                                if (!isInDialog)
+                                    manager.close();
+                            });
+                        }
+                        resolve();
+                    },
+                    onremove() {
+                        manager.debug && console.log("mounted component onremove()");
+                        resolve(undefined);
+                    },
+                    view() {
+                        return m("dialog", {
+                            id: dialogId,
+                            key: dialogId,
+                            class: "mico-dialog",
+                            onclose: () => {
+                                manager.debug && console.log("dialog onclose()");
+                                m.mount(manager.containerEl, null);
+                            },
+                            oncancel: (ev) => {
+                                if ((opts === null || opts === void 0 ? void 0 : opts.noEscape) === true) {
+                                    ev.preventDefault();
+                                }
+                            },
+                        }, [
+                            ("view" in dialog)
+                                ? m(dialog, Object.assign({}, attrs))
+                                : dialog,
+                        ]);
+                    },
+                });
+            });
+        });
+    }
+    // This was attempting to intercept a certain function and then return a result from open()
+    // asynchronously, but it was all getting needlessly complicated
+    _open(dialog, attrs, options) {
+        return __awaiter(this, void 0, void 0, function* () {
+            const element = this.containerEl;
+            const manager = this;
+            const dialogId = `${Math.random().toString()}`;
+            // const resultFnKey = options?.resultFn;
+            // if (resultFnKey) {
+            //   if (attrs) {
+            //     attrs[resultFnKey] = 
+            //   }
+            // }
+            return new Promise((resolve, reject) => {
+                m.mount(element, {
+                    oninit() {
+                        // 
+                    },
+                    oncreate({ dom }) {
+                        var _a;
+                        const dialog = dom;
+                        (_a = dialog.showModal) === null || _a === void 0 ? void 0 : _a.call(dialog);
+                        manager.currentDialog = dialog;
+                    },
+                    onremove() {
+                        console.log("mounted component onremove()");
+                        resolve(undefined);
+                    },
+                    view() {
+                        return m("dialog", {
+                            id: dialogId,
+                            key: dialogId,
+                            onclose: () => {
+                                console.log("dialog onclose()");
+                                m.mount(manager.containerEl, null);
+                            },
+                        }, [
+                            ("view" in dialog)
+                                ? m(dialog, Object.assign({}, attrs))
+                                : dialog,
+                        ]);
+                    },
+                });
+            });
+        });
+    }
+    openWithComponent(dialog) { }
+    openWithVnode(dialog) { }
+    /**
+     * Close the open dialog.
+     *
+     * Silently does nothing if no dialog is open.
+     */
+    close() {
+        var _a;
+        // m.mount(this.containerEl, null);
+        (_a = this.currentDialog) === null || _a === void 0 ? void 0 : _a.close();
+    }
+    // an attempt to close a specific dialog, but only one can be open at once anyway
+    closeThis(dialog) {
+        console.log("close:");
+        console.log(dialog);
+        console.log(dialog.prototype);
+    }
+}
+export const dialogMgr = new DialogManager();

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

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

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

@@ -0,0 +1,2 @@
+// export * from "./Dialog";
+export * from "./dialog-manager";

package/dist/esm/components/drag-handler/DragHandler.d.ts

@@ -0,0 +1,40 @@
+import m from "mithril";
+export interface DragHandlerAttrs {
+    /** Enable dragging this element */
+    enableDrag?: boolean;
+    /** Enable dropping dragged elements on this element */
+    enableDrop?: boolean;
+    /** Optionally specify what sort of effect should be allowed using this drag */
+    dragEffect?: "link" | "copy" | "none" | "copyLink" | "copyMove" | "linkMove" | "move" | "all" | "uninitialized";
+    dragData?: string | (() => string);
+    onDragStart?: (args: {
+        ev: DragEvent;
+        dragData?: string;
+    }) => any;
+    onDragOver?: (args: {
+        ev: DragEvent;
+        dragData?: string;
+    }) => any;
+    onDrop?: (args: {
+        ev: DragEvent;
+        dragData?: string;
+    }) => any;
+    /** Enable debug logging for events */
+    enableLogging?: boolean;
+    /** CSS classes to apply to the wrapper div */
+    class?: string;
+    /** CSS styles to apply to the wrapper div */
+    style?: string;
+    /** CSS classes to apply to the div while it is being dragged (if dragging is enabled) */
+    classDragging?: string;
+    /** CSS styles to apply to the div while it is being dragged (if dragging is enabled) */
+    styleDragging?: string;
+    /** CSS classes to apply to the div while it is being dragged over (if dropping is enabled) */
+    classDraggingOver?: string;
+    /** CSS styles to apply to the div while it is being dragged over (if dropping is enabled) */
+    styleDraggingOver?: string;
+}
+export declare const DragHandler: m.Component<DragHandlerAttrs, {
+    isDragging: boolean;
+    isDraggingOver: boolean;
+}>;

package/dist/esm/components/drag-handler/DragHandler.js

@@ -0,0 +1,104 @@
+import m from "mithril";
+const DEFAULT_DATA_FORMAT = "application/mico-drag-handler";
+export const DragHandler = {
+    oninit() {
+        this.isDragging = false;
+        this.isDraggingOver = false;
+    },
+    view({ attrs, children }) {
+        var _a, _b, _c, _d, _e, _f;
+        return m("", {
+            class: `${(_a = attrs.class) !== null && _a !== void 0 ? _a : ""} ${this.isDragging ? (_b = attrs.classDragging) !== null && _b !== void 0 ? _b : "" : ""} ${this.isDraggingOver ? (_c = attrs.classDraggingOver) !== null && _c !== void 0 ? _c : "" : ""}`,
+            style: `${(_d = attrs.style) !== null && _d !== void 0 ? _d : ""} ${this.isDragging ? (_e = attrs.classDragging) !== null && _e !== void 0 ? _e : "" : ""} ${this.isDraggingOver ? (_f = attrs.classDraggingOver) !== null && _f !== void 0 ? _f : "" : ""}`,
+            draggable: attrs.enableDrag,
+            ondragstart: (ev) => {
+                var _a, _b;
+                if (!attrs.enableDrag)
+                    return;
+                if (!ev.dataTransfer)
+                    return;
+                let dragData;
+                if (attrs.dragData !== undefined) {
+                    if (typeof attrs.dragData === "function") {
+                        dragData = (_a = attrs.dragData) === null || _a === void 0 ? void 0 : _a.call(attrs);
+                    }
+                    else {
+                        dragData = attrs.dragData;
+                    }
+                }
+                if (dragData !== undefined) {
+                    ev.dataTransfer.setData(DEFAULT_DATA_FORMAT, dragData);
+                }
+                if (attrs.dragEffect) {
+                    ev.dataTransfer.effectAllowed = attrs.dragEffect;
+                }
+                this.isDragging = true;
+                attrs.enableLogging && console.log(`start dragging, effect: ${ev.dataTransfer.effectAllowed}, data:`, dragData);
+                (_b = attrs.onDragStart) === null || _b === void 0 ? void 0 : _b.call(attrs, { ev, dragData });
+            },
+            ondrag: (ev) => {
+                // attrs.enableLogging && console.log(`on drag`, item.data);
+            },
+            // ondragenter: (ev: DragEvent) => {
+            //   ev.preventDefault();
+            //   if (!attrs.enableDrop) return false;
+            //   if (attrs.enableLogging) {
+            //     const dragData = ev.dataTransfer?.getData(DEFAULT_DATA_FORMAT);
+            //     console.log(`drag enter, effect: ${attrs.dragEffect}, data:`, dragData);
+            //   }
+            //   this.isDraggingOver = true;
+            // },
+            ondragover: (ev) => {
+                var _a, _b, _c;
+                ev.preventDefault();
+                if (!attrs.enableDrop)
+                    return false;
+                // const overDiv = ev.currentTarget as HTMLElement;
+                // const targetRect = overDiv.getBoundingClientRect();
+                // const topToMouse = ev.clientY - targetRect.top;
+                // const isAbove = topToMouse < (targetRect.height - topToMouse);
+                // this.isTargettingAbove = isAbove;
+                this.isDraggingOver = true;
+                const dragData = (_a = ev.dataTransfer) === null || _a === void 0 ? void 0 : _a.getData(DEFAULT_DATA_FORMAT);
+                attrs.enableLogging && console.log(`drag over, effect: ${(_b = ev.dataTransfer) === null || _b === void 0 ? void 0 : _b.effectAllowed}, data:`, dragData);
+                (_c = attrs.onDragOver) === null || _c === void 0 ? void 0 : _c.call(attrs, { ev, dragData });
+                return false;
+            },
+            ondragleave: (ev) => {
+                this.isDraggingOver = false;
+            },
+            ondrop: (ev) => {
+                var _a, _b, _c;
+                ev.stopPropagation();
+                ev.preventDefault();
+                if (!attrs.enableDrop)
+                    return;
+                // if (ev.dataTransfer) {
+                //   ev.dataTransfer.dropEffect = "move";
+                //   const movedNodeData = JSON.parse(ev.dataTransfer.getData(DEFAULT_DATA_FORMAT)) as TNodeData;
+                //   attrs.enableLogging && console.log(`on drop`, movedNodeData, "on", node.data);
+                //   // attrs.reorderfinish?.();
+                //   const droppedOnSelf = compareObjects(movedNodeData, node.data);
+                //   if (!droppedOnSelf) {
+                //     attrs.onreorder?.({ moved: movedNodeData, target: node.data, above: this.isTargettingAbove });
+                //   }
+                // }
+                this.isDragging = false;
+                this.isDraggingOver = false;
+                const dragData = (_a = ev.dataTransfer) === null || _a === void 0 ? void 0 : _a.getData(DEFAULT_DATA_FORMAT);
+                attrs.enableLogging && console.log(`on drop, effect:`, (_b = ev.dataTransfer) === null || _b === void 0 ? void 0 : _b.dropEffect, "dragData:", dragData);
+                (_c = attrs.onDrop) === null || _c === void 0 ? void 0 : _c.call(attrs, { ev, dragData });
+            },
+            ondragend: (ev) => {
+                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.isDragging = false;
+                this.isDraggingOver = false;
+            },
+        }, [
+            children,
+        ]);
+    }
+};

package/dist/esm/components/drag-handler/index.d.ts

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

package/dist/esm/components/drag-handler/index.js

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

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

@@ -0,0 +1 @@
+"use strict";

package/dist/esm/components/drop-target/DropTarget.d.ts

@@ -0,0 +1,24 @@
+import m from "mithril";
+import { DropTargetState } from "./drop-target.state";
+export declare const DropTarget: m.Component<{
+    /**
+     * Function called when the user drops one or more files onto the drop target
+     * @param result
+     * @returns
+     */
+    onDropFiles: (result: {
+        files: File[];
+        ev: DragEvent;
+    }) => any;
+    /** The message to display in the drop target */
+    dropMessage?: string | m.Children;
+    /**
+     * Whether to automatically set the height of the drop target baed on the height of the wrapped elements
+     * @default true
+     */
+    autoHeight?: boolean;
+    class?: string;
+    style?: string;
+}, {
+    state: DropTargetState;
+}>;

package/dist/esm/components/drop-target/DropTarget.js

@@ -0,0 +1,56 @@
+import m from "mithril";
+import { DropTargetState } from "./drop-target.state";
+import { dragEventFiles } from "../../utils";
+export const DropTarget = {
+    oninit() {
+        this.state = new DropTargetState();
+    },
+    oncreate({ dom }) {
+        this.state.lastHeight = dom.clientHeight;
+    },
+    onupdate({ dom }) {
+        if (!this.state.isDragging) {
+            this.state.lastHeight = dom.clientHeight;
+        }
+    },
+    view({ attrs, children }) {
+        const autoHeightStr = (attrs.autoHeight !== false) ? `height: ${this.state.lastHeight}px;` : "";
+        return m(".mico-drop-container", {
+            class: attrs.class,
+            style: attrs.style,
+        }, [
+            this.state.isDragging ? [
+                m("", {
+                    class: `mico-drop-target ${this.state.isOver ? "highlighted" : ""}`,
+                    style: `${autoHeightStr} display: flex; flex-direction: column; align-items: center; justify-content: center;`,
+                    ondragover: (ev) => {
+                        this.state.isOver = true;
+                    },
+                    ondragleave: (ev) => {
+                        const containsNewTarget = ev.currentTarget.contains(ev.relatedTarget);
+                        if (!containsNewTarget) {
+                            this.state.isOver = false;
+                        }
+                        ev.preventDefault();
+                        return false;
+                    },
+                    ondrop: (ev) => {
+                        // console.log("ondrop", ev);
+                        this.state.isOver = false;
+                        ev.preventDefault();
+                        const files = dragEventFiles(ev);
+                        if (files.length > 0) {
+                            attrs.onDropFiles({ ev, files });
+                        }
+                    },
+                }, [
+                    (attrs.dropMessage && typeof attrs.dropMessage === "object")
+                        ? attrs.dropMessage
+                        : m("span.mico-drop-target-message", attrs.dropMessage || "Drop files here"),
+                ]),
+            ] : [
+                children,
+            ],
+        ]);
+    }
+};

package/dist/esm/components/drop-target/drop-target.state.d.ts

@@ -0,0 +1,9 @@
+export declare class DropTargetState {
+    private subs;
+    isDragging: boolean;
+    isOver: boolean;
+    lastHeight: number;
+    constructor();
+    initialise(): void;
+    destroy(): void;
+}

package/dist/esm/components/drop-target/drop-target.state.js

@@ -0,0 +1,73 @@
+import { redraw } from "mithril";
+import { Subscription } from "rxjs";
+export class DropTargetState {
+    constructor() {
+        this.subs = new Subscription();
+        this.isDragging = false;
+        this.isOver = false;
+        this.lastHeight = 100;
+        this.initialise();
+    }
+    initialise() {
+        this.destroy();
+        this.subs = new Subscription();
+        this.isDragging = false;
+        this.isOver = false;
+        const onclick = () => {
+            this.isDragging = false;
+            redraw();
+        };
+        const ondragstart = (ev) => {
+            ev.preventDefault();
+        };
+        const ondragend = (ev) => {
+            this.isDragging = false;
+            redraw();
+            ev.preventDefault();
+        };
+        const ondragenter = (ev) => {
+            this.isDragging = true;
+            redraw();
+            ev.preventDefault();
+        };
+        const ondragover = (ev) => {
+            ev.preventDefault();
+        };
+        const ondragleave = (ev) => {
+            // if the drag moved from the element to outside the element
+            const containsTarget = ev.currentTarget.contains(ev.relatedTarget);
+            if (!containsTarget) {
+                // console.log("page ondragleave, isDragging=false")
+                this.isDragging = false;
+                redraw();
+            }
+        };
+        const ondrag = (ev) => {
+            ev.preventDefault();
+        };
+        const ondrop = (ev) => {
+            this.isDragging = false;
+            redraw();
+            ev.preventDefault();
+        };
+        document.addEventListener("click", onclick);
+        this.subs.add(() => document.removeEventListener("click", onclick));
+        document.addEventListener("dragstart", ondragstart);
+        this.subs.add(() => document.removeEventListener("dragstart", ondragstart));
+        document.addEventListener("dragend", ondragend);
+        this.subs.add(() => document.removeEventListener("dragend", ondragend));
+        document.addEventListener("dragenter", ondragenter);
+        this.subs.add(() => document.removeEventListener("dragenter", ondragenter));
+        document.addEventListener("dragover", ondragover);
+        this.subs.add(() => document.removeEventListener("dragover", ondragover));
+        document.addEventListener("dragleave", ondragleave);
+        this.subs.add(() => document.removeEventListener("dragleave", ondragleave));
+        document.addEventListener("drag", ondrag);
+        this.subs.add(() => document.removeEventListener("drag", ondrag));
+        document.addEventListener("drop", ondrop);
+        this.subs.add(() => document.removeEventListener("drop", ondrop));
+    }
+    destroy() {
+        this.subs.unsubscribe();
+    }
+}

package/dist/esm/components/drop-target/index.d.ts

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

package/dist/esm/components/drop-target/index.js

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

package/dist/esm/components/form/Form.d.ts

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

package/dist/esm/components/form/Form.js

@@ -0,0 +1,9 @@
+// type FormItem =
+//   | InputText
+//   | InputNumber
+//   | InputDate
+//   | InputCheckbox
+//   | InputTextarea
+export const Form = {
+    view() { }
+};

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

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

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

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

package/dist/esm/components/icon/Icon.d.ts

@@ -0,0 +1,21 @@
+import m from "mithril";
+import { IconSolid, IconRegular, IconBrand } from "./icons";
+export type IconAttrs = ({
+    fab: IconBrand;
+} | {
+    far: IconRegular;
+} | {
+    fas: IconSolid;
+}) & {
+    class?: string;
+    style?: string;
+};
+/**
+ * Font Awesome Icon
+ *
+ * Specify the icon string with one of the keys: `fas`, `far`, or `fab`.
+ * Icon strings can be autocompleted on these keys.
+ *
+ * @see https://fontawesome.com/search
+ */
+export declare const Icon: m.Component<IconAttrs>;

package/dist/esm/components/icon/Icon.js

@@ -0,0 +1,22 @@
+import m from "mithril";
+/**
+ * Font Awesome Icon
+ *
+ * Specify the icon string with one of the keys: `fas`, `far`, or `fab`.
+ * Icon strings can be autocompleted on these keys.
+ *
+ * @see https://fontawesome.com/search
+ */
+export const Icon = {
+    view({ attrs }) {
+        var _a, _b;
+        const icon = ("fas" in attrs) ? `fas fa-${attrs.fas}` :
+            ("far" in attrs) ? `far fa-${attrs.far}` :
+                ("fab" in attrs) ? `fab fa-${attrs.fab}` :
+                    "";
+        return m("i", {
+            class: `${(_a = attrs.class) !== null && _a !== void 0 ? _a : ""} ${icon}`,
+            style: `${(_b = attrs.style) !== null && _b !== void 0 ? _b : ""}`,
+        });
+    }
+};