firstly 0.3.0 → 0.4.0

package/esm/ui/internals/select/MultiSelectMelt.svelte

@@ -1,260 +0,0 @@
-<script lang="ts">
-	import { createCombobox, createSync, type ComboboxOptionProps } from '@melt-ui/svelte'
-	import { createEventDispatcher, onMount } from 'svelte'
-	import { fly } from 'svelte/transition'
-
-	import {
-		LibIcon_Check,
-		LibIcon_Cross,
-		LibIcon_MultiCheck,
-		LibIcon_Search,
-		tw,
-		type BaseItem,
-		type FF_Icon,
-	} from '../../../internals'
-	import Icon from '../../Icon.svelte'
-
-	export let id: string
-	export let disabled: boolean = false
-	export let placeholder: string = ''
-	export let items: BaseItem[] = []
-	let totalCount: number | undefined = undefined
-
-	export let loadOptions:
-		| ((str: string) => Promise<{ items: BaseItem[]; totalCount: number }>)
-		| undefined = undefined
-	export let values: (string | null)[] | undefined = undefined
-	export let clearable = false
-
-	const dispatch = createEventDispatcher()
-
-	function dispatchSelectedValues(_data: BaseItem[] | undefined) {
-		values = _data?.map((_data) => _data.id)
-		dispatch('selected', _data)
-	}
-
-	onMount(async () => {
-		if (loadOptions) {
-			const lo = await loadOptions('')
-			items = lo.items
-			totalCount = lo.totalCount
-			filteredItems = items
-		}
-	})
-
-	const getDefaultValues = (_selectedValue: (string | null)[] | undefined) => {
-		if (!items) {
-			return []
-		}
-
-		const f = items.filter((c) => (_selectedValue ?? []).includes(String(c.id)))
-		if (f) {
-			return f.map((c) => toOption(c))
-		}
-
-		return []
-	}
-
-	const toOption = (
-		item: BaseItem,
-	): ComboboxOptionProps<BaseItem> & {
-		icon?: FF_Icon
-	} => ({
-		value: item,
-		label: item.caption,
-		// icon: item.icon,
-		// disabled: item.disabled,
-	})
-
-	const {
-		elements: { menu, input, option },
-		states: { open, inputValue, touchedInput, selected: localSelected },
-		helpers: { isSelected },
-	} = createCombobox<BaseItem, true>({
-		forceVisible: true,
-		multiple: true,
-		disabled,
-		ids: { label: id },
-	})
-
-	const clearSelection = () => {
-		sync.selected(undefined)
-	}
-
-	let debounceTimer: ReturnType<typeof setTimeout>
-	const debounce = (callback: () => void) => {
-		clearTimeout(debounceTimer)
-		debounceTimer = setTimeout(
-			callback,
-			// debounce only if we have a load option
-			loadOptions ? 444 : 0,
-		)
-	}
-
-	const sync = createSync({ selected: localSelected })
-	$: items &&
-		sync.selected(getDefaultValues(values), (v) => {
-			const list = (v ?? []).map((c) => c.value.id)
-
-			// Create a map to count occurrences of each element
-			// TODO: switch to: Use SvelteMap instead  svelte/prefer-svelte-reactivity
-			// eslint-disable-next-line
-			const countMap: Map<string | null, number> = new Map()
-
-			list.forEach((item) => {
-				countMap.set(item, (countMap.get(item) || 0) + 1)
-			})
-
-			// Filter the list to include only elements that occur exactly once
-			const uniqueList: (string | null)[] = list.filter((item) => countMap.get(item) === 1)
-
-			const newIds = uniqueList.sort().join(',')
-			const oldSelectedValues = (values ?? []).sort().join(',')
-
-			if (newIds !== oldSelectedValues) {
-				dispatchSelectedValues(
-					v === undefined
-						? undefined
-						: v.filter((c) => uniqueList.includes(c.value.id)).map((c) => c.value),
-				)
-			}
-		})
-
-	const labelToDisplayInInput = (_localSelected: typeof $localSelected) => {
-		if (_localSelected === undefined || _localSelected.length === 0) {
-			return ''
-		}
-		if (_localSelected.length === 1) {
-			return _localSelected[0].label ?? ''
-		}
-		return `${_localSelected.length} éléments`
-	}
-	$: $inputValue = labelToDisplayInInput($localSelected)
-
-	const iconToDisplayInInput = (_localSelected: typeof $localSelected): FF_Icon => {
-		if (_localSelected === undefined || _localSelected.length === 0) {
-			return { data: LibIcon_Search }
-		}
-		if (_localSelected.length === 1) {
-			return _localSelected[0].value.icon ?? { data: LibIcon_Search }
-		}
-		return { data: LibIcon_MultiCheck }
-	}
-
-	const isChecked = (_localSelected: typeof $localSelected, _item: BaseItem) => {
-		const f = (_localSelected ?? []).filter((c) => c.value?.id === _item.id)
-		if (f.length > 0) {
-			return true
-		}
-		return false
-	}
-
-	let filteredItems = items
-	const calcFilteredItems = (touched: boolean, str: string, values: any) => {
-		if (touched && !str.endsWith(' éléments')) {
-			debounce(async () => {
-				const normalizedInput = str.toLowerCase()
-
-				// In a Multi select we can't filter to the server.
-				// If we do I don't knwo what to set to $inputValue. and and list gets shorter... So what do we do about items that are selected but not in the list anymore (because of the filter) ?
-				// if (loadOptions) {
-				//   const lo = await loadOptions(normalizedInput)
-				//   items = lo.items
-				//   totalCount = lo.totalCount
-				//   filteredItems = items
-				// } else {
-				filteredItems = items.filter((item) => {
-					return item.caption?.toLowerCase().includes(normalizedInput)
-				})
-				// }
-			})
-		} else {
-			filteredItems = items
-		}
-	}
-
-	$: calcFilteredItems($touchedInput, $inputValue, values)
-</script>
-
-<div class="input flex min-w-0 items-center">
-	<div class="relative">
-		{#if iconToDisplayInInput($localSelected)}
-			{@const ico = iconToDisplayInInput($localSelected)}
-			<Icon data={ico?.data} class={tw(['relative', ico?.class])} style={ico?.style} size={ico?.size}
-			></Icon>
-		{/if}
-	</div>
-	<!-- {id} -->
-	<input
-		{...$input}
-		use:$input.action
-		class="-mr-5 -ml-8 h-full min-w-0 flex-grow bg-transparent px-10"
-		{placeholder}
-	/>
-	<div class="pointer-events-none relative right-0 flex gap-2">
-		{#if clearable && $localSelected && $localSelected.length > 0}
-			<button on:click={clearSelection} class="pointer-events-auto">
-				<Icon data={LibIcon_Cross}></Icon>
-			</button>
-		{/if}
-		<!-- {#if $open}
-      <Icon data={LibIcon_ChevronUp}></Icon>
-    {:else}
-      <Icon data={LibIcon_ChevronDown}></Icon>
-    {/if} -->
-	</div>
-</div>
-
-{#if $open}
-	<ul
-		class="z-50 flex max-h-[300px] flex-col overflow-hidden rounded-lg border border-base-content/20"
-		{...$menu}
-		use:$menu.action
-		transition:fly={{ duration: 150, y: -5 }}
-	>
-		<!-- svelte-ignore a11y-no-noninteractive-tabindex -->
-		<div class="flex max-h-full flex-col gap-0 overflow-y-auto bg-base-100 py-2" tabindex="0">
-			{#each filteredItems as item, index (index)}
-				<li
-					{...$option(toOption(item))}
-					use:$option.action
-					class="relative flex cursor-pointer scroll-my-2 items-center rounded-md px-1
-          py-2
-          data-[disabled]:opacity-50
-          data-[highlighted]:bg-primary
-					data-[highlighted]:text-primary-content"
-				>
-					{#if isChecked($localSelected, item)}
-						<Icon data={LibIcon_Check} class="w-6"></Icon>
-					{:else}
-						<!-- just to book the place -->
-						<span class="w-6"></span>
-					{/if}
-					{#if item.icon?.data}
-						<Icon
-							data={item.icon.data}
-							class={tw(['flex-shrink-0', item.icon.class])}
-							style={item.icon.style}
-							size={item.icon.size}
-						></Icon>
-					{/if}
-					<div class="pl-2 {item.class}">
-						<span class="font-medium">{item.caption}</span>
-					</div>
-				</li>
-			{:else}
-				<li class="relative cursor-pointer rounded-md py-1 pl-8 pr-4">Aucun résultat</li>
-			{/each}
-		</div>
-		{#if totalCount}
-			<div class="z-50 bg-base-300 text-center text-xs">
-				{#if items.length < totalCount}
-					({items.length} / {totalCount})
-				{:else}
-					<!-- yes, items.length can be bigger if the selected item is not in the limit -->
-					({items.length})
-				{/if}
-			</div>
-		{/if}
-	</ul>
-{/if}

package/esm/ui/internals/select/MultiSelectMelt.svelte.d.ts

@@ -1,32 +0,0 @@
-import { type BaseItem } from '../../../internals';
-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;
-    };
-    z_$$bindings?: Bindings;
-}
-declare const MultiSelectMelt: $$__sveltets_2_IsomorphicComponent<{
-    id: string;
-    disabled?: boolean;
-    placeholder?: string;
-    items?: BaseItem[];
-    loadOptions?: ((str: string) => Promise<{
-        items: BaseItem[];
-        totalCount: number;
-    }>) | undefined;
-    values?: (string | null)[] | undefined;
-    clearable?: boolean;
-}, {
-    selected: CustomEvent<any>;
-} & {
-    [evt: string]: CustomEvent<any>;
-}, {}, {}, string>;
-type MultiSelectMelt = InstanceType<typeof MultiSelectMelt>;
-export default MultiSelectMelt;

package/esm/ui/internals/select/Select2.svelte

@@ -1,88 +0,0 @@
-<script lang="ts">
-	import Svelecte from 'svelecte'
-
-	import { LibIcon_Search, type BaseItem } from '../../../internals'
-	import Icon from '../../Icon.svelte'
-
-	interface Props {
-		value?: string | undefined
-		clearable?: boolean
-		items?: BaseItem[] | undefined
-		placeholder?: string | undefined
-
-		onChange?: (value: string | undefined) => void
-
-		multiple?: boolean
-	}
-
-	let {
-		value = $bindable(undefined),
-		clearable = false,
-		items = [],
-		placeholder = '',
-		multiple = false,
-		onChange,
-	}: Props = $props()
-</script>
-
-<Svelecte
-	i18n={{
-		nomatch: 'Aucun résultat',
-	}}
-	options={items}
-	bind:value
-	{clearable}
-	{placeholder}
-	{multiple}
-	{onChange}
->
-	{#snippet prepend()}
-		{value}
-		<Icon data={LibIcon_Search} class="mr-2 ml-3"></Icon>
-	{/snippet}
-
-	{#snippet option(opt, inputValue)}
-		{@const item = opt as BaseItem}
-		<div class="flex items-center">
-			<Icon data={item.icon?.data} class="mr-2"></Icon>
-			{item.caption}
-		</div>
-	{/snippet}
-</Svelecte>
-
-<style>
-	:global(.svelecte) {
-		--sv-min-height: 3rem;
-		--sv-bg: var(--color-base-100, #fff);
-		--sv-disabled-bg: #eee;
-		--sv-border: 1px solid #414a54;
-		--sv-border-radius: var(--radius-field, 4px);
-		--sv-general-padding: 4px;
-		--sv-control-bg: var(--sv-bg);
-		--sv-item-wrap-padding: 3px 3px 3px 6px;
-		--sv-item-selected-bg: var(--color-base-200, #efefef);
-		--sv-item-btn-color: var(--color-base-content, #000);
-		--sv-item-btn-color-hover: #777; /* same as icon-color-hover in default theme */
-		--sv-item-btn-bg: var(--color-base-100, #efefef);
-		--sv-item-btn-bg-hover: var(--color-base-200, #ddd);
-		--sv-icon-color: var(--color-base-content, #efefef);
-		--sv-icon-color-hover: #777;
-		--sv-icon-bg: transparent;
-		--sv-icon-size: 20px;
-		--sv-separator-bg: var(--color-neutral-content, #ccc);
-		--sv-btn-border: 0;
-		--sv-placeholder-color: #ccccd6;
-		--sv-dropdown-bg: var(--sv-bg);
-		--sv-dropdown-offset: 1px;
-		--sv-dropdown-border: 1px solid rgba(0, 0, 0, 0.15);
-		--sv-dropdown-width: auto;
-		--sv-dropdown-shadow: 0 6px 12px #0000002d;
-		--sv-dropdown-height: 320px;
-		--sv-dropdown-active-bg: var(--color-primary, #f2f5f8);
-		--sv-dropdown-selected-bg: var(--color-neutral);
-		--sv-create-kbd-border: var(--border, 1px) solid var(--color-base-200, #efefef);
-		--sv-create-kbd-bg: var(--color-base-100, #fff);
-		--sv-create-disabled-bg: var(--color-error, #fcbaba);
-		--sv-loader-border: var(--border, 2px) solid var(--color-base-200, #ccc);
-	}
-</style>

package/esm/ui/internals/select/Select2.svelte.d.ts

@@ -1,12 +0,0 @@
-import { type BaseItem } from '../../../internals';
-interface Props {
-    value?: string | undefined;
-    clearable?: boolean;
-    items?: BaseItem[] | undefined;
-    placeholder?: string | undefined;
-    onChange?: (value: string | undefined) => void;
-    multiple?: boolean;
-}
-declare const Select2: import("svelte").Component<Props, {}, "value">;
-type Select2 = ReturnType<typeof Select2>;
-export default Select2;

package/esm/ui/internals/select/SelectMelt.svelte

@@ -1,289 +0,0 @@
-<script lang="ts">
-	import { createCombobox, createSync, type ComboboxOptionProps } from '@melt-ui/svelte'
-	import { createEventDispatcher, onMount, tick } from 'svelte'
-	import { fly } from 'svelte/transition'
-
-	import {
-		Button,
-		LibIcon_Add,
-		LibIcon_Check,
-		LibIcon_Cross,
-		LibIcon_Search,
-		tw,
-		type BaseItem,
-		type FF_Icon,
-	} from '../../../internals'
-	import Icon from '../../Icon.svelte'
-
-	export let id: string
-	export let disabled: boolean = false
-	export let placeholder: string = ''
-	export let items: BaseItem[] = []
-	let totalCount: number | undefined = undefined
-
-	export let focus: boolean = false
-	const focusNow = (node: any) => {
-		if (focus) {
-			tick().then(() => {
-				node.focus()
-			})
-		}
-	}
-
-	export let loadOptions:
-		| ((str: string) => Promise<{ items: BaseItem[]; totalCount: number }>)
-		| undefined = undefined
-	export let value: string | null | undefined = undefined
-	export let clearable = false
-	export let createOptionWhenNoResult = false
-	export let default_select_if_one_item = false
-	export let createRequest: ((args: { input: string; id: string }) => void) | undefined = undefined
-
-	const dispatch = createEventDispatcher()
-
-	function dispatchSelectedValue(_data: BaseItem | undefined) {
-		dispatch('selected', _data)
-	}
-
-	function dispatchIssue(msg: 'VALUE_NOT_IN_ITEMS') {
-		dispatch('issue', msg)
-	}
-
-	let lastSearch: string | undefined = undefined
-	const localLoadOptions = async (str: string) => {
-		if (str === lastSearch) {
-			return
-		}
-		lastSearch = str
-		if (loadOptions) {
-			const lo = await loadOptions(str)
-			items = lo.items
-			totalCount = lo.totalCount
-			filteredItems = items
-		}
-	}
-
-	onMount(async () => {
-		localLoadOptions('')
-
-		// after we load items
-		sync.selected(getDefaultValue(value))
-	})
-
-	const getDefaultValue = (_selectedValue: string | null | undefined) => {
-		if (!items) {
-			return
-		}
-		const found = items.find((c) => String(c?.id) === String(_selectedValue))
-		if (found) {
-			return toOption(found)
-		} else {
-			if (value !== null && value !== undefined && items.length > 0) {
-				dispatchIssue('VALUE_NOT_IN_ITEMS')
-			}
-		}
-	}
-
-	const toOption = (
-		item: BaseItem,
-	): ComboboxOptionProps<BaseItem> & {
-		icon?: FF_Icon
-	} => ({
-		value: item,
-		label: item.caption,
-		// icon: item.icon,
-		// disabled: item.disabled,
-	})
-
-	const {
-		elements: { menu, input, option },
-		states: { open, inputValue, touchedInput, selected: localSelected },
-		// helpers: { isSelected },
-	} = createCombobox<BaseItem>({
-		forceVisible: true,
-		disabled,
-		ids: { label: id },
-	})
-
-	const clearSelection = () => {
-		sync.selected(undefined)
-	}
-
-	let debounceTimer: ReturnType<typeof setTimeout>
-	const debounce = (callback: () => void) => {
-		clearTimeout(debounceTimer)
-		debounceTimer = setTimeout(
-			callback,
-			// debounce only if we have a load option
-			loadOptions ? 444 : 0,
-		)
-	}
-
-	const sync = createSync({ selected: localSelected })
-	$: items &&
-		sync.selected(getDefaultValue(value), (v) => {
-			// Only if different
-			if (v?.value?.id !== value) {
-				dispatchSelectedValue(v?.value)
-			}
-			value = v?.value?.id
-		})
-
-	// Helper to strip HTML tags from caption for display in input
-	const stripHtml = (html: string): string => {
-		const tmp = document.createElement('div')
-		tmp.innerHTML = html
-		return tmp.textContent || tmp.innerText || ''
-	}
-
-	$: if (!$open) {
-		$inputValue = $localSelected?.label ? stripHtml($localSelected.label) : ''
-	}
-
-	$: filteredItems = items
-
-	$: {
-		if (items.length === 1 && default_select_if_one_item) {
-			sync.selected(toOption(items[0]))
-		}
-	}
-
-	const calcFilteredItems = (touched: boolean, str: string, value: any) => {
-		if (touched) {
-			debounce(async () => {
-				const normalizedInput = str.toLowerCase()
-				updateFilteredItems(normalizedInput)
-			})
-		} else {
-			updateFilteredItems('')
-		}
-	}
-
-	const updateFilteredItems = async (normalizedInput: string) => {
-		if (loadOptions) {
-			await localLoadOptions(normalizedInput)
-		} else {
-			filteredItems = items.filter((item) => {
-				return item.caption?.toLowerCase().includes(normalizedInput)
-			})
-		}
-	}
-
-	$: calcFilteredItems($touchedInput, $inputValue, value)
-</script>
-
-<div class="input flex w-full min-w-0 items-center {disabled && 'opacity-40'}">
-	<div class="relative">
-		{#if $localSelected?.value?.icon?.data}
-			<Icon
-				data={$localSelected.value.icon.data}
-				class={tw(['relative', $localSelected.value.icon.class])}
-				style={$localSelected.value.icon.style}
-				size={$localSelected.value.icon.size}
-			></Icon>
-		{:else}
-			<Icon data={LibIcon_Search} class="relative"></Icon>
-		{/if}
-	</div>
-	<!-- {id} -->
-	<input
-		{...$input}
-		use:$input.action
-		class="-mr-5 -ml-8 h-full min-w-0 flex-grow bg-transparent px-10"
-		{placeholder}
-		use:focusNow
-	/>
-	<div class="pointer-events-none relative right-0 flex gap-2">
-		{#if clearable && $localSelected}
-			<button on:click={clearSelection} class="pointer-events-auto">
-				<Icon data={LibIcon_Cross}></Icon>
-			</button>
-		{/if}
-		<!-- {#if $open}
-      <Icon data={LibIcon_ChevronUp}></Icon>
-    {:else}
-      <Icon data={LibIcon_ChevronDown}></Icon>
-    {/if} -->
-	</div>
-</div>
-
-{#if $open}
-	<ul
-		class="z-50 flex max-h-[300px] flex-col overflow-hidden rounded-lg border border-base-content/20"
-		{...$menu}
-		use:$menu.action
-		transition:fly={{ duration: 150, y: -5 }}
-	>
-		<!-- svelte-ignore a11y-no-noninteractive-tabindex -->
-		<div class="flex max-h-full flex-col gap-0 overflow-y-auto bg-base-100 py-2" tabindex="0">
-			{#each filteredItems as item, index (index)}
-				<li
-					{...$option(toOption(item))}
-					use:$option.action
-					class="relative flex cursor-pointer scroll-my-2 items-start rounded-md px-1
-          py-2
-          data-[disabled]:opacity-50
-          data-[highlighted]:bg-primary
-					data-[highlighted]:text-primary-content"
-				>
-					<div class="flex items-center">
-						{#if $localSelected?.value?.id === item.id}
-							<Icon data={LibIcon_Check} class="w-6"></Icon>
-						{:else}
-							<!-- just to book the place -->
-							<span class="w-6"></span>
-						{/if}
-						{#if item.icon?.data}
-							<Icon
-								data={item.icon.data}
-								class={tw(['flex-shrink-0', item.icon.class])}
-								style={item.icon.style}
-								size={item.icon.size}
-							></Icon>
-						{/if}
-					</div>
-					<div class="pl-2">
-						<span class="font-medium">{@html item.caption}</span>
-					</div>
-				</li>
-			{:else}
-				{#if createOptionWhenNoResult}
-					{#if $inputValue}
-						<div class="p-4">
-							<Button
-								class="w-full"
-								onclick={async () => {
-									createRequest?.({ input: $inputValue, id })
-									$open = false
-								}}
-							>
-								<div class="flex items-center gap-2">
-									<Icon data={LibIcon_Add}></Icon>
-									{#if $inputValue}
-										Créer "{$inputValue}"
-									{/if}
-								</div>
-							</Button>
-						</div>
-					{:else}
-						<li class="relative cursor-pointer rounded-md py-1 pl-8 pr-4 text-sm">
-							Il faut tenter de rechercher avant de créer un nouvel élément
-						</li>
-					{/if}
-				{:else}
-					<li class="relative cursor-pointer rounded-md py-1 pl-8 pr-4">Aucun résultat</li>
-				{/if}
-			{/each}
-		</div>
-		{#if totalCount}
-			<div class="z-50 bg-base-300 text-center text-xs">
-				{#if items.length < totalCount}
-					({items.length} / {totalCount})
-				{:else}
-					<!-- yes, items.length can be bigger if the selected item is not in the limit -->
-					({items.length})
-				{/if}
-			</div>
-		{/if}
-	</ul>
-{/if}