@streamscloud/kit 0.2.19 → 0.2.21
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/ui/cropper/img-cropper/img-cropper-base-worker.svelte.js +11 -1
- package/dist/ui/page-toolbar/cmp.toolbar-segmented-control.svelte.d.ts +1 -0
- package/dist/ui/segmented-control/cmp.segmented-control.svelte +17 -0
- package/dist/ui/segmented-control/cmp.segmented-control.svelte.d.ts +3 -0
- package/package.json +1 -1
|
@@ -27,8 +27,18 @@ export class ImgCropperBaseWorker {
|
|
|
27
27
|
const { width, height } = e.detail;
|
|
28
28
|
this.cropBoxVisible = width > 0 && height > 0;
|
|
29
29
|
};
|
|
30
|
+
let handlingBoundary = false;
|
|
30
31
|
const onBoundaryCheck = (e) => {
|
|
31
|
-
|
|
32
|
+
if (handlingBoundary) {
|
|
33
|
+
return;
|
|
34
|
+
}
|
|
35
|
+
handlingBoundary = true;
|
|
36
|
+
try {
|
|
37
|
+
handleSelectionBoundary({ event: e, selection: this._selection, canvas: this._canvas });
|
|
38
|
+
}
|
|
39
|
+
finally {
|
|
40
|
+
handlingBoundary = false;
|
|
41
|
+
}
|
|
32
42
|
};
|
|
33
43
|
this._selection.addEventListener('change', onSelectionChange);
|
|
34
44
|
this._selection.addEventListener('change', onBoundaryCheck);
|
|
@@ -7,6 +7,7 @@
|
|
|
7
7
|
type="button"
|
|
8
8
|
class="segmented-control__segment"
|
|
9
9
|
class:segmented-control__segment--selected={selected === segment.id}
|
|
10
|
+
class:segmented-control__segment--invalid={segment.invalid}
|
|
10
11
|
onclick={() => on?.change?.(segment.id)}>
|
|
11
12
|
<span class="segmented-control__label">{segment.label}</span>
|
|
12
13
|
</button>
|
|
@@ -32,6 +33,8 @@ A segmented control for switching between a set of options. Each segment is a bu
|
|
|
32
33
|
| `--sc-kit--segmented-control--selected--background` | Selected segment background | `var(--sc-color--bg-menu-active, light-dark(primary-50, dark-400))` |
|
|
33
34
|
| `--sc-kit--segmented-control--selected--box-shadow` | Selected segment box shadow | `0px 1px 3px rgba(0,0,0,0.1)` |
|
|
34
35
|
| `--sc-kit--segmented-control--selected--color` | Selected segment text color | `var(--sc-color--text-primary, light-dark(black, white))` |
|
|
36
|
+
| `--sc-kit--segmented-control--invalid--color` | Inactive segment text color when invalid | `light-dark(destructive-500, destructive-400)` |
|
|
37
|
+
| `--sc-kit--segmented-control--invalid--selected--color` | Selected segment text color when invalid | `light-dark(destructive-500, destructive-400)` |
|
|
35
38
|
-->
|
|
36
39
|
|
|
37
40
|
<style>.segmented-control {
|
|
@@ -65,6 +68,14 @@ A segmented control for switching between a set of options. Each segment is a bu
|
|
|
65
68
|
--sc-kit--segmented-control--selected--color,
|
|
66
69
|
var(--sc-color--text-primary, light-dark(#000000, #ffffff))
|
|
67
70
|
);
|
|
71
|
+
--_segmented-control--invalid--color: var(
|
|
72
|
+
--sc-kit--segmented-control--invalid--color,
|
|
73
|
+
light-dark(#e71d36, #f17e8b)
|
|
74
|
+
);
|
|
75
|
+
--_segmented-control--invalid--selected--color: var(
|
|
76
|
+
--sc-kit--segmented-control--invalid--selected--color,
|
|
77
|
+
light-dark(#e71d36, #f17e8b)
|
|
78
|
+
);
|
|
68
79
|
display: flex;
|
|
69
80
|
width: 100%;
|
|
70
81
|
font-size: var(--_segmented-control--root--font-size);
|
|
@@ -91,6 +102,9 @@ A segmented control for switching between a set of options. Each segment is a bu
|
|
|
91
102
|
.segmented-control__segment:last-child {
|
|
92
103
|
border-right: none;
|
|
93
104
|
}
|
|
105
|
+
.segmented-control__segment--invalid {
|
|
106
|
+
color: var(--_segmented-control--invalid--color);
|
|
107
|
+
}
|
|
94
108
|
.segmented-control__segment--selected {
|
|
95
109
|
box-shadow: var(--_segmented-control--selected--box-shadow);
|
|
96
110
|
}
|
|
@@ -98,6 +112,9 @@ A segmented control for switching between a set of options. Each segment is a bu
|
|
|
98
112
|
background: var(--_segmented-control--selected--background);
|
|
99
113
|
color: var(--_segmented-control--selected--color);
|
|
100
114
|
}
|
|
115
|
+
.segmented-control__segment--invalid.segmented-control__segment--selected, .segmented-control__segment--invalid:hover {
|
|
116
|
+
color: var(--_segmented-control--invalid--selected--color);
|
|
117
|
+
}
|
|
101
118
|
.segmented-control__label {
|
|
102
119
|
font-size: var(--_segmented-control--label--font-size);
|
|
103
120
|
}</style>
|
|
@@ -3,6 +3,7 @@ declare function $$render<T extends string | number>(): {
|
|
|
3
3
|
segments: {
|
|
4
4
|
id: T;
|
|
5
5
|
label: string;
|
|
6
|
+
invalid?: boolean;
|
|
6
7
|
}[];
|
|
7
8
|
selected: T;
|
|
8
9
|
on?: {
|
|
@@ -46,6 +47,8 @@ interface $$IsomorphicComponent {
|
|
|
46
47
|
* | `--sc-kit--segmented-control--selected--background` | Selected segment background | `var(--sc-color--bg-menu-active, light-dark(primary-50, dark-400))` |
|
|
47
48
|
* | `--sc-kit--segmented-control--selected--box-shadow` | Selected segment box shadow | `0px 1px 3px rgba(0,0,0,0.1)` |
|
|
48
49
|
* | `--sc-kit--segmented-control--selected--color` | Selected segment text color | `var(--sc-color--text-primary, light-dark(black, white))` |
|
|
50
|
+
* | `--sc-kit--segmented-control--invalid--color` | Inactive segment text color when invalid | `light-dark(destructive-500, destructive-400)` |
|
|
51
|
+
* | `--sc-kit--segmented-control--invalid--selected--color` | Selected segment text color when invalid | `light-dark(destructive-500, destructive-400)` |
|
|
49
52
|
*/
|
|
50
53
|
declare const Cmp: $$IsomorphicComponent;
|
|
51
54
|
type Cmp<T extends string | number> = InstanceType<typeof Cmp<T>>;
|