@bagelink/vue 1.6.47 → 1.6.51

package/src/components/MapEmbed/Index.vue

@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import type { LatLngExpression, Map, Marker } from 'leaflet'
 import { appendScript, sleep } from '@bagelink/vue'
-import { onMounted, watch } from 'vue'
+import { onMounted, ref, watch } from 'vue'
 import './leaflet.css'
 
 type MapMarker = {
@@ -32,56 +32,56 @@ const props = withDefaults(
 )
 
 const emit = defineEmits(['select'])
-let L = $ref<any>()
-let map = $ref<Map>()
-const _markers = $ref<Marker[]>([])
-const id = $ref(Math.random().toString(36).slice(2, 10))
+const L = ref<any>()
+const map = ref<Map>()
+const _markers = ref<Marker[]>([])
+const id = ref(Math.random().toString(36).slice(2, 10))
 
 const defaultMarkerSVG = '<svg width="28" height="38" viewBox="0 0 28 38" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M14.2263 37.7955C17.0897 37.7955 19.4109 37.0138 19.4109 36.0496C19.4109 35.0854 17.0897 34.3037 14.2263 34.3037C11.363 34.3037 9.04175 35.0854 9.04175 36.0496C9.04175 37.0138 11.363 37.7955 14.2263 37.7955Z" fill="black" fill-opacity="0.1"/><path d="M14.2265 0.549591C21.2842 0.549591 27.0131 6.23786 27.0787 13.28V13.4024C27.0787 19.3328 24.4759 24.4306 21.5627 28.2764C18.6511 32.12 15.4577 34.6754 14.3457 35.5097C14.2748 35.5629 14.1778 35.5629 14.1068 35.5097C12.9947 34.675 9.80135 32.1197 6.88984 28.2762C3.97665 24.4304 1.37378 19.3328 1.37378 13.4024C1.37378 6.30387 7.12806 0.549591 14.2265 0.549591Z" fill="#ED1b3E" stroke="#ED6C6F"/><path d="M14.2263 21.6185C18.7639 21.6185 22.4424 17.94 22.4424 13.4024C22.4424 8.86477 18.7639 5.18631 14.2263 5.18631C9.68872 5.18631 6.01025 8.86477 6.01025 13.4024C6.01025 17.94 9.68872 21.6185 14.2263 21.6185Z" fill="white"/></svg>'
 const leafletScriptUrl = 'https://unpkg.com/leaflet@1.9.4/dist/leaflet.js'
 
 async function loadGlobalL() {
-	while (!window.L) {await sleep(100)}
+	while (!window.L) { await sleep(100) }
 	return window.L
 }
 
 async function initializeMap() {
 	await appendScript(leafletScriptUrl)
-	L = await loadGlobalL()
-	if (!map) {
-		map = L.map(id, {
+	L.value = await loadGlobalL()
+	if (!map.value) {
+		map.value = L.value.map(id.value, {
 			center: props.center,
 			zoom: props.zoom,
 			zoomControl: props.zoomControl,
 		})
 
-		L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', { maxZoom: 18, }).addTo(map)
+		L.value.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', { maxZoom: 18, }).addTo(map.value)
 	}
 }
 
 async function addMarker(marker: MapMarker) {
 	const iconSVG = props.markerIcon || defaultMarkerSVG
-	const icon = L?.icon({
+	const icon = L.value?.icon({
 		iconUrl: `data:image/svg+xml;utf8,${encodeURIComponent(iconSVG)}`,
 		iconSize: [32, 32],
 	})
 	const latlng = latLangFromMarker(marker)
 	const title = Array.isArray(marker) ? marker[2] : marker.title ?? marker.tooltip
 	const tooltip = Array.isArray(marker) ? marker[2] : marker.tooltip
-	const m = L?.marker(latlng, { title, icon, interactive: true }).addTo(map as Map) as Marker
-	if (tooltip) {m.bindTooltip(tooltip, { direction: 'top' })} // Use `bindPopup` if you want a click-to-show label
+	const m = L.value?.marker(latlng, { title, icon, interactive: true }).addTo(map.value as Map) as Marker
+	if (tooltip) { m.bindTooltip(tooltip, { direction: 'top' }) } // Use `bindPopup` if you want a click-to-show label
 	m.on('click', () => { emit('select', marker) })
 
-	_markers.push(m)
+	_markers.value.push(m)
 }
 
 function fitMarkers(L: any) {
-	if (0 < _markers.length) {
-		const latLngs = _markers.map(marker => marker.getLatLng())
+	if (_markers.value.length > 0) {
+		const latLngs = _markers.value.map(marker => marker.getLatLng())
 		const bounds = L.latLngBounds(latLngs)
 		const center = bounds.getCenter()
-		map?.setView(center, props.zoom)
-		map?.fitBounds(bounds, {
+		map.value?.setView(center, props.zoom)
+		map.value?.fitBounds(bounds, {
 			animate: true,
 			padding: [20, 20], // Adjust padding as needed
 		})
@@ -96,19 +96,19 @@ function latLangFromMarker(marker: MapMarker): LatLngExpression {
 }
 
 async function watchMarkers(markers?: MapMarker[]) {
-	if (!L) {L = await loadGlobalL()}
-	_markers.forEach(marker => marker.remove())
-	if (!markers) {return}
+	if (!L.value) { L.value = await loadGlobalL() }
+	_markers.value.forEach(marker => marker.remove())
+	if (!markers) { return }
 
 	for (const marker of markers) {
-		if (!map) {await initializeMap()}
+		if (!map.value) { await initializeMap() }
 		addMarker(marker)
 	}
-	fitMarkers(L)
+	fitMarkers(L.value)
 }
 
 watch(() => props.markers, watchMarkers, { immediate: true })
-watch(() => props.center, center => map?.setView(center, props.zoom), { immediate: true })
+watch(() => props.center, center => map.value?.setView(center, props.zoom), { immediate: true })
 
 onMounted(initializeMap)
 </script>

package/src/components/Modal.vue

@@ -7,6 +7,8 @@ import {
 	Title
 } from '@bagelink/vue'
 import {
+	computed,
+	ref,
 	useSlots,
 	watch
 } from 'vue'
@@ -36,19 +38,19 @@ const emit = defineEmits(['update:visible'])
 
 const slots: SetupContext['slots'] = useSlots()
 
-let isVisible = $ref<boolean>(false)
+const isVisible = ref<boolean>(false)
 
 watch(
 	() => props.visible,
 	(val) => {
-		if (val === isVisible || val === undefined) { return }
+		if (val === isVisible.value || val === undefined) { return }
 		if (val) { openModal() }
 		else { closeModal() }
 	},
 	{ immediate: true },
 )
 
-const maxWidth = $computed(() => {
+const maxWidth = computed(() => {
 	const { width } = props
 	if (width?.match(/px|em|rem|vw|vh|%/)) { return { 'max-width': width } }
 	if (width?.match(/\d+/)) { return { 'max-width': `${width}px` } }
@@ -56,24 +58,24 @@ const maxWidth = $computed(() => {
 })
 
 // Computed properties for close button placement
-const isOverlay = $computed(() => props.closePlacement === 'overlay' || props.closePlacement === 'overlay-end')
-const isHeader = $computed(() => props.closePlacement === 'header' || props.closePlacement === 'header-end')
-const isFooter = $computed(() => props.closePlacement === 'footer')
+const isOverlay = computed(() => props.closePlacement === 'overlay' || props.closePlacement === 'overlay-end')
+const isHeader = computed(() => props.closePlacement === 'header' || props.closePlacement === 'header-end')
+const isFooter = computed(() => props.closePlacement === 'footer')
 
-const overlayCloseClass = $computed(() => {
+const overlayCloseClass = computed(() => {
 	if (props.closePlacement === 'overlay-end') { return 'top-1 end-1' }
 	return 'top-1 start-1'
 })
 
 function closeModal() {
-	isVisible = false
+	isVisible.value = false
 	setTimeout(() => { emit('update:visible', false) }, 200)
 }
 
 defineExpose({ closeModal })
 
 function openModal() {
-	setTimeout(() => (isVisible = true), 1)
+	setTimeout(() => (isVisible.value = true), 1)
 }
 
 // Note: ESC key handling is now done centrally in ModalPlugin for proper stacking behavior

package/src/components/ModalForm.vue

@@ -3,6 +3,7 @@ import type { Path } from '@bagelink/vue'
 import type { ComponentExposed } from 'vue-component-type-helpers'
 import type { ModalFormOptions } from '../plugins/modalTypes'
 import { Btn, Modal, useBagel, BagelForm } from '@bagelink/vue'
+import { ref } from 'vue'
 
 // eslint-disable-next-line vue/prop-name-casing
 const props = withDefaults(defineProps<ModalFormOptions<T>>(), {
@@ -17,7 +18,7 @@ const emit = defineEmits<{
 
 const bagel = useBagel()
 
-const modal = $ref<ComponentExposed<typeof Modal>>()
+const modal = ref<ComponentExposed<typeof Modal>>()
 
 const formData = defineModel<T>('modelValue', {
 	default: {} as Partial<T>,
@@ -25,20 +26,20 @@ const formData = defineModel<T>('modelValue', {
 
 type BagelFormT = ComponentExposed<typeof BagelForm<T, P>>
 
-const form = $ref<BagelFormT>()
-const closeModal = () => modal?.closeModal()
+const form = ref<BagelFormT>()
+const closeModal = () => modal.value?.closeModal()
 
-let submitting = $ref(false)
+const submitting = ref(false)
 
 async function runSubmit() {
-	if (submitting) { return }
-	if (form?.validateForm() === false) { return }
-	submitting = true
+	if (submitting.value) { return }
+	if (form.value?.validateForm() === false) { return }
+	submitting.value = true
 	try {
 		await props.onSubmit?.(formData.value)
 		closeModal()
 	} catch (err: any) {
-		submitting = false
+		submitting.value = false
 		if (props.onError) { props.onError(err) }
 		else { bagel.onError?.(err) }
 	}

package/src/components/NavBar.vue

@@ -1,7 +1,7 @@
 <script lang="ts" setup>
 import type { IconType, NavLink } from '@bagelink/vue'
 import { Icon } from '@bagelink/vue'
-import { onMounted } from 'vue'
+import { onMounted, ref } from 'vue'
 
 withDefaults(
 	defineProps<{
@@ -20,18 +20,18 @@ withDefaults(
 	}
 )
 
-let isOpen = $ref(true)
+const isOpen = ref(true)
 
 function calcIsOpen() {
-	isOpen = 1100 > window.innerWidth
+	isOpen.value = window.innerWidth < 1100
 
 	const storedNavOpenVal = localStorage.getItem('navOpen')
-	if ('true' === storedNavOpenVal || null === storedNavOpenVal) {isOpen = true}
+	if (storedNavOpenVal === 'true' || storedNavOpenVal === null) { isOpen.value = true }
 }
 
 function toggleMenu() {
-	isOpen = !isOpen
-	localStorage.setItem('navOpen', `${isOpen}`)
+	isOpen.value = !isOpen.value
+	localStorage.setItem('navOpen', `${isOpen.value}`)
 }
 
 onMounted(calcIsOpen)

package/src/components/Pagination.vue

@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import { Btn } from '@bagelink/vue'
-import { watch, nextTick } from 'vue'
+import { computed, ref, watch, nextTick } from 'vue'
 
 interface Range {
 	start: number
@@ -28,13 +28,13 @@ const props = withDefaults(defineProps<PaginationProps>(), {
 const page = defineModel<number>('page', { default: 1 })
 const range = defineModel<Range>('range')
 
-const paginationContainer = $ref<HTMLElement>()
-let indicatorPosition = $ref(0)
-let indicatorWidth = $ref(0)
+const paginationContainer = ref<HTMLElement>()
+const indicatorPosition = ref(0)
+const indicatorWidth = ref(0)
 
 // Calculate totalPages from totalItems and perPage if not provided directly
-const computedTotalPages = $computed(() => {
-	if (props.totalPages !== undefined) {return props.totalPages}
+const computedTotalPages = computed(() => {
+	if (props.totalPages !== undefined) { return props.totalPages }
 	const { perPage } = props
 	return Math.max(1, Math.ceil(props.totalItems / perPage))
 })
@@ -59,12 +59,12 @@ watch(
 watch(() => props.rtl, updateIndicatorPosition)
 
 // Calculate which page numbers to show
-const visiblePages = $computed(() => {
+const visiblePages = computed(() => {
 	const { maxVisiblePages } = props
 
 	// If we have few enough pages, show all of them
-	if (computedTotalPages <= maxVisiblePages * 2) {
-		return Array.from({ length: computedTotalPages }, (_, i) => i + 1)
+	if (computedTotalPages.value <= maxVisiblePages * 2) {
+		return Array.from({ length: computedTotalPages.value }, (_, i) => i + 1)
 	}
 
 	// Always include current page and adjacent pages for navigation
@@ -74,12 +74,12 @@ const visiblePages = $computed(() => {
 	mustInclude.add(page.value)
 
 	// Ensure adjacent pages are included for navigation
-	if (1 < page.value) {mustInclude.add(page.value - 1)}
-	if (page.value < computedTotalPages) {mustInclude.add(page.value + 1)}
+	if (page.value > 1) { mustInclude.add(page.value - 1) }
+	if (page.value < computedTotalPages.value) { mustInclude.add(page.value + 1) }
 
 	// Always include first and last pages
 	mustInclude.add(1)
-	mustInclude.add(computedTotalPages)
+	mustInclude.add(computedTotalPages.value)
 
 	// Start with explicitly required pages
 	const pageArray = Array.from(mustInclude).sort((a, b) => a - b)
@@ -91,7 +91,7 @@ const visiblePages = $computed(() => {
 			const current = pageArray[i]
 			const next = pageArray[i + 1]
 
-			if (1 < next - current) {
+			if (next - current > 1) {
 				// There's a gap - fill in additional pages
 				const pagesToAdd = Math.min(next - current - 1, maxVisiblePages + 2 - pageArray.length)
 
@@ -110,30 +110,30 @@ const visiblePages = $computed(() => {
 })
 
 function updateIndicatorPosition() {
-	if (!paginationContainer) {return}
+	if (!paginationContainer.value) { return }
 
-	const selectedButton = paginationContainer.querySelector('.selected')
-	if (!selectedButton) {return}
+	const selectedButton = paginationContainer.value.querySelector('.selected')
+	if (!selectedButton) { return }
 
-	const containerRect = paginationContainer.getBoundingClientRect()
+	const containerRect = paginationContainer.value.getBoundingClientRect()
 	const buttonRect = selectedButton.getBoundingClientRect()
 
 	// Get position and dimensions
-	indicatorWidth = buttonRect.width
+	indicatorWidth.value = buttonRect.width
 
 	if (props.rtl) {
 		// RTL positioning - align to right edge
 		const rightOffset = containerRect.right - buttonRect.right
-		indicatorPosition = rightOffset
+		indicatorPosition.value = rightOffset
 	} else {
 		// LTR positioning - align to left edge
 		const leftOffset = buttonRect.left - containerRect.left
-		indicatorPosition = leftOffset
+		indicatorPosition.value = leftOffset
 	}
 }
 
 function handleClick(p: number) {
-	if (1 > p || p > computedTotalPages) {return}
+	if (p < 1 || p > computedTotalPages.value) { return }
 	page.value = p
 }
 
@@ -157,16 +157,16 @@ interface PageItem {
 }
 
 // Enhanced rendering - creates UI with ellipses in the right positions
-const renderPageButtons = $computed(() => {
+const renderPageButtons = computed(() => {
 	const items: PageItem[] = []
 
-	for (let i = 0; i < visiblePages.length; i++) {
-		const pageNum = visiblePages[i]
+	for (let i = 0; i < visiblePages.value.length; i++) {
+		const pageNum = visiblePages.value[i]
 
 		// Insert ellipsis before this page if needed
-		if (0 < i) {
-			const prevPage = visiblePages[i - 1]
-			if (1 < pageNum - prevPage) {
+		if (i > 0) {
+			const prevPage = visiblePages.value[i - 1]
+			if (pageNum - prevPage > 1) {
 				items.push({
 					type: 'ellipsis',
 					key: `ellipsis-${i}`

package/src/components/Pill.vue

@@ -2,7 +2,7 @@
 import type { IconType, ThemeType } from '@bagelink/vue'
 import type { SetupContext } from 'vue'
 import { Btn, Icon } from '@bagelink/vue'
-import { useSlots } from 'vue'
+import { computed, useSlots } from 'vue'
 
 interface BtnProp {
 	icon?: IconType
@@ -31,23 +31,23 @@ const props = defineProps<{
 
 const slots: SetupContext['slots'] = useSlots()
 
-const computedTheme = $computed(
+const computedTheme = computed(
 	() => {
-		if (props.disabled) {return 'gray-light'}
+		if (props.disabled) { return 'gray-light' }
 		return (props.color || props.theme) as ThemeType
 	},
 )
 
-const computedDefaultColors = $computed(
+const computedDefaultColors = computed(
 	() => ({
 		backgroundColor: 'var(--bgl-primary)',
 		color: props.flat ? 'var(--bgl-text-color)' : 'var(--bgl-light-text)',
 	}),
 )
 
-function getThemeColors(theme: Partial<typeof computedDefaultColors>): typeof computedDefaultColors {
+function getThemeColors(theme: Partial<typeof computedDefaultColors.value>): typeof computedDefaultColors.value {
 	return {
-		...computedDefaultColors,
+		...computedDefaultColors.value,
 		...theme,
 		color: props.flat
 			? theme.backgroundColor as string
@@ -55,7 +55,7 @@ function getThemeColors(theme: Partial<typeof computedDefaultColors>): typeof co
 	}
 }
 
-const themes: Partial<Record<string, typeof computedDefaultColors>> = {
+const themes: Partial<Record<string, typeof computedDefaultColors.value>> = {
 	// Base Colors
 	'blue': getThemeColors({ backgroundColor: 'var(--bgl-blue)', color: 'var(--bgl-white)' }),
 	'green': getThemeColors({ backgroundColor: 'var(--bgl-green)', color: 'var(--bgl-white)' }),
@@ -238,7 +238,6 @@ const themes: Partial<Record<string, typeof computedDefaultColors>> = {
 	'black-130': getThemeColors({ backgroundColor: 'var(--bgl-black-130)', color: 'var(--bgl-white)' }),
 	'pink-130': getThemeColors({ backgroundColor: 'var(--bgl-pink-130)', color: 'var(--bgl-white)' }),
 
-
 	// Legacy light variants (mapped to 20% tints)
 	'blue-light': getThemeColors({ backgroundColor: 'var(--bgl-blue-light)', color: 'var(--bgl-blue)' }),
 	'green-light': getThemeColors({ backgroundColor: 'var(--bgl-green-light)', color: 'var(--bgl-green)' }),
@@ -263,12 +262,12 @@ const themes: Partial<Record<string, typeof computedDefaultColors>> = {
 	'light': getThemeColors({ backgroundColor: 'var(--bgl-primary-light)', color: 'var(--bgl-primary)' }),
 }
 
-const cumputedTextColor = $computed(
-	() => (themes[computedTheme as ThemeType]?.color ?? computedDefaultColors.color),
+const cumputedTextColor = computed(
+	() => (themes[computedTheme.value as ThemeType]?.color ?? computedDefaultColors.value.color),
 )
 
-const computedBackgroundColor = $computed(
-	() => (themes[computedTheme as ThemeType]?.backgroundColor ?? computedDefaultColors.backgroundColor),
+const computedBackgroundColor = computed(
+	() => (themes[computedTheme.value as ThemeType]?.backgroundColor ?? computedDefaultColors.value.backgroundColor),
 )
 </script>
 

package/src/components/Rating.vue

@@ -12,10 +12,10 @@ const { rating, totalStars = 5, iconType = 'star', fillColor = '#fabf05', emptyC
 }>()
 
 function getFillWidth(n: number): string {
-	const ratingNumber = 'string' === typeof rating ? Number.parseFloat(rating.replace(',', '.')) : rating
+	const ratingNumber = typeof rating === 'string' ? Number.parseFloat(rating.replace(',', '.')) : rating
 	if (n <= Math.floor(ratingNumber)) {
 		return '100%'
-	}if (n > Math.ceil(ratingNumber)) {
+	} if (n > Math.ceil(ratingNumber)) {
 		return '0%'
 	} else {
 		return `${(ratingNumber % 1) * 100}%`