@medyll/idae-slotui-svelte 0.120.0 → 0.121.0

package/dist/ui/frame/Frame.demo.svelte

@@ -1,48 +1,48 @@
-<script lang="ts">
-	import ComponentDemo from '../../base/demoer/DemoerComponent.svelte';
-	import MenuList from '../menuList/MenuList.svelte';
-	import MenuListItem from '../menuList/MenuListItem.svelte';
-
-	import Frame from './Frame.svelte';
-</script>
-
-<ComponentDemo component="Frame">
-	<div class="flex-h gap-medium border overflow-hidden">
-		<Frame style="height:350px;width:80%">
-			{#snippet drawerTop()}
-				<div class="pad">
-					<h4>Menu header</h4>
-				</div>
-			{/snippet}
-			{#snippet drawerContent()}
-				<h5>A menu</h5>
-				<MenuList style="width:100%">
-					<MenuListItem>menu item</MenuListItem>
-					<MenuListItem>menu item</MenuListItem>
-					<MenuListItem>menu item</MenuListItem>
-					<MenuListItem>menu item</MenuListItem>
-					<MenuListItem>menu item</MenuListItem>
-				</MenuList>
-				<h5>A menu again</h5>
-				<MenuList style="width:100%">
-					<MenuListItem>menu item</MenuListItem>
-					<MenuListItem>menu item</MenuListItem>
-					<MenuListItem>menu item</MenuListItem>
-					<MenuListItem>menu item</MenuListItem>
-					<MenuListItem>menu item</MenuListItem>
-				</MenuList>
-			{/snippet}
-			{#snippet frameTop()}
-				<h4>Frame title</h4>
-			{/snippet}
-			{#snippet frameContent()}
-				<div class="pad">
-					<h5>Frame content</h5>
-				</div>
-			{/snippet}
-			{#snippet frameBottom()}
-				<div class="pad">bottom zone</div>
-			{/snippet}
-		</Frame>
-	</div>
-</ComponentDemo>
+<script lang="ts">
+	import ComponentDemo from '../../base/demoer/DemoerComponent.svelte';
+	import MenuList from '../menuList/MenuList.svelte';
+	import MenuListItem from '../menuList/MenuListItem.svelte';
+
+	import Frame from './Frame.svelte';
+</script>
+
+<ComponentDemo component="Frame">
+	<div class="flex-h gap-medium border overflow-hidden">
+		<Frame style="height:350px;width:80%">
+			{#snippet drawerTop()}
+				<div class="pad">
+					<h4>Menu header</h4>
+				</div>
+			{/snippet}
+			{#snippet drawerContent()}
+				<h5>A menu</h5>
+				<MenuList style="width:100%">
+					<MenuListItem>menu item</MenuListItem>
+					<MenuListItem>menu item</MenuListItem>
+					<MenuListItem>menu item</MenuListItem>
+					<MenuListItem>menu item</MenuListItem>
+					<MenuListItem>menu item</MenuListItem>
+				</MenuList>
+				<h5>A menu again</h5>
+				<MenuList style="width:100%">
+					<MenuListItem>menu item</MenuListItem>
+					<MenuListItem>menu item</MenuListItem>
+					<MenuListItem>menu item</MenuListItem>
+					<MenuListItem>menu item</MenuListItem>
+					<MenuListItem>menu item</MenuListItem>
+				</MenuList>
+			{/snippet}
+			{#snippet frameTop()}
+				<h4>Frame title</h4>
+			{/snippet}
+			{#snippet frameContent()}
+				<div class="pad">
+					<h5>Frame content</h5>
+				</div>
+			{/snippet}
+			{#snippet frameBottom()}
+				<div class="pad">bottom zone</div>
+			{/snippet}
+		</Frame>
+	</div>
+</ComponentDemo>

package/dist/ui/frame/Frame.svelte

@@ -1,92 +1,92 @@
-<svelte:options />
-
-<script lang="ts">
-	import Drawer from '../../navigation/drawer/Drawer.svelte';
-	import type { DrawerProps } from '../../navigation/drawer/types.js';
-	import Slotted from '../../utils/slotted/Slotted.svelte';
-	import type { FrameProps } from './types.js';
-
-	const defaultDrawerProps: DrawerProps = {
-		isOpen: false,
-		hideCloseIcon: true,
-		showOpenerIcon: true,
-		stickTo: 'left',
-		flow: 'relative',
-		defaultWidth: '200px'
-	};
-
-	let {
-		class: className = '',
-		element = $bindable<HTMLDivElement>(),
-		frameDrawerRef,
-		elementNav,
-		style = '',
-		drawerWidth = '200px',
-		drawerProps = { ...defaultDrawerProps },
-		children,
-		frameNavHeader,
-		drawerTop,
-		drawerContent,
-		drawerFooter,
-		drawerTitle,
-		drawerIcon,
-		drawerPrimary,
-		drawerSecondary,
-		frameTop,
-		frameContent,
-		frameBottom,
-		...rest
-	}: FrameProps = $props();
-
-	let menuOpen = $state(true);
-
-	export const actions = {
-		openNavLeft: () => {
-			menuOpen = true;
-		},
-		toggleNavLeft: () => {
-			menuOpen = !menuOpen;
-		},
-		closeNavLeft: () => {
-			menuOpen = !menuOpen;
-		}
-	};
-</script>
-
-<div bind:this={element} class="frame {className}" {style} {...rest}>
-	<div class="frame-container">
-		<div bind:this={elementNav} class="frame-container-nav">
-			{#if frameDrawerRef?.isOpen}
-				<Slotted child={frameNavHeader}></Slotted>
-			{/if}
-			<Drawer
-				bind:this={frameDrawerRef}
-				bind:isOpen={menuOpen}
-				style="flex:1;position:relative;"
-				defaultWidth={drawerWidth}
-				{...defaultDrawerProps}
-				{...drawerProps}
-			>
-				<Slotted child={drawerProps?.drawerIcon ?? drawerIcon} />
-				<Slotted child={drawerProps?.drawerFooter ?? drawerFooter} />
-				<Slotted child={drawerProps?.drawerTitle ?? drawerTitle} />
-				<Slotted child={drawerProps?.drawerPrimary ?? drawerPrimary} />
-				<Slotted child={drawerProps?.drawerSecondary ?? drawerSecondary} />
-				<Slotted child={drawerProps?.drawerTop ?? drawerTop} />
-				<Slotted child={drawerContent} />
-			</Drawer>
-		</div>
-		<div class="frame-container-main">
-			<Slotted child={frameTop}></Slotted>
-
-			<div class="frame-container-main-content">
-				<Slotted child={frameContent}></Slotted>
-			</div>
-			<Slotted child={frameBottom}></Slotted>
-		</div>
-	</div>
-</div>
-
+<svelte:options />
+
+<script lang="ts">
+	import Drawer from '../../navigation/drawer/Drawer.svelte';
+	import type { DrawerProps } from '../../navigation/drawer/types.js';
+	import Slotted from '../../utils/slotted/Slotted.svelte';
+	import type { FrameProps } from './types.js';
+
+	const defaultDrawerProps: DrawerProps = {
+		isOpen: false,
+		hideCloseIcon: true,
+		showOpenerIcon: true,
+		stickTo: 'left',
+		flow: 'relative',
+		defaultWidth: '200px'
+	};
+
+	let {
+		class: className = '',
+		element = $bindable<HTMLDivElement>(),
+		frameDrawerRef,
+		elementNav,
+		style = '',
+		drawerWidth = '200px',
+		drawerProps = { ...defaultDrawerProps },
+		children,
+		frameNavHeader,
+		drawerTop,
+		drawerContent,
+		drawerFooter,
+		drawerTitle,
+		drawerIcon,
+		drawerPrimary,
+		drawerSecondary,
+		frameTop,
+		frameContent,
+		frameBottom,
+		...rest
+	}: FrameProps = $props();
+
+	let menuOpen = $state(true);
+
+	export const actions = {
+		openNavLeft: () => {
+			menuOpen = true;
+		},
+		toggleNavLeft: () => {
+			menuOpen = !menuOpen;
+		},
+		closeNavLeft: () => {
+			menuOpen = !menuOpen;
+		}
+	};
+</script>
+
+<div bind:this={element} class="frame {className}" {style} {...rest}>
+	<div class="frame-container">
+		<div bind:this={elementNav} class="frame-container-nav">
+			{#if frameDrawerRef?.isOpen}
+				<Slotted child={frameNavHeader}></Slotted>
+			{/if}
+			<Drawer
+				bind:this={frameDrawerRef}
+				bind:isOpen={menuOpen}
+				style="flex:1;position:relative;"
+				defaultWidth={drawerWidth}
+				{...defaultDrawerProps}
+				{...drawerProps}
+			>
+				<Slotted child={drawerProps?.drawerIcon ?? drawerIcon} />
+				<Slotted child={drawerProps?.drawerFooter ?? drawerFooter} />
+				<Slotted child={drawerProps?.drawerTitle ?? drawerTitle} />
+				<Slotted child={drawerProps?.drawerPrimary ?? drawerPrimary} />
+				<Slotted child={drawerProps?.drawerSecondary ?? drawerSecondary} />
+				<Slotted child={drawerProps?.drawerTop ?? drawerTop} />
+				<Slotted child={drawerContent} />
+			</Drawer>
+		</div>
+		<div class="frame-container-main">
+			<Slotted child={frameTop}></Slotted>
+
+			<div class="frame-container-main-content">
+				<Slotted child={frameContent}></Slotted>
+			</div>
+			<Slotted child={frameBottom}></Slotted>
+		</div>
+	</div>
+</div>
+
 <style global>:root {
   --frame-background-color: var(--sld-color-paper);
   --frame-backdrop-filter: blur(30px);
@@ -135,4 +135,4 @@
   flex: 1 1 0;
   overflow: hidden;
   position: relative;
-}</style>
+}</style>

package/dist/ui/frame/frame.scss

@@ -1,46 +1,46 @@
-@use "../../styles/slotui-mixins.scss";
-
-:root {
-    --frame-background-color: var(--sld-color-paper);
-    --frame-backdrop-filter: blur(30px);
-    --frame-container-border-right: var(--sld-color-primary);
-}
-
-.frame {
-    z-index: 1;
-    height: 100%;
-    @include slotui-mixins.flex("column");
-    overflow: hidden;
-    position: relative;
-    background-color: var(--frame-background-color);
-    --moz-backdrop-filter: var(--frame-backdrop-filter);
-    backdrop-filter: var(--frame-backdrop-filter);
-    overflow: hidden;
-
-    &-container {
-        @include slotui-mixins.flex("row");
-        @include slotui-mixins.flex-main();
-        position: relative;
-        overflow: hidden;
-        &-nav {
-            @include slotui-mixins.flex("column");
-            @include slotui-mixins.flex-main();
-            z-index: 1;
-            border-right: 1px solid var(--frame-container-border-right);
-            position: relative;
-        }
-
-        &-main {
-            flex: 1;
-            height: 100%;
-            overflow: hidden;
-            @include slotui-mixins.flex("column");
-
-            &-content {
-                @include slotui-mixins.flex-main();
-                overflow: hidden;
-                position: relative;
-            }
-        }
-    }
-}
+@use "../../styles/slotui-mixins.scss";
+
+:root {
+    --frame-background-color: var(--sld-color-paper);
+    --frame-backdrop-filter: blur(30px);
+    --frame-container-border-right: var(--sld-color-primary);
+}
+
+.frame {
+    z-index: 1;
+    height: 100%;
+    @include slotui-mixins.flex("column");
+    overflow: hidden;
+    position: relative;
+    background-color: var(--frame-background-color);
+    --moz-backdrop-filter: var(--frame-backdrop-filter);
+    backdrop-filter: var(--frame-backdrop-filter);
+    overflow: hidden;
+
+    &-container {
+        @include slotui-mixins.flex("row");
+        @include slotui-mixins.flex-main();
+        position: relative;
+        overflow: hidden;
+        &-nav {
+            @include slotui-mixins.flex("column");
+            @include slotui-mixins.flex-main();
+            z-index: 1;
+            border-right: 1px solid var(--frame-container-border-right);
+            position: relative;
+        }
+
+        &-main {
+            flex: 1;
+            height: 100%;
+            overflow: hidden;
+            @include slotui-mixins.flex("column");
+
+            &-content {
+                @include slotui-mixins.flex-main();
+                overflow: hidden;
+                position: relative;
+            }
+        }
+    }
+}

package/dist/ui/login/Login.demo.svelte

@@ -1,62 +1,62 @@
-<script lang="ts">
-	import Login from './Login.svelte';
-	// import Input from "../input/Input.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 Button from '../../controls/button/Button.svelte';
-	import DemoerComponent from '../../base/demoer/DemoerComponent.svelte';
-
-	import { parameters, componentArgs } from './types.js';
-
-	let submitting: boolean = false;
-	let showLogin: boolean = true;
-
-	function validate() {
-		submitting = true;
-		setTimeout(() => {
-			submitting = false;
-			showLogin = false;
-		}, 2000);
-	}
-
-	let codeSlot = ``;
-</script>
-
-<ComponentDemo component="Login">
-	<DemoPage component="Chipper" code={codeSlot}>
-		<Demoer {parameters} {componentArgs}>
-			{#snippet children({ activeParams })}
-				<Login {showLogin} {submitting}>
-					{#snippet loginAvatar()}
-						<Icon icon="mdi:user" />
-					{/snippet}
-					{#snippet loginForm()}
-						<form
-							class="h-full w-full flex-v flex-align-middle-center"
-							method="post"
-							on:submit|preventDefault={validate}
-						>
-							<div class="pad-2">
-								<input name="email" type="text" value="..." />
-							</div>
-							<div class="pad-2">
-								<input name="password" type="password" />
-							</div>
-							<Button type="submit" width="medium" value="login" loading={false}>Login</Button>
-						</form>
-					{/snippet}
-				</Login>
-			{/snippet}
-		</Demoer>
-	</DemoPage>
-	<div class="flex-v gap-large">
-		<DemoerCode title="myContext" code={codeSlot}></DemoerCode>
-	</div>
-</ComponentDemo>
+<script lang="ts">
+	import Login from './Login.svelte';
+	// import Input from "../input/Input.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 Button from '../../controls/button/Button.svelte';
+	import DemoerComponent from '../../base/demoer/DemoerComponent.svelte';
+
+	import { parameters, componentArgs } from './types.js';
+
+	let submitting: boolean = false;
+	let showLogin: boolean = true;
+
+	function validate() {
+		submitting = true;
+		setTimeout(() => {
+			submitting = false;
+			showLogin = false;
+		}, 2000);
+	}
+
+	let codeSlot = ``;
+</script>
+
+<ComponentDemo component="Login">
+	<DemoPage component="Chipper" code={codeSlot}>
+		<Demoer {parameters} {componentArgs}>
+			{#snippet children({ activeParams })}
+				<Login {showLogin} {submitting}>
+					{#snippet loginAvatar()}
+						<Icon icon="mdi:user" />
+					{/snippet}
+					{#snippet loginForm()}
+						<form
+							class="h-full w-full flex-v flex-align-middle-center"
+							method="post"
+							on:submit|preventDefault={validate}
+						>
+							<div class="pad-2">
+								<input name="email" type="text" value="..." />
+							</div>
+							<div class="pad-2">
+								<input name="password" type="password" />
+							</div>
+							<Button type="submit" width="medium" value="login" loading={false}>Login</Button>
+						</form>
+					{/snippet}
+				</Login>
+			{/snippet}
+		</Demoer>
+	</DemoPage>
+	<div class="flex-v gap-large">
+		<DemoerCode title="myContext" code={codeSlot}></DemoerCode>
+	</div>
+</ComponentDemo>