@bagelink/vue 1.1.23 → 1.1.29

package/src/components/Carousel.vue

@@ -148,13 +148,21 @@ function goToSlide(index: number, isTouchNav = false) {
 function next() {
 	if (!isSliderAvailable) return
 	countSlides()
-	goToSlide((activeSlideIndex + 1) % slideCount)
+	// In RTL, next and prev are reversed
+	const nextIndex = props.rtl
+		? (activeSlideIndex - 1 + slideCount) % slideCount
+		: (activeSlideIndex + 1) % slideCount
+	goToSlide(nextIndex)
 }
 
 function prev() {
 	if (!isSliderAvailable) return
 	countSlides()
-	goToSlide((activeSlideIndex - 1 + slideCount) % slideCount)
+	// In RTL, next and prev are reversed
+	const prevIndex = props.rtl
+		? (activeSlideIndex + 1) % slideCount
+		: (activeSlideIndex - 1 + slideCount) % slideCount
+	goToSlide(prevIndex)
 }
 
 // Height management
@@ -264,7 +272,7 @@ function onDrag(e: MouseEvent) {
 
 	if (Math.abs(distance) > THRESHOLDS.DRAG) isDragging = true
 	if (isDragging) {
-		const newTranslate = translateX + distance
+		const newTranslate = translateX + (props.rtl ? -distance : distance)
 		const maxTranslate = 0
 
 		const containerWidth = bglSlider.offsetWidth
@@ -294,8 +302,8 @@ function endDrag() {
 
 	let targetPanel = currentPanel
 	if (dragPercentage > THRESHOLDS.SWIPE_PERCENT) {
-		const direction = totalDragDistance > 0 ? -1 : 1
-		targetPanel = Math.floor(currentPanel) + (direction < 0 ? 0 : 1)
+		const distnace = totalDragDistance > 0 ? -1 : 1
+		targetPanel = Math.floor(currentPanel) + (distnace < 0 ? 0 : 1)
 	} else {
 		targetPanel = Math.round(currentPanel)
 	}
@@ -457,6 +465,7 @@ function onTouchEnd() {
 			? (totalSwipeDistance > 0 ? -1 : 1)
 			: velocityDirection
 
+		// Apply RTL correction to direction
 		const rtlDirection = props.rtl ? -direction : direction
 
 		if (isMobile) {
@@ -509,7 +518,8 @@ function onWheel(e: WheelEvent) {
 	clearAutoplay()
 	if (wheelTimeout) clearTimeout(wheelTimeout)
 
-	accumulatedDeltaX += e.deltaX
+	// Reverse the delta direction for RTL mode
+	accumulatedDeltaX += props.rtl ? -e.deltaX : e.deltaX
 
 	wheelTimeout = setTimeout(() => {
 		accumulatedDeltaX = 0
@@ -567,12 +577,12 @@ watch(() => activeSlideIndex, handleSlideChange)
 </script>
 
 <template>
-	<div class="BglCarousel" :style="{ height: yHeight }" :class="{ autoHeight }" :dir="rtl ? 'rtl' : 'ltr'">
+	<div class="BglCarousel" :dir="rtl ? 'rtl' : 'ltr'">
 		<div
 			ref="bglSlider"
 			class="bgl-slider"
-			:class="{ dragging: isDragging, clicking: isPressed, [`slides-${itemCount}`]: true, grab: freeDrag && slideCount > 1 }"
-			:style="{ '--item-count': itemCount }"
+			:class="{ dragging: isDragging, clicking: isPressed, [`slides-${itemCount}`]: true, grab: freeDrag && slideCount > 1, autoHeight }"
+			:style="{ '--item-count': itemCount, 'height': yHeight }"
 			@mousedown="startDrag"
 			@mouseover="clearAutoplay"
 			@focusin="clearAutoplay"
@@ -592,9 +602,9 @@ watch(() => activeSlideIndex, handleSlideChange)
 				@click="goToSlide(i - 1)"
 			/>
 		</div>
-		<div class="Handlers">
-			<span @click="prev"><slot name="prev" :index="activeSlideIndex" :prev="prev" /></span>
-			<span @click="next"><slot name="next" :index="activeSlideIndex" :next="next" /></span>
+		<div class="navigation-buttons" :class="{ rtl }">
+			<span class="prev" @click="prev"><slot name="prev" :index="activeSlideIndex" :prev="prev" /></span>
+			<span class="next" @click="next"><slot name="next" :index="activeSlideIndex" :next="next" /></span>
 		</div>
 	</div>
 </template>
@@ -669,4 +679,16 @@ watch(() => activeSlideIndex, handleSlideChange)
 .dot.current {
 	opacity: 0.8;
 }
+
+.navigation-buttons {
+	display: flex;
+	justify-content: center;
+	align-items: center;
+	gap: 1rem;
+	margin-top: 1rem;
+}
+
+.navigation-buttons.rtl {
+	flex-direction: row-reverse;
+}
 </style>

package/src/components/Dropdown.vue

@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import type { IconType, ThemeType } from '@bagelink/vue'
 import type { TriggerEvent } from 'floating-vue'
-import { Btn } from '@bagelink/vue'
+import { Btn, useDevice } from '@bagelink/vue'
 import { Dropdown as DDown } from 'floating-vue'
 
 export type Side = 'top' | 'right' | 'bottom' | 'left' | 'auto'
@@ -19,6 +19,7 @@ const {
 	outline,
 	round,
 	placement = 'bottom-start',
+	disablePlacement = false,
 	noAutoFocus,
 	autoHide = true,
 	triggers = ['click'],
@@ -36,6 +37,7 @@ const {
 	outline?: boolean
 	round?: boolean
 	placement?: AlignedPlacement
+	disablePlacement?: boolean
 	noAutoFocus?: boolean
 	autoHide?: boolean
 	triggers?: TriggerEvent[]
@@ -86,6 +88,12 @@ function hide() {
 	ddownRef?.hide()
 }
 
+const { isMobile } = useDevice()
+
+const shouldDisablePositioning = $computed(() => {
+	return disablePlacement && isMobile
+})
+
 defineExpose({ show, hide, shown })
 </script>
 
@@ -95,6 +103,7 @@ defineExpose({ show, hide, shown })
 		v-model:shown="shown"
 		:disabled="disabled"
 		:noAutoFocus="noAutoFocus"
+		:positioning-disabled="shouldDisablePositioning"
 		:placement="placement"
 		:autoHide="autoHide"
 		:triggers="triggers"
@@ -120,3 +129,31 @@ defineExpose({ show, hide, shown })
 		</template>
 	</DDown>
 </template>
+
+<style>
+.v-popper__popper--no-positioning {
+  position: fixed;
+  z-index: 9999;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  display: flex;
+  align-items: flex-end;
+}
+
+.v-popper__popper--no-positioning .v-popper__backdrop {
+  display: block;
+  background: rgba(0 0 0 / 90%);
+}
+
+.v-popper__popper--no-positioning .v-popper__wrapper {
+  width: 100%;
+  pointer-events: auto;
+  transition: transform .15s ease-out;
+}
+
+.v-popper__popper--no-positioning.v-popper__popper--hidden .v-popper__wrapper {
+  transform: translateY(100%);
+}
+</style>

package/src/components/ListItem.vue

@@ -2,43 +2,86 @@
 import type { IconType } from '@bagelink/vue'
 import { Avatar, Icon } from '@bagelink/vue'
 
-defineProps<{
+const props = defineProps<{
 	src?: string
 	showAvatar?: boolean
 	to?: string
+	href?: string
 	icon?: IconType
 	title?: string
 	subtitle?: string
 	flat?: boolean
+	disabled?: boolean
+	lead?: string
+	iconEnd?: IconType
+	target?: '_blank' | '_self'
 	onClick?: () => void
 }>()
+
+const isComponent = $computed(() => {
+	if (props.to) return 'router-link'
+	if (props.href) return 'a'
+	if (props.onClick) return 'button'
+	return 'div'
+})
+
+const bind = $computed(() => {
+	const obj: Record<string, any> = {}
+	if (props.to) obj.to = props.to
+	else if (props.href) obj.href = props.href
+	if (props.target && (props.to || props.href)) obj.target = props.target
+
+	obj.class = {
+		'notClickable': !(props.to || props.onClick),
+		'no-border-list': props.flat,
+	}
+	if (props.disabled) obj.disabled = true
+	return obj
+})
 </script>
 
 <template>
 	<component
-		:is="to ? 'RouterLink' : 'div'"
-		:to="to"
+		:is="isComponent"
+		v-bind="bind"
 		class="flex gap-05 list-item"
-		:class="{ 'notClickable': !(to || onClick), 'no-border-list': flat }"
 		@click="onClick"
 	>
 		<Avatar v-if="src || showAvatar" style="flex-basis: 1;" :name="title" :src="src" :size="40" />
 		<Icon v-if="icon" size="1.2" class="color-primary" :icon="icon" />
 
 		<div>
+			<p v-if="lead" class="txt10 no-margin txt-gray ellipsis">
+				{{ lead }}
+				<slot name="lead" />
+			</p>
 			<p class="no-margin ellipsis line-height-14 pb-025">
 				{{ title }}
 				<slot />
 			</p>
-			<p class="txt12 no-margin txt-gray ellipsis">
+			<p v-if="subtitle" class="txt12 no-margin txt-gray ellipsis">
 				{{ subtitle }}
 				<slot name="subtitle" />
 			</p>
 		</div>
+		<Icon v-if="iconEnd" :icon="iconEnd" class="transition-400" />
 	</component>
 </template>
 
 <style>
+button.list-item {
+	cursor: pointer;
+	display: flex;
+	gap: 0.5rem;
+	border: none;
+	background-color: unset;
+	width: 100%;
+
+}
+.list-item:disabled {
+	opacity: 0.5;
+	pointer-events: none;
+}
 .list-item {
 	padding: 0.6rem 1rem;
 	min-height: -webkit-fit-content;

package/src/components/Loading.vue

@@ -82,6 +82,7 @@ const computedBorder = $computed(() => {
   width: var(--size);
   height: var(--size);
   transform: translate(calc(var(--thickness) * -1), calc(var(--thickness) * -1));
+  direction: ltr;
 }
 .lds-ring div {
   box-sizing: border-box;

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

@@ -202,6 +202,9 @@ watch(() => modelValue, (newVal) => {
 </template>
 
 <style scoped>
+.txtInputIconStart input{
+	padding-inline-start: calc(var(--input-height) / 1.5);
+}
 .txtInputIconStart .iconStart {
 	color: var(--input-color);
 	position: absolute;

package/src/composables/index.ts

@@ -4,8 +4,7 @@ import type { Ref, UnwrapRef } from 'vue'
 import { getFallbackSchema } from '@bagelink/vue'
 import { ref, watch } from 'vue'
 
-
-
+export { useDevice } from './useDevice'
 
 interface UseBglSchemaParamsT<T> {
 	schema?: BglFormSchemaFnT<T>

package/src/composables/useDevice.ts

@@ -0,0 +1,24 @@
+import { ref, onMounted, onUnmounted } from 'vue'
+
+export function useDevice() {
+	const innerWidth = ref(window.innerWidth)
+	const isMobile = ref(window.innerWidth < 768)
+
+	function updateDeviceInfo() {
+		innerWidth.value = window.innerWidth
+		isMobile.value = window.innerWidth < 768
+	}
+
+	onMounted(() => {
+		window.addEventListener('resize', updateDeviceInfo)
+	})
+
+	onUnmounted(() => {
+		window.removeEventListener('resize', updateDeviceInfo)
+	})
+
+	return {
+		innerWidth,
+		isMobile
+	}
+}

package/src/utils/BagelFormUtils.ts

@@ -351,3 +351,37 @@ export function arrField<T extends { [key: string]: any }>(
 // 				return f
 // 			})
 // }
+
+export function useForm(): {
+	txtField: typeof txtField
+	selectField: typeof selectField
+	checkField: typeof checkField
+	dateField: typeof dateField
+	numField: typeof numField
+	frmRow: typeof frmRow
+	uploadField: typeof uploadField
+	rangeField: typeof rangeField
+	bglForm: typeof bglForm
+	telField: typeof telField
+	colorField: typeof colorField
+	arrField: typeof arrField
+	richText: typeof richText
+	findBglFieldById: typeof findBglFieldById
+} {
+	return {
+		txtField,
+		selectField,
+		checkField,
+		dateField,
+		numField,
+		frmRow,
+		uploadField,
+		rangeField,
+		bglForm,
+		telField,
+		colorField,
+		arrField,
+		richText,
+		findBglFieldById,
+	}
+}

package/src/utils/index.ts

@@ -163,6 +163,7 @@ export function normalizeDimension(value: string | number | undefined, defaultMe
 }
 
 export * as bagelFormUtils from './BagelFormUtils'
+export { useForm } from './BagelFormUtils'
 
 export { useLang } from './lang'
 

package/dist/types/timeago.d.ts

@@ -1,23 +0,0 @@
-export interface TimeUnit {
-    singular: string;
-    plural: string;
-}
-export type TranslationValue = string | TimeUnit;
-export interface LanguageTranslations {
-    [key: string]: TranslationValue;
-}
-export type AvailableTimeLanguages = 'en' | 'es' | 'fr' | 'he';
-export type DayFormatTypes = 'DD' | 'DDD' | 'DDDD';
-export type MonthFormatTypes = 'MM' | 'MMM' | 'MMMM';
-export type YearFormatTypes = 'YY' | 'YYYY';
-export type HourFormatTypes = 'HH';
-export type MinuteFormatTypes = 'mm';
-export type SecondFormatTypes = 'ss';
-export type MillisecondFormatTypes = 'sss';
-export type AmPmFormatTypes = 'AmPm';
-export type DateFormatSeparatorTypes = '/' | '-' | ' ' | ':' | '.';
-export type CommonDateFormats = `${DayFormatTypes}${DateFormatSeparatorTypes}${MonthFormatTypes}${DateFormatSeparatorTypes}${YearFormatTypes}` | 'DD.MM.YY' | 'DD.MM.YYYY' | 'DD/MM/YY' | 'DD/MM/YYYY' | 'MM.DD.YY' | 'MM.DD.YYYY' | 'MM/DD/YY' | 'MM/DD/YYYY' | 'YYYY-MM-DD' | 'YY-MM-DD' | 'DD MMM YYYY' | 'DD MMMM YYYY' | 'DDD, DD MMM' | 'DDDD, DD MMMM' | 'MMM DD' | 'MMMM DD';
-export type CommonTimeFormats = 'HH:mm' | 'HH:mm:ss' | 'HH:mm:ss:sss' | 'HH:MM' | 'HH:mm AmPm';
-export type CommonDateTimeFormats = `${CommonDateFormats} ${CommonTimeFormats}` | `${CommonTimeFormats}, ${CommonDateFormats}` | 'YYYY-MM-DD HH:MM';
-export type DateTimeAcceptedFormats = CommonDateFormats | CommonTimeFormats | CommonDateTimeFormats;
-//# sourceMappingURL=timeago.d.ts.map

package/dist/types/timeago.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"timeago.d.ts","sourceRoot":"","sources":["../../src/types/timeago.ts"],"names":[],"mappings":"AAAA,MAAM,WAAW,QAAQ;IACxB,QAAQ,EAAE,MAAM,CAAA;IAChB,MAAM,EAAE,MAAM,CAAA;CACd;AAED,MAAM,MAAM,gBAAgB,GAAG,MAAM,GAAG,QAAQ,CAAA;AAEhD,MAAM,WAAW,oBAAoB;IACpC,CAAC,GAAG,EAAE,MAAM,GAAG,gBAAgB,CAAA;CAC/B;AAED,MAAM,MAAM,sBAAsB,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAA;AAE9D,MAAM,MAAM,cAAc,GAAG,IAAI,GAAG,KAAK,GAAG,MAAM,CAAA;AAClD,MAAM,MAAM,gBAAgB,GAAG,IAAI,GAAG,KAAK,GAAG,MAAM,CAAA;AACpD,MAAM,MAAM,eAAe,GAAG,IAAI,GAAG,MAAM,CAAA;AAC3C,MAAM,MAAM,eAAe,GAAG,IAAI,CAAA;AAClC,MAAM,MAAM,iBAAiB,GAAG,IAAI,CAAA;AACpC,MAAM,MAAM,iBAAiB,GAAG,IAAI,CAAA;AACpC,MAAM,MAAM,sBAAsB,GAAG,KAAK,CAAA;AAC1C,MAAM,MAAM,eAAe,GAAG,MAAM,CAAA;AAEpC,MAAM,MAAM,wBAAwB,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,CAAA;AAGlE,MAAM,MAAM,iBAAiB,GAC1B,GAAG,cAAc,GAAG,wBAAwB,GAAG,gBAAgB,GAAG,wBAAwB,GAAG,eAAe,EAAE,GAC9G,UAAU,GAAG,YAAY,GAAG,UAAU,GAAG,YAAY,GACrD,UAAU,GAAG,YAAY,GAAG,UAAU,GAAG,YAAY,GACrD,YAAY,GAAG,UAAU,GACzB,aAAa,GAAG,cAAc,GAC9B,aAAa,GAAG,eAAe,GAC/B,QAAQ,GAAG,SAAS,CAAA;AAEvB,MAAM,MAAM,iBAAiB,GAC1B,OAAO,GAAG,UAAU,GAAG,cAAc,GACrC,OAAO,GACP,YAAY,CAAA;AAGf,MAAM,MAAM,qBAAqB,GAC9B,GAAG,iBAAiB,IAAI,iBAAiB,EAAE,GAC3C,GAAG,iBAAiB,KAAK,iBAAiB,EAAE,GAC5C,kBAAkB,CAAA;AAGrB,MAAM,MAAM,uBAAuB,GAChC,iBAAiB,GACjB,iBAAiB,GACjB,qBAAqB,CAAA"}