noph-ui 0.48.0 → 0.49.0
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.
|
@@ -104,11 +104,10 @@
|
|
|
104
104
|
</script>
|
|
105
105
|
|
|
106
106
|
{#snippet item(option: AutoCompleteOption, index: number)}
|
|
107
|
-
{#snippet supportingText()}
|
|
108
|
-
{option.supportingText}
|
|
109
|
-
{/snippet}
|
|
110
107
|
<Item
|
|
111
108
|
id="{uid}-opt-{index}"
|
|
109
|
+
class={option.class}
|
|
110
|
+
style={option.style}
|
|
112
111
|
softFocus={index === activeIndex}
|
|
113
112
|
aria-selected={index === activeIndex}
|
|
114
113
|
role="option"
|
|
@@ -125,7 +124,7 @@
|
|
|
125
124
|
variant="button"
|
|
126
125
|
start={option.start}
|
|
127
126
|
end={option.end}
|
|
128
|
-
supportingText={option.supportingText
|
|
127
|
+
supportingText={option.supportingText}
|
|
129
128
|
>{option.label}
|
|
130
129
|
</Item>
|
|
131
130
|
{/snippet}
|
|
@@ -1,11 +1,8 @@
|
|
|
1
|
+
import type { ItemProps } from '../list/types.js';
|
|
1
2
|
import type { TextFieldProps } from '../types.js';
|
|
2
|
-
|
|
3
|
-
export interface AutoCompleteOption {
|
|
3
|
+
export interface AutoCompleteOption extends Pick<ItemProps, 'start' | 'end' | 'supportingText' | 'class' | 'style'> {
|
|
4
4
|
value?: string | number;
|
|
5
5
|
label: string;
|
|
6
|
-
start?: Snippet;
|
|
7
|
-
end?: Snippet;
|
|
8
|
-
supportingText?: string;
|
|
9
6
|
}
|
|
10
7
|
export interface AutoCompleteProps extends Omit<TextFieldProps, 'clientWidth' | 'clientHeight'> {
|
|
11
8
|
options: AutoCompleteOption[];
|
package/dist/list/Item.svelte
CHANGED
package/dist/list/types.d.ts
CHANGED
|
@@ -7,7 +7,7 @@ export interface ItemProps extends HTMLAttributes<ItemElement>, Omit<HTMLButtonA
|
|
|
7
7
|
end?: Snippet;
|
|
8
8
|
disabled?: boolean;
|
|
9
9
|
variant?: 'button' | 'link' | 'text';
|
|
10
|
-
supportingText?: Snippet;
|
|
10
|
+
supportingText?: string | Snippet;
|
|
11
11
|
softFocus?: boolean;
|
|
12
12
|
lazy?: boolean;
|
|
13
13
|
type?: 'submit' | 'reset' | 'button' | null;
|
|
@@ -108,18 +108,26 @@
|
|
|
108
108
|
}
|
|
109
109
|
|
|
110
110
|
.np-select {
|
|
111
|
-
|
|
112
|
-
|
|
113
|
-
|
|
114
|
-
|
|
115
|
-
|
|
116
|
-
|
|
111
|
+
appearance: base-select;
|
|
112
|
+
display: inline-flex;
|
|
113
|
+
align-items: center;
|
|
114
|
+
margin: 0;
|
|
115
|
+
border: none;
|
|
116
|
+
outline: none;
|
|
117
|
+
background: none;
|
|
118
|
+
font: inherit;
|
|
117
119
|
font-size: inherit;
|
|
120
|
+
line-height: 1.5rem;
|
|
118
121
|
width: 100%;
|
|
122
|
+
min-inline-size: 0;
|
|
123
|
+
overflow: hidden;
|
|
119
124
|
box-sizing: border-box;
|
|
120
|
-
line-height: 1.5rem;
|
|
121
125
|
height: 3.5rem;
|
|
122
126
|
color: var(--np-color-on-surface);
|
|
127
|
+
&::picker(select) {
|
|
128
|
+
appearance: base-select;
|
|
129
|
+
scrollbar-width: thin;
|
|
130
|
+
}
|
|
123
131
|
&::picker-icon {
|
|
124
132
|
display: none;
|
|
125
133
|
}
|
|
@@ -130,6 +138,11 @@
|
|
|
130
138
|
border-radius: var(--np-shape-corner-extra-small);
|
|
131
139
|
box-shadow: var(--np-elevation-2);
|
|
132
140
|
border: none;
|
|
141
|
+
position-area: block-end span-inline-end;
|
|
142
|
+
min-inline-size: anchor-size(self-inline);
|
|
143
|
+
margin-block-start: 0.25rem;
|
|
144
|
+
padding-block: 0.5rem;
|
|
145
|
+
padding-inline: 0;
|
|
133
146
|
opacity: 0;
|
|
134
147
|
scale: 0.8;
|
|
135
148
|
transform-origin: top center;
|
|
@@ -156,9 +169,51 @@
|
|
|
156
169
|
.filled select {
|
|
157
170
|
padding-inline-start: 1rem;
|
|
158
171
|
padding-block-start: 1.5rem;
|
|
172
|
+
padding-block-end: 0.5rem;
|
|
159
173
|
padding-inline-end: 3.25rem;
|
|
160
174
|
}
|
|
161
175
|
|
|
176
|
+
.np-select :global(option) {
|
|
177
|
+
box-sizing: border-box;
|
|
178
|
+
min-height: 3rem;
|
|
179
|
+
padding-inline: 1rem;
|
|
180
|
+
gap: 0.75rem;
|
|
181
|
+
color: var(--np-color-on-surface);
|
|
182
|
+
background-color: transparent;
|
|
183
|
+
}
|
|
184
|
+
|
|
185
|
+
.np-select :global(option::checkmark) {
|
|
186
|
+
display: none;
|
|
187
|
+
}
|
|
188
|
+
|
|
189
|
+
.np-select :global(option:checked) {
|
|
190
|
+
background-color: var(--np-color-secondary-container);
|
|
191
|
+
color: var(--np-color-on-secondary-container);
|
|
192
|
+
}
|
|
193
|
+
|
|
194
|
+
.np-select :global(option:hover:not(:disabled)) {
|
|
195
|
+
background-color: color-mix(in srgb, var(--np-color-on-surface) 8%, transparent);
|
|
196
|
+
}
|
|
197
|
+
|
|
198
|
+
.np-select :global(option:checked:hover) {
|
|
199
|
+
background-color: color-mix(
|
|
200
|
+
in srgb,
|
|
201
|
+
var(--np-color-on-secondary-container) 8%,
|
|
202
|
+
var(--np-color-secondary-container)
|
|
203
|
+
);
|
|
204
|
+
}
|
|
205
|
+
|
|
206
|
+
.np-select :global(option:disabled) {
|
|
207
|
+
color: color-mix(in srgb, var(--np-color-on-surface) 38%, transparent);
|
|
208
|
+
}
|
|
209
|
+
|
|
210
|
+
.np-select :global(optgroup > legend) {
|
|
211
|
+
padding-inline: 1rem;
|
|
212
|
+
padding-block: 0.5rem;
|
|
213
|
+
font-size: 0.875rem;
|
|
214
|
+
color: var(--np-color-on-surface-variant);
|
|
215
|
+
}
|
|
216
|
+
|
|
162
217
|
.np-select-outline {
|
|
163
218
|
pointer-events: none;
|
|
164
219
|
width: 100%;
|