@cloudparker/moldex.js 0.0.79 → 0.0.80

package/dist/views/core/text/index.d.ts

@@ -1,10 +1,8 @@
 import TextAwait from "./components/text-await/text-await.svelte";
 import TextCopy from "./components/text-copy/text-copy.svelte";
-import TextCountry from "./components/text-country/text-country.svelte";
-import TextCountryState from "./components/text-country-state/text-country-state.svelte";
 import TextCurrency from "./components/text-currency/text-currency.svelte";
 import TextDate from "./components/text-date/text-date.svelte";
 import TextEmail from "./components/text-email/text-email.svelte";
 import TextHtml from "./components/text-html/text-html.svelte";
 import TextPhone from "./components/text-phone/text-phone.svelte";
-export { TextAwait, TextCopy, TextCountry, TextCountryState, TextCurrency, TextDate, TextEmail, TextHtml, TextPhone, };
+export { TextAwait, TextCopy, TextCurrency, TextDate, TextEmail, TextHtml, TextPhone, };

package/dist/views/core/text/index.js

@@ -1,10 +1,8 @@
 import TextAwait from "./components/text-await/text-await.svelte";
 import TextCopy from "./components/text-copy/text-copy.svelte";
-import TextCountry from "./components/text-country/text-country.svelte";
-import TextCountryState from "./components/text-country-state/text-country-state.svelte";
 import TextCurrency from "./components/text-currency/text-currency.svelte";
 import TextDate from "./components/text-date/text-date.svelte";
 import TextEmail from "./components/text-email/text-email.svelte";
 import TextHtml from "./components/text-html/text-html.svelte";
 import TextPhone from "./components/text-phone/text-phone.svelte";
-export { TextAwait, TextCopy, TextCountry, TextCountryState, TextCurrency, TextDate, TextEmail, TextHtml, TextPhone, };
+export { TextAwait, TextCopy, TextCurrency, TextDate, TextEmail, TextHtml, TextPhone, };

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

@@ -0,0 +1,34 @@
+<script lang="ts">import ComboboxField from "../../core/input/components/combobox-field/combobox-field.svelte";
+import CountryLoader from "../loaders/country-loader.svelte";
+let {
+  value = $bindable(null),
+  titleFieldName = "name",
+  displayFieldName = "name",
+  searchFieldName = "name",
+  identityFieldName = "isoCode",
+  hasDropdownHeader = true,
+  hasDropdownHeaderSearch = true,
+  hasDropdownFooter = true,
+  hasDropdownFooterCreateButton = true,
+  ...props
+} = $props();
+let countries = $state([]);
+</script>
+
+<CountryLoader bind:countries>
+	<ComboboxField
+		bind:value
+		items={countries}
+		{titleFieldName}
+		{displayFieldName}
+		{searchFieldName}
+		{identityFieldName}
+		{hasDropdownHeader}
+		{hasDropdownHeaderSearch}
+		{hasDropdownFooter}
+		{hasDropdownFooterCreateButton}
+		dropdownFooterClassName="border-t"
+		createButtonClassName="border-primary text-primary hover:text-primary"
+		{...props}
+	/>
+</CountryLoader>

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

@@ -0,0 +1,21 @@
+import type { ComboboxFieldProps, InputFieldProps } from '../../core';
+interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
+    new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
+        $$bindings?: Bindings;
+    } & Exports;
+    (internal: unknown, props: Props & {
+        $$events?: Events;
+        $$slots?: Slots;
+    }): Exports & {
+        $set?: any;
+        $on?: any;
+    };
+    z_$$bindings?: Bindings;
+}
+declare const CountryComboboxField: $$__sveltets_2_IsomorphicComponent<ComboboxFieldProps & InputFieldProps & {
+    value?: any;
+}, {
+    [evt: string]: CustomEvent<any>;
+}, {}, {}, "value">;
+type CountryComboboxField = InstanceType<typeof CountryComboboxField>;
+export default CountryComboboxField;

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

@@ -0,0 +1,6 @@
+import CountryComboboxField from "./fields/country-combobox-field.svelte";
+import TextCountry from "./texts/text-country.svelte";
+import TextCountryState from "./texts/text-country-state.svelte";
+import CountryLoader, { type Country } from "./loaders/country-loader.svelte";
+export type { Country };
+export { CountryComboboxField, TextCountry, CountryLoader, TextCountryState };

package/dist/views/extra/index.js

@@ -0,0 +1,5 @@
+import CountryComboboxField from "./fields/country-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";
+export { CountryComboboxField, TextCountry, CountryLoader, TextCountryState };

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

@@ -0,0 +1,26 @@
+<script lang="ts" module></script>
+
+<script lang="ts">import EasyScriptLoader from "@cloudparker/easy-script-loader-svelte";
+let { countries = $bindable([]), onLoad, children } = $props();
+let EasyCountryData;
+export async function loadCountries() {
+  if (EasyCountryData) {
+    countries = EasyCountryData.getCountries();
+    onLoad && onLoad(countries);
+  }
+}
+function handleCountriesLoaded(lib) {
+  EasyCountryData = lib;
+  loadCountries();
+}
+</script>
+
+<EasyScriptLoader
+	scriptUrl="https://cdn.jsdelivr.net/gh/paramanandapradhan/easy-countrydata@main/dist/index.js"
+	scriptName="EasyCountryData"
+	onLoad={handleCountriesLoaded}
+/>
+
+{#if children}
+	{@render children()}
+{/if}

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

@@ -0,0 +1,30 @@
+export type Country = {
+    isoCode: string;
+    dialCode: string;
+    name: string;
+};
+import type { Snippet } from 'svelte';
+interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
+    new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
+        $$bindings?: Bindings;
+    } & Exports;
+    (internal: unknown, props: Props & {
+        $$events?: Events;
+        $$slots?: Slots;
+    }): Exports & {
+        $set?: any;
+        $on?: any;
+    };
+    z_$$bindings?: Bindings;
+}
+declare const CountryLoader: $$__sveltets_2_IsomorphicComponent<{
+    countries?: Country[];
+    onLoad?: (countries?: Country[]) => void;
+    children?: Snippet;
+}, {
+    [evt: string]: CustomEvent<any>;
+}, {}, {
+    loadCountries: () => Promise<void>;
+}, "countries">;
+type CountryLoader = InstanceType<typeof CountryLoader>;
+export default CountryLoader;

package/dist/views/{core/text/components/text-country-state → extra/texts}/text-country-state.svelte

@@ -1,5 +1,4 @@
-<script lang="ts">import "../../../../../tailwind.css";
-import EasyScriptLoader from "@cloudparker/easy-script-loader-svelte";
+<script lang="ts">import EasyScriptLoader from "@cloudparker/easy-script-loader-svelte";
 import { BROWSER } from "esm-env";
 let { input } = $props();
 let states = $state([]);

package/dist/views/{core/text/components/text-country-state → extra/texts}/text-country-state.svelte.d.ts

@@ -1,4 +1,3 @@
-import '../../../../../tailwind.css';
 interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
     new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
         $$bindings?: Bindings;

package/dist/views/extra/texts/text-country.svelte

@@ -0,0 +1,13 @@
+<script lang="ts">import CountryLoader, {} from "../loaders/country-loader.svelte";
+let { input } = $props();
+let countries = $state([]);
+let country = $derived.by(() => {
+  if (input && countries?.length) {
+    return countries.find((c) => c.isoCode == input);
+  }
+});
+</script>
+
+<CountryLoader bind:countries>
+    {country?.name || ''}
+</CountryLoader>

package/dist/views/{core/text/components/text-country → extra/texts}/text-country.svelte.d.ts

@@ -1,4 +1,3 @@
-import '../../../../../tailwind.css';
 interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
     new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
         $$bindings?: Bindings;

package/dist/views/index.d.ts

@@ -1 +1,2 @@
 export * from './core/index.js';
+export * from './extra/index.js';

package/dist/views/index.js

@@ -1 +1,2 @@
 export * from './core/index.js';
+export * from './extra/index.js';

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@cloudparker/moldex.js",
-    "version": "0.0.79",
+    "version": "0.0.80",
     "author": "cloudparker.com",
     "license": "MIT",
     "keywords": [

package/dist/views/core/text/components/text-country/text-country.svelte

@@ -1,39 +0,0 @@
-<script lang="ts">import "../../../../../tailwind.css";
-import EasyScriptLoader from "@cloudparker/easy-script-loader-svelte";
-import { BROWSER } from "esm-env";
-let { input } = $props();
-let countries = $state([]);
-let country = $state(null);
-let EasyCountryData;
-async function init() {
-  if (EasyCountryData) {
-    countries = EasyCountryData.getCountries();
-  }
-}
-function handleScriptLoad(lib) {
-  EasyCountryData = lib;
-  console.log("EasyCountryData", EasyCountryData);
-  init();
-}
-async function prepare(..._) {
-  if (input) {
-    if (countries?.length) {
-      country = countries.find((o) => o.isoCode == input);
-    }
-  } else {
-    country = null;
-  }
-}
-$effect(() => {
-  BROWSER && prepare(input, countries);
-});
-</script>
-
-<EasyScriptLoader
-	scriptName="EasyCountryData"
-	scriptUrl="https://cdn.jsdelivr.net/gh/paramanandapradhan/easy-countrydata@main/dist/index.js"
-	onLoad={handleScriptLoad}
-/>
-{#if country}
-	<span> {country?.name || ''} </span>
-{/if}