firstly 0.0.11 → 0.0.13

package/esm/ui/internals/FieldContainer.svelte

@@ -7,16 +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}
-      <!-- TODO Ermin? hover popup if too long? -->
-      <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>

package/esm/ui/internals/FieldContainer.svelte.d.ts

@@ -6,9 +6,9 @@ declare const __propDef: {
         required?: boolean;
         error?: string;
         /**
-           * example usage for paginate
-           * classes={{ label: 'justify-end' }}
-           */ classes?: {
+             * example usage for paginate
+             * classes={{ label: 'justify-end' }}
+             */ classes?: {
             label?: string;
             slot?: string;
         };

package/esm/ui/internals/Input.svelte

@@ -77,33 +77,33 @@ const handleKeyup = (event) => {
 </script>
 
 <input
-  use:focusNow
-  class={tw('w-full px-2', className)}
-  on:input={handleInput}
-  bind:value
-  on:blur
-  on:change
-  on:click
-  on:focus
-  on:keydown
-  on:keypress
-  on:keyup={handleKeyup}
-  on:mouseover
-  on:mouseenter
-  on:mouseleave
-  on:paste
-  {...$$restProps}
+	use:focusNow
+	class={tw('w-full px-2', className)}
+	on:input={handleInput}
+	bind:value
+	on:blur
+	on:change
+	on:click
+	on:focus
+	on:keydown
+	on:keypress
+	on:keyup={handleKeyup}
+	on:mouseover
+	on:mouseenter
+	on:mouseleave
+	on:paste
+	{...$$restProps}
 />
 
 <style>
-  input[type='number'] {
-    -webkit-appearance: textfield;
-    -moz-appearance: textfield;
-    appearance: textfield;
-  }
+	input[type='number'] {
+		-webkit-appearance: textfield;
+		-moz-appearance: textfield;
+		appearance: textfield;
+	}
 
-  input[type='number']::-webkit-inner-spin-button,
-  input[type='number']::-webkit-outer-spin-button {
-    -webkit-appearance: none;
-  }
+	input[type='number']::-webkit-inner-spin-button,
+	input[type='number']::-webkit-outer-spin-button {
+		-webkit-appearance: none;
+	}
 </style>

package/esm/ui/internals/Input.svelte.d.ts

@@ -6,7 +6,7 @@ declare const __propDef: {
         value?: HTMLInputAttributes["value"];
         focus?: boolean | undefined;
         withDedounce?: boolean | undefined;
-        class?: string | undefined | null;
+        class?: string | undefined | null | undefined;
     };
     events: {
         blur: FocusEvent;

package/esm/ui/internals/Textarea.svelte

@@ -32,30 +32,30 @@ function dispatchInput(value2) {
 </script>
 
 {#if readonly}
-  <span class="flex min-h-8 max-w-full items-center px-3 py-1 text-sm md:min-h-[2.5rem]">
-    <div class="overflow-hidden">
-      {@html value ?? '-'}
-    </div>
-  </span>
+	<span class="flex min-h-8 max-w-full items-center px-3 py-1 text-sm md:min-h-[2.5rem]">
+		<div class="overflow-hidden">
+			{@html value ?? '-'}
+		</div>
+	</span>
 {:else}
-  <textarea
-    use:focusNow
-    {...$$restProps}
-    class="textarea textarea-bordered
+	<textarea
+		use:focusNow
+		{...$$restProps}
+		class="textarea textarea-bordered
 			shadow-neutral-focus md:rounded-xls flex h-max min-h-8
 			w-full items-center rounded-lg bg-transparent text-xs
 			shadow-sm md:text-sm lg:min-h-[2.5rem]
 			{scrollbar.thin}"
-    id={id || name || 'default-textarea-id'}
-    {name}
-    {placeholder}
-    autocomplete="off"
-    bind:this={reference}
-    bind:value
-    {rows}
-    on:input={(e) => {
-      // @ts-ignore
-      dispatchInput(e.target.value)
-    }}
-  ></textarea>
+		id={id || name || 'default-textarea-id'}
+		{name}
+		{placeholder}
+		autocomplete="off"
+		bind:this={reference}
+		bind:value
+		{rows}
+		on:input={(e) => {
+			// @ts-ignore
+			dispatchInput(e.target.value)
+		}}
+	></textarea>
 {/if}

package/esm/ui/internals/Textarea.svelte.d.ts

@@ -2,7 +2,7 @@ import { SvelteComponent } from "svelte";
 declare const __propDef: {
     props: {
         [x: string]: any;
-        name?: (string | null) | undefined;
+        name?: string | null | undefined;
         id?: string | undefined;
         rows?: number | undefined;
         placeholder?: string | undefined;
@@ -10,7 +10,7 @@ declare const __propDef: {
         value?: string | undefined;
         readonly?: boolean | undefined;
         error?: false | undefined;
-        align?: (`left` | `right`) | undefined;
+        align?: `left` | `right` | undefined;
     };
     events: {
         input: CustomEvent<any>;

package/esm/ui/internals/select/MultiSelectMelt.svelte

@@ -127,88 +127,84 @@ $: calcFilteredItems($touchedInput, $inputValue, values);
 </script>
 
 <div class="input input-bordered flex min-w-0 items-center">
-  <div class="relative">
-    {#if iconToDisplayInInput($localSelected)}
-      {@const ico = iconToDisplayInInput($localSelected)}
-      <Icon
-        data={ico?.data}
-        class={tw(['relative', ico?.class])}
-        style={ico?.style}
-        size={ico?.size}
-      ></Icon>
-    {/if}
-  </div>
-  <!-- {id} -->
-  <input
-    {...$input}
-    use:$input.action
-    class="-ml-8 -mr-5 h-full min-w-0 flex-grow bg-transparent px-10"
-    {placeholder}
-  />
-  <div class="pointer-events-none relative right-0 flex gap-2">
-    {#if clearable && $localSelected && $localSelected.length > 0}
-      <button on:click={clearSelection} class="pointer-events-auto">
-        <Icon data={LibIcon_Cross}></Icon>
-      </button>
-    {/if}
-    <!-- {#if $open}
+	<div class="relative">
+		{#if iconToDisplayInInput($localSelected)}
+			{@const ico = iconToDisplayInInput($localSelected)}
+			<Icon data={ico?.data} class={tw(['relative', ico?.class])} style={ico?.style} size={ico?.size}
+			></Icon>
+		{/if}
+	</div>
+	<!-- {id} -->
+	<input
+		{...$input}
+		use:$input.action
+		class="-ml-8 -mr-5 h-full min-w-0 flex-grow bg-transparent px-10"
+		{placeholder}
+	/>
+	<div class="pointer-events-none relative right-0 flex gap-2">
+		{#if clearable && $localSelected && $localSelected.length > 0}
+			<button on:click={clearSelection} class="pointer-events-auto">
+				<Icon data={LibIcon_Cross}></Icon>
+			</button>
+		{/if}
+		<!-- {#if $open}
       <Icon data={LibIcon_ChevronUp}></Icon>
     {:else}
       <Icon data={LibIcon_ChevronDown}></Icon>
     {/if} -->
-  </div>
+	</div>
 </div>
 
 {#if $open}
-  <ul
-    class="border-base-content/20 z-50 flex max-h-[300px] flex-col overflow-hidden rounded-lg border"
-    {...$menu}
-    use:$menu.action
-    transition:fly={{ duration: 150, y: -5 }}
-  >
-    <!-- svelte-ignore a11y-no-noninteractive-tabindex -->
-    <div class="bg-base-100 flex max-h-full flex-col gap-0 overflow-y-auto py-2" tabindex="0">
-      {#each filteredItems as item, index (index)}
-        <li
-          {...$option(toOption(item))}
-          use:$option.action
-          class="data-[highlighted]:bg-primary data-[highlighted]:text-primary-content relative flex cursor-pointer scroll-my-2 items-center
+	<ul
+		class="border-base-content/20 z-50 flex max-h-[300px] flex-col overflow-hidden rounded-lg border"
+		{...$menu}
+		use:$menu.action
+		transition:fly={{ duration: 150, y: -5 }}
+	>
+		<!-- svelte-ignore a11y-no-noninteractive-tabindex -->
+		<div class="bg-base-100 flex max-h-full flex-col gap-0 overflow-y-auto py-2" tabindex="0">
+			{#each filteredItems as item, index (index)}
+				<li
+					{...$option(toOption(item))}
+					use:$option.action
+					class="data-[highlighted]:bg-primary data-[highlighted]:text-primary-content relative flex cursor-pointer scroll-my-2 items-center
           rounded-md
           px-1
           py-2
 					data-[disabled]:opacity-50"
-        >
-          {#if isChecked($localSelected, item)}
-            <Icon data={LibIcon_Check} class="w-6"></Icon>
-          {:else}
-            <!-- just to book the place -->
-            <span class="w-6"></span>
-          {/if}
-          {#if item.icon?.data}
-            <Icon
-              data={item.icon.data}
-              class={tw(['flex-shrink-0', item.icon.class])}
-              style={item.icon.style}
-              size={item.icon.size}
-            ></Icon>
-          {/if}
-          <div class="pl-2 {item.class}">
-            <span class="font-medium">{item.caption}</span>
-          </div>
-        </li>
-      {:else}
-        <li class="relative cursor-pointer rounded-md py-1 pl-8 pr-4">Aucun résultat</li>
-      {/each}
-    </div>
-    {#if totalCount}
-      <div class="bg-base-300 z-50 text-center text-xs">
-        {#if items.length < totalCount}
-          ({items.length} / {totalCount})
-        {:else}
-          <!-- yes, items.length can be bigger if the selected item is not in the limit -->
-          ({items.length})
-        {/if}
-      </div>
-    {/if}
-  </ul>
+				>
+					{#if isChecked($localSelected, item)}
+						<Icon data={LibIcon_Check} class="w-6"></Icon>
+					{:else}
+						<!-- just to book the place -->
+						<span class="w-6"></span>
+					{/if}
+					{#if item.icon?.data}
+						<Icon
+							data={item.icon.data}
+							class={tw(['flex-shrink-0', item.icon.class])}
+							style={item.icon.style}
+							size={item.icon.size}
+						></Icon>
+					{/if}
+					<div class="pl-2 {item.class}">
+						<span class="font-medium">{item.caption}</span>
+					</div>
+				</li>
+			{:else}
+				<li class="relative cursor-pointer rounded-md py-1 pl-8 pr-4">Aucun résultat</li>
+			{/each}
+		</div>
+		{#if totalCount}
+			<div class="bg-base-300 z-50 text-center text-xs">
+				{#if items.length < totalCount}
+					({items.length} / {totalCount})
+				{:else}
+					<!-- yes, items.length can be bigger if the selected item is not in the limit -->
+					({items.length})
+				{/if}
+			</div>
+		{/if}
+	</ul>
 {/if}

package/esm/ui/internals/select/SelectMelt.svelte

@@ -134,101 +134,101 @@ $: calcFilteredItems($touchedInput, $inputValue, value);
 </script>
 
 <div class="input input-bordered flex min-w-0 items-center {disabled && 'opacity-40'}">
-  <div class="relative">
-    {#if $localSelected?.value?.icon?.data}
-      <Icon
-        data={$localSelected.value.icon.data}
-        class={tw(['relative', $localSelected.value.icon.class])}
-        style={$localSelected.value.icon.style}
-        size={$localSelected.value.icon.size}
-      ></Icon>
-    {:else}
-      <Icon data={LibIcon_Search} class="relative"></Icon>
-    {/if}
-  </div>
-  <!-- {id} -->
-  <input
-    {...$input}
-    use:$input.action
-    class="-ml-8 -mr-5 h-full min-w-0 flex-grow bg-transparent px-10"
-    {placeholder}
-    use:focusNow
-  />
-  <div class="pointer-events-none relative right-0 flex gap-2">
-    {#if clearable && $localSelected}
-      <button on:click={clearSelection} class="pointer-events-auto">
-        <Icon data={LibIcon_Cross}></Icon>
-      </button>
-    {/if}
-    <!-- {#if $open}
+	<div class="relative">
+		{#if $localSelected?.value?.icon?.data}
+			<Icon
+				data={$localSelected.value.icon.data}
+				class={tw(['relative', $localSelected.value.icon.class])}
+				style={$localSelected.value.icon.style}
+				size={$localSelected.value.icon.size}
+			></Icon>
+		{:else}
+			<Icon data={LibIcon_Search} class="relative"></Icon>
+		{/if}
+	</div>
+	<!-- {id} -->
+	<input
+		{...$input}
+		use:$input.action
+		class="-ml-8 -mr-5 h-full min-w-0 flex-grow bg-transparent px-10"
+		{placeholder}
+		use:focusNow
+	/>
+	<div class="pointer-events-none relative right-0 flex gap-2">
+		{#if clearable && $localSelected}
+			<button on:click={clearSelection} class="pointer-events-auto">
+				<Icon data={LibIcon_Cross}></Icon>
+			</button>
+		{/if}
+		<!-- {#if $open}
       <Icon data={LibIcon_ChevronUp}></Icon>
     {:else}
       <Icon data={LibIcon_ChevronDown}></Icon>
     {/if} -->
-  </div>
+	</div>
 </div>
 
 {#if $open}
-  <ul
-    class="border-base-content/20 z-50 flex max-h-[300px] flex-col overflow-hidden rounded-lg border"
-    {...$menu}
-    use:$menu.action
-    transition:fly={{ duration: 150, y: -5 }}
-  >
-    <!-- svelte-ignore a11y-no-noninteractive-tabindex -->
-    <div class="bg-base-100 flex max-h-full flex-col gap-0 overflow-y-auto py-2" tabindex="0">
-      {#each filteredItems as item, index (index)}
-        <li
-          {...$option(toOption(item))}
-          use:$option.action
-          class="data-[highlighted]:bg-primary data-[highlighted]:text-primary-content relative flex cursor-pointer scroll-my-2 items-center
+	<ul
+		class="border-base-content/20 z-50 flex max-h-[300px] flex-col overflow-hidden rounded-lg border"
+		{...$menu}
+		use:$menu.action
+		transition:fly={{ duration: 150, y: -5 }}
+	>
+		<!-- svelte-ignore a11y-no-noninteractive-tabindex -->
+		<div class="bg-base-100 flex max-h-full flex-col gap-0 overflow-y-auto py-2" tabindex="0">
+			{#each filteredItems as item, index (index)}
+				<li
+					{...$option(toOption(item))}
+					use:$option.action
+					class="data-[highlighted]:bg-primary data-[highlighted]:text-primary-content relative flex cursor-pointer scroll-my-2 items-center
           rounded-md
           px-1
           py-2
 					data-[disabled]:opacity-50"
-        >
-          {#if $localSelected?.value?.id === item.id}
-            <Icon data={LibIcon_Check} class="w-6"></Icon>
-          {:else}
-            <!-- just to book the place -->
-            <span class="w-6"></span>
-          {/if}
-          {#if item.icon?.data}
-            <Icon
-              data={item.icon.data}
-              class={tw(['flex-shrink-0', item.icon.class])}
-              style={item.icon.style}
-              size={item.icon.size}
-            ></Icon>
-          {/if}
-          <div class="pl-2">
-            <span class="font-medium">{item.caption}</span>
-          </div>
-        </li>
-      {:else}
-        {#if createOptionWhenNoResult}
-          <div class="p-4">
-            <Button
-              class="w-full"
-              on:click={(e) => {
-                dispatchCreateRequest(e, $inputValue)
-              }}>Créer "{$inputValue}"</Button
-            >
-          </div>
-        {:else}
-          <li class="relative cursor-pointer rounded-md py-1 pl-8 pr-4">Aucun résultat</li>
-        {/if}
-      {/each}
-    </div>
-    {#if totalCount}
-      <div class="bg-base-300 z-50 text-center text-xs">
-        {#if items.length < totalCount}
-          ({items.length} / {totalCount})
-        {:else}
-          <!-- yes, items.length can be bigger if the selected item is not in the limit -->
-          ({items.length})
-        {/if}
-      </div>
-    {/if}
-  </ul>
+				>
+					{#if $localSelected?.value?.id === item.id}
+						<Icon data={LibIcon_Check} class="w-6"></Icon>
+					{:else}
+						<!-- just to book the place -->
+						<span class="w-6"></span>
+					{/if}
+					{#if item.icon?.data}
+						<Icon
+							data={item.icon.data}
+							class={tw(['flex-shrink-0', item.icon.class])}
+							style={item.icon.style}
+							size={item.icon.size}
+						></Icon>
+					{/if}
+					<div class="pl-2">
+						<span class="font-medium">{item.caption}</span>
+					</div>
+				</li>
+			{:else}
+				{#if createOptionWhenNoResult}
+					<div class="p-4">
+						<Button
+							class="w-full"
+							on:click={(e) => {
+								dispatchCreateRequest(e, $inputValue)
+							}}>Créer "{$inputValue}"</Button
+						>
+					</div>
+				{:else}
+					<li class="relative cursor-pointer rounded-md py-1 pl-8 pr-4">Aucun résultat</li>
+				{/if}
+			{/each}
+		</div>
+		{#if totalCount}
+			<div class="bg-base-300 z-50 text-center text-xs">
+				{#if items.length < totalCount}
+					({items.length} / {totalCount})
+				{:else}
+					<!-- yes, items.length can be bigger if the selected item is not in the limit -->
+					({items.length})
+				{/if}
+			</div>
+		{/if}
+	</ul>
 {/if}

package/esm/ui/internals/select/SelectRadio.svelte

@@ -12,26 +12,26 @@ function dispatchSelected(_data) {
 </script>
 
 <div {id} class="input input-bordered flex w-fit min-w-0 items-center">
-  <div class="-mx-2 flex gap-2" title={placeholder}>
-    {#each items as item}
-      <button
-        {disabled}
-        on:click={() => {
-          value = item.id
-          dispatchSelected(items.find((i) => i.id === item.id))
-        }}
-        type="button"
-        class="min-w-0 cursor-pointer rounded-md px-1.5 py-1 {value === item.id
-          ? 'bg-primary text-primary-content'
-          : ''}"
-      >
-        <div class="flex gap-2">
-          {#if item.icon}
-            <Icon {...item.icon} />
-          {/if}
-          {item.caption}
-        </div>
-      </button>
-    {/each}
-  </div>
+	<div class="-mx-2 flex gap-2" title={placeholder}>
+		{#each items as item}
+			<button
+				{disabled}
+				on:click={() => {
+					value = item.id
+					dispatchSelected(items.find((i) => i.id === item.id))
+				}}
+				type="button"
+				class="min-w-0 cursor-pointer rounded-md px-1.5 py-1 {value === item.id
+					? 'bg-primary text-primary-content'
+					: ''}"
+			>
+				<div class="flex gap-2">
+					{#if item.icon}
+						<Icon {...item.icon} />
+					{/if}
+					{item.caption}
+				</div>
+			</button>
+		{/each}
+	</div>
 </div>

package/esm/ui/link/Link.svelte

@@ -7,22 +7,22 @@ export { className as class };
 </script>
 
 <a
-  class={`${daisy[kind]} link inline-block text-left no-underline hover:underline ${className ?? ''}`}
-  {href}
-  rel="noopener"
-  {target}
-  {...$$restProps}
+	class={`${daisy[kind]} link inline-block text-left no-underline hover:underline ${className ?? ''}`}
+	{href}
+	rel="noopener"
+	{target}
+	{...$$restProps}
 >
-  <slot />
+	<slot />
 </a>
 
 <style>
-  a[target='_blank']::after {
-    display: inline-block;
-    content: '⇱';
-    position: relative;
-    top: -3px;
-    margin-left: 3px;
-    transform: rotate(90deg);
-  }
+	a[target='_blank']::after {
+		display: inline-block;
+		content: '⇱';
+		position: relative;
+		top: -3px;
+		margin-left: 3px;
+		transform: rotate(90deg);
+	}
 </style>

package/esm/ui/link/Link.svelte.d.ts

@@ -1,12 +1,11 @@
 import { SvelteComponent } from "svelte";
-import type { HTMLAnchorAttributes } from 'svelte/elements';
 declare const __propDef: {
     props: {
         [x: string]: any;
         href: string;
-        target?: HTMLAnchorAttributes["target"];
-        kind?: ("info" | "ghost") | undefined;
-        class?: string | undefined | null;
+        target?: import("svelte/elements").HTMLAttributeAnchorTarget | null | undefined;
+        kind?: "info" | "ghost" | undefined;
+        class?: string | undefined | null | undefined;
     };
     events: {
         [evt: string]: CustomEvent<any>;