firstly 0.0.12 → 0.0.13

package/esm/ui/Icon.svelte

@@ -29,57 +29,58 @@ const getInfoProps = (props, i = 0) => {
   }
   return props ?? "";
 };
+const role = "img";
 </script>
 
 {#if BROWSER || ssr}
-  {#if svg || $$slots.default}
-    <span
-      class={getInfoProps(className)}
-      style={getInfoProps(style)}
-      style:width
-      style:height
-      role={'img'}
-      on:click
-    >
-      <slot>
-        {@html svg ?? ''}
-      </slot>
-    </span>
-  {:else}
-    <svg
-      {width}
-      {height}
-      {viewBox}
-      class={getInfoProps(className)}
-      style={getInfoProps(style)}
-      role={'img'}
-      on:click
-    >
-      {#each Array.isArray(path) ? path : [path] as d, i}
-        <path
-          {d}
-          fill="currentColor"
-          class={getInfoProps(className, i)}
-          style={getInfoProps(style, i)}
-        />
-      {/each}
-    </svg>
-  {/if}
+	{#if svg || $$slots.default}
+		<span
+			class={getInfoProps(className)}
+			style={getInfoProps(style)}
+			style:width
+			style:height
+			{role}
+			on:click
+		>
+			<slot>
+				{@html svg ?? ''}
+			</slot>
+		</span>
+	{:else}
+		<svg
+			{width}
+			{height}
+			{viewBox}
+			class={getInfoProps(className)}
+			style={getInfoProps(style)}
+			{role}
+			on:click
+		>
+			{#each Array.isArray(path) ? path : [path] as d, i}
+				<path
+					{d}
+					fill="currentColor"
+					class={getInfoProps(className, i)}
+					style={getInfoProps(style, i)}
+				/>
+			{/each}
+		</svg>
+	{/if}
 {:else}
-  <svg
-    {width}
-    {height}
-    {viewBox}
-    class={getInfoProps(className)}
-    style={getInfoProps(style)}
-    role={'img'}
-    on:click
-  >
-    <path
-      d={LibIcon_Empty}
-      fill="currentColor"
-      class={getInfoProps(className)}
-      style={getInfoProps(style)}
-    />
-  </svg>
+	<svg
+		{width}
+		{height}
+		{viewBox}
+		class={getInfoProps(className)}
+		style={getInfoProps(style)}
+		{role}
+		on:click
+	>
+		<path
+			d={LibIcon_Empty}
+			fill="currentColor"
+			class={getInfoProps(className)}
+			style={getInfoProps(style)}
+		/>
+	</svg>
 {/if}

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

@@ -3,27 +3,27 @@ import './LibIcon';
 declare const __propDef: {
     props: {
         /**
-           * directly <svg ... /> or d of <path ... />
-           *
-           * with \@mdi/js
-           * ```js
-           * import { mdiAccountTieWoman } from "@mdi/js";
-           * <Icon data={mdiAccountTieWoman} style="background-color: blue;" size={"4rem"}></Icon>
-           * ```
-           *
-           * with \@iconify-json/mdi && unplugin-icons with Icons({ compiler: "raw" })
-           * ```js
-           * import Woman from "virtual:icons/mdi/account-tie-woman";
-           * <Icon data={mdiAccountTieWoman} style="background-color: blue;" size={"4rem"}></Icon>
-           * ```
-           */ data?: string | string[];
+             * directly <svg ... /> or d of <path ... />
+             *
+             * with \@mdi/js
+             * ```js
+             * import { mdiAccountTieWoman } from "@mdi/js";
+             * <Icon data={mdiAccountTieWoman} style="background-color: blue;" size={"4rem"}></Icon>
+             * ```
+             *
+             * with \@iconify-json/mdi && unplugin-icons with Icons({ compiler: "raw" })
+             * ```js
+             * import Woman from "virtual:icons/mdi/account-tie-woman";
+             * <Icon data={mdiAccountTieWoman} style="background-color: blue;" size={"4rem"}></Icon>
+             * ```
+             */ data?: string | string[];
         size?: string | number;
         caption?: string | undefined;
         /**
-           * By default, svg are not rendered on the server side.
-           * But the size will be respected to not have glitch on the client side when the icon is coming.
-           * @default false
-           */ ssr?: boolean;
+             * By default, svg are not rendered on the server side.
+             * But the size will be respected to not have glitch on the client side when the icon is coming.
+             * @default false
+             */ ssr?: boolean;
         class?: string | string[] | undefined;
         style?: string | string[] | undefined;
     };

package/esm/ui/Loading.svelte

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

package/esm/ui/Tooltip.svelte

@@ -20,23 +20,23 @@ const {
 </script>
 
 <button type="button" class="trigger" {...$trigger} use:trigger aria-label="Add">
-  <slot />
+	<slot />
 </button>
 <!-- {hideTooltip} -->
 {#if $open && !hideTooltip && (text || $$slots.tooltip)}
-  <div
-    {...$content}
-    use:content
-    transition:fade={{ duration: 100 }}
-    class="bg-base-300 z-30 rounded-lg ring-1 ring-black"
-  >
-    <div {...$arrow} use:arrow></div>
-    <div class="px-4 py-1">
-      {#if $$slots.tooltip}
-        <slot name="tooltip" />
-      {:else}
-        {@html text}
-      {/if}
-    </div>
-  </div>
+	<div
+		{...$content}
+		use:content
+		transition:fade={{ duration: 100 }}
+		class="bg-base-300 z-30 rounded-lg ring-1 ring-black"
+	>
+		<div {...$arrow} use:arrow></div>
+		<div class="px-4 py-1">
+			{#if $$slots.tooltip}
+				<slot name="tooltip" />
+			{:else}
+				{@html text}
+			{/if}
+		</div>
+	</div>
 {/if}

package/esm/ui/dialog/DialogForm.svelte

@@ -42,28 +42,28 @@ const onDelete = async () => {
 </script>
 
 <DialogPrimitive
-  detail={toShow.detail}
-  open
-  classes={{ root: toShow.classes?.root }}
-  on:change={() => dialog.close(toShow.id, { success: false })}
+	detail={toShow.detail}
+	open
+	classes={{ root: toShow.classes?.root }}
+	on:change={() => dialog.close(toShow.id, { success: false })}
 >
-  <form on:submit|preventDefault={onInsert}>
-    <div class="grid {toShow.classes?.formGrid ?? ''} gap-4 pb-4">
-      <FieldGroup
-        focusKey={toShow.focusKey}
-        {cells}
-        {store}
-        mode={toShow.type === 'view' ? 'view' : 'edit'}
-        on:createRequest={onCreate}
-      />
-    </div>
+	<form on:submit|preventDefault={onInsert}>
+		<div class="grid {toShow.classes?.formGrid ?? ''} gap-4 pb-4">
+			<FieldGroup
+				focusKey={toShow.focusKey}
+				{cells}
+				{store}
+				mode={toShow.type === 'view' ? 'view' : 'edit'}
+				on:createRequest={onCreate}
+			/>
+		</div>
 
-    <FormEditAction
-      type={toShow.type}
-      wDelete={toShow.wDelete}
-      {store}
-      on:delete={onDelete}
-      textCreate={toShow.topicPrefixText}
-    ></FormEditAction>
-  </form>
+		<FormEditAction
+			type={toShow.type}
+			wDelete={toShow.wDelete}
+			{store}
+			on:delete={onDelete}
+			textCreate={toShow.topicPrefixText}
+		></FormEditAction>
+	</form>
 </DialogPrimitive>

package/esm/ui/dialog/DialogManagement.svelte

@@ -1,87 +1,87 @@
 <script>
-  import Button from '../Button.svelte'
-  import { dialog } from './dialog'
-  import DialogForm from './DialogForm.svelte'
-  import DialogPrimitive from './DialogPrimitive.svelte'
+	import Button from '../Button.svelte'
+	import { dialog } from './dialog'
+	import DialogForm from './DialogForm.svelte'
+	import DialogPrimitive from './DialogPrimitive.svelte'
 
-  $: dialogSorted = $dialog.sort((a, b) => a.id - b.id)
+	$: dialogSorted = $dialog.sort((a, b) => a.id - b.id)
 </script>
 
 {#each dialogSorted as toShow}
-  {#if toShow.type === 'confirm'}
-    <DialogPrimitive
-      detail={toShow.detail}
-      open
-      on:change={() => dialog.close(toShow.id, { success: false })}
-    >
-      {@html toShow.children}
-      <svelte:fragment slot="actions">
-        <Button class="text-white" on:click={() => dialog.close(toShow.id, { success: true })}
-          >Confirmer</Button
-        >
-      </svelte:fragment>
-    </DialogPrimitive>
-  {:else if toShow.type === 'confirmDelete'}
-    <DialogPrimitive
-      detail={toShow.detail}
-      open
-      on:change={() => dialog.close(toShow.id, { success: false })}
-    >
-      {@html toShow.children}
-      <svelte:fragment slot="actions">
-        <Button
-          class="btn-outline btn-error"
-          on:click={() => dialog.close(toShow.id, { success: true })}
-        >
-          Confirmer
-        </Button>
-      </svelte:fragment>
-    </DialogPrimitive>
-  {:else if toShow.type === 'insert' || toShow.type === 'update' || toShow.type === 'view'}
-    <DialogForm {toShow}></DialogForm>
-  {:else if toShow.component && toShow.children}
-    <DialogPrimitive
-      detail={toShow.detail}
-      open
-      on:change={() => dialog.close(toShow.id, { success: false })}
-    >
-      <svelte:component this={toShow.component} {...toShow.props} dialogId={toShow.id}>
-        {#if toShow.children}
-          {@html toShow.children}
-        {/if}
-      </svelte:component>
-    </DialogPrimitive>
-  {:else if toShow.component}
-    <DialogPrimitive
-      detail={toShow.detail}
-      open
-      classes={{ root: toShow.classes?.root }}
-      on:change={() => dialog.close(toShow.id, { success: false })}
-    >
-      <svelte:component this={toShow.component} {...toShow.props} dialogId={toShow.id}
-      ></svelte:component>
-    </DialogPrimitive>
-  {:else}
-    <DialogPrimitive
-      detail={toShow.detail}
-      open
-      on:change={() => dialog.close(toShow.id, { success: false })}
-    >
-      <div class="grid gap-2">
-        <p>Hey 🫵 developer, you are missing a few things 🤡!</p>
-        <p>Or use use one of the custom built in dialog like</p>
+	{#if toShow.type === 'confirm'}
+		<DialogPrimitive
+			detail={toShow.detail}
+			open
+			on:change={() => dialog.close(toShow.id, { success: false })}
+		>
+			{@html toShow.children}
+			<svelte:fragment slot="actions">
+				<Button class="text-white" on:click={() => dialog.close(toShow.id, { success: true })}
+					>Confirmer</Button
+				>
+			</svelte:fragment>
+		</DialogPrimitive>
+	{:else if toShow.type === 'confirmDelete'}
+		<DialogPrimitive
+			detail={toShow.detail}
+			open
+			on:change={() => dialog.close(toShow.id, { success: false })}
+		>
+			{@html toShow.children}
+			<svelte:fragment slot="actions">
+				<Button
+					class="btn-outline btn-error"
+					on:click={() => dialog.close(toShow.id, { success: true })}
+				>
+					Confirmer
+				</Button>
+			</svelte:fragment>
+		</DialogPrimitive>
+	{:else if toShow.type === 'insert' || toShow.type === 'update' || toShow.type === 'view'}
+		<DialogForm {toShow}></DialogForm>
+	{:else if toShow.component && toShow.children}
+		<DialogPrimitive
+			detail={toShow.detail}
+			open
+			on:change={() => dialog.close(toShow.id, { success: false })}
+		>
+			<svelte:component this={toShow.component} {...toShow.props} dialogId={toShow.id}>
+				{#if toShow.children}
+					{@html toShow.children}
+				{/if}
+			</svelte:component>
+		</DialogPrimitive>
+	{:else if toShow.component}
+		<DialogPrimitive
+			detail={toShow.detail}
+			open
+			classes={{ root: toShow.classes?.root }}
+			on:change={() => dialog.close(toShow.id, { success: false })}
+		>
+			<svelte:component this={toShow.component} {...toShow.props} dialogId={toShow.id}
+			></svelte:component>
+		</DialogPrimitive>
+	{:else}
+		<DialogPrimitive
+			detail={toShow.detail}
+			open
+			on:change={() => dialog.close(toShow.id, { success: false })}
+		>
+			<div class="grid gap-2">
+				<p>Hey 🫵 developer, you are missing a few things 🤡!</p>
+				<p>Or use use one of the custom built in dialog like</p>
 
-        <pre class="bg-base-300 mt-2 p-2 text-xs">{`await dialog.confirmDelete('The Car')`}</pre>
+				<pre class="bg-base-300 mt-2 p-2 text-xs">await dialog.confirmDelete('The Car')</pre>
 
-        <p>Or pass you own component</p>
-        <pre class="bg-base-300 mt-2 p-2 text-xs">{`await dialog.show({
+				<p>Or pass you own component</p>
+				<pre class="bg-base-300 mt-2 p-2 text-xs">{`await dialog.show({
   detail: { caption: 'Interlocuteur' },
   component: CreateCarForm,
   props: { isEdit: false },
 })`}</pre>
 
-        <p>Good luck 🚀</p>
-      </div>
-    </DialogPrimitive>
-  {/if}
+				<p>Good luck 🚀</p>
+			</div>
+		</DialogPrimitive>
+	{/if}
 {/each}

package/esm/ui/dialog/DialogPrimitive.svelte

@@ -27,58 +27,58 @@ function dispatchChange(_data) {
 </script>
 
 <div
-  {...$portalled}
-  use:$portalled.action
-  class="fixed top-0 z-50 flex h-full w-full items-center justify-center"
+	{...$portalled}
+	use:$portalled.action
+	class="fixed top-0 z-50 flex h-full w-full items-center justify-center"
 >
-  {#if $localOpen}
-    <div
-      {...$overlay}
-      use:$overlay.action
-      class="bg-base-300/80 fixed inset-0 z-40 blur-sm"
-      transition:fade={{ duration: 150 }}
-    ></div>
-    <div
-      class={tw(
-        `border-base-content/60 bg-base-100 relative z-40 max-h-[90vh] overflow-auto rounded-xl border p-6 shadow-lg`,
-        classes.root,
-      )}
-      transition:flyAndScale={{
-        duration: 150,
-        y: 8,
-        start: 0.96,
-      }}
-      {...$content}
-      use:$content.action
-    >
-      <div class="left-0 top-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>
-            <button
-              {...$close}
-              use:$close.action
-              aria-label="close"
-              class="btn btn-circle btn-outline btn-lg
+	{#if $localOpen}
+		<div
+			{...$overlay}
+			use:$overlay.action
+			class="bg-base-300/80 fixed inset-0 z-40 blur-sm"
+			transition:fade={{ duration: 150 }}
+		></div>
+		<div
+			class={tw(
+				`border-base-content/60 bg-base-100 relative z-40 max-h-[90vh] overflow-auto rounded-xl border p-6 shadow-lg`,
+				classes.root,
+			)}
+			transition:flyAndScale={{
+				duration: 150,
+				y: 8,
+				start: 0.96,
+			}}
+			{...$content}
+			use:$content.action
+		>
+			<div class="left-0 top-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>
+						<button
+							{...$close}
+							use:$close.action
+							aria-label="close"
+							class="btn btn-circle btn-outline btn-lg
             h-max min-h-0 w-max border-none"
-            >
-              <Icon data={LibIcon_Cross}></Icon>
-            </button>
-          </div>
-        </h2>
-      </div>
+						>
+							<Icon data={LibIcon_Cross}></Icon>
+						</button>
+					</div>
+				</h2>
+			</div>
 
-      <div class="flex h-full min-w-[25rem] flex-col gap-4">
-        <!-- <div class="overflow-y-auto"> -->
-        <slot />
+			<div class="flex h-full min-w-[25rem] flex-col gap-4">
+				<!-- <div class="overflow-y-auto"> -->
+				<slot />
 
-        {#if $$slots.actions}
-          <div class="mt-2 flex items-end justify-end">
-            <slot name="actions" />
-          </div>
-        {/if}
-        <!-- </div> -->
-      </div>
-    </div>
-  {/if}
+				{#if $$slots.actions}
+					<div class="mt-2 flex items-end justify-end">
+						<slot name="actions" />
+					</div>
+				{/if}
+				<!-- </div> -->
+			</div>
+		</div>
+	{/if}
 </div>

package/esm/ui/dialog/FormEditAction.svelte

@@ -13,42 +13,42 @@ function dispatchDelete() {
 </script>
 
 <div class="mt-2 flex items-center justify-between">
-  {#if type === 'update'}
-    <div class="flex items-center justify-start">
-      {#if wDelete}
-        <Button
-          type="button"
-          on:click={dispatchDelete}
-          class="btn-outline btn-error mr-4 text-white"
-          isLoading={$store.loading}
-        >
-          <Icon data={LibIcon_Delete} />
-        </Button>
-      {/if}
+	{#if type === 'update'}
+		<div class="flex items-center justify-start">
+			{#if wDelete}
+				<Button
+					type="button"
+					on:click={dispatchDelete}
+					class="btn-outline btn-error mr-4 text-white"
+					isLoading={$store.loading}
+				>
+					<Icon data={LibIcon_Delete} />
+				</Button>
+			{/if}
 
-      <div>
-        {#if $store.globalError}
-          <span class="text-error text-xs">{$store.globalError}</span>
-        {/if}
-      </div>
-    </div>
+			<div>
+				{#if $store.globalError}
+					<span class="text-error text-xs">{$store.globalError}</span>
+				{/if}
+			</div>
+		</div>
 
-    <Button class="text-white" {...$$restProps} isLoading={$store.loading}>
-      <Icon data={LibIcon_Check} />
-      <p>Sauvegarder</p>
-    </Button>
-  {/if}
+		<Button class="text-white" {...$$restProps} isLoading={$store.loading}>
+			<Icon data={LibIcon_Check} />
+			<p>Sauvegarder</p>
+		</Button>
+	{/if}
 
-  {#if type === 'insert'}
-    <div>
-      {#if $store.globalError}
-        <span class="text-error text-xs">{$store.globalError}</span>
-      {/if}
-    </div>
+	{#if type === 'insert'}
+		<div>
+			{#if $store.globalError}
+				<span class="text-error text-xs">{$store.globalError}</span>
+			{/if}
+		</div>
 
-    <Button class="text-white" {...$$restProps} isLoading={$store.loading}>
-      <Icon data={LibIcon_Add} />
-      <p>{textCreate}</p>
-    </Button>
-  {/if}
+		<Button class="text-white" {...$$restProps} isLoading={$store.loading}>
+			<Icon data={LibIcon_Add} />
+			<p>{textCreate}</p>
+		</Button>
+	{/if}
 </div>

package/esm/ui/dialog/dialog.d.ts

@@ -50,9 +50,6 @@ export declare const dialog: {
     show: (dialog: DialogMetaData) => Promise<ResultClose<any>>;
     close: (id: number, result: ResultClose) => void;
     closeAll: () => void;
-    subscribe: {
-        (this: void, run: import("svelte/store").Subscriber<DialogMetaDataInternal<any>[]>, invalidate?: import("svelte/store").Invalidator<DialogMetaDataInternal<any>[]> | undefined): import("svelte/store").Unsubscriber;
-        (this: void, run: import("svelte/store").Subscriber<DialogMetaDataInternal<any>[]>, invalidate?: (() => void) | undefined): import("svelte/store").Unsubscriber;
-    };
+    subscribe: (this: void, run: import("svelte/store").Subscriber<DialogMetaDataInternal<any>[]>, invalidate?: import("svelte/store").Invalidator<DialogMetaDataInternal<any>[]> | undefined) => import("svelte/store").Unsubscriber;
 };
 export {};

package/esm/ui/internals/FieldContainer.svelte

@@ -7,15 +7,15 @@ export let classes = {};
 </script>
 
 <div class="form-control w-full">
-  <label for={forId} class={tw(`label flex gap-1 px-2 pb-1`, classes.label)}>
-    <span class="label-text text-base-content/60 pl-2 text-xs">
-      {label}{required ? ' *' : ''}
-    </span>
-    {#if error}
-      <span class="label-text-alt text-error truncate">{error}</span>
-    {/if}
-  </label>
-  <div class={tw('grid h-12 w-full', classes.slot)}>
-    <slot />
-  </div>
+	<label for={forId} class={tw(`label flex gap-1 px-2 pb-1`, classes.label)}>
+		<span class="label-text text-base-content/60 pl-2 text-xs">
+			{label}{required ? ' *' : ''}
+		</span>
+		{#if error}
+			<span class="label-text-alt text-error truncate">{error}</span>
+		{/if}
+	</label>
+	<div class={tw('grid h-12 w-full', classes.slot)}>
+		<slot />
+	</div>
 </div>