noph-ui 0.18.8 → 0.18.10
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.
|
@@ -1,4 +1,5 @@
|
|
|
1
1
|
<script lang="ts">
|
|
2
|
+
import CircularProgress from '../progress/CircularProgress.svelte'
|
|
2
3
|
import Ripple from '../ripple/Ripple.svelte'
|
|
3
4
|
import Tooltip from '../tooltip/Tooltip.svelte'
|
|
4
5
|
import type { IconButtonProps } from './types.ts'
|
|
@@ -15,6 +16,8 @@
|
|
|
15
16
|
title,
|
|
16
17
|
element = $bindable(),
|
|
17
18
|
disabled,
|
|
19
|
+
loading = false,
|
|
20
|
+
loadingAriaLabel,
|
|
18
21
|
selected = $bindable(false),
|
|
19
22
|
selectedIcon,
|
|
20
23
|
keepTooltipOnClick,
|
|
@@ -34,10 +37,15 @@
|
|
|
34
37
|
</script>
|
|
35
38
|
|
|
36
39
|
{#snippet content()}
|
|
37
|
-
{#if !disabled}
|
|
40
|
+
{#if !disabled && !loading}
|
|
38
41
|
<Ripple forElement={touchEl} />
|
|
39
42
|
<span class="np-touch" bind:this={touchEl}></span>
|
|
40
43
|
{/if}
|
|
44
|
+
{#if loading}
|
|
45
|
+
<div class="circular-progress">
|
|
46
|
+
<CircularProgress aria-label={loadingAriaLabel} indeterminate />
|
|
47
|
+
</div>
|
|
48
|
+
{/if}
|
|
41
49
|
{#if selectedIcon && selected}
|
|
42
50
|
{@render selectedIcon()}
|
|
43
51
|
{:else if children}
|
|
@@ -45,13 +53,13 @@
|
|
|
45
53
|
{/if}
|
|
46
54
|
{/snippet}
|
|
47
55
|
|
|
48
|
-
{#if isButton(attributes) || disabled}
|
|
56
|
+
{#if isButton(attributes) || disabled || loading}
|
|
49
57
|
<button
|
|
50
58
|
aria-describedby={title ? uid : attributes['aria-describedby']}
|
|
51
59
|
aria-label={title || attributes['aria-label']}
|
|
52
60
|
aria-pressed={selected}
|
|
53
61
|
{...attributes as HTMLButtonAttributes}
|
|
54
|
-
{disabled}
|
|
62
|
+
disabled={disabled || loading}
|
|
55
63
|
bind:this={element}
|
|
56
64
|
onclick={(event) => {
|
|
57
65
|
if (toggle) {
|
|
@@ -61,7 +69,7 @@
|
|
|
61
69
|
}}
|
|
62
70
|
class={[
|
|
63
71
|
'np-icon-button',
|
|
64
|
-
disabled ? `${variant}-disabled disabled` : `${variant} enabled`,
|
|
72
|
+
disabled || loading ? `${variant}-disabled disabled` : `${variant} enabled`,
|
|
65
73
|
toggle && 'toggle',
|
|
66
74
|
(selected || (variant !== 'outlined' && variant !== 'text' && !toggle)) && 'selected',
|
|
67
75
|
attributes.class,
|
|
@@ -261,4 +269,10 @@
|
|
|
261
269
|
height: max(calc(var(--_button-height, 40px) + 8px), 100%);
|
|
262
270
|
width: max(calc(var(--_button-width, 40px) + 8px), 100%);
|
|
263
271
|
}
|
|
272
|
+
|
|
273
|
+
.circular-progress {
|
|
274
|
+
--np-circular-progress-size: calc(var(--button-height) * 0.75);
|
|
275
|
+
--np-circular-progress-color: color-mix(in srgb, var(--np-color-on-surface) 38%, transparent);
|
|
276
|
+
position: absolute;
|
|
277
|
+
}
|
|
264
278
|
</style>
|
package/dist/button/types.d.ts
CHANGED
|
@@ -25,6 +25,8 @@ interface IconButtonButtonProps extends HTMLButtonAttributes {
|
|
|
25
25
|
element?: HTMLElement;
|
|
26
26
|
toggle?: boolean;
|
|
27
27
|
selected?: boolean;
|
|
28
|
+
loading?: boolean;
|
|
29
|
+
loadingAriaLabel?: string;
|
|
28
30
|
keepTooltipOnClick?: boolean;
|
|
29
31
|
selectedIcon?: Snippet;
|
|
30
32
|
}
|
|
@@ -32,6 +34,8 @@ interface IconButtonAnchorProps extends HTMLAnchorAttributes {
|
|
|
32
34
|
variant?: 'text' | 'filled' | 'outlined' | 'tonal';
|
|
33
35
|
element?: HTMLElement;
|
|
34
36
|
disabled?: boolean;
|
|
37
|
+
loading?: boolean;
|
|
38
|
+
loadingAriaLabel?: string;
|
|
35
39
|
toggle?: boolean;
|
|
36
40
|
selected?: boolean;
|
|
37
41
|
keepTooltipOnClick?: boolean;
|
|
@@ -2,6 +2,9 @@ export const isFirstInvalidControlInForm = (form, control) => {
|
|
|
2
2
|
if (!form) {
|
|
3
3
|
return true;
|
|
4
4
|
}
|
|
5
|
+
return getFirstInvalidControlInForm(form) === control;
|
|
6
|
+
};
|
|
7
|
+
export const getFirstInvalidControlInForm = (form) => {
|
|
5
8
|
let firstInvalidControl;
|
|
6
9
|
for (const element of form.elements) {
|
|
7
10
|
if (element.matches(':invalid')) {
|
|
@@ -9,5 +12,5 @@ export const isFirstInvalidControlInForm = (form, control) => {
|
|
|
9
12
|
break;
|
|
10
13
|
}
|
|
11
14
|
}
|
|
12
|
-
return firstInvalidControl
|
|
15
|
+
return firstInvalidControl;
|
|
13
16
|
};
|