noph-ui 0.12.14 → 0.12.16
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/button/Button.svelte +4 -4
- package/dist/button/IconButton.svelte +4 -4
- package/dist/button/SegmentedButton.svelte +1 -1
- package/dist/navigation-drawer/NavigationDrawerItem.svelte +10 -4
- package/dist/navigation-rail/NavigationRailItem.svelte +2 -4
- package/dist/progress/CircularProgress.svelte +1 -3
- package/dist/progress/LinearProgress.svelte +1 -3
- package/dist/select/Select.svelte +4 -3
- package/package.json +12 -12
|
@@ -19,7 +19,7 @@
|
|
|
19
19
|
...attributes
|
|
20
20
|
}: ButtonProps = $props()
|
|
21
21
|
|
|
22
|
-
let
|
|
22
|
+
let uid = $props.id()
|
|
23
23
|
|
|
24
24
|
const isButton = (obj: unknown): obj is HTMLButtonAttributes => {
|
|
25
25
|
return (obj as HTMLAnchorAttributes).href === undefined
|
|
@@ -58,7 +58,7 @@
|
|
|
58
58
|
{#if isButton(attributes) || disabled || loading}
|
|
59
59
|
<button
|
|
60
60
|
{...attributes as HTMLButtonAttributes}
|
|
61
|
-
aria-describedby={title ?
|
|
61
|
+
aria-describedby={title ? uid : attributes['aria-describedby']}
|
|
62
62
|
aria-label={title || attributes['aria-label']}
|
|
63
63
|
disabled={disabled || loading}
|
|
64
64
|
bind:this={element}
|
|
@@ -74,7 +74,7 @@
|
|
|
74
74
|
{:else if isLink(attributes)}
|
|
75
75
|
<a
|
|
76
76
|
{...attributes}
|
|
77
|
-
aria-describedby={title ?
|
|
77
|
+
aria-describedby={title ? uid : attributes['aria-describedby']}
|
|
78
78
|
aria-label={title || attributes['aria-label']}
|
|
79
79
|
bind:this={element}
|
|
80
80
|
class={['np-button', 'enabled', variant, attributes.class]}
|
|
@@ -84,7 +84,7 @@
|
|
|
84
84
|
{/if}
|
|
85
85
|
|
|
86
86
|
{#if title}
|
|
87
|
-
<Tooltip {keepTooltipOnClick} id={
|
|
87
|
+
<Tooltip {keepTooltipOnClick} id={uid}>{title}</Tooltip>
|
|
88
88
|
{/if}
|
|
89
89
|
|
|
90
90
|
<style>
|
|
@@ -22,7 +22,7 @@
|
|
|
22
22
|
...attributes
|
|
23
23
|
}: IconButtonProps = $props()
|
|
24
24
|
|
|
25
|
-
let
|
|
25
|
+
let uid = $props.id()
|
|
26
26
|
let selectedState = $state(!toggle || selected)
|
|
27
27
|
let touchEl: HTMLSpanElement | undefined = $state()
|
|
28
28
|
|
|
@@ -48,7 +48,7 @@
|
|
|
48
48
|
|
|
49
49
|
{#if isButton(attributes) || disabled}
|
|
50
50
|
<button
|
|
51
|
-
aria-describedby={title ?
|
|
51
|
+
aria-describedby={title ? uid : attributes['aria-describedby']}
|
|
52
52
|
aria-label={title || attributes['aria-label']}
|
|
53
53
|
aria-pressed={selectedState}
|
|
54
54
|
{...attributes as HTMLButtonAttributes}
|
|
@@ -73,7 +73,7 @@
|
|
|
73
73
|
{:else if isLink(attributes)}
|
|
74
74
|
<a
|
|
75
75
|
{...attributes}
|
|
76
|
-
aria-describedby={title ?
|
|
76
|
+
aria-describedby={title ? uid : undefined}
|
|
77
77
|
aria-label={title}
|
|
78
78
|
bind:this={element}
|
|
79
79
|
class={[
|
|
@@ -89,7 +89,7 @@
|
|
|
89
89
|
{/if}
|
|
90
90
|
|
|
91
91
|
{#if title}
|
|
92
|
-
<Tooltip {keepTooltipOnClick} id={
|
|
92
|
+
<Tooltip {keepTooltipOnClick} id={uid}>{title}</Tooltip>
|
|
93
93
|
{/if}
|
|
94
94
|
|
|
95
95
|
<style>
|
|
@@ -21,7 +21,7 @@
|
|
|
21
21
|
style="{attributes.style};grid-template-columns: repeat({options.length}, minmax(max-content, 1fr));"
|
|
22
22
|
>
|
|
23
23
|
{#each options as option, i}
|
|
24
|
-
<label class=
|
|
24
|
+
<label class={['np-segmented-button', option.icon && 'width-icon']}>
|
|
25
25
|
<div class="check-icon-wrapper">
|
|
26
26
|
<div class="check-icon">
|
|
27
27
|
<CheckIcon />
|
|
@@ -33,16 +33,22 @@
|
|
|
33
33
|
{#if isButton(attributes)}
|
|
34
34
|
<button
|
|
35
35
|
{...attributes as HTMLButtonAttributes}
|
|
36
|
-
class
|
|
37
|
-
|
|
36
|
+
class={[
|
|
37
|
+
'np-navigation-drawer-item',
|
|
38
|
+
selected && 'np-navigation-drawer-item-selected',
|
|
39
|
+
attributes.class,
|
|
40
|
+
]}
|
|
38
41
|
>
|
|
39
42
|
{@render content()}
|
|
40
43
|
</button>
|
|
41
44
|
{:else if isLink(attributes)}
|
|
42
45
|
<a
|
|
43
46
|
{...attributes}
|
|
44
|
-
class
|
|
45
|
-
|
|
47
|
+
class={[
|
|
48
|
+
'np-navigation-drawer-item',
|
|
49
|
+
selected && 'np-navigation-drawer-item-selected',
|
|
50
|
+
attributes.class,
|
|
51
|
+
]}
|
|
46
52
|
>
|
|
47
53
|
{@render content()}
|
|
48
54
|
</a>
|
|
@@ -26,16 +26,14 @@
|
|
|
26
26
|
{#if isButton(attributes)}
|
|
27
27
|
<button
|
|
28
28
|
{...attributes as HTMLButtonAttributes}
|
|
29
|
-
class
|
|
30
|
-
class="np-navigation-action {attributes.class}"
|
|
29
|
+
class={['np-navigation-action', selected && 'np-navigation-action-selected', attributes.class]}
|
|
31
30
|
>
|
|
32
31
|
{@render content()}
|
|
33
32
|
</button>
|
|
34
33
|
{:else if isLink(attributes)}
|
|
35
34
|
<a
|
|
36
35
|
{...attributes}
|
|
37
|
-
class
|
|
38
|
-
class="np-navigation-action {attributes.class}"
|
|
36
|
+
class={['np-navigation-action', selected && 'np-navigation-action-selected', attributes.class]}
|
|
39
37
|
>
|
|
40
38
|
{@render content()}
|
|
41
39
|
</a>
|
|
@@ -15,10 +15,8 @@
|
|
|
15
15
|
|
|
16
16
|
<div class="np-container" bind:this={element}>
|
|
17
17
|
<div
|
|
18
|
-
class:four-color={fourColor}
|
|
19
|
-
class:indeterminate
|
|
20
18
|
{...attributes}
|
|
21
|
-
class=
|
|
19
|
+
class={['progress', indeterminate && 'indeterminate', fourColor && 'four-color']}
|
|
22
20
|
role="progressbar"
|
|
23
21
|
aria-valuemin="0"
|
|
24
22
|
aria-valuemax={max}
|
|
@@ -25,10 +25,8 @@
|
|
|
25
25
|
|
|
26
26
|
<div class="np-container" bind:this={element}>
|
|
27
27
|
<div
|
|
28
|
-
class:four-color={fourColor}
|
|
29
|
-
class:indeterminate
|
|
30
28
|
{...attributes}
|
|
31
|
-
class=
|
|
29
|
+
class={['progress', indeterminate && 'indeterminate', fourColor && 'four-color']}
|
|
32
30
|
role="progressbar"
|
|
33
31
|
aria-valuemin="0"
|
|
34
32
|
aria-valuemax={max}
|
|
@@ -29,6 +29,8 @@
|
|
|
29
29
|
...attributes
|
|
30
30
|
}: SelectProps = $props()
|
|
31
31
|
|
|
32
|
+
const uid = $props.id()
|
|
33
|
+
|
|
32
34
|
let errorTextRaw: string = $state(errorText)
|
|
33
35
|
let errorRaw = $state(error)
|
|
34
36
|
let selectElement: HTMLSelectElement | undefined = $state()
|
|
@@ -36,7 +38,6 @@
|
|
|
36
38
|
let anchorElement: HTMLDivElement | undefined = $state()
|
|
37
39
|
let field: HTMLDivElement | undefined = $state()
|
|
38
40
|
let clientWidth = $state(0)
|
|
39
|
-
let menuId = $state(`--select-${crypto.randomUUID()}`)
|
|
40
41
|
let menuOpen = $state(false)
|
|
41
42
|
let selectedLabel = $derived.by<string>(() => {
|
|
42
43
|
return options.find((option) => option.value === value)?.label || ''
|
|
@@ -131,7 +132,7 @@
|
|
|
131
132
|
<div class="outline-end"></div>
|
|
132
133
|
</div>
|
|
133
134
|
{/if}
|
|
134
|
-
<div class="np-container" bind:this={anchorElement} style="anchor-name
|
|
135
|
+
<div class="np-container" bind:this={anchorElement} style="anchor-name:--{uid};">
|
|
135
136
|
{#if start}
|
|
136
137
|
<div class="start">
|
|
137
138
|
<span class="icon">{@render start()}</span>
|
|
@@ -199,7 +200,7 @@
|
|
|
199
200
|
</div>
|
|
200
201
|
|
|
201
202
|
<Menu
|
|
202
|
-
style="position-anchor
|
|
203
|
+
style="position-anchor:--{uid};min-width:{clientWidth}px;"
|
|
203
204
|
popover="manual"
|
|
204
205
|
role="listbox"
|
|
205
206
|
--np-menu-justify-self="none"
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "noph-ui",
|
|
3
|
-
"version": "0.12.
|
|
3
|
+
"version": "0.12.16",
|
|
4
4
|
"license": "MIT",
|
|
5
5
|
"homepage": "https://noph.dev",
|
|
6
6
|
"repository": {
|
|
@@ -49,29 +49,29 @@
|
|
|
49
49
|
"!dist/**/*.spec.*"
|
|
50
50
|
],
|
|
51
51
|
"peerDependencies": {
|
|
52
|
-
"svelte": "^5.
|
|
52
|
+
"svelte": "^5.20.0"
|
|
53
53
|
},
|
|
54
54
|
"devDependencies": {
|
|
55
55
|
"@material/material-color-utilities": "^0.3.0",
|
|
56
56
|
"@playwright/test": "^1.50.1",
|
|
57
|
-
"@sveltejs/adapter-vercel": "^5.6.
|
|
58
|
-
"@sveltejs/kit": "^2.17.
|
|
57
|
+
"@sveltejs/adapter-vercel": "^5.6.3",
|
|
58
|
+
"@sveltejs/kit": "^2.17.2",
|
|
59
59
|
"@sveltejs/package": "^2.3.10",
|
|
60
60
|
"@sveltejs/vite-plugin-svelte": "^5.0.3",
|
|
61
61
|
"@types/eslint": "^9.6.1",
|
|
62
|
-
"eslint": "^9.
|
|
62
|
+
"eslint": "^9.21.0",
|
|
63
63
|
"eslint-config-prettier": "^10.0.1",
|
|
64
64
|
"eslint-plugin-svelte": "^2.46.1",
|
|
65
|
-
"globals": "^
|
|
66
|
-
"prettier": "^3.
|
|
65
|
+
"globals": "^16.0.0",
|
|
66
|
+
"prettier": "^3.5.2",
|
|
67
67
|
"prettier-plugin-svelte": "^3.3.3",
|
|
68
|
-
"publint": "^0.3.
|
|
69
|
-
"svelte": "^5.
|
|
68
|
+
"publint": "^0.3.6",
|
|
69
|
+
"svelte": "^5.20.4",
|
|
70
70
|
"svelte-check": "^4.1.4",
|
|
71
71
|
"typescript": "^5.7.3",
|
|
72
|
-
"typescript-eslint": "^8.
|
|
73
|
-
"vite": "^6.1.
|
|
74
|
-
"vitest": "^3.0.
|
|
72
|
+
"typescript-eslint": "^8.24.1",
|
|
73
|
+
"vite": "^6.1.1",
|
|
74
|
+
"vitest": "^3.0.6"
|
|
75
75
|
},
|
|
76
76
|
"svelte": "./dist/index.js",
|
|
77
77
|
"types": "./dist/index.d.ts",
|