firstly 0.2.0 → 0.2.1

package/esm/ui/Field.svelte

@@ -3,6 +3,7 @@
 	import type { HTMLInputAttributes } from 'svelte/elements'
 
 	import { type FieldMetadata, type FindOptions } from 'remult'
+	import { midTrim } from '@kitql/helpers'
 
 	import { suffixWithS } from '../formats/strings'
 	import { type BaseItem, type Cell } from '../internals'
@@ -23,8 +24,11 @@
 	import SelectRadio from './internals/select/SelectRadio.svelte'
 	import Textarea from './internals/Textarea.svelte'
 	import { LibIcon_Eye, LibIcon_EyeOff } from './LibIcon'
+	import Link from './link/Link.svelte'
 	import LinkPlus from './link/LinkPlus.svelte'
 
+	// import Select2 from './internals/select/Select2.svelte'
+
 	export let cell: Cell<T>
 	export let value: HTMLInputAttributes['value'] = undefined
 
@@ -203,9 +207,15 @@
 	{@const clearableComputed =
 		cell.clearable || clearable || (mode === 'filtre' && clearable === undefined)}
 	{#if isViewMode(mode, cell.field)}
-		<span class="input-bordered flex items-center pl-2 pr-4">
+		<span class="flex items-center pr-4 pl-2">
 			{#if cell.field?.inputType === 'checkbox'}
-				<input type="checkbox" {...common(cell.field)} class="checkbox ml-2" disabled checked={value} />
+				<input
+					type="checkbox"
+					{...common(cell.field)}
+					class="checkbox ml-2 border-base-content/60"
+					disabled
+					checked={value}
+				/>
 			{:else if metaType.kind === 'relation'}
 				{@const item = getEntityDisplayValue(metaType.repoTarget, value)}
 				<div class={tw('flex items-center gap-4', 'h-12', 'pl-2')}>
@@ -219,10 +229,23 @@
 					{/if}
 					<Clipboardable value={v}>{v}</Clipboardable>
 				</div>
+			{:else if metaType.subKind === 'link'}
+				<div class="ml-2 flex h-12 max-w-sm items-center gap-4 truncate">
+					{#if value}
+						<Link href={value} target="_blank" isExternal
+							>{midTrim(value.replaceAll('https://', '').replaceAll('www.', ''), {
+								len: 38,
+								midStr: ' ... ',
+							})}</Link
+						>
+					{:else}
+						<span class="text-base-content/30">-</span>
+					{/if}
+				</div>
 			{:else}
 				{@const v = displayWithDefaultAndSuffix(cell.field, value)}
 				<div
-					class="ml-2 flex h-12 w-full items-center {metaType.subKind === 'number' ? 'justify-end' : ''}"
+					class="ml-2 pb-2 flex h-12 w-full items-center {metaType.subKind === 'number' ? 'justify-end' : ''}"
 				>
 					<Clipboardable value={v}>{v}</Clipboardable>
 				</div>
@@ -273,6 +296,13 @@
 				on:selected={(e) => dispatchSelected(e.detail)}
 			/>
 		{:else}
+			<!-- <Select2
+				{...common(cell.field, true)}
+				clearable={clearableComputed}
+				items={metaType.values}
+				value={value?.id || value}
+				onChange={(e) => dispatchSelected(metaType.values.find((v) => v.id === e))}
+			/> -->
 			<SelectMelt
 				{focus}
 				{...common(cell.field, true)}
@@ -286,7 +316,7 @@
 			/>
 		{/if}
 	{:else if metaType.subKind === 'checkbox'}
-		<div class="grid content-center items-center pl-4">
+		<div class="grid content-center items-center pl-4 pb-2">
 			<input
 				type="checkbox"
 				{...{ ...common(cell.field), required: undefined }}
@@ -299,20 +329,20 @@
 				}}
 			/>
 		</div>
-	{:else if metaType.subKind === 'text' || metaType.subKind === 'email' || metaType.subKind === 'password' || metaType.subKind === 'dateOnly' || metaType.subKind === 'number' || metaType.subKind === 'textpsd'}
-		<div class="input input-bordered inline-flex w-full items-center pl-2">
+	{:else if metaType.subKind === 'text' || metaType.subKind === 'email' || metaType.subKind === 'password' || metaType.subKind === 'date' || metaType.subKind === 'number' || metaType.subKind === 'textpsd' || metaType.subKind === 'link'}
+		<div class="input inline-flex w-full items-center pl-2">
 			<Input
 				{focus}
 				{...common(cell.field)}
 				autocomplete="off"
 				class={tw(
-					`join-item w-full bg-transparent placeholder:text-base-content/30`,
+					`join-item w-full placeholder:text-base-content/30`,
 					metaType.subKind === 'number' && 'text-end',
 				)}
 				style={cell.field?.inputType === 'textpsd' && textpsdVisible === false
 					? 'filter: blur(0.2rem)'
 					: ''}
-				type={metaType.subKind.replaceAll('dateOnly', 'date').replaceAll('textpsd', 'text')}
+				type={metaType.subKind.replaceAll('textpsd', 'text').replaceAll('link', 'text')}
 				value={toInput(cell.field, value)}
 				{withDedounce}
 				on:input={(e) => {

package/esm/ui/FieldGroup.svelte.d.ts

@@ -3,7 +3,7 @@ import { type StoreItem } from '../internals';
 import type { Cell } from '../internals/cellsBuildor';
 declare class __sveltets_Render<T extends Record<any, any>> {
     props(): {
-        mode?: "edit" | "view" | "filtre";
+        mode?: "view" | "edit" | "filtre";
         cells: Cell<T>[];
         store: StoreItem<T>;
         focusKey?: string | null | undefined;

package/esm/ui/Grid.svelte

@@ -16,7 +16,7 @@
 	import Clipboardable from './Clipboardable.svelte'
 	import GridLoading from './GridLoading.svelte'
 	import Icon from './Icon.svelte'
-	import { align, getAligns } from './index.js'
+	import { align, baseTable, getAligns } from './index.js'
 	import {
 		LibIcon_Add,
 		LibIcon_Settings,
@@ -36,11 +36,11 @@
 	export let loadingRows = 5
 
 	export let classes = {
-		table: 'table-pin-rows table-pin-cols',
+		// table: 'table-pin-rows table-pin-cols',
+		table: '',
 	}
 	export let orderBy: EntityOrderBy<T> | undefined = undefined
 	export let orderByCols: (keyof T)[] | true | undefined = undefined
-	export let settingsLeft = false
 
 	export let dicoNoResult = 'Aucun résultat !'
 
@@ -84,58 +84,15 @@
 	const cellsToTake = (cells: Cell<T>[]) => {
 		return cells.filter((c) => c.modeView !== 'hide')
 	}
-
-	const classForRounding = (i: number) => {
-		if (settingsLeft && (withEdit || withDelete || withAdd)) {
-			if (i === 0) {
-				return ''
-			} else if (i === cells.length - 1) {
-				return 'rounded-tr-lg'
-			}
-		}
-
-		if (!settingsLeft && (withEdit || withDelete || withAdd)) {
-			if (i === 0) {
-				return 'rounded-tl-lg'
-			} else if (i === cells.length - 1) {
-				return ''
-			}
-		}
-
-		if (i === 0) {
-			return 'rounded-tl-lg'
-		} else if (i === cells.length - 1) {
-			return 'rounded-tr-lg'
-		}
-	}
 </script>
 
 <div class="overflow-x-auto">
-	<table class="table {classes.table} bg-base-200">
+	<table class="table {classes.table} {baseTable}">
 		<thead>
 			<tr>
-				{#if settingsLeft && (withEdit || withDelete || withAdd)}
-					<th class="rounded-tl-lg">
-						<div class="flex justify-start">
-							{#if !withAdd}
-								<Icon data={LibIcon_Settings}></Icon>
-							{:else}
-								<Button
-									permission={store.getRepo().metadata.options.permissionApiInsert}
-									disabled={!store.getRepo().metadata.apiInsertAllowed()}
-									class="btn btn-square btn-ghost btn-xs"
-									on:click={() => dispatch('add', {})}
-								>
-									<Icon data={LibIcon_Add} />
-								</Button>
-							{/if}
-						</div>
-					</th>
-				{/if}
-
 				{#each cellsToTake(cells) as b, i}
 					{@const al = align(b.field, b.kind === 'slot')}
-					<th class="{al} {classForRounding(i)}">
+					<th class={al}>
 						{#if b.headerSlot}
 							<slot name="header" field={b.field} />
 						{:else}
@@ -158,15 +115,15 @@
 					</th>
 				{/each}
 
-				{#if !settingsLeft && (withEdit || withDelete || withAdd)}
-					<th class="rounded-tr-lg">
+				{#if withEdit || withDelete || withAdd}
+					<th class="">
 						<div class="flex justify-end">
 							{#if withAdd}
 								<Button
 									permission={store.getRepo().metadata.options.permissionApiInsert}
 									disabled={!store.getRepo().metadata.apiInsertAllowed()}
 									class="btn btn-square btn-ghost btn-xs"
-									on:click={() => dispatch('add', {})}
+									onclick={() => dispatch('add', {})}
 								>
 									<Icon data={LibIcon_Add} />
 								</Button>
@@ -185,34 +142,6 @@
 			{:else}
 				{#each $store.items as row}
 					<tr on:click={() => dispatch('rowclick', row)} class="hover:bg-base-content/20">
-						<!-- BECARFULL THIS CODE IS DUPLICATED -->
-						{#if settingsLeft && (withEdit || withDelete)}
-							<td class="text-left">
-								<div class="flex justify-start gap-2">
-									{#if withEdit}
-										<Button
-											permission={store.getRepo().metadata.options.permissionApiUpdate}
-											disabled={!store.getRepo().metadata.apiUpdateAllowed()}
-											class="btn btn-square btn-ghost btn-xs"
-											on:click={() => dispatch('edit', row)}
-										>
-											<Icon data={LibIcon_Edit} />
-										</Button>
-									{/if}
-									{#if withDelete}
-										<Button
-											permission={store.getRepo().metadata.options.permissionApiDelete}
-											disabled={!store.getRepo().metadata.apiDeleteAllowed()}
-											class="btn btn-square btn-ghost btn-xs"
-											on:click={() => dispatch('delete', row)}
-										>
-											<Icon data={LibIcon_Delete} />
-										</Button>
-									{/if}
-								</div>
-							</td>
-						{/if}
-
 						{#each cellsToTake(cells) as b}
 							{@const metaType = getFieldMetaType(b.field)}
 							<td class={align(b.field, b.kind === 'slot')}>
@@ -287,7 +216,7 @@
 							</td>
 						{/each}
 
-						{#if !settingsLeft && (withEdit || withDelete)}
+						{#if withEdit || withDelete}
 							<td class="text-right">
 								<div class="flex justify-end gap-2">
 									{#if withEdit}
@@ -295,7 +224,7 @@
 											permission={store.getRepo().metadata.options.permissionApiUpdate}
 											disabled={!store.getRepo().metadata.apiUpdateAllowed()}
 											class="btn btn-square btn-ghost btn-xs"
-											on:click={() => dispatch('edit', row)}
+											onclick={() => dispatch('edit', row)}
 										>
 											<Icon data={LibIcon_Edit} />
 										</Button>
@@ -305,7 +234,7 @@
 											permission={store.getRepo().metadata.options.permissionApiDelete}
 											disabled={!store.getRepo().metadata.apiDeleteAllowed()}
 											class="btn btn-square btn-ghost btn-xs"
-											on:click={() => dispatch('delete', row)}
+											onclick={() => dispatch('delete', row)}
 										>
 											<Icon data={LibIcon_Delete} />
 										</Button>

package/esm/ui/Grid.svelte.d.ts

@@ -14,7 +14,6 @@ declare class __sveltets_Render<T extends Record<any, any>> {
         } | undefined;
         orderBy?: EntityOrderBy<T> | undefined;
         orderByCols?: true | (keyof T)[] | undefined;
-        settingsLeft?: boolean;
         dicoNoResult?: string;
     };
     events(): {

package/esm/ui/Grid2.svelte

@@ -18,7 +18,7 @@
 	import Clipboardable from './Clipboardable.svelte'
 	import GridLoading from './GridLoading.svelte'
 	import Icon from './Icon.svelte'
-	import { align, getAligns } from './index.js'
+	import { align, baseTable, getAligns } from './index.js'
 	import {
 		LibIcon_Add,
 		LibIcon_Settings,
@@ -38,11 +38,11 @@
 	export let loadingRows = 5
 
 	export let classes = {
-		table: 'table-pin-rows table-pin-cols',
+		// table: 'table-pin-rows table-pin-cols',
+		table: '',
 	}
 	export let orderBy: EntityOrderBy<T> | undefined = undefined
 	export let orderByCols: (keyof T)[] | true | undefined = undefined
-	export let settingsLeft = false
 
 	export let dicoNoResult = 'Aucun résultat !'
 
@@ -86,58 +86,15 @@
 	const cellsToTake = (cells: Cell<T>[]) => {
 		return cells.filter((c) => c.modeView !== 'hide')
 	}
-
-	const classForRounding = (i: number) => {
-		if (settingsLeft && (withEdit || withDelete || withAdd)) {
-			if (i === 0) {
-				return ''
-			} else if (i === cells.length - 1) {
-				return 'rounded-tr-lg'
-			}
-		}
-
-		if (!settingsLeft && (withEdit || withDelete || withAdd)) {
-			if (i === 0) {
-				return 'rounded-tl-lg'
-			} else if (i === cells.length - 1) {
-				return ''
-			}
-		}
-
-		if (i === 0) {
-			return 'rounded-tl-lg'
-		} else if (i === cells.length - 1) {
-			return 'rounded-tr-lg'
-		}
-	}
 </script>
 
 <div class="overflow-x-auto">
-	<table class="table {classes.table} bg-base-200">
-		<thead>
-			<tr>
-				{#if settingsLeft && (withEdit || withDelete || withAdd)}
-					<th class="rounded-tl-lg">
-						<div class="flex justify-start">
-							{#if !withAdd}
-								<Icon data={LibIcon_Settings}></Icon>
-							{:else}
-								<Button
-									permission={r.metadata.options.permissionApiInsert}
-									disabled={!r.metadata.apiInsertAllowed()}
-									class="btn btn-square btn-ghost btn-xs"
-									on:click={() => dispatch('add', {})}
-								>
-									<Icon data={LibIcon_Add} />
-								</Button>
-							{/if}
-						</div>
-					</th>
-				{/if}
-
+	<table class="table {classes.table} {baseTable}">
+		<thead class="">
+			<tr class="">
 				{#each cellsToTake(cells) as b, i}
 					{@const al = align(b.field, b.kind === 'slot')}
-					<th class="{al} {classForRounding(i)}">
+					<th class={al}>
 						{#if b.headerSlot}
 							<slot name="header" field={b.field} />
 						{:else}
@@ -160,15 +117,15 @@
 					</th>
 				{/each}
 
-				{#if !settingsLeft && (withEdit || withDelete || withAdd)}
-					<th class="rounded-tr-lg">
+				{#if withEdit || withDelete || withAdd}
+					<th class="">
 						<div class="flex justify-end">
 							{#if withAdd}
 								<Button
 									permission={r.metadata.options.permissionApiInsert}
 									disabled={!r.metadata.apiInsertAllowed()}
 									class="btn btn-square btn-ghost btn-xs"
-									on:click={() => dispatch('add', {})}
+									onclick={() => dispatch('add', {})}
 								>
 									<Icon data={LibIcon_Add} />
 								</Button>
@@ -180,40 +137,12 @@
 				{/if}
 			</tr>
 		</thead>
-		<tbody>
+		<tbody class="">
 			{#if r.loading.init && r.metadata.apiReadAllowed}
 				<GridLoading columns={getAligns(cells, withEdit || withDelete)} {loadingRows} />
 			{:else}
 				{#each r.items ?? [] as row}
 					<tr onclick={() => dispatch('rowclick', row)} class="hover:bg-base-content/20">
-						<!-- BECARFULL THIS CODE IS DUPLICATED -->
-						{#if settingsLeft && (withEdit || withDelete)}
-							<td class="text-left">
-								<div class="flex justify-start gap-2">
-									{#if withEdit}
-										<Button
-											permission={r.metadata.options.permissionApiUpdate}
-											disabled={!r.metadata.apiUpdateAllowed()}
-											class="btn btn-square btn-ghost btn-xs"
-											on:click={() => dispatch('edit', row)}
-										>
-											<Icon data={LibIcon_Edit} />
-										</Button>
-									{/if}
-									{#if withDelete}
-										<Button
-											permission={r.metadata.options.permissionApiDelete}
-											disabled={!r.metadata.apiDeleteAllowed()}
-											class="btn btn-square btn-ghost btn-xs"
-											on:click={() => dispatch('delete', row)}
-										>
-											<Icon data={LibIcon_Delete} />
-										</Button>
-									{/if}
-								</div>
-							</td>
-						{/if}
-
 						{#each cellsToTake(cells) as b}
 							{@const metaType = getFieldMetaType(b.field)}
 							<td class={align(b.field, b.kind === 'slot')}>
@@ -229,6 +158,16 @@
 												on:refresh
 											></svelte:component>
 										</div>
+									{:else if b.componentS5}
+										{@const Comp = b.componentS5}
+										<!-- NOT TESTED YET! -->
+										<div class={b.class}>
+											<Comp
+												{...b.props}
+												{...b.rowToProps ? b.rowToProps(row) : {}}
+												onrefresh={() => dispatch('refresh')}
+											/>
+										</div>
 									{:else}
 										<pre>Col: {b.col}</pre>
 										<pre class="bg-error">Component prop needed !</pre>
@@ -282,7 +221,7 @@
 							</td>
 						{/each}
 
-						{#if !settingsLeft && (withEdit || withDelete)}
+						{#if withEdit || withDelete}
 							<td class="text-right">
 								<div class="flex justify-end gap-2">
 									{#if withEdit}
@@ -290,7 +229,7 @@
 											permission={r.metadata.options.permissionApiUpdate}
 											disabled={!r.metadata.apiUpdateAllowed()}
 											class="btn btn-square btn-ghost btn-xs"
-											on:click={() => dispatch('edit', row)}
+											onclick={() => dispatch('edit', row)}
 										>
 											<Icon data={LibIcon_Edit} />
 										</Button>
@@ -300,7 +239,7 @@
 											permission={r.metadata.options.permissionApiDelete}
 											disabled={!r.metadata.apiDeleteAllowed()}
 											class="btn btn-square btn-ghost btn-xs"
-											on:click={() => dispatch('delete', row)}
+											onclick={() => dispatch('delete', row)}
 										>
 											<Icon data={LibIcon_Delete} />
 										</Button>
@@ -345,7 +284,7 @@
 		>
 			<Button
 				class={r.loading.more ? 'btn-disabled' : 'btn-primary'}
-				on:click={() => {
+				onclick={() => {
 					r.queryMore()
 				}}>Plus</Button
 			>

package/esm/ui/Grid2.svelte.d.ts

@@ -14,11 +14,10 @@ declare class __sveltets_Render<T extends Record<any, any>> {
         } | undefined;
         orderBy?: EntityOrderBy<T> | undefined;
         orderByCols?: true | (keyof T)[] | undefined;
-        settingsLeft?: boolean;
         dicoNoResult?: string;
     };
     events(): {
-        refresh: any;
+        refresh: CustomEvent<any>;
         add: CustomEvent<any>;
         rowclick: CustomEvent<any>;
         edit: CustomEvent<any>;

package/esm/ui/GridPaginate.svelte

@@ -30,7 +30,7 @@
 <FieldContainer {label} forId="paginate" classes={{ label: 'justify-end' }}>
 	<div class="flex w-36 items-center justify-end">
 		{#if totalCount === undefined}
-			<Loading class="ml-6 mr-2 h-3 w-1/6"></Loading>
+			<Loading class="mr-2 ml-6 h-3 w-1/6"></Loading>
 			<Loading class="mx-2 h-4 w-1/2"></Loading>
 			<Loading class="mx-2 h-3 w-1/6"></Loading>
 		{:else if !needPaginate}

package/esm/ui/GridPaginate2.svelte

@@ -13,11 +13,11 @@
 <FieldContainer {label} forId="paginate" classes={{ label: 'justify-end' }}>
 	<div class="flex w-14 items-center justify-end">
 		{#if totalCount === undefined}
-			<Loading class="ml-6 mr-2 h-3 w-1/6"></Loading>
+			<Loading class="mr-2 ml-6 h-3 w-1/6"></Loading>
 			<Loading class="mx-2 h-4 w-1/2"></Loading>
 			<Loading class="mx-2 h-3 w-1/6"></Loading>
 		{:else}
-			<span class="justify-end px-2 font-bold text-primary">
+			<span class="mb-2 justify-end px-2 text-lg font-bold text-primary">
 				{totalCount}
 			</span>
 		{/if}

package/esm/ui/Icon.svelte

@@ -69,14 +69,7 @@
 
 {#if BROWSER || ssr}
 	{#if svg || $$slots.default}
-		<span
-			class={getInfoProps(className)}
-			style={getInfoProps(style)}
-			style:width
-			style:height
-			{role}
-			on:click
-		>
+		<span class={getInfoProps(className)} style={getInfoProps(style)} style:width style:height {role}>
 			<slot>
 				{@html svg ?? ''}
 			</slot>
@@ -89,7 +82,6 @@
 			class={getInfoProps(className)}
 			style={getInfoProps(style)}
 			{role}
-			on:click
 		>
 			{#each Array.isArray(path) ? path : [path] as d, i}
 				<path
@@ -102,15 +94,7 @@
 		</svg>
 	{/if}
 {:else}
-	<svg
-		{width}
-		{height}
-		{viewBox}
-		class={getInfoProps(className)}
-		style={getInfoProps(style)}
-		{role}
-		on:click
-	>
+	<svg {width} {height} {viewBox} class={getInfoProps(className)} style={getInfoProps(style)} {role}>
 		<path
 			d={LibIcon_Empty}
 			fill="currentColor"

package/esm/ui/Icon.svelte.d.ts

@@ -45,8 +45,6 @@ declare const Icon: $$__sveltets_2_IsomorphicComponent<$$__sveltets_2_PropsWithC
 }, {
     default: {};
 }>, {
-    click: MouseEvent;
-} & {
     [evt: string]: CustomEvent<any>;
 }, {
     default: {};

package/esm/ui/LibIcon.js

@@ -1,6 +1,6 @@
 // Lib Icons
 // https://icones.js.org/ and https://pictogrammers.com/library/mdi/
-import { mdiAccountTie, mdiAccountTieWoman, mdiCancel, mdiCheck, mdiCheckAll, mdiChevronDown, mdiChevronLeft, mdiChevronRight, mdiChevronUp, mdiCloseCircleOutline, mdiCogOutline, mdiContentSaveEdit, mdiDelete, mdiEye, mdiEyeOff, mdiLoading, mdiMagnify, mdiPencil, mdiPlusBoxMultiple, mdiPlusCircle, mdiSend, mdiSort, mdiSortReverseVariant, mdiSortVariant, } from '@mdi/js';
+import { mdiAccountTie, mdiAccountTieWoman, mdiCancel, mdiCheck, mdiCheckAll, mdiChevronDown, mdiChevronLeft, mdiChevronRight, mdiChevronUp, mdiCloseCircleOutline, mdiCogOutline, mdiContentSaveEdit, mdiDelete, mdiEye, mdiEyeOff, mdiLoading, mdiMagnify, mdiPencil, mdiPlus, mdiPlusBoxMultiple, mdiSend, mdiSort, mdiSortReverseVariant, mdiSortVariant, } from '@mdi/js';
 export const LibIcon_Empty = ``;
 export const LibIcon_Forbidden = mdiCancel;
 export const LibIcon_ChevronDown = mdiChevronDown;
@@ -10,7 +10,7 @@ export const LibIcon_ChevronRight = mdiChevronRight;
 export const LibIcon_Search = mdiMagnify;
 export const LibIcon_Check = mdiCheck;
 export const LibIcon_MultiCheck = mdiCheckAll;
-export const LibIcon_Add = mdiPlusCircle;
+export const LibIcon_Add = mdiPlus;
 export const LibIcon_Eye = mdiEye;
 export const LibIcon_EyeOff = mdiEyeOff;
 export const LibIcon_MultiAdd = mdiPlusBoxMultiple;

package/esm/ui/Loading.svelte

@@ -8,7 +8,7 @@
 <!-- To fix one capa & cadb are on the same css -->
 <div
 	class={tw(
-		'skeleton flex h-4 w-full items-center justify-center rounded-lg bg-base-content/20',
+		'flex h-4 skeleton items-center justify-center rounded-lg bg-base-content/20',
 		extraClass,
 	)}
 >

package/esm/ui/dialog/DialogManagement.svelte

@@ -16,7 +16,7 @@
 		>
 			{@html toShow.children}
 			<svelte:fragment slot="actions">
-				<Button class="text-white" on:click={() => dialog.close(toShow.id, { success: true })}
+				<Button class="btn-primary" onclick={() => dialog.close(toShow.id, { success: true })}
 					>Confirmer</Button
 				>
 			</svelte:fragment>
@@ -29,10 +29,7 @@
 		>
 			{@html toShow.children}
 			<svelte:fragment slot="actions">
-				<Button
-					class="btn-outline btn-error"
-					on:click={() => dialog.close(toShow.id, { success: true })}
-				>
+				<Button class="btn-error" onclick={() => dialog.close(toShow.id, { success: true })}>
 					Confirmer
 				</Button>
 			</svelte:fragment>
@@ -51,6 +48,18 @@
 				{/if}
 			</svelte:component>
 		</DialogPrimitive>
+	{:else if toShow.componentS5}
+		<DialogPrimitive
+			detail={toShow.detail}
+			open
+			on:change={() => dialog.close(toShow.id, { success: false })}
+		>
+			<svelte:component this={toShow.componentS5} {...toShow.props} dialogId={toShow.id}>
+				{#if toShow.children}
+					{@html toShow.children}
+				{/if}
+			</svelte:component>
+		</DialogPrimitive>
 	{:else if toShow.component}
 		<DialogPrimitive
 			detail={toShow.detail}

package/esm/ui/dialog/DialogPrimitive.svelte

@@ -57,7 +57,7 @@
 			{...$content}
 			use:$content.action
 		>
-			<div class="left-0 top-0 mb-4 w-full">
+			<div class="top-0 left-0 mb-4 w-full">
 				<h2 {...$localTitle} use:$localTitle.action class="m-0 text-lg font-medium">
 					<div class="flex items-center justify-between gap-4">
 						<LinkPlus item={detail}></LinkPlus>
@@ -65,8 +65,8 @@
 							{...$close}
 							use:$close.action
 							aria-label="close"
-							class="btn btn-circle btn-outline btn-lg
-            h-max min-h-0 w-max border-none"
+							class="btn btn-circle h-max min-h-0
+            w-max border-none btn-outline btn-lg"
 						>
 							<Icon data={LibIcon_Cross}></Icon>
 						</button>