verstak 0.92.25015 → 0.93.25026

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.
Files changed (41) hide show
  1. package/README.md +2 -1
  2. package/build/dist/source/components/Button.v.js +5 -5
  3. package/build/dist/source/components/Icon.v.js +2 -2
  4. package/build/dist/source/components/Image.v.js +4 -4
  5. package/build/dist/source/components/{Field.v.d.ts → Input.v.d.ts} +3 -3
  6. package/build/dist/source/components/{Field.v.js → Input.v.js} +22 -22
  7. package/build/dist/source/components/Markdown.v.js +2 -2
  8. package/build/dist/source/components/RealTimeClock.d.ts +2 -2
  9. package/build/dist/source/components/RealTimeClock.js +3 -3
  10. package/build/dist/source/components/Spinner.v.js +5 -5
  11. package/build/dist/source/components/Theme.d.ts +4 -4
  12. package/build/dist/source/components/Theme.js +4 -4
  13. package/build/dist/source/components/Toggle.v.js +5 -5
  14. package/build/dist/source/components/api.d.ts +2 -2
  15. package/build/dist/source/components/api.js +2 -2
  16. package/build/dist/source/components/common/Utils.d.ts +1 -1
  17. package/build/dist/source/components/common/Utils.js +4 -4
  18. package/build/dist/source/components/theme/Button.s.js +4 -4
  19. package/build/dist/source/components/theme/Icon.s.js +2 -2
  20. package/build/dist/source/components/theme/{Field.s.d.ts → Input.s.d.ts} +4 -4
  21. package/build/dist/source/components/theme/{Field.s.js → Input.s.js} +11 -11
  22. package/build/dist/source/components/theme/Styling.d.ts +2 -2
  23. package/build/dist/source/components/theme/Styling.js +3 -3
  24. package/build/dist/source/components/theme/Toggle.s.js +4 -4
  25. package/build/dist/source/core/El.d.ts +3 -3
  26. package/build/dist/source/core/El.js +3 -3
  27. package/build/dist/source/core/ElDriver.d.ts +1 -1
  28. package/build/dist/source/core/ElDriver.js +12 -12
  29. package/build/dist/source/core/Elements.d.ts +11 -11
  30. package/build/dist/source/core/Elements.js +23 -23
  31. package/build/dist/source/core/Restyler.d.ts +2 -2
  32. package/build/dist/source/core/Restyler.js +5 -5
  33. package/build/dist/source/core/sensors/Handlers.js +12 -12
  34. package/build/dist/source/core/sensors/HtmlDragSensor.js +10 -10
  35. package/build/dist/source/core/sensors/HtmlElementSensor.js +5 -5
  36. package/build/dist/source/core/sensors/KeyboardSensor.js +3 -3
  37. package/build/dist/source/core/sensors/PointerSensor.js +7 -7
  38. package/build/dist/source/core/sensors/Sensor.d.ts +2 -2
  39. package/build/dist/source/core/sensors/Sensor.js +2 -2
  40. package/build/dist/source/html/DraggableArea.view.js +2 -2
  41. package/package.json +2 -2
package/README.md CHANGED
@@ -38,7 +38,8 @@ applied, are **consistently propagated** to corresponding
38
38
  visual components for (re)rendering. All that is done in
39
39
  automatic, seamless, and fine-grained way, because Verstak
40
40
  **takes full care of tracking dependencies** between visual
41
- components (observers) and state objects (observables).
41
+ components (reactive functions) and application state
42
+ (triggering objects).
42
43
 
43
44
  Example application: https://nevod.io ([source code](https://gitlab.com/nezaboodka/nevod.web.public/-/blob/master/README.md)).
44
45
 
@@ -1,14 +1,14 @@
1
1
  import { Mode, ReactiveNode } from "reactronic";
2
- import { Panel, Note, OnClick } from "verstak";
3
- import { observableModel } from "./common/Utils.js";
2
+ import { Division, JustText, OnClick } from "verstak";
3
+ import { triggeringModel } from "./common/Utils.js";
4
4
  import { Theme } from "./Theme.js";
5
5
  import { Icon } from "./Icon.v.js";
6
6
  export function Button(declaration) {
7
- return (Panel(ReactiveNode.withBasis(declaration, {
7
+ return (Division(ReactiveNode.withBasis(declaration, {
8
8
  mode: Mode.autonomous,
9
9
  preparation: el => {
10
10
  var _a;
11
- (_a = el.model) !== null && _a !== void 0 ? _a : (el.model = observableModel({
11
+ (_a = el.model) !== null && _a !== void 0 ? _a : (el.model = triggeringModel({
12
12
  icon: "fa-solid fa-square",
13
13
  label: ReactiveNode.key,
14
14
  }));
@@ -26,7 +26,7 @@ export function Button(declaration) {
26
26
  });
27
27
  }
28
28
  if (m.label) {
29
- Note(m.label, false, {
29
+ JustText(m.label, false, {
30
30
  script: (el, base) => {
31
31
  base();
32
32
  el.useStylingPreset(theme.label);
@@ -1,8 +1,8 @@
1
1
  import { Mode, ReactiveNode } from "reactronic";
2
- import { Panel } from "verstak";
2
+ import { Division } from "verstak";
3
3
  import { Theme } from "./Theme.js";
4
4
  export function Icon(name, declaration) {
5
- return (Panel(ReactiveNode.withBasis(declaration, {
5
+ return (Division(ReactiveNode.withBasis(declaration, {
6
6
  mode: Mode.autonomous,
7
7
  triggers: { name },
8
8
  script: el => {
@@ -1,12 +1,12 @@
1
1
  import { Mode, ReactiveNode } from "reactronic";
2
- import { Panel } from "verstak";
3
- import { observableModel } from "./common/Utils.js";
2
+ import { Division } from "verstak";
3
+ import { triggeringModel } from "./common/Utils.js";
4
4
  export function Image(declaration) {
5
- return (Panel(ReactiveNode.withBasis(declaration, {
5
+ return (Division(ReactiveNode.withBasis(declaration, {
6
6
  mode: Mode.autonomous,
7
7
  preparation: el => {
8
8
  var _a;
9
- (_a = el.model) !== null && _a !== void 0 ? _a : (el.model = observableModel({ source: undefined }));
9
+ (_a = el.model) !== null && _a !== void 0 ? _a : (el.model = triggeringModel({ source: undefined }));
10
10
  },
11
11
  script: el => {
12
12
  const m = el.model;
@@ -1,7 +1,7 @@
1
1
  import { ReactiveNodeDecl, ReactiveNode } from "reactronic";
2
2
  import { FocusModel, El } from "verstak";
3
3
  import { ValuesOrRefs } from "./common/Utils.js";
4
- export type FieldModel<T = string> = FocusModel & {
4
+ export type InputModel<T = string> = FocusModel & {
5
5
  icon?: string;
6
6
  text: string;
7
7
  options: Array<T>;
@@ -12,5 +12,5 @@ export type FieldModel<T = string> = FocusModel & {
12
12
  isHotText: boolean;
13
13
  inputStyle: string;
14
14
  };
15
- export declare function Field(declaration?: ReactiveNodeDecl<El<HTMLElement, FieldModel>>): ReactiveNode<El<HTMLElement, FieldModel<string>>>;
16
- export declare function composeFieldModel<T>(props?: Partial<ValuesOrRefs<FieldModel<T>>>): FieldModel<T>;
15
+ export declare function Input(declaration?: ReactiveNodeDecl<El<HTMLElement, InputModel>>): ReactiveNode<El<HTMLElement, InputModel<string>>>;
16
+ export declare function composeInputModel<T>(props?: Partial<ValuesOrRefs<InputModel<T>>>): InputModel<T>;
@@ -1,19 +1,19 @@
1
1
  import { Mode, ReactiveNode } from "reactronic";
2
- import { Panel, Note, OnFocus, rowBreak, Handling, KeyboardModifiers, Horizontal, Vertical } from "verstak";
3
- import { observableModel } from "./common/Utils.js";
2
+ import { Division, JustText, OnFocus, rowBreak, Fragment, KeyboardModifiers, Horizontal, Vertical } from "verstak";
3
+ import { triggeringModel } from "./common/Utils.js";
4
4
  import { Theme } from "./Theme.js";
5
5
  import { Icon } from "./Icon.v.js";
6
- export function Field(declaration) {
7
- return (Panel(ReactiveNode.withBasis(declaration, {
6
+ export function Input(declaration) {
7
+ return (Division(ReactiveNode.withBasis(declaration, {
8
8
  mode: Mode.autonomous,
9
9
  preparation: el => {
10
10
  var _a;
11
- (_a = el.model) !== null && _a !== void 0 ? _a : (el.model = composeFieldModel());
11
+ (_a = el.model) !== null && _a !== void 0 ? _a : (el.model = composeInputModel());
12
12
  el.native.dataForSensor.focus = el.model;
13
13
  },
14
14
  script: el => {
15
15
  const m = el.model;
16
- const theme = Theme.current.field;
16
+ const theme = Theme.current.input;
17
17
  el.useStylingPreset(theme.main);
18
18
  if (m.icon)
19
19
  Icon(m.icon, {
@@ -22,14 +22,14 @@ export function Field(declaration) {
22
22
  el.useStylingPreset(theme.icon);
23
23
  },
24
24
  });
25
- FieldInput(m, theme);
26
- FieldPopup(m, theme);
25
+ InputField(m, theme);
26
+ InputPopup(m, theme);
27
27
  },
28
28
  })));
29
29
  }
30
- export function composeFieldModel(props) {
30
+ export function composeInputModel(props) {
31
31
  var _a, _b, _c, _d, _e, _f, _g, _h;
32
- return observableModel({
32
+ return triggeringModel({
33
33
  icon: props === null || props === void 0 ? void 0 : props.icon,
34
34
  text: (_a = props === null || props === void 0 ? void 0 : props.text) !== null && _a !== void 0 ? _a : "",
35
35
  options: (_b = props === null || props === void 0 ? void 0 : props.options) !== null && _b !== void 0 ? _b : [],
@@ -42,12 +42,12 @@ export function composeFieldModel(props) {
42
42
  inputStyle: (_h = props === null || props === void 0 ? void 0 : props.inputStyle) !== null && _h !== void 0 ? _h : "",
43
43
  });
44
44
  }
45
- function FieldInput(model, s) {
46
- return (Note(model.text, false, {
47
- key: FieldInput.name,
45
+ function InputField(model, styling) {
46
+ return (JustText(model.text, false, {
47
+ key: InputField.name,
48
48
  preparation: (el, base) => {
49
49
  const e = el.native;
50
- el.useStylingPreset(s.input);
50
+ el.useStylingPreset(styling.field);
51
51
  el.horizontally = Horizontal.stretch;
52
52
  el.vertically = Vertical.stretch;
53
53
  e.tabIndex = 0;
@@ -59,7 +59,7 @@ function FieldInput(model, s) {
59
59
  const e = el.native;
60
60
  if (!model.isEditMode)
61
61
  e.innerText = model.text;
62
- Handling(() => {
62
+ Fragment(() => {
63
63
  const keyboard = e.sensors.keyboard;
64
64
  if (keyboard.down) {
65
65
  if (isApplyKey(model, keyboard))
@@ -78,19 +78,19 @@ function FieldInput(model, s) {
78
78
  },
79
79
  }));
80
80
  }
81
- function FieldPopup(model, s) {
82
- return (Panel({
83
- key: FieldPopup.name,
81
+ function InputPopup(model, styling) {
82
+ return (Division({
83
+ key: InputPopup.name,
84
84
  script: el => {
85
- el.useStylingPreset(s.popup);
86
- Handling(() => model.position = el.native.sensors.scroll.y);
85
+ el.useStylingPreset(styling.popup);
86
+ Fragment(() => model.position = el.native.sensors.scroll.y);
87
87
  const visible = el.overlayVisible = model.isEditMode;
88
88
  if (visible) {
89
89
  const options = model.options;
90
90
  if (options.length > 0) {
91
91
  for (const x of model.options) {
92
92
  rowBreak();
93
- Note(x, false, {
93
+ JustText(x, false, {
94
94
  key: x,
95
95
  preparation: el => {
96
96
  el.contentWrapping = false;
@@ -99,7 +99,7 @@ function FieldPopup(model, s) {
99
99
  }
100
100
  }
101
101
  else
102
- Note("(nothing)", false, { key: "(nothing)" });
102
+ JustText("(nothing)", false, { key: "(nothing)" });
103
103
  }
104
104
  },
105
105
  }));
@@ -1,8 +1,8 @@
1
- import { Note } from "verstak";
1
+ import { JustText } from "verstak";
2
2
  import Md from "markdown-it";
3
3
  import * as prism from "prismjs";
4
4
  export function Markdown(content) {
5
- return (Note(md.render(content), true, {
5
+ return (JustText(md.render(content), true, {
6
6
  preparation: (el, base) => {
7
7
  el.contentWrapping = true;
8
8
  base();
@@ -1,5 +1,5 @@
1
- import { ObservableObject } from "reactronic";
2
- export declare class RealTimeClock extends ObservableObject {
1
+ import { TriggeringObject } from "reactronic";
2
+ export declare class RealTimeClock extends TriggeringObject {
3
3
  hour: number;
4
4
  minute: number;
5
5
  second: number;
@@ -7,8 +7,8 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
7
7
  var __metadata = (this && this.__metadata) || function (k, v) {
8
8
  if (typeof Reflect === "object" && typeof Reflect.metadata === "function") return Reflect.metadata(k, v);
9
9
  };
10
- import { ObservableObject, atomic, reactive } from "reactronic";
11
- export class RealTimeClock extends ObservableObject {
10
+ import { TriggeringObject, atomic, reaction } from "reactronic";
11
+ export class RealTimeClock extends TriggeringObject {
12
12
  constructor(interval = 1000) {
13
13
  super();
14
14
  this.hour = 0;
@@ -57,7 +57,7 @@ __decorate([
57
57
  __metadata("design:returntype", void 0)
58
58
  ], RealTimeClock.prototype, "tick", null);
59
59
  __decorate([
60
- reactive,
60
+ reaction,
61
61
  __metadata("design:type", Function),
62
62
  __metadata("design:paramtypes", []),
63
63
  __metadata("design:returntype", void 0)
@@ -1,8 +1,8 @@
1
1
  import { Mode, ReactiveNode } from "reactronic";
2
- import { Panel, Note } from "verstak";
3
- import { observableModel } from "./common/Utils.js";
2
+ import { Division, JustText } from "verstak";
3
+ import { triggeringModel } from "./common/Utils.js";
4
4
  export function Spinner(declaration) {
5
- return (Panel(ReactiveNode.withBasis(declaration, {
5
+ return (Division(ReactiveNode.withBasis(declaration, {
6
6
  mode: Mode.autonomous,
7
7
  preparation: el => {
8
8
  var _a;
@@ -10,13 +10,13 @@ export function Spinner(declaration) {
10
10
  },
11
11
  script: el => {
12
12
  const m = el.model;
13
- m.active && Note("loading...");
13
+ m.active && JustText("loading...");
14
14
  },
15
15
  })));
16
16
  }
17
17
  export function composeSpinnerModel(props) {
18
18
  var _a, _b;
19
- return observableModel({
19
+ return triggeringModel({
20
20
  active: (_a = props === null || props === void 0 ? void 0 : props.active) !== null && _a !== void 0 ? _a : false,
21
21
  color: (_b = props === null || props === void 0 ? void 0 : props.color) !== null && _b !== void 0 ? _b : "",
22
22
  });
@@ -1,15 +1,15 @@
1
1
  import { BasicAbstractTheme } from "./theme/Styling.js";
2
2
  import { ButtonStyling, DefaultButtonStyling } from "./theme/Button.s.js";
3
- import { FieldStyling, DefaultFieldStyling } from "./theme/Field.s.js";
3
+ import { InputStyling, DefaultInputStyling } from "./theme/Input.s.js";
4
4
  import { IconStyling, DefaultIconStyling } from "./theme/Icon.s.js";
5
5
  import { ToggleStyling, DefaultToggleStyling } from "./theme/Toggle.s.js";
6
6
  export { type ButtonStyling, type DefaultButtonStyling } from "./theme/Button.s.js";
7
- export { type FieldStyling, type DefaultFieldStyling } from "./theme/Field.s.js";
7
+ export { type InputStyling, type DefaultInputStyling } from "./theme/Input.s.js";
8
8
  export { type IconStyling, type DefaultIconStyling } from "./theme/Icon.s.js";
9
9
  export { type ToggleStyling, type DefaultToggleStyling } from "./theme/Toggle.s.js";
10
10
  export type AbstractTheme = BasicAbstractTheme & {
11
11
  readonly button: ButtonStyling;
12
- readonly field: FieldStyling;
12
+ readonly input: InputStyling;
13
13
  readonly icon: IconStyling;
14
14
  readonly toggle: ToggleStyling;
15
15
  };
@@ -28,7 +28,7 @@ export declare class Theme implements AbstractTheme {
28
28
  outlinePadding: string;
29
29
  shadow: string;
30
30
  button: DefaultButtonStyling;
31
- field: DefaultFieldStyling;
31
+ input: DefaultInputStyling;
32
32
  icon: DefaultIconStyling;
33
33
  toggle: DefaultToggleStyling;
34
34
  }
@@ -1,6 +1,6 @@
1
- import { atomicRun, ReactiveNodeVariable, Isolation } from "reactronic";
1
+ import { runAtomically, ReactiveNodeVariable, Isolation } from "reactronic";
2
2
  import { DefaultButtonStyling } from "./theme/Button.s.js";
3
- import { DefaultFieldStyling } from "./theme/Field.s.js";
3
+ import { DefaultInputStyling } from "./theme/Input.s.js";
4
4
  import { DefaultIconStyling } from "./theme/Icon.s.js";
5
5
  import { DefaultToggleStyling } from "./theme/Toggle.s.js";
6
6
  export class Theme {
@@ -16,7 +16,7 @@ export class Theme {
16
16
  this.outlinePadding = "0.25em";
17
17
  this.shadow = "0.1rem 0.1rem 0.5rem 0 rgba(127, 127, 127, 0.5)";
18
18
  this.button = new DefaultButtonStyling(this);
19
- this.field = new DefaultFieldStyling(this);
19
+ this.input = new DefaultInputStyling(this);
20
20
  this.icon = new DefaultIconStyling(this);
21
21
  this.toggle = new DefaultToggleStyling(this);
22
22
  }
@@ -27,4 +27,4 @@ export class Theme {
27
27
  Theme.gCurrent.value = value;
28
28
  }
29
29
  }
30
- Theme.gCurrent = new ReactiveNodeVariable(atomicRun({ isolation: Isolation.disjoinFromOuterTransaction }, () => new Theme()));
30
+ Theme.gCurrent = new ReactiveNodeVariable(runAtomically({ isolation: Isolation.disjoinFromOuterTransaction }, () => new Theme()));
@@ -1,14 +1,14 @@
1
1
  import { Mode, ReactiveNode } from "reactronic";
2
- import { Panel, Note, OnClick } from "verstak";
3
- import { observableModel } from "./common/Utils.js";
2
+ import { Division, JustText, OnClick } from "verstak";
3
+ import { triggeringModel } from "./common/Utils.js";
4
4
  import { Theme } from "./Theme.js";
5
5
  import { Icon } from "./Icon.v.js";
6
6
  export function Toggle(declaration) {
7
- return (Panel(ReactiveNode.withBasis(declaration, {
7
+ return (Division(ReactiveNode.withBasis(declaration, {
8
8
  mode: Mode.autonomous,
9
9
  preparation: el => {
10
10
  var _a;
11
- (_a = el.model) !== null && _a !== void 0 ? _a : (el.model = observableModel({
11
+ (_a = el.model) !== null && _a !== void 0 ? _a : (el.model = triggeringModel({
12
12
  label: ReactiveNode.key,
13
13
  checked: true,
14
14
  color: "green"
@@ -28,7 +28,7 @@ export function Toggle(declaration) {
28
28
  },
29
29
  });
30
30
  if (m.label) {
31
- Note(m.label, false, {
31
+ JustText(m.label, false, {
32
32
  script: (el, base) => {
33
33
  base();
34
34
  el.useStylingPreset(toggleTheme.label);
@@ -1,10 +1,10 @@
1
1
  export * from "./Button.v.js";
2
- export * from "./Field.v.js";
2
+ export * from "./Input.v.js";
3
3
  export * from "./Icon.v.js";
4
4
  export * from "./Image.v.js";
5
5
  export * from "./Spinner.v.js";
6
6
  export * from "./Toggle.v.js";
7
7
  export * from "./Markdown.v.js";
8
8
  export * from "./Theme.js";
9
- export { observableModel } from "./common/Utils.js";
9
+ export { triggeringModel } from "./common/Utils.js";
10
10
  export { RealTimeClock } from "./RealTimeClock.js";
@@ -1,10 +1,10 @@
1
1
  export * from "./Button.v.js";
2
- export * from "./Field.v.js";
2
+ export * from "./Input.v.js";
3
3
  export * from "./Icon.v.js";
4
4
  export * from "./Image.v.js";
5
5
  export * from "./Spinner.v.js";
6
6
  export * from "./Toggle.v.js";
7
7
  export * from "./Markdown.v.js";
8
8
  export * from "./Theme.js";
9
- export { observableModel } from "./common/Utils.js";
9
+ export { triggeringModel } from "./common/Utils.js";
10
10
  export { RealTimeClock } from "./RealTimeClock.js";
@@ -2,4 +2,4 @@ import { Ref } from "reactronic";
2
2
  export type ValuesOrRefs<T> = {
3
3
  [K in keyof T]: T[K] | Ref<T[K]>;
4
4
  };
5
- export declare function observableModel<T extends Object>(modelProps: ValuesOrRefs<T>): T;
5
+ export declare function triggeringModel<T extends Object>(modelProps: ValuesOrRefs<T>): T;
@@ -1,8 +1,8 @@
1
- import { ObservableObject, Ref, atomicRun, Isolation } from "reactronic";
2
- export function observableModel(modelProps) {
3
- return atomicRun({ isolation: Isolation.disjoinFromOuterTransaction }, () => new ObservableComposition(modelProps));
1
+ import { TriggeringObject, Ref, runAtomically, Isolation } from "reactronic";
2
+ export function triggeringModel(modelProps) {
3
+ return runAtomically({ isolation: Isolation.disjoinFromOuterTransaction }, () => new TriggeringComposition(modelProps));
4
4
  }
5
- class ObservableComposition extends ObservableObject {
5
+ class TriggeringComposition extends TriggeringObject {
6
6
  constructor(composition) {
7
7
  super();
8
8
  convertValuesToFieldsAndRefsToGetSet(this, composition);
@@ -7,7 +7,7 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
7
7
  var __metadata = (this && this.__metadata) || function (k, v) {
8
8
  if (typeof Reflect === "object" && typeof Reflect.metadata === "function") return Reflect.metadata(k, v);
9
9
  };
10
- import { cached } from "reactronic";
10
+ import { cache } from "reactronic";
11
11
  import { css } from "@emotion/css";
12
12
  import { Styling } from "./Styling.js";
13
13
  export class DefaultButtonStyling extends Styling {
@@ -33,17 +33,17 @@ export class DefaultButtonStyling extends Styling {
33
33
  }
34
34
  }
35
35
  __decorate([
36
- cached,
36
+ cache,
37
37
  __metadata("design:type", String),
38
38
  __metadata("design:paramtypes", [])
39
39
  ], DefaultButtonStyling.prototype, "main", null);
40
40
  __decorate([
41
- cached,
41
+ cache,
42
42
  __metadata("design:type", String),
43
43
  __metadata("design:paramtypes", [])
44
44
  ], DefaultButtonStyling.prototype, "icon", null);
45
45
  __decorate([
46
- cached,
46
+ cache,
47
47
  __metadata("design:type", String),
48
48
  __metadata("design:paramtypes", [])
49
49
  ], DefaultButtonStyling.prototype, "label", null);
@@ -7,7 +7,7 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
7
7
  var __metadata = (this && this.__metadata) || function (k, v) {
8
8
  if (typeof Reflect === "object" && typeof Reflect.metadata === "function") return Reflect.metadata(k, v);
9
9
  };
10
- import { cached } from "reactronic";
10
+ import { cache } from "reactronic";
11
11
  import { css } from "@emotion/css";
12
12
  import { Styling } from "./Styling.js";
13
13
  export class DefaultIconStyling extends Styling {
@@ -20,7 +20,7 @@ export class DefaultIconStyling extends Styling {
20
20
  }
21
21
  }
22
22
  __decorate([
23
- cached,
23
+ cache,
24
24
  __metadata("design:type", String),
25
25
  __metadata("design:paramtypes", [])
26
26
  ], DefaultIconStyling.prototype, "main", null);
@@ -1,13 +1,13 @@
1
1
  import { Styling } from "./Styling.js";
2
- export type FieldStyling = {
2
+ export type InputStyling = {
3
3
  main: string;
4
4
  icon: string;
5
- input: string;
5
+ field: string;
6
6
  popup: string;
7
7
  };
8
- export declare class DefaultFieldStyling extends Styling implements FieldStyling {
8
+ export declare class DefaultInputStyling extends Styling implements InputStyling {
9
9
  get main(): string;
10
10
  get icon(): string;
11
- get input(): string;
11
+ get field(): string;
12
12
  get popup(): string;
13
13
  }
@@ -7,10 +7,10 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
7
7
  var __metadata = (this && this.__metadata) || function (k, v) {
8
8
  if (typeof Reflect === "object" && typeof Reflect.metadata === "function") return Reflect.metadata(k, v);
9
9
  };
10
- import { cached } from "reactronic";
10
+ import { cache } from "reactronic";
11
11
  import { css } from "@emotion/css";
12
12
  import { Styling } from "./Styling.js";
13
- export class DefaultFieldStyling extends Styling {
13
+ export class DefaultInputStyling extends Styling {
14
14
  get main() {
15
15
  return css `
16
16
  border-radius: ${this.$.borderRadius};
@@ -26,7 +26,7 @@ export class DefaultFieldStyling extends Styling {
26
26
  color: ${this.$.outlineColor};
27
27
  `;
28
28
  }
29
- get input() {
29
+ get field() {
30
30
  return css `
31
31
  padding: ${this.$.outlinePadding};
32
32
  `;
@@ -47,22 +47,22 @@ export class DefaultFieldStyling extends Styling {
47
47
  }
48
48
  }
49
49
  __decorate([
50
- cached,
50
+ cache,
51
51
  __metadata("design:type", String),
52
52
  __metadata("design:paramtypes", [])
53
- ], DefaultFieldStyling.prototype, "main", null);
53
+ ], DefaultInputStyling.prototype, "main", null);
54
54
  __decorate([
55
- cached,
55
+ cache,
56
56
  __metadata("design:type", String),
57
57
  __metadata("design:paramtypes", [])
58
- ], DefaultFieldStyling.prototype, "icon", null);
58
+ ], DefaultInputStyling.prototype, "icon", null);
59
59
  __decorate([
60
- cached,
60
+ cache,
61
61
  __metadata("design:type", String),
62
62
  __metadata("design:paramtypes", [])
63
- ], DefaultFieldStyling.prototype, "input", null);
63
+ ], DefaultInputStyling.prototype, "field", null);
64
64
  __decorate([
65
- cached,
65
+ cache,
66
66
  __metadata("design:type", String),
67
67
  __metadata("design:paramtypes", [])
68
- ], DefaultFieldStyling.prototype, "popup", null);
68
+ ], DefaultInputStyling.prototype, "popup", null);
@@ -1,4 +1,4 @@
1
- import { ObservableObject } from "reactronic";
1
+ import { TriggeringObject } from "reactronic";
2
2
  export type BasicAbstractTheme = {
3
3
  fillColor: string;
4
4
  textColor: string;
@@ -10,7 +10,7 @@ export type BasicAbstractTheme = {
10
10
  outlinePadding: string;
11
11
  shadow: string;
12
12
  };
13
- export declare class Styling extends ObservableObject {
13
+ export declare class Styling extends TriggeringObject {
14
14
  protected readonly $: BasicAbstractTheme;
15
15
  constructor($: BasicAbstractTheme);
16
16
  }
@@ -7,14 +7,14 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
7
7
  var __metadata = (this && this.__metadata) || function (k, v) {
8
8
  if (typeof Reflect === "object" && typeof Reflect.metadata === "function") return Reflect.metadata(k, v);
9
9
  };
10
- import { ObservableObject, unobservable } from "reactronic";
11
- export class Styling extends ObservableObject {
10
+ import { TriggeringObject, trigger } from "reactronic";
11
+ export class Styling extends TriggeringObject {
12
12
  constructor($) {
13
13
  super();
14
14
  this.$ = $;
15
15
  }
16
16
  }
17
17
  __decorate([
18
- unobservable,
18
+ trigger(false),
19
19
  __metadata("design:type", Object)
20
20
  ], Styling.prototype, "$", void 0);
@@ -7,7 +7,7 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
7
7
  var __metadata = (this && this.__metadata) || function (k, v) {
8
8
  if (typeof Reflect === "object" && typeof Reflect.metadata === "function") return Reflect.metadata(k, v);
9
9
  };
10
- import { cached } from "reactronic";
10
+ import { cache } from "reactronic";
11
11
  import { css } from "@emotion/css";
12
12
  import { Styling } from "./Styling.js";
13
13
  export class DefaultToggleStyling extends Styling {
@@ -32,17 +32,17 @@ export class DefaultToggleStyling extends Styling {
32
32
  }
33
33
  }
34
34
  __decorate([
35
- cached,
35
+ cache,
36
36
  __metadata("design:type", String),
37
37
  __metadata("design:paramtypes", [])
38
38
  ], DefaultToggleStyling.prototype, "main", null);
39
39
  __decorate([
40
- cached,
40
+ cache,
41
41
  __metadata("design:type", String),
42
42
  __metadata("design:paramtypes", [])
43
43
  ], DefaultToggleStyling.prototype, "icon", null);
44
44
  __decorate([
45
- cached,
45
+ cache,
46
46
  __metadata("design:type", String),
47
47
  __metadata("design:paramtypes", [])
48
48
  ], DefaultToggleStyling.prototype, "label", null);
@@ -31,11 +31,11 @@ export type El<T = any, M = any> = {
31
31
  useStylingPreset(stylingPresetName: string, enabled?: boolean): void;
32
32
  };
33
33
  export declare enum ElKind {
34
- panel = 0,
34
+ division = 0,
35
35
  table = 1,
36
- note = 2,
36
+ text = 2,
37
37
  group = 3,
38
- part = 4,
38
+ partition = 4,
39
39
  splitter = 5,
40
40
  cursor = 6,
41
41
  native = 7
@@ -1,10 +1,10 @@
1
1
  export var ElKind;
2
2
  (function (ElKind) {
3
- ElKind[ElKind["panel"] = 0] = "panel";
3
+ ElKind[ElKind["division"] = 0] = "division";
4
4
  ElKind[ElKind["table"] = 1] = "table";
5
- ElKind[ElKind["note"] = 2] = "note";
5
+ ElKind[ElKind["text"] = 2] = "text";
6
6
  ElKind[ElKind["group"] = 3] = "group";
7
- ElKind[ElKind["part"] = 4] = "part";
7
+ ElKind[ElKind["partition"] = 4] = "partition";
8
8
  ElKind[ElKind["splitter"] = 5] = "splitter";
9
9
  ElKind[ElKind["cursor"] = 6] = "cursor";
10
10
  ElKind[ElKind["native"] = 7] = "native";
@@ -29,7 +29,7 @@ export declare class ElImpl<T extends Element = any, M = any> implements El<T, M
29
29
  constructor(node: ReactiveNode<El<T, M>>);
30
30
  prepareForUpdate(): void;
31
31
  get index(): number;
32
- get isPanel(): boolean;
32
+ get isDivision(): boolean;
33
33
  get isTable(): boolean;
34
34
  get isAuxiliary(): boolean;
35
35
  get kind(): ElKind;