firstly 0.0.1 → 0.0.2

package/esm/ui/Tooltip.svelte

@@ -0,0 +1,42 @@
+<script>import { createTooltip } from "@melt-ui/svelte";
+import { fade } from "svelte/transition";
+export let text = "";
+export let hideTooltip = false;
+const {
+  elements: { trigger, content, arrow },
+  states: { open }
+} = createTooltip({
+  positioning: {
+    placement: "top"
+  },
+  openDelay: 0,
+  closeDelay: 0,
+  closeOnPointerDown: false,
+  forceVisible: true,
+  escapeBehavior: "close",
+  group: true
+  // disableHoverableContent: true,
+});
+</script>
+
+<button type="button" class="trigger" {...$trigger} use:trigger aria-label="Add">
+  <slot />
+</button>
+<!-- {hideTooltip} -->
+{#if $open && !hideTooltip && (text || $$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}
+        {text}
+      {/if}
+    </div>
+  </div>
+{/if}

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

@@ -0,0 +1,22 @@
+import { SvelteComponent } from "svelte";
+declare const __propDef: {
+    props: {
+        text?: string | undefined;
+        hideTooltip?: boolean | undefined;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {
+        default: {};
+        tooltip: {};
+    };
+    exports?: {} | undefined;
+    bindings?: string | undefined;
+};
+export type TooltipProps = typeof __propDef.props;
+export type TooltipEvents = typeof __propDef.events;
+export type TooltipSlots = typeof __propDef.slots;
+export default class Tooltip extends SvelteComponent<TooltipProps, TooltipEvents, TooltipSlots> {
+}
+export {};

package/esm/ui/dialog/DialogForm.svelte

@@ -0,0 +1,70 @@
+<script>import { FieldGroup, kitStoreItem } from "../..";
+import { kitCellsBuildor } from "../../kitCellsBuildor";
+import { dialog } from "./dialog";
+import DialogPrimitive from "./DialogPrimitive.svelte";
+import FormEditAction from "./FormEditAction.svelte";
+export let toShow;
+$:
+  cells = kitCellsBuildor(toShow.repo, toShow.cells);
+$:
+  store = toShow.store ?? kitStoreItem(toShow.repo);
+$: {
+  if (toShow.type === "update" || toShow.type === "view") {
+    store.set({ item: toShow.defaults, errors: {}, loading: false, globalError: void 0 });
+  } else {
+    store.create(toShow.defaults ?? {});
+  }
+}
+const onCreate = (e) => {
+  dialog.close(toShow.id, { success: true, item: e.detail });
+};
+let isLoading = false;
+const onInsert = async () => {
+  isLoading = true;
+  try {
+    const result = await store.save();
+    if (result) {
+      dialog.close(toShow.id, { success: true, item: result });
+    }
+  } catch (e) {
+    if (!toShow.noThrow) {
+      throw e;
+    }
+  } finally {
+    isLoading = false;
+  }
+};
+const onDelete = async () => {
+  const res = await dialog.confirmDelete("");
+  if (res.success) {
+    await store.delete();
+    dialog.close(toShow.id, { success: true, item: $store.item });
+  }
+};
+</script>
+
+<DialogPrimitive
+  detail={toShow.detail}
+  open
+  classes={{ root: toShow.classes?.root }}
+  on:change={() => dialog.close(toShow.id, { success: false })}
+>
+  <form on:submit|preventDefault={onInsert}>
+    <div class="grid {toShow.classes?.formGrid ?? ''} gap-4 pb-4">
+      <FieldGroup
+        {cells}
+        {store}
+        mode={toShow.type === 'view' ? 'view' : 'edit'}
+        on:createRequest={onCreate}
+      />
+    </div>
+
+    <FormEditAction
+      type={toShow.type}
+      wDelete={toShow.wDelete}
+      {store}
+      on:delete={onDelete}
+      textCreate={toShow.topicPrefixText}
+    ></FormEditAction>
+  </form>
+</DialogPrimitive>

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

@@ -0,0 +1,19 @@
+import { SvelteComponent } from "svelte";
+import { type DialogMetaDataInternal } from './dialog';
+declare const __propDef: {
+    props: {
+        toShow: DialogMetaDataInternal;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+    exports?: {} | undefined;
+    bindings?: string | undefined;
+};
+export type DialogFormProps = typeof __propDef.props;
+export type DialogFormEvents = typeof __propDef.events;
+export type DialogFormSlots = typeof __propDef.slots;
+export default class DialogForm extends SvelteComponent<DialogFormProps, DialogFormEvents, DialogFormSlots> {
+}
+export {};

package/esm/ui/dialog/DialogManagement.svelte

@@ -0,0 +1,87 @@
+<script>
+  import Button from '../Button.svelte'
+  import { dialog } from './dialog'
+  import DialogForm from './DialogForm.svelte'
+  import DialogPrimitive from './DialogPrimitive.svelte'
+
+  $: dialogSorted = $dialog.sort((a, b) => a.id - b.id)
+</script>
+
+{#each dialogSorted as toShow}
+  {#if toShow.type === 'confirm'}
+    <DialogPrimitive
+      detail={toShow.detail}
+      open
+      on:change={() => dialog.close(toShow.id, { success: false })}
+    >
+      {@html toShow.children}
+      <svelte:fragment slot="actions">
+        <Button class="text-white" on:click={() => dialog.close(toShow.id, { success: true })}
+          >Confirmer</Button
+        >
+      </svelte:fragment>
+    </DialogPrimitive>
+  {:else if toShow.type === 'confirmDelete'}
+    <DialogPrimitive
+      detail={toShow.detail}
+      open
+      on:change={() => dialog.close(toShow.id, { success: false })}
+    >
+      {@html toShow.children}
+      <svelte:fragment slot="actions">
+        <Button
+          class="btn-outline btn-error"
+          on:click={() => dialog.close(toShow.id, { success: true })}
+        >
+          Confirmer
+        </Button>
+      </svelte:fragment>
+    </DialogPrimitive>
+  {:else if toShow.type === 'insert' || toShow.type === 'update' || toShow.type === 'view'}
+    <DialogForm {toShow}></DialogForm>
+  {:else if toShow.component && toShow.children}
+    <DialogPrimitive
+      detail={toShow.detail}
+      open
+      on:change={() => dialog.close(toShow.id, { success: false })}
+    >
+      <svelte:component this={toShow.component} {...toShow.props} dialogId={toShow.id}>
+        {#if toShow.children}
+          {@html toShow.children}
+        {/if}
+      </svelte:component>
+    </DialogPrimitive>
+  {:else if toShow.component}
+    <DialogPrimitive
+      detail={toShow.detail}
+      open
+      classes={{ root: toShow.classes?.root }}
+      on:change={() => dialog.close(toShow.id, { success: false })}
+    >
+      <svelte:component this={toShow.component} {...toShow.props} dialogId={toShow.id}
+      ></svelte:component>
+    </DialogPrimitive>
+  {:else}
+    <DialogPrimitive
+      detail={toShow.detail}
+      open
+      on:change={() => dialog.close(toShow.id, { success: false })}
+    >
+      <div class="grid gap-2">
+        <p>Hey 🫵 developer, you are missing a few things 🤡!</p>
+        <p>Or use use one of the custom built in dialog like</p>
+
+        <pre class="bg-base-300 mt-2 p-2 text-xs">{`await dialog.confirmDelete('The Car')`}</pre>
+
+        <p>Or pass you own component</p>
+        <pre class="bg-base-300 mt-2 p-2 text-xs">{`await dialog.show({
+  detail: { caption: 'Interlocuteur' },
+  component: CreateCarForm,
+  props: { isEdit: false },
+})`}</pre>
+
+        <p>Good luck 🚀</p>
+      </div>
+    </DialogPrimitive>
+  {/if}
+{/each}

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

@@ -0,0 +1,25 @@
+/** @typedef {typeof __propDef.props}  DialogManagementProps */
+/** @typedef {typeof __propDef.events}  DialogManagementEvents */
+/** @typedef {typeof __propDef.slots}  DialogManagementSlots */
+export default class DialogManagement extends SvelteComponent<{
+    [x: string]: never;
+}, {
+    [evt: string]: CustomEvent<any>;
+}, {}> {
+}
+export type DialogManagementProps = typeof __propDef.props;
+export type DialogManagementEvents = typeof __propDef.events;
+export type DialogManagementSlots = typeof __propDef.slots;
+import { SvelteComponent } from "svelte";
+declare const __propDef: {
+    props: {
+        [x: string]: never;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+    exports?: undefined;
+    bindings?: undefined;
+};
+export {};

package/esm/ui/dialog/DialogPrimitive.svelte

@@ -0,0 +1,89 @@
+<script>import { createDialog } from "@melt-ui/svelte";
+import { createEventDispatcher } from "svelte";
+import { fade } from "svelte/transition";
+import { LibIcon_Cross, tw } from "../../";
+import { flyAndScale } from "../../utils/transition";
+import Icon from "../Icon.svelte";
+import LinkPlus from "../link/LinkPlus.svelte";
+export let detail = void 0;
+export let open = false;
+export let classes = {};
+const {
+  elements: { trigger, overlay, content, title: localTitle, description, close, portalled },
+  states: { open: localOpen }
+} = createDialog({
+  forceVisible: true,
+  defaultOpen: open,
+  closeOnOutsideClick: false,
+  onOpenChange: (open2) => {
+    dispatchChange("yop there");
+    return open2.next;
+  }
+});
+const dispatch = createEventDispatcher();
+function dispatchChange(_data) {
+  dispatch("change", _data);
+}
+</script>
+
+<div
+  {...$portalled}
+  use:$portalled.action
+  class="fixed top-0 z-50 flex h-full w-full items-center justify-center"
+>
+  {#if $localOpen}
+    <div
+      {...$overlay}
+      use:$overlay.action
+      class="bg-base-300/80 fixed inset-0 z-40 blur-sm"
+      transition:fade={{ duration: 150 }}
+    />
+    <div
+      class={tw(
+        `border-base-content/60
+         bg-base-100
+			   relative z-40 max-h-[90vh] overflow-visible rounded-xl
+			   border p-6
+         shadow-lg`,
+        classes.root,
+      )}
+      transition:flyAndScale={{
+        duration: 150,
+        y: 8,
+        start: 0.96,
+      }}
+      {...$content}
+      use:$content.action
+    >
+      <div class="left-0 top-0 mb-4 w-full">
+        <h2 {...$localTitle} use:$localTitle.action class="m-0 text-lg font-medium">
+          <div class="flex items-center justify-between gap-4">
+            <LinkPlus item={detail}></LinkPlus>
+            <button
+              {...$close}
+              use:$close.action
+              aria-label="close"
+              class="btn btn-circle btn-outline btn-lg
+            h-max min-h-0 w-max border-none"
+            >
+              <Icon data={LibIcon_Cross}></Icon>
+            </button>
+          </div>
+        </h2>
+      </div>
+
+      <div class="flex h-full min-w-[25rem] flex-col gap-4">
+        <!-- FIXME: ERMIN? overflow?  -->
+        <!-- <div class="overflow-y-auto"> -->
+        <slot />
+
+        {#if $$slots.actions}
+          <div class="mt-2 flex items-end justify-end">
+            <slot name="actions" />
+          </div>
+        {/if}
+        <!-- </div> -->
+      </div>
+    </div>
+  {/if}
+</div>

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

@@ -0,0 +1,28 @@
+import { SvelteComponent } from "svelte";
+import { type KitBaseItemLight } from '../../';
+declare const __propDef: {
+    props: {
+        detail?: KitBaseItemLight | undefined;
+        open?: boolean | undefined;
+        classes?: {
+            root?: string | undefined;
+        } | undefined;
+    };
+    events: {
+        change: CustomEvent<any>;
+    } & {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {
+        default: {};
+        actions: {};
+    };
+    exports?: {} | undefined;
+    bindings?: string | undefined;
+};
+export type DialogPrimitiveProps = typeof __propDef.props;
+export type DialogPrimitiveEvents = typeof __propDef.events;
+export type DialogPrimitiveSlots = typeof __propDef.slots;
+export default class DialogPrimitive extends SvelteComponent<DialogPrimitiveProps, DialogPrimitiveEvents, DialogPrimitiveSlots> {
+}
+export {};

package/esm/ui/dialog/FormEditAction.svelte

@@ -0,0 +1,54 @@
+<script generics="T extends any">import { createEventDispatcher } from "svelte";
+import Button from "../Button.svelte";
+import Icon from "../Icon.svelte";
+import { LibIcon_Add, LibIcon_Check, LibIcon_Delete } from "../LibIcon";
+export let store;
+export let type;
+export let wDelete = false;
+export let textCreate = "Cr\xE9er";
+const dispatch = createEventDispatcher();
+function dispatchDelete() {
+  dispatch("delete");
+}
+</script>
+
+<div class="mt-2 flex items-center justify-between">
+  {#if type === 'update'}
+    <div class="flex items-center justify-start">
+      {#if wDelete}
+        <Button
+          type="button"
+          on:click={dispatchDelete}
+          class="btn-outline btn-error mr-4 text-white"
+          isLoading={$store.loading}
+        >
+          <Icon data={LibIcon_Delete} />
+        </Button>
+      {/if}
+
+      <div>
+        {#if $store.globalError}
+          <span class="text-error text-xs">{$store.globalError}</span>
+        {/if}
+      </div>
+    </div>
+
+    <Button class="text-white" {...$$restProps} isLoading={$store.loading}>
+      <Icon data={LibIcon_Check} />
+      <p>Sauvegarder</p>
+    </Button>
+  {/if}
+
+  {#if type === 'insert'}
+    <div>
+      {#if $store.globalError}
+        <span class="text-error text-xs">{$store.globalError}</span>
+      {/if}
+    </div>
+
+    <Button class="text-white" {...$$restProps} isLoading={$store.loading}>
+      <Icon data={LibIcon_Add} />
+      <p>{textCreate}</p>
+    </Button>
+  {/if}
+</div>

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

@@ -0,0 +1,24 @@
+import { SvelteComponent } from "svelte";
+import type { KitStoreItem } from '../..';
+import type { DialogType } from './dialog';
+declare class __sveltets_Render<T extends any> {
+    props(): {
+        [x: string]: any;
+        store: KitStoreItem<T>;
+        type: DialogType;
+        wDelete?: boolean | undefined;
+        textCreate?: string | undefined;
+    };
+    events(): {
+        delete: CustomEvent<any>;
+    } & {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots(): {};
+}
+export type FormEditActionProps<T extends any> = ReturnType<__sveltets_Render<T>['props']>;
+export type FormEditActionEvents<T extends any> = ReturnType<__sveltets_Render<T>['events']>;
+export type FormEditActionSlots<T extends any> = ReturnType<__sveltets_Render<T>['slots']>;
+export default class FormEditAction<T extends any> extends SvelteComponent<FormEditActionProps<T>, FormEditActionEvents<T>, FormEditActionSlots<T>> {
+}
+export {};

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

@@ -0,0 +1,51 @@
+import type { SvelteComponent } from 'svelte';
+import type { Repository } from 'remult';
+import { type KitBaseItemLight, type KitCellsInput, type KitStoreItem } from '../../';
+export type DialogClasses = {
+    /**
+     * for example `overflow-auto` to have a scrollbar in the dialog
+     */
+    root?: string;
+    formGrid?: FormGrid;
+};
+export type FormGrid = 'grid-cols-1' | 'grid-cols-2' | 'grid-cols-3' | 'grid-cols-4' | 'grid-cols-1 lg:grid-cols-4';
+export type DialogMetaData<entityType = any> = {
+    detail?: KitBaseItemLight;
+    repo?: Repository<entityType>;
+    store?: KitStoreItem<entityType>;
+    cells?: KitCellsInput<entityType>;
+    defaults?: Partial<entityType>;
+    classes?: DialogClasses;
+    component?: new (...args: any[]) => SvelteComponent;
+    props?: any;
+    children?: any;
+    noThrow?: boolean;
+    wDelete?: boolean;
+    topicPrefixText?: string;
+};
+type ResultClose<entityType = any> = {
+    success: boolean;
+    item?: entityType;
+};
+export type DialogType = 'custom' | 'confirm' | 'confirmDelete' | 'insert' | 'update' | 'view';
+export type DialogMetaDataInternal<entityType = any> = DialogMetaData<entityType> & {
+    id: number;
+    type: DialogType;
+    resolve: (result: ResultClose) => void;
+};
+export declare const dialog: {
+    confirm: (topic: string, text: string, icon?: string) => Promise<ResultClose<any>>;
+    confirmDelete: (topic: string) => Promise<ResultClose<any>>;
+    form: <entityType>(type: 'insert' | 'update' | 'view', topic: string, repo: Repository<entityType>, cells: KitCellsInput<entityType>, options?: {
+        defaults?: Partial<entityType>;
+        classes?: DialogClasses;
+        noThrow?: boolean;
+        wDelete?: boolean;
+        topicPrefixText?: string;
+    }) => Promise<ResultClose<any>>;
+    show: (dialog: DialogMetaData) => Promise<ResultClose<any>>;
+    close: (id: number, result: ResultClose) => void;
+    closeAll: () => void;
+    subscribe: (this: void, run: import("svelte/store").Subscriber<DialogMetaDataInternal<any>[]>, invalidate?: import("svelte/store").Invalidator<DialogMetaDataInternal<any>[]> | undefined) => import("svelte/store").Unsubscriber;
+};
+export {};

package/esm/ui/dialog/dialog.js

@@ -0,0 +1,98 @@
+import { writable } from 'svelte/store';
+import { LibIcon_Add, LibIcon_Delete, LibIcon_Edit, LibIcon_Search, } from '../../';
+const createDialogManagement = () => {
+    const { subscribe, update } = writable([]);
+    // internal...
+    const show = (dialog, type) => {
+        let resolve;
+        const promise = new Promise((res) => {
+            resolve = res;
+        });
+        update((dialogs) => {
+            return [...dialogs, { ...dialog, id: dialogs.length + 1, resolve, type }];
+        });
+        return promise;
+    };
+    return {
+        confirm: (topic, text, icon) => {
+            const detail = {
+                detail: {
+                    caption: 'Confirmez',
+                    icon: { data: icon },
+                },
+                children: `
+					<p>
+						${topic}
+						<br />
+						${text}
+					</p>
+				`,
+            };
+            return show(detail, 'confirm');
+        },
+        confirmDelete: (topic) => {
+            const detail = {
+                detail: {
+                    caption: 'Supprimer',
+                    icon: { data: LibIcon_Delete },
+                },
+                children: topic
+                    ? `<p>Confirmez vous la suppression de: <br />- <b>${topic}</b> ?</p>`
+                    : 'Confirmer la suppression ?',
+            };
+            return show(detail, 'confirmDelete');
+        },
+        // FIXME JYC: refactor this (no need repo? options?)
+        form: (type, topic, repo, cells, options) => {
+            const topicPrefixText = options?.topicPrefixText
+                ? options?.topicPrefixText + ' '
+                : type === 'insert'
+                    ? `Créer `
+                    : type === 'update'
+                        ? 'Modifier '
+                        : 'Détail ';
+            const detail = {
+                detail: {
+                    caption: (topicPrefixText + topic).trim(),
+                    icon: {
+                        data: type === 'insert' ? LibIcon_Add : type === 'update' ? LibIcon_Edit : LibIcon_Search,
+                    },
+                },
+                repo,
+                // store,
+                cells,
+                defaults: options?.defaults,
+                classes: options?.classes,
+                noThrow: options?.noThrow,
+                wDelete: options?.wDelete,
+                topicPrefixText,
+            };
+            return show(detail, type);
+        },
+        show: (dialog) => {
+            return show(dialog, 'custom');
+        },
+        // next step, give a result typed!
+        close: (id, result) => {
+            update((dialogs) => {
+                dialogs.forEach((dialog) => {
+                    if (dialog.id === id) {
+                        dialog.resolve(result);
+                    }
+                });
+                return dialogs.filter((dialog) => dialog.id !== id);
+            });
+        },
+        // usefull on navigation you want to close all popups
+        closeAll: () => {
+            update((dialogs) => {
+                dialogs.forEach((dialog) => {
+                    dialog.resolve({ success: false });
+                });
+                return [];
+            });
+        },
+        subscribe,
+    };
+};
+export const dialog = createDialogManagement();

package/esm/ui/index.d.ts

@@ -0,0 +1,5 @@
+import type { FieldMetadata } from 'remult';
+import type { KitCell } from '../';
+export type Align = 'text-left' | 'text-center' | 'text-right';
+export declare const align: (f?: FieldMetadata, isSlot?: boolean) => Align;
+export declare const getAligns: (cells: KitCell<any>[], withAction: boolean) => Align[];

package/esm/ui/index.js

@@ -0,0 +1,19 @@
+export const align = (f, isSlot) => {
+    if (isSlot) {
+        return 'text-center';
+    }
+    if (f?.inputType === 'number') {
+        return 'text-right';
+    }
+    else if (f?.inputType === 'date' || f?.inputType === 'dateOnly') {
+        return 'text-center';
+    }
+    return 'text-left';
+};
+export const getAligns = (cells, withAction) => {
+    const cols = [...cells.map((c) => align(c.field, c.kind === 'slot'))];
+    if (withAction) {
+        cols.push('text-right');
+    }
+    return cols;
+};

package/esm/ui/internals/FieldContainer.svelte

@@ -0,0 +1,22 @@
+<script>import { tw } from "../../utils/tailwind";
+export let label = "label";
+export let forId;
+export let required = false;
+export let error = "";
+export let classes = {};
+</script>
+
+<div class="form-control w-full">
+  <label for={forId} class={tw(`label flex gap-1 px-2 pb-1`, classes.label)}>
+    <span class="label-text text-base-content/60 pl-2 text-xs">
+      {label}{required ? ' *' : ''}
+    </span>
+    {#if error}
+      <!-- TODO hover popup if too long? -->
+      <span class="label-text-alt text-error truncate">{error}</span>
+    {/if}
+  </label>
+  <div class={tw('grid h-12 w-full', classes.slot)}>
+    <slot />
+  </div>
+</div>