tweak-ui 0.5.0 → 0.8.2
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/.assetsignore +2 -0
- package/dist/index.d.ts +2 -0
- package/dist/index.d.ts.map +1 -0
- package/dist/lib/builder.d.ts +78 -140
- package/dist/lib/builder.d.ts.map +1 -1
- package/dist/lib/color/adapter.d.ts +7 -0
- package/dist/lib/color/adapter.d.ts.map +1 -0
- package/dist/lib/color/array-format.d.ts +9 -0
- package/dist/lib/color/array-format.d.ts.map +1 -0
- package/dist/lib/color/converter.d.ts.map +1 -0
- package/dist/lib/color/css-string-format.d.ts +8 -0
- package/dist/lib/color/css-string-format.d.ts.map +1 -0
- package/dist/lib/color/formatter.d.ts +9 -0
- package/dist/lib/color/formatter.d.ts.map +1 -0
- package/dist/lib/color/hex-string-format.d.ts +9 -0
- package/dist/lib/color/hex-string-format.d.ts.map +1 -0
- package/dist/lib/color/index.d.ts.map +1 -0
- package/dist/lib/color/number-format.d.ts +9 -0
- package/dist/lib/color/number-format.d.ts.map +1 -0
- package/dist/lib/{color-formats → color}/object-format.d.ts +4 -4
- package/dist/lib/color/object-format.d.ts.map +1 -0
- package/dist/lib/{color-formats → color}/types.d.ts +15 -9
- package/dist/lib/color/types.d.ts.map +1 -0
- package/dist/lib/components/container/bar.d.ts +28 -0
- package/dist/lib/components/container/bar.d.ts.map +1 -0
- package/dist/lib/components/container/dialog.d.ts +14 -0
- package/dist/lib/components/container/dialog.d.ts.map +1 -0
- package/dist/lib/components/container/grid.d.ts +22 -0
- package/dist/lib/components/container/grid.d.ts.map +1 -0
- package/dist/lib/components/container/group.d.ts +55 -0
- package/dist/lib/components/container/group.d.ts.map +1 -0
- package/dist/lib/components/container/index.d.ts +10 -0
- package/dist/lib/components/container/index.d.ts.map +1 -0
- package/dist/lib/components/container/list.d.ts +25 -0
- package/dist/lib/components/container/list.d.ts.map +1 -0
- package/dist/lib/components/container/section.d.ts +28 -0
- package/dist/lib/components/container/section.d.ts.map +1 -0
- package/dist/lib/components/container/split.d.ts +40 -0
- package/dist/lib/components/container/split.d.ts.map +1 -0
- package/dist/lib/components/container/tabs.d.ts +23 -0
- package/dist/lib/components/container/tabs.d.ts.map +1 -0
- package/dist/lib/components/container/tree.d.ts +25 -0
- package/dist/lib/components/container/tree.d.ts.map +1 -0
- package/dist/lib/components/controls/angle.d.ts +29 -33
- package/dist/lib/components/controls/angle.d.ts.map +1 -1
- package/dist/lib/components/controls/bitmask.d.ts +41 -0
- package/dist/lib/components/controls/bitmask.d.ts.map +1 -0
- package/dist/lib/components/controls/bool.d.ts +52 -0
- package/dist/lib/components/controls/bool.d.ts.map +1 -0
- package/dist/lib/components/controls/color-picker.d.ts +12 -27
- package/dist/lib/components/controls/color-picker.d.ts.map +1 -1
- package/dist/lib/components/controls/color.d.ts +12 -26
- package/dist/lib/components/controls/color.d.ts.map +1 -1
- package/dist/lib/components/controls/index.d.ts +9 -5
- package/dist/lib/components/controls/index.d.ts.map +1 -1
- package/dist/lib/components/controls/input.d.ts +44 -0
- package/dist/lib/components/controls/input.d.ts.map +1 -0
- package/dist/lib/components/controls/matrix.d.ts +58 -0
- package/dist/lib/components/controls/matrix.d.ts.map +1 -0
- package/dist/lib/components/controls/point.d.ts +15 -16
- package/dist/lib/components/controls/point.d.ts.map +1 -1
- package/dist/lib/components/controls/poll.d.ts +12 -0
- package/dist/lib/components/controls/poll.d.ts.map +1 -0
- package/dist/lib/components/controls/scalar.d.ts +67 -0
- package/dist/lib/components/controls/scalar.d.ts.map +1 -0
- package/dist/lib/components/controls/select.d.ts +8 -14
- package/dist/lib/components/controls/select.d.ts.map +1 -1
- package/dist/lib/components/controls/spherical.d.ts +23 -55
- package/dist/lib/components/controls/spherical.d.ts.map +1 -1
- package/dist/lib/components/controls/string.d.ts +46 -0
- package/dist/lib/components/controls/string.d.ts.map +1 -0
- package/dist/lib/components/controls/vector.d.ts +54 -0
- package/dist/lib/components/controls/vector.d.ts.map +1 -0
- package/dist/lib/components/elements/button.d.ts +36 -0
- package/dist/lib/components/elements/button.d.ts.map +1 -0
- package/dist/lib/components/elements/divider.d.ts +4 -0
- package/dist/lib/components/elements/divider.d.ts.map +1 -0
- package/dist/lib/components/elements/graph.d.ts +8 -0
- package/dist/lib/components/elements/graph.d.ts.map +1 -0
- package/dist/lib/components/elements/image.d.ts +33 -0
- package/dist/lib/components/elements/image.d.ts.map +1 -0
- package/dist/lib/components/elements/index.d.ts +6 -0
- package/dist/lib/components/elements/index.d.ts.map +1 -0
- package/dist/lib/components/elements/widget.d.ts +31 -0
- package/dist/lib/components/elements/widget.d.ts.map +1 -0
- package/dist/lib/components/index.d.ts +2 -4
- package/dist/lib/components/index.d.ts.map +1 -1
- package/dist/lib/core/control.d.ts +20 -0
- package/dist/lib/core/control.d.ts.map +1 -0
- package/dist/lib/core/index.d.ts +1 -2
- package/dist/lib/core/index.d.ts.map +1 -1
- package/dist/lib/core/render.d.ts +7 -9
- package/dist/lib/core/render.d.ts.map +1 -1
- package/dist/lib/core/types.d.ts +46 -60
- package/dist/lib/core/types.d.ts.map +1 -1
- package/dist/lib/core/utils.d.ts +19 -33
- package/dist/lib/core/utils.d.ts.map +1 -1
- package/dist/lib/index.d.ts +2 -2
- package/dist/lib/index.d.ts.map +1 -1
- package/dist/lib/mount.d.ts +6 -16
- package/dist/lib/mount.d.ts.map +1 -1
- package/dist/lib/stats/index.d.ts +2 -0
- package/dist/lib/stats/index.d.ts.map +1 -0
- package/dist/lib/stats/sampler.d.ts +66 -0
- package/dist/lib/stats/sampler.d.ts.map +1 -0
- package/dist/lib/stats/stats-renderer.d.ts +16 -0
- package/dist/lib/stats/stats-renderer.d.ts.map +1 -0
- package/dist/style.css +1 -0
- package/dist/style.d.ts +4 -0
- package/dist/tweak-ui.module.js +2959 -2738
- package/dist/tweak-ui.module.js.map +1 -1
- package/dist/tweak-ui.umd.js +33 -2
- package/dist/tweak-ui.umd.js.map +1 -1
- package/dist/wrangler.json +1 -0
- package/package.json +34 -23
- package/dist/lib/builder.js +0 -250
- package/dist/lib/builder.js.map +0 -1
- package/dist/lib/color-formats/array-format.d.ts +0 -9
- package/dist/lib/color-formats/array-format.d.ts.map +0 -1
- package/dist/lib/color-formats/array-format.js +0 -18
- package/dist/lib/color-formats/array-format.js.map +0 -1
- package/dist/lib/color-formats/converter.d.ts.map +0 -1
- package/dist/lib/color-formats/converter.js +0 -85
- package/dist/lib/color-formats/converter.js.map +0 -1
- package/dist/lib/color-formats/css-string-format.d.ts +0 -8
- package/dist/lib/color-formats/css-string-format.d.ts.map +0 -1
- package/dist/lib/color-formats/css-string-format.js +0 -28
- package/dist/lib/color-formats/css-string-format.js.map +0 -1
- package/dist/lib/color-formats/formatter.d.ts +0 -9
- package/dist/lib/color-formats/formatter.d.ts.map +0 -1
- package/dist/lib/color-formats/formatter.js +0 -35
- package/dist/lib/color-formats/formatter.js.map +0 -1
- package/dist/lib/color-formats/hex-string-format.d.ts +0 -8
- package/dist/lib/color-formats/hex-string-format.d.ts.map +0 -1
- package/dist/lib/color-formats/hex-string-format.js +0 -28
- package/dist/lib/color-formats/hex-string-format.js.map +0 -1
- package/dist/lib/color-formats/index.d.ts.map +0 -1
- package/dist/lib/color-formats/index.js +0 -4
- package/dist/lib/color-formats/index.js.map +0 -1
- package/dist/lib/color-formats/number-format.d.ts +0 -9
- package/dist/lib/color-formats/number-format.d.ts.map +0 -1
- package/dist/lib/color-formats/number-format.js +0 -23
- package/dist/lib/color-formats/number-format.js.map +0 -1
- package/dist/lib/color-formats/object-format.d.ts.map +0 -1
- package/dist/lib/color-formats/object-format.js +0 -23
- package/dist/lib/color-formats/object-format.js.map +0 -1
- package/dist/lib/color-formats/types.d.ts.map +0 -1
- package/dist/lib/color-formats/types.js +0 -2
- package/dist/lib/color-formats/types.js.map +0 -1
- package/dist/lib/components/button.d.ts +0 -29
- package/dist/lib/components/button.d.ts.map +0 -1
- package/dist/lib/components/button.js +0 -15
- package/dist/lib/components/button.js.map +0 -1
- package/dist/lib/components/content.d.ts +0 -22
- package/dist/lib/components/content.d.ts.map +0 -1
- package/dist/lib/components/content.js +0 -10
- package/dist/lib/components/content.js.map +0 -1
- package/dist/lib/components/controls/angle.js +0 -201
- package/dist/lib/components/controls/angle.js.map +0 -1
- package/dist/lib/components/controls/checkbox.d.ts +0 -29
- package/dist/lib/components/controls/checkbox.d.ts.map +0 -1
- package/dist/lib/components/controls/checkbox.js +0 -31
- package/dist/lib/components/controls/checkbox.js.map +0 -1
- package/dist/lib/components/controls/color-picker.js +0 -267
- package/dist/lib/components/controls/color-picker.js.map +0 -1
- package/dist/lib/components/controls/color.js +0 -77
- package/dist/lib/components/controls/color.js.map +0 -1
- package/dist/lib/components/controls/index.js +0 -11
- package/dist/lib/components/controls/index.js.map +0 -1
- package/dist/lib/components/controls/number.d.ts +0 -48
- package/dist/lib/components/controls/number.d.ts.map +0 -1
- package/dist/lib/components/controls/number.js +0 -142
- package/dist/lib/components/controls/number.js.map +0 -1
- package/dist/lib/components/controls/point.js +0 -137
- package/dist/lib/components/controls/point.js.map +0 -1
- package/dist/lib/components/controls/position.d.ts +0 -56
- package/dist/lib/components/controls/position.d.ts.map +0 -1
- package/dist/lib/components/controls/position.js +0 -36
- package/dist/lib/components/controls/position.js.map +0 -1
- package/dist/lib/components/controls/select.js +0 -132
- package/dist/lib/components/controls/select.js.map +0 -1
- package/dist/lib/components/controls/spherical.js +0 -302
- package/dist/lib/components/controls/spherical.js.map +0 -1
- package/dist/lib/components/controls/text.d.ts +0 -36
- package/dist/lib/components/controls/text.d.ts.map +0 -1
- package/dist/lib/components/controls/text.js +0 -24
- package/dist/lib/components/controls/text.js.map +0 -1
- package/dist/lib/components/groups/accordion.d.ts +0 -22
- package/dist/lib/components/groups/accordion.d.ts.map +0 -1
- package/dist/lib/components/groups/accordion.js +0 -34
- package/dist/lib/components/groups/accordion.js.map +0 -1
- package/dist/lib/components/groups/container.d.ts +0 -25
- package/dist/lib/components/groups/container.d.ts.map +0 -1
- package/dist/lib/components/groups/container.js +0 -19
- package/dist/lib/components/groups/container.js.map +0 -1
- package/dist/lib/components/groups/group.d.ts +0 -49
- package/dist/lib/components/groups/group.d.ts.map +0 -1
- package/dist/lib/components/groups/group.js +0 -50
- package/dist/lib/components/groups/group.js.map +0 -1
- package/dist/lib/components/groups/index.d.ts +0 -5
- package/dist/lib/components/groups/index.d.ts.map +0 -1
- package/dist/lib/components/groups/index.js +0 -5
- package/dist/lib/components/groups/index.js.map +0 -1
- package/dist/lib/components/groups/tabs.d.ts +0 -22
- package/dist/lib/components/groups/tabs.d.ts.map +0 -1
- package/dist/lib/components/groups/tabs.js +0 -31
- package/dist/lib/components/groups/tabs.js.map +0 -1
- package/dist/lib/components/image.d.ts +0 -37
- package/dist/lib/components/image.d.ts.map +0 -1
- package/dist/lib/components/image.js +0 -46
- package/dist/lib/components/image.js.map +0 -1
- package/dist/lib/components/index.js +0 -6
- package/dist/lib/components/index.js.map +0 -1
- package/dist/lib/core/index.js +0 -5
- package/dist/lib/core/index.js.map +0 -1
- package/dist/lib/core/registry.d.ts +0 -18
- package/dist/lib/core/registry.d.ts.map +0 -1
- package/dist/lib/core/registry.js +0 -30
- package/dist/lib/core/registry.js.map +0 -1
- package/dist/lib/core/render.js +0 -19
- package/dist/lib/core/render.js.map +0 -1
- package/dist/lib/core/types.js +0 -2
- package/dist/lib/core/types.js.map +0 -1
- package/dist/lib/core/utils.js +0 -193
- package/dist/lib/core/utils.js.map +0 -1
- package/dist/lib/core/value-accessor.d.ts +0 -18
- package/dist/lib/core/value-accessor.d.ts.map +0 -1
- package/dist/lib/core/value-accessor.js +0 -52
- package/dist/lib/core/value-accessor.js.map +0 -1
- package/dist/lib/index.js +0 -29
- package/dist/lib/index.js.map +0 -1
- package/dist/lib/mount.js +0 -85
- package/dist/lib/mount.js.map +0 -1
- package/dist/tweak-ui.css +0 -648
- package/dist/tweak-ui.css.map +0 -1
- package/dist/tweak-ui.min.css +0 -1
- package/dist/tweak-ui.min.css.map +0 -1
- /package/dist/lib/{color-formats → color}/converter.d.ts +0 -0
- /package/dist/lib/{color-formats → color}/index.d.ts +0 -0
|
@@ -1,8 +0,0 @@
|
|
|
1
|
-
import { ColorFormatter, RGBA } from './types';
|
|
2
|
-
export declare class HexStringFormat implements ColorFormatter<string> {
|
|
3
|
-
private components;
|
|
4
|
-
constructor(components: string[]);
|
|
5
|
-
parse(value?: string): RGBA;
|
|
6
|
-
format(rgba: RGBA): string;
|
|
7
|
-
}
|
|
8
|
-
//# sourceMappingURL=hex-string-format.d.ts.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"hex-string-format.d.ts","sourceRoot":"","sources":["../../../src/lib/color-formats/hex-string-format.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,cAAc,EAAE,IAAI,EAAE,MAAM,SAAS,CAAA;AAE9C,qBAAa,eAAgB,YAAW,cAAc,CAAC,MAAM,CAAC;IAChD,OAAO,CAAC,UAAU;gBAAV,UAAU,EAAE,MAAM,EAAE;IACjC,KAAK,CAAC,KAAK,CAAC,EAAE,MAAM;IAgBpB,MAAM,CAAC,IAAI,EAAE,IAAI;CAQzB"}
|
|
@@ -1,28 +0,0 @@
|
|
|
1
|
-
import { padLeft } from '../core/utils';
|
|
2
|
-
export class HexStringFormat {
|
|
3
|
-
constructor(components) {
|
|
4
|
-
this.components = components;
|
|
5
|
-
}
|
|
6
|
-
parse(value) {
|
|
7
|
-
value = value || '#000';
|
|
8
|
-
const result = { r: 0, g: 0, b: 0, a: 1 };
|
|
9
|
-
let v = value.match(/[0-9a-f]+/i)[0];
|
|
10
|
-
if (v.length === this.components.length) {
|
|
11
|
-
v = v
|
|
12
|
-
.split('')
|
|
13
|
-
.map((it) => `${it}${it}`)
|
|
14
|
-
.join('');
|
|
15
|
-
}
|
|
16
|
-
this.components.forEach((key, i) => {
|
|
17
|
-
result[key] = parseInt(v.substr(i * 2, 2), 16) / 255;
|
|
18
|
-
});
|
|
19
|
-
return result;
|
|
20
|
-
}
|
|
21
|
-
format(rgba) {
|
|
22
|
-
return ('#' +
|
|
23
|
-
this.components
|
|
24
|
-
.map((key) => padLeft(Math.round(rgba[key] * 255).toString(16), 2, '0'))
|
|
25
|
-
.join(''));
|
|
26
|
-
}
|
|
27
|
-
}
|
|
28
|
-
//# sourceMappingURL=hex-string-format.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"hex-string-format.js","sourceRoot":"","sources":["../../../src/lib/color-formats/hex-string-format.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,eAAe,CAAA;AAGvC,MAAM,OAAO,eAAe;IAC1B,YAAoB,UAAoB;QAApB,eAAU,GAAV,UAAU,CAAU;IAAG,CAAC;IACrC,KAAK,CAAC,KAAc;QACzB,KAAK,GAAG,KAAK,IAAI,MAAM,CAAA;QACvB,MAAM,MAAM,GAAS,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,CAAA;QAC/C,IAAI,CAAC,GAAW,KAAK,CAAC,KAAK,CAAC,YAAY,CAAC,CAAC,CAAC,CAAC,CAAA;QAC5C,IAAI,CAAC,CAAC,MAAM,KAAK,IAAI,CAAC,UAAU,CAAC,MAAM,EAAE,CAAC;YACxC,CAAC,GAAG,CAAC;iBACF,KAAK,CAAC,EAAE,CAAC;iBACT,GAAG,CAAC,CAAC,EAAE,EAAE,EAAE,CAAC,GAAG,EAAE,GAAG,EAAE,EAAE,CAAC;iBACzB,IAAI,CAAC,EAAE,CAAC,CAAA;QACb,CAAC;QACD,IAAI,CAAC,UAAU,CAAC,OAAO,CAAC,CAAC,GAAG,EAAE,CAAC,EAAE,EAAE;YACjC,MAAM,CAAC,GAAG,CAAC,GAAG,QAAQ,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,GAAG,CAAC,EAAE,CAAC,CAAC,EAAE,EAAE,CAAC,GAAG,GAAG,CAAA;QACtD,CAAC,CAAC,CAAA;QACF,OAAO,MAAM,CAAA;IACf,CAAC;IAEM,MAAM,CAAC,IAAU;QACtB,OAAO,CACL,GAAG;YACH,IAAI,CAAC,UAAU;iBACZ,GAAG,CAAC,CAAC,GAAG,EAAE,EAAE,CAAC,OAAO,CAAC,IAAI,CAAC,KAAK,CAAC,IAAI,CAAC,GAAG,CAAC,GAAG,GAAG,CAAC,CAAC,QAAQ,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,GAAG,CAAC,CAAC;iBACvE,IAAI,CAAC,EAAE,CAAC,CACZ,CAAA;IACH,CAAC;CACF","sourcesContent":["import { padLeft } from '../core/utils'\r\nimport { ColorFormatter, RGBA } from './types'\r\n\r\nexport class HexStringFormat implements ColorFormatter<string> {\r\n constructor(private components: string[]) {}\r\n public parse(value?: string) {\r\n value = value || '#000'\r\n const result: RGBA = { r: 0, g: 0, b: 0, a: 1 }\r\n let v: string = value.match(/[0-9a-f]+/i)[0]\r\n if (v.length === this.components.length) {\r\n v = v\r\n .split('')\r\n .map((it) => `${it}${it}`)\r\n .join('')\r\n }\r\n this.components.forEach((key, i) => {\r\n result[key] = parseInt(v.substr(i * 2, 2), 16) / 255\r\n })\r\n return result\r\n }\r\n\r\n public format(rgba: RGBA) {\r\n return (\r\n '#' +\r\n this.components\r\n .map((key) => padLeft(Math.round(rgba[key] * 255).toString(16), 2, '0'))\r\n .join('')\r\n )\r\n }\r\n}\r\n"]}
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/lib/color-formats/index.ts"],"names":[],"mappings":"AAAA,cAAc,SAAS,CAAA;AACvB,cAAc,aAAa,CAAA;AAC3B,cAAc,aAAa,CAAA"}
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/lib/color-formats/index.ts"],"names":[],"mappings":"AAAA,cAAc,SAAS,CAAA;AACvB,cAAc,aAAa,CAAA;AAC3B,cAAc,aAAa,CAAA","sourcesContent":["export * from './types'\r\nexport * from './converter'\r\nexport * from './formatter'\r\n"]}
|
|
@@ -1,9 +0,0 @@
|
|
|
1
|
-
import { ColorFormatter, RGBA } from './types';
|
|
2
|
-
export declare class NumberColorFormat implements ColorFormatter<number> {
|
|
3
|
-
private components;
|
|
4
|
-
private componentsRev;
|
|
5
|
-
constructor(components: string[]);
|
|
6
|
-
parse(v: number): RGBA;
|
|
7
|
-
format(rgba: RGBA): number;
|
|
8
|
-
}
|
|
9
|
-
//# sourceMappingURL=number-format.d.ts.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"number-format.d.ts","sourceRoot":"","sources":["../../../src/lib/color-formats/number-format.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,cAAc,EAAE,IAAI,EAAE,MAAM,SAAS,CAAA;AAE9C,qBAAa,iBAAkB,YAAW,cAAc,CAAC,MAAM,CAAC;IAElD,OAAO,CAAC,UAAU;IAD9B,OAAO,CAAC,aAAa,CAAU;gBACX,UAAU,EAAE,MAAM,EAAE;IAGjC,KAAK,CAAC,CAAC,EAAE,MAAM;IASf,MAAM,CAAC,IAAI,EAAE,IAAI;CAQzB"}
|
|
@@ -1,23 +0,0 @@
|
|
|
1
|
-
// tslint:disable:no-bitwise
|
|
2
|
-
import { padLeft } from '../core/utils';
|
|
3
|
-
export class NumberColorFormat {
|
|
4
|
-
constructor(components) {
|
|
5
|
-
this.components = components;
|
|
6
|
-
this.componentsRev = components.slice().reverse();
|
|
7
|
-
}
|
|
8
|
-
parse(v) {
|
|
9
|
-
v = v || 0;
|
|
10
|
-
const result = { r: 0, g: 0, b: 0, a: 1 };
|
|
11
|
-
this.components.forEach((key, i) => {
|
|
12
|
-
result[key] = ((v >> (i * 8)) & 255) / 255;
|
|
13
|
-
});
|
|
14
|
-
return result;
|
|
15
|
-
}
|
|
16
|
-
format(rgba) {
|
|
17
|
-
const val = this.componentsRev
|
|
18
|
-
.map((key) => padLeft(Math.round(rgba[key] * 255 || 0).toString(16), 2, '0'))
|
|
19
|
-
.join('');
|
|
20
|
-
return parseInt('0x' + val, 16);
|
|
21
|
-
}
|
|
22
|
-
}
|
|
23
|
-
//# sourceMappingURL=number-format.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"number-format.js","sourceRoot":"","sources":["../../../src/lib/color-formats/number-format.ts"],"names":[],"mappings":"AAAA,4BAA4B;AAC5B,OAAO,EAAE,OAAO,EAAE,MAAM,eAAe,CAAA;AAGvC,MAAM,OAAO,iBAAiB;IAE5B,YAAoB,UAAoB;QAApB,eAAU,GAAV,UAAU,CAAU;QACtC,IAAI,CAAC,aAAa,GAAG,UAAU,CAAC,KAAK,EAAE,CAAC,OAAO,EAAE,CAAA;IACnD,CAAC;IACM,KAAK,CAAC,CAAS;QACpB,CAAC,GAAG,CAAC,IAAI,CAAC,CAAA;QACV,MAAM,MAAM,GAAS,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,CAAA;QAC/C,IAAI,CAAC,UAAU,CAAC,OAAO,CAAC,CAAC,GAAG,EAAE,CAAC,EAAE,EAAE;YACjC,MAAM,CAAC,GAAG,CAAC,GAAG,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,GAAG,GAAG,CAAC,GAAG,GAAG,CAAA;QAC5C,CAAC,CAAC,CAAA;QACF,OAAO,MAAM,CAAA;IACf,CAAC;IAEM,MAAM,CAAC,IAAU;QACtB,MAAM,GAAG,GAAG,IAAI,CAAC,aAAa;aAC3B,GAAG,CAAC,CAAC,GAAG,EAAE,EAAE,CACX,OAAO,CAAC,IAAI,CAAC,KAAK,CAAC,IAAI,CAAC,GAAG,CAAC,GAAG,GAAG,IAAI,CAAC,CAAC,CAAC,QAAQ,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,GAAG,CAAC,CAC/D;aACA,IAAI,CAAC,EAAE,CAAC,CAAA;QACX,OAAO,QAAQ,CAAC,IAAI,GAAG,GAAG,EAAE,EAAE,CAAC,CAAA;IACjC,CAAC;CACF","sourcesContent":["// tslint:disable:no-bitwise\r\nimport { padLeft } from '../core/utils'\r\nimport { ColorFormatter, RGBA } from './types'\r\n\r\nexport class NumberColorFormat implements ColorFormatter<number> {\r\n private componentsRev: string[]\r\n constructor(private components: string[]) {\r\n this.componentsRev = components.slice().reverse()\r\n }\r\n public parse(v: number) {\r\n v = v || 0\r\n const result: RGBA = { r: 0, g: 0, b: 0, a: 1 }\r\n this.components.forEach((key, i) => {\r\n result[key] = ((v >> (i * 8)) & 255) / 255\r\n })\r\n return result\r\n }\r\n\r\n public format(rgba: RGBA) {\r\n const val = this.componentsRev\r\n .map((key) =>\r\n padLeft(Math.round(rgba[key] * 255 || 0).toString(16), 2, '0'),\r\n )\r\n .join('')\r\n return parseInt('0x' + val, 16)\r\n }\r\n}\r\n"]}
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"object-format.d.ts","sourceRoot":"","sources":["../../../src/lib/color-formats/object-format.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,cAAc,EAAE,IAAI,EAAE,MAAM,SAAS,CAAA;AAE9C,qBAAa,iBACX,YAAW,cAAc,CAAC;IAAE,CAAC,GAAG,EAAE,MAAM,GAAG,MAAM,CAAA;CAAE,CAAC;IACxC,OAAO,CAAC,UAAU;IAAY,OAAO,CAAC,UAAU;gBAAxC,UAAU,EAAE,MAAM,EAAE,EAAU,UAAU,EAAE,OAAO;IAC9D,KAAK,CAAC,CAAC,EAAE;QAAE,CAAC,GAAG,EAAE,MAAM,GAAG,MAAM,CAAA;KAAE;IASlC,MAAM,CAAC,IAAI,EAAE,IAAI;;;CAQzB"}
|
|
@@ -1,23 +0,0 @@
|
|
|
1
|
-
export class ObjectColorFormat {
|
|
2
|
-
constructor(components, normalized) {
|
|
3
|
-
this.components = components;
|
|
4
|
-
this.normalized = normalized;
|
|
5
|
-
}
|
|
6
|
-
parse(v) {
|
|
7
|
-
v = v || {};
|
|
8
|
-
const result = { r: 0, g: 0, b: 0, a: 1 };
|
|
9
|
-
this.components.forEach((key, i) => {
|
|
10
|
-
result[key] = (v[key] || 0) / (this.normalized ? 1 : 255);
|
|
11
|
-
});
|
|
12
|
-
return result;
|
|
13
|
-
}
|
|
14
|
-
format(rgba) {
|
|
15
|
-
const result = {};
|
|
16
|
-
this.components.forEach((key, i) => {
|
|
17
|
-
result[key] =
|
|
18
|
-
(this.normalized ? rgba[key] : Math.round(rgba[key] * 255)) || 0;
|
|
19
|
-
});
|
|
20
|
-
return result;
|
|
21
|
-
}
|
|
22
|
-
}
|
|
23
|
-
//# sourceMappingURL=object-format.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"object-format.js","sourceRoot":"","sources":["../../../src/lib/color-formats/object-format.ts"],"names":[],"mappings":"AAEA,MAAM,OAAO,iBAAiB;IAE5B,YAAoB,UAAoB,EAAU,UAAmB;QAAjD,eAAU,GAAV,UAAU,CAAU;QAAU,eAAU,GAAV,UAAU,CAAS;IAAG,CAAC;IAClE,KAAK,CAAC,CAA4B;QACvC,CAAC,GAAG,CAAC,IAAI,EAAE,CAAA;QACX,MAAM,MAAM,GAAS,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,CAAA;QAC/C,IAAI,CAAC,UAAU,CAAC,OAAO,CAAC,CAAC,GAAG,EAAE,CAAC,EAAE,EAAE;YACjC,MAAM,CAAC,GAAG,CAAC,GAAG,CAAC,CAAC,CAAC,GAAG,CAAC,IAAI,CAAC,CAAC,GAAG,CAAC,IAAI,CAAC,UAAU,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,GAAG,CAAC,CAAA;QAC3D,CAAC,CAAC,CAAA;QACF,OAAO,MAAM,CAAA;IACf,CAAC;IAEM,MAAM,CAAC,IAAU;QACtB,MAAM,MAAM,GAA8B,EAAE,CAAA;QAC5C,IAAI,CAAC,UAAU,CAAC,OAAO,CAAC,CAAC,GAAG,EAAE,CAAC,EAAE,EAAE;YACjC,MAAM,CAAC,GAAG,CAAC;gBACT,CAAC,IAAI,CAAC,UAAU,CAAC,CAAC,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC,KAAK,CAAC,IAAI,CAAC,GAAG,CAAC,GAAG,GAAG,CAAC,CAAC,IAAI,CAAC,CAAA;QACpE,CAAC,CAAC,CAAA;QACF,OAAO,MAAM,CAAA;IACf,CAAC;CACF","sourcesContent":["import { ColorFormatter, RGBA } from './types'\r\n\r\nexport class ObjectColorFormat\r\n implements ColorFormatter<{ [key: string]: number }> {\r\n constructor(private components: string[], private normalized: boolean) {}\r\n public parse(v: { [key: string]: number }) {\r\n v = v || {}\r\n const result: RGBA = { r: 0, g: 0, b: 0, a: 1 }\r\n this.components.forEach((key, i) => {\r\n result[key] = (v[key] || 0) / (this.normalized ? 1 : 255)\r\n })\r\n return result\r\n }\r\n\r\n public format(rgba: RGBA) {\r\n const result: { [key: string]: number } = {}\r\n this.components.forEach((key, i) => {\r\n result[key] =\r\n (this.normalized ? rgba[key] : Math.round(rgba[key] * 255)) || 0\r\n })\r\n return result\r\n }\r\n}\r\n"]}
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../src/lib/color-formats/types.ts"],"names":[],"mappings":"AAAA;;;GAGG;AACH,MAAM,WAAW,GAAG;IAClB,CAAC,GAAG,EAAE,MAAM,GAAG,MAAM,CAAA;IACrB;;OAEG;IACH,CAAC,EAAE,MAAM,CAAA;IACT;;OAEG;IACH,CAAC,EAAE,MAAM,CAAA;IACT;;OAEG;IACH,CAAC,EAAE,MAAM,CAAA;CACV;AAED;;;GAGG;AACH,MAAM,WAAW,IAAK,SAAQ,GAAG;IAC/B;;OAEG;IACH,CAAC,EAAE,MAAM,CAAA;CACV;AAED;;;GAGG;AACH,MAAM,WAAW,GAAG;IAClB,CAAC,GAAG,EAAE,MAAM,GAAG,MAAM,CAAA;IACrB;;OAEG;IACH,CAAC,EAAE,MAAM,CAAA;IACT;;OAEG;IACH,CAAC,EAAE,MAAM,CAAA;IACT;;OAEG;IACH,CAAC,EAAE,MAAM,CAAA;CACV;AAED;;;GAGG;AACH,MAAM,WAAW,IAAK,SAAQ,GAAG;IAC/B;;OAEG;IACH,CAAC,EAAE,MAAM,CAAA;CACV;AAED;;;GAGG;AACH,MAAM,WAAW,GAAG;IAClB,CAAC,GAAG,EAAE,MAAM,GAAG,MAAM,CAAA;IACrB;;OAEG;IACH,CAAC,EAAE,MAAM,CAAA;IACT;;OAEG;IACH,CAAC,EAAE,MAAM,CAAA;IACT;;OAEG;IACH,CAAC,EAAE,MAAM,CAAA;CACV;AAED;;;GAGG;AACH,MAAM,WAAW,IAAK,SAAQ,GAAG;IAC/B;;OAEG;IACH,CAAC,EAAE,MAAM,CAAA;CACV;AAED;;;GAGG;AACH,MAAM,WAAW,cAAc,CAAC,CAAC;IAC/B;;OAEG;IACH,KAAK,EAAE,CAAC,CAAC,EAAE,CAAC,KAAK,IAAI,CAAA;IACrB;;OAEG;IACH,MAAM,EAAE,CAAC,IAAI,EAAE,IAAI,KAAK,CAAC,CAAA;CAC1B"}
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"types.js","sourceRoot":"","sources":["../../../src/lib/color-formats/types.ts"],"names":[],"mappings":"","sourcesContent":["/**\r\n * Describes a HSV color value\r\n * @public\r\n */\r\nexport interface HSV {\r\n [key: string]: number\r\n /**\r\n * The hue component\r\n */\r\n h: number\r\n /**\r\n * The saturation component\r\n */\r\n s: number\r\n /**\r\n * The value component\r\n */\r\n v: number\r\n}\r\n\r\n/**\r\n * Describes a HSV color value with alpha\r\n * @public\r\n */\r\nexport interface HSVA extends HSV {\r\n /**\r\n * The alpha component\r\n */\r\n a: number\r\n}\r\n\r\n/**\r\n * Describes a HSL color value\r\n * @public\r\n */\r\nexport interface HSL {\r\n [key: string]: number\r\n /**\r\n * The hue component\r\n */\r\n h: number\r\n /**\r\n * The saturation component\r\n */\r\n s: number\r\n /**\r\n * The value component\r\n */\r\n l: number\r\n}\r\n\r\n/**\r\n * Describes a HSL color value with alpha\r\n * @public\r\n */\r\nexport interface HSLA extends HSL {\r\n /**\r\n * The alpha component\r\n */\r\n a: number\r\n}\r\n\r\n/**\r\n * Describes an RGB color value\r\n * @public\r\n */\r\nexport interface RGB {\r\n [key: string]: number\r\n /**\r\n * The red component\r\n */\r\n r: number\r\n /**\r\n * The green component\r\n */\r\n g: number\r\n /**\r\n * The blue component\r\n */\r\n b: number\r\n}\r\n\r\n/**\r\n * Describes an RGB color value with alpha\r\n * @public\r\n */\r\nexport interface RGBA extends RGB {\r\n /**\r\n * The alpha component\r\n */\r\n a: number\r\n}\r\n\r\n/**\r\n * An implementation to parse and format specific color format\r\n * @public\r\n */\r\nexport interface ColorFormatter<T> {\r\n /**\r\n * Parses a color value and returns an RGBA object with all components normalized to [0:1]\r\n */\r\n parse: (v: T) => RGBA\r\n /**\r\n * Formats an RGBA color value into a target color format\r\n */\r\n format: (rgba: RGBA) => T\r\n}\r\n"]}
|
|
@@ -1,29 +0,0 @@
|
|
|
1
|
-
import { ComponentAttrs, ComponentModel } from '../core';
|
|
2
|
-
/**
|
|
3
|
-
* Button component attribuets
|
|
4
|
-
* @public
|
|
5
|
-
*/
|
|
6
|
-
export type ButtonAttrs = ComponentAttrs<ButtonModel>;
|
|
7
|
-
/**
|
|
8
|
-
* Button component model
|
|
9
|
-
* @public
|
|
10
|
-
*/
|
|
11
|
-
export interface ButtonModel extends ComponentModel {
|
|
12
|
-
/**
|
|
13
|
-
* The type name of the control
|
|
14
|
-
*/
|
|
15
|
-
type: 'button';
|
|
16
|
-
/**
|
|
17
|
-
* The button text
|
|
18
|
-
*/
|
|
19
|
-
text?: string;
|
|
20
|
-
/**
|
|
21
|
-
* This is callend when the control is clicked
|
|
22
|
-
*/
|
|
23
|
-
onClick?: (ctrl: ButtonModel) => void;
|
|
24
|
-
/**
|
|
25
|
-
* Disables the control input
|
|
26
|
-
*/
|
|
27
|
-
disabled?: boolean;
|
|
28
|
-
}
|
|
29
|
-
//# sourceMappingURL=button.d.ts.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"button.d.ts","sourceRoot":"","sources":["../../../src/lib/components/button.ts"],"names":[],"mappings":"AAEA,OAAO,EAAa,cAAc,EAAE,cAAc,EAAE,MAAM,SAAS,CAAA;AAGnE;;;GAGG;AACH,MAAM,MAAM,WAAW,GAAG,cAAc,CAAC,WAAW,CAAC,CAAA;AAErD;;;GAGG;AACH,MAAM,WAAW,WAAY,SAAQ,cAAc;IACjD;;OAEG;IACH,IAAI,EAAE,QAAQ,CAAA;IACd;;OAEG;IACH,IAAI,CAAC,EAAE,MAAM,CAAA;IACb;;OAEG;IACH,OAAO,CAAC,EAAE,CAAC,IAAI,EAAE,WAAW,KAAK,IAAI,CAAA;IACrC;;OAEG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAA;CACnB"}
|
|
@@ -1,15 +0,0 @@
|
|
|
1
|
-
import m from 'mithril';
|
|
2
|
-
import { component } from '../core';
|
|
3
|
-
import { call, twuiClass, viewFn } from '../core/utils';
|
|
4
|
-
const type = 'button';
|
|
5
|
-
component(type, (node) => {
|
|
6
|
-
return {
|
|
7
|
-
view: viewFn((data) => m(type, {
|
|
8
|
-
type: type,
|
|
9
|
-
class: twuiClass(type),
|
|
10
|
-
onclick: () => call(data.onClick, data),
|
|
11
|
-
disabled: data.disabled,
|
|
12
|
-
}, data.text)),
|
|
13
|
-
};
|
|
14
|
-
});
|
|
15
|
-
//# sourceMappingURL=button.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"button.js","sourceRoot":"","sources":["../../../src/lib/components/button.ts"],"names":[],"mappings":"AAAA,OAAO,CAAC,MAAM,SAAS,CAAA;AAEvB,OAAO,EAAE,SAAS,EAAkC,MAAM,SAAS,CAAA;AACnE,OAAO,EAAE,IAAI,EAAE,SAAS,EAAE,MAAM,EAAE,MAAM,eAAe,CAAA;AA+BvD,MAAM,IAAI,GAAG,QAAQ,CAAA;AACrB,SAAS,CAAc,IAAI,EAAE,CAAC,IAAI,EAAE,EAAE;IACpC,OAAO;QACL,IAAI,EAAE,MAAM,CAAC,CAAC,IAAI,EAAE,EAAE,CACpB,CAAC,CACC,IAAI,EACJ;YACE,IAAI,EAAE,IAAI;YACV,KAAK,EAAE,SAAS,CAAC,IAAI,CAAC;YACtB,OAAO,EAAE,GAAG,EAAE,CAAC,IAAI,CAAC,IAAI,CAAC,OAAO,EAAE,IAAI,CAAC;YACvC,QAAQ,EAAE,IAAI,CAAC,QAAQ;SACxB,EACD,IAAI,CAAC,IAAI,CACV,CACF;KACF,CAAA;AACH,CAAC,CAAC,CAAA","sourcesContent":["import m from 'mithril'\r\n\r\nimport { component, ComponentAttrs, ComponentModel } from '../core'\r\nimport { call, twuiClass, viewFn } from '../core/utils'\r\n\r\n/**\r\n * Button component attribuets\r\n * @public\r\n */\r\nexport type ButtonAttrs = ComponentAttrs<ButtonModel>\r\n\r\n/**\r\n * Button component model\r\n * @public\r\n */\r\nexport interface ButtonModel extends ComponentModel {\r\n /**\r\n * The type name of the control\r\n */\r\n type: 'button'\r\n /**\r\n * The button text\r\n */\r\n text?: string\r\n /**\r\n * This is callend when the control is clicked\r\n */\r\n onClick?: (ctrl: ButtonModel) => void\r\n /**\r\n * Disables the control input\r\n */\r\n disabled?: boolean\r\n}\r\n\r\nconst type = 'button'\r\ncomponent<ButtonAttrs>(type, (node) => {\r\n return {\r\n view: viewFn((data) =>\r\n m(\r\n type,\r\n {\r\n type: type,\r\n class: twuiClass(type),\r\n onclick: () => call(data.onClick, data),\r\n disabled: data.disabled,\r\n },\r\n data.text,\r\n ),\r\n ),\r\n }\r\n})\r\n"]}
|
|
@@ -1,22 +0,0 @@
|
|
|
1
|
-
import { Child } from 'mithril';
|
|
2
|
-
import { ComponentAttrs, ComponentModel } from '../core';
|
|
3
|
-
/**
|
|
4
|
-
* Content component attributes
|
|
5
|
-
* @public
|
|
6
|
-
*/
|
|
7
|
-
export type ContentAttrs = ComponentAttrs<ContentModel>;
|
|
8
|
-
/**
|
|
9
|
-
* Content component model
|
|
10
|
-
* @public
|
|
11
|
-
*/
|
|
12
|
-
export interface ContentModel extends ComponentModel {
|
|
13
|
-
/**
|
|
14
|
-
* The type name of the control
|
|
15
|
-
*/
|
|
16
|
-
type: 'content';
|
|
17
|
-
/**
|
|
18
|
-
* A mithril child
|
|
19
|
-
*/
|
|
20
|
-
content?: Child;
|
|
21
|
-
}
|
|
22
|
-
//# sourceMappingURL=content.d.ts.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"content.d.ts","sourceRoot":"","sources":["../../../src/lib/components/content.ts"],"names":[],"mappings":"AAAA,OAAU,EAAE,KAAK,EAAE,MAAM,SAAS,CAAA;AAElC,OAAO,EAAa,cAAc,EAAE,cAAc,EAAE,MAAM,SAAS,CAAA;AAGnE;;;GAGG;AACH,MAAM,MAAM,YAAY,GAAG,cAAc,CAAC,YAAY,CAAC,CAAA;AAEvD;;;GAGG;AACH,MAAM,WAAW,YAAa,SAAQ,cAAc;IAClD;;OAEG;IACH,IAAI,EAAE,SAAS,CAAA;IACf;;OAEG;IACH,OAAO,CAAC,EAAE,KAAK,CAAA;CAChB"}
|
|
@@ -1,10 +0,0 @@
|
|
|
1
|
-
import m from 'mithril';
|
|
2
|
-
import { component } from '../core';
|
|
3
|
-
import { viewFn } from '../core/utils';
|
|
4
|
-
const CONTENT = 'content';
|
|
5
|
-
component(CONTENT, () => {
|
|
6
|
-
return {
|
|
7
|
-
view: viewFn((data) => m.fragment({}, [data.content])),
|
|
8
|
-
};
|
|
9
|
-
});
|
|
10
|
-
//# sourceMappingURL=content.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"content.js","sourceRoot":"","sources":["../../../src/lib/components/content.ts"],"names":[],"mappings":"AAAA,OAAO,CAAY,MAAM,SAAS,CAAA;AAElC,OAAO,EAAE,SAAS,EAAkC,MAAM,SAAS,CAAA;AACnE,OAAO,EAAE,MAAM,EAAE,MAAM,eAAe,CAAA;AAuBtC,MAAM,OAAO,GAAG,SAAS,CAAA;AAEzB,SAAS,CAAe,OAAO,EAAE,GAAG,EAAE;IACpC,OAAO;QACL,IAAI,EAAE,MAAM,CAAC,CAAC,IAAI,EAAE,EAAE,CAAC,CAAC,CAAC,QAAQ,CAAC,EAAE,EAAE,CAAC,IAAI,CAAC,OAAO,CAAC,CAAC,CAAC;KACvD,CAAA;AACH,CAAC,CAAC,CAAA","sourcesContent":["import m, { Child } from 'mithril'\r\n\r\nimport { component, ComponentAttrs, ComponentModel } from '../core'\r\nimport { viewFn } from '../core/utils'\r\n\r\n/**\r\n * Content component attributes\r\n * @public\r\n */\r\nexport type ContentAttrs = ComponentAttrs<ContentModel>\r\n\r\n/**\r\n * Content component model\r\n * @public\r\n */\r\nexport interface ContentModel extends ComponentModel {\r\n /**\r\n * The type name of the control\r\n */\r\n type: 'content'\r\n /**\r\n * A mithril child\r\n */\r\n content?: Child\r\n}\r\n\r\nconst CONTENT = 'content'\r\n\r\ncomponent<ContentAttrs>(CONTENT, () => {\r\n return {\r\n view: viewFn((data) => m.fragment({}, [data.content])),\r\n }\r\n})\r\n"]}
|
|
@@ -1,201 +0,0 @@
|
|
|
1
|
-
import m from 'mithril';
|
|
2
|
-
import { component, getValue, renderModel, setValue, } from '../../core';
|
|
3
|
-
import { call, clamp, cssClass, dragUtil, getTouchInTarget, twuiClass } from '../../core/utils';
|
|
4
|
-
const TYPE = 'angle';
|
|
5
|
-
const AngleComponent = (vnode) => {
|
|
6
|
-
let angle = 0;
|
|
7
|
-
let dragged = false;
|
|
8
|
-
let pos = [0, 0];
|
|
9
|
-
function toDeg(value) {
|
|
10
|
-
return value * (180 / Math.PI);
|
|
11
|
-
}
|
|
12
|
-
function toRad(value) {
|
|
13
|
-
return value * (Math.PI / 180);
|
|
14
|
-
}
|
|
15
|
-
function toScreen(value) {
|
|
16
|
-
return clamp((value / 2 + 0.5) * 100, 0, 100);
|
|
17
|
-
}
|
|
18
|
-
function fetchValue(node) {
|
|
19
|
-
var _a;
|
|
20
|
-
const data = node.attrs.data;
|
|
21
|
-
angle = (_a = getValue(data)) !== null && _a !== void 0 ? _a : angle;
|
|
22
|
-
if (data.degree) {
|
|
23
|
-
angle = toRad(angle);
|
|
24
|
-
}
|
|
25
|
-
updatePositions();
|
|
26
|
-
}
|
|
27
|
-
function onChange(type) {
|
|
28
|
-
updatePositions();
|
|
29
|
-
const data = vnode.attrs.data;
|
|
30
|
-
const value = data.degree ? toRad(angle) : angle;
|
|
31
|
-
const written = setValue(data, value);
|
|
32
|
-
call(type === 'input' ? data.onInput : data.onChange, data, written);
|
|
33
|
-
}
|
|
34
|
-
function updatePositions() {
|
|
35
|
-
pos[0] = Math.cos(angle);
|
|
36
|
-
pos[1] = Math.sin(angle);
|
|
37
|
-
}
|
|
38
|
-
function onStartPhi(e) {
|
|
39
|
-
dragged = true;
|
|
40
|
-
drag.activate(e);
|
|
41
|
-
}
|
|
42
|
-
let touchOffset;
|
|
43
|
-
const drag = dragUtil({
|
|
44
|
-
onStart: (e) => {
|
|
45
|
-
const touch = getTouchInTarget(e);
|
|
46
|
-
touchOffset = [
|
|
47
|
-
-(touch.x - touch.width / 2),
|
|
48
|
-
-(touch.y - touch.height / 2),
|
|
49
|
-
];
|
|
50
|
-
drag.onMove(e);
|
|
51
|
-
},
|
|
52
|
-
onMove: (e) => {
|
|
53
|
-
e.preventDefault();
|
|
54
|
-
const position = getTouchInTarget(e, drag.target.parentElement, touchOffset);
|
|
55
|
-
const px = position.normalizedX - 0.5;
|
|
56
|
-
const py = position.normalizedY - 0.5;
|
|
57
|
-
if (dragged) {
|
|
58
|
-
// [-PI;PI]
|
|
59
|
-
angle = Math.atan2(px, py);
|
|
60
|
-
// convert to range [0;2PI]
|
|
61
|
-
angle += angle < 0 ? 2 * Math.PI : 0;
|
|
62
|
-
}
|
|
63
|
-
onChange('input');
|
|
64
|
-
m.redraw();
|
|
65
|
-
},
|
|
66
|
-
onEnd: (e) => {
|
|
67
|
-
drag.deactivate();
|
|
68
|
-
dragged = false;
|
|
69
|
-
onChange('change');
|
|
70
|
-
m.redraw();
|
|
71
|
-
},
|
|
72
|
-
});
|
|
73
|
-
function onPhiInput(model, value) {
|
|
74
|
-
angle = toRad(value);
|
|
75
|
-
onChange('input');
|
|
76
|
-
}
|
|
77
|
-
function onPhiChange(model, value) {
|
|
78
|
-
angle = toRad(value);
|
|
79
|
-
onChange('change');
|
|
80
|
-
}
|
|
81
|
-
return {
|
|
82
|
-
onremove: () => {
|
|
83
|
-
drag.deactivate();
|
|
84
|
-
},
|
|
85
|
-
oninit: (node) => {
|
|
86
|
-
fetchValue(node);
|
|
87
|
-
},
|
|
88
|
-
onupdate: (node) => {
|
|
89
|
-
fetchValue(node);
|
|
90
|
-
},
|
|
91
|
-
view: () => {
|
|
92
|
-
return m('div', {
|
|
93
|
-
class: twuiClass(TYPE),
|
|
94
|
-
style: {
|
|
95
|
-
'--angle-value': `${toDeg(-angle) + 90}deg`,
|
|
96
|
-
'--angle-percent': `${(toDeg(angle) / 360) * 100}%`,
|
|
97
|
-
},
|
|
98
|
-
}, m('div.left-container', m('div.pane', {
|
|
99
|
-
style: {
|
|
100
|
-
position: 'relative',
|
|
101
|
-
width: '100%',
|
|
102
|
-
'padding-top': '100%',
|
|
103
|
-
},
|
|
104
|
-
}, m('div.angle-pane', {
|
|
105
|
-
class: cssClass({
|
|
106
|
-
'is-dragging': dragged,
|
|
107
|
-
}),
|
|
108
|
-
style: {
|
|
109
|
-
position: 'absolute',
|
|
110
|
-
top: '0.5rem',
|
|
111
|
-
left: '0.5rem',
|
|
112
|
-
width: 'calc(100% - 1rem)',
|
|
113
|
-
height: 'calc(100% - 1rem)',
|
|
114
|
-
},
|
|
115
|
-
}, m('div.angle-knob', {
|
|
116
|
-
onmousedown: onStartPhi,
|
|
117
|
-
ontouchstart: onStartPhi,
|
|
118
|
-
style: {
|
|
119
|
-
position: 'absolute',
|
|
120
|
-
width: '15px',
|
|
121
|
-
height: '15px',
|
|
122
|
-
top: `calc(${toScreen(pos[0])}% - 7px)`,
|
|
123
|
-
left: `calc(${toScreen(pos[1])}% - 7px)`,
|
|
124
|
-
},
|
|
125
|
-
})))), m('div.right-container', m('label', m.trust('α')), renderModel({
|
|
126
|
-
type: 'number',
|
|
127
|
-
min: 0,
|
|
128
|
-
max: 360,
|
|
129
|
-
step: 0.1,
|
|
130
|
-
value: toDeg(angle),
|
|
131
|
-
onInput: onPhiInput,
|
|
132
|
-
onChange: onPhiChange,
|
|
133
|
-
})));
|
|
134
|
-
},
|
|
135
|
-
};
|
|
136
|
-
};
|
|
137
|
-
component(TYPE, AngleComponent);
|
|
138
|
-
export function angleCodec({ axes, length, result } = {}) {
|
|
139
|
-
axes = axes || { x: 'right', y: 'up' };
|
|
140
|
-
const keys = Object.keys(axes);
|
|
141
|
-
const radius = () => {
|
|
142
|
-
return (typeof length === 'function' ? length() : length) || 1;
|
|
143
|
-
};
|
|
144
|
-
return {
|
|
145
|
-
decode: (value) => {
|
|
146
|
-
let x = 0;
|
|
147
|
-
let y = 0;
|
|
148
|
-
for (const key of keys) {
|
|
149
|
-
switch (axes[key]) {
|
|
150
|
-
case 'right':
|
|
151
|
-
y = value[key];
|
|
152
|
-
break;
|
|
153
|
-
case 'left':
|
|
154
|
-
y = -value[key];
|
|
155
|
-
break;
|
|
156
|
-
case 'up':
|
|
157
|
-
case 'front':
|
|
158
|
-
x = -value[key];
|
|
159
|
-
break;
|
|
160
|
-
case 'down':
|
|
161
|
-
case 'back':
|
|
162
|
-
x = value[key];
|
|
163
|
-
default:
|
|
164
|
-
break;
|
|
165
|
-
}
|
|
166
|
-
}
|
|
167
|
-
const r = radius();
|
|
168
|
-
x /= r;
|
|
169
|
-
y /= r;
|
|
170
|
-
return Math.atan2(y, x) || 0;
|
|
171
|
-
},
|
|
172
|
-
encode: (angle) => {
|
|
173
|
-
const r = radius();
|
|
174
|
-
const x = r * Math.cos(angle);
|
|
175
|
-
const y = r * Math.sin(angle);
|
|
176
|
-
const value = result() || {};
|
|
177
|
-
for (const key of keys) {
|
|
178
|
-
switch (axes[key]) {
|
|
179
|
-
case 'right':
|
|
180
|
-
value[key] = y;
|
|
181
|
-
break;
|
|
182
|
-
case 'left':
|
|
183
|
-
value[key] = -y;
|
|
184
|
-
break;
|
|
185
|
-
case 'up':
|
|
186
|
-
case 'front':
|
|
187
|
-
value[key] = -x;
|
|
188
|
-
break;
|
|
189
|
-
case 'down':
|
|
190
|
-
case 'back':
|
|
191
|
-
value[key] = x;
|
|
192
|
-
break;
|
|
193
|
-
default:
|
|
194
|
-
break;
|
|
195
|
-
}
|
|
196
|
-
}
|
|
197
|
-
return value;
|
|
198
|
-
},
|
|
199
|
-
};
|
|
200
|
-
}
|
|
201
|
-
//# sourceMappingURL=angle.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"angle.js","sourceRoot":"","sources":["../../../../src/lib/components/controls/angle.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 setValue,\r\n ComponentModel,\r\n ValueSource,\r\n ComponentAttrs,\r\n ValueCodec,\r\n} from '../../core'\r\nimport { call, clamp, cssClass, dragUtil, getTouchInTarget, twuiClass } from '../../core/utils'\r\nimport type { NumberModel } from './number'\r\nimport { Direction } from './spherical'\r\n\r\n/**\r\n * Spherical component attributes\r\n * @public\r\n */\r\nexport type AngleAttrs = ComponentAttrs<AngleModel>\r\n\r\n/**\r\n * Spherical component model\r\n * @public\r\n */\r\nexport interface AngleModel<T = unknown> extends ComponentModel, ValueSource<T, number> {\r\n /**\r\n * The type name of the control\r\n */\r\n type: 'angle'\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: AngleModel<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: AngleModel<T>, value: unknown) => void\r\n}\r\n\r\nconst TYPE = 'angle'\r\nconst AngleComponent: FactoryComponent<AngleAttrs> = (vnode) => {\r\n let angle = 0\r\n let dragged = false\r\n let pos = [0, 0]\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 fetchValue(node: m.Vnode<AngleAttrs>) {\r\n const data = node.attrs.data\r\n angle = getValue(data) ?? angle\r\n if (data.degree) {\r\n angle = toRad(angle)\r\n }\r\n updatePositions()\r\n }\r\n\r\n function onChange(type: 'change' | 'input') {\r\n updatePositions()\r\n const data = vnode.attrs.data\r\n const value = data.degree ? toRad(angle) : angle\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 pos[0] = Math.cos(angle)\r\n pos[1] = Math.sin(angle)\r\n }\r\n\r\n function onStartPhi(e: MouseEvent) {\r\n dragged = true\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 (dragged) {\r\n // [-PI;PI]\r\n angle = Math.atan2(px, py)\r\n // convert to range [0;2PI]\r\n angle += angle < 0 ? 2 * Math.PI : 0\r\n }\r\n onChange('input')\r\n m.redraw()\r\n },\r\n onEnd: (e) => {\r\n drag.deactivate()\r\n dragged = false\r\n onChange('change')\r\n m.redraw()\r\n },\r\n })\r\n\r\n function onPhiInput(model: unknown, value: number) {\r\n angle = toRad(value)\r\n onChange('input')\r\n }\r\n function onPhiChange(model: unknown, value: number) {\r\n angle = toRad(value)\r\n onChange('change')\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 '--angle-value': `${toDeg(-angle) + 90}deg`,\r\n '--angle-percent': `${(toDeg(angle) / 360) * 100}%`,\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.angle-pane',\r\n {\r\n class: cssClass({\r\n 'is-dragging': dragged,\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.angle-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(pos[0])}% - 7px)`,\r\n left: `calc(${toScreen(pos[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('α')),\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(angle),\r\n onInput: onPhiInput,\r\n onChange: onPhiChange,\r\n }),\r\n ),\r\n )\r\n },\r\n }\r\n}\r\n\r\ncomponent<AngleAttrs>(TYPE, AngleComponent)\r\n\r\nexport interface AngleCodecOptions<T> {\r\n /**\r\n * Maps object keys to cartesian axes. Defaults to `{ x: 'right', y: 'up' }`\r\n */\r\n axes?: Record<string | number, Direction>\r\n /**\r\n * The vector length (circle 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 angleCodec(): ValueCodec<{ x: number; y: number }, number>\r\nexport function angleCodec<T>(options: AngleCodecOptions<T>): ValueCodec<T, number>\r\nexport function angleCodec({ axes, length, result }: AngleCodecOptions<any> = {}): ValueCodec<\r\n any,\r\n number\r\n> {\r\n axes = axes || { x: 'right', y: 'up'}\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 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 'up':\r\n case 'front':\r\n x = -value[key]\r\n break\r\n case 'down':\r\n case 'back':\r\n x = value[key]\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 return Math.atan2(y, x) || 0\r\n },\r\n encode: (angle) => {\r\n const r = radius()\r\n const x = r * Math.cos(angle)\r\n const y = r * Math.sin(angle)\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 'up':\r\n case 'front':\r\n value[key] = -x\r\n break\r\n case 'down':\r\n case 'back':\r\n value[key] = x\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"]}
|
|
@@ -1,29 +0,0 @@
|
|
|
1
|
-
import { ValueSource, ComponentAttrs, ComponentModel } from '../../core';
|
|
2
|
-
/**
|
|
3
|
-
* Checkbox component attrs
|
|
4
|
-
* @public
|
|
5
|
-
*/
|
|
6
|
-
export type CheckboxAttrs = ComponentAttrs<CheckboxModel>;
|
|
7
|
-
/**
|
|
8
|
-
* Describes a checkbox control
|
|
9
|
-
* @public
|
|
10
|
-
*/
|
|
11
|
-
export interface CheckboxModel<T = unknown> extends ComponentModel, ValueSource<T, boolean> {
|
|
12
|
-
/**
|
|
13
|
-
* The type name of the control
|
|
14
|
-
*/
|
|
15
|
-
type: 'checkbox';
|
|
16
|
-
/**
|
|
17
|
-
* This is called when the control value changes
|
|
18
|
-
*/
|
|
19
|
-
onChange?: (model: CheckboxModel, value: unknown) => void;
|
|
20
|
-
/**
|
|
21
|
-
* Text behind the checkbox or inside the buttn
|
|
22
|
-
*/
|
|
23
|
-
text?: string;
|
|
24
|
-
/**
|
|
25
|
-
* Disables the control input
|
|
26
|
-
*/
|
|
27
|
-
disabled?: boolean;
|
|
28
|
-
}
|
|
29
|
-
//# sourceMappingURL=checkbox.d.ts.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"checkbox.d.ts","sourceRoot":"","sources":["../../../../src/lib/components/controls/checkbox.ts"],"names":[],"mappings":"AAEA,OAAO,EAIL,WAAW,EACX,cAAc,EACd,cAAc,EACf,MAAM,YAAY,CAAA;AAGnB;;;GAGG;AACH,MAAM,MAAM,aAAa,GAAG,cAAc,CAAC,aAAa,CAAC,CAAA;AAEzD;;;GAGG;AACH,MAAM,WAAW,aAAa,CAAC,CAAC,GAAG,OAAO,CACxC,SAAQ,cAAc,EACpB,WAAW,CAAC,CAAC,EAAE,OAAO,CAAC;IACzB;;OAEG;IACH,IAAI,EAAE,UAAU,CAAA;IAChB;;OAEG;IACH,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,aAAa,EAAE,KAAK,EAAE,OAAO,KAAK,IAAI,CAAA;IACzD;;OAEG;IACH,IAAI,CAAC,EAAE,MAAM,CAAA;IACb;;OAEG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAA;CACnB"}
|
|
@@ -1,31 +0,0 @@
|
|
|
1
|
-
import m from 'mithril';
|
|
2
|
-
import { getValue, component, setValue, } from '../../core';
|
|
3
|
-
import { call, twuiClass, cssClass, viewFn } from '../../core/utils';
|
|
4
|
-
const TYPE = 'checkbox';
|
|
5
|
-
const CheckboxComponent = (node) => {
|
|
6
|
-
function onChange(e) {
|
|
7
|
-
const data = node.attrs.data;
|
|
8
|
-
const checked = e.target.checked;
|
|
9
|
-
const written = setValue(data, checked);
|
|
10
|
-
call(data.onChange, data, written);
|
|
11
|
-
}
|
|
12
|
-
return {
|
|
13
|
-
view: viewFn((data) => {
|
|
14
|
-
const checked = getValue(data) === true;
|
|
15
|
-
return m('label', {
|
|
16
|
-
class: cssClass({
|
|
17
|
-
[twuiClass(TYPE)]: true,
|
|
18
|
-
checked: checked,
|
|
19
|
-
disabled: data.disabled,
|
|
20
|
-
}),
|
|
21
|
-
}, m('input', {
|
|
22
|
-
type: 'checkbox',
|
|
23
|
-
checked: checked,
|
|
24
|
-
onchange: onChange,
|
|
25
|
-
disabled: data.disabled,
|
|
26
|
-
}), data.text);
|
|
27
|
-
}),
|
|
28
|
-
};
|
|
29
|
-
};
|
|
30
|
-
component(TYPE, CheckboxComponent);
|
|
31
|
-
//# sourceMappingURL=checkbox.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"checkbox.js","sourceRoot":"","sources":["../../../../src/lib/components/controls/checkbox.ts"],"names":[],"mappings":"AAAA,OAAO,CAAuB,MAAM,SAAS,CAAA;AAE7C,OAAO,EACL,QAAQ,EACR,SAAS,EACT,QAAQ,GAIT,MAAM,YAAY,CAAA;AACnB,OAAO,EAAE,IAAI,EAAE,SAAS,EAAE,QAAQ,EAAE,MAAM,EAAE,MAAM,kBAAkB,CAAA;AAiCpE,MAAM,IAAI,GAAG,UAAU,CAAA;AACvB,MAAM,iBAAiB,GAAoC,CAAC,IAAI,EAAE,EAAE;IAClE,SAAS,QAAQ,CAAC,CAAQ;QACxB,MAAM,IAAI,GAAG,IAAI,CAAC,KAAK,CAAC,IAAI,CAAA;QAC5B,MAAM,OAAO,GAAI,CAAC,CAAC,MAA2B,CAAC,OAAO,CAAA;QACtD,MAAM,OAAO,GAAG,QAAQ,CAAC,IAAI,EAAE,OAAO,CAAC,CAAA;QACvC,IAAI,CAAC,IAAI,CAAC,QAAQ,EAAE,IAAI,EAAE,OAAO,CAAC,CAAA;IACpC,CAAC;IACD,OAAO;QACL,IAAI,EAAE,MAAM,CAAC,CAAC,IAAI,EAAE,EAAE;YACpB,MAAM,OAAO,GAAG,QAAQ,CAAC,IAAI,CAAC,KAAK,IAAI,CAAA;YACvC,OAAO,CAAC,CACN,OAAO,EACP;gBACE,KAAK,EAAE,QAAQ,CAAC;oBACd,CAAC,SAAS,CAAC,IAAI,CAAC,CAAC,EAAE,IAAI;oBACvB,OAAO,EAAE,OAAO;oBAChB,QAAQ,EAAE,IAAI,CAAC,QAAQ;iBACxB,CAAC;aACH,EACD,CAAC,CAAC,OAAO,EAAE;gBACT,IAAI,EAAE,UAAU;gBAChB,OAAO,EAAE,OAAO;gBAChB,QAAQ,EAAE,QAAQ;gBAClB,QAAQ,EAAE,IAAI,CAAC,QAAQ;aACxB,CAAC,EACF,IAAI,CAAC,IAAI,CACV,CAAA;QACH,CAAC,CAAC;KACH,CAAA;AACH,CAAC,CAAA;AAED,SAAS,CAAC,IAAI,EAAE,iBAAiB,CAAC,CAAA","sourcesContent":["import m, { FactoryComponent } from 'mithril'\r\n\r\nimport {\r\n getValue,\r\n component,\r\n setValue,\r\n ValueSource,\r\n ComponentAttrs,\r\n ComponentModel,\r\n} from '../../core'\r\nimport { call, twuiClass, cssClass, viewFn } from '../../core/utils'\r\n\r\n/**\r\n * Checkbox component attrs\r\n * @public\r\n */\r\nexport type CheckboxAttrs = ComponentAttrs<CheckboxModel>\r\n\r\n/**\r\n * Describes a checkbox control\r\n * @public\r\n */\r\nexport interface CheckboxModel<T = unknown>\r\n extends ComponentModel,\r\n ValueSource<T, boolean> {\r\n /**\r\n * The type name of the control\r\n */\r\n type: 'checkbox'\r\n /**\r\n * This is called when the control value changes\r\n */\r\n onChange?: (model: CheckboxModel, value: unknown) => void\r\n /**\r\n * Text behind the checkbox or inside the buttn\r\n */\r\n text?: string\r\n /**\r\n * Disables the control input\r\n */\r\n disabled?: boolean\r\n}\r\n\r\nconst TYPE = 'checkbox'\r\nconst CheckboxComponent: FactoryComponent<CheckboxAttrs> = (node) => {\r\n function onChange(e: Event) {\r\n const data = node.attrs.data\r\n const checked = (e.target as HTMLInputElement).checked\r\n const written = setValue(data, checked)\r\n call(data.onChange, data, written)\r\n }\r\n return {\r\n view: viewFn((data) => {\r\n const checked = getValue(data) === true\r\n return m(\r\n 'label',\r\n {\r\n class: cssClass({\r\n [twuiClass(TYPE)]: true,\r\n checked: checked,\r\n disabled: data.disabled,\r\n }),\r\n },\r\n m('input', {\r\n type: 'checkbox',\r\n checked: checked,\r\n onchange: onChange,\r\n disabled: data.disabled,\r\n }),\r\n data.text,\r\n )\r\n }),\r\n }\r\n}\r\n\r\ncomponent(TYPE, CheckboxComponent)\r\n"]}
|