@cloudparker/moldex.js 0.0.28 → 0.0.30

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

@@ -1,37 +1,50 @@
-<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;
-  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 lang="ts">
+	import '../../../../../tailwind.css';
+	import EasyScriptLoader from '@cloudparker/easy-script-loader-svelte';
+	import { BROWSER } from 'esm-env';
+
+	type PropsType = {
+		input?: string;
+	};
+
+	let { input }: PropsType = $props();
+
+	let countries: any[] = $state([]);
+	let country: any | null = $state(null);
+
+	let EasyCountryData: any;
+
+	async function init() {
+		if (EasyCountryData) {
+			countries = EasyCountryData.getCountries();
+		}
+	}
+
+	function handleScriptLoad(lib: CustomEvent) {
+		EasyCountryData = lib;
+		console.log('EasyCountryData', EasyCountryData);
+		init();
+	}
+
+	async function prepare(..._: any) {
+		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}
+	onLoad={handleScriptLoad}
 />
 {#if country}
 	<span> {country?.name || ''} </span>

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

@@ -1,38 +1,46 @@
-<script lang="ts">import "../../../../../tailwind.css";
-import EasyScriptLoader from "@cloudparker/easy-script-loader-svelte";
-import { BROWSER } from "esm-env";
-let { input } = $props();
-let states = $state([]);
-let state = $state(null);
-let EasyCountryStateData;
-async function init() {
-  if (EasyCountryStateData) {
-    states = EasyCountryStateData.getStates() || [];
-  }
-}
-async function prepare(..._) {
-  if (input) {
-    await init();
-    if (states?.length) {
-      state = states.find((o) => o._id == input);
-    }
-  } else {
-    state = null;
-  }
-}
-function handleScriptLoad(ev) {
-  EasyCountryStateData = ev.detail;
-  init();
-}
-$effect(() => {
-  BROWSER && prepare(input, states);
-});
+<script lang="ts">
+	import '../../../../../tailwind.css';
+	import EasyScriptLoader from '@cloudparker/easy-script-loader-svelte';
+	import { BROWSER } from 'esm-env';
+
+	let { input }: { input: string } = $props();
+
+	let states: any[] = $state([]);
+	let state: any | null = $state(null);
+
+	let EasyCountryStateData: any;
+
+	async function init() {
+		if (EasyCountryStateData) {
+			states = EasyCountryStateData.getStates() || [];
+		}
+	}
+
+	async function prepare(..._: any) {
+		if (input) {
+			await init();
+			if (states?.length) {
+				state = states.find((o) => o._id == input);
+			}
+		} else {
+			state = null;
+		}
+	}
+
+	function handleScriptLoad(ev: CustomEvent) {
+		EasyCountryStateData = ev.detail;
+		init();
+	}
+
+	$effect(() => {
+		BROWSER && prepare(input, states);
+	});
 </script>
 
 <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/text/components/text-currency/text-currency.svelte

@@ -1,13 +1,24 @@
-<script lang="ts">import "../../../../../tailwind.css";
-import { BROWSER } from "esm-env";
-let { input, symbol = "$", hasSymbol = true } = $props();
-let value = $state("");
-function prepare(..._) {
-  value = Math.abs(input || 0).toFixed(2);
-}
-$effect(() => {
-  BROWSER && prepare(input);
-});
+<script lang="ts">
+	import '../../../../../tailwind.css';
+	import { BROWSER } from 'esm-env';
+
+	type PropsType = {
+		input: number;
+		symbol: string;
+		hasSymbol: boolean;
+	};
+
+	let { input, symbol = '$', hasSymbol = true }: PropsType = $props();
+
+	let value: string = $state('');
+
+	function prepare(..._: any) {
+		value = Math.abs(input || 0).toFixed(2);
+	}
+
+	$effect(() => {
+		BROWSER && prepare(input);
+	});
 </script>
 
 <span>

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

@@ -1,24 +1,36 @@
-<script lang="ts">import "../../../../../tailwind.css";
-import { dateFormat, dateToAgo, toDate } from "../../../../../services";
-import { BROWSER } from "esm-env";
-let { input, format = "DD-MM-YYYY hh:mm a" } = $props();
-let dateString = $state("");
-function prepareDate(..._) {
-  let date;
-  if (input) {
-    date = toDate(input);
-  }
-  if (date) {
-    if (format == "ago") {
-      dateString = dateToAgo(date);
-    } else {
-      dateString = dateFormat(date, format);
-    }
-  }
-}
-$effect(() => {
-  BROWSER && prepareDate(input);
-});
+<script lang="ts">
+	import '../../../../../tailwind.css';
+	import { dateFormat, dateToAgo, toDate } from '../../../../../services';
+
+	import { BROWSER } from 'esm-env';
+
+	type PropsType = {
+		input: Date | number | string | { seconds: number; nanoseconds: number };
+		format?: 'ago' | string;
+	};
+
+	let { input, format = 'DD-MM-YYYY hh:mm a' }: PropsType = $props();
+
+	let dateString: string = $state('');
+
+	function prepareDate(..._: any) {
+		// console.log('date data', data);
+		let date: Date | undefined;
+		if (input) {
+			date = toDate(input);
+		}
+		if (date) {
+			if (format == 'ago') {
+				dateString = dateToAgo(date)!;
+			} else {
+				dateString = dateFormat(date, format)!;
+			}
+		}
+	}
+
+	$effect(() => {
+		BROWSER && prepareDate(input);
+	});
 </script>
 
 <span>

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

@@ -1,7 +1,16 @@
-<script lang="ts">import "../../../../../tailwind.css";
-import { ripple } from "../../../../../actions";
-import { Icon, mdiEmailOutline } from "../../../icon";
-let { input, buttonClassName, iconClassName, iconPath = mdiEmailOutline } = $props();
+<script lang="ts">
+	import '../../../../../tailwind.css';
+	import { ripple } from '../../../../../actions';
+	import { Icon, mdiEmailOutline } from '../../../icon';
+	 
+	type PropsType = {
+		input: string;
+		buttonClassName?: string;
+		iconPath?: string;
+		iconClassName?: string;
+	};
+
+	let { input, buttonClassName, iconClassName, iconPath = mdiEmailOutline }: PropsType = $props();
 </script>
 
 <span class="flex items-center">

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

@@ -1,5 +1,6 @@
-<script lang="ts">import "../../../../../tailwind.css";
-let { input } = $props();
+<script lang="ts">
+	import '../../../../../tailwind.css';
+	let { input }: { input: string } = $props();
 </script>
 
 <span>

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

@@ -1,7 +1,16 @@
-<script lang="ts">import { mdiPhone } from "../../../icon";
-import Icon from "../../../icon/components/icon/icon.svelte";
-import "../../../../../tailwind.css";
-let { input, buttonClassName, iconClassName, iconPath = mdiPhone } = $props();
+<script lang="ts">
+	import { mdiPhone } from '../../../icon';
+	import Icon from '../../../icon/components/icon/icon.svelte';
+	import '../../../../../tailwind.css';
+
+	type PropsType = {
+		input: string;
+		buttonClassName?: string;
+		iconPath?: string;
+		iconClassName?: string;
+	};
+
+	let { input, buttonClassName, iconClassName, iconPath = mdiPhone }: PropsType = $props();
 </script>
 
 <span class="flex items-center">

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

@@ -1,24 +1,47 @@
-<script context="module" lang="ts"></script>
-
-<script lang="ts">import "../../../../../tailwind.css";
-let isPlaced = $state(false);
-let isOpened = $state(false);
-let { id, msg, duration = 3e3, className, children } = $props();
-export function openToast() {
-  isPlaced = true;
-  setTimeout(() => {
-    isOpened = true;
-    setTimeout(() => {
-      closeClose();
-    }, duration);
-  }, 0);
-}
-export function closeClose() {
-  isOpened = false;
-  setTimeout(() => {
-    isPlaced = false;
-  }, 300);
-}
+<script module lang="ts">
+	import type { Snippet } from 'svelte';
+
+	export type ToastPropsType = {
+		id?: string;
+		msg: string;
+		duration?: number;
+		className?: string;
+		children?: Snippet;
+	};
+</script>
+
+<script lang="ts">
+	import '../../../../../tailwind.css';
+
+	let isPlaced: boolean = $state(false);
+	let isOpened: boolean = $state(false);
+
+	let { id, msg, duration = 3000, className, children }: ToastPropsType = $props();
+
+	// export function toggleDialog() {
+	// 	if (isOpened) {
+	// 		closeDialog();
+	// 	} else {
+	// 		openDialog();
+	// 	}
+	// }
+
+	export function openToast() {
+		isPlaced = true;
+		setTimeout(() => {
+			isOpened = true;
+			setTimeout(() => {
+				closeClose();
+			}, duration);
+		}, 0);
+	}
+
+	export function closeClose() {
+		isOpened = false;
+		setTimeout(() => {
+			isPlaced = false;
+		}, 300);
+	}
 </script>
 
 {#if isPlaced}

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@cloudparker/moldex.js",
-    "version": "0.0.28",
+    "version": "0.0.30",
     "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"
     },

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

@@ -1,233 +0,0 @@
-<script context="module" lang="ts"></script>
-
-<script lang="ts">import Icon from "../../../icon/components/icon/icon.svelte";
-import Label from "../label/label.svelte";
-let {
-  id = "",
-  name = "",
-  value = $bindable(""),
-  className = "",
-  label = "",
-  type = "text",
-  labelClassName = "",
-  containerClassName = "",
-  placeholder = "",
-  required = false,
-  requiredSymbolColor = "red",
-  requiredSymbol = "*",
-  hasRequiredSymbol = true,
-  disabled = false,
-  autofocus = false,
-  readonly = false,
-  maxlength,
-  minlength,
-  min,
-  max,
-  step,
-  size = "md",
-  appearance = "normal",
-  floatingLabel = false,
-  pattern = "",
-  multiple = false,
-  iconPath,
-  iconClassName = "",
-  onchange,
-  oninput,
-  onfocus,
-  onblur,
-  ondblclick,
-  onclick,
-  onmousedown,
-  onmouseup,
-  onkeydown,
-  onkeyup,
-  onkeypress,
-  ondrop,
-  ondrag,
-  ondragover
-} = $props();
-let inputRef = $state(null);
-let sizeClassName = $state("");
-let appearanceClassName = $state("");
-let floatingLabelClassName = $state("");
-let floatingLabelPaddingClassName = $state("");
-let floatingLabelTextClassName = $state("");
-let iconPaddingClassName = $state();
-let iconSizeClassName = $state();
-let floatingLabelIconTextPaddingClassName = $state("");
-$effect(() => {
-  if (iconPath || floatingLabel) {
-    containerClassName = (containerClassName || "") + " relative";
-  }
-});
-$effect(() => {
-  if (iconPath) {
-    let flpcn;
-    switch (size) {
-      case "lg":
-        iconPaddingClassName = "ps-12";
-        flpcn = ` peer-placeholder-shown:ps-12 `;
-        iconSizeClassName = "!w-8 !h-8";
-        break;
-      case "md":
-        iconPaddingClassName = "ps-10";
-        flpcn = ` peer-placeholder-shown:ps-10 `;
-        iconSizeClassName = "!w-6 !h-6";
-        break;
-      case "sm":
-        iconPaddingClassName = "ps-9";
-        flpcn = ` peer-placeholder-shown:ps-9 `;
-        iconSizeClassName = "!w-5 !h-5";
-        break;
-      case "xs":
-        iconPaddingClassName = "ps-7";
-        flpcn = ` peer-placeholder-shown:ps-7 `;
-        iconSizeClassName = "!w-3 !h-3";
-        break;
-    }
-    floatingLabelIconTextPaddingClassName = flpcn;
-  }
-});
-$effect(() => {
-  if (floatingLabel) {
-    if (size) {
-      let flpcn = "";
-      switch (size) {
-        case "lg":
-          flpcn = ` px-1 peer-focus:px-1 peer-placeholder-shown:px-4 `;
-          floatingLabelTextClassName = "text-base";
-          break;
-        case "md":
-          flpcn = " px-1 peer-focus:px-1 peer-placeholder-shown:px-2.5 ";
-          floatingLabelTextClassName = "text-sm";
-          break;
-        case "sm":
-          flpcn = " px-1 peer-focus:px-1 peer-placeholder-shown:px-2";
-          floatingLabelTextClassName = "text-xs";
-          break;
-        case "xs":
-          flpcn = " px-0 peer-focus:px-0 peer-placeholder-shown:px-1 ";
-          floatingLabelTextClassName = "text-xs";
-          break;
-      }
-      floatingLabelPaddingClassName = floatingLabelIconTextPaddingClassName + flpcn;
-    }
-    labelClassName = (labelClassName || "") + `absolute duration-300 transform top-0 rounded -translate-y-1/2 peer-placeholder-shown:top-1/2 peer-focus:top-0 peer-placeholder-shown:start-0 peer-focus:start-1 bg-transparent peer-placeholder-shown:bg-transparent peer-focus:bg-white start-1 ${floatingLabelPaddingClassName} ${floatingLabelTextClassName}`;
-  }
-});
-$effect(() => {
-  if (appearance) {
-    switch (appearance) {
-      case "normal":
-        appearanceClassName = "bg-gray-50 border border-gray-300 text-gray-900 rounded-lg focus:ring-indigo-500 focus:border-indigo-500 dark:bg-gray-700 ";
-        break;
-      case "box":
-        appearanceClassName = "bg-gray-50 border border-gray-300 text-gray-900 focus:ring-indigo-500 focus:border-indigo-500   ";
-        break;
-      case "fill":
-        appearanceClassName = "bg-gray-100 border-0 appearance-none focus:bg-gray-200 focus:outline-none focus:ring-0";
-        break;
-      case "underline":
-        appearanceClassName = "bg-transparent border-0 border-b-2 border-gray-300 appearance-none focus:outline-none focus:ring-0 focus:border-blue-600";
-        break;
-      case "fill-underline":
-        appearanceClassName = "bg-gray-100 border-0 border-b-2 border-gray-300 appearance-none focus:outline-none focus:ring-0 focus:border-blue-600";
-        break;
-    }
-  }
-});
-$effect(() => {
-  if (size) {
-    switch (size) {
-      case "lg":
-        sizeClassName = "p-4 text-base";
-        break;
-      case "md":
-        sizeClassName = "p-2.5 text-sm";
-        break;
-      case "sm":
-        sizeClassName = "p-2 text-xs";
-        break;
-      case "xs":
-        sizeClassName = "p-1 text-xs";
-        break;
-    }
-  }
-});
-$effect(() => {
-  if (name && !id) {
-    id = name;
-  }
-});
-$effect(() => {
-  if (inputRef && autofocus) {
-    inputRef.focus();
-  }
-});
-</script>
-
-{#snippet labelSnippet()}
-	<Label
-		forName={id}
-		{label}
-		className={labelClassName}
-		{required}
-		{requiredSymbolColor}
-		{requiredSymbol}
-		{hasRequiredSymbol}
-	></Label>
-{/snippet}
-
-{#snippet createIcon()}
-	<div class="absolute inset-y-0 start-0 flex items-center ps-2.5 pointer-events-none {className}">
-		<Icon path={iconPath!} className="text-gray-500 {iconSizeClassName} {iconClassName}" />
-	</div>
-{/snippet}
-
-{#if !floatingLabel && (label || iconPath)}
-	{@render labelSnippet()}
-{/if}
-<div class={containerClassName}>
-	{#if iconPath}
-		{@render createIcon()}
-	{/if}
-	<input
-		bind:this={inputRef}
-		bind:value
-		{type}
-		{id}
-		{name}
-		class="block w-full peer ps- {iconPaddingClassName} {appearanceClassName} {floatingLabelClassName}  {sizeClassName}   {className}"
-		{placeholder}
-		{required}
-		{disabled}
-		{readonly}
-		{maxlength}
-		{minlength}
-		{min}
-		{max}
-		{step}
-		{pattern}
-		{onchange}
-		{oninput}
-		{onfocus}
-		{onblur}
-		{ondblclick}
-		{onclick}
-		{onmousedown}
-		{onmouseup}
-		{onkeydown}
-		{onkeyup}
-		{onkeypress}
-		{ondrop}
-		{ondrag}
-		{ondragover}
-	/>
-
-	{#if label && floatingLabel}
-		{@render labelSnippet()}
-	{/if}
-</div>
-
-<style>
-</style>

package/dist/views/core/form/components/label/label.svelte

@@ -1,32 +0,0 @@
-<script lang="ts">let {
-  forName,
-  label = "",
-  className = "",
-  required = false,
-  requiredSymbolColor = "red",
-  requiredSymbol = "*",
-  hasRequiredSymbol = true,
-  children
-} = $props();
-</script>
-
-<label
-	for={forName || ''}
-	class="block text-sm text-gray-500 {hasRequiredSymbol && required ? 'required' : ''} {className}"
-	style="--requiredSymbolColor:{requiredSymbolColor}; --requiredSymbol: '{requiredSymbol}'; "
->
-	{#if children}
-		{@render children()}
-	{:else}
-		{label || ''}
-	{/if}
-</label>
-
-<style>
-	.required::after {
-		content: var(--requiredSymbol);
-		color: var(--requiredSymbolColor);
-		font-weight: bold;
-		margin-left: 4px;
-	}
-</style>

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

@@ -1,3 +0,0 @@
-import InputField, { type InputFieldAppearanceType, type InputFieldPropsType, type InputFieldSizeType, type InputFieldTypesType } from "./components/input-field/input-field.svelte";
-import Label from "./components/label/label.svelte";
-export { InputField, Label, type InputFieldAppearanceType, type InputFieldPropsType, type InputFieldSizeType, type InputFieldTypesType };

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

@@ -1,3 +0,0 @@
-import InputField, {} from "./components/input-field/input-field.svelte";
-import Label from "./components/label/label.svelte";
-export { InputField, Label };