noph-ui 0.11.4 → 0.11.6
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/card/Card.svelte
CHANGED
|
@@ -1,6 +1,5 @@
|
|
|
1
1
|
<script lang="ts">
|
|
2
2
|
import Ripple from '../ripple/Ripple.svelte'
|
|
3
|
-
import type { FocusEventHandler } from 'svelte/elements'
|
|
4
3
|
import type { CardProps } from './types.ts'
|
|
5
4
|
|
|
6
5
|
let {
|
|
@@ -13,8 +12,6 @@
|
|
|
13
12
|
supportingText,
|
|
14
13
|
action,
|
|
15
14
|
children,
|
|
16
|
-
onblur,
|
|
17
|
-
onfocus,
|
|
18
15
|
...attributes
|
|
19
16
|
}: CardProps = $props()
|
|
20
17
|
|
|
@@ -71,12 +68,6 @@
|
|
|
71
68
|
{...attributes}
|
|
72
69
|
bind:this={element}
|
|
73
70
|
aria-disabled={disabled}
|
|
74
|
-
onfocus={(event) => {
|
|
75
|
-
;(onfocus as FocusEventHandler<HTMLDivElement>)?.(event)
|
|
76
|
-
}}
|
|
77
|
-
onblur={(event) => {
|
|
78
|
-
;(onblur as FocusEventHandler<HTMLDivElement>)?.(event)
|
|
79
|
-
}}
|
|
80
71
|
class={[
|
|
81
72
|
'np-card-container',
|
|
82
73
|
`np-card-${variant}`,
|
|
@@ -91,14 +82,7 @@
|
|
|
91
82
|
aria-disabled={disabled}
|
|
92
83
|
{...attributes}
|
|
93
84
|
bind:this={element}
|
|
94
|
-
|
|
95
|
-
focused = true
|
|
96
|
-
;(onfocus as FocusEventHandler<HTMLButtonElement>)?.(event)
|
|
97
|
-
}}
|
|
98
|
-
onblur={(event) => {
|
|
99
|
-
focused = false
|
|
100
|
-
;(onblur as FocusEventHandler<HTMLButtonElement>)?.(event)
|
|
101
|
-
}}
|
|
85
|
+
bind:focused
|
|
102
86
|
{disabled}
|
|
103
87
|
class={[
|
|
104
88
|
'np-card-container',
|
|
@@ -116,14 +100,7 @@
|
|
|
116
100
|
aria-disabled={disabled}
|
|
117
101
|
tabindex={disabled ? -1 : undefined}
|
|
118
102
|
role="link"
|
|
119
|
-
|
|
120
|
-
focused = true
|
|
121
|
-
;(onfocus as FocusEventHandler<HTMLAnchorElement>)?.(event)
|
|
122
|
-
}}
|
|
123
|
-
onblur={(event) => {
|
|
124
|
-
focused = false
|
|
125
|
-
;(onblur as FocusEventHandler<HTMLAnchorElement>)?.(event)
|
|
126
|
-
}}
|
|
103
|
+
bind:focused
|
|
127
104
|
class={[
|
|
128
105
|
'np-card-container',
|
|
129
106
|
`np-card-${variant}`,
|
|
@@ -39,6 +39,7 @@
|
|
|
39
39
|
<button
|
|
40
40
|
bind:this={chipBtn}
|
|
41
41
|
class="np-filter-chip-btn"
|
|
42
|
+
type="button"
|
|
42
43
|
{disabled}
|
|
43
44
|
onclick={() => {
|
|
44
45
|
if (element === undefined) return
|
|
@@ -51,7 +52,9 @@
|
|
|
51
52
|
}}
|
|
52
53
|
>
|
|
53
54
|
{#if icon && !selected}
|
|
54
|
-
|
|
55
|
+
<div class="np-chip-icon">
|
|
56
|
+
{@render icon()}
|
|
57
|
+
</div>
|
|
55
58
|
{/if}
|
|
56
59
|
{#if selected}
|
|
57
60
|
<CheckIcon width={18} height={18} />
|
|
@@ -108,6 +111,10 @@
|
|
|
108
111
|
padding-left: 1rem;
|
|
109
112
|
padding-right: 1rem;
|
|
110
113
|
}
|
|
114
|
+
.np-chip-icon {
|
|
115
|
+
color: var(--np-color-primary);
|
|
116
|
+
display: flex;
|
|
117
|
+
}
|
|
111
118
|
.np-filter-chip-icon .np-filter-chip-btn {
|
|
112
119
|
padding-left: 0.5rem;
|
|
113
120
|
}
|
|
@@ -24,30 +24,49 @@
|
|
|
24
24
|
}
|
|
25
25
|
</script>
|
|
26
26
|
|
|
27
|
-
<div bind:this={element}
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
{
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
27
|
+
<div bind:this={element} popover="auto" class="np-dialog-container" {...attributes}>
|
|
28
|
+
<div
|
|
29
|
+
role="none"
|
|
30
|
+
class="np-backdrop"
|
|
31
|
+
onclick={() => {
|
|
32
|
+
element?.hidePopover()
|
|
33
|
+
}}
|
|
34
|
+
></div>
|
|
35
|
+
<div class="np-dialog" role="dialog">
|
|
36
|
+
{#if icon}
|
|
37
|
+
<div class="np-dialog-icon">
|
|
38
|
+
{@render icon()}
|
|
39
|
+
</div>
|
|
40
|
+
{/if}
|
|
41
|
+
<h1 class="np-dialog-headline" style={icon ? 'text-align: center' : ''}>{headline}</h1>
|
|
42
|
+
{#if supportingText}
|
|
43
|
+
<p class="np-dialog-supporting-text">{supportingText}</p>
|
|
44
|
+
{/if}
|
|
45
|
+
{#if divider}
|
|
46
|
+
<Divider style="margin-top: 1rem" --np-divider-color="var(--np-color-outline)" />
|
|
47
|
+
{/if}
|
|
48
|
+
{#if children}
|
|
49
|
+
{@render children()}
|
|
50
|
+
{/if}
|
|
51
|
+
{#if buttons}
|
|
52
|
+
<div class="np-dialog-buttons">
|
|
53
|
+
{@render buttons()}
|
|
54
|
+
</div>
|
|
55
|
+
{/if}
|
|
56
|
+
</div>
|
|
48
57
|
</div>
|
|
49
58
|
|
|
50
59
|
<style>
|
|
60
|
+
.np-dialog-container {
|
|
61
|
+
background: transparent;
|
|
62
|
+
border: none;
|
|
63
|
+
padding: 9px 14px 20px 14px;
|
|
64
|
+
z-index: 1000;
|
|
65
|
+
padding: 2rem 1rem;
|
|
66
|
+
transition:
|
|
67
|
+
display 0.25s allow-discrete,
|
|
68
|
+
overlay 0.25s allow-discrete;
|
|
69
|
+
}
|
|
51
70
|
.np-dialog {
|
|
52
71
|
border: 0;
|
|
53
72
|
min-width: 280px;
|
|
@@ -60,26 +79,25 @@
|
|
|
60
79
|
max-height: 100dvh;
|
|
61
80
|
scrollbar-color: var(--np-color-on-surface-variant) transparent;
|
|
62
81
|
scrollbar-width: thin;
|
|
63
|
-
transition:
|
|
64
|
-
display 0.2s allow-discrete,
|
|
65
|
-
overlay 0.2s allow-discrete,
|
|
66
|
-
opacity 0.2s linear;
|
|
82
|
+
transition: opacity 0.25s ease;
|
|
67
83
|
opacity: 0;
|
|
68
|
-
z-index: 1;
|
|
69
84
|
margin: auto;
|
|
85
|
+
position: relative;
|
|
70
86
|
}
|
|
71
|
-
.np-dialog:popover-open {
|
|
87
|
+
.np-dialog-container:popover-open .np-dialog {
|
|
72
88
|
opacity: 1;
|
|
73
89
|
@starting-style {
|
|
74
90
|
opacity: 0;
|
|
75
91
|
}
|
|
76
92
|
}
|
|
77
|
-
.np-dialog[popover]
|
|
93
|
+
.np-dialog-container[popover] .np-backdrop {
|
|
94
|
+
inset: 0;
|
|
95
|
+
position: fixed;
|
|
78
96
|
background-color: var(--np-color-scrim);
|
|
79
97
|
opacity: 0;
|
|
80
|
-
transition: opacity 0.
|
|
98
|
+
transition: opacity 0.25s ease;
|
|
81
99
|
}
|
|
82
|
-
.np-dialog[popover]:popover-open
|
|
100
|
+
.np-dialog-container[popover]:popover-open .np-backdrop {
|
|
83
101
|
opacity: 0.38;
|
|
84
102
|
@starting-style {
|
|
85
103
|
opacity: 0;
|
package/dist/list/Item.svelte
CHANGED
|
@@ -1,6 +1,5 @@
|
|
|
1
1
|
<script lang="ts">
|
|
2
2
|
import Ripple from '../ripple/Ripple.svelte'
|
|
3
|
-
import type { FocusEventHandler } from 'svelte/elements'
|
|
4
3
|
import type { ItemProps } from './types.ts'
|
|
5
4
|
|
|
6
5
|
let {
|
|
@@ -9,8 +8,6 @@
|
|
|
9
8
|
end,
|
|
10
9
|
children,
|
|
11
10
|
supportingText,
|
|
12
|
-
onblur,
|
|
13
|
-
onfocus,
|
|
14
11
|
disabled = false,
|
|
15
12
|
...attributes
|
|
16
13
|
}: ItemProps = $props()
|
|
@@ -43,9 +40,6 @@
|
|
|
43
40
|
{@render end()}
|
|
44
41
|
</div>
|
|
45
42
|
{/if}
|
|
46
|
-
{#if !disabled && !(attributes.variant === 'text' || attributes.variant === undefined)}
|
|
47
|
-
<Ripple forceHover={focused} />
|
|
48
|
-
{/if}
|
|
49
43
|
{/snippet}
|
|
50
44
|
|
|
51
45
|
{#if disabled}
|
|
@@ -53,47 +47,29 @@
|
|
|
53
47
|
{@render content()}
|
|
54
48
|
</div>
|
|
55
49
|
{:else if attributes.variant === 'text' || attributes.variant === undefined}
|
|
56
|
-
<div
|
|
57
|
-
{...attributes}
|
|
58
|
-
onfocus={(event) => {
|
|
59
|
-
;(onfocus as FocusEventHandler<HTMLDivElement>)?.(event)
|
|
60
|
-
}}
|
|
61
|
-
onblur={(event) => {
|
|
62
|
-
;(onblur as FocusEventHandler<HTMLDivElement>)?.(event)
|
|
63
|
-
}}
|
|
64
|
-
class={['np-item', selected && 'selected', attributes.class]}
|
|
65
|
-
>
|
|
50
|
+
<div {...attributes} class={['np-item', selected && 'selected', attributes.class]}>
|
|
66
51
|
{@render content()}
|
|
67
52
|
</div>
|
|
68
53
|
{:else if attributes.variant === 'button'}
|
|
69
54
|
<button
|
|
70
55
|
{...attributes}
|
|
71
|
-
|
|
72
|
-
focused = true
|
|
73
|
-
;(onfocus as FocusEventHandler<HTMLButtonElement>)?.(event)
|
|
74
|
-
}}
|
|
75
|
-
onblur={(event) => {
|
|
76
|
-
focused = false
|
|
77
|
-
;(onblur as FocusEventHandler<HTMLButtonElement>)?.(event)
|
|
78
|
-
}}
|
|
56
|
+
bind:focused
|
|
79
57
|
class={['np-item', selected && 'selected', attributes.class]}
|
|
80
58
|
bind:this={element}
|
|
81
|
-
|
|
59
|
+
>
|
|
60
|
+
{@render content()}
|
|
61
|
+
<Ripple forceHover={focused} />
|
|
82
62
|
</button>
|
|
83
63
|
{:else if attributes.variant === 'link'}
|
|
84
64
|
<a
|
|
85
65
|
{...attributes}
|
|
86
|
-
|
|
87
|
-
focused = true
|
|
88
|
-
;(onfocus as FocusEventHandler<HTMLAnchorElement>)?.(event)
|
|
89
|
-
}}
|
|
90
|
-
onblur={(event) => {
|
|
91
|
-
focused = false
|
|
92
|
-
;(onblur as FocusEventHandler<HTMLAnchorElement>)?.(event)
|
|
93
|
-
}}
|
|
66
|
+
bind:focused
|
|
94
67
|
class={['np-item', selected && 'selected', attributes.class]}
|
|
95
|
-
bind:this={element}
|
|
68
|
+
bind:this={element}
|
|
96
69
|
>
|
|
70
|
+
{@render content()}
|
|
71
|
+
<Ripple forceHover={focused} />
|
|
72
|
+
</a>
|
|
97
73
|
{/if}
|
|
98
74
|
|
|
99
75
|
<style>
|
|
@@ -21,6 +21,15 @@
|
|
|
21
21
|
attributes.class,
|
|
22
22
|
]}
|
|
23
23
|
>
|
|
24
|
+
{#if backdrop}
|
|
25
|
+
<div
|
|
26
|
+
role="none"
|
|
27
|
+
class="np-backdrop"
|
|
28
|
+
onclick={() => {
|
|
29
|
+
element?.hidePopover()
|
|
30
|
+
}}
|
|
31
|
+
></div>
|
|
32
|
+
{/if}
|
|
24
33
|
<div class={['np-navigation-wrapper', modal && 'np-navigation-drawer-shade']}>
|
|
25
34
|
<div class="np-navigation-drawer">
|
|
26
35
|
{#if children}
|
|
@@ -34,9 +43,6 @@
|
|
|
34
43
|
.np-navigation-drawer-container {
|
|
35
44
|
color: var(--np-color-on-surface-variant);
|
|
36
45
|
width: calc(var(--np-navigation-drawer-width, 22.5rem) + 3px);
|
|
37
|
-
overflow: hidden;
|
|
38
|
-
scrollbar-width: thin;
|
|
39
|
-
overflow-y: auto;
|
|
40
46
|
border: 0;
|
|
41
47
|
margin: 0;
|
|
42
48
|
padding: 0;
|
|
@@ -52,16 +58,17 @@
|
|
|
52
58
|
width: var(--np-navigation-drawer-width, 22.5rem);
|
|
53
59
|
height: var(--np-navigation-drawer-height, 100dvh);
|
|
54
60
|
overflow-y: auto;
|
|
61
|
+
scrollbar-width: thin;
|
|
55
62
|
}
|
|
56
63
|
|
|
57
64
|
.np-navigation-drawer-container[popover] .np-navigation-wrapper {
|
|
58
65
|
transform: translateX(-100%);
|
|
59
|
-
transition: transform 0.
|
|
66
|
+
transition: transform 0.25s ease;
|
|
60
67
|
}
|
|
61
68
|
.np-navigation-drawer-container[popover] {
|
|
62
69
|
transition:
|
|
63
|
-
overlay 0.
|
|
64
|
-
display 0.
|
|
70
|
+
overlay 0.25s allow-discrete,
|
|
71
|
+
display 0.25s allow-discrete;
|
|
65
72
|
}
|
|
66
73
|
.np-navigation-drawer-container:popover-open .np-navigation-wrapper {
|
|
67
74
|
transform: translateX(0);
|
|
@@ -77,12 +84,15 @@
|
|
|
77
84
|
.np-navigation-drawer-shade {
|
|
78
85
|
box-shadow: var(--np-elevation-1);
|
|
79
86
|
}
|
|
80
|
-
|
|
87
|
+
|
|
88
|
+
.np-navigation-drawer-backdrop[popover] .np-backdrop {
|
|
89
|
+
inset: 0;
|
|
90
|
+
position: fixed;
|
|
81
91
|
background-color: var(--np-color-scrim);
|
|
82
92
|
opacity: 0;
|
|
83
|
-
transition: opacity 0.
|
|
93
|
+
transition: opacity 0.25s ease;
|
|
84
94
|
}
|
|
85
|
-
.np-navigation-drawer-backdrop[popover]:popover-open
|
|
95
|
+
.np-navigation-drawer-backdrop[popover]:popover-open .np-backdrop {
|
|
86
96
|
opacity: 0.38;
|
|
87
97
|
@starting-style {
|
|
88
98
|
opacity: 0;
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "noph-ui",
|
|
3
|
-
"version": "0.11.
|
|
3
|
+
"version": "0.11.6",
|
|
4
4
|
"license": "MIT",
|
|
5
5
|
"homepage": "https://noph.dev",
|
|
6
6
|
"repository": {
|
|
@@ -49,7 +49,7 @@
|
|
|
49
49
|
"!dist/**/*.spec.*"
|
|
50
50
|
],
|
|
51
51
|
"peerDependencies": {
|
|
52
|
-
"svelte": "^5.
|
|
52
|
+
"svelte": "^5.19.4"
|
|
53
53
|
},
|
|
54
54
|
"devDependencies": {
|
|
55
55
|
"@material/material-color-utilities": "^0.3.0",
|
|
@@ -66,7 +66,7 @@
|
|
|
66
66
|
"prettier": "^3.4.2",
|
|
67
67
|
"prettier-plugin-svelte": "^3.3.3",
|
|
68
68
|
"publint": "^0.3.2",
|
|
69
|
-
"svelte": "^5.19.
|
|
69
|
+
"svelte": "^5.19.5",
|
|
70
70
|
"svelte-check": "^4.1.4",
|
|
71
71
|
"typescript": "^5.7.3",
|
|
72
72
|
"typescript-eslint": "^8.22.0",
|