tweak-ui 0.5.0 → 0.8.0

package/dist/lib/components/controls/color-picker.js

@@ -1,267 +0,0 @@
-// tslint:disable:no-bitwise
-import m from 'mithril';
-import { getColorFormatter, hsv2rgb, rgb2hsv, } from '../../color-formats';
-import { getValue, component, setValue, } from '../../core';
-import { call, clamp, use, twuiClass, getTouchPoint, } from '../../core/utils';
-component('color-picker', (node) => {
-    let hue = 0; // range [0,1]
-    let sat = 0; // range [0,1]
-    let val = 0; // range [0,1]
-    let a = 0; // range [0,1]
-    function getHSVA(s = sat, v = val) {
-        return {
-            h: hue * 360,
-            s: s,
-            v: v,
-            a: a,
-        };
-    }
-    function getRGB(s = sat, v = val) {
-        return hsv2rgb(getHSVA(s, v));
-    }
-    function getRGBA(s = sat, v = val, alpha = a) {
-        return Object.assign(Object.assign({}, getRGB(s, v)), { a: alpha });
-    }
-    function setHSV(hsv) {
-        hue = hsv.h / 360;
-        sat = hsv.s;
-        val = hsv.v;
-    }
-    function setHSVA(hsv) {
-        setHSV(hsv);
-        a = hsv.a;
-    }
-    function getHexRGB(s, v) {
-        return getColorFormatter('#rgb').format(getRGBA(s, v));
-    }
-    function getHexRGBA(s, v) {
-        return getColorFormatter('#rgba').format(getRGBA(s, v));
-    }
-    function getCssRGBA(s = sat, v = val, alpha = a) {
-        return getColorFormatter('rgba()').format(getRGBA(s, v, alpha));
-    }
-    function parseInput(value, format) {
-        const rgba = getColorFormatter(format || 'rgb').parse(value);
-        setHSVA(Object.assign(Object.assign({}, rgb2hsv(rgba)), { a: rgba.a }));
-    }
-    function formatOutput(format) {
-        return getColorFormatter(format).format(getRGBA());
-    }
-    function triggerInput() {
-        use(node.attrs.data, (data) => {
-            const value = formatOutput(data.format);
-            const written = setValue(data, value);
-            call(data.onInput, data, written);
-        });
-    }
-    function triggerChange() {
-        use(node.attrs.data, (data) => {
-            const value = formatOutput(data.format);
-            const written = setValue(data, value);
-            call(data.onChange, data, written);
-        });
-    }
-    function hasAlpha() {
-        return use(node.attrs.data, (data) => {
-            return data.format && data.format.match(/a/i);
-        });
-    }
-    //
-    // manual input
-    //
-    function inputR(e) {
-        input(e, 'r');
-    }
-    function inputG(e) {
-        input(e, 'g');
-    }
-    function inputB(e) {
-        input(e, 'b');
-    }
-    function input(e, field) {
-        const color = getRGBA();
-        color[field] = parseInt(e.target.value, 10) / 255;
-        setHSV(rgb2hsv(color));
-        triggerInput();
-        triggerChange();
-    }
-    function inputHex(e) {
-        parseInput(e.target.value, hasAlpha() ? 'rgba' : 'rgb');
-        triggerInput();
-        triggerChange();
-    }
-    //
-    // drag input
-    //
-    let target;
-    let kind;
-    function beginPickSV(e) {
-        kind = 'sv';
-        enableDrag(e.target);
-        onMouseMove(e);
-    }
-    function beginPickH(e) {
-        kind = 'h';
-        enableDrag(e.target);
-        onMouseMove(e);
-    }
-    function beginPickA(e) {
-        kind = 'a';
-        enableDrag(e.target);
-        onMouseMove(e);
-    }
-    function enableDrag(el) {
-        disableDrag();
-        target = el;
-        const options = { passive: false };
-        document.addEventListener('mousemove', onMouseMove, options);
-        document.addEventListener('mouseup', onMouseUp, options);
-        document.addEventListener('touchmove', onMouseMove, options);
-        document.addEventListener('touchend', onMouseUp, options);
-        document.addEventListener('touchcancel', onMouseUp, options);
-    }
-    function disableDrag() {
-        document.removeEventListener('mousemove', onMouseMove);
-        document.removeEventListener('mouseup', onMouseUp);
-        document.removeEventListener('touchmove', onMouseMove);
-        document.removeEventListener('touchend', onMouseUp);
-        document.removeEventListener('touchcancel', onMouseUp);
-    }
-    function onMouseMove(e) {
-        if (!target) {
-            return;
-        }
-        e.preventDefault();
-        const rect = target.getBoundingClientRect();
-        const tx = window.pageXOffset || document.documentElement.scrollLeft;
-        const ty = window.pageYOffset || document.documentElement.scrollTop;
-        const cw = target.clientWidth;
-        const ch = target.clientHeight;
-        let [cx, cy] = getTouchPoint(e);
-        cx = clamp((cx - tx - rect.left) / cw, 0, 1);
-        cy = clamp((cy - ty - rect.top) / ch, 0, 1);
-        if (kind === 'sv') {
-            sat = cx;
-            val = 1 - cy;
-        }
-        if (kind === 'h') {
-            hue = 1 - cx;
-        }
-        if (kind === 'a') {
-            a = cx;
-        }
-        triggerInput();
-        m.redraw();
-    }
-    function onMouseUp() {
-        if (target != null) {
-            target = null;
-            disableDrag();
-            triggerChange();
-        }
-    }
-    return {
-        onremove: () => {
-            disableDrag();
-        },
-        oninit: () => {
-            use(node.attrs.data, (data) => {
-                parseInput(getValue(data), data.format);
-            });
-        },
-        view: () => {
-            return use(node.attrs.data, (data) => {
-                const rgba = getRGBA();
-                return m('div', {
-                    class: twuiClass(data.type),
-                }, m('.color-picker-inputs', m("input.input-hex[type='text']", {
-                    value: hasAlpha() ? getHexRGBA() : getHexRGB(),
-                    onchange: inputHex,
-                }), m("input.input-r[type='number']", {
-                    min: 0,
-                    max: 255,
-                    step: 1,
-                    value: Math.round(rgba.r * 255),
-                    onchange: inputR,
-                }), m("input.input-g[type='number']", {
-                    min: 0,
-                    max: 255,
-                    step: 1,
-                    value: Math.round(rgba.g * 255),
-                    onchange: inputG,
-                }), m("input.input-b[type='number']", {
-                    min: 0,
-                    max: 255,
-                    step: 1,
-                    value: Math.round(rgba.b * 255),
-                    onchange: inputB,
-                })), m('.color-picker-panel', m('.color-picker-sv', {
-                    tabindex: 0,
-                    onmousedown: beginPickSV,
-                    ontouchstart: beginPickSV,
-                    style: {
-                        'background-color': `${getCssRGBA(1, 1, 1)}`,
-                        'user-select': 'none',
-                    },
-                }, m('.color-picker-sv-bg', {
-                    style: {
-                        background: 'linear-gradient(to right,rgba(255,255,255,1),rgba(255,255,255,0))',
-                        'user-select': 'none',
-                        'pointer-events': 'none',
-                    },
-                }), m('.color-picker-sv-bg', {
-                    style: {
-                        background: 'linear-gradient(to top,rgba(0,0,0,1),rgba(0,0,0,0))',
-                        'user-select': 'none',
-                        'pointer-events': 'none',
-                    },
-                }), m('.color-picker-sv-cursor', {
-                    style: {
-                        'user-select': 'none',
-                        'pointer-events': 'none',
-                        'background-color': `${getCssRGBA(hue, sat, 1)}`,
-                        left: `${sat * 100}%`,
-                        top: `${(1 - val) * 100}%`,
-                    },
-                })), m('.color-picker-h', {
-                    tabindex: 0,
-                    onmousedown: beginPickH,
-                    ontouchstart: beginPickH,
-                    style: {
-                        'user-select': 'none',
-                        background: 'linear-gradient(to right, #f00 0, #f0f 17% , #00f 33% , #0ff 50% , #0f0 67% , #ff0 83% , #f00 100%)',
-                    },
-                }, m('.color-picker-h-cursor', {
-                    style: {
-                        'user-select': 'none',
-                        'pointer-events': 'none',
-                        'background-color': `${getCssRGBA(1, 1, 1)}`,
-                        position: 'absolute',
-                        left: `${(1 - hue) * 100}%`,
-                    },
-                })), !hasAlpha()
-                    ? null
-                    : m('.color-picker-a', {
-                        tabindex: 0,
-                        onmousedown: beginPickA,
-                        ontouchstart: beginPickA,
-                        style: {
-                            'user-select': 'none',
-                        },
-                    }, m('.color-picker-a-bg', {
-                        style: {
-                            background: `linear-gradient(to right, ${getCssRGBA(sat, val, 0)}, ${getCssRGBA(sat, val, 1)})`,
-                        },
-                    }), m('.color-picker-a-cursor', {
-                        style: {
-                            'user-select': 'none',
-                            'pointer-events': 'none',
-                            position: 'absolute',
-                            left: `${a * 100}%`,
-                        },
-                    }))));
-            });
-        },
-    };
-});
-//# sourceMappingURL=color-picker.js.map

package/dist/lib/components/controls/color-picker.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"color-picker.js","sourceRoot":"","sources":["../../../../src/lib/components/controls/color-picker.ts"],"names":[],"mappings":"AAAA,4BAA4B;AAC5B,OAAO,CAAC,MAAM,SAAS,CAAA;AAEvB,OAAO,EACL,iBAAiB,EAEjB,OAAO,EAEP,OAAO,GAER,MAAM,qBAAqB,CAAA;AAC5B,OAAO,EACL,QAAQ,EACR,SAAS,EACT,QAAQ,GAIT,MAAM,YAAY,CAAA;AACnB,OAAO,EACL,IAAI,EACJ,KAAK,EACL,GAAG,EACH,SAAS,EACT,aAAa,GACd,MAAM,kBAAkB,CAAA;AA6DzB,SAAS,CAAmB,cAAc,EAAE,CAAC,IAAI,EAAE,EAAE;IACnD,IAAI,GAAG,GAAG,CAAC,CAAA,CAAC,cAAc;IAC1B,IAAI,GAAG,GAAG,CAAC,CAAA,CAAC,cAAc;IAC1B,IAAI,GAAG,GAAG,CAAC,CAAA,CAAC,cAAc;IAC1B,IAAI,CAAC,GAAG,CAAC,CAAA,CAAC,cAAc;IAExB,SAAS,OAAO,CAAC,CAAC,GAAG,GAAG,EAAE,CAAC,GAAG,GAAG;QAC/B,OAAO;YACL,CAAC,EAAE,GAAG,GAAG,GAAG;YACZ,CAAC,EAAE,CAAC;YACJ,CAAC,EAAE,CAAC;YACJ,CAAC,EAAE,CAAC;SACL,CAAA;IACH,CAAC;IAED,SAAS,MAAM,CAAC,CAAC,GAAG,GAAG,EAAE,CAAC,GAAG,GAAG;QAC9B,OAAO,OAAO,CAAC,OAAO,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,CAAA;IAC/B,CAAC;IAED,SAAS,OAAO,CAAC,CAAC,GAAG,GAAG,EAAE,CAAC,GAAG,GAAG,EAAE,KAAK,GAAG,CAAC;QAC1C,uCAAY,MAAM,CAAC,CAAC,EAAE,CAAC,CAAC,KAAE,CAAC,EAAE,KAAK,IAAE;IACtC,CAAC;IAED,SAAS,MAAM,CAAC,GAAQ;QACtB,GAAG,GAAG,GAAG,CAAC,CAAC,GAAG,GAAG,CAAA;QACjB,GAAG,GAAG,GAAG,CAAC,CAAC,CAAA;QACX,GAAG,GAAG,GAAG,CAAC,CAAC,CAAA;IACb,CAAC;IAED,SAAS,OAAO,CAAC,GAAS;QACxB,MAAM,CAAC,GAAG,CAAC,CAAA;QACX,CAAC,GAAG,GAAG,CAAC,CAAC,CAAA;IACX,CAAC;IAED,SAAS,SAAS,CAAC,CAAU,EAAE,CAAU;QACvC,OAAO,iBAAiB,CAAC,MAAM,CAAC,CAAC,MAAM,CAAC,OAAO,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,CAAA;IACxD,CAAC;IAED,SAAS,UAAU,CAAC,CAAU,EAAE,CAAU;QACxC,OAAO,iBAAiB,CAAC,OAAO,CAAC,CAAC,MAAM,CAAC,OAAO,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,CAAA;IACzD,CAAC;IAED,SAAS,UAAU,CAAC,CAAC,GAAG,GAAG,EAAE,CAAC,GAAG,GAAG,EAAE,QAAgB,CAAC;QACrD,OAAO,iBAAiB,CAAC,QAAQ,CAAC,CAAC,MAAM,CAAC,OAAO,CAAC,CAAC,EAAE,CAAC,EAAE,KAAK,CAAC,CAAC,CAAA;IACjE,CAAC;IAED,SAAS,UAAU,CAAC,KAAiC,EAAE,MAAc;QACnE,MAAM,IAAI,GAAG,iBAAiB,CAAC,MAAM,IAAI,KAAK,CAAC,CAAC,KAAK,CAAC,KAAK,CAAC,CAAA;QAC5D,OAAO,iCACF,OAAO,CAAC,IAAI,CAAC,KAChB,CAAC,EAAE,IAAI,CAAC,CAAC,IACT,CAAA;IACJ,CAAC;IAED,SAAS,YAAY,CAAC,MAAc;QAClC,OAAO,iBAAiB,CAAC,MAAM,CAAC,CAAC,MAAM,CAAC,OAAO,EAAE,CAAC,CAAA;IACpD,CAAC;IAED,SAAS,YAAY;QACnB,GAAG,CAAC,IAAI,CAAC,KAAK,CAAC,IAAI,EAAE,CAAC,IAAI,EAAE,EAAE;YAC5B,MAAM,KAAK,GAAG,YAAY,CAAC,IAAI,CAAC,MAAM,CAAC,CAAA;YACvC,MAAM,OAAO,GAAG,QAAQ,CAAC,IAAI,EAAE,KAAK,CAAC,CAAA;YACrC,IAAI,CAAC,IAAI,CAAC,OAAO,EAAE,IAAI,EAAE,OAAO,CAAC,CAAA;QACnC,CAAC,CAAC,CAAA;IACJ,CAAC;IAED,SAAS,aAAa;QACpB,GAAG,CAAC,IAAI,CAAC,KAAK,CAAC,IAAI,EAAE,CAAC,IAAI,EAAE,EAAE;YAC5B,MAAM,KAAK,GAAG,YAAY,CAAC,IAAI,CAAC,MAAM,CAAC,CAAA;YACvC,MAAM,OAAO,GAAG,QAAQ,CAAC,IAAI,EAAE,KAAK,CAAC,CAAA;YACrC,IAAI,CAAC,IAAI,CAAC,QAAQ,EAAE,IAAI,EAAE,OAAO,CAAC,CAAA;QACpC,CAAC,CAAC,CAAA;IACJ,CAAC;IAED,SAAS,QAAQ;QACf,OAAO,GAAG,CAAC,IAAI,CAAC,KAAK,CAAC,IAAI,EAAE,CAAC,IAAI,EAAE,EAAE;YACnC,OAAO,IAAI,CAAC,MAAM,IAAI,IAAI,CAAC,MAAM,CAAC,KAAK,CAAC,IAAI,CAAC,CAAA;QAC/C,CAAC,CAAC,CAAA;IACJ,CAAC;IAED,EAAE;IACF,eAAe;IACf,EAAE;IAEF,SAAS,MAAM,CAAC,CAAQ;QACtB,KAAK,CAAC,CAAC,EAAE,GAAG,CAAC,CAAA;IACf,CAAC;IAED,SAAS,MAAM,CAAC,CAAQ;QACtB,KAAK,CAAC,CAAC,EAAE,GAAG,CAAC,CAAA;IACf,CAAC;IAED,SAAS,MAAM,CAAC,CAAQ;QACtB,KAAK,CAAC,CAAC,EAAE,GAAG,CAAC,CAAA;IACf,CAAC;IAED,SAAS,KAAK,CAAC,CAAQ,EAAE,KAAiB;QACxC,MAAM,KAAK,GAAG,OAAO,EAAE,CAAA;QACvB,KAAK,CAAC,KAAK,CAAC,GAAG,QAAQ,CAAE,CAAC,CAAC,MAA2B,CAAC,KAAK,EAAE,EAAE,CAAC,GAAG,GAAG,CAAA;QACvE,MAAM,CAAC,OAAO,CAAC,KAAK,CAAC,CAAC,CAAA;QACtB,YAAY,EAAE,CAAA;QACd,aAAa,EAAE,CAAA;IACjB,CAAC;IAED,SAAS,QAAQ,CAAC,CAAQ;QACxB,UAAU,CACP,CAAC,CAAC,MAA2B,CAAC,KAAK,EACpC,QAAQ,EAAE,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,KAAK,CAC5B,CAAA;QACD,YAAY,EAAE,CAAA;QACd,aAAa,EAAE,CAAA;IACjB,CAAC;IAED,EAAE;IACF,aAAa;IACb,EAAE;IAEF,IAAI,MAAmB,CAAA;IACvB,IAAI,IAAsB,CAAA;IAC1B,SAAS,WAAW,CAAC,CAAa;QAChC,IAAI,GAAG,IAAI,CAAA;QACX,UAAU,CAAC,CAAC,CAAC,MAAqB,CAAC,CAAA;QACnC,WAAW,CAAC,CAAC,CAAC,CAAA;IAChB,CAAC;IAED,SAAS,UAAU,CAAC,CAAa;QAC/B,IAAI,GAAG,GAAG,CAAA;QACV,UAAU,CAAC,CAAC,CAAC,MAAqB,CAAC,CAAA;QACnC,WAAW,CAAC,CAAC,CAAC,CAAA;IAChB,CAAC;IAED,SAAS,UAAU,CAAC,CAAa;QAC/B,IAAI,GAAG,GAAG,CAAA;QACV,UAAU,CAAC,CAAC,CAAC,MAAqB,CAAC,CAAA;QACnC,WAAW,CAAC,CAAC,CAAC,CAAA;IAChB,CAAC;IAED,SAAS,UAAU,CAAC,EAAe;QACjC,WAAW,EAAE,CAAA;QACb,MAAM,GAAG,EAAE,CAAA;QACX,MAAM,OAAO,GAAG,EAAE,OAAO,EAAE,KAAK,EAAE,CAAA;QAClC,QAAQ,CAAC,gBAAgB,CAAC,WAAW,EAAE,WAAW,EAAE,OAAO,CAAC,CAAA;QAC5D,QAAQ,CAAC,gBAAgB,CAAC,SAAS,EAAE,SAAS,EAAE,OAAO,CAAC,CAAA;QACxD,QAAQ,CAAC,gBAAgB,CAAC,WAAW,EAAE,WAAW,EAAE,OAAO,CAAC,CAAA;QAC5D,QAAQ,CAAC,gBAAgB,CAAC,UAAU,EAAE,SAAS,EAAE,OAAO,CAAC,CAAA;QACzD,QAAQ,CAAC,gBAAgB,CAAC,aAAa,EAAE,SAAS,EAAE,OAAO,CAAC,CAAA;IAC9D,CAAC;IAED,SAAS,WAAW;QAClB,QAAQ,CAAC,mBAAmB,CAAC,WAAW,EAAE,WAAW,CAAC,CAAA;QACtD,QAAQ,CAAC,mBAAmB,CAAC,SAAS,EAAE,SAAS,CAAC,CAAA;QAClD,QAAQ,CAAC,mBAAmB,CAAC,WAAW,EAAE,WAAW,CAAC,CAAA;QACtD,QAAQ,CAAC,mBAAmB,CAAC,UAAU,EAAE,SAAS,CAAC,CAAA;QACnD,QAAQ,CAAC,mBAAmB,CAAC,aAAa,EAAE,SAAS,CAAC,CAAA;IACxD,CAAC;IAED,SAAS,WAAW,CAAC,CAAa;QAChC,IAAI,CAAC,MAAM,EAAE,CAAC;YACZ,OAAM;QACR,CAAC;QACD,CAAC,CAAC,cAAc,EAAE,CAAA;QAElB,MAAM,IAAI,GAAG,MAAM,CAAC,qBAAqB,EAAE,CAAA;QAC3C,MAAM,EAAE,GAAG,MAAM,CAAC,WAAW,IAAI,QAAQ,CAAC,eAAe,CAAC,UAAU,CAAA;QACpE,MAAM,EAAE,GAAG,MAAM,CAAC,WAAW,IAAI,QAAQ,CAAC,eAAe,CAAC,SAAS,CAAA;QACnE,MAAM,EAAE,GAAG,MAAM,CAAC,WAAW,CAAA;QAC7B,MAAM,EAAE,GAAG,MAAM,CAAC,YAAY,CAAA;QAC9B,IAAI,CAAC,EAAE,EAAE,EAAE,CAAC,GAAG,aAAa,CAAC,CAAC,CAAC,CAAA;QAC/B,EAAE,GAAG,KAAK,CAAC,CAAC,EAAE,GAAG,EAAE,GAAG,IAAI,CAAC,IAAI,CAAC,GAAG,EAAE,EAAE,CAAC,EAAE,CAAC,CAAC,CAAA;QAC5C,EAAE,GAAG,KAAK,CAAC,CAAC,EAAE,GAAG,EAAE,GAAG,IAAI,CAAC,GAAG,CAAC,GAAG,EAAE,EAAE,CAAC,EAAE,CAAC,CAAC,CAAA;QAE3C,IAAI,IAAI,KAAK,IAAI,EAAE,CAAC;YAClB,GAAG,GAAG,EAAE,CAAA;YACR,GAAG,GAAG,CAAC,GAAG,EAAE,CAAA;QACd,CAAC;QACD,IAAI,IAAI,KAAK,GAAG,EAAE,CAAC;YACjB,GAAG,GAAG,CAAC,GAAG,EAAE,CAAA;QACd,CAAC;QACD,IAAI,IAAI,KAAK,GAAG,EAAE,CAAC;YACjB,CAAC,GAAG,EAAE,CAAA;QACR,CAAC;QAED,YAAY,EAAE,CAAA;QACd,CAAC,CAAC,MAAM,EAAE,CAAA;IACZ,CAAC;IAED,SAAS,SAAS;QAChB,IAAI,MAAM,IAAI,IAAI,EAAE,CAAC;YACnB,MAAM,GAAG,IAAI,CAAA;YACb,WAAW,EAAE,CAAA;YACb,aAAa,EAAE,CAAA;QACjB,CAAC;IACH,CAAC;IAED,OAAO;QACL,QAAQ,EAAE,GAAG,EAAE;YACb,WAAW,EAAE,CAAA;QACf,CAAC;QACD,MAAM,EAAE,GAAG,EAAE;YACX,GAAG,CAAC,IAAI,CAAC,KAAK,CAAC,IAAI,EAAE,CAAC,IAAI,EAAE,EAAE;gBAC5B,UAAU,CAAC,QAAQ,CAAC,IAAI,CAAC,EAAE,IAAI,CAAC,MAAM,CAAC,CAAA;YACzC,CAAC,CAAC,CAAA;QACJ,CAAC;QACD,IAAI,EAAE,GAAG,EAAE;YACT,OAAO,GAAG,CAAC,IAAI,CAAC,KAAK,CAAC,IAAI,EAAE,CAAC,IAAI,EAAE,EAAE;gBACnC,MAAM,IAAI,GAAG,OAAO,EAAE,CAAA;gBACtB,OAAO,CAAC,CACN,KAAK,EACL;oBACE,KAAK,EAAE,SAAS,CAAC,IAAI,CAAC,IAAI,CAAC;iBAC5B,EACD,CAAC,CACC,sBAAsB,EACtB,CAAC,CAAC,8BAA8B,EAAE;oBAChC,KAAK,EAAE,QAAQ,EAAE,CAAC,CAAC,CAAC,UAAU,EAAE,CAAC,CAAC,CAAC,SAAS,EAAE;oBAC9C,QAAQ,EAAE,QAAQ;iBACnB,CAAC,EACF,CAAC,CAAC,8BAA8B,EAAE;oBAChC,GAAG,EAAE,CAAC;oBACN,GAAG,EAAE,GAAG;oBACR,IAAI,EAAE,CAAC;oBACP,KAAK,EAAE,IAAI,CAAC,KAAK,CAAC,IAAI,CAAC,CAAC,GAAG,GAAG,CAAC;oBAC/B,QAAQ,EAAE,MAAM;iBACjB,CAAC,EACF,CAAC,CAAC,8BAA8B,EAAE;oBAChC,GAAG,EAAE,CAAC;oBACN,GAAG,EAAE,GAAG;oBACR,IAAI,EAAE,CAAC;oBACP,KAAK,EAAE,IAAI,CAAC,KAAK,CAAC,IAAI,CAAC,CAAC,GAAG,GAAG,CAAC;oBAC/B,QAAQ,EAAE,MAAM;iBACjB,CAAC,EACF,CAAC,CAAC,8BAA8B,EAAE;oBAChC,GAAG,EAAE,CAAC;oBACN,GAAG,EAAE,GAAG;oBACR,IAAI,EAAE,CAAC;oBACP,KAAK,EAAE,IAAI,CAAC,KAAK,CAAC,IAAI,CAAC,CAAC,GAAG,GAAG,CAAC;oBAC/B,QAAQ,EAAE,MAAM;iBACjB,CAAC,CACH,EACD,CAAC,CACC,qBAAqB,EACrB,CAAC,CACC,kBAAkB,EAClB;oBACE,QAAQ,EAAE,CAAC;oBACX,WAAW,EAAE,WAAW;oBACxB,YAAY,EAAE,WAAW;oBACzB,KAAK,EAAE;wBACL,kBAAkB,EAAE,GAAG,UAAU,CAAC,CAAC,EAAE,CAAC,EAAE,CAAC,CAAC,EAAE;wBAC5C,aAAa,EAAE,MAAM;qBACtB;iBACF,EACD,CAAC,CAAC,qBAAqB,EAAE;oBACvB,KAAK,EAAE;wBACL,UAAU,EACR,mEAAmE;wBACrE,aAAa,EAAE,MAAM;wBACrB,gBAAgB,EAAE,MAAM;qBACzB;iBACF,CAAC,EACF,CAAC,CAAC,qBAAqB,EAAE;oBACvB,KAAK,EAAE;wBACL,UAAU,EACR,qDAAqD;wBACvD,aAAa,EAAE,MAAM;wBACrB,gBAAgB,EAAE,MAAM;qBACzB;iBACF,CAAC,EACF,CAAC,CAAC,yBAAyB,EAAE;oBAC3B,KAAK,EAAE;wBACL,aAAa,EAAE,MAAM;wBACrB,gBAAgB,EAAE,MAAM;wBACxB,kBAAkB,EAAE,GAAG,UAAU,CAAC,GAAG,EAAE,GAAG,EAAE,CAAC,CAAC,EAAE;wBAChD,IAAI,EAAE,GAAG,GAAG,GAAG,GAAG,GAAG;wBACrB,GAAG,EAAE,GAAG,CAAC,CAAC,GAAG,GAAG,CAAC,GAAG,GAAG,GAAG;qBAC3B;iBACF,CAAC,CACH,EACD,CAAC,CACC,iBAAiB,EACjB;oBACE,QAAQ,EAAE,CAAC;oBACX,WAAW,EAAE,UAAU;oBACvB,YAAY,EAAE,UAAU;oBACxB,KAAK,EAAE;wBACL,aAAa,EAAE,MAAM;wBACrB,UAAU,EACR,qGAAqG;qBACxG;iBACF,EACD,CAAC,CAAC,wBAAwB,EAAE;oBAC1B,KAAK,EAAE;wBACL,aAAa,EAAE,MAAM;wBACrB,gBAAgB,EAAE,MAAM;wBACxB,kBAAkB,EAAE,GAAG,UAAU,CAAC,CAAC,EAAE,CAAC,EAAE,CAAC,CAAC,EAAE;wBAC5C,QAAQ,EAAE,UAAU;wBACpB,IAAI,EAAE,GAAG,CAAC,CAAC,GAAG,GAAG,CAAC,GAAG,GAAG,GAAG;qBAC5B;iBACF,CAAC,CACH,EACD,CAAC,QAAQ,EAAE;oBACT,CAAC,CAAC,IAAI;oBACN,CAAC,CAAC,CAAC,CACC,iBAAiB,EACjB;wBACE,QAAQ,EAAE,CAAC;wBACX,WAAW,EAAE,UAAU;wBACvB,YAAY,EAAE,UAAU;wBACxB,KAAK,EAAE;4BACL,aAAa,EAAE,MAAM;yBACtB;qBACF,EACD,CAAC,CAAC,oBAAoB,EAAE;wBACtB,KAAK,EAAE;4BACL,UAAU,EAAE,6BAA6B,UAAU,CACjD,GAAG,EACH,GAAG,EACH,CAAC,CACF,KAAK,UAAU,CAAC,GAAG,EAAE,GAAG,EAAE,CAAC,CAAC,GAAG;yBACjC;qBACF,CAAC,EACF,CAAC,CAAC,wBAAwB,EAAE;wBAC1B,KAAK,EAAE;4BACL,aAAa,EAAE,MAAM;4BACrB,gBAAgB,EAAE,MAAM;4BACxB,QAAQ,EAAE,UAAU;4BACpB,IAAI,EAAE,GAAG,CAAC,GAAG,GAAG,GAAG;yBACpB;qBACF,CAAC,CACH,CACN,CACF,CAAA;YACH,CAAC,CAAC,CAAA;QACJ,CAAC;KACF,CAAA;AACH,CAAC,CAAC,CAAA","sourcesContent":["// tslint:disable:no-bitwise\r\nimport m from 'mithril'\r\n\r\nimport {\r\n  getColorFormatter,\r\n  HSV,\r\n  hsv2rgb,\r\n  HSVA,\r\n  rgb2hsv,\r\n  RGBA,\r\n} from '../../color-formats'\r\nimport {\r\n  getValue,\r\n  component,\r\n  setValue,\r\n  ComponentModel,\r\n  ValueSource,\r\n  ComponentAttrs,\r\n} from '../../core'\r\nimport {\r\n  call,\r\n  clamp,\r\n  use,\r\n  twuiClass,\r\n  getTouchPoint,\r\n} from '../../core/utils'\r\n\r\n/**\r\n * Color picker component attributes\r\n *\r\n * @public\r\n */\r\nexport type ColorPickerAttrs = ComponentAttrs<ColorPickerModel>\r\n\r\n/**\r\n * Color picker component model\r\n *\r\n * @public\r\n */\r\nexport interface ColorPickerModel<T = unknown, V = number | string | number[]>\r\n  extends ComponentModel,\r\n    ValueSource<T, V> {\r\n  /**\r\n   * The type name of the control\r\n   */\r\n  type: 'color-picker'\r\n  /**\r\n   * If `target` and `property` are not set, then this is used as the control value\r\n   *\r\n   * @remarks\r\n   * The format is determined by the `format` property.\r\n   *\r\n   * It is allowed to omit the '#' character but the '#' will be added on change\r\n   *\r\n   * It is allowed to use single character form per component (#f00 instead of #ff0000)\r\n   * but it will always be written back as #ff0000 on change\r\n   */\r\n  value?: V\r\n  /**\r\n   * The format of the string value. Defaults to 'rgb'\r\n   *\r\n   * @remarks\r\n   * This must be a combination of the letters `r`, `g`, `b` and `a`.\r\n   *\r\n   * A prefix of `#` indicates the input/output is a hex string. e.g. #rgba\r\n   *\r\n   * A prefix of `0x` indicates the input is a number. e.g. 0xrgba\r\n   *\r\n   * A prefix of `[]` indicates the input is an array of numbers. e.g. `[]rgba`\r\n   *\r\n   * If a prefix is missing `#` is assumed\r\n   */\r\n  format?: string\r\n  /**\r\n   * This is called when the control value has been changed.\r\n   */\r\n  onInput?: (model: ColorPickerModel<T, V>, value: unknown) => void\r\n  /**\r\n   * This is called once the control value is committed by the user.\r\n   *\r\n   * @remarks\r\n   * Unlike the `onInput` callback, this is not necessarily called for each value change.\r\n   */\r\n  onChange?: (model: ColorPickerModel<T, V>, value: unknown) => void\r\n}\r\n\r\ncomponent<ColorPickerAttrs>('color-picker', (node) => {\r\n  let hue = 0 // range [0,1]\r\n  let sat = 0 // range [0,1]\r\n  let val = 0 // range [0,1]\r\n  let a = 0 // range [0,1]\r\n\r\n  function getHSVA(s = sat, v = val): HSVA {\r\n    return {\r\n      h: hue * 360,\r\n      s: s,\r\n      v: v,\r\n      a: a,\r\n    }\r\n  }\r\n\r\n  function getRGB(s = sat, v = val) {\r\n    return hsv2rgb(getHSVA(s, v))\r\n  }\r\n\r\n  function getRGBA(s = sat, v = val, alpha = a): RGBA {\r\n    return { ...getRGB(s, v), a: alpha }\r\n  }\r\n\r\n  function setHSV(hsv: HSV) {\r\n    hue = hsv.h / 360\r\n    sat = hsv.s\r\n    val = hsv.v\r\n  }\r\n\r\n  function setHSVA(hsv: HSVA) {\r\n    setHSV(hsv)\r\n    a = hsv.a\r\n  }\r\n\r\n  function getHexRGB(s?: number, v?: number) {\r\n    return getColorFormatter('#rgb').format(getRGBA(s, v))\r\n  }\r\n\r\n  function getHexRGBA(s?: number, v?: number) {\r\n    return getColorFormatter('#rgba').format(getRGBA(s, v))\r\n  }\r\n\r\n  function getCssRGBA(s = sat, v = val, alpha: number = a) {\r\n    return getColorFormatter('rgba()').format(getRGBA(s, v, alpha))\r\n  }\r\n\r\n  function parseInput(value: string | number | number[], format: string) {\r\n    const rgba = getColorFormatter(format || 'rgb').parse(value)\r\n    setHSVA({\r\n      ...rgb2hsv(rgba),\r\n      a: rgba.a,\r\n    })\r\n  }\r\n\r\n  function formatOutput(format: string) {\r\n    return getColorFormatter(format).format(getRGBA())\r\n  }\r\n\r\n  function triggerInput() {\r\n    use(node.attrs.data, (data) => {\r\n      const value = formatOutput(data.format)\r\n      const written = setValue(data, value)\r\n      call(data.onInput, data, written)\r\n    })\r\n  }\r\n\r\n  function triggerChange() {\r\n    use(node.attrs.data, (data) => {\r\n      const value = formatOutput(data.format)\r\n      const written = setValue(data, value)\r\n      call(data.onChange, data, written)\r\n    })\r\n  }\r\n\r\n  function hasAlpha() {\r\n    return use(node.attrs.data, (data) => {\r\n      return data.format && data.format.match(/a/i)\r\n    })\r\n  }\r\n\r\n  //\r\n  // manual input\r\n  //\r\n\r\n  function inputR(e: Event) {\r\n    input(e, 'r')\r\n  }\r\n\r\n  function inputG(e: Event) {\r\n    input(e, 'g')\r\n  }\r\n\r\n  function inputB(e: Event) {\r\n    input(e, 'b')\r\n  }\r\n\r\n  function input(e: Event, field: keyof RGBA) {\r\n    const color = getRGBA()\r\n    color[field] = parseInt((e.target as HTMLInputElement).value, 10) / 255\r\n    setHSV(rgb2hsv(color))\r\n    triggerInput()\r\n    triggerChange()\r\n  }\r\n\r\n  function inputHex(e: Event) {\r\n    parseInput(\r\n      (e.target as HTMLInputElement).value,\r\n      hasAlpha() ? 'rgba' : 'rgb',\r\n    )\r\n    triggerInput()\r\n    triggerChange()\r\n  }\r\n\r\n  //\r\n  // drag input\r\n  //\r\n\r\n  let target: HTMLElement\r\n  let kind: 'sv' | 'h' | 'a'\r\n  function beginPickSV(e: MouseEvent) {\r\n    kind = 'sv'\r\n    enableDrag(e.target as HTMLElement)\r\n    onMouseMove(e)\r\n  }\r\n\r\n  function beginPickH(e: MouseEvent) {\r\n    kind = 'h'\r\n    enableDrag(e.target as HTMLElement)\r\n    onMouseMove(e)\r\n  }\r\n\r\n  function beginPickA(e: MouseEvent) {\r\n    kind = 'a'\r\n    enableDrag(e.target as HTMLElement)\r\n    onMouseMove(e)\r\n  }\r\n\r\n  function enableDrag(el: HTMLElement) {\r\n    disableDrag()\r\n    target = el\r\n    const options = { passive: false }\r\n    document.addEventListener('mousemove', onMouseMove, options)\r\n    document.addEventListener('mouseup', onMouseUp, options)\r\n    document.addEventListener('touchmove', onMouseMove, options)\r\n    document.addEventListener('touchend', onMouseUp, options)\r\n    document.addEventListener('touchcancel', onMouseUp, options)\r\n  }\r\n\r\n  function disableDrag() {\r\n    document.removeEventListener('mousemove', onMouseMove)\r\n    document.removeEventListener('mouseup', onMouseUp)\r\n    document.removeEventListener('touchmove', onMouseMove)\r\n    document.removeEventListener('touchend', onMouseUp)\r\n    document.removeEventListener('touchcancel', onMouseUp)\r\n  }\r\n\r\n  function onMouseMove(e: MouseEvent) {\r\n    if (!target) {\r\n      return\r\n    }\r\n    e.preventDefault()\r\n\r\n    const rect = target.getBoundingClientRect()\r\n    const tx = window.pageXOffset || document.documentElement.scrollLeft\r\n    const ty = window.pageYOffset || document.documentElement.scrollTop\r\n    const cw = target.clientWidth\r\n    const ch = target.clientHeight\r\n    let [cx, cy] = getTouchPoint(e)\r\n    cx = clamp((cx - tx - rect.left) / cw, 0, 1)\r\n    cy = clamp((cy - ty - rect.top) / ch, 0, 1)\r\n\r\n    if (kind === 'sv') {\r\n      sat = cx\r\n      val = 1 - cy\r\n    }\r\n    if (kind === 'h') {\r\n      hue = 1 - cx\r\n    }\r\n    if (kind === 'a') {\r\n      a = cx\r\n    }\r\n\r\n    triggerInput()\r\n    m.redraw()\r\n  }\r\n\r\n  function onMouseUp() {\r\n    if (target != null) {\r\n      target = null\r\n      disableDrag()\r\n      triggerChange()\r\n    }\r\n  }\r\n\r\n  return {\r\n    onremove: () => {\r\n      disableDrag()\r\n    },\r\n    oninit: () => {\r\n      use(node.attrs.data, (data) => {\r\n        parseInput(getValue(data), data.format)\r\n      })\r\n    },\r\n    view: () => {\r\n      return use(node.attrs.data, (data) => {\r\n        const rgba = getRGBA()\r\n        return m(\r\n          'div',\r\n          {\r\n            class: twuiClass(data.type),\r\n          },\r\n          m(\r\n            '.color-picker-inputs',\r\n            m(\"input.input-hex[type='text']\", {\r\n              value: hasAlpha() ? getHexRGBA() : getHexRGB(),\r\n              onchange: inputHex,\r\n            }),\r\n            m(\"input.input-r[type='number']\", {\r\n              min: 0,\r\n              max: 255,\r\n              step: 1,\r\n              value: Math.round(rgba.r * 255),\r\n              onchange: inputR,\r\n            }),\r\n            m(\"input.input-g[type='number']\", {\r\n              min: 0,\r\n              max: 255,\r\n              step: 1,\r\n              value: Math.round(rgba.g * 255),\r\n              onchange: inputG,\r\n            }),\r\n            m(\"input.input-b[type='number']\", {\r\n              min: 0,\r\n              max: 255,\r\n              step: 1,\r\n              value: Math.round(rgba.b * 255),\r\n              onchange: inputB,\r\n            }),\r\n          ),\r\n          m(\r\n            '.color-picker-panel',\r\n            m(\r\n              '.color-picker-sv',\r\n              {\r\n                tabindex: 0,\r\n                onmousedown: beginPickSV,\r\n                ontouchstart: beginPickSV,\r\n                style: {\r\n                  'background-color': `${getCssRGBA(1, 1, 1)}`,\r\n                  'user-select': 'none',\r\n                },\r\n              },\r\n              m('.color-picker-sv-bg', {\r\n                style: {\r\n                  background:\r\n                    'linear-gradient(to right,rgba(255,255,255,1),rgba(255,255,255,0))',\r\n                  'user-select': 'none',\r\n                  'pointer-events': 'none',\r\n                },\r\n              }),\r\n              m('.color-picker-sv-bg', {\r\n                style: {\r\n                  background:\r\n                    'linear-gradient(to top,rgba(0,0,0,1),rgba(0,0,0,0))',\r\n                  'user-select': 'none',\r\n                  'pointer-events': 'none',\r\n                },\r\n              }),\r\n              m('.color-picker-sv-cursor', {\r\n                style: {\r\n                  'user-select': 'none',\r\n                  'pointer-events': 'none',\r\n                  'background-color': `${getCssRGBA(hue, sat, 1)}`,\r\n                  left: `${sat * 100}%`,\r\n                  top: `${(1 - val) * 100}%`,\r\n                },\r\n              }),\r\n            ),\r\n            m(\r\n              '.color-picker-h',\r\n              {\r\n                tabindex: 0,\r\n                onmousedown: beginPickH,\r\n                ontouchstart: beginPickH,\r\n                style: {\r\n                  'user-select': 'none',\r\n                  background:\r\n                    'linear-gradient(to right, #f00 0, #f0f 17% , #00f 33% , #0ff 50% , #0f0 67% , #ff0 83% , #f00 100%)',\r\n                },\r\n              },\r\n              m('.color-picker-h-cursor', {\r\n                style: {\r\n                  'user-select': 'none',\r\n                  'pointer-events': 'none',\r\n                  'background-color': `${getCssRGBA(1, 1, 1)}`,\r\n                  position: 'absolute',\r\n                  left: `${(1 - hue) * 100}%`,\r\n                },\r\n              }),\r\n            ),\r\n            !hasAlpha()\r\n              ? null\r\n              : m(\r\n                  '.color-picker-a',\r\n                  {\r\n                    tabindex: 0,\r\n                    onmousedown: beginPickA,\r\n                    ontouchstart: beginPickA,\r\n                    style: {\r\n                      'user-select': 'none',\r\n                    },\r\n                  },\r\n                  m('.color-picker-a-bg', {\r\n                    style: {\r\n                      background: `linear-gradient(to right, ${getCssRGBA(\r\n                        sat,\r\n                        val,\r\n                        0,\r\n                      )}, ${getCssRGBA(sat, val, 1)})`,\r\n                    },\r\n                  }),\r\n                  m('.color-picker-a-cursor', {\r\n                    style: {\r\n                      'user-select': 'none',\r\n                      'pointer-events': 'none',\r\n                      position: 'absolute',\r\n                      left: `${a * 100}%`,\r\n                    },\r\n                  }),\r\n                ),\r\n          ),\r\n        )\r\n      })\r\n    },\r\n  }\r\n})\r\n"]}

package/dist/lib/components/controls/color.js

@@ -1,77 +0,0 @@
-import m from 'mithril';
-import { getColorFormatter } from '../../color-formats';
-import { getValue, component, setValue, renderModel, } from '../../core';
-import { call, isArray, isNumber, isObject, isString, padLeft, twuiClass, cssClass, } from '../../core/utils';
-component('color', () => {
-    let data;
-    let opened = false;
-    let value;
-    let rgba;
-    const rgbaFromatter = getColorFormatter('rgba()');
-    function fetchState(node) {
-        data = node.attrs.data;
-        value = getValue(data);
-        rgba = rgbaFromatter.format(getColorFormatter(data.format).parse(value));
-    }
-    function toggle() {
-        opened = !opened;
-    }
-    function onPickerInput(p, v) {
-        const written = setValue(data, v);
-        call(data.onInput, data, written);
-    }
-    function onPickerChange(p, v) {
-        const written = setValue(data, v);
-        call(data.onChange, data, written);
-    }
-    function getText() {
-        if (isString(value)) {
-            return value;
-        }
-        if (isNumber(value)) {
-            return '0x' + padLeft(value.toString(16), 8, '0');
-        }
-        if (isArray(value)) {
-            return value
-                .map((it) => (it < 1 && it > 0 ? it.toFixed(2) : it))
-                .join(' , ');
-        }
-        if (isObject(value)) {
-            return Object.keys(value)
-                .map((k) => {
-                const it = value[k];
-                return `${k}: ${it < 1 && it > 0 ? it.toFixed(2) : it}`;
-            })
-                .join(' ');
-        }
-        if (value == null) {
-            return 'null';
-        }
-        return '?';
-    }
-    return {
-        oninit: (node) => {
-            fetchState(node);
-        },
-        onupdate: (node) => {
-            fetchState(node);
-        },
-        view: () => m('div', {
-            class: cssClass({
-                [twuiClass(data.type)]: true,
-                [twuiClass(data.type + '-open')]: opened,
-            }),
-        }, m("button[type='button']", {
-            style: { 'background-color': rgba },
-            onclick: toggle,
-        }, getText() || '?'), renderModel({
-            type: 'color-picker',
-            value: value,
-            format: data.format,
-            onInput: onPickerInput,
-            onChange: onPickerChange,
-            hidden: !opened,
-        })),
-    };
-});
-//# sourceMappingURL=color.js.map

package/dist/lib/components/controls/color.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"color.js","sourceRoot":"","sources":["../../../../src/lib/components/controls/color.ts"],"names":[],"mappings":"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","sourcesContent":["import m, { Vnode } from 'mithril'\r\n\r\nimport { getColorFormatter } from '../../color-formats'\r\nimport { ColorPickerModel } from './color-picker'\r\nimport {\r\n  getValue,\r\n  component,\r\n  setValue,\r\n  renderModel,\r\n  ComponentModel,\r\n  ValueSource,\r\n  ComponentAttrs,\r\n} from '../../core'\r\nimport {\r\n  call,\r\n  isArray,\r\n  isNumber,\r\n  isObject,\r\n  isString,\r\n  padLeft,\r\n  use,\r\n  twuiClass,\r\n  cssClass,\r\n  viewFn,\r\n} from '../../core/utils'\r\n\r\n/**\r\n * Color component attributes\r\n * @public\r\n */\r\nexport type ColorAttrs = ComponentAttrs<ColorModel>\r\n\r\n/**\r\n * Color component model\r\n * @public\r\n */\r\nexport interface ColorModel<T = unknown, V = number | string | number[]>\r\n  extends ComponentModel,\r\n    ValueSource<T, V> {\r\n  /**\r\n   * The type name of the control\r\n   */\r\n  type: 'color'\r\n  /**\r\n   * The color value as a string.\r\n   *\r\n   * @remarks\r\n   * The format is determined by the `format` property.\r\n   *\r\n   * It is allowed to omit the '#' character but the '#' will be added on change\r\n   *\r\n   * It is allowed to use single character form per component (#f00 instead of #ff0000)\r\n   * but it will always be written back as #ff0000 on change\r\n   */\r\n  value?: V\r\n  /**\r\n   * The format of the string value. Defaults to 'rgb'\r\n   *\r\n   * @remarks\r\n   * This must be a combination of the letters r, g, b and a\r\n   * and it must match the input value.\r\n   */\r\n  format?: string\r\n  /**\r\n   * Whether each component is normalized to range [0:1]\r\n   */\r\n  normalized?: boolean\r\n  /**\r\n   * This is called when the control value has been changed.\r\n   */\r\n  onInput?: (model: ColorModel<T, V>, value: unknown) => void\r\n  /**\r\n   * This is called once the control value is committed by the user.\r\n   *\r\n   * @remarks\r\n   * Unlike the `onInput` callback, this is not necessarily called for each value change.\r\n   */\r\n  onChange?: (model: ColorModel<T, V>, value: unknown) => void\r\n}\r\n\r\ncomponent<ColorAttrs>('color', () => {\r\n  let data: ColorModel\r\n  let opened = false\r\n  let value: number | string | number[]\r\n  let rgba: string\r\n\r\n  const rgbaFromatter = getColorFormatter('rgba()')\r\n\r\n  function fetchState(node: Vnode<ColorAttrs>) {\r\n    data = node.attrs.data\r\n    value = getValue(data)\r\n    rgba = rgbaFromatter.format(getColorFormatter(data.format).parse(value))\r\n  }\r\n\r\n  function toggle() {\r\n    opened = !opened\r\n  }\r\n  function onPickerInput(p: ColorPickerModel, v: any) {\r\n    const written = setValue(data, v)\r\n    call(data.onInput, data, written)\r\n  }\r\n\r\n  function onPickerChange(p: ColorPickerModel, v: any) {\r\n    const written = setValue(data, v)\r\n    call(data.onChange, data, written)\r\n  }\r\n\r\n  function getText() {\r\n    if (isString(value)) {\r\n      return value\r\n    }\r\n    if (isNumber(value)) {\r\n      return '0x' + padLeft(value.toString(16), 8, '0')\r\n    }\r\n    if (isArray(value)) {\r\n      return value\r\n        .map((it: number) => (it < 1 && it > 0 ? it.toFixed(2) : it))\r\n        .join(' , ')\r\n    }\r\n    if (isObject(value)) {\r\n      return Object.keys(value)\r\n        .map((k) => {\r\n          const it = (value as any)[k]\r\n          return `${k}: ${it < 1 && it > 0 ? it.toFixed(2) : it}`\r\n        })\r\n        .join(' ')\r\n    }\r\n    if (value == null) {\r\n      return 'null'\r\n    }\r\n    return '?'\r\n  }\r\n\r\n  return {\r\n    oninit: (node) => {\r\n      fetchState(node)\r\n    },\r\n    onupdate: (node) => {\r\n      fetchState(node)\r\n    },\r\n    view: () =>\r\n      m(\r\n        'div',\r\n        {\r\n          class: cssClass({\r\n            [twuiClass(data.type)]: true,\r\n            [twuiClass(data.type + '-open')]: opened,\r\n          }),\r\n        },\r\n        m(\r\n          \"button[type='button']\",\r\n          {\r\n            style: { 'background-color': rgba },\r\n            onclick: toggle,\r\n          },\r\n          getText() || '?',\r\n        ),\r\n        renderModel<ColorPickerModel>({\r\n          type: 'color-picker',\r\n          value: value,\r\n          format: data.format,\r\n          onInput: onPickerInput,\r\n          onChange: onPickerChange,\r\n          hidden: !opened,\r\n        }),\r\n      ),\r\n  }\r\n})\r\n"]}

package/dist/lib/components/controls/index.js

@@ -1,11 +0,0 @@
-export * from './angle';
-export * from './checkbox';
-export * from './color-picker';
-export * from './color';
-export * from './number';
-export * from './point';
-export * from './position';
-export * from './select';
-export * from './spherical';
-export * from './text';
-//# sourceMappingURL=index.js.map

package/dist/lib/components/controls/index.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/lib/components/controls/index.ts"],"names":[],"mappings":"AAAA,cAAc,SAAS,CAAA;AACvB,cAAc,YAAY,CAAA;AAC1B,cAAc,gBAAgB,CAAA;AAC9B,cAAc,SAAS,CAAA;AACvB,cAAc,UAAU,CAAA;AACxB,cAAc,SAAS,CAAA;AACvB,cAAc,YAAY,CAAA;AAC1B,cAAc,UAAU,CAAA;AACxB,cAAc,aAAa,CAAA;AAC3B,cAAc,QAAQ,CAAA","sourcesContent":["export * from './angle'\r\nexport * from './checkbox'\r\nexport * from './color-picker'\r\nexport * from './color'\r\nexport * from './number'\r\nexport * from './point'\r\nexport * from './position'\r\nexport * from './select'\r\nexport * from './spherical'\r\nexport * from './text'\r\n"]}

package/dist/lib/components/controls/number.d.ts

@@ -1,48 +0,0 @@
-import { ComponentModel, ComponentAttrs, ValueSource } from '../../core';
-/**
- * Number component attributes
- * @public
- */
-export type NumberAttrs = ComponentAttrs<NumberModel>;
-/**
- * Number component model
- * @public
- */
-export interface NumberModel<T = unknown> extends ComponentModel, ValueSource<T, number> {
-    /**
-     * The type name of the control
-     */
-    type: 'number' | 'slider';
-    /**
-     * The placeholder text
-     */
-    placeholder?: string;
-    /**
-     * The min value
-     */
-    min?: number;
-    /**
-     * The max value
-     */
-    max?: number;
-    /**
-     * The step value
-     */
-    step?: number;
-    /**
-     * This is called when the control value has been changed.
-     */
-    onInput?: (model: NumberModel<T>, value: unknown) => void;
-    /**
-     * This is called once the control value is committed by the user.
-     *
-     * @remarks
-     * Unlike the `onInput` callback, this is not necessarily called for each value change.
-     */
-    onChange?: (model: NumberModel<T>, value: unknown) => void;
-    /**
-     * Disables the control input
-     */
-    disabled?: boolean;
-}
-//# sourceMappingURL=number.d.ts.map

package/dist/lib/components/controls/number.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"number.d.ts","sourceRoot":"","sources":["../../../../src/lib/components/controls/number.ts"],"names":[],"mappings":"AAEA,OAAO,EAIL,cAAc,EACd,cAAc,EACd,WAAW,EACZ,MAAM,YAAY,CAAA;AAGnB;;;GAGG;AACH,MAAM,MAAM,WAAW,GAAG,cAAc,CAAC,WAAW,CAAC,CAAA;AAErD;;;GAGG;AACH,MAAM,WAAW,WAAW,CAAC,CAAC,GAAG,OAAO,CAAE,SAAQ,cAAc,EAAE,WAAW,CAAC,CAAC,EAAE,MAAM,CAAC;IACtF;;OAEG;IACH,IAAI,EAAE,QAAQ,GAAG,QAAQ,CAAA;IACzB;;OAEG;IACH,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB;;OAEG;IACH,GAAG,CAAC,EAAE,MAAM,CAAA;IACZ;;OAEG;IACH,GAAG,CAAC,EAAE,MAAM,CAAA;IACZ;;OAEG;IACH,IAAI,CAAC,EAAE,MAAM,CAAA;IACb;;OAEG;IACH,OAAO,CAAC,EAAE,CAAC,KAAK,EAAE,WAAW,CAAC,CAAC,CAAC,EAAE,KAAK,EAAE,OAAO,KAAK,IAAI,CAAA;IACzD;;;;;OAKG;IACH,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,WAAW,CAAC,CAAC,CAAC,EAAE,KAAK,EAAE,OAAO,KAAK,IAAI,CAAA;IAC1D;;OAEG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAA;CACnB"}

package/dist/lib/components/controls/number.js

@@ -1,142 +0,0 @@
-import m from 'mithril';
-import { getValue, component, setValue, } from '../../core';
-import { call, clamp, cssClass, twuiClass, dragUtil, getTouchInTarget } from '../../core/utils';
-const NumberComponent = () => {
-    let type;
-    let min;
-    let max;
-    let step;
-    let disabled;
-    let placeholder;
-    let isSlider;
-    let value;
-    let percent;
-    let focused;
-    let vnode;
-    // let data: NumberModel
-    function fetchState(node) {
-        vnode = node;
-        const data = node.attrs.data;
-        type = data.type;
-        isSlider = data.type === 'slider';
-        min = isSlider && data.min == null ? 0 : data.min;
-        max = isSlider && data.max == null ? 1 : data.max;
-        step = data.step;
-        value = getValue(data);
-        disabled = data.disabled;
-        percent = isSlider ? ((value - min) / (max - min)) * 100 : 0;
-    }
-    function setModelValue(e, v) {
-        v = value = clamp(isNaN(v) ? null : v, min, max);
-        const data = vnode.attrs.data;
-        const written = setValue(data, v);
-        call(e === 'input' ? data.onInput : data.onChange, data, written);
-        m.redraw();
-    }
-    function onInput(e) {
-        const el = e.target;
-        setModelValue('input', parseFloat(el.value));
-    }
-    function onChange(e) {
-        const el = e.target;
-        setModelValue('change', parseFloat(el.value));
-    }
-    function limit(v) {
-        v = clamp(v, min, max);
-        if (step != null) {
-            v = Math.round(v / step) * step;
-        }
-        return parseFloat(v.toFixed(5));
-    }
-    let drag = dragUtil({
-        onStart: (e) => {
-            drag.onMove(e);
-        },
-        onMove: (e) => {
-            e.preventDefault();
-            const s = getTouchInTarget(e, drag.target).normalizedX;
-            setModelValue('input', limit(min + s * (max - min)));
-        },
-        onEnd: () => {
-            setModelValue('change', value);
-            drag.deactivate();
-        },
-    });
-    function onDragStart(e) {
-        if (!disabled) {
-            drag.activate(e);
-        }
-    }
-    function onKeydown(e) {
-        const code = e.key || e.keyCode;
-        const dir = code === 'ArrowLeft' ? -1 : code === 'ArrowRight' ? 1 : 0;
-        const add = (step || 1) * dir;
-        if (add) {
-            setModelValue('change', limit((value || 0) + add));
-        }
-    }
-    function onWheel(e) {
-        e.preventDefault();
-        const dir = (e.ctrlKey ? 0.5 : 1) * clamp(e.deltaY, -1, 1);
-        const add = (step || 0.2) * dir;
-        if (add) {
-            setModelValue('change', limit((value || 0) - add));
-        }
-    }
-    function onFocus() {
-        focused = true;
-    }
-    function onBlur() {
-        focused = false;
-    }
-    function slider() {
-        return m('.twui-progress', Object.assign({ style: 'user-select: none;', class: cssClass({
-                disabled: !!disabled,
-            }) }, (disabled
-            ? {}
-            : {
-                tabindex: 0,
-                onmousedown: onDragStart,
-                ontouchstart: onDragStart,
-                onkeydown: onKeydown,
-                onwheel: onWheel,
-            })), m('.twui-progress-bar', {
-            style: {
-                width: `${percent}%`,
-                'pointer-events': 'none',
-                'user-select': 'none',
-            },
-        }));
-    }
-    return {
-        onremove: () => {
-            drag.deactivate();
-        },
-        oninit: (node) => {
-            fetchState(node);
-        },
-        onupdate: (node) => {
-            fetchState(node);
-        },
-        view: () => {
-            return m('div', {
-                class: twuiClass(type),
-            }, isSlider ? slider() : null, m("input[type='number']", {
-                min: min,
-                max: max,
-                step: step,
-                value: value,
-                oninput: onInput,
-                onchange: onChange,
-                onwheel: onWheel,
-                onfocus: onFocus,
-                onblur: onBlur,
-                placeholder: placeholder,
-                disabled: disabled,
-            }));
-        },
-    };
-};
-component('number', NumberComponent);
-component('slider', NumberComponent);
-//# sourceMappingURL=number.js.map

package/dist/lib/components/controls/number.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"number.js","sourceRoot":"","sources":["../../../../src/lib/components/controls/number.ts"],"names":[],"mappings":"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","sourcesContent":["import m, { Child, ClosureComponent } from 'mithril'\r\n\r\nimport {\r\n  getValue,\r\n  component,\r\n  setValue,\r\n  ComponentModel,\r\n  ComponentAttrs,\r\n  ValueSource,\r\n} from '../../core'\r\nimport { call, clamp, cssClass, twuiClass, dragUtil, getTouchInTarget } from '../../core/utils'\r\n\r\n/**\r\n * Number component attributes\r\n * @public\r\n */\r\nexport type NumberAttrs = ComponentAttrs<NumberModel>\r\n\r\n/**\r\n * Number component model\r\n * @public\r\n */\r\nexport interface NumberModel<T = unknown> extends ComponentModel, ValueSource<T, number> {\r\n  /**\r\n   * The type name of the control\r\n   */\r\n  type: 'number' | 'slider'\r\n  /**\r\n   * The placeholder text\r\n   */\r\n  placeholder?: string\r\n  /**\r\n   * The min value\r\n   */\r\n  min?: number\r\n  /**\r\n   * The max value\r\n   */\r\n  max?: number\r\n  /**\r\n   * The step value\r\n   */\r\n  step?: number\r\n  /**\r\n   * This is called when the control value has been changed.\r\n   */\r\n  onInput?: (model: NumberModel<T>, value: unknown) => void\r\n  /**\r\n   * This is called once the control value is committed by the user.\r\n   *\r\n   * @remarks\r\n   * Unlike the `onInput` callback, this is not necessarily called for each value change.\r\n   */\r\n  onChange?: (model: NumberModel<T>, value: unknown) => void\r\n  /**\r\n   * Disables the control input\r\n   */\r\n  disabled?: boolean\r\n}\r\n\r\nconst NumberComponent: ClosureComponent<NumberAttrs> = () => {\r\n  let type: 'number' | 'slider'\r\n  let min: number\r\n  let max: number\r\n  let step: number\r\n  let disabled: boolean\r\n  let placeholder: string\r\n  let isSlider: boolean\r\n  let value: number\r\n  let percent: number\r\n  let focused: boolean\r\n  let vnode: m.Vnode<NumberAttrs>\r\n  // let data: NumberModel\r\n\r\n  function fetchState(node: m.Vnode<NumberAttrs>) {\r\n    vnode = node\r\n    const data = node.attrs.data\r\n    type = data.type\r\n    isSlider = data.type === 'slider'\r\n    min = isSlider && data.min == null ? 0 : data.min\r\n    max = isSlider && data.max == null ? 1 : data.max\r\n    step = data.step\r\n    value = getValue<number>(data)\r\n    disabled = data.disabled\r\n    percent = isSlider ? ((value - min) / (max - min)) * 100 : 0\r\n  }\r\n\r\n  function setModelValue(e: 'input' | 'change', v: number) {\r\n    v = value = clamp(isNaN(v) ? null : v, min, max)\r\n    const data = vnode.attrs.data\r\n    const written = setValue(data, v)\r\n    call(e === 'input' ? data.onInput : data.onChange, data, written)\r\n    m.redraw()\r\n  }\r\n\r\n  function onInput(e: Event) {\r\n    const el = e.target as HTMLInputElement\r\n    setModelValue('input', parseFloat(el.value))\r\n  }\r\n\r\n  function onChange(e: Event) {\r\n    const el = e.target as HTMLInputElement\r\n    setModelValue('change', parseFloat(el.value))\r\n  }\r\n\r\n  function limit(v: number) {\r\n    v = clamp(v, min, max)\r\n    if (step != null) {\r\n      v = Math.round(v / step) * step\r\n    }\r\n    return parseFloat(v.toFixed(5))\r\n  }\r\n\r\n  let drag = dragUtil({\r\n    onStart: (e) => {\r\n      drag.onMove(e)\r\n    },\r\n    onMove: (e) => {\r\n      e.preventDefault()\r\n      const s = getTouchInTarget(e, drag.target).normalizedX\r\n      setModelValue('input', limit(min + s * (max - min)))\r\n    },\r\n    onEnd: () => {\r\n      setModelValue('change', value)\r\n      drag.deactivate()\r\n    },\r\n  })\r\n\r\n  function onDragStart(e: MouseEvent) {\r\n    if (!disabled) {\r\n      drag.activate(e)\r\n    }\r\n  }\r\n\r\n  function onKeydown(e: KeyboardEvent) {\r\n    const code = e.key || e.keyCode\r\n    const dir = code === 'ArrowLeft' ? -1 : code === 'ArrowRight' ? 1 : 0\r\n    const add = (step || 1) * dir\r\n    if (add) {\r\n      setModelValue('change', limit((value || 0) + add))\r\n    }\r\n  }\r\n\r\n  function onWheel(e: WheelEvent) {\r\n    e.preventDefault()\r\n    const dir = (e.ctrlKey ? 0.5 : 1) * clamp(e.deltaY, -1, 1)\r\n    const add = (step || 0.2) * dir\r\n    if (add) {\r\n      setModelValue('change', limit((value || 0) - add))\r\n    }\r\n  }\r\n\r\n  function onFocus() {\r\n    focused = true\r\n  }\r\n\r\n  function onBlur() {\r\n    focused = false\r\n  }\r\n\r\n  function slider(): Child {\r\n    return m(\r\n      '.twui-progress',\r\n      {\r\n        style: 'user-select: none;',\r\n        class: cssClass({\r\n          disabled: !!disabled,\r\n        }),\r\n        ...(disabled\r\n          ? {}\r\n          : {\r\n              tabindex: 0,\r\n              onmousedown: onDragStart,\r\n              ontouchstart: onDragStart,\r\n              onkeydown: onKeydown,\r\n              onwheel: onWheel,\r\n            }),\r\n      },\r\n      m('.twui-progress-bar', {\r\n        style: {\r\n          width: `${percent}%`,\r\n          'pointer-events': 'none',\r\n          'user-select': 'none',\r\n        },\r\n      }),\r\n    )\r\n  }\r\n\r\n  return {\r\n    onremove: () => {\r\n      drag.deactivate()\r\n    },\r\n    oninit: (node) => {\r\n      fetchState(node)\r\n    },\r\n    onupdate: (node) => {\r\n      fetchState(node)\r\n    },\r\n    view: () => {\r\n      return m(\r\n        'div',\r\n        {\r\n          class: twuiClass(type),\r\n        },\r\n        isSlider ? slider() : null,\r\n        m(\"input[type='number']\", {\r\n          min: min,\r\n          max: max,\r\n          step: step,\r\n          value: value,\r\n          oninput: onInput,\r\n          onchange: onChange,\r\n          onwheel: onWheel,\r\n          onfocus: onFocus,\r\n          onblur: onBlur,\r\n          placeholder: placeholder,\r\n          disabled: disabled,\r\n        }),\r\n      )\r\n    },\r\n  }\r\n}\r\n\r\ncomponent('number', NumberComponent)\r\ncomponent('slider', NumberComponent)\r\n"]}