firstly 0.0.13 → 0.0.14

package/esm/ui/Grid.svelte

@@ -1,89 +1,113 @@
-<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 settingsLeft = false;
-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");
-};
-const classForRounding = (i) => {
-  if (settingsLeft && (withEdit || withDelete || withAdd)) {
-    if (i === 0) {
-      return "";
-    } else if (i === cells.length - 1) {
-      return "rounded-tr-lg";
-    }
-  }
-  if (!settingsLeft && (withEdit || withDelete || withAdd)) {
-    if (i === 0) {
-      return "rounded-tl-lg";
-    } else if (i === cells.length - 1) {
-      return "";
-    }
-  }
-  if (i === 0) {
-    return "rounded-tl-lg";
-  } else if (i === cells.length - 1) {
-    return "rounded-tr-lg";
-  }
-};
+<script lang="ts" generics="T extends Record<any, any>">
+	import { createEventDispatcher } from 'svelte'
+
+	import type { EntityOrderBy } from 'remult'
+
+	import type { Cell } from '../cellsBuildor.js'
+	import {
+		displayWithDefaultAndSuffix,
+		getEntityDisplayValue,
+		getEntityDisplayValueFromField,
+		getFieldLinkDisplayValue,
+		getFieldMetaType,
+	} from '../helper.js'
+	import { LibIcon_Delete, LibIcon_Edit, type StoreList } 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: Cell<T>[]
+	export let store: StoreList<T>
+
+	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: EntityOrderBy<T> | undefined = undefined
+	export let orderByCols: (keyof T)[] | true | undefined = undefined
+	export let settingsLeft = false
+
+	export let dicoNoResult = 'Aucun résultat !'
+
+	const dispatch = createEventDispatcher()
+
+	const sorting = (toSort: boolean, b: Cell<T>) => {
+		if (!toSort) {
+			return
+		}
+		if (orderBy === undefined) {
+			// @ts-ignore
+			orderBy = { [b.field.key]: 'asc' }
+			// @ts-ignore
+		} else if (orderBy[b.field.key] === 'asc') {
+			// @ts-ignore
+			orderBy = { [b.field.key]: 'desc' }
+			// @ts-ignore
+		} else if (orderBy[b.field.key] === undefined) {
+			// @ts-ignore
+			orderBy = { [b.field.key]: 'asc' }
+		} else {
+			orderBy = undefined
+		}
+	}
+
+	const sortingIcon = (toSort: boolean, b: Cell<T>, _orderBy: EntityOrderBy<T> | undefined) => {
+		if (!toSort) {
+			return
+		}
+		// @ts-ignore
+		if (_orderBy && _orderBy[b.field.key] === 'asc') {
+			return { data: LibIcon_SortAsc, class: 'text-primary' }
+		}
+		// @ts-ignore
+		if (_orderBy && _orderBy[b.field.key] === 'desc') {
+			return { data: LibIcon_SortDesc, class: 'text-primary' }
+		}
+		return { data: LibIcon_Sort }
+	}
+
+	const cellsToTake = (cells: Cell<T>[]) => {
+		return cells.filter((c) => c.modeView !== 'hide')
+	}
+
+	const classForRounding = (i: number) => {
+		if (settingsLeft && (withEdit || withDelete || withAdd)) {
+			if (i === 0) {
+				return ''
+			} else if (i === cells.length - 1) {
+				return 'rounded-tr-lg'
+			}
+		}
+
+		if (!settingsLeft && (withEdit || withDelete || withAdd)) {
+			if (i === 0) {
+				return 'rounded-tl-lg'
+			} else if (i === cells.length - 1) {
+				return ''
+			}
+		}
+
+		if (i === 0) {
+			return 'rounded-tl-lg'
+		} else if (i === cells.length - 1) {
+			return 'rounded-tr-lg'
+		}
+	}
 </script>
 
 <div class="overflow-x-auto">

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,8 +1,13 @@
-<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 -->

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,26 +1,33 @@
-<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' }}>

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,35 +1,70 @@
-<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 ?? "";
-};
-const role = "img";
+<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}

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,6 +1,8 @@
-<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 -->