tweak-ui 0.4.2 → 0.5.0

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

@@ -0,0 +1,267 @@
+// 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

@@ -0,0 +1 @@
+{"version":3,"file":"color-picker.js","sourceRoot":"","sources":["../../../../src/lib/components/controls/color-picker.ts"],"names":[],"mappings":"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","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.d.ts

@@ -1,52 +1,52 @@
-import { ComponentModel, ValueSource, ComponentAttrs } from '../../core';
-/**
- * Color component attributes
- * @public
- */
-export declare type ColorAttrs = ComponentAttrs<ColorModel>;
-/**
- * Color component model
- * @public
- */
-export interface ColorModel<T = unknown, V = number | string | number[]> extends ComponentModel, ValueSource<T, V> {
-    /**
-     * The type name of the control
-     */
-    type: 'color';
-    /**
-     * The color value as a string.
-     *
-     * @remarks
-     * The format is determined by the `format` property.
-     *
-     * It is allowed to omit the '#' character but the '#' will be added on change
-     *
-     * It is allowed to use single character form per component (#f00 instead of #ff0000)
-     * but it will always be written back as #ff0000 on change
-     */
-    value?: V;
-    /**
-     * The format of the string value. Defaults to 'rgb'
-     *
-     * @remarks
-     * This must be a combination of the letters r, g, b and a
-     * and it must match the input value.
-     */
-    format?: string;
-    /**
-     * Whether each component is normalized to range [0:1]
-     */
-    normalized?: boolean;
-    /**
-     * This is called when the control value has been changed.
-     */
-    onInput?: (model: ColorModel<T, V>, 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: ColorModel<T, V>, value: unknown) => void;
-}
+import { ComponentModel, ValueSource, ComponentAttrs } from '../../core';
+/**
+ * Color component attributes
+ * @public
+ */
+export type ColorAttrs = ComponentAttrs<ColorModel>;
+/**
+ * Color component model
+ * @public
+ */
+export interface ColorModel<T = unknown, V = number | string | number[]> extends ComponentModel, ValueSource<T, V> {
+    /**
+     * The type name of the control
+     */
+    type: 'color';
+    /**
+     * The color value as a string.
+     *
+     * @remarks
+     * The format is determined by the `format` property.
+     *
+     * It is allowed to omit the '#' character but the '#' will be added on change
+     *
+     * It is allowed to use single character form per component (#f00 instead of #ff0000)
+     * but it will always be written back as #ff0000 on change
+     */
+    value?: V;
+    /**
+     * The format of the string value. Defaults to 'rgb'
+     *
+     * @remarks
+     * This must be a combination of the letters r, g, b and a
+     * and it must match the input value.
+     */
+    format?: string;
+    /**
+     * Whether each component is normalized to range [0:1]
+     */
+    normalized?: boolean;
+    /**
+     * This is called when the control value has been changed.
+     */
+    onInput?: (model: ColorModel<T, V>, 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: ColorModel<T, V>, value: unknown) => void;
+}
 //# sourceMappingURL=color.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"color.d.ts","sourceRoot":"","sources":["../../../../src/lib/components/controls/color.ts"],"names":[],"mappings":"AAIA,OAAO,EAKL,cAAc,EACd,WAAW,EACX,cAAc,EACf,MAAM,YAAY,CAAA;AAcnB;;;GAGG;AACH,oBAAY,UAAU,GAAG,cAAc,CAAC,UAAU,CAAC,CAAA;AAEnD;;;GAGG;AACH,MAAM,WAAW,UAAU,CAAC,CAAC,GAAG,OAAO,EAAE,CAAC,GAAG,MAAM,GAAG,MAAM,GAAG,MAAM,EAAE,CACrE,SAAQ,cAAc,EACpB,WAAW,CAAC,CAAC,EAAE,CAAC,CAAC;IACnB;;OAEG;IACH,IAAI,EAAE,OAAO,CAAA;IACb;;;;;;;;;;OAUG;IACH,KAAK,CAAC,EAAE,CAAC,CAAA;IACT;;;;;;OAMG;IACH,MAAM,CAAC,EAAE,MAAM,CAAA;IACf;;OAEG;IACH,UAAU,CAAC,EAAE,OAAO,CAAA;IACpB;;OAEG;IACH,OAAO,CAAC,EAAE,CAAC,KAAK,EAAE,UAAU,CAAC,CAAC,EAAE,CAAC,CAAC,EAAE,KAAK,EAAE,OAAO,KAAK,IAAI,CAAA;IAC3D;;;;;OAKG;IACH,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,UAAU,CAAC,CAAC,EAAE,CAAC,CAAC,EAAE,KAAK,EAAE,OAAO,KAAK,IAAI,CAAA;CAC7D"}
+{"version":3,"file":"color.d.ts","sourceRoot":"","sources":["../../../../src/lib/components/controls/color.ts"],"names":[],"mappings":"AAIA,OAAO,EAKL,cAAc,EACd,WAAW,EACX,cAAc,EACf,MAAM,YAAY,CAAA;AAcnB;;;GAGG;AACH,MAAM,MAAM,UAAU,GAAG,cAAc,CAAC,UAAU,CAAC,CAAA;AAEnD;;;GAGG;AACH,MAAM,WAAW,UAAU,CAAC,CAAC,GAAG,OAAO,EAAE,CAAC,GAAG,MAAM,GAAG,MAAM,GAAG,MAAM,EAAE,CACrE,SAAQ,cAAc,EACpB,WAAW,CAAC,CAAC,EAAE,CAAC,CAAC;IACnB;;OAEG;IACH,IAAI,EAAE,OAAO,CAAA;IACb;;;;;;;;;;OAUG;IACH,KAAK,CAAC,EAAE,CAAC,CAAA;IACT;;;;;;OAMG;IACH,MAAM,CAAC,EAAE,MAAM,CAAA;IACf;;OAEG;IACH,UAAU,CAAC,EAAE,OAAO,CAAA;IACpB;;OAEG;IACH,OAAO,CAAC,EAAE,CAAC,KAAK,EAAE,UAAU,CAAC,CAAC,EAAE,CAAC,CAAC,EAAE,KAAK,EAAE,OAAO,KAAK,IAAI,CAAA;IAC3D;;;;;OAKG;IACH,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,UAAU,CAAC,CAAC,EAAE,CAAC,CAAC,EAAE,KAAK,EAAE,OAAO,KAAK,IAAI,CAAA;CAC7D"}

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

@@ -0,0 +1,77 @@
+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

@@ -0,0 +1 @@
+{"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.d.ts

@@ -1,11 +1,11 @@
-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';
+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.d.ts.map

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

@@ -0,0 +1,11 @@
+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

@@ -0,0 +1 @@
+{"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 +1,48 @@
-import { ComponentModel, ComponentAttrs, ValueSource } from '../../core';
-/**
- * Number component attributes
- * @public
- */
-export declare 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;
-}
+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