firstly 0.2.1 → 0.4.0

package/esm/ui/Grid.svelte

@@ -1,265 +0,0 @@
-<script lang="ts" generics="T extends Record<any, any>">
-	import { createEventDispatcher } from 'svelte'
-
-	import type { EntityOrderBy } from 'remult'
-
-	import type { Cell } from '../internals/cellsBuildor.js'
-	import {
-		displayWithDefaultAndSuffix,
-		getEntityDisplayValue,
-		getEntityDisplayValueFromField,
-		getFieldLinkDisplayValue,
-		getFieldMetaType,
-	} from '../internals/helper.js'
-	import { LibIcon_Delete, LibIcon_Edit, type StoreList } from '../internals/index.js'
-	import Button from './Button.svelte'
-	import Clipboardable from './Clipboardable.svelte'
-	import GridLoading from './GridLoading.svelte'
-	import Icon from './Icon.svelte'
-	import { align, baseTable, 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 store: StoreList<T>
-
-	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',
-		table: '',
-	}
-	export let orderBy: EntityOrderBy<T> | undefined = undefined
-	export let orderByCols: (keyof T)[] | true | undefined = undefined
-
-	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')
-	}
-</script>
-
-<div class="overflow-x-auto">
-	<table class="table {classes.table} {baseTable}">
-		<thead>
-			<tr>
-				{#each cellsToTake(cells) as b, i}
-					{@const al = align(b.field, b.kind === 'slot')}
-					<th class={al}>
-						{#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 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"
-									onclick={() => 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">
-						{#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)}
-									{#if t === 'true'}
-										Oui
-									{:else if t === 'false'}
-										Non
-									{:else}
-										{t}
-									{/if}
-								{: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 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"
-											onclick={() => 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"
-											onclick={() => 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/Grid.svelte.d.ts

@@ -1,57 +0,0 @@
-import type { EntityOrderBy } from 'remult';
-import type { Cell } from '../internals/cellsBuildor.js';
-import { type StoreList } from '../internals/index.js';
-declare class __sveltets_Render<T extends Record<any, any>> {
-    props(): {
-        cells: Cell<T>[];
-        store: StoreList<T>;
-        withAdd?: boolean;
-        withEdit?: boolean;
-        withDelete?: boolean;
-        loadingRows?: number;
-        classes?: {
-            table: string;
-        } | undefined;
-        orderBy?: EntityOrderBy<T> | undefined;
-        orderByCols?: true | (keyof T)[] | undefined;
-        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: T;
-            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 Grid: $$IsomorphicComponent;
-type Grid<T extends Record<any, any>> = InstanceType<typeof Grid<T>>;
-export default Grid;

package/esm/ui/Grid2.svelte

@@ -1,293 +0,0 @@
-<script lang="ts" generics="T extends Record<any, any>">
-	import { createEventDispatcher } from 'svelte'
-
-	import type { EntityOrderBy } from 'remult'
-
-	import type { Cell } from '../internals/cellsBuildor.js'
-	import {
-		displayWithDefaultAndSuffix,
-		getEntityDisplayValue,
-		getEntityDisplayValueFromField,
-		getFieldLinkDisplayValue,
-		getFieldMetaType,
-	} from '../internals/helper.js'
-	import { LibIcon_Delete, LibIcon_Edit } from '../internals/index.js'
-	import { intersection } from '../svelte/actions/intersection.js'
-	import type { FF_Repo } from '../svelte/FF_Repo.svelte.js'
-	import Button from './Button.svelte'
-	import Clipboardable from './Clipboardable.svelte'
-	import GridLoading from './GridLoading.svelte'
-	import Icon from './Icon.svelte'
-	import { align, baseTable, 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',
-		table: '',
-	}
-	export let orderBy: EntityOrderBy<T> | undefined = undefined
-	export let orderByCols: (keyof T)[] | true | undefined = undefined
-
-	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')
-	}
-</script>
-
-<div class="overflow-x-auto">
-	<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}>
-						{#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 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"
-									onclick={() => dispatch('add', {})}
-								>
-									<Icon data={LibIcon_Add} />
-								</Button>
-							{:else}
-								<Icon data={LibIcon_Settings}></Icon>
-							{/if}
-						</div>
-					</th>
-				{/if}
-			</tr>
-		</thead>
-		<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">
-						{#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 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>
-									{/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 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"
-											onclick={() => 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"
-											onclick={() => 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'}
-				onclick={() => {
-					r.queryMore()
-				}}>Plus</Button
-			>
-		</div>
-	{/if}
-</div>

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

@@ -1,57 +0,0 @@
-import type { EntityOrderBy } from 'remult';
-import type { Cell } from '../internals/cellsBuildor.js';
-import type { FF_Repo } from '../svelte/FF_Repo.svelte.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;
-        dicoNoResult?: string;
-    };
-    events(): {
-        refresh: CustomEvent<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;