firstly 0.0.13 → 0.0.14

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

@@ -1,129 +1,177 @@
-<script>import { createCombobox, createSync } from "@melt-ui/svelte";
-import { createEventDispatcher, onMount } from "svelte";
-import { fly } from "svelte/transition";
-import {
-  LibIcon_Check,
-  LibIcon_Cross,
-  LibIcon_MultiCheck,
-  LibIcon_Search,
-  tw
-} from "../../..";
-import Icon from "../../Icon.svelte";
-export let id;
-export let disabled = false;
-export let placeholder = "";
-export let items = [];
-let totalCount = void 0;
-export let loadOptions = void 0;
-export let values = void 0;
-export let clearable = false;
-const dispatch = createEventDispatcher();
-function dispatchSelectedValues(_data) {
-  values = _data?.map((_data2) => _data2.id);
-  dispatch("selected", _data);
-}
-onMount(async () => {
-  if (loadOptions) {
-    const lo = await loadOptions("");
-    items = lo.items;
-    totalCount = lo.totalCount;
-    filteredItems = items;
-  }
-});
-const getDefaultValues = (_selectedValue) => {
-  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) => ({
-  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({
-  forceVisible: true,
-  multiple: true,
-  disabled,
-  ids: { label: id }
-});
-const clearSelection = () => {
-  sync.selected(void 0);
-};
-let debounceTimer;
-const debounce = (callback) => {
-  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);
-  const countMap = /* @__PURE__ */ new Map();
-  list.forEach((item) => {
-    countMap.set(item, (countMap.get(item) || 0) + 1);
-  });
-  const uniqueList = list.filter((item) => countMap.get(item) === 1);
-  const newIds = uniqueList.sort().join(",");
-  const oldSelectedValues = (values ?? []).sort().join(",");
-  if (newIds !== oldSelectedValues) {
-    dispatchSelectedValues(
-      v === void 0 ? void 0 : v.filter((c) => uniqueList.includes(c.value.id)).map((c) => c.value)
-    );
-  }
-});
-const labelToDisplayInInput = (_localSelected) => {
-  if (_localSelected === void 0 || _localSelected.length === 0) {
-    return "";
-  }
-  if (_localSelected.length === 1) {
-    return _localSelected[0].label ?? "";
-  }
-  return `${_localSelected.length} \xE9l\xE9ments`;
-};
-$: $inputValue = labelToDisplayInInput($localSelected);
-const iconToDisplayInInput = (_localSelected) => {
-  if (_localSelected === void 0 || _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, _item) => {
-  const f = (_localSelected ?? []).filter((c) => c.value?.id === _item.id);
-  if (f.length > 0) {
-    return true;
-  }
-  return false;
-};
-let filteredItems = items;
-const calcFilteredItems = (touched, str, values2) => {
-  if (touched && !str.endsWith(" \xE9l\xE9ments")) {
-    debounce(async () => {
-      const normalizedInput = str.toLowerCase();
-      filteredItems = items.filter((item) => {
-        return item.caption?.toLowerCase().includes(normalizedInput);
-      });
-    });
-  } else {
-    filteredItems = items;
-  }
-};
-$: calcFilteredItems($touchedInput, $inputValue, values);
+<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 '../../..'
+	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[] | 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[] | 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
+			const countMap: Map<string, 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[] = 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 input-bordered flex min-w-0 items-center">

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

@@ -1,30 +1,32 @@
-import { SvelteComponent } from "svelte";
 import { type BaseItem } from '../../..';
-declare const __propDef: {
-    props: {
-        id: string;
-        disabled?: boolean;
-        placeholder?: string;
-        items?: BaseItem[];
-        loadOptions?: ((str: string) => Promise<{
-            items: BaseItem[];
-            totalCount: number;
-        }>) | undefined;
-        values?: string[] | undefined;
-        clearable?: boolean;
+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: {
-        selected: CustomEvent<any>;
-    } & {
-        [evt: string]: CustomEvent<any>;
-    };
-    slots: {};
-    exports?: {} | undefined;
-    bindings?: string | undefined;
-};
-export type MultiSelectMeltProps = typeof __propDef.props;
-export type MultiSelectMeltEvents = typeof __propDef.events;
-export type MultiSelectMeltSlots = typeof __propDef.slots;
-export default class MultiSelectMelt extends SvelteComponent<MultiSelectMeltProps, MultiSelectMeltEvents, MultiSelectMeltSlots> {
+    z_$$bindings?: Bindings;
 }
-export {};
+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[] | undefined;
+    clearable?: boolean;
+}, {
+    selected: CustomEvent<any>;
+} & {
+    [evt: string]: CustomEvent<any>;
+}, {}, {}, string>;
+type MultiSelectMelt = InstanceType<typeof MultiSelectMelt>;
+export default MultiSelectMelt;