@medyll/idae-slotui-svelte 0.122.1 → 0.123.0

package/dist/base/avatar/Avatar.demo.svelte

@@ -1,41 +1,41 @@
-<script lang="ts">
-	import ComponentDemo from '../demoer/DemoerComponent.svelte';
-	import Demoer from '../demoer/Demoer.svelte';
-	import DemoPage from '../demoer/DemoPage.svelte';
-	import Icon from '../icon/Icon.svelte';
-	import Avatar from './Avatar.svelte';
-
-	import { parameters, componentArgs } from './types.js';
-
-	let code1 = `
-<Avatar>
-	<Icon icon={activeParams?.icon} />
-</Avatar>`;
-
-	let code2 = `
-	<Avatar icon={icon} />`;
-</script>
-
-<ComponentDemo
-	component="Avatar"
-	cite="If it's not you, then it's the other you, <br /> Emma Avatar you, 1652"
->
-	<div class="flex-v gap-large">
-		<DemoPage component="Rating" code={code1}>
-			<Demoer {parameters} {componentArgs}>
-				{#snippet children({ activeParams })}
-					<Avatar {...activeParams}>
-						<Icon icon={activeParams?.icon} />
-					</Avatar>
-				{/snippet}
-			</Demoer>
-		</DemoPage>
-		<DemoPage title="Without slots" code={code2} component="Rating">
-			<Demoer {parameters} {componentArgs}>
-				{#snippet children({ activeParams })}
-					<Avatar {...activeParams} icon={activeParams?.icon} />
-				{/snippet}
-			</Demoer>
-		</DemoPage>
-	</div>
-</ComponentDemo>
+<script lang="ts">
+	import ComponentDemo from '../demoer/DemoerComponent.svelte';
+	import Demoer from '../demoer/Demoer.svelte';
+	import DemoPage from '../demoer/DemoPage.svelte';
+	import Icon from '../icon/Icon.svelte';
+	import Avatar from './Avatar.svelte';
+
+	import { parameters, componentArgs } from './types.js';
+
+	let code1 = `
+<Avatar>
+	<Icon icon={activeParams?.icon} />
+</Avatar>`;
+
+	let code2 = `
+	<Avatar icon={icon} />`;
+</script>
+
+<ComponentDemo
+	component="Avatar"
+	cite="If it's not you, then it's the other you, <br /> Emma Avatar you, 1652"
+>
+	<div class="flex-v gap-large">
+		<DemoPage component="Rating" code={code1}>
+			<Demoer {parameters} {componentArgs}>
+				{#snippet children({ activeParams })}
+					<Avatar {...activeParams}>
+						<Icon icon={activeParams?.icon} />
+					</Avatar>
+				{/snippet}
+			</Demoer>
+		</DemoPage>
+		<DemoPage title="Without slots" code={code2} component="Rating">
+			<Demoer {parameters} {componentArgs}>
+				{#snippet children({ activeParams })}
+					<Avatar {...activeParams} icon={activeParams?.icon} />
+				{/snippet}
+			</Demoer>
+		</DemoPage>
+	</div>
+</ComponentDemo>

package/dist/base/avatar/Avatar.preview.svelte

@@ -1,6 +1,6 @@
-<script lang="ts">
-	import Icon from '../icon/Icon.svelte';
-	import Avatar from './Avatar.svelte';
-</script>
-
-<Avatar size="tiny" class="marg-4"><Icon icon="user" /></Avatar>
+<script lang="ts">
+	import Icon from '../icon/Icon.svelte';
+	import Avatar from './Avatar.svelte';
+</script>
+
+<Avatar size="tiny" class="marg-4"><Icon icon="user" /></Avatar>

package/dist/base/avatar/Avatar.svelte

@@ -1,67 +1,67 @@
-<script module lang="ts" >
-import type { Snippet } from "svelte";
-import type { CommonProps,ElementProps } from '../../types/index.js';
-
-export interface AvatarProps    {
-  /** icon name 	*/
-  icon?: string;
-  /**
-   * size of the avatar
-   */
-  size?: ElementProps["width"];
-  /**
-   * size of the icon
-   */
-  iconSize?: ElementProps["iconSize"];
-  element?: HTMLElement;
-  class?: string;
-  children?: Snippet;
-  avatarBadge?: Snippet;
-};
-
-</script>
-
-<script lang="ts">
-	import Icon from '../icon/Icon.svelte';
-	import type { ExpandProps } from '../../types/index.js'; 
-	import Content from '../../utils/content/Content.svelte';
-
-	let {
-		icon = 'icon-park-outline:avatar',
-		size,
-		iconSize,
-		class: className = '',
-		element = $bindable(),
-		children,
-		avatarBadge,
-		...rest
-	}: AvatarProps = $props();
-
-	const sizes = {
-		tiny: '2rem',
-		small: '4rem',
-		medium: '8rem',
-		large: '12rem',
-		full: '100%'
-	};
-</script>
-
-<Content
-	bind:element
-	tag="figure"
-	class="avatar {className}"
-	style="width:{sizes[size]};height:{sizes[size]}"
-	{...rest}
->
-	{@render avatarBadge?.()}
-
-	{#if children}
-		{@render children()}
-	{:else}
-		<Icon {icon} {iconSize} />
-	{/if}
-</Content>
-
+<script module lang="ts" >
+import type { Snippet } from "svelte";
+import type { CommonProps,ElementProps } from '../../types/index.js';
+
+export interface AvatarProps    {
+  /** icon name 	*/
+  icon?: string;
+  /**
+   * size of the avatar
+   */
+  size?: ElementProps["width"];
+  /**
+   * size of the icon
+   */
+  iconSize?: ElementProps["iconSize"];
+  element?: HTMLElement;
+  class?: string;
+  children?: Snippet;
+  avatarBadge?: Snippet;
+};
+
+</script>
+
+<script lang="ts">
+	import Icon from '../icon/Icon.svelte';
+	import type { ExpandProps } from '../../types/index.js'; 
+	import Content from '../../utils/content/Content.svelte';
+
+	let {
+		icon = 'icon-park-outline:avatar',
+		size,
+		iconSize,
+		class: className = '',
+		element = $bindable(),
+		children,
+		avatarBadge,
+		...rest
+	}: AvatarProps = $props();
+
+	const sizes = {
+		tiny: '2rem',
+		small: '4rem',
+		medium: '8rem',
+		large: '12rem',
+		full: '100%'
+	};
+</script>
+
+<Content
+	bind:element
+	tag="figure"
+	class="avatar {className}"
+	style="width:{sizes[size]};height:{sizes[size]}"
+	{...rest}
+>
+	{@render avatarBadge?.()}
+
+	{#if children}
+		{@render children()}
+	{:else}
+		<Icon {icon} {iconSize} />
+	{/if}
+</Content>
+
 <style>:root {
   --avatar-radius: var(--css-radius-small);
   --avatar-border-color: var(--sld-color-border);
@@ -74,4 +74,4 @@ export interface AvatarProps    {
   display: grid;
   place-items: center;
   overflow: hidden;
-}</style>
+}</style>

package/dist/base/avatar/avatar.scss

@@ -1,17 +1,17 @@
-// @import "../../styles/slotui-presets.scss";
-
-@use "../../styles/slotui-mixins.scss";
-
-:root {
-  --avatar-radius: var(--css-radius-small);
-  --avatar-border-color: var(--sld-color-border);
-}
-
-.avatar {
-  position: relative;
-  border-radius: var(--avatar-radius);
-  border: 1px solid var(--avatar-border-color);
-  display: grid;
-  place-items: center;
-  overflow: hidden;
-}
+// @import "../../styles/slotui-presets.scss";
+
+@use "../../styles/slotui-mixins.scss";
+
+:root {
+  --avatar-radius: var(--css-radius-small);
+  --avatar-border-color: var(--sld-color-border);
+}
+
+.avatar {
+  position: relative;
+  border-radius: var(--avatar-radius);
+  border: 1px solid var(--avatar-border-color);
+  display: grid;
+  place-items: center;
+  overflow: hidden;
+}

package/dist/base/backdrop/Backdrop.demo.svelte

@@ -1,49 +1,49 @@
-<script lang="ts">
-	import ComponentDemo from '../demoer/DemoerComponent.svelte';
-	import Demoer from '../demoer/Demoer.svelte';
-	import DemoPage from '../demoer/DemoPage.svelte';
-	import { defaultsArgs } from '../demoer/demoer.utils.js';
-	import Backdrop from './Backdrop.svelte';
-	import { BackdropDemoValues } from './types.js';
-
-	import { parameters, componentArgs } from './types.js';
-
-	let codeSlot = `
-	<Backdrop
-		flow="relative"
-		onclick={()=>{}}> 
-		<div class="flex-h flex-align-middle-center h-full">
-			<div class="pad-4 border radius-small theme-bg">
-				some content
-			</div>
-		</div>
-	</Backdrop>`;
-
-	let BackdropRef: Backdrop;
-</script>
-
-<ComponentDemo component="Backdrop">
-	<div class="flex-v gap-medium">
-		<DemoPage code={codeSlot} component="Backdrop">
-			<Demoer {parameters} {componentArgs}>
-				{#snippet children({ activeParams })}
-					<div style="width:350px;height:350px;position:realive;">
-						<Backdrop
-							bind:this={BackdropRef}
-							onclick={() => {
-								componentArgs.flow = 'relative';
-								BackdropRef.flow = 'relative';
-							}}
-							{...componentArgs}
-							{...activeParams}
-						>
-							<div class="flex-h flex-align-middle-center h-full">
-								<div class="pad-4 border radius-small theme-bg">some content</div>
-							</div>
-						</Backdrop>
-					</div>
-				{/snippet}
-			</Demoer>
-		</DemoPage>
-	</div>
-</ComponentDemo>
+<script lang="ts">
+	import ComponentDemo from '../demoer/DemoerComponent.svelte';
+	import Demoer from '../demoer/Demoer.svelte';
+	import DemoPage from '../demoer/DemoPage.svelte';
+	import { defaultsArgs } from '../demoer/demoer.utils.js';
+	import Backdrop from './Backdrop.svelte';
+	import { BackdropDemoValues } from './types.js';
+
+	import { parameters, componentArgs } from './types.js';
+
+	let codeSlot = `
+	<Backdrop
+		flow="relative"
+		onclick={()=>{}}> 
+		<div class="flex-h flex-align-middle-center h-full">
+			<div class="pad-4 border radius-small theme-bg">
+				some content
+			</div>
+		</div>
+	</Backdrop>`;
+
+	let BackdropRef: Backdrop;
+</script>
+
+<ComponentDemo component="Backdrop">
+	<div class="flex-v gap-medium">
+		<DemoPage code={codeSlot} component="Backdrop">
+			<Demoer {parameters} {componentArgs}>
+				{#snippet children({ activeParams })}
+					<div style="width:350px;height:350px;position:realive;">
+						<Backdrop
+							bind:this={BackdropRef}
+							onclick={() => {
+								componentArgs.flow = 'relative';
+								BackdropRef.flow = 'relative';
+							}}
+							{...componentArgs}
+							{...activeParams}
+						>
+							<div class="flex-h flex-align-middle-center h-full">
+								<div class="pad-4 border radius-small theme-bg">some content</div>
+							</div>
+						</Backdrop>
+					</div>
+				{/snippet}
+			</Demoer>
+		</DemoPage>
+	</div>
+</ComponentDemo>

package/dist/base/backdrop/Backdrop.svelte

@@ -1,80 +1,80 @@
-<script lang="ts">
-	import { fade } from 'svelte/transition';
-	import Icon from '../icon/Icon.svelte';
-	import type { CommonProps, ExpandProps } from '../../types/index.js';
-	import type { BackdropProps } from './types.js';
-	import Slotted from '../../utils/slotted/Slotted.svelte';
-
-	/** Backdrop controller */
-	export const actions = {
-		close: () => {
-			isOpen = false;
-		},
-		open: () => {
-			isOpen = true;
-		}
-	};
-
-	let {
-		class: className,
-		style,
-		flow = 'fixed',
-		autoClose = false,
-		isOpen = $bindable(),
-		onclick,
-		isLoading = false,
-		element,
-		elementContent,
-		elementContentInner,
-		component,
-		componentProps,
-		classes = {},
-		children,
-		backdropLoading
-	}: BackdropProps = $props();
-
-	$effect(() => {
-		element?.addEventListener('click', testAutoClose);
-		elementContentInner?.addEventListener('click', (event) => {
-			event.stopPropagation();
-		});
-	});
-
-	function testAutoClose() {
-		if (autoClose) isOpen = false;
-	}
-</script>
-
-{#if isOpen}
-	<div
-		in:fade|global
-		out:fade|global
-		bind:this={element}
-		class="backdrop {className}"
-		style="position:{flow};{style}"
-		role="dialog"
-		tabindex="-1"
-	>
-		<div bind:this={elementContent} class="backdrop-content">
-			{#if isLoading}
-				<div class="backdrop-content-loader">
-					<Slotted child={backdropLoading}>
-						<Icon icon="mdi:loading" iconSize="large" rotate />
-					</Slotted>
-				</div>
-			{:else}
-				<div class="backdrop-content-inner" bind:this={elementContentInner}>
-					{#if children}
-						{@render children?.()}
-					{:else if component}
-						<svelte:component this={component} {...componentProps} />
-					{/if}
-				</div>
-			{/if}
-		</div>
-	</div>
-{/if}
-
+<script lang="ts">
+	import { fade } from 'svelte/transition';
+	import Icon from '../icon/Icon.svelte';
+	import type { CommonProps, ExpandProps } from '../../types/index.js';
+	import type { BackdropProps } from './types.js';
+	import Slotted from '../../utils/slotted/Slotted.svelte';
+
+	/** Backdrop controller */
+	export const actions = {
+		close: () => {
+			isOpen = false;
+		},
+		open: () => {
+			isOpen = true;
+		}
+	};
+
+	let {
+		class: className,
+		style,
+		flow = 'fixed',
+		autoClose = false,
+		isOpen = $bindable(),
+		onclick,
+		isLoading = false,
+		element,
+		elementContent,
+		elementContentInner,
+		component,
+		componentProps,
+		classes = {},
+		children,
+		backdropLoading
+	}: BackdropProps = $props();
+
+	$effect(() => {
+		element?.addEventListener('click', testAutoClose);
+		elementContentInner?.addEventListener('click', (event) => {
+			event.stopPropagation();
+		});
+	});
+
+	function testAutoClose() {
+		if (autoClose) isOpen = false;
+	}
+</script>
+
+{#if isOpen}
+	<div
+		in:fade|global
+		out:fade|global
+		bind:this={element}
+		class="backdrop {className}"
+		style="position:{flow};{style}"
+		role="dialog"
+		tabindex="-1"
+	>
+		<div bind:this={elementContent} class="backdrop-content">
+			{#if isLoading}
+				<div class="backdrop-content-loader">
+					<Slotted child={backdropLoading}>
+						<Icon icon="mdi:loading" iconSize="large" rotate />
+					</Slotted>
+				</div>
+			{:else}
+				<div class="backdrop-content-inner" bind:this={elementContentInner}>
+					{#if children}
+						{@render children?.()}
+					{:else if component}
+						<svelte:component this={component} {...componentProps} />
+					{/if}
+				</div>
+			{/if}
+		</div>
+	</div>
+{/if}
+
 <style>:root {
   --backdrop-background-color: var(--sld-color-foreground-alpha-high);
 }
@@ -106,4 +106,4 @@
 }
 .backdrop-content-inner {
   display: inherit;
-}</style>
+}</style>

package/dist/base/backdrop/backdrop.scss

@@ -1,34 +1,34 @@
-@use "../../styles/slotui-mixins.scss";
-
-:root {
-    --backdrop-background-color: var(--sld-color-foreground-alpha-high);
-}
-
-.backdrop {
-    z-index: 10000;
-    height: 100%;
-    width: 100%;
-    top: 0;
-    left: 0;
-    &-content {
-        z-index: 10001;
-        position: absolute;
-        height: 100%;
-        width: 100%;
-        background-color: var(--backdrop-background-color);
-        backdrop-filter: blur(5px);
-        --moz-backdrop-filter: blur(5px);
-        display: flex;
-        align-items: center;
-        justify-content: center;
-        &-loader {
-            display: flex;
-            justify-content: center;
-            align-content: center;
-            align-items: center;
-        }
-        &-inner {
-            display: inherit;
-        }
-    }
-}
+@use "../../styles/slotui-mixins.scss";
+
+:root {
+    --backdrop-background-color: var(--sld-color-foreground-alpha-high);
+}
+
+.backdrop {
+    z-index: 10000;
+    height: 100%;
+    width: 100%;
+    top: 0;
+    left: 0;
+    &-content {
+        z-index: 10001;
+        position: absolute;
+        height: 100%;
+        width: 100%;
+        background-color: var(--backdrop-background-color);
+        backdrop-filter: blur(5px);
+        --moz-backdrop-filter: blur(5px);
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        &-loader {
+            display: flex;
+            justify-content: center;
+            align-content: center;
+            align-items: center;
+        }
+        &-inner {
+            display: inherit;
+        }
+    }
+}

package/dist/base/badge/Badge.svelte

@@ -1,33 +1,33 @@
-<script lang="ts">
-	import Slotted from '../../utils/slotted/Slotted.svelte';
-	import type { BadgeProps } from './types.js';
-
-	let {
-		value,
-		ceiling,
-		element,
-		position = { x: 'right', y: 'top' },
-		children
-	}: BadgeProps = $props();
-
-	const xM = {
-		left: 'left:0',
-		right: 'right:0',
-		center: 'left:50%;transformation:translate(-50%,0)'
-	};
-	const yM = {
-		top: 'top:0',
-		bottom: 'bottom:0',
-		center: 'top:50%;transformation:translate(0,-50%)'
-	};
-</script>
-
-{#if value > ceiling}
-	<div bind:this={element} class="badge" style="{xM[position.x]};{yM[position.y]}">
-		<Slotted child={children}>{value}</Slotted>
-	</div>
-{/if}
-
+<script lang="ts">
+	import Slotted from '../../utils/slotted/Slotted.svelte';
+	import type { BadgeProps } from './types.js';
+
+	let {
+		value,
+		ceiling,
+		element,
+		position = { x: 'right', y: 'top' },
+		children
+	}: BadgeProps = $props();
+
+	const xM = {
+		left: 'left:0',
+		right: 'right:0',
+		center: 'left:50%;transformation:translate(-50%,0)'
+	};
+	const yM = {
+		top: 'top:0',
+		bottom: 'bottom:0',
+		center: 'top:50%;transformation:translate(0,-50%)'
+	};
+</script>
+
+{#if value > ceiling}
+	<div bind:this={element} class="badge" style="{xM[position.x]};{yM[position.y]}">
+		<Slotted child={children}>{value}</Slotted>
+	</div>
+{/if}
+
 <style>:root {
   --badge-color-border: var(--sld-color-border);
 }
@@ -43,4 +43,4 @@
 }
 .badge .hidden {
   transform: scale(0, 0);
-}</style>
+}</style>