svelte-toolkit/validate
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

complete: support custom components for dropdown items

Browse Source
This commit is contained in:
Elijah Duffy
2025-07-07 19:32:25 -07:00
parent 45efef4380
commit 72a3c963cd
1 changed files with 10 additions and 6 deletions
Download Patch File Download Diff File Expand all files Collapse all files

16
complete.ts
View File

@@ -5,6 +5,10 @@ import { validateInput } from './index';
export type CompletionPayload = { place: google.maps.places.PlaceResult }; export type CompletionPayload = { place: google.maps.places.PlaceResult };
/** CompleteEvent is a custom event that is dispatched when an input is validated. */ /** CompleteEvent is a custom event that is dispatched when an input is validated. */
export class CompleteEvent extends CustomEvent<CompletionPayload> {} export class CompleteEvent extends CustomEvent<CompletionPayload> {}
/** ComplexInputElement is used to represent any input besides the basic text input. */
export interface ComplexInputElement {
setter(value: string): void;
}
const googleOptions: google.maps.places.AutocompleteOptions = { const googleOptions: google.maps.places.AutocompleteOptions = {
// componentRestrictions: { country: ['ca'] }, // componentRestrictions: { country: ['ca'] },
@@ -21,9 +25,9 @@ export class AddressComplete {
private _primary?: HTMLInputElement; private _primary?: HTMLInputElement;
private _line2?: HTMLInputElement; private _line2?: HTMLInputElement;
private _city?: HTMLInputElement; private _city?: HTMLInputElement;
private _province?: HTMLInputElement; private _province?: ComplexInputElement;
private _postalCode?: HTMLInputElement; private _postalCode?: HTMLInputElement;
private _country?: HTMLInputElement; private _country?: ComplexInputElement;
/** registers line 1 address field and attaches an autocompleter */ /** registers line 1 address field and attaches an autocompleter */
primary: Action<HTMLInputElement, undefined, { oncomplete: (e: CompleteEvent) => void }> = ( primary: Action<HTMLInputElement, undefined, { oncomplete: (e: CompleteEvent) => void }> = (
@@ -42,7 +46,7 @@ export class AddressComplete {
this._city = node; this._city = node;
}; };
/** registers province field */ /** registers province field */
province: Action<HTMLInputElement> = (node) => { province: Action<ComplexInputElement> = (node) => {
this._province = node; this._province = node;
}; };
/** registers postal code field */ /** registers postal code field */
@@ -50,7 +54,7 @@ export class AddressComplete {
this._postalCode = node; this._postalCode = node;
}; };
/** registers country field */ /** registers country field */
country: Action<HTMLInputElement> = (node) => { country: Action<ComplexInputElement> = (node) => {
this._country = node; this._country = node;
}; };
@@ -100,12 +104,12 @@ export class AddressComplete {
} }
case 'administrative_area_level_1': { case 'administrative_area_level_1': {
// this._province?.setValStr(component.short_name); // this._province?.setValStr(component.short_name);
if (this._province) this._province.value = component.short_name; if (this._province) this._province.setter(component.short_name);
break; break;
} }
case 'country': { case 'country': {
// this._country?.setValStr(component.short_name); // this._country?.setValStr(component.short_name);
if (this._country) this._country.value = component.short_name; if (this._country) this._country.setter(component.short_name);
break; break;
} }
} }