firstly 0.2.0 → 0.2.1

package/esm/ui/dialog/FormEditAction.svelte

@@ -26,8 +26,8 @@
 			{#if wDelete}
 				<Button
 					type="button"
-					on:click={dispatchDelete}
-					class="btn-outline btn-error mr-4 text-white"
+					onclick={dispatchDelete}
+					class="mr-4 btn-error"
 					isLoading={$store.loading}
 				>
 					<Icon data={LibIcon_Delete} />
@@ -41,7 +41,7 @@
 			</div>
 		</div>
 
-		<Button class="text-white" {...$$restProps} isLoading={$store.loading}>
+		<Button class="btn-primary" {...$$restProps} isLoading={$store.loading}>
 			<Icon data={LibIcon_Check} />
 			<p>Sauvegarder</p>
 		</Button>
@@ -54,7 +54,7 @@
 			{/if}
 		</div>
 
-		<Button class="text-white" {...$$restProps} isLoading={$store.loading}>
+		<Button class="btn-primary" {...$$restProps} isLoading={$store.loading}>
 			<Icon data={LibIcon_Add} />
 			<p>{textCreate}</p>
 		</Button>

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

@@ -1,6 +1,8 @@
-import type { SvelteComponent } from 'svelte';
+import type { Component, SvelteComponent } from 'svelte';
 import { type Repository } from 'remult';
-import { type BaseItemLight, type CellsInput, type StoreItem } from '../../internals';
+import type { BaseItemLight } from '../../internals/BaseEnum';
+import type { CellsInput } from '../../internals/cellsBuildor';
+import type { StoreItem } from '../../internals/storeItem';
 import type { FF_Repo } from '../../svelte';
 export type DialogClasses = {
     /**
@@ -18,6 +20,7 @@ export type DialogMetaData<entityType = any> = {
     defaults?: Partial<entityType>;
     classes?: DialogClasses;
     component?: new (...args: any[]) => SvelteComponent;
+    componentS5?: Component;
     props?: any;
     children?: any;
     reThrow?: boolean;

package/esm/ui/dialog/dialog.js

@@ -1,6 +1,6 @@
 import { writable } from 'svelte/store';
 import {} from 'remult';
-import { LibIcon_Add, LibIcon_Delete, LibIcon_Edit, LibIcon_Search, } from '../../internals';
+import { LibIcon_Add, LibIcon_Delete, LibIcon_Edit, LibIcon_Search } from '../LibIcon';
 const createDialogManagement = () => {
     const { subscribe, update } = writable([]);
     // internal...
@@ -18,7 +18,7 @@ const createDialogManagement = () => {
         confirm: (topic, text, icon) => {
             const detail = {
                 detail: {
-                    caption: 'Confirmez',
+                    caption: 'A Confirmer',
                     icon: { data: icon },
                 },
                 children: `

package/esm/ui/index.d.ts

@@ -3,3 +3,4 @@ import type { Cell } from '../internals';
 export type Align = 'text-left' | 'text-center' | 'text-right';
 export declare const align: (f?: FieldMetadata, isSlot?: boolean) => Align;
 export declare const getAligns: (cells: Cell<any>[], withAction: boolean) => Align[];
+export declare const baseTable = "overflow-x-auto rounded-box bg-base-300/60";

package/esm/ui/index.js

@@ -17,3 +17,4 @@ export const getAligns = (cells, withAction) => {
     }
     return cols;
 };
+export const baseTable = 'overflow-x-auto rounded-box bg-base-300/60';

package/esm/ui/internals/FieldContainer.svelte

@@ -1,20 +1,31 @@
 <script lang="ts">
 	import { tw } from '../../utils/tailwind'
 
-	export let label: string = 'label'
-	export let forId: string
-	export let required = false
-	export let error: string = ''
+	interface Props {
+		label?: string
+		forId: string
+		required?: boolean
+		error?: string
+		/**
+		 * example usage for paginate
+		 * classes={{ label: 'justify-end' }}
+		 */
+		classes?: { label?: string; slot?: string }
+		children?: import('svelte').Snippet
+	}
 
-	/**
-	 * example usage for paginate
-	 * classes={{ label: 'justify-end' }}
-	 */
-	export let classes: { label?: string; slot?: string } = {}
+	let {
+		label = 'label',
+		forId,
+		required = false,
+		error = '',
+		classes = {},
+		children,
+	}: Props = $props()
 </script>
 
-<div class="form-control w-full">
-	<label for={forId} class={tw(`label flex gap-1 px-2 pb-1`, classes.label)}>
+<fieldset class="fieldset w-full">
+	<label for={forId} class={tw(`label flex gap-1 px-2 justify-between`, classes.label)}>
 		<span class="label-text pl-2 text-xs text-base-content/60">
 			{label}{required ? ' *' : ''}
 		</span>
@@ -22,7 +33,7 @@
 			<span class="label-text-alt truncate text-error">{error}</span>
 		{/if}
 	</label>
-	<div class={tw('grid h-12 w-full', classes.slot)}>
-		<slot />
+	<div class={tw('grid h-12 w-full text-base', classes.slot)}>
+		{@render children?.()}
 	</div>
-</div>
+</fieldset>

package/esm/ui/internals/FieldContainer.svelte.d.ts

@@ -1,39 +1,18 @@
-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 FieldContainer: $$__sveltets_2_IsomorphicComponent<$$__sveltets_2_PropsWithChildren<{
+interface Props {
     label?: string;
     forId: string;
     required?: boolean;
     error?: string;
     /**
-         * example usage for paginate
-         * classes={{ label: 'justify-end' }}
-         */ classes?: {
+     * example usage for paginate
+     * classes={{ label: 'justify-end' }}
+     */
+    classes?: {
         label?: string;
         slot?: string;
     };
-}, {
-    default: {};
-}>, {
-    [evt: string]: CustomEvent<any>;
-}, {
-    default: {};
-}, {}, string>;
-type FieldContainer = InstanceType<typeof FieldContainer>;
+    children?: import('svelte').Snippet;
+}
+declare const FieldContainer: import("svelte").Component<Props, {}, "">;
+type FieldContainer = ReturnType<typeof FieldContainer>;
 export default FieldContainer;

package/esm/ui/internals/Input.svelte.d.ts

@@ -21,7 +21,7 @@ declare const Input: $$__sveltets_2_IsomorphicComponent<{
 }, {
     blur: FocusEvent;
     change: Event;
-    click: MouseEvent;
+    click: PointerEvent;
     focus: FocusEvent;
     keydown: KeyboardEvent;
     keypress: KeyboardEvent;

package/esm/ui/internals/Textarea.svelte

@@ -1,8 +1,6 @@
 <script lang="ts">
 	import { createEventDispatcher, onMount } from 'svelte'
 
-	import { scrollbar } from '../../internals/theme'
-
 	export let name: string | null = null
 	export let id = ''
 	export let rows = 4
@@ -50,10 +48,9 @@
 		use:focusNow
 		{...$$restProps}
 		class="shadow-neutral-focus md:rounded-xls
-			textarea textarea-bordered flex h-max min-h-8
+			textarea flex h-max min-h-8
 			w-full items-center rounded-lg bg-transparent text-xs
-			shadow-sm md:text-sm lg:min-h-[2.5rem]
-			{scrollbar.thin}"
+			shadow-sm md:text-sm lg:min-h-[2.5rem]"
 		id={id || name || 'default-textarea-id'}
 		{name}
 		{placeholder}

package/esm/ui/internals/select/MultiSelectMelt.svelte

@@ -97,6 +97,8 @@
 			const list = (v ?? []).map((c) => c.value.id)
 
 			// Create a map to count occurrences of each element
+			// TODO: switch to: Use SvelteMap instead  svelte/prefer-svelte-reactivity
+			// eslint-disable-next-line
 			const countMap: Map<string, number> = new Map()
 
 			list.forEach((item) => {
@@ -174,7 +176,7 @@
 	$: calcFilteredItems($touchedInput, $inputValue, values)
 </script>
 
-<div class="input input-bordered flex min-w-0 items-center">
+<div class="input flex min-w-0 items-center">
 	<div class="relative">
 		{#if iconToDisplayInInput($localSelected)}
 			{@const ico = iconToDisplayInInput($localSelected)}
@@ -186,7 +188,7 @@
 	<input
 		{...$input}
 		use:$input.action
-		class="-ml-8 -mr-5 h-full min-w-0 flex-grow bg-transparent px-10"
+		class="-mr-5 -ml-8 h-full min-w-0 flex-grow bg-transparent px-10"
 		{placeholder}
 	/>
 	<div class="pointer-events-none relative right-0 flex gap-2">
@@ -218,9 +220,9 @@
 					use:$option.action
 					class="relative flex cursor-pointer scroll-my-2 items-center rounded-md px-1
           py-2
+          data-[disabled]:opacity-50
           data-[highlighted]:bg-primary
-          data-[highlighted]:text-primary-content
-					data-[disabled]:opacity-50"
+					data-[highlighted]:text-primary-content"
 				>
 					{#if isChecked($localSelected, item)}
 						<Icon data={LibIcon_Check} class="w-6"></Icon>

package/esm/ui/internals/select/Select2.svelte

@@ -0,0 +1,88 @@
+<script lang="ts">
+	import Svelecte from 'svelecte'
+
+	import { LibIcon_Search, type BaseItem } from '../../../internals'
+	import Icon from '../../Icon.svelte'
+
+	interface Props {
+		value?: string | undefined
+		clearable?: boolean
+		items?: BaseItem[] | undefined
+		placeholder?: string | undefined
+
+		onChange?: (value: string | undefined) => void
+
+		multiple?: boolean
+	}
+
+	let {
+		value = $bindable(undefined),
+		clearable = false,
+		items = [],
+		placeholder = '',
+		multiple = false,
+		onChange,
+	}: Props = $props()
+</script>
+
+<Svelecte
+	i18n={{
+		nomatch: 'Aucun résultat',
+	}}
+	options={items}
+	bind:value
+	{clearable}
+	{placeholder}
+	{multiple}
+	{onChange}
+>
+	{#snippet prepend()}
+		{value}
+		<Icon data={LibIcon_Search} class="mr-2 ml-3"></Icon>
+	{/snippet}
+
+	{#snippet option(opt, inputValue)}
+		{@const item = opt as BaseItem}
+		<div class="flex items-center">
+			<Icon data={item.icon?.data} class="mr-2"></Icon>
+			{item.caption}
+		</div>
+	{/snippet}
+</Svelecte>
+
+<style>
+	:global(.svelecte) {
+		--sv-min-height: 3rem;
+		--sv-bg: var(--color-base-100, #fff);
+		--sv-disabled-bg: #eee;
+		--sv-border: 1px solid #414a54;
+		--sv-border-radius: var(--radius-field, 4px);
+		--sv-general-padding: 4px;
+		--sv-control-bg: var(--sv-bg);
+		--sv-item-wrap-padding: 3px 3px 3px 6px;
+		--sv-item-selected-bg: var(--color-base-200, #efefef);
+		--sv-item-btn-color: var(--color-base-content, #000);
+		--sv-item-btn-color-hover: #777; /* same as icon-color-hover in default theme */
+		--sv-item-btn-bg: var(--color-base-100, #efefef);
+		--sv-item-btn-bg-hover: var(--color-base-200, #ddd);
+		--sv-icon-color: var(--color-base-content, #efefef);
+		--sv-icon-color-hover: #777;
+		--sv-icon-bg: transparent;
+		--sv-icon-size: 20px;
+		--sv-separator-bg: var(--color-neutral-content, #ccc);
+		--sv-btn-border: 0;
+		--sv-placeholder-color: #ccccd6;
+		--sv-dropdown-bg: var(--sv-bg);
+		--sv-dropdown-offset: 1px;
+		--sv-dropdown-border: 1px solid rgba(0, 0, 0, 0.15);
+		--sv-dropdown-width: auto;
+		--sv-dropdown-shadow: 0 6px 12px #0000002d;
+		--sv-dropdown-height: 320px;
+		--sv-dropdown-active-bg: var(--color-primary, #f2f5f8);
+		--sv-dropdown-selected-bg: var(--color-neutral);
+		--sv-create-kbd-border: var(--border, 1px) solid var(--color-base-200, #efefef);
+		--sv-create-kbd-bg: var(--color-base-100, #fff);
+		--sv-create-disabled-bg: var(--color-error, #fcbaba);
+		--sv-loader-border: var(--border, 2px) solid var(--color-base-200, #ccc);
+	}
+</style>

package/esm/ui/internals/select/Select2.svelte.d.ts

@@ -0,0 +1,12 @@
+import { type BaseItem } from '../../../internals';
+interface Props {
+    value?: string | undefined;
+    clearable?: boolean;
+    items?: BaseItem[] | undefined;
+    placeholder?: string | undefined;
+    onChange?: (value: string | undefined) => void;
+    multiple?: boolean;
+}
+declare const Select2: import("svelte").Component<Props, {}, "value">;
+type Select2 = ReturnType<typeof Select2>;
+export default Select2;

package/esm/ui/internals/select/SelectMelt.svelte

@@ -165,7 +165,7 @@
 	$: calcFilteredItems($touchedInput, $inputValue, value)
 </script>
 
-<div class="input input-bordered flex min-w-0 items-center {disabled && 'opacity-40'}">
+<div class="input flex w-full min-w-0 items-center {disabled && 'opacity-40'}">
 	<div class="relative">
 		{#if $localSelected?.value?.icon?.data}
 			<Icon
@@ -182,7 +182,7 @@
 	<input
 		{...$input}
 		use:$input.action
-		class="-ml-8 -mr-5 h-full min-w-0 flex-grow bg-transparent px-10"
+		class="-mr-5 -ml-8 h-full min-w-0 flex-grow bg-transparent px-10"
 		{placeholder}
 		use:focusNow
 	/>
@@ -215,9 +215,9 @@
 					use:$option.action
 					class="relative flex cursor-pointer scroll-my-2 items-center rounded-md px-1
           py-2
+          data-[disabled]:opacity-50
           data-[highlighted]:bg-primary
-          data-[highlighted]:text-primary-content
-					data-[disabled]:opacity-50"
+					data-[highlighted]:text-primary-content"
 				>
 					{#if $localSelected?.value?.id === item.id}
 						<Icon data={LibIcon_Check} class="w-6"></Icon>
@@ -243,7 +243,7 @@
 						<div class="p-4">
 							<Button
 								class="w-full"
-								on:click={async () => {
+								onclick={async () => {
 									createRequest?.({ input: $inputValue, id })
 									$open = false
 								}}

package/esm/ui/internals/select/SelectRadio.svelte

@@ -17,7 +17,7 @@
 	}
 </script>
 
-<div {id} class="input input-bordered flex w-fit min-w-0 items-center">
+<div {id} class="input flex w-fit min-w-0 items-center">
 	<div class="-mx-2 flex gap-2" title={placeholder}>
 		{#each items as item}
 			<button

package/esm/ui/link/Link.svelte

@@ -12,7 +12,7 @@
 </script>
 
 <a
-	class={`${daisy[kind]} link inline-block text-left no-underline hover:underline ${className ?? ''}`}
+	class={`${daisy[kind]} inline-block link text-left no-underline hover:underline ${className ?? ''}`}
 	{href}
 	rel="noopener"
 	{target}

package/esm/ui/link/LinkPlus.svelte

@@ -4,9 +4,13 @@
 	import Tooltip from '../Tooltip.svelte'
 	import Link from './Link.svelte'
 
-	export let item: BaseItemLight | undefined
-	export let noIcon = false
-	export let captionSubStyle: 'under' | 'inline' | 'none' = 'under'
+	interface Props {
+		item: BaseItemLight | undefined
+		noIcon?: boolean
+		captionSubStyle?: 'under' | 'inline' | 'none'
+	}
+
+	let { item, noIcon = false, captionSubStyle = 'under' }: Props = $props()
 
 	const hasSomethingToDisplay = (item: BaseItemLight) => {
 		if (item.href) {
@@ -39,7 +43,7 @@
 					<div>
 						<Link href={item.href}>{item.caption}</Link>
 						{#if item.captionSub && captionSubStyle === 'inline'}
-							<span class="text-xs italic text-base-content/70">{item.captionSub}</span>
+							<span class="text-xs text-base-content/70 italic">{item.captionSub}</span>
 						{/if}
 					</div>
 				{:else}
@@ -51,7 +55,7 @@
 					</span>
 				{/if}
 				{#if item.captionSub && captionSubStyle === 'under'}
-					<span class="text-xs italic text-base-content/70">{item.captionSub}</span>
+					<span class="text-xs text-base-content/70 italic">{item.captionSub}</span>
 				{/if}
 			</div>
 		{/if}

package/esm/ui/link/LinkPlus.svelte.d.ts

@@ -1,23 +1,9 @@
 import { type BaseItemLight } 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;
-}
-declare const LinkPlus: $$__sveltets_2_IsomorphicComponent<{
+interface Props {
     item: BaseItemLight | undefined;
     noIcon?: boolean;
-    captionSubStyle?: "under" | "inline" | "none";
-}, {
-    [evt: string]: CustomEvent<any>;
-}, {}, {}, string>;
-type LinkPlus = InstanceType<typeof LinkPlus>;
+    captionSubStyle?: 'under' | 'inline' | 'none';
+}
+declare const LinkPlus: import("svelte").Component<Props, {}, "">;
+type LinkPlus = ReturnType<typeof LinkPlus>;
 export default LinkPlus;

package/esm/virtual/Customer.js

@@ -5,7 +5,6 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
     return c > 3 && r && Object.defineProperty(target, key, r), r;
 };
 import { Entity, Fields } from 'remult';
-import { FF_Fields } from '../internals/FF_Fields';
 let Customer = class Customer {
     id;
     name;
@@ -14,7 +13,7 @@ __decorate([
     Fields.id()
 ], Customer.prototype, "id", void 0);
 __decorate([
-    FF_Fields.string({ caption: 'Nom de la société', placeholder: 'Dynamic Process' })
+    Fields.string({ required: true, caption: 'Nom de la société', placeholder: 'Dynamic Process' })
 ], Customer.prototype, "name", void 0);
 Customer = __decorate([
     Entity('customers', {

package/esm/virtual/UIEntity.js

@@ -5,7 +5,6 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
     return c > 3 && r && Object.defineProperty(target, key, r), r;
 };
 import { Entity, Field, Fields } from 'remult';
-import { FF_Fields } from '../internals/FF_Fields.js';
 import { StateDemoEnum } from './StateDemoEnum.js';
 let UIEntity = class UIEntity {
     id;
@@ -39,19 +38,24 @@ __decorate([
     Fields.updatedAt()
 ], UIEntity.prototype, "updatedAt", void 0);
 __decorate([
-    FF_Fields.string({ caption: "Nom de l'utilisateur", placeholder: 'Jean-Yves', suffix: 'sdsd' })
+    Fields.string({
+        required: true,
+        caption: "Nom de l'utilisateur",
+        placeholder: 'Jean-Yves',
+        suffix: 'SUF!',
+    })
 ], UIEntity.prototype, "username", void 0);
 __decorate([
     Fields.string({ caption: 'E Mail', inputType: 'email', placeholder: 'prénom.nom@se.com' })
 ], UIEntity.prototype, "email", void 0);
 __decorate([
-    FF_Fields.string({
+    Fields.string({
         caption: 'Mot de passe',
         inputType: 'password',
         placeholder: '********',
         includeInApi: false,
         minLength: 6,
-        allowNull: false,
+        required: true,
     })
 ], UIEntity.prototype, "password", void 0);
 __decorate([
@@ -73,7 +77,7 @@ __decorate([
     Fields.date({ allowNull: true, allowApiUpdate: false })
 ], UIEntity.prototype, "arrivalDate", void 0);
 __decorate([
-    FF_Fields.dateOnly({ allowNull: true })
+    Fields.dateOnly({ allowNull: true })
 ], UIEntity.prototype, "arrivalDateOnly", void 0);
 UIEntity = __decorate([
     Entity('uiEntities', {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "firstly",
-  "version": "0.2.0",
+  "version": "0.2.1",
   "type": "module",
   "description": "Firstly, an opinionated Remult setup!",
   "funding": "https://github.com/sponsors/jycouet",
@@ -16,7 +16,7 @@
   },
   "peerDependencies": {
     "@sveltejs/kit": ">=1.0.0 <3.0.0",
-    "remult": ">=3.1.1",
+    "remult": ">=3.3.2",
     "svelte": ">=5"
   },
   "peerDependenciesMeta": {
@@ -40,18 +40,17 @@
     "@oslojs/crypto": "1.0.1",
     "@oslojs/encoding": "1.1.0",
     "@oslojs/otp": "1.1.0",
-    "@types/nodemailer": "6.4.17",
+    "@types/nodemailer": "7.0.2",
     "arctic": "3.7.0",
     "bcryptjs": "3.0.2",
     "clsx": "2.1.1",
-    "cron": "4.3.0",
-    "daisyui": "4.12.14",
+    "cron": "4.4.0",
+    "daisyui": "5.5.3",
     "esm-env": "1.2.2",
-    "mjml": "4.15.3",
     "nodemailer": "7.0.4",
-    "sailkit": "0.3.0",
+    "svelecte": "5.3.0",
     "tailwind-merge": "2.6.0",
-    "tailwindcss": "3.4.4",
+    "tailwindcss": "4.1.14",
     "vite-plugin-kit-routes": "1.0.2",
     "vite-plugin-stripper": "0.9.2"
   },

package/esm/auth/static/assets/Page-9Ytj29NS.js

@@ -1 +0,0 @@
-import{aa as e,U as o}from"./index-AoBb9Ds5.js";function f(a){var t=e("Hello from admin");o(a,t)}export{f as default};

package/esm/auth/static/assets/Page-C1pM-UDt.d.ts

@@ -1,2 +0,0 @@
-export { Bo as default };
-declare function Bo(i: any, e: any): void;