@medyll/idae-slotui-svelte 0.122.1 → 0.124.0

package/README.md

@@ -1,47 +1,47 @@
-# @medyll/idae-slotui-svelte
-
-This package is part of the Idae monorepo and focuses on providing slot UI components for Svelte applications.  
-It aims to offer a set of reusable and customizable slots to enhance the development of web applications.
-
-## Features
-
-- **Reusable Components**: Prebuilt slot-based components to speed up development.
-- **Customizable**: Easily adapt components to fit your application's design and functionality.
-- **Svelte Integration**: Designed specifically for Svelte, ensuring seamless integration.
-- **Lightweight**: Minimal dependencies for optimal performance.
-
-## Installation
-
-To install the package, use your preferred package manager:
-
-```bash
-npm install @medyll/idae-slotui-svelte
-# or
-yarn add @medyll/idae-slotui-svelte
-# or
-pnpm add @medyll/idae-slotui-svelte
-```
-
-## Usage
-
-Import and use the components in your Svelte application:
-
-```svelte
-<script>
-    import { SlotComponent } from '@medyll/idae-slotui-svelte';
-</script>
-
-<SlotComponent>
-    <div slot="header">Header Content</div>
-    <div slot="body">Body Content</div>
-    <div slot="footer">Footer Content</div>
-</SlotComponent>
-```
-
-## Contributing
-
-Contributions are welcome! Please refer to the [contribution guidelines](../../CONTRIBUTING.md) for more details.
-
-## License
-
-This package is licensed under the MIT License. See the [LICENSE](../../LICENSE) file for more information.
+# @medyll/idae-slotui-svelte
+
+This package is part of the Idae monorepo and focuses on providing slot UI components for Svelte applications.  
+It aims to offer a set of reusable and customizable slots to enhance the development of web applications.
+
+## Features
+
+- **Reusable Components**: Prebuilt slot-based components to speed up development.
+- **Customizable**: Easily adapt components to fit your application's design and functionality.
+- **Svelte Integration**: Designed specifically for Svelte, ensuring seamless integration.
+- **Lightweight**: Minimal dependencies for optimal performance.
+
+## Installation
+
+To install the package, use your preferred package manager:
+
+```bash
+npm install @medyll/idae-slotui-svelte
+# or
+yarn add @medyll/idae-slotui-svelte
+# or
+pnpm add @medyll/idae-slotui-svelte
+```
+
+## Usage
+
+Import and use the components in your Svelte application:
+
+```svelte
+<script>
+    import { SlotComponent } from '@medyll/idae-slotui-svelte';
+</script>
+
+<SlotComponent>
+    <div slot="header">Header Content</div>
+    <div slot="body">Body Content</div>
+    <div slot="footer">Footer Content</div>
+</SlotComponent>
+```
+
+## Contributing
+
+Contributions are welcome! Please refer to the [contribution guidelines](../../CONTRIBUTING.md) for more details.
+
+## License
+
+This package is licensed under the MIT License. See the [LICENSE](../../LICENSE) file for more information.

package/dist/base/alert/Alert.demo.svelte

@@ -1,62 +1,62 @@
-<script lang="ts">
-	import ComponentDemo from '../demoer/DemoerComponent.svelte';
-	import Button from '../../controls/button/Button.svelte';
-	import Alert from './Alert.svelte';
-	import Demoer from '../demoer/Demoer.svelte';
-	import DemoPage from '../demoer/DemoPage.svelte';
-	import { parameters, componentArgs } from './types.js';
-
-	let code1 = `
-<Alert {...activeParams}>
-	Simple alert with a button
-	{#snippet topButtonSlot()}
-		<Button>button</Button>
-	{/snippet}
-</Alert>`;
-	let code2 = `
-<Alert />	`;
-</script>
-
-<ComponentDemo
-	component="Alert"
-	cite="Then they were informed, then they were messaged, then they were alerted. Br Jhons, 1752"
->
-	<DemoPage component="Alert" code={code1}>
-		<Demoer {parameters} {componentArgs}>
-			{#snippet children({ activeParams })}
-				<div class="flex-h flex-wrap flex-align-middle gap-medium">
-					<Alert {...activeParams}>hi !</Alert>
-					<Alert {...activeParams}>
-						Simple alert with a button
-						{#snippet alertTopButton()}
-							<Button>button</Button>
-						{/snippet}
-					</Alert>
-					<Alert
-						{...activeParams}
-						on:alert:closed={() => {
-							alert('closed');
-						}}
-					>
-						Alert with button close
-						{#snippet alertMessage()}
-							description here here
-						{/snippet}
-						{#snippet alertButtonZone()}
-							<Button data-close>close</Button>
-						{/snippet}
-					</Alert>
-				</div>
-			{/snippet}
-		</Demoer>
-	</DemoPage>
-	<DemoPage title="Using props" component="Alert" code={code2}>
-		<Demoer {parameters} {componentArgs}>
-			{#snippet children({ activeParams })}
-				<div class="flex-h flex-wrap gap-medium">
-					<Alert {...activeParams} />
-				</div>
-			{/snippet}
-		</Demoer>
-	</DemoPage>
-</ComponentDemo>
+<script lang="ts">
+	import ComponentDemo from '../demoer/DemoerComponent.svelte';
+	import Button from '../../controls/button/Button.svelte';
+	import Alert from './Alert.svelte';
+	import Demoer from '../demoer/Demoer.svelte';
+	import DemoPage from '../demoer/DemoPage.svelte';
+	import { parameters, componentArgs } from './types.js';
+
+	let code1 = `
+<Alert {...activeParams}>
+	Simple alert with a button
+	{#snippet topButtonSlot()}
+		<Button>button</Button>
+	{/snippet}
+</Alert>`;
+	let code2 = `
+<Alert />	`;
+</script>
+
+<ComponentDemo
+	component="Alert"
+	cite="Then they were informed, then they were messaged, then they were alerted. Br Jhons, 1752"
+>
+	<DemoPage component="Alert" code={code1}>
+		<Demoer {parameters} {componentArgs}>
+			{#snippet children({ activeParams })}
+				<div class="flex-h flex-wrap flex-align-middle gap-medium">
+					<Alert {...activeParams}>hi !</Alert>
+					<Alert {...activeParams}>
+						Simple alert with a button
+						{#snippet alertTopButton()}
+							<Button>button</Button>
+						{/snippet}
+					</Alert>
+					<Alert
+						{...activeParams}
+						on:alert:closed={() => {
+							alert('closed');
+						}}
+					>
+						Alert with button close
+						{#snippet alertMessage()}
+							description here here
+						{/snippet}
+						{#snippet alertButtonZone()}
+							<Button data-close>close</Button>
+						{/snippet}
+					</Alert>
+				</div>
+			{/snippet}
+		</Demoer>
+	</DemoPage>
+	<DemoPage title="Using props" component="Alert" code={code2}>
+		<Demoer {parameters} {componentArgs}>
+			{#snippet children({ activeParams })}
+				<div class="flex-h flex-wrap gap-medium">
+					<Alert {...activeParams} />
+				</div>
+			{/snippet}
+		</Demoer>
+	</DemoPage>
+</ComponentDemo>

package/dist/base/alert/Alert.svelte

@@ -1,123 +1,123 @@
-<script module lang="ts">
-	import type { Snippet } from "svelte";
-	import type { ElementProps, CommonProps } from '../../types/index.js'; 
- 
-	export interface AlertProps extends CommonProps {
-		/** alert level */
-		level?: ElementProps["levels"];
-		/** message to be shown */
-		message?: string;
-		/** make the alert draggable */
-		draggable?: boolean;
-		/** show or hide the alert */
-		isOpen?: boolean;
-		children?: Snippet;
-		alertTopButton?: Snippet;
-		alertMessage?: Snippet;
-		alertButtonZone?: Snippet;
-		alertButtonClose?: Snippet;
-	}
-</script>
-
-<script lang="ts">
-	import { fade } from 'svelte/transition';
-	import Divider from '../divider/Divider.svelte';
-	import Button from '../../controls/button/Button.svelte';
-	import type { ExpandProps } from '../../types/index.js';
-	// import type { AlertProps } from './types.js';
-	import Slotted from '../../utils/slotted/Slotted.svelte';
-	import IconButton from '../../controls/button/IconButton.svelte';
-
-	let {
-		class: className,
-		message,
-		draggable = false,
-		level = $bindable<ElementProps['levels']>('info'),
-		isOpen = $bindable<boolean>(false),
-		element = $bindable<HTMLDialogElement>(),
-		children,
-		alertTopButton,
-		alertMessage,
-		alertButtonZone,
-		alertButtonClose
-	}: AlertProps = $props();
-
-	export const actions: Record<'open' | 'toggle' | 'close', Function> = {
-		open,
-		toggle,
-		close
-	};
-
-	const handleClick = (event: Event) => {
-		if ((event?.target as Element)?.getAttribute('data-close')) {
-			event.stopPropagation();
-			actions.close();
-		}
-	};
-
-	$effect(() => {
-		if (element) {
-			element.addEventListener('click', handleClick, true);
-		}
-		return () => {
-			if (element) {
-				element.removeEventListener('click', handleClick);
-			}
-		};
-	});
-
-	function open() {
-		isOpen = true;
-	}
-	function toggle() {
-		isOpen = !isOpen;
-	}
-	function close() {
-		isOpen = false;
-	}
-</script>
-
-{#if isOpen}
-	<dialog
-		open={isOpen}
-		{draggable}
-		bind:this={element}
-		transition:fade|global
-		class="alert {className}"
-	>
-		<article class="dialog-content border-color-scheme-{level}">
-			<header class="header-bar">
-				<div class="dot bg-themed-scheme-{level}"></div>
-				<div class="title">
-					<Slotted child={children}>{message}</Slotted>
-				</div>
-				<Slotted child={alertTopButton} />
-				<div data-close>
-					<Slotted child={alertButtonClose}
-						><IconButton
-							icon="window-close"
-							variant="naked"
-							onclick={() => {
-								isOpen = !isOpen;
-							}}
-							aria-label="Close"
-						/></Slotted
-					>
-				</div>
-			</header>
-			{#if alertMessage}
-				<Divider />
-				{@render alertMessage()}
-			{/if}
-			{#if alertButtonZone}
-				<footer class="dialog-footer">
-					{@render alertButtonZone()}
-				</footer>
-			{/if}
-		</article>
-	</dialog>
-{/if}
-
+<script module lang="ts">
+	import type { Snippet } from "svelte";
+	import type { ElementProps, CommonProps } from '../../types/index.js'; 
+ 
+	export interface AlertProps extends CommonProps {
+		/** alert level */
+		level?: ElementProps["levels"];
+		/** message to be shown */
+		message?: string;
+		/** make the alert draggable */
+		draggable?: boolean;
+		/** show or hide the alert */
+		isOpen?: boolean;
+		children?: Snippet;
+		alertTopButton?: Snippet;
+		alertMessage?: Snippet;
+		alertButtonZone?: Snippet;
+		alertButtonClose?: Snippet;
+	}
+</script>
+
+<script lang="ts">
+	import { fade } from 'svelte/transition';
+	import Divider from '../divider/Divider.svelte';
+	import Button from '../../controls/button/Button.svelte';
+	import type { ExpandProps } from '../../types/index.js';
+	// import type { AlertProps } from './types.js';
+	import Slotted from '../../utils/slotted/Slotted.svelte';
+	import IconButton from '../../controls/button/IconButton.svelte';
+
+	let {
+		class: className,
+		message,
+		draggable = false,
+		level = $bindable<ElementProps['levels']>('info'),
+		isOpen = $bindable<boolean>(false),
+		element = $bindable<HTMLDialogElement>(),
+		children,
+		alertTopButton,
+		alertMessage,
+		alertButtonZone,
+		alertButtonClose
+	}: AlertProps = $props();
+
+	export const actions: Record<'open' | 'toggle' | 'close', Function> = {
+		open,
+		toggle,
+		close
+	};
+
+	const handleClick = (event: Event) => {
+		if ((event?.target as Element)?.getAttribute('data-close')) {
+			event.stopPropagation();
+			actions.close();
+		}
+	};
+
+	$effect(() => {
+		if (element) {
+			element.addEventListener('click', handleClick, true);
+		}
+		return () => {
+			if (element) {
+				element.removeEventListener('click', handleClick);
+			}
+		};
+	});
+
+	function open() {
+		isOpen = true;
+	}
+	function toggle() {
+		isOpen = !isOpen;
+	}
+	function close() {
+		isOpen = false;
+	}
+</script>
+
+{#if isOpen}
+	<dialog
+		open={isOpen}
+		{draggable}
+		bind:this={element}
+		transition:fade|global
+		class="alert {className}"
+	>
+		<article class="dialog-content border-color-scheme-{level}">
+			<header class="header-bar">
+				<div class="dot bg-themed-scheme-{level}"></div>
+				<div class="title">
+					<Slotted child={children}>{message}</Slotted>
+				</div>
+				<Slotted child={alertTopButton} />
+				<div data-close>
+					<Slotted child={alertButtonClose}
+						><IconButton
+							icon="window-close"
+							variant="naked"
+							onclick={() => {
+								isOpen = !isOpen;
+							}}
+							aria-label="Close"
+						/></Slotted
+					>
+				</div>
+			</header>
+			{#if alertMessage}
+				<Divider />
+				{@render alertMessage()}
+			{/if}
+			{#if alertButtonZone}
+				<footer class="dialog-footer">
+					{@render alertButtonZone()}
+				</footer>
+			{/if}
+		</article>
+	</dialog>
+{/if}
+
 <style>:root {
   --alert-radius: var(--sld-radius-small);
   --alert-color-border: var(--sld-color-border);
@@ -213,4 +213,4 @@ dialog.alert article.dialog-content footer.dialog-footer button {
   color: white;
   text-shadow: 0 0 0.125rem #cc0000;
   background-color: red;
-}</style>
+}</style>

package/dist/base/alert/alert.scss

@@ -1,93 +1,93 @@
-@use "../../styles/slotui-mixins.scss";
-
-:root {
-    --alert-radius: var(--sld-radius-small);
-    --alert-color-border: var(--sld-color-border);
-    --alert-color-background: var(--sld-color-background);
-    --alert-elevation: var(--sld-elevation-4);
-    --alert-pad: var(--sld-pad-small);
-    --alert-gap: var(--sld-gap-small);
-}
-
-dialog.alert {
-    &[open="true"] {
-        display: none;
-    }
-    position: relative;
-    min-width: 350px;
-    display: inline-block;
-    border-radius: var(--alert-radius);
-    border: 1px solid var(--alert-color-border);
-    background-color: var(--alert-color-background);
-    box-shadow: var(--alert-elevation);
-    overflow: hidden;
-    padding: 0;
-    article.dialog-content {
-        padding: var(--alert-pad);
-        border-bottom: 4px solid var(--alert-color-border);
-        header.header-bar {
-            display: flex;
-            align-items: center;
-            padding: var(--alert-pad-small);
-            gap: var(--alert-gap-small, 1rem);
-            .dot {
-                display: inline-block;
-                border: 1px solid var(--alert-color-border);
-                border-radius: var(--alert-radius);
-                height: 16px;
-                width: 4px;
-                transform: translate(-50%, 0);
-            }
-            .title {
-                flex: 1;
-                display: flex;
-                align-items: center;
-            }
-            [data-close] {
-                border-radius: var(--alert-radius);
-                margin: 0.25rem;
-                padding: 0.25rem;
-            }
-        }
-        footer.dialog-footer {
-            display: flex;
-            justify-content: flex-end;
-            padding: var(--alert-pad);
-            border-top: 1px solid var(--alert-color-border);
-            button {
-                margin-left: 1rem;
-            }
-        }
-    }
-}
-
-.bg-themed-scheme-discrete {
-    color: black;
-    text-shadow: 0 0 0.125rem #b3b3b3;
-    background-color: #ccc;
-}
-.bg-themed-scheme-success {
-    color: white;
-    text-shadow: 0 0 0.125rem #004d00;
-    background-color: green;
-}
-.bg-themed-scheme-info {
-    color: black;
-    text-shadow: 0 0 0.125rem #ffd324;
-    background-color: #ffdd57;
-}
-.bg-themed-scheme-warning {
-    color: black;
-    text-shadow: 0 0 0.125rem #b49104;
-    background-color: #e6b905;
-}
-.bg-themed-scheme-alert {
-    color: black;
-    text-shadow: 0 0 0.125rem #cc5c00;
-    background-color: #ff7300;
-}
-.bg-themed-scheme-error {
-    color: white;
-    text-shadow: 0 0 0.125rem #cc0000;
-    background-color: red;
-}
+@use "../../styles/slotui-mixins.scss";
+
+:root {
+    --alert-radius: var(--sld-radius-small);
+    --alert-color-border: var(--sld-color-border);
+    --alert-color-background: var(--sld-color-background);
+    --alert-elevation: var(--sld-elevation-4);
+    --alert-pad: var(--sld-pad-small);
+    --alert-gap: var(--sld-gap-small);
+}
+
+dialog.alert {
+    &[open="true"] {
+        display: none;
+    }
+    position: relative;
+    min-width: 350px;
+    display: inline-block;
+    border-radius: var(--alert-radius);
+    border: 1px solid var(--alert-color-border);
+    background-color: var(--alert-color-background);
+    box-shadow: var(--alert-elevation);
+    overflow: hidden;
+    padding: 0;
+    article.dialog-content {
+        padding: var(--alert-pad);
+        border-bottom: 4px solid var(--alert-color-border);
+        header.header-bar {
+            display: flex;
+            align-items: center;
+            padding: var(--alert-pad-small);
+            gap: var(--alert-gap-small, 1rem);
+            .dot {
+                display: inline-block;
+                border: 1px solid var(--alert-color-border);
+                border-radius: var(--alert-radius);
+                height: 16px;
+                width: 4px;
+                transform: translate(-50%, 0);
+            }
+            .title {
+                flex: 1;
+                display: flex;
+                align-items: center;
+            }
+            [data-close] {
+                border-radius: var(--alert-radius);
+                margin: 0.25rem;
+                padding: 0.25rem;
+            }
+        }
+        footer.dialog-footer {
+            display: flex;
+            justify-content: flex-end;
+            padding: var(--alert-pad);
+            border-top: 1px solid var(--alert-color-border);
+            button {
+                margin-left: 1rem;
+            }
+        }
+    }
+}
+
+.bg-themed-scheme-discrete {
+    color: black;
+    text-shadow: 0 0 0.125rem #b3b3b3;
+    background-color: #ccc;
+}
+.bg-themed-scheme-success {
+    color: white;
+    text-shadow: 0 0 0.125rem #004d00;
+    background-color: green;
+}
+.bg-themed-scheme-info {
+    color: black;
+    text-shadow: 0 0 0.125rem #ffd324;
+    background-color: #ffdd57;
+}
+.bg-themed-scheme-warning {
+    color: black;
+    text-shadow: 0 0 0.125rem #b49104;
+    background-color: #e6b905;
+}
+.bg-themed-scheme-alert {
+    color: black;
+    text-shadow: 0 0 0.125rem #cc5c00;
+    background-color: #ff7300;
+}
+.bg-themed-scheme-error {
+    color: white;
+    text-shadow: 0 0 0.125rem #cc0000;
+    background-color: red;
+}