@bagelink/vue 1.4.71 → 1.4.73

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@bagelink/vue",
   "type": "module",
-  "version": "1.4.71",
+  "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/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/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;
+    }
+
 }