firstly 0.1.3 → 0.2.1

package/esm/svelte/FF_Layout.svelte

@@ -28,7 +28,7 @@
 {:else if layoutToUse.type === 'grid'}
 	<FF_Grid {r}></FF_Grid>
 {:else if layoutToUse.type === 'tab'}
-	<div role="tablist" class="tabs tabs-lifted">
+	<div role="tablist" class="tabs-lift tabs">
 		{#each layoutToUse.groups ?? [] as group (group.key)}
 			<input
 				type="radio"
@@ -39,14 +39,14 @@
 				onchange={() => (selectedThing = group.key)}
 				aria-label={group.caption}
 			/>
-			<div role="tabpanel" class="tab-content rounded-box border-base-300 bg-base-100 p-6">
+			<div role="tabpanel" class="tab-content border-base-300 bg-base-100 p-6">
 				<FF_Form {r} groups={[group]} show={{ title: false }}></FF_Form>
 			</div>
 		{/each}
 	</div>
 {:else if layoutToUse.type === 'accordion'}
 	{#each layoutToUse.groups ?? [] as group (group.key)}
-		<div class="collapse bg-base-100">
+		<div class="collapse-arrow collapse bg-base-100">
 			<input
 				type="radio"
 				name="my-accordion"

package/esm/svelte/FF_Layout.svelte.d.ts

@@ -5,10 +5,17 @@ interface Props<entityType = unknown> {
     layout?: Layout<entityType>;
     classes_goups?: string;
 }
+declare function $$render<entityType = unknown>(): {
+    props: Props<entityType>;
+    exports: {};
+    bindings: "";
+    slots: {};
+    events: {};
+};
 declare class __sveltets_Render<entityType = unknown> {
-    props(): Props<entityType>;
-    events(): {};
-    slots(): {};
+    props(): ReturnType<typeof $$render<entityType>>['props'];
+    events(): ReturnType<typeof $$render<entityType>>['events'];
+    slots(): ReturnType<typeof $$render<entityType>>['slots'];
     bindings(): "";
     exports(): {};
 }

package/esm/svelte/dialog/DialogManagement.svelte

@@ -16,7 +16,7 @@
 		>
 			{@html toShow.children}
 			<svelte:fragment slot="actions">
-				<Button class="text-white" on:click={() => dialog.close(toShow.id, { success: true })}
+				<Button class="text-white" onclick={() => dialog.close(toShow.id, { success: true })}
 					>Confirmer</Button
 				>
 			</svelte:fragment>
@@ -29,10 +29,7 @@
 		>
 			{@html toShow.children}
 			<svelte:fragment slot="actions">
-				<Button
-					class="btn-outline btn-error"
-					on:click={() => dialog.close(toShow.id, { success: true })}
-				>
+				<Button class="btn-error" onclick={() => dialog.close(toShow.id, { success: true })}>
 					Confirmer
 				</Button>
 			</svelte:fragment>

package/esm/svelte/dialog/DialogPrimitive.svelte

@@ -91,8 +91,7 @@
 		inset: 0;
 		z-index: 40;
 		background-color: var(--ff-dialog-overlay);
-		-webkit-backdrop-filter: blur(2px);
-		        backdrop-filter: blur(2px);
+		backdrop-filter: blur(2px);
 	}
 
 	[data-ff-dialog-content] {

package/esm/svelte/dialog/dialog.js

@@ -18,7 +18,7 @@ const createDialogManagement = () => {
         confirm: (topic, text, icon) => {
             const detail = {
                 detail: {
-                    caption: 'Confirmez',
+                    caption: 'A Confirmer',
                     icon: { data: icon },
                 },
                 children: `
@@ -34,7 +34,7 @@ const createDialogManagement = () => {
         confirmDelete: (topic) => {
             const detail = {
                 detail: {
-                    caption: 'Supprimer',
+                    caption: 'A Supprimer',
                     icon: { data: LibIcon_Delete },
                 },
                 children: topic

package/esm/svelte/ff_Config.svelte.js

@@ -40,8 +40,8 @@ export const daisyTheme = {
     },
     edit: {
         checkbox: 'checkbox',
-        input: 'input input-bordered',
-        select: 'select select-bordered',
+        input: 'input',
+        select: 'select',
     },
     grid: {
         root: 'table',

package/esm/svelte/index.d.ts

@@ -1,18 +1,13 @@
 import type { CellMetadata, getLayout } from './customField';
+import { default as FF_Cell_Display } from './FF_Cell_Display.svelte';
 import { default as FF_Cell } from './FF_Cell.svelte';
 import { default as FF_Config } from './FF_Config.svelte';
-import { default as FF_Display } from './FF_Display.svelte';
-import { default as FF_Edit } from './FF_Edit.svelte';
-import { default as FF_Error } from './FF_Error.svelte';
-import { default as FF_Field } from './FF_Field.svelte';
 import { default as FF_Form } from './FF_Form.svelte';
 import { default as FF_Grid } from './FF_Grid.svelte';
-import { default as FF_Hint } from './FF_Hint.svelte';
-import { default as FF_Label } from './FF_Label.svelte';
 import { default as FF_Layout } from './FF_Layout.svelte';
 export type { FieldTheme, FormTheme, GridTheme, Theme, EditTheme, DisplayTheme, } from './ff_Config.svelte.js';
 export { getDynamicCustomField, getTheme, setDynamicCustomField, setTheme, getClasses, daisyTheme, defaultTheme, emptyTheme, FF_Theme, } from './ff_Config.svelte.js';
-export { FF_Grid, FF_Form, FF_Field, FF_Edit, FF_Config, FF_Display, FF_Label, FF_Error, FF_Hint, FF_Layout, FF_Cell, };
+export { FF_Grid, FF_Form, FF_Config, FF_Layout, FF_Cell, FF_Cell_Display };
 export type { DynamicCustomField, FieldGroup } from './customField';
 export { FF_Repo } from './FF_Repo.svelte.js';
 export { tryCatch, tryCatchSync } from './tryCatch';

package/esm/svelte/index.js

@@ -1,16 +1,11 @@
+import { default as FF_Cell_Display } from './FF_Cell_Display.svelte';
 import { default as FF_Cell } from './FF_Cell.svelte';
 import { default as FF_Config } from './FF_Config.svelte';
-import { default as FF_Display } from './FF_Display.svelte';
-import { default as FF_Edit } from './FF_Edit.svelte';
-import { default as FF_Error } from './FF_Error.svelte';
-import { default as FF_Field } from './FF_Field.svelte';
 import { default as FF_Form } from './FF_Form.svelte';
 import { default as FF_Grid } from './FF_Grid.svelte';
-import { default as FF_Hint } from './FF_Hint.svelte';
-import { default as FF_Label } from './FF_Label.svelte';
 import { default as FF_Layout } from './FF_Layout.svelte';
 export { getDynamicCustomField, getTheme, setDynamicCustomField, setTheme, getClasses, daisyTheme, defaultTheme, emptyTheme, FF_Theme, } from './ff_Config.svelte.js';
-export { FF_Grid, FF_Form, FF_Field, FF_Edit, FF_Config, FF_Display, FF_Label, FF_Error, FF_Hint, FF_Layout, FF_Cell, };
+export { FF_Grid, FF_Form, FF_Config, FF_Layout, FF_Cell, FF_Cell_Display };
 export { FF_Repo } from './FF_Repo.svelte.js';
 export { tryCatch, tryCatchSync } from './tryCatch';
 export { overwriteOptions, deepMerge, isOfType } from './helpers';

package/esm/ui/Button.svelte

@@ -7,24 +7,40 @@
 
 	import { BaseEnum, tw } from '../internals'
 
-	export let isLoading = false
-	let className: string | undefined | null = undefined
-	export { className as class }
+	// TODO: extend HTMLButtonAttributes ?
+	interface Props {
+		isLoading?: boolean
+		permission?: BaseEnum[] | BaseEnum | undefined
+		tooltip?: import('svelte').Snippet
+		class?: string
+		children?: import('svelte').Snippet
+		disabled?: boolean | null
+		[key: string]: any
+	}
 
-	export let permission: BaseEnum[] | BaseEnum | undefined = undefined
+	let {
+		isLoading = false,
+		class: className = '',
+		permission = undefined,
+		children,
+		tooltip,
+		disabled: disabledProp,
+		...rest
+	}: Props = $props()
 
-	let permissionDisabled = false
-	$: disabled = $$restProps.disabled || permissionDisabled || isLoading
+	let permissionDisabled = $state(false)
+	let disabled = $derived(disabledProp || 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 triggerAnnimation = $state(false)
+	$effect(() => {
+		isLoading &&
+			setTimeout(() => {
+				if (isLoading) {
+					triggerAnnimation = true
+				}
+			}, 200)
+	})
 
 	let updates = (param: { permission: BaseEnum[] | BaseEnum | undefined }) => {
 		if (param && param.permission) {
@@ -42,7 +58,7 @@
 		}
 	}
 
-	let disabledWhy = ''
+	let disabledWhy = $state('')
 	const isAllowed: Action<HTMLElement, { permission: BaseEnum[] | BaseEnum | undefined }> = (
 		node,
 		param,
@@ -81,14 +97,14 @@
 
 <button
 	{...$trigger}
+	use:trigger
 	use:isAllowed={{ permission }}
-	on:click
-	{...$$restProps}
-	class={tw(['btn text-white', disabled ? '' : 'btn-primary', className])}
+	{...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,16 +112,17 @@
 	{/if}
 </button>
 
-{#if $open && (disabledWhy || $$slots.tooltip)}
+{#if $open && (disabledWhy || tooltip)}
 	<div
 		{...$content}
+		use:content
 		transition:fade={{ duration: 100 }}
 		class="z-30 rounded-lg bg-base-300 ring-1 ring-black"
 	>
-		<div {...$arrow}></div>
+		<div {...$arrow} use:arrow></div>
 		<div class="px-4 py-1">
-			{#if $$slots.tooltip}
-				<slot name="tooltip" />
+			{#if tooltip}
+				{@render tooltip?.()}
 			{:else}
 				{disabledWhy}
 			{/if}

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

@@ -1,37 +1,13 @@
 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;
+    permission?: BaseEnum[] | BaseEnum | undefined;
+    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
 
@@ -203,9 +207,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 +229,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 +296,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 +316,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 +329,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;