@getflip/swirl-components 0.138.1 → 0.140.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.
- package/components.json +99 -3
- package/dist/cjs/loader.cjs.js +1 -1
- package/dist/cjs/swirl-box.cjs.entry.js +10 -2
- package/dist/cjs/swirl-components.cjs.js +1 -1
- package/dist/cjs/swirl-stack.cjs.entry.js +1 -1
- package/dist/collection/assets/pdfjs/pdf.worker.min.js +1 -1
- package/dist/collection/components/swirl-box/swirl-box.js +95 -2
- package/dist/collection/components/swirl-box/swirl-box.stories.js +1 -4
- package/dist/collection/components/swirl-button-group/swirl-button-group.js +1 -1
- package/dist/collection/components/swirl-stack/swirl-stack.css +8 -0
- package/dist/collection/components/swirl-stack/swirl-stack.js +1 -1
- package/dist/components/assets/pdfjs/pdf.worker.min.js +1 -1
- package/dist/components/swirl-box2.js +15 -2
- package/dist/components/swirl-stack2.js +1 -1
- package/dist/esm/loader.js +1 -1
- package/dist/esm/swirl-box.entry.js +10 -2
- package/dist/esm/swirl-components.js +1 -1
- package/dist/esm/swirl-stack.entry.js +1 -1
- package/dist/swirl-components/{p-6f44b355.entry.js → p-08d65be5.entry.js} +1 -1
- package/dist/swirl-components/p-1a46d85f.entry.js +1 -0
- package/dist/swirl-components/swirl-components.esm.js +1 -1
- package/dist/types/components/swirl-box/swirl-box.d.ts +5 -0
- package/dist/types/components/swirl-stack/swirl-stack.d.ts +1 -1
- package/dist/types/components.d.ts +10 -0
- package/package.json +1 -1
- package/vscode-data.json +32 -0
- package/dist/swirl-components/p-c3704d96.entry.js +0 -1
|
@@ -14,9 +14,12 @@ export class SwirlBox {
|
|
|
14
14
|
this.centerBlock = undefined;
|
|
15
15
|
this.centerInline = undefined;
|
|
16
16
|
this.cover = undefined;
|
|
17
|
+
this.height = undefined;
|
|
17
18
|
this.left = undefined;
|
|
18
19
|
this.maxHeight = undefined;
|
|
20
|
+
this.minHeight = undefined;
|
|
19
21
|
this.maxWidth = undefined;
|
|
22
|
+
this.minWidth = undefined;
|
|
20
23
|
this.overflow = "visible";
|
|
21
24
|
this.padding = "0";
|
|
22
25
|
this.paddingBlockEnd = undefined;
|
|
@@ -25,7 +28,9 @@ export class SwirlBox {
|
|
|
25
28
|
this.paddingInlineStart = undefined;
|
|
26
29
|
this.position = undefined;
|
|
27
30
|
this.right = undefined;
|
|
31
|
+
this.shrink = undefined;
|
|
28
32
|
this.top = undefined;
|
|
33
|
+
this.width = undefined;
|
|
29
34
|
this.zIndex = undefined;
|
|
30
35
|
}
|
|
31
36
|
render() {
|
|
@@ -33,11 +38,14 @@ export class SwirlBox {
|
|
|
33
38
|
alignItems: this.centerBlock ? "center" : undefined,
|
|
34
39
|
bottom: this.bottom,
|
|
35
40
|
display: this.centerBlock || this.centerInline ? "flex" : undefined,
|
|
36
|
-
|
|
41
|
+
flexShrink: this.shrink,
|
|
42
|
+
height: this.cover ? "100%" : this.height,
|
|
37
43
|
justifyContent: this.centerInline ? "center" : undefined,
|
|
38
44
|
left: this.left,
|
|
39
45
|
maxHeight: this.maxHeight,
|
|
46
|
+
minHeight: this.minHeight,
|
|
40
47
|
maxWidth: this.maxWidth,
|
|
48
|
+
minWidth: this.minWidth,
|
|
41
49
|
overflow: this.overflow,
|
|
42
50
|
padding: `var(--s-space-${this.padding})`,
|
|
43
51
|
paddingBlockEnd: Boolean(this.paddingBlockEnd)
|
|
@@ -57,7 +65,7 @@ export class SwirlBox {
|
|
|
57
65
|
: this.position,
|
|
58
66
|
right: this.right,
|
|
59
67
|
top: this.top,
|
|
60
|
-
width: this.cover ? "100%" :
|
|
68
|
+
width: this.cover ? "100%" : this.width,
|
|
61
69
|
zIndex: this.zIndex,
|
|
62
70
|
};
|
|
63
71
|
const className = classnames("box", {
|
|
@@ -237,6 +245,23 @@ export class SwirlBox {
|
|
|
237
245
|
"attribute": "cover",
|
|
238
246
|
"reflect": false
|
|
239
247
|
},
|
|
248
|
+
"height": {
|
|
249
|
+
"type": "string",
|
|
250
|
+
"mutable": false,
|
|
251
|
+
"complexType": {
|
|
252
|
+
"original": "string",
|
|
253
|
+
"resolved": "string",
|
|
254
|
+
"references": {}
|
|
255
|
+
},
|
|
256
|
+
"required": false,
|
|
257
|
+
"optional": true,
|
|
258
|
+
"docs": {
|
|
259
|
+
"tags": [],
|
|
260
|
+
"text": ""
|
|
261
|
+
},
|
|
262
|
+
"attribute": "height",
|
|
263
|
+
"reflect": false
|
|
264
|
+
},
|
|
240
265
|
"left": {
|
|
241
266
|
"type": "string",
|
|
242
267
|
"mutable": false,
|
|
@@ -271,6 +296,23 @@ export class SwirlBox {
|
|
|
271
296
|
"attribute": "max-height",
|
|
272
297
|
"reflect": false
|
|
273
298
|
},
|
|
299
|
+
"minHeight": {
|
|
300
|
+
"type": "string",
|
|
301
|
+
"mutable": false,
|
|
302
|
+
"complexType": {
|
|
303
|
+
"original": "string",
|
|
304
|
+
"resolved": "string",
|
|
305
|
+
"references": {}
|
|
306
|
+
},
|
|
307
|
+
"required": false,
|
|
308
|
+
"optional": true,
|
|
309
|
+
"docs": {
|
|
310
|
+
"tags": [],
|
|
311
|
+
"text": ""
|
|
312
|
+
},
|
|
313
|
+
"attribute": "min-height",
|
|
314
|
+
"reflect": false
|
|
315
|
+
},
|
|
274
316
|
"maxWidth": {
|
|
275
317
|
"type": "string",
|
|
276
318
|
"mutable": false,
|
|
@@ -288,6 +330,23 @@ export class SwirlBox {
|
|
|
288
330
|
"attribute": "max-width",
|
|
289
331
|
"reflect": false
|
|
290
332
|
},
|
|
333
|
+
"minWidth": {
|
|
334
|
+
"type": "string",
|
|
335
|
+
"mutable": false,
|
|
336
|
+
"complexType": {
|
|
337
|
+
"original": "string",
|
|
338
|
+
"resolved": "string",
|
|
339
|
+
"references": {}
|
|
340
|
+
},
|
|
341
|
+
"required": false,
|
|
342
|
+
"optional": true,
|
|
343
|
+
"docs": {
|
|
344
|
+
"tags": [],
|
|
345
|
+
"text": ""
|
|
346
|
+
},
|
|
347
|
+
"attribute": "min-width",
|
|
348
|
+
"reflect": false
|
|
349
|
+
},
|
|
291
350
|
"overflow": {
|
|
292
351
|
"type": "string",
|
|
293
352
|
"mutable": false,
|
|
@@ -461,6 +520,23 @@ export class SwirlBox {
|
|
|
461
520
|
"attribute": "right",
|
|
462
521
|
"reflect": false
|
|
463
522
|
},
|
|
523
|
+
"shrink": {
|
|
524
|
+
"type": "string",
|
|
525
|
+
"mutable": false,
|
|
526
|
+
"complexType": {
|
|
527
|
+
"original": "string",
|
|
528
|
+
"resolved": "string",
|
|
529
|
+
"references": {}
|
|
530
|
+
},
|
|
531
|
+
"required": false,
|
|
532
|
+
"optional": true,
|
|
533
|
+
"docs": {
|
|
534
|
+
"tags": [],
|
|
535
|
+
"text": ""
|
|
536
|
+
},
|
|
537
|
+
"attribute": "shrink",
|
|
538
|
+
"reflect": false
|
|
539
|
+
},
|
|
464
540
|
"top": {
|
|
465
541
|
"type": "string",
|
|
466
542
|
"mutable": false,
|
|
@@ -478,6 +554,23 @@ export class SwirlBox {
|
|
|
478
554
|
"attribute": "top",
|
|
479
555
|
"reflect": false
|
|
480
556
|
},
|
|
557
|
+
"width": {
|
|
558
|
+
"type": "string",
|
|
559
|
+
"mutable": false,
|
|
560
|
+
"complexType": {
|
|
561
|
+
"original": "string",
|
|
562
|
+
"resolved": "string",
|
|
563
|
+
"references": {}
|
|
564
|
+
},
|
|
565
|
+
"required": false,
|
|
566
|
+
"optional": true,
|
|
567
|
+
"docs": {
|
|
568
|
+
"tags": [],
|
|
569
|
+
"text": ""
|
|
570
|
+
},
|
|
571
|
+
"attribute": "width",
|
|
572
|
+
"reflect": false
|
|
573
|
+
},
|
|
481
574
|
"zIndex": {
|
|
482
575
|
"type": "string",
|
|
483
576
|
"mutable": false,
|
|
@@ -37,7 +37,7 @@ export class SwirlButtonGroup {
|
|
|
37
37
|
"mutable": false,
|
|
38
38
|
"complexType": {
|
|
39
39
|
"original": "SwirlButtonGroupOrientation",
|
|
40
|
-
"resolved": "\"horizontal\" | \"vertical\"",
|
|
40
|
+
"resolved": "\"horizontal\" | \"horizontal-reverse\" | \"vertical\" | \"vertical-reverse\"",
|
|
41
41
|
"references": {
|
|
42
42
|
"SwirlButtonGroupOrientation": {
|
|
43
43
|
"location": "local",
|
|
@@ -81,10 +81,18 @@ ul.stack {
|
|
|
81
81
|
flex-direction: column;
|
|
82
82
|
}
|
|
83
83
|
|
|
84
|
+
.stack--orientation-vertical-reverse {
|
|
85
|
+
flex-direction: column-reverse;
|
|
86
|
+
}
|
|
87
|
+
|
|
84
88
|
.stack--orientation-horizontal {
|
|
85
89
|
flex-direction: row;
|
|
86
90
|
}
|
|
87
91
|
|
|
92
|
+
.stack--orientation-horizontal-reverse {
|
|
93
|
+
flex-direction: row-reverse;
|
|
94
|
+
}
|
|
95
|
+
|
|
88
96
|
.stack--wrap {
|
|
89
97
|
flex-wrap: wrap;
|
|
90
98
|
}
|
|
@@ -115,7 +115,7 @@ export class SwirlStack {
|
|
|
115
115
|
"mutable": false,
|
|
116
116
|
"complexType": {
|
|
117
117
|
"original": "SwirlStackOrientation",
|
|
118
|
-
"resolved": "\"horizontal\" | \"vertical\"",
|
|
118
|
+
"resolved": "\"horizontal\" | \"horizontal-reverse\" | \"vertical\" | \"vertical-reverse\"",
|
|
119
119
|
"references": {
|
|
120
120
|
"SwirlStackOrientation": {
|
|
121
121
|
"location": "local",
|