tweak-ui 0.4.2 → 0.5.0

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

@@ -0,0 +1,302 @@
+import m from 'mithril';
+import { component, getValue, renderModel, setValue, } from '../../core';
+import { call, clamp, cssClass, dragUtil, getTouchInTarget, twuiClass } from '../../core/utils';
+const TYPE = 'spherical';
+const KEYS = ['phi', 'theta'];
+const SphericalComponent = (vnode) => {
+    let phi = 0; // azimuth     [0, 2PI]
+    let theta = 0; // inclination [0,  PI]
+    let backface = false;
+    let v2Phi = [0, 0];
+    let v2Theta = [0, 0];
+    let draggedKnob;
+    function toDeg(value) {
+        return value * (180 / Math.PI);
+    }
+    function toRad(value) {
+        return value * (Math.PI / 180);
+    }
+    function toScreen(value) {
+        return clamp((value / 2 + 0.5) * 100, 0, 100);
+    }
+    function read(node) {
+        const data = node.attrs.data;
+        const value = getValue(data) || {
+            phi: data.degree ? toDeg(phi) : phi,
+            theta: data.degree ? toDeg(theta) : theta,
+        };
+        const [kPhi, kTheta] = data.keys || KEYS;
+        return { data, value, kPhi, kTheta };
+    }
+    function fetchValue(node) {
+        const { data, value, kPhi, kTheta } = read(node);
+        phi = value[kPhi] || 0;
+        theta = value[kTheta] || 0;
+        if (data.degree) {
+            phi = toRad(phi);
+            theta = toRad(theta);
+        }
+        while (theta < 0) {
+            theta += Math.PI;
+        }
+        while (theta > Math.PI) {
+            theta -= Math.PI;
+        }
+        backface = theta > Math.PI / 2;
+        updatePositions();
+    }
+    function onChange(type) {
+        updatePositions();
+        const { data, value, kPhi, kTheta } = read(vnode);
+        value[kPhi] = data.degree ? toDeg(phi) : phi;
+        value[kTheta] = data.degree ? toDeg(theta) : theta;
+        const written = setValue(data, value);
+        call(type === 'input' ? data.onInput : data.onChange, data, written);
+    }
+    function updatePositions() {
+        v2Phi[0] = Math.cos(phi);
+        v2Phi[1] = Math.sin(phi);
+        v2Theta[0] = Math.sin(theta) * Math.cos(phi);
+        v2Theta[1] = Math.sin(theta) * Math.sin(phi);
+    }
+    function onStartPhi(e) {
+        draggedKnob = 'phi';
+        drag.activate(e);
+    }
+    function onStartTheta(e) {
+        draggedKnob = 'theta';
+        drag.activate(e);
+    }
+    let touchOffset;
+    const drag = dragUtil({
+        onStart: (e) => {
+            const touch = getTouchInTarget(e);
+            touchOffset = [
+                -(touch.x - touch.width / 2),
+                -(touch.y - touch.height / 2),
+            ];
+            drag.onMove(e);
+        },
+        onMove: (e) => {
+            e.preventDefault();
+            const position = getTouchInTarget(e, drag.target.parentElement, touchOffset);
+            const px = position.normalizedX - 0.5;
+            const py = position.normalizedY - 0.5;
+            if (draggedKnob === 'phi') {
+                // [-PI;PI]
+                phi = Math.atan2(px, py);
+                // convert to range [0;2PI]
+                phi += phi < 0 ? 2 * Math.PI : 0;
+            }
+            else if (draggedKnob === 'theta') {
+                // closest point on segment
+                // p0: [0, 0], p1: vPhi
+                const ab = v2Phi;
+                const ac = [py, px];
+                const t = (ab[0] * ac[0] + ab[1] * ac[1]) / Math.sqrt(ab[0] * ab[0] + ab[1] * ab[1]);
+                theta = Math.PI * clamp(t, 0, 0.5);
+                if (backface) {
+                    theta = Math.PI - theta;
+                }
+            }
+            onChange('input');
+            m.redraw();
+        },
+        onEnd: (e) => {
+            drag.deactivate();
+            draggedKnob = null;
+            onChange('change');
+            m.redraw();
+        },
+    });
+    function onPhiInput(model, value) {
+        phi = toRad(value);
+        onChange('input');
+    }
+    function onPhiChange(model, value) {
+        phi = toRad(value);
+        onChange('change');
+    }
+    function onThetaInput(model, value) {
+        theta = toRad(value);
+        onChange('input');
+    }
+    function onThetaChange(model, value) {
+        theta = toRad(value);
+        onChange('change');
+    }
+    function onBackfaceChange(model, value) {
+        backface = value;
+        theta = Math.PI - theta;
+        onChange('change');
+        setTimeout(() => m.redraw());
+    }
+    return {
+        onremove: () => {
+            drag.deactivate();
+        },
+        oninit: (node) => {
+            fetchValue(node);
+        },
+        onupdate: (node) => {
+            fetchValue(node);
+        },
+        view: () => {
+            return m('div', {
+                class: twuiClass(TYPE),
+                style: {
+                    '--spherical-phi': `${toDeg(-phi) + 90}deg`,
+                },
+            }, m('div.left-container', m('div.pane', {
+                style: {
+                    position: 'relative',
+                    width: '100%',
+                    'padding-top': '100%',
+                },
+            }, m('div.phi-pane', {
+                class: cssClass({
+                    'is-dragging': draggedKnob === 'phi',
+                }),
+                style: {
+                    position: 'absolute',
+                    top: '0.5rem',
+                    left: '0.5rem',
+                    width: 'calc(100% - 1rem)',
+                    height: 'calc(100% - 1rem)',
+                },
+            }, m('div.phi-knob', {
+                onmousedown: onStartPhi,
+                ontouchstart: onStartPhi,
+                style: {
+                    position: 'absolute',
+                    width: '15px',
+                    height: '15px',
+                    top: `calc(${toScreen(v2Phi[0])}% - 7px)`,
+                    left: `calc(${toScreen(v2Phi[1])}% - 7px)`,
+                },
+            })), m('div.theta-pane', {
+                class: cssClass({
+                    'is-dragging': draggedKnob === 'theta',
+                }),
+                style: {
+                    position: 'absolute',
+                    top: '1.5rem',
+                    left: '1.5rem',
+                    width: 'calc(100% - 3rem)',
+                    height: 'calc(100% - 3rem)',
+                },
+            }, m('div.theta-knob', {
+                onmousedown: onStartTheta,
+                ontouchstart: onStartTheta,
+                style: {
+                    position: 'absolute',
+                    width: '15px',
+                    height: '15px',
+                    top: `calc(${toScreen(v2Theta[0])}% - 7px)`,
+                    left: `calc(${toScreen(v2Theta[1])}% - 7px)`,
+                },
+            })))), m('div.right-container', m('label', m.trust('&phi;')), renderModel({
+                type: 'number',
+                min: 0,
+                max: 360,
+                step: 0.1,
+                value: toDeg(phi),
+                onInput: onPhiInput,
+                onChange: onPhiChange,
+            }), m('label', m.trust('&theta;')), renderModel({
+                type: 'number',
+                min: 0,
+                max: 180,
+                step: 0.1,
+                value: toDeg(theta),
+                onInput: onThetaInput,
+                onChange: onThetaChange,
+            }), renderModel({
+                type: 'checkbox',
+                value: backface,
+                text: 'Backface',
+                onChange: onBackfaceChange,
+            })));
+        },
+    };
+};
+component(TYPE, SphericalComponent);
+export function sphericalCodec({ axes, length, result, } = {}) {
+    axes = axes || { x: 'right', y: 'up', z: 'back' };
+    const keys = Object.keys(axes);
+    const radius = () => {
+        return (typeof length === 'function' ? length() : length) || 1;
+    };
+    return {
+        decode: (value) => {
+            let x = 0;
+            let y = 0;
+            let z = 0;
+            for (const key of keys) {
+                switch (axes[key]) {
+                    case 'right':
+                        y = value[key];
+                        break;
+                    case 'left':
+                        y = -value[key];
+                        break;
+                    case 'back':
+                        x = value[key];
+                        break;
+                    case 'front':
+                        x = -value[key];
+                        break;
+                    case 'up':
+                        z = value[key];
+                        break;
+                    case 'down':
+                        z = -value[key];
+                        break;
+                    default:
+                        break;
+                }
+            }
+            const r = radius();
+            x /= r;
+            y /= r;
+            z /= r;
+            return {
+                phi: Math.atan2(y, x) || 0,
+                theta: Math.atan(Math.sqrt(x * x + y * y) / z) || 0,
+            };
+        },
+        encode: ({ phi, theta }) => {
+            const r = radius();
+            const x = r * Math.sin(theta) * Math.cos(phi);
+            const y = r * Math.sin(theta) * Math.sin(phi);
+            const z = r * Math.cos(theta);
+            const value = (result === null || result === void 0 ? void 0 : result()) || {};
+            for (const key of keys) {
+                switch (axes[key]) {
+                    case 'right':
+                        value[key] = y;
+                        break;
+                    case 'left':
+                        value[key] = -y;
+                        break;
+                    case 'back':
+                        value[key] = x;
+                        break;
+                    case 'front':
+                        value[key] = -x;
+                        break;
+                    case 'up':
+                        value[key] = z;
+                        break;
+                    case 'down':
+                        value[key] = -z;
+                        break;
+                    default:
+                        break;
+                }
+            }
+            return value;
+        },
+    };
+}
+//# sourceMappingURL=spherical.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"spherical.js","sourceRoot":"","sources":["../../../../src/lib/components/controls/spherical.ts"],"names":[],"mappings":"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","sourcesContent":["import m, { FactoryComponent } from 'mithril'\r\n\r\nimport {\r\n  component,\r\n  getValue,\r\n  renderModel,\r\n  ComponentModel,\r\n  ValueSource,\r\n  ComponentAttrs,\r\n  setValue,\r\n  ValueCodec,\r\n} from '../../core'\r\nimport { call, clamp, cssClass, dragUtil, getTouchInTarget, getTouchPoint, twuiClass } from '../../core/utils'\r\nimport { NumberModel } from './number'\r\nimport { CheckboxModel } from './checkbox'\r\n\r\n/**\r\n * @public\r\n */\r\nexport type SphericalValue = number[] | { [key: string]: number } | { [key: number]: number }\r\n\r\n/**\r\n * Spherical component attributes\r\n * @public\r\n */\r\nexport type SphericalAttrs = ComponentAttrs<SphericalModel>\r\n\r\n/**\r\n * Spherical component model\r\n * @public\r\n */\r\nexport interface SphericalModel<T = unknown>\r\n  extends ComponentModel,\r\n    ValueSource<T, SphericalValue> {\r\n  /**\r\n   * The type name of the control\r\n   */\r\n  type: 'spherical'\r\n  /**\r\n   * The object field names. Defaults to `['phi', 'theta']`\r\n   */\r\n  keys?: Array<string | number>\r\n  /**\r\n   * Whether to use degrees instead of radians\r\n   */\r\n  degree?: boolean\r\n  /**\r\n   * This is called when the control value has been changed.\r\n   */\r\n  onInput?: (model: SphericalModel<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: SphericalModel<T>, value: unknown) => void\r\n}\r\n\r\nconst TYPE = 'spherical'\r\nconst KEYS = ['phi', 'theta']\r\nconst SphericalComponent: FactoryComponent<SphericalAttrs> = (vnode) => {\r\n  let phi = 0 // azimuth     [0, 2PI]\r\n  let theta = 0 // inclination [0,  PI]\r\n  let backface = false\r\n\r\n  let v2Phi = [0, 0]\r\n  let v2Theta = [0, 0]\r\n\r\n  let draggedKnob: 'phi' | 'theta'\r\n\r\n  function toDeg(value: number) {\r\n    return value * (180 / Math.PI)\r\n  }\r\n  function toRad(value: number) {\r\n    return value * (Math.PI / 180)\r\n  }\r\n  function toScreen(value: number) {\r\n    return clamp((value / 2 + 0.5) * 100, 0, 100)\r\n  }\r\n\r\n  function read(node: m.Vnode<SphericalAttrs>) {\r\n    const data = node.attrs.data\r\n    const value: any = getValue(data) || {\r\n      phi: data.degree ? toDeg(phi) : phi,\r\n      theta: data.degree ? toDeg(theta) : theta,\r\n    }\r\n    const [kPhi, kTheta] = data.keys || KEYS\r\n    return { data, value, kPhi, kTheta }\r\n  }\r\n\r\n  function fetchValue(node: m.Vnode<SphericalAttrs>) {\r\n    const { data, value, kPhi, kTheta } = read(node)\r\n    phi = value[kPhi] || 0\r\n    theta = value[kTheta] || 0\r\n    if (data.degree) {\r\n      phi = toRad(phi)\r\n      theta = toRad(theta)\r\n    }\r\n    while (theta < 0) {\r\n      theta += Math.PI\r\n    }\r\n    while (theta > Math.PI) {\r\n      theta -= Math.PI\r\n    }\r\n    backface = theta > Math.PI / 2\r\n    updatePositions()\r\n  }\r\n\r\n  function onChange(type: 'change' | 'input') {\r\n    updatePositions()\r\n    const { data, value, kPhi, kTheta } = read(vnode)\r\n    value[kPhi] = data.degree ? toDeg(phi) : phi\r\n    value[kTheta] = data.degree ? toDeg(theta) : theta\r\n    const written = setValue(data, value)\r\n    call(type === 'input' ? data.onInput : data.onChange, data, written)\r\n  }\r\n\r\n  function updatePositions() {\r\n    v2Phi[0] = Math.cos(phi)\r\n    v2Phi[1] = Math.sin(phi)\r\n    v2Theta[0] = Math.sin(theta) * Math.cos(phi)\r\n    v2Theta[1] = Math.sin(theta) * Math.sin(phi)\r\n  }\r\n\r\n  function onStartPhi(e: MouseEvent) {\r\n    draggedKnob = 'phi'\r\n    drag.activate(e)\r\n  }\r\n  function onStartTheta(e: MouseEvent) {\r\n    draggedKnob = 'theta'\r\n    drag.activate(e)\r\n  }\r\n\r\n  let touchOffset: [number, number]\r\n  const drag = dragUtil({\r\n    onStart: (e) => {\r\n      const touch = getTouchInTarget(e)\r\n      touchOffset = [\r\n        -(touch.x - touch.width / 2),\r\n        -(touch.y - touch.height / 2),\r\n      ]\r\n      drag.onMove(e)\r\n    },\r\n    onMove: (e) => {\r\n      e.preventDefault()\r\n\r\n      const position = getTouchInTarget(e, drag.target.parentElement, touchOffset)\r\n      const px = position.normalizedX - 0.5\r\n      const py = position.normalizedY - 0.5\r\n      if (draggedKnob === 'phi') {\r\n        // [-PI;PI]\r\n        phi = Math.atan2(px, py)\r\n        // convert to range [0;2PI]\r\n        phi += phi < 0 ? 2 * Math.PI : 0\r\n      } else if (draggedKnob === 'theta') {\r\n        // closest point on segment\r\n        // p0: [0, 0], p1: vPhi\r\n        const ab = v2Phi\r\n        const ac = [py, px]\r\n        const t = (ab[0] * ac[0] + ab[1] * ac[1]) / Math.sqrt(ab[0] * ab[0] + ab[1] * ab[1])\r\n\r\n        theta = Math.PI * clamp(t, 0, 0.5)\r\n        if (backface) {\r\n          theta = Math.PI - theta\r\n        }\r\n      }\r\n      onChange('input')\r\n      m.redraw()\r\n    },\r\n    onEnd: (e) => {\r\n      drag.deactivate()\r\n      draggedKnob = null\r\n      onChange('change')\r\n      m.redraw()\r\n    },\r\n  })\r\n\r\n  function onPhiInput(model: unknown, value: number) {\r\n    phi = toRad(value)\r\n    onChange('input')\r\n  }\r\n  function onPhiChange(model: unknown, value: number) {\r\n    phi = toRad(value)\r\n    onChange('change')\r\n  }\r\n\r\n  function onThetaInput(model: unknown, value: number) {\r\n    theta = toRad(value)\r\n    onChange('input')\r\n  }\r\n  function onThetaChange(model: unknown, value: number) {\r\n    theta = toRad(value)\r\n    onChange('change')\r\n  }\r\n  function onBackfaceChange(model: unknown, value: boolean) {\r\n    backface = value\r\n    theta = Math.PI - theta\r\n    onChange('change')\r\n    setTimeout(() => m.redraw())\r\n  }\r\n\r\n  return {\r\n    onremove: () => {\r\n      drag.deactivate()\r\n    },\r\n    oninit: (node) => {\r\n      fetchValue(node)\r\n    },\r\n    onupdate: (node) => {\r\n      fetchValue(node)\r\n    },\r\n    view: () => {\r\n      return m(\r\n        'div',\r\n        {\r\n          class: twuiClass(TYPE),\r\n          style: {\r\n            '--spherical-phi': `${toDeg(-phi) + 90}deg`,\r\n          },\r\n        },\r\n        m(\r\n          'div.left-container',\r\n          m(\r\n            'div.pane',\r\n            {\r\n              style: {\r\n                position: 'relative',\r\n                width: '100%',\r\n                'padding-top': '100%',\r\n              },\r\n            },\r\n            m(\r\n              'div.phi-pane',\r\n              {\r\n                class: cssClass({\r\n                  'is-dragging': draggedKnob === 'phi',\r\n                }),\r\n                style: {\r\n                  position: 'absolute',\r\n                  top: '0.5rem',\r\n                  left: '0.5rem',\r\n                  width: 'calc(100% - 1rem)',\r\n                  height: 'calc(100% - 1rem)',\r\n                },\r\n              },\r\n              m('div.phi-knob', {\r\n                onmousedown: onStartPhi,\r\n                ontouchstart: onStartPhi,\r\n                style: {\r\n                  position: 'absolute',\r\n                  width: '15px',\r\n                  height: '15px',\r\n                  top: `calc(${toScreen(v2Phi[0])}% - 7px)`,\r\n                  left: `calc(${toScreen(v2Phi[1])}% - 7px)`,\r\n                },\r\n              }),\r\n            ),\r\n            m(\r\n              'div.theta-pane',\r\n              {\r\n                class: cssClass({\r\n                  'is-dragging': draggedKnob === 'theta',\r\n                }),\r\n                style: {\r\n                  position: 'absolute',\r\n                  top: '1.5rem',\r\n                  left: '1.5rem',\r\n                  width: 'calc(100% - 3rem)',\r\n                  height: 'calc(100% - 3rem)',\r\n                },\r\n              },\r\n              m('div.theta-knob', {\r\n                onmousedown: onStartTheta,\r\n                ontouchstart: onStartTheta,\r\n                style: {\r\n                  position: 'absolute',\r\n                  width: '15px',\r\n                  height: '15px',\r\n                  top: `calc(${toScreen(v2Theta[0])}% - 7px)`,\r\n                  left: `calc(${toScreen(v2Theta[1])}% - 7px)`,\r\n                },\r\n              }),\r\n            ),\r\n          ),\r\n        ),\r\n        m(\r\n          'div.right-container',\r\n          m('label', m.trust('&phi;')),\r\n          renderModel<NumberModel>({\r\n            type: 'number',\r\n            min: 0,\r\n            max: 360,\r\n            step: 0.1,\r\n            value: toDeg(phi),\r\n            onInput: onPhiInput,\r\n            onChange: onPhiChange,\r\n          }),\r\n          m('label', m.trust('&theta;')),\r\n          renderModel<NumberModel>({\r\n            type: 'number',\r\n            min: 0,\r\n            max: 180,\r\n            step: 0.1,\r\n            value: toDeg(theta),\r\n            onInput: onThetaInput,\r\n            onChange: onThetaChange,\r\n          }),\r\n          renderModel<CheckboxModel>({\r\n            type: 'checkbox',\r\n            value: backface,\r\n            text: 'Backface',\r\n            onChange: onBackfaceChange,\r\n          }),\r\n        ),\r\n      )\r\n    },\r\n  }\r\n}\r\n\r\ncomponent<SphericalAttrs>(TYPE, SphericalComponent)\r\n\r\n/**\r\n * Direction name\r\n * @public\r\n */\r\nexport type Direction = 'right' | 'left' | 'up' | 'down' | 'front' | 'back'\r\nexport interface SphericalCodecOptions<T> {\r\n  /**\r\n   * Maps object keys to cartesian axes. Defaults to `{ x: 'right', y: 'up', z: 'back' }`\r\n   */\r\n  axes?: Record<string | number, Direction>\r\n  /**\r\n   * The vector length (sphere radius). Defaults to `1`\r\n   */\r\n  length?: number | (() => number)\r\n  /**\r\n   * Gets the objec where the result should be stored. May return a new instance.\r\n   */\r\n  result?: () => T\r\n}\r\n\r\nexport function sphericalCodec(): ValueCodec<\r\n  { x: number; y: number; z: number },\r\n  { phi: number; theta: number }\r\n>\r\nexport function sphericalCodec<T>(options: SphericalCodecOptions<T>): ValueCodec<T, { phi: number; theta: number }>\r\nexport function sphericalCodec({\r\n  axes,\r\n  length,\r\n  result,\r\n}: SphericalCodecOptions<any> = {}): ValueCodec<any, { phi: number; theta: number }> {\r\n  axes = axes || { x: 'right', y: 'up', z: 'back' }\r\n  const keys = Object.keys(axes)\r\n  const radius = () => {\r\n    return (typeof length === 'function' ? length() : length) || 1\r\n  }\r\n  return {\r\n    decode: (value: any) => {\r\n      let x: number = 0\r\n      let y: number = 0\r\n      let z: number = 0\r\n      for (const key of keys) {\r\n        switch (axes[key]) {\r\n          case 'right':\r\n            y = value[key]\r\n            break\r\n          case 'left':\r\n            y = -value[key]\r\n            break\r\n          case 'back':\r\n            x = value[key]\r\n            break\r\n          case 'front':\r\n            x = -value[key]\r\n            break\r\n          case 'up':\r\n            z = value[key]\r\n            break\r\n          case 'down':\r\n            z = -value[key]\r\n            break\r\n          default:\r\n            break\r\n        }\r\n      }\r\n      const r = radius()\r\n      x /= r\r\n      y /= r\r\n      z /= r\r\n      return {\r\n        phi: Math.atan2(y, x) || 0,\r\n        theta: Math.atan(Math.sqrt(x * x + y * y) / z) || 0,\r\n      }\r\n    },\r\n    encode: ({ phi, theta }: { phi: number; theta: number }) => {\r\n      const r = radius()\r\n      const x = r * Math.sin(theta) * Math.cos(phi)\r\n      const y = r * Math.sin(theta) * Math.sin(phi)\r\n      const z = r * Math.cos(theta)\r\n      const value = result?.() || {}\r\n      for (const key of keys) {\r\n        switch (axes[key]) {\r\n          case 'right':\r\n            value[key] = y\r\n            break\r\n          case 'left':\r\n            value[key] = -y\r\n            break\r\n          case 'back':\r\n            value[key] = x\r\n            break\r\n          case 'front':\r\n            value[key] = -x\r\n            break\r\n          case 'up':\r\n            value[key] = z\r\n            break\r\n          case 'down':\r\n            value[key] = -z\r\n            break\r\n          default:\r\n            break\r\n        }\r\n      }\r\n      return value\r\n    },\r\n  }\r\n}\r\n"]}

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

@@ -1,36 +1,36 @@
-import { ComponentModel, ValueSource, ComponentAttrs } from '../../core';
-/**
- * Text component attributes
- * @public
- */
-export declare type TextAttrs = ComponentAttrs<TextModel>;
-/**
- * Text component model
- * @public
- */
-export interface TextModel<T = unknown> extends ComponentModel, ValueSource<T, string> {
-    /**
-     * The type name of the control
-     */
-    type: 'text';
-    /**
-     * The placeholder text
-     */
-    placeholder?: string;
-    /**
-     * This is called when the control value has been changed.
-     */
-    onInput?: (model: TextModel<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: TextModel<T>, value: unknown) => void;
-    /**
-     * Disables the control input
-     */
-    disabled?: boolean;
-}
+import { ComponentModel, ValueSource, ComponentAttrs } from '../../core';
+/**
+ * Text component attributes
+ * @public
+ */
+export type TextAttrs = ComponentAttrs<TextModel>;
+/**
+ * Text component model
+ * @public
+ */
+export interface TextModel<T = unknown> extends ComponentModel, ValueSource<T, string> {
+    /**
+     * The type name of the control
+     */
+    type: 'text';
+    /**
+     * The placeholder text
+     */
+    placeholder?: string;
+    /**
+     * This is called when the control value has been changed.
+     */
+    onInput?: (model: TextModel<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: TextModel<T>, value: unknown) => void;
+    /**
+     * Disables the control input
+     */
+    disabled?: boolean;
+}
 //# sourceMappingURL=text.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"text.d.ts","sourceRoot":"","sources":["../../../../src/lib/components/controls/text.ts"],"names":[],"mappings":"AAEA,OAAO,EAIL,cAAc,EACd,WAAW,EACX,cAAc,EACf,MAAM,YAAY,CAAA;AAGnB;;;GAGG;AACH,oBAAY,SAAS,GAAG,cAAc,CAAC,SAAS,CAAC,CAAA;AAEjD;;;GAGG;AACH,MAAM,WAAW,SAAS,CAAC,CAAC,GAAG,OAAO,CACpC,SAAQ,cAAc,EACpB,WAAW,CAAC,CAAC,EAAE,MAAM,CAAC;IACxB;;OAEG;IACH,IAAI,EAAE,MAAM,CAAA;IACZ;;OAEG;IACH,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB;;OAEG;IACH,OAAO,CAAC,EAAE,CAAC,KAAK,EAAE,SAAS,CAAC,CAAC,CAAC,EAAE,KAAK,EAAE,OAAO,KAAK,IAAI,CAAA;IACvD;;;;;OAKG;IACH,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,SAAS,CAAC,CAAC,CAAC,EAAE,KAAK,EAAE,OAAO,KAAK,IAAI,CAAA;IACxD;;OAEG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAA;CACnB"}
+{"version":3,"file":"text.d.ts","sourceRoot":"","sources":["../../../../src/lib/components/controls/text.ts"],"names":[],"mappings":"AAEA,OAAO,EAIL,cAAc,EACd,WAAW,EACX,cAAc,EACf,MAAM,YAAY,CAAA;AAGnB;;;GAGG;AACH,MAAM,MAAM,SAAS,GAAG,cAAc,CAAC,SAAS,CAAC,CAAA;AAEjD;;;GAGG;AACH,MAAM,WAAW,SAAS,CAAC,CAAC,GAAG,OAAO,CACpC,SAAQ,cAAc,EACpB,WAAW,CAAC,CAAC,EAAE,MAAM,CAAC;IACxB;;OAEG;IACH,IAAI,EAAE,MAAM,CAAA;IACZ;;OAEG;IACH,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB;;OAEG;IACH,OAAO,CAAC,EAAE,CAAC,KAAK,EAAE,SAAS,CAAC,CAAC,CAAC,EAAE,KAAK,EAAE,OAAO,KAAK,IAAI,CAAA;IACvD;;;;;OAKG;IACH,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,SAAS,CAAC,CAAC,CAAC,EAAE,KAAK,EAAE,OAAO,KAAK,IAAI,CAAA;IACxD;;OAEG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAA;CACnB"}

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

@@ -0,0 +1,24 @@
+import m from 'mithril';
+import { getValue, component, setValue, } from '../../core';
+import { call, twuiClass, viewFn } from '../../core/utils';
+component('text', (node) => {
+    function onChange(e) {
+        const el = e.target;
+        const data = node.attrs.data;
+        const written = setValue(data, el.value);
+        call(e.type === 'input' ? data.onInput : data.onChange, data, written);
+    }
+    return {
+        view: viewFn((data) => {
+            return m("input[type='text']", {
+                class: twuiClass(data.type),
+                value: getValue(data),
+                oninput: onChange,
+                onchange: onChange,
+                placeholder: data.placeholder,
+                disabled: data.disabled,
+            });
+        }),
+    };
+});
+//# sourceMappingURL=text.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"text.js","sourceRoot":"","sources":["../../../../src/lib/components/controls/text.ts"],"names":[],"mappings":"AAAA,OAAO,CAAC,MAAM,SAAS,CAAA;AAEvB,OAAO,EACL,QAAQ,EACR,SAAS,EACT,QAAQ,GAIT,MAAM,YAAY,CAAA;AACnB,OAAO,EAAE,IAAI,EAAE,SAAS,EAAE,MAAM,EAAE,MAAM,kBAAkB,CAAA;AAwC1D,SAAS,CAAY,MAAM,EAAE,CAAC,IAAI,EAAE,EAAE;IACpC,SAAS,QAAQ,CAAC,CAAQ;QACxB,MAAM,EAAE,GAAG,CAAC,CAAC,MAA0B,CAAA;QACvC,MAAM,IAAI,GAAG,IAAI,CAAC,KAAK,CAAC,IAAI,CAAA;QAC5B,MAAM,OAAO,GAAG,QAAQ,CAAC,IAAI,EAAE,EAAE,CAAC,KAAK,CAAC,CAAA;QACxC,IAAI,CAAC,CAAC,CAAC,IAAI,KAAK,OAAO,CAAC,CAAC,CAAC,IAAI,CAAC,OAAO,CAAC,CAAC,CAAC,IAAI,CAAC,QAAQ,EAAE,IAAI,EAAE,OAAO,CAAC,CAAA;IACxE,CAAC;IAED,OAAO;QACL,IAAI,EAAE,MAAM,CAAC,CAAC,IAAI,EAAE,EAAE;YACpB,OAAO,CAAC,CAAC,oBAAoB,EAAE;gBAC7B,KAAK,EAAE,SAAS,CAAC,IAAI,CAAC,IAAI,CAAC;gBAC3B,KAAK,EAAE,QAAQ,CAAC,IAAI,CAAC;gBACrB,OAAO,EAAE,QAAQ;gBACjB,QAAQ,EAAE,QAAQ;gBAClB,WAAW,EAAE,IAAI,CAAC,WAAW;gBAC7B,QAAQ,EAAE,IAAI,CAAC,QAAQ;aACxB,CAAC,CAAA;QACJ,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  ComponentModel,\r\n  ValueSource,\r\n  ComponentAttrs,\r\n} from '../../core'\r\nimport { call, twuiClass, viewFn } from '../../core/utils'\r\n\r\n/**\r\n * Text component attributes\r\n * @public\r\n */\r\nexport type TextAttrs = ComponentAttrs<TextModel>\r\n\r\n/**\r\n * Text component model\r\n * @public\r\n */\r\nexport interface TextModel<T = unknown>\r\n  extends ComponentModel,\r\n    ValueSource<T, string> {\r\n  /**\r\n   * The type name of the control\r\n   */\r\n  type: 'text'\r\n  /**\r\n   * The placeholder text\r\n   */\r\n  placeholder?: string\r\n  /**\r\n   * This is called when the control value has been changed.\r\n   */\r\n  onInput?: (model: TextModel<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: TextModel<T>, value: unknown) => void\r\n  /**\r\n   * Disables the control input\r\n   */\r\n  disabled?: boolean\r\n}\r\n\r\ncomponent<TextAttrs>('text', (node) => {\r\n  function onChange(e: Event) {\r\n    const el = e.target as HTMLInputElement\r\n    const data = node.attrs.data\r\n    const written = setValue(data, el.value)\r\n    call(e.type === 'input' ? data.onInput : data.onChange, data, written)\r\n  }\r\n\r\n  return {\r\n    view: viewFn((data) => {\r\n      return m(\"input[type='text']\", {\r\n        class: twuiClass(data.type),\r\n        value: getValue(data),\r\n        oninput: onChange,\r\n        onchange: onChange,\r\n        placeholder: data.placeholder,\r\n        disabled: data.disabled,\r\n      })\r\n    }),\r\n  }\r\n})\r\n"]}

package/dist/lib/components/groups/accordion.d.ts

@@ -1,22 +1,22 @@
-import { ComponentAttrs, ComponentGroupModel } from '../../core';
-import { GroupModel } from './group';
-/**
- * Accordeon component attribuets
- * @public
- */
-export declare type AccordeonAtts = ComponentAttrs<AccordeonModel>;
-/**
- * Accordeon component model
- * @public
- */
-export interface AccordeonModel extends ComponentGroupModel<GroupModel> {
-    /**
-     * The type name of the control
-     */
-    type: 'accordion';
-    /**
-     * The index of the group that should be open initially
-     */
-    expand?: number;
-}
+import { ComponentAttrs, ComponentGroupModel } from '../../core';
+import { GroupModel } from './group';
+/**
+ * Accordeon component attribuets
+ * @public
+ */
+export type AccordeonAtts = ComponentAttrs<AccordeonModel>;
+/**
+ * Accordeon component model
+ * @public
+ */
+export interface AccordeonModel extends ComponentGroupModel<GroupModel> {
+    /**
+     * The type name of the control
+     */
+    type: 'accordion';
+    /**
+     * The index of the group that should be open initially
+     */
+    expand?: number;
+}
 //# sourceMappingURL=accordion.d.ts.map

package/dist/lib/components/groups/accordion.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"accordion.d.ts","sourceRoot":"","sources":["../../../../src/lib/components/groups/accordion.ts"],"names":[],"mappings":"AAEA,OAAO,EAA0B,cAAc,EAAE,mBAAmB,EAAE,MAAM,YAAY,CAAA;AAExF,OAAO,EAAE,UAAU,EAAE,MAAM,SAAS,CAAA;AAEpC;;;GAGG;AACH,oBAAY,aAAa,GAAG,cAAc,CAAC,cAAc,CAAC,CAAA;AAE1D;;;GAGG;AACH,MAAM,WAAW,cAAe,SAAQ,mBAAmB,CAAC,UAAU,CAAC;IACrE;;OAEG;IACH,IAAI,EAAE,WAAW,CAAA;IACjB;;OAEG;IACH,MAAM,CAAC,EAAE,MAAM,CAAA;CAChB"}
+{"version":3,"file":"accordion.d.ts","sourceRoot":"","sources":["../../../../src/lib/components/groups/accordion.ts"],"names":[],"mappings":"AAEA,OAAO,EAA0B,cAAc,EAAE,mBAAmB,EAAE,MAAM,YAAY,CAAA;AAExF,OAAO,EAAE,UAAU,EAAE,MAAM,SAAS,CAAA;AAEpC;;;GAGG;AACH,MAAM,MAAM,aAAa,GAAG,cAAc,CAAC,cAAc,CAAC,CAAA;AAE1D;;;GAGG;AACH,MAAM,WAAW,cAAe,SAAQ,mBAAmB,CAAC,UAAU,CAAC;IACrE;;OAEG;IACH,IAAI,EAAE,WAAW,CAAA;IACjB;;OAEG;IACH,MAAM,CAAC,EAAE,MAAM,CAAA;CAChB"}

package/dist/lib/components/groups/accordion.js

@@ -0,0 +1,34 @@
+import m from 'mithril';
+import { component, renderModel } from '../../core';
+import { viewFn } from '../../core/utils';
+const TYPE = 'accordion';
+const EMPTY = [];
+component(TYPE, () => {
+    return {
+        view: viewFn((data) => {
+            const children = data.children || EMPTY;
+            data.expand = detectExpanded(data.expand, children);
+            return m.fragment({}, children.map((group, i) => {
+                group.type = 'group';
+                group.collapsible = true;
+                group.collapsed = i !== data.expand;
+                return renderModel(group);
+            }));
+        }),
+    };
+});
+function detectExpanded(index, list) {
+    let result = null;
+    for (let i = 0; i < list.length; i++) {
+        if (!list[i].collapsed) {
+            if (i !== index) {
+                return i;
+            }
+            if (result == null) {
+                result = i;
+            }
+        }
+    }
+    return result;
+}
+//# sourceMappingURL=accordion.js.map

package/dist/lib/components/groups/accordion.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"accordion.js","sourceRoot":"","sources":["../../../../src/lib/components/groups/accordion.ts"],"names":[],"mappings":"AAAA,OAAO,CAAC,MAAM,SAAS,CAAA;AAEvB,OAAO,EAAE,SAAS,EAAE,WAAW,EAAuC,MAAM,YAAY,CAAA;AACxF,OAAO,EAAE,MAAM,EAAE,MAAM,kBAAkB,CAAA;AAwBzC,MAAM,IAAI,GAAG,WAAW,CAAA;AACxB,MAAM,KAAK,GAAiB,EAAE,CAAA;AAE9B,SAAS,CAAgB,IAAI,EAAE,GAAG,EAAE;IAClC,OAAO;QACL,IAAI,EAAE,MAAM,CAAC,CAAC,IAAI,EAAE,EAAE;YACpB,MAAM,QAAQ,GAAG,IAAI,CAAC,QAAQ,IAAI,KAAK,CAAA;YACvC,IAAI,CAAC,MAAM,GAAG,cAAc,CAAC,IAAI,CAAC,MAAM,EAAE,QAAQ,CAAC,CAAA;YACnD,OAAO,CAAC,CAAC,QAAQ,CAAC,EAAE,EAAE,QAAQ,CAAC,GAAG,CAAC,CAAC,KAAK,EAAE,CAAC,EAAE,EAAE;gBAC9C,KAAK,CAAC,IAAI,GAAG,OAAO,CAAA;gBACpB,KAAK,CAAC,WAAW,GAAG,IAAI,CAAA;gBACxB,KAAK,CAAC,SAAS,GAAG,CAAC,KAAK,IAAI,CAAC,MAAM,CAAA;gBACnC,OAAO,WAAW,CAAa,KAAK,CAAC,CAAA;YACvC,CAAC,CAAC,CAAC,CAAA;QACL,CAAC,CAAC;KACH,CAAA;AACH,CAAC,CAAC,CAAA;AAEF,SAAS,cAAc,CAAC,KAAa,EAAE,IAAkB;IACvD,IAAI,MAAM,GAAG,IAAI,CAAA;IACjB,KAAK,IAAI,CAAC,GAAG,CAAC,EAAE,CAAC,GAAG,IAAI,CAAC,MAAM,EAAE,CAAC,EAAE,EAAE,CAAC;QACrC,IAAI,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC,SAAS,EAAE,CAAC;YACvB,IAAI,CAAC,KAAK,KAAK,EAAE,CAAC;gBAChB,OAAO,CAAC,CAAA;YACV,CAAC;YACD,IAAI,MAAM,IAAI,IAAI,EAAE,CAAC;gBACnB,MAAM,GAAG,CAAC,CAAA;YACZ,CAAC;QACH,CAAC;IACH,CAAC;IACD,OAAO,MAAM,CAAA;AACf,CAAC","sourcesContent":["import m from 'mithril'\r\n\r\nimport { component, renderModel, ComponentAttrs, ComponentGroupModel } from '../../core'\r\nimport { viewFn } from '../../core/utils'\r\nimport { GroupModel } from './group'\r\n\r\n/**\r\n * Accordeon component attribuets\r\n * @public\r\n */\r\nexport type AccordeonAtts = ComponentAttrs<AccordeonModel>\r\n\r\n/**\r\n * Accordeon component model\r\n * @public\r\n */\r\nexport interface AccordeonModel extends ComponentGroupModel<GroupModel> {\r\n  /**\r\n   * The type name of the control\r\n   */\r\n  type: 'accordion'\r\n  /**\r\n   * The index of the group that should be open initially\r\n   */\r\n  expand?: number\r\n}\r\n\r\nconst TYPE = 'accordion'\r\nconst EMPTY: GroupModel[] = []\r\n\r\ncomponent<AccordeonAtts>(TYPE, () => {\r\n  return {\r\n    view: viewFn((data) => {\r\n      const children = data.children || EMPTY\r\n      data.expand = detectExpanded(data.expand, children)\r\n      return m.fragment({}, children.map((group, i) => {\r\n        group.type = 'group'\r\n        group.collapsible = true\r\n        group.collapsed = i !== data.expand\r\n        return renderModel<GroupModel>(group)\r\n      }))\r\n    }),\r\n  }\r\n})\r\n\r\nfunction detectExpanded(index: number, list: GroupModel[]) {\r\n  let result = null\r\n  for (let i = 0; i < list.length; i++) {\r\n    if (!list[i].collapsed) {\r\n      if (i !== index) {\r\n        return i\r\n      }\r\n      if (result == null) {\r\n        result = i\r\n      }\r\n    }\r\n  }\r\n  return result\r\n}\r\n"]}

package/dist/lib/components/groups/container.d.ts

@@ -1,25 +1,25 @@
-import { ComponentGroupModel, ComponentAttrs, ComponentModel } from '../../core';
-/**
- * Container component attributes
- * @public
- */
-export declare type ContainerAttrs = ComponentAttrs<ContainerModel>;
-/**
- * Container component model
- * @public
- */
-export interface ContainerModel extends ComponentGroupModel<ComponentModel> {
-    /**
-     * Component type name
-     */
-    type: 'container';
-    /**
-     * Enables horizontal layout
-     */
-    horizontal?: boolean;
-    /**
-     * Custom CSS Style
-     */
-    style?: Partial<CSSStyleDeclaration>;
-}
+import { ComponentGroupModel, ComponentAttrs, ComponentModel } from '../../core';
+/**
+ * Container component attributes
+ * @public
+ */
+export type ContainerAttrs = ComponentAttrs<ContainerModel>;
+/**
+ * Container component model
+ * @public
+ */
+export interface ContainerModel extends ComponentGroupModel<ComponentModel> {
+    /**
+     * Component type name
+     */
+    type: 'container';
+    /**
+     * Enables horizontal layout
+     */
+    horizontal?: boolean;
+    /**
+     * Custom CSS Style
+     */
+    style?: Partial<CSSStyleDeclaration>;
+}
 //# sourceMappingURL=container.d.ts.map

package/dist/lib/components/groups/container.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"container.d.ts","sourceRoot":"","sources":["../../../../src/lib/components/groups/container.ts"],"names":[],"mappings":"AAEA,OAAO,EAGL,mBAAmB,EACnB,cAAc,EACd,cAAc,EACf,MAAM,YAAY,CAAA;AAGnB;;;GAGG;AACH,oBAAY,cAAc,GAAG,cAAc,CAAC,cAAc,CAAC,CAAA;AAE3D;;;GAGG;AACH,MAAM,WAAW,cAAe,SAAQ,mBAAmB,CAAC,cAAc,CAAC;IACzE;;OAEG;IACH,IAAI,EAAE,WAAW,CAAA;IACjB;;OAEG;IACH,UAAU,CAAC,EAAE,OAAO,CAAA;IACpB;;OAEG;IACH,KAAK,CAAC,EAAE,OAAO,CAAC,mBAAmB,CAAC,CAAA;CACrC"}
+{"version":3,"file":"container.d.ts","sourceRoot":"","sources":["../../../../src/lib/components/groups/container.ts"],"names":[],"mappings":"AAEA,OAAO,EAGL,mBAAmB,EACnB,cAAc,EACd,cAAc,EACf,MAAM,YAAY,CAAA;AAGnB;;;GAGG;AACH,MAAM,MAAM,cAAc,GAAG,cAAc,CAAC,cAAc,CAAC,CAAA;AAE3D;;;GAGG;AACH,MAAM,WAAW,cAAe,SAAQ,mBAAmB,CAAC,cAAc,CAAC;IACzE;;OAEG;IACH,IAAI,EAAE,WAAW,CAAA;IACjB;;OAEG;IACH,UAAU,CAAC,EAAE,OAAO,CAAA;IACpB;;OAEG;IACH,KAAK,CAAC,EAAE,OAAO,CAAC,mBAAmB,CAAC,CAAA;CACrC"}

package/dist/lib/components/groups/container.js

@@ -0,0 +1,19 @@
+import m from 'mithril';
+import { component, renderModel, } from '../../core';
+import { cssClass, twuiClass, viewFn } from '../../core/utils';
+const TYPE = 'container';
+component(TYPE, () => {
+    return {
+        view: viewFn((data) => {
+            var _a;
+            return m('div', {
+                class: cssClass({
+                    [twuiClass(TYPE)]: true,
+                    [twuiClass(TYPE, 'horizontal')]: data.horizontal,
+                }),
+                style: data.style,
+            }, m.fragment({}, (_a = data.children) === null || _a === void 0 ? void 0 : _a.map(renderModel)));
+        }),
+    };
+});
+//# sourceMappingURL=container.js.map

package/dist/lib/components/groups/container.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"container.js","sourceRoot":"","sources":["../../../../src/lib/components/groups/container.ts"],"names":[],"mappings":"AAAA,OAAO,CAAC,MAAM,SAAS,CAAA;AAEvB,OAAO,EACL,SAAS,EACT,WAAW,GAIZ,MAAM,YAAY,CAAA;AACnB,OAAO,EAAE,QAAQ,EAAE,SAAS,EAAE,MAAM,EAAE,MAAM,kBAAkB,CAAA;AA2B9D,MAAM,IAAI,GAAG,WAAW,CAAA;AACxB,SAAS,CAAiB,IAAI,EAAE,GAAG,EAAE;IACnC,OAAO;QACL,IAAI,EAAE,MAAM,CAAC,CAAC,IAAI,EAAE,EAAE;;YACpB,OAAA,CAAC,CACC,KAAK,EACL;gBACE,KAAK,EAAE,QAAQ,CAAC;oBACd,CAAC,SAAS,CAAC,IAAI,CAAC,CAAC,EAAE,IAAI;oBACvB,CAAC,SAAS,CAAC,IAAI,EAAE,YAAY,CAAC,CAAC,EAAE,IAAI,CAAC,UAAU;iBACjD,CAAC;gBACF,KAAK,EAAE,IAAI,CAAC,KAAK;aAClB,EACD,CAAC,CAAC,QAAQ,CAAC,EAAE,EAAE,MAAA,IAAI,CAAC,QAAQ,0CAAE,GAAG,CAAC,WAAW,CAAC,CAAC,CAChD,CAAA;SAAA,CACF;KACF,CAAA;AACH,CAAC,CAAC,CAAA","sourcesContent":["import m from 'mithril'\r\n\r\nimport {\r\n  component,\r\n  renderModel,\r\n  ComponentGroupModel,\r\n  ComponentAttrs,\r\n  ComponentModel,\r\n} from '../../core'\r\nimport { cssClass, twuiClass, viewFn } from '../../core/utils'\r\n\r\n/**\r\n * Container component attributes\r\n * @public\r\n */\r\nexport type ContainerAttrs = ComponentAttrs<ContainerModel>\r\n\r\n/**\r\n * Container component model\r\n * @public\r\n */\r\nexport interface ContainerModel extends ComponentGroupModel<ComponentModel> {\r\n  /**\r\n   * Component type name\r\n   */\r\n  type: 'container'\r\n  /**\r\n   * Enables horizontal layout\r\n   */\r\n  horizontal?: boolean\r\n  /**\r\n   * Custom CSS Style\r\n   */\r\n  style?: Partial<CSSStyleDeclaration>\r\n}\r\n\r\nconst TYPE = 'container'\r\ncomponent<ContainerAttrs>(TYPE, () => {\r\n  return {\r\n    view: viewFn((data) =>\r\n      m(\r\n        'div',\r\n        {\r\n          class: cssClass({\r\n            [twuiClass(TYPE)]: true,\r\n            [twuiClass(TYPE, 'horizontal')]: data.horizontal,\r\n          }),\r\n          style: data.style,\r\n        },\r\n        m.fragment({}, data.children?.map(renderModel)),\r\n      ),\r\n    ),\r\n  }\r\n})\r\n"]}