@cloudparker/moldex.js 0.0.64 → 0.0.66

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

@@ -1,103 +1,74 @@
-<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 lang="ts">import "../../../../../tailwind.css";
+import { ripple } from "../../../../../actions";
+import ButtonDropdown from "../../../button/components/button-dropdown/button-dropdown.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>
 
 {#snippet pageButton({ onClick, disabled, icon }: any)}
@@ -114,7 +85,7 @@
 	<div class="flex items-center flex-nowrap gap-2">
 		<div>{pageSizeText}</div>
 		<div class="">
-			<ButtonMenu
+			<ButtonDropdown
 				className="px-3 py-2 rounded hover:bg-gray-100 outline-none focus:bg-gray-200"
 				title={pageSize}
 				dropdownClassName="w-20"
@@ -130,7 +101,7 @@
 						</button>
 					</div>
 				{/each}
-			</ButtonMenu>
+			</ButtonDropdown>
 		</div>
 		<div class="text-gray-500">
 			<span>

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

@@ -1,40 +1,26 @@
-<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 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>
 
 <div class="w-full bg-gray-200 rounded-full progressbar-container {backgroundClassName}" style="">

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

@@ -1,9 +1,5 @@
-<script lang="ts">
-	import '../../../../../tailwind.css';
-	type PropsType = {
-		className?: string;
-	};
-	let { className = '' }: PropsType = $props();
+<script lang="ts">import "../../../../../tailwind.css";
+let { className = "" } = $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,16 +1,12 @@
-<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 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>
 
 <svelte:window bind:innerWidth />

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

@@ -1,39 +1,26 @@
-<script lang="ts">
-	import type { Snippet } from 'svelte';
-
-	type BreakpointType = 'xs' | 'sm' | 'md' | 'lg' | 'xl' | '2xl';
-
-	type PropsType = {
-		children?: Snippet;
-		className?: string;
-		id?: string;
-		responsiveBreakpoint?: BreakpointType;
-		position?: 'left' | 'right';
-	};
-	let {
-		children,
-		className,
-		id,
-		responsiveBreakpoint = 'md',
-		position = 'left'
-	}: PropsType = $props();
-
-	let responsiveClassName = $derived.by(() => {
-		switch (responsiveBreakpoint) {
-			case 'xs':
-				return 'xs:fixed xs:inset-y-0 xs:flex xs:w-72 xs:flex-col';
-			case 'sm':
-				return 'sm:fixed sm:inset-y-0 sm:flex sm:w-72 sm:flex-col';
-			case 'md':
-				return 'md:fixed md:inset-y-0 md:flex md:w-72 md:flex-col';
-			case 'lg':
-				return 'lg:fixed lg:inset-y-0 lg:flex lg:w-72 lg:flex-col';
-			case 'xl':
-				return 'xl:fixed xl:inset-y-0 xl:flex xl:w-72 xl:flex-col';
-			case '2xl':
-				return '2xl:fixed 2xl:inset-y-0 2xl:flex 2xl:w-72 2xl:flex-col';
-		}
-	});
+<script lang="ts">let {
+  children,
+  className,
+  id,
+  responsiveBreakpoint = "md",
+  position = "left"
+} = $props();
+let responsiveClassName = $derived.by(() => {
+  switch (responsiveBreakpoint) {
+    case "xs":
+      return "xs:fixed xs:inset-y-0 xs:flex xs:w-72 xs:flex-col";
+    case "sm":
+      return "sm:fixed sm:inset-y-0 sm:flex sm:w-72 sm:flex-col";
+    case "md":
+      return "md:fixed md:inset-y-0 md:flex md:w-72 md:flex-col";
+    case "lg":
+      return "lg:fixed lg:inset-y-0 lg:flex lg:w-72 lg:flex-col";
+    case "xl":
+      return "xl:fixed xl:inset-y-0 xl:flex xl:w-72 xl:flex-col";
+    case "2xl":
+      return "2xl:fixed 2xl:inset-y-0 2xl:flex 2xl:w-72 2xl:flex-col";
+  }
+});
 </script>
 
 <div

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

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

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

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

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

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

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

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

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

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

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

@@ -1,24 +1,13 @@
-<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 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>
 
 <span>