@nebularstreams/libmui 2.0.2 → 2.0.3

package/src/widgets/Basic.js

@@ -0,0 +1,346 @@
+import m from "mithril";
+
+export function defineWidget(view, oninit, oncreate, onremove, onupdate) {
+    return {
+        ...view && {view},
+        ...oninit && {oninit},
+        ...oncreate && {oncreate},
+        ...onupdate && {onupdate},
+        ...onremove && {onremove}
+    }
+}
+
+
+// ------------------------------------------------------------------------
+
+function getAttrs(attrs, parentAttrs, panelInitialParams) {
+    const data = ((typeof attrs === "function") ? attrs(parentAttrs) : attrs) || {};
+    if (panelInitialParams) data.initialParams = panelInitialParams;
+    return data;
+}
+
+const
+
+    isCurrent = ({currentIndex}, index) => currentIndex === index,
+
+    Icon = {
+        view: ({attrs}) => m(
+            `i.icon.${attrs.pack || "fas"}.fa-${attrs.icon || "cog"}${attrs.size ? ".fa-" + attrs.size + "x" : ""}`,
+            {
+                title: attrs.icontitle || undefined,
+                role: "presentation",
+                onclick: attrs.onclick || null, ...attrs.iconClass && {class: attrs.iconClass}
+            }
+        )
+    },
+
+    Button = {
+        view: ({attrs, state, children}) => m((attrs.download || attrs.link) ? "a.button" : "button", {
+            ...attrs.link && {href: attrs.link},
+            ...attrs.download && {download: attrs.download},
+            ...attrs.target && {target: attrs.target},
+            "aria-label": attrs["aria-label"] || attrs.title || attrs.text,
+            title: attrs.title || attrs["aria-label"],
+            class: (attrs.class || "") + (state.busy ? " busy" : ""),
+            ...state.error && {"data-error": state.error.message},
+            ...attrs.onclick && {
+                onclick: (event) => {
+                    clearTimeout(state.debounce);
+                    state.debounce = setTimeout(() => {
+                        const result = attrs.onclick(event, attrs);
+                        if (result && result.then && result.catch) {
+                            state.busy = true;
+                            m.redraw();
+                            result
+                                .then(() => {
+                                    state.busy = false;
+                                    m.redraw();
+                                })
+                                .catch((error) => {
+                                    state.busy = false;
+                                    state.error = error;
+                                    m.redraw();
+                                });
+                        }
+                    }, 25);
+                }
+            }
+        }, [
+            ...(attrs.icon && !attrs.right) ? [m(Icon, attrs)] : [],
+            ...attrs.text ? [m("span.pad-1.pad-h", {class: attrs.textClass || null}, attrs.text)] : [],
+            ...(attrs.icon && attrs.right) ? [m(Icon, attrs)] : [],
+            ...children
+        ])
+    },
+
+    ButtonNew = {
+        view: ({attrs, state, children}) => m((attrs.download || attrs.link) ? "a.button" : "button", {
+            ...attrs.link && {href: attrs.link},
+            ...attrs.download && {rel: "nofollow", download: attrs.download},
+            ...attrs.target && {target: attrs.target},
+            "aria-label": attrs["aria-label"] || attrs.title || attrs.text,
+            title: attrs.title || attrs["aria-label"],
+            class: (attrs.class || "") + (state.busy ? " busy" : ""),
+            ...state.error && {"data-error": state.error.message},
+            ...attrs.onClick && {
+                onclick: (event) => {
+                    clearTimeout(state.debounce);
+                    state.debounce = setTimeout(() => {
+                        const result = attrs.onClick(event, attrs);
+                        if (result && result.then && result.catch) {
+                            state.busy = true;
+                            m.redraw();
+                            result
+                                .then(() => {
+                                    state.busy = false;
+                                    m.redraw();
+                                })
+                                .catch((error) => {
+                                    state.busy = false;
+                                    state.error = error;
+                                    m.redraw();
+                                });
+                        }
+                    }, 25);
+                }
+            }
+        }, [
+            ...(attrs.icon && !attrs.right) ? [m(Icon, attrs)] : [],
+            ...attrs.text ? [m("span.pad-1.pad-h", {class: attrs.textClass || null}, attrs.text)] : [],
+            ...(attrs.icon && attrs.right) ? [m(Icon, attrs)] : [],
+            ...children
+        ])
+    },
+
+    Empty = {
+
+        view: ({attrs, children}) => m(
+            ".flexcol.flexcenter.al-center.grows.emptywidget",
+            {
+                ...attrs.class && {class: attrs.class},
+                ...attrs.key && {key: attrs.key},
+                role: "presentation"
+            },
+            [
+                m(Icon, attrs),
+                ...attrs.message
+                    ? [
+                        m(".marg-2.marg-v",
+                            {
+                                role: "status",
+                                class: attrs.size > 4 ? "font-150" : "font-100",
+                                "aria-label": attrs.message
+                            },
+                            attrs.message.split("\n")
+                                .map((str, idx, all) => all.length === 1 ? str : m("p.msg" + idx, str))
+                        )
+                    ]
+                    : [],
+                ...children
+                    ? [m(".flexcol.additional", children)]
+                    : []
+            ]
+        )
+    },
+
+    setItem = (attrs, state, index, params) => {
+
+
+        const
+            lastIndex = state.currentIndex,
+            lastParams = state.currentParams;
+
+        if (index === -1) {
+            Object.assign(state, {
+                current: null,
+                currentIndex: -1,
+                currentParams: []
+            });
+        } else {
+            Object.assign(state, {
+                current: attrs.items[index] || null,
+                currentIndex: state.current ? index : -1,
+                currentParams: params || []
+            });
+        }
+
+        if (attrs.onSelected) attrs.onSelected(state.current, state.currentParams, state.currentIndex !== lastIndex, lastParams);
+
+        m.redraw();
+    },
+
+    Selector = {
+
+        oninit: ({attrs, state}) => {
+
+            state = attrs.state || state;
+            state.setItem = (index, ...params) => setItem(attrs, attrs.state || state, index, params);
+
+            const
+                hasState = !isNaN(state.currentIndex),
+                selected = hasState ? state.currentIndex : attrs.selected,
+                currentIndex = (attrs.items && attrs.items.length)
+                    ? (selected !== undefined && attrs.items[selected])
+                        ? selected
+                        : attrs.noinitial ? -1 : 0
+                    : -1,
+                current = currentIndex !== -1 ? attrs.items[currentIndex] : null;
+
+            Object.assign(state, {currentIndex, current});
+
+        },
+
+        onupdate: ({attrs, state}) => {
+            (attrs.state || state).setItem = (index, ...params) => setItem(attrs, attrs.state || state, index, params);
+        },
+
+        view: ({attrs, state}) => {
+
+            state = attrs.state || state;
+            const {current} = state;
+
+            return m(
+                (attrs.element || "widget") + ".selector" + (attrs.horizontal ? ".flexrow" : ".flexcol") + (attrs.className ? "." + attrs.className : ""),
+                {
+                    ...attrs.key && {key: attrs.key},
+                    class: (state.current ? "hascurrent" : "empty") + (attrs.class ? " " + attrs.class : "")
+                },
+                [
+                    ...((!attrs.hideonly || (attrs.items.length > 1)) && (!attrs.hidesel))
+                        ? [
+                            /** navigation bar */
+                            m(
+                                "nav.toolbar.fullwidth" + (attrs.horizontal ? ".flexcol" : ".flexrow"),
+                                {
+                                    "aria-label": attrs["aria-label"] || attrs.title || "selector",
+                                    class: attrs.toolbarClass
+                                },
+                                attrs.items.map((item, index) => m(Button, {
+                                    class: (item.class ? item.class + " " : "") + (isCurrent(state, index) ? "accent" : "nel"),
+                                    icon: item.icon || null,
+                                    ...item.title && {title: item.title},
+                                    ...item["aria-label"] && {"aria-label": item["aria-label"]},
+                                    ...item.text && {text: item.text},
+                                    onclick: () => {
+                                        const t = Date.now();
+                                        if (t - state.clickts < 200) return;
+                                        state.clickts = Date.now();
+                                        state.bodyHidden = false;
+                                        state.setItem(index);
+                                    }
+                                }))
+                            )]
+                        : [],
+                    ...current
+                        ? [
+                            ...(attrs.toggle && !state.bodyHidden)
+                                ? [
+                                    m(ButtonNew, {
+                                        class: "selectornotch " + (state.bodyHidden ? "bodyhidden" : "bodyshown"),
+                                        icon: state.bodyHidden ? "caret-up" : "caret-down",
+                                        title: state.bodyHidden ? "expand panel" : "contract panel",
+                                        onClick: () => {
+                                            state.bodyHidden = !state.bodyHidden;
+                                            m.redraw();
+                                        }
+                                    })
+                                ] : [],
+                            ...(!attrs.toggle || !state.bodyHidden)
+                                ? [
+                                    /** body */
+                                    m(".grows.flexcol.ohidden", {class: attrs.bodyClass, role: "presentation"}, [
+                                        m(
+                                            current.widget,
+                                            getAttrs(current.attrs, attrs, state.currentParams),
+                                            current.children
+                                        )
+                                    ])
+                                ]
+                                : [],
+                            ...attrs.closeButton
+                                ? [
+                                    m(Button, {
+                                        class: "closebutton absolute toright",
+                                        icon: "times",
+                                        onclick: () => {
+                                            state.setItem(-1);
+                                        },
+                                        "aria-label": "close item"
+                                    })] : []
+                        ]
+                        : m(Empty, attrs)
+                ]
+            );
+        }
+    };
+
+const ICONS = {
+    info: "info",
+    error: "exclamation-triangle",
+    success: "check"
+};
+
+function Notifications(TOAST_SHORT = 5000, altContainer) {
+
+    let
+        mNotifications = [],
+        mTimer;
+
+    function render(container, n) {
+        m.render(
+            container, m(
+                Button, {
+                    class: "notification " + n.type,
+                    text: n.text,
+                    icon: ICONS[n.type] || "info",
+                    size: 1,
+                    role: "status",
+                    // eslint-disable-next-line no-use-before-define
+                    onclick: next
+                }
+            )
+        );
+    }
+
+    function next() {
+
+        const
+            container = altContainer || document.getElementById("notification-container");
+
+        if (mNotifications.length) {
+            const n = mNotifications.splice(0, 1)[0];
+            render(container, n);
+            clearTimeout(mTimer);
+            mTimer = setTimeout(next, n.timer || TOAST_SHORT);
+        } else {
+            m.render(container, "");
+            mTimer = null;
+        }
+    }
+
+    return {
+        add: (text, type) => {
+            mNotifications.push({
+                text,
+                type
+            });
+            if (!mTimer) next();
+        },
+        clear: () => {
+            mNotifications = [];
+            next();
+        }
+
+    };
+}
+
+const Notification = new Notifications();
+
+export {
+    Empty,
+    Icon,
+    Selector,
+    Button,
+    ButtonNew,
+    Notification
+}

package/src/widgets/CardieWidget.js

@@ -0,0 +1,167 @@
+import m from "mithril";
+import {ButtonNew, defineWidget} from "./Basic";
+
+const
+    globalState = {},
+    CARDIE_CLOSED = 0;
+
+function setCardStatus(cardid, expanded = CARDIE_CLOSED) {
+    if (cardid) {
+        const [uniq, subname] = cardid.split("-");
+        if (expanded && uniq && subname) {
+            Object.keys(globalState)
+                .forEach((key) => {
+                    if (key.startsWith(uniq + "-")) {
+                        globalState[key] = CARDIE_CLOSED;
+                    }
+                });
+        }
+        globalState[cardid] = expanded;
+    }
+}
+
+const CardieWidget = defineWidget(
+    ({attrs, state, children}) => {
+
+        const
+
+            {
+                nofold,
+                cardid,
+                size,
+                title,
+                action,
+                collapsedAction,
+                collapsedClass,
+                expandedClass,
+                cols,
+                element,
+                busy,
+                expandedView,
+                collapsedView,
+                titleWidget: titWidget,
+                titleAttrs,
+                titleClass,
+                bodyClass,
+                titleExpanded,
+                titleCollapsed
+            } = attrs,
+
+            collapsed = nofold
+                ? false
+                : cardid
+                    ? !globalState[cardid]
+                    : !!state.collapsed,
+
+            items = (!collapsed)
+                ? (
+                    expandedView
+                        ? expandedView(attrs, state)
+                        : (children || [])
+                )
+                : collapsedView ? collapsedView(attrs, state) : [],
+
+            titleWidget = titWidget
+                ? m(titWidget, titleAttrs || {})
+                : title ? m("span.ellipsis.ohidden.unfold", title) : undefined,
+
+            buttonClass = busy
+                ? "fa-sync"
+                : `fa-caret-down ${collapsed ? "iscollapsed" : "isexpanded"}`;
+
+        return items.length || !attrs.skipEmpty
+            ? m(
+                (element || "ul"),
+                {
+                    class: "cardie ohidden noshrink "
+                        + (cols ? "flexcol " : "flexrow wrap ")
+                        + (attrs.class ? " " + attrs.class : "")
+                        + (nofold
+                            ? " expanded"
+                            : ` ${collapsed ? "collapsed " + (collapsedClass || "") : "expanded " + (expandedClass || "")}`)
+                        + (size ? " marg-" + size : " marg-2")
+                        + (titWidget ? " withwidget" : "")
+                        + (busy ? " busycard" : "")
+                },
+                [
+
+                    ...titleWidget
+                        ? [
+                            m(
+                                ".title.grows.fabf.flexrow.pointer.unfold",
+                                nofold
+                                    ? {
+                                        class: titleClass || "pad-2"
+                                    }
+                                    : {
+                                        class: `${titleClass || "pad-2"} ${buttonClass || ""}`,
+
+                                        title: collapsed
+                                            ? (titleCollapsed || "Click to expand the options")
+                                            : (titleExpanded || titleCollapsed || "Click to collapse the options"),
+
+                                        onclick: (e) => {
+
+                                            if (e.target.classList.contains("unfold")) {
+                                                if (e.shiftKey && attrs.onShiftOpen) {
+                                                    attrs.onShiftOpen();
+                                                } else if (attrs.cardid) {
+                                                    setCardStatus(cardid, collapsed); // !state
+                                                } else {
+                                                    state.collapsed = !state.collapsed;
+                                                }
+
+                                                m.redraw();
+                                            }
+                                        }
+                                    },
+                                action && (nofold || !collapsed)
+                                    ? [
+                                        m(ButtonNew, action),
+                                        titleWidget
+                                    ]
+                                    : collapsedAction && collapsed
+                                        ? [
+                                            m(ButtonNew, collapsedAction),
+                                            titleWidget
+                                        ]
+                                        : titleWidget
+                            )
+                        ]
+                        : [],
+
+                    ...items.length
+                        ? [
+                            m(".flexbreak"),
+                            m(
+                                ".cardiebody.fadein-filter.grows",
+                                {
+                                    class: (cols ? "flexcol " : "flexrow wrap") + " " + (bodyClass || "")
+                                },
+                                ...items
+                            )
+                        ] : [],
+
+                    ...(attrs.alwaysView
+                        ? [attrs.alwaysView({attrs, state})]
+                        : [])
+
+                ]
+            ) : [];
+    },
+    ({attrs, state}) => {
+        if (!attrs.cardid) {
+            state.collapsed = attrs.nofold
+                ? false
+                : attrs.cardid
+                    ? !globalState[attrs.cardid]
+                    : !!attrs.collapsed;
+        }
+    },
+    undefined,
+    undefined,
+    undefined,
+    {setCardStatus}
+);
+
+export default CardieWidget;

package/src/widgets/ComboPrompt.js

@@ -0,0 +1,112 @@
+import m from "mithril";
+import defineWidget from "../util/widgets.utils";
+import {confirm} from "../util/fuckingconfirm";
+import {ButtonNew} from "./Basic"
+import {promptOptions} from "./OverflowUtils";
+
+function storyOverflow(attrs) {
+
+    const
+        {
+            title,
+            items: maybeFunctionItems,
+            itemsKey,
+            itemsText,
+            field,
+            onchange,
+            textNew,
+            textHint,
+            resolve,
+            icon
+        } = attrs,
+        source = typeof maybeFunctionItems === "function" ? maybeFunctionItems() : maybeFunctionItems,
+        items = itemsKey ? typeof itemsKey === "function" ? itemsKey() : source[itemsKey] : source;
+
+    return promptOptions(items, onchange, {title, field, icon, textNew, textHint, resolve});
+}
+
+const
+    ComboPrompt = defineWidget(
+        ({attrs}) => m(
+            ".flexcol.combocontainer.grows", {
+                class: (attrs.outerClass || "") + " " + (attrs.label ? "witharia" : ""),
+                ...attrs.label && {"aria-label": attrs.label},
+                title: attrs.hint
+            }, [
+
+                m(
+                    ".flexrow.combowidget.bg-inputs",
+                    {
+                        class: (attrs.value ? "yesvalue " : "novalue ") + (attrs.class || "")
+                    },
+                    [
+                        m(ButtonNew, {
+                            class: "transp combovalue grows flexrow " + (attrs.buttonClass || "") + (attrs.innerLabel ? " witharia" : ""),
+                            textClass: "grows " + attrs.textClass,
+                            iconClass: "noshrink",
+                            ...attrs.innerLabel && {"aria-label": attrs.innerLabel},
+                            onClick: (e) => {
+                                if (e.shiftKey) {
+                                    attrs.onchange(undefined, e);
+                                } else if (!attrs.locked) {
+                                    storyOverflow(attrs);
+                                }
+                            },
+                            ...attrs.value
+                                ? {
+                                    icon: attrs.value?.icon || attrs.icon,
+                                    text: attrs.field || attrs.fieldTitle
+                                        ? attrs.value[attrs.fieldTitle || attrs.field]
+                                        : attrs.itemsText
+                                            ? attrs.itemsText[attrs.value] || attrs.value
+                                            : attrs.value
+                                }
+                                : {
+                                    icon: attrs.emptyIcon || (attrs.emptyText ? "" : "plus"),
+                                    text: attrs.emptyText || ""
+                                }
+                        }),
+                        attrs.value && !attrs.nodelete
+                            ? [
+                                m(
+                                    ButtonNew,
+                                    {
+                                        class: "clrcombo pad-2 pad-h transp " + (attrs.closeClass || "scaff-left"),
+                                        onClick: (e) => {
+
+                                            const {field} = attrs;
+                                            if (attrs.confirm && !e.shiftKey && !e.metaKey && !e.ctrlKey && !e.altKey) {
+                                                const msg = attrs.confirm();
+                                                if (msg) {
+                                                    confirm(msg, () => {
+                                                        attrs.onchange(field ? undefined : "", e);
+                                                    });
+                                                } else {
+                                                    attrs.onchange(field ? undefined : "", e);
+                                                }
+                                            } else {
+                                                attrs.onchange(field ? undefined : "", e);
+                                            }
+                                            m.redraw();
+                                            /*
+                                            if (attrs.confirm && !e.shiftKey && !e.metaKey && !e.ctrlKey && !e.altKey) {
+                                                confirm(attrs.confirm, () => {
+                                                    attrs.onchange(attrs.field ? undefined : "", e);
+                                                });
+                                            } else {
+                                                attrs.onchange(attrs.field ? undefined : "", e);
+                                            }
+                                            m.redraw();
+                                             */
+                                        },
+                                        icon: attrs.removeIcon || "times",
+                                        title: attrs.removeHint || "remove this item"
+                                    }
+                                )
+                            ]
+                            : []
+                    ]
+                )])
+    );
+
+export default ComboPrompt;