@cloudparker/moldex.js 0.0.28 → 0.0.30

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,
-  leftChildren,
-  centerChildren,
-  rightChildren,
-  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
@@ -42,11 +74,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 +97,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,51 @@
+<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
+	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/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}">