@medyll/idae-slotui-svelte 0.119.0 → 0.121.0

package/dist/ui/startMenu/boot-menu.scss

@@ -1,86 +1,86 @@
-@use "../../styles/slotui-mixins.scss";
-
-:root {
-    --boot-menu-background-color: rgba(90, 67, 52, 0.9);
-    --boot-menu-backdrop-filter: blur(10px);
-    --boot-menu-color: white;
-    --boot-menu-max-height: 600px;
-    --boot-menu-height: 80%;
-    --boot-menu-box-shadow: 0px 0px 3px 1px rgba(51, 51, 51, 0.5);
-    --boot-menu-z-index: 3000;
-    --boot-menu-margin-top: 1rem;
-    --boot-menu-button-pole-border-radius: var(--sld-radius-small);
-    --boot-menu-button-pole-border: 1px solid rgba(208, 191, 151, 0.3);
-    --boot-menu-button-pole-padding: var(--sld-pad-tiny);
-    --boot-menu-grid-icon-gap: 10px;
-    --boot-menu-grid-icon-template-columns: repeat(auto-fill, minmax(30%, auto));
-    --boot-menu-grid-icon-bis-template-columns: repeat(auto-fill, minmax(15%, auto));
-    --boot-menu-grid-icon-mid-template-columns: repeat(auto-fill, minmax(49%, auto));
-    --boot-menu-grid-one-template-columns: repeat(auto-fill, minmax(100%, auto));
-    --boot-menu-bottom-bar-box-shadow: 0px 0px 3px 1px rgba(51, 51, 51, 0.5);
-    --boot-menu-bottom-bar-padding: var(--sld-pad-small) var(--sld-pad-medium);
-}
-
-.boot-menu {
-    background-color: var(--boot-menu-background-color);
-    backdrop-filter: var(--boot-menu-backdrop-filter);
-    color: var(--boot-menu-color);
-    display: flex;
-    flex-direction: column;
-    max-height: var(--boot-menu-max-height);
-    height: var(--boot-menu-height);
-    left: 50%;
-    transform: translate(-50%, 0);
-    box-shadow: var(--boot-menu-box-shadow);
-    overflow: hidden;
-    z-index: var(--boot-menu-z-index);
-    position: absolute;
-    margin-top: var(--boot-menu-margin-top);
-
-    .boot-menuContent {
-        flex: 1;
-        overflow-y: auto;
-        overflow-x: hidden;
-    }
-
-    .buttonPole {
-        border-radius: var(--boot-menu-button-pole-border-radius);
-        border: var(--boot-menu-button-pole-border);
-        padding: var(--boot-menu-button-pole-padding);
-    }
-
-    .gridIcon {
-        width: 100%;
-        display: grid;
-        grid-gap: var(--boot-menu-grid-icon-gap);
-        grid-template-columns: var(--boot-menu-grid-icon-template-columns);
-    }
-
-    .gridIconBis {
-        width: 100%;
-        display: grid;
-        grid-gap: var(--boot-menu-grid-icon-gap);
-        grid-template-columns: var(--boot-menu-grid-icon-bis-template-columns);
-    }
-
-    .gridIconMid {
-        width: 100%;
-        display: grid;
-        grid-gap: var(--boot-menu-grid-icon-gap);
-        grid-template-columns: var(--boot-menu-grid-icon-mid-template-columns);
-    }
-
-    .gridOne {
-        width: 100%;
-        display: grid;
-        grid-gap: var(--boot-menu-grid-icon-gap);
-        grid-template-columns: var(--boot-menu-grid-one-template-columns);
-    }
-
-    .bottomBar {
-        box-shadow: var(--boot-menu-bottom-bar-box-shadow);
-        display: flex;
-        align-items: end;
-        padding: var(--boot-menu-bottom-bar-padding);
-    }
-}
+@use "../../styles/slotui-mixins.scss";
+
+:root {
+    --boot-menu-background-color: rgba(90, 67, 52, 0.9);
+    --boot-menu-backdrop-filter: blur(10px);
+    --boot-menu-color: white;
+    --boot-menu-max-height: 600px;
+    --boot-menu-height: 80%;
+    --boot-menu-box-shadow: 0px 0px 3px 1px rgba(51, 51, 51, 0.5);
+    --boot-menu-z-index: 3000;
+    --boot-menu-margin-top: 1rem;
+    --boot-menu-button-pole-border-radius: var(--sld-radius-small);
+    --boot-menu-button-pole-border: 1px solid rgba(208, 191, 151, 0.3);
+    --boot-menu-button-pole-padding: var(--sld-pad-tiny);
+    --boot-menu-grid-icon-gap: 10px;
+    --boot-menu-grid-icon-template-columns: repeat(auto-fill, minmax(30%, auto));
+    --boot-menu-grid-icon-bis-template-columns: repeat(auto-fill, minmax(15%, auto));
+    --boot-menu-grid-icon-mid-template-columns: repeat(auto-fill, minmax(49%, auto));
+    --boot-menu-grid-one-template-columns: repeat(auto-fill, minmax(100%, auto));
+    --boot-menu-bottom-bar-box-shadow: 0px 0px 3px 1px rgba(51, 51, 51, 0.5);
+    --boot-menu-bottom-bar-padding: var(--sld-pad-small) var(--sld-pad-medium);
+}
+
+.boot-menu {
+    background-color: var(--boot-menu-background-color);
+    backdrop-filter: var(--boot-menu-backdrop-filter);
+    color: var(--boot-menu-color);
+    display: flex;
+    flex-direction: column;
+    max-height: var(--boot-menu-max-height);
+    height: var(--boot-menu-height);
+    left: 50%;
+    transform: translate(-50%, 0);
+    box-shadow: var(--boot-menu-box-shadow);
+    overflow: hidden;
+    z-index: var(--boot-menu-z-index);
+    position: absolute;
+    margin-top: var(--boot-menu-margin-top);
+
+    .boot-menuContent {
+        flex: 1;
+        overflow-y: auto;
+        overflow-x: hidden;
+    }
+
+    .buttonPole {
+        border-radius: var(--boot-menu-button-pole-border-radius);
+        border: var(--boot-menu-button-pole-border);
+        padding: var(--boot-menu-button-pole-padding);
+    }
+
+    .gridIcon {
+        width: 100%;
+        display: grid;
+        grid-gap: var(--boot-menu-grid-icon-gap);
+        grid-template-columns: var(--boot-menu-grid-icon-template-columns);
+    }
+
+    .gridIconBis {
+        width: 100%;
+        display: grid;
+        grid-gap: var(--boot-menu-grid-icon-gap);
+        grid-template-columns: var(--boot-menu-grid-icon-bis-template-columns);
+    }
+
+    .gridIconMid {
+        width: 100%;
+        display: grid;
+        grid-gap: var(--boot-menu-grid-icon-gap);
+        grid-template-columns: var(--boot-menu-grid-icon-mid-template-columns);
+    }
+
+    .gridOne {
+        width: 100%;
+        display: grid;
+        grid-gap: var(--boot-menu-grid-icon-gap);
+        grid-template-columns: var(--boot-menu-grid-one-template-columns);
+    }
+
+    .bottomBar {
+        box-shadow: var(--boot-menu-bottom-bar-box-shadow);
+        display: flex;
+        align-items: end;
+        padding: var(--boot-menu-bottom-bar-padding);
+    }
+}

package/dist/ui/taskbar/TaskBarContent.svelte

@@ -1,20 +1,20 @@
-<script lang="ts">
-	import { wStore } from '../window/store.js';
-	import IconButton from '../../controls/button/IconButton.svelte';
-	import Slotted from '../../utils/slotted/Slotted.svelte';
-	let { children, ...rest } = $props();
-	function toggleWindow(frameId: string) {
-		$wStore.activeFrame = frameId;
-	}
-</script>
-
-{#each Object.keys($wStore.instances ?? {}) as key}
-	<IconButton
-		onclick={() => {
-			toggleWindow(key);
-		}}
-		style="color:white;font-size: large"
-		icon="home"
-	/>
-{/each}
-<Slotted child={children}></Slotted>
+<script lang="ts">
+	import { wStore } from '../window/store.js';
+	import IconButton from '../../controls/button/IconButton.svelte';
+	import Slotted from '../../utils/slotted/Slotted.svelte';
+	let { children, ...rest } = $props();
+	function toggleWindow(frameId: string) {
+		$wStore.activeFrame = frameId;
+	}
+</script>
+
+{#each Object.keys($wStore.instances ?? {}) as key}
+	<IconButton
+		onclick={() => {
+			toggleWindow(key);
+		}}
+		style="color:white;font-size: large"
+		icon="home"
+	/>
+{/each}
+<Slotted child={children}></Slotted>

package/dist/ui/taskbar/Taskbar.svelte

@@ -1,28 +1,28 @@
-<script lang="ts">
-	import type { CommonProps } from '../../types/index.js';
-	import Slotted from '../../utils/slotted/Slotted.svelte';
-	import type { Snippet } from 'svelte';
-	import type { TaskbarProps } from './types.js';
-
-	let {
-		element,
-		style,
-		class: className,
-		taskBarLeft,
-		taskBarRight,
-		children,
-		...restProps
-	}: TaskbarProps = $props();
-</script>
-
-<div class="taskbar {className}" {...restProps}>
-	<Slotted child={taskBarLeft} />
-	<div class="taskbar-main">
-		<Slotted child={children} />
-	</div>
-	<Slotted child={taskBarRight} />
-</div>
-
+<script lang="ts">
+	import type { CommonProps } from '../../types/index.js';
+	import Slotted from '../../utils/slotted/Slotted.svelte';
+	import type { Snippet } from 'svelte';
+	import type { TaskbarProps } from './types.js';
+
+	let {
+		element,
+		style,
+		class: className,
+		taskBarLeft,
+		taskBarRight,
+		children,
+		...restProps
+	}: TaskbarProps = $props();
+</script>
+
+<div class="taskbar {className}" {...restProps}>
+	<Slotted child={taskBarLeft} />
+	<div class="taskbar-main">
+		<Slotted child={children} />
+	</div>
+	<Slotted child={taskBarRight} />
+</div>
+
 <style>:root {
   --taskbar-grid-gap: var(--sld-gap-tiny);
   --taskbar-background-color: rgba(255, 255, 255, 0.5);
@@ -47,4 +47,4 @@
 }
 .taskbar-main {
   flex: 1;
-}</style>
+}</style>

package/dist/ui/taskbar/taskbar.scss

@@ -1,28 +1,28 @@
-@use "../../styles/slotui-mixins.scss";
-
-:root {
-    --taskbar-grid-gap: var(--sld-gap-tiny);
-    --taskbar-background-color: rgba(255, 255, 255, 0.5);
-    --taskbar-backdrop-filter: blur(20px);
-    --taskbar-min-height: 48px;
-    --taskbar-border-bottom: rgba(255, 255, 255, 0.2);
-    --taskbar-box-shadow: var(--sld-elevation-3);
-}
-
-.taskbar {
-    display: flex;
-    align-items: center;
-    grid-gap: var(--taskbar-grid-gap);
-    background-size: auto;
-    background-color: var(--taskbar-background-color);
-    --moz-backdrop-filter: var(--taskbar-backdrop-filter);
-    backdrop-filter: var(--taskbar-backdrop-filter);
-    min-height: var(--taskbar-min-height);
-    border-bottom: 1px solid var(--taskbar-border-bottom);
-    box-shadow: var(--taskbar-box-shadow);
-    box-sizing: border-box;
-
-    &-main {
-        flex: 1;
-    }
-}
+@use "../../styles/slotui-mixins.scss";
+
+:root {
+    --taskbar-grid-gap: var(--sld-gap-tiny);
+    --taskbar-background-color: rgba(255, 255, 255, 0.5);
+    --taskbar-backdrop-filter: blur(20px);
+    --taskbar-min-height: 48px;
+    --taskbar-border-bottom: rgba(255, 255, 255, 0.2);
+    --taskbar-box-shadow: var(--sld-elevation-3);
+}
+
+.taskbar {
+    display: flex;
+    align-items: center;
+    grid-gap: var(--taskbar-grid-gap);
+    background-size: auto;
+    background-color: var(--taskbar-background-color);
+    --moz-backdrop-filter: var(--taskbar-backdrop-filter);
+    backdrop-filter: var(--taskbar-backdrop-filter);
+    min-height: var(--taskbar-min-height);
+    border-bottom: 1px solid var(--taskbar-border-bottom);
+    box-shadow: var(--taskbar-box-shadow);
+    box-sizing: border-box;
+
+    &-main {
+        flex: 1;
+    }
+}

package/dist/ui/themeswitcher/ThemeSwitcher.svelte

@@ -1,18 +1,18 @@
-<script lang="ts">
-	import IconButton from '../../controls/button/IconButton.svelte';
-
-	function switchThemeMode() {
-		const themeMode = localStorage.getItem('themeMode') ?? 'light';
-		const newThemeMode = themeMode === 'light' ? 'dark' : 'light';
-		document.body.setAttribute('data-theme', newThemeMode);
-		localStorage.setItem('themeMode', newThemeMode);
-	}
-</script>
-
-<IconButton
-	variant="naked"
-	{...$$restProps}
-	onclick={() => {
-		switchThemeMode();
-	}}
-/>
+<script lang="ts">
+	import IconButton from '../../controls/button/IconButton.svelte';
+
+	function switchThemeMode() {
+		const themeMode = localStorage.getItem('themeMode') ?? 'light';
+		const newThemeMode = themeMode === 'light' ? 'dark' : 'light';
+		document.body.setAttribute('data-theme', newThemeMode);
+		localStorage.setItem('themeMode', newThemeMode);
+	}
+</script>
+
+<IconButton
+	variant="naked"
+	{...$$restProps}
+	onclick={() => {
+		switchThemeMode();
+	}}
+/>

package/dist/ui/toast/Toast.demo.svelte

@@ -1,19 +1,19 @@
-<script lang="ts">
-	import Toast from './Toast.svelte';
-
-	/* demo */
-	import { defaultsArgs, defaultsArgsFromProps } from '../../base/demoer/demoer.utils.js';
-	import ComponentDemo from '../../base/demoer/DemoerComponent.svelte';
-	import DemoerCode from '../../base/demoer/DemoerCode.svelte';
-	import Demoer from '../../base/demoer/Demoer.svelte';
-	import DemoPage from '../../base/demoer/DemoPage.svelte';
-	import Icon from '../../base/icon/Icon.svelte';
-	import { uiPresets } from '../../utils/engine/presets.js';
-	import Toaster from './Toaster.svelte';
-	/* demo */
-
-	let codeSlot = ` `;
-</script>
-
-<Toast autoClose={true}>toast</Toast>
-<Toast>toast</Toast>
+<script lang="ts">
+	import Toast from './Toast.svelte';
+
+	/* demo */
+	import { defaultsArgs, defaultsArgsFromProps } from '../../base/demoer/demoer.utils.js';
+	import ComponentDemo from '../../base/demoer/DemoerComponent.svelte';
+	import DemoerCode from '../../base/demoer/DemoerCode.svelte';
+	import Demoer from '../../base/demoer/Demoer.svelte';
+	import DemoPage from '../../base/demoer/DemoPage.svelte';
+	import Icon from '../../base/icon/Icon.svelte';
+	import { uiPresets } from '../../utils/engine/presets.js';
+	import Toaster from './Toaster.svelte';
+	/* demo */
+
+	let codeSlot = ` `;
+</script>
+
+<Toast autoClose={true}>toast</Toast>
+<Toast>toast</Toast>

package/dist/ui/toast/Toast.svelte

@@ -1,60 +1,60 @@
-<script lang="ts">
-	import Box from '../../base/box/Box.svelte';
-	import { toastStore } from './store.js';
-	import { mount, onMount } from 'svelte';
-	import Toaster from './Toaster.svelte';
-	import type { ToastProps } from './types.js';
-	import Slotted from '../../utils/slotted/Slotted.svelte';
-
-	let {
-		class: className = '',
-		element = $bindable(),
-		style = '',
-		toastId = crypto.randomUUID() as string,
-		autoClose = false,
-		autoCloseDelay = 5000,
-		component,
-		componentProps,
-		toasterId = 'defaultToasterRoot',
-		children,
-		...rest
-	}: ToastProps = $props();
-
-	let isOpen: boolean = true;
-	// ensure is in store, not to show twice
-	if (!$toastStore[toastId]) {
-		$toastStore[toastId] = {
-			toastId,
-			autoClose,
-			autoCloseDelay,
-			component,
-			componentProps
-		};
-	}
-
-	onMount(() => {
-		// check parentNode toasterId
-		if (!document.body.querySelector('[data-toasterId=' + toasterId + ']')) {
-			let a  = mount(Toaster, { target: document.body, props: { toasterId,children:undefined } });
- 
-		}
-
-		document?.body
-			.querySelector('[data-toasterId="' + toasterId + '"]')
-			?.appendChild(document.body.querySelector('[data-toastId="' + toastId + '"]'));
-	});
-
-	$effect(() => {
-		if (autoClose) {
-			setTimeout(() => {
-				isOpen = false;
-			}, autoCloseDelay ?? 5000);
-		}
-	});
-</script>
-
-<Box bind:element style="width:auto;" data-toastId={toastId} {isOpen} {...rest}>
-	<Slotted child={children} />
-</Box>
-
-<style></style>
+<script lang="ts">
+	import Box from '../../base/box/Box.svelte';
+	import { toastStore } from './store.js';
+	import { mount, onMount } from 'svelte';
+	import Toaster from './Toaster.svelte';
+	import type { ToastProps } from './types.js';
+	import Slotted from '../../utils/slotted/Slotted.svelte';
+
+	let {
+		class: className = '',
+		element = $bindable(),
+		style = '',
+		toastId = crypto.randomUUID() as string,
+		autoClose = false,
+		autoCloseDelay = 5000,
+		component,
+		componentProps,
+		toasterId = 'defaultToasterRoot',
+		children,
+		...rest
+	}: ToastProps = $props();
+
+	let isOpen: boolean = true;
+	// ensure is in store, not to show twice
+	if (!$toastStore[toastId]) {
+		$toastStore[toastId] = {
+			toastId,
+			autoClose,
+			autoCloseDelay,
+			component,
+			componentProps
+		};
+	}
+
+	onMount(() => {
+		// check parentNode toasterId
+		if (!document.body.querySelector('[data-toasterId=' + toasterId + ']')) {
+			let a  = mount(Toaster, { target: document.body, props: { toasterId,children:undefined } });
+ 
+		}
+
+		document?.body
+			.querySelector('[data-toasterId="' + toasterId + '"]')
+			?.appendChild(document.body.querySelector('[data-toastId="' + toastId + '"]'));
+	});
+
+	$effect(() => {
+		if (autoClose) {
+			setTimeout(() => {
+				isOpen = false;
+			}, autoCloseDelay ?? 5000);
+		}
+	});
+</script>
+
+<Box bind:element style="width:auto;" data-toastId={toastId} {isOpen} {...rest}>
+	<Slotted child={children} />
+</Box>
+
+<style></style>

package/dist/ui/toast/Toaster.svelte

@@ -1,18 +1,18 @@
-<!--
-Wrapper for the toaster family
-called automatically
--->
-<script lang="ts">
-	import Slotted from '../../utils/slotted/Slotted.svelte';
-
-	let { toasterId = 'defaultToasterRoot', children, ...rest } = $props();
-</script>
-
-<div
-	style="position:fixed;bottom:0;right:0;margin:1rem;"
-	class="flex-v gap-tiny"
-	{...rest}
-	data-toasterId={toasterId}
->
-	<Slotted child={children} />
-</div>
+<!--
+Wrapper for the toaster family
+called automatically
+-->
+<script lang="ts">
+	import Slotted from '../../utils/slotted/Slotted.svelte';
+
+	let { toasterId = 'defaultToasterRoot', children, ...rest } = $props();
+</script>
+
+<div
+	style="position:fixed;bottom:0;right:0;margin:1rem;"
+	class="flex-v gap-tiny"
+	{...rest}
+	data-toasterId={toasterId}
+>
+	<Slotted child={children} />
+</div>