noph-ui 0.18.12 → 0.18.14
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.
|
@@ -8,6 +8,7 @@
|
|
|
8
8
|
element = $bindable(),
|
|
9
9
|
group = $bindable(),
|
|
10
10
|
style,
|
|
11
|
+
onpointerup,
|
|
11
12
|
...attributes
|
|
12
13
|
}: CheckboxProps = $props()
|
|
13
14
|
|
|
@@ -33,22 +34,24 @@
|
|
|
33
34
|
}
|
|
34
35
|
}
|
|
35
36
|
})
|
|
37
|
+
let inputEl: HTMLInputElement | undefined = $state()
|
|
36
38
|
</script>
|
|
37
39
|
|
|
38
40
|
<div {style} class={['np-host', attributes.class]} bind:this={element}>
|
|
39
41
|
<div class="np-container">
|
|
40
42
|
<label class="np-input-wrapper">
|
|
43
|
+
{#if !attributes.disabled}
|
|
44
|
+
<Ripple forElement={inputEl} />
|
|
45
|
+
{/if}
|
|
41
46
|
<input
|
|
42
47
|
{...attributes}
|
|
43
48
|
class="np-input"
|
|
44
49
|
type="checkbox"
|
|
45
50
|
bind:indeterminate
|
|
46
51
|
bind:checked
|
|
52
|
+
bind:this={inputEl}
|
|
47
53
|
aria-checked={indeterminate ? 'mixed' : undefined}
|
|
48
54
|
/>
|
|
49
|
-
{#if !attributes.disabled}
|
|
50
|
-
<Ripple />
|
|
51
|
-
{/if}
|
|
52
55
|
</label>
|
|
53
56
|
|
|
54
57
|
<div class="np-outline"></div>
|
package/dist/chip/ChipSet.svelte
CHANGED
|
@@ -4,21 +4,29 @@
|
|
|
4
4
|
let { children, chipsCount, ...attributes }: ChipSetProps = $props()
|
|
5
5
|
</script>
|
|
6
6
|
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
{
|
|
7
|
+
<div
|
|
8
|
+
class={[
|
|
9
|
+
'np-chip-set-wrapper',
|
|
10
|
+
(chipsCount ?? 0) > 0 && 'np-chip-set-has-chips',
|
|
11
|
+
attributes.class,
|
|
12
|
+
]}
|
|
13
|
+
style={attributes.style}
|
|
14
|
+
>
|
|
15
|
+
{#if children}
|
|
16
|
+
<div class={['np-chip-set']} role="toolbar">
|
|
17
|
+
{@render children()}
|
|
18
|
+
</div>
|
|
19
|
+
{/if}
|
|
20
|
+
</div>
|
|
16
21
|
|
|
17
22
|
<style>
|
|
23
|
+
.np-chip-set-wrapper {
|
|
24
|
+
overflow: auto;
|
|
25
|
+
padding: 0.5rem;
|
|
26
|
+
margin: -0.5rem;
|
|
27
|
+
}
|
|
18
28
|
.np-chip-set-has-chips {
|
|
19
|
-
margin-right: 0
|
|
20
|
-
padding-block: 2px;
|
|
21
|
-
padding-right: 2px;
|
|
29
|
+
margin-right: 0;
|
|
22
30
|
}
|
|
23
31
|
.np-chip-set {
|
|
24
32
|
display: flex;
|
package/dist/radio/Radio.svelte
CHANGED
|
@@ -11,18 +11,13 @@
|
|
|
11
11
|
...attributes
|
|
12
12
|
}: RadioProps = $props()
|
|
13
13
|
|
|
14
|
-
let
|
|
14
|
+
let inputEl: HTMLSpanElement | undefined = $state()
|
|
15
15
|
</script>
|
|
16
16
|
|
|
17
17
|
<label {style} class={['np-host', attributes.class]} bind:this={element}>
|
|
18
|
-
{#if group !== undefined}
|
|
19
|
-
<input {...attributes} type="radio" class="np-input" {checked} {defaultChecked} bind:group />
|
|
20
|
-
{:else}
|
|
21
|
-
<input {...attributes} type="radio" class="np-input" {checked} {defaultChecked} />
|
|
22
|
-
{/if}
|
|
23
18
|
<div class="np-container" aria-hidden="true">
|
|
24
19
|
{#if !attributes.disabled}
|
|
25
|
-
<Ripple forElement={
|
|
20
|
+
<Ripple forElement={inputEl} class="np-radio-ripple" />
|
|
26
21
|
{/if}
|
|
27
22
|
<svg class="np-radio-icon" viewBox="0 0 20 20">
|
|
28
23
|
<mask id="1">
|
|
@@ -32,7 +27,26 @@
|
|
|
32
27
|
<circle class="outer circle" cx="10" cy="10" r="10" mask="url(#1)" />
|
|
33
28
|
<circle class="inner circle" cx="10" cy="10" r="5" />
|
|
34
29
|
</svg>
|
|
35
|
-
|
|
30
|
+
{#if group !== undefined}
|
|
31
|
+
<input
|
|
32
|
+
{...attributes}
|
|
33
|
+
bind:this={inputEl}
|
|
34
|
+
type="radio"
|
|
35
|
+
class="np-input"
|
|
36
|
+
{checked}
|
|
37
|
+
{defaultChecked}
|
|
38
|
+
bind:group
|
|
39
|
+
/>
|
|
40
|
+
{:else}
|
|
41
|
+
<input
|
|
42
|
+
{...attributes}
|
|
43
|
+
bind:this={inputEl}
|
|
44
|
+
type="radio"
|
|
45
|
+
class="np-input"
|
|
46
|
+
{checked}
|
|
47
|
+
{defaultChecked}
|
|
48
|
+
/>
|
|
49
|
+
{/if}
|
|
36
50
|
</div>
|
|
37
51
|
</label>
|
|
38
52
|
|
|
@@ -45,9 +59,11 @@
|
|
|
45
59
|
}
|
|
46
60
|
.np-input {
|
|
47
61
|
opacity: 0;
|
|
48
|
-
|
|
62
|
+
margin: 0;
|
|
49
63
|
position: absolute;
|
|
50
64
|
cursor: inherit;
|
|
65
|
+
height: 48px;
|
|
66
|
+
width: 48px;
|
|
51
67
|
}
|
|
52
68
|
.np-host {
|
|
53
69
|
margin: max(0px, (48px - var(--np-radio-icon-size, 20px))/2);
|
|
@@ -92,11 +108,6 @@
|
|
|
92
108
|
place-items: center;
|
|
93
109
|
width: 100%;
|
|
94
110
|
}
|
|
95
|
-
.np-touch {
|
|
96
|
-
height: 48px;
|
|
97
|
-
position: absolute;
|
|
98
|
-
width: 48px;
|
|
99
|
-
}
|
|
100
111
|
.np-radio-icon {
|
|
101
112
|
fill: var(--np-radio-icon-color, var(--np-color-on-surface-variant));
|
|
102
113
|
inset: 0px;
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import { type Snippet } from 'svelte';
|
|
2
2
|
import type { HTMLAttributes } from 'svelte/elements';
|
|
3
|
-
declare
|
|
4
|
-
props
|
|
3
|
+
declare function $$render<T>(): {
|
|
4
|
+
props: HTMLAttributes<HTMLDivElement> & {
|
|
5
5
|
items: T[];
|
|
6
6
|
height?: string;
|
|
7
7
|
itemHeight?: number;
|
|
@@ -9,8 +9,15 @@ declare class __sveltets_Render<T> {
|
|
|
9
9
|
end?: number;
|
|
10
10
|
row: Snippet<[T]>;
|
|
11
11
|
};
|
|
12
|
-
|
|
13
|
-
|
|
12
|
+
exports: {};
|
|
13
|
+
bindings: "start" | "end";
|
|
14
|
+
slots: {};
|
|
15
|
+
events: {};
|
|
16
|
+
};
|
|
17
|
+
declare class __sveltets_Render<T> {
|
|
18
|
+
props(): ReturnType<typeof $$render<T>>['props'];
|
|
19
|
+
events(): ReturnType<typeof $$render<T>>['events'];
|
|
20
|
+
slots(): ReturnType<typeof $$render<T>>['slots'];
|
|
14
21
|
bindings(): "start" | "end";
|
|
15
22
|
exports(): {};
|
|
16
23
|
}
|
|
@@ -522,8 +522,9 @@
|
|
|
522
522
|
.content .input-wrapper .input {
|
|
523
523
|
min-width: 20px;
|
|
524
524
|
}
|
|
525
|
-
:global(.content .input-wrapper .np-chip-set) {
|
|
526
|
-
|
|
525
|
+
:global(.content .input-wrapper .np-chip-set-wrapper) {
|
|
526
|
+
padding-top: calc(var(--top-space, 1.5rem) - 3px);
|
|
527
|
+
margin-top: 0;
|
|
527
528
|
}
|
|
528
529
|
|
|
529
530
|
.prefix {
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "noph-ui",
|
|
3
|
-
"version": "0.18.
|
|
3
|
+
"version": "0.18.14",
|
|
4
4
|
"license": "MIT",
|
|
5
5
|
"homepage": "https://noph.dev",
|
|
6
6
|
"repository": {
|
|
@@ -53,26 +53,26 @@
|
|
|
53
53
|
"svelte": "^5.32.1"
|
|
54
54
|
},
|
|
55
55
|
"devDependencies": {
|
|
56
|
-
"@eslint/js": "^9.
|
|
56
|
+
"@eslint/js": "^9.31.0",
|
|
57
57
|
"@material/material-color-utilities": "^0.3.0",
|
|
58
|
-
"@playwright/test": "^1.
|
|
59
|
-
"@sveltejs/adapter-vercel": "^5.
|
|
60
|
-
"@sveltejs/kit": "^2.
|
|
61
|
-
"@sveltejs/package": "^2.
|
|
62
|
-
"@sveltejs/vite-plugin-svelte": "^
|
|
58
|
+
"@playwright/test": "^1.54.1",
|
|
59
|
+
"@sveltejs/adapter-vercel": "^5.8.0",
|
|
60
|
+
"@sveltejs/kit": "^2.25.1",
|
|
61
|
+
"@sveltejs/package": "^2.4.0",
|
|
62
|
+
"@sveltejs/vite-plugin-svelte": "^6.1.0",
|
|
63
63
|
"@types/eslint": "^9.6.1",
|
|
64
|
-
"eslint": "^9.
|
|
65
|
-
"eslint-config-prettier": "^10.1.
|
|
66
|
-
"eslint-plugin-svelte": "^3.
|
|
64
|
+
"eslint": "^9.31.0",
|
|
65
|
+
"eslint-config-prettier": "^10.1.8",
|
|
66
|
+
"eslint-plugin-svelte": "^3.11.0",
|
|
67
67
|
"globals": "^16.3.0",
|
|
68
68
|
"prettier": "^3.6.2",
|
|
69
69
|
"prettier-plugin-svelte": "^3.4.0",
|
|
70
70
|
"publint": "^0.3.12",
|
|
71
|
-
"svelte": "^5.
|
|
72
|
-
"svelte-check": "^4.
|
|
71
|
+
"svelte": "^5.36.13",
|
|
72
|
+
"svelte-check": "^4.3.0",
|
|
73
73
|
"typescript": "^5.8.3",
|
|
74
|
-
"typescript-eslint": "^8.
|
|
75
|
-
"vite": "^7.0.
|
|
74
|
+
"typescript-eslint": "^8.38.0",
|
|
75
|
+
"vite": "^7.0.5",
|
|
76
76
|
"vitest": "^3.2.4"
|
|
77
77
|
},
|
|
78
78
|
"svelte": "./dist/index.js",
|