@cloudparker/moldex.js 0.0.27 → 0.0.29

package/dist/views/core/input/components/phone-field/phone-field.svelte

@@ -0,0 +1,76 @@
+<script lang="ts">import { ripple } from "../../../../../actions";
+import EasyScriptLoader from "@cloudparker/easy-script-loader-svelte";
+import InputField, {} from "../input-field/input-field.svelte";
+import { isMobileScreen, openListPickerDialog } from "../../../../../services";
+import { DialogSizeEnum } from "../../../dialog";
+let {
+  value,
+  size,
+  appearance,
+  buttonClassName,
+  className,
+  dialCode = $bindable("+1"),
+  ...props
+} = $props();
+let btnRoundedClassName = $state("");
+let EasyCountryData;
+let inputFieldRef = $state(null);
+export function focus() {
+  inputFieldRef?.focus();
+}
+async function hanleDialCodePicker() {
+  if (EasyCountryData) {
+    let items = EasyCountryData.getCountries();
+    let size2 = isMobileScreen() ? DialogSizeEnum.FULL : DialogSizeEnum.SM;
+    let res = await openListPickerDialog({
+      items,
+      itemTitle: "dialCode",
+      itemSubtitle: "name",
+      size: size2,
+      hasCheck: true,
+      identity: "dialCode"
+    });
+    console.log(res);
+    if (res) {
+      dialCode = res;
+      inputFieldRef && inputFieldRef.focus();
+    }
+  }
+}
+function handleScriptLoad(lib) {
+  console.log(lib);
+  EasyCountryData = lib;
+}
+$effect(() => {
+  if (!appearance || appearance == "normal") {
+    btnRoundedClassName = "rounded-tl-lg rounded-bl-lg";
+  }
+});
+</script>
+
+{#snippet showPasswordButton()}
+	<button
+		class="w-16 h-full hover:bg-gray-100 font-bold text-gray-400 {btnRoundedClassName} {buttonClassName}"
+		use:ripple
+		onclick={hanleDialCodePicker}
+	>
+		{dialCode}
+	</button>
+{/snippet}
+
+<EasyScriptLoader
+	scriptName="EasyCountryData"
+	scriptUrl="https://cdn.jsdelivr.net/gh/paramanandapradhan/easy-countrydata@main/dist/index.js"
+	onLoad={handleScriptLoad}
+/>
+
+<InputField
+	bind:this={inputFieldRef}
+	{...props}
+	type="tel"
+	maxlength={props?.maxlength || 12}
+	leftSnippet={showPasswordButton}
+	{size}
+	{appearance}
+	className="pl-16 {className}"
+/>

package/dist/views/core/input/components/phone-field/phone-field.svelte.d.ts

@@ -0,0 +1,24 @@
+import { type InputFieldPropsType } from '../input-field/input-field.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 PhoneField: $$__sveltets_2_IsomorphicComponent<InputFieldPropsType & {
+    buttonClassName?: string;
+    dialCode?: string;
+}, {
+    [evt: string]: CustomEvent<any>;
+}, {}, {
+    focus: () => void;
+}, "dialCode">;
+type PhoneField = InstanceType<typeof PhoneField>;
+export default PhoneField;

package/dist/views/core/input/components/range-field/range-field.svelte

@@ -0,0 +1,53 @@
+<script lang="ts">import InputField, {
+} from "../input-field/input-field.svelte";
+let {
+  id,
+  value = $bindable(50),
+  size = "md",
+  min = 0,
+  max = 100,
+  name,
+  step,
+  className,
+  oninput,
+  onblur,
+  onfocus
+} = $props();
+let rangeSizeClassName = $state("");
+$effect(() => {
+  switch (size) {
+    case "lg":
+      rangeSizeClassName = "h-3 ";
+      break;
+    case "md":
+      rangeSizeClassName = "h-2 ";
+      break;
+    case "sm":
+      rangeSizeClassName = "h-1 ";
+      break;
+    case "xs":
+      rangeSizeClassName = "h-2-px ";
+      break;
+  }
+});
+</script>
+
+<input
+	{id}
+	{name}
+	type="range"
+	class=" w-full bg-gray-200 appearance-none cursor-pointer dark:bg-gray-700 rounded-lg range-lg outline-none focus:outline-none {rangeSizeClassName} {className}"
+	{min}
+	{max}
+	{step}
+	bind:value
+	{oninput} 
+	{onfocus}
+	{onblur}
+/>
+
+<style>
+	.h-2-px {
+		height: 2px;
+	}
+</style>

package/dist/views/core/{form/components/input-field/input-field.svelte.d.ts → input/components/range-field/range-field.svelte.d.ts}

@@ -1,29 +1,4 @@
-export type InputFieldTypesType = 'text' | 'number' | 'date';
-export type InputFieldSizeType = 'lg' | 'md' | 'sm';
-export type InputFieldPropsType = {
-    id?: string;
-    label?: string;
-    name?: string;
-    className?: string;
-    value?: string;
-    type?: InputFieldTypesType;
-    labelClassName?: string;
-    containerClassName?: string;
-    placeholder?: string;
-    required?: boolean;
-    disabled?: boolean;
-    autofocus?: boolean;
-    readonly?: boolean;
-    maxlength?: number;
-    minlength?: number;
-    min?: number;
-    max?: number;
-    step?: number;
-    requiredSymbolColor?: string;
-    requiredSymbol?: string;
-    hasRequiredSymbol?: boolean;
-    size?: InputFieldSizeType;
-};
+import { type InputFieldSizeType } from '../input-field/input-field.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;
@@ -37,8 +12,20 @@ interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> =
     };
     z_$$bindings?: Bindings;
 }
-declare const InputField: $$__sveltets_2_IsomorphicComponent<InputFieldPropsType, {
+declare const RangeField: $$__sveltets_2_IsomorphicComponent<{
+    id?: string;
+    name?: string;
+    className?: string;
+    size?: InputFieldSizeType;
+    value?: number;
+    min?: number;
+    max?: number;
+    step?: number;
+    oninput?: (ev: any) => void;
+    onfocus?: (ev: any) => void;
+    onblur?: (ev: any) => void;
+}, {
     [evt: string]: CustomEvent<any>;
 }, {}, {}, "value">;
-type InputField = InstanceType<typeof InputField>;
-export default InputField;
+type RangeField = InstanceType<typeof RangeField>;
+export default RangeField;

package/dist/views/core/input/components/search-field/search-field.svelte

@@ -0,0 +1,53 @@
+<script lang="ts">import { mdiMagnify } from "../../../icon";
+import Icon from "../../../icon/components/icon/icon.svelte";
+import InputField, {} from "../input-field/input-field.svelte";
+let {
+  className,
+  placeholder,
+  iconClassName,
+  onSearch,
+  ...props
+} = $props();
+const debouncedSearch = debounce(search, 300);
+let lastQuery;
+let inputFieldRef = $state(null);
+export function focus() {
+  inputFieldRef?.focus();
+}
+function handleInput(ev) {
+  let input = ev?.target;
+  if (input) {
+    let searchText = (input.value || "").toLowerCase().trim();
+    debouncedSearch(searchText);
+  }
+}
+function search(query) {
+  if (lastQuery != query) {
+    onSearch && onSearch(query);
+    lastQuery = query;
+  }
+}
+function debounce(func, wait) {
+  let timeout;
+  return function(...args) {
+    clearTimeout(timeout);
+    timeout = setTimeout(() => {
+      func(...args);
+    }, wait);
+  };
+}
+</script>
+
+{#snippet searchIcon()}
+	<Icon path={mdiMagnify} className="mx-3 text-gray-400 {iconClassName}"></Icon>
+{/snippet}
+<InputField
+	bind:this={inputFieldRef}
+	{...props}
+	type="search"
+	maxlength={props?.maxlength || 200}
+	leftSnippet={searchIcon}
+	className=" pl-12 {className}"
+	{placeholder}
+	oninput={handleInput}
+/>

package/dist/views/core/input/components/search-field/search-field.svelte.d.ts

@@ -0,0 +1,24 @@
+import { type InputFieldPropsType } from '../input-field/input-field.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 SearchField: $$__sveltets_2_IsomorphicComponent<InputFieldPropsType & {
+    iconClassName?: string;
+    onSearch?: (value: string) => void;
+}, {
+    [evt: string]: CustomEvent<any>;
+}, {}, {
+    focus: () => void;
+}, "">;
+type SearchField = InstanceType<typeof SearchField>;
+export default SearchField;

package/dist/views/core/input/components/text-field/text-field.svelte

@@ -0,0 +1,9 @@
+<script lang="ts">import InputField, {} from "../input-field/input-field.svelte";
+let { maxlength, ...props } = $props();
+let inputFieldRef = $state(null);
+export function focus() {
+  inputFieldRef?.focus();
+}
+</script>
+
+<InputField bind:this={inputFieldRef} {...props} type="text" maxlength={maxlength || 200} />

package/dist/views/core/{form → input}/components/text-field/text-field.svelte.d.ts

@@ -1,13 +1,4 @@
-export type TextFieldPropsType = {
-    id?: string;
-    label?: string;
-    name?: string;
-    className?: string;
-    value?: string;
-    type?: string;
-    labelClassName?: string;
-    containerClassName?: string;
-};
+import { type InputFieldPropsType } from '../input-field/input-field.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;
@@ -21,8 +12,10 @@ interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> =
     };
     z_$$bindings?: Bindings;
 }
-declare const TextField: $$__sveltets_2_IsomorphicComponent<TextFieldPropsType, {
+declare const TextField: $$__sveltets_2_IsomorphicComponent<InputFieldPropsType, {
     [evt: string]: CustomEvent<any>;
-}, {}, {}, "">;
+}, {}, {
+    focus: () => void;
+}, "">;
 type TextField = InstanceType<typeof TextField>;
 export default TextField;

package/dist/views/core/input/components/textarea-field/textarea-field.svelte

@@ -0,0 +1,9 @@
+<script lang="ts">import InputField, {} from "../input-field/input-field.svelte";
+let props = $props();
+let inputFieldRef = $state(null);
+export function focus() {
+  inputFieldRef?.focus();
+}
+</script>
+
+<InputField bind:this={inputFieldRef} {...props} type="textarea" maxlength={props?.maxlength || 200} />

package/dist/views/core/input/components/textarea-field/textarea-field.svelte.d.ts

@@ -0,0 +1,21 @@
+import { type InputFieldPropsType } from '../input-field/input-field.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 TextareaField: $$__sveltets_2_IsomorphicComponent<InputFieldPropsType, {
+    [evt: string]: CustomEvent<any>;
+}, {}, {
+    focus: () => void;
+}, "">;
+type TextareaField = InstanceType<typeof TextareaField>;
+export default TextareaField;

package/dist/views/core/input/components/time-field/time-field.svelte

@@ -0,0 +1,9 @@
+<script lang="ts">import InputField, {} from "../input-field/input-field.svelte";
+let props = $props();
+let inputFieldRef = $state(null);
+export function focus() {
+  inputFieldRef?.focus();
+}
+</script>
+
+<InputField bind:this={inputFieldRef} {...props} type="time" />

package/dist/views/core/input/components/time-field/time-field.svelte.d.ts

@@ -0,0 +1,21 @@
+import { type InputFieldPropsType } from '../input-field/input-field.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 TimeField: $$__sveltets_2_IsomorphicComponent<InputFieldPropsType, {
+    [evt: string]: CustomEvent<any>;
+}, {}, {
+    focus: () => void;
+}, "">;
+type TimeField = InstanceType<typeof TimeField>;
+export default TimeField;

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

@@ -0,0 +1,19 @@
+import { type InputFieldAppearanceType, type InputFieldPropsType, type InputFieldSizeType } from "./components/input-field/input-field.svelte";
+import ColorField from "./components/color-field/color-field.svelte";
+import ComboboxField from "./components/combobox-field/combobox-field.svelte";
+import DateField from "./components/date-field/date-field.svelte";
+import DatetimeField from "./components/datetime-field/datetime-field.svelte";
+import EmailField from "./components/email-field/email-field.svelte";
+import FileField from "./components/file-field/file-field.svelte";
+import InputField from "./components/input-field/input-field.svelte";
+import Label from "./components/label/label.svelte";
+import NumberField from "./components/number-field/number-field.svelte";
+import PasswordField from "./components/password-field/password-field.svelte";
+import PhoneField from "./components/phone-field/phone-field.svelte";
+import RangeField from "./components/range-field/range-field.svelte";
+import SearchField from "./components/search-field/search-field.svelte";
+import TextField from "./components/text-field/text-field.svelte";
+import TextareaField from "./components/textarea-field/textarea-field.svelte";
+import TimeField from "./components/time-field/time-field.svelte";
+export { type InputFieldAppearanceType, type InputFieldPropsType, type InputFieldSizeType };
+export { ColorField, ComboboxField, DateField, DatetimeField, EmailField, FileField, InputField, Label, NumberField, PasswordField, PhoneField, RangeField, SearchField, TextareaField, TextField, TimeField };

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

@@ -0,0 +1,19 @@
+import {} from "./components/input-field/input-field.svelte";
+import ColorField from "./components/color-field/color-field.svelte";
+import ComboboxField from "./components/combobox-field/combobox-field.svelte";
+import DateField from "./components/date-field/date-field.svelte";
+import DatetimeField from "./components/datetime-field/datetime-field.svelte";
+import EmailField from "./components/email-field/email-field.svelte";
+import FileField from "./components/file-field/file-field.svelte";
+import InputField from "./components/input-field/input-field.svelte";
+import Label from "./components/label/label.svelte";
+import NumberField from "./components/number-field/number-field.svelte";
+import PasswordField from "./components/password-field/password-field.svelte";
+import PhoneField from "./components/phone-field/phone-field.svelte";
+import RangeField from "./components/range-field/range-field.svelte";
+import SearchField from "./components/search-field/search-field.svelte";
+import TextField from "./components/text-field/text-field.svelte";
+import TextareaField from "./components/textarea-field/textarea-field.svelte";
+import TimeField from "./components/time-field/time-field.svelte";
+export {};
+export { ColorField, ComboboxField, DateField, DatetimeField, EmailField, FileField, InputField, Label, NumberField, PasswordField, PhoneField, RangeField, SearchField, TextareaField, TextField, TimeField };

package/dist/views/core/navbar/components/navbar/navbar.svelte

@@ -4,9 +4,9 @@ import { Icon, mdiMenu } from "../../../icon";
 let {
   id = "",
   children,
-  leftChildren,
-  centerChildren,
-  rightChildren,
+  leftSnippet,
+  centerSnippet,
+  rightSnippet,
   className = "",
   drawerIconPath = mdiMenu,
   drawerButtonClassName = "",
@@ -42,11 +42,11 @@ let {
 				className="h-full px-2 text-gray-500 hover:text-gray-600 {drawerButtonClassName}"
 				iconPath={drawerIconPath}
 				disabled={!ondrawer}
-				onclick={ondrawer}
+				onClick={ondrawer}
 			></Button>
 		{/if}
 		{#if hasLogo}
-			<Button className="h-full px-2 {logoButtonClassName}" disabled={!onlogo} onclick={onlogo}>
+			<Button className="h-full px-2 {logoButtonClassName}" disabled={!onlogo} onClick={onlogo}>
 				{#if logoIconPath}
 					<Icon path={logoIconPath} className="h-10 w-10 {logoIconClassName}" />
 				{/if}
@@ -65,18 +65,18 @@ let {
 		{/if}
 	</div>
 	<div class={leftContainerClassName}>
-		{#if leftChildren}
-			{@render leftChildren()}
+		{#if leftSnippet}
+			{@render leftSnippet()}
 		{/if}
 	</div>
 	<div class="flex-grow flex justify-center {centerContainerClassName}">
-		{#if centerChildren}
-			{@render centerChildren()}
+		{#if centerSnippet}
+			{@render centerSnippet()}
 		{/if}
 	</div>
 	<div class={rightContainerClassName}>
-		{#if rightChildren}
-			{@render rightChildren()}
+		{#if rightSnippet}
+			{@render rightSnippet()}
 		{/if}
 	</div>
 </div>

package/dist/views/core/navbar/components/navbar/navbar.svelte.d.ts

@@ -35,9 +35,9 @@ declare const Navbar: $$__sveltets_2_IsomorphicComponent<{
     hasTitle?: boolean;
     hasSubtitle?: boolean;
     children?: Snippet;
-    leftChildren?: Snippet;
-    centerChildren?: Snippet;
-    rightChildren?: Snippet;
+    leftSnippet?: Snippet;
+    centerSnippet?: Snippet;
+    rightSnippet?: Snippet;
     ondrawer?: () => void;
     onlogo?: () => void;
 }, {

package/dist/views/core/no-data/components/no-data/no-data.svelte

@@ -0,0 +1,34 @@
+<script lang="ts">import Icon from "../../../icon/components/icon/icon.svelte";
+import "../../../../../tailwind.css";
+let {
+  message = "No data found!",
+  className = "",
+  iconPath = "",
+  iconClassName = "",
+  iconPlacement = "top",
+  children
+} = $props();
+const iconPlacementClassNameMap = {
+  top: "flex-col",
+  bottom: "flex-col-reverse",
+  left: "flex-row",
+  right: "flex-row-reverse"
+};
+let iconPlacementClassName = $state("");
+$effect(() => {
+  iconPlacementClassName = iconPlacementClassNameMap[iconPlacement];
+});
+</script>
+
+<div
+	class="flex items-center justify-center gap-3 text-gray-500 p-4 {iconPlacementClassName}  {className}"
+>
+	{#if children}
+		{@render children()}
+	{:else}
+		{#if iconPath}
+			<Icon path={iconPath} className="w-6 h-6 {iconClassName}" />
+		{/if}
+		<div>{@html message}</div>
+	{/if}
+</div>

package/dist/views/core/no-data/components/no-data/no-data.svelte.d.ts

@@ -0,0 +1,27 @@
+import type { Snippet } from 'svelte';
+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;
+    } & Exports;
+    (internal: unknown, props: Props & {
+        $$events?: Events;
+        $$slots?: Slots;
+    }): Exports & {
+        $set?: any;
+        $on?: any;
+    };
+    z_$$bindings?: Bindings;
+}
+declare const NoData: $$__sveltets_2_IsomorphicComponent<{
+    message?: string;
+    className?: string;
+    iconPath?: string;
+    iconClassName?: string;
+    iconPlacement?: "top" | "bottom" | "left" | "right";
+    children?: Snippet;
+}, {
+    [evt: string]: CustomEvent<any>;
+}, {}, {}, "">;
+type NoData = InstanceType<typeof NoData>;
+export default NoData;

package/dist/views/core/no-data/index.d.ts

@@ -0,0 +1,2 @@
+import NoData from "./components/no-data/no-data.svelte";
+export { NoData };

package/dist/views/core/no-data/index.js

@@ -0,0 +1,2 @@
+import NoData from "./components/no-data/no-data.svelte";
+export { NoData };

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

@@ -12,6 +12,7 @@ async function init() {
 }
 function handleScriptLoad(lib) {
   EasyCountryData = lib;
+  console.log("EasyCountryData", EasyCountryData);
   init();
 }
 async function prepare(..._) {
@@ -31,7 +32,7 @@ $effect(() => {
 <EasyScriptLoader
 	scriptName="EasyCountryData"
 	scriptUrl="https://cdn.jsdelivr.net/gh/paramanandapradhan/easy-countrydata@main/dist/index.js"
-	onload={handleScriptLoad}
+	onLoad={handleScriptLoad}
 />
 {#if country}
 	<span> {country?.name || ''} </span>

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

@@ -32,7 +32,7 @@ $effect(() => {
 <EasyScriptLoader
 	scriptName="EasyCountryStateData"
 	scriptUrl="https://cdn.jsdelivr.net/gh/paramanandapradhan/easy-country-state-data@main/dist/index.js"
-	on:load={handleScriptLoad}
+	onLoad={handleScriptLoad}
 />
 
 {#if state}

package/dist/views/core/toast/components/toast/toast.svelte

@@ -1,4 +1,4 @@
-<script context="module" lang="ts"></script>
+<script module lang="ts"></script>
 
 <script lang="ts">import "../../../../../tailwind.css";
 let isPlaced = $state(false);

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@cloudparker/moldex.js",
-    "version": "0.0.27",
+    "version": "0.0.29",
     "author": "cloudparker.com",
     "license": "MIT",
     "keywords": [
@@ -27,7 +27,7 @@
     "repository": "https://github.com/paramanandapradhan/moldex.js",
     "homepage": "https://cloudparker.com",
     "devDependencies": {
-        "@cloudparker/easy-script-loader-svelte": "^3.0.3",
+        "@cloudparker/easy-script-loader-svelte": "^4.0.0",
         "esm-env": "^1.0.0",
         "moment": "^2.30.1"
     },