@bagelink/vue 1.6.7 → 1.6.17

package/src/components/Swiper.vue

@@ -1,9 +1,10 @@
 <script setup lang="ts" generic="T = any">
-import type { SwiperContainer } from 'swiper/element/bundle'
+import type { Swiper as SwiperType } from 'swiper'
 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 { Autoplay, EffectCoverflow, EffectCube, EffectFade, EffectFlip, Navigation, Pagination, EffectCards } from 'swiper/modules'
+import { Swiper, SwiperSlide } from 'swiper/vue'
+import { computed, ref, watch } from 'vue'
 import 'swiper/css'
 import 'swiper/css/navigation'
 import 'swiper/css/pagination'
@@ -11,8 +12,9 @@ import 'swiper/css/effect-fade'
 import 'swiper/css/effect-coverflow'
 import 'swiper/css/effect-cube'
 import 'swiper/css/effect-flip'
+import 'swiper/css/effect-cards'
 
-type SwiperEffect = 'slide' | 'fade' | 'cube' | 'coverflow' | 'flip'
+type SwiperEffect = 'slide' | 'fade' | 'cube' | 'coverflow' | 'flip' | 'cards'
 type SwiperDirection = 'horizontal' | 'vertical'
 type SwiperVariant = 'default' | 'testimonial' | 'gallery' | 'cards' | 'coverflow' | 'hero'
 
@@ -178,15 +180,13 @@ const variantPresets: Record<SwiperVariant, VariantConfig> = {
 	},
 }
 
-register()
-
-const swiperEl = $ref<SwiperContainer | null>(null)
+const swiperEl = ref<SwiperType | 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 slideStyles = computed(() => {
 	const styles: Record<string, string> = {}
 
 	if (props.slideWidth !== undefined) {
@@ -197,18 +197,18 @@ const slideStyles = $computed(() => {
 })
 
 // Apply variant preset configuration
-const variantConfig = $computed(() => variantPresets[props.variant])
+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(() => {
+const effectiveSlidesPerView = computed(() => {
 	// Priority: explicit prop > variant config > smart default
 	if (props.slidesPerView !== undefined) {
 		return props.slidesPerView
 	}
 
-	if (variantConfig.slidesPerView !== undefined) {
-		return variantConfig.slidesPerView
+	if (variantConfig.value.slidesPerView !== undefined) {
+		return variantConfig.value.slidesPerView
 	}
 
 	// Smart default: if slideWidth is provided, use 'auto'
@@ -228,46 +228,42 @@ const swiperParams = computed((): SwiperOptions => {
 		defaultValue: any
 	) => {
 		if (propValue !== undefined) return propValue
-		if (variantConfig[variantKey] !== undefined) return variantConfig[variantKey]
+		if (variantConfig.value[variantKey] !== undefined) return variantConfig.value[variantKey]
 		return defaultValue
 	}
 
 	const params: SwiperOptions = {
+		modules: [Navigation, Pagination, Autoplay, EffectFade, EffectCoverflow, EffectCube, EffectFlip, EffectCards],
 		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,
+		slidesPerView: effectiveSlidesPerView.value,
 		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,
+		keyboard: props.keyboard,
+		mousewheel: props.mousewheel,
 		autoHeight: props.autoHeight,
 	}
 
 	// Navigation (priority: prop > variant > default)
-	const navigationEnabled = getValue(props.navigation, 'navigation', false)
-	if (navigationEnabled) {
-		params.navigation = true
-	}
+	// const navigationEnabled = getValue(props.navigation, 'navigation', false)
+	// // Note: We use custom navigation controls, not Swiper's built-in navigation
+	// // params.navigation = !!navigationEnabled
 
 	// Pagination (priority: prop > variant > default)
 	const paginationConfig = getValue(props.pagination, 'pagination', false)
-	if (paginationConfig) {
-		params.pagination = typeof paginationConfig === 'boolean'
-			? { clickable: true }
-			: paginationConfig
-	}
+	params.pagination = paginationConfig
+		? (typeof paginationConfig === 'boolean' ? { clickable: true } : paginationConfig)
+		: false
 
 	// Autoplay (priority: prop > variant > default)
 	const autoplayConfig = getValue(props.autoplay, 'autoplay', false)
-	if (autoplayConfig) {
-		params.autoplay = typeof autoplayConfig === 'boolean'
-			? { delay: 3000 }
-			: autoplayConfig
-	}
+	params.autoplay = autoplayConfig
+		? (typeof autoplayConfig === 'boolean' ? { delay: 3000 } : autoplayConfig)
+		: false
 
 	// Effect-specific options (merge variant and explicit)
 	const effectType = params.effect || 'slide'
@@ -281,7 +277,7 @@ const swiperParams = computed((): SwiperOptions => {
 		}
 		params.coverflowEffect = {
 			...baseCoverflowEffect,
-			...variantConfig.coverflowEffect,
+			...variantConfig.value.coverflowEffect,
 			...props.coverflowEffect,
 		}
 	}
@@ -300,16 +296,38 @@ const swiperParams = computed((): SwiperOptions => {
 	return params
 })
 
-const swiperInstance = $computed(() => swiperEl?.swiper)
+// Format params for Swiper Vue component with proper types
+const swiperVueProps = computed(() => ({
+	modules: swiperParams.value.modules,
+	effect: swiperParams.value.effect as 'slide' | 'fade' | 'cube' | 'coverflow' | 'flip' | 'cards',
+	direction: swiperParams.value.direction,
+	speed: swiperParams.value.speed,
+	loop: swiperParams.value.loop,
+	initialSlide: swiperParams.value.initialSlide,
+	slidesPerView: swiperParams.value.slidesPerView,
+	spaceBetween: swiperParams.value.spaceBetween as number,
+	centeredSlides: swiperParams.value.centeredSlides,
+	grabCursor: swiperParams.value.grabCursor,
+	keyboard: swiperParams.value.keyboard as boolean | undefined,
+	mousewheel: swiperParams.value.mousewheel as boolean | undefined,
+	autoHeight: swiperParams.value.autoHeight,
+	navigation: swiperParams.value.navigation as boolean | undefined,
+	pagination: swiperParams.value.pagination,
+	autoplay: swiperParams.value.autoplay,
+	coverflowEffect: swiperParams.value.coverflowEffect,
+	breakpoints: swiperParams.value.breakpoints,
+}))
+
+const swiperInstance = computed(() => swiperEl.value)
 
 function updateNavigationState() {
-	if (swiperEl?.swiper && !isUpdatingFromExternal) {
-		isFirstSlide.value = swiperEl.swiper.isBeginning
-		isLastSlide.value = swiperEl.swiper.isEnd
+	if (swiperEl.value && !isUpdatingFromExternal) {
+		isFirstSlide.value = swiperEl.value.isBeginning
+		isLastSlide.value = swiperEl.value.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
+		const newIndex = props.loop ? swiperEl.value.realIndex : swiperEl.value.activeIndex
 		currentIndex.value = newIndex
 
 		// Emit to keep external state in sync
@@ -318,46 +336,32 @@ function updateNavigationState() {
 }
 
 function slideTo(index: number) {
-	if (!swiperEl?.swiper) return
-	swiperEl.swiper.slideTo(index)
+	if (!swiperEl.value) return
+	swiperEl.value.slideTo(index)
 }
 
 function handleSlideNav(dir: 'prev' | 'next') {
-	if (!swiperEl?.swiper) return
+	if (!swiperEl.value) return
 
 	if (dir === 'next') {
-		swiperEl.swiper.slideNext()
+		swiperEl.value.slideNext()
 	} else {
-		swiperEl.swiper.slidePrev()
+		swiperEl.value.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()
-})
+function onSwiper(swiper: SwiperType) {
+	swiperEl.value = swiper
+	updateNavigationState()
+}
 
 watch(
 	() => props.initialSlide,
 	(index) => {
-		if (index !== undefined && swiperEl?.swiper) {
-			setTimeout(() => swiperEl.swiper.slideTo(index), 1)
+		if (index !== undefined && swiperEl.value) {
+			setTimeout(() => {
+				if (swiperEl.value) swiperEl.value.slideTo(index)
+			}, 1)
 		}
 	},
 	{ immediate: true },
@@ -370,11 +374,11 @@ watch(
 		if (newIndex !== undefined) {
 			currentIndex.value = newIndex
 
-			if (swiperEl?.swiper) {
-				const activeIndex = props.loop ? swiperEl.swiper.realIndex : swiperEl.swiper.activeIndex
+			if (swiperEl.value) {
+				const activeIndex = props.loop ? swiperEl.value.realIndex : swiperEl.value.activeIndex
 				if (newIndex !== activeIndex) {
 					isUpdatingFromExternal = true
-					swiperEl.swiper.slideTo(newIndex)
+					swiperEl.value.slideTo(newIndex)
 					// Reset guard after a short delay to allow transition
 					setTimeout(() => {
 						isUpdatingFromExternal = false
@@ -389,9 +393,9 @@ watch(
 watch(
 	swiperParams,
 	(newParams) => {
-		if (swiperEl?.swiper) {
-			Object.assign(swiperEl.swiper.params, newParams)
-			swiperEl.swiper.update()
+		if (swiperEl.value) {
+			Object.assign(swiperEl.value.params, newParams)
+			swiperEl.value.update()
 		}
 	},
 	{ deep: true },
@@ -402,7 +406,7 @@ defineExpose({
 	slideNext: () => { handleSlideNav('next') },
 	slidePrev: () => { handleSlideNav('prev') },
 	slideTo,
-	update: () => swiperEl?.swiper?.update(),
+	update: () => swiperEl.value?.update(),
 	isFirst: isFirstSlide,
 	isLast: isLastSlide,
 	currentIndex,
@@ -411,11 +415,15 @@ defineExpose({
 
 <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>
+		<Swiper
+			v-bind="swiperVueProps" class="swiper" @swiper="onSwiper" @slide-change="updateNavigationState"
+			@reach-beginning="updateNavigationState" @reach-end="updateNavigationState"
+			@from-edge="updateNavigationState"
+		>
+			<SwiperSlide v-for="(item, idx) in items" :key="idx" :style="slideStyles">
+				<slot :item="item" :index="idx" :currentIndex="currentIndex" />
+			</SwiperSlide>
+		</Swiper>
 
 		<!-- Custom Navigation Slot -->
 		<slot
@@ -427,12 +435,12 @@ defineExpose({
 			<div v-if="navigation" class="swi-ctrl">
 				<div class="swi-prev hover" @click="handleSlideNav('prev')">
 					<slot name="prev-button">
-						<Icon name="chevron_left" />
+						<Icon name="chevron_left" class="user-select-none hover z-99   color-primary" :size="2" />
 					</slot>
 				</div>
 				<div class="swi-next hover" @click="handleSlideNav('next')">
 					<slot name="next-button">
-						<Icon name="chevron_right" />
+						<Icon name="chevron_right" class="user-select-none hover z-99   color-primary" :size="2" />
 					</slot>
 				</div>
 			</div>
@@ -446,8 +454,6 @@ defineExpose({
 <style>
 .swiper {
 	width: 100%;
-	padding-top: 50px;
-	padding-bottom: 50px;
 }
 
 :root {

package/src/components/form/FieldArray.vue

@@ -62,9 +62,9 @@ let lastEmittedValue = '' // Event handlers state
 
 // Generate schema for primitive types
 const primitiveSchema = computed<PrimitiveArrFieldT[]>(() => {
-	if ('text' === props.type) {
+	if (props.type === 'text') {
 		return [{ id: 'value', type: 'text', label: '', $el: 'text' }]
-	}if (props.type === 'number') {
+	} if (props.type === 'number') {
 		return [{ id: 'value', type: 'number', label: '', $el: 'number' }]
 	}
 	return []
@@ -72,20 +72,20 @@ const primitiveSchema = computed<PrimitiveArrFieldT[]>(() => {
 
 const resolvedSchemaData = computed(() => {
 	// Handle 'array' type as equivalent to 'object' type
-	const isObjectType = 'object' === props.type || 'array' === props.type
+	const isObjectType = props.type === 'object' || props.type === 'array'
 
-	if (!isObjectType) {return primitiveSchema.value as BglFormSchemaT<T>}
+	if (!isObjectType) { return primitiveSchema.value as BglFormSchemaT<T> }
 
 	// Use children prop first, then schema prop, then attrs.schema
 	const attrsSchema = props.attrs?.schema !== undefined ? toValue(props.attrs.schema) : null
 	const schemaToUse = props.children || toValue(props.schema) || attrsSchema
 
-	// If no schema but we have defaultValue, try to infer schema from first item
-	const noSchema = null === schemaToUse || schemaToUse === undefined
-		|| (Array.isArray(schemaToUse) && 0 === schemaToUse.length)
-	const hasDefaultValue = props.defaultValue !== undefined
-		&& null !== props.defaultValue
-		&& 0 < props.defaultValue.length
+	// // If no schema but we have defaultValue, try to infer schema from first item
+	// const noSchema = null === schemaToUse || schemaToUse === undefined
+	// 	|| (Array.isArray(schemaToUse) && 0 === schemaToUse.length)
+	// const hasDefaultValue = props.defaultValue !== undefined
+	// 	&& null !== props.defaultValue
+	// 	&& 0 < props.defaultValue.length
 
 	// Don't infer schema from defaultValue - this causes unwanted restoration
 	// Let the component work with empty arrays
@@ -120,8 +120,8 @@ watch(() => internalData.value.length, (newLength) => {
 // Initialize with existing data or defaultValue on mount - only once!
 onMounted(() => {
 	// If no modelValue provided, use defaultValue as initial data (one time only)
-	if (!props.modelValue || 0 === props.modelValue.length) {
-		if (props.defaultValue && 0 < props.defaultValue.length) {
+	if (!props.modelValue || props.modelValue.length === 0) {
+		if (props.defaultValue && props.defaultValue.length > 0) {
 			internalData.value = [...props.defaultValue]
 			emitValue() // This will set the initial value and then it becomes "regular" data
 		}
@@ -137,7 +137,7 @@ onMounted(() => {
 
 // Function to load default values (explicit user action)
 function loadDefaults() {
-	if (props.defaultValue && 0 < props.defaultValue.length) {
+	if (props.defaultValue && props.defaultValue.length > 0) {
 		internalData.value = [...props.defaultValue]
 		emitValue()
 	} else {
@@ -234,8 +234,8 @@ function toggleMinimized(index: number) {
 
 function updateItem(index: number, value: any) {
 	// Handle primitive types by extracting the value property
-	if ('text' === props.type || 'number' === props.type) {
-		internalData.value[index] = 'number' === props.type ? Number(value.value) : value.value
+	if (props.type === 'text' || props.type === 'number') {
+		internalData.value[index] = props.type === 'number' ? Number(value.value) : value.value
 	} else {
 		internalData.value[index] = value
 	}
@@ -243,24 +243,24 @@ function updateItem(index: number, value: any) {
 }
 
 // Computed properties for rendering
-const isPrimitiveType = computed(() => 'text' === props.type || 'number' === props.type)
+const isPrimitiveType = computed(() => props.type === 'text' || props.type === 'number')
 const canRenderItems = computed(() => {
 	const schemaData = resolvedSchemaData.value
-	const hasValidSchema = (Array.isArray(schemaData) && 0 < schemaData.length)
-		|| (props.children && 0 < props.children.length)
-	const hasDefaultValue = props.defaultValue && 0 < props.defaultValue.length
+	const hasValidSchema = (Array.isArray(schemaData) && schemaData.length > 0)
+		|| (props.children && props.children.length > 0)
+	const hasDefaultValue = props.defaultValue && props.defaultValue.length > 0
 
 	// For primitive types or when we have schema or defaultValue
-	const isObjectType = 'object' === props.type || 'array' === props.type
+	const isObjectType = props.type === 'object' || props.type === 'array'
 	const shouldRender = isPrimitiveType.value
-		|| (isObjectType && (true === hasValidSchema || true === hasDefaultValue))
+		|| (isObjectType && (hasValidSchema === true || hasDefaultValue === true))
 	return shouldRender
 })
 const showMinimizeButton = computed(() => {
 	const schemaData = resolvedSchemaData.value
-	const hasLongSchema = Array.isArray(schemaData) && 2 < schemaData.length
+	const hasLongSchema = Array.isArray(schemaData) && schemaData.length > 2
 	const hasRichText = Array.isArray(schemaData)
-		&& schemaData.some((schema: any) => 'richtext' === schema.$el)
+		&& schemaData.some((schema: any) => schema.$el === 'richtext')
 	return hasLongSchema || hasRichText
 })
 </script>
@@ -293,20 +293,19 @@ const showMinimizeButton = computed(() => {
 						No {{ label?.toLowerCase() || 'items' }} added yet
 					</p>
 					<!-- Load defaults button if defaultValue exists -->
-					<Btn v-if="props.defaultValue && props.defaultValue.length > 0" thin color="primary" class="txt12 mb-05" @click="loadDefaults">
+					<Btn
+						v-if="props.defaultValue && props.defaultValue.length > 0" thin color="primary"
+						class="txt12 mb-05" @click="loadDefaults"
+					>
 						Load Default {{ label || 'Items' }}
 					</Btn>
 				</Card>
 
 				<!-- Array Items -->
 				<div
-					v-for="(item, i) in internalData"
-					:key="i"
-					outline
-					thin
+					v-for="(item, i) in internalData" :key="i" outline thin
 					class="mb-05 itemBox transition radius-05 overflow-hidden txt12 border"
-					style="--input-font-size: 12px"
-					:class="{ minimized: minimizedItems[i] }"
+					style="--input-font-size: 12px" :class="{ minimized: minimizedItems[i] }"
 				>
 					<div>
 						<!-- Minimized View -->
@@ -314,15 +313,22 @@ const showMinimizeButton = computed(() => {
 							<p class="minimizedText txt12 p-05 opacity-7 flex-grow-2" @click="toggleMinimized(i)">
 								{{ label }} {{ i + 1 }}
 							</p>
-							<Btn v-if="showMinimizeButton" class="rotate-180 txt10 opacity-7 p-025" flat thin icon="keyboard_arrow_down" @click="toggleMinimized(i)" />
+							<Btn
+								v-if="showMinimizeButton" class="rotate-180 txt10 opacity-7 p-025" flat thin
+								icon="keyboard_arrow_down" @click="toggleMinimized(i)"
+							/>
 						</div>
 
 						<!-- Form View -->
 						<BagelFormFA
-							v-if="!minimizedItems[i]" :model-value="isPrimitiveType ? { value: item } : item" :schema="resolvedSchemaData" class="bginputbg p-05 grid gap-05"
+							v-if="!minimizedItems[i]" :model-value="isPrimitiveType ? { value: item } : item"
+							:schema="resolvedSchemaData" class="bginputbg p-05 grid gap-05"
 							@update:model-value="val => updateItem(i, val)"
 						/>
-						<Btn v-if="props.delete" icon="delete" class="txt10 opacity-7" thin flat @click="deleteItem(i)" />
+						<Btn
+							v-if="props.delete" icon="delete" class="txt10 opacity-7" thin flat
+							@click="deleteItem(i)"
+						/>
 					</div>
 				</div>
 
@@ -388,27 +394,27 @@ const showMinimizeButton = computed(() => {
 
 .itemBox .richtext-editor-content {
 	--richtext-font-size: 12px !important;
-		font-size: 12px !important;
-	}
+	font-size: 12px !important;
+}
 
-	.itemBox iframe.editableContent {
-		--richtext-font-size: 12px !important;
-	}
+.itemBox iframe.editableContent {
+	--richtext-font-size: 12px !important;
+}
 
-	.itemBox .bagel-input.richtext-input {
-		--richtext-font-size: 12px !important;
-	}
+.itemBox .bagel-input.richtext-input {
+	--richtext-font-size: 12px !important;
+}
 
-	/* More specific selectors to override richtext font size */
-	.itemBox .richtext-input iframe {
-		font-size: 12px !important;
-	}
+/* More specific selectors to override richtext font size */
+.itemBox .richtext-input iframe {
+	font-size: 12px !important;
+}
 
-	.itemBox .richtext-input .editableContent body {
-		font-size: 12px !important;
-	}
+.itemBox .richtext-input .editableContent body {
+	font-size: 12px !important;
+}
 
-	.itemBox .richtext-input {
-		font-size: 12px !important;
+.itemBox .richtext-input {
+	font-size: 12px !important;
 }
 </style>

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

@@ -143,7 +143,7 @@ watch(() => props.modelValue, (newVal) => {
 }
 
 .code-editor-grandpa {
-	border-radius: 0.25rem;
+	border-radius: var(--code-border-radius, 0.25rem);
 	width: 100%;
 	height: 100%;
 	overflow: auto;

package/src/composables/useExcel.ts

@@ -65,7 +65,7 @@ export function useExcel() {
 		const XLSX = await ensureXLSXLoaded()
 
 		const formattedData = formatData(data, schema)
-		const headers = 0 < schema.length
+		const headers = schema.length > 0
 			? schema.map((sf) => {
 				const { id, label } = sf as unknown as Field<T>
 				return { v: (label as any) || (id as any), t: 's' }
@@ -73,7 +73,7 @@ export function useExcel() {
 			: []
 		const ws = XLSX.utils.json_to_sheet(formattedData)
 
-		if (0 < headers.length) {
+		if (headers.length > 0) {
 			XLSX.utils.sheet_add_aoa(ws, [headers.map(h => h.v)], { origin: 'A1' })
 		}
 
@@ -124,7 +124,7 @@ export function useExcel() {
 		// Read the raw sheet data as arrays
 		const rawSheetData = XLSX.utils.sheet_to_json(worksheet, { header: 1 }) as any[][]
 
-		if (0 === rawSheetData.length) {
+		if (rawSheetData.length === 0) {
 			return { headers: [], data: [] }
 		}
 
@@ -196,10 +196,10 @@ export function useExcel() {
 	// Helper function for date detection and conversion
 	function isExcelSerialDate(value: any): boolean {
 		return (
-			 'number' === typeof value
+			typeof value === 'number'
 			&& Number.isInteger(value)
-			&& 20000 <= value 
-			&& 50000 >= value 
+			&& value >= 20000
+			&& value <= 50000
 		)
 	}