@cloudparker/moldex.js 0.0.29 → 0.0.30

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

@@ -1,74 +1,103 @@
-<script lang="ts">import "../../../../../tailwind.css";
-import { ripple } from "../../../../../actions";
-import ButtonMenu from "../../../button/components/button-menu/button-menu.svelte";
-import Button from "../../../button/components/button/button.svelte";
-import { BROWSER } from "esm-env";
-import { mdiChevronLeft, mdiChevronRight, mdiPageFirst, mdiPageLast } from "../../../icon";
-let {
-  length = 0,
-  pageIndex = 0,
-  pageSize = 10,
-  pageSizeOptions = [5, 10, 25, 50, 100, 200],
-  itemsText = "Items",
-  pageSizeText = "Page Size",
-  pageText = "Page",
-  onPageSizeChange,
-  onPageIndexChange
-} = $props();
-let pageCount = $state(0);
-let hasFirst = $state(true);
-let hasLast = $state(true);
-let hasNext = $state(true);
-let hasPrev = $state(true);
-const handlePageSize = (size) => {
-  pageSize = size;
-};
-const handlePage = (type) => {
-  let index = 0;
-  switch (type) {
-    case "first":
-      index = 0;
-      break;
-    case "last":
-      index = pageCount - 1;
-      break;
-    case "next":
-      index = pageIndex;
-      index++;
-      break;
-    case "prev":
-      index = pageIndex;
-      index--;
-      break;
-  }
-  if (index <= 0) index = 0;
-  if (index >= pageCount) index = pageCount - 1;
-  pageIndex = index;
-};
-function preparePage(..._) {
-  hasFirst = true;
-  hasPrev = true;
-  hasNext = true;
-  hasLast = true;
-  length = length || 0;
-  pageSize = pageSize || 10;
-  pageCount = Math.ceil(length / pageSize);
-  if (pageIndex <= 0) {
-    pageIndex = 0;
-    hasPrev = false;
-    hasFirst = false;
-  }
-  if (pageCount && pageIndex >= pageCount - 1) {
-    pageIndex = pageCount - 1;
-    hasNext = false;
-    hasLast = false;
-  }
-  onPageSizeChange && onPageSizeChange(pageSize);
-  onPageIndexChange && onPageIndexChange(pageIndex);
-}
-$effect(() => {
-  BROWSER && preparePage(length, pageSize, pageIndex, pageCount);
-});
+<script lang="ts">
+	import '../../../../../tailwind.css';
+	import { ripple } from '../../../../../actions';
+	import ButtonMenu from '../../../button/components/button-menu/button-menu.svelte';
+	import Button from '../../../button/components/button/button.svelte';
+	import { BROWSER } from 'esm-env';
+	import { mdiChevronLeft, mdiChevronRight, mdiPageFirst, mdiPageLast } from '../../../icon';
+
+	type PropsType = {
+		length?: number;
+		pageIndex?: number;
+		pageSize?: number;
+		pageSizeOptions?: number[];
+		itemsText?: string;
+		pageSizeText?: string;
+		pageText?: string;
+		onPageSizeChange?: (size: number) => void;
+		onPageIndexChange?: (index: number) => void;
+	};
+
+	let {
+		length = 0,
+		pageIndex = 0,
+		pageSize = 10,
+		pageSizeOptions = [5, 10, 25, 50, 100, 200],
+		itemsText = 'Items',
+		pageSizeText = 'Page Size',
+		pageText = 'Page',
+		onPageSizeChange,
+		onPageIndexChange
+	}: PropsType = $props();
+
+	let pageCount: number = $state(0);
+
+	let hasFirst: boolean = $state(true);
+	let hasLast: boolean = $state(true);
+	let hasNext: boolean = $state(true);
+	let hasPrev: boolean = $state(true);
+
+	const handlePageSize = (size: any) => {
+		// console.log('handlePageSize', size);
+		pageSize = size;
+	};
+
+	const handlePage = (type?: string) => {
+		// console.log('handlePage');
+		let index = 0;
+		switch (type) {
+			case 'first':
+				index = 0;
+				break;
+			case 'last':
+				index = pageCount - 1;
+				break;
+			case 'next':
+				index = pageIndex;
+				index++;
+				break;
+			case 'prev':
+				index = pageIndex;
+				index--;
+				break;
+		}
+		if (index <= 0) index = 0;
+		if (index >= pageCount) index = pageCount - 1;
+
+		pageIndex = index;
+	};
+
+	function preparePage(..._: any) {
+		// console.log('preparePage');
+		hasFirst = true;
+		hasPrev = true;
+
+		hasNext = true;
+		hasLast = true;
+
+		length = length || 0;
+		pageSize = pageSize || 10;
+		pageCount = Math.ceil(length / pageSize);
+
+		if (pageIndex <= 0) {
+			pageIndex = 0;
+			hasPrev = false;
+			hasFirst = false;
+		}
+
+		if (pageCount && pageIndex >= pageCount - 1) {
+			pageIndex = pageCount - 1;
+			hasNext = false;
+			hasLast = false;
+		}
+
+		onPageSizeChange && onPageSizeChange(pageSize);
+		onPageIndexChange && onPageIndexChange(pageIndex);
+	}
+
+	$effect(() => {
+		BROWSER && preparePage(length, pageSize, pageIndex, pageCount);
+	});
 </script>
 
 {#snippet pageButton({ onclick, disabled, icon }: any)}

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

@@ -1,26 +1,40 @@
-<script lang="ts">import "../../../../../tailwind.css";
-let {
-  backgroundClassName = "",
-  className = "h-4",
-  value = 0,
-  showValue = false,
-  children
-} = $props();
-let progressValue = $state(0);
-$effect(() => {
-  if (!className) {
-    className = "h-4";
-  }
-});
-$effect(() => {
-  if (value < 0) {
-    progressValue = 0;
-  } else if (value >= 100) {
-    progressValue = 100;
-  } else {
-    progressValue = value;
-  }
-});
+<script lang="ts">
+	import '../../../../../tailwind.css';
+	import type { Snippet } from 'svelte';
+
+	type PropsType = {
+		className?: string;
+		backgroundClassName?: string;
+		value?: number;
+		showValue?: boolean;
+		children?: Snippet;
+	};
+
+	let {
+		backgroundClassName = '',
+		className = 'h-4',
+		value = 0,
+		showValue = false,
+		children
+	}: PropsType = $props();
+
+	let progressValue: number = $state(0);
+
+	$effect(() => {
+		if (!className) {
+			className = 'h-4';
+		}
+	});
+
+	$effect(() => {
+		if (value < 0) {
+			progressValue = 0;
+		} else if (value >= 100) {
+			progressValue = 100;
+		} else {
+			progressValue = value;
+		}
+	});
 </script>
 
 <div class="w-full bg-gray-200 rounded-full progressbar-container {backgroundClassName}" style="">

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

@@ -1,14 +1,16 @@
-<script lang="ts">import { page } from "$app/stores";
-import { referrer } from "../../../../services/navigation/navigation-service";
-import { BROWSER } from "esm-env";
-$effect(() => {
-  if (BROWSER) {
-    const unsubscribe = page.subscribe((_) => {
-      referrer.referer = referrer.referer === location.href ? referrer.referer : location.href;
-    });
-    return () => {
-      unsubscribe && unsubscribe();
-    };
-  }
-});
+<script lang="ts">
+	import { page } from '$app/stores';
+	import { referrer } from '../../../../services/navigation/navigation-service';
+	import { BROWSER } from 'esm-env';
+
+	$effect(() => {
+		if (BROWSER) {
+			const unsubscribe = page.subscribe((_) => {
+				referrer.referer = referrer.referer === location.href ? referrer.referer : location.href;
+			});
+			return () => {
+				unsubscribe && unsubscribe();
+			};
+		}
+	});
 </script>

package/dist/views/core/ruler/components/vertical-ruler/verticcal-ruler.svelte

@@ -1,5 +1,9 @@
-<script lang="ts">import "../../../../../tailwind.css";
-let { className = "" } = $props();
+<script lang="ts">
+	import '../../../../../tailwind.css';
+	type PropsType = {
+		className?: string;
+	};
+	let { className = '' }: PropsType = $props();
 </script>
 
 <div class="h-6 lg:w-px lg:bg-gray-200 {className}" aria-hidden="true"></div>

package/dist/views/core/screen-detector/components/screen-detector.svelte

@@ -1,12 +1,16 @@
-<script lang="ts">import { handleScreenSizeUpdate } from "../../../../services";
-import { BROWSER } from "esm-env";
-let innerWidth = $state(0);
-function screenSizeChanged(size) {
-  handleScreenSizeUpdate(size);
-}
-$effect(() => {
-  BROWSER && screenSizeChanged(innerWidth);
-});
+<script lang="ts">
+	import { handleScreenSizeUpdate } from '../../../../services';
+	import { BROWSER } from 'esm-env';
+
+	let innerWidth: number = $state(0);
+
+	function screenSizeChanged(size: number) {
+		handleScreenSizeUpdate(size);
+	}
+
+	$effect(() => {
+		BROWSER && screenSizeChanged(innerWidth);
+	});
 </script>
 
 <svelte:window bind:innerWidth />

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

@@ -1,5 +1,10 @@
-<script lang="ts">import "../../../../../tailwind.css";
-let { className = "" } = $props();
+<script lang="ts">
+	import '../../../../../tailwind.css';
+	type PropsType = {
+		className?: string;
+	};
+
+	let { className = '' }: PropsType = $props();
 </script>
 
 <svg

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

@@ -1,5 +1,11 @@
-<script lang="ts">import "../../../../../tailwind.css";
-let { input, key, hasTitle } = $props();
+<script lang="ts">
+	import '../../../../../tailwind.css';
+	type PropsType = {
+		input?: Promise<any | null> | undefined;
+		key?: string;
+		hasTitle?: string;
+	};
+	let { input, key, hasTitle }: PropsType = $props();
 </script>
 
 {#if input}

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

@@ -1,20 +1,31 @@
-<script lang="ts">import "../../../../../tailwind.css";
-import Button from "../../../button/components/button/button.svelte";
-import { copyText, showToast } from "../../../../../services/index.js";
-import { mdiContentCopy } from "../../../icon";
-let {
-  input,
-  containerClassName = "",
-  buttonClassName = "",
-  iconClassName = "",
-  iconPath = mdiContentCopy
-} = $props();
-function handleCopy() {
-  if (input) {
-    copyText(input);
-    showToast("Copied!");
-  }
-}
+<script lang="ts">
+	import '../../../../../tailwind.css';
+	import Button from '../../../button/components/button/button.svelte';
+	import { copyText, showToast } from '../../../../../services/index.js';
+	import { mdiContentCopy } from '../../../icon';
+
+	type PropsType = {
+		input: string;
+		containerClassName?: string;
+		buttonClassName?: string;
+		iconClassName?: string;
+		iconPath?: string;
+	};
+
+	let {
+		input,
+		containerClassName = '',
+		buttonClassName = '',
+		iconClassName = '',
+		iconPath = mdiContentCopy
+	}: PropsType = $props();
+
+	function handleCopy() {
+		if (input) {
+			copyText(input);
+			showToast('Copied!');
+		}
+	}
 </script>
 
 <span class="flex items-center {containerClassName}">

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

@@ -1,32 +1,44 @@
-<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 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

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

@@ -1,32 +1,40 @@
-<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

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">