firstly 0.0.14 → 0.0.16-next.0

package/esm/ui/Grid2.svelte

@@ -0,0 +1,354 @@
+<script lang="ts" generics="T extends Record<any, any>">
+	import { createEventDispatcher } from 'svelte'
+
+	import type { EntityOrderBy } from 'remult'
+
+	import { intersection } from '../../lib/svelte/actions/intersection.js'
+	import type { FF_Repo } from '../../lib/svelte/FF_Repo.svelte.js'
+	import type { Cell } from '../cellsBuildor.js'
+	import {
+		displayWithDefaultAndSuffix,
+		getEntityDisplayValue,
+		getEntityDisplayValueFromField,
+		getFieldLinkDisplayValue,
+		getFieldMetaType,
+	} from '../helper.js'
+	import { LibIcon_Delete, LibIcon_Edit } from '../index.js'
+	import Button from './Button.svelte'
+	import Clipboardable from './Clipboardable.svelte'
+	import GridLoading from './GridLoading.svelte'
+	import Icon from './Icon.svelte'
+	import { align, getAligns } from './index.js'
+	import {
+		LibIcon_Add,
+		LibIcon_Settings,
+		LibIcon_Sort,
+		LibIcon_SortAsc,
+		LibIcon_SortDesc,
+	} from './LibIcon.js'
+	import LinkPlus from './link/LinkPlus.svelte'
+
+	export let cells: Cell<T>[]
+	export let r: FF_Repo<any>
+
+	export let withAdd = false
+	export let withEdit = false
+	export let withDelete = false
+
+	export let loadingRows = 5
+
+	export let classes = {
+		table: 'table-pin-rows table-pin-cols',
+	}
+	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 !'
+
+	const dispatch = createEventDispatcher()
+
+	const sorting = (toSort: boolean, b: Cell<T>) => {
+		if (!toSort) {
+			return
+		}
+		if (orderBy === undefined) {
+			// @ts-ignore
+			orderBy = { [b.field.key]: 'asc' }
+			// @ts-ignore
+		} else if (orderBy[b.field.key] === 'asc') {
+			// @ts-ignore
+			orderBy = { [b.field.key]: 'desc' }
+			// @ts-ignore
+		} else if (orderBy[b.field.key] === undefined) {
+			// @ts-ignore
+			orderBy = { [b.field.key]: 'asc' }
+		} else {
+			orderBy = undefined
+		}
+	}
+
+	const sortingIcon = (toSort: boolean, b: Cell<T>, _orderBy: EntityOrderBy<T> | undefined) => {
+		if (!toSort) {
+			return
+		}
+		// @ts-ignore
+		if (_orderBy && _orderBy[b.field.key] === 'asc') {
+			return { data: LibIcon_SortAsc, class: 'text-primary' }
+		}
+		// @ts-ignore
+		if (_orderBy && _orderBy[b.field.key] === 'desc') {
+			return { data: LibIcon_SortDesc, class: 'text-primary' }
+		}
+		return { data: LibIcon_Sort }
+	}
+
+	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}
+
+				{#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}
+									onclick={() => 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={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>
+							{:else}
+								<Icon data={LibIcon_Settings}></Icon>
+							{/if}
+						</div>
+					</th>
+				{/if}
+			</tr>
+		</thead>
+		<tbody>
+			{#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')}>
+								{#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={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}
+					</tr>
+				{:else}
+					{#if !r.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}
+				{#if r.loading.more}
+					<GridLoading columns={getAligns(cells, withEdit || withDelete)} {loadingRows} />
+				{/if}
+				<slot name="extra" />
+			{/if}
+		</tbody>
+	</table>
+
+	{#if r.hasNextPage}
+		<div
+			use:intersection={{ rootMargin: '177px' }}
+			onintersecting={() => {
+				// console.info('intersecting')
+				// if (r.hasNextPage) {
+				// 	r.queryMore()
+				// }
+			}}
+			class="mt-2 flex justify-end"
+		>
+			<Button
+				class={r.loading.more ? 'btn-disabled' : 'btn-primary'}
+				on:click={() => {
+					r.queryMore()
+				}}>Plus</Button
+			>
+		</div>
+	{/if}
+</div>

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

@@ -0,0 +1,58 @@
+import type { EntityOrderBy } from 'remult';
+import type { FF_Repo } from '../../lib/svelte/FF_Repo.svelte.js';
+import type { Cell } from '../cellsBuildor.js';
+declare class __sveltets_Render<T extends Record<any, any>> {
+    props(): {
+        cells: Cell<T>[];
+        r: FF_Repo<any>;
+        withAdd?: boolean;
+        withEdit?: boolean;
+        withDelete?: boolean;
+        loadingRows?: number;
+        classes?: {
+            table: string;
+        } | undefined;
+        orderBy?: EntityOrderBy<T> | undefined;
+        orderByCols?: true | (keyof T)[] | undefined;
+        settingsLeft?: boolean;
+        dicoNoResult?: string;
+    };
+    events(): {
+        refresh: any;
+        add: CustomEvent<any>;
+        rowclick: CustomEvent<any>;
+        edit: CustomEvent<any>;
+        delete: CustomEvent<any>;
+    } & {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots(): {
+        header: {
+            field: import("remult").FieldMetadata<any, T> | undefined;
+        };
+        cell: {
+            row: any;
+            field: import("remult").FieldMetadata<any, T> | undefined;
+            cell: Cell<T>;
+        };
+        extra: {};
+    };
+    bindings(): string;
+    exports(): {};
+}
+interface $$IsomorphicComponent {
+    new <T extends Record<any, any>>(options: import('svelte').ComponentConstructorOptions<ReturnType<__sveltets_Render<T>['props']> & {
+        children?: any;
+    }>): import('svelte').SvelteComponent<ReturnType<__sveltets_Render<T>['props']>, ReturnType<__sveltets_Render<T>['events']>, ReturnType<__sveltets_Render<T>['slots']>> & {
+        $$bindings?: ReturnType<__sveltets_Render<T>['bindings']>;
+    } & ReturnType<__sveltets_Render<T>['exports']>;
+    <T extends Record<any, any>>(internal: unknown, props: ReturnType<__sveltets_Render<T>['props']> & {
+        $$events?: ReturnType<__sveltets_Render<T>['events']>;
+        $$slots?: ReturnType<__sveltets_Render<T>['slots']>;
+        children?: any;
+    }): ReturnType<__sveltets_Render<T>['exports']>;
+    z_$$bindings?: ReturnType<__sveltets_Render<any>['bindings']>;
+}
+declare const Grid2: $$IsomorphicComponent;
+type Grid2<T extends Record<any, any>> = InstanceType<typeof Grid2<T>>;
+export default Grid2;

package/esm/ui/GridLoading.svelte

@@ -5,28 +5,53 @@
 
 	export let columns: Align[]
 	export let loadingRows = 5
+	export let withDoubleLoading = true
 
 	// Random with different size
-	let size = ['', 'w-1/2', 'w-1/3', 'w-1/4', 'w-1/5', 'w-1/6']
+	let size = [
+		// 'w-1/12',
+		'w-2/12',
+		'w-3/12',
+		'w-4/12',
+		'w-5/12',
+		// 'w-6/12',
+		'w-7/12',
+		// 'w-8/12',
+		'w-9/12',
+		'w-10/12',
+		'w-11/12',
+		'w-full',
+	]
 </script>
 
 <!-- Do 10 rows -->
 {#each new Array(loadingRows) as _row, r}
 	<tr>
 		{#each columns as column, c}
-			<td class="{column} ">
+			{@const sizeIndex = parseInt(
+				(((r + 1) * (c + 1) * Math.random() * size.length) % size.length).toString(),
+			)}
+			<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())],
-						)}
-					/>
+					<Loading class={tw(`h-4`, size[sizeIndex])} />
 					<div></div>
 				</div>
+
+				{#if withDoubleLoading}
+					{@const sizeIndex2 = parseInt(
+						(((r + 1) * (c + 1) * Math.random() * sizeIndex) % sizeIndex).toString(),
+					)}
+					<div class={tw('mt-2 flex justify-between', column === 'text-right' && 'flex-row-reverse')}>
+						{#if column === 'text-center'}
+							<div></div>
+						{/if}
+						<Loading class={tw(`h-3`, size[sizeIndex2])} />
+						<div></div>
+					</div>
+				{/if}
 			</td>
 		{/each}
 	</tr>

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

@@ -15,6 +15,7 @@ interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> =
 declare const GridLoading: $$__sveltets_2_IsomorphicComponent<{
     columns: Align[];
     loadingRows?: number;
+    withDoubleLoading?: boolean;
 }, {
     [evt: string]: CustomEvent<any>;
 }, {}, {}, string>;

package/esm/ui/GridPaginate.svelte

@@ -1,9 +1,6 @@
 <script lang="ts">
 	import Icon from './Icon.svelte'
 	import FieldContainer from './internals/FieldContainer.svelte'
-
-	import './LibIcon'
-
 	import { LibIcon_ChevronLeft, LibIcon_ChevronRight } from './LibIcon'
 	import Loading from './Loading.svelte'
 

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

@@ -1,4 +1,3 @@
-import './LibIcon';
 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;

package/esm/ui/GridPaginate2.svelte

@@ -0,0 +1,25 @@
+<script lang="ts">
+	import FieldContainer from './internals/FieldContainer.svelte'
+	import Loading from './Loading.svelte'
+
+	interface Props {
+		label?: string
+		totalCount?: number | undefined | null
+	}
+
+	let { label = 'Stats', totalCount = undefined }: Props = $props()
+</script>
+
+<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="mx-2 h-4 w-1/2"></Loading>
+			<Loading class="mx-2 h-3 w-1/6"></Loading>
+		{:else}
+			<span class="text-primary justify-end px-2 font-bold">
+				{totalCount}
+			</span>
+		{/if}
+	</div>
+</FieldContainer>

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

@@ -0,0 +1,7 @@
+interface Props {
+    label?: string;
+    totalCount?: number | undefined | null;
+}
+declare const GridPaginate2: import("svelte").Component<Props, {}, "">;
+type GridPaginate2 = ReturnType<typeof GridPaginate2>;
+export default GridPaginate2;

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

@@ -1,6 +1,7 @@
 import type { SvelteComponent } from 'svelte';
-import type { Repository } from 'remult';
+import { type Repository } from 'remult';
 import { type BaseItemLight, type CellsInput, type StoreItem } from '../../';
+import type { FF_Repo } from '../../svelte';
 export type DialogClasses = {
     /**
      * for example `overflow-auto` to have a scrollbar in the dialog
@@ -23,6 +24,7 @@ export type DialogMetaData<entityType = any> = {
     wDelete?: boolean;
     focusKey?: string;
     topicPrefixText?: string;
+    r?: FF_Repo<entityType>;
 };
 type ResultClose<entityType = any> = {
     success: boolean;

package/esm/ui/dialog/dialog.js

@@ -1,4 +1,5 @@
 import { writable } from 'svelte/store';
+import {} from 'remult';
 import { LibIcon_Add, LibIcon_Delete, LibIcon_Edit, LibIcon_Search, } from '../../';
 const createDialogManagement = () => {
     const { subscribe, update } = writable([]);
@@ -67,6 +68,7 @@ const createDialogManagement = () => {
                 focusKey: settings?.focusKey,
                 topicPrefixText,
             };
+            // @ts-ignore
             return show(detail, type);
         },
         show: (dialog) => {

package/esm/ui/link/LinkPlus.svelte

@@ -22,13 +22,15 @@
 <div class="flex items-center gap-4">
 	{#if item}
 		{#if item.icon?.data && !noIcon}
-			{#if item.icon.caption}
-				<Tooltip text={item.icon.caption}>
+			<div>
+				{#if item.icon.caption}
+					<Tooltip text={item.icon.caption}>
+						<Icon {...item.icon} />
+					</Tooltip>
+				{:else}
 					<Icon {...item.icon} />
-				</Tooltip>
-			{:else}
-				<Icon {...item.icon} />
-			{/if}
+				{/if}
+			</div>
 		{/if}
 
 		{#if hasSomethingToDisplay(item)}