noph-ui 0.30.0 → 0.30.1
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/menu/Menu.svelte +4 -4
- package/dist/ripple/Ripple.svelte +5 -16
- package/dist/tooltip/Tooltip.svelte +3 -3
- package/package.json +13 -13
package/dist/menu/Menu.svelte
CHANGED
|
@@ -140,14 +140,14 @@
|
|
|
140
140
|
padding: 0;
|
|
141
141
|
box-shadow: var(--np-elevation-2);
|
|
142
142
|
margin: var(--np-menu-margin, 2px);
|
|
143
|
+
justify-self: var(--np-menu-justify-self, anchor-center);
|
|
144
|
+
position-area: var(--np-menu-position-area, bottom center);
|
|
145
|
+
position-try: normal flip-block;
|
|
143
146
|
}
|
|
144
147
|
|
|
145
|
-
.np-menu-container
|
|
148
|
+
.np-menu-container:popover-open {
|
|
146
149
|
opacity: 1;
|
|
147
150
|
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;
|
|
151
151
|
}
|
|
152
152
|
@keyframes fadeIn {
|
|
153
153
|
0% {
|
|
@@ -8,7 +8,6 @@
|
|
|
8
8
|
...attributes
|
|
9
9
|
}: RippleProps = $props()
|
|
10
10
|
let pressed = $state(false)
|
|
11
|
-
let hovered = $state(false)
|
|
12
11
|
|
|
13
12
|
const PRESS_GROW_MS = 450
|
|
14
13
|
const MINIMUM_PRESS_MS = 225
|
|
@@ -151,9 +150,10 @@
|
|
|
151
150
|
return
|
|
152
151
|
}
|
|
153
152
|
|
|
154
|
-
|
|
155
|
-
|
|
156
|
-
|
|
153
|
+
// TODO This is buggy in async svelte
|
|
154
|
+
// await new Promise((resolve) => {
|
|
155
|
+
// setTimeout(resolve, MINIMUM_PRESS_MS - pressAnimationPlayState)
|
|
156
|
+
// })
|
|
157
157
|
|
|
158
158
|
if (growAnimation !== animation) {
|
|
159
159
|
return
|
|
@@ -166,20 +166,11 @@
|
|
|
166
166
|
return x >= left && x <= right && y >= top && y <= bottom
|
|
167
167
|
}
|
|
168
168
|
|
|
169
|
-
const handlePointerenter = (event: PointerEvent) => {
|
|
170
|
-
if (!shouldReactToEvent(event)) {
|
|
171
|
-
return
|
|
172
|
-
}
|
|
173
|
-
|
|
174
|
-
hovered = true
|
|
175
|
-
}
|
|
176
|
-
|
|
177
169
|
const handlePointerleave = (event: PointerEvent) => {
|
|
178
170
|
if (!shouldReactToEvent(event)) {
|
|
179
171
|
return
|
|
180
172
|
}
|
|
181
173
|
|
|
182
|
-
hovered = false
|
|
183
174
|
if (step !== 'INACTIVE') {
|
|
184
175
|
endPressAnimation()
|
|
185
176
|
}
|
|
@@ -263,7 +254,6 @@
|
|
|
263
254
|
el.removeEventListener('contextmenu', handleContextmenu)
|
|
264
255
|
el.removeEventListener('pointercancel', handlePointercancel)
|
|
265
256
|
el.removeEventListener('pointerdown', handlePointerdown)
|
|
266
|
-
el.removeEventListener('pointerenter', handlePointerenter)
|
|
267
257
|
el.removeEventListener('pointerleave', handlePointerleave)
|
|
268
258
|
el.removeEventListener('pointerup', handlePointerup)
|
|
269
259
|
}
|
|
@@ -275,7 +265,6 @@
|
|
|
275
265
|
el.addEventListener('contextmenu', handleContextmenu)
|
|
276
266
|
el.addEventListener('pointercancel', handlePointercancel)
|
|
277
267
|
el.addEventListener('pointerdown', handlePointerdown)
|
|
278
|
-
el.addEventListener('pointerenter', handlePointerenter)
|
|
279
268
|
el.addEventListener('pointerleave', handlePointerleave)
|
|
280
269
|
el.addEventListener('pointerup', handlePointerup)
|
|
281
270
|
}
|
|
@@ -305,7 +294,7 @@
|
|
|
305
294
|
{...attributes}
|
|
306
295
|
class={[
|
|
307
296
|
pressed && 'np-ripple-pressed',
|
|
308
|
-
|
|
297
|
+
forceHover && 'np-ripple-hovered',
|
|
309
298
|
'np-ripple-surface',
|
|
310
299
|
attributes.class,
|
|
311
300
|
]}
|
|
@@ -123,13 +123,13 @@
|
|
|
123
123
|
border-radius: 0.25rem;
|
|
124
124
|
line-height: 1rem;
|
|
125
125
|
font-size: 0.75rem;
|
|
126
|
+
justify-self: var(--np-tooltip-justify-self, anchor-center);
|
|
127
|
+
position-area: var(--np-tooltip-position-area, top);
|
|
128
|
+
position-try: normal flip-block;
|
|
126
129
|
}
|
|
127
130
|
.np-tooltip:popover-open {
|
|
128
131
|
opacity: 1;
|
|
129
132
|
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;
|
|
133
133
|
}
|
|
134
134
|
|
|
135
135
|
@keyframes scaleIn {
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "noph-ui",
|
|
3
|
-
"version": "0.30.
|
|
3
|
+
"version": "0.30.1",
|
|
4
4
|
"license": "MIT",
|
|
5
5
|
"homepage": "https://noph.dev",
|
|
6
6
|
"repository": {
|
|
@@ -54,27 +54,27 @@
|
|
|
54
54
|
"svelte": "^5.40.0"
|
|
55
55
|
},
|
|
56
56
|
"devDependencies": {
|
|
57
|
-
"@eslint/js": "^9.
|
|
57
|
+
"@eslint/js": "^9.39.1",
|
|
58
58
|
"@material/material-color-utilities": "^0.3.0",
|
|
59
|
-
"@playwright/test": "^1.56.
|
|
60
|
-
"@sveltejs/adapter-auto": "^
|
|
61
|
-
"@sveltejs/kit": "^2.
|
|
59
|
+
"@playwright/test": "^1.56.1",
|
|
60
|
+
"@sveltejs/adapter-auto": "^7.0.0",
|
|
61
|
+
"@sveltejs/kit": "^2.48.4",
|
|
62
62
|
"@sveltejs/package": "^2.5.4",
|
|
63
63
|
"@sveltejs/vite-plugin-svelte": "^6.2.1",
|
|
64
64
|
"@types/eslint": "^9.6.1",
|
|
65
|
-
"eslint": "^9.
|
|
65
|
+
"eslint": "^9.39.1",
|
|
66
66
|
"eslint-config-prettier": "^10.1.8",
|
|
67
|
-
"eslint-plugin-svelte": "^3.
|
|
68
|
-
"globals": "^16.
|
|
67
|
+
"eslint-plugin-svelte": "^3.13.0",
|
|
68
|
+
"globals": "^16.5.0",
|
|
69
69
|
"prettier": "^3.6.2",
|
|
70
70
|
"prettier-plugin-svelte": "^3.4.0",
|
|
71
|
-
"publint": "^0.3.
|
|
72
|
-
"svelte": "^5.
|
|
71
|
+
"publint": "^0.3.15",
|
|
72
|
+
"svelte": "^5.43.3",
|
|
73
73
|
"svelte-check": "^4.3.3",
|
|
74
74
|
"typescript": "^5.9.3",
|
|
75
|
-
"typescript-eslint": "^8.46.
|
|
76
|
-
"vite": "^7.1.
|
|
77
|
-
"vitest": "^
|
|
75
|
+
"typescript-eslint": "^8.46.3",
|
|
76
|
+
"vite": "^7.1.12",
|
|
77
|
+
"vitest": "^4.0.6"
|
|
78
78
|
},
|
|
79
79
|
"svelte": "./dist/index.js",
|
|
80
80
|
"types": "./dist/index.d.ts",
|