@medyll/idae-slotui-svelte 0.120.0 → 0.121.0

package/dist/ui/bootstrapp/BootStrApp.svelte

@@ -1,92 +1,92 @@
-<script lang="ts">
-	import ChromeFrameButtonList from '../chromeFrame/ChromeFrameButtonList.svelte';
-	import Frame from '../frame/Frame.svelte';
-	import Login from '../login/Login.svelte';
-	import Taskbar from '../taskbar/Taskbar.svelte';
-
-	import { link, push } from 'svelte-spa-router';
-
-	import Drawer from '../../navigation/drawer/Drawer.svelte';
-	import TopBar from '../toggleBar/ToggleBar.svelte';
-
-	import { page } from '$app/stores';
-	import Slotted from '../../utils/slotted/Slotted.svelte';
-	import MenuListItem from '../menuList/MenuListItem.svelte';
-	import MenuList from '../menuList/MenuList.svelte';
-
-	let { children, ...rest } = $props();
-
-	function signOut() {
-		push('/#login');
-	}
-</script>
-
-<svelte:head>
-	{#key $page.url}
-		<title>slotui</title>
-		<link href="https://fonts.googleapis.com/css?family=Rubik" rel="stylesheet" /> 
-	{/key}
-</svelte:head>
-red
-<Login showLogin={false}>
-	<div class="h-full overflow-hidden flex-v">
-		<Taskbar>
-			{#snippet taskBarLeft()}
-				<box class="pad-1">
-					<h5>slotui</h5>
-				</box>
-				<a href="/tooling" use:link>link </a>
-			{/snippet}
-			<ChromeFrameButtonList />
-			{#snippet taskBarRight()}<button onclick={signOut}>signOut</button>{/snippet}
-		</Taskbar>
-		<div id="layout" class="pos-rel flex-main overflow-hidden">
-			<!-- <Router {routes} /> -->
-			<Frame>
-				{#snippet drawerContent()}
-					nav left
-				{/snippet}
-				{#snippet frameContent()}
-					<Slotted child={children} />
-				{/snippet}
-			</Frame>
-			<!-- <ChromeFrameList
-				chromeListConfig={{
-					showCommandBar: false,
-					parent: '#layout',
-					onClose: (chromeFrame) => {
-						// on:chromeframe:close
-						push('/');
-						console.log('closed ', chromeFrame);
-					}
-				}}
-			/> -->
-		</div>
-		<Drawer isOpen={false}>
-			{#snippet drawerTop()}
-				<TopBar title="Drawer with menu bar ">
-					{#snippet menuBarSwitcher()}
-						<div class="pad-1">
-							<input placeholder="Search in Bar" style="width:100%;" type="text" />
-						</div>
-					{/snippet}
-				</TopBar>
-			{/snippet}
-			<div class="pad-2">
-				<MenuList onItemClick={() => {}}>
-					{#each [...Array(10)] as key, val}
-						<MenuListItem>
-							{#snippet menuItemFirst()}
-								<span>Some idioms {val}</span>
-								<span>secondary {val}</span>
-							{/snippet}
-							{#snippet menuItemLast()}
-								<span><button>fds de action</button></span>
-							{/snippet}
-						</MenuListItem>
-					{/each}
-				</MenuList>
-			</div>
-		</Drawer>
-	</div>
-</Login>
+<script lang="ts">
+	import ChromeFrameButtonList from '../chromeFrame/ChromeFrameButtonList.svelte';
+	import Frame from '../frame/Frame.svelte';
+	import Login from '../login/Login.svelte';
+	import Taskbar from '../taskbar/Taskbar.svelte';
+
+	import { link, push } from 'svelte-spa-router';
+
+	import Drawer from '../../navigation/drawer/Drawer.svelte';
+	import TopBar from '../toggleBar/ToggleBar.svelte';
+
+	import { page } from '$app/stores';
+	import Slotted from '../../utils/slotted/Slotted.svelte';
+	import MenuListItem from '../menuList/MenuListItem.svelte';
+	import MenuList from '../menuList/MenuList.svelte';
+
+	let { children, ...rest } = $props();
+
+	function signOut() {
+		push('/#login');
+	}
+</script>
+
+<svelte:head>
+	{#key $page.url}
+		<title>slotui</title>
+		<link href="https://fonts.googleapis.com/css?family=Rubik" rel="stylesheet" /> 
+	{/key}
+</svelte:head>
+red
+<Login showLogin={false}>
+	<div class="h-full overflow-hidden flex-v">
+		<Taskbar>
+			{#snippet taskBarLeft()}
+				<box class="pad-1">
+					<h5>slotui</h5>
+				</box>
+				<a href="/tooling" use:link>link </a>
+			{/snippet}
+			<ChromeFrameButtonList />
+			{#snippet taskBarRight()}<button onclick={signOut}>signOut</button>{/snippet}
+		</Taskbar>
+		<div id="layout" class="pos-rel flex-main overflow-hidden">
+			<!-- <Router {routes} /> -->
+			<Frame>
+				{#snippet drawerContent()}
+					nav left
+				{/snippet}
+				{#snippet frameContent()}
+					<Slotted child={children} />
+				{/snippet}
+			</Frame>
+			<!-- <ChromeFrameList
+				chromeListConfig={{
+					showCommandBar: false,
+					parent: '#layout',
+					onClose: (chromeFrame) => {
+						// on:chromeframe:close
+						push('/');
+						console.log('closed ', chromeFrame);
+					}
+				}}
+			/> -->
+		</div>
+		<Drawer isOpen={false}>
+			{#snippet drawerTop()}
+				<TopBar title="Drawer with menu bar ">
+					{#snippet menuBarSwitcher()}
+						<div class="pad-1">
+							<input placeholder="Search in Bar" style="width:100%;" type="text" />
+						</div>
+					{/snippet}
+				</TopBar>
+			{/snippet}
+			<div class="pad-2">
+				<MenuList onItemClick={() => {}}>
+					{#each [...Array(10)] as key, val}
+						<MenuListItem>
+							{#snippet menuItemFirst()}
+								<span>Some idioms {val}</span>
+								<span>secondary {val}</span>
+							{/snippet}
+							{#snippet menuItemLast()}
+								<span><button>fds de action</button></span>
+							{/snippet}
+						</MenuListItem>
+					{/each}
+				</MenuList>
+			</div>
+		</Drawer>
+	</div>
+</Login>

package/dist/ui/chromeFrame/ChromeFrame.svelte

@@ -1,45 +1,45 @@
-<svelte:options />
-
-<script lang="ts">
-	import { onEvent } from '../../utils/uses/event.js';
-	import { getChromeFrame } from './chromeFrame.utils.js';
-
-	type ChromeFrameProps = {
-		frameId: string;
-		showCommands: boolean;
-	};
-
-	let { frameId, showCommands }: ChromeFrameProps = $props();
-
-	const frameStore = getChromeFrame(frameId);
-
-	function handleRemove() {
-		frameStore.remove();
-	}
-	function handleHide() {
-		frameStore.toggle();
-	}
-</script>
-
-<div
-	use:onEvent={{ event: 'chromeframe:hide', action: handleHide }}
-	use:onEvent={{ event: 'chromeframe:close', action: handleRemove }}
-	class="chrome-frame"
-	style="z-index:{$frameStore?.zIndex};display:{$frameStore?.minimized ? 'none' : ''}"
->
-	{#if $frameStore?.showCommandBar}
-		<div class="chrome-frame-bar">
-			<div class="flex-main h3">{frameId}</div>
-			<div>{frameId}</div>
-			<button onclick={handleHide}>hide</button>
-			<button onclick={handleRemove}>close</button>
-		</div>
-	{/if}
-	<div class="chrome-frame-content">
-		<svelte:component this={$frameStore?.component} {...$frameStore?.componentProps} />
-	</div>
-</div>
-
+<svelte:options />
+
+<script lang="ts">
+	import { onEvent } from '../../utils/uses/event.js';
+	import { getChromeFrame } from './chromeFrame.utils.js';
+
+	type ChromeFrameProps = {
+		frameId: string;
+		showCommands: boolean;
+	};
+
+	let { frameId, showCommands }: ChromeFrameProps = $props();
+
+	const frameStore = getChromeFrame(frameId);
+
+	function handleRemove() {
+		frameStore.remove();
+	}
+	function handleHide() {
+		frameStore.toggle();
+	}
+</script>
+
+<div
+	use:onEvent={{ event: 'chromeframe:hide', action: handleHide }}
+	use:onEvent={{ event: 'chromeframe:close', action: handleRemove }}
+	class="chrome-frame"
+	style="z-index:{$frameStore?.zIndex};display:{$frameStore?.minimized ? 'none' : ''}"
+>
+	{#if $frameStore?.showCommandBar}
+		<div class="chrome-frame-bar">
+			<div class="flex-main h3">{frameId}</div>
+			<div>{frameId}</div>
+			<button onclick={handleHide}>hide</button>
+			<button onclick={handleRemove}>close</button>
+		</div>
+	{/if}
+	<div class="chrome-frame-content">
+		<svelte:component this={$frameStore?.component} {...$frameStore?.componentProps} />
+	</div>
+</div>
+
 <style global>:root {
   --chrome-frame-color: var(--sld-color-foreground);
   --chrome-frame-background-color: var(--sld-color-background);
@@ -73,4 +73,4 @@
   flex: var(--chrome-frame-content-flex);
   overflow: hidden;
   position: relative;
-}</style>
+}</style>

package/dist/ui/chromeFrame/ChromeFrameButtonList.svelte

@@ -1,35 +1,35 @@
-<svelte:options />
-
-<script lang="ts">
-	import { chromeFrameStore } from './chromeFrame.store.js';
-	import Button from '../../controls/button/Button.svelte';
-	import Slotted from '../../utils/slotted/Slotted.svelte';
-
-	let { class: className = '', element, children, ...rest } = $props();
-</script>
-
-<div bind:this={element} class="flex-h gap-small {className}" {...rest}>
-	{#each [...$chromeFrameStore.values()] as value, key}
-		<div class="buttonRail">
-			<Slotted child={children} slotArgs={{ chromeFrame: value }}>
-				<Button
-					style="position:relative"
-					onclick={() => {
-						chromeFrameStore.toggle(value.frameId);
-					}}
-					ondblclick={() => {
-						chromeFrameStore.remove(value.frameId);
-					}}
-					class={value.active ? 'active' : ''}
-					iconEnd="window-close"
-				>
-					{value.title ?? value.frameId}
-				</Button>
-			</Slotted>
-		</div>
-	{/each}
-</div>
-
+<svelte:options />
+
+<script lang="ts">
+	import { chromeFrameStore } from './chromeFrame.store.js';
+	import Button from '../../controls/button/Button.svelte';
+	import Slotted from '../../utils/slotted/Slotted.svelte';
+
+	let { class: className = '', element, children, ...rest } = $props();
+</script>
+
+<div bind:this={element} class="flex-h gap-small {className}" {...rest}>
+	{#each [...$chromeFrameStore.values()] as value, key}
+		<div class="buttonRail">
+			<Slotted child={children} slotArgs={{ chromeFrame: value }}>
+				<Button
+					style="position:relative"
+					onclick={() => {
+						chromeFrameStore.toggle(value.frameId);
+					}}
+					ondblclick={() => {
+						chromeFrameStore.remove(value.frameId);
+					}}
+					class={value.active ? 'active' : ''}
+					iconEnd="window-close"
+				>
+					{value.title ?? value.frameId}
+				</Button>
+			</Slotted>
+		</div>
+	{/each}
+</div>
+
 <style global>.buttonRail button:not(.active) {
   border: 1px solid transparent;
   background-color: transparent;
@@ -39,4 +39,4 @@
 }
 .buttonRail button:hover {
   border: 1px solid var(--sld-color-primary);
-}</style>
+}</style>

package/dist/ui/chromeFrame/ChromeFrameList.svelte

@@ -1,106 +1,106 @@
-<svelte:options />
-
-<script lang="ts">
-	import { chromeFrameListRef, chromeFrameStore } from './chromeFrame.store.js';
-	import ChromeFrame from './ChromeFrame.svelte';
-	import { browser } from '$app/environment';
-	import type { IChromeFrameArgs, IChromeOptionsArgs } from './types.js';
-
-	type ChromeFrameListProps = {
-		/** The class name of the component */
-		className: string;
-
-		/** The style of the component */
-		style: string;
-
-		/** The HTML element of the component */
-		element: HTMLDivElement | null;
-
-		/** The configuration for the chrome list */
-		chromeListConfig: IChromeOptionsArgs;
-	};
-
-	let {
-		className = '',
-		style = '',
-		element,
-		chromeListConfig = {}
-	}: ChromeFrameListProps = $props();
-
-	let defaultConfig = chromeFrameStore.defaultConfigStore;
-
-	// set global conf props to store
-	$effect(() => {
-		if (chromeListConfig) {
-			chromeFrameStore.defaultConfigStore.set(chromeListConfig);
-		}
-	});
-	$effect(() => {
-		if (browser && element && $defaultConfig.parent) {
-			const parent: any =
-				typeof $defaultConfig.parent === 'string'
-					? document.querySelector($defaultConfig.parent)
-					: $defaultConfig.parent;
-			try {
-				parent.appendChild(element);
-			} catch (e) {
-				throw new Error('parent does not seems to exist for ChromeFrameList');
-			}
-		}
-	});
-
-	// garbage collector to delete chromeFrameListRef references
-
-	$effect(() => {
-		Boolean(browser) &&
-			Object.keys(chromeFrameListRef).forEach((frameId) => {
-				if (!$chromeFrameStore.get(frameId)) {
-					console.log('destroy !');
-					chromeFrameListRef[frameId].$destroy();
-					delete chromeFrameListRef[frameId];
-				}
-			});
-	});
-
-	// mount the component in the assigned target with chromeFrameListRef as reference ,
-	// if not already in chromeFrameListRef
-
-	$effect(() => {
-		Boolean(browser) &&
-			$chromeFrameStore.forEach((args: IChromeFrameArgs, frameId: string) => {
-				if (!args.noFrameListButton && !chromeFrameListRef[frameId]) {
-					chromeFrameListRef[frameId] = new ChromeFrame({
-						target: element,
-						props: {
-							title: frameId,
-							...chromeListConfig,
-							...args,
-							frameId: frameId
-						}
-					});
-				}
-			});
-	});
-
-	// monitor $chromeFrameStore.size
-
-	$effect(() => {
-		if (browser && element) {
-			if (!$chromeFrameStore.size) {
-				element.style.display = 'none';
-			} else {
-				element.style.display = '';
-			}
-		}
-	});
-
-	/*   $: console.log('chromeFrameStore from chrome frame list',$chromeFrameStore);
-  $: console.log('var browser, from chrome frame list',browser);
-  $: console.log('chromeFrameListRef, from chrome frame list',chromeFrameListRef); */
-</script>
-
-<div
-	bind:this={element}
-	class="pos-abs h-full w-full top-0 {className}"
-	style="z-index:9000;display:none;{style}"
-></div>
+<svelte:options />
+
+<script lang="ts">
+	import { chromeFrameListRef, chromeFrameStore } from './chromeFrame.store.js';
+	import ChromeFrame from './ChromeFrame.svelte';
+	import { browser } from '$app/environment';
+	import type { IChromeFrameArgs, IChromeOptionsArgs } from './types.js';
+
+	type ChromeFrameListProps = {
+		/** The class name of the component */
+		className: string;
+
+		/** The style of the component */
+		style: string;
+
+		/** The HTML element of the component */
+		element: HTMLDivElement | null;
+
+		/** The configuration for the chrome list */
+		chromeListConfig: IChromeOptionsArgs;
+	};
+
+	let {
+		className = '',
+		style = '',
+		element,
+		chromeListConfig = {}
+	}: ChromeFrameListProps = $props();
+
+	let defaultConfig = chromeFrameStore.defaultConfigStore;
+
+	// set global conf props to store
+	$effect(() => {
+		if (chromeListConfig) {
+			chromeFrameStore.defaultConfigStore.set(chromeListConfig);
+		}
+	});
+	$effect(() => {
+		if (browser && element && $defaultConfig.parent) {
+			const parent: any =
+				typeof $defaultConfig.parent === 'string'
+					? document.querySelector($defaultConfig.parent)
+					: $defaultConfig.parent;
+			try {
+				parent.appendChild(element);
+			} catch (e) {
+				throw new Error('parent does not seems to exist for ChromeFrameList');
+			}
+		}
+	});
+
+	// garbage collector to delete chromeFrameListRef references
+
+	$effect(() => {
+		Boolean(browser) &&
+			Object.keys(chromeFrameListRef).forEach((frameId) => {
+				if (!$chromeFrameStore.get(frameId)) {
+					console.log('destroy !');
+					chromeFrameListRef[frameId].$destroy();
+					delete chromeFrameListRef[frameId];
+				}
+			});
+	});
+
+	// mount the component in the assigned target with chromeFrameListRef as reference ,
+	// if not already in chromeFrameListRef
+
+	$effect(() => {
+		Boolean(browser) &&
+			$chromeFrameStore.forEach((args: IChromeFrameArgs, frameId: string) => {
+				if (!args.noFrameListButton && !chromeFrameListRef[frameId]) {
+					chromeFrameListRef[frameId] = new ChromeFrame({
+						target: element,
+						props: {
+							title: frameId,
+							...chromeListConfig,
+							...args,
+							frameId: frameId
+						}
+					});
+				}
+			});
+	});
+
+	// monitor $chromeFrameStore.size
+
+	$effect(() => {
+		if (browser && element) {
+			if (!$chromeFrameStore.size) {
+				element.style.display = 'none';
+			} else {
+				element.style.display = '';
+			}
+		}
+	});
+
+	/*   $: console.log('chromeFrameStore from chrome frame list',$chromeFrameStore);
+  $: console.log('var browser, from chrome frame list',browser);
+  $: console.log('chromeFrameListRef, from chrome frame list',chromeFrameListRef); */
+</script>
+
+<div
+	bind:this={element}
+	class="pos-abs h-full w-full top-0 {className}"
+	style="z-index:9000;display:none;{style}"
+></div>

package/dist/ui/chromeFrame/chrome-frame.scss

@@ -1,34 +1,34 @@
-@use "../../styles/slotui-mixins.scss";
-
-:root {
-    --chrome-frame-color: var(--sld-color-foreground);
-    --chrome-frame-background-color: var(--sld-color-background);
-    --chrome-frame-bar-gap: var(--sld-gap-med);
-    --chrome-frame-bar-padding: var(--sld-pad-medium);
-    --chrome-frame-bar-border-bottom: var(--sld-color-border);
-    --chrome-frame-content-flex: 1;
-}
-
-.chrome-frame {
-    @include slotui-mixins.flex("column");
-    position: absolute;
-    top: 0;
-    height: 100%;
-    width: 100%;
-    color: var(--chrome-frame-color);
-    background-color: var(--chrome-frame-background-color);
-    overflow: hidden;
-
-    &-bar {
-        @include slotui-mixins.flex("row", center);
-        gap: var(--chrome-frame-bar-gap);
-        padding: var(--chrome-frame-bar-padding);
-        border-bottom: 1px solid var(--chrome-frame-bar-border-bottom);
-    }
-
-    &-content {
-        flex: var(--chrome-frame-content-flex);
-        overflow: hidden;
-        position: relative;
-    }
-}
+@use "../../styles/slotui-mixins.scss";
+
+:root {
+    --chrome-frame-color: var(--sld-color-foreground);
+    --chrome-frame-background-color: var(--sld-color-background);
+    --chrome-frame-bar-gap: var(--sld-gap-med);
+    --chrome-frame-bar-padding: var(--sld-pad-medium);
+    --chrome-frame-bar-border-bottom: var(--sld-color-border);
+    --chrome-frame-content-flex: 1;
+}
+
+.chrome-frame {
+    @include slotui-mixins.flex("column");
+    position: absolute;
+    top: 0;
+    height: 100%;
+    width: 100%;
+    color: var(--chrome-frame-color);
+    background-color: var(--chrome-frame-background-color);
+    overflow: hidden;
+
+    &-bar {
+        @include slotui-mixins.flex("row", center);
+        gap: var(--chrome-frame-bar-gap);
+        padding: var(--chrome-frame-bar-padding);
+        border-bottom: 1px solid var(--chrome-frame-bar-border-bottom);
+    }
+
+    &-content {
+        flex: var(--chrome-frame-content-flex);
+        overflow: hidden;
+        position: relative;
+    }
+}