@bagelink/vue 1.2.56 → 1.2.61

package/dist/utils/search.d.ts

@@ -0,0 +1,44 @@
+import { Ref, ComputedRef } from 'vue';
+/**
+ * Clears HTML tags from a string
+ * @param html - HTML string to clean
+ * @returns Plain text without HTML tags
+ */
+export declare function clearHtml(value?: string): string;
+/**
+ * Normalizes text by removing special characters and converting to lowercase
+ * @param text - Text to normalize
+ * @returns Normalized text
+ */
+export declare function normalizeText(text: string): string;
+export interface SearchItemParams<T> {
+    searchTerm?: string | Ref<string>;
+    items?: T[] | Ref<T[]>;
+    keysToSearch?: (keyof T extends string ? keyof T : string)[];
+    fieldWeights?: Record<string, number>;
+    minChars?: number;
+    serverSearch?: (query: string) => Promise<T[]>;
+    debounceMs?: number;
+}
+export interface SearchResult<T> {
+    results: ComputedRef<readonly T[]>;
+    resultCount: ComputedRef<number>;
+    hasResults: ComputedRef<boolean>;
+    isSearching: ComputedRef<boolean>;
+    isLoading: ComputedRef<boolean>;
+}
+/**
+ * Generic search function that searches for a term within specified object properties
+ * If keysToSearch is not provided, searches all keys (including nested ones)
+ * @param params - Search parameters including searchTerm, items, keys and weights
+ * @returns Filtered and sorted array of items that match the search terms
+ */
+export declare function searchItems<T>(params: SearchItemParams<T>): T[];
+/**
+ * Vue composable for searching items with reactive results
+ * Supports both client-side filtering and server-side search
+ * @param params Search parameters
+ * @returns Reactive search results and metadata
+ */
+export declare function useSearch<T>(params: SearchItemParams<T>): SearchResult<T>;
+//# sourceMappingURL=search.d.ts.map

package/dist/utils/search.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"search.d.ts","sourceRoot":"","sources":["../../src/utils/search.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,GAAG,EAAE,WAAW,EAAE,MAAM,KAAK,CAAA;AAG3C;;;;GAIG;AAEH,wBAAgB,SAAS,CAAC,KAAK,CAAC,EAAE,MAAM,UAUvC;AAED;;;;GAIG;AACH,wBAAgB,aAAa,CAAC,IAAI,EAAE,MAAM,GAAG,MAAM,CAGlD;AA2ED,MAAM,WAAW,gBAAgB,CAAC,CAAC;IAClC,UAAU,CAAC,EAAE,MAAM,GAAG,GAAG,CAAC,MAAM,CAAC,CAAA;IACjC,KAAK,CAAC,EAAE,CAAC,EAAE,GAAG,GAAG,CAAC,CAAC,EAAE,CAAC,CAAA;IACtB,YAAY,CAAC,EAAE,CAAC,MAAM,CAAC,SAAS,MAAM,GAAG,MAAM,CAAC,GAAG,MAAM,CAAC,EAAE,CAAA;IAC5D,YAAY,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAAA;IACrC,QAAQ,CAAC,EAAE,MAAM,CAAA;IACjB,YAAY,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,OAAO,CAAC,CAAC,EAAE,CAAC,CAAA;IAC9C,UAAU,CAAC,EAAE,MAAM,CAAA;CACnB;AAED,MAAM,WAAW,YAAY,CAAC,CAAC;IAC9B,OAAO,EAAE,WAAW,CAAC,SAAS,CAAC,EAAE,CAAC,CAAA;IAClC,WAAW,EAAE,WAAW,CAAC,MAAM,CAAC,CAAA;IAChC,UAAU,EAAE,WAAW,CAAC,OAAO,CAAC,CAAA;IAChC,WAAW,EAAE,WAAW,CAAC,OAAO,CAAC,CAAA;IACjC,SAAS,EAAE,WAAW,CAAC,OAAO,CAAC,CAAA;CAC/B;AAkCD;;;;;GAKG;AACH,wBAAgB,WAAW,CAAC,CAAC,EAAE,MAAM,EAAE,gBAAgB,CAAC,CAAC,CAAC,GAAG,CAAC,EAAE,CAsK/D;AAED;;;;;GAKG;AACH,wBAAgB,SAAS,CAAC,CAAC,EAC1B,MAAM,EAAE,gBAAgB,CAAC,CAAC,CAAC,GACzB,YAAY,CAAC,CAAC,CAAC,CAwEjB"}

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@bagelink/vue",
   "type": "module",
-  "version": "1.2.56",
+  "version": "1.2.61",
   "description": "Bagel core sdk packages",
   "author": {
     "name": "Neveh Allon",
@@ -51,7 +51,7 @@
     "./vite.config.ts"
   ],
   "devDependencies": {
-    "type-fest": "^4.39.1",
+    "type-fest": "^4",
     "@types/leaflet": "^1.9.17",
     "@types/signature_pad": "^4.0.0",
     "@vue-macros/reactivity-transform": "^1.1.6",
@@ -60,7 +60,7 @@
   },
   "peerDependencies": {
     "@bagelink/sdk": "*",
-    "type-fest": "^4.39.1",
+    "type-fest": "^4",
     "@vuepic/vue-datepicker": "^8.8.1",
     "vue": "*",
     "vue-draggable-next": "^2.2.1",

package/src/components/Avatar.vue

@@ -10,7 +10,7 @@ withDefaults(defineProps<{
 </script>
 
 <template>
-	<div class="avatar flex justify-content-center" :style="{ width: `${size}px`, height: `${size}px` }">
+	<div class="round overflow-hidden txt-center p-0 avatar flex justify-content-center" :style="{ width: `${size}px`, height: `${size}px` }">
 		<img v-if="src" :src="src" :alt="name">
 		<p v-else :style="{ 'line-height': `${size}px`, 'font-size': `calc(1.5rem * ${size} / 50)` }">
 			{{ (fallback || initials(name || '')).toUpperCase() }}
@@ -20,12 +20,8 @@ withDefaults(defineProps<{
 
 <style scoped>
 .avatar {
-  border-radius: 100%;
   background-color: var(--bgl-gray-20);
   border: 0.5px solid var(--border-color);
-  overflow: hidden;
-  text-align: center;
-  padding: 0;
   flex-shrink: 0;
 }
 

package/src/components/ListItem.vue

@@ -13,6 +13,7 @@ const props = defineProps<{
 	flat?: boolean
 	disabled?: boolean
 	lead?: string
+	end?: string
 	iconEnd?: IconType
 	target?: '_blank' | '_self'
 	thin?: boolean
@@ -77,8 +78,9 @@ const bind = $computed(() => {
 			</p>
 		</div>
 		<div class="flex-grow-1" />
-		<slot name="action">
+		<slot name="end">
 			<Icon v-if="iconEnd" :icon="iconEnd" class="transition-400" />
+			<p v-if="end" class="txt12 m-0 p-0 opacity-7 ellipsis-1" v-text="end" />
 		</slot>
 	</component>
 </template>

package/src/components/form/inputs/DatePicker.vue

@@ -122,7 +122,7 @@ function useCalendarView() {
 
 	const years = computed(() => {
 		const startYear = currentMonthValue.value.year - 10
-		return Array.from({ length: 21 }, (_, i) => ({
+		return Array.from({ length: 18 }, (_, i) => ({
 			value: startYear + i,
 			disabled: isYearDisabled(startYear + i)
 		}))
@@ -273,7 +273,7 @@ function selectDate(date: Date | null) {
 </script>
 
 <template>
-	<div class="ltr flex gap-075 p-05 m_flex-wrap calendar-container justify-content-center h-100p">
+	<div class="ltr flex gap-075 m_flex-wrap calendar-container justify-content-center h-100p">
 		<div class="calendar-section m_border-none pe-05 m_p-0">
 			<div class="flex space-between pb-1">
 				<template v-if="currentView === 'days'">
@@ -396,7 +396,7 @@ function selectDate(date: Date | null) {
 
 .year-grid {
 	grid-template-columns: repeat(3, 1fr);
-	grid-template-rows: repeat(7, 1fr);
+	grid-template-rows: repeat(6, 1fr);
 }
 
 .month-item,

package/src/components/form/inputs/SelectInput.vue

@@ -7,10 +7,10 @@ import {
 	Skeleton,
 	Dropdown,
 	Icon,
-
-	TextInput
+	TextInput,
+	useSearch
 } from '@bagelink/vue'
-import { onMounted, watch } from 'vue'
+import { onMounted, ref, watch } from 'vue'
 import 'floating-vue/style.css'
 
 interface PropTypes {
@@ -44,7 +44,7 @@ const searchInput = $ref<HTMLElement | undefined>()
 let selectedItems = $ref<Option[]>([])
 
 const selectedItemCount = $computed(() => selectedItems.length ?? 0)
-const search = $ref<string>('')
+const searchTerm = ref<string>('')
 
 const dropdown = $ref<InstanceType<typeof Dropdown> | undefined>()
 let selected = $ref(false)
@@ -63,35 +63,7 @@ const selectedLabel = $computed((): string => {
 })
 const searchPlaceholder = $computed(() => props.searchPlaceholder ?? selectedLabel ?? 'Search')
 
-let serverOptions: Option[] = $ref([])
-let isSearching = $ref(false)
-
-async function runServerSearch() {
-	if (props.onSearch !== undefined) {
-		isSearching = true
-		serverOptions = await props.onSearch(search)
-		isSearching = false
-	}
-}
-
-const filteredOptions = $computed(() => {
-	if (props.onSearch !== undefined) {
-		if (isSearching) return []
-		if (search.trim().length) return serverOptions
-		return props.options
-	}
-	return props.options.filter((option) => {
-		const searchTerm = search
-			.split(/\s+/)
-			.filter(Boolean)
-			.map(t => new RegExp(t.replaceAll(/[.*+?^${}()|[\]\\]/g, '\\$&'), 'gi'))
-		return (
-			Boolean(option)
-			&& (searchTerm.every(s => getLabel(option).match(s))
-			)
-		)
-	})
-})
+const { results, isLoading } = useSearch<Option>({ searchTerm, serverSearch: props.onSearch, items: props.options })
 
 let highlightedIndex = $ref(-1)
 
@@ -104,9 +76,9 @@ function navigate(direction: 'up' | 'down') {
 		return
 	}
 	if (direction === 'up') {
-		highlightedIndex = highlightedIndex > 0 ? highlightedIndex - 1 : filteredOptions.length - 1
+		highlightedIndex = highlightedIndex > 0 ? highlightedIndex - 1 : results.value.length - 1
 	} else if (direction === 'down') {
-		highlightedIndex = highlightedIndex < filteredOptions.length - 1 ? highlightedIndex + 1 : 0
+		highlightedIndex = highlightedIndex < results.value.length - 1 ? highlightedIndex + 1 : 0
 	}
 	setTimeout(() => {
 		const el = selectOptions?.children[highlightedIndex] as HTMLElement
@@ -246,11 +218,10 @@ onMounted(() => {
 					<TextInput
 						v-if="searchable && open"
 						ref="searchInput"
-						v-model="search"
+						v-model="searchTerm"
 						class="mb-0"
 						:placeholder="searchPlaceholder"
 						icon="search"
-						@debounce="runServerSearch"
 						@input="selected = false"
 						@click="focusInput"
 						@keydown.down.prevent="navigate('down')"
@@ -295,7 +266,7 @@ onMounted(() => {
 				</div>
 			</label>
 		</template>
-		<Skeleton v-if="isSearching" :count="6" width="200px" height="25px" class="mx-1 my-1" />
+		<Skeleton v-if="isLoading" :count="6" width="200px" height="25px" class="mx-1 my-1" />
 		<Card
 			class="p-05"
 			:style="{ width: fullWidth ? '100%' : 'auto' }"
@@ -303,7 +274,7 @@ onMounted(() => {
 		>
 			<div ref="selectOptions" class="selectinput-options" :class="{ multiselect }">
 				<div
-					v-for="(option, i) in filteredOptions"
+					v-for="(option, i) in results"
 					:key="`${option}${i}`"
 					class="selectinput-option hover gap-1 align-items-center"
 					:class="{ selected: isSelected(option) }"

package/src/index.ts

@@ -17,3 +17,4 @@ export * from './utils/calendar/dateUtils'
 import './styles/bagel.css'
 
 export * from './utils/constants'
+export * from './utils/search'