@cloudparker/moldex.js 0.0.29 → 0.0.31

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

@@ -10,10 +10,10 @@ 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 RadioField from "./components/radio-field/radio-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 };
+export { ColorField, ComboboxField, DateField, DatetimeField, EmailField, FileField, InputField, Label, NumberField, PasswordField, PhoneField, RadioField, RangeField, SearchField, TextareaField, TextField, TimeField };

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

@@ -1,34 +1,66 @@
-<script lang="ts">import "../../../../../tailwind.css";
-import Button from "../../../button/components/button/button.svelte";
-import { Icon, mdiMenu } from "../../../icon";
-let {
-  id = "",
-  children,
-  leftSnippet,
-  centerSnippet,
-  rightSnippet,
-  className = "",
-  drawerIconPath = mdiMenu,
-  drawerButtonClassName = "",
-  hasDrawer = false,
-  hasLogo = false,
-  logoButtonClassName = "",
-  logoIconPath,
-  logoIconClassName = "text-indigo-600",
-  logoImgSrc,
-  logoImgClassName = "",
-  leftContainerClassName = "",
-  centerContainerClassName = "",
-  rightContainerClassName = "",
-  title = "",
-  subtitle = "",
-  titleClassName = "",
-  subtitleClassName = "",
-  hasTitle = false,
-  hasSubtitle = false,
-  ondrawer,
-  onlogo
-} = $props();
+<script lang="ts">
+	import '../../../../../tailwind.css';
+	import Button from '../../../button/components/button/button.svelte';
+	import type { Snippet } from 'svelte';
+	import { Icon, mdiMenu } from '../../../icon';
+
+	type PropsType = {
+		id?: string;
+		className?: String;
+		hasDrawer?: boolean;
+		drawerIconPath?: string;
+		drawerButtonClassName?: string;
+		logoButtonClassName?: string;
+		hasLogo?: boolean;
+		logoIconPath?: string;
+		logoIconClassName?: string;
+		logoImgSrc?: string;
+		logoImgClassName?: string;
+		leftContainerClassName?: string;
+		centerContainerClassName?: string;
+		rightContainerClassName?: string;
+		title?: string;
+		subtitle?: string;
+		titleClassName?: string;
+		subtitleClassName?: string;
+		hasTitle?: boolean;
+		hasSubtitle?: boolean;
+		children?: Snippet;
+		leftSnippet?: Snippet;
+		centerSnippet?: Snippet;
+		rightSnippet?: Snippet;
+		ondrawer?: () => void;
+		onlogo?: () => void;
+	};
+
+	let {
+		id = '',
+		children,
+		leftSnippet,
+		centerSnippet,
+		rightSnippet,
+		className = '',
+		drawerIconPath = mdiMenu,
+		drawerButtonClassName = '',
+		hasDrawer = false,
+		hasLogo = false,
+		logoButtonClassName = '',
+		logoIconPath,
+		logoIconClassName = 'text-indigo-600',
+		logoImgSrc,
+		logoImgClassName = '',
+		leftContainerClassName = '',
+		centerContainerClassName = '',
+		rightContainerClassName = '',
+		title = '',
+		subtitle = '',
+		titleClassName = '',
+		subtitleClassName = '',
+		hasTitle = false,
+		hasSubtitle = false,
+		ondrawer,
+		onlogo
+	}: PropsType = $props();
 </script>
 
 <div

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

@@ -1,23 +1,40 @@
-<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 lang="ts">
+	import Icon from '../../../icon/components/icon/icon.svelte';
+	import type { Snippet } from 'svelte';
+	import '../../../../../tailwind.css';
+
+	type PlacementType = 'top' | 'bottom' | 'left' | 'right';
+
+	type PropsType = {
+		message?: string;
+		className?: string;
+		iconPath?: string;
+		iconClassName?: string;
+		iconPlacement?: PlacementType;
+		children?: Snippet;
+	};
+
+	let {
+		message = 'No data found!',
+		className = '',
+		iconPath = '',
+		iconClassName = '',
+		iconPlacement = 'top',
+		children
+	}: PropsType = $props();
+
+	const iconPlacementClassNameMap: any = {
+		top: 'flex-col',
+		bottom: 'flex-col-reverse',
+		left: 'flex-row',
+		right: 'flex-row-reverse'
+	};
+
+	let iconPlacementClassName: string = $state('');
+
+	$effect(() => {
+		iconPlacementClassName = iconPlacementClassNameMap[iconPlacement];
+	});
 </script>
 
 <div

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

@@ -18,7 +18,7 @@ declare const NoData: $$__sveltets_2_IsomorphicComponent<{
     className?: string;
     iconPath?: string;
     iconClassName?: string;
-    iconPlacement?: "top" | "bottom" | "left" | "right";
+    iconPlacement?: "left" | "right" | "top" | "bottom";
     children?: Snippet;
 }, {
     [evt: string]: CustomEvent<any>;

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