noph-ui 0.25.3 → 0.25.5
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.
|
@@ -38,6 +38,12 @@
|
|
|
38
38
|
</script>
|
|
39
39
|
|
|
40
40
|
<div {style} class={['np-container', attributes.class]} bind:this={element}>
|
|
41
|
+
<div class="np-outline"></div>
|
|
42
|
+
<div class="np-background"></div>
|
|
43
|
+
<svg class="np-icon" viewBox="0 0 18 18" aria-hidden="true">
|
|
44
|
+
<rect class="mark short" />
|
|
45
|
+
<rect class="mark long" />
|
|
46
|
+
</svg>
|
|
41
47
|
<div class="np-input-wrapper">
|
|
42
48
|
{#if !attributes.disabled}
|
|
43
49
|
<Ripple forElement={inputEl} />
|
|
@@ -53,12 +59,6 @@
|
|
|
53
59
|
aria-checked={indeterminate ? 'mixed' : undefined}
|
|
54
60
|
/>
|
|
55
61
|
</div>
|
|
56
|
-
<div class="np-outline"></div>
|
|
57
|
-
<div class="np-background"></div>
|
|
58
|
-
<svg class="np-icon" viewBox="0 0 18 18" aria-hidden="true">
|
|
59
|
-
<rect class="mark short" />
|
|
60
|
-
<rect class="mark long" />
|
|
61
|
-
</svg>
|
|
62
62
|
</div>
|
|
63
63
|
|
|
64
64
|
<style>
|
|
@@ -95,7 +95,6 @@
|
|
|
95
95
|
height: 40px;
|
|
96
96
|
position: absolute;
|
|
97
97
|
width: 40px;
|
|
98
|
-
z-index: 1;
|
|
99
98
|
border-radius: var(--np-shape-corner-full);
|
|
100
99
|
cursor: inherit;
|
|
101
100
|
}
|
package/dist/menu/Menu.svelte
CHANGED
|
@@ -11,6 +11,7 @@
|
|
|
11
11
|
style,
|
|
12
12
|
popover = 'auto',
|
|
13
13
|
anchor,
|
|
14
|
+
ontoggle,
|
|
14
15
|
...attributes
|
|
15
16
|
}: MenuProps = $props()
|
|
16
17
|
|
|
@@ -97,7 +98,7 @@
|
|
|
97
98
|
})
|
|
98
99
|
</script>
|
|
99
100
|
|
|
100
|
-
<svelte:window bind:innerHeight onresize={refreshValues} />
|
|
101
|
+
<!-- <svelte:window bind:innerHeight onresize={refreshValues} /> -->
|
|
101
102
|
<div
|
|
102
103
|
role="menu"
|
|
103
104
|
{...attributes}
|
|
@@ -108,7 +109,7 @@
|
|
|
108
109
|
ontoggle={(event) => {
|
|
109
110
|
let { newState } = event
|
|
110
111
|
open = newState === 'open'
|
|
111
|
-
|
|
112
|
+
ontoggle?.(event)
|
|
112
113
|
}}
|
|
113
114
|
{popover}
|
|
114
115
|
class={['np-menu-container', attributes.class]}
|
|
@@ -139,20 +140,14 @@
|
|
|
139
140
|
padding: 0;
|
|
140
141
|
box-shadow: var(--np-elevation-2);
|
|
141
142
|
margin: var(--np-menu-margin, 2px);
|
|
142
|
-
inset: auto;
|
|
143
|
-
transition:
|
|
144
|
-
display 0.2s allow-discrete,
|
|
145
|
-
overlay 0.2s allow-discrete,
|
|
146
|
-
opacity 0.2s linear;
|
|
147
|
-
opacity: 0;
|
|
148
|
-
justify-self: var(--np-menu-justify-self, anchor-center);
|
|
149
|
-
position-area: var(--np-menu-position-area, bottom center);
|
|
150
|
-
position-try: normal flip-block;
|
|
151
143
|
}
|
|
152
144
|
|
|
153
145
|
.np-menu-container[popover]:popover-open {
|
|
154
146
|
opacity: 1;
|
|
155
147
|
animation: fadeIn 0.2s linear;
|
|
148
|
+
justify-self: var(--np-menu-justify-self, anchor-center);
|
|
149
|
+
position-area: var(--np-menu-position-area, bottom center);
|
|
150
|
+
position-try: normal flip-block;
|
|
156
151
|
}
|
|
157
152
|
@keyframes fadeIn {
|
|
158
153
|
0% {
|
|
@@ -116,7 +116,6 @@
|
|
|
116
116
|
.np-tooltip[popover] {
|
|
117
117
|
width: max-content;
|
|
118
118
|
margin: 4px 0;
|
|
119
|
-
inset: auto;
|
|
120
119
|
background: var(--np-color-inverse-surface);
|
|
121
120
|
color: var(--np-color-inverse-on-surface);
|
|
122
121
|
padding: 0.25rem 0.5rem;
|
|
@@ -124,18 +123,13 @@
|
|
|
124
123
|
border-radius: 0.25rem;
|
|
125
124
|
line-height: 1rem;
|
|
126
125
|
font-size: 0.75rem;
|
|
127
|
-
opacity: 0;
|
|
128
|
-
transition:
|
|
129
|
-
display 0.3s allow-discrete,
|
|
130
|
-
overlay 0.2s allow-discrete,
|
|
131
|
-
opacity 0.3s ease;
|
|
132
|
-
justify-self: var(--np-tooltip-justify-self, anchor-center);
|
|
133
|
-
position-area: var(--np-tooltip-position-area, top);
|
|
134
|
-
position-try: normal flip-block;
|
|
135
126
|
}
|
|
136
127
|
.np-tooltip:popover-open {
|
|
137
128
|
opacity: 1;
|
|
138
129
|
animation: scaleIn 0.3s ease;
|
|
130
|
+
justify-self: var(--np-tooltip-justify-self, anchor-center);
|
|
131
|
+
position-area: var(--np-tooltip-position-area, top);
|
|
132
|
+
position-try: normal flip-block;
|
|
139
133
|
}
|
|
140
134
|
|
|
141
135
|
@keyframes scaleIn {
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "noph-ui",
|
|
3
|
-
"version": "0.25.
|
|
3
|
+
"version": "0.25.5",
|
|
4
4
|
"license": "MIT",
|
|
5
5
|
"homepage": "https://noph.dev",
|
|
6
6
|
"repository": {
|
|
@@ -58,8 +58,8 @@
|
|
|
58
58
|
"@material/material-color-utilities": "^0.3.0",
|
|
59
59
|
"@playwright/test": "^1.55.0",
|
|
60
60
|
"@sveltejs/adapter-vercel": "^5.10.2",
|
|
61
|
-
"@sveltejs/kit": "^2.
|
|
62
|
-
"@sveltejs/package": "^2.5.
|
|
61
|
+
"@sveltejs/kit": "^2.41.0",
|
|
62
|
+
"@sveltejs/package": "^2.5.2",
|
|
63
63
|
"@sveltejs/vite-plugin-svelte": "^6.2.0",
|
|
64
64
|
"@types/eslint": "^9.6.1",
|
|
65
65
|
"eslint": "^9.35.0",
|
|
@@ -72,7 +72,7 @@
|
|
|
72
72
|
"svelte": "^5.38.10",
|
|
73
73
|
"svelte-check": "^4.3.1",
|
|
74
74
|
"typescript": "^5.9.2",
|
|
75
|
-
"typescript-eslint": "^8.
|
|
75
|
+
"typescript-eslint": "^8.44.0",
|
|
76
76
|
"vite": "^7.1.5",
|
|
77
77
|
"vitest": "^3.2.4"
|
|
78
78
|
},
|