mertani-web-toolkit 0.1.49 → 0.1.50

package/dist/components/inputs/TextInputSuggestion/TextInputSuggestion.css

@@ -72,6 +72,77 @@
   border-color: var(--color-text-error-ti);
 }
 
+.search-by-wrapper {
+  position: relative;
+  display: flex;
+  align-items: center;
+  border-right: 1px solid var(--color-border-form);
+  background: var(--color-bg-disabled);
+  flex-shrink: 0;
+  border-radius: 6px 0 0 6px;
+}
+
+.search-by-trigger {
+  border: none;
+  outline: none;
+  background: transparent;
+  font-size: 12px;
+  font-weight: 600;
+  color: var(--color-text-primary);
+  cursor: pointer;
+  padding: 0 10px;
+  height: 100%;
+  display: inline-flex;
+  align-items: center;
+  gap: 8px;
+}
+
+.search-by-trigger:disabled {
+  cursor: not-allowed;
+  opacity: 0.7;
+}
+
+.search-by-label {
+  white-space: nowrap;
+}
+
+.search-by-menu {
+  position: absolute;
+  top: calc(100% + 4px);
+  min-width: 140px;
+  background: var(--color-bg-surface);
+  border: 1px solid var(--color-border-form);
+  border-radius: 4px;
+  box-shadow:
+    0 4px 6px -1px rgba(0, 0, 0, 0.1),
+    0 2px 4px -1px rgba(0, 0, 0, 0.06);
+  overflow: hidden;
+  z-index: 99999;
+}
+
+.search-by-item {
+  width: 100%;
+  padding: 10px 12px;
+  text-align: left;
+  background: transparent;
+  border: none;
+  font-size: 13px;
+  color: var(--color-text-primary);
+  cursor: pointer;
+  transition:
+    background-color 0.15s,
+    color 0.15s;
+}
+
+.search-by-item + .search-by-item {
+  border-top: 1px solid color-mix(in srgb, var(--color-border-form) 45%, transparent);
+}
+
+.search-by-item:hover,
+.search-by-item.active {
+  background: var(--color-bg-disabled);
+}
+
 .prefix-wrapper {
   display: flex;
   align-items: center;
@@ -239,7 +310,7 @@
 
 .suggestion-item:hover,
 .suggestion-item.active {
-  background: var(--color-bg-surface-hover, #f6f8fa);
+  background: var(--color-bg-disabled);
 }
 
 .suggestion-empty {

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

@@ -12,6 +12,10 @@
 				value?: string;
 				detail?: unknown;
 		  };
+	type SearchByOption = {
+		label: string;
+		value: string;
+	};
 
 	interface Props extends HTMLInputAttributes {
 		// ===Styles===
@@ -45,6 +49,8 @@
 
 		// Suggestions
 		suggestions?: SuggestionOption[];
+		searchByOptions?: SearchByOption[];
+		searchBy?: string;
 		minChars?: number;
 		maxSuggestions?: number;
 		showSuggestionsOnFocus?: boolean;
@@ -112,6 +118,8 @@
 
 		// Suggestions
 		suggestions = [],
+		searchByOptions = [],
+		searchBy = $bindable(''),
 		minChars = 1,
 		maxSuggestions = 8,
 		showSuggestionsOnFocus = true,
@@ -153,11 +161,24 @@
 	let showList = $state(false);
 	let activeIndex = $state(-1);
 	let wrapperEl: HTMLDivElement | null = $state(null);
+	let searchByValue = $state(searchBy);
+	let searchByOpen = $state(false);
 
 	$effect(() => {
 		inputValue = value;
 	});
 
+	$effect(() => {
+		searchByValue = searchBy;
+	});
+
+	$effect(() => {
+		if (!searchByValue && searchByOptions.length) {
+			searchByValue = searchByOptions[0].value;
+			searchBy = searchByValue;
+		}
+	});
+
 	const sizeConfig = $derived(() => {
 		switch (size) {
 			case 48:
@@ -365,6 +386,23 @@
 		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;
+		searchByOpen = false;
+	}
+
+	function getSearchByLabel() {
+		const current = searchByOptions.find((opt) => opt.value === searchByValue);
+		return current?.label || 'Search';
+	}
+
 	function handleChange(e: Event) {
 		const target = e.target as HTMLInputElement;
 		const value = target.value;
@@ -426,6 +464,7 @@
 	function handleClickOutside(e: MouseEvent) {
 		if (wrapperEl && !wrapperEl.contains(e.target as Node)) {
 			closeSuggestions();
+			searchByOpen = false;
 		}
 	}
 
@@ -459,6 +498,41 @@
 			</label>
 		{/if}
 		<div class={wrapperClasses()} style={wrapperStyles()} bind:this={wrapperEl}>
+			{#if searchByOptions.length}
+				<div class="search-by-wrapper">
+					<button
+						type="button"
+						class="search-by-trigger"
+						onclick={() => !disabled && !isLoading && (searchByOpen = !searchByOpen)}
+						disabled={disabled || isLoading}
+					>
+						<span class="search-by-label">{getSearchByLabel()}</span>
+						<Icon
+							name="bs-chevron-down"
+							style="transform-origin: center; transition: transform 0.25s; transform: rotate({searchByOpen
+								? '180deg'
+								: '0deg'});"
+						/>
+					</button>
+					{#if searchByOpen}
+						<div class="search-by-menu">
+							{#each searchByOptions as option (option.value)}
+								<button
+									type="button"
+									class="search-by-item"
+									class:active={option.value === searchByValue}
+									onmousedown={(e) => {
+										e.preventDefault();
+										selectSearchBy(option);
+									}}
+								>
+									{option.label}
+								</button>
+							{/each}
+						</div>
+					{/if}
+				</div>
+			{/if}
 			{#if prefix}
 				<div class="prefix-wrapper" style={prefixStyles()}>
 					<span class="prefix-text">{prefix}</span>

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

@@ -7,6 +7,10 @@ type SuggestionOption = string | {
     value?: string;
     detail?: unknown;
 };
+type SearchByOption = {
+    label: string;
+    value: string;
+};
 interface Props extends HTMLInputAttributes {
     labelColor?: string;
     aligment?: 'side' | 'top';
@@ -30,6 +34,8 @@ interface Props extends HTMLInputAttributes {
     prefix?: string;
     suffix?: string;
     suggestions?: SuggestionOption[];
+    searchByOptions?: SearchByOption[];
+    searchBy?: string;
     minChars?: number;
     maxSuggestions?: number;
     showSuggestionsOnFocus?: boolean;
@@ -56,6 +62,6 @@ interface Props extends HTMLInputAttributes {
     class?: string;
     style?: string;
 }
-declare const TextInputSuggestion: import("svelte").Component<Props, {}, "value">;
+declare const TextInputSuggestion: import("svelte").Component<Props, {}, "value" | "searchBy">;
 type TextInputSuggestion = ReturnType<typeof TextInputSuggestion>;
 export default TextInputSuggestion;

package/package.json

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