noph-ui 0.26.1 → 0.26.2
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/select/NativeSelect.svelte +14 -11
- package/package.json +1 -1
|
@@ -40,8 +40,9 @@
|
|
|
40
40
|
errorRaw && 'error',
|
|
41
41
|
disabled && 'disabled',
|
|
42
42
|
required && !noAsterisk && 'asterisk',
|
|
43
|
-
|
|
44
|
-
animateLabel && 'label
|
|
43
|
+
!value && 'is-empty',
|
|
44
|
+
animateLabel && 'animate-label',
|
|
45
|
+
attributes.class,
|
|
45
46
|
]}
|
|
46
47
|
aria-disabled={disabled}
|
|
47
48
|
>
|
|
@@ -67,8 +68,10 @@
|
|
|
67
68
|
<polygon stroke="none" fill-rule="evenodd" points="7 10 12 15 17 10"></polygon>
|
|
68
69
|
</svg>
|
|
69
70
|
<select
|
|
70
|
-
|
|
71
|
-
|
|
71
|
+
oninput={(event) => {
|
|
72
|
+
if ((!value && event.currentTarget.value) || (value && !event.currentTarget.value)) {
|
|
73
|
+
animateLabel = true
|
|
74
|
+
}
|
|
72
75
|
onchange?.(event)
|
|
73
76
|
}}
|
|
74
77
|
oninvalid={(event) => {
|
|
@@ -86,6 +89,7 @@
|
|
|
86
89
|
aria-invalid={error}
|
|
87
90
|
bind:value
|
|
88
91
|
{...attributes}
|
|
92
|
+
class="np-select"
|
|
89
93
|
>
|
|
90
94
|
{@render children?.()}
|
|
91
95
|
</select>
|
|
@@ -103,11 +107,10 @@
|
|
|
103
107
|
position: relative;
|
|
104
108
|
font-size: 1rem;
|
|
105
109
|
display: inline-block;
|
|
106
|
-
min-width: 200px;
|
|
107
110
|
color: var(--np-color-on-surface-variant);
|
|
108
111
|
}
|
|
109
112
|
|
|
110
|
-
select {
|
|
113
|
+
.np-select {
|
|
111
114
|
all: unset;
|
|
112
115
|
&,
|
|
113
116
|
&::picker(select) {
|
|
@@ -294,7 +297,7 @@
|
|
|
294
297
|
transform: translateY(0.5rem);
|
|
295
298
|
}
|
|
296
299
|
|
|
297
|
-
.label
|
|
300
|
+
.animate-label label {
|
|
298
301
|
transition-property: font-size;
|
|
299
302
|
transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
|
|
300
303
|
transition-duration: 150ms;
|
|
@@ -304,7 +307,7 @@
|
|
|
304
307
|
color: var(--np-color-primary);
|
|
305
308
|
}
|
|
306
309
|
|
|
307
|
-
.label
|
|
310
|
+
.animate-label:not(.is-empty) .np-select-outline label {
|
|
308
311
|
animation: slideUpOutline 150ms cubic-bezier(0.4, 0, 0.2, 1) forwards;
|
|
309
312
|
}
|
|
310
313
|
|
|
@@ -317,7 +320,7 @@
|
|
|
317
320
|
}
|
|
318
321
|
}
|
|
319
322
|
|
|
320
|
-
.label
|
|
323
|
+
.animate-label:not(.is-empty) .np-select-filled label {
|
|
321
324
|
animation: slideUpFilled 150ms cubic-bezier(0.4, 0, 0.2, 1) forwards;
|
|
322
325
|
}
|
|
323
326
|
|
|
@@ -337,7 +340,7 @@
|
|
|
337
340
|
position: absolute;
|
|
338
341
|
}
|
|
339
342
|
|
|
340
|
-
.is-empty.label
|
|
343
|
+
.is-empty.animate-label .np-select-outline label {
|
|
341
344
|
animation: slideDownOutline 150ms cubic-bezier(0.4, 0, 0.2, 1) forwards;
|
|
342
345
|
}
|
|
343
346
|
|
|
@@ -355,7 +358,7 @@
|
|
|
355
358
|
transform: translateY(1.25rem);
|
|
356
359
|
}
|
|
357
360
|
|
|
358
|
-
.is-empty.label
|
|
361
|
+
.is-empty.animate-label .np-select-filled label {
|
|
359
362
|
animation: slideDownFilled 150ms cubic-bezier(0.4, 0, 0.2, 1) forwards;
|
|
360
363
|
}
|
|
361
364
|
|