@nebularstreams/libmui 3.1.1 → 4.0.1

package/src/widgets/ColorJoePack.js

@@ -1,108 +0,0 @@
-import m from "mithril";
-import {ButtonNew, defineWidget} from "./Basic";
-import ColorJoeWidget from "./ColorJoeWidget";
-
-const
-    DEFAULT_COLOR = [255, 255, 255, 1],
-    hslToRgb = (h, s, l) => {
-
-        let r,
-            g,
-            b;
-
-        if (s === 0) {
-            r = g = b = l; // achromatic
-        } else {
-            const hue2rgb = (p, q, t) => {
-                if (t < 0) t += 1;
-                if (t > 1) t -= 1;
-                if (t < 1 / 6) return p + (q - p) * 6 * t;
-                if (t < 1 / 2) return q;
-                if (t < 2 / 3) return p + (q - p) * (2 / 3 - t) * 6;
-                return p;
-            };
-
-            const
-                q = l < 0.5 ? l * (1 + s) : l + s - l * s,
-                p = 2 * l - q;
-
-            r = hue2rgb(p, q, h + 1 / 3);
-            g = hue2rgb(p, q, h);
-            b = hue2rgb(p, q, h - 1 / 3);
-        }
-
-        return [Math.round(r * 255), Math.round(g * 255), Math.round(b * 255)];
-    };
-
-export default  defineWidget(
-    ({attrs}) => {
-
-        const
-            {colors = [], max = 8} = attrs,
-            length = colors.length,
-            getRgb = (colorBase = [0, 0, 0, 0]) => ("rgba("
-                + (colorBase.map((c, i) => (i < 3 ? Math.floor(c * 255) : c)).join(",")) + ")"),
-
-            getHsl = (colorBase = [0, 0, 0, 0]) => ("rgba("
-                + (hslToRgb(colorBase[0], colorBase[1], colorBase[2]).join(","))
-                + "," + colorBase[3] + ")");
-
-        return m(".flexrow.wrap.gradient.grows",
-            {
-                class: attrs.class
-            },
-            [
-
-                ...colors.map((entry, index) => m(
-                    ColorJoeWidget,
-                    {
-                        class: "grows",
-                        color: attrs.hsl ? getHsl(colors[index]) : getRgb(colors[index]),
-                        title: "Click to edit, or Shift-click to remove this color from the collection",
-                        hsl: attrs.hsl,
-                        onchange: (parsedColor, colorObject) => {
-                            let finalColor;
-                            if (attrs.hsl) {
-                                const hsl = colorObject.hsl();
-                                finalColor = [hsl.hue(), hsl.saturation(), hsl.lightness(), colorObject.a()];
-                            } else {
-                                finalColor = [colorObject.r(), colorObject.g(), colorObject.b(), colorObject.a()];
-                            }
-                            colors[index] = finalColor;
-                            if (attrs.onchange) {
-                                attrs.onchange(colors);
-                            }
-                            m.redraw();
-                        },
-                        onshiftclick: () => {
-                            colors.splice(index, 1);
-                            if (attrs.onchange) {
-                                attrs.onchange(colors);
-                            }
-                            m.redraw();
-                        }
-                    }
-                )),
-
-                ...(length < max)
-                    ? [
-                        m(ButtonNew, {
-                            icon: "plus",
-                            class: "unitheightsmall accent bg-window-lo " + (length ? "mini" : "grows"),
-                            title: "Add a new color to the collection, or SHIFT-CLICK to delete all colors",
-                            onClick: (e) => {
-                                if (e.shiftKey) {
-                                    colors.splice(0, colors.length);
-                                } else {
-                                    colors.push(DEFAULT_COLOR);
-                                }
-                                if (attrs.onchange) {
-                                    attrs.onchange(colors);
-                                }
-                                m.redraw();
-                            }
-                        })
-                    ] : []
-            ]);
-    }
-);

package/src/widgets/ColorJoeWidget.js

@@ -1,140 +0,0 @@
-import m from "mithril";
-import defineWidget from "../util/widgets.utils";
-import {popupMessage} from "../util/widgets"
-import colorjoe from "../util/colorjoe"
-
-const
-    ColorJoe = defineWidget(
-        () => m(".colorjoe-frame.absolute"),
-        null,
-        ({attrs, dom}) => {
-
-            window.SCALE = 1;
-
-            attrs.state.joe = (attrs.hsl ? colorjoe.hsl : colorjoe.rgb)(
-                dom,
-                attrs.color,
-                attrs.noalpha
-                    ? []
-                    : [
-                        // "currentColor",
-                        "alpha"
-                    ]
-            );
-
-            attrs.state.joe.on("change", (c) => {
-                attrs.onColor(attrs.noalpha ? c.css() : c.cssa(), c);
-            })
-                .update();
-        }
-    ),
-    FAVORITES = [],
-    ColorJoeWrapper = defineWidget(
-        ({attrs, state, children}) => m(".colorjoe-popper.flexcol", {
-            class: attrs.noalpha ? "no-alpha" : ""
-        }, [
-            m(ColorJoe, {...attrs, state}),
-            ...children,
-            m(".flexrow.extended.w-100.scaff-top.pad-2.wrap", [
-
-                [0, 1, 2, 3, 4, 5, 6, 7, 8].map((i) => m("button.scaff.scaff-b1.marg-1.unitheightsmall.grows", {
-                    class: FAVORITES[i] ? "" : "chequered",
-                    style: {
-                        ...FAVORITES[i] && {backgroundColor: FAVORITES[i]}
-                    },
-                    onclick: (e) => {
-                        if (e.shiftKey) {
-                            FAVORITES[i] = state.joe.get()
-                                .css();
-                        } else {
-                            if (FAVORITES[i]) state.joe.set(FAVORITES[i]);
-                        }
-                        if (attrs.onRedraw) attrs.onRedraw(); else m.redraw();
-                    }
-                })),
-                m(".flexbreak"),
-                /* TODO ELECTRON
-                m(ColorProbeButton, {
-                    class: "grows marg-1 scaff scaff-b1 unitheightsmall",
-                    icon: "magic",
-                    title: "Pick a color from the scene",
-                    onColor: (color) => state.joe.set(color)
-                }),
-                 */
-                ...attrs.onRemove ? [m("button.scaff.scaff-b1.unitheightsmall.marg-1.pad-2.pad-h.grows.fabf.transp.bg-accent.fa-trash", {
-                    onclick: () => attrs.onRemove(state.joe.get())
-                })] : []
-            ])
-        ])
-    ),
-    popupColor = (vnode) => popupMessage(
-        () => m(ColorJoeWrapper, {
-            noalpha: vnode.attrs.noalpha,
-            color: vnode.state.color,
-            hsl: vnode.attrs.hsl,
-            onColor: (parsedColor, colorObject) => {
-                vnode.state.color = parsedColor;
-                if (vnode.attrs.onchange) vnode.attrs.onchange(parsedColor, colorObject);
-                m.redraw();
-            },
-            onRemove: () => {
-                if (vnode.attrs.onchange) vnode.attrs.onchange(null, null);
-                popupMessage(null);
-            },
-            onRedraw: () => {
-                popupMessage.redraw();
-                m.redraw();
-            }
-        }, vnode.children),
-
-        () => {
-        },
-
-        ".modal-content-popper"
-    );
-
-const ColorJoeWidget = defineWidget(
-    (vnode) => {
-        const {attrs, state} = vnode;
-        return [
-            m(
-                ".colorjoe-cell.chequered",
-                {
-                    class: (attrs.class || "") + (state.shown ? " open" : ""),
-                    title: attrs.title,
-                    ...attrs.style && {style: attrs.style}
-                },
-                [
-                    m(".inset", {
-                        style: {
-                            backgroundColor: state.color
-                        },
-                        ...attrs.caption && {"data-caption": attrs.caption, class: "titled"},
-                        onclick: (e) => {
-                            if (attrs.onshiftclick && (e.shiftKey || e.ctrlKey)) {
-                                attrs.onshiftclick();
-                            } else {
-                                popupColor(vnode);
-                            }
-                        }
-                    })
-                ])
-        ];
-    },
-    ({attrs, state}) => {
-        state.original = attrs.color;
-        state.color = state.original || "rgba(0,0,0,0)";
-    },
-    null,
-    null,
-    ({attrs, state}) => {
-        if (state.original !== attrs.color) {
-            state.original = attrs.color;
-            state.color = state.original || "rgba(0,0,0,0)";
-            m.redraw();
-        }
-    }
-);
-
-
-export default ColorJoeWidget;

package/src/widgets/ComboPrompt.js

@@ -1,112 +0,0 @@
-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 = (typeof attrs.confirm === "function") ? attrs.confirm() : 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;

package/src/widgets/ComboWidget.js

@@ -1,156 +0,0 @@
-import m from "mithril";
-import "./css/combo-ellipsis.css"
-
-const
-    PropGroup = {
-        view: ({attrs}) => attrs.items.map(({name}, index) => m(
-            "option",
-            {
-                ...(attrs.state.index === index + (attrs.offset || 0)) && {selected: true}
-            },
-            name
-        ))
-    };
-
-let
-    __timer;
-
-function parseGroups(attrs, state) {
-
-    if (attrs.groups) {
-
-        state.groups = {};
-        state.allItems = [];
-
-        attrs.parsed = true;
-
-        const
-            groupKeys = Object.keys(attrs.groups);
-
-        groupKeys.forEach((groupKey) => {
-            state.groups[groupKey] = {
-                label: groupKey,
-                len: attrs.groups[groupKey].length,
-                items: attrs.groups[groupKey]
-            };
-        });
-
-        const
-            groupValues = Object.values(state.groups);
-
-        groupValues
-            .forEach((group, index) => {
-
-                if (attrs.value) {
-                    state.index = 0;
-                }
-
-                group.offset = index ? groupValues[index - 1].offset + groupValues[index - 1].len : 0;
-                state.allItems = state.allItems.concat(group.items);
-                if (attrs.value) {
-
-                    group.items.forEach((item, itemIndex) => {
-                        const
-                            itemValue = item.value,
-                            parsedValue = attrs.parser ? attrs.parser(itemValue) : itemValue;
-                        if (parsedValue === attrs.value) {
-                            state.index = itemIndex + group.offset;
-                        }
-                    });
-                }
-            });
-    } else if (attrs.items) {
-        state.index = 0;
-        for (let i = 0, l = attrs.items.length; i < l; i++) {
-            const
-                itemValue = attrs.items[i].value,
-                parsedValue = attrs.parser ? attrs.parser(itemValue) : itemValue;
-            if (parsedValue === attrs.value) {
-                state.index = i;
-                break;
-            }
-        }
-        state.allItems = attrs.items;
-    } else {
-        state.allItems = [];
-    }
-
-}
-
-const ComboWidget = {
-
-    /**
-     * Creates the Widget View
-     * @param vnode
-     * @param {SelectAttrs} vnode.attrs
-     * @param {Object} vnode.state
-     * @return {*}
-     * @private
-     */
-
-
-    view: ({attrs, state}) => {
-        const {groups} = state;
-        return m(
-            "select",
-            {
-                "aria-label": attrs.caption,
-                class: attrs.class,
-                oninput: (ev) => {
-
-                    // el desincronismo es si se camian los items y el state no se entera
-                    // esto asegura que estan synchro
-                    parseGroups(attrs, state);
-
-                    const
-                        index = state.index = ev.target.selectedIndex,
-                        item = index >= 0 ? state.allItems[index] : null;
-
-                    if (attrs.onchange && item) {
-                        attrs.onchange(item.value, item, index);
-                    }
-
-                    m.redraw();
-                }
-            },
-            groups
-                ? Object.values(groups)
-                    .map((group) => m("optgroup", {label: group.label}, m(PropGroup, {
-                        items: group.items,
-                        offset: group.offset,
-                        state
-                    })))
-                : m(PropGroup, {items: (attrs.items != null ? attrs.items : []), state}));
-    },
-
-    oninit: ({attrs, state}) => {
-        Object.assign(state, {
-            index: attrs.index || 0,
-            initial: attrs.value
-        });
-        parseGroups(attrs, state);
-    },
-
-    oncreate: () => {
-    },
-
-    onupdate: ({attrs, state}) => {
-
-        const refresh = (attrs.value !== undefined && state.initial !== attrs.value);
-
-        if (!state.groups && !state.allItems || refresh) {
-
-            // sets index from attrs.value
-            parseGroups(attrs, state);
-
-            if (refresh) {
-                state.initial = attrs.value;
-                clearTimeout(__timer);
-                __timer = setTimeout(() => m.redraw(), 50);
-            }
-        }
-
-    }
-};
-
-export default ComboWidget;