@phila/phila-ui-search 1.1.3-beta.3 → 1.2.0-beta.10

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/README.md CHANGED
@@ -2,7 +2,12 @@
2
2
 
3
3
  <!-- status-badge-start -->
4
4
 
5
- ![Status: Stable](https://img.shields.io/badge/-Stable-brightgreen)
5
+ ### Component Status
6
+
7
+ | Component | Status |
8
+ | ----------------- | ----------------------------------------------------------- |
9
+ | Search | ![Stable](https://img.shields.io/badge/-Stable-brightgreen) |
10
+ | SearchSuggestions | ![Stable](https://img.shields.io/badge/-Stable-brightgreen) |
6
11
 
7
12
  <!-- status-badge-end -->
8
13
 
@@ -14,6 +19,29 @@ A search bar component built with Vue 3 and TypeScript, implementing the Philade
14
19
  - 📝 TextField integration with custom styling
15
20
  - 🎯 TypeScript support with full type definitions
16
21
  - 💅 Design system integration: Uses Core package styles
22
+ - 🔽 Optional keyboard-navigable suggestions dropdown
23
+
24
+ ## Suggestions Dropdown
25
+
26
+ `<Search>` renders a keyboard-navigable suggestions dropdown when you pass the `suggestions` prop:
27
+
28
+ ```vue
29
+ <Search v-model="query" :suggestions="mySuggestions" @select="handlePick" @search="handleSearch" />
30
+ ```
31
+
32
+ The dropdown supports ArrowDown/ArrowUp navigation, Enter to select, Escape to dismiss. The source of `mySuggestions` is up to you.
33
+
34
+ **For Philadelphia address autocomplete**, pair with `useAisAddressSuggestions` from `@phila/phila-ui-map-core`:
35
+
36
+ ```ts
37
+ import { useAisAddressSuggestions } from "@phila/phila-ui-map-core";
38
+ const query = ref("");
39
+ const { searchSuggestions, dismissSuggestions } = useAisAddressSuggestions(query);
40
+ ```
41
+
42
+ Then bind `searchSuggestions` to `<Search :suggestions>` and call `dismissSuggestions()` from your `@select` handler before triggering your search.
43
+
44
+ If you don't need `<Search>`'s built-in rendering, `SearchSuggestions` is also exported for custom layouts.
17
45
 
18
46
  ## Installation
19
47
 
@@ -1,13 +1,234 @@
1
1
  import { SearchProps } from './index';
2
- declare const _default: import('vue').DefineComponent<SearchProps, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {} & {
3
- "update:modelValue": (value: string) => any;
2
+ declare function focus(): void;
3
+ declare const _default: import('vue').DefineComponent<SearchProps, {
4
+ focus: typeof focus;
5
+ }, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {} & {
6
+ select: (suggestion: string) => any;
7
+ dismiss: () => any;
4
8
  search: () => any;
9
+ "update:modelValue": (value: string) => any;
5
10
  }, string, import('vue').PublicProps, Readonly<SearchProps> & Readonly<{
6
- "onUpdate:modelValue"?: ((value: string) => any) | undefined;
11
+ onSelect?: ((suggestion: string) => any) | undefined;
12
+ onDismiss?: (() => any) | undefined;
7
13
  onSearch?: (() => any) | undefined;
14
+ "onUpdate:modelValue"?: ((value: string) => any) | undefined;
8
15
  }>, {
16
+ suggestions: string[];
9
17
  modelValue: string;
10
18
  placeholder: string;
11
- }, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, any>;
19
+ elevated: boolean;
20
+ }, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {
21
+ textFieldRef: ({
22
+ $: import('vue').ComponentInternalInstance;
23
+ $data: {};
24
+ $props: Partial<{
25
+ modelValue: string;
26
+ className: string;
27
+ label: string;
28
+ id: string;
29
+ imaskProps: Record<string, unknown>;
30
+ supportingText: string;
31
+ placeholder: string;
32
+ leadingIcon: import('@phila/phila-ui-core').IconComponent;
33
+ trailingIcon: import('@phila/phila-ui-core').IconComponent;
34
+ error: string | string[];
35
+ }> & Omit<{
36
+ readonly label: string;
37
+ readonly placeholder: string;
38
+ readonly className: string;
39
+ readonly id: string;
40
+ readonly supportingText: string;
41
+ readonly error: string | string[];
42
+ readonly modelValue?: string | undefined;
43
+ readonly imaskProps?: Record<string, unknown> | undefined;
44
+ readonly leadingIcon?: import('@phila/phila-ui-core').IconComponent | undefined;
45
+ readonly trailingIcon?: import('@phila/phila-ui-core').IconComponent | undefined;
46
+ readonly "onUpdate:modelValue"?: ((value: string) => any) | undefined | undefined;
47
+ readonly onComplete?: ((value: string) => any) | undefined | undefined;
48
+ } & import('vue').VNodeProps & import('vue').AllowedComponentProps & import('vue').ComponentCustomProps, "label" | "modelValue" | "placeholder" | "className" | "id" | "imaskProps" | "supportingText" | "leadingIcon" | "trailingIcon" | "error">;
49
+ $attrs: {
50
+ [x: string]: unknown;
51
+ };
52
+ $refs: {
53
+ [x: string]: unknown;
54
+ };
55
+ $slots: Readonly<{
56
+ [name: string]: import('vue').Slot<any> | undefined;
57
+ }>;
58
+ $root: import('vue').ComponentPublicInstance | null;
59
+ $parent: import('vue').ComponentPublicInstance | null;
60
+ $host: Element | null;
61
+ $emit: ((event: "update:modelValue", value: string) => void) & ((event: "complete", value: string) => void);
62
+ $el: any;
63
+ $options: import('vue').ComponentOptionsBase<Readonly<import('vue').ExtractPropTypes<{
64
+ label: {
65
+ type: import('vue').PropType<string>;
66
+ default: string;
67
+ };
68
+ modelValue: {
69
+ type: import('vue').PropType<string>;
70
+ default: undefined;
71
+ };
72
+ placeholder: {
73
+ type: import('vue').PropType<string>;
74
+ default: string;
75
+ };
76
+ className: {
77
+ type: import('vue').PropType<string>;
78
+ default: string;
79
+ };
80
+ id: {
81
+ type: import('vue').PropType<string>;
82
+ default: string;
83
+ };
84
+ imaskProps: {
85
+ type: import('vue').PropType<Record<string, unknown>>;
86
+ default: undefined;
87
+ };
88
+ supportingText: {
89
+ type: import('vue').PropType<string>;
90
+ default: string;
91
+ };
92
+ leadingIcon: {
93
+ type: import('vue').PropType<import('@phila/phila-ui-core').IconComponent>;
94
+ default: undefined;
95
+ };
96
+ trailingIcon: {
97
+ type: import('vue').PropType<import('@phila/phila-ui-core').IconComponent>;
98
+ default: undefined;
99
+ };
100
+ error: {
101
+ type: import('vue').PropType<string | string[]>;
102
+ default: () => never[];
103
+ };
104
+ }>> & Readonly<{
105
+ "onUpdate:modelValue"?: ((value: string) => any) | undefined;
106
+ onComplete?: ((value: string) => any) | undefined;
107
+ }>, {
108
+ inputRef: import('vue').Ref<HTMLInputElement | null, HTMLInputElement | null>;
109
+ }, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
110
+ "update:modelValue": (value: string) => void;
111
+ complete: (value: string) => void;
112
+ }, string, {
113
+ modelValue: string;
114
+ className: string;
115
+ label: string;
116
+ id: string;
117
+ imaskProps: Record<string, unknown>;
118
+ supportingText: string;
119
+ placeholder: string;
120
+ leadingIcon: import('@phila/phila-ui-core').IconComponent;
121
+ trailingIcon: import('@phila/phila-ui-core').IconComponent;
122
+ error: string | string[];
123
+ }, {}, string, {}, import('vue').GlobalComponents, import('vue').GlobalDirectives, string, import('vue').ComponentProvideOptions> & {
124
+ beforeCreate?: (() => void) | (() => void)[];
125
+ created?: (() => void) | (() => void)[];
126
+ beforeMount?: (() => void) | (() => void)[];
127
+ mounted?: (() => void) | (() => void)[];
128
+ beforeUpdate?: (() => void) | (() => void)[];
129
+ updated?: (() => void) | (() => void)[];
130
+ activated?: (() => void) | (() => void)[];
131
+ deactivated?: (() => void) | (() => void)[];
132
+ beforeDestroy?: (() => void) | (() => void)[];
133
+ beforeUnmount?: (() => void) | (() => void)[];
134
+ destroyed?: (() => void) | (() => void)[];
135
+ unmounted?: (() => void) | (() => void)[];
136
+ renderTracked?: ((e: import('vue').DebuggerEvent) => void) | ((e: import('vue').DebuggerEvent) => void)[];
137
+ renderTriggered?: ((e: import('vue').DebuggerEvent) => void) | ((e: import('vue').DebuggerEvent) => void)[];
138
+ errorCaptured?: ((err: unknown, instance: import('vue').ComponentPublicInstance | null, info: string) => boolean | void) | ((err: unknown, instance: import('vue').ComponentPublicInstance | null, info: string) => boolean | void)[];
139
+ };
140
+ $forceUpdate: () => void;
141
+ $nextTick: typeof import('vue').nextTick;
142
+ $watch<T extends string | ((...args: any) => any)>(source: T, cb: T extends (...args: any) => infer R ? (...args: [R, R, import('@vue/reactivity').OnCleanup]) => any : (...args: [any, any, import('@vue/reactivity').OnCleanup]) => any, options?: import('vue').WatchOptions): import('vue').WatchStopHandle;
143
+ } & Readonly<{
144
+ modelValue: string;
145
+ className: string;
146
+ label: string;
147
+ id: string;
148
+ imaskProps: Record<string, unknown>;
149
+ supportingText: string;
150
+ placeholder: string;
151
+ leadingIcon: import('@phila/phila-ui-core').IconComponent;
152
+ trailingIcon: import('@phila/phila-ui-core').IconComponent;
153
+ error: string | string[];
154
+ }> & Omit<Readonly<import('vue').ExtractPropTypes<{
155
+ label: {
156
+ type: import('vue').PropType<string>;
157
+ default: string;
158
+ };
159
+ modelValue: {
160
+ type: import('vue').PropType<string>;
161
+ default: undefined;
162
+ };
163
+ placeholder: {
164
+ type: import('vue').PropType<string>;
165
+ default: string;
166
+ };
167
+ className: {
168
+ type: import('vue').PropType<string>;
169
+ default: string;
170
+ };
171
+ id: {
172
+ type: import('vue').PropType<string>;
173
+ default: string;
174
+ };
175
+ imaskProps: {
176
+ type: import('vue').PropType<Record<string, unknown>>;
177
+ default: undefined;
178
+ };
179
+ supportingText: {
180
+ type: import('vue').PropType<string>;
181
+ default: string;
182
+ };
183
+ leadingIcon: {
184
+ type: import('vue').PropType<import('@phila/phila-ui-core').IconComponent>;
185
+ default: undefined;
186
+ };
187
+ trailingIcon: {
188
+ type: import('vue').PropType<import('@phila/phila-ui-core').IconComponent>;
189
+ default: undefined;
190
+ };
191
+ error: {
192
+ type: import('vue').PropType<string | string[]>;
193
+ default: () => never[];
194
+ };
195
+ }>> & Readonly<{
196
+ "onUpdate:modelValue"?: ((value: string) => any) | undefined;
197
+ onComplete?: ((value: string) => any) | undefined;
198
+ }>, "label" | "modelValue" | "placeholder" | "className" | "id" | "imaskProps" | "supportingText" | "leadingIcon" | "trailingIcon" | "error" | "inputRef"> & import('vue').ShallowUnwrapRef<{
199
+ inputRef: import('vue').Ref<HTMLInputElement | null, HTMLInputElement | null>;
200
+ }> & {} & import('vue').ComponentCustomProperties & {} & {
201
+ $slots: {
202
+ "trailing-action"?(_: {}): any;
203
+ };
204
+ }) | null;
205
+ suggestionsRef: import('vue').CreateComponentPublicInstanceWithMixins<Readonly<{
206
+ suggestions: string[];
207
+ }> & Readonly<{
208
+ onSelect?: ((suggestion: string) => any) | undefined;
209
+ onDismiss?: (() => any) | undefined;
210
+ }>, {
211
+ focusFirst: () => void;
212
+ }, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
213
+ select: (suggestion: string) => any;
214
+ dismiss: () => any;
215
+ }, import('vue').PublicProps, {}, false, {}, {}, import('vue').GlobalComponents, import('vue').GlobalDirectives, string, {
216
+ listRef: HTMLUListElement;
217
+ }, any, import('vue').ComponentProvideOptions, {
218
+ P: {};
219
+ B: {};
220
+ D: {};
221
+ C: {};
222
+ M: {};
223
+ Defaults: {};
224
+ }, Readonly<{
225
+ suggestions: string[];
226
+ }> & Readonly<{
227
+ onSelect?: ((suggestion: string) => any) | undefined;
228
+ onDismiss?: (() => any) | undefined;
229
+ }>, {
230
+ focusFirst: () => void;
231
+ }, {}, {}, {}, {}> | null;
232
+ }, any>;
12
233
  export default _default;
13
234
  //# sourceMappingURL=Search.vue.d.ts.map
@@ -1 +1 @@
1
- {"version":3,"file":"Search.vue.d.ts","sourceRoot":"","sources":["../src/Search.vue"],"names":[],"mappings":"AAyFA,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,SAAS,CAAC;;;;;;;;;;;AAwJ3C,wBAQG"}
1
+ {"version":3,"file":"Search.vue.d.ts","sourceRoot":"","sources":["../src/Search.vue"],"names":[],"mappings":"AAqIA,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,SAAS,CAAC;AAyC3C,iBAAS,KAAK,SAEb;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;oCA4Mkja,GAAG,8CAA8C,GAAG,yBAAyB,GAAG,6DAAmC,GAAG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAxBzqa,wBAUG"}
@@ -0,0 +1,17 @@
1
+ type __VLS_Props = {
2
+ suggestions: string[];
3
+ };
4
+ declare function focusFirst(): void;
5
+ declare const _default: import('vue').DefineComponent<__VLS_Props, {
6
+ focusFirst: typeof focusFirst;
7
+ }, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
8
+ select: (suggestion: string) => any;
9
+ dismiss: () => any;
10
+ }, string, import('vue').PublicProps, Readonly<__VLS_Props> & Readonly<{
11
+ onSelect?: ((suggestion: string) => any) | undefined;
12
+ onDismiss?: (() => any) | undefined;
13
+ }>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {
14
+ listRef: HTMLUListElement;
15
+ }, any>;
16
+ export default _default;
17
+ //# sourceMappingURL=SearchSuggestions.vue.d.ts.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"SearchSuggestions.vue.d.ts","sourceRoot":"","sources":["../src/SearchSuggestions.vue"],"names":[],"mappings":"AAuIA,KAAK,WAAW,GAAG;IACjB,WAAW,EAAE,MAAM,EAAE,CAAC;CACvB,CAAC;AAwBF,iBAAS,UAAU,SAKlB;;;;;;;;;;;;AAkHD,wBASG"}
package/dist/index.css CHANGED
@@ -1 +1 @@
1
- .phila-text-field .phila-button{color:var(--Schemes-On-Surface)!important}.phila-input--required .phila-label:after{content:"*";padding-left:.125rem}.phila-input{display:flex;flex-direction:column}.phila-input:focus-within .phila-label{color:var(--Schemes-Primary)}.phila-input .phila-label{color:var(--Schemes-On-Surface)}.phila-input .phila-label--disabled{color:var(--Schemes-Surface-Container-High)}.phila-input .phila-text-field{box-sizing:border-box;border:2px solid transparent;box-shadow:inset 0 0 0 1px var(--Schemes-Border-low);border-radius:var(--border-radius-s);background-color:var(--Schemes-Background);background-clip:padding-box;display:flex;width:25rem;padding:0 var(--spacing-2xs) 0 var(--spacing-xs);flex-direction:column;align-items:center;gap:.625rem;flex:1 0 0;cursor:text}.phila-input .phila-text-field:focus-within{box-shadow:none;border:2px solid var(--Schemes-Primary)}.phila-input .phila-text-field:hover:not(:focus-within){background-color:var(--Schemes-Background)}.phila-input .phila-text-field button{cursor:pointer}.phila-input .phila-text-field button:focus{z-index:1}.phila-input .phila-text-field--filled{background-color:var(--Schemes-Background);border:2px solid transparent;box-shadow:inset 0 0 0 1px var(--Schemes-On-Surface)}.phila-input .phila-text-field--filled:focus-within{box-shadow:none;border:2px solid var(--Schemes-Primary)}.phila-input .state-layer{display:flex;padding:var(--spacing-2xs, .25rem) var(--spacing-xs, .5rem);align-items:center;gap:.5rem;flex:1 0 0;align-self:stretch}.phila-input .content{display:flex;height:var(--scale-600);padding:var(--spacing-2xs, .25rem) 0;flex-direction:column;justify-content:center;align-items:flex-start;flex:1 0 0}.phila-input .input-text-container{display:flex;align-items:center;gap:.125rem;align-self:stretch;width:100%}.phila-input .phila-text-field-input{width:100%;background-color:inherit;border:none;color:var(--Schemes-On-Surface, #000)}.phila-input .phila-text-field-input:focus{outline:none}.phila-input .phila-text-field-input:focus-visible{outline:none}.phila-input .phila-text-field-input::placeholder{color:var(--Schemes-Surface-Container-Highest);font-family:var(--Body-Large-font-body-large-family);font-size:var(--Body-Large-font-body-large-size);font-style:normal;font-weight:400;line-height:var(--Body-Large-font-body-large-lineheight)}.phila-input .phila-supporting-text--disabled{color:var(--Schemes-Surface-Container-High)}.phila-input .phila-supporting-text{color:var(--Schemes-On-Surface)}.phila-input .phila-error-text{color:var(--Schemes-Error);display:flex;align-items:center}.phila-input--error:focus-within .phila-label{color:var(--Schemes-Error)}.phila-input--error .phila-label{color:var(--Schemes-Error)}.phila-input--error .phila-text-field{background-color:var(--Schemes-Background);border-color:var(--Schemes-Error);border-width:2px;border-style:solid;box-shadow:none}.phila-input--error .phila-text-field:focus-within{background-color:var(--Schemes-Background);border-color:var(--Schemes-Error);border-width:2px;border-style:solid}.phila-input--disabled{cursor:not-allowed}.phila-input--disabled .phila-label{cursor:not-allowed;color:var(--Schemes-Surface-Container-High)}.phila-input--disabled .phila-text-field{cursor:not-allowed;color:var(--Schemes-Surface-Container-High);border-color:var(--Schemes-Surface-Container-High);border-width:1px;border-style:solid;background-color:var(--Schemes-Surface-Container-Lowest)}.phila-input--disabled .phila-supporting-text{color:var(--Schemes-Surface-Container-High)}.search{display:flex;width:48.8125rem;align-items:center}.search .phila-input,.phila-input .phila-text-field.phila-text-field--search{width:100%}.phila-button--search.phila-button{border-radius:0}
1
+ .phila-text-field .phila-button{color:var(--Schemes-On-Surface)!important}.phila-input--required .phila-label:after{content:"*";padding-left:.125rem}.phila-input{display:flex;flex-direction:column}.phila-input:focus-within .phila-label{color:var(--Schemes-Primary)}.phila-input .phila-label{color:var(--Schemes-On-Surface)}.phila-input .phila-label--disabled{color:var(--Schemes-Surface-Container-High)}.phila-input .phila-text-field{box-sizing:border-box;border:2px solid transparent;box-shadow:inset 0 0 0 1px var(--Schemes-Border-low);border-radius:var(--border-radius-s);background-color:var(--Schemes-Background);background-clip:padding-box;display:flex;width:25rem;padding:0 var(--spacing-2xs) 0 var(--spacing-xs);flex-direction:column;align-items:center;gap:.625rem;flex:1 0 0;cursor:text}.phila-input .phila-text-field:focus-within{box-shadow:none;border:2px solid var(--Schemes-Primary)}.phila-input .phila-text-field:hover:not(:focus-within){background-color:var(--Schemes-Background)}.phila-input .phila-text-field button{cursor:pointer}.phila-input .phila-text-field button:focus{z-index:1}.phila-input .phila-text-field--filled{background-color:var(--Schemes-Background);border:2px solid transparent;box-shadow:inset 0 0 0 1px var(--Schemes-On-Surface)}.phila-input .phila-text-field--filled:focus-within{box-shadow:none;border:2px solid var(--Schemes-Primary)}.phila-input .state-layer{display:flex;padding:var(--spacing-2xs, .25rem) var(--spacing-xs, .5rem);align-items:center;gap:.5rem;flex:1 0 0;align-self:stretch}.phila-input .content{display:flex;height:var(--scale-600);padding:var(--spacing-2xs, .25rem) 0;flex-direction:column;justify-content:center;align-items:flex-start;flex:1 0 0}.phila-input .input-text-container{display:flex;align-items:center;gap:.125rem;align-self:stretch;width:100%}.phila-input .phila-text-field-input{width:100%;background-color:inherit;border:none;color:var(--Schemes-On-Surface, #000)}.phila-input .phila-text-field-input:focus{outline:none}.phila-input .phila-text-field-input:focus-visible{outline:none}.phila-input .phila-text-field-input::placeholder{color:var(--Schemes-Surface-Container-Highest);font-family:var(--Body-Large-font-body-large-family);font-size:var(--Body-Large-font-body-large-size);font-style:normal;font-weight:400;line-height:var(--Body-Large-font-body-large-lineheight)}.phila-input .phila-supporting-text--disabled{color:var(--Schemes-Surface-Container-High)}.phila-input .phila-supporting-text{color:var(--Schemes-On-Surface)}.phila-input .phila-error-text{color:var(--Schemes-Error);display:flex;align-items:center}.phila-input--error:focus-within .phila-label{color:var(--Schemes-Error)}.phila-input--error .phila-label{color:var(--Schemes-Error)}.phila-input--error .phila-text-field{background-color:var(--Schemes-Background);border-color:var(--Schemes-Error);border-width:2px;border-style:solid;box-shadow:none}.phila-input--error .phila-text-field:focus-within{background-color:var(--Schemes-Background);border-color:var(--Schemes-Error);border-width:2px;border-style:solid}.phila-input--disabled{cursor:not-allowed}.phila-input--disabled .phila-label{cursor:not-allowed;color:var(--Schemes-Surface-Container-High)}.phila-input--disabled .phila-text-field{cursor:not-allowed;color:var(--Schemes-Surface-Container-High);border-color:var(--Schemes-Surface-Container-High);border-width:1px;border-style:solid;background-color:var(--Schemes-Surface-Container-Lowest)}.phila-input--disabled .phila-supporting-text{color:var(--Schemes-Surface-Container-High)}.search-suggestions-anchor[data-v-79ffafa6]{position:relative;width:100%;height:0}.search-suggestions[data-v-79ffafa6]{list-style:none;margin:0;padding:0;position:absolute;top:0;left:0;right:0;background-color:var(--Schemes-Background, #fff);border:1px solid var(--Schemes-Border-low, #ccc);border-top:none;border-radius:0 0 var(--border-radius-s, 4px) var(--border-radius-s, 4px);box-shadow:0 4px 8px #0000001a;max-height:15rem;overflow-y:auto;z-index:10}.search-suggestion[data-v-79ffafa6]{padding:var(--spacing-2xs, .25rem) var(--spacing-xs, .5rem);cursor:pointer;color:var(--Schemes-On-Surface, #000);font-family:var(--Body-Default-font-body-default-family);font-size:var(--Body-Default-font-body-default-size);line-height:var(--Body-Default-font-body-default-lineheight);outline:none}.search-suggestion[data-v-79ffafa6]:hover,.search-suggestion[data-v-79ffafa6]:focus,.search-suggestion--active[data-v-79ffafa6]{background-color:var(--Schemes-Surface-Container-Low, #f5f5f5)}.search{display:flex;flex-direction:column;width:100%}.search .phila-input,.phila-input .phila-text-field.phila-text-field--search{width:100%}.phila-button--search.phila-button{border-radius:0}.search.is-elevated .phila-text-field--search{box-shadow:var(--elevation-light-2)}
package/dist/index.d.ts CHANGED
@@ -1,9 +1,14 @@
1
1
  import { BaseProps } from '@phila/phila-ui-core';
2
2
  export { default as Search } from './Search.vue';
3
+ export { default as SearchSuggestions } from './SearchSuggestions.vue';
3
4
  export interface SearchProps extends BaseProps {
4
5
  /** The v-model value for the search input */
5
6
  modelValue?: string;
6
7
  /** Placeholder text for the search input */
7
8
  placeholder?: string;
9
+ /** Suggestions to display in the dropdown beneath the input */
10
+ suggestions?: string[];
11
+ /** When true, applies an elevation shadow to the search input (for floating over a map). */
12
+ elevated?: boolean;
8
13
  }
9
14
  //# sourceMappingURL=index.d.ts.map
@@ -1 +1 @@
1
- {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,sBAAsB,CAAC;AACtD,OAAO,EAAE,OAAO,IAAI,MAAM,EAAE,MAAM,cAAc,CAAC;AAEjD,MAAM,WAAW,WAAY,SAAQ,SAAS;IAC5C,6CAA6C;IAC7C,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,4CAA4C;IAC5C,WAAW,CAAC,EAAE,MAAM,CAAC;CACtB"}
1
+ {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,sBAAsB,CAAC;AACtD,OAAO,EAAE,OAAO,IAAI,MAAM,EAAE,MAAM,cAAc,CAAC;AACjD,OAAO,EAAE,OAAO,IAAI,iBAAiB,EAAE,MAAM,yBAAyB,CAAC;AAEvE,MAAM,WAAW,WAAY,SAAQ,SAAS;IAC5C,6CAA6C;IAC7C,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,4CAA4C;IAC5C,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,+DAA+D;IAC/D,WAAW,CAAC,EAAE,MAAM,EAAE,CAAC;IACvB,4FAA4F;IAC5F,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB"}