firstly 0.0.11 → 0.0.13

package/esm/ui/Field.svelte

@@ -61,6 +61,9 @@ const toInput = (_metadata, _value) => {
 };
 const fromInput = (_metadata, _value) => {
   try {
+    if (_metadata.allowNull && _value === null) {
+      return null;
+    }
     return _metadata?.valueConverter.fromInput(_value, metaType.subKind);
   } catch (error2) {
     console.error(`error fromInput w field '${_metadata.key}'`, error2);
@@ -134,154 +137,144 @@ const calcSuffix = (value2) => {
 </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' : '' }}
+	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="input-bordered flex items-center pl-2 pr-4">
-      {#if cell.field?.inputType === 'checkbox'}
-        <input
-          type="checkbox"
-          {...common(cell.field)}
-          class="checkbox ml-2"
-          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}
-        {@const v = displayWithDefaultAndSuffix(cell.field, value)}
-        <div
-          class="ml-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}
-        on:createRequest
-      />
-    {/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}
-      <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">
-      <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 === 'dateOnly' || metaType.subKind === 'number'}
-    <div class="input input-bordered inline-flex w-full items-center pl-2">
-      <Input
-        {focus}
-        {...common(cell.field)}
-        autocomplete="off"
-        class={tw(
-          `join-item placeholder:text-base-content/30 w-full bg-transparent`,
-          metaType.subKind === 'number' && 'text-end',
-        )}
-        type={metaType.subKind.replaceAll('dateOnly', 'date')}
-        value={toInput(cell.field, value)}
-        {withDedounce}
-        on:input={(e) => {
-          // @ts-ignore
-          value = fromInput(cell.field, e.detail.value)
-          dispatchSelected(value)
-        }}
-        {...$$restProps}
-      />
-      {calcSuffix(value)}
-    </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="text-error flex items-center pl-2"
-      >Type "{cell.field?.inputType}" not managed!</span
-    >
-  {/if}
+	{@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">
+			{#if cell.field?.inputType === 'checkbox'}
+				<input type="checkbox" {...common(cell.field)} class="checkbox ml-2" 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}
+				{@const v = displayWithDefaultAndSuffix(cell.field, value)}
+				<div
+					class="ml-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}
+				on:createRequest
+			/>
+		{/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}
+			<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">
+			<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 === 'dateOnly' || metaType.subKind === 'number'}
+		<div class="input input-bordered inline-flex w-full items-center pl-2">
+			<Input
+				{focus}
+				{...common(cell.field)}
+				autocomplete="off"
+				class={tw(
+					`join-item placeholder:text-base-content/30 w-full bg-transparent`,
+					metaType.subKind === 'number' && 'text-end',
+				)}
+				type={metaType.subKind.replaceAll('dateOnly', 'date')}
+				value={toInput(cell.field, value)}
+				{withDedounce}
+				on:input={(e) => {
+					// @ts-ignore
+					value = fromInput(cell.field, e.detail.value)
+					dispatchSelected(value)
+				}}
+				{...$$restProps}
+			/>
+			{calcSuffix(value)}
+		</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="text-error flex items-center pl-2">Type "{cell.field?.inputType}" not managed!</span>
+	{/if}
 </FieldContainer>

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

@@ -9,9 +9,9 @@ declare class __sveltets_Render<T extends Record<any, any>> {
         cellsValues?: any;
         withDedounce?: boolean | undefined;
         error?: string | undefined;
-        mode?: ("edit" | "view" | "filtre") | undefined;
+        mode?: "edit" | "view" | "filtre" | undefined;
         focus?: boolean | undefined;
-        clearable?: boolean | undefined;
+        clearable?: boolean | undefined | undefined;
         disabled?: boolean | undefined;
     };
     events(): {

package/esm/ui/FieldGroup.svelte

@@ -54,42 +54,42 @@ function isToFocus(currentKey, focusKey2, i) {
 </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}
-          on:createRequest
-        />
-        <!-- disabled={isDisableFieldDynamic(cell)} -->
-      {:else}
-        FieldGroup : Case not handled
-      {/if}
-    </div>
-  {/if}
+	{@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}
+					on:createRequest
+				/>
+				<!-- disabled={isDisableFieldDynamic(cell)} -->
+			{:else}
+				FieldGroup : Case not handled
+			{/if}
+		</div>
+	{/if}
 {/each}