@bagelink/vue 1.6.43 → 1.6.49

package/src/components/DataPreview.vue

@@ -41,7 +41,7 @@ const {
 
 const firstItem = computed(() => {
 	// Handle empty computedData
-	if (!computedData.value || 0 === computedData.value.length) {
+	if (!computedData.value || computedData.value.length === 0) {
 		return {} as T
 	}
 

package/src/components/DragOver.vue

@@ -17,7 +17,7 @@ const isDragging = ref(false)
 const dragCounter = ref(0)
 
 function handleDragEnter(e: DragEvent) {
-	if (props.disabled) {return}
+	if (props.disabled) { return }
 	e.preventDefault()
 	e.stopPropagation()
 	dragCounter.value++
@@ -25,17 +25,17 @@ function handleDragEnter(e: DragEvent) {
 }
 
 function handleDragOver(e: DragEvent) {
-	if (props.disabled) {return}
+	if (props.disabled) { return }
 	e.preventDefault()
 	e.stopPropagation()
 }
 
 function handleDragLeave(e: DragEvent) {
-	if (props.disabled) {return}
+	if (props.disabled) { return }
 	e.preventDefault()
 	e.stopPropagation()
 	dragCounter.value--
-	if (0 === dragCounter.value) {
+	if (dragCounter.value === 0) {
 		isDragging.value = false
 	}
 }
@@ -60,13 +60,13 @@ function handleClick(e: MouseEvent) {
 }
 
 function handleDrop(e: DragEvent) {
-	if (props.disabled) {return}
+	if (props.disabled) { return }
 	e.preventDefault()
 	e.stopPropagation()
 	dragCounter.value = 0
 	isDragging.value = false
 
-	if (!e.dataTransfer) {return}
+	if (!e.dataTransfer) { return }
 	emit('addFiles', e.dataTransfer.files)
 }
 </script>

package/src/components/Dropdown.vue

@@ -4,6 +4,7 @@ import type { TriggerEvent } from 'floating-vue'
 import type { ComponentExposed } from 'vue-component-type-helpers'
 import { Btn, useDevice } from '@bagelink/vue'
 import { Dropdown as DDown } from 'floating-vue'
+import { computed, ref } from 'vue'
 
 export type Side = 'top' | 'right' | 'bottom' | 'left' | 'auto'
 export type Alignment = 'start' | 'end'
@@ -89,111 +90,111 @@ const {
 
 const emit = defineEmits(['show', 'hide'])
 
-const iconSet = $computed(() => {
-	if (icon) {return icon}
-	if (!value) {return 'more_vert'}
+const iconSet = computed(() => {
+	if (icon !== undefined && icon !== '') { return icon }
+	if (value === undefined || value === '') { return 'more_vert' }
 	return undefined
 })
 
-const ddownRef = $ref<ComponentExposed<typeof DDown>>()
-const triggerRef = $ref<HTMLElement>()
+const ddownRef = ref<ComponentExposed<typeof DDown>>()
+const triggerRef = ref<HTMLElement>()
 const shown = defineModel('shown', {
 	type: Boolean,
 	default: false,
 })
 
-const show = () => ddownRef?.show()
+const show = () => ddownRef.value?.show()
 function hide() {
 	// Return focus to trigger element before hiding
-	triggerRef?.focus()
-	ddownRef?.hide()
+	triggerRef.value?.focus()
+	ddownRef.value?.hide()
 }
 
 const { isMobile, innerWidth } = useDevice()
 
-const shouldDisablePositioning = $computed(() => {
+const shouldDisablePositioning = computed(() => {
 	return disablePlacement && isMobile
 })
 
 // Convert hover triggers to click on small screens (tablets and mobile)
-const isSmallScreen = $computed(() => 910 > innerWidth.value)
+const isSmallScreen = computed(() => innerWidth.value < 910)
 
-const computedTriggers = $computed((): TriggerEvent[] => {
-	if (isSmallScreen && triggers.includes('hover')) {
+const computedTriggers = computed((): TriggerEvent[] => {
+	if (isSmallScreen.value && triggers.includes('hover')) {
 		// Replace hover with click on small screens
-		return triggers.map(trigger => 'hover' === trigger ? 'click' : trigger) as TriggerEvent[]
+		return triggers.map(trigger => trigger === 'hover' ? 'click' : trigger) as TriggerEvent[]
 	}
 	return triggers
 })
 
 // Intelligent trigger configuration
-const computedShowTriggers = $computed((): TriggerEvent[] => {
+const computedShowTriggers = computed((): TriggerEvent[] => {
 	if (showTriggers !== undefined) {
 		// Also convert hover to click in showTriggers on small screens
-		if (isSmallScreen && showTriggers.includes('hover')) {
-			return showTriggers.map(trigger => 'hover' === trigger ? 'click' : trigger) as TriggerEvent[]
+		if (isSmallScreen.value && showTriggers.includes('hover')) {
+			return showTriggers.map(trigger => trigger === 'hover' ? 'click' : trigger) as TriggerEvent[]
 		}
 		return showTriggers
 	}
-	return computedTriggers
+	return computedTriggers.value
 })
 
-const computedHideTriggers = $computed((): TriggerEvent[] => {
+const computedHideTriggers = computed((): TriggerEvent[] => {
 	if (hideTriggers !== undefined) {
 		// Also convert hover to click in hideTriggers on small screens
-		if (isSmallScreen && hideTriggers.includes('hover')) {
-			return hideTriggers.map(trigger => 'hover' === trigger ? 'click' : trigger) as TriggerEvent[]
+		if (isSmallScreen.value && hideTriggers.includes('hover')) {
+			return hideTriggers.map(trigger => trigger === 'hover' ? 'click' : trigger) as TriggerEvent[]
 		}
 		return hideTriggers
 	}
 	// For click-only dropdowns, only hide on click
-	if (1 === computedTriggers.length && 'click' === computedTriggers[0]) {
+	if (computedTriggers.value.length === 1 && computedTriggers.value[0] === 'click') {
 		return ['click'] as TriggerEvent[]
 	}
 	// For hover dropdowns, add click to hide triggers for better UX
 	// But on small screens, hover becomes click, so we handle it differently
 	if (triggers.includes('hover')) {
-		return [...computedTriggers, 'click'] as TriggerEvent[]
+		return [...computedTriggers.value, 'click'] as TriggerEvent[]
 	}
-	return computedTriggers
+	return computedTriggers.value
 })
 
-const computedPopperTriggers = $computed((): TriggerEvent[] => {
-	if (0 < popperTriggers.length) {return popperTriggers}
+const computedPopperTriggers = computed((): TriggerEvent[] => {
+	if (popperTriggers.length > 0) { return popperTriggers }
 	// For hover dropdowns, enable hover on popper to keep it open
 	// But on small screens, don't add hover triggers since we convert to click
-	if (triggers.includes('hover') && !isSmallScreen) {
+	if (triggers.includes('hover') && !isSmallScreen.value) {
 		return ['hover'] as TriggerEvent[]
 	}
 	return []
 })
 
 // Ensure we do not override popper show triggers with an empty array
-const computedPopperShowTriggers = $computed((): TriggerEvent[] | undefined => {
-	const hasExplicitShowTriggers = Array.isArray(popperShowTriggers) && 0 < popperShowTriggers.length
-	if (hasExplicitShowTriggers) {return popperShowTriggers}
+const computedPopperShowTriggers = computed((): TriggerEvent[] | undefined => {
+	const hasExplicitShowTriggers = Array.isArray(popperShowTriggers) && popperShowTriggers.length > 0
+	if (hasExplicitShowTriggers) { return popperShowTriggers }
 	// Only add hover for popper on large screens
-	if (triggers.includes('hover') && !isSmallScreen) {return ['hover'] as TriggerEvent[]}
+	if (triggers.includes('hover') && !isSmallScreen.value) { return ['hover'] as TriggerEvent[] }
 	return undefined
 })
 
-const computedPopperHideTriggers = $computed((): TriggerEvent[] => {
-	const hasExplicitHideTriggers = Array.isArray(popperHideTriggers) && 0 < popperHideTriggers.length
-	if (hasExplicitHideTriggers) {return popperHideTriggers}
+const computedPopperHideTriggers = computed((): TriggerEvent[] => {
+	const hasExplicitHideTriggers = Array.isArray(popperHideTriggers) && popperHideTriggers.length > 0
+	if (hasExplicitHideTriggers) { return popperHideTriggers }
 	// For hover dropdowns, make sure popper hides on mouseout
 	// But only on large screens where hover is meaningful
-	if (triggers.includes('hover') && !isSmallScreen) {
+	if (triggers.includes('hover') && !isSmallScreen.value) {
 		return ['hover'] as TriggerEvent[]
 	}
 	return []
 })
 
-const computedAutoHide = $computed(() => autoHide)
+const computedAutoHide = computed(() => autoHide)
 
-const computedDelay = $computed((): number | { show: number, hide: number } | undefined => {
-	if (delay !== undefined) {return delay}
+const computedDelay = computed((): number | { show: number, hide: number } | undefined => {
+	if (delay !== undefined) { return delay }
 	// For hover dropdowns, add a hide delay (but only on large screens)
-	if (triggers.includes('hover') && !isSmallScreen) {
+	if (triggers.includes('hover') && !isSmallScreen.value) {
 		return { show: 0, hide: 10 } // 10ms delay before hiding
 	}
 	// For click dropdowns (including small screens), no delay

package/src/components/Flag.vue

@@ -1,5 +1,6 @@
 <script lang="ts" setup>
 import type { CountryCode } from 'libphonenumber-js'
+import { computed } from 'vue'
 
 interface FlagProps {
 	country: CountryCode
@@ -9,17 +10,17 @@ interface FlagProps {
 }
 const props = defineProps<FlagProps>()
 
-const fis = $computed(() => {
-	if (props.circle || props.square) {return true}
+const fis = computed(() => {
+	if (props.circle || props.square) { return true }
 	return false
 })
-const height = $computed(() => `${props.size || 1}rem`)
+const height = computed(() => `${props.size ?? 1}rem`)
 
-const backgroundImage = $computed(() => {
+const backgroundImage = computed(() => {
 	let country = props.country.toLowerCase()
-	if ('ac' === country) {country = 'sh-ac'}
+	if (country === 'ac') { country = 'sh-ac' }
 	const baseURL = 'https://cdn.jsdelivr.net/gh/lipis/flag-icons@7.0.0/flags'
-	if (fis) {return `url(${baseURL}/1x1/${country.toLowerCase()}.svg)`}
+	if (fis.value) { return `url(${baseURL}/1x1/${country.toLowerCase()}.svg)` }
 	return `url(${baseURL}/4x3/${country.toLowerCase()}.svg)`
 })
 </script>

package/src/components/Icon/Icon.vue

@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import type { IconType } from '@bagelink/vue'
 import { useDevice } from '@bagelink/vue'
-import { ref, onMounted, watchEffect } from 'vue'
+import { computed, ref, onMounted, watchEffect } from 'vue'
 import { FONT_AWESOME_ICONS, MATERIAL_ICONS, FONT_AWESOME_BRANDS_ICONS } from './constants'
 
 const props = withDefaults(defineProps<{
@@ -18,25 +18,25 @@ const props = withDefaults(defineProps<{
 	size: 1
 })
 
-const iconRender = $computed(() => (props.icon ?? props.name) as IconType)
+const iconRender = computed(() => (props.icon ?? props.name) as IconType)
 
 const { isMobile } = useDevice()
 
-const computedSize = $computed(() => {
+const computedSize = computed(() => {
 	if (isMobile.value && props.mobileSize !== undefined) {
 		return props.mobileSize
 	}
 	return props.size
 })
 
-const iconRenderType = $computed(() => {
-	if (props.fontAwesome && (FONT_AWESOME_ICONS.includes(iconRender) || FONT_AWESOME_BRANDS_ICONS.includes(iconRender))) {return 'font-awesome'}
-	if (MATERIAL_ICONS.includes(iconRender)) {return 'material'}
-	if (FONT_AWESOME_ICONS.includes(iconRender) || FONT_AWESOME_BRANDS_ICONS.includes(iconRender)) {return 'font-awesome'}
+const iconRenderType = computed(() => {
+	if (props.fontAwesome && (FONT_AWESOME_ICONS.includes(iconRender.value) || FONT_AWESOME_BRANDS_ICONS.includes(iconRender.value))) { return 'font-awesome' }
+	if (MATERIAL_ICONS.includes(iconRender.value)) { return 'material' }
+	if (FONT_AWESOME_ICONS.includes(iconRender.value) || FONT_AWESOME_BRANDS_ICONS.includes(iconRender.value)) { return 'font-awesome' }
 	return 'material'
 })
 
-const isFaBrand = $computed(() => FONT_AWESOME_BRANDS_ICONS.includes(iconRender))
+const isFaBrand = computed(() => FONT_AWESOME_BRANDS_ICONS.includes(iconRender.value))
 
 // Hide until required font is ready to avoid ligature text/fallback flash
 const isMaterialReady = ref(true)
@@ -44,22 +44,22 @@ const isFAFreeReady = ref(true)
 const isFABrandsReady = ref(true)
 
 function getFontFaceSet(): FontFaceSet | null {
-	if ('undefined' === typeof document) {return null}
+	if (typeof document === 'undefined') { return null }
 	const maybeFonts = (document as unknown as { fonts?: FontFaceSet }).fonts
 	return maybeFonts ?? null
 }
 
 function supportsFontLoading(): boolean {
 	const fonts = getFontFaceSet()
-	return null !== fonts && 'function' === typeof fonts.load
+	return fonts !== null && typeof fonts.load === 'function'
 }
 
 async function ensureFontLoaded(family: string): Promise<boolean> {
-	if (!supportsFontLoading()) {return true}
+	if (!supportsFontLoading()) { return true }
 	try {
 		const fonts = getFontFaceSet()
-		if (!fonts) {return true}
-		if (fonts.check(`1em "${family}"`)) {return true}
+		if (!fonts) { return true }
+		if (fonts.check(`1em "${family}"`)) { return true }
 		await fonts.load(`1em "${family}"`)
 		return fonts.check(`1em "${family}"`)
 	} catch {
@@ -83,12 +83,12 @@ async function loadFABrandsIfNeeded() {
 }
 
 onMounted(() => {
-	if (!supportsFontLoading()) {return}
-	if ('material' === iconRenderType) {
+	if (!supportsFontLoading()) { return }
+	if (iconRenderType.value === 'material') {
 		const fonts = getFontFaceSet()
 		isMaterialReady.value = fonts ? fonts.check('1em "Material Symbols Outlined"') : true
 		void loadMaterialIfNeeded()
-	} else if (isFaBrand) {
+	} else if (isFaBrand.value) {
 		const fonts = getFontFaceSet()
 		isFABrandsReady.value = fonts ? fonts.check('1em "Font Awesome 6 Brands"') : true
 		void loadFABrandsIfNeeded()
@@ -100,19 +100,19 @@ onMounted(() => {
 })
 
 watchEffect(() => {
-	if (!supportsFontLoading()) {return}
-	if ('material' === iconRenderType) {
+	if (!supportsFontLoading()) { return }
+	if (iconRenderType.value === 'material') {
 		void loadMaterialIfNeeded()
-	} else if (isFaBrand) {
+	} else if (isFaBrand.value) {
 		void loadFABrandsIfNeeded()
 	} else {
 		void loadFAFreeIfNeeded()
 	}
 })
 
-const isCurrentFontReady = $computed(() => {
-	if ('material' === iconRenderType) {return isMaterialReady.value}
-	return isFaBrand ? isFABrandsReady.value : isFAFreeReady.value
+const isCurrentFontReady = computed(() => {
+	if (iconRenderType.value === 'material') { return isMaterialReady.value }
+	return isFaBrand.value ? isFABrandsReady.value : isFAFreeReady.value
 })
 </script>
 

package/src/components/IframeVue.vue

@@ -1,4 +1,6 @@
 <script setup lang="ts">
+import { onBeforeUnmount, onMounted, ref } from 'vue'
+
 interface Message {
 	mesage: string
 	type: string
@@ -26,16 +28,14 @@ const emit = defineEmits<{
 	(load: 'load', payload: Event): void
 }>()
 
-import { onBeforeUnmount, onMounted } from 'vue'
-
-const iframe = $ref<HTMLIFrameElement>()
+const iframe = ref<HTMLIFrameElement>()
 
 function handleMessage(event: MessageEvent) {
 	emit('message', event.data as Message)
 }
 
 function handleMessageWrapper(event: MessageEvent) {
-	if (event.source === iframe?.contentWindow) {
+	if (event.source === iframe.value?.contentWindow) {
 		handleMessage(event)
 	}
 }
@@ -48,7 +48,7 @@ onBeforeUnmount(() => {
 	window.removeEventListener('message', handleMessageWrapper)
 })
 
-const contentWindow = () => iframe?.contentWindow as Window | null
+const contentWindow = () => iframe.value?.contentWindow as Window | null
 
 defineExpose({ contentWindow })
 </script>

package/src/components/Image.vue

@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import { Skeleton, normalizeDimension, appendScript, normalizeURL, Icon, pathKeyToURL } from '@bagelink/vue'
-import { watch } from 'vue'
+import { ref, watch } from 'vue'
 
 interface ImageProps {
 	src?: string
@@ -20,16 +20,16 @@ declare global {
 
 const props = defineProps<ImageProps>()
 
-let imageSrc = $ref<string | undefined>(undefined)
-let loadingError = $ref(false)
+const imageSrc = ref<string | undefined>(undefined)
+const loadingError = ref(false)
 
 function getImageUrl(): string | undefined {
-	if (!props.src && !props.pathKey && !props.modelValue) {return}
-	return pathKeyToURL(props.src || props.pathKey || props.modelValue)
+	if ((props.src === undefined || props.src === '') && (props.pathKey === undefined || props.pathKey === '') && (props.modelValue === undefined || props.modelValue === '')) { return }
+	return pathKeyToURL(props.src ?? props.pathKey ?? props.modelValue)
 }
 
 async function getCachedImage(url: string): Promise<string | undefined> {
-	if (!('caches' in window)) {return undefined}
+	if (!('caches' in window)) { return undefined }
 	try {
 		const imgCache = await window.caches.open('img-cache')
 		const cachedResponse = await imgCache.match(url)
@@ -43,7 +43,7 @@ async function getCachedImage(url: string): Promise<string | undefined> {
 }
 
 async function cacheImage(url: string, blob: Blob) {
-	if (!('caches' in window)) {return}
+	if (!('caches' in window)) { return }
 	try {
 		const imgCache = await window.caches.open('img-cache')
 		await imgCache.put(url, new Response(blob))
@@ -62,30 +62,30 @@ async function convertHeicImage(url: string): Promise<string> {
 }
 
 async function loadImage() {
-	loadingError = false
+	loadingError.value = false
 	const url = getImageUrl()
-	if (!url) {
-		imageSrc = undefined
+	if (url === undefined || url === '') {
+		imageSrc.value = undefined
 		return
 	}
 
 	try {
 		const ext = url.split('.').pop()?.toLowerCase().split('?')[0]
 
-		if ('heic' === ext) {
+		if (ext === 'heic') {
 			const cachedSrc = await getCachedImage(url)
-			if (cachedSrc) {
-				imageSrc = cachedSrc
+			if (cachedSrc !== undefined && cachedSrc !== '') {
+				imageSrc.value = cachedSrc
 				return
 			}
-			imageSrc = await convertHeicImage(url)
+			imageSrc.value = await convertHeicImage(url)
 		} else {
-			imageSrc = url
+			imageSrc.value = url
 		}
 	} catch (error) {
 		console.error('Image loading error:', error)
-		loadingError = true
-		imageSrc = undefined
+		loadingError.value = true
+		imageSrc.value = undefined
 	}
 }