mertani-web-toolkit 0.1.53 → 0.1.55

package/dist/components/inputs/TextInputSuggestion/TextInputSuggestion.svelte

@@ -57,6 +57,8 @@
 		emptyMessage?: string;
 		closeOnSelect?: boolean;
 		loadingSuggestions?: boolean;
+		/** Jika false, suggestions tidak difilter di client (untuk data dari API yang sudah difilter) */
+		filterSuggestionsClientSide?: boolean;
 
 		// Events
 		onSelectSuggestion?: (value: string, option: SuggestionOption) => void;
@@ -126,6 +128,7 @@
 		emptyMessage = 'Tidak ada hasil',
 		closeOnSelect = true,
 		loadingSuggestions = false,
+		filterSuggestionsClientSide = true,
 
 		// Events
 		onSelectSuggestion,
@@ -155,15 +158,15 @@
 		...props
 	}: Props = $props();
 
-	let inputValue = $state(value);
-	let errorMessage = $state('');
-	let isFocused = $state(false);
-	let showList = $state(false);
-	let activeIndex = $state(-1);
-	let wrapperEl: HTMLDivElement | null = $state(null);
-	let inputEl: HTMLInputElement | null = $state(null);
-	let searchByValue = $state(searchBy);
-	let searchByOpen = $state(false);
+	let inputValue = $derived(value);
+	let errorMessage = $derived('');
+	let isFocused = $derived(false);
+	let showList = $derived(false);
+	let activeIndex = $derived(-1);
+	let wrapperEl: HTMLDivElement | null = $derived(null);
+	let inputEl: HTMLInputElement | null = $derived(null);
+	let searchByValue = $derived(searchBy);
+	let searchByOpen = $derived(false);
 
 	$effect(() => {
 		inputValue = value;
@@ -180,6 +183,11 @@
 		}
 	});
 
+	$effect(() => {
+		suggestions = suggestions;
+		activeIndex = -1;
+	});
+
 	const sizeConfig = $derived(() => {
 		switch (size) {
 			case 48:
@@ -309,12 +317,17 @@
 		return classes.join(' ');
 	});
 
-	function normalizeSuggestion(option: SuggestionOption) {
+	function normalizeSuggestion(option: SuggestionOption): {
+		label: string;
+		value: string;
+		raw: SuggestionOption;
+	} {
 		if (typeof option === 'string') {
 			return { label: option, value: option, raw: option };
 		}
-		const val = option.value ?? option.label;
-		return { label: option.label, value: val, raw: option };
+		const val = String(option.value ?? option.id ?? option.label ?? '');
+		const lbl = String(option.label ?? option.value ?? option.id ?? '');
+		return { label: lbl, value: val, raw: option };
 	}
 
 	const filteredSuggestions = $derived(() => {
@@ -325,9 +338,10 @@
 			return [];
 		}
 
-		const result = query
-			? normalized.filter((item) => item.label.toLowerCase().includes(query))
-			: normalized;
+		const result =
+			filterSuggestionsClientSide && query
+				? normalized.filter((item) => item.label.toLowerCase().includes(query))
+				: normalized;
 		return result.slice(0, maxSuggestions);
 	});
 
@@ -388,12 +402,6 @@
 		oninput?.(e);
 	}
 
-	function handleSearchByChange(e: Event) {
-		const target = e.target as HTMLSelectElement;
-		searchByValue = target.value;
-		searchBy = target.value;
-	}
-
 	function selectSearchBy(option: SearchByOption) {
 		searchByValue = option.value;
 		searchBy = option.value;
@@ -469,12 +477,15 @@
 	}
 
 	$effect(() => {
-		if (showList) {
-			setTimeout(() => document.addEventListener('click', handleClickOutside), 10);
-		} else {
+		if (!showList) {
 			document.removeEventListener('click', handleClickOutside);
+			return;
 		}
-		return () => document.removeEventListener('click', handleClickOutside);
+		const tid = setTimeout(() => document.addEventListener('click', handleClickOutside), 10);
+		return () => {
+			clearTimeout(tid);
+			document.removeEventListener('click', handleClickOutside);
+		};
 	});
 </script>
 

package/dist/components/inputs/TextInputSuggestion/TextInputSuggestion.svelte.d.ts

@@ -42,6 +42,8 @@ interface Props extends HTMLInputAttributes {
     emptyMessage?: string;
     closeOnSelect?: boolean;
     loadingSuggestions?: boolean;
+    /** Jika false, suggestions tidak difilter di client (untuk data dari API yang sudah difilter) */
+    filterSuggestionsClientSide?: boolean;
     onSelectSuggestion?: (value: string, option: SuggestionOption) => void;
     onclick?: (event: MouseEvent) => void;
     oninput?: (event: Event) => void;

package/dist/icons/BsFileEarmarkExcel.svelte

@@ -0,0 +1,16 @@
+<svg
+	width="16"
+	height="16"
+	viewBox="0 0 16 16"
+	fill="currentColor"
+	xmlns="http://www.w3.org/2000/svg"
+>
+	<path
+		d="M5.884 6.68C5.84256 6.62777 5.79109 6.58436 5.73263 6.55232C5.67416 6.52027 5.60988 6.50025 5.54356 6.49341C5.47724 6.48658 5.41022 6.49308 5.34645 6.51253C5.28268 6.53198 5.22344 6.56399 5.17223 6.60667C5.12101 6.64935 5.07884 6.70185 5.04821 6.76106C5.01758 6.82028 4.9991 6.88503 4.99386 6.95149C4.98863 7.01796 4.99673 7.0848 5.01771 7.14808C5.03868 7.21137 5.0721 7.26982 5.116 7.32L7.349 10L5.116 12.68C5.03487 12.7823 4.99694 12.9122 5.01032 13.042C5.02369 13.1719 5.08731 13.2913 5.18759 13.3749C5.28787 13.4585 5.41684 13.4995 5.54697 13.4892C5.6771 13.479 5.79805 13.4182 5.884 13.32L8 10.781L10.116 13.321C10.201 13.4228 10.323 13.4867 10.4551 13.4987C10.5205 13.5046 10.5865 13.4975 10.6492 13.4779C10.7118 13.4583 10.7701 13.4266 10.8205 13.3845C10.8709 13.3424 10.9126 13.2908 10.9431 13.2326C10.9735 13.1744 10.9923 13.1108 10.9982 13.0454C11.0041 12.98 10.997 12.914 10.9774 12.8513C10.9578 12.7887 10.9261 12.7304 10.884 12.68L8.651 10L10.884 7.32C10.9651 7.21775 11.0031 7.08782 10.9897 6.95798C10.9763 6.82814 10.9127 6.70867 10.8124 6.62511C10.7121 6.54154 10.5832 6.50051 10.453 6.51076C10.3229 6.52102 10.2019 6.58176 10.116 6.68L8 9.219L5.884 6.68Z"
+		fill="currentColor"
+	/>
+	<path
+		d="M14 14V4.5L9.5 0H4C3.46957 0 2.96086 0.210714 2.58579 0.585786C2.21071 0.960859 2 1.46957 2 2V14C2 14.5304 2.21071 15.0391 2.58579 15.4142C2.96086 15.7893 3.46957 16 4 16H12C12.5304 16 13.0391 15.7893 13.4142 15.4142C13.7893 15.0391 14 14.5304 14 14ZM9.5 3C9.5 3.39782 9.65804 3.77936 9.93934 4.06066C10.2206 4.34196 10.6022 4.5 11 4.5H13V14C13 14.2652 12.8946 14.5196 12.7071 14.7071C12.5196 14.8946 12.2652 15 12 15H4C3.73478 15 3.48043 14.8946 3.29289 14.7071C3.10536 14.5196 3 14.2652 3 14V2C3 1.73478 3.10536 1.48043 3.29289 1.29289C3.48043 1.10536 3.73478 1 4 1H9.5V3Z"
+		fill="currentColor"
+	/>
+</svg>

package/dist/icons/BsFileEarmarkExcel.svelte.d.ts

@@ -0,0 +1,26 @@
+export default BsFileEarmarkExcel;
+type BsFileEarmarkExcel = SvelteComponent<{
+    [x: string]: never;
+}, {
+    [evt: string]: CustomEvent<any>;
+}, {}> & {
+    $$bindings?: string | undefined;
+};
+declare const BsFileEarmarkExcel: $$__sveltets_2_IsomorphicComponent<{
+    [x: string]: never;
+}, {
+    [evt: string]: CustomEvent<any>;
+}, {}, {}, string>;
+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: {
+        $$events?: Events;
+        $$slots?: Slots;
+    }): Exports & {
+        $set?: any;
+        $on?: any;
+    };
+    z_$$bindings?: Bindings;
+}

package/dist/icons/index.js

@@ -142,6 +142,7 @@ import BSCalendar2Date from './BSCalendar2Date.svelte';
 import BsDiagram3 from './BsDiagram3.svelte';
 import BsNodePlus from './BsNodePlus.svelte';
 import BSBuildingLock from './BSBuildingLock.svelte';
+import BsFileEarmarkExcel from './BsFileEarmarkExcel.svelte';
 // Icon component map dengan nama custom
 export const iconMap = {
     'bs-activity': BsActivity,
@@ -287,7 +288,8 @@ export const iconMap = {
     'bs-calendar2-date': BSCalendar2Date,
     'bs-diagram3': BsDiagram3,
     'bs-node-plus': BsNodePlus,
-    'bs-building-lock': BSBuildingLock
+    'bs-building-lock': BSBuildingLock,
+    'bs-file-earmark-excel': BsFileEarmarkExcel
 };
 // Export icon names untuk type safety
 export const IconNames = Object.keys(iconMap);

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "mertani-web-toolkit",
-	"version": "0.1.53",
+	"version": "0.1.55",
 	"homepage": "https://storybook.mertani.com/",
 	"scripts": {
 		"dev": "vite dev",