@bagelink/vue 1.6.2 → 1.6.7

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@bagelink/vue",
   "type": "module",
-  "version": "1.6.2",
+  "version": "1.6.7",
   "description": "Bagel core sdk packages",
   "author": {
     "name": "Neveh Allon",
@@ -58,6 +58,7 @@
     "bin/experimentalGenTypedRoutes.ts"
   ],
   "devDependencies": {
+    "swiper": "^12.0.3",
     "@types/leaflet": "^1.9.18",
     "@types/signature_pad": "^4.0.0",
     "@vue-macros/reactivity-transform": "^1.1.6",

package/src/components/Swiper.vue

@@ -0,0 +1,507 @@
+<script setup lang="ts" generic="T = any">
+import type { SwiperContainer } from 'swiper/element/bundle'
+import type { AutoplayOptions, CoverflowEffectOptions, PaginationOptions, SwiperOptions } from 'swiper/types'
+import { Icon } from '@bagelink/vue'
+import { register } from 'swiper/element/bundle'
+import { computed, onMounted, ref, watch } from 'vue'
+import 'swiper/css'
+import 'swiper/css/navigation'
+import 'swiper/css/pagination'
+import 'swiper/css/effect-fade'
+import 'swiper/css/effect-coverflow'
+import 'swiper/css/effect-cube'
+import 'swiper/css/effect-flip'
+
+type SwiperEffect = 'slide' | 'fade' | 'cube' | 'coverflow' | 'flip'
+type SwiperDirection = 'horizontal' | 'vertical'
+type SwiperVariant = 'default' | 'testimonial' | 'gallery' | 'cards' | 'coverflow' | 'hero'
+
+interface VariantConfig {
+	slidesPerView?: number | 'auto'
+	spaceBetween?: number
+	effect?: SwiperEffect
+	loop?: boolean
+	autoplay?: boolean | AutoplayOptions
+	pagination?: boolean | PaginationOptions
+	navigation?: boolean
+	speed?: number
+	centeredSlides?: boolean
+	coverflowEffect?: Partial<CoverflowEffectOptions>
+	breakpoints?: SwiperOptions['breakpoints']
+}
+
+const props = withDefaults(
+	defineProps<{
+		// Items to render
+		items?: T[]
+
+		// Active index (v-model support)
+		index?: number
+
+		// Preset variant
+		variant?: SwiperVariant
+
+		// Slide dimensions
+		slideWidth?: number | string
+
+		// Basic swiper options
+		effect?: SwiperEffect
+		direction?: SwiperDirection
+		speed?: number
+		loop?: boolean
+		initialSlide?: number
+
+		// Slides display
+		slidesPerView?: number | 'auto'
+		spaceBetween?: number
+		centeredSlides?: boolean
+
+		// Interaction
+		grabCursor?: boolean
+		keyboard?: boolean
+		mousewheel?: boolean
+
+		// Auto height
+		autoHeight?: boolean
+
+		// Navigation
+		navigation?: boolean
+
+		// Pagination
+		pagination?: boolean | PaginationOptions
+
+		// Autoplay
+		autoplay?: boolean | AutoplayOptions
+
+		// Effect-specific options
+		coverflowEffect?: Partial<CoverflowEffectOptions>
+
+		// Responsive breakpoints
+		breakpoints?: SwiperOptions['breakpoints']
+
+		// Advanced: allow override with raw options
+		advancedOptions?: SwiperOptions
+	}>(),
+	{
+		items: undefined,
+		index: undefined,
+		variant: 'default',
+		slideWidth: undefined,
+		effect: undefined,
+		direction: 'horizontal',
+		speed: undefined,
+		loop: undefined,
+		initialSlide: 0,
+		slidesPerView: undefined,
+		spaceBetween: undefined,
+		centeredSlides: undefined,
+		grabCursor: true,
+		keyboard: true,
+		mousewheel: false,
+		autoHeight: false,
+		navigation: undefined,
+		pagination: undefined,
+		autoplay: undefined,
+		coverflowEffect: undefined,
+		breakpoints: undefined,
+		advancedOptions: undefined,
+	},
+)
+
+const emit = defineEmits<{
+	'update:index': [index: number]
+}>()
+
+defineSlots<{
+	'default'?: (props: { item: T, index: number, currentIndex: number }) => any
+	'prev-button'?: () => any
+	'next-button'?: () => any
+	'navigation'?: (props: {
+		items: T[]
+		currentIndex: number
+		slideTo: (index: number) => void
+		prev: () => void
+		next: () => void
+		isFirst: boolean
+		isLast: boolean
+	}) => any
+	'pagination'?: () => any
+}>()
+
+const variantPresets: Record<SwiperVariant, VariantConfig> = {
+	default: {},
+	testimonial: {
+		slidesPerView: 1,
+		autoplay: { delay: 5000, disableOnInteraction: false },
+		pagination: { clickable: true },
+		loop: true,
+		speed: 600,
+	},
+	gallery: {
+		slidesPerView: 1,
+		spaceBetween: 0,
+		navigation: true,
+		loop: true,
+	},
+	cards: {
+		slidesPerView: 3,
+		spaceBetween: 20,
+		navigation: true,
+		breakpoints: {
+			320: { slidesPerView: 1, spaceBetween: 10 },
+			768: { slidesPerView: 2, spaceBetween: 15 },
+			1024: { slidesPerView: 3, spaceBetween: 20 },
+		},
+	},
+	coverflow: {
+		effect: 'coverflow',
+		slidesPerView: 'auto',
+		centeredSlides: true,
+		loop: true,
+		navigation: true,
+		coverflowEffect: {
+			rotate: -2,
+			stretch: 0,
+			depth: 100,
+			slideShadows: true,
+			modifier: 1,
+			scale: 0.98,
+		},
+	},
+	hero: {
+		slidesPerView: 1,
+		autoplay: { delay: 4000 },
+		pagination: { clickable: true },
+		loop: true,
+		speed: 800,
+		effect: 'fade',
+	},
+}
+
+register()
+
+const swiperEl = $ref<SwiperContainer | null>(null)
+const isFirstSlide = ref(true)
+const isLastSlide = ref(false)
+const currentIndex = ref(props.index ?? props.initialSlide ?? 0)
+let isUpdatingFromExternal = false // Guard to prevent update loops
+
+const slideStyles = $computed(() => {
+	const styles: Record<string, string> = {}
+
+	if (props.slideWidth !== undefined) {
+		styles.width = typeof props.slideWidth === 'number' ? `${props.slideWidth}px` : props.slideWidth
+	}
+
+	return styles
+})
+
+// Apply variant preset configuration
+const variantConfig = $computed(() => variantPresets[props.variant])
+
+// Smart default: if slideWidth is set and slidesPerView wasn't set,
+// automatically use 'auto' to let slides determine their own width
+const effectiveSlidesPerView = $computed(() => {
+	// Priority: explicit prop > variant config > smart default
+	if (props.slidesPerView !== undefined) {
+		return props.slidesPerView
+	}
+
+	if (variantConfig.slidesPerView !== undefined) {
+		return variantConfig.slidesPerView
+	}
+
+	// Smart default: if slideWidth is provided, use 'auto'
+	if (props.slideWidth !== undefined) {
+		return 'auto'
+	}
+
+	// Final fallback
+	return 1
+})
+
+const swiperParams = computed((): SwiperOptions => {
+	// Helper to get value with priority: prop > variant > default
+	const getValue = <K extends keyof VariantConfig>(
+		propValue: any,
+		variantKey: K,
+		defaultValue: any
+	) => {
+		if (propValue !== undefined) return propValue
+		if (variantConfig[variantKey] !== undefined) return variantConfig[variantKey]
+		return defaultValue
+	}
+
+	const params: SwiperOptions = {
+		effect: getValue(props.effect, 'effect', 'slide'),
+		direction: props.direction ?? 'horizontal',
+		speed: getValue(props.speed, 'speed', 300),
+		loop: getValue(props.loop, 'loop', false),
+		initialSlide: props.index ?? props.initialSlide,
+		slidesPerView: effectiveSlidesPerView,
+		spaceBetween: getValue(props.spaceBetween, 'spaceBetween', 0),
+		centeredSlides: getValue(props.centeredSlides, 'centeredSlides', false),
+		grabCursor: props.grabCursor,
+		keyboard: props.keyboard ? { enabled: true } : false,
+		mousewheel: props.mousewheel ? { enabled: true } : false,
+		autoHeight: props.autoHeight,
+	}
+
+	// Navigation (priority: prop > variant > default)
+	const navigationEnabled = getValue(props.navigation, 'navigation', false)
+	if (navigationEnabled) {
+		params.navigation = true
+	}
+
+	// Pagination (priority: prop > variant > default)
+	const paginationConfig = getValue(props.pagination, 'pagination', false)
+	if (paginationConfig) {
+		params.pagination = typeof paginationConfig === 'boolean'
+			? { clickable: true }
+			: paginationConfig
+	}
+
+	// Autoplay (priority: prop > variant > default)
+	const autoplayConfig = getValue(props.autoplay, 'autoplay', false)
+	if (autoplayConfig) {
+		params.autoplay = typeof autoplayConfig === 'boolean'
+			? { delay: 3000 }
+			: autoplayConfig
+	}
+
+	// Effect-specific options (merge variant and explicit)
+	const effectType = params.effect || 'slide'
+	if (effectType === 'coverflow') {
+		const baseCoverflowEffect = {
+			rotate: 0,
+			stretch: 0,
+			depth: 100,
+			modifier: 1,
+			slideShadows: true,
+		}
+		params.coverflowEffect = {
+			...baseCoverflowEffect,
+			...variantConfig.coverflowEffect,
+			...props.coverflowEffect,
+		}
+	}
+
+	// Breakpoints (priority: prop > variant)
+	const breakpointsConfig = getValue(props.breakpoints, 'breakpoints', undefined)
+	if (breakpointsConfig) {
+		params.breakpoints = breakpointsConfig
+	}
+
+	// Advanced options override
+	if (props.advancedOptions) {
+		return { ...params, ...props.advancedOptions }
+	}
+
+	return params
+})
+
+const swiperInstance = $computed(() => swiperEl?.swiper)
+
+function updateNavigationState() {
+	if (swiperEl?.swiper && !isUpdatingFromExternal) {
+		isFirstSlide.value = swiperEl.swiper.isBeginning
+		isLastSlide.value = swiperEl.swiper.isEnd
+
+		// Emit index update for v-model support
+		// Use activeIndex for non-loop mode, realIndex for loop mode
+		const newIndex = props.loop ? swiperEl.swiper.realIndex : swiperEl.swiper.activeIndex
+		currentIndex.value = newIndex
+
+		// Emit to keep external state in sync
+		emit('update:index', newIndex)
+	}
+}
+
+function slideTo(index: number) {
+	if (!swiperEl?.swiper) return
+	swiperEl.swiper.slideTo(index)
+}
+
+function handleSlideNav(dir: 'prev' | 'next') {
+	if (!swiperEl?.swiper) return
+
+	if (dir === 'next') {
+		swiperEl.swiper.slideNext()
+	} else {
+		swiperEl.swiper.slidePrev()
+	}
+}
+
+onMounted(() => {
+	if (!swiperEl) return
+
+	// Add events to track slide changes for reactive state
+	const params = {
+		...swiperParams.value,
+		on: {
+			...swiperParams.value.on,
+			init: updateNavigationState,
+			slideChange: updateNavigationState,
+			slideChangeTransitionEnd: updateNavigationState,
+			reachBeginning: updateNavigationState,
+			reachEnd: updateNavigationState,
+			fromEdge: updateNavigationState,
+		},
+	}
+
+	Object.assign(swiperEl, params)
+	swiperEl.initialize()
+})
+
+watch(
+	() => props.initialSlide,
+	(index) => {
+		if (index !== undefined && swiperEl?.swiper) {
+			setTimeout(() => swiperEl.swiper.slideTo(index), 1)
+		}
+	},
+	{ immediate: true },
+)
+
+// Watch for external index changes (v-model support)
+watch(
+	() => props.index,
+	(newIndex) => {
+		if (newIndex !== undefined) {
+			currentIndex.value = newIndex
+
+			if (swiperEl?.swiper) {
+				const activeIndex = props.loop ? swiperEl.swiper.realIndex : swiperEl.swiper.activeIndex
+				if (newIndex !== activeIndex) {
+					isUpdatingFromExternal = true
+					swiperEl.swiper.slideTo(newIndex)
+					// Reset guard after a short delay to allow transition
+					setTimeout(() => {
+						isUpdatingFromExternal = false
+					}, 50)
+				}
+			}
+		}
+	},
+)
+
+// Watch for param changes and update swiper
+watch(
+	swiperParams,
+	(newParams) => {
+		if (swiperEl?.swiper) {
+			Object.assign(swiperEl.swiper.params, newParams)
+			swiperEl.swiper.update()
+		}
+	},
+	{ deep: true },
+)
+
+defineExpose({
+	swiper: swiperInstance,
+	slideNext: () => { handleSlideNav('next') },
+	slidePrev: () => { handleSlideNav('prev') },
+	slideTo,
+	update: () => swiperEl?.swiper?.update(),
+	isFirst: isFirstSlide,
+	isLast: isLastSlide,
+	currentIndex,
+})
+</script>
+
+<template>
+	<div class="swi-wrap">
+		<swiper-container ref="swiperEl" class="swiper" init="false">
+			<swiper-slide v-for="(item, index) in items" :key="index" :style="slideStyles">
+				<slot :item="item" :index="index" :currentIndex="currentIndex" />
+			</swiper-slide>
+		</swiper-container>
+
+		<!-- Custom Navigation Slot -->
+		<slot
+			name="navigation" :items="items || []" :currentIndex="currentIndex" :slide-to="slideTo"
+			:prev="() => handleSlideNav('prev')" :next="() => handleSlideNav('next')" :is-first="isFirstSlide"
+			:is-last="isLastSlide"
+		>
+			<!-- Default Navigation -->
+			<div v-if="navigation" class="swi-ctrl">
+				<div class="swi-prev hover" @click="handleSlideNav('prev')">
+					<slot name="prev-button">
+						<Icon name="chevron_left" />
+					</slot>
+				</div>
+				<div class="swi-next hover" @click="handleSlideNav('next')">
+					<slot name="next-button">
+						<Icon name="chevron_right" />
+					</slot>
+				</div>
+			</div>
+		</slot>
+
+		<!-- Custom Pagination Slot -->
+		<slot v-if="pagination" name="pagination" />
+	</div>
+</template>
+
+<style>
+.swiper {
+	width: 100%;
+	padding-top: 50px;
+	padding-bottom: 50px;
+}
+
+:root {
+	--swiper-navigation-color: white;
+	--swiper-pagination-color: white;
+}
+
+.swi-ctrl {
+	position: absolute;
+	top: 50%;
+	transform: translateY(-50%);
+	width: 100%;
+	z-index: 99;
+	display: flex;
+	justify-content: space-between;
+	padding: 0rem 4rem;
+	height: 0;
+	pointer-events: none;
+}
+
+.swi-ctrl>* {
+	pointer-events: auto;
+}
+
+.swi-ctrl img {
+	height: 20px;
+}
+
+.swi-wrap {
+	position: relative;
+}
+
+.swi-prev,
+.swi-next {
+	background: var(--blue);
+	height: 40px;
+	width: 40px;
+	border-radius: 100%;
+	padding: 10px;
+	display: flex;
+	justify-content: center;
+	align-items: center;
+	cursor: pointer;
+	transition: opacity 0.3s ease;
+}
+
+.swi-prev:hover,
+.swi-next:hover {
+	opacity: 0.8;
+}
+
+@media screen and (max-width: 900px) {
+	.swi-ctrl {
+		padding: 0rem 0.5rem;
+	}
+}
+</style>

package/src/components/form/inputs/CodeEditor/Index.vue

@@ -7,7 +7,7 @@ import { useHighlight } from './useHighlight'
 const props = defineProps({
 	language: { type: String as PropType<Language>, default: 'html' },
 	readonly: { type: Boolean, default: false },
-	modelValue: { type: String, default: '' },
+	modelValue: { type: [String, Object] as PropType<string | Record<string, any>>, default: '' },
 	autodetect: { type: Boolean, default: true },
 	ignoreIllegals: { type: Boolean, default: true },
 	label: { type: String, default: '' },
@@ -17,13 +17,26 @@ const props = defineProps({
 })
 
 const emit = defineEmits(['update:modelValue'])
+
+// Track whether the original modelValue was an object
+const isObjectMode = computed(() => typeof props.modelValue === 'object')
+
+// Helper to convert value to string for display
+function valueToString(value: string | Record<string, any>): string {
+	if (typeof value === 'string') return value
+	if (typeof value === 'object') {
+		return JSON.stringify(value, null, 2)
+	}
+	return ''
+}
+
 // State
-const code = ref(props.modelValue || '')
+const code = ref(valueToString(props.modelValue))
 const editorRef = ref<HTMLDivElement>()
 const { loaded, loadHighlight, highlightCode, setTheme } = useHighlight(props.theme)
 
 const maxHeight = computed(() => {
-	const h = props.height ?? '240px'
+	const h = props.height
 	return h.match(/^\d+$/) ? `${h}px` : h
 })
 
@@ -39,11 +52,24 @@ const formattedCode = computed(() => {
 function handleInput(e: Event) {
 	const target = e.target as HTMLTextAreaElement
 	code.value = target.value
-	emit('update:modelValue', code.value)
+
+	// If originally an object, try to parse and emit object
+	if (isObjectMode.value) {
+		try {
+			const parsed = JSON.parse(code.value)
+			emit('update:modelValue', parsed)
+		} catch {
+			// If parsing fails, emit the string as-is (user is still typing)
+			// This allows intermediate invalid JSON states while editing
+			emit('update:modelValue', code.value)
+		}
+	} else {
+		emit('update:modelValue', code.value)
+	}
 }
 
 function handleTab(event: KeyboardEvent) {
-	if ('Tab' !== event.key) {return}
+	if (event.key === 'Tab') { return }
 
 	event.preventDefault()
 	const target = event.target as HTMLTextAreaElement
@@ -53,11 +79,24 @@ function handleTab(event: KeyboardEvent) {
 	// Add tab or indent selected text
 	const newValue = `${code.value.substring(0, start)}  ${code.value.substring(end)}`
 	code.value = newValue
-	emit('update:modelValue', code.value)
+
+	// If originally an object, try to parse and emit object
+	if (isObjectMode.value) {
+		try {
+			const parsed = JSON.parse(code.value)
+			emit('update:modelValue', parsed)
+		} catch {
+			// If parsing fails, emit the string as-is
+			emit('update:modelValue', code.value)
+		}
+	} else {
+		emit('update:modelValue', code.value)
+	}
 
 	// Move cursor position after the inserted tab
 	setTimeout(() => {
-		target.selectionStart = target.selectionEnd = start + 2
+		target.selectionStart = start + 2
+		target.selectionEnd = start + 2
 	}, 0)
 }
 
@@ -68,8 +107,9 @@ onMounted(async () => {
 
 watch(() => props.theme, (t) => { setTheme(t) })
 watch(() => props.modelValue, (newVal) => {
-	if (newVal !== undefined && newVal !== code.value) {
-		code.value = newVal
+	const newCodeStr = valueToString(newVal)
+	if (newCodeStr !== code.value) {
+		code.value = newCodeStr
 	}
 }, { immediate: true })
 </script>

package/src/components/index.ts

@@ -41,6 +41,7 @@ export { default as Rating } from './Rating.vue'
 export { default as RouterWrapper } from './RouterWrapper.vue'
 export { default as Slider } from './Slider.vue'
 export { default as Spreadsheet } from './Spreadsheet/Index.vue'
+export { default as Swiper } from './Swiper.vue'
 export { default as Title } from './Title.vue'
 export { default as ToolBar } from './ToolBar.vue'
 export { default as TopBar } from './TopBar.vue'

package/src/styles/layout.css

@@ -55,10 +55,66 @@
     border-radius: 100%;
 }
 
-.aspect-ratio-1 {
+.aspect-ratio-1,
+.ratio-1 {
     aspect-ratio: 1;
 }
 
+.aspect-ratio-4-3,
+.ratio-4-3 {
+    aspect-ratio: 4 / 3;
+}
+
+.aspect-ratio-3-4,
+.ratio-3-4 {
+    aspect-ratio: 3 / 4;
+}
+
+.aspect-ratio-16-9,
+.ratio-16-9 {
+    aspect-ratio: 16 / 9;
+}
+
+.aspect-ratio-9-16,
+.ratio-9-16 {
+    aspect-ratio: 9 / 16;
+}
+
+.aspect-ratio-3-2,
+.ratio-3-2 {
+    aspect-ratio: 3 / 2;
+}
+
+.aspect-ratio-2-3,
+.ratio-2-3 {
+    aspect-ratio: 2 / 3;
+}
+
+.aspect-ratio-5-4,
+.ratio-5-4 {
+    aspect-ratio: 5 / 4;
+}
+
+.aspect-ratio-4-5,
+.ratio-4-5 {
+    aspect-ratio: 4 / 5;
+}
+
+.aspect-ratio-2-1,
+.ratio-2-1 {
+    aspect-ratio: 2 / 1;
+}
+
+.aspect-ratio-1-2,
+.ratio-1-2 {
+    aspect-ratio: 1 / 2;
+}
+
+.aspect-ratio-21-9,
+.ratio-21-9 {
+    aspect-ratio: 21 / 9;
+}
+
 .vertical-align-middle,
 .vertical-middle {
     vertical-align: middle;