@medyll/idae-slotui-svelte 0.122.1 → 0.123.0

package/dist/ui/login/Login.svelte

@@ -1,104 +1,104 @@
-<script lang="ts">
-	import { fade, type TransitionConfig } from 'svelte/transition';
-
-	import Backdrop from '../../base/backdrop/Backdrop.svelte';
-	import Button from '../../controls/button/Button.svelte';
-	import Icon from '../../base/icon/Icon.svelte';
-	import Slotted from '../../utils/slotted/Slotted.svelte';
-	import type { LoginProps } from './types.js';
-
-	let {
-		class: className = '',
-		element = $bindable(),
-		style = '',
-		showLogin = true,
-		transition = { type: fade, args: {} },
-		fields = { email: '', password: '' },
-		loading = false,
-		submitting = false,
-		onSubmit = function (args) {
-			return new Promise((resolve, reject) => {
-				return setTimeout(() => {
-					resolve(true);
-				}, 2000);
-			});
-		},
-		children,
-		slotRetrievePassword,
-		loginAvatarRoot,
-		loginAvatar,
-		loginForm,
-		...rest
-	}: LoginProps = $props();
-
-	export const actions = {
-		toggle: (lo?: boolean) => {
-			showLogin = lo ?? !showLogin;
-		},
-		toggleLoading: (lo?: boolean) => {
-			loading = lo ?? !loading;
-		}
-	};
-
-	let grantedError = false;
-
-	const validData: any = {};
-
-	function validate() {
-		return true;
-	}
-</script>
-
-{#if showLogin}
-	<Backdrop isOpen={showLogin} style="height:100%;" {loading}>
-		<form
-			bind:this={element}
-			class="pos-abs top-0 h-full w-full {className}"
-			method="post"
-			on:submit|preventDefault={validate}
-		>
-			<div transition:fade|global class="pos-rel h-full w-full flex-h flex-align-middle-center">
-				<div class="form flex-v flex-align-middle-center">
-					<Slotted child={loginAvatarRoot}>
-						<div class="avatarHolder marg-b-2">
-							<div class="avatar flex-h flex-align-middle-center">
-								{#if submitting}
-									<Icon rotate iconSize="large" icon="loading" />
-								{:else}
-									<Slotted child={loginAvatar} />
-								{/if}
-							</div>
-						</div>
-					</Slotted>
-					<Slotted child={loginForm}>
-						<div class="pad-2">
-							<input class="input" name="email" type="text" />
-						</div>
-						<div class="pad-2">
-							<input name="password" type="password" />
-						</div>
-						<Button type="submit" value="login" loading={submitting}>
-							{#if submitting}<i class="fa fa-spinner fa-spin theme-text-primary-complement"
-								></i>{/if}
-							Login
-						</Button>
-						{#if grantedError}
-							<div class="pad-1 color-scheme-error">Please verify your input</div>
-						{/if}
-					</Slotted>
-					{#if slotRetrievePassword}
-						<div class="retrieve">
-							<Slotted child={slotRetrievePassword} />
-						</div>
-					{/if}
-				</div>
-			</div>
-		</form>
-	</Backdrop>
-{:else}
-	{@render children?.()}
-{/if}
-
+<script lang="ts">
+	import { fade, type TransitionConfig } from 'svelte/transition';
+
+	import Backdrop from '../../base/backdrop/Backdrop.svelte';
+	import Button from '../../controls/button/Button.svelte';
+	import Icon from '../../base/icon/Icon.svelte';
+	import Slotted from '../../utils/slotted/Slotted.svelte';
+	import type { LoginProps } from './types.js';
+
+	let {
+		class: className = '',
+		element = $bindable(),
+		style = '',
+		showLogin = true,
+		transition = { type: fade, args: {} },
+		fields = { email: '', password: '' },
+		loading = false,
+		submitting = false,
+		onSubmit = function (args) {
+			return new Promise((resolve, reject) => {
+				return setTimeout(() => {
+					resolve(true);
+				}, 2000);
+			});
+		},
+		children,
+		slotRetrievePassword,
+		loginAvatarRoot,
+		loginAvatar,
+		loginForm,
+		...rest
+	}: LoginProps = $props();
+
+	export const actions = {
+		toggle: (lo?: boolean) => {
+			showLogin = lo ?? !showLogin;
+		},
+		toggleLoading: (lo?: boolean) => {
+			loading = lo ?? !loading;
+		}
+	};
+
+	let grantedError = false;
+
+	const validData: any = {};
+
+	function validate() {
+		return true;
+	}
+</script>
+
+{#if showLogin}
+	<Backdrop isOpen={showLogin} style="height:100%;" {loading}>
+		<form
+			bind:this={element}
+			class="pos-abs top-0 h-full w-full {className}"
+			method="post"
+			on:submit|preventDefault={validate}
+		>
+			<div transition:fade|global class="pos-rel h-full w-full flex-h flex-align-middle-center">
+				<div class="form flex-v flex-align-middle-center">
+					<Slotted child={loginAvatarRoot}>
+						<div class="avatarHolder marg-b-2">
+							<div class="avatar flex-h flex-align-middle-center">
+								{#if submitting}
+									<Icon rotate iconSize="large" icon="loading" />
+								{:else}
+									<Slotted child={loginAvatar} />
+								{/if}
+							</div>
+						</div>
+					</Slotted>
+					<Slotted child={loginForm}>
+						<div class="pad-2">
+							<input class="input" name="email" type="text" />
+						</div>
+						<div class="pad-2">
+							<input name="password" type="password" />
+						</div>
+						<Button type="submit" value="login" loading={submitting}>
+							{#if submitting}<i class="fa fa-spinner fa-spin theme-text-primary-complement"
+								></i>{/if}
+							Login
+						</Button>
+						{#if grantedError}
+							<div class="pad-1 color-scheme-error">Please verify your input</div>
+						{/if}
+					</Slotted>
+					{#if slotRetrievePassword}
+						<div class="retrieve">
+							<Slotted child={slotRetrievePassword} />
+						</div>
+					{/if}
+				</div>
+			</div>
+		</form>
+	</Backdrop>
+{:else}
+	{@render children?.()}
+{/if}
+
 <style>form {
   z-index: 1000;
 }
@@ -130,4 +130,4 @@
 .form .name {
   text-align: center;
   margin: 0.5rem;
-}</style>
+}</style>

package/dist/ui/marquee/Marquee.demo.svelte

@@ -1,33 +1,33 @@
-<script lang="ts">
-	import ComponentDemo from '../../base/demoer/DemoerComponent.svelte';
-	import Demoer from '../../base/demoer/Demoer.svelte';
-	import DemoPage from '../../base/demoer/DemoPage.svelte';
-
-	import { parameters, componentArgs } from './types.js';
-	import Marquee from './Marquee.svelte';
-    import Looper from '../../utils/looper/Looper.svelte';
-    import { dataOp } from '@medyll/idae-engine';
-
-	let code = `
-<Marquee >
-    <div></div>
-    <div></div>
-    <div></div>
-</Marquee>`;
-</script>
-
-<ComponentDemo component="Marquee">
-	<DemoPage component="Rating" {code}>
-		<Demoer {parameters} {componentArgs}>
-			{#snippet children({ activeParams })}
-				<Marquee style="width:450px;height:450px;gap!2rem;border:1px solid black;display:flex;" {...activeParams}>					
-					<Looper style="display:flex;"   data={[...Array(90)].map((_,idx)=>({idx}))} >
-						{#snippet children({ item ,idx})}
-							<div style="min-width:250px;height:250px;border:1px solid green;"  >cell {item?.idx}  </div> 
-						{/snippet}		
-					</Looper>
-				</Marquee>
-			{/snippet}
-		</Demoer>
-	</DemoPage>
-</ComponentDemo>
+<script lang="ts">
+	import ComponentDemo from '../../base/demoer/DemoerComponent.svelte';
+	import Demoer from '../../base/demoer/Demoer.svelte';
+	import DemoPage from '../../base/demoer/DemoPage.svelte';
+
+	import { parameters, componentArgs } from './types.js';
+	import Marquee from './Marquee.svelte';
+    import Looper from '../../utils/looper/Looper.svelte';
+    import { dataOp } from '@medyll/idae-engine';
+
+	let code = `
+<Marquee >
+    <div></div>
+    <div></div>
+    <div></div>
+</Marquee>`;
+</script>
+
+<ComponentDemo component="Marquee">
+	<DemoPage component="Rating" {code}>
+		<Demoer {parameters} {componentArgs}>
+			{#snippet children({ activeParams })}
+				<Marquee style="width:450px;height:450px;gap!2rem;border:1px solid black;display:flex;" {...activeParams}>					
+					<Looper style="display:flex;"   data={[...Array(90)].map((_,idx)=>({idx}))} >
+						{#snippet children({ item ,idx})}
+							<div style="min-width:250px;height:250px;border:1px solid green;"  >cell {item?.idx}  </div> 
+						{/snippet}		
+					</Looper>
+				</Marquee>
+			{/snippet}
+		</Demoer>
+	</DemoPage>
+</ComponentDemo>

package/dist/ui/marquee/Marquee.svelte

@@ -1,99 +1,99 @@
-<script lang="ts" generics="T=Data">
-	import Stepper from '../../controls/stepper/Stepper.svelte';
-	import type { StepperProps } from '../../controls/stepper/types.js';
-	import type { Data, ExpandProps } from '../../types/index.js';
-	import Content from '../../utils/content/Content.svelte';
-	import Slotted from '../../utils/slotted/Slotted.svelte';
-	import type { MarqueeProps } from './types.js';
-
-	let container = $state<HTMLElement>();
-
-	let {
-		showControls = true,
-		autoStart = false,
-		pauseOnHover = false,
-		activeElement = $bindable(0),
-		activeIndex = $bindable(0),
-		showStepper = false,
-		stepperProps = {} as StepperProps,
-		gutter,
-		marqueePrev,
-		marqueeNext,
-		children,
-		...rest
-	}: ExpandProps<MarqueeProps> = $props();
-
-	/* export function pauseOnHoverFunction(
-		node: HTMLElement | null,
-		params: MarqueeProps
-	): Action<HTMLElement, MarqueeProps> | undefined {
-		if (!node) return;
-		let isHovered = false;
-
-		function handleMouseEnter() {
-			isHovered = true;
-		}
-
-		function handleMouseLeave() {
-			isHovered = false;
-		}
-
-		node.addEventListener('mouseenter', handleMouseEnter);
-		node.addEventListener('mouseleave', handleMouseLeave);
-
-		return {
-			update({ pauseOnHover }) {
-				if (pauseOnHover && isHovered) {
-					node.style.animationPlayState = 'paused';
-				} else {
-					node.style.animationPlayState = 'running';
-				}
-			},
-			destroy() {
-				node.removeEventListener('mouseenter', handleMouseEnter);
-				node.removeEventListener('mouseleave', handleMouseLeave);
-			}
-		};
-	} */
-
-	function scrollHorizontally(element: HTMLElement, distance: number) {
-		element.scrollBy({ left: distance, behavior: 'smooth' });
-	}
-
-	function scrollNext() {
-		if (container) scrollHorizontally(container, container.clientWidth);
-	}
-
-	function scrollPrev() {
-		if (container) scrollHorizontally(container, -container.clientWidth);
-	}
-</script>
-
-<div class="marquee-container" {...rest}>
-	{#if showControls}
-		<div class="marquee-controls-prev">
-			<button onclick={scrollPrev}>Précédent</button>
-		</div>
-	{/if}
-	<div bind:this={container} class="marquee">
-		<Content {gutter} tag="div" class="marquee-children" style="scroll-snap-type: x mandatory;">
-			{#if children}{@render children()}{:else}
-				<div>enter content or data</div>
-			{/if}
-		</Content>
-	</div>
-	{#if showControls}
-		<div class="marquee-controls-next">
-			<Slotted child={marqueePrev}>
-				<button onclick={scrollNext}>Suivant</button>
-			</Slotted>
-		</div>
-	{/if}
-</div>
-{#if showStepper}
-	<Stepper {...stepperProps} steps={[{ order: 1 }, { order: 2 }]}></Stepper>
-{/if}
-
+<script lang="ts" generics="T=Data">
+	import Stepper from '../../controls/stepper/Stepper.svelte';
+	import type { StepperProps } from '../../controls/stepper/types.js';
+	import type { Data, ExpandProps } from '../../types/index.js';
+	import Content from '../../utils/content/Content.svelte';
+	import Slotted from '../../utils/slotted/Slotted.svelte';
+	import type { MarqueeProps } from './types.js';
+
+	let container = $state<HTMLElement>();
+
+	let {
+		showControls = true,
+		autoStart = false,
+		pauseOnHover = false,
+		activeElement = $bindable(0),
+		activeIndex = $bindable(0),
+		showStepper = false,
+		stepperProps = {} as StepperProps,
+		gutter,
+		marqueePrev,
+		marqueeNext,
+		children,
+		...rest
+	}: ExpandProps<MarqueeProps> = $props();
+
+	/* export function pauseOnHoverFunction(
+		node: HTMLElement | null,
+		params: MarqueeProps
+	): Action<HTMLElement, MarqueeProps> | undefined {
+		if (!node) return;
+		let isHovered = false;
+
+		function handleMouseEnter() {
+			isHovered = true;
+		}
+
+		function handleMouseLeave() {
+			isHovered = false;
+		}
+
+		node.addEventListener('mouseenter', handleMouseEnter);
+		node.addEventListener('mouseleave', handleMouseLeave);
+
+		return {
+			update({ pauseOnHover }) {
+				if (pauseOnHover && isHovered) {
+					node.style.animationPlayState = 'paused';
+				} else {
+					node.style.animationPlayState = 'running';
+				}
+			},
+			destroy() {
+				node.removeEventListener('mouseenter', handleMouseEnter);
+				node.removeEventListener('mouseleave', handleMouseLeave);
+			}
+		};
+	} */
+
+	function scrollHorizontally(element: HTMLElement, distance: number) {
+		element.scrollBy({ left: distance, behavior: 'smooth' });
+	}
+
+	function scrollNext() {
+		if (container) scrollHorizontally(container, container.clientWidth);
+	}
+
+	function scrollPrev() {
+		if (container) scrollHorizontally(container, -container.clientWidth);
+	}
+</script>
+
+<div class="marquee-container" {...rest}>
+	{#if showControls}
+		<div class="marquee-controls-prev">
+			<button onclick={scrollPrev}>Précédent</button>
+		</div>
+	{/if}
+	<div bind:this={container} class="marquee">
+		<Content {gutter} tag="div" class="marquee-children" style="scroll-snap-type: x mandatory;">
+			{#if children}{@render children()}{:else}
+				<div>enter content or data</div>
+			{/if}
+		</Content>
+	</div>
+	{#if showControls}
+		<div class="marquee-controls-next">
+			<Slotted child={marqueePrev}>
+				<button onclick={scrollNext}>Suivant</button>
+			</Slotted>
+		</div>
+	{/if}
+</div>
+{#if showStepper}
+	<Stepper {...stepperProps} steps={[{ order: 1 }, { order: 2 }]}></Stepper>
+{/if}
+
 <style>.marquee {
   flex: 1;
   overflow-x: hidden;
@@ -151,4 +151,4 @@
 }
 .marquee-controls-next {
   display: contents;
-}</style>
+}</style>

package/dist/ui/marquee/marquee.scss

@@ -1,34 +1,34 @@
-@use "../../styles/slotui-mixins.scss";
-
-.marquee {
-    flex: 1;
-    overflow-x: hidden;
-    scroll-behavior: smooth;
-    scroll-snap-type: x mandatory;
-
-    width: 300px;
-    &-container {
-        display: flex;
-        align-items: center;
-        @include slotui-mixins.ui-gutter-presets;
-    }
-
-    &-children {
-        display: flex;
-        border: 1px solid red;
-        & > * {
-            border: 1px solid red;
-            height: 300px;
-        }
-    }
-
-    &-controls {
-        &-prev {
-            display: contents;
-        }
-
-        &-next {
-            display: contents;
-        }
-    }
-}
+@use "../../styles/slotui-mixins.scss";
+
+.marquee {
+    flex: 1;
+    overflow-x: hidden;
+    scroll-behavior: smooth;
+    scroll-snap-type: x mandatory;
+
+    width: 300px;
+    &-container {
+        display: flex;
+        align-items: center;
+        @include slotui-mixins.ui-gutter-presets;
+    }
+
+    &-children {
+        display: flex;
+        border: 1px solid red;
+        & > * {
+            border: 1px solid red;
+            height: 300px;
+        }
+    }
+
+    &-controls {
+        &-prev {
+            display: contents;
+        }
+
+        &-next {
+            display: contents;
+        }
+    }
+}

package/dist/ui/menu/Menu.svelte

@@ -1,9 +1,9 @@
-<script lang="ts" generics="T= Data">
-	import type { Data } from '../../types/index.js';
-	import MenuList from '../menuList/MenuList.svelte';
-	import type { MenuListProps } from '../menuList/types.js';
-
-	let { ...rest }: MenuListProps = $props();
-</script>
-
-<MenuList {...rest} class="menu" />
+<script lang="ts" generics="T= Data">
+	import type { Data } from '../../types/index.js';
+	import MenuList from '../menuList/MenuList.svelte';
+	import type { MenuListProps } from '../menuList/types.js';
+
+	let { ...rest }: MenuListProps = $props();
+</script>
+
+<MenuList {...rest} class="menu" />

package/dist/ui/menu/MenuItem.svelte

@@ -1,9 +1,9 @@
-<script lang="ts" generics="T= Data">
-	import type { MenuListItemProps } from '../menuList/types.js';
-	import type { Data } from '../../types/index.js';
-	import MenuListItem from '../menuList/MenuListItem.svelte';
-
-	let { ...rest }: MenuListItemProps = $props();
-</script>
-
-<MenuListItem {...rest} class="menuItem" />
+<script lang="ts" generics="T= Data">
+	import type { MenuListItemProps } from '../menuList/types.js';
+	import type { Data } from '../../types/index.js';
+	import MenuListItem from '../menuList/MenuListItem.svelte';
+
+	let { ...rest }: MenuListItemProps = $props();
+</script>
+
+<MenuListItem {...rest} class="menuItem" />

package/dist/ui/menu/MenuTitle.svelte

@@ -1,12 +1,12 @@
-<script lang="ts">
-	import MenuItem from './MenuItem.svelte';
-	import type { MenuItemProps } from './types.js';
-
-	let { ...rest }: MenuItemProps = $props();
-</script>
-
-<MenuItem {...rest} class="menuTitle" />
-
+<script lang="ts">
+	import MenuItem from './MenuItem.svelte';
+	import type { MenuItemProps } from './types.js';
+
+	let { ...rest }: MenuItemProps = $props();
+</script>
+
+<MenuItem {...rest} class="menuTitle" />
+
 <style>:root {
   --menu-min-width: 150px;
   --menu-padding: 0.25rem;
@@ -102,4 +102,4 @@ li.menuItem .menu-list-item-text {
 }
 li.menuItem .menu-list-item-action {
   display: block;
-}</style>
+}</style>