@bagelink/vue 0.0.1240 → 0.0.1246

package/src/components/Calendar/components/month/Month.vue

@@ -150,7 +150,7 @@ onMounted(() => {
 				:time="time"
 			/>
 		</div>
-		<div class="calendar-month__weeks h-100p flex-grow flex flex-stretch column space-between ">
+		<div class="calendar-month__weeks h-100p flex-grow flex flex-stretch column space-between">
 			<div
 				v-for="(week, weekIndex) in month"
 				:key="weekIndex"
@@ -188,7 +188,7 @@ onMounted(() => {
 
 		<div
 			v-if="!(config.month?.showEventsOnMobileView === false)"
-			class="calendar-month__day_events w-100p pt-1"
+			class="calendar-month__day_events w-100p pt-1 m_pb-1"
 		>
 			<AgendaEvents
 				v-if="selectedDay"
@@ -225,8 +225,17 @@ onMounted(() => {
 		display: flex;
 		flex: 1;
 	}
-
 	.calendar-month__week:first-child {
 		border-top: var(--qalendar-border-gray-thin);
 	}
+	.calendar-root.mode-is-month.qalendar-is-small .calendar-month.h-100p{
+		height: auto !important;
+	}
+	.calendar-root.mode-is-month.qalendar-is-small .calendar-month__weeks{
+		display: block !important;
+		height: auto !important;
+	}
+	.calendar-root.mode-is-month.qalendar-is-small .calendar-month__weekday{
+		height: 40px !important;
+	}
 </style>

package/src/components/Calendar/components/partials/EventFlyout.vue

@@ -34,7 +34,7 @@ const eventFlyoutPositionHelper = new EventFlyoutPosition()
 
 const isVisible = ref(false)
 const top = ref<number | null>(0)
-const left = ref<number | null>(0)
+const insetInlineEnd = ref<number | null>(0)
 const calendarEvent = ref(props.calendarEventProp)
 const flyoutWidth = `${EVENT_FLYOUT_WIDTH}px`
 const colors = EVENT_COLORS
@@ -85,7 +85,7 @@ const getEventTime = computed(() => {
 })
 
 const eventFlyoutInlineStyles = computed(() => {
-	if (typeof top.value === 'number' && !left.value) {
+	if (typeof top.value === 'number' && !insetInlineEnd.value) {
 		return {
 			top: `${top.value}px`,
 			left: '50%',
@@ -96,7 +96,7 @@ const eventFlyoutInlineStyles = computed(() => {
 
 	return {
 		top: `${top.value}px`,
-		left: `${left.value}px`,
+		insetInlineEnd: `${insetInlineEnd.value}px`,
 		position: 'fixed' as const,
 	}
 })
@@ -132,7 +132,7 @@ function setFlyoutPosition() {
 	)
 
 	top.value = typeof flyoutPosition?.top === 'number' ? flyoutPosition.top : null
-	left.value = typeof flyoutPosition?.left === 'number' ? flyoutPosition.left : null
+	insetInlineEnd.value = typeof flyoutPosition?.left === 'number' ? flyoutPosition.left : null
 }
 
 function editEvent() {
@@ -355,7 +355,7 @@ onBeforeUnmount(() => {
 .is-not-editable .event-flyout__menu-close {
 	position: absolute;
 	top: 0;
-	right: 0;
+	inset-inline-end: 0;
 }
 
 .event-flyout__menu-item {

package/src/components/Calendar/components/week/DayEvent.vue

@@ -132,12 +132,12 @@ const hasDisabledResize = computed(() => {
 })
 
 const requiredStyles = computed(() => ({
-	top: getPositionInDay(event.value.time.start),
-	height: getLengthOfEvent(event.value.time.start, event.value.time.end),
-	left: `${getLeftRule.value}%`,
-	width: `${getWidthRule.value}%`,
-	transform: eventTransformValue.value,
-	zIndex: eventZIndexValue.value,
+	'top': getPositionInDay(event.value.time.start),
+	'height': getLengthOfEvent(event.value.time.start, event.value.time.end),
+	'inset-inline-start': `${getInlineStartRule.value}%`,
+	'width': `${getWidthRule.value}%`,
+	'transform': eventTransformValue.value,
+	'zIndex': eventZIndexValue.value,
 }))
 
 // Methods

package/src/components/Calendar/components/week/DayTimeline.vue

@@ -29,13 +29,13 @@ function getLocaleTimeString(time: DAY_TIME_POINT): string {
 </script>
 
 <template>
-	<div class="day-timeline">
+	<div class="day-timeline absolute top-0 start-0 space-evenly column display-flex">
 		<div
 			v-for="hour in timelineHours"
 			:key="hour"
-			class="day-timeline__hour"
+			class="day-timeline__hour display-flex column ustify-content-start h-100p ps-05"
 		>
-			<span class="day-timeline__hour-text">
+			<span class="day-timeline__hour-text line-height-0">
 				{{ getLocaleTimeString(hour) }}
 			</span>
 		</div>
@@ -44,29 +44,29 @@ function getLocaleTimeString(time: DAY_TIME_POINT): string {
 
 <style scoped>
 .day-timeline {
-	position: absolute;
-	top: 0;
-	left: 0;
 	width: calc(100% + 10px);
 	height: v-bind(weekHeight);
 	transform: translateX(-10px);
-	display: flex;
-	flex-flow: column;
-	justify-content: space-evenly;
+}
+[dir="rtl"] .day-timeline {
+	transform: translateX(10px);
+}
+[dir="rtl"] .ltr .day-timeline {
+	transform: translateX(-10px);
 }
 
 .day-timeline__hour {
-	padding-left: 4px;
-	display: flex;
-	flex-flow: column;
-	justify-content: flex-start;
-	height: 100%;
 	font-size: clamp(10px, 0.625rem, 14px);
 	color: var(--qalendar-gray-quite-dark);
 }
 
 .day-timeline__hour-text {
-	line-height: 0;
+	transform: translate(-40px, 0);
+}
+[dir="rtl"] .day-timeline__hour-text {
+	transform: translate(40px, 0);
+}
+[dir="rtl"] .ltr .day-timeline__hour-text {
 	transform: translate(-40px, 0);
 }
 
@@ -77,10 +77,4 @@ function getLocaleTimeString(time: DAY_TIME_POINT): string {
 .day-timeline__hour:not(:last-child) {
 	border-bottom: var(--qalendar-border-gray-thin);
 }
-
-@media (prefers-color-scheme: dark) {
-	.day-timeline__hour:not(:last-child) {
-		border-color: var(--qalendar-dark-mode-line-color);
-	}
-}
 </style>

package/src/components/Calendar/components/week/FullDayEvent.vue

@@ -109,7 +109,7 @@ onMounted(() => {
   border-radius: 4px;
   padding: var(--event-padding);
   margin-bottom: 0.25em;
-  text-align: left;
+  text-align: start;
   cursor: pointer;
   user-select: none;
   overflow: hidden;

package/src/components/Calendar/components/week/Week.vue

@@ -365,7 +365,7 @@ function setCurrentTime() {
 <style scoped>
 .calendar-week__wrapper {
 	position: relative;
-	padding-left: var(--qalendar-week-padding-left);
+	padding-inline-start: var(--qalendar-week-padding-left);
 	overflow-y: auto;
 }
 
@@ -384,7 +384,7 @@ function setCurrentTime() {
 
 .calendar-week .current-time-line {
 	position: absolute;
-	left: 0;
+	inset-inline-start: 0;
 	width: 100%;
 	height: 2px;
 	z-index: 1;
@@ -407,7 +407,7 @@ function setCurrentTime() {
 
 .calendar-week .custom-current-time {
 	position: absolute;
-	left: 0;
+	inset-inline-start: 0;
 	width: 100%;
 	z-index: 1;
 }

package/src/components/Calendar/language/index.ts

@@ -16,6 +16,7 @@ export const localeMap = new Map<string, string>([
 	['ja', 'ja-JP'],
 	['pl', 'pl-PL'],
 	['hu', 'hu-HU'],
+	['he', 'he-IL']
 ])
 
 export function overrideShortLocaleWithLongLocale(locale: string): string {

package/src/components/Calendar/language/keys.ts

@@ -16,6 +16,7 @@ export const languageKeys = {
 		'ja-JP': '週',
 		'pl-PL': 'Tydzień',
 		'hu-HU': 'Hét',
+		'he-IL': 'שבוע',
 	},
 	month: {
 		'it-IT': 'Mese',
@@ -33,6 +34,7 @@ export const languageKeys = {
 		'ja-JP': '月',
 		'pl-PL': 'Miesiąc',
 		'hu-HU': 'Hónap',
+		'he-IL': 'חודש',
 	},
 	day: {
 		'it-IT': 'Giorno',
@@ -50,9 +52,11 @@ export const languageKeys = {
 		'ja-JP': '日',
 		'pl-PL': 'Dzień',
 		'hu-HU': 'Nap',
+		'he-IL': 'יום',
 	},
 	agenda: {
 		'en-US': 'Agenda',
+		'he-IL': 'סדר יום',
 	},
 	/** Other keys */
 	moreEvents: {
@@ -71,6 +75,7 @@ export const languageKeys = {
 		'ja-JP': 'その他イベント',
 		'pl-PL': '+ więcej wydarzeń',
 		'hu-HU': 'További események',
+		'he-IL': '+ עוד אירועים',
 	},
 
 	noEvent: {
@@ -89,5 +94,6 @@ export const languageKeys = {
 		'ja-JP': 'イベントなし',
 		'pl-PL': 'Brak wydarzeń',
 		'hu-HU': 'Nincs esemény',
+		'he-IL': 'אין אירועים',
 	},
 }

package/src/components/Image.vue

@@ -24,8 +24,7 @@ let loadingError = $ref(false)
 
 function getImageUrl(): string | null {
 	if (!props.src && !props.pathKey) return null
-	if (props.src) return props.src
-	return pathKeyToURL(props.pathKey)
+	return pathKeyToURL(props.src || props.pathKey)
 }
 
 async function getCachedImage(url: string): Promise<string | null> {

package/src/components/index.ts

@@ -4,7 +4,6 @@ export { default as AddressSearch } from './AddressSearch.vue'
 export { default as Alert } from './Alert.vue'
 export { default as Avatar } from './Avatar.vue'
 export { default as Badge } from './Badge.vue'
-export { default as BglComponent } from './BglComponent.vue'
 export { default as BglVideo } from './BglVideo.vue'
 export { default as Btn } from './Btn.vue'
 // export { default as CalendarExample } from './Calendar/CalendarExample.vue'

package/src/components/lightbox/index.ts

@@ -49,7 +49,7 @@ function openClickHandler(e: MouseEvent, el: HTMLElement, binding: DirectiveBind
 
 function bindingToItem(binding: DirectiveBinding, el: HTMLElement): LightboxItem {
 	let { group, src, type, name, thumbnail, enableZoom, openFile, download, pathKey } = binding.value || {}
-	src = src || pathKeyToURL(pathKey) || binding.value || el.getAttribute('src') || ''
+	src = pathKeyToURL(src || pathKey) || binding.value || el.getAttribute('src') || ''
 	type = type || determineFileType(src)
 	name = name || urlToName(src) || el.getAttribute('alt') || ''
 	return { src, type, name, thumbnail, group, enableZoom,	openFile, download }
@@ -67,7 +67,8 @@ function urlToName(url: string): string {
 function determineFileType(url: string): string {
 	if (!url) return 'unknown'
 	const extension = (url.split('.').pop() || '').toLowerCase()
-	if (IMAGE_FORMATS_REGEXP.test(extension)) return 'image'
+	const altExtension = url.split('?')[0].split('.').pop()?.toLowerCase() || ''
+	if (IMAGE_FORMATS_REGEXP.test(extension) || IMAGE_FORMATS_REGEXP.test(altExtension)) return 'image'
 	if (VIDEO_FORMATS_REGEXP.test(extension) || youtubeRegex.test(url) || vimeoRegex.test(url)) return 'video'
 	if (['pdf'].includes(extension)) return 'pdf'
 	return extension ?? 'unknown'

package/src/composables/useSchemaField.ts

@@ -9,7 +9,6 @@ import {
 	CheckInput,
 	RichText,
 	UploadInput,
-	FileUpload,
 	DateInput,
 	TabsNav,
 	BglForm,

package/src/styles/layout.css

@@ -5360,6 +5360,10 @@
     align-items: center;
 }
 
+.display-flex {
+    display: flex;
+}
+
 .inline-flex {
     display: inline-flex;
     align-items: center;

package/src/styles/mobilLayout.css

@@ -15,6 +15,10 @@
         display: flex !important;
     }
 
+    .m_display-flex {
+        display: flex !important;
+    }
+
     .inline-flex {
         display: inline-flex !important;
     }

package/src/utils/index.ts

@@ -173,7 +173,9 @@ const fileBaseUrl = (import.meta.env.VITE_FILE_BASE_URL || 'https://files.bagel.
 const bagelBaseUrl = import.meta.env.VITE_BAGEL_BASE_URL
 
 export function pathKeyToURL(pathKey?: string) {
-	if (pathKey?.startsWith('static/')) {
+	const urlRE = /^https?:\/\/|^\/\//
+	if (!pathKey || urlRE.test(pathKey)) return pathKey
+	if (pathKey.startsWith('static/')) {
 		return `${bagelBaseUrl}/${pathKey}`
 	}
 	return `${fileBaseUrl}/${pathKey}`

package/src/components/BglComponent.vue

@@ -1,187 +0,0 @@
-<script setup lang="ts" generic="T extends Record<string, any>">
-import type { Field } from '@bagelink/vue'
-import {
-	CheckInput,
-	DateInput,
-	FieldArray,
-
-	FileUpload,
-	RichText,
-	SelectInput,
-	TextInput,
-	ToggleInput,
-	bindAttrs,
-	classify,
-	NumberInput,
-	UploadInput,
-	BglForm,
-	TabsNav
-} from '@bagelink/vue'
-
-const props = defineProps<{
-	field: Field<T>
-	id?: string
-	modelValue?: any
-	parentPath?: string
-}>()
-
-const emit = defineEmits<{
-	'update:modelValue': [value: any]
-}>()
-
-const customAttrs = $ref<{ [key: string]: any }>({})
-
-const is = $computed(() => {
-	if (props.field.$el === 'text') return TextInput
-	if (props.field.$el === 'textarea') {
-		customAttrs.multiline = true
-		return TextInput
-	}
-	if (props.field.$el === 'number') return NumberInput
-	if (props.field.$el === 'array') return FieldArray
-	if (props.field.$el === 'select') return SelectInput
-	if (props.field.$el === 'toggle') return ToggleInput
-	if (props.field.$el === 'check') return CheckInput
-	if (props.field.$el === 'richtext') return RichText
-	if (props.field.$el === 'upload') return UploadInput
-	if (props.field.$el === 'file') return FileUpload
-	if (props.field.$el === 'date') return DateInput
-	if (props.field.$el === 'tabs') return TabsNav
-	if (props.field.$el === 'form') return BglForm
-	return props.field.$el ?? 'div'
-})
-
-function getFieldData(path?: string) {
-	if (!path) return ''
-	const keys = path.split(/[.[]/)
-	let current = props.modelValue as any
-
-	for (let i = 0; i < keys.length; i++) {
-		const key = keys[i]
-		if (!current || typeof current !== 'object' || !(key in current)) {
-			return ''
-		}
-		current = current[key]
-	}
-	return current ?? ''
-}
-function safeClone(obj: any): any {
-	if (obj === null || typeof obj !== 'object') return obj
-
-	const seen = new WeakSet()
-	return JSON.parse(JSON.stringify(obj, (key, value) => {
-		if (typeof value === 'object' && value !== null) {
-			if (seen.has(value)) {
-				return undefined // Remove circular reference
-			}
-			seen.add(value)
-		}
-		return value
-	}))
-}
-function updateField(path: string, value: any) {
-	const keys = path.split(/[.[]/)
-
-	let current = props.modelValue ?? {} as any
-
-	// Build the path, ensuring each level is an object
-	for (let i = 0; i < keys.length - 1; i++) {
-		const key = keys[i]
-		if (!(key in current) || typeof current[key] !== 'object' || current[key] === null) {
-			current[key] = {}
-		}
-		current = current[key]
-	}
-
-	// Safely clone the value to remove circular references
-	const safeValue = safeClone(value)
-	current[keys[keys.length - 1]] = safeValue
-}
-
-const fieldData = $computed({
-	get: () => {
-		if (!props.id) return props.modelValue ?? props.field.defaultValue ?? (props.field.$el === 'form' ? {} : '')
-		const value = getFieldData(props.id)
-		if (props.field.$el === 'form' && !value) return {}
-		return value ?? ''
-	},
-	set: (val: any) => {
-		if (!props.id) return
-		const currentValue = getFieldData(props.id)
-		if (JSON.stringify(val) === JSON.stringify(currentValue)) return
-
-		emit('update:modelValue', val)
-		if (props.field.onUpdate) {
-			props.field.onUpdate(val, currentValue)
-		}
-		updateField(props.id, val)
-	}
-})
-
-const computedFieldData = $computed(
-	() => props.field.transform?.(fieldData, props.modelValue as T) ?? fieldData
-)
-
-const vIf = $computed(() => {
-	if (props.field['v-if'] === undefined && props.field.vIf === undefined) return true
-	if (typeof props.field['v-if'] === 'boolean' || typeof props.field.vIf === 'boolean') return props.field['v-if']
-	if (typeof props.field['v-if'] === 'string' || typeof props.field.vIf === 'string') return true
-	if (typeof props.field['v-if'] === 'function') return props.field['v-if'](fieldData, props.modelValue as T)
-	if (typeof props.field.vIf === 'function') return props.field.vIf(fieldData, props.modelValue as T)
-	return true
-})
-
-const computedOptions = $computed(
-	() => bindAttrs({ options: props.field.options }, fieldData, props.modelValue).options
-)
-
-const computedAttrs = $computed(() => {
-	const attrs = { ...customAttrs, ...props.field.attrs }
-	const boundAttrs = bindAttrs(attrs, fieldData, props.modelValue)
-	return Object.fromEntries(
-		Object.entries(boundAttrs).filter(([_, value]) => value !== undefined)
-	)
-})
-
-const computedClass = $computed(
-	() => classify(fieldData, props.modelValue, props.field.class, props.field.attrs?.class)
-)
-</script>
-
-<template>
-	<component
-		v-bind="computedAttrs"
-		:is="is"
-		v-if="vIf"
-		:id="props.id"
-		v-model="fieldData"
-		:required="field.required"
-		:class="computedClass"
-		:label="field.label"
-		:placeholder="field.placeholder || field.label"
-		:defaultValue="field.defaultValue"
-		:disabled="field.disabled"
-		:options="computedOptions"
-		:helptext="field.helptext"
-		:schema="field.attrs?.schema ?? undefined"
-	>
-		<template v-if="field.$el === 'form'">
-			<slot />
-		</template>
-		<template v-else>
-			{{ computedFieldData }}
-			<template
-				v-for="(child, ii) in field.children"
-				:key="ii"
-			>
-				<BglComponent
-					v-if="(typeof child !== 'string')"
-					:id="[props.id, child.id].filter(Boolean).join('.')"
-					:field="child"
-					:parent-path="props.id"
-				/>
-				<span v-else>{{ child }}</span>
-			</template>
-		</template>
-	</component>
-</template>