@onsvisual/svelte-components 1.1.21 → 1.1.23
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/components/Dropdown/Dropdown.svelte +5 -5
- package/dist/components/Dropdown/Dropdown.svelte.d.ts +4 -0
- package/dist/components/Input/Input.svelte +7 -3
- package/dist/components/Input/Input.svelte.d.ts +4 -0
- package/dist/components/Scroller/Scroller.svelte +9 -4
- package/dist/components/Scroller/ScrollerSection.svelte +2 -1
- package/package.json +1 -1
|
@@ -57,12 +57,12 @@
|
|
|
57
57
|
<select
|
|
58
58
|
{id}
|
|
59
59
|
{name}
|
|
60
|
-
class="ons-input ons-input--select {Number.isInteger(width)
|
|
61
|
-
? `ons-input--w-${width}`
|
|
62
|
-
: ''}"
|
|
60
|
+
class="ons-input ons-input--select {Number.isInteger(width) ? `ons-input--w-${width}` : ''}"
|
|
63
61
|
style:width={typeof width === "string" ? width : null}
|
|
64
62
|
bind:value
|
|
65
|
-
on:change={(e) => dispatch("change", e)}
|
|
63
|
+
on:change={(e) => dispatch("change", { value, e })}
|
|
64
|
+
on:input={(e) => dispatch("input", { value, e })}
|
|
65
|
+
on:blur={(e) => dispatch("blur", { value, e })}
|
|
66
66
|
>
|
|
67
67
|
{#if placeholder}
|
|
68
68
|
<option value={null} selected disabled>{placeholder}</option>
|
|
@@ -77,4 +77,4 @@
|
|
|
77
77
|
.ons-input--select {
|
|
78
78
|
width: 100%;
|
|
79
79
|
}
|
|
80
|
-
</style>
|
|
80
|
+
</style>
|
|
@@ -13,6 +13,8 @@ export default class Dropdown extends SvelteComponentTyped<{
|
|
|
13
13
|
options?: object[] | undefined;
|
|
14
14
|
}, {
|
|
15
15
|
change: CustomEvent<any>;
|
|
16
|
+
input: CustomEvent<any>;
|
|
17
|
+
blur: CustomEvent<any>;
|
|
16
18
|
} & {
|
|
17
19
|
[evt: string]: CustomEvent<any>;
|
|
18
20
|
}, {}> {
|
|
@@ -35,6 +37,8 @@ declare const __propDef: {
|
|
|
35
37
|
};
|
|
36
38
|
events: {
|
|
37
39
|
change: CustomEvent<any>;
|
|
40
|
+
input: CustomEvent<any>;
|
|
41
|
+
blur: CustomEvent<any>;
|
|
38
42
|
} & {
|
|
39
43
|
[evt: string]: CustomEvent<any>;
|
|
40
44
|
};
|
|
@@ -121,7 +121,9 @@
|
|
|
121
121
|
aria-labelledby="{id} {id}-unit"
|
|
122
122
|
aria-describedby={description ? `${id}-description-hint` : null}
|
|
123
123
|
{disabled}
|
|
124
|
-
on:change={(e) => dispatch("change", e)}
|
|
124
|
+
on:change={(e) => dispatch("change", { value, e })}
|
|
125
|
+
on:input={(e) => dispatch("input", { value, e })}
|
|
126
|
+
on:blur={(e) => dispatch("blur", { value, e })}
|
|
125
127
|
/>
|
|
126
128
|
<abbr
|
|
127
129
|
id="{id}-unit"
|
|
@@ -147,7 +149,9 @@
|
|
|
147
149
|
class:ons-input--error={error}
|
|
148
150
|
aria-describedby={description ? `${id}-description-hint` : null}
|
|
149
151
|
{disabled}
|
|
150
|
-
on:change={(e) => dispatch("change", e)}
|
|
152
|
+
on:change={(e) => dispatch("change", { value, e })}
|
|
153
|
+
on:input={(e) => dispatch("input", { value, e })}
|
|
154
|
+
on:blur={(e) => dispatch("blur", { value, e })}
|
|
151
155
|
/>
|
|
152
156
|
{/if}
|
|
153
157
|
</div>
|
|
@@ -156,4 +160,4 @@
|
|
|
156
160
|
.ons-input--text {
|
|
157
161
|
width: 100%;
|
|
158
162
|
}
|
|
159
|
-
</style>
|
|
163
|
+
</style>
|
|
@@ -20,6 +20,8 @@ export default class Input extends SvelteComponentTyped<{
|
|
|
20
20
|
unitLabel?: string | undefined;
|
|
21
21
|
}, {
|
|
22
22
|
change: CustomEvent<any>;
|
|
23
|
+
input: CustomEvent<any>;
|
|
24
|
+
blur: CustomEvent<any>;
|
|
23
25
|
} & {
|
|
24
26
|
[evt: string]: CustomEvent<any>;
|
|
25
27
|
}, {}> {
|
|
@@ -49,6 +51,8 @@ declare const __propDef: {
|
|
|
49
51
|
};
|
|
50
52
|
events: {
|
|
51
53
|
change: CustomEvent<any>;
|
|
54
|
+
input: CustomEvent<any>;
|
|
55
|
+
blur: CustomEvent<any>;
|
|
52
56
|
} & {
|
|
53
57
|
[evt: string]: CustomEvent<any>;
|
|
54
58
|
};
|
|
@@ -142,21 +142,26 @@
|
|
|
142
142
|
*/
|
|
143
143
|
export let cls = null;
|
|
144
144
|
|
|
145
|
-
const sections = writable([]);
|
|
146
|
-
setContext("sections", sections);
|
|
147
|
-
|
|
148
145
|
let scroller;
|
|
149
146
|
let outer;
|
|
150
147
|
let foreground;
|
|
151
148
|
let background;
|
|
152
149
|
let left;
|
|
153
150
|
let wh = 0;
|
|
151
|
+
let ww = 0;
|
|
154
152
|
let fixed;
|
|
155
153
|
let offset_top = 0;
|
|
156
154
|
let width = 1;
|
|
157
155
|
let height;
|
|
158
156
|
let inverted;
|
|
159
157
|
|
|
158
|
+
const sections = writable([]);
|
|
159
|
+
setContext("sections", sections);
|
|
160
|
+
|
|
161
|
+
const isSplit = writable();
|
|
162
|
+
$: isSplit.set(splitscreen && ww >= 992);
|
|
163
|
+
setContext("isSplit", isSplit);
|
|
164
|
+
|
|
160
165
|
$: top_px = Math.round(top * wh);
|
|
161
166
|
$: bottom_px = Math.round(bottom * wh);
|
|
162
167
|
$: threshold_px = Math.round(threshold * wh);
|
|
@@ -250,7 +255,7 @@
|
|
|
250
255
|
}
|
|
251
256
|
</script>
|
|
252
257
|
|
|
253
|
-
<svelte:window bind:innerHeight={wh} />
|
|
258
|
+
<svelte:window bind:innerHeight={wh} bind:innerWidth={ww} />
|
|
254
259
|
|
|
255
260
|
{#if marginTop}
|
|
256
261
|
<div class="ons-u-mt-xl"></div>
|
|
@@ -26,6 +26,7 @@
|
|
|
26
26
|
let section;
|
|
27
27
|
|
|
28
28
|
const sections = getContext("sections");
|
|
29
|
+
const isSplit = getContext("isSplit");
|
|
29
30
|
|
|
30
31
|
onMount(() => {
|
|
31
32
|
if (sections) {
|
|
@@ -41,7 +42,7 @@
|
|
|
41
42
|
</script>
|
|
42
43
|
|
|
43
44
|
<section data-id={id} bind:this={section} class={cls}>
|
|
44
|
-
<Container width="narrow">
|
|
45
|
+
<Container width={$isSplit ? "wider" : "narrow"}>
|
|
45
46
|
<div class="ons-scroller-section">
|
|
46
47
|
{#if title}
|
|
47
48
|
<h2 class="section-title" class:ons-u-vh={hideTitle}>{title}</h2>
|