@cloudparker/moldex.js 4.1.11 → 4.1.12

package/dist/views/extra/fields/state-combobox-field.svelte

@@ -0,0 +1,44 @@
+<script lang="ts">
+	import type { ComboboxFieldProps, InputFieldProps } from '../../core';
+	import ComboboxField from '../../core/input/components/combobox-field/combobox-field.svelte';
+	import StateLoader, { type State } from '../loaders/state-loader.svelte';
+
+	type Props = {
+		value?: State | null;
+		countryCode?: string;
+	};
+
+	let {
+		value = $bindable(null),
+		countryCode = undefined,
+		titleFieldName = 'name',
+		displayFieldName = 'name',
+		searchFieldName = 'name',
+		identityFieldName = '_id',
+		hasDropdownHeader = true,
+		hasDropdownHeaderSearch = true,
+		hasDropdownFooter = true,
+		hasDropdownFooterCreateButton = true,
+		...props
+	}: ComboboxFieldProps & InputFieldProps & Props = $props();
+
+	let states: State[] = $state([]);
+</script>
+
+<StateLoader bind:states {countryCode}>
+	<ComboboxField
+		bind:value
+		items={states}
+		{titleFieldName}
+		{displayFieldName}
+		{searchFieldName}
+		{identityFieldName}
+		{hasDropdownHeader}
+		{hasDropdownHeaderSearch}
+		{hasDropdownFooter}
+		{hasDropdownFooterCreateButton}
+		dropdownFooterClassName="border-t"
+		createButtonClassName="border-primary text-primary hover:text-primary"
+		{...props}
+	/>
+</StateLoader>

package/dist/views/extra/fields/state-combobox-field.svelte.d.ts

@@ -0,0 +1,10 @@
+import type { ComboboxFieldProps, InputFieldProps } from '../../core';
+import { type State } from '../loaders/state-loader.svelte';
+type Props = {
+    value?: State | null;
+    countryCode?: string;
+};
+type $$ComponentProps = ComboboxFieldProps & InputFieldProps & Props;
+declare const StateComboboxField: import("svelte").Component<$$ComponentProps, {}, "value">;
+type StateComboboxField = ReturnType<typeof StateComboboxField>;
+export default StateComboboxField;

package/dist/views/extra/index.d.ts

@@ -1,6 +1,8 @@
 import CountryComboboxField from "./fields/country-combobox-field.svelte";
+import StateComboboxField from "./fields/state-combobox-field.svelte";
 import TextCountry from "./texts/text-country.svelte";
 import TextCountryState from "./texts/text-country-state.svelte";
 import CountryLoader from "./loaders/country-loader.svelte";
+import StateLoader from "./loaders/state-loader.svelte";
 export * from './types';
-export { CountryComboboxField, TextCountry, CountryLoader, TextCountryState, };
+export { CountryComboboxField, StateComboboxField, TextCountry, CountryLoader, StateLoader, TextCountryState, };

package/dist/views/extra/index.js

@@ -1,6 +1,8 @@
 import CountryComboboxField from "./fields/country-combobox-field.svelte";
+import StateComboboxField from "./fields/state-combobox-field.svelte";
 import TextCountry from "./texts/text-country.svelte";
 import TextCountryState from "./texts/text-country-state.svelte";
 import CountryLoader from "./loaders/country-loader.svelte";
+import StateLoader from "./loaders/state-loader.svelte";
 export * from './types';
-export { CountryComboboxField, TextCountry, CountryLoader, TextCountryState, };
+export { CountryComboboxField, StateComboboxField, TextCountry, CountryLoader, StateLoader, TextCountryState, };

package/dist/views/extra/loaders/state-loader.svelte

@@ -0,0 +1,49 @@
+<script lang="ts">
+	import EasyScriptLoader from '@cloudparker/easy-script-loader-svelte';
+	import type { Snippet } from 'svelte';
+
+	export type State = {
+		_id: string;
+		name: string;
+		countryId: string;
+	};
+
+	type Props = {
+		states?: State[];
+		countryCode?: string;
+		onLoad?: (states?: State[]) => void;
+		children?: Snippet;
+	};
+
+	let { states = $bindable([]), countryCode, onLoad, children }: Props = $props();
+
+	let EasyCountryStateData: any;
+
+	export async function loadStates(countryCode?: string) {
+		if (EasyCountryStateData) {
+			states = EasyCountryStateData.getStates(countryCode || null);
+			onLoad && onLoad(states);
+		}
+	}
+
+	function handleStatesLoaded(lib: any) {
+		EasyCountryStateData = lib;
+		loadStates();
+	}
+
+	$effect(() => {
+		(async () => {
+			loadStates(countryCode);
+		})();
+	});
+</script>
+
+<EasyScriptLoader
+	scriptUrl="hhttps://cdn.jsdelivr.net/gh/paramanandapradhan/easy-country-state-data@main/dist/index.js"
+	scriptName="EasyCountryStateData"
+	onLoad={handleStatesLoaded}
+/>
+
+{#if children}
+	{@render children()}
+{/if}

package/dist/views/extra/loaders/state-loader.svelte.d.ts

@@ -0,0 +1,17 @@
+import type { Snippet } from 'svelte';
+export type State = {
+    _id: string;
+    name: string;
+    countryId: string;
+};
+type Props = {
+    states?: State[];
+    countryCode?: string;
+    onLoad?: (states?: State[]) => void;
+    children?: Snippet;
+};
+declare const StateLoader: import("svelte").Component<Props, {
+    loadStates: (countryCode?: string) => Promise<void>;
+}, "states">;
+type StateLoader = ReturnType<typeof StateLoader>;
+export default StateLoader;

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@cloudparker/moldex.js",
-    "version": "4.1.11",
+    "version": "4.1.12",
     "keywords": [
         "svelte"
     ],