dothtml-interfaces 0.1.31 → 0.1.33
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/package.json +1 -1
- package/src/i-component.d.ts +1 -1
- package/src/i-dot-css.d.ts +328 -46
- package/src/i-dot.d.ts +2 -0
- package/src/index.d.ts +8 -1
package/package.json
CHANGED
package/src/i-component.d.ts
CHANGED
|
@@ -6,11 +6,11 @@ export interface FrameworkItems {
|
|
|
6
6
|
/**
|
|
7
7
|
* The shadow root element of the component.
|
|
8
8
|
*/
|
|
9
|
-
root: ShadowRoot;
|
|
10
9
|
refs: { [key: string]: HTMLElement };
|
|
11
10
|
emit: (event: string, ...args: Array<any>)=>void;
|
|
12
11
|
restyle(): void;
|
|
13
12
|
readonly _meta: {
|
|
13
|
+
readonly shadowRoot: ShadowRoot;
|
|
14
14
|
readonly isRendered: boolean;
|
|
15
15
|
readonly tagName: string;
|
|
16
16
|
readonly args: Array<any>;
|
package/src/i-dot-css.d.ts
CHANGED
|
@@ -1,54 +1,306 @@
|
|
|
1
|
+
|
|
2
|
+
|
|
3
|
+
type BasicCommonValues = "inherit"|"initial"|"unset"|"revert"|"revert-layer";
|
|
4
|
+
|
|
5
|
+
type ComplexType = string;
|
|
6
|
+
|
|
7
|
+
// BASIC TYPES
|
|
8
|
+
type Str = `"${string|""}"`|`'${string|""}'`; // TODO: wherever str is required, we could just inject quotes...
|
|
9
|
+
type Int = number;
|
|
10
|
+
type Percentage = `${number}%`;
|
|
11
|
+
type AlphaValue = number | Percentage; // Number should be interpreted as a decimal (x/1);
|
|
12
|
+
type Ratio = number|`${number}/${number}`;
|
|
13
|
+
|
|
14
|
+
// type DigitStr = "0"|"1"|"2"|"3"|"4"|"5"|"6"|"7"|"8"|"9";
|
|
15
|
+
// type HexStr = DigitStr|"A"|"B"|"C"|"D"|"E"|"F"|"a"|"b"|"c"|"d"|"e"|"f";
|
|
16
|
+
// type Hex2 = `${HexStr}${HexStr}`;
|
|
17
|
+
// type Hex3 = `${Hex2}${HexStr}`;
|
|
18
|
+
// type Hex4 = `${Hex3}${HexStr}`;
|
|
19
|
+
// type Hex5 = `${Hex4}${HexStr}`;
|
|
20
|
+
// type Hex6 = `${Hex5}${HexStr}`;
|
|
21
|
+
// type HexColor = `#${Hex3|Hex6}`;
|
|
22
|
+
type HexColor = `#${ComplexType}`;
|
|
23
|
+
|
|
24
|
+
// LENGTH
|
|
25
|
+
type AbsoluteUnits = "cm"|"mm"|"in"|"px"|"pt"|"pc"|"Q";
|
|
26
|
+
type RelativeUnits = "cap"|"ch"|"em"|"ex"|"ic"|"lh"|"rem"|"rlh"
|
|
27
|
+
|"vh"|"vw"|"vmin"|"vmax"|"vb"|"vi"
|
|
28
|
+
|"cqw"|"cqh"|"cqi"|"cqb"|"cqmin"|"cqmax"
|
|
29
|
+
|"%";
|
|
30
|
+
type AllLengthUnits = AbsoluteUnits|RelativeUnits;
|
|
31
|
+
type NumericLength = `${number}${AllLengthUnits}`;
|
|
32
|
+
type LengthPercentage = NumericLength|Percentage;
|
|
33
|
+
|
|
34
|
+
// TIME & FREQUENCY
|
|
35
|
+
type Time = `${number}${"s"|"ms"}`;
|
|
36
|
+
type TimePercentage = Time|Percentage;
|
|
37
|
+
type Frequency = `${number}${"Hz"|"kHz"}`;
|
|
38
|
+
type FrequencyPercentage = Frequency|Percentage;
|
|
39
|
+
|
|
40
|
+
// RESOLUTION
|
|
41
|
+
type Resolution = `${number}${"dpi"|"dpcm"|"dppx"|"x"}`;
|
|
42
|
+
|
|
43
|
+
// MISC ENUM TYPES
|
|
44
|
+
type AbsoluteSize = "xx-small"|"x-small"|"small"|"medium"|"large"|"x-large"|"xx-large"|"xxx-large";
|
|
45
|
+
type BlendMode = "normal"|"multiply"|"screen"|"overlay"|"darken"|"lighten"|"color-dodge"|"color-burn"|"hard-light"|"soft-light"|"difference"|"exclusion"|"hue"|"saturation"|"color"|"luminosity";
|
|
46
|
+
type LineStyle = "none"|"hidden"|"dotted"|"dashed"|"solid"|"double"|"groove"|"ridge"|"inset"|"outset";
|
|
47
|
+
type DisplayBox = "contents"|"none"
|
|
48
|
+
type DisplayInside = "flow"|"flow-root"|"table"|"flex"|"grid"|"ruby";
|
|
49
|
+
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";
|
|
50
|
+
type DisplayLegacy = "inline-block"|"inline-table"|"inline-flex"|"inline-grid";
|
|
51
|
+
type DisplayOutside = "block"|"inline"|"run-in";
|
|
52
|
+
type DisplayFlow = "flow"|"flow-root";
|
|
53
|
+
type Overflow = "visible"|"hidden"|"clip"|"scroll";
|
|
54
|
+
type RelativeSize = "smaller"|"larger";
|
|
55
|
+
|
|
56
|
+
// BASIC SHAPE
|
|
57
|
+
// TODO need a builder.
|
|
58
|
+
// Most of these are too complex to represent as a typescript type.
|
|
59
|
+
// Realistically they should just be constructed usign a builder rather than setting the strings.
|
|
60
|
+
// https://developer.mozilla.org/en-US/docs/Web/CSS/basic-shape
|
|
61
|
+
type InsetFunction = `inset(${ComplexType})`;
|
|
62
|
+
type RectFunction = `rect(${ComplexType})`;
|
|
63
|
+
type XywhFunction = `xywh(${ComplexType})`;
|
|
64
|
+
type CircleFunction = `circle(${ComplexType})`;
|
|
65
|
+
type EllipseFunction = `ellipse(${ComplexType})`;
|
|
66
|
+
type PolygonFunction = `polygon(${ComplexType})`;
|
|
67
|
+
type PathFunction = `path(${ComplexType})`;
|
|
68
|
+
type BasicShape = InsetFunction|RectFunction|XywhFunction|CircleFunction|EllipseFunction|PolygonFunction|PathFunction;
|
|
69
|
+
|
|
70
|
+
// ANGLES
|
|
71
|
+
type AngleUnits = "deg"|"turn"|"rad"|"grad";
|
|
72
|
+
type Angle = number | `${number}${AngleUnits}`; // Pure number should be interpreted as degrees.
|
|
73
|
+
type AnglePercentage = number | Angle | Percentage; // Number should be interpreted as a decimal (x/1);
|
|
74
|
+
|
|
75
|
+
// ADVANCED TYPES
|
|
76
|
+
// Box.
|
|
77
|
+
type VisualBox = "content-box" | "padding-box" | "border-box"; // the three <box> values
|
|
78
|
+
type RayoutBox = VisualBox | "margin-box" // the <shape-box> values
|
|
79
|
+
type PaintBox = VisualBox | "fill-box" | "stroke-box"
|
|
80
|
+
type CoordBox = VisualBox | "fill-box" | "stroke-box" | "view-box"
|
|
81
|
+
type GeometryBox = RayoutBox | "fill-box" | "stroke-box" | "view-box"
|
|
82
|
+
type BoxEdge = VisualBox | RayoutBox | PaintBox | CoordBox | GeometryBox;
|
|
83
|
+
|
|
84
|
+
// DIMENSION
|
|
85
|
+
type Dimension = Angle|Time|Frequency|NumericLength;
|
|
86
|
+
|
|
87
|
+
// Calc.
|
|
88
|
+
type Calc = ComplexType;
|
|
89
|
+
|
|
90
|
+
// It's difficult to compose calc types because they're too complex. See below.
|
|
91
|
+
// May consider adding a builder for this, but not sure what it will look like.
|
|
92
|
+
|
|
93
|
+
/*
|
|
94
|
+
// Can't get this working because the types get too complex for TS.
|
|
95
|
+
// type Decrement = [
|
|
96
|
+
// never, 0, 1, 2, 3, 4, 5, 6, 7
|
|
97
|
+
// ];
|
|
98
|
+
// type CalcConstant = "e"|"-e"|"E"|"pi"|"-pi"|"infinity"|"-infinity"|"NaN"; // Defined on a different page. Not sure what it's for.
|
|
99
|
+
// type CalcKeyword = 'e' | 'pi' | 'infinity' | '-infinity' | 'NaN';
|
|
100
|
+
// type CalcValue = number | Percentage | Dimension | CalcKeyword;// | CalcSum;
|
|
101
|
+
// type CalcProductSuffix<T extends CalcValue, Depth extends number> = Depth extends 0 ? string : `${"*"|"/"}${T}${CalcProductSuffix<T, Decrement[Depth]>}`;
|
|
102
|
+
// type CalcSumSuffix<T extends CalcValue, Depth extends number> = Depth extends 0 ? string : `${"+"|"-"}${T}${CalcProductSuffix<T, 8>}`;
|
|
103
|
+
// // TODO: optional space can go here.
|
|
104
|
+
// type CalcProduct<T extends CalcValue> = T|`${T}${CalcProductSuffix<T, 8>}`;
|
|
105
|
+
// type CalcSum<T extends CalcValue> = CalcProduct<T>|`${CalcProduct<T>}${"+"|"-"}${CalcProduct<T>}`
|
|
106
|
+
// CalcValue type definition
|
|
107
|
+
// Helper types for CalcProduct and CalcSum
|
|
108
|
+
// type CalcOperation = '+' | '-' | '*' | '/';
|
|
109
|
+
// type CalcProductPart = CalcValue | [CalcOperation, CalcValue];
|
|
110
|
+
*/
|
|
111
|
+
|
|
112
|
+
// Color Interpolation.
|
|
113
|
+
type RectangularColorSpace = "srgb"|"srgb-linear"|"display-p3"|"a98-rgb"|"prophoto-rgb"|"rec2020"|"lab"|"oklab"|"xyz"|"xyz-d50"|"xyz-d65";
|
|
114
|
+
type PolarColorSpace = "hsl"|"hwb"|"lch"|"oklch";
|
|
115
|
+
type HueInterpolationMethod = `${"shorter"|"longer"|"increasing"|"decreasing"} hue`
|
|
116
|
+
type ColorInterpolationMethod = RectangularColorSpace|PolarColorSpace|`${PolarColorSpace} ${HueInterpolationMethod}`;
|
|
117
|
+
|
|
118
|
+
// Color
|
|
119
|
+
type NamedColor = "aliceblue"|"antiquewhite"|"aqua"|"aquamarine"|"azure"|"beige"|"bisque"|"black"|"blanchedalmond"|"blue"|"blueviolet"|"brown"|"burlywood"|"cadetblue"|"chartreuse"|"chocolate"|"coral"|"cornflowerblue"|"cornsilk"|"crimson"|"cyan"|"darkblue"|"darkcyan"|"darkgoldenrod"|"darkgray"|"darkgrey"|"darkgreen"|"darkkhaki"|"darkmagenta"|"darkolivegreen"|"darkorange"|"darkorchid"|"darkred"|"darksalmon"|"darkseagreen"|"darkslateblue"|"darkslategray"|"darkslategrey"|"darkturquoise"|"darkviolet"|"deeppink"|"deepskyblue"|"dimgray"|"dimgrey"|"dodgerblue"|"firebrick"|"floralwhite"|"forestgreen"|"fuchsia"|"gainsboro"|"ghostwhite"|"gold"|"goldenrod"|"gray"|"grey"|"green"|"greenyellow"|"honeydew"|"hotpink"|"indianred"|"indigo"|"ivory"|"khaki"|"lavender"|"lavenderblush"|"lawngreen"|"lemonchiffon"|"lightblue"|"lightcoral"|"lightcyan"|"lightgoldenrodyellow"|"lightgray"|"lightgrey"|"lightgreen"|"lightpink"|"lightsalmon"|"lightseagreen"|"lightskyblue"|"lightslategray"|"lightslategrey"|"lightsteelblue"|"lightyellow"|"lime"|"limegreen"|"linen"|"magenta"|"maroon"|"mediumaquamarine"|"mediumblue"|"mediumorchid"|"mediumpurple"|"mediumseagreen"|"mediumslateblue"|"mediumspringgreen"|"mediumturquoise"|"mediumvioletred"|"midnightblue"|"mintcream"|"mistyrose"|"moccasin"|"navajowhite"|"navy"|"oldlace"|"olive"|"olivedrab"|"orange"|"orangered"|"orchid"|"palegoldenrod"|"palegreen"|"paleturquoise"|"palevioletred"|"papayawhip"|"peachpuff"|"peru"|"pink"|"plum"|"powderblue"|"purple"|"rebeccapurple"|"red"|"rosybrown"|"royalblue"|"saddlebrown"|"salmon"|"sandybrown"|"seagreen"|"seashell"|"sienna"|"silver"|"skyblue"|"slateblue"|"slategray"|"slategrey"|"snow"|"springgreen"|"steelblue"|"tan"|"teal"|"thistle"|"tomato"|"turquoise"|"violet"|"wheat"|"white"|"whitesmoke"|"yellow"|"yellowgreen";
|
|
120
|
+
type SystemColor = "AccentColor"|"AccentColorText"|"ActiveText"|"ButtonBorder"|"ButtonFace"|"ButtonText"|"Canvas"|"CanvasText"|"Field"|"FieldText"|"GrayText"|"Highlight"|"HighlightText"|"LinkText"|"Mark"|"MarkText"|"SelectedItem"|"SelectedItemText"|"VisitedText";
|
|
121
|
+
type Hue = number|Angle;
|
|
122
|
+
type PredefinedRgb = "srgb"|"srgb-linear"|"display-p3"|"a98-rgb"|"prophoto-rgb"|"rec2020";
|
|
123
|
+
type XyzSpace = "xyz"|"xyz-d50"|"xyz-d65";
|
|
124
|
+
type XyzParams = `${XyzSpace} ${number|Percentage|"none"} ${number|Percentage|"none"} ${number|Percentage|"none"}`
|
|
125
|
+
type PredefinedRgbParams = `${PredefinedRgb} ${number|Percentage|"none"} ${number|Percentage|"none"} ${number|Percentage|"none"}`
|
|
126
|
+
type ColorspaceParams = PredefinedRgbParams|XyzParams;
|
|
127
|
+
|
|
128
|
+
type LRgba<T extends number|AlphaValue> = `rgb(${T}, ${T}, ${T})` | `rgba(${T}, ${T}, ${T}, ${AlphaValue})`;
|
|
129
|
+
type MRgba = `rgb(${number|Percentage|"none"} ${number|Percentage|"none"} ${number|Percentage|"none"})` | `rgba(${number|Percentage|"none"} ${number|Percentage|"none"} ${number|Percentage|"none"} / ${AlphaValue})`;
|
|
130
|
+
type Rgba = LRgba<number|AlphaValue>|MRgba;
|
|
131
|
+
type LHsla = `hsl(${Hue}, ${Percentage}, ${Percentage})` | `hsla(${Hue}, ${Percentage}, ${Percentage}, ${AlphaValue})`;
|
|
132
|
+
type MHsla = `hsl(${Hue|"none"} ${Percentage|number|"none"} ${Percentage|number|"none"})` | `hsla(${Hue|"none"} ${Percentage|number|"none"} ${Percentage|number|"none"} / ${AlphaValue|"none"})`;
|
|
133
|
+
type Hsla = LHsla|MHsla;
|
|
134
|
+
type Hwb = `hwb(${Hue|"none"} ${Percentage|number|"none"} ${Percentage|number|"none"})` | `hwb(${Hue|"none"} ${Percentage|number|"none"} ${Percentage|number|"none"} / ${AlphaValue|"none"})`;
|
|
135
|
+
type Lab = `${"lab"|"oklab"}(${number|Percentage|"none"} ${number|Percentage|"none"} ${number|Percentage|"none"})` | `${"lab"|"oklab"}(${number|Percentage|"none"} ${number|Percentage|"none"} ${number|Percentage|"none"} / ${AlphaValue|"none"})`;
|
|
136
|
+
type Lch = `${"lch"|"oklch"}(${number|Percentage|"none"} ${number|Percentage|"none"} ${Hue|"none"})` | `${"lch"|"oklch"}(${number|Percentage|"none"} ${number|Percentage|"none"} ${Hue|"none"} / ${AlphaValue|"none"})`;
|
|
137
|
+
type ColorFunc = `color(${ColorspaceParams})`| `color(${ColorspaceParams} / ${AlphaValue|"none"})`;
|
|
138
|
+
type AbsoluteColorFunction = Rgba|Hsla|Hwb|Lab|Lch|ColorFunc;
|
|
139
|
+
|
|
140
|
+
type AbsoluteColorBase = HexColor|AbsoluteColorFunction|NamedColor|"transparent";
|
|
141
|
+
type Color = AbsoluteColorBase|SystemColor|"currentcolor";
|
|
142
|
+
type SimpleColor = HexColor|`${"rgb"|"rgba"|"hsl"|"hsla"|"hwb"|"lab"|"lch"|"oklab"|"oklch"|"color"}(${ComplexType})`|NamedColor|SystemColor|"currentcolor";
|
|
143
|
+
|
|
144
|
+
// Display List Item
|
|
145
|
+
|
|
146
|
+
type DisplayListItem =
|
|
147
|
+
| 'list-item'
|
|
148
|
+
| `${DisplayOutside} list-item`
|
|
149
|
+
| `list-item ${DisplayOutside}`
|
|
150
|
+
| `${DisplayFlow} list-item`
|
|
151
|
+
| `list-item ${DisplayFlow}`
|
|
152
|
+
| `${DisplayOutside} ${DisplayFlow} list-item`
|
|
153
|
+
| `${DisplayOutside} list-item ${DisplayFlow}`
|
|
154
|
+
| `${DisplayFlow} ${DisplayOutside} list-item`
|
|
155
|
+
| `${DisplayFlow} list-item ${DisplayOutside}`
|
|
156
|
+
| `list-item ${DisplayOutside} ${DisplayFlow}`
|
|
157
|
+
| `list-item ${DisplayFlow} ${DisplayOutside}`;
|
|
158
|
+
|
|
159
|
+
// ID
|
|
160
|
+
type Ident = string;
|
|
161
|
+
type CustomIdent = string;
|
|
162
|
+
type DashedIdent = `--${string}`;
|
|
163
|
+
|
|
164
|
+
// EASING FUNCTION
|
|
165
|
+
|
|
166
|
+
type StepPosition = "jump-start"|"jump-end"|"jump-none"|"jump-both"|"start"|"end";
|
|
167
|
+
type LinearStopLength = Percentage|`${Percentage} ${Percentage}`;
|
|
168
|
+
type LinearStop = number|`${number} ${LinearStopLength}`|`${LinearStopLength} ${number}`;
|
|
169
|
+
type LinearStopList = `${LinearStop}${`, ${LinearStop}${`, ${LinearStop}${`, ${LinearStop}${`, ${LinearStop}${ComplexType}`|""}`|""}`|""}`|""}`;
|
|
170
|
+
|
|
171
|
+
type StepEasingFunction = "step-start"|"step-end"|`steps(${Int}${`, ${StepPosition}`|""})`;
|
|
172
|
+
type CubicBezierEasingFunction = "ease"|"ease-in"|"ease-out"|"ease-in-out"|`cubic-bezier(${number}, ${number}, ${number}, ${number})`;
|
|
173
|
+
type LinearEasingFunction = `linear(${LinearStopList})`;
|
|
174
|
+
type EasingFunction = "linear"|LinearEasingFunction|CubicBezierEasingFunction|StepEasingFunction;
|
|
175
|
+
|
|
176
|
+
// FILTER FUNCTION
|
|
177
|
+
// TODO: don't forget to provide builders for these. Already put work into some.
|
|
178
|
+
type SaturateFunction = `saturate(${number|Percentage|""})`;
|
|
179
|
+
type SepiaFunction = `sepia(${number|Percentage|""})`;
|
|
180
|
+
type OpacityFunction = `opacity(${number|Percentage|""})`;
|
|
181
|
+
type InvertFunction = `invert(${number|Percentage|""})`;
|
|
182
|
+
type GrayscaleFunction = `grayscale(${number|Percentage|""})`;
|
|
183
|
+
type ContrastFunction = `contrast(${number|Percentage|""})`;
|
|
184
|
+
type BrightnessFunction = `brightness(${number|Percentage|""})`;
|
|
185
|
+
type BlurFunction = `blur(${NumericLength|""})`;
|
|
186
|
+
// Regrettably, strong typing for color isn't possible due to the type complexity.
|
|
187
|
+
// Even SimpleColor doesn't work. We use string in place of Color.
|
|
188
|
+
type DropShadowFunction = `drop-shadow(${`${ComplexType} ${NumericLength} ${NumericLength}`
|
|
189
|
+
|`${NumericLength} ${NumericLength} ${ComplexType}`
|
|
190
|
+
|`${NumericLength} ${NumericLength}`
|
|
191
|
+
|`${ComplexType} ${NumericLength} ${NumericLength} ${NumericLength}`
|
|
192
|
+
|`${NumericLength} ${NumericLength} ${NumericLength} ${ComplexType}`
|
|
193
|
+
|`${NumericLength} ${NumericLength} ${NumericLength}`
|
|
194
|
+
})`;
|
|
195
|
+
type HueRotateFunction = `hue-rotate(${Angle|""})`;
|
|
196
|
+
type FilterFunction = SaturateFunction|SepiaFunction|OpacityFunction|InvertFunction|GrayscaleFunction|ContrastFunction|BrightnessFunction|BlurFunction|DropShadowFunction|HueRotateFunction;
|
|
197
|
+
|
|
198
|
+
// FLEX
|
|
199
|
+
type Flex = `${number}fr`;
|
|
200
|
+
|
|
201
|
+
// FONT
|
|
202
|
+
|
|
203
|
+
type GenericFamily = "serif" | "sans-serif" | "monospace" | "cursive" | "fantasy" | "system-ui" | "ui-serif" | "ui-sans-serif" | "ui-monospace" | "ui-rounded" | "emoji" | "math" | "fangsong";
|
|
204
|
+
|
|
205
|
+
// POSITION
|
|
206
|
+
type HorizontalPosition = "left" | "center" | "right" | LengthPercentage;
|
|
207
|
+
type VerticalPosition = "top" | "center" | "bottom" | LengthPercentage;
|
|
208
|
+
|
|
209
|
+
type Position =
|
|
210
|
+
| HorizontalPosition
|
|
211
|
+
| VerticalPosition
|
|
212
|
+
| `${HorizontalPosition} ${VerticalPosition}`
|
|
213
|
+
| `${VerticalPosition} ${HorizontalPosition}`
|
|
214
|
+
| `${"left" | "right"} ${LengthPercentage}`
|
|
215
|
+
| `${"top" | "bottom"} ${LengthPercentage}`
|
|
216
|
+
| `${"left" | "right"} ${LengthPercentage} ${"top" | "bottom"} ${LengthPercentage}`
|
|
217
|
+
| `${"top" | "bottom"} ${LengthPercentage} ${"left" | "right"} ${LengthPercentage}`;
|
|
218
|
+
|
|
219
|
+
// GRADIENT
|
|
220
|
+
// https://developer.mozilla.org/en-US/docs/Web/CSS/gradient
|
|
221
|
+
// TODO: absolutely need a builder for this.
|
|
222
|
+
|
|
223
|
+
type RadialShape = "circle"|"ellipse";
|
|
224
|
+
type RadialExtent = "closest-corner"|"closest-side"|"farthest-corner"|"farthest-side";
|
|
225
|
+
type SideOrCorner = "left"|"right"|"top"|"bottom"|`${"left" | "right"} ${"top" | "bottom"}`|`${"top" | "bottom"} ${"left" | "right"}`;
|
|
226
|
+
type RadialSize = `${RadialExtent} ${NumericLength} ${LengthPercentage} ${LengthPercentage}`;
|
|
227
|
+
type LinearColorStop = Color|`${Color} ${LengthPercentage}`;
|
|
228
|
+
type LinearColorHint = LengthPercentage;
|
|
229
|
+
// type LinearColorStopListItem = LinearColorStop|`${LinearColorHint}, ${LinearColorStop}`; // TOO COMPLEX :(
|
|
230
|
+
type LinearColorStopListItem = LinearColorStop|`${ComplexType}, ${LinearColorStop}`; // TODO: this type got botched due to complexity.
|
|
231
|
+
type ColorStopList = `${LinearColorStop}${`, ${ComplexType}`}`|`${LinearColorStop}`;
|
|
232
|
+
|
|
233
|
+
type AngleOrSideOrCorner = Angle | `to ${SideOrCorner}, `;
|
|
234
|
+
type LinearGradientSyntax = ComplexType; //`${`${AngleOrSideOrCorner} `|""}${ColorStopList}`;
|
|
235
|
+
// type RadiatShapeOrSize = RadialShape | RadialSize | `${RadialShape} ${RadialSize}` | `${RadialSize} ${RadialShape}`;
|
|
236
|
+
type RadiatShapeOrSize = RadialShape | RadialSize | ComplexType;//`${RadialShape} ${RadialSize}` | `${RadialSize} ${RadialShape}`;
|
|
237
|
+
type RadialGradientSyntax = `${`${RadiatShapeOrSize} ` | ""} [ at <position> ]? , <color-stop-list>`;
|
|
238
|
+
type LinearGradientFunction = `linear-gradient(${LinearGradientSyntax})`;
|
|
239
|
+
type RepeatingLinearGradientFunction = `linear-gradient(${LinearGradientSyntax})`;
|
|
240
|
+
type RadialGradientFunction = `radial-gradient(${RadialGradientSyntax})`;
|
|
241
|
+
type RepeatingRadialGradientFunction = `radial-gradient(${RadialGradientSyntax})`;
|
|
242
|
+
type Gradient = LinearGradientFunction | RepeatingLinearGradientFunction | RadialGradientFunction | RepeatingRadialGradientFunction;
|
|
243
|
+
|
|
244
|
+
// URL
|
|
245
|
+
type Url = `${"src"|"url"}(${Str})`;
|
|
246
|
+
|
|
247
|
+
// IMAGE
|
|
248
|
+
type Image = Url|Gradient;
|
|
249
|
+
|
|
250
|
+
// TODO:
|
|
251
|
+
// https://developer.mozilla.org/en-US/docs/Web/CSS/transform-function
|
|
252
|
+
type TransformFunction = ComplexType;
|
|
253
|
+
|
|
1
254
|
// Building blocks.
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
export type
|
|
5
|
-
export type AllUnits = AbsoluteUnits|RelativeUnits;
|
|
6
|
-
export type OptionalWhitespace = ""|" ";
|
|
7
|
-
export type UrlType = `url('${string}')`;
|
|
8
|
-
export type NumericLength = number|`${number}${AllUnits}`;
|
|
9
|
-
export type NumericLengthOrAuto = NumericLength|"auto";
|
|
10
|
-
export type AngleUnits = "deg"|"turn"|"rad"|"grad";
|
|
11
|
-
export type NumericAngle = number|`${number}${AngleUnits}`;
|
|
12
|
-
export type Percentage = number|`${number}%`; // Used for filters.
|
|
255
|
+
|
|
256
|
+
// type OptionalWhitespace = ""|" ";
|
|
257
|
+
// export type Percentage = number|`${number}%`; // Used for filters.
|
|
13
258
|
|
|
14
259
|
// ts starts complaining about the complexity of the type :(
|
|
15
|
-
|
|
16
|
-
// export declare type HexStr = DigitStr|"A"|"B"|"C"|"D"|"E"|"F"|"a"|"b"|"c"|"d"|"e"|"f";
|
|
260
|
+
|
|
17
261
|
|
|
18
262
|
// Types
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
263
|
+
// TODO: look up types online and correct this.
|
|
264
|
+
// https://developer.mozilla.org/en-US/docs/Web/CSS/absolute-size
|
|
265
|
+
|
|
266
|
+
// MORE COMPLEX TYPES?
|
|
267
|
+
|
|
268
|
+
type NumericLengthOrAuto = NumericLength|"auto";
|
|
269
|
+
type NumericAngle = number|`${number}${AngleUnits}`;
|
|
270
|
+
|
|
271
|
+
type AppearanceValues = BasicCommonValues|"none"|"menulist-button"|"textfield"|"button"|"searchfield"|"textarea"|"push-button"|"slider-horizontal"|"checkbox"|"radio"|"square-button"|"menulist"|"listbox"|"meter"|"progress-bar"|"scrollbarbutton-up"|"button-bevel"|"media-mute-button"|"caret";
|
|
272
|
+
type BackgroundAttachmentValues = BasicCommonValues|"scroll"|"fixed"|"local";
|
|
273
|
+
type BackgroundRepeatValues = BasicCommonValues|"no-repeat"|"repeat"|"space"|"round";
|
|
274
|
+
type BackgroundOriginValues = BasicCommonValues|"padding-box"|"border-box"|"content-box";
|
|
275
|
+
type BackgroundSizeValues = BasicCommonValues|"auto"|NumericLength|"cover"|"contain";
|
|
276
|
+
type BackfaceVisibilityValues = BasicCommonValues|"visible"|"hidden";
|
|
277
|
+
type BorderStyles = BasicCommonValues|"dotted"|"dashed"|"solid"|"double"|"groove"|"ridge"|"inset"|"outset"|"none"|"hidden";
|
|
278
|
+
|
|
279
|
+
type DisplayValues = BasicCommonValues|"inline"|"block"|"contents"|"flex"|"grid"|"inline-block"|"inline-flex"|"inline-grid"|"inline-table"|"list-item"|"run-in"|"table"|"table-caption"|"table-column-group"|"table-header-group"|"table-footer-group"|"table-row-group"|"table-cell"|"table-column"|"table-row"|"none";
|
|
280
|
+
type DirectionValues = BasicCommonValues|"ltr"|"rtl";
|
|
281
|
+
type FontStyleValues = BasicCommonValues|"normal"|"italic"|"oblique";
|
|
282
|
+
type FontVariantValues = BasicCommonValues|"normal"|"small-caps";
|
|
283
|
+
type FontVariantCapsValues = FontVariantValues|"all-small-caps"|"petite-caps"|"all-petite-caps"|"unicase"|"titling-caps";
|
|
284
|
+
type FontWeightValues = BasicCommonValues|number|"normal"|"bold"|"bolder"|"lighter";
|
|
285
|
+
type LengthProp = BasicCommonValues|"maxHeight"|"minHeight"|"top"|"bottom"|"height"|"maxHidth"|"minWidth"|"right"|"left"|"width"|"margin"|"marginTop"|"marginBottom"|"marginLeft"|"marginRight"|"outlineOffset"|"padding"|"paddingTop"|"paddingBottom"|"paddingLeft"|"paddingRight"|"lineHeight"|"flexBasis"|"fontSize";
|
|
286
|
+
type OutlineWidthValues = BasicCommonValues|"medium"|"thin"|"thick"|NumericLength;
|
|
287
|
+
type PositionNames = BasicCommonValues|"static"|"relative"|"fixed"|"absolute"|"sticky";
|
|
288
|
+
|
|
289
|
+
type FlexDirectionNames = BasicCommonValues|"row"|"row-reverse"|"column"|"column-reverse";
|
|
290
|
+
type FlexWrapNames = BasicCommonValues|"nowrap"|"wrap"|"wrap-reverse";
|
|
39
291
|
|
|
40
292
|
|
|
41
293
|
// Advanced formatted types.
|
|
42
|
-
export type ColorFormat = BasicCommonValues|ColorName|number|`#${string}`|`rgb(${number},${OptionalWhitespace}${number},${OptionalWhitespace}${number})`|`rgba(${number},${OptionalWhitespace}${number},${OptionalWhitespace}${number},${OptionalWhitespace}${number})`|`hsl(${number},${OptionalWhitespace}${number}%,${OptionalWhitespace}${number}%)`|`hsla(${number},${OptionalWhitespace}${number}%,${OptionalWhitespace}${number}%,${OptionalWhitespace}${number})`;
|
|
43
294
|
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
295
|
+
type BackgroundRepeatValues2d = BackgroundRepeatValues|"repeat-x"|"repeat-y"|`${BackgroundRepeatValues} ${BackgroundRepeatValues}`;
|
|
296
|
+
type BorderShorthand = BasicCommonValues|`${BorderStyles}`|`${BorderStyles} ${Color}`|ComplexType;//`${number}${AllLengthUnits} ${BorderStyles} ${Color}`;
|
|
297
|
+
type BackgroundImageFormat = BasicCommonValues|Url|`${Url}, ${Url}`;
|
|
298
|
+
type BackgroundPositionShorthand2D = BasicCommonValues|`${BasicCommonValues|number} ${BasicCommonValues|number}`|`${number}% ${number}%`|`${"left"|"right"|"center"} ${"top"|"center"|"bottom"}`;
|
|
299
|
+
type BackgroundShorthand = BasicCommonValues|ComplexType;//`${Color} ${Url} ${BackgroundRepeatValues} ${BackgroundPositionShorthand2D}`;
|
|
300
|
+
type FlexFlowShorthand = BasicCommonValues|`${FlexDirectionNames} ${FlexWrapNames}`;
|
|
301
|
+
type FlexShorthand = BasicCommonValues|`${BasicCommonValues|number} ${BasicCommonValues|number} ${BasicCommonValues|`${number}${AllLengthUnits}`}`;
|
|
51
302
|
|
|
303
|
+
type AtRule = "@charset"|"@color-profile"|"@container"|"@counter-style"|"@font-face"|"@document"|"@font-feature-values"|"@font-palette-values"|"@import"|"@keyframes"|"@layer"|"@media"|"@namespace"|"@page"|"@property"|"@scope"|"@starting-style"|"@supports";
|
|
52
304
|
|
|
53
305
|
interface IDotcssProp{
|
|
54
306
|
angleToDeg(a: number|string);
|
|
@@ -771,7 +1023,7 @@ interface IDotcssProp{
|
|
|
771
1023
|
backgroundImage: (value: BackgroundImageFormat)=>IDotcssProp;
|
|
772
1024
|
borderImage: (value: BackgroundImageFormat)=>IDotcssProp;
|
|
773
1025
|
listStyleImage: (value: BackgroundImageFormat)=>IDotcssProp;
|
|
774
|
-
content: (value: BasicCommonValues|
|
|
1026
|
+
content: (value: BasicCommonValues|Url)=>IDotcssProp;
|
|
775
1027
|
|
|
776
1028
|
//complex:
|
|
777
1029
|
transform: (transformOrTransformBuilder: BasicCommonValues|TransformationBuilder)=>IDotcssProp;
|
|
@@ -986,7 +1238,13 @@ interface IDotcssProp{
|
|
|
986
1238
|
}
|
|
987
1239
|
|
|
988
1240
|
export default interface IDotCss extends IDotcssProp{
|
|
989
|
-
|
|
1241
|
+
|
|
1242
|
+
(selector: "@charset", charset: string): void;
|
|
1243
|
+
(selector: "@color-profile", name: string): IColorProfileBuilder;
|
|
1244
|
+
(selector: "@container", condition: string): IDotcssProp;
|
|
1245
|
+
(selector: "@counter-style", name: string): ICounterStyleBuilder;
|
|
1246
|
+
|
|
1247
|
+
(selector?: Array<HTMLElement>|HTMLElement|string): IDotcssProp;
|
|
990
1248
|
|
|
991
1249
|
version: string;
|
|
992
1250
|
}
|
|
@@ -998,10 +1256,10 @@ export interface IDotcssAnimatable<T> extends IDotcssProp{
|
|
|
998
1256
|
}
|
|
999
1257
|
|
|
1000
1258
|
export interface IDotcssAnimatableColor extends IDotcssProp{
|
|
1001
|
-
(value:
|
|
1259
|
+
(value: Color|Array<number>): IDotcssProp;
|
|
1002
1260
|
(r: number, g: number, b: number, a?: number): IDotcssProp;
|
|
1003
1261
|
|
|
1004
|
-
animate(value:
|
|
1262
|
+
animate(value: Color|Array<number>, duration: number, style: "ease", complete: Function): IDotcssProp;
|
|
1005
1263
|
}
|
|
1006
1264
|
|
|
1007
1265
|
export interface HideParams{
|
|
@@ -1187,7 +1445,7 @@ type IFilterContext = {
|
|
|
1187
1445
|
blur(v: NumericLength): IFilterContext;
|
|
1188
1446
|
brightness(v: Percentage): IFilterContext;
|
|
1189
1447
|
contrast(v: Percentage): IFilterContext;
|
|
1190
|
-
dropShadow(x: NumericLength, y: NumericLength, blur: NumericLength, color:
|
|
1448
|
+
dropShadow(x: NumericLength, y: NumericLength, blur: NumericLength, color: Color): IFilterContext;
|
|
1191
1449
|
grayscale(v: Percentage): IFilterContext;
|
|
1192
1450
|
hueRotate(v: AngleUnits): IFilterContext;
|
|
1193
1451
|
invert(v: Percentage): IFilterContext;
|
|
@@ -1195,4 +1453,28 @@ type IFilterContext = {
|
|
|
1195
1453
|
sepia(v: Percentage): IFilterContext;
|
|
1196
1454
|
saturate(v: Percentage): IFilterContext;
|
|
1197
1455
|
// url(filters.svg#filter) blur(4px) saturate(150%); // example.
|
|
1456
|
+
}
|
|
1457
|
+
|
|
1458
|
+
// AT RULE BUILDERS
|
|
1459
|
+
|
|
1460
|
+
interface IColorProfileBuilder{
|
|
1461
|
+
src: (value: Url)=>IColorProfileBuilder;
|
|
1462
|
+
renderingIntent(value: "relative-colorimetric"|"absolute-colorimetric"|"perceptual"|"saturation");
|
|
1463
|
+
}
|
|
1464
|
+
|
|
1465
|
+
type SystemValue = "cyclic"|"numeric"|"alphabetic"|"symbolic"|"additive"|"fixed"|"extends";
|
|
1466
|
+
interface ICounterStyleBuilder{
|
|
1467
|
+
|
|
1468
|
+
system(value: "fixed", arg: number): ICounterStyleBuilder;
|
|
1469
|
+
system(value: "extends", arg: string): ICounterStyleBuilder;
|
|
1470
|
+
system(value: Exclude<SystemValue, "fixed" | "extends">): ICounterStyleBuilder;
|
|
1471
|
+
|
|
1472
|
+
symbols: (value: string)=> ICounterStyleBuilder; // TODO
|
|
1473
|
+
additiveSymbols: (value: string)=> ICounterStyleBuilder; // TODO
|
|
1474
|
+
negative: (value: string)=> ICounterStyleBuilder; // TODO
|
|
1475
|
+
prefix: (value: string)=> ICounterStyleBuilder; // TOOD
|
|
1476
|
+
suffix: (value: string)=> ICounterStyleBuilder; // TODO
|
|
1477
|
+
range: (value: string)=> ICounterStyleBuilder; // TODO
|
|
1478
|
+
pad: (value: string)=> ICounterStyleBuilder; // TODO
|
|
1479
|
+
speakAs: (value: string)=> ICounterStyleBuilder; // TODO
|
|
1198
1480
|
}
|
package/src/i-dot.d.ts
CHANGED
|
@@ -244,6 +244,8 @@ export interface IDotCore extends IDotDocument
|
|
|
244
244
|
// component<T extends IComponent>(ComponentClass: new(...args: any[])=>T): (new(...args: ConstructorParameters<T['build']>)=>(T&{readonly $:FrameworkItems}));
|
|
245
245
|
// component<T extends IComponent>(Base: new (...args: any[]) => T): new (...args: ConstructorParameters<T['build']>) => T
|
|
246
246
|
component<T extends IComponent>(Base: new (...args: Parameters<T['build']>) => T): new (...args: Parameters<T['build']>) => T;
|
|
247
|
+
useStyles<T extends IComponent>(styles: string|(()=>IDotCss|string)): ((Base: new (...args: Parameters<T['build']>) => T) => new (...args: Parameters<T['build']>) => T);
|
|
248
|
+
// useStyles<T extends IComponent>(Base: new (...args: Parameters<T['build']>) => T): new (...args: Parameters<T['build']>) => T;
|
|
247
249
|
}
|
|
248
250
|
|
|
249
251
|
export interface IDotWindowBuilder{
|
package/src/index.d.ts
CHANGED
|
@@ -1,3 +1,4 @@
|
|
|
1
|
+
import { IDotCore } from "./i-dot";
|
|
1
2
|
|
|
2
3
|
export * from "./i-dot";
|
|
3
4
|
|
|
@@ -8,4 +9,10 @@ export * from "./i-dot-css";
|
|
|
8
9
|
export { default as IComponent, FrameworkItems } from "./i-component";
|
|
9
10
|
|
|
10
11
|
export { default as IReactive } from "./i-reactive";
|
|
11
|
-
export { default as IEventBus } from "./i-event-bus";
|
|
12
|
+
export { default as IEventBus } from "./i-event-bus";
|
|
13
|
+
|
|
14
|
+
declare global {
|
|
15
|
+
interface Window {
|
|
16
|
+
dot: IDotCore;
|
|
17
|
+
}
|
|
18
|
+
}
|