fuma 0.5.1 → 1.0.0

package/dist/ui/table/TableFieldsEdition.svelte

@@ -1,54 +1,60 @@
-<script generics="Item extends {id: string}">import {
-  mdiCheck,
-  mdiCheckCircleOutline,
-  mdiCircleSmall,
-  mdiDotsHorizontal,
-  mdiDrag,
-  mdiPlus
-} from "@mdi/js";
-import { goto } from "$app/navigation";
-import { page } from "$app/stores";
-import { urlParam } from "../../store/param.js";
-import { listEditable } from "../../action/list/index.js";
-import { jsonParse } from "../../utils/jsonParse.js";
-import { context } from "./context.js";
-import { Icon } from "../icon/index.js";
-import { DropDown } from "../menu/index.js";
-export let fields;
-export let key;
-export let onCreateField = void 0;
-let tip;
-const { KEY_FIELDS_VISIBLE, KEY_FIELDS_HIDDEN, KEY_FIELDS_ORDER } = context.get(key);
-function getFieldHref(field) {
-  if (field.locked)
-    return;
-  const url = toggleParam(field.visible ? KEY_FIELDS_HIDDEN : KEY_FIELDS_VISIBLE, field.key);
-  if (url.searchParams.has(field.key)) {
-    url.searchParams.delete(field.key);
-    url.searchParams.delete("skip");
-    url.searchParams.delete("take");
-  }
-  return url.pathname + url.search;
-}
-function toggleParam(paramKey, fieldKey) {
-  const url = new URL($page.url);
-  const fieldsKeys = jsonParse($page.url.searchParams.get(paramKey), []);
-  if (!fieldsKeys.includes(fieldKey))
-    fieldsKeys.push(fieldKey);
-  else
-    fieldsKeys.splice(fieldsKeys.indexOf(fieldKey), 1);
-  if (fieldsKeys.length)
-    url.searchParams.set(paramKey, JSON.stringify(fieldsKeys));
-  else
-    url.searchParams.delete(paramKey);
-  return url;
-}
-function handleReorder(newFieldsOrder) {
-  fields = newFieldsOrder;
-  const fieldsOrder = fields.map((f) => f.key);
-  const newUrl = $urlParam.with({ [KEY_FIELDS_ORDER]: JSON.stringify(fieldsOrder) });
-  goto(newUrl, { replaceState: true, noScroll: true, keepFocus: true });
-}
+<script lang="ts" generics="Item extends {id: string}">
+	import {
+		mdiCheck,
+		mdiCheckCircleOutline,
+		mdiCircleSmall,
+		mdiDotsHorizontal,
+		mdiDrag,
+		mdiPlus
+	} from '@mdi/js'
+	import type { TippyInstance } from '../../utils/tippy.js'
+	import { goto } from '$app/navigation'
+	import { page } from '$app/stores'
+	import { urlParam } from '../../store/param.js'
+	import { listEditable } from '../../action/list/index.js'
+	import { jsonParse } from '../../utils/jsonParse.js'
+	import { context } from './context.js'
+	import { Icon } from '../icon/index.js'
+	import { DropDown } from '../menu/index.js'
+	import type { TableField } from './index.js'
+
+	export let fields: TableField<Item>[]
+	export let key: string
+	export let onCreateField: (() => void) | undefined = undefined
+
+	let tip: TippyInstance
+
+	const { KEY_FIELDS_VISIBLE, KEY_FIELDS_HIDDEN, KEY_FIELDS_ORDER } = context.get(key)
+
+	function getFieldHref(field: TableField) {
+		if (field.locked) return
+		const url = toggleParam(field.visible ? KEY_FIELDS_HIDDEN : KEY_FIELDS_VISIBLE, field.key)
+		if (url.searchParams.has(field.key)) {
+			url.searchParams.delete(field.key)
+			url.searchParams.delete('skip')
+			url.searchParams.delete('take')
+		}
+		return url.pathname + url.search
+	}
+
+	function toggleParam(paramKey: string, fieldKey: string): URL {
+		const url = new URL($page.url)
+		const fieldsKeys = jsonParse<string[]>($page.url.searchParams.get(paramKey), [])
+		if (!fieldsKeys.includes(fieldKey)) fieldsKeys.push(fieldKey)
+		else fieldsKeys.splice(fieldsKeys.indexOf(fieldKey), 1)
+
+		if (fieldsKeys.length) url.searchParams.set(paramKey, JSON.stringify(fieldsKeys))
+		else url.searchParams.delete(paramKey)
+
+		return url
+	}
+
+	function handleReorder(newFieldsOrder: TableField<Item>[]) {
+		fields = newFieldsOrder
+		const fieldsOrder = fields.map((f) => f.key)
+		const newUrl = $urlParam.with({ [KEY_FIELDS_ORDER]: JSON.stringify(fieldsOrder) })
+		goto(newUrl, { replaceState: true, noScroll: true, keepFocus: true })
+	}
 </script>
 
 <th class="sticky right-0 z-10 p-0 px-1" align="right">

package/dist/ui/table/TableHead.svelte

@@ -1,23 +1,22 @@
-<script generics="Item extends {id: string}">import { component } from "../../utils/component.js";
-import { TableFieldsEdition } from "./index.js";
-import { tableHeadComponent } from "./head/index.js";
-import TableHeadDefault from "./head/TableHeadDefault.svelte";
-export let fields;
-export let key;
-export let onCreateField = void 0;
-function getComponent(field) {
-  if (field.type === "select" || field.type === "multiselect")
-    return tableHeadComponent(field.type, { options: field.options || [] })(field);
-  if (field.type)
-    return tableHeadComponent(field.type, {})(field);
-  if (!field.head)
-    return component(TableHeadDefault, { field });
-  if (typeof field.head === "function")
-    return field.head(field);
-  if (typeof field.head === "string")
-    return tableHeadComponent(field.head, {})(field);
-  return field.head;
-}
+<script lang="ts" generics="Item extends {id: string}">
+	import { component, type ComponentAndProps } from '../../utils/component.js'
+	import { type TableField, TableFieldsEdition } from './index.js'
+	import { tableHeadComponent } from './head/index.js'
+	import TableHeadDefault from './head/TableHeadDefault.svelte'
+
+	export let fields: TableField<Item>[]
+	export let key: string
+	export let onCreateField: (() => void) | undefined = undefined
+
+	function getComponent(field: TableField): ComponentAndProps {
+		if (field.type === 'select' || field.type === 'multiselect')
+			return tableHeadComponent(field.type, { options: field.options || [] })(field)
+		if (field.type) return tableHeadComponent(field.type, {})(field)
+		if (!field.head) return component(TableHeadDefault, { field })
+		if (typeof field.head === 'function') return field.head(field)
+		if (typeof field.head === 'string') return tableHeadComponent(field.head, {})(field)
+		return field.head
+	}
 </script>
 
 <thead>

package/dist/ui/table/TableViewSelect.svelte

@@ -1,40 +1,53 @@
-<script>import { onMount } from "svelte";
-import { mdiChevronDown, mdiContentSaveEditOutline, mdiPlus } from "@mdi/js";
-import { page } from "$app/stores";
-import { enhance } from "$app/forms";
-import { Icon } from "../icon/index.js";
-import { Dialog } from "../dialog/index.js";
-import { DropDown } from "../menu/index.js";
-import { InputText } from "../input/index.js";
-import { useForm } from "../../validation/form.js";
-export let key;
-export let views;
-export let action = "";
-export let actionCreate = "?/view_create";
-export let actionUpdate = "?/view_update";
-export let actionDelete = "?/view_delete";
-let dialog;
-const form = useForm({
-  onSuccess() {
-    dialog.close();
-  }
-});
-let query = getQuery($page.url);
-let selectedView = views.find((v) => v.query === query);
-let isNewView = !!query && !selectedView;
-onMount(
-  () => page.subscribe(({ url }) => {
-    query = getQuery(url);
-    selectedView = views.find((v) => v.query === query);
-    isNewView = !!query && !selectedView;
-  })
-);
-function getQuery({ searchParams }) {
-  const searchParam = new URLSearchParams(searchParams);
-  searchParam.delete("skip");
-  searchParam.delete("take");
-  return searchParam.toString();
-}
+<script lang="ts">
+	import { onMount } from 'svelte'
+	import { mdiChevronDown, mdiContentSaveEditOutline, mdiPlus } from '@mdi/js'
+	import { page } from '$app/stores'
+	import { enhance } from '$app/forms'
+
+	import { Icon } from '../icon/index.js'
+	import { Dialog } from '../dialog/index.js'
+	import { DropDown } from '../menu/index.js'
+	import { InputText } from '../input/index.js'
+	import { useForm } from '../../validation/form.js'
+
+	type View = {
+		id: string
+		name: string
+		query: string
+	}
+
+	export let key: string
+	export let views: View[]
+	export let action = ''
+	export let actionCreate = '?/view_create'
+	export let actionUpdate = '?/view_update'
+	export let actionDelete = '?/view_delete'
+
+	let dialog: HTMLDialogElement
+	const form = useForm({
+		onSuccess() {
+			dialog.close()
+		}
+	})
+
+	let query = getQuery($page.url)
+	let selectedView = views.find((v) => v.query === query)
+	let isNewView = !!query && !selectedView
+
+	onMount(() =>
+		page.subscribe(({ url }) => {
+			query = getQuery(url)
+			selectedView = views.find((v) => v.query === query)
+			isNewView = !!query && !selectedView
+		})
+	)
+
+	function getQuery({ searchParams }: URL) {
+		const searchParam = new URLSearchParams(searchParams)
+		searchParam.delete('skip')
+		searchParam.delete('take')
+		return searchParam.toString()
+	}
 </script>
 
 <DropDown>

package/dist/ui/table/cell/TableCellArray.svelte

@@ -1,6 +1,8 @@
-<script>import { Badge } from "../../badge/index.js";
-import { component } from "../../../utils/component.js";
-export let value;
+<script lang="ts">
+	import { Badge } from '../../badge/index.js'
+	import { component, type ComponentAndProps } from '../../../utils/component.js'
+
+	export let value: (ComponentAndProps | string | number | boolean)[]
 </script>
 
 <td>

package/dist/ui/table/cell/TableCellBoolean.svelte

@@ -1,6 +1,7 @@
-<script>import { mdiCheck, mdiClose } from "@mdi/js";
-import { Icon } from "../../icon/index.js";
-export let value;
+<script lang="ts">
+	import { mdiCheck, mdiClose } from '@mdi/js'
+	import { Icon } from '../../icon/index.js'
+	export let value: boolean
 </script>
 
 <td>

package/dist/ui/table/cell/TableCellNumber.svelte

@@ -1,4 +1,5 @@
-<script>export let value;
+<script lang="ts">
+	export let value: number
 </script>
 
 <td>

package/dist/ui/table/cell/TableCellString.svelte

@@ -1,5 +1,8 @@
-<script>export let value;
-export let field;
+<script lang="ts">
+	import type { TableField } from '../index.js'
+
+	export let value: string
+	export let field: TableField
 </script>
 
 <td data-field-key={field.key} data-field-type={field.type === 'textarea' ? 'textarea' : 'string'}>

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

@@ -1,6 +1,9 @@
-<script>import { mdiCheck, mdiClose } from "@mdi/js";
-import TableHeadSelect from "./TableHeadSelect.svelte";
-export let field;
+<script lang="ts">
+	import { mdiCheck, mdiClose } from '@mdi/js'
+	import type { TableField } from '../index.js'
+	import TableHeadSelect from './TableHeadSelect.svelte'
+
+	export let field: TableField
 </script>
 
 <TableHeadSelect

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

@@ -1,50 +1,57 @@
-<script>import { goto } from "$app/navigation";
-import { page } from "$app/stores";
-import { mdiCalendarFilterOutline } from "@mdi/js";
-import { DropDown } from "../../menu/index.js";
-import { InputTime } from "../../input/index.js";
-import { formatRange } from "../../range/format.js";
-import { RangePicker } from "../../range/index.js";
-import { urlParam } from "../../../store/param.js";
-import { jsonParse } from "../../../utils/jsonParse.js";
-import { Icon } from "../../icon/index.js";
-export let field;
-let dropDown;
-let rangePicker;
-const initialValue = jsonParse(
-  $page.url.searchParams.get(field.key),
-  {}
-);
-let range = {
-  start: initialValue.start ? new Date(initialValue.start) : null,
-  end: initialValue.end ? new Date(initialValue.end) : null
-};
-$:
-  isValidPeriod = !!range.start && !!range.end;
-function handleSubmit() {
-  dropDown.hide();
-  if (!isValidPeriod)
-    return;
-  goto(
-    $urlParam.with(
-      {
-        [field.key]: JSON.stringify({
-          start: range.start?.toJSON(),
-          end: range.end?.toJSON()
-        })
-      },
-      "skip",
-      "take"
-    ),
-    { replaceState: true, noScroll: true }
-  );
-}
-function handleReset() {
-  dropDown.hide();
-  range = { start: null, end: null };
-  rangePicker.clear();
-  goto($urlParam.without(field.key, "skip", "take"), { replaceState: true, noScroll: true });
-}
+<script lang="ts">
+	import { goto } from '$app/navigation'
+	import { page } from '$app/stores'
+	import { mdiCalendarFilterOutline } from '@mdi/js'
+
+	import { DropDown } from '../../menu/index.js'
+	import { InputTime } from '../../input/index.js'
+	import type { TableField } from '../index.js'
+	import { formatRange } from '../../range/format.js'
+	import { RangePicker } from '../../range/index.js'
+	import { urlParam } from '../../../store/param.js'
+	import { jsonParse } from '../../../utils/jsonParse.js'
+	import { Icon } from '../../icon/index.js'
+
+	export let field: Omit<TableField, 'getCell' | 'type'>
+
+	let dropDown: DropDown
+	let rangePicker: RangePicker
+	const initialValue = jsonParse<{ start?: string; end?: string }>(
+		$page.url.searchParams.get(field.key),
+		{}
+	)
+
+	let range = {
+		start: initialValue.start ? new Date(initialValue.start) : null,
+		end: initialValue.end ? new Date(initialValue.end) : null
+	}
+
+	$: isValidPeriod = !!range.start && !!range.end
+
+	function handleSubmit() {
+		dropDown.hide()
+		if (!isValidPeriod) return
+		goto(
+			$urlParam.with(
+				{
+					[field.key]: JSON.stringify({
+						start: range.start?.toJSON(),
+						end: range.end?.toJSON()
+					})
+				},
+				'skip',
+				'take'
+			),
+			{ replaceState: true, noScroll: true }
+		)
+	}
+
+	function handleReset() {
+		dropDown.hide()
+		range = { start: null, end: null }
+		rangePicker.clear()
+		goto($urlParam.without(field.key, 'skip', 'take'), { replaceState: true, noScroll: true })
+	}
 </script>
 
 <th class="p-1">

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

@@ -1,5 +1,8 @@
-<script>import { tip } from "../../../action/tip.js";
-export let field;
+<script lang="ts">
+	import type { TableField } from '../index.js'
+	import { tip } from '../../../action/tip.js'
+
+	export let field: TableField
 </script>
 
 <th use:tip={{ disable: !field.hint, content: field.hint }}>

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

@@ -1,56 +1,68 @@
-<script>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 } from "@mdi/js";
-import { Icon } from "../../icon/index.js";
-export let field;
-let tip;
-let { min, max } = initRange($page.url);
-onMount(() => page.subscribe(({ url }) => ({ min, max } = initRange(url))));
-function initRange({ searchParams }) {
-  return jsonParse(searchParams.get(field.key), {
-    min: void 0,
-    max: void 0
-  });
-}
-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 = 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 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>
 
 <th class="p-1">