fuma 1.0.16 → 1.0.18

package/dist/ui/table/head/TableHeadDefault.svelte.d.ts

@@ -1,17 +1,27 @@
 import { SvelteComponent } from "svelte";
 import type { TableField } from '../index.js';
-declare const __propDef: {
-    props: {
-        field: TableField;
+declare class __sveltets_Render<Item extends {
+    id: string;
+}> {
+    props(): {
+        field: TableField<Item>;
     };
-    events: {
+    events(): {} & {
         [evt: string]: CustomEvent<any>;
     };
-    slots: {};
-};
-export type TableHeadDefaultProps = typeof __propDef.props;
-export type TableHeadDefaultEvents = typeof __propDef.events;
-export type TableHeadDefaultSlots = typeof __propDef.slots;
-export default class TableHeadDefault extends SvelteComponent<TableHeadDefaultProps, TableHeadDefaultEvents, TableHeadDefaultSlots> {
+    slots(): {};
+}
+export type TableHeadDefaultProps<Item extends {
+    id: string;
+}> = ReturnType<__sveltets_Render<Item>['props']>;
+export type TableHeadDefaultEvents<Item extends {
+    id: string;
+}> = ReturnType<__sveltets_Render<Item>['events']>;
+export type TableHeadDefaultSlots<Item extends {
+    id: string;
+}> = ReturnType<__sveltets_Render<Item>['slots']>;
+export default class TableHeadDefault<Item extends {
+    id: string;
+}> extends SvelteComponent<TableHeadDefaultProps<Item>, TableHeadDefaultEvents<Item>, TableHeadDefaultSlots<Item>> {
 }
 export {};

package/dist/ui/table/head/TableHeadNumber.svelte

@@ -1,68 +1,59 @@
-<script lang="ts">
-	import { onMount } from 'svelte'
-	import type { TippyInstance } from '../../../utils/tippy.js'
-	import debounce from 'debounce'
-	import { goto } from '$app/navigation'
-	import { page } from '$app/stores'
-
-	import { DropDown } from '../../menu/index.js'
-	import { InputNumber } from '../../input/index.js'
-	import { urlParam } from '../../../store/param.js'
-	import { jsonParse } from '../../../utils/jsonParse.js'
-	import type { TableField } from '../field.js'
-	import { mdiFilterMultipleOutline } from '@mdi/js'
-	import { Icon } from '../../icon/index.js'
-
-	export let field: TableField
-
-	let tip: TippyInstance
-	type Range = { min: number | undefined; max: number | undefined }
-
-	let { min, max } = initRange($page.url)
-	onMount(() => page.subscribe(({ url }) => ({ min, max } = initRange(url))))
-
-	function initRange({ searchParams }: URL) {
-		return jsonParse<Range>(searchParams.get(field.key), {
-			min: undefined,
-			max: undefined
-		})
-	}
-
-	const udpateUrl = debounce(() => {
-		if (isDefined(min) || isDefined(max)) {
-			goto(
-				$urlParam.with(
-					{
-						[field.key]: JSON.stringify({
-							...(isDefined(min) ? { min } : {}),
-							...(isDefined(max) ? { max } : {})
-						})
-					},
-					'skip',
-					'take'
-				),
-				{
-					noScroll: true,
-					keepFocus: true
-				}
-			)
-			return
-		}
-		goto($urlParam.without(field.key, 'skip', 'take'), { noScroll: true, keepFocus: true })
-	}, 250)
-
-	function handleReset() {
-		min = undefined
-		max = undefined
-		tip.hide()
-		goto($urlParam.without(field.key, 'skip', 'take'), { noScroll: true, keepFocus: true })
-	}
-
-	function isDefined(v: number | undefined | null): v is number {
-		return typeof v === 'number'
-	}
-
-	$: isNegatifRange = isDefined(min) && isDefined(max) && max < min
+<script generics="Item extends {id: string}">import { onMount } from "svelte";
+import debounce from "debounce";
+import { goto } from "$app/navigation";
+import { page } from "$app/stores";
+import { DropDown } from "../../menu/index.js";
+import { InputNumber } from "../../input/index.js";
+import { urlParam } from "../../../store/param.js";
+import { jsonParse } from "../../../utils/jsonParse.js";
+import { mdiFilterMultipleOutline, mdiSortAscending, mdiSortDescending } from "@mdi/js";
+import { Icon } from "../../icon/index.js";
+import OrderButtons from "./OrderButtons.svelte";
+export let field;
+let tip;
+let { min, max, order } = initRange($page.url);
+onMount(() => page.subscribe(({ url }) => ({ min, max, order } = initRange(url))));
+function initRange({ searchParams }) {
+  return jsonParse(searchParams.get(field.key), {
+    min: void 0,
+    max: void 0,
+    order: void 0
+  });
+}
+const updateUrl = debounce(() => {
+  if (isDefined(min) || isDefined(max) || order) {
+    goto(
+      $urlParam.with(
+        {
+          [field.key]: JSON.stringify({
+            ...isDefined(min) ? { min } : {},
+            ...isDefined(max) ? { max } : {},
+            ...order ? { order } : {}
+          })
+        },
+        "skip",
+        "take"
+      ),
+      {
+        noScroll: true,
+        keepFocus: true
+      }
+    );
+    return;
+  }
+  goto($urlParam.without(field.key, "skip", "take"), { noScroll: true, keepFocus: true });
+}, 250);
+function handleReset() {
+  min = void 0;
+  max = void 0;
+  tip.hide();
+  goto($urlParam.without(field.key, "skip", "take"), { noScroll: true, keepFocus: true });
+}
+function isDefined(v) {
+  return typeof v === "number";
+}
+$:
+  isNegatifRange = isDefined(min) && isDefined(max) && max < min;
 </script>
 
 <th class="p-1">
@@ -92,13 +83,31 @@
 					{/if}
 				</span>
 			{/if}
+			{#if order}
+				<Icon
+					path={order === 'asc' ? mdiSortAscending : mdiSortDescending}
+					size={18}
+					class="fill-primary"
+				/>
+			{/if}
 		</button>
 
+		{#if field.sortable !== false}
+			<OrderButtons
+				bind:order
+				on:change={() => {
+					updateUrl()
+					tip.hide()
+				}}
+			/>
+			<div class="divider"></div>
+			<span class="p-1 py-1 text-sm font-semibold opacity-70">Filtre:</span>
+		{/if}
 		<form class="grid grid-cols-2 gap-2 p-1" on:submit|preventDefault={() => tip.hide()}>
-			<InputNumber bind:value={min} on:input={udpateUrl} input={{ placeholder: 'Min' }} />
+			<InputNumber bind:value={min} on:input={updateUrl} input={{ placeholder: 'Min' }} />
 			<InputNumber
 				bind:value={max}
-				on:input={udpateUrl}
+				on:input={updateUrl}
 				hint={isNegatifRange ? 'Doit être plus grand' : ''}
 				input={{ placeholder: 'Max' }}
 			/>

package/dist/ui/table/head/TableHeadNumber.svelte.d.ts

@@ -1,17 +1,27 @@
 import { SvelteComponent } from "svelte";
 import type { TableField } from '../field.js';
-declare const __propDef: {
-    props: {
-        field: TableField;
+declare class __sveltets_Render<Item extends {
+    id: string;
+}> {
+    props(): {
+        field: TableField<Item>;
     };
-    events: {
+    events(): {} & {
         [evt: string]: CustomEvent<any>;
     };
-    slots: {};
-};
-export type TableHeadNumberProps = typeof __propDef.props;
-export type TableHeadNumberEvents = typeof __propDef.events;
-export type TableHeadNumberSlots = typeof __propDef.slots;
-export default class TableHeadNumber extends SvelteComponent<TableHeadNumberProps, TableHeadNumberEvents, TableHeadNumberSlots> {
+    slots(): {};
+}
+export type TableHeadNumberProps<Item extends {
+    id: string;
+}> = ReturnType<__sveltets_Render<Item>['props']>;
+export type TableHeadNumberEvents<Item extends {
+    id: string;
+}> = ReturnType<__sveltets_Render<Item>['events']>;
+export type TableHeadNumberSlots<Item extends {
+    id: string;
+}> = ReturnType<__sveltets_Render<Item>['slots']>;
+export default class TableHeadNumber<Item extends {
+    id: string;
+}> extends SvelteComponent<TableHeadNumberProps<Item>, TableHeadNumberEvents<Item>, TableHeadNumberSlots<Item>> {
 }
 export {};

package/dist/ui/table/head/TableHeadSelect.svelte

@@ -1,50 +1,44 @@
-<script lang="ts">
-	import { derived } from 'svelte/store'
-	import { page } from '$app/stores'
-
-	import { jsonParse } from '../../../utils/jsonParse.js'
-	import type { TableField } from '../index.js'
-	import { DropDown } from '../../menu/index.js'
-	import { Icon } from '../../icon/index.js'
-	import { type Options, parseOptions } from '../../../utils/options.js'
-	import { urlParam } from '../../../store/param.js'
-	import { mdiOrderBoolAscendingVariant } from '@mdi/js'
-
-	export let field: TableField
-	export let options: Options
-	export let multiSelect = false
-	export let placeholder = 'No option'
-
-	let _options = initOptions($page.url)
-	page.subscribe(({ url }) => (_options = initOptions(url)))
-
-	$: optionsActive = _options.filter((option) => option.isActive)
-
-	function initOptions({ searchParams }: URL) {
-		const selection = searchParams.get(field.key)
-		const selections = jsonParse<string[]>(searchParams.get(field.key), [])
-
-		function getActive(value: string) {
-			if (!multiSelect) return selection === value
-			return selections.includes(value)
-		}
-
-		return parseOptions(options).map((option) => ({
-			...option,
-			isActive: getActive(option.value)
-		}))
-	}
-
-	const getHref = derived(urlParam, (params) => (value: string) => {
-		const selections = jsonParse<string[]>(params.get(field.key), [])
-		if (!multiSelect) return params.toggle({ [field.key]: value }, 'skip', 'take')
-		if (selections.includes(value)) {
-			const newSelections = selections.filter((v) => v !== value)
-			if (!newSelections.length) return params.without(field.key)
-			return params.with({ [field.key]: JSON.stringify(newSelections) }, 'skip', 'take')
-		}
-		return params.with({ [field.key]: JSON.stringify([...selections, value]) }, 'skip', 'take')
-	})
+<script generics="Item extends {id: string}">import { derived } from "svelte/store";
+import { page } from "$app/stores";
+import { jsonParse } from "../../../utils/jsonParse.js";
+import { DropDown } from "../../menu/index.js";
+import { Icon } from "../../icon/index.js";
+import { parseOptions } from "../../../utils/options.js";
+import { urlParam } from "../../../store/param.js";
+import { mdiOrderBoolAscendingVariant } from "@mdi/js";
+export let field;
+export let options;
+export let multiSelect = false;
+export let placeholder = "No option";
+let _options = initOptions($page.url);
+page.subscribe(({ url }) => _options = initOptions(url));
+$:
+  optionsActive = _options.filter((option) => option.isActive);
+function initOptions({ searchParams }) {
+  const selection = searchParams.get(field.key);
+  const selections = jsonParse(searchParams.get(field.key), []);
+  function getActive(value) {
+    if (!multiSelect)
+      return selection === value;
+    return selections.includes(value);
+  }
+  return parseOptions(options).map((option) => ({
+    ...option,
+    isActive: getActive(option.value)
+  }));
+}
+const getHref = derived(urlParam, (params) => (value) => {
+  const selections = jsonParse(params.get(field.key), []);
+  if (!multiSelect)
+    return params.toggle({ [field.key]: value }, "skip", "take");
+  if (selections.includes(value)) {
+    const newSelections = selections.filter((v) => v !== value);
+    if (!newSelections.length)
+      return params.without(field.key);
+    return params.with({ [field.key]: JSON.stringify(newSelections) }, "skip", "take");
+  }
+  return params.with({ [field.key]: JSON.stringify([...selections, value]) }, "skip", "take");
+});
 </script>
 
 <th class="p-1">

package/dist/ui/table/head/TableHeadSelect.svelte.d.ts

@@ -1,21 +1,31 @@
 import { SvelteComponent } from "svelte";
 import type { TableField } from '../index.js';
 import { type Options } from '../../../utils/options.js';
-declare const __propDef: {
-    props: {
-        field: TableField;
+declare class __sveltets_Render<Item extends {
+    id: string;
+}> {
+    props(): {
+        field: TableField<Item>;
         options: Options;
         multiSelect?: boolean | undefined;
         placeholder?: string | undefined;
     };
-    events: {
+    events(): {} & {
         [evt: string]: CustomEvent<any>;
     };
-    slots: {};
-};
-export type TableHeadSelectProps = typeof __propDef.props;
-export type TableHeadSelectEvents = typeof __propDef.events;
-export type TableHeadSelectSlots = typeof __propDef.slots;
-export default class TableHeadSelect extends SvelteComponent<TableHeadSelectProps, TableHeadSelectEvents, TableHeadSelectSlots> {
+    slots(): {};
+}
+export type TableHeadSelectProps<Item extends {
+    id: string;
+}> = ReturnType<__sveltets_Render<Item>['props']>;
+export type TableHeadSelectEvents<Item extends {
+    id: string;
+}> = ReturnType<__sveltets_Render<Item>['events']>;
+export type TableHeadSelectSlots<Item extends {
+    id: string;
+}> = ReturnType<__sveltets_Render<Item>['slots']>;
+export default class TableHeadSelect<Item extends {
+    id: string;
+}> extends SvelteComponent<TableHeadSelectProps<Item>, TableHeadSelectEvents<Item>, TableHeadSelectSlots<Item>> {
 }
 export {};

package/dist/ui/table/head/TableHeadString.svelte

@@ -1,17 +1,11 @@
-<script lang="ts">
-	import type { TippyInstance } from '../../../utils/tippy.js'
-	import { mdiMagnify } from '@mdi/js'
-	import { page } from '$app/stores'
-
-	import { DropDown } from '../../menu/index.js'
-	import { Icon } from '../../icon/index.js'
-	import { InputSearch } from '../../input/index.js'
-	import type { TableField } from '../index.js'
-
-	export let field: TableField
-
-	let tip: TippyInstance
-	let searchValue = $page.url.searchParams.get(field.key) || ''
+<script generics="Item extends {id: string}">import { mdiMagnify } from "@mdi/js";
+import { page } from "$app/stores";
+import { DropDown } from "../../menu/index.js";
+import { Icon } from "../../icon/index.js";
+import { InputSearch } from "../../input/index.js";
+export let field;
+let tip;
+let searchValue = $page.url.searchParams.get(field.key) || "";
 </script>
 
 <th class="p-1">

package/dist/ui/table/head/TableHeadString.svelte.d.ts

@@ -1,17 +1,27 @@
 import { SvelteComponent } from "svelte";
 import type { TableField } from '../index.js';
-declare const __propDef: {
-    props: {
-        field: TableField;
+declare class __sveltets_Render<Item extends {
+    id: string;
+}> {
+    props(): {
+        field: TableField<Item>;
     };
-    events: {
+    events(): {} & {
         [evt: string]: CustomEvent<any>;
     };
-    slots: {};
-};
-export type TableHeadStringProps = typeof __propDef.props;
-export type TableHeadStringEvents = typeof __propDef.events;
-export type TableHeadStringSlots = typeof __propDef.slots;
-export default class TableHeadString extends SvelteComponent<TableHeadStringProps, TableHeadStringEvents, TableHeadStringSlots> {
+    slots(): {};
+}
+export type TableHeadStringProps<Item extends {
+    id: string;
+}> = ReturnType<__sveltets_Render<Item>['props']>;
+export type TableHeadStringEvents<Item extends {
+    id: string;
+}> = ReturnType<__sveltets_Render<Item>['events']>;
+export type TableHeadStringSlots<Item extends {
+    id: string;
+}> = ReturnType<__sveltets_Render<Item>['slots']>;
+export default class TableHeadString<Item extends {
+    id: string;
+}> extends SvelteComponent<TableHeadStringProps<Item>, TableHeadStringEvents<Item>, TableHeadStringSlots<Item>> {
 }
 export {};

package/dist/ui/table/head/index.d.ts

@@ -1,6 +1,6 @@
 import type { ComponentProps } from 'svelte';
 import type { ComponentAndProps } from '../../../utils/component.js';
-import type { TableField, TableFieldType } from '../field.js';
+import type { ItemBase, TableField, TableFieldType } from '../field.js';
 import { default as TableHeadSelect } from './TableHeadSelect.svelte';
 import { default as TableHeadDate } from './TableHeadDate.svelte';
 import { default as TableHeadBoolean } from './TableHeadBoolean.svelte';
@@ -15,5 +15,5 @@ declare const tableHeadComponentRecord: {
     select: typeof TableHeadSelect;
     date: typeof TableHeadDate;
 };
-export declare function tableHeadComponent<T extends TableFieldType>(type: T, props: Omit<ComponentProps<InstanceType<(typeof tableHeadComponentRecord)[T]>>, 'field'>): (field: TableField) => ComponentAndProps;
+export declare function tableHeadComponent<T extends TableFieldType>(type: T, props: Omit<ComponentProps<InstanceType<(typeof tableHeadComponentRecord)[T]>>, 'field'>): <Item extends ItemBase>(field: TableField<Item>) => ComponentAndProps;
 export {};

package/dist/ui/tabs/Tabs.svelte

@@ -1,11 +1,8 @@
-<script lang="ts">
-	import { page } from '$app/stores'
-	import type { Tab } from './index.js'
-	import { Icon } from '../icon/index.js'
-
-	export let tabs: Tab[]
-	let klass = ''
-	export { klass as class }
+<script>import { page } from "$app/stores";
+import { Icon } from "../icon/index.js";
+export let tabs;
+let klass = "";
+export { klass as class };
 </script>
 
 <div

package/dist/ui/tabs/TabsIcon.svelte

@@ -1,34 +1,31 @@
-<script lang="ts">
-	import { page } from '$app/stores'
-	import { onMount } from 'svelte'
-
-	import { urlParam } from '../../store/index.js'
-	import { Icon } from '../icon/index.js'
-	import { parseOptions, type Options, type Option } from '../../utils/options.js'
-
-	export let options: Options
-	export let showLabel = false
-	export let key: string
-	export let defaultValue: string | undefined = undefined
-
-	let _options = getOptions($page.url)
-	onMount(() =>
-		page.subscribe(({ url }) => {
-			_options = getOptions(url)
-		})
-	)
-
-	function getOptions(url: URL) {
-		return parseOptions(options).map((option) => ({
-			...option,
-			isActive: getIsActive(option, url)
-		}))
-	}
-	function getIsActive(option: Option, { searchParams }: URL) {
-		if (searchParams.get(key) === option.value) return true
-		if (!searchParams.has(key)) return option.value === defaultValue
-		return false
-	}
+<script>import { page } from "$app/stores";
+import { onMount } from "svelte";
+import { urlParam } from "../../store/index.js";
+import { Icon } from "../icon/index.js";
+import { parseOptions } from "../../utils/options.js";
+export let options;
+export let showLabel = false;
+export let key;
+export let defaultValue = void 0;
+let _options = getOptions($page.url);
+onMount(
+  () => page.subscribe(({ url }) => {
+    _options = getOptions(url);
+  })
+);
+function getOptions(url) {
+  return parseOptions(options).map((option) => ({
+    ...option,
+    isActive: getIsActive(option, url)
+  }));
+}
+function getIsActive(option, { searchParams }) {
+  if (searchParams.get(key) === option.value)
+    return true;
+  if (!searchParams.has(key))
+    return option.value === defaultValue;
+  return false;
+}
 </script>
 
 <div class="flex items-center gap-[3px] rounded-lg bg-base-200 p-1">

package/dist/validation/zod.d.ts

@@ -103,41 +103,53 @@ export declare const z: {
         number: zod.ZodOptional<zod.ZodUnion<[zod.ZodObject<{
             min: zod.ZodOptional<zod.ZodNumber>;
             max: zod.ZodOptional<zod.ZodNumber>;
+            order: zod.ZodOptional<zod.ZodEnum<["asc", "desc"]>>;
         }, "strip", zod.ZodTypeAny, {
             min?: number | undefined;
             max?: number | undefined;
+            order?: "desc" | "asc" | undefined;
         }, {
             min?: number | undefined;
             max?: number | undefined;
+            order?: "desc" | "asc" | undefined;
         }>, zod.ZodPipeline<zod.ZodEffects<zod.ZodString, zod.RefinementCtx, string>, zod.ZodObject<{
             min: zod.ZodOptional<zod.ZodNumber>;
             max: zod.ZodOptional<zod.ZodNumber>;
+            order: zod.ZodOptional<zod.ZodEnum<["asc", "desc"]>>;
         }, "strip", zod.ZodTypeAny, {
             min?: number | undefined;
             max?: number | undefined;
+            order?: "desc" | "asc" | undefined;
         }, {
             min?: number | undefined;
             max?: number | undefined;
+            order?: "desc" | "asc" | undefined;
         }>>]>>;
         multiselect: zod.ZodOptional<zod.ZodUnion<[zod.ZodArray<zod.ZodString, "many">, zod.ZodPipeline<zod.ZodEffects<zod.ZodString, zod.RefinementCtx, string>, zod.ZodArray<zod.ZodString, "many">>]>>;
         range: zod.ZodOptional<zod.ZodUnion<[zod.ZodObject<{
             start: zod.ZodOptional<zod.ZodDate>;
             end: zod.ZodOptional<zod.ZodDate>;
+            order: zod.ZodOptional<zod.ZodEnum<["asc", "desc"]>>;
         }, "strip", zod.ZodTypeAny, {
             start?: Date | undefined;
             end?: Date | undefined;
+            order?: "desc" | "asc" | undefined;
         }, {
             start?: Date | undefined;
             end?: Date | undefined;
+            order?: "desc" | "asc" | undefined;
         }>, zod.ZodPipeline<zod.ZodEffects<zod.ZodString, zod.RefinementCtx, string>, zod.ZodObject<{
             start: zod.ZodOptional<zod.ZodDate>;
             end: zod.ZodOptional<zod.ZodDate>;
+            order: zod.ZodOptional<zod.ZodEnum<["asc", "desc"]>>;
         }, "strip", zod.ZodTypeAny, {
             start?: Date | undefined;
             end?: Date | undefined;
+            order?: "desc" | "asc" | undefined;
         }, {
             start?: Date | undefined;
             end?: Date | undefined;
+            order?: "desc" | "asc" | undefined;
         }>>]>>;
         boolean: zod.ZodOptional<zod.ZodEffects<zod.ZodEnum<["true", "false"]>, boolean, "true" | "false">>;
     };

package/dist/validation/zod.js

@@ -59,12 +59,14 @@ const relations = {
 const filter = {
     number: json({
         min: zod.number().optional(),
-        max: zod.number().optional()
+        max: zod.number().optional(),
+        order: zod.enum(['asc', 'desc']).optional()
     }).optional(),
     multiselect: jsonArray(zod.string()).optional(),
     range: json({
         start: zod.coerce.date().optional(),
-        end: zod.coerce.date().optional()
+        end: zod.coerce.date().optional(),
+        order: zod.enum(['asc', 'desc']).optional()
     }).optional(),
     boolean: zod
         .enum(['true', 'false'])

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "fuma",
-	"version": "1.0.16",
+	"version": "1.0.18",
 	"description": "My fullstack material build with sveltekit, daisyui, zod, prisma, lucia",
 	"author": {
 		"name": "Jonas Voisard",