tweak-ui 0.5.0 → 0.8.0

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

@@ -1,137 +0,0 @@
-import m from 'mithril';
-import { component, getValue } from '../../core';
-import { call, clamp, twuiClass, getTouchPoint, dragUtil } from '../../core/utils';
-const TYPE = 'point';
-const DEFAULT_RANGE = [0, 1];
-const DEFAULT_KEYS = ['x', 'y'];
-component(TYPE, (vnode) => {
-    let kx;
-    let ky;
-    let xRange = DEFAULT_RANGE;
-    let yRange = DEFAULT_RANGE;
-    let vx = 0;
-    let vy = 0;
-    let x = 0;
-    let y = 0;
-    let rx;
-    let ry;
-    let snap;
-    function fetchValue(node) {
-        var _a;
-        const data = node.attrs.data;
-        const keys = data.keys || DEFAULT_KEYS;
-        kx = keys[0];
-        ky = keys[1];
-        const value = (_a = getValue(data)) !== null && _a !== void 0 ? _a : {
-            [kx]: vx,
-            [ky]: vy,
-        };
-        snap = data.snap;
-        vx = value[kx] || 0;
-        vy = value[ky] || 0;
-        xRange = data.xRange || xRange;
-        yRange = data.yRange || yRange;
-        x = (vx - xRange[0]) / (xRange[1] - xRange[0]);
-        y = (vy - yRange[0]) / (yRange[1] - yRange[0]);
-        const reset = data.reset;
-        if (reset) {
-            rx = (reset[0] - xRange[0]) / (xRange[1] - xRange[0]);
-            ry = (reset[1] - yRange[0]) / (yRange[1] - yRange[0]);
-        }
-    }
-    function updateValue() {
-        vx = xRange[0] + (xRange[1] - xRange[0]) * x;
-        vy = yRange[0] + (yRange[1] - yRange[0]) * y;
-        if (snap > 0) {
-            vx = Math.floor(vx / snap) * snap;
-            vy = Math.floor(vy / snap) * snap;
-            x = (vx - xRange[0]) / (xRange[1] - xRange[0]);
-            y = (vy - yRange[0]) / (yRange[1] - yRange[0]);
-        }
-    }
-    function onChange(type) {
-        var _a;
-        updateValue();
-        const data = vnode.attrs.data;
-        const value = (_a = getValue(data)) !== null && _a !== void 0 ? _a : {
-            [kx]: vx,
-            [ky]: vy,
-        };
-        value[kx] = vx;
-        value[ky] = vy;
-        call(type === 'input' ? data.onInput : data.onChange, data, value);
-    }
-    function onMouseDown(e) {
-        drag.activate(e);
-    }
-    const drag = dragUtil({
-        onMove: (e) => {
-            e.preventDefault();
-            const target = drag.target;
-            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);
-            x = clamp((cx - tx - rect.left) / cw, 0, 1);
-            y = clamp((cy - ty - rect.top) / ch, 0, 1);
-            onChange('input');
-            m.redraw();
-        },
-        onEnd: () => {
-            drag.deactivate();
-            if (rx != null && ry != null) {
-                x = rx;
-                y = ry;
-                onChange('input');
-            }
-            onChange('change');
-            m.redraw();
-        },
-    });
-    return {
-        onremove: drag.deactivate,
-        oninit: fetchValue,
-        onupdate: fetchValue,
-        view: () => m('div', {
-            class: twuiClass(TYPE),
-            tabindex: 0,
-            onmousedown: onMouseDown,
-            ontouchstart: onMouseDown,
-        }, m('.point-x-axis', {
-            style: {
-                'pointer-events': 'none',
-                position: 'absolute',
-                left: 0,
-                right: 0,
-                top: `${y * 100}%`,
-                height: `1px`,
-            },
-        }), m('.point-y-axis', {
-            style: {
-                'pointer-events': 'none',
-                position: 'absolute',
-                left: `${x * 100}%`,
-                top: 0,
-                bottom: 0,
-                width: `1px`,
-            },
-        }), m('.point-cursor', {
-            style: {
-                'pointer-events': 'none',
-                left: `${x * 100}%`,
-                top: `${y * 100}%`,
-                position: 'absolute',
-                width: '11px',
-                height: '11px',
-                'margin-top': '-5px',
-                'margin-left': '-5px',
-                border: '1px solid white',
-                'border-radius': '5px',
-                'box-shadow': '0px 0px 2px 1px rgba(0, 0, 0, 0.75)',
-            },
-        })),
-    };
-});
-//# sourceMappingURL=point.js.map

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

@@ -1 +0,0 @@
-{"version":3,"file":"point.js","sourceRoot":"","sources":["../../../../src/lib/components/controls/point.ts"],"names":[],"mappings":"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","sourcesContent":["import m from 'mithril'\r\n\r\nimport { component, getValue, ComponentModel, ValueSource, ComponentAttrs } from '../../core'\r\nimport { call, clamp, use, twuiClass, viewFn, getTouchPoint, dragUtil } from '../../core/utils'\r\n\r\n/**\r\n * Point component attributes\r\n * @public\r\n */\r\nexport type PointAttrs = ComponentAttrs<PointModel>\r\n\r\n/**\r\n * Point component model\r\n * @public\r\n */\r\nexport interface PointModel<T = unknown> extends ComponentModel, ValueSource<T, any> {\r\n  /**\r\n   * The type name of the control\r\n   */\r\n  type: 'point'\r\n  /**\r\n   * The object field names. Defaults to `['x', 'y']`\r\n   */\r\n  keys?: string[]\r\n  /**\r\n   * X-Axis min and max valuse\r\n   */\r\n  xRange?: [number, number]\r\n  /**\r\n   * Y-Axis min and max valuse\r\n   */\r\n  yRange?: [number, number]\r\n  /**\r\n   * Value to reset to when released\r\n   */\r\n  reset?: [number, number]\r\n  /**\r\n   * Snap to grid value\r\n   */\r\n  snap?: number\r\n  /**\r\n   * This is called when the control value has been changed.\r\n   */\r\n  onInput?: (model: PointModel<T>, value: number) => 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: PointModel<T>, value: number) => void\r\n}\r\n\r\nconst TYPE = 'point'\r\nconst DEFAULT_RANGE = [0, 1]\r\nconst DEFAULT_KEYS = ['x', 'y']\r\ncomponent<PointAttrs>(TYPE, (vnode) => {\r\n  let kx: any\r\n  let ky: any\r\n  let xRange = DEFAULT_RANGE\r\n  let yRange = DEFAULT_RANGE\r\n  let vx = 0\r\n  let vy = 0\r\n  let x = 0\r\n  let y = 0\r\n  let rx: number\r\n  let ry: number\r\n  let snap: number\r\n\r\n  function fetchValue(node: m.Vnode<PointAttrs>) {\r\n    const data = node.attrs.data\r\n    const keys = data.keys || DEFAULT_KEYS\r\n    kx = keys[0]\r\n    ky = keys[1]\r\n    const value: any = getValue(data) ?? {\r\n      [kx]: vx,\r\n      [ky]: vy,\r\n    }\r\n    snap = data.snap\r\n    vx = value[kx] || 0\r\n    vy = value[ky] || 0\r\n    xRange = data.xRange || xRange\r\n    yRange = data.yRange || yRange\r\n    x = (vx - xRange[0]) / (xRange[1] - xRange[0])\r\n    y = (vy - yRange[0]) / (yRange[1] - yRange[0])\r\n    const reset = data.reset\r\n    if (reset) {\r\n      rx = (reset[0] - xRange[0]) / (xRange[1] - xRange[0])\r\n      ry = (reset[1] - yRange[0]) / (yRange[1] - yRange[0])\r\n    }\r\n  }\r\n\r\n  function updateValue() {\r\n    vx = xRange[0] + (xRange[1] - xRange[0]) * x\r\n    vy = yRange[0] + (yRange[1] - yRange[0]) * y\r\n    if (snap > 0) {\r\n      vx = Math.floor(vx / snap) * snap\r\n      vy = Math.floor(vy / snap) * snap\r\n      x = (vx - xRange[0]) / (xRange[1] - xRange[0])\r\n      y = (vy - yRange[0]) / (yRange[1] - yRange[0])\r\n    }\r\n  }\r\n\r\n  function onChange(type: 'change' | 'input') {\r\n    updateValue()\r\n    const data = vnode.attrs.data\r\n    const value: any = getValue(data) ?? {\r\n      [kx]: vx,\r\n      [ky]: vy,\r\n    }\r\n    value[kx] = vx\r\n    value[ky] = vy\r\n    call(type === 'input' ? data.onInput : data.onChange, data, value)\r\n  }\r\n\r\n  function onMouseDown(e: MouseEvent) {\r\n    drag.activate(e)\r\n  }\r\n\r\n  const drag = dragUtil({\r\n    onMove: (e) => {\r\n      e.preventDefault()\r\n      const target = drag.target\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\r\n      const cw = target.clientWidth\r\n      const ch = target.clientHeight\r\n      let [cx, cy] = getTouchPoint(e)\r\n      x = clamp((cx - tx - rect.left) / cw, 0, 1)\r\n      y = clamp((cy - ty - rect.top) / ch, 0, 1)\r\n\r\n      onChange('input')\r\n      m.redraw()\r\n    },\r\n    onEnd: () => {\r\n      drag.deactivate()\r\n      if (rx != null && ry != null) {\r\n        x = rx\r\n        y = ry\r\n        onChange('input')\r\n      }\r\n      onChange('change')\r\n      m.redraw()\r\n    },\r\n  })\r\n\r\n  return {\r\n    onremove: drag.deactivate,\r\n    oninit: fetchValue,\r\n    onupdate: fetchValue,\r\n    view: () =>\r\n      m(\r\n        'div',\r\n        {\r\n          class: twuiClass(TYPE),\r\n          tabindex: 0,\r\n          onmousedown: onMouseDown,\r\n          ontouchstart: onMouseDown,\r\n        },\r\n        m('.point-x-axis', {\r\n          style: {\r\n            'pointer-events': 'none',\r\n            position: 'absolute',\r\n            left: 0,\r\n            right: 0,\r\n            top: `${y * 100}%`,\r\n            height: `1px`,\r\n          },\r\n        }),\r\n        m('.point-y-axis', {\r\n          style: {\r\n            'pointer-events': 'none',\r\n            position: 'absolute',\r\n            left: `${x * 100}%`,\r\n            top: 0,\r\n            bottom: 0,\r\n            width: `1px`,\r\n          },\r\n        }),\r\n        m('.point-cursor', {\r\n          style: {\r\n            'pointer-events': 'none',\r\n            left: `${x * 100}%`,\r\n            top: `${y * 100}%`,\r\n            position: 'absolute',\r\n            width: '11px',\r\n            height: '11px',\r\n            'margin-top': '-5px',\r\n            'margin-left': '-5px',\r\n            border: '1px solid white',\r\n            'border-radius': '5px',\r\n            'box-shadow': '0px 0px 2px 1px rgba(0, 0, 0, 0.75)',\r\n          },\r\n        }),\r\n      ),\r\n  }\r\n})\r\n"]}

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

@@ -1,56 +0,0 @@
-import { ComponentAttrs, ComponentModel, ValueSource } from '../../core';
-/**
- * @public
- */
-export type PositionValue = number[] | {
-    [key: string]: number;
-} | {
-    [key: number]: number;
-};
-/**
- * Position component attributes
- * @public
- */
-export type PositionAttrs = ComponentAttrs<PositionModel>;
-/**
- * Position component model
- * @public
- */
-export type PositionModel<T = unknown> = ComponentModel & ValueSource<T, PositionValue> & {
-    /**
-     * The type name of the control
-     */
-    type: 'position';
-    /**
-     * The position object field names. Defaults to `['x', 'y', 'z']`
-     */
-    keys?: 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: PositionModel<T>, value: unknown, key?: string | number) => 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: PositionModel<T>, value: unknown, key?: string | number) => void;
-    /**
-     * Disables the control input
-     */
-    disabled?: boolean;
-};
-//# sourceMappingURL=position.d.ts.map

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

@@ -1 +0,0 @@
-{"version":3,"file":"position.d.ts","sourceRoot":"","sources":["../../../../src/lib/components/controls/position.ts"],"names":[],"mappings":"AAEA,OAAO,EAKL,cAAc,EACd,cAAc,EACd,WAAW,EACZ,MAAM,YAAY,CAAA;AAInB;;GAEG;AACH,MAAM,MAAM,aAAa,GACrB,MAAM,EAAE,GACR;IAAE,CAAC,GAAG,EAAE,MAAM,GAAG,MAAM,CAAA;CAAE,GACzB;IAAE,CAAC,GAAG,EAAE,MAAM,GAAG,MAAM,CAAA;CAAE,CAAA;AAE7B;;;GAGG;AACH,MAAM,MAAM,aAAa,GAAG,cAAc,CAAC,aAAa,CAAC,CAAA;AAEzD;;;GAGG;AACH,MAAM,MAAM,aAAa,CAAC,CAAC,GAAG,OAAO,IAAI,cAAc,GACrD,WAAW,CAAC,CAAC,EAAE,aAAa,CAAC,GAAG;IAC9B;;OAEG;IACH,IAAI,EAAE,UAAU,CAAA;IAChB;;OAEG;IACH,IAAI,CAAC,EAAE,MAAM,EAAE,CAAA;IACf;;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,CACR,KAAK,EAAE,aAAa,CAAC,CAAC,CAAC,EACvB,KAAK,EAAE,OAAO,EACd,GAAG,CAAC,EAAE,MAAM,GAAG,MAAM,KAClB,IAAI,CAAA;IACT;;;;;OAKG;IACH,QAAQ,CAAC,EAAE,CACT,KAAK,EAAE,aAAa,CAAC,CAAC,CAAC,EACvB,KAAK,EAAE,OAAO,EACd,GAAG,CAAC,EAAE,MAAM,GAAG,MAAM,KAClB,IAAI,CAAA;IACT;;OAEG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB,CAAA"}

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

@@ -1,36 +0,0 @@
-import m from 'mithril';
-import { getValue, component, setValue, renderModel, } from '../../core';
-import { call, twuiClass, viewFn } from '../../core/utils';
-const TYPE = 'position';
-const defaultKeys = ['x', 'y', 'z'];
-component(TYPE, (node) => {
-    function onChange(type, field, v) {
-        const data = node.attrs.data;
-        const value = getValue(data) || {};
-        value[field] = isNaN(v) ? null : v;
-        const written = setValue(data, value);
-        call(type === 'input' ? data.onInput : data.onChange, data, written, field);
-    }
-    return {
-        view: viewFn((data) => {
-            const keys = data.keys || defaultKeys;
-            const value = getValue(data);
-            return m('div', {
-                class: twuiClass(TYPE),
-            }, keys.map((field) => {
-                return renderModel({
-                    type: 'number',
-                    min: data.min,
-                    max: data.max,
-                    step: data.step,
-                    value: value === null || value === void 0 ? void 0 : value[field],
-                    disabled: data.disabled,
-                    onInput: (_, v) => onChange('input', field, v),
-                    onChange: (_, v) => onChange('change', field, v),
-                    placeholder: field,
-                });
-            }));
-        }),
-    };
-});
-//# sourceMappingURL=position.js.map

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

@@ -1 +0,0 @@
-{"version":3,"file":"position.js","sourceRoot":"","sources":["../../../../src/lib/components/controls/position.ts"],"names":[],"mappings":"AAAA,OAAO,CAAC,MAAM,SAAS,CAAA;AAEvB,OAAO,EACL,QAAQ,EACR,SAAS,EACT,QAAQ,EACR,WAAW,GAIZ,MAAM,YAAY,CAAA;AACnB,OAAO,EAAE,IAAI,EAAE,SAAS,EAAE,MAAM,EAAE,MAAM,kBAAkB,CAAA;AAoE1D,MAAM,IAAI,GAAG,UAAU,CAAA;AACvB,MAAM,WAAW,GAAG,CAAC,GAAG,EAAE,GAAG,EAAE,GAAG,CAAC,CAAA;AACnC,SAAS,CAAgB,IAAI,EAAE,CAAC,IAAI,EAAE,EAAE;IACtC,SAAS,QAAQ,CAAC,IAAwB,EAAE,KAAa,EAAE,CAAS;QAClE,MAAM,IAAI,GAAG,IAAI,CAAC,KAAK,CAAC,IAAI,CAAA;QAC5B,MAAM,KAAK,GAAQ,QAAQ,CAAC,IAAI,CAAC,IAAI,EAAE,CAAA;QACvC,KAAK,CAAC,KAAK,CAAC,GAAG,KAAK,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC,CAAA;QAClC,MAAM,OAAO,GAAG,QAAQ,CAAC,IAAI,EAAE,KAAK,CAAC,CAAA;QACrC,IAAI,CAAC,IAAI,KAAK,OAAO,CAAC,CAAC,CAAC,IAAI,CAAC,OAAO,CAAC,CAAC,CAAC,IAAI,CAAC,QAAQ,EAAE,IAAI,EAAE,OAAO,EAAE,KAAK,CAAC,CAAA;IAC7E,CAAC;IAED,OAAO;QACL,IAAI,EAAE,MAAM,CAAC,CAAC,IAAI,EAAE,EAAE;YACpB,MAAM,IAAI,GAAG,IAAI,CAAC,IAAI,IAAI,WAAW,CAAA;YACrC,MAAM,KAAK,GAAG,QAAQ,CAAC,IAAI,CAAQ,CAAA;YACnC,OAAO,CAAC,CACN,KAAK,EACL;gBACE,KAAK,EAAE,SAAS,CAAC,IAAI,CAAC;aACvB,EACD,IAAI,CAAC,GAAG,CAAC,CAAC,KAAK,EAAE,EAAE;gBACjB,OAAO,WAAW,CAAc;oBAC9B,IAAI,EAAE,QAAQ;oBACd,GAAG,EAAE,IAAI,CAAC,GAAG;oBACb,GAAG,EAAE,IAAI,CAAC,GAAG;oBACb,IAAI,EAAE,IAAI,CAAC,IAAI;oBACf,KAAK,EAAE,KAAK,aAAL,KAAK,uBAAL,KAAK,CAAG,KAAK,CAAC;oBACrB,QAAQ,EAAE,IAAI,CAAC,QAAQ;oBACvB,OAAO,EAAE,CAAC,CAAC,EAAE,CAAS,EAAE,EAAE,CAAC,QAAQ,CAAC,OAAO,EAAE,KAAK,EAAE,CAAC,CAAC;oBACtD,QAAQ,EAAE,CAAC,CAAC,EAAE,CAAS,EAAE,EAAE,CAAC,QAAQ,CAAC,QAAQ,EAAE,KAAK,EAAE,CAAC,CAAC;oBACxD,WAAW,EAAE,KAAK;iBACnB,CAAC,CAAA;YACJ,CAAC,CAAC,CACH,CAAA;QACH,CAAC,CAAC;KACH,CAAA;AACH,CAAC,CAAC,CAAA","sourcesContent":["import m from 'mithril'\r\n\r\nimport {\r\n  getValue,\r\n  component,\r\n  setValue,\r\n  renderModel,\r\n  ComponentAttrs,\r\n  ComponentModel,\r\n  ValueSource,\r\n} from '../../core'\r\nimport { call, twuiClass, viewFn } from '../../core/utils'\r\nimport { NumberModel } from './number'\r\n\r\n/**\r\n * @public\r\n */\r\nexport type PositionValue =\r\n  | number[]\r\n  | { [key: string]: number }\r\n  | { [key: number]: number }\r\n\r\n/**\r\n * Position component attributes\r\n * @public\r\n */\r\nexport type PositionAttrs = ComponentAttrs<PositionModel>\r\n\r\n/**\r\n * Position component model\r\n * @public\r\n */\r\nexport type PositionModel<T = unknown> = ComponentModel &\r\n  ValueSource<T, PositionValue> & {\r\n    /**\r\n     * The type name of the control\r\n     */\r\n    type: 'position'\r\n    /**\r\n     * The position object field names. Defaults to `['x', 'y', 'z']`\r\n     */\r\n    keys?: 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?: (\r\n      model: PositionModel<T>,\r\n      value: unknown,\r\n      key?: string | number,\r\n    ) => 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?: (\r\n      model: PositionModel<T>,\r\n      value: unknown,\r\n      key?: string | number,\r\n    ) => void\r\n    /**\r\n     * Disables the control input\r\n     */\r\n    disabled?: boolean,\r\n  }\r\n\r\nconst TYPE = 'position'\r\nconst defaultKeys = ['x', 'y', 'z']\r\ncomponent<PositionAttrs>(TYPE, (node) => {\r\n  function onChange(type: 'input' | 'change', field: string, v: number) {\r\n    const data = node.attrs.data\r\n    const value: any = getValue(data) || {}\r\n    value[field] = isNaN(v) ? null : v\r\n    const written = setValue(data, value)\r\n    call(type === 'input' ? data.onInput : data.onChange, data, written, field)\r\n  }\r\n\r\n  return {\r\n    view: viewFn((data) => {\r\n      const keys = data.keys || defaultKeys\r\n      const value = getValue(data) as any\r\n      return m(\r\n        'div',\r\n        {\r\n          class: twuiClass(TYPE),\r\n        },\r\n        keys.map((field) => {\r\n          return renderModel<NumberModel>({\r\n            type: 'number',\r\n            min: data.min,\r\n            max: data.max,\r\n            step: data.step,\r\n            value: value?.[field],\r\n            disabled: data.disabled,\r\n            onInput: (_, v: number) => onChange('input', field, v),\r\n            onChange: (_, v: number) => onChange('change', field, v),\r\n            placeholder: field,\r\n          })\r\n        }),\r\n      )\r\n    }),\r\n  }\r\n})\r\n"]}

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

@@ -1,132 +0,0 @@
-import m from 'mithril';
-import { getValue, component, setValue, } from '../../core';
-import { call, isNumber, isString, twuiClass, viewFn } from '../../core/utils';
-const emptyArray = [];
-function optionsFromFlatArray(arr) {
-    const res = [];
-    for (const it of arr) {
-        if (isString(it) || isNumber(it)) {
-            res.push({ value: it, label: String(it) });
-            continue;
-        }
-        if ('value' in it) {
-            res.push(it);
-            continue;
-        }
-    }
-    return res;
-}
-function optionsFromArray(arr) {
-    const res = [];
-    for (const it of arr) {
-        if (isString(it) || isNumber(it) || it == null) {
-            res.push({ value: it, label: String(it) });
-        }
-        else if ('value' in it) {
-            res.push(it);
-        }
-        else if ('options' in it) {
-            res.push({
-                label: it.label,
-                disabled: it.disabled,
-                options: Array.isArray(it.options)
-                    ? optionsFromFlatArray(it.options)
-                    : optionsFromObject(it.options),
-            });
-        }
-    }
-    return res;
-}
-function optionsFromObject(obj) {
-    return Object.keys(obj)
-        .sort()
-        .map((key) => ({ value: obj[key], label: key }));
-}
-function getOptions(node) {
-    const options = node.attrs.data.options;
-    if (!options) {
-        return emptyArray;
-    }
-    if (Array.isArray(options)) {
-        return optionsFromArray(options);
-    }
-    return optionsFromObject(options);
-}
-component('select', (node) => {
-    let options;
-    function getSelectedIndex() {
-        const data = node.attrs.data;
-        const value = getValue(data);
-        let i = 0;
-        for (const o0 of options) {
-            if ('options' in o0) {
-                for (const o1 of o0.options) {
-                    if (o1.value === value) {
-                        return i;
-                    }
-                    i++;
-                }
-            }
-            else {
-                if (o0.value === value) {
-                    return i;
-                }
-                i++;
-            }
-        }
-    }
-    function getSelectionAt(index) {
-        let i = 0;
-        for (const o0 of options) {
-            if ('options' in o0) {
-                for (const o1 of o0.options) {
-                    if (i === index) {
-                        return o1.value;
-                    }
-                    i += 1;
-                }
-            }
-            else {
-                if (i === index) {
-                    return o0.value;
-                }
-                i += 1;
-            }
-        }
-        return null;
-    }
-    function onChange(e) {
-        const el = e.target;
-        const data = node.attrs.data;
-        const value = getSelectionAt(el.selectedIndex);
-        const written = setValue(data, value);
-        call(data.onChange, data, written);
-    }
-    return {
-        view: viewFn((data) => {
-            options = getOptions(node);
-            return m('select', {
-                class: twuiClass(data.type),
-                selectedIndex: getSelectedIndex(),
-                onchange: onChange,
-                disabled: data.disabled,
-            }, options.map((it) => {
-                if ('options' in it) {
-                    return m('optgroup', {
-                        disabled: !!it.disabled,
-                        label: it.label || '',
-                    }, it.options.map(option));
-                }
-                return option(it);
-            }));
-        }),
-    };
-});
-function option(it) {
-    return m('option', {
-        value: it.value,
-        label: it.label,
-        disabled: !!it.disabled,
-    }, it.label || '');
-}
-//# sourceMappingURL=select.js.map

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

@@ -1 +0,0 @@
-{"version":3,"file":"select.js","sourceRoot":"","sources":["../../../../src/lib/components/controls/select.ts"],"names":[],"mappings":"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","sourcesContent":["import m, { Child } from 'mithril'\r\n\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 { call, isNumber, isString, twuiClass, viewFn } from '../../core/utils'\r\n\r\nconst emptyArray: any[] = []\r\n\r\n/**\r\n * @public\r\n */\r\nexport type SelectOption = {\r\n  label: string\r\n  value: unknown\r\n  disabled?: boolean\r\n}\r\n/**\r\n * @public\r\n */\r\nexport type SelectOptionArray = Array<\r\n  SelectOption | SelectOptionGroup | string | number\r\n>\r\n/**\r\n * @public\r\n */\r\nexport type SelectOptionsObject = {\r\n  [key: string]: unknown\r\n}\r\n/**\r\n * @public\r\n */\r\nexport type SelectOptionGroup<T = SelectOptionArray | SelectOptionsObject> = {\r\n  label: string\r\n  options: T\r\n  disabled?: boolean\r\n}\r\n\r\n/**\r\n * Select component select options\r\n * @public\r\n */\r\nexport type SelectModelOptions = SelectOptionArray | SelectOptionsObject\r\n\r\n/**\r\n * Select component attributes\r\n * @public\r\n */\r\nexport type SelectAttrs = ComponentAttrs<SelectModel>\r\n\r\n/**\r\n * Select component model\r\n * @public\r\n */\r\nexport interface SelectModel<T = unknown, V = any>\r\n  extends ComponentModel,\r\n    ValueSource<T, V> {\r\n  /**\r\n   * The type name of the control\r\n   */\r\n  type: 'select'\r\n  /**\r\n   * The select options\r\n   */\r\n  options?: SelectModelOptions\r\n  /**\r\n   * This is called once the control value is committed by the user.\r\n   */\r\n  onChange?: (model: SelectModel<T>, value: unknown) => void\r\n  /**\r\n   * Disables the control input\r\n   */\r\n  disabled?: boolean\r\n}\r\n\r\nfunction optionsFromFlatArray(arr: SelectOptionArray): SelectOption[] {\r\n  const res: SelectOption[] = []\r\n  for (const it of arr) {\r\n    if (isString(it) || isNumber(it)) {\r\n      res.push({ value: it, label: String(it) })\r\n      continue\r\n    }\r\n    if ('value' in it) {\r\n      res.push(it)\r\n      continue\r\n    }\r\n  }\r\n  return res\r\n}\r\n\r\nfunction optionsFromArray(\r\n  arr: SelectOptionArray,\r\n): Array<SelectOption | SelectOptionGroup<SelectOption[]>> {\r\n  const res: Array<SelectOption | SelectOptionGroup<SelectOption[]>> = []\r\n  for (const it of arr) {\r\n    if (isString(it) || isNumber(it) || it == null) {\r\n      res.push({ value: it, label: String(it) })\r\n    } else if ('value' in it) {\r\n      res.push(it)\r\n    } else if ('options' in it) {\r\n      res.push({\r\n        label: it.label,\r\n        disabled: it.disabled,\r\n        options: Array.isArray(it.options)\r\n          ? optionsFromFlatArray(it.options)\r\n          : optionsFromObject(it.options),\r\n      })\r\n    }\r\n  }\r\n  return res\r\n}\r\n\r\nfunction optionsFromObject(obj: SelectOptionsObject): Array<SelectOption> {\r\n  return Object.keys(obj)\r\n    .sort()\r\n    .map((key) => ({ value: obj[key], label: key }))\r\n}\r\n\r\nfunction getOptions(\r\n  node: m.Vnode<SelectAttrs>,\r\n): Array<SelectOption | SelectOptionGroup<SelectOption[]>> {\r\n  const options = node.attrs.data.options\r\n\r\n  if (!options) {\r\n    return emptyArray\r\n  }\r\n\r\n  if (Array.isArray(options)) {\r\n    return optionsFromArray(options)\r\n  }\r\n  return optionsFromObject(options)\r\n}\r\n\r\ncomponent<SelectAttrs>('select', (node) => {\r\n  let options: Array<SelectOption | SelectOptionGroup<SelectOption[]>>\r\n\r\n  function getSelectedIndex() {\r\n    const data = node.attrs.data\r\n    const value = getValue(data)\r\n    let i = 0\r\n    for (const o0 of options) {\r\n      if ('options' in o0) {\r\n        for (const o1 of o0.options) {\r\n          if (o1.value === value) {\r\n            return i\r\n          }\r\n          i++\r\n        }\r\n      } else {\r\n        if (o0.value === value) {\r\n          return i\r\n        }\r\n        i++\r\n      }\r\n    }\r\n  }\r\n\r\n  function getSelectionAt(index: number) {\r\n    let i = 0\r\n    for (const o0 of options) {\r\n      if ('options' in o0) {\r\n        for (const o1 of o0.options) {\r\n          if (i === index) {\r\n            return o1.value\r\n          }\r\n          i += 1\r\n        }\r\n      } else {\r\n        if (i === index) {\r\n          return o0.value\r\n        }\r\n        i += 1\r\n      }\r\n    }\r\n    return null\r\n  }\r\n\r\n  function onChange(e: Event) {\r\n    const el = e.target as HTMLSelectElement\r\n    const data = node.attrs.data\r\n    const value = getSelectionAt(el.selectedIndex)\r\n    const written = setValue(data, value)\r\n    call(data.onChange, data, written)\r\n  }\r\n\r\n  return {\r\n    view: viewFn((data) => {\r\n      options = getOptions(node)\r\n      return m(\r\n        'select',\r\n        {\r\n          class: twuiClass(data.type),\r\n          selectedIndex: getSelectedIndex(),\r\n          onchange: onChange,\r\n          disabled: data.disabled,\r\n        },\r\n        options.map((it) => {\r\n          if ('options' in it) {\r\n            return m(\r\n              'optgroup',\r\n              {\r\n                disabled: !!it.disabled,\r\n                label: it.label || '',\r\n              },\r\n              it.options.map(option),\r\n            )\r\n          }\r\n          return option(it)\r\n        }),\r\n      )\r\n    }),\r\n  }\r\n})\r\n\r\nfunction option(it: SelectOption) {\r\n  return m(\r\n    'option',\r\n    {\r\n      value: it.value,\r\n      label: it.label,\r\n      disabled: !!it.disabled,\r\n    },\r\n    it.label || '',\r\n  )\r\n}\r\n"]}