@nebularstreams/libmui 3.1.0 → 4.0.0

package/src/widgets/Basic.js

@@ -1,352 +0,0 @@
-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 : "") + (current?.bodyTitle ? " withbodytitle" : "")
-                },
-                [
-                    ...((!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)
-                                ? [
-                                    ...current?.bodyTitle ? [
-                                        m(".bodytitle", current.bodyTitle)
-                                    ] : [],
-                                    /** body */
-                                    m(".grows.flexcol.ohidden.selectorbody", {
-                                        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/ButtonChoiceWidget.js

@@ -1,72 +0,0 @@
-import m from "mithril";
-import {ButtonNew, defineWidget} from "./Basic";
-import Separator from "./Separator"
-
-const
-
-    /*
-         SizeChoices = {
-             "1080p": {width: 1920, height: 1080, value: "1080p"},
-             "720p": {width: 1280, height: 720, value: "720p"},
-             "Fluid": {width: null, height: null, value: "Fluid"},
-             "Custom": {value: ""}
-         }
-     */
-
-    ButtonChoiceWidget = defineWidget(
-        ({attrs}) => {
-
-            const
-                {value, field, toggle, element, emptyMessage, chooseKey, chooseDict} = attrs,
-                choose = (!attrs.choose && chooseKey && chooseDict) ? chooseDict[chooseKey] : attrs.choose,
-                choices = choose
-                    ? choose.map((choice) => ({value: choice, caption: choice}))
-                    : attrs.choices || {};
-
-            const
-                keys = Object.keys(choices),
-                has = keys.length,
-                clase = (attrs.class || "") + (attrs.subclass ? " " + attrs.subclass : " scaff scaff-b1");
-
-            return has || emptyMessage
-                ? [
-                    ...attrs.label ? [m(Separator, {text: attrs.label, class: attrs.labelClass || ""})] : [],
-                    m(
-                        (element || "div") + ".buttonchoice.flexrow.ohidden",
-                        {
-                            class: clase + (attrs.icon ? " withicon fa-" + attrs.icon : ""),
-                            title: attrs.title
-                        },
-                        m(
-                            ".flexrow.grows.ohidden.wrap" + (attrs.icon ? " scaff-left" : ""),
-                            keys.length
-                                ? keys.map((choicekey) => {
-
-                                    const
-                                        choice = choices[choicekey],
-                                        choicevalue = attrs.raw && field ? choice : choice.value,
-                                        finalchoicevalue = field ? choicevalue[field] : choicevalue,
-                                        current = finalchoicevalue === value;
-
-                                    // noinspection EqualityComparisonWithCoercionJS
-                                    return m(ButtonNew, {
-
-                                        icon: choice.icon || undefined,
-                                        class: "grows scaff-b0 " + (attrs.buttonClass ? attrs.buttonClass + " " : "rectbutton unitheightsmall ") + (choice.class ? choice.class + " " : "") + (current ? "accent" : ""),
-                                        title: choice.current ? choice.titleOn || choice.title : choice.titleOff || choice.title,
-                                        onClick: (e) => {
-                                            attrs.onchange(toggle ? current ? undefined : choice : choice, choicekey, e);
-                                            m.redraw();
-                                        }
-                                    }, attrs.render ? attrs.render(choice) : choice.caption || choicekey);
-                                })
-                                : [m(".emptychoice.grows.al-center.align-self-center.unitheightsmall", attrs.emptyMessage)]
-                        )
-                    )
-                ]
-                : [];
-        }
-    );
-
-export default ButtonChoiceWidget;
-

package/src/widgets/CardieWidget.js

@@ -1,168 +0,0 @@
-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,
-                foldIcon = "fa-chevron-down"
-            } = 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"
-                : `${foldIcon} ${collapsed ? "iscollapsed" : "isexpanded"}`;
-
-        return items.length || !attrs.skipEmpty
-            ? m(
-                (element || "ul"),
-                {
-                    class: "cardie ohidden "
-                        + (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;