@bagelink/vue 1.6.43 → 1.6.49

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@bagelink/vue",
   "type": "module",
-  "version": "1.6.43",
+  "version": "1.6.49",
   "description": "Bagel core sdk packages",
   "author": {
     "name": "Bagel Studio",
@@ -60,7 +60,6 @@
     "swiper": "^12.0.3",
     "@types/leaflet": "^1.9.18",
     "@types/signature_pad": "^4.0.0",
-    "@vue-macros/reactivity-transform": "^1.1.6",
     "vue": "^3.5.16",
     "vue-component-type-helpers": "^2.2.10",
     "vue-toastification": "^2.0.0-rc.5"

package/src/components/AccordionItem.vue

@@ -1,6 +1,6 @@
 <script lang="ts" setup>
 import { Icon } from '@bagelink/vue'
-import { inject, watch, computed } from 'vue'
+import { computed, inject, ref, watch } from 'vue'
 
 const props = defineProps<{
 	label?: string
@@ -14,12 +14,12 @@ const props = defineProps<{
 
 const emit = defineEmits(['update:open'])
 
-let openVal = $ref(!!props.open)
+const openVal = ref(!!props.open)
 
-let isOpen = $computed({
-	get: () => openVal,
+const isOpen = computed({
+	get: () => openVal.value,
 	set: (value: boolean) => {
-		openVal = value
+		openVal.value = value
 		emit('update:open', value)
 	},
 })
@@ -28,34 +28,34 @@ interface AccordionState {
 	openItem?: string
 }
 
-const accordionState = inject<AccordionState>('accordionState')
+const accordionState = inject<AccordionState | undefined>('accordionState', undefined)
 const id = props.id || Math.random().toString(36).slice(7)
 
 const computedIcon = computed(() => {
-	return 'plus_minus' === props.iconType
-		? (isOpen ? 'remove' : 'add')
+	return props.iconType === 'plus_minus'
+		? (isOpen.value ? 'remove' : 'add')
 		: 'expand_more'
 })
 const iconPosition = computed(() => props.iconPosition || 'end')
 
-watch(() => props.open, () => isOpen = props.open, { immediate: true })
+watch(() => props.open, () => isOpen.value = props.open, { immediate: true })
 
 if (accordionState) {
 	watch(
 		() => accordionState.openItem,
 		(currentOpenId) => {
-			if (currentOpenId !== id) {isOpen = false}
+			if (currentOpenId !== id) { isOpen.value = false }
 		},
 		{ immediate: true }
 	)
 }
 
 function toggle() {
-	isOpen = !isOpen
+	isOpen.value = !isOpen.value
 	if (accordionState) {
-		if (isOpen) {
+		if (isOpen.value) {
 			accordionState.openItem = id
-		} else if (accordionState.openItem === id) {
+		} else if (accordionState.openItem !== undefined && accordionState.openItem === id) {
 			accordionState.openItem = undefined
 		}
 	}

package/src/components/AddToCalendar.vue

@@ -39,7 +39,7 @@ const calendarProviders = [
 ]
 
 const includedProviders = computed(() => {
-	if (!props.providers || !props.providers.length) {return calendarProviders}
+	if (!props.providers || !props.providers.length) { return calendarProviders }
 	return calendarProviders.filter(provider => props.providers?.includes(provider.id))
 })
 

package/src/components/AddressSearch.vue

@@ -1,28 +1,29 @@
 <script setup lang="ts">
 import { Dropdown, ListItem, ListView, TextInput } from '@bagelink/vue'
+import { ref } from 'vue'
 
 const emit = defineEmits(['addressSelected'])
-let addressInput = $ref('')
-let searchResults = $ref<any[]>([])
+const addressInput = ref('')
+const searchResults = ref<any[]>([])
 
 type MapMarker = {
 	lat: number
 	lon: number
 } | [number, number]
 
-const suggestion = $ref<typeof Dropdown>()
+const suggestion = ref<typeof Dropdown>()
 function emitAddress(address: MapMarker) {
 	emit('addressSelected', address)
-	searchResults = []
-	addressInput = ''
+	searchResults.value = []
+	addressInput.value = ''
 }
 
 async function searchAddresses() {
-	const addressURL = addressInput.replaceAll(/\s+/g, '+')
+	const addressURL = addressInput.value.replaceAll(/\s+/g, '+')
 	const geocodeUrl = `https://nominatim.openstreetmap.org/search?format=json&q=${encodeURI(addressURL)}`
 	const res = await fetch(geocodeUrl)
-	searchResults = await res.json() || []
-	suggestion?.show()
+	searchResults.value = await res.json() ?? []
+	suggestion.value?.show()
 }
 </script>
 

package/src/components/Alert.vue

@@ -1,6 +1,7 @@
 <script setup lang="ts">
 import type { IconType } from '@bagelink/vue'
 import { Icon } from '@bagelink/vue'
+import { ref } from 'vue'
 import Btn from './Btn.vue'
 
 interface Props {
@@ -19,7 +20,7 @@ withDefaults(
 	},
 )
 
-const isDismissed = $ref(false)
+const isDismissed = ref(false)
 
 const color = {
 	info: 'var(--bgl-primary)',

package/src/components/Badge.vue

@@ -14,11 +14,11 @@ defineProps<Props>()
 </script>
 
 <template>
-<div class="pill" :class="[color]">
-	<Icon v-if="icon" class="inline" :icon="icon" />
-	{{ text }}
-	<Icon v-if="iconEnd" class="inline" :icon="iconEnd" />
-</div>
+	<div class="pill" :class="[color]">
+		<Icon v-if="icon" class="inline" :icon="icon" />
+		{{ text }}
+		<Icon v-if="iconEnd" class="inline" :icon="iconEnd" />
+	</div>
 </template>
 
 <style scoped>

package/src/components/BglVideo.vue

@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import { useIntersectionObserver } from '@vueuse/core'
-import { watch } from 'vue'
+import { computed, ref, watch } from 'vue'
 
 type Autoplay = boolean | 'visible'
 interface Props {
@@ -16,33 +16,33 @@ interface Props {
 
 const props = defineProps<Props>()
 
-const videoFormat = $computed(() => props.src?.split('.').pop()?.split('?').shift()?.toLowerCase() || 'mp4')
+const videoFormat = computed(() => props.src?.split('.').pop()?.split('?').shift()?.toLowerCase() ?? 'mp4')
 
-const videoContainer = $ref<HTMLElement | null>()
+const videoContainer = ref<HTMLElement | null>()
 
-const isYoutubeShort = $computed(() => {
-	return props.src?.includes('youtube.com/shorts/') || false
+const isYoutubeShort = computed(() => {
+	return props.src?.includes('youtube.com/shorts/') ?? false
 })
 
-const aspectRatio = $computed(
+const aspectRatio = computed(
 	() => {
-		if (isYoutubeShort) {return '9/16'} // Vertical aspect ratio for Shorts
-		return props.aspectRatio?.replace(':', '/') || '16/9'
+		if (isYoutubeShort.value) { return '9/16' } // Vertical aspect ratio for Shorts
+		return props.aspectRatio?.replace(':', '/') ?? '16/9'
 	}
 )
 
-const video = $ref<HTMLVideoElement | null>()
+const video = ref<HTMLVideoElement | null>()
 
 function play() {
-	video?.play()
+	video.value?.play()
 }
 
 function pause() {
-	video?.pause()
+	video.value?.pause()
 }
 
 // Setup intersection observer for autoplay="visible"
-if ('visible' === props.autoplay) {
+if (props.autoplay === 'visible') {
 	useIntersectionObserver(
 		videoContainer,
 		([{ isIntersecting }]) => {
@@ -57,50 +57,49 @@ if ('visible' === props.autoplay) {
 }
 
 watch(() => props.status, (status) => {
-	if ('play' === status) {play()}
-	if ('pause' === status) {pause()}
+	if (status === 'play') { play() }
+	if (status === 'pause') { pause() }
 })
 
 defineExpose({ play, pause })
 
-const embedType = $computed<'YouTube' | 'Vimeo' | undefined>(() => {
+const embedType = computed<'YouTube' | 'Vimeo' | undefined>(() => {
 	const youtubeRegex = /youtube\.com|youtu\.be/
-	if (youtubeRegex.test(props.src || '')) {return 'YouTube'}
+	if (youtubeRegex.test(props.src ?? '')) { return 'YouTube' }
 	const vimeoRegex = /(?:player\.)?vimeo\.com/
-	if (vimeoRegex.test(props.src || '')) {return 'Vimeo'}
+	if (vimeoRegex.test(props.src ?? '')) { return 'Vimeo' }
+	return undefined
 })
 
-const videoUrl = $computed(() => {
-	if (embedType) {
-		if ('YouTube' === embedType) {
-			// Extract video ID from YouTube regular or Shorts URL
-			let videoId = ''
-			if (props.src?.includes('youtube.com/shorts/')) {
-				videoId = props.src.split('/shorts/')[1]?.split('?')[0] || ''
-			} else {
-				videoId = props.src?.split(/v=|youtu\.be\//)[1]?.split('&')?.[0] || ''
-			}
-
-			const queryParams = new URLSearchParams({
-				autoplay: props.autoplay ? '1' : '0',
-				controls: '0',
-				showinfo: '0',
-				modestbranding: '1'
-			})
-			return `https://www.youtube.com/embed/${videoId}?${queryParams}`
+const videoUrl = computed(() => {
+	if (embedType.value === 'YouTube') {
+		// Extract video ID from YouTube regular or Shorts URL
+		let videoId = ''
+		if (props.src?.includes('youtube.com/shorts/') === true) {
+			videoId = props.src.split('/shorts/')[1]?.split('?')[0] ?? ''
+		} else {
+			videoId = props.src?.split(/v=|youtu\.be\//)[1]?.split('&')?.[0] ?? ''
 		}
-		if ('Vimeo' === embedType) {
-			// Handle both regular Vimeo URLs and player.vimeo.com embed URLs
-			const playerVimeoRegex = /player\.vimeo\.com\/video\/(\d+)/
-			const regularVimeoRegex = /vimeo\.com\/(?:channels\/(?:\w+\/)?|groups\/([^/]*)\/videos\/|album\/(\d+)\/video\/)?(\d+)(?:$|\/|\?)/
 
-			const playerMatch = props.src?.match(playerVimeoRegex)
-			const regularMatch = props.src?.match(regularVimeoRegex)
+		const queryParams = new URLSearchParams({
+			autoplay: (props.autoplay === true || props.autoplay === 'visible') ? '1' : '0',
+			controls: '0',
+			showinfo: '0',
+			modestbranding: '1'
+		})
+		return `https://www.youtube.com/embed/${videoId}?${queryParams}`
+	}
+	if (embedType.value === 'Vimeo') {
+		// Handle both regular Vimeo URLs and player.vimeo.com embed URLs
+		const playerVimeoRegex = /player\.vimeo\.com\/video\/(\d+)/
+		const regularVimeoRegex = /vimeo\.com\/(?:channels\/(?:\w+\/)?|groups\/([^/]*)\/videos\/|album\/(\d+)\/video\/)?(\d+)(?:$|\/|\?)/
 
-			const videoId = playerMatch?.[1] || regularMatch?.[3]
-			console.log(videoId, { playerMatch, regularMatch })
-			return `https://player.vimeo.com/video/${videoId}`
-		}
+		const playerMatch = props.src?.match(playerVimeoRegex) ?? null
+		const regularMatch = props.src?.match(regularVimeoRegex) ?? null
+
+		const videoId = playerMatch?.[1] ?? regularMatch?.[3]
+		console.log(videoId, { playerMatch, regularMatch })
+		return `https://player.vimeo.com/video/${videoId}`
 	}
 	return props.src
 })

package/src/components/Btn.vue

@@ -2,7 +2,7 @@
 import type { IconType, ExtendedThemeType } from '@bagelink/vue'
 import type { SetupContext } from 'vue'
 import { Icon, Loading, useModal } from '@bagelink/vue'
-import { useSlots, ref, onMounted, onUnmounted } from 'vue'
+import { useSlots, ref, onMounted, onUnmounted, computed } from 'vue'
 import { RouterLink } from 'vue-router'
 
 const props = withDefaults(
@@ -60,7 +60,7 @@ const emit = defineEmits<{
 const isMobileScreen = ref(false)
 
 function checkMobile() {
-	isMobileScreen.value = 910 >= window.innerWidth
+	isMobileScreen.value = window.innerWidth <= 910
 }
 
 onMounted(() => {
@@ -73,15 +73,15 @@ onUnmounted(() => {
 })
 
 async function handleClick(event: MouseEvent) {
-	if (props.confirm) {
+	if (props.confirm !== undefined && props.confirm !== false) {
 		const { confirmModal } = useModal()
-		const message = 'string' === typeof props.confirm ? props.confirm : 'Are you sure?'
+		const message = typeof props.confirm === 'string' ? props.confirm : 'Are you sure?'
 		const confirmed = await confirmModal({
 			title: 'Confirm',
 			message
 		})
 
-		if (!confirmed) {return}
+		if (!confirmed) { return }
 
 		props.onClick(event)
 		emit('confirmed', event)
@@ -90,8 +90,8 @@ async function handleClick(event: MouseEvent) {
 	}
 }
 
-const iconSizeComputed = $computed(() => {
-	if (props.iconSize !== undefined) {return props.iconSize}
+const iconSizeComputed = computed(() => {
+	if (props.iconSize !== undefined) { return props.iconSize }
 
 	// Default icon sizes based on button size
 	const sizeMap = {
@@ -114,20 +114,20 @@ const iconSizeComputed = $computed(() => {
 	return isMobileScreen.value ? 1 : 1.2
 })
 
-const isComponent = $computed(() => {
-	if (props.disabled) {return props.is}
-	if (props.to) {return RouterLink}
-	if (props.href) {return 'a'}
+const isComponent = computed(() => {
+	if (props.disabled) { return props.is }
+	if (props.to !== undefined && props.to !== '') { return RouterLink }
+	if (props.href !== undefined && props.href !== '') { return 'a' }
 	return props.is
 })
 
-const bind = $computed(() => {
+const bind = computed(() => {
 	const obj: { [key: string]: any } = {}
 	if (!props.disabled) {
-		if (props.to) {obj.to = props.to}
-		else if (props.href) {obj.href = props.href}
+		if (props.to !== undefined && props.to !== '') { obj.to = props.to }
+		else if (props.href !== undefined && props.href !== '') { obj.href = props.href }
 	}
-	if (!props.to && !props.href) {
+	if ((props.to === undefined || props.to === '') && (props.href === undefined || props.href === '')) {
 		obj.role = props.role
 		obj.type = props.type
 	}

package/src/components/Card.vue

@@ -1,4 +1,6 @@
 <script setup lang="ts">
+import { computed } from 'vue'
+
 const props = defineProps<{
 	label?: string
 	thin?: boolean
@@ -23,16 +25,16 @@ const props = defineProps<{
 		| 'transparent'
 }>()
 
-const bind = $computed(() => {
+const bind = computed(() => {
 	const obj: { [key: string]: any } = {}
-	if (props.href) {obj.href = props.href}
-	else if (props.to) {obj.to = props.to}
+	if (props.href !== undefined && props.href !== '') { obj.href = props.href }
+	else if (props.to !== undefined && props.to !== '') { obj.to = props.to }
 	return obj
 })
 
-const is = $computed(() => {
-	if (props.href) {return 'a'}
-	if (props.to) {return 'router-link'}
+const is = computed(() => {
+	if (props.href !== undefined && props.href !== '') { return 'a' }
+	if (props.to !== undefined && props.to !== '') { return 'router-link' }
 	return 'div'
 })
 </script>
@@ -46,8 +48,8 @@ const is = $computed(() => {
 			[bg || '']: bg,
 			'overflow-x': overflowX,
 			'overflow-y': overflowY,
-	'card_frame': frame,
-}"
+			'card_frame': frame,
+		}"
 	>
 		<span v-if="label" class="card_label">
 			{{ label }}