firstly 0.0.12 → 0.0.14

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

@@ -1,4 +1,3 @@
-import { SvelteComponent } from "svelte";
 import type { EntityOrderBy } from 'remult';
 import type { Cell } from '../cellsBuildor.js';
 import { type StoreList } from '../index.js';
@@ -38,10 +37,22 @@ declare class __sveltets_Render<T extends Record<any, any>> {
         };
         extra: {};
     };
+    bindings(): string;
+    exports(): {};
 }
-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>> {
+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']>;
 }
-export {};
+declare const Grid: $$IsomorphicComponent;
+type Grid<T extends Record<any, any>> = InstanceType<typeof Grid<T>>;
+export default Grid;

package/esm/ui/GridLoading.svelte

@@ -1,32 +1,33 @@
-<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 lang="ts">
+	import { tw } from '../utils/tailwind'
+	import type { Align } from './index.js'
+	import Loading from './Loading.svelte'
+
+	export let columns: Align[]
+	export let loadingRows = 5
+
+	// Random with different size
+	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>
+	<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

@@ -1,20 +1,22 @@
-import { SvelteComponent } from "svelte";
 import type { Align } from './index.js';
-declare const __propDef: {
-    props: {
-        columns: Align[];
-        loadingRows?: number;
+interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
+    new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
+        $$bindings?: Bindings;
+    } & Exports;
+    (internal: unknown, props: Props & {
+        $$events?: Events;
+        $$slots?: Slots;
+    }): Exports & {
+        $set?: any;
+        $on?: any;
     };
-    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> {
+    z_$$bindings?: Bindings;
 }
-export {};
+declare const GridLoading: $$__sveltets_2_IsomorphicComponent<{
+    columns: Align[];
+    loadingRows?: number;
+}, {
+    [evt: string]: CustomEvent<any>;
+}, {}, {}, string>;
+type GridLoading = InstanceType<typeof GridLoading>;
+export default GridLoading;

package/esm/ui/GridPaginate.svelte

@@ -1,65 +1,72 @@
-<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 pageDisplayed;
-export let totalCount = void 0;
-export let pageSize = 25;
-const update = (op) => {
-  if (op === "+") {
-    if (canGoNext) {
-      pageDisplayed = pageDisplayed + 1;
-    }
-  } else {
-    if (pageDisplayed > 1) {
-      pageDisplayed = pageDisplayed - 1;
-    }
-  }
-};
-$: isValidValue = totalCount !== void 0 && totalCount !== null;
-$: needPaginate = isValidValue && (totalCount ?? 0) > pageSize;
-$: canGoNext = isValidValue && needPaginate && pageDisplayed < Math.ceil((totalCount ?? 0) / pageSize);
+<script lang="ts">
+	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 pageDisplayed: number
+	export let totalCount: number | undefined | null = undefined
+	export let pageSize: number = 25
+
+	const update = (op: '+' | '-') => {
+		if (op === '+') {
+			if (canGoNext) {
+				pageDisplayed = pageDisplayed + 1
+			}
+		} else {
+			if (pageDisplayed > 1) {
+				pageDisplayed = pageDisplayed - 1
+			}
+		}
+	}
+
+	$: isValidValue = totalCount !== undefined && totalCount !== null
+	$: needPaginate = isValidValue && (totalCount ?? 0) > pageSize
+	$: canGoNext =
+		isValidValue && needPaginate && pageDisplayed < Math.ceil((totalCount ?? 0) / pageSize)
 </script>
 
 <FieldContainer {label} forId="paginate" classes={{ label: 'justify-end' }}>
-  <div class="flex w-36 items-center justify-end">
-    {#if totalCount === undefined}
-      <Loading class="ml-6 mr-2 h-3 w-1/6"></Loading>
-      <Loading class="mx-2 h-4 w-1/2"></Loading>
-      <Loading class="mx-2 h-3 w-1/6"></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 p-1 {pageDisplayed === 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"
-              >({pageDisplayed} / {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 p-1 {!canGoNext ? 'btn-disabled' : ''}"
-        >
-          <Icon data={LibIcon_ChevronRight} />
-        </button>
-      </div>
-    {/if}
-  </div>
+	<div class="flex w-36 items-center justify-end">
+		{#if totalCount === undefined}
+			<Loading class="ml-6 mr-2 h-3 w-1/6"></Loading>
+			<Loading class="mx-2 h-4 w-1/2"></Loading>
+			<Loading class="mx-2 h-3 w-1/6"></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 p-1 {pageDisplayed === 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"
+							>({pageDisplayed} / {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 p-1 {!canGoNext ? 'btn-disabled' : ''}"
+				>
+					<Icon data={LibIcon_ChevronRight} />
+				</button>
+			</div>
+		{/if}
+	</div>
 </FieldContainer>

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

@@ -1,22 +1,24 @@
-import { SvelteComponent } from "svelte";
 import './LibIcon';
-declare const __propDef: {
-    props: {
-        label?: string;
-        pageDisplayed: number;
-        totalCount?: number | undefined | null;
-        pageSize?: number;
+interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
+    new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
+        $$bindings?: Bindings;
+    } & Exports;
+    (internal: unknown, props: Props & {
+        $$events?: Events;
+        $$slots?: Slots;
+    }): Exports & {
+        $set?: any;
+        $on?: any;
     };
-    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> {
+    z_$$bindings?: Bindings;
 }
-export {};
+declare const GridPaginate: $$__sveltets_2_IsomorphicComponent<{
+    label?: string;
+    pageDisplayed: number;
+    totalCount?: number | undefined | null;
+    pageSize?: number;
+}, {
+    [evt: string]: CustomEvent<any>;
+}, {}, {}, string>;
+type GridPaginate = InstanceType<typeof GridPaginate>;
+export default GridPaginate;

package/esm/ui/Icon.svelte

@@ -1,85 +1,121 @@
-<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 lang="ts">
+	import { BROWSER } from 'esm-env'
+
+	import './LibIcon'
+
+	import { LibIcon_Empty } from './LibIcon'
+
+	/**
+	 * 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>
+	 * ```
+	 */
+	export let data: string | string[] = ''
+
+	export let size: string | number = '1.5rem'
+
+	export let caption: string | undefined = undefined
+	const rmvWarning = caption
+
+	/**
+	 * 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
+	 */
+	export let ssr = false
+
+	let className: string | string[] | undefined = ''
+	export { className as class }
+	export let style: string | string[] | undefined = ''
+
+	let width = size
+	let height = size
+	let viewBox = '0 0 24 24'
+
+	let svg = ''
+	let path: string | string[] = ''
+
+	$: 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: string | string[] | undefined, i: number = 0) => {
+		if (Array.isArray(props)) {
+			return props[i] ?? ''
+		}
+		return props ?? ''
+	}
+
+	const role = 'img'
 </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}
+	{#if svg || $$slots.default}
+		<span
+			class={getInfoProps(className)}
+			style={getInfoProps(style)}
+			style:width
+			style:height
+			{role}
+			on:click
+		>
+			<slot>
+				{@html svg ?? ''}
+			</slot>
+		</span>
+	{:else}
+		<svg
+			{width}
+			{height}
+			{viewBox}
+			class={getInfoProps(className)}
+			style={getInfoProps(style)}
+			{role}
+			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>
+	<svg
+		{width}
+		{height}
+		{viewBox}
+		class={getInfoProps(className)}
+		style={getInfoProps(style)}
+		{role}
+		on:click
+	>
+		<path
+			d={LibIcon_Empty}
+			fill="currentColor"
+			class={getInfoProps(className)}
+			style={getInfoProps(style)}
+		/>
+	</svg>
 {/if}

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

@@ -1,46 +1,55 @@
-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[];
-        size?: string | number;
-        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;
-        class?: string | string[] | undefined;
-        style?: string | string[] | undefined;
+interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
+    new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
+        $$bindings?: Bindings;
+    } & Exports;
+    (internal: unknown, props: Props & {
+        $$events?: Events;
+        $$slots?: Slots;
+    }): Exports & {
+        $set?: any;
+        $on?: any;
     };
-    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> {
+    z_$$bindings?: Bindings;
 }
-export {};
+type $$__sveltets_2_PropsWithChildren<Props, Slots> = Props & (Slots extends {
+    default: any;
+} ? Props extends Record<string, never> ? any : {
+    children?: any;
+} : {});
+declare const Icon: $$__sveltets_2_IsomorphicComponent<$$__sveltets_2_PropsWithChildren<{
+    /**
+         * 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[];
+    size?: string | number;
+    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;
+    class?: string | string[] | undefined;
+    style?: string | string[] | undefined;
+}, {
+    default: {};
+}>, {
+    click: MouseEvent;
+} & {
+    [evt: string]: CustomEvent<any>;
+}, {
+    default: {};
+}, {}, string>;
+type Icon = InstanceType<typeof Icon>;
+export default Icon;

package/esm/ui/Loading.svelte

@@ -1,14 +1,16 @@
-<script>import { tw } from "../utils/tailwind";
-export { extraClass as class };
-let extraClass = "";
+<script lang="ts">
+	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 rounded-lg',
-    extraClass,
-  )}
+	class={tw(
+		'skeleton bg-base-content/20 flex h-4 w-full items-center justify-center rounded-lg',
+		extraClass,
+	)}
 >
-  <slot />
+	<slot />
 </div>