firstly 0.0.11 → 0.0.13

package/esm/ui/Grid.svelte

@@ -87,230 +87,220 @@ const classForRounding = (i) => {
 </script>
 
 <div class="overflow-x-auto">
-  <table class="table {classes.table}">
-    <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}
+	<table class="table {classes.table}">
+		<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)}">
-            {#if b.headerSlot}
-              <slot name="header" field={b.field} />
-            {:else}
-              {@const toSort =
-                orderByCols === true || (orderByCols && orderByCols.includes(b.field?.key))}
-              {#if toSort}
-                <button
-                  class="flex items-center justify-between gap-2"
-                  disabled={!toSort}
-                  on:click={() => sorting(toSort ?? false, b)}
-                >
-                  {b.header ?? b.field?.caption}
-                  {#if toSort}
-                    <Icon {...sortingIcon(toSort ?? false, b, orderBy)}></Icon>
-                  {/if}
-                </button>
-              {:else}
-                {b.header ?? b.field?.caption}
-              {/if}
-            {/if}
-          </th>
-        {/each}
+				{#each cellsToTake(cells) as b, i}
+					{@const al = align(b.field, b.kind === 'slot')}
+					<th class="{al} {classForRounding(i)}">
+						{#if b.headerSlot}
+							<slot name="header" field={b.field} />
+						{:else}
+							{@const toSort = orderByCols === true || (orderByCols && orderByCols.includes(b.field?.key))}
+							{#if toSort}
+								<button
+									class="flex items-center justify-between gap-2"
+									disabled={!toSort}
+									on:click={() => sorting(toSort ?? false, b)}
+								>
+									{b.header ?? b.field?.caption}
+									{#if toSort}
+										<Icon {...sortingIcon(toSort ?? false, b, orderBy)}></Icon>
+									{/if}
+								</button>
+							{:else}
+								{b.header ?? b.field?.caption}
+							{/if}
+						{/if}
+					</th>
+				{/each}
 
-        {#if !settingsLeft && (withEdit || withDelete || withAdd)}
-          <th class="rounded-tr-lg">
-            <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', {})}
-                >
-                  <Icon data={LibIcon_Add} />
-                </Button>
-              {:else}
-                <Icon data={LibIcon_Settings}></Icon>
-              {/if}
-            </div>
-          </th>
-        {/if}
-      </tr>
-    </thead>
-    <tbody>
-      <!-- Show loading only if there is no items and loading is true, like this on an update, there will be no jump -->
-      {#if $store.items.length === 0 && $store.loading && store.getRepo().metadata.apiReadAllowed}
-        <GridLoading columns={getAligns(cells, withEdit || withDelete)} {loadingRows} />
-      {: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}
+				{#if !settingsLeft && (withEdit || withDelete || withAdd)}
+					<th class="rounded-tr-lg">
+						<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', {})}
+								>
+									<Icon data={LibIcon_Add} />
+								</Button>
+							{:else}
+								<Icon data={LibIcon_Settings}></Icon>
+							{/if}
+						</div>
+					</th>
+				{/if}
+			</tr>
+		</thead>
+		<tbody>
+			<!-- Show loading only if there is no items and loading is true, like this on an update, there will be no jump -->
+			{#if $store.items.length === 0 && $store.loading && store.getRepo().metadata.apiReadAllowed}
+				<GridLoading columns={getAligns(cells, withEdit || withDelete)} {loadingRows} />
+			{: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')}>
-                {#if metaType.kind === 'slot' || b.kind === 'slot'}
-                  <slot name="cell" {row} field={b.field} cell={b} />
-                {:else if b.kind === 'component'}
-                  {#if b.component}
-                    <div class={b.class}>
-                      <svelte:component
-                        this={b.component}
-                        {...b.props}
-                        {...b.rowToProps ? b.rowToProps(row) : {}}
-                        on:refresh
-                      ></svelte:component>
-                    </div>
-                  {:else}
-                    <pre>Col: {b.col}</pre>
-                    <pre class="bg-error">Component prop needed !</pre>
-                  {/if}
-                {:else if metaType.kind === 'relation'}
-                  {@const item = getEntityDisplayValue(
-                    metaType.repoTarget,
-                    row[metaType.field.key],
-                  )}
-                  <LinkPlus
-                    item={{
-                      ...item,
-                      href: b.field?.options?.href ? b.field?.options.href(row) : item?.href,
-                    }}
-                  />
-                {:else if b.kind === 'baseItem'}
-                  <LinkPlus item={row[metaType.field.key]} />
-                {:else if b.kind === 'field_link'}
-                  {@const item = getFieldLinkDisplayValue(metaType.field, row)}
-                  <LinkPlus {item} />
-                {:else if b.kind === 'entity_link'}
-                  {@const item = getEntityDisplayValueFromField(metaType.field, row)}
-                  <LinkPlus {item} />
-                {:else if metaType.kind === 'enum'}
-                  {#if metaType.subKind === 'single'}
-                    <LinkPlus item={row[metaType.field.key]}></LinkPlus>
-                  {:else if metaType.subKind === 'multi'}
-                    <!-- {@const t = metaType.field.displayValue(row)} -->
-                    {#each row[metaType.field.key] as enumVal}
-                      <div>
-                        {enumVal.caption}
-                      </div>
-                    {/each}
-                  {/if}
-                {:else if metaType.subKind === 'checkbox'}
-                  {@const t = metaType.field.displayValue(row)}
-                  {t === 'true' ? 'Oui' : 'Non'}
-                {:else}
-                  {@const t = displayWithDefaultAndSuffix(metaType.field, row[metaType.field.key])}
-                  {#if b.clipboardable}
-                    <Clipboardable value={t}>
-                      <!-- 20 is a cool value ! -->
-                      <span class={t.length < 20 ? 'text-nowrap' : ''}>
-                        {t}
-                      </span>
-                    </Clipboardable>
-                  {:else}
-                    <!-- 20 is a cool value ! -->
-                    <span class={t.length < 20 ? 'text-nowrap' : ''}>
-                      {t}
-                    </span>
-                  {/if}
-                {/if}
-              </td>
-            {/each}
+						{#each cellsToTake(cells) as b}
+							{@const metaType = getFieldMetaType(b.field)}
+							<td class={align(b.field, b.kind === 'slot')}>
+								{#if metaType.kind === 'slot' || b.kind === 'slot'}
+									<slot name="cell" {row} field={b.field} cell={b} />
+								{:else if b.kind === 'component'}
+									{#if b.component}
+										<div class={b.class}>
+											<svelte:component
+												this={b.component}
+												{...b.props}
+												{...b.rowToProps ? b.rowToProps(row) : {}}
+												on:refresh
+											></svelte:component>
+										</div>
+									{:else}
+										<pre>Col: {b.col}</pre>
+										<pre class="bg-error">Component prop needed !</pre>
+									{/if}
+								{:else if metaType.kind === 'relation'}
+									{@const item = getEntityDisplayValue(metaType.repoTarget, row[metaType.field.key])}
+									<LinkPlus
+										item={{
+											...item,
+											href: b.field?.options?.href ? b.field?.options.href(row) : item?.href,
+										}}
+									/>
+								{:else if b.kind === 'baseItem'}
+									<LinkPlus item={row[metaType.field.key]} />
+								{:else if b.kind === 'field_link'}
+									{@const item = getFieldLinkDisplayValue(metaType.field, row)}
+									<LinkPlus {item} />
+								{:else if b.kind === 'entity_link'}
+									{@const item = getEntityDisplayValueFromField(metaType.field, row)}
+									<LinkPlus {item} />
+								{:else if metaType.kind === 'enum'}
+									{#if metaType.subKind === 'single'}
+										<LinkPlus item={row[metaType.field.key]}></LinkPlus>
+									{:else if metaType.subKind === 'multi'}
+										<!-- {@const t = metaType.field.displayValue(row)} -->
+										{#each row[metaType.field.key] as enumVal}
+											<div>
+												{enumVal.caption}
+											</div>
+										{/each}
+									{/if}
+								{:else if metaType.subKind === 'checkbox'}
+									{@const t = metaType.field.displayValue(row)}
+									{t === 'true' ? 'Oui' : 'Non'}
+								{:else}
+									{@const t = displayWithDefaultAndSuffix(metaType.field, row[metaType.field.key])}
+									{#if b.clipboardable}
+										<Clipboardable value={t}>
+											<!-- 20 is a cool value ! -->
+											<span class={t.length < 20 ? 'text-nowrap' : ''}>
+												{t}
+											</span>
+										</Clipboardable>
+									{:else}
+										<!-- 20 is a cool value ! -->
+										<span class={t.length < 20 ? 'text-nowrap' : ''}>
+											{t}
+										</span>
+									{/if}
+								{/if}
+							</td>
+						{/each}
 
-            {#if !settingsLeft && (withEdit || withDelete)}
-              <td class="text-right">
-                <div class="flex justify-end 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}
-          </tr>
-        {:else}
-          {#if !store.getRepo().metadata.apiReadAllowed}
-            <tr>
-              <td
-                colspan={getAligns(cells, withEdit || withDelete).length}
-                class="text-center py-12"
-              >
-                Vous n'avez pas la permission pour ces données!
-              </td>
-            </tr>
-          {:else if dicoNoResult}
-            <tr>
-              <td
-                colspan={getAligns(cells, withEdit || withDelete).length}
-                class="text-center py-12"
-              >
-                {dicoNoResult}
-              </td>
-            </tr>
-          {/if}
-        {/each}
-        <slot name="extra" />
-      {/if}
-    </tbody>
-  </table>
+						{#if !settingsLeft && (withEdit || withDelete)}
+							<td class="text-right">
+								<div class="flex justify-end 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}
+					</tr>
+				{:else}
+					{#if !store.getRepo().metadata.apiReadAllowed}
+						<tr>
+							<td colspan={getAligns(cells, withEdit || withDelete).length} class="text-center py-12">
+								Vous n'avez pas la permission pour ces données!
+							</td>
+						</tr>
+					{:else if dicoNoResult}
+						<tr>
+							<td colspan={getAligns(cells, withEdit || withDelete).length} class="text-center py-12">
+								{dicoNoResult}
+							</td>
+						</tr>
+					{/if}
+				{/each}
+				<slot name="extra" />
+			{/if}
+		</tbody>
+	</table>
 </div>

package/esm/ui/GridLoading.svelte

@@ -7,26 +7,22 @@ let size = ["", "w-1/2", "w-1/3", "w-1/4", "w-1/5", "w-1/6"];
 
 <!-- Do 10 rows -->
 {#each new Array(loadingRows) as _row, r}
-  <tr>
-    {#each columns as column, c}
-      <td class="{column} ">
-        <div class={tw('flex justify-between', column === 'text-right' && 'flex-row-reverse')}>
-          {#if column === 'text-center'}
-            <div></div>
-          {/if}
-          <Loading
-            class={tw(
-              `h-4`,
-              size[
-                parseInt(
-                  (((r + 1) * (c + 1) * Math.random() * size.length) % size.length).toString(),
-                )
-              ],
-            )}
-          />
-          <div></div>
-        </div>
-      </td>
-    {/each}
-  </tr>
+	<tr>
+		{#each columns as column, c}
+			<td class="{column} ">
+				<div class={tw('flex justify-between', column === 'text-right' && 'flex-row-reverse')}>
+					{#if column === 'text-center'}
+						<div></div>
+					{/if}
+					<Loading
+						class={tw(
+							`h-4`,
+							size[parseInt((((r + 1) * (c + 1) * Math.random() * size.length) % size.length).toString())],
+						)}
+					/>
+					<div></div>
+				</div>
+			</td>
+		{/each}
+	</tr>
 {/each}

package/esm/ui/GridPaginate.svelte

@@ -24,42 +24,42 @@ $: canGoNext = isValidValue && needPaginate && pageDisplayed < Math.ceil((totalC
 </script>
 
 <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="mx-2 h-4 w-1/2"></Loading>
-      <Loading class="mx-2 h-3 w-1/6"></Loading>
-    {:else if !needPaginate}
-      <span class="text-primary justify-end px-2 font-bold">
-        {totalCount}
-      </span>
-    {:else}
-      <div class="join">
-        <button
-          aria-label="left"
-          on:click={() => update('-')}
-          class="btn join-item p-1 {pageDisplayed === 1 ? 'btn-disabled' : ''}"
-        >
-          <Icon data={LibIcon_ChevronLeft} />
-        </button>
-        {#if isValidValue}
-          <button aria-label="current" class="btn join-item px-0">
-            <span class="text-primary font-bold">{totalCount}</span>
-            <span class="text-[0.55rem] italic"
-              >({pageDisplayed} / {Math.ceil((totalCount ?? 0) / pageSize)})</span
-            >
-          </button>
-        {:else}
-          <button aria-label="loading" class="btn join-item animate-pulse">.....</button>
-        {/if}
-        <button
-          aria-label="right"
-          on:click={() => update('+')}
-          class="btn join-item p-1 {!canGoNext ? 'btn-disabled' : ''}"
-        >
-          <Icon data={LibIcon_ChevronRight} />
-        </button>
-      </div>
-    {/if}
-  </div>
+	<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="mx-2 h-4 w-1/2"></Loading>
+			<Loading class="mx-2 h-3 w-1/6"></Loading>
+		{:else if !needPaginate}
+			<span class="text-primary justify-end px-2 font-bold">
+				{totalCount}
+			</span>
+		{:else}
+			<div class="join">
+				<button
+					aria-label="left"
+					on:click={() => update('-')}
+					class="btn join-item p-1 {pageDisplayed === 1 ? 'btn-disabled' : ''}"
+				>
+					<Icon data={LibIcon_ChevronLeft} />
+				</button>
+				{#if isValidValue}
+					<button aria-label="current" class="btn join-item px-0">
+						<span class="text-primary font-bold">{totalCount}</span>
+						<span class="text-[0.55rem] italic"
+							>({pageDisplayed} / {Math.ceil((totalCount ?? 0) / pageSize)})</span
+						>
+					</button>
+				{:else}
+					<button aria-label="loading" class="btn join-item animate-pulse">.....</button>
+				{/if}
+				<button
+					aria-label="right"
+					on:click={() => update('+')}
+					class="btn join-item p-1 {!canGoNext ? 'btn-disabled' : ''}"
+				>
+					<Icon data={LibIcon_ChevronRight} />
+				</button>
+			</div>
+		{/if}
+	</div>
 </FieldContainer>