@medyll/idae-slotui-svelte 0.122.1 → 0.124.0

package/dist/data/jsoner/Jsoner.svelte

@@ -1,40 +1,40 @@
-<script lang="ts">
-	import type { JsonerProps } from './types.js';
-
-	let { class: className = '', element, data = [], mode = 'array' }: JsonerProps = $props();
-
-	if (Array.isArray(data)) {
-		mode = 'array';
-	} else if (typeof data === 'object') {
-		mode = 'object';
-	} else if (typeof data === 'string') {
-		mode = 'string';
-	} else if (typeof data === 'number') {
-		mode = 'number';
-	}
-</script>
-
-{#if data}
-	{#if mode === 'array'}
-		<div class="flex-h w-large flex-wrap gap-small">
-			{#each data as kdta, index}
-				<div class="border-l"><svelte:self data={kdta} /></div>
-			{/each}
-		</div>
-	{/if}
-
-	{#if mode === 'object'}
-		<div class="flex-v gap-small">
-			{#each Object.keys(data) as kdta}
-				<div class="flex-h gap-small flex-align-top marg-l">
-					<div class="w-medium pad-1 border-b">- {kdta}</div>
-					<div style="margin-left:4rem;"><svelte:self data={data[kdta]} /></div>
-				</div>
-			{/each}
-		</div>
-	{/if}
-
-	{#if ['string', 'number'].includes(mode)}
-		<div class="pad-1">{data}</div>
-	{/if}
-{/if}
+<script lang="ts">
+	import type { JsonerProps } from './types.js';
+
+	let { class: className = '', element, data = [], mode = 'array' }: JsonerProps = $props();
+
+	if (Array.isArray(data)) {
+		mode = 'array';
+	} else if (typeof data === 'object') {
+		mode = 'object';
+	} else if (typeof data === 'string') {
+		mode = 'string';
+	} else if (typeof data === 'number') {
+		mode = 'number';
+	}
+</script>
+
+{#if data}
+	{#if mode === 'array'}
+		<div class="flex-h w-large flex-wrap gap-small">
+			{#each data as kdta, index}
+				<div class="border-l"><svelte:self data={kdta} /></div>
+			{/each}
+		</div>
+	{/if}
+
+	{#if mode === 'object'}
+		<div class="flex-v gap-small">
+			{#each Object.keys(data) as kdta}
+				<div class="flex-h gap-small flex-align-top marg-l">
+					<div class="w-medium pad-1 border-b">- {kdta}</div>
+					<div style="margin-left:4rem;"><svelte:self data={data[kdta]} /></div>
+				</div>
+			{/each}
+		</div>
+	{/if}
+
+	{#if ['string', 'number'].includes(mode)}
+		<div class="pad-1">{data}</div>
+	{/if}
+{/if}

package/dist/data/list/List.svelte

@@ -1,16 +1,16 @@
-<script lang="ts">
-	import type { MenuListProps } from '../../ui/menuList/types.js';
-	import MenuList from '../../ui/menuList/MenuList.svelte';
-
-	let { element, selectedData, selectedIndex, menuListItems, data, ...rest }: MenuListProps =
-		$props();
-</script>
-
-<MenuList
-	{...rest}
-	bind:element
-	bind:selectedData
-	bind:selectedIndex
-	bind:menuListItems
-	bind:data
-/>
+<script lang="ts">
+	import type { MenuListProps } from '../../ui/menuList/types.js';
+	import MenuList from '../../ui/menuList/MenuList.svelte';
+
+	let { element, selectedData, selectedIndex, menuListItems, data, ...rest }: MenuListProps =
+		$props();
+</script>
+
+<MenuList
+	{...rest}
+	bind:element
+	bind:selectedData
+	bind:selectedIndex
+	bind:menuListItems
+	bind:data
+/>

package/dist/data/list/ListItem.svelte

@@ -1,10 +1,10 @@
-<svelte:options />
-
-<script lang="ts">
-	import MenuListItem from '../../ui/menuList/MenuListItem.svelte';
-	import type { MenuListItemProps } from '../../ui/menuList/types.js';
-
-	let { ...rest }: MenuListItemProps = $props();
-</script>
-
-<MenuListItem {...rest} />
+<svelte:options />
+
+<script lang="ts">
+	import MenuListItem from '../../ui/menuList/MenuListItem.svelte';
+	import type { MenuListItemProps } from '../../ui/menuList/types.js';
+
+	let { ...rest }: MenuListItemProps = $props();
+</script>
+
+<MenuListItem {...rest} />

package/dist/data/list/ListTitle.svelte

@@ -1,8 +1,8 @@
-<script lang="ts">
-	import MenuListTitle from '../../ui/menuList/MenuListTitle.svelte';
-	import type { MenuListItemProps } from '../../ui/menuList/types.js';
-
-	let { ...rest }: MenuListItemProps = $props();
-</script>
-
-<MenuListTitle {...rest} />
+<script lang="ts">
+	import MenuListTitle from '../../ui/menuList/MenuListTitle.svelte';
+	import type { MenuListItemProps } from '../../ui/menuList/types.js';
+
+	let { ...rest }: MenuListItemProps = $props();
+</script>
+
+<MenuListTitle {...rest} />

package/dist/data/loader/Loader.demo.svelte

@@ -1,95 +1,95 @@
-<script lang="ts">
-	import Loader from './Loader.svelte';
-
-	/* demo */
-	import ComponentDemo from '../../base/demoer/DemoerComponent.svelte';
-	import Demoer from '../../base/demoer/Demoer.svelte';
-	import DemoPage from '../../base/demoer/DemoPage.svelte';
-	import Icon from '../../base/icon/Icon.svelte';
-	import type { LoaderProps } from './types.js';
-	/* demo */
-
-	import { parameters, componentArgs } from './types.js';
-
-	let codeSlot = `
-<Loader onstatuschange={() => {}}>
-	{#snippet loaderLoading()}
-		<Icon color="orange" fontSize="big" icon="mdi:loading" rotate />
-	{/snippet}
-	{#snippet loaderError()}
-		<Icon color="red" fontSize="big" icon="mdi:alert-circle-outline" />
-	{/snippet}
-	{#snippet loaderEmpty()}
-		<Icon color="gray" fontSize="big" icon="mdi:database-search-outline" />
-	{/snippet}
-	{#snippet loaderSuccess()}
-		<Icon color="green" fontSize="big" icon="clarity:success-standard-line" />
-	{/snippet}v
-</Loader>`;
-
-	let codeProps = `
-<Loader
-    status={"loading"}
-    messages={{
-        loading: 'Loading dataset',
-        error  : 'An error occurred',
-        empty  : 'Empty results',
-        success: 'Success !'
-      }}
-    emptyIcon="mdi:database-search-outline"
-    errorIcon="mdi:alert-circle-outline"
-    loadingIcon="mdi:loading"
-    successIcon="clarity:success-standard-line" />`;
-</script>
-
-<ComponentDemo
-	cite="And suddenly, in this dark cabinet, i realized that the most pleasant
-	phase was that of waiting.<br /> D. Pentes, 824"
-	component="Loader"
->
-	<div class="flex-v gap-large">
-		<DemoPage code={codeSlot} component="Loading">
-			<Demoer {componentArgs} {parameters}>
-				{#snippet children({ activeParams })}
-					<div class="pos-rel h-large w-large">
-						<Loader {...activeParams} on:status:change={() => {}}>
-							{#snippet loaderLoading()}
-								<Icon color="orange" iconSize="big" icon="mdi:loading" rotate />
-							{/snippet}
-							{#snippet loaderError()}
-								<Icon color="red" iconSize="big" icon="mdi:alert-circle-outline" />
-							{/snippet}
-							{#snippet loaderEmpty()}
-								<Icon color="gray" iconSize="big" icon="mdi:database-search-outline" />
-							{/snippet}
-							{#snippet loaderSuccess()}
-								<Icon color="green" iconSize="big" icon="clarity:success-standard-line" />
-							{/snippet}v
-						</Loader>
-					</div>
-				{/snippet}
-			</Demoer>
-		</DemoPage>
-		<DemoPage code={codeProps} component="Loading" title="Using props">
-			<Demoer {componentArgs} {parameters}>
-				{#snippet children({ activeParams })}
-					<div class="pos-rel h-large w-large">
-						<Loader
-							{...activeParams}
-							emptyIcon="mdi:database-search-outline"
-							errorIcon="mdi:alert-circle-outline"
-							loadingIcon="mdi:loading"
-							messages={{
-								loading: 'Loading dataset',
-								error: 'An error occurred',
-								empty: 'Empty results',
-								success: 'Success !'
-							}}
-							successIcon="clarity:success-standard-line"
-						/>
-					</div>
-				{/snippet}
-			</Demoer>
-		</DemoPage>
-	</div>
-</ComponentDemo>
+<script lang="ts">
+	import Loader from './Loader.svelte';
+
+	/* demo */
+	import ComponentDemo from '../../base/demoer/DemoerComponent.svelte';
+	import Demoer from '../../base/demoer/Demoer.svelte';
+	import DemoPage from '../../base/demoer/DemoPage.svelte';
+	import Icon from '../../base/icon/Icon.svelte';
+	import type { LoaderProps } from './types.js';
+	/* demo */
+
+	import { parameters, componentArgs } from './types.js';
+
+	let codeSlot = `
+<Loader onstatuschange={() => {}}>
+	{#snippet loaderLoading()}
+		<Icon color="orange" fontSize="big" icon="mdi:loading" rotate />
+	{/snippet}
+	{#snippet loaderError()}
+		<Icon color="red" fontSize="big" icon="mdi:alert-circle-outline" />
+	{/snippet}
+	{#snippet loaderEmpty()}
+		<Icon color="gray" fontSize="big" icon="mdi:database-search-outline" />
+	{/snippet}
+	{#snippet loaderSuccess()}
+		<Icon color="green" fontSize="big" icon="clarity:success-standard-line" />
+	{/snippet}v
+</Loader>`;
+
+	let codeProps = `
+<Loader
+    status={"loading"}
+    messages={{
+        loading: 'Loading dataset',
+        error  : 'An error occurred',
+        empty  : 'Empty results',
+        success: 'Success !'
+      }}
+    emptyIcon="mdi:database-search-outline"
+    errorIcon="mdi:alert-circle-outline"
+    loadingIcon="mdi:loading"
+    successIcon="clarity:success-standard-line" />`;
+</script>
+
+<ComponentDemo
+	cite="And suddenly, in this dark cabinet, i realized that the most pleasant
+	phase was that of waiting.<br /> D. Pentes, 824"
+	component="Loader"
+>
+	<div class="flex-v gap-large">
+		<DemoPage code={codeSlot} component="Loading">
+			<Demoer {componentArgs} {parameters}>
+				{#snippet children({ activeParams })}
+					<div class="pos-rel h-large w-large">
+						<Loader {...activeParams} on:status:change={() => {}}>
+							{#snippet loaderLoading()}
+								<Icon color="orange" iconSize="big" icon="mdi:loading" rotate />
+							{/snippet}
+							{#snippet loaderError()}
+								<Icon color="red" iconSize="big" icon="mdi:alert-circle-outline" />
+							{/snippet}
+							{#snippet loaderEmpty()}
+								<Icon color="gray" iconSize="big" icon="mdi:database-search-outline" />
+							{/snippet}
+							{#snippet loaderSuccess()}
+								<Icon color="green" iconSize="big" icon="clarity:success-standard-line" />
+							{/snippet}v
+						</Loader>
+					</div>
+				{/snippet}
+			</Demoer>
+		</DemoPage>
+		<DemoPage code={codeProps} component="Loading" title="Using props">
+			<Demoer {componentArgs} {parameters}>
+				{#snippet children({ activeParams })}
+					<div class="pos-rel h-large w-large">
+						<Loader
+							{...activeParams}
+							emptyIcon="mdi:database-search-outline"
+							errorIcon="mdi:alert-circle-outline"
+							loadingIcon="mdi:loading"
+							messages={{
+								loading: 'Loading dataset',
+								error: 'An error occurred',
+								empty: 'Empty results',
+								success: 'Success !'
+							}}
+							successIcon="clarity:success-standard-line"
+						/>
+					</div>
+				{/snippet}
+			</Demoer>
+		</DemoPage>
+	</div>
+</ComponentDemo>

package/dist/data/loader/Loader.preview.svelte

@@ -1,7 +1,7 @@
-<script lang="ts">
-	import Loader from './Loader.svelte';
-</script>
-
-<div class="pos-rel">
-	<Loader isLoading={true} />
-</div>
+<script lang="ts">
+	import Loader from './Loader.svelte';
+</script>
+
+<div class="pos-rel">
+	<Loader isLoading={true} />
+</div>

package/dist/data/loader/Loader.svelte

@@ -1,101 +1,101 @@
-<script lang="ts">
-	import { fade } from 'svelte/transition';
-	import Icon from '../../base/icon/Icon.svelte';
-	import type { LoaderProps } from './types.js';
-	import Slotted from '../../utils/slotted/Slotted.svelte';
-	import type { ExpandProps } from '../../types/index.js';
-
-	let {
-		class: className = '',
-		element = $bindable(),
-		style = '',
-		status,
-		showSuccess = true,
-		loadingIcon = 'mdi:loading',
-		errorIcon = 'mdi:alert-circle-outline',
-		emptyIcon = 'mdi:database-search-outline',
-		successIcon = 'clarity:success-standard-line',
-		isLoading = false,
-		isError = false,
-		isEmpty = false,
-		message,
-		messages = {
-			loading: 'Loading',
-			error: 'An error occurred',
-			empty: 'Empty results',
-			success: 'Success'
-		},
-		loaderLoading,
-		loaderError,
-		loaderEmpty,
-		loaderMessage,
-		loaderSuccess,
-		children,
-		...rest
-	}: ExpandProps<LoaderProps> = $props();
-
-	const msgType = $derived(() =>
-		isLoading ? 'loading' : isError ? 'error' : isEmpty ? 'empty' : ''
-	);
-
-	let finalMessage = $derived(() => message ?? messages?.[status] ?? messages?.[msgType]);
-
-	let timer: any;
-	$effect(() => {
-		if (status === 'success') {
-			if (!showSuccess) status = undefined;
-			else {
-				clearTimeout(timer);
-				timer = setTimeout(() => {
-					status = undefined;
-				}, 1250);
-			}
-		} else {
-			clearTimeout(timer);
-		}
-	});
-</script>
-
-{#key status}
-	{#if status || isLoading || isError || isEmpty}
-		<div bind:this={element} transition:fade|global class="loader {className}" {style} {...rest}>
-			<div class="loader-box">
-				{#if status === 'loading' || isLoading}
-					<Slotted child={loaderLoading}>
-						<Icon
-							style="color:var(--sld-color-primary)"
-							icon={loadingIcon}
-							iconSize="medium"
-							rotate
-						/>
-					</Slotted>
-				{/if}
-				{#if status === 'error' || isError}
-					<Slotted child={loaderError}>
-						<Icon style="color:orange;" icon={errorIcon} iconSize="medium" />
-					</Slotted>
-				{/if}
-				{#if showSuccess && status === 'success'}
-					<Slotted child={loaderSuccess}>
-						<Icon style="color:green;" icon={successIcon} iconSize="medium" />
-					</Slotted>
-				{/if}
-				{#if status === 'empty' || isEmpty}
-					<Slotted child={loaderEmpty}>
-						<Icon icon={emptyIcon} iconSize="medium" />
-					</Slotted>
-				{/if}
-
-				{#if Boolean(finalMessage)}
-					<Slotted child={loaderMessage}>
-						<div class="loader-message">{finalMessage}</div>
-					</Slotted>
-				{/if}
-			</div>
-		</div>
-	{/if}
-{/key}
-
+<script lang="ts">
+	import { fade } from 'svelte/transition';
+	import Icon from '../../base/icon/Icon.svelte';
+	import type { LoaderProps } from './types.js';
+	import Slotted from '../../utils/slotted/Slotted.svelte';
+	import type { ExpandProps } from '../../types/index.js';
+
+	let {
+		class: className = '',
+		element = $bindable(),
+		style = '',
+		status,
+		showSuccess = true,
+		loadingIcon = 'mdi:loading',
+		errorIcon = 'mdi:alert-circle-outline',
+		emptyIcon = 'mdi:database-search-outline',
+		successIcon = 'clarity:success-standard-line',
+		isLoading = false,
+		isError = false,
+		isEmpty = false,
+		message,
+		messages = {
+			loading: 'Loading',
+			error: 'An error occurred',
+			empty: 'Empty results',
+			success: 'Success'
+		},
+		loaderLoading,
+		loaderError,
+		loaderEmpty,
+		loaderMessage,
+		loaderSuccess,
+		children,
+		...rest
+	}: ExpandProps<LoaderProps> = $props();
+
+	const msgType = $derived(() =>
+		isLoading ? 'loading' : isError ? 'error' : isEmpty ? 'empty' : ''
+	);
+
+	let finalMessage = $derived(() => message ?? messages?.[status] ?? messages?.[msgType]);
+
+	let timer: any;
+	$effect(() => {
+		if (status === 'success') {
+			if (!showSuccess) status = undefined;
+			else {
+				clearTimeout(timer);
+				timer = setTimeout(() => {
+					status = undefined;
+				}, 1250);
+			}
+		} else {
+			clearTimeout(timer);
+		}
+	});
+</script>
+
+{#key status}
+	{#if status || isLoading || isError || isEmpty}
+		<div bind:this={element} transition:fade|global class="loader {className}" {style} {...rest}>
+			<div class="loader-box">
+				{#if status === 'loading' || isLoading}
+					<Slotted child={loaderLoading}>
+						<Icon
+							style="color:var(--sld-color-primary)"
+							icon={loadingIcon}
+							iconSize="medium"
+							rotate
+						/>
+					</Slotted>
+				{/if}
+				{#if status === 'error' || isError}
+					<Slotted child={loaderError}>
+						<Icon style="color:orange;" icon={errorIcon} iconSize="medium" />
+					</Slotted>
+				{/if}
+				{#if showSuccess && status === 'success'}
+					<Slotted child={loaderSuccess}>
+						<Icon style="color:green;" icon={successIcon} iconSize="medium" />
+					</Slotted>
+				{/if}
+				{#if status === 'empty' || isEmpty}
+					<Slotted child={loaderEmpty}>
+						<Icon icon={emptyIcon} iconSize="medium" />
+					</Slotted>
+				{/if}
+
+				{#if Boolean(finalMessage)}
+					<Slotted child={loaderMessage}>
+						<div class="loader-message">{finalMessage}</div>
+					</Slotted>
+				{/if}
+			</div>
+		</div>
+	{/if}
+{/key}
+
 <style>:root {
   --loader-background-color: var(--sld-color-background-alpha-mid);
   --loader-box-shadow: var(--sld-elevation-1);
@@ -141,4 +141,4 @@
   padding: var(--loader-message-padding);
   display: inline-block;
   box-shadow: var(--loader-box-shadow);
-}</style>
+}</style>

package/dist/data/loader/loader.scss

@@ -1,50 +1,50 @@
-@use "../../styles/slotui-mixins.scss";
-
-:root {
-    --loader-background-color: var(--sld-color-background-alpha-mid);
-    --loader-box-shadow: var(--sld-elevation-1);
-    --loader-radius: var(--sld-radius-tiny);
-    --loader-border: var(--sld-color-foreground-alpha-high);
-    --loader-message-border-radius: var(--sld-radius-small);
-    --loader-message-border-bottom: var(--sld-color-primary);
-    --loader-message-padding: var(--box-density-1) var(--box-density-2);
-}
-
-.loader {
-    position: absolute;
-    top: 0;
-    background-color: var(--loader-background-color);
-    height: 100%;
-    min-width: 128px;
-    max-width: 100%;
-    display: inline-flex;
-    flex-direction: column;
-    align-items: center;
-    justify-content: center;
-    left: 50%;
-    transform: translate(-50%, 0);
-
-    .loader-box {
-        box-shadow: var(--loader-box-shadow);
-        border-radius: var(--loader-radius);
-        border: 1px solid var(--loader-border);
-        padding: 1rem 0;
-        min-width: 128px;
-        width: 100%;
-        margin: 1rem;
-        text-align: center;
-        background-color: var(--loader-background-color);
-        display: flex;
-        flex-direction: column;
-        align-items: center;
-
-        .loader-message {
-            border-radius: var(--loader-message-border-radius);
-            border-bottom: 1px solid;
-            border-color: var(--loader-message-border-bottom);
-            padding: var(--loader-message-padding);
-            display: inline-block;
-            box-shadow: var(--loader-box-shadow);
-        }
-    }
-}
+@use "../../styles/slotui-mixins.scss";
+
+:root {
+    --loader-background-color: var(--sld-color-background-alpha-mid);
+    --loader-box-shadow: var(--sld-elevation-1);
+    --loader-radius: var(--sld-radius-tiny);
+    --loader-border: var(--sld-color-foreground-alpha-high);
+    --loader-message-border-radius: var(--sld-radius-small);
+    --loader-message-border-bottom: var(--sld-color-primary);
+    --loader-message-padding: var(--box-density-1) var(--box-density-2);
+}
+
+.loader {
+    position: absolute;
+    top: 0;
+    background-color: var(--loader-background-color);
+    height: 100%;
+    min-width: 128px;
+    max-width: 100%;
+    display: inline-flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    left: 50%;
+    transform: translate(-50%, 0);
+
+    .loader-box {
+        box-shadow: var(--loader-box-shadow);
+        border-radius: var(--loader-radius);
+        border: 1px solid var(--loader-border);
+        padding: 1rem 0;
+        min-width: 128px;
+        width: 100%;
+        margin: 1rem;
+        text-align: center;
+        background-color: var(--loader-background-color);
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+
+        .loader-message {
+            border-radius: var(--loader-message-border-radius);
+            border-bottom: 1px solid;
+            border-color: var(--loader-message-border-bottom);
+            padding: var(--loader-message-padding);
+            display: inline-block;
+            box-shadow: var(--loader-box-shadow);
+        }
+    }
+}