firstly 0.0.1 → 0.0.3

package/esm/ui/Button.svelte

@@ -0,0 +1,102 @@
+<script>import { createTooltip } from "@melt-ui/svelte";
+import { fade, fly } from "svelte/transition";
+import { remult } from "remult";
+import { KitBaseEnum, tw } from "../";
+export let isLoading = false;
+let className = void 0;
+export { className as class };
+export let permission = void 0;
+let permissionDisabled = false;
+$:
+  disabled = $$restProps.disabled || permissionDisabled || isLoading;
+let triggerAnnimation = false;
+$:
+  isLoading && setTimeout(() => {
+    if (isLoading) {
+      triggerAnnimation = true;
+    }
+  }, 200);
+let updates = (param) => {
+  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 = "";
+  }
+};
+let disabledWhy = "";
+const isAllowed = (node, param) => {
+  updates(param);
+  return {
+    update(param2) {
+      updates(param2);
+    },
+    destroy() {
+    }
+  };
+};
+const {
+  elements: { trigger, content, arrow },
+  states: { open }
+} = createTooltip({
+  positioning: {
+    placement: "top"
+  },
+  openDelay: 0,
+  closeDelay: 0,
+  closeOnPointerDown: false,
+  forceVisible: true,
+  escapeBehavior: "close",
+  group: true
+});
+</script>
+
+<button
+  {...$trigger}
+  use:trigger
+  use:isAllowed={{ permission }}
+  on:click
+  {...$$restProps}
+  class={tw(['btn text-white', disabled ? '' : 'btn-primary', className])}
+  {disabled}
+>
+  <!-- btn-outline -->
+  <slot />
+  {#if triggerAnnimation && isLoading}
+    <div in:fly={{ x: -20 }}>
+      <span class="loading loading-spinner"></span>
+    </div>
+  {/if}
+</button>
+
+{#if $open && (disabledWhy || $$slots.tooltip)}
+  <div
+    {...$content}
+    use:content
+    transition:fade={{ duration: 100 }}
+    class="bg-base-300 z-30 rounded-lg ring-1 ring-black"
+  >
+    <div {...$arrow} use:arrow />
+    <div class="px-4 py-1">
+      {#if $$slots.tooltip}
+        <slot name="tooltip" />
+      {:else}
+        {disabledWhy}
+      {/if}
+    </div>
+  </div>
+{/if}
+
+<style>
+  .btn[disabled] {
+    pointer-events: all;
+    cursor: not-allowed;
+  }
+</style>

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

@@ -0,0 +1,27 @@
+import { SvelteComponent } from "svelte";
+import { KitBaseEnum } from '../';
+declare const __propDef: {
+    props: {
+        [x: string]: any;
+        isLoading?: boolean | undefined;
+        class?: string | undefined | null;
+        permission?: KitBaseEnum[] | KitBaseEnum | undefined;
+    };
+    events: {
+        click: MouseEvent;
+    } & {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {
+        default: {};
+        tooltip: {};
+    };
+    exports?: undefined;
+    bindings?: undefined;
+};
+export type ButtonProps = typeof __propDef.props;
+export type ButtonEvents = typeof __propDef.events;
+export type ButtonSlots = typeof __propDef.slots;
+export default class Button extends SvelteComponent<ButtonProps, ButtonEvents, ButtonSlots> {
+}
+export {};

package/esm/ui/Clipboardable.svelte

@@ -0,0 +1,19 @@
+<script>export let value;
+export { extraClass as class };
+let extraClass = "";
+function clip(_value) {
+  if (_value) {
+    navigator.clipboard.writeText(_value);
+  }
+}
+</script>
+
+<span
+  role="button"
+  tabindex="0"
+  on:keyup={() => {}}
+  on:click={() => clip(value)}
+  class={`${value ? 'cursor-copy' : ''} ${extraClass}`}
+>
+  <slot />
+</span>

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

@@ -0,0 +1,25 @@
+import { SvelteComponent } from "svelte";
+declare const __propDef: {
+    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 | undefined;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {
+        default: {};
+    };
+    exports?: {} | undefined;
+    bindings?: string | undefined;
+};
+export type ClipboardableProps = typeof __propDef.props;
+export type ClipboardableEvents = typeof __propDef.events;
+export type ClipboardableSlots = typeof __propDef.slots;
+export default class Clipboardable extends SvelteComponent<ClipboardableProps, ClipboardableEvents, ClipboardableSlots> {
+}
+export {};

package/esm/ui/Field.svelte

@@ -0,0 +1,288 @@
+<script generics="T extends Record<any, any>">import { createEventDispatcher } from "svelte";
+import {} from "remult";
+import {} from "../";
+import { suffixWithS } from "../formats/strings";
+import {
+  displayWithDefaultAndSuffix,
+  getEntityDisplayValue,
+  getFieldMetaType,
+  getFirstInterestingField
+} from "../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";
+export let cell;
+export let value = void 0;
+export let cellsValues = {};
+export let withDedounce = false;
+export let error = "";
+export let mode = "edit";
+export let focus = false;
+export let clearable = void 0;
+export let disabled = false;
+const dispatch = createEventDispatcher();
+function dispatchSelected(_data) {
+  value = _data;
+  dispatch("selected", _data);
+}
+$:
+  metaType = getFieldMetaType(cell.field);
+const isViewMode = (_mode, _field) => {
+  return _mode === "view" || _field?.dbReadOnly || _field?.options.allowApiUpdate === false;
+};
+const common = (_field, isLight = false) => {
+  let toRet = {
+    id: _field?.key ?? "SOMETHING_AT_LEAST",
+    disabled: _field?.dbReadOnly || _field?.options.allowApiUpdate === false || disabled,
+    placeholder: _field?.options?.placeholder ?? void 0
+  };
+  if (isLight) {
+    return toRet;
+  }
+  return {
+    ...toRet,
+    step: _field?.options?.step ?? void 0,
+    name: _field?.key
+    // required: _field?.allowNull === false,
+  };
+};
+const toInput = (_metadata, _value) => {
+  try {
+    return _metadata?.valueConverter.toInput(_value, metaType.subKind);
+  } catch (error2) {
+    console.error(`error toInput w field '${_metadata?.key}'`, error2);
+  }
+};
+const fromInput = (_metadata, _value) => {
+  try {
+    if (metaType.subKind === "number" && _value === 0) {
+      return 0;
+    }
+    const val = _metadata?.valueConverter.fromInput(_value, metaType.subKind);
+    return val;
+  } catch (error2) {
+    console.error(`error fromInput w field '${_metadata.key}'`, error2);
+  }
+};
+const getId = () => {
+  return value?.id || value;
+};
+const getLoadOptions = async (cellsValues2, str) => {
+  if (metaType.kind !== "relation") {
+    return { items: [], totalCount: 0 };
+  }
+  const metaTypeObj = { ...metaType };
+  let findToUse = {};
+  if (metaTypeObj.repoTarget.metadata.options.searchableFind) {
+    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(cellsValues2).where ?? {} : typeof foEdit === "object" ? foEdit.where ?? {} : {};
+  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] }
+  };
+  let limit = cell.field?.options.findOptionsLimit ?? 24;
+  const arr = [];
+  arr.push(
+    ...await metaTypeObj.repoTarget.find({
+      ...findToUse,
+      limit
+    })
+  );
+  let totalCount = arr.length;
+  if (totalCount === limit) {
+    totalCount = await metaTypeObj.repoTarget.count(findToUse.where);
+  }
+  if (!cell.field?.options.multiSelect) {
+    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 = (value2) => {
+  return (value2 ?? []).map((c) => c.id) || value2;
+};
+const calcSuffix = (value2) => {
+  if (cell.field?.options.suffixEdit) {
+    if (cell.field?.options.suffixEditWithS) {
+      return suffixWithS(value2, cell.field?.options.suffixEdit);
+    } else {
+      return cell.field?.options.suffixEdit;
+    }
+  }
+  if (cell.field?.options.suffix) {
+    if (cell.field?.options.suffixWithS) {
+      return suffixWithS(value2, cell.field?.options.suffix);
+    } else {
+      return cell.field?.options.suffix;
+    }
+  }
+  return "";
+};
+</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-32 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')}>
+          {#if item && item?.icon}
+            <Icon {...item.icon} />
+          {/if}
+          <span>{cell?.header ?? item?.caption ?? '-'}</span>
+        </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"
+        bind:checked={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

@@ -0,0 +1,29 @@
+import { SvelteComponent } from "svelte";
+import { type KitCell } from '../';
+declare class __sveltets_Render<T extends Record<any, any>> {
+    props(): {
+        [x: string]: any;
+        cell: KitCell<T>;
+        value?: any;
+        cellsValues?: any;
+        withDedounce?: boolean | undefined;
+        error?: string | undefined;
+        mode?: "view" | "edit" | "filtre" | undefined;
+        focus?: boolean | undefined;
+        clearable?: boolean | undefined;
+        disabled?: boolean | undefined;
+    };
+    events(): {
+        createRequest: CustomEvent<any>;
+        selected: CustomEvent<any>;
+    } & {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots(): {};
+}
+export type FieldProps<T extends Record<any, any>> = ReturnType<__sveltets_Render<T>['props']>;
+export type FieldEvents<T extends Record<any, any>> = ReturnType<__sveltets_Render<T>['events']>;
+export type FieldSlots<T extends Record<any, any>> = ReturnType<__sveltets_Render<T>['slots']>;
+export default class Field<T extends Record<any, any>> extends SvelteComponent<FieldProps<T>, FieldEvents<T>, FieldSlots<T>> {
+}
+export {};

package/esm/ui/FieldGroup.svelte

@@ -0,0 +1,91 @@
+<script generics="T extends Record<any, any>">import { createEventDispatcher } from "svelte";
+import { getRelationFieldInfo } from "remult/internals";
+import { tw } from "..";
+import Field from "./Field.svelte";
+import FieldContainer from "./internals/FieldContainer.svelte";
+import Loading from "./Loading.svelte";
+export let mode = "edit";
+export let cells;
+export let store;
+export let focusKey = null;
+const getError = (errors, field) => {
+  const fo = getRelationFieldInfo(field);
+  const keyToUse = fo?.options?.field ?? field.key;
+  if (errors && errors[keyToUse]) {
+    return errors[keyToUse];
+  }
+  return void 0;
+};
+const shouldHide = (c, mode2) => {
+  if (mode2 === "edit" && c.modeEdit === "hide") {
+    return true;
+  }
+  if (mode2 === "view" && c.modeView === "hide") {
+    return true;
+  }
+  return false;
+};
+const modeToUse = (c, mode2) => {
+  if (mode2 === "edit" && c.modeEdit === "view") {
+    return "view";
+  }
+  if (mode2 === "view" && c.modeView === "edit") {
+    return "edit";
+  }
+  return mode2;
+};
+const dispatch = createEventDispatcher();
+function dispatchChanged(_data) {
+  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, focusKey2, i) {
+  if (focusKey2 === null || focusKey2 === void 0) {
+    if (i === 0) {
+      return true;
+    }
+    return false;
+  }
+  return focusKey2 === currentKey;
+}
+</script>
+
+{#each cells as cell, i}
+  {@const focus = isToFocus(cell.field?.key, focusKey, i)}
+  {#if shouldHide(cell, mode)}
+    <!-- Do nothing -->
+  {: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}

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

@@ -0,0 +1,30 @@
+import { SvelteComponent } from "svelte";
+import type { FieldMetadata } from 'remult';
+import { type KitStoreItem } from '..';
+import type { KitCell } from '../kitCellsBuildor';
+declare class __sveltets_Render<T extends Record<any, any>> {
+    props(): {
+        mode?: ("view" | "edit" | "filtre") | undefined;
+        cells: KitCell<T>[];
+        store: KitStoreItem<T>;
+        focusKey?: string | null | undefined;
+    };
+    events(): {
+        createRequest: CustomEvent<any>;
+        changed: CustomEvent<any>;
+    } & {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots(): {
+        field: {
+            field: FieldMetadata<any, T> | undefined;
+            focus: typeof focus;
+        };
+    };
+}
+export type FieldGroupProps<T extends Record<any, any>> = ReturnType<__sveltets_Render<T>['props']>;
+export type FieldGroupEvents<T extends Record<any, any>> = ReturnType<__sveltets_Render<T>['events']>;
+export type FieldGroupSlots<T extends Record<any, any>> = ReturnType<__sveltets_Render<T>['slots']>;
+export default class FieldGroup<T extends Record<any, any>> extends SvelteComponent<FieldGroupProps<T>, FieldGroupEvents<T>, FieldGroupSlots<T>> {
+}
+export {};