@hypericon/mico 0.2.1 → 0.2.3

package/dist/components/index.d.ts

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

package/dist/components/index.js

@@ -21,7 +21,7 @@ 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";

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,16 @@
+import m from "mithril";
+import { IconAttrs } from "../icon";
+export declare const MenuButton: m.Component<{
+    icon?: m.Vnode<any, any> | IconAttrs;
+    label?: string;
+    hint?: string;
+    /** If an href is supplied, `m.route.Link` is used instad of `button` */
+    href?: 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,81 @@
+"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, _c, _d;
+        return (attrs.href !== undefined) ? [
+            (0, mithril_1.default)(mithril_1.default.route.Link, {
+                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;`,
+                href: attrs.href,
+                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)(ButtonIcon, { icon: attrs.icon }),
+                (0, mithril_1.default)(ButtonLabel, { label: attrs.label }),
+                (0, mithril_1.default)("", { style: "flex: 1 1 0%;" }),
+                (0, mithril_1.default)(ButtonHint, { hint: attrs.hint }),
+            ]),
+        ] : [
+            (0, mithril_1.default)("button", {
+                class: `${(_c = attrs.class) !== null && _c !== void 0 ? _c : ""} ${menu_settings_1.MENU_SETTINGS.MENU_BUTTON_CLASS}`,
+                style: `${(_d = attrs.style) !== null && _d !== void 0 ? _d : ""} 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)(ButtonIcon, { icon: attrs.icon }),
+                (0, mithril_1.default)(ButtonLabel, { label: attrs.label }),
+                (0, mithril_1.default)("", { style: "flex: 1 1 0%;" }),
+                (0, mithril_1.default)(ButtonHint, { hint: attrs.hint }),
+            ]),
+        ];
+    }
+};
+const ButtonIcon = {
+    view({ attrs }) {
+        return (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,
+            ] : [],
+        ]);
+    }
+};
+const ButtonLabel = {
+    view({ attrs }) {
+        return (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);
+    }
+};
+const ButtonHint = {
+    view({ attrs }) {
+        return 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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hypericon/mico",
-  "version": "0.2.1",
+  "version": "0.2.3",
   "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",