@bagelink/vue 1.4.69 → 1.4.73

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@bagelink/vue",
   "type": "module",
-  "version": "1.4.69",
+  "version": "1.4.73",
   "description": "Bagel core sdk packages",
   "author": {
     "name": "Neveh Allon",

package/src/components/Btn.vue

@@ -2,7 +2,7 @@
 import type { IconType, ThemeType } from '@bagelink/vue'
 import type { SetupContext } from 'vue'
 import { Icon, Loading } from '@bagelink/vue'
-import { useSlots } from 'vue'
+import { useSlots, ref, onMounted, onUnmounted } from 'vue'
 import { RouterLink } from 'vue-router'
 
 const props = withDefaults(
@@ -10,6 +10,8 @@ const props = withDefaults(
 		disabled?: boolean
 		icon?: IconType
 		iconEnd?: IconType
+		iconSize?: number | string
+		iconMobileSize?: number | string
 		color?: ThemeType
 		theme?: ThemeType
 		flat?: boolean
@@ -41,6 +43,26 @@ const props = withDefaults(
 	},
 )
 
+const isMobileScreen = ref(false)
+
+const checkMobile = () => {
+	isMobileScreen.value = window.innerWidth <= 910
+}
+
+onMounted(() => {
+	checkMobile()
+	window.addEventListener('resize', checkMobile)
+})
+
+onUnmounted(() => {
+	window.removeEventListener('resize', checkMobile)
+})
+
+const iconSizeComputed = $computed(() => {
+	if (props.iconSize !== undefined) return props.iconSize
+	return isMobileScreen.value ? 1 : 1.2
+})
+
 const isComponent = $computed(() => {
 	if (props.disabled) return props.is
 	if (props.to) return RouterLink
@@ -64,34 +86,25 @@ const slots: SetupContext['slots'] = useSlots()
 </script>
 
 <template>
-	<component
-		:is="isComponent"
-		v-ripple="ripple" v-bind="bind" :disabled="disabled"
-		class="bgl_btn"
-		:class="{
-			'bgl_btn-icon': icon && !slots.default && !value,
-			thin,
-			round,
-			'bgl_btn_flat': flat,
-			'bgl_btn-border': border || outline,
-			[`bgl_btn-${color}`]: color,
-			[`bgl_btn-${theme}`]: theme,
-		}"
-		:tabindex="disabled ? -1 : 0"
-		@click.stop="onClick"
-		@keydown.enter="onClick"
-		@keydown.space="onClick"
-	>
-		<Loading v-if="loading" class="h-100p" size="15" />
-		<div v-else class="bgl_btn-flex">
-			<Icon v-if="icon" :icon="icon" class="transition-400" />
-			<slot />
-			<template v-if="!slots.default && value">
-				{{ value }}
-			</template>
-			<Icon v-if="iconEnd" :icon="iconEnd" class="transition-400" />
-		</div>
-	</component>
+<component :is="isComponent" v-ripple="ripple" v-bind="bind" :disabled="disabled" class="bgl_btn" :class="{
+	'bgl_btn-icon': icon && !slots.default && !value,
+	thin,
+	round,
+	'bgl_btn_flat': flat,
+	'bgl_btn-border': border || outline,
+	[`bgl_btn-${color}`]: color,
+	[`bgl_btn-${theme}`]: theme,
+}" :tabindex="disabled ? -1 : 0" @click.stop="onClick" @keydown.enter="onClick" @keydown.space="onClick">
+	<Loading v-if="loading" class="h-100p" size="15" />
+	<div v-else class="bgl_btn-flex">
+		<Icon v-if="icon" :icon="icon" class="transition-400" :size="iconSizeComputed" :mobile-size="iconMobileSize" />
+		<slot />
+		<template v-if="!slots.default && value">
+			{{ value }}
+		</template>
+		<Icon v-if="iconEnd" :icon="iconEnd" class="transition-400" :size="iconSizeComputed" :mobile-size="iconMobileSize" />
+	</div>
+</component>
 </template>
 
 <style scoped>

package/src/components/Dropdown.vue

@@ -24,6 +24,12 @@ const {
 	noAutoFocus,
 	autoHide = true,
 	triggers = ['click'],
+	showTriggers,
+	hideTriggers,
+	popperTriggers = [],
+	popperShowTriggers = [],
+	popperHideTriggers = [],
+	delay,
 
 } = defineProps<{
 	value?: string
@@ -42,6 +48,12 @@ const {
 	noAutoFocus?: boolean
 	autoHide?: boolean
 	triggers?: TriggerEvent[]
+	showTriggers?: TriggerEvent[]
+	hideTriggers?: TriggerEvent[]
+	popperTriggers?: TriggerEvent[]
+	popperShowTriggers?: TriggerEvent[]
+	popperHideTriggers?: TriggerEvent[]
+	delay?: number | { show: number, hide: number }
 	// theme
 	// referenceNode
 	// shown
@@ -95,45 +107,74 @@ const shouldDisablePositioning = $computed(() => {
 	return disablePlacement && isMobile
 })
 
+// Intelligent trigger configuration
+const computedShowTriggers = $computed((): TriggerEvent[] => {
+	if (showTriggers !== undefined) return showTriggers
+	return triggers
+})
+
+const computedHideTriggers = $computed((): TriggerEvent[] => {
+	if (hideTriggers !== undefined) return hideTriggers
+	// For click-only dropdowns, only hide on click
+	if (triggers.length === 1 && triggers[0] === 'click') {
+		return ['click'] as TriggerEvent[]
+	}
+	// For hover dropdowns, add click to hide triggers for better UX
+	if (triggers.includes('hover')) {
+		return [...triggers, 'click'] as TriggerEvent[]
+	}
+	return triggers
+})
+
+const computedPopperTriggers = $computed((): TriggerEvent[] => {
+	if (popperTriggers.length > 0) return popperTriggers
+	// For hover dropdowns, enable hover on popper to keep it open
+	if (triggers.includes('hover')) {
+		return ['hover'] as TriggerEvent[]
+	}
+	return []
+})
+
+const computedPopperHideTriggers = $computed((): TriggerEvent[] => {
+	if (popperHideTriggers && popperHideTriggers.length > 0) return popperHideTriggers
+	// For hover dropdowns, make sure popper hides on mouseout
+	if (triggers.includes('hover')) {
+		return ['hover'] as TriggerEvent[]
+	}
+	return []
+})
+
+const computedAutoHide = $computed(() => {
+	// Both hover and click dropdowns should support autoHide for outside click behavior
+	return autoHide
+})
+
+const computedDelay = $computed((): number | { show: number, hide: number } | undefined => {
+	if (delay !== undefined) return delay
+	// For hover dropdowns, add a hide delay
+	if (triggers.includes('hover')) {
+		return { show: 0, hide: 50 } // 50ms delay before hiding
+	}
+	// For click dropdowns, no delay
+	return 0
+})
+
 defineExpose({ show, hide, shown })
 </script>
 
 <template>
 	<DDown
-		ref="ddownRef"
-		v-model:shown="shown"
-		:disabled
-		:noAutoFocus
-		:positioning-disabled="shouldDisablePositioning"
-		:placement
-		:autoHide
-		:triggers
-		@hide="emit('hide')"
-		@show="emit('show')"
+		ref="ddownRef" v-model:shown="shown" :disabled :noAutoFocus :positioning-disabled="shouldDisablePositioning"
+		:placement :autoHide="computedAutoHide" :delay="computedDelay" :triggers :showTriggers="computedShowTriggers"
+		:hideTriggers="computedHideTriggers" :popperTriggers="computedPopperTriggers" :popperShowTriggers
+		:popperHideTriggers="computedPopperHideTriggers" @hide="emit('hide')" @show="emit('show')"
 	>
 		<div ref="triggerRef" />
-		<slot
-			name="trigger"
-			:show
-			:hide
-		>
-			<Btn
-				:class="triggerClass"
-				:iconEnd
-				:icon
-				:value
-				:thin
-				:flat
-				:outline
-				:round
-				:color
-			/>
+		<slot name="trigger" :show :hide :shown>
+			<Btn :class="triggerClass" :iconEnd :icon :value :thin :flat :outline :round :color />
 		</slot>
-		<template #popper="{ hide, show }">
-			<slot
-				:hide
-				:show
-			/>
+		<template #popper="{ hide: hidePopper, show: showPopper, shown: popperShown }">
+			<slot :hide="hidePopper" :show="showPopper" :shown="popperShown" />
 		</template>
 	</DDown>
 </template>

package/src/components/Icon/Icon.vue

@@ -1,11 +1,13 @@
 <script setup lang="ts">
 import type { IconType } from '@bagelink/vue'
 import { FONT_AWESOME_ICONS, MATERIAL_ICONS, FONT_AWESOME_BRANDS_ICONS } from './constants'
+import { ref, onMounted, onUnmounted } from 'vue'
 
 const props = withDefaults(defineProps<{
 	icon?: IconType
 	name?: IconType
 	size?: number | string
+	mobileSize?: number | string
 	color?: string
 	round?: boolean
 	weight?: number | string
@@ -17,6 +19,28 @@ const props = withDefaults(defineProps<{
 
 const iconRender = $computed(() => props.icon || props.name) as IconType
 
+const isMobile = ref(false)
+
+const checkMobile = () => {
+	isMobile.value = window.innerWidth <= 910
+}
+
+onMounted(() => {
+	checkMobile()
+	window.addEventListener('resize', checkMobile)
+})
+
+onUnmounted(() => {
+	window.removeEventListener('resize', checkMobile)
+})
+
+const computedSize = $computed(() => {
+	if (isMobile.value && props.mobileSize !== undefined) {
+		return props.mobileSize
+	}
+	return props.size
+})
+
 const iconRenderType = $computed(() => {
 	if (props.fontAwesome && (FONT_AWESOME_ICONS.includes(iconRender) || FONT_AWESOME_BRANDS_ICONS.includes(iconRender))) return 'font-awesome'
 	if (MATERIAL_ICONS.includes(iconRender)) return 'material'
@@ -32,11 +56,12 @@ const isFaBrand = $computed(() => FONT_AWESOME_BRANDS_ICONS.includes(iconRender)
 		v-if="iconRenderType === 'material'"
 		class="bgl_icon-font notranslate"
 		:class="{ 'round flex aspect-ratio-1 justify-content-center': round }"
-		:style="{ 'fontSize': `${size}rem`,
+		:style="{
+			'fontSize': `${computedSize}rem`,
 			color,
 			'font-variation-settings': `'FILL' ${fill ? 1 : 0}, 'wght' ${weight || 400}`,
-			'width': round ? `calc(${size}rem * 2)` : 'auto',
-			'height': round ? `calc(${size}rem * 2)` : 'auto',
+	'width': round ? `calc(${computedSize}rem * 2)` : 'auto',
+	'height': round ? `calc(${computedSize}rem * 2)` : 'auto',
 		}"
 		translate="no"
 	>
@@ -53,7 +78,7 @@ const isFaBrand = $computed(() => FONT_AWESOME_BRANDS_ICONS.includes(iconRender)
 				'far': !fill && !isFaBrand,
 			},
 		]"
-		:style="{ 'fontSize': `${size}rem`, color, 'font-variation-settings': `'wght' ${weight || 400}` }"
+		:style="{ 'fontSize': `${computedSize}rem`, color, 'font-variation-settings': `'wght' ${weight || 400}` }"
 		translate="no"
 	/>
 </template>

package/src/components/Modal.vue

@@ -93,6 +93,7 @@ onUnmounted(() => {
 					flat
 					icon="close"
 					thin
+					icon-mobile-size="1.4"
 					@click="closeModal"
 				/>
 				<Title v-if="title" class="modal-title" tag="h3" :label="title" />
@@ -106,6 +107,7 @@ onUnmounted(() => {
 					thin
 					round
 					color="white"
+					icon-mobile-size="1.4"
 					@click="closeModal"
 				/>
 			</div>
@@ -134,6 +136,7 @@ onUnmounted(() => {
 	text-align: center;
 	font-weight: 600;
 	font-size: 20px;
+	margin-inline-end: 2rem;
 	margin-top: 0.5rem;
 	margin-bottom: 0 !important;
 	width: 100%;

package/src/components/dataTable/DataTable.vue

@@ -121,76 +121,46 @@ const showLoading = computed(() => loading.value)
 </script>
 
 <template>
-	<div
-		class="table-list-wrap h-100"
-		v-bind="containerProps"
-		:class="{ overflowHiddenLoading: showLoading }"
-	>
+	<div class="table-list-wrap h-100" v-bind="containerProps" :class="{ overflowHiddenLoading: showLoading }">
 		<Loading v-if="showLoading" class="h100p" />
 		<div v-bind="wrapperProps" :class="{ 'pointer-events-none': showLoading }">
-			<table class="infinite-wrapper">
+			<table class="infinite-wrapper" :class="{ selecting: computedSelectedItems.length }">
 				<thead class="row first-row">
 					<th v-if="isSelectable">
-						<input
-							ref="allSelectorEl"
-							type="checkbox"
-							@click.stop
-							@change="(e) => toggleSelectAll(e)"
-						>
+						<input ref="allSelectorEl" type="checkbox" @click.stop @change="(e) => toggleSelectAll(e)">
 						<!-- @change="toggleSelectAll" -->
 					</th>
 					<th
-						v-for="field in computedSchema"
-						:key="field.id"
-						class="col"
+						v-for="field in computedSchema" :key="field.id" class="col"
 						@click="toggleSort(field?.id || '')"
 					>
 						<div class="flex">
 							{{ field.label || keyToLabel(field?.id) }}
-							<div
-								class="list-arrows"
-								:class="{ sorted: sortField === field?.id }"
-							>
-								<Icon
-									:class="{ desc: sortDirection === 'DESC' }"
-									icon="keyboard_arrow_up"
-								/>
+							<div class="list-arrows" :class="{ sorted: sortField === field?.id }">
+								<Icon :class="{ desc: sortDirection === 'DESC' }" icon="keyboard_arrow_up" />
 							</div>
 						</div>
 					</th>
 				</thead>
 				<tbody>
 					<tr
-						v-for="{ data: row } in list"
-						:key="row?.id || `row-${Math.random()}`"
+						v-for="{ data: row } in list" :key="row?.id || `row-${Math.random()}`"
 						class="row row-item position-relative"
 						:class="{ selected: row?.id && computedSelectedItems.includes(row.id) }"
-						@click="toggleSelectItem(row)"
+						@click="(event) => toggleSelectItem(row, event)"
 					>
 						<td v-if="isSelectable">
 							<div @click.stop>
-								<input
-									v-model="selectedItems"
-									type="checkbox"
-									:value="row?.id || ''"
-								>
+								<input v-model="selectedItems" type="checkbox" :value="row?.id || ''">
 							</div>
 						</td>
 						<td
-							v-for="field in computedSchema"
-							:key="`${field.id}-${row?.id || Math.random()}`"
+							v-for="field in computedSchema" :key="`${field.id}-${row?.id || Math.random()}`"
 							class="col"
 						>
-							<slot
-								v-if="field.id && slots?.[field.id]"
-								:name="field.id"
-								:row="row"
-								:field="field"
-							/>
+							<slot v-if="field.id && slots?.[field.id]" :name="field.id" :row="row" :field="field" />
 							<div v-else>
-								<component
-									:is="renderFieldForRow(field, row)"
-								/>
+								<component :is="renderFieldForRow(field, row)" />
 							</div>
 						</td>
 					</tr>
@@ -233,13 +203,19 @@ tbody tr.selected:hover {
 	border-radius: 5px;
 	object-fit: cover;
 }
+
 .col:has(img) {
 	padding-inline-end: 0.5rem;
 }
 
-.overflowHiddenLoading{
+.selecting .col {
+	user-select: none;
+}
+
+.overflowHiddenLoading {
 	overflow: hidden !important;
 }
+
 .list-arrows.sorted .desc {
 	transform: rotate(180deg);
 	display: inline-block;
@@ -313,7 +289,7 @@ th {
 	padding: 0rem 0.25rem;
 }
 
-.col > div {
+.col>div {
 	display: flex;
 	gap: 0.5rem;
 }

package/src/components/dataTable/useTableData.ts

@@ -1,7 +1,8 @@
-import type { BglFormSchemaT } from '@bagelink/vue'
+import type { BglFormSchemaT, Field } from '@bagelink/vue'
+import type { DefaultPathsOptions } from 'type-fest/source/paths'
 import type { MaybeRefOrGetter } from 'vue'
 import type { SortDirectionsT } from '../../types/TableSchema'
-import { useBglSchema, isDate, keyToLabel } from '@bagelink/vue'
+import { useBglSchema, isDate, keyToLabel, formatDate } from '@bagelink/vue'
 import { computed, ref, watch, toValue } from 'vue'
 
 const NON_DIGIT_REGEX = /[^\d.-]/g
@@ -30,6 +31,13 @@ interface TransformedDataBase {
 
 type TransformedData<TransDataT> = TransDataT & TransformedDataBase
 
+function autoTransform<T>(field: Field<T, DefaultPathsOptions>): Field<T, DefaultPathsOptions> {
+	if ((field.id === 'created_at' || field.id === 'updated_at') && !field.transform) {
+		field.transform = (val?: any) => val ? formatDate(val) : val
+	}
+	return field
+}
+
 export function useTableData<T extends { [key: string]: any }>(options: UseTableDataOptions<T>) {
 	// Sorting state
 	const sortField = ref('')
@@ -55,7 +63,7 @@ export function useTableData<T extends { [key: string]: any }>(options: UseTable
 
 			// If we have a valid schema with fields, filter out fields without an ID
 			if (Array.isArray(schema) && schema.length > 0) {
-				resolvedSchema.value = schema.filter(field => field && field.id)
+				resolvedSchema.value = schema.filter(field => field && field.id).map(autoTransform)
 			} else if (Array.isArray(dataValue) && dataValue.length > 0) {
 				// If no schema is provided or it's empty, generate a default schema from the data
 				const firstItem = dataValue[0]

package/src/components/dataTable/useTableSelection.ts

@@ -9,6 +9,7 @@ export interface UseTableSelectionOptions<T> extends TableSelectionOptions<T> {
 
 export function useTableSelection<T extends { [key: string]: any }>(options: UseTableSelectionOptions<T>) {
 	const allSelectorEl = ref<HTMLInputElement>()
+	const lastSelectedIndex = ref<number | null>(null)
 	const computedSelectedItems = computed(() => options.selectedItems.value)
 	const isSelectable = computed(() => options.selectable === true && Array.isArray(options.selectedItems.value))
 	const allItems = $computed(() => options.data.value)
@@ -39,7 +40,37 @@ export function useTableSelection<T extends { [key: string]: any }>(options: Use
     = !allSelected && options.selectedItems.value.length > 0
 	}
 
-	function toggleSelectItem(item: T) {
+	function toggleSelectItem(item: T, event?: MouseEvent) {
+		const currentIndex = allItems.findIndex(i => i.id === item.id)
+
+		// Handle Shift+click for range selection
+		if (event?.shiftKey && lastSelectedIndex.value !== null && currentIndex !== -1) {
+			const startIndex = Math.min(lastSelectedIndex.value, currentIndex)
+			const endIndex = Math.max(lastSelectedIndex.value, currentIndex)
+
+			// Get all items in the range
+			const rangeItems = allItems.slice(startIndex, endIndex + 1)
+			const rangeItemIds = rangeItems.map(i => i.id)
+
+			// Check if all items in range are currently selected
+			const allRangeSelected = rangeItemIds.every(id => options.selectedItems.value.includes(id)
+			)
+
+			if (allRangeSelected) {
+				// Deselect all items in range
+				options.selectedItems.value = options.selectedItems.value.filter(id => !rangeItemIds.includes(id)
+				)
+			} else {
+				// Select all items in range (add missing ones)
+				const newSelections = rangeItemIds.filter(id => !options.selectedItems.value.includes(id)
+				)
+				options.selectedItems.value.push(...newSelections)
+			}
+
+			return
+		}
+
+		// Regular single item selection logic
 		if (computedSelectedItems.value.length === 0) {
 			// Clean the item if a cleanData function is provided, otherwise use the default cleaning
 			const cleanItem = options.cleanData ? options.cleanData(item) : { ...item }
@@ -54,14 +85,19 @@ export function useTableSelection<T extends { [key: string]: any }>(options: Use
 			}
 
 			options.onSelect(cleanItem)
+			lastSelectedIndex.value = currentIndex
 			return
 		}
+
 		const index = computedSelectedItems.value.indexOf(item.id)
 		if (index > -1) {
 			options.selectedItems.value.splice(index, 1)
 		} else {
 			options.selectedItems.value.push(item.id)
 		}
+
+		// Update last selected index for future range selections
+		lastSelectedIndex.value = currentIndex
 	}
 
 	// Update toggleSelectAll to pass allItems to updateAllSelectorState
@@ -73,6 +109,9 @@ export function useTableSelection<T extends { [key: string]: any }>(options: Use
 		} else {
 			options.selectedItems.value = []
 		}
+
+		// Reset last selected index when selecting/deselecting all
+		lastSelectedIndex.value = null
 	}
 
 	return {

package/src/styles/appearance.css

@@ -145,10 +145,18 @@
     color: var(--bgl-primary-light) !important;
 }
 
+.bg-blue {
+    background: var(--bgl-blue) !important;
+}
+
 .bg-blue-20 {
     background: var(--bgl-blue-20) !important;
 }
 
+.color-blue {
+    color: var(--bgl-blue) !important;
+}
+
 .color-blue-20 {
     color: var(--bgl-blue-20) !important;
 }
@@ -830,6 +838,46 @@
     scrollbar-gutter: stable both-edges;
 }
 
+.mix-blend-mode-multiply {
+    mix-blend-mode: multiply;
+}
+
+.mix-blend-mode-screen {
+    mix-blend-mode: screen;
+}
+
+.mix-blend-mode-overlay {
+    mix-blend-mode: overlay;
+}
+
+.mix-blend-mode-darken {
+    mix-blend-mode: darken;
+}
+
+.mix-blend-mode-lighten {
+    mix-blend-mode: lighten;
+}
+
+.mix-blend-mode-color-dodge {
+    mix-blend-mode: color-dodge;
+}
+
+.mix-blend-mode-color-burn {
+    mix-blend-mode: color-burn;
+}
+
+.mix-blend-mode-hard-light {
+    mix-blend-mode: hard-light;
+}
+
+.mix-blend-mode-soft-light {
+    mix-blend-mode: soft-light;
+}
+
+.mix-blend-mode-none,
+.mix-blend-mode-normal {
+    mix-blend-mode: normal;
+}
 
 @media screen and (max-width: 910px) {
     .m_scrollbar-gutter {
@@ -987,10 +1035,18 @@
         color: var(--bgl-primary-light) !important;
     }
 
+    .m_bg-blue {
+        background: var(--bgl-blue) !important;
+    }
+
     .m_bg-blue-20 {
         background: var(--bgl-blue-20) !important;
     }
 
+    .m_color-blue {
+        color: var(--bgl-blue) !important;
+    }
+
     .m_color-blue-20 {
         color: var(--bgl-blue-20) !important;
     }
@@ -1641,4 +1697,45 @@
         transform: rotateY(0deg) !important;
     }
 
+    .m_mix-blend-mode-multiply {
+        mix-blend-mode: multiply;
+    }
+
+    .m_mix-blend-mode-screen {
+        mix-blend-mode: screen;
+    }
+
+    .m_mix-blend-mode-overlay {
+        mix-blend-mode: overlay;
+    }
+
+    .m_mix-blend-mode-darken {
+        mix-blend-mode: darken;
+    }
+
+    .m_mix-blend-mode-lighten {
+        mix-blend-mode: lighten;
+    }
+
+    .m_mix-blend-mode-color-dodge {
+        mix-blend-mode: color-dodge;
+    }
+
+    .m_mix-blend-mode-color-burn {
+        mix-blend-mode: color-burn;
+    }
+
+    .m_mix-blend-mode-hard-light {
+        mix-blend-mode: hard-light;
+    }
+
+    .m_mix-blend-mode-soft-light {
+        mix-blend-mode: soft-light;
+    }
+
+    .m_mix-blend-mode-none,
+    .m_mix-blend-mode-normal {
+        mix-blend-mode: normal;
+    }
+
 }