firstly 0.0.1 → 0.0.2

package/esm/ui/Grid.svelte

@@ -0,0 +1,246 @@
+<script generics="T extends Record<any, any>">import { createEventDispatcher } from "svelte";
+import {
+  displayWithDefaultAndSuffix,
+  getEntityDisplayValue,
+  getEntityDisplayValueFromField,
+  getFieldLinkDisplayValue,
+  getFieldMetaType
+} from "../helper.js";
+import { LibIcon_Delete, LibIcon_Edit } from "../index.js";
+import Button from "./Button.svelte";
+import Clipboardable from "./Clipboardable.svelte";
+import GridLoading from "./GridLoading.svelte";
+import Icon from "./Icon.svelte";
+import { align, getAligns } from "./index.js";
+import {
+  LibIcon_Add,
+  LibIcon_Settings,
+  LibIcon_Sort,
+  LibIcon_SortAsc,
+  LibIcon_SortDesc
+} from "./LibIcon.js";
+import LinkPlus from "./link/LinkPlus.svelte";
+export let cells;
+export let store;
+export let withAdd = false;
+export let withEdit = false;
+export let withDelete = false;
+export let loadingRows = 5;
+export let classes = {
+  table: "table-pin-rows table-pin-cols"
+};
+export let orderBy = void 0;
+export let orderByCols = void 0;
+export let dicoNoResult = "Aucun r\xE9sultat !";
+const dispatch = createEventDispatcher();
+const sorting = (toSort, b) => {
+  if (!toSort) {
+    return;
+  }
+  if (orderBy === void 0) {
+    orderBy = { [b.field.key]: "asc" };
+  } else if (orderBy[b.field.key] === "asc") {
+    orderBy = { [b.field.key]: "desc" };
+  } else if (orderBy[b.field.key] === void 0) {
+    orderBy = { [b.field.key]: "asc" };
+  } else {
+    orderBy = void 0;
+  }
+};
+const sortingIcon = (toSort, b, _orderBy) => {
+  if (!toSort) {
+    return;
+  }
+  if (_orderBy && _orderBy[b.field.key] === "asc") {
+    return { data: LibIcon_SortAsc, class: "text-primary" };
+  }
+  if (_orderBy && _orderBy[b.field.key] === "desc") {
+    return { data: LibIcon_SortDesc, class: "text-primary" };
+  }
+  return { data: LibIcon_Sort };
+};
+const cellsToTake = (cells2) => {
+  return cells2.filter((c) => c.modeView !== "hide");
+};
+</script>
+
+<div class="overflow-x-auto">
+  <table class="table {classes.table}">
+    <thead>
+      <tr>
+        {#each cellsToTake(cells) as b, i}
+          {@const al = align(b.field, b.kind === 'slot')}
+          <th
+            class="{al} 
+									{i === 0 ? 'rounded-tl-lg' : ''}
+									{i === cells.length - 1 && !withEdit && !withDelete ? 'rounded-tr-lg' : ''}"
+          >
+            {#if b.headerSlot}
+              <slot name="header" field={b.field} />
+            {:else}
+              {@const toSort =
+                orderByCols === true || (orderByCols && orderByCols.includes(b.field?.key))}
+              {#if toSort}
+                <button
+                  class="flex items-center justify-between gap-2"
+                  disabled={!toSort}
+                  on:click={() => sorting(toSort ?? false, b)}
+                >
+                  {b.header ?? b.field?.caption}
+                  {#if toSort}
+                    <Icon {...sortingIcon(toSort ?? false, b, orderBy)}></Icon>
+                  {/if}
+                </button>
+              {:else}
+                {b.header ?? b.field?.caption}
+              {/if}
+            {/if}
+          </th>
+        {/each}
+
+        {#if withEdit || withDelete || withAdd}
+          <th class="flex justify-end rounded-tr-lg">
+            {#if withAdd}
+              <Button
+                permission={store.getRepo().metadata.options.permissionApiInsert}
+                disabled={!store.getRepo().metadata.apiInsertAllowed()}
+                class="btn btn-square btn-ghost btn-xs"
+                on:click={() => dispatch('add', {})}
+              >
+                <Icon data={LibIcon_Add} />
+              </Button>
+            {:else}
+              <Icon data={LibIcon_Settings}></Icon>
+            {/if}
+          </th>
+        {/if}
+      </tr>
+    </thead>
+    <tbody>
+      <!-- Show loading only if there is no items and loading is true, like this on an update, there will be no jump -->
+      {#if $store.items.length === 0 && $store.loading && store.getRepo().metadata.apiReadAllowed}
+        <GridLoading columns={getAligns(cells, withEdit || withDelete)} {loadingRows} />
+      {:else}
+        {#each $store.items as row}
+          <tr on:click={() => dispatch('rowclick', row)} class="hover:bg-base-content/20">
+            {#each cellsToTake(cells) as b}
+              {@const metaType = getFieldMetaType(b.field)}
+              <td class={align(b.field, b.kind === 'slot')}>
+                {#if metaType.kind === 'slot' || b.kind === 'slot'}
+                  <slot name="cell" {row} field={b.field} cell={b} />
+                {:else if b.kind === 'component'}
+                  {#if b.component}
+                    <div class={b.class}>
+                      <svelte:component
+                        this={b.component}
+                        {...b.props}
+                        {...b.rowToProps ? b.rowToProps(row) : {}}
+                        on:refresh
+                      ></svelte:component>
+                    </div>
+                  {:else}
+                    <pre>Col: {b.col}</pre>
+                    <pre class="bg-error">Component prop needed !</pre>
+                  {/if}
+                {:else if metaType.kind === 'relation'}
+                  {@const item = getEntityDisplayValue(
+                    metaType.repoTarget,
+                    row[metaType.field.key],
+                  )}
+                  <LinkPlus
+                    item={{
+                      ...item,
+                      href: b.field?.options?.href ? b.field?.options.href(row) : item?.href,
+                    }}
+                  />
+                {:else if b.kind === 'field_link'}
+                  {@const item = getFieldLinkDisplayValue(metaType.field, row)}
+                  <LinkPlus {item} />
+                {:else if b.kind === 'entity_link'}
+                  {@const item = getEntityDisplayValueFromField(metaType.field, row)}
+                  <LinkPlus {item} />
+                {:else if metaType.kind === 'enum'}
+                  {#if metaType.subKind === 'single'}
+                    <LinkPlus item={row[metaType.field.key]}></LinkPlus>
+                  {:else if metaType.subKind === 'multi'}
+                    <!-- {@const t = metaType.field.displayValue(row)} -->
+                    {#each row[metaType.field.key] as enumVal}
+                      <div>
+                        {enumVal.caption}
+                      </div>
+                    {/each}
+                  {/if}
+                {:else if metaType.subKind === 'checkbox'}
+                  {@const t = metaType.field.displayValue(row)}
+                  {t === 'true' ? 'Oui' : 'Non'}
+                {:else}
+                  {@const t = displayWithDefaultAndSuffix(metaType.field, row[metaType.field.key])}
+                  {#if b.clipboardable}
+                    <Clipboardable value={t}>
+                      <!-- 20 is a cool value ! -->
+                      <span class={t.length < 20 ? 'text-nowrap' : ''}>
+                        {t}
+                      </span>
+                    </Clipboardable>
+                  {:else}
+                    <!-- 20 is a cool value ! -->
+                    <span class={t.length < 20 ? 'text-nowrap' : ''}>
+                      {t}
+                    </span>
+                  {/if}
+                {/if}
+              </td>
+            {/each}
+            {#if withEdit || withDelete}
+              <td class="text-right">
+                <div class="flex justify-end gap-2">
+                  {#if withEdit}
+                    <Button
+                      permission={store.getRepo().metadata.options.permissionApiUpdate}
+                      disabled={!store.getRepo().metadata.apiUpdateAllowed()}
+                      class="btn btn-square btn-ghost btn-xs"
+                      on:click={() => dispatch('edit', row)}
+                    >
+                      <Icon data={LibIcon_Edit} />
+                    </Button>
+                  {/if}
+                  {#if withDelete}
+                    <Button
+                      permission={store.getRepo().metadata.options.permissionApiDelete}
+                      disabled={!store.getRepo().metadata.apiDeleteAllowed()}
+                      class="btn btn-square btn-ghost btn-xs"
+                      on:click={() => dispatch('delete', row)}
+                    >
+                      <Icon data={LibIcon_Delete} />
+                    </Button>
+                  {/if}
+                </div>
+              </td>
+            {/if}
+          </tr>
+        {:else}
+          {#if !store.getRepo().metadata.apiReadAllowed}
+            <tr>
+              <td
+                colspan={getAligns(cells, withEdit || withDelete).length}
+                class="text-center py-12"
+              >
+                Vous n'avez pas la permission pour ces données!
+              </td>
+            </tr>
+          {:else if dicoNoResult}
+            <tr>
+              <td
+                colspan={getAligns(cells, withEdit || withDelete).length}
+                class="text-center py-12"
+              >
+                {dicoNoResult}
+              </td>
+            </tr>
+          {/if}
+        {/each}
+        <slot name="extra" />
+      {/if}
+    </tbody>
+  </table>
+</div>

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

@@ -0,0 +1,46 @@
+import { SvelteComponent } from "svelte";
+import type { EntityOrderBy } from 'remult';
+import { type KitStoreList } from '../index.js';
+import type { KitCell } from '../kitCellsBuildor.js';
+declare class __sveltets_Render<T extends Record<any, any>> {
+    props(): {
+        cells: KitCell<T>[];
+        store: KitStoreList<T>;
+        withAdd?: boolean | undefined;
+        withEdit?: boolean | undefined;
+        withDelete?: boolean | undefined;
+        loadingRows?: number | undefined;
+        classes?: {
+            table: string;
+        } | undefined;
+        orderBy?: EntityOrderBy<T> | undefined;
+        orderByCols?: true | (keyof T)[] | undefined;
+        dicoNoResult?: string | undefined;
+    };
+    events(): {
+        refresh: any;
+        add: CustomEvent<any>;
+        rowclick: CustomEvent<any>;
+        edit: CustomEvent<any>;
+        delete: CustomEvent<any>;
+    } & {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots(): {
+        header: {
+            field: import("remult").FieldMetadata<any, T> | undefined;
+        };
+        cell: {
+            row: T;
+            field: import("remult").FieldMetadata<any, T> | undefined;
+            cell: KitCell<T>;
+        };
+        extra: {};
+    };
+}
+export type GridProps<T extends Record<any, any>> = ReturnType<__sveltets_Render<T>['props']>;
+export type GridEvents<T extends Record<any, any>> = ReturnType<__sveltets_Render<T>['events']>;
+export type GridSlots<T extends Record<any, any>> = ReturnType<__sveltets_Render<T>['slots']>;
+export default class Grid<T extends Record<any, any>> extends SvelteComponent<GridProps<T>, GridEvents<T>, GridSlots<T>> {
+}
+export {};

package/esm/ui/GridLoading.svelte

@@ -0,0 +1,32 @@
+<script>import { tw } from "../utils/tailwind";
+import Loading from "./Loading.svelte";
+export let columns;
+export let loadingRows = 5;
+let size = ["", "w-1/2", "w-1/3", "w-1/4", "w-1/5", "w-1/6"];
+</script>
+
+<!-- Do 10 rows -->
+{#each new Array(loadingRows) as _row, r}
+  <tr>
+    {#each columns as column, c}
+      <td class="{column} ">
+        <div class={tw('flex justify-between', column === 'text-right' && 'flex-row-reverse')}>
+          {#if column === 'text-center'}
+            <div></div>
+          {/if}
+          <Loading
+            class={tw(
+              `h-4`,
+              size[
+                parseInt(
+                  (((r + 1) * (c + 1) * Math.random() * size.length) % size.length).toString(),
+                )
+              ],
+            )}
+          />
+          <div></div>
+        </div>
+      </td>
+    {/each}
+  </tr>
+{/each}

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

@@ -0,0 +1,20 @@
+import { SvelteComponent } from "svelte";
+import type { Align } from './index.js';
+declare const __propDef: {
+    props: {
+        columns: Align[];
+        loadingRows?: number | undefined;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+    exports?: {} | undefined;
+    bindings?: string | undefined;
+};
+export type GridLoadingProps = typeof __propDef.props;
+export type GridLoadingEvents = typeof __propDef.events;
+export type GridLoadingSlots = typeof __propDef.slots;
+export default class GridLoading extends SvelteComponent<GridLoadingProps, GridLoadingEvents, GridLoadingSlots> {
+}
+export {};

package/esm/ui/GridPaginate.svelte

@@ -0,0 +1,66 @@
+<script>import Icon from "./Icon.svelte";
+import FieldContainer from "./internals/FieldContainer.svelte";
+import "./LibIcon";
+import { LibIcon_ChevronLeft, LibIcon_ChevronRight } from "./LibIcon";
+import Loading from "./Loading.svelte";
+export let label = "Pagination";
+export let page;
+export let totalCount = void 0;
+export let pageSize = 25;
+const update = (op) => {
+  if (op === "+") {
+    if (canGoNext) {
+      page = page + 1;
+    }
+  } else {
+    if (page > 1) {
+      page = page - 1;
+    }
+  }
+};
+$:
+  isValidValue = totalCount !== void 0 && totalCount !== null;
+$:
+  needPaginate = isValidValue && (totalCount ?? 0) > pageSize;
+$:
+  canGoNext = isValidValue && needPaginate && page < Math.ceil((totalCount ?? 0) / pageSize);
+</script>
+
+<FieldContainer {label} forId="paginate" classes={{ label: 'justify-end' }}>
+  <div class="flex items-center justify-end">
+    {#if totalCount === undefined}
+      <Loading class="mx-2 h-8 w-1/2"></Loading>
+    {:else if !needPaginate}
+      <span class="text-primary justify-end px-2 font-bold">
+        {totalCount}
+      </span>
+    {:else}
+      <div class="join">
+        <button
+          aria-label="left"
+          on:click={() => update('-')}
+          class="btn join-item {page === 1 ? 'btn-disabled' : ''}"
+        >
+          <Icon data={LibIcon_ChevronLeft} />
+        </button>
+        {#if isValidValue}
+          <button aria-label="current" class="btn join-item px-0">
+            <span class="text-primary font-bold">{totalCount}</span>
+            <span class="text-[0.55rem] italic"
+              >({page} / {Math.ceil((totalCount ?? 0) / pageSize)})</span
+            >
+          </button>
+        {:else}
+          <button aria-label="loading" class="btn join-item animate-pulse">.....</button>
+        {/if}
+        <button
+          aria-label="right"
+          on:click={() => update('+')}
+          class="btn join-item {!canGoNext ? 'btn-disabled' : ''}"
+        >
+          <Icon data={LibIcon_ChevronRight} />
+        </button>
+      </div>
+    {/if}
+  </div>
+</FieldContainer>

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

@@ -0,0 +1,22 @@
+import { SvelteComponent } from "svelte";
+import './LibIcon';
+declare const __propDef: {
+    props: {
+        label?: string | undefined;
+        page: number;
+        totalCount?: number | undefined | null;
+        pageSize?: number | undefined;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+    exports?: {} | undefined;
+    bindings?: string | undefined;
+};
+export type GridPaginateProps = typeof __propDef.props;
+export type GridPaginateEvents = typeof __propDef.events;
+export type GridPaginateSlots = typeof __propDef.slots;
+export default class GridPaginate extends SvelteComponent<GridPaginateProps, GridPaginateEvents, GridPaginateSlots> {
+}
+export {};

package/esm/ui/Icon.svelte

@@ -0,0 +1,86 @@
+<script>import { BROWSER } from "esm-env";
+import "./LibIcon";
+import { LibIcon_Empty } from "./LibIcon";
+export let data = "";
+export let size = "1.5rem";
+export let caption = void 0;
+const rmvWarning = caption;
+export let ssr = false;
+let className = "";
+export { className as class };
+export let style = "";
+let width = size;
+let height = size;
+let viewBox = "0 0 24 24";
+let svg = "";
+let path = "";
+$:
+  if (typeof data === "string") {
+    if (data.toLowerCase().includes("<svg")) {
+      svg = data.replace(/width="[^"]*"/, `width="${width}"`).replace(/height="[^"]*"/, `height="${height}"`);
+    } else {
+      path = data;
+    }
+  } else {
+    path = data;
+  }
+const getInfoProps = (props, i = 0) => {
+  if (Array.isArray(props)) {
+    return props[i] ?? "";
+  }
+  return props ?? "";
+};
+</script>
+
+{#if BROWSER || ssr}
+  {#if svg || $$slots.default}
+    <span
+      class={getInfoProps(className)}
+      style={getInfoProps(style)}
+      style:width
+      style:height
+      role={'img'}
+      on:click
+    >
+      <slot>
+        {@html svg ?? ''}
+      </slot>
+    </span>
+  {:else}
+    <svg
+      {width}
+      {height}
+      {viewBox}
+      class={getInfoProps(className)}
+      style={getInfoProps(style)}
+      role={'img'}
+      on:click
+    >
+      {#each Array.isArray(path) ? path : [path] as d, i}
+        <path
+          {d}
+          fill="currentColor"
+          class={getInfoProps(className, i)}
+          style={getInfoProps(style, i)}
+        />
+      {/each}
+    </svg>
+  {/if}
+{:else}
+  <svg
+    {width}
+    {height}
+    {viewBox}
+    class={getInfoProps(className)}
+    style={getInfoProps(style)}
+    role={'img'}
+    on:click
+  >
+    <path
+      d={LibIcon_Empty}
+      fill="currentColor"
+      class={getInfoProps(className)}
+      style={getInfoProps(style)}
+    />
+  </svg>
+{/if}

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

@@ -0,0 +1,46 @@
+import { SvelteComponent } from "svelte";
+import './LibIcon';
+declare const __propDef: {
+    props: {
+        /**
+           * directly <svg ... /> or d of <path ... />
+           *
+           * with \@mdi/js
+           * ```js
+           * import { mdiAccountTieWoman } from "@mdi/js";
+           * <Icon data={mdiAccountTieWoman} style="background-color: blue;" size={"4rem"}></Icon>
+           * ```
+           *
+           * with \@iconify-json/mdi && unplugin-icons with Icons({ compiler: "raw" })
+           * ```js
+           * import Woman from "virtual:icons/mdi/account-tie-woman";
+           * <Icon data={mdiAccountTieWoman} style="background-color: blue;" size={"4rem"}></Icon>
+           * ```
+           */ data?: string | string[] | undefined;
+        size?: string | number | undefined;
+        caption?: string | undefined;
+        /**
+           * By default, svg are not rendered on the server side.
+           * But the size will be respected to not have glitch on the client side when the icon is coming.
+           * @default false
+           */ ssr?: boolean | undefined;
+        class?: string | string[] | undefined;
+        style?: string | string[] | undefined;
+    };
+    events: {
+        click: MouseEvent;
+    } & {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {
+        default: {};
+    };
+    exports?: {} | undefined;
+    bindings?: string | undefined;
+};
+export type IconProps = typeof __propDef.props;
+export type IconEvents = typeof __propDef.events;
+export type IconSlots = typeof __propDef.slots;
+export default class Icon extends SvelteComponent<IconProps, IconEvents, IconSlots> {
+}
+export {};

package/esm/ui/LibIcon.d.ts

@@ -0,0 +1,23 @@
+export declare const LibIcon_Empty = "";
+export declare const LibIcon_Forbidden: string;
+export declare const LibIcon_ChevronDown: string;
+export declare const LibIcon_ChevronUp: string;
+export declare const LibIcon_ChevronLeft: string;
+export declare const LibIcon_ChevronRight: string;
+export declare const LibIcon_Search: string;
+export declare const LibIcon_Check: string;
+export declare const LibIcon_MultiCheck: string;
+export declare const LibIcon_Add: string;
+export declare const LibIcon_MultiAdd: string;
+export declare const LibIcon_Edit: string;
+export declare const LibIcon_Delete: string;
+export declare const LibIcon_Cross: string;
+export declare const LibIcon_Save: string;
+export declare const LibIcon_Man: string;
+export declare const LibIcon_Woman: string;
+export declare const LibIcon_Send: string;
+export declare const LibIcon_Load: string;
+export declare const LibIcon_Settings: string;
+export declare const LibIcon_Sort: string;
+export declare const LibIcon_SortAsc: string;
+export declare const LibIcon_SortDesc: string;

package/esm/ui/LibIcon.js

@@ -0,0 +1,28 @@
+// Lib Icons
+// https://icones.js.org/ and https://pictogrammers.com/library/mdi/
+// Lib or App let's not grow to much here !
+// TODO : check code spliting...
+import { mdiAccountTie, mdiAccountTieWoman, mdiCancel, mdiCheck, mdiCheckAll, mdiChevronDown, mdiChevronLeft, mdiChevronRight, mdiChevronUp, mdiCloseCircleOutline, mdiCogOutline, mdiContentSaveEdit, mdiDelete, mdiLoading, mdiMagnify, mdiPencil, mdiPlusBoxMultiple, mdiPlusCircle, mdiSend, mdiSort, mdiSortReverseVariant, mdiSortVariant, } from '@mdi/js';
+export const LibIcon_Empty = ``;
+export const LibIcon_Forbidden = mdiCancel;
+export const LibIcon_ChevronDown = mdiChevronDown;
+export const LibIcon_ChevronUp = mdiChevronUp;
+export const LibIcon_ChevronLeft = mdiChevronLeft;
+export const LibIcon_ChevronRight = mdiChevronRight;
+export const LibIcon_Search = mdiMagnify;
+export const LibIcon_Check = mdiCheck;
+export const LibIcon_MultiCheck = mdiCheckAll;
+export const LibIcon_Add = mdiPlusCircle;
+export const LibIcon_MultiAdd = mdiPlusBoxMultiple;
+export const LibIcon_Edit = mdiPencil;
+export const LibIcon_Delete = mdiDelete;
+export const LibIcon_Cross = mdiCloseCircleOutline;
+export const LibIcon_Save = mdiContentSaveEdit;
+export const LibIcon_Man = mdiAccountTie;
+export const LibIcon_Woman = mdiAccountTieWoman;
+export const LibIcon_Send = mdiSend;
+export const LibIcon_Load = mdiLoading;
+export const LibIcon_Settings = mdiCogOutline;
+export const LibIcon_Sort = mdiSort;
+export const LibIcon_SortAsc = mdiSortReverseVariant;
+export const LibIcon_SortDesc = mdiSortVariant;

package/esm/ui/Loading.svelte

@@ -0,0 +1,11 @@
+<script>import { tw } from "../utils/tailwind";
+export { extraClass as class };
+let extraClass = "";
+</script>
+
+<!-- To fix one capa & cadb are on the same css -->
+<div
+  class={tw('skeleton bg-base-content/20 flex h-4 w-full items-center justify-center', extraClass)}
+>
+  <slot />
+</div>

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

@@ -0,0 +1,20 @@
+import { SvelteComponent } from "svelte";
+declare const __propDef: {
+    props: {
+        class?: string | undefined;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {
+        default: {};
+    };
+    exports?: {} | undefined;
+    bindings?: string | undefined;
+};
+export type LoadingProps = typeof __propDef.props;
+export type LoadingEvents = typeof __propDef.events;
+export type LoadingSlots = typeof __propDef.slots;
+export default class Loading extends SvelteComponent<LoadingProps, LoadingEvents, LoadingSlots> {
+}
+export {};