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

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,233 @@
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
+ }, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {
20
+ textFieldRef: ({
21
+ $: import('vue').ComponentInternalInstance;
22
+ $data: {};
23
+ $props: Partial<{
24
+ modelValue: string;
25
+ className: string;
26
+ label: string;
27
+ id: string;
28
+ imaskProps: Record<string, unknown>;
29
+ supportingText: string;
30
+ placeholder: string;
31
+ leadingIcon: string;
32
+ trailingIcon: string;
33
+ error: string | string[];
34
+ }> & Omit<{
35
+ readonly label: string;
36
+ readonly placeholder: string;
37
+ readonly className: string;
38
+ readonly id: string;
39
+ readonly supportingText: string;
40
+ readonly leadingIcon: string;
41
+ readonly trailingIcon: string;
42
+ readonly error: string | string[];
43
+ readonly modelValue?: string | undefined;
44
+ readonly imaskProps?: Record<string, unknown> | undefined;
45
+ readonly "onUpdate:modelValue"?: ((value: string) => any) | undefined | undefined;
46
+ readonly onComplete?: ((value: string) => any) | undefined | undefined;
47
+ } & import('vue').VNodeProps & import('vue').AllowedComponentProps & import('vue').ComponentCustomProps, "label" | "modelValue" | "placeholder" | "className" | "id" | "imaskProps" | "supportingText" | "leadingIcon" | "trailingIcon" | "error">;
48
+ $attrs: {
49
+ [x: string]: unknown;
50
+ };
51
+ $refs: {
52
+ [x: string]: unknown;
53
+ };
54
+ $slots: Readonly<{
55
+ [name: string]: import('vue').Slot<any> | undefined;
56
+ }>;
57
+ $root: import('vue').ComponentPublicInstance | null;
58
+ $parent: import('vue').ComponentPublicInstance | null;
59
+ $host: Element | null;
60
+ $emit: ((event: "update:modelValue", value: string) => void) & ((event: "complete", value: string) => void);
61
+ $el: any;
62
+ $options: import('vue').ComponentOptionsBase<Readonly<import('vue').ExtractPropTypes<{
63
+ label: {
64
+ type: import('vue').PropType<string>;
65
+ default: string;
66
+ };
67
+ modelValue: {
68
+ type: import('vue').PropType<string>;
69
+ default: undefined;
70
+ };
71
+ placeholder: {
72
+ type: import('vue').PropType<string>;
73
+ default: string;
74
+ };
75
+ className: {
76
+ type: import('vue').PropType<string>;
77
+ default: string;
78
+ };
79
+ id: {
80
+ type: import('vue').PropType<string>;
81
+ default: string;
82
+ };
83
+ imaskProps: {
84
+ type: import('vue').PropType<Record<string, unknown>>;
85
+ default: undefined;
86
+ };
87
+ supportingText: {
88
+ type: import('vue').PropType<string>;
89
+ default: string;
90
+ };
91
+ leadingIcon: {
92
+ type: import('vue').PropType<string>;
93
+ default: string;
94
+ };
95
+ trailingIcon: {
96
+ type: import('vue').PropType<string>;
97
+ default: string;
98
+ };
99
+ error: {
100
+ type: import('vue').PropType<string | string[]>;
101
+ default: () => never[];
102
+ };
103
+ }>> & Readonly<{
104
+ "onUpdate:modelValue"?: ((value: string) => any) | undefined;
105
+ onComplete?: ((value: string) => any) | undefined;
106
+ }>, {
107
+ inputRef: import('vue').Ref<HTMLInputElement | null, HTMLInputElement | null>;
108
+ }, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
109
+ "update:modelValue": (value: string) => void;
110
+ complete: (value: string) => void;
111
+ }, string, {
112
+ modelValue: string;
113
+ className: string;
114
+ label: string;
115
+ id: string;
116
+ imaskProps: Record<string, unknown>;
117
+ supportingText: string;
118
+ placeholder: string;
119
+ leadingIcon: string;
120
+ trailingIcon: string;
121
+ error: string | string[];
122
+ }, {}, string, {}, import('vue').GlobalComponents, import('vue').GlobalDirectives, string, import('vue').ComponentProvideOptions> & {
123
+ beforeCreate?: (() => void) | (() => void)[];
124
+ created?: (() => void) | (() => void)[];
125
+ beforeMount?: (() => void) | (() => void)[];
126
+ mounted?: (() => void) | (() => void)[];
127
+ beforeUpdate?: (() => void) | (() => void)[];
128
+ updated?: (() => void) | (() => void)[];
129
+ activated?: (() => void) | (() => void)[];
130
+ deactivated?: (() => void) | (() => void)[];
131
+ beforeDestroy?: (() => void) | (() => void)[];
132
+ beforeUnmount?: (() => void) | (() => void)[];
133
+ destroyed?: (() => void) | (() => void)[];
134
+ unmounted?: (() => void) | (() => void)[];
135
+ renderTracked?: ((e: import('vue').DebuggerEvent) => void) | ((e: import('vue').DebuggerEvent) => void)[];
136
+ renderTriggered?: ((e: import('vue').DebuggerEvent) => void) | ((e: import('vue').DebuggerEvent) => void)[];
137
+ errorCaptured?: ((err: unknown, instance: import('vue').ComponentPublicInstance | null, info: string) => boolean | void) | ((err: unknown, instance: import('vue').ComponentPublicInstance | null, info: string) => boolean | void)[];
138
+ };
139
+ $forceUpdate: () => void;
140
+ $nextTick: typeof import('vue').nextTick;
141
+ $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;
142
+ } & Readonly<{
143
+ modelValue: string;
144
+ className: string;
145
+ label: string;
146
+ id: string;
147
+ imaskProps: Record<string, unknown>;
148
+ supportingText: string;
149
+ placeholder: string;
150
+ leadingIcon: string;
151
+ trailingIcon: string;
152
+ error: string | string[];
153
+ }> & Omit<Readonly<import('vue').ExtractPropTypes<{
154
+ label: {
155
+ type: import('vue').PropType<string>;
156
+ default: string;
157
+ };
158
+ modelValue: {
159
+ type: import('vue').PropType<string>;
160
+ default: undefined;
161
+ };
162
+ placeholder: {
163
+ type: import('vue').PropType<string>;
164
+ default: string;
165
+ };
166
+ className: {
167
+ type: import('vue').PropType<string>;
168
+ default: string;
169
+ };
170
+ id: {
171
+ type: import('vue').PropType<string>;
172
+ default: string;
173
+ };
174
+ imaskProps: {
175
+ type: import('vue').PropType<Record<string, unknown>>;
176
+ default: undefined;
177
+ };
178
+ supportingText: {
179
+ type: import('vue').PropType<string>;
180
+ default: string;
181
+ };
182
+ leadingIcon: {
183
+ type: import('vue').PropType<string>;
184
+ default: string;
185
+ };
186
+ trailingIcon: {
187
+ type: import('vue').PropType<string>;
188
+ default: string;
189
+ };
190
+ error: {
191
+ type: import('vue').PropType<string | string[]>;
192
+ default: () => never[];
193
+ };
194
+ }>> & Readonly<{
195
+ "onUpdate:modelValue"?: ((value: string) => any) | undefined;
196
+ onComplete?: ((value: string) => any) | undefined;
197
+ }>, "label" | "modelValue" | "placeholder" | "className" | "id" | "imaskProps" | "supportingText" | "leadingIcon" | "trailingIcon" | "error" | "inputRef"> & import('vue').ShallowUnwrapRef<{
198
+ inputRef: import('vue').Ref<HTMLInputElement | null, HTMLInputElement | null>;
199
+ }> & {} & import('vue').ComponentCustomProperties & {} & {
200
+ $slots: {
201
+ "trailing-action"?(_: {}): any;
202
+ };
203
+ }) | null;
204
+ suggestionsRef: import('vue').CreateComponentPublicInstanceWithMixins<Readonly<{
205
+ suggestions: string[];
206
+ }> & Readonly<{
207
+ onSelect?: ((suggestion: string) => any) | undefined;
208
+ onDismiss?: (() => any) | undefined;
209
+ }>, {
210
+ focusFirst: () => void;
211
+ }, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
212
+ select: (suggestion: string) => any;
213
+ dismiss: () => any;
214
+ }, import('vue').PublicProps, {}, false, {}, {}, import('vue').GlobalComponents, import('vue').GlobalDirectives, string, {
215
+ listRef: HTMLUListElement;
216
+ }, any, import('vue').ComponentProvideOptions, {
217
+ P: {};
218
+ B: {};
219
+ D: {};
220
+ C: {};
221
+ M: {};
222
+ Defaults: {};
223
+ }, Readonly<{
224
+ suggestions: string[];
225
+ }> & Readonly<{
226
+ onSelect?: ((suggestion: string) => any) | undefined;
227
+ onDismiss?: (() => any) | undefined;
228
+ }>, {
229
+ focusFirst: () => void;
230
+ }, {}, {}, {}, {}> | null;
231
+ }, any>;
12
232
  export default _default;
13
233
  //# 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":"AA2HA,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,SAAS,CAAC;AAwC3C,iBAAS,KAAK,SAEb;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;oCA2Mgrb,GAAG,8CAA8C,GAAG,yBAAyB,GAAG,6DAAmC,GAAG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAxBvyb,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-0d4f5bed]{position:relative;width:100%;height:0}.search-suggestions[data-v-0d4f5bed]{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-0d4f5bed]{padding:var(--spacing-2xs, .25rem) var(--spacing-xs, .5rem);cursor:pointer;color:var(--Schemes-On-Surface, #000);font-family:var(--Body-Large-font-body-large-family);font-size:var(--Body-Large-font-body-large-size);line-height:var(--Body-Large-font-body-large-lineheight);outline:none}.search-suggestion[data-v-0d4f5bed]:hover,.search-suggestion[data-v-0d4f5bed]:focus,.search-suggestion--active[data-v-0d4f5bed]{background-color:var(--Schemes-Surface-Container-Low, #f5f5f5)}.search{display:flex;flex-direction:column;width:48.8125rem}.search .phila-input,.phila-input .phila-text-field.phila-text-field--search{width:100%}.phila-button--search.phila-button{border-radius:0}
package/dist/index.d.ts CHANGED
@@ -1,9 +1,12 @@
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[];
8
11
  }
9
12
  //# 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;CACxB"}