dothtml-interfaces 0.4.7 → 1.0.0

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 (27) hide show
  1. package/README.md +3 -3
  2. package/package.json +6 -4
  3. package/src/bindings/{i-binding.d.ts → i-binding.ts} +11 -11
  4. package/src/bindings/{i-observer.d.ts → i-observer.ts} +2 -2
  5. package/src/bindings/{i-reactive.d.ts → i-reactive.ts} +4 -4
  6. package/src/bindings/i-ref.ts +5 -0
  7. package/src/bindings/{i-watcher.d.ts → i-watcher.ts} +52 -38
  8. package/src/{i-dot-component.d.ts → i-dot-component.ts} +113 -84
  9. package/src/{i-dot.d.ts → i-dot.ts} +1041 -1047
  10. package/src/{i-event-bus.d.ts → i-event-bus.ts} +10 -10
  11. package/src/{index.d.ts → index.ts} +14 -14
  12. package/src/styles/at-rules/{i-at-color-profile-builder.d.ts → i-at-color-profile-builder.ts} +4 -4
  13. package/src/styles/at-rules/{i-at-counter-style-builder.d.ts → i-at-counter-style-builder.ts} +14 -14
  14. package/src/styles/at-rules/{i-at-font-family-builder.d.ts → i-at-font-family-builder.ts} +18 -18
  15. package/src/styles/at-rules/{i-at-font-palette-values.d.ts → i-at-font-palette-values.ts} +5 -5
  16. package/src/styles/at-rules/{i-at-keyframes-builder.d.ts → i-at-keyframes-builder.ts} +7 -7
  17. package/src/styles/at-rules/{i-at-page-builder.d.ts → i-at-page-builder.ts} +19 -19
  18. package/src/styles/complex-css-types/{i-filter-prop.d.ts → i-filter-prop.ts} +19 -19
  19. package/src/styles/complex-css-types/{i-shadow-prop.d.ts → i-shadow-prop.ts} +11 -11
  20. package/src/styles/complex-css-types/{i-transformation-prop.d.ts → i-transformation-prop.ts} +32 -32
  21. package/src/styles/{css-types.d.ts → css-types.ts} +141 -142
  22. package/src/styles/{i-css-prop.d.ts → i-css-prop.ts} +295 -295
  23. package/src/styles/{i-dot-css.d.ts → i-dot-css.ts} +218 -214
  24. package/src/styles/mapped-types/{angle-prop.d.ts → angle-prop.ts} +15 -15
  25. package/src/styles/mapped-types/{color-props.d.ts → color-props.ts} +60 -60
  26. package/src/styles/mapped-types/{length-prop.d.ts → length-prop.ts} +21 -20
  27. package/src/bindings/i-ref.d.ts +0 -4
package/src/styles/{css-types.d.ts → css-types.ts} RENAMED
@@ -1,143 +1,142 @@
1
- import { IBinding } from "../bindings/i-binding";
2
- import { IReactive } from "../bindings/i-reactive";
3
- import { IWatcher } from "../bindings/i-watcher";
4
-
5
- // Global keyword values.
6
- export type GKV<T=string> = IReactive<T>|"inherit"|"initial"|"unset"|"revert"|"revert-layer";
7
-
8
- export type ComplexType = string;
9
-
10
- export type ValueOrReactive<T> = T|IBinding<any, T>|IWatcher<T>;
11
-
12
- // BASIC TYPES
13
- export type Str = `"${string|""}"`|`'${string|""}'`; // TODO: wherever str is required, we could just inject quotes...
14
- export type Int = number;
15
- export type Percentage = `${number}%`;
16
- export type AlphaValue = number | Percentage; // Number should be interpreted as a decimal (x/1);
17
- export type Ratio = number|`${number}/${number}`;
18
-
19
- // export type DigitStr = "0"|"1"|"2"|"3"|"4"|"5"|"6"|"7"|"8"|"9";
20
- // export type HexStr = DigitStr|"A"|"B"|"C"|"D"|"E"|"F"|"a"|"b"|"c"|"d"|"e"|"f";
21
- // export type Hex2 = `${HexStr}${HexStr}`;
22
- // export type Hex3 = `${Hex2}${HexStr}`;
23
- // export type Hex4 = `${Hex3}${HexStr}`;
24
- // export type Hex5 = `${Hex4}${HexStr}`;
25
- // export type Hex6 = `${Hex5}${HexStr}`;
26
- // export type HexColor = `#${Hex3|Hex6}`;
27
- export type HexColor = `#${ComplexType}`;
28
-
29
- // LENGTH
30
- // export type AbsoluteUnits = "cm"|"mm"|"in"|"px"|"pt"|"pc"|"Q";
31
- // export type RelativeUnits = "cap"|"ch"|"em"|"ex"|"ic"|"lh"|"rem"|"rlh"
32
- // |"vh"|"vw"|"vmin"|"vmax"|"vb"|"vi"
33
- // |"cqw"|"cqh"|"cqi"|"cqb"|"cqmin"|"cqmax"
34
- // |"%";
35
- // export type AllLengthUnits = AbsoluteUnits|RelativeUnits;
36
- // export type NumericLength = number|`${number}${AllLengthUnits}`;
37
- // export type LengthPercentage = NumericLength|Percentage;
38
-
39
- // TIME & FREQUENCY
40
- export type Time = `${number}${"s"|"ms"}`;
41
- export type TimePercentage = Time|Percentage;
42
- export type Frequency = `${number}${"Hz"|"kHz"}`;
43
- export type FrequencyPercentage = Frequency|Percentage;
44
-
45
- // RESOLUTION
46
- export type Resolution = `${number}${"dpi"|"dpcm"|"dppx"|"x"}`;
47
-
48
- // MISC ENUM TYPES
49
- export type AbsoluteSize = "xx-small"|"x-small"|"small"|"medium"|"large"|"x-large"|"xx-large"|"xxx-large";
50
- export type BlendMode = "normal"|"multiply"|"screen"|"overlay"|"darken"|"lighten"|"color-dodge"|"color-burn"|"hard-light"|"soft-light"|"difference"|"exclusion"|"hue"|"saturation"|"color"|"luminosity";
51
- export type LineStyle = "none"|"hidden"|"dotted"|"dashed"|"solid"|"double"|"groove"|"ridge"|"inset"|"outset";
52
- export type DisplayBox = "contents"|"none"
53
- export type DisplayInside = "flow"|"flow-root"|"table"|"flex"|"grid"|"ruby";
54
- export type DisplayInternal = "table-row-group"|"table-header-group"|"table-footer-group"|"table-row"|"table-cell"|"table-column-group"|"table-column"|"table-caption"|"ruby-base"|"ruby-text"|"ruby-base-container"|"ruby-text-container";
55
- export type DisplayLegacy = "inline-block"|"inline-table"|"inline-flex"|"inline-grid";
56
- export type DisplayOutside = "block"|"inline"|"run-in";
57
- export type DisplayFlow = "flow"|"flow-root";
58
- export type Overflow = "visible"|"hidden"|"clip"|"scroll";
59
- export type RelativeSize = "smaller"|"larger";
60
-
61
- // BASIC SHAPE
62
- // TODO need a builder.
63
- // Most of these are too complex to represent as a typescript type.
64
- // Realistically they should just be constructed usign a builder rather than setting the strings.
65
- // https://developer.mozilla.org/en-US/docs/Web/CSS/basic-shape
66
- export type InsetFunction = `inset(${ComplexType})`;
67
- export type RectFunction = `rect(${ComplexType})`;
68
- export type XywhFunction = `xywh(${ComplexType})`;
69
- export type CircleFunction = `circle(${ComplexType})`;
70
- export type EllipseFunction = `ellipse(${ComplexType})`;
71
- export type PolygonFunction = `polygon(${ComplexType})`;
72
- export type PathFunction = `path(${ComplexType})`;
73
- export type BasicShape = InsetFunction|RectFunction|XywhFunction|CircleFunction|EllipseFunction|PolygonFunction|PathFunction;
74
-
75
- // ANGLES
76
- export type AngleUnits = "deg"|"turn"|"rad"|"grad";
77
- export type Angle = number | `${number}${AngleUnits}`; // Pure number should be interpreted as degrees.
78
- export type AnglePercentage = number | Angle | Percentage; // Number should be interpreted as a decimal (x/1);
79
-
80
- // ADVANCED TYPES
81
- // Box.
82
- export type VisualBox = "content-box" | "padding-box" | "border-box"; // the three <box> values
83
- export type RayoutBox = VisualBox | "margin-box" // the <shape-box> values
84
- export type PaintBox = VisualBox | "fill-box" | "stroke-box"
85
- export type CoordBox = VisualBox | "fill-box" | "stroke-box" | "view-box"
86
- export type GeometryBox = RayoutBox | "fill-box" | "stroke-box" | "view-box"
87
- export type BoxEdge = VisualBox | RayoutBox | PaintBox | CoordBox | GeometryBox;
88
-
89
- // DIMENSION
90
- // export type Dimension = Angle|Time|Frequency|NumericLength;
91
-
92
- // Calc.
93
- export type Calc = ComplexType;
94
-
95
- // It's difficult to compose calc types because they're too complex. See below.
96
- // May consider adding a builder for this, but not sure what it will look like.
97
-
98
- /*
99
- // Can't get this working because the types get too complex for TS.
100
- // export type Decrement = [
101
- // never, 0, 1, 2, 3, 4, 5, 6, 7
102
- // ];
103
- // export type CalcConstant = "e"|"-e"|"E"|"pi"|"-pi"|"infinity"|"-infinity"|"NaN"; // Defined on a different page. Not sure what it's for.
104
- // export type CalcKeyword = 'e' | 'pi' | 'infinity' | '-infinity' | 'NaN';
105
- // export type CalcValue = number | Percentage | Dimension | CalcKeyword;// | CalcSum;
106
- // export type CalcProductSuffix<T extends CalcValue, Depth extends number> = Depth extends 0 ? string : `${"*"|"/"}${T}${CalcProductSuffix<T, Decrement[Depth]>}`;
107
- // export type CalcSumSuffix<T extends CalcValue, Depth extends number> = Depth extends 0 ? string : `${"+"|"-"}${T}${CalcProductSuffix<T, 8>}`;
108
- // // TODO: optional space can go here.
109
- // export type CalcProduct<T extends CalcValue> = T|`${T}${CalcProductSuffix<T, 8>}`;
110
- // export type CalcSum<T extends CalcValue> = CalcProduct<T>|`${CalcProduct<T>}${"+"|"-"}${CalcProduct<T>}`
111
- // CalcValue export type definition
112
- // Helper types for CalcProduct and CalcSum
113
- // export type CalcOperation = '+' | '-' | '*' | '/';
114
- // export type CalcProductPart = CalcValue | [CalcOperation, CalcValue];
115
- */
116
-
117
- // Color Interpolation.
118
- export type RectangularColorSpace = "srgb"|"srgb-linear"|"display-p3"|"a98-rgb"|"prophoto-rgb"|"rec2020"|"lab"|"oklab"|"xyz"|"xyz-d50"|"xyz-d65";
119
- export type PolarColorSpace = "hsl"|"hwb"|"lch"|"oklch";
120
- export type HueInterpolationMethod = `${"shorter"|"longer"|"increasing"|"decreasing"} hue`
121
- export type ColorInterpolationMethod = RectangularColorSpace|PolarColorSpace|`${PolarColorSpace} ${HueInterpolationMethod}`;
122
-
123
- export type Color = string;
124
-
125
- // Display List Item
126
-
127
- export type DisplayListItem =
128
- | 'list-item'
129
- | `${DisplayOutside} list-item`
130
- | `list-item ${DisplayOutside}`
131
- | `${DisplayFlow} list-item`
132
- | `list-item ${DisplayFlow}`
133
- | `${DisplayOutside} ${DisplayFlow} list-item`
134
- | `${DisplayOutside} list-item ${DisplayFlow}`
135
- | `${DisplayFlow} ${DisplayOutside} list-item`
136
- | `${DisplayFlow} list-item ${DisplayOutside}`
137
- | `list-item ${DisplayOutside} ${DisplayFlow}`
138
- | `list-item ${DisplayFlow} ${DisplayOutside}`;
139
-
140
- // ID
141
- export type Ident = string;
142
- export type CustomIdent = string;
1
+ import { IBinding } from "../bindings/i-binding";
2
+ import { IWatcher } from "../bindings/i-watcher";
3
+
4
+ // Global keyword values.
5
+ export type GKV = IWatcher<string>|IBinding<any, string>|"inherit"|"initial"|"unset"|"revert"|"revert-layer";
6
+
7
+ export type ComplexType = string;
8
+
9
+ export type ValueOrReactive<T> = T|IBinding<any, T>|IWatcher<T>;
10
+
11
+ // BASIC TYPES
12
+ export type Str = `"${string|""}"`|`'${string|""}'`; // TODO: wherever str is required, we could just inject quotes...
13
+ export type Int = number;
14
+ export type Percentage = `${number}%`;
15
+ export type AlphaValue = number | Percentage; // Number should be interpreted as a decimal (x/1);
16
+ export type Ratio = number|`${number}/${number}`;
17
+
18
+ // export type DigitStr = "0"|"1"|"2"|"3"|"4"|"5"|"6"|"7"|"8"|"9";
19
+ // export type HexStr = DigitStr|"A"|"B"|"C"|"D"|"E"|"F"|"a"|"b"|"c"|"d"|"e"|"f";
20
+ // export type Hex2 = `${HexStr}${HexStr}`;
21
+ // export type Hex3 = `${Hex2}${HexStr}`;
22
+ // export type Hex4 = `${Hex3}${HexStr}`;
23
+ // export type Hex5 = `${Hex4}${HexStr}`;
24
+ // export type Hex6 = `${Hex5}${HexStr}`;
25
+ // export type HexColor = `#${Hex3|Hex6}`;
26
+ export type HexColor = `#${ComplexType}`;
27
+
28
+ // LENGTH
29
+ // export type AbsoluteUnits = "cm"|"mm"|"in"|"px"|"pt"|"pc"; // Esoteric removed: "Q"
30
+ // export type RelativeUnits = "ch"|"em"|"ex"|"lh"|"rem"
31
+ // |"vh"|"vw"|"vmin"|"vmax"
32
+ // |"cqw"|"cqh"|"cqi"|"cqb"|"cqmin"|"cqmax"
33
+ // |"%"; // Esoteric removed: "cap"|"ic"|"rlh"|"vb"|"vi"
34
+ // export type AllLengthUnits = AbsoluteUnits|RelativeUnits;
35
+ // export type NumericLength = number|`${number}${AllLengthUnits}`;
36
+ // export type LengthPercentage = NumericLength|Percentage;
37
+
38
+ // TIME & FREQUENCY
39
+ export type Time = `${number}${"s"|"ms"}`;
40
+ export type TimePercentage = Time|Percentage;
41
+ export type Frequency = `${number}${"Hz"|"kHz"}`;
42
+ export type FrequencyPercentage = Frequency|Percentage;
43
+
44
+ // RESOLUTION
45
+ export type Resolution = `${number}${"dpi"|"dpcm"|"dppx"|"x"}`;
46
+
47
+ // MISC ENUM TYPES
48
+ export type AbsoluteSize = "xx-small"|"x-small"|"small"|"medium"|"large"|"x-large"|"xx-large"|"xxx-large";
49
+ export type BlendMode = "normal"|"multiply"|"screen"|"overlay"|"darken"|"lighten"|"color-dodge"|"color-burn"|"hard-light"|"soft-light"|"difference"|"exclusion"|"hue"|"saturation"|"color"|"luminosity";
50
+ export type LineStyle = "none"|"hidden"|"dotted"|"dashed"|"solid"|"double"|"groove"|"ridge"|"inset"|"outset";
51
+ export type DisplayBox = "contents"|"none"
52
+ export type DisplayInside = "flow"|"flow-root"|"table"|"flex"|"grid"|"ruby";
53
+ export type DisplayInternal = "table-row-group"|"table-header-group"|"table-footer-group"|"table-row"|"table-cell"|"table-column-group"|"table-column"|"table-caption"|"ruby-base"|"ruby-text"|"ruby-base-container"|"ruby-text-container";
54
+ export type DisplayLegacy = "inline-block"|"inline-table"|"inline-flex"|"inline-grid";
55
+ export type DisplayOutside = "block"|"inline"|"run-in";
56
+ export type DisplayFlow = "flow"|"flow-root";
57
+ export type Overflow = "visible"|"hidden"|"clip"|"scroll";
58
+ export type RelativeSize = "smaller"|"larger";
59
+
60
+ // BASIC SHAPE
61
+ // TODO need a builder.
62
+ // Most of these are too complex to represent as a typescript type.
63
+ // Realistically they should just be constructed usign a builder rather than setting the strings.
64
+ // https://developer.mozilla.org/en-US/docs/Web/CSS/basic-shape
65
+ export type InsetFunction = `inset(${ComplexType})`;
66
+ export type RectFunction = `rect(${ComplexType})`;
67
+ export type XywhFunction = `xywh(${ComplexType})`;
68
+ export type CircleFunction = `circle(${ComplexType})`;
69
+ export type EllipseFunction = `ellipse(${ComplexType})`;
70
+ export type PolygonFunction = `polygon(${ComplexType})`;
71
+ export type PathFunction = `path(${ComplexType})`;
72
+ export type BasicShape = InsetFunction|RectFunction|XywhFunction|CircleFunction|EllipseFunction|PolygonFunction|PathFunction;
73
+
74
+ // ANGLES
75
+ export type AngleUnits = "deg"|"turn"|"rad"|"grad";
76
+ export type Angle = number | `${number}${AngleUnits}`; // Pure number should be interpreted as degrees.
77
+ export type AnglePercentage = number | Angle | Percentage; // Number should be interpreted as a decimal (x/1);
78
+
79
+ // ADVANCED TYPES
80
+ // Box.
81
+ export type VisualBox = "content-box" | "padding-box" | "border-box"; // the three <box> values
82
+ export type RayoutBox = VisualBox | "margin-box" // the <shape-box> values
83
+ export type PaintBox = VisualBox | "fill-box" | "stroke-box"
84
+ export type CoordBox = VisualBox | "fill-box" | "stroke-box" | "view-box"
85
+ export type GeometryBox = RayoutBox | "fill-box" | "stroke-box" | "view-box"
86
+ export type BoxEdge = VisualBox | RayoutBox | PaintBox | CoordBox | GeometryBox;
87
+
88
+ // DIMENSION
89
+ // export type Dimension = Angle|Time|Frequency|NumericLength;
90
+
91
+ // Calc.
92
+ export type Calc = ComplexType;
93
+
94
+ // It's difficult to compose calc types because they're too complex. See below.
95
+ // May consider adding a builder for this, but not sure what it will look like.
96
+
97
+ /*
98
+ // Can't get this working because the types get too complex for TS.
99
+ // export type Decrement = [
100
+ // never, 0, 1, 2, 3, 4, 5, 6, 7
101
+ // ];
102
+ // export type CalcConstant = "e"|"-e"|"E"|"pi"|"-pi"|"infinity"|"-infinity"|"NaN"; // Defined on a different page. Not sure what it's for.
103
+ // export type CalcKeyword = 'e' | 'pi' | 'infinity' | '-infinity' | 'NaN';
104
+ // export type CalcValue = number | Percentage | Dimension | CalcKeyword;// | CalcSum;
105
+ // export type CalcProductSuffix<T extends CalcValue, Depth extends number> = Depth extends 0 ? string : `${"*"|"/"}${T}${CalcProductSuffix<T, Decrement[Depth]>}`;
106
+ // export type CalcSumSuffix<T extends CalcValue, Depth extends number> = Depth extends 0 ? string : `${"+"|"-"}${T}${CalcProductSuffix<T, 8>}`;
107
+ // // TODO: optional space can go here.
108
+ // export type CalcProduct<T extends CalcValue> = T|`${T}${CalcProductSuffix<T, 8>}`;
109
+ // export type CalcSum<T extends CalcValue> = CalcProduct<T>|`${CalcProduct<T>}${"+"|"-"}${CalcProduct<T>}`
110
+ // CalcValue export type definition
111
+ // Helper types for CalcProduct and CalcSum
112
+ // export type CalcOperation = '+' | '-' | '*' | '/';
113
+ // export type CalcProductPart = CalcValue | [CalcOperation, CalcValue];
114
+ */
115
+
116
+ // Color Interpolation.
117
+ export type RectangularColorSpace = "srgb"|"srgb-linear"|"display-p3"|"a98-rgb"|"prophoto-rgb"|"rec2020"|"lab"|"oklab"|"xyz"|"xyz-d50"|"xyz-d65";
118
+ export type PolarColorSpace = "hsl"|"hwb"|"lch"|"oklch";
119
+ export type HueInterpolationMethod = `${"shorter"|"longer"|"increasing"|"decreasing"} hue`
120
+ export type ColorInterpolationMethod = RectangularColorSpace|PolarColorSpace|`${PolarColorSpace} ${HueInterpolationMethod}`;
121
+
122
+ export type Color = string;
123
+
124
+ // Display List Item
125
+
126
+ export type DisplayListItem =
127
+ | 'list-item'
128
+ | `${DisplayOutside} list-item`
129
+ | `list-item ${DisplayOutside}`
130
+ | `${DisplayFlow} list-item`
131
+ | `list-item ${DisplayFlow}`
132
+ | `${DisplayOutside} ${DisplayFlow} list-item`
133
+ | `${DisplayOutside} list-item ${DisplayFlow}`
134
+ | `${DisplayFlow} ${DisplayOutside} list-item`
135
+ | `${DisplayFlow} list-item ${DisplayOutside}`
136
+ | `list-item ${DisplayOutside} ${DisplayFlow}`
137
+ | `list-item ${DisplayFlow} ${DisplayOutside}`;
138
+
139
+ // ID
140
+ export type Ident = string;
141
+ export type CustomIdent = string;
143
142
  export type DashedIdent = `--${string}`;