firstly 0.2.1 → 0.4.0

package/esm/ui/Field.svelte

@@ -1,382 +0,0 @@
-<script lang="ts" generics="T extends Record<any, any>">
-	import { createEventDispatcher } from 'svelte'
-	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'
-	import {
-		displayWithDefaultAndSuffix,
-		getEntityDisplayValue,
-		getFieldMetaType,
-		getFirstInterestingField,
-		type MetaTypeRelation,
-	} from '../internals/helper.js'
-	import { tw } from '../utils/tailwind'
-	import Clipboardable from './Clipboardable.svelte'
-	import Icon from './Icon.svelte'
-	import FieldContainer from './internals/FieldContainer.svelte'
-	import Input from './internals/Input.svelte'
-	import MultiSelectMelt from './internals/select/MultiSelectMelt.svelte'
-	import SelectMelt from './internals/select/SelectMelt.svelte'
-	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
-
-	// values of other fields in same context e.g. in form
-	export let cellsValues: any = {}
-
-	export let withDedounce: boolean = false
-
-	export let error = ''
-
-	export let mode: 'edit' | 'view' | 'filtre' = 'edit'
-
-	export let focus: boolean = false
-
-	export let clearable: boolean | undefined = undefined
-	export let disabled = false
-	export let createRequest: ((args: { input: string; id: string }) => void) | undefined = undefined
-
-	const dispatch = createEventDispatcher()
-
-	function dispatchSelected(_data: BaseItem | BaseItem[] | undefined) {
-		value = _data
-		dispatch('selected', _data)
-	}
-	$: metaType = getFieldMetaType(cell.field!, mode === 'filtre')
-
-	const isViewMode = (_mode: 'edit' | 'view' | 'filtre', _field?: FieldMetadata<any, any>) => {
-		return _mode === 'view' || _field?.dbReadOnly || _field?.options.allowApiUpdate === false
-	}
-
-	const common = (_field?: FieldMetadata<any, any>, isLight = false) => {
-		let toRet = {
-			id: _field?.key ?? 'SOMETHING_AT_LEAST',
-			disabled: _field?.dbReadOnly || _field?.options.allowApiUpdate === false || disabled,
-			placeholder: _field?.options?.placeholder ?? undefined,
-		}
-		if (isLight) {
-			return toRet
-		}
-		return {
-			...toRet,
-			step: _field?.options?.step ?? undefined,
-			name: _field?.key,
-			// required: _field?.allowNull === false,
-		}
-	}
-
-	const toInput = (_metadata?: FieldMetadata<any, any>, _value?: HTMLInputAttributes['value']) => {
-		try {
-			return _metadata?.valueConverter.toInput(_value, metaType.subKind)
-		} catch (error) {
-			console.error(`error toInput w field '${_metadata?.key}'`, error)
-		}
-	}
-
-	const fromInput = (_metadata: FieldMetadata<any, any>, _value: HTMLInputAttributes['value']) => {
-		try {
-			// REMULT default for numbers ?
-			if (_metadata.allowNull && _value === null) {
-				return null
-			}
-			return _metadata?.valueConverter.fromInput(_value, metaType.subKind)
-		} catch (error) {
-			console.error(`error fromInput w field '${_metadata.key}'`, error)
-		}
-	}
-
-	// let items: any[] = []
-
-	const getId = () => {
-		return value?.id || value
-	}
-
-	const getLoadOptions = async (cellsValues: any, str: string) => {
-		if (metaType.kind !== 'relation') {
-			return { items: [], totalCount: 0 }
-		}
-		// To make TS happy
-		const metaTypeObj = { ...metaType } as MetaTypeRelation
-
-		let findToUse: FindOptions<any> = {}
-		if (metaTypeObj.repoTarget.metadata.options.searchableFind) {
-			// narrowFind at the end because searchableFind should not change the narrowed part!
-			findToUse = metaTypeObj.repoTarget.metadata.options.searchableFind(str)
-		} else {
-			if (str) {
-				const field = getFirstInterestingField(metaTypeObj.repoTarget)
-				findToUse = { where: { [field.key]: { $contains: str } } }
-			}
-		}
-
-		const foEdit = cell.field?.options.findOptionsForEdit
-		const narrowFindEditWhere =
-			typeof foEdit === 'function'
-				? (foEdit(cellsValues).where ?? {})
-				: typeof foEdit === 'object'
-					? (foEdit.where ?? {})
-					: {}
-
-		// @ts-ignore
-		const foCrud = cell.field?.options.findOptions
-		const narrowFindCrudWhere =
-			typeof foCrud === 'function'
-				? (foCrud().where ?? {})
-				: typeof foCrud === 'object'
-					? (foCrud.where ?? {})
-					: {}
-
-		findToUse = {
-			include: { ...(findToUse.include ?? {}) },
-			where: { $and: [findToUse.where, narrowFindEditWhere, narrowFindCrudWhere] },
-		}
-
-		// 24 here is a "magic number"!
-		let limit = cell.field?.options.findOptionsLimit ?? 24
-
-		const arr = []
-		arr.push(
-			...(await metaTypeObj.repoTarget.find({
-				...findToUse,
-				limit,
-			})),
-		)
-
-		let totalCount = arr.length
-		// If we are at the limit... there is probably more! How many?
-		if (totalCount === limit) {
-			const agg = await metaTypeObj.repoTarget.aggregate({ where: findToUse.where })
-			totalCount = agg.$count
-		}
-
-		if (!cell.field?.options.multiSelect) {
-			// let's get the current item if it's not in the default list (only when there is no searchFilter going on)
-			if (str === '' && getId() && !arr.find((r) => String(r.id) === String(getId()))) {
-				arr.unshift(await metaTypeObj.repoTarget.findId(getId()))
-			}
-		}
-
-		return { items: arr.map((r) => getEntityDisplayValue(metaTypeObj.repoTarget, r)), totalCount }
-	}
-
-	const getMultiValues = (value: any) => {
-		return (value ?? []).map((c: any) => c.id) || value
-	}
-
-	const calcSuffix = (value: any) => {
-		if (cell.field?.options.suffixEdit) {
-			if (cell.field?.options.suffixEditWithS) {
-				return suffixWithS(value, cell.field?.options.suffixEdit)
-			} else {
-				return cell.field?.options.suffixEdit
-			}
-		}
-
-		if (cell.field?.options.suffix) {
-			if (cell.field?.options.suffixWithS) {
-				return suffixWithS(value, cell.field?.options.suffix)
-			} else {
-				return cell.field?.options.suffix
-			}
-		}
-
-		return ''
-	}
-
-	let textpsdVisible = false
-</script>
-
-<FieldContainer
-	forId={cell.field?.key ?? ''}
-	label={cell?.header ?? cell.field?.caption ?? cell.field?.key}
-	required={!cell.field?.allowNull && mode === 'edit' && metaType.subKind !== 'checkbox'}
-	{error}
-	classes={{ slot: metaType.subKind === 'textarea' ? 'h-24 items-start' : '' }}
->
-	{@const clearableComputed =
-		cell.clearable || clearable || (mode === 'filtre' && clearable === undefined)}
-	{#if isViewMode(mode, cell.field)}
-		<span class="flex items-center pr-4 pl-2">
-			{#if cell.field?.inputType === 'checkbox'}
-				<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')}>
-					<LinkPlus {item}></LinkPlus>
-				</div>
-			{:else if metaType.kind === 'enum'}
-				{@const v = displayWithDefaultAndSuffix(cell.field, value)}
-				<div class="ml-2 flex h-12 items-center gap-4">
-					{#if value?.icon}
-						<Icon {...value.icon} />
-					{/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 pb-2 flex h-12 w-full items-center {metaType.subKind === 'number' ? 'justify-end' : ''}"
-				>
-					<Clipboardable value={v}>{v}</Clipboardable>
-				</div>
-			{/if}
-		</span>
-	{:else if metaType.kind === 'relation'}
-		{#if metaType.field.options.multiSelect}
-			<MultiSelectMelt
-				{...common(cell.field, true)}
-				clearable={clearableComputed}
-				loadOptions={async (str) => await getLoadOptions(cellsValues, str)}
-				values={value}
-				on:selected={(e) => dispatchSelected(e.detail)}
-			/>
-		{:else}
-			<!-- {items} -->
-			<SelectMelt
-				{focus}
-				{...common(cell.field, true)}
-				clearable={clearableComputed}
-				loadOptions={async (str) => await getLoadOptions(cellsValues, str)}
-				value={value?.id || value}
-				on:selected={(e) => dispatchSelected(e.detail)}
-				on:issue={(e) => {
-					error = e.detail
-				}}
-				createOptionWhenNoResult={!!cell.field?.options.createOptionWhenNoResult}
-				{createRequest}
-				default_select_if_one_item={!!cell.field?.options.default_select_if_one_item}
-			/>
-		{/if}
-	{:else if metaType.kind === 'enum'}
-		{#if metaType.field.options.multiSelect || metaType.subKind === 'multi'}
-			<MultiSelectMelt
-				{...common(cell.field, true)}
-				clearable={clearableComputed}
-				items={metaType.values}
-				values={getMultiValues(value)}
-				on:selected={(e) => {
-					dispatchSelected(e.detail)
-				}}
-			/>
-		{:else if metaType.values.length <= (cell.field?.options.styleRadioUntil ?? 3) && !clearableComputed}
-			<SelectRadio
-				{...common(cell.field, true)}
-				items={metaType.values}
-				value={value?.id || value}
-				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)}
-				clearable={clearableComputed}
-				items={metaType.values}
-				value={value?.id || value}
-				on:selected={(e) => dispatchSelected(e.detail)}
-				on:issue={(e) => {
-					error = e.detail
-				}}
-			/>
-		{/if}
-	{:else if metaType.subKind === 'checkbox'}
-		<div class="grid content-center items-center pl-4 pb-2">
-			<input
-				type="checkbox"
-				{...{ ...common(cell.field), required: undefined }}
-				class="checkbox"
-				checked={value}
-				on:input={(e) => {
-					// @ts-ignore
-					value = e.target.checked
-					dispatchSelected(value)
-				}}
-			/>
-		</div>
-	{: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 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('textpsd', 'text').replaceAll('link', 'text')}
-				value={toInput(cell.field, value)}
-				{withDedounce}
-				on:input={(e) => {
-					// @ts-ignore
-					value = fromInput(cell.field, e.detail.value)
-					dispatchSelected(value)
-				}}
-				{...$$restProps}
-			/>
-			{calcSuffix(value)}
-			{#if cell.field?.inputType === 'textpsd'}
-				<button
-					on:click={(e) => {
-						e.preventDefault()
-						textpsdVisible = !textpsdVisible
-					}}
-					class="btn-ghost btn-sm"
-				>
-					<Icon data={textpsdVisible ? LibIcon_Eye : LibIcon_EyeOff} />
-				</button>
-			{/if}
-		</div>
-	{:else if metaType.subKind === 'textarea'}
-		<Textarea
-			{focus}
-			{...common(cell.field)}
-			value={toInput(cell.field, value)}
-			on:input={(e) => {
-				// @ts-ignore
-				value = fromInput(cell.field, e.detail.value)
-			}}
-		/>
-	{:else}
-		<!-- This shoud NEVER be displayed -->
-		<span class="flex items-center pl-2 text-error">Type "{cell.field?.inputType}" not managed!</span>
-	{/if}
-</FieldContainer>

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

@@ -1,40 +0,0 @@
-import type { HTMLInputAttributes } from 'svelte/elements';
-import { type Cell } from '../internals';
-declare class __sveltets_Render<T extends Record<any, any>> {
-    props(): {
-        [x: string]: any;
-        cell: Cell<T>;
-        value?: HTMLInputAttributes["value"];
-        cellsValues?: any;
-        withDedounce?: boolean | undefined;
-        error?: string | undefined;
-        mode?: "edit" | "view" | "filtre" | undefined;
-        focus?: boolean | undefined;
-        clearable?: boolean | undefined | undefined;
-        disabled?: boolean | undefined;
-        createRequest?: ((args: {
-            input: string;
-            id: string;
-        }) => void) | undefined;
-    };
-    events(): {
-        selected: CustomEvent<any>;
-    } & {
-        [evt: string]: CustomEvent<any>;
-    };
-    slots(): {};
-    bindings(): string;
-    exports(): {};
-}
-interface $$IsomorphicComponent {
-    new <T extends Record<any, any>>(options: import('svelte').ComponentConstructorOptions<ReturnType<__sveltets_Render<T>['props']>>): 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']>;
-    }): ReturnType<__sveltets_Render<T>['exports']>;
-    z_$$bindings?: ReturnType<__sveltets_Render<any>['bindings']>;
-}
-declare const Field: $$IsomorphicComponent;
-type Field<T extends Record<any, any>> = InstanceType<typeof Field<T>>;
-export default Field;

package/esm/ui/FieldGroup.svelte

@@ -1,117 +0,0 @@
-<script lang="ts" generics="T extends Record<any, any>">
-	import { createEventDispatcher } from 'svelte'
-
-	import type { FieldMetadata } from 'remult'
-	import { getRelationFieldInfo } from 'remult/internals'
-
-	import { tw, type StoreItem } from '../internals'
-	import type { Cell } from '../internals/cellsBuildor'
-	import Field from './Field.svelte'
-	import FieldContainer from './internals/FieldContainer.svelte'
-	import Loading from './Loading.svelte'
-
-	type Mode = 'edit' | 'view' | 'filtre'
-	export let mode: Mode = 'edit'
-
-	export let cells: Cell<T>[]
-	export let store: StoreItem<T>
-
-	export let focusKey: string | null | undefined = null
-	export let createRequest: ((args: { input: string; id: string }) => void) | undefined = undefined
-
-	const getError = (errors: any, field: FieldMetadata<any, any>) => {
-		const fo = getRelationFieldInfo(field)
-		const keyToUse = fo?.options?.field
-		if (errors && keyToUse && errors[keyToUse]) {
-			return errors[keyToUse]
-		} else if (errors && errors[field.key]) {
-			return errors[field.key]
-		}
-		return undefined
-	}
-
-	const shouldHide = (c: Cell<T>, mode: Mode) => {
-		if (mode === 'edit' && c.modeEdit === 'hide') {
-			return true
-		}
-		if (mode === 'view' && c.modeView === 'hide') {
-			return true
-		}
-		return false
-	}
-
-	const modeToUse = (c: Cell<T>, mode: Mode) => {
-		if (mode === 'edit' && c.modeEdit === 'view') {
-			return 'view'
-		}
-		if (mode === 'view' && c.modeView === 'edit') {
-			return 'edit'
-		}
-		return mode
-	}
-
-	const dispatch = createEventDispatcher()
-
-	function dispatchChanged(_data: T | undefined) {
-		dispatch('changed', _data)
-	}
-
-	$: dispatchChanged($store.item)
-
-	let size = ['', 'w-1/2', 'w-1/3', 'w-1/4', 'w-1/5', 'w-1/6']
-
-	function isToFocus(
-		currentKey: string | undefined,
-		focusKey: string | null | undefined,
-		i: number,
-	): boolean {
-		if (focusKey === null || focusKey === undefined) {
-			if (i === 0) {
-				return true
-			}
-			return false
-		}
-		return focusKey === currentKey
-	}
-</script>
-
-{#each cells as cell, i}
-	{@const focus = isToFocus(cell.field?.key, focusKey, i)}
-	{#if shouldHide(cell, mode)}
-		<!-- Do nothing -->
-	{:else if cell.field && !cell.field.includedInApi($store.item)}
-		<!-- Do nothing, but keep the class... -->
-		<div class={cell.class}></div>
-	{:else}
-		<div class={cell.class}>
-			{#if cell.kind === 'header'}
-				<span>{cell.header}</span>
-			{:else if cell.field && (!$store || $store.loading)}
-				<!-- If the store is not ready mdiYeast, or in loading... -->
-				<FieldContainer label={cell.field.caption} forId={cell.field.key}>
-					<Loading
-						class={tw(
-							`mx-4 my-3 h-6`,
-							size[parseInt((((i + 1) * Math.random() * size.length) % size.length).toString())],
-						)}
-					/>
-				</FieldContainer>
-			{:else if cell.kind === 'slot'}
-				<slot name="field" field={cell.field} {focus} />
-			{:else if cell.field && $store.item}
-				<Field
-					mode={modeToUse(cell, mode)}
-					{cell}
-					cellsValues={$store.item}
-					bind:value={$store.item[cell.field.key]}
-					error={getError($store.errors, cell.field)}
-					{focus}
-					{createRequest}
-				/>
-				<!-- disabled={isDisableFieldDynamic(cell)} -->
-			{:else}
-				FieldGroup : Case not handled
-			{/if}
-		</div>
-	{/if}
-{/each}

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

@@ -1,44 +0,0 @@
-import type { FieldMetadata } from 'remult';
-import { type StoreItem } from '../internals';
-import type { Cell } from '../internals/cellsBuildor';
-declare class __sveltets_Render<T extends Record<any, any>> {
-    props(): {
-        mode?: "view" | "edit" | "filtre";
-        cells: Cell<T>[];
-        store: StoreItem<T>;
-        focusKey?: string | null | undefined;
-        createRequest?: ((args: {
-            input: string;
-            id: string;
-        }) => void) | undefined;
-    };
-    events(): {
-        changed: CustomEvent<any>;
-    } & {
-        [evt: string]: CustomEvent<any>;
-    };
-    slots(): {
-        field: {
-            field: FieldMetadata<any, T> | undefined;
-            focus: typeof focus;
-        };
-    };
-    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 FieldGroup: $$IsomorphicComponent;
-type FieldGroup<T extends Record<any, any>> = InstanceType<typeof FieldGroup<T>>;
-export default FieldGroup;