@marianmeres/stuic 3.84.0 → 3.85.0

package/dist/components/Checkout/CheckoutAddressForm.svelte

@@ -7,9 +7,17 @@
 		CheckoutValidationError,
 	} from "./_internal/checkout-types.js";
 	import type { Props as FieldPhoneNumberProps } from "../Input/FieldPhoneNumber.svelte";
+	import type { Props as FieldCountryProps } from "../Input/FieldCountry.svelte";
+	import type { Country } from "../Input/_internal/countries.js";
 
 	export interface Props extends Omit<HTMLAttributes<HTMLFieldSetElement>, "children"> {
-		/** Bindable address data. Default: createEmptyAddress() */
+		/**
+		 * Bindable address data. Default: createEmptyAddress().
+		 *
+		 * Note: `address.country` is expected to be an ISO alpha-2 code (e.g. "SK")
+		 * when used with the built-in country selector. Pre-existing free-text values
+		 * won't match a country and will render as unselected.
+		 */
 		address?: CheckoutAddressData;
 
 		/**
@@ -42,12 +50,13 @@
 
 		/**
 		 * Override the country field with a custom selector.
-		 * When provided, replaces the default text input for country.
+		 * When provided, replaces the default searchable country picker.
+		 * `value` is an ISO alpha-2 code.
 		 */
 		countryField?: Snippet<
 			[
 				{
-					/** Current country value */
+					/** Current country value (ISO alpha-2 code) */
 					value: string;
 					/** Called when country changes */
 					onchange: (value: string) => void;
@@ -61,9 +70,29 @@
 			]
 		>;
 
+		/**
+		 * Restrict the country selector to a specific list. Accepts ISO codes
+		 * or already-resolved Country objects. Default: all countries.
+		 */
+		countryList?: Country[] | string[];
+
+		/**
+		 * ISO codes pinned at the top of the country dropdown, above a divider.
+		 */
+		preferredCountries?: string[];
+
+		/**
+		 * Override displayed country names. Keys are ISO alpha-2 codes,
+		 * values are the localized name. Missing keys fall back to English.
+		 */
+		countryNames?: Record<string, string>;
+
 		/** Extra props forwarded to the internal FieldPhoneNumber component. */
 		phoneFieldProps?: Partial<FieldPhoneNumberProps>;
 
+		/** Extra props forwarded to the internal FieldCountry component. */
+		countryFieldProps?: Partial<FieldCountryProps>;
+
 		t?: TranslateFn;
 		unstyled?: boolean;
 		class?: string;
@@ -77,6 +106,7 @@
 	import { createEmptyAddress } from "./_internal/checkout-utils.js";
 	import FieldInput from "../Input/FieldInput.svelte";
 	import FieldPhoneNumber from "../Input/FieldPhoneNumber.svelte";
+	import FieldCountry from "../Input/FieldCountry.svelte";
 	import { validatePhoneNumber } from "../Input/phone-validation.js";
 
 	const DEFAULT_REQUIRED = ["name", "street", "city", "postal_code", "country"];
@@ -88,7 +118,11 @@
 		fields,
 		requiredFields = DEFAULT_REQUIRED,
 		countryField,
+		countryList,
+		preferredCountries,
+		countryNames,
 		phoneFieldProps,
+		countryFieldProps,
 		t: tProp,
 		unstyled = false,
 		class: classProp,
@@ -235,7 +269,7 @@
 			})}
 		{:else}
 			<!-- svelte-ignore binding_property_non_reactive -->
-			<FieldInput
+			<FieldCountry
 				bind:value={address.country}
 				label={t("checkout.address.country_label")}
 				placeholder={t("checkout.address.country_placeholder")}
@@ -243,11 +277,16 @@
 				name="{label}-country"
 				id="{label}-country"
 				labelLeftBreakpoint={0}
+				{countryList}
+				{preferredCountries}
+				{countryNames}
+				t={tProp}
 				validate={{
 					customValidator(val) {
 						return fieldError("country") || "";
 					},
 				}}
+				{...countryFieldProps}
 			/>
 		{/if}
 	{/if}

package/dist/components/Checkout/CheckoutAddressForm.svelte.d.ts

@@ -3,8 +3,16 @@ import type { HTMLAttributes } from "svelte/elements";
 import type { TranslateFn } from "../../types.js";
 import type { CheckoutAddressData, CheckoutValidationError } from "./_internal/checkout-types.js";
 import type { Props as FieldPhoneNumberProps } from "../Input/FieldPhoneNumber.svelte";
+import type { Props as FieldCountryProps } from "../Input/FieldCountry.svelte";
+import type { Country } from "../Input/_internal/countries.js";
 export interface Props extends Omit<HTMLAttributes<HTMLFieldSetElement>, "children"> {
-    /** Bindable address data. Default: createEmptyAddress() */
+    /**
+     * Bindable address data. Default: createEmptyAddress().
+     *
+     * Note: `address.country` is expected to be an ISO alpha-2 code (e.g. "SK")
+     * when used with the built-in country selector. Pre-existing free-text values
+     * won't match a country and will render as unselected.
+     */
     address?: CheckoutAddressData;
     /**
      * Label prefix used for:
@@ -32,11 +40,12 @@ export interface Props extends Omit<HTMLAttributes<HTMLFieldSetElement>, "childr
     requiredFields?: string[];
     /**
      * Override the country field with a custom selector.
-     * When provided, replaces the default text input for country.
+     * When provided, replaces the default searchable country picker.
+     * `value` is an ISO alpha-2 code.
      */
     countryField?: Snippet<[
         {
-            /** Current country value */
+            /** Current country value (ISO alpha-2 code) */
             value: string;
             /** Called when country changes */
             onchange: (value: string) => void;
@@ -48,8 +57,24 @@ export interface Props extends Omit<HTMLAttributes<HTMLFieldSetElement>, "childr
             id: string;
         }
     ]>;
+    /**
+     * Restrict the country selector to a specific list. Accepts ISO codes
+     * or already-resolved Country objects. Default: all countries.
+     */
+    countryList?: Country[] | string[];
+    /**
+     * ISO codes pinned at the top of the country dropdown, above a divider.
+     */
+    preferredCountries?: string[];
+    /**
+     * Override displayed country names. Keys are ISO alpha-2 codes,
+     * values are the localized name. Missing keys fall back to English.
+     */
+    countryNames?: Record<string, string>;
     /** Extra props forwarded to the internal FieldPhoneNumber component. */
     phoneFieldProps?: Partial<FieldPhoneNumberProps>;
+    /** Extra props forwarded to the internal FieldCountry component. */
+    countryFieldProps?: Partial<FieldCountryProps>;
     t?: TranslateFn;
     unstyled?: boolean;
     class?: string;

package/dist/components/Checkout/_internal/checkout-i18n-defaults.js

@@ -70,6 +70,8 @@ const DEFAULTS = {
     "checkout.address.postal_code_placeholder": "",
     "checkout.address.country_label": "Country",
     "checkout.address.country_placeholder": "",
+    "checkout.address.country_search_placeholder": "Search country...",
+    "checkout.address.country_no_results": "No country found",
     "checkout.address.phone_label": "Phone",
     "checkout.address.phone_placeholder": "",
     "checkout.address.required_marker": "*",

package/dist/components/Input/FieldCountry.svelte

@@ -0,0 +1,326 @@
+<script lang="ts" module>
+	import type { Snippet } from "svelte";
+	import type { ValidateOptions } from "../../actions/validate.svelte.js";
+	import type { TranslateFn } from "../../types.js";
+	import type { THC } from "../Thc/Thc.svelte";
+	import type { Country } from "./_internal/countries.js";
+	import type { InputWrapClassProps } from "./types.js";
+
+	type SnippetWithId = Snippet<[{ id: string }]>;
+
+	export interface Props extends InputWrapClassProps, Record<string, any> {
+		/** Selected country ISO alpha-2 code (e.g. "SK"). Bindable. Empty = unselected. */
+		value?: string;
+
+		/** Called whenever the selection changes. */
+		onChange?: (iso: string) => void;
+
+		/**
+		 * Restrict the list to specific countries. Accepts either ISO codes or
+		 * already-resolved Country objects. Default: all COUNTRIES.
+		 */
+		countryList?: Country[] | string[];
+
+		/** ISO codes to pin at the top of the dropdown, above a divider. */
+		preferredCountries?: string[];
+
+		/**
+		 * Override displayed country names. Keys are ISO alpha-2 codes,
+		 * values are the localized name. Missing keys fall back to the English
+		 * name from countries.ts.
+		 */
+		countryNames?: Record<string, string>;
+
+		/** Show country flag emoji in dropdown items. Default: true. */
+		flags?: boolean;
+
+		/** Hidden input name (enables form submission + validation). */
+		name?: string;
+		id?: string;
+		tabindex?: number;
+		placeholder?: string;
+		required?: boolean;
+		disabled?: boolean;
+
+		label?: SnippetWithId | THC;
+		description?: SnippetWithId | THC;
+		class?: string;
+		renderSize?: "sm" | "md" | "lg" | string;
+		validate?: boolean | Omit<ValidateOptions, "setValidationResult">;
+
+		labelAfter?: SnippetWithId | THC;
+		inputBefore?: SnippetWithId | THC;
+		inputAfter?: SnippetWithId | THC;
+		inputBelow?: SnippetWithId | THC;
+		below?: SnippetWithId | THC;
+		labelLeft?: boolean;
+		labelLeftWidth?: "normal" | "wide";
+		labelLeftBreakpoint?: number;
+
+		/** Classes for the underlying trigger <button> element. */
+		classInput?: string;
+		/** Classes for the dropdown popover. */
+		classDropdown?: string;
+		style?: string;
+
+		t?: TranslateFn;
+	}
+</script>
+
+<script lang="ts">
+	import {
+		validate as validateAction,
+		type ValidationResult,
+	} from "../../actions/validate.svelte.js";
+	import { getId } from "../../utils/get-id.js";
+	import { twMerge } from "../../utils/tw-merge.js";
+	import { iconChevronDown } from "../../icons/index.js";
+	import DropdownMenu, {
+		type DropdownMenuActionItem,
+		type DropdownMenuItem,
+		type DropdownMenuSearchConfig,
+	} from "../DropdownMenu/DropdownMenu.svelte";
+	import InputWrap from "./_internal/InputWrap.svelte";
+	import { COUNTRIES, ISO_MAP } from "./_internal/countries.js";
+
+	let {
+		value = $bindable(""),
+		onChange,
+		countryList: countryListProp,
+		preferredCountries,
+		countryNames,
+		flags = true,
+		//
+		name,
+		id = getId(),
+		tabindex = 0,
+		placeholder,
+		required = false,
+		disabled = false,
+		//
+		label,
+		description,
+		class: classProp,
+		renderSize = "md",
+		validate,
+		//
+		labelAfter,
+		inputBefore,
+		inputAfter,
+		inputBelow,
+		below,
+		labelLeft = false,
+		labelLeftWidth = "normal",
+		labelLeftBreakpoint = 480,
+		//
+		classInput,
+		classDropdown,
+		classLabel,
+		classLabelBox,
+		classInputBox,
+		classInputBoxWrap,
+		classInputBoxWrapInvalid,
+		classDescBox,
+		classDescBoxToggle,
+		classBelowBox,
+		classValidationBox,
+		style,
+		//
+		t,
+		...rest
+	}: Props = $props();
+
+	let isOpen = $state(false);
+	let hiddenInputEl: HTMLInputElement | undefined = $state();
+	let validation: ValidationResult | undefined = $state();
+	const setValidationResult = (res: ValidationResult) => (validation = res);
+
+	function localizedName(c: Country): string {
+		return countryNames?.[c.iso] ?? c.name;
+	}
+
+	// Resolve the working country list (accept ISO codes or Country objects).
+	let resolvedCountries: Country[] = $derived.by(() => {
+		if (!countryListProp) return COUNTRIES;
+		if (countryListProp.length === 0) return [];
+		if (typeof countryListProp[0] === "string") {
+			const set = new Set(
+				(countryListProp as string[]).map((c) => c.toUpperCase())
+			);
+			return COUNTRIES.filter((c) => set.has(c.iso));
+		}
+		return countryListProp as Country[];
+	});
+
+	// Sort resolved list alphabetically by displayed name (locale-aware).
+	let sortedCountries: Country[] = $derived(
+		[...resolvedCountries].sort((a, b) =>
+			localizedName(a).localeCompare(localizedName(b))
+		)
+	);
+
+	let selectedCountry: Country | undefined = $derived(
+		value ? ISO_MAP.get(value.toUpperCase()) : undefined
+	);
+
+	function countryToItem(c: Country): DropdownMenuActionItem {
+		const name = localizedName(c);
+		const prefix = flags ? `${c.flag} ` : "";
+		return {
+			type: "action",
+			id: c.iso,
+			label: `${prefix}${name}`,
+			onSelect: () => {
+				value = c.iso;
+				onChange?.(c.iso);
+				// Trigger change on hidden input so validation runs.
+				hiddenInputEl?.dispatchEvent(new Event("change", { bubbles: true }));
+			},
+		};
+	}
+
+	let items: DropdownMenuItem[] = $derived.by(() => {
+		const result: DropdownMenuItem[] = [];
+		const preferredSet = new Set(
+			preferredCountries?.map((c) => c.toUpperCase()) ?? []
+		);
+
+		if (preferredSet.size > 0) {
+			// Preserve the order given in `preferredCountries`.
+			const order = preferredCountries!.map((c) => c.toUpperCase());
+			const preferred = order
+				.map((iso) => resolvedCountries.find((c) => c.iso === iso))
+				.filter((c): c is Country => !!c);
+			preferred.forEach((c) => result.push(countryToItem(c)));
+			if (preferred.length > 0) {
+				result.push({ type: "divider", id: "__preferred-divider" });
+			}
+		}
+
+		const rest =
+			preferredSet.size > 0
+				? sortedCountries.filter((c) => !preferredSet.has(c.iso))
+				: sortedCountries;
+		rest.forEach((c) => result.push(countryToItem(c)));
+
+		return result;
+	});
+
+	let searchConfig: DropdownMenuSearchConfig = $derived({
+		placeholder:
+			t?.("checkout.address.country_search_placeholder") || "Search country...",
+		strategy: "prefix",
+		getContent: (item) => {
+			const c = ISO_MAP.get(String(item.id));
+			if (!c) return String(item.id);
+			const localized = localizedName(c);
+			// Search against localized + English + ISO so typing works in either lang.
+			return `${localized} ${c.name} ${c.iso}`;
+		},
+		autoFocus: true,
+		noResultsMessage:
+			t?.("checkout.address.country_no_results") || "No country found",
+	});
+
+	let triggerText = $derived.by(() => {
+		if (selectedCountry) return localizedName(selectedCountry);
+		return placeholder ?? "";
+	});
+</script>
+
+<InputWrap
+	{id}
+	{label}
+	{description}
+	{labelAfter}
+	{inputBefore}
+	{inputAfter}
+	{inputBelow}
+	{below}
+	{required}
+	{disabled}
+	size={renderSize}
+	class={classProp}
+	{labelLeft}
+	{labelLeftWidth}
+	{labelLeftBreakpoint}
+	{classLabel}
+	{classLabelBox}
+	{classInputBox}
+	{classInputBoxWrap}
+	{classInputBoxWrapInvalid}
+	{classDescBox}
+	{classDescBoxToggle}
+	{classBelowBox}
+	{classValidationBox}
+	{validation}
+	{style}
+>
+	<DropdownMenu
+		{items}
+		bind:isOpen
+		position="bottom-span-right"
+		search={searchConfig}
+		maxHeight="300px"
+		closeOnSelect
+		class="stuic-field-country"
+		classDropdown={twMerge("w-72 max-w-[calc(100vw-1rem)]", classDropdown)}
+	>
+		{#snippet trigger({ toggle, triggerProps })}
+			<!--
+				Spread triggerProps (ARIA wiring from DropdownMenu) first, then override
+				its `id` with our InputWrap id so the <label for={id}> activates the button
+				when clicked. DropdownMenu's internal `aria-labelledby` reference is
+				incidentally broken by this swap, but `aria-controls` + `aria-expanded`
+				on the trigger and `role="menu"` on the popover keep the menu accessible.
+			-->
+			<button
+				type="button"
+				class={twMerge(
+					"stuic-field-country-trigger",
+					"flex items-center justify-between w-full text-left cursor-pointer",
+					"px-3 py-2.5",
+					!selectedCountry && "stuic-field-country-placeholder",
+					classInput
+				)}
+				onclick={toggle}
+				{disabled}
+				{tabindex}
+				{...triggerProps}
+				{id}
+				{...rest}
+			>
+				<span class="flex-1 min-w-0 truncate">{triggerText || " "}</span>
+				<span
+					class={twMerge(
+						"transition-transform duration-150 shrink-0 ml-2 opacity-60",
+						isOpen && "rotate-180"
+					)}
+					aria-hidden="true"
+				>
+					{@html iconChevronDown({ size: 16 })}
+				</span>
+			</button>
+		{/snippet}
+	</DropdownMenu>
+</InputWrap>
+
+<!-- Hidden input for form submission + validation -->
+{#if name}
+	<input
+		type="hidden"
+		{name}
+		value={value ?? ""}
+		bind:this={hiddenInputEl}
+		use:validateAction={() => {
+			const customOpts = typeof validate === "object" && validate ? validate : {};
+			return {
+				enabled: validate !== false,
+				...customOpts,
+				setValidationResult,
+			};
+		}}
+		{required}
+		{disabled}
+	/>
+{/if}

package/dist/components/Input/FieldCountry.svelte.d.ts

@@ -0,0 +1,59 @@
+import type { Snippet } from "svelte";
+import type { ValidateOptions } from "../../actions/validate.svelte.js";
+import type { TranslateFn } from "../../types.js";
+import type { THC } from "../Thc/Thc.svelte";
+import type { Country } from "./_internal/countries.js";
+import type { InputWrapClassProps } from "./types.js";
+type SnippetWithId = Snippet<[{
+    id: string;
+}]>;
+export interface Props extends InputWrapClassProps, Record<string, any> {
+    /** Selected country ISO alpha-2 code (e.g. "SK"). Bindable. Empty = unselected. */
+    value?: string;
+    /** Called whenever the selection changes. */
+    onChange?: (iso: string) => void;
+    /**
+     * Restrict the list to specific countries. Accepts either ISO codes or
+     * already-resolved Country objects. Default: all COUNTRIES.
+     */
+    countryList?: Country[] | string[];
+    /** ISO codes to pin at the top of the dropdown, above a divider. */
+    preferredCountries?: string[];
+    /**
+     * Override displayed country names. Keys are ISO alpha-2 codes,
+     * values are the localized name. Missing keys fall back to the English
+     * name from countries.ts.
+     */
+    countryNames?: Record<string, string>;
+    /** Show country flag emoji in dropdown items. Default: true. */
+    flags?: boolean;
+    /** Hidden input name (enables form submission + validation). */
+    name?: string;
+    id?: string;
+    tabindex?: number;
+    placeholder?: string;
+    required?: boolean;
+    disabled?: boolean;
+    label?: SnippetWithId | THC;
+    description?: SnippetWithId | THC;
+    class?: string;
+    renderSize?: "sm" | "md" | "lg" | string;
+    validate?: boolean | Omit<ValidateOptions, "setValidationResult">;
+    labelAfter?: SnippetWithId | THC;
+    inputBefore?: SnippetWithId | THC;
+    inputAfter?: SnippetWithId | THC;
+    inputBelow?: SnippetWithId | THC;
+    below?: SnippetWithId | THC;
+    labelLeft?: boolean;
+    labelLeftWidth?: "normal" | "wide";
+    labelLeftBreakpoint?: number;
+    /** Classes for the underlying trigger <button> element. */
+    classInput?: string;
+    /** Classes for the dropdown popover. */
+    classDropdown?: string;
+    style?: string;
+    t?: TranslateFn;
+}
+declare const FieldCountry: import("svelte").Component<Props, {}, "value">;
+type FieldCountry = ReturnType<typeof FieldCountry>;
+export default FieldCountry;

package/dist/components/Input/index.css

@@ -625,4 +625,31 @@
 		padding-top: 0;
 		padding-bottom: 0;
 	}
+
+	/* ============================================================================
+	   FIELD COUNTRY
+	   ============================================================================ */
+
+	/*
+	 * DropdownMenu defaults to `display: inline-block` (shrink-to-fit), which
+	 * makes the trigger button's `w-full` only as wide as its content — so the
+	 * chevron snaps to the text instead of the right edge. Stretch the wrapper
+	 * inside the InputWrap's flex container.
+	 */
+	.stuic-field-country.stuic-dropdown-menu {
+		display: block;
+		flex: 1;
+		min-width: 0;
+	}
+
+	/*
+	 * Reset field-input padding leaking into the popover's search bar
+	 * (mirrors the phone-prefix-picker fix — the input itself is correctly
+	 * sized, but its container also gets `.stuic-dropdown-menu-search`
+	 * padding which stacks on top, making the row look oversized).
+	 */
+	.stuic-field-country .stuic-dropdown-menu-search {
+		padding-top: 0;
+		padding-bottom: 0;
+	}
 }

package/dist/components/Input/index.d.ts

@@ -14,5 +14,6 @@ export { default as FieldInputLocalized, type Props as FieldInputLocalizedProps,
 export { default as FieldKeyValues, type Props as FieldKeyValuesProps, type KeyValueEntry, } from "./FieldKeyValues.svelte";
 export { default as FieldObject, type Props as FieldObjectProps, } from "./FieldObject.svelte";
 export { default as FieldPhoneNumber, type Props as FieldPhoneNumberProps, } from "./FieldPhoneNumber.svelte";
+export { default as FieldCountry, type Props as FieldCountryProps, } from "./FieldCountry.svelte";
 export { validatePhoneNumber } from "./phone-validation.js";
-export { type Country } from "./_internal/countries.js";
+export { type Country, COUNTRIES, ISO_MAP } from "./_internal/countries.js";

package/dist/components/Input/index.js

@@ -14,5 +14,6 @@ export { default as FieldInputLocalized, } from "./FieldInputLocalized.svelte";
 export { default as FieldKeyValues, } from "./FieldKeyValues.svelte";
 export { default as FieldObject, } from "./FieldObject.svelte";
 export { default as FieldPhoneNumber, } from "./FieldPhoneNumber.svelte";
+export { default as FieldCountry, } from "./FieldCountry.svelte";
 export { validatePhoneNumber } from "./phone-validation.js";
-export {} from "./_internal/countries.js";
+export { COUNTRIES, ISO_MAP } from "./_internal/countries.js";

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@marianmeres/stuic",
-	"version": "3.84.0",
+	"version": "3.85.0",
 	"scripts": {
 		"dev": "vite dev",
 		"build": "vite build && pnpm run prepack",