@iroco/ui 1.0.0-9 → 1.0.1

package/README.md

@@ -10,8 +10,8 @@ See the [Documentation](https://iroco-co.github.io/iroco-ui/) (not in sync anymo
 
 Prerequisites:
 
-- @sveltejs/kit: ^2.5.0
-- svelte: ^4.2.10
+- @sveltejs/kit: ^2.x
+- svelte: ^5.x
 
 ```sh
 # latest
@@ -28,7 +28,7 @@ npm install @iroco/ui@next
 @use 'node_modules/@iroco/ui/dist/scss/fonts';
 @use 'node_modules/@iroco/ui/dist/scss/style';
 @use 'node_modules/@iroco/ui/dist/scss/constants';
-@import 'node_modules/@iroco/ui/dist/scss/containers';
+@use 'node_modules/@iroco/ui/dist/scss/containers';
 ```
 
 Example of layout with navigation
@@ -49,13 +49,15 @@ Example of layout with navigation
 <style lang="scss">
 	@use 'node_modules/@iroco/ui/dist/scss/colors.scss';
 	@use 'node_modules/@iroco/ui/dist/scss/constants.scss';
-	@import 'node_modules/@iroco/ui/dist/scss/containers.scss';
-	@import 'node_modules/@iroco/ui/dist/scss/button.scss';
+	@use 'node_modules/@iroco/ui/dist/scss/containers.scss';
+	@use 'node_modules/@iroco/ui/dist/scss/button.scss';
 </style>
 ```
 
 # develop
 
+[Useful Svelte 5 + Storybook examples](https://github.com/podman-desktop/podman-desktop/tree/main/storybook).
+
 To install dependencies :
 
 ```shell

package/dist/Alert.stories.svelte

@@ -1,32 +1,31 @@
-<script context="module">
-	import Alert from './Alert.svelte';
+<script module lang="ts">
+	import { Alert } from './index';
+	import { defineMeta, setTemplate } from '@storybook/addon-svelte-csf';
 
-	export const meta = {
+	const { Story } = defineMeta({
 		title: 'Iroco-UI/Atoms/Alert',
-		component: Alert,
-		argTypes: {
-			type: {
-				control: { type: 'select' },
-				options: ['success', 'danger', 'flash']
-			}
-		}
-	};
+		component: Alert
+	});
 </script>
 
-<script>
-	import { Story, Template } from '@storybook/addon-svelte-csf';
+<script lang="ts">
+	setTemplate(template);
 </script>
 
-<Template let:args>
+{#snippet template({ ...args })}
 	<Alert {...args}>
-		Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut
-		labore et dolore magna aliqua. Ut porttitor leo a diam. Gravida dictum fusce ut placerat orci
-		nulla. Pulvinar sapien et ligula ullamcorper. Ultrices neque ornare aenean euismod. Facilisi
-		cras fermentum odio eu feugiat pretium.
+		Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc eros lacus, commodo eu tristique non, ultricies eu
+		tellus. Nulla facilisi. Integer a tincidunt purus. Proin vulputate tristique magna. Aliquam id eros id ante
+		malesuada interdum. Phasellus tristique ac leo at fringilla. Cras a viverra nibh, vitae rutrum ante. Sed pharetra
+		nibh ac velit dignissim ornare sed accumsan lacus. Vestibulum tincidunt purus sapien, ac dapibus sem semper a.
+		Nullam venenatis vestibulum risus id molestie. Aliquam facilisis nunc at nunc aliquam hendrerit. Etiam sodales
+		sodales lectus, ut suscipit lacus vehicula nec. Proin vel magna sed orci condimentum ornare in a odio. In varius eu
+		augue eget tincidunt. Ut quis porttitor nulla. Nulla leo nunc, efficitur non ipsum vel, tincidunt auctor lectus.
 	</Alert>
-</Template>
+{/snippet}
 
 <Story name="Default" />
 <Story name="Danger" args={{ type: 'danger' }} />
-<Story name="Success" args={{ type: 'success' }} />
 <Story name="Flash" args={{ type: 'flash' }} />
+<Story name="Success" args={{ type: 'success' }} />
+

package/dist/Alert.stories.svelte.d.ts

@@ -1,37 +1,19 @@
-export namespace meta {
-    export let title: string;
-    export { Alert as component };
-    export namespace argTypes {
-        namespace type {
-            namespace control {
-                let type_1: string;
-                export { type_1 as type };
-            }
-            let options: string[];
-        }
-    }
+import { Alert } from './index';
+interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
+    new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
+        $$bindings?: Bindings;
+    } & Exports;
+    (internal: unknown, props: {
+        $$events?: Events;
+        $$slots?: Slots;
+    }): Exports & {
+        $set?: any;
+        $on?: any;
+    };
+    z_$$bindings?: Bindings;
 }
-/** @typedef {typeof __propDef.props}  AlertProps */
-/** @typedef {typeof __propDef.events}  AlertEvents */
-/** @typedef {typeof __propDef.slots}  AlertSlots */
-export default class Alert extends SvelteComponent<{
-    [x: string]: never;
-}, {
+declare const Alert: $$__sveltets_2_IsomorphicComponent<Record<string, never>, {
     [evt: string]: CustomEvent<any>;
-}, {}> {
-}
-export type AlertProps = typeof __propDef.props;
-export type AlertEvents = typeof __propDef.events;
-export type AlertSlots = typeof __propDef.slots;
-import Alert from './Alert.svelte';
-import { SvelteComponent } from "svelte";
-declare const __propDef: {
-    props: {
-        [x: string]: never;
-    };
-    events: {
-        [evt: string]: CustomEvent<any>;
-    };
-    slots: {};
-};
-export {};
+}, {}, {}, string>;
+type Alert = InstanceType<typeof Alert>;
+export default Alert;

package/dist/Alert.svelte

@@ -1,13 +1,20 @@
-<script>import IconClose from "./IconClose.svelte";
-export let type = "success";
-export let callback;
+<script lang="ts">
+	import IconClose from './IconClose.svelte';
+
+	interface Props {
+		type?: 'success' | 'danger' | 'flash';
+		callback: (e: Event) => void;
+		children?: import('svelte').Snippet;
+	}
+
+	let { type = 'success', callback, children }: Props = $props();
 </script>
 
 <div class={`alert alert--${type}`}>
-	<button on:click={callback} class="alert__close">
+	<button onclick={callback} class="alert__close">
 		<IconClose width="2em" height="2em" />
 	</button>
-	<slot />
+	{@render children?.()}
 </div>
 
 <style>.alert {

package/dist/Alert.svelte.d.ts

@@ -1,19 +1,8 @@
-import { SvelteComponent } from "svelte";
-declare const __propDef: {
-    props: {
-        type?: "success" | "danger" | "flash" | undefined;
-        callback: (e: Event) => void;
-    };
-    events: {
-        [evt: string]: CustomEvent<any>;
-    };
-    slots: {
-        default: {};
-    };
-};
-export type AlertProps = typeof __propDef.props;
-export type AlertEvents = typeof __propDef.events;
-export type AlertSlots = typeof __propDef.slots;
-export default class Alert extends SvelteComponent<AlertProps, AlertEvents, AlertSlots> {
+interface Props {
+    type?: 'success' | 'danger' | 'flash';
+    callback: (e: Event) => void;
+    children?: import('svelte').Snippet;
 }
-export {};
+declare const Alert: import("svelte").Component<Props, {}, "">;
+type Alert = ReturnType<typeof Alert>;
+export default Alert;

package/dist/Button.stories.svelte

@@ -1,7 +1,10 @@
-<script context="module">
-	import Button from './Button.svelte';
+<script module lang="ts">
+	import { Button } from './index';
+
+	import { defineMeta, setTemplate } from '@storybook/addon-svelte-csf';
+
+	const { Story } = defineMeta({
 
-	export const meta = {
 		title: 'Iroco-UI/Atoms/Button',
 		component: Button,
 		argTypes: {
@@ -14,25 +17,26 @@
 				options: ['small', 'regular']
 			}
 		}
-	};
-</script>
-
-<script>
-	import { Story, Template } from '@storybook/addon-svelte-csf';
+	});
 
-	let count = 0;
+	let count = $state(0);
 
 	function handleClick() {
 		count += 1;
 	}
 </script>
 
-<Template let:args>
+
+<script lang="ts">
+	setTemplate(template);
+</script>
+
+{#snippet template({ ...args })}
 	<!--👇 'on:click' allows to forward event to addon-actions  -->
-	<Button {...args} on:click={handleClick}>
+	<Button {...args} onclick={handleClick}>
 		You clicked: {count}
 	</Button>
-</Template>
+{/snippet}
 
 <Story name="Default" />
 <Story name="Success" args={{ kind: 'success' }} />

package/dist/Button.stories.svelte.d.ts

@@ -1,45 +1,19 @@
-export namespace meta {
-    export let title: string;
-    export { Button as component };
-    export namespace argTypes {
-        namespace kind {
-            namespace control {
-                let type: string;
-            }
-            let options: string[];
-        }
-        namespace size {
-            export namespace control_1 {
-                let type_1: string;
-                export { type_1 as type };
-            }
-            export { control_1 as control };
-            let options_1: string[];
-            export { options_1 as options };
-        }
-    }
+import { Button } from './index';
+interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
+    new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
+        $$bindings?: Bindings;
+    } & Exports;
+    (internal: unknown, props: {
+        $$events?: Events;
+        $$slots?: Slots;
+    }): Exports & {
+        $set?: any;
+        $on?: any;
+    };
+    z_$$bindings?: Bindings;
 }
-/** @typedef {typeof __propDef.props}  ButtonProps */
-/** @typedef {typeof __propDef.events}  ButtonEvents */
-/** @typedef {typeof __propDef.slots}  ButtonSlots */
-export default class Button extends SvelteComponent<{
-    [x: string]: never;
-}, {
+declare const Button: $$__sveltets_2_IsomorphicComponent<Record<string, never>, {
     [evt: string]: CustomEvent<any>;
-}, {}> {
-}
-export type ButtonProps = typeof __propDef.props;
-export type ButtonEvents = typeof __propDef.events;
-export type ButtonSlots = typeof __propDef.slots;
-import Button from './Button.svelte';
-import { SvelteComponent } from "svelte";
-declare const __propDef: {
-    props: {
-        [x: string]: never;
-    };
-    events: {
-        [evt: string]: CustomEvent<any>;
-    };
-    slots: {};
-};
-export {};
+}, {}, {}, string>;
+type Button = InstanceType<typeof Button>;
+export default Button;

package/dist/Button.svelte

@@ -1,21 +1,39 @@
-<svelte:options accessors={true} />
+<script lang="ts">
+	import type { MouseEventHandler } from 'svelte/elements';
+
+	interface Props {
+		type?: 'button' | 'reset' | 'submit' | null | undefined;
+		disabled?: boolean;
+		kind?: 'danger' | 'success' | 'dark' | 'basic';
+		size?: 'small' | 'regular';
+		fullWidth?: boolean;
+		id?: string | null;
+		children?: import('svelte').Snippet;
+		onclick?: MouseEventHandler<HTMLButtonElement>;
+	}
+
+	let {
+		type = 'button',
+		disabled = false,
+		kind = 'basic',
+		size = 'regular',
+		fullWidth = false,
+		id = null,
+		children,
+		onclick
+	}: Props = $props();
 
-<script>export let type = "button";
-export let disabled = false;
-export let kind = "basic";
-export let size = "regular";
-export let id;
 </script>
 
 <button
 	{id}
-	class={`iroco-ui-button iroco-ui-button--${size} iroco-ui-button--${kind}`}
+	class={`iroco-ui-button iroco-ui-button--${size} iroco-ui-button--${kind} ${fullWidth?'iroco-ui-button--full-width':''}`}
 	class:disabled
 	{type}
 	{disabled}
-	on:click
+	{onclick}
 >
-	<slot />
+	{@render children?.()}
 </button>
 
 <style>.container-wide {
@@ -190,9 +208,9 @@ export let id;
   border-radius: 0.3em;
 }
 .iroco-ui-button--basic {
-  color: var(--btn-basic-label);
-  background: var(--btn-basic-bg);
-  border: 1px solid var(--btn-basic-border);
+  color: var(--btn-secondary-label);
+  background: var(--btn-secondary-bg);
+  border: 1px solid var(--btn-secondary-border);
 }
 .iroco-ui-button--dark {
   background: var(--dark-btn-primary-bg);
@@ -229,6 +247,9 @@ export let id;
 .iroco-ui-button.disabled:hover, .iroco-ui-button:disabled:hover {
   box-shadow: none;
 }
+.iroco-ui-button--full-width {
+  width: 100%;
+}
 
 .iroco-ui-link {
   background: none;

package/dist/Button.svelte.d.ts

@@ -1,39 +1,14 @@
-import { SvelteComponent } from "svelte";
-declare const __propDef: {
-    props: {
-        type?: string | undefined;
-        disabled?: boolean | undefined;
-        kind?: "success" | "danger" | "dark" | "basic" | undefined;
-        size?: "small" | "regular" | undefined;
-        id: string;
-    };
-    events: {
-        click: MouseEvent;
-    } & {
-        [evt: string]: CustomEvent<any>;
-    };
-    slots: {
-        default: {};
-    };
-};
-export type ButtonProps = typeof __propDef.props;
-export type ButtonEvents = typeof __propDef.events;
-export type ButtonSlots = typeof __propDef.slots;
-export default class Button extends SvelteComponent<ButtonProps, ButtonEvents, ButtonSlots> {
-    get type(): string | undefined;
-    /**accessor*/
-    set type(_: string | undefined);
-    get disabled(): boolean | undefined;
-    /**accessor*/
-    set disabled(_: boolean | undefined);
-    get kind(): "success" | "danger" | "dark" | "basic" | undefined;
-    /**accessor*/
-    set kind(_: "success" | "danger" | "dark" | "basic" | undefined);
-    get size(): "small" | "regular" | undefined;
-    /**accessor*/
-    set size(_: "small" | "regular" | undefined);
-    get id(): string;
-    /**accessor*/
-    set id(_: string);
+import type { MouseEventHandler } from 'svelte/elements';
+interface Props {
+    type?: 'button' | 'reset' | 'submit' | null | undefined;
+    disabled?: boolean;
+    kind?: 'danger' | 'success' | 'dark' | 'basic';
+    size?: 'small' | 'regular';
+    fullWidth?: boolean;
+    id?: string | null;
+    children?: import('svelte').Snippet;
+    onclick?: MouseEventHandler<HTMLButtonElement>;
 }
-export {};
+declare const Button: import("svelte").Component<Props, {}, "">;
+type Button = ReturnType<typeof Button>;
+export default Button;

package/dist/DataTable.stories.svelte

@@ -1,31 +1,36 @@
-<script context="module">
+<script module lang="ts">
 	import { DataTable } from './index';
 
-	export const meta = {
+	import { defineMeta, setTemplate } from '@storybook/addon-svelte-csf';
+
+	const { Story } = defineMeta({
+
 		title: 'Iroco-UI/Components/DataTable',
 		component: DataTable,
-		argTypes: {}
-	};
+		argTypes: {},
+		args: {
+			columns: [
+				{ key: 'key1', title: 'Title 1' },
+				{ key: 'key2', title: 'Title 2' },
+				{ key: 'key3', title: 'Title 3' }
+			],
+			rows: [
+				{ key1: 'value 1', key2: 'value 2', key3: 'value 3' },
+				{ key1: 'value a', key2: 'value b', key3: 'value c' },
+				{ key1: 1.56, key2: 2.76, key3: 3.98 }
+			]
+		}
+	});
 </script>
-
-<script>
-	import { Story, Template } from '@storybook/addon-svelte-csf';
+<script lang="ts">
+	setTemplate(template);
 </script>
 
-<Template let:args>
+{#snippet template({ ...args })}
 	<DataTable
 		{...args}
-		columns={[
-			{ key: 'key1', title: 'Title 1' },
-			{ key: 'key2', title: 'Title 2' },
-			{ key: 'key3', title: 'Title 3' }
-		]}
-		rows={[
-			{ key1: 'value 1', key2: 'value 2', key3: 'value 3' },
-			{ key1: 'value a', key2: 'value b', key3: 'value c' },
-			{ key1: 1.56, key2: 2.76, key3: 3.98 }
-		]}
+
 	/>
-</Template>
+{/snippet}
 
 <Story name="Default" />

package/dist/DataTable.stories.svelte.d.ts

@@ -1,29 +1,19 @@
-export namespace meta {
-    export let title: string;
-    export { DataTable as component };
-    export let argTypes: {};
-}
-/** @typedef {typeof __propDef.props}  DataTableProps */
-/** @typedef {typeof __propDef.events}  DataTableEvents */
-/** @typedef {typeof __propDef.slots}  DataTableSlots */
-export default class DataTable extends SvelteComponent<{
-    [x: string]: never;
-}, {
-    [evt: string]: CustomEvent<any>;
-}, {}> {
-}
-export type DataTableProps = typeof __propDef.props;
-export type DataTableEvents = typeof __propDef.events;
-export type DataTableSlots = typeof __propDef.slots;
 import { DataTable } from './index';
-import { SvelteComponent } from "svelte";
-declare const __propDef: {
-    props: {
-        [x: string]: never;
+interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
+    new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
+        $$bindings?: Bindings;
+    } & Exports;
+    (internal: unknown, props: {
+        $$events?: Events;
+        $$slots?: Slots;
+    }): Exports & {
+        $set?: any;
+        $on?: any;
     };
-    events: {
-        [evt: string]: CustomEvent<any>;
-    };
-    slots: {};
-};
-export {};
+    z_$$bindings?: Bindings;
+}
+declare const DataTable: $$__sveltets_2_IsomorphicComponent<Record<string, never>, {
+    [evt: string]: CustomEvent<any>;
+}, {}, {}, string>;
+type DataTable = InstanceType<typeof DataTable>;
+export default DataTable;

package/dist/DataTable.svelte

@@ -1,35 +1,55 @@
-<script lang="ts">export let rows;
-export let columns;
+<script lang="ts">
+	import type { Component } from 'svelte';
+
+	interface Props {
+		rows: Array<TableRow>,
+		columns: Array<TableColumn>
+	}
+
+	type TableColumn = {
+		key: string;
+		title: string;
+		renderComponent?: {
+			component: Component;
+			/* eslint-disable @typescript-eslint/no-explicit-any */
+			props?: any;
+		};
+	};
+
+	type TableRow = {
+		[key: string]: string | number;
+	};
+
+	let { rows, columns }: Props = $props();
 </script>
 
 <table class="data-table">
 	<thead class="data-table__header">
-		<tr>
-			{#each columns as column}
-				<th class="data-table__header__cell">
-					{column.title}
-				</th>
-			{/each}
-		</tr>
+	<tr>
+		{#each columns as column}
+			<th class="data-table__header__cell">
+				{column.title}
+			</th>
+		{/each}
+	</tr>
 	</thead>
 
 	<tbody class="data-table__body">
-		{#each rows as row}
-			<tr class="data-table__body__row">
-				{#each columns as { key, renderComponent }}
-					<td class="data-table__body__cell">
-						{#if renderComponent}
-							<svelte:component
-								this={renderComponent.component}
-								on:click={() => renderComponent.props.onclick(row)}
-							/>
-						{:else}
-							{row[key]}
-						{/if}
-					</td>
-				{/each}
-			</tr>
-		{/each}
+	{#each rows as row}
+		<tr class="data-table__body__row">
+			{#each columns as { key, renderComponent }}
+				<td class="data-table__body__cell">
+					{#if renderComponent}
+						<renderComponent.component
+							on:click={() => renderComponent.props.onclick(row)}
+						/>
+					{:else}
+						{row[key]}
+					{/if}
+				</td>
+			{/each}
+		</tr>
+	{/each}
 	</tbody>
 </table>
 

package/dist/DataTable.svelte.d.ts

@@ -1,26 +1,19 @@
-import { SvelteComponent } from "svelte";
-declare const __propDef: {
-    props: {
-        rows: {
-            [key: string]: string | number;
-        }[];
-        columns: {
-            key: string;
-            title: string;
-            renderComponent?: {
-                component: SvelteComponent;
-                props?: any;
-            } | undefined;
-        }[];
+import type { Component } from 'svelte';
+type TableColumn = {
+    key: string;
+    title: string;
+    renderComponent?: {
+        component: Component;
+        props?: any;
     };
-    events: {
-        [evt: string]: CustomEvent<any>;
-    };
-    slots: {};
 };
-export type DataTableProps = typeof __propDef.props;
-export type DataTableEvents = typeof __propDef.events;
-export type DataTableSlots = typeof __propDef.slots;
-export default class DataTable extends SvelteComponent<DataTableProps, DataTableEvents, DataTableSlots> {
+type TableRow = {
+    [key: string]: string | number;
+};
+interface Props {
+    rows: Array<TableRow>;
+    columns: Array<TableColumn>;
 }
-export {};
+declare const DataTable: Component<Props, {}, "">;
+type DataTable = ReturnType<typeof DataTable>;
+export default DataTable;