firstly 0.2.0 → 0.3.0

package/esm/ui/Button.svelte

@@ -1,67 +1,40 @@
 <script lang="ts">
 	import { createTooltip } from '@melt-ui/svelte'
-	import type { Action } from 'svelte/action'
 	import { fade, fly } from 'svelte/transition'
 
-	import { remult } from 'remult'
+	import { tw } from '../internals'
 
-	import { BaseEnum, tw } from '../internals'
-
-	export let isLoading = false
-	let className: string | undefined | null = undefined
-	export { className as class }
-
-	export let permission: BaseEnum[] | BaseEnum | undefined = undefined
-
-	let permissionDisabled = false
-	$: disabled = $$restProps.disabled || permissionDisabled || isLoading
-
-	// let's trigger the annimation if it's more than 200ms
-	let triggerAnnimation = false
-	$: isLoading &&
-		setTimeout(() => {
-			if (isLoading) {
-				// eslint-disable-next-line
-				triggerAnnimation = true
-			}
-		}, 200)
-
-	let updates = (param: { permission: BaseEnum[] | BaseEnum | undefined }) => {
-		if (param && param.permission) {
-			permissionDisabled = !remult.isAllowed(
-				Array.isArray(param.permission) ? param.permission.map((c) => c.id) : param.permission.id,
-			)
-			if (permissionDisabled) {
-				disabledWhy = `Vous n'avez pas la permission: ${Array.isArray(param.permission) ? param.permission.map((c) => `"${c.caption}"`).join(' ou ') : `"${param.permission.caption}"`}`
-			} else {
-				disabledWhy = ''
-			}
-		} else {
-			permissionDisabled = false
-			disabledWhy = ''
-		}
+	// TODO: extend HTMLButtonAttributes ?
+	interface Props {
+		isLoading?: boolean
+		tooltip?: import('svelte').Snippet
+		class?: string
+		children?: import('svelte').Snippet
+		disabled?: boolean | null
+		[key: string]: any
 	}
 
-	let disabledWhy = ''
-	const isAllowed: Action<HTMLElement, { permission: BaseEnum[] | BaseEnum | undefined }> = (
-		node,
-		param,
-	) => {
-		// the node has been mounted in the DOM
-		// @ts-ignore
-		updates(param)
+	let {
+		isLoading = false,
+		class: className = '',
+		children,
+		tooltip,
+		disabled: disabledProp,
+		...rest
+	}: Props = $props()
 
-		return {
-			update(param) {
-				// the value of `bar` has changed
-				updates(param)
-			},
+	let disabled = $derived(disabledProp || isLoading)
 
-			destroy() {
-				// the node has been removed from the DOM
-			},
-		}
-	}
+	// let's trigger the annimation if it's more than 200ms
+	let triggerAnnimation = $state(false)
+	$effect(() => {
+		isLoading &&
+			setTimeout(() => {
+				if (isLoading) {
+					triggerAnnimation = true
+				}
+			}, 200)
+	})
 
 	const {
 		elements: { trigger, content, arrow },
@@ -81,14 +54,13 @@
 
 <button
 	{...$trigger}
-	use:isAllowed={{ permission }}
-	on:click
-	{...$$restProps}
-	class={tw(['btn text-white', disabled ? '' : 'btn-primary', className])}
+	use:trigger
+	{...rest}
+	class={tw(['btn', className])}
 	{disabled}
 >
 	<!-- btn-outline -->
-	<slot />
+	{@render children?.()}
 	{#if triggerAnnimation && isLoading}
 		<div in:fly={{ x: -20 }}>
 			<span class="loading loading-spinner"></span>
@@ -96,7 +68,7 @@
 	{/if}
 </button>
 
-{#if $open && (disabledWhy || $$slots.tooltip)}
+{#if $open && tooltip}
 	<div
 		{...$content}
 		use:content
@@ -105,11 +77,7 @@
 	>
 		<div {...$arrow} use:arrow></div>
 		<div class="px-4 py-1">
-			{#if $$slots.tooltip}
-				<slot name="tooltip" />
-			{:else}
-				{disabledWhy}
-			{/if}
+			{@render tooltip?.()}
 		</div>
 	</div>
 {/if}

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

@@ -1,37 +1,11 @@
-import { BaseEnum } from '../internals';
-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;
-    } & Exports;
-    (internal: unknown, props: Props & {
-        $$events?: Events;
-        $$slots?: Slots;
-    }): Exports & {
-        $set?: any;
-        $on?: any;
-    };
-    z_$$bindings?: Bindings;
+interface Props {
+    isLoading?: boolean;
+    tooltip?: import('svelte').Snippet;
+    class?: string;
+    children?: import('svelte').Snippet;
+    disabled?: boolean | null;
+    [key: string]: any;
 }
-type $$__sveltets_2_PropsWithChildren<Props, Slots> = Props & (Slots extends {
-    default: any;
-} ? Props extends Record<string, never> ? any : {
-    children?: any;
-} : {});
-declare const Button: $$__sveltets_2_IsomorphicComponent<$$__sveltets_2_PropsWithChildren<{
-    [x: string]: any;
-    isLoading?: boolean | undefined;
-    class?: string | undefined | null | undefined;
-    permission?: BaseEnum<any> | BaseEnum<any>[] | undefined;
-}, {
-    default: {};
-    tooltip: {};
-}>, {
-    click: MouseEvent;
-} & {
-    [evt: string]: CustomEvent<any>;
-}, {
-    default: {};
-    tooltip: {};
-}, {}, string>;
-type Button = InstanceType<typeof Button>;
+declare const Button: import("svelte").Component<Props, {}, "">;
+type Button = ReturnType<typeof Button>;
 export default Button;

package/esm/ui/Clipboardable.svelte

@@ -1,13 +1,15 @@
 <script lang="ts">
-	/**
-	 * @param value to set in the clipboard if not null.
-	 *
-	 * Don't put this on an input, if not, when a user will select the input via the mouse, this clipboard will be copied (usually you wanted to paste)!
-	 */
-	export let value: string | null
-	export { extraClass as class }
+	interface Props {
+		/**
+		 * @param value to set in the clipboard if not null.		 *
+		 * Don't put this on an input, if not, when a user will select the input via the mouse, this clipboard will be copied (usually you wanted to paste)!
+		 */
+		value: string | null
+		class?: string
+		children?: import('svelte').Snippet
+	}
 
-	let extraClass = ''
+	let { value, class: extraClass = '', children }: Props = $props()
 
 	async function clip(_value: string | null) {
 		if (_value) {
@@ -18,12 +20,6 @@
 	}
 </script>
 
-<span
-	role="button"
-	tabindex="0"
-	on:keyup={() => {}}
-	on:click={() => clip(value)}
-	class={`${value ? 'cursor-copy' : ''} ${extraClass}`}
->
-	<slot />
-</span>
+<button onclick={() => clip(value)} class={`text-left ${value ? 'cursor-copy' : ''} ${extraClass}`}>
+	{@render children?.()}
+</button>

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

@@ -1,36 +1,12 @@
-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;
-    } & Exports;
-    (internal: unknown, props: Props & {
-        $$events?: Events;
-        $$slots?: Slots;
-    }): Exports & {
-        $set?: any;
-        $on?: any;
-    };
-    z_$$bindings?: Bindings;
-}
-type $$__sveltets_2_PropsWithChildren<Props, Slots> = Props & (Slots extends {
-    default: any;
-} ? Props extends Record<string, never> ? any : {
-    children?: any;
-} : {});
-declare const Clipboardable: $$__sveltets_2_IsomorphicComponent<$$__sveltets_2_PropsWithChildren<{
+interface Props {
     /**
-         * @param value to set in the clipboard if not null.
-         *
-         * Don't put this on an input, if not, when a user will select the input via the mouse, this clipboard will be copied (usually you wanted to paste)!
-         */ value: string | null;
+     * @param value to set in the clipboard if not null.		 *
+     * Don't put this on an input, if not, when a user will select the input via the mouse, this clipboard will be copied (usually you wanted to paste)!
+     */
+    value: string | null;
     class?: string;
-}, {
-    default: {};
-}>, {
-    [evt: string]: CustomEvent<any>;
-}, {
-    default: {};
-}, {
-    class: string;
-}, string>;
-type Clipboardable = InstanceType<typeof Clipboardable>;
+    children?: import('svelte').Snippet;
+}
+declare const Clipboardable: import("svelte").Component<Props, {}, "">;
+type Clipboardable = ReturnType<typeof Clipboardable>;
 export default Clipboardable;

package/esm/ui/Field.svelte

@@ -3,6 +3,7 @@
 	import type { HTMLInputAttributes } from 'svelte/elements'
 
 	import { type FieldMetadata, type FindOptions } from 'remult'
+	import { midTrim } from '@kitql/helpers'
 
 	import { suffixWithS } from '../formats/strings'
 	import { type BaseItem, type Cell } from '../internals'
@@ -23,8 +24,11 @@
 	import SelectRadio from './internals/select/SelectRadio.svelte'
 	import Textarea from './internals/Textarea.svelte'
 	import { LibIcon_Eye, LibIcon_EyeOff } from './LibIcon'
+	import Link from './link/Link.svelte'
 	import LinkPlus from './link/LinkPlus.svelte'
 
+	// import Select2 from './internals/select/Select2.svelte'
+
 	export let cell: Cell<T>
 	export let value: HTMLInputAttributes['value'] = undefined
 
@@ -163,7 +167,16 @@
 			}
 		}
 
-		return { items: arr.map((r) => getEntityDisplayValue(metaTypeObj.repoTarget, r)), totalCount }
+		const items = arr.map((r) => getEntityDisplayValue(metaTypeObj.repoTarget, r))
+
+		// Add "nobody" option at the beginning for filters if configured
+		// @ts-ignore
+		const filterNobodyLabel = cell.field?.options.filterNobodyLabel
+		if (mode === 'filtre' && filterNobodyLabel && str === '') {
+			items.unshift({ id: null, caption: filterNobodyLabel })
+		}
+
+		return { items, totalCount }
 	}
 
 	const getMultiValues = (value: any) => {
@@ -203,9 +216,15 @@
 	{@const clearableComputed =
 		cell.clearable || clearable || (mode === 'filtre' && clearable === undefined)}
 	{#if isViewMode(mode, cell.field)}
-		<span class="input-bordered flex items-center pl-2 pr-4">
+		<span class="flex items-center pr-4 pl-2">
 			{#if cell.field?.inputType === 'checkbox'}
-				<input type="checkbox" {...common(cell.field)} class="checkbox ml-2" disabled checked={value} />
+				<input
+					type="checkbox"
+					{...common(cell.field)}
+					class="checkbox ml-2 border-base-content/60"
+					disabled
+					checked={value}
+				/>
 			{:else if metaType.kind === 'relation'}
 				{@const item = getEntityDisplayValue(metaType.repoTarget, value)}
 				<div class={tw('flex items-center gap-4', 'h-12', 'pl-2')}>
@@ -219,10 +238,23 @@
 					{/if}
 					<Clipboardable value={v}>{v}</Clipboardable>
 				</div>
+			{:else if metaType.subKind === 'link'}
+				<div class="ml-2 flex h-12 max-w-sm items-center gap-4 truncate">
+					{#if value}
+						<Link href={value} target="_blank" isExternal
+							>{midTrim(value.replaceAll('https://', '').replaceAll('www.', ''), {
+								len: 38,
+								midStr: ' ... ',
+							})}</Link
+						>
+					{:else}
+						<span class="text-base-content/30">-</span>
+					{/if}
+				</div>
 			{:else}
 				{@const v = displayWithDefaultAndSuffix(cell.field, value)}
 				<div
-					class="ml-2 flex h-12 w-full items-center {metaType.subKind === 'number' ? 'justify-end' : ''}"
+					class="ml-2 pb-2 flex h-12 w-full items-center {metaType.subKind === 'number' ? 'justify-end' : ''}"
 				>
 					<Clipboardable value={v}>{v}</Clipboardable>
 				</div>
@@ -273,6 +305,13 @@
 				on:selected={(e) => dispatchSelected(e.detail)}
 			/>
 		{:else}
+			<!-- <Select2
+				{...common(cell.field, true)}
+				clearable={clearableComputed}
+				items={metaType.values}
+				value={value?.id || value}
+				onChange={(e) => dispatchSelected(metaType.values.find((v) => v.id === e))}
+			/> -->
 			<SelectMelt
 				{focus}
 				{...common(cell.field, true)}
@@ -286,7 +325,7 @@
 			/>
 		{/if}
 	{:else if metaType.subKind === 'checkbox'}
-		<div class="grid content-center items-center pl-4">
+		<div class="grid content-center items-center pl-4 pb-2">
 			<input
 				type="checkbox"
 				{...{ ...common(cell.field), required: undefined }}
@@ -299,20 +338,20 @@
 				}}
 			/>
 		</div>
-	{:else if metaType.subKind === 'text' || metaType.subKind === 'email' || metaType.subKind === 'password' || metaType.subKind === 'dateOnly' || metaType.subKind === 'number' || metaType.subKind === 'textpsd'}
-		<div class="input input-bordered inline-flex w-full items-center pl-2">
+	{:else if metaType.subKind === 'text' || metaType.subKind === 'email' || metaType.subKind === 'password' || metaType.subKind === 'date' || metaType.subKind === 'number' || metaType.subKind === 'textpsd' || metaType.subKind === 'link'}
+		<div class="input inline-flex w-full items-center pl-2">
 			<Input
 				{focus}
 				{...common(cell.field)}
 				autocomplete="off"
 				class={tw(
-					`join-item w-full bg-transparent placeholder:text-base-content/30`,
+					`join-item w-full placeholder:text-base-content/30`,
 					metaType.subKind === 'number' && 'text-end',
 				)}
 				style={cell.field?.inputType === 'textpsd' && textpsdVisible === false
 					? 'filter: blur(0.2rem)'
 					: ''}
-				type={metaType.subKind.replaceAll('dateOnly', 'date').replaceAll('textpsd', 'text')}
+				type={metaType.subKind.replaceAll('textpsd', 'text').replaceAll('link', 'text')}
 				value={toInput(cell.field, value)}
 				{withDedounce}
 				on:input={(e) => {

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

@@ -3,7 +3,7 @@ import { type StoreItem } from '../internals';
 import type { Cell } from '../internals/cellsBuildor';
 declare class __sveltets_Render<T extends Record<any, any>> {
     props(): {
-        mode?: "edit" | "view" | "filtre";
+        mode?: "view" | "edit" | "filtre";
         cells: Cell<T>[];
         store: StoreItem<T>;
         focusKey?: string | null | undefined;

package/esm/ui/Grid.svelte

@@ -16,7 +16,7 @@
 	import Clipboardable from './Clipboardable.svelte'
 	import GridLoading from './GridLoading.svelte'
 	import Icon from './Icon.svelte'
-	import { align, getAligns } from './index.js'
+	import { align, baseTable, getAligns } from './index.js'
 	import {
 		LibIcon_Add,
 		LibIcon_Settings,
@@ -36,11 +36,11 @@
 	export let loadingRows = 5
 
 	export let classes = {
-		table: 'table-pin-rows table-pin-cols',
+		// 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 settingsLeft = false
 
 	export let dicoNoResult = 'Aucun résultat !'
 
@@ -84,58 +84,15 @@
 	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">
+	<table class="table {classes.table} {baseTable}">
 		<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)}">
+					<th class={al}>
 						{#if b.headerSlot}
 							<slot name="header" field={b.field} />
 						{:else}
@@ -158,15 +115,14 @@
 					</th>
 				{/each}
 
-				{#if !settingsLeft && (withEdit || withDelete || withAdd)}
-					<th class="rounded-tr-lg">
+				{#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"
-									on:click={() => dispatch('add', {})}
+									onclick={() => dispatch('add', {})}
 								>
 									<Icon data={LibIcon_Add} />
 								</Button>
@@ -185,34 +141,6 @@
 			{: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')}>
@@ -274,38 +202,36 @@
 										<Clipboardable value={t}>
 											<!-- 20 is a cool value ! -->
 											<span class={t.length < 20 ? 'text-nowrap' : ''}>
-												{t}
+												{@html t}
 											</span>
 										</Clipboardable>
 									{:else}
 										<!-- 20 is a cool value ! -->
 										<span class={t.length < 20 ? 'text-nowrap' : ''}>
-											{t}
+											{@html t}
 										</span>
 									{/if}
 								{/if}
 							</td>
 						{/each}
 
-						{#if !settingsLeft && (withEdit || withDelete)}
+						{#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"
-											on:click={() => dispatch('edit', row)}
+											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"
-											on:click={() => dispatch('delete', row)}
+											onclick={() => dispatch('delete', row)}
 										>
 											<Icon data={LibIcon_Delete} />
 										</Button>

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

@@ -14,7 +14,6 @@ declare class __sveltets_Render<T extends Record<any, any>> {
         } | undefined;
         orderBy?: EntityOrderBy<T> | undefined;
         orderByCols?: true | (keyof T)[] | undefined;
-        settingsLeft?: boolean;
         dicoNoResult?: string;
     };
     events(): {