@bagelink/vue 1.5.11 → 1.5.15

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@bagelink/vue",
   "type": "module",
-  "version": "1.5.11",
+  "version": "1.5.15",
   "description": "Bagel core sdk packages",
   "author": {
     "name": "Neveh Allon",

package/src/components/AddToCalendar.vue

@@ -0,0 +1,66 @@
+<script setup lang="ts">
+import type { CalendarEvent, CalendarProvider } from '../composables/useAddToCalendar'
+import { Dropdown, Icon, ListItem, useDevice } from '@bagelink/vue'
+import { computed } from 'vue'
+import { useAddToCalendar } from '../composables/useAddToCalendar'
+
+interface Props {
+	title: string
+	description?: string
+	location?: string
+	startDate: Date | string
+	endDate?: Date | string
+	value?: string
+	providers?: CalendarProvider[]
+	outline?: boolean
+}
+
+const props = withDefaults(defineProps<Props>(), {
+	value: 'Add to Calendar',
+})
+
+const event: CalendarEvent = {
+	title: props.title,
+	description: props.description,
+	location: props.location,
+	startDate: props.startDate,
+	endDate: props.endDate,
+}
+
+const { addToCalendar } = useAddToCalendar(event)
+
+const calendarProviders = [
+	{ id: 'google' as CalendarProvider, name: 'Google Calendar', icon: 'google', color: 'red' },
+	{ id: 'apple' as CalendarProvider, name: 'Apple Calendar', icon: 'apple', color: 'black' },
+	{ id: 'outlook' as CalendarProvider, name: 'Outlook', icon: 'microsoft', color: 'blue' },
+	{ id: 'outlookcom' as CalendarProvider, name: 'Outlook.com', icon: 'microsoft', color: 'blue' },
+	{ id: 'yahoo' as CalendarProvider, name: 'Yahoo Calendar', icon: 'yahoo', color: 'purple' },
+	{ id: 'ics' as CalendarProvider, name: 'Other (ICS file)', icon: 'calendar', color: 'gray' },
+]
+
+const includedProviders = computed(() => {
+	if (!props.providers || !props.providers.length) return calendarProviders
+	return calendarProviders.filter(provider => props.providers?.includes(provider.id))
+})
+
+function handleProviderClick(provider: CalendarProvider, callback: () => void) {
+	addToCalendar(provider)
+	callback()
+}
+
+const { isMobile } = useDevice()
+</script>
+
+<template>
+	<Dropdown :outline="outline" icon="calendar" :disablePlacement="isMobile" :value="value" color="primary">
+		<template #default="{ hide }">
+			<ListItem
+				v-for="provider in includedProviders" :key="provider.id" type="button"
+				@click="handleProviderClick(provider.id, hide)"
+			>
+				<Icon :icon="provider.icon" :color="provider.color" :size="1.2" class="me-05" />
+				{{ provider.name }}
+			</ListItem>
+		</template>
+	</Dropdown>
+</template>

package/src/components/form/inputs/TextInput.vue

@@ -72,7 +72,7 @@ function autoResizeTextarea() {
 
 	const textarea = input as HTMLTextAreaElement
 	textarea.style.height = 'auto'
-	textarea.style.height = (textarea.scrollHeight + 1) + 'px'
+	textarea.style.height = `${textarea.scrollHeight + 1}px`
 }
 
 function updateInputVal() {
@@ -81,17 +81,17 @@ function updateInputVal() {
 	debouncedEmit()
 
 	if (props.autoheight) {
-		nextTick(() => autoResizeTextarea())
+		nextTick(() => { autoResizeTextarea() })
 	}
 }
 
 watch(
 	() => props.modelValue,
-	newVal => {
+	(newVal) => {
 		if (newVal !== inputVal) {
 			inputVal = newVal
 			if (props.autoheight) {
-				nextTick(() => autoResizeTextarea())
+				nextTick(() => { autoResizeTextarea() })
 			}
 		}
 	},
@@ -119,55 +119,27 @@ onMounted(async () => {
 
 <template>
 	<div
-		class="bagel-input text-input"
-		:class="{
+		class="bagel-input text-input" :class="{
 			dense,
 			small,
 			shrink,
 			code,
 			textInputIconWrap: icon,
 			txtInputIconStart: iconStart,
-}"
-		:title="title"
+		}" :title="title"
 	>
 		<label :for="id">
 			{{ label }} <span v-if="required && label">*</span>
 
 			<input
-				v-if="!multiline && !autoheight && !code && inputRows < 2"
-				:id
-				ref="input"
-				v-model.trim="inputVal"
-				:name
-				:title
-				:autocomplete
-				:type
-				:rows="1"
-				:placeholder="placeholder || label"
-				:disabled
-				:required
-				:pattern
-				v-bind="nativeInputAttrs"
-				@focusout="onFocusout"
-				@focus="onFocus"
-				@input="updateInputVal"
-			/>
+				v-if="!multiline && !autoheight && !code && inputRows < 2" :id ref="input" v-model.trim="inputVal"
+				:name :title :autocomplete :type :rows="1" :placeholder="placeholder || label" :disabled :required
+				:pattern v-bind="nativeInputAttrs" @focusout="onFocusout" @focus="onFocus" @input="updateInputVal"
+			>
 			<textarea
-				v-else
-				:id
-				ref="input"
-				v-model="inputVal"
-				:name
-				:title
-				:type
-				:rows="inputRows"
-				:placeholder="placeholder || label"
-				:disabled
-				:required
-				:pattern
-				v-bind="nativeInputAttrs"
-				@input="updateInputVal"
-				@focusout="onFocusout"
+				v-else :id ref="input" v-model="inputVal" :name :title :type :rows="inputRows"
+				:placeholder="placeholder || label" :disabled :required :pattern v-bind="nativeInputAttrs"
+				@input="updateInputVal" @focusout="onFocusout"
 			/>
 			<p v-if="helptext" class="opacity-7 light">{{ helptext }}</p>
 			<Icon v-if="iconStart" class="iconStart" :icon="iconStart" />
@@ -236,7 +208,8 @@ onMounted(async () => {
 	line-height: 0;
 }
 
-.textInputIconWrap input {
+.textInputIconWrap input,
+.textInputIconWrap textarea {
 	padding-inline-end: calc(var(--input-height) / 3 + 1.5rem);
 }
 

package/src/components/index.ts

@@ -1,6 +1,7 @@
 export { default as Accordion } from './Accordion.vue'
 export { default as AccordionItem } from './AccordionItem.vue'
 export { default as AddressSearch } from './AddressSearch.vue'
+export { default as AddToCalendar } from './AddToCalendar.vue'
 export { default as Alert } from './Alert.vue'
 export * from './analytics'
 export { default as Avatar } from './Avatar.vue'

package/src/composables/index.ts

@@ -4,6 +4,7 @@ import type { MaybeRefOrGetter, Ref, UnwrapRef } from 'vue'
 import { getFallbackSchema } from '@bagelink/vue'
 import { ref, toValue, watch } from 'vue'
 
+export { useAddToCalendar } from './useAddToCalendar'
 export { getBagelInstance, setBagelInstance, useBagel } from './useBagel'
 export { useDevice } from './useDevice'
 export { useExcel } from './useExcel'

package/src/composables/useAddToCalendar.ts

@@ -0,0 +1,237 @@
+/* eslint-disable ts/strict-boolean-expressions */
+import { computed } from 'vue'
+
+export interface CalendarEvent {
+	title: string
+	description?: string
+	location?: string
+	startDate: Date | string
+	endDate?: Date | string
+}
+
+export type CalendarProvider = 'google' | 'apple' | 'outlook' | 'outlookcom' | 'yahoo' | 'ics'
+
+export function useAddToCalendar(event: CalendarEvent) {
+	// Parse dates if they're strings
+	const parseDate = (date: Date | string): Date => {
+		return typeof date === 'string' ? new Date(date) : date
+	}
+
+	const eventStartDate = parseDate(event.startDate)
+
+	// Calculate end date if not provided (45 minutes after start)
+	const calculateEndDate = (): Date => {
+		if (event.endDate !== undefined) {
+			return parseDate(event.endDate)
+		}
+		const endDate = new Date(eventStartDate)
+		endDate.setMinutes(endDate.getMinutes() + 45)
+		return endDate
+	}
+
+	const eventEndDate = calculateEndDate()
+
+	// Check if location is a URL
+	const isUrl = (text?: string): boolean => {
+		if (!text || text.length === 0) {
+			return false
+		}
+		return /^https?:\/\/.+/.test(text.trim())
+	}
+
+	const locationIsUrl = isUrl(event.location)
+
+	// Format date to YYYYMMDDTHHMMSS format for calendar URLs
+	const formatDate = (date: Date): string => {
+		const year = date.getFullYear()
+		const month = String(date.getMonth() + 1).padStart(2, '0')
+		const day = String(date.getDate()).padStart(2, '0')
+		const hours = String(date.getHours()).padStart(2, '0')
+		const minutes = String(date.getMinutes()).padStart(2, '0')
+		const seconds = String(date.getSeconds()).padStart(2, '0')
+		return `${year}${month}${day}T${hours}${minutes}${seconds}`
+	}
+
+	// Format date to ISO format for Outlook
+	const formatDateISO = (date: Date): string => {
+		return `${date.toISOString().replace(/[-:]/g, '').split('.')[0]}Z`
+	}
+
+	// Generate ICS file content
+	const generateICS = (): string => {
+		const startDate = formatDate(eventStartDate)
+		const endDate = formatDate(eventEndDate)
+		const timestamp = formatDate(new Date())
+
+		const icsContent = [
+			'BEGIN:VCALENDAR',
+			'VERSION:2.0',
+			'PRODID:-//Add to Calendar//EN',
+			'CALSCALE:GREGORIAN',
+			'METHOD:PUBLISH',
+			'BEGIN:VEVENT',
+			`UID:${timestamp}@addtocalendar`,
+			`DTSTAMP:${timestamp}`,
+			`DTSTART:${startDate}`,
+			`DTEND:${endDate}`,
+			`SUMMARY:${event.title}`,
+		]
+
+		if (event.description && event.description.length > 0) {
+			// ICS descriptions need special handling of newlines and character limits
+			const description = event.description.replace(/\n/g, '\\n')
+			icsContent.push(`DESCRIPTION:${description}`)
+		}
+
+		if (event.location && event.location.length > 0) {
+			icsContent.push(`LOCATION:${event.location}`)
+			// If location is a URL, also add it as the URL field
+			if (locationIsUrl) {
+				icsContent.push(`URL:${event.location}`)
+			}
+		}
+
+		icsContent.push('STATUS:CONFIRMED', 'SEQUENCE:0', 'END:VEVENT', 'END:VCALENDAR')
+
+		return icsContent.join('\r\n')
+	}
+
+	// Generate Google Calendar URL
+	const googleUrl = computed(() => {
+		const params = new URLSearchParams({
+			action: 'TEMPLATE',
+			text: event.title,
+			dates: `${formatDateISO(eventStartDate)}/${formatDateISO(eventEndDate)}`,
+		})
+
+		if (event.description && event.description.length > 0) {
+			params.append('details', event.description)
+		}
+
+		if (event.location && event.location.length > 0) {
+			params.append('location', event.location)
+		}
+
+		return `https://calendar.google.com/calendar/render?${params.toString()}`
+	})
+
+	// Generate Outlook Web URL
+	const outlookWebUrl = computed(() => {
+		const params = new URLSearchParams({
+			path: '/calendar/action/compose',
+			rru: 'addevent',
+			subject: event.title,
+			startdt: eventStartDate.toISOString(),
+			enddt: eventEndDate.toISOString(),
+		})
+
+		if (event.description && event.description.length > 0) {
+			params.append('body', event.description)
+		}
+
+		if (event.location && event.location.length > 0) {
+			params.append('location', event.location)
+		}
+
+		return `https://outlook.live.com/calendar/0/deeplink/compose?${params.toString()}`
+	})
+
+	// Generate Outlook Office 365 URL
+	const outlookUrl = computed(() => {
+		const params = new URLSearchParams({
+			path: '/calendar/action/compose',
+			rru: 'addevent',
+			subject: event.title,
+			startdt: eventStartDate.toISOString(),
+			enddt: eventEndDate.toISOString(),
+		})
+
+		if (event.description && event.description.length > 0) {
+			params.append('body', event.description)
+		}
+
+		if (event.location && event.location.length > 0) {
+			params.append('location', event.location)
+		}
+
+		return `https://outlook.office.com/calendar/0/deeplink/compose?${params.toString()}`
+	})
+
+	// Generate Yahoo Calendar URL
+	const yahooUrl = computed(() => {
+		const duration = Math.floor((eventEndDate.getTime() - eventStartDate.getTime()) / 1000 / 60) // Duration in minutes
+
+		const params = new URLSearchParams({
+			v: '60',
+			title: event.title,
+			st: formatDateISO(eventStartDate),
+			dur: duration.toString(),
+		})
+
+		if (event.description && event.description.length > 0) {
+			params.append('desc', event.description)
+		}
+
+		if (event.location && event.location.length > 0) {
+			params.append('in_loc', event.location)
+		}
+
+		return `https://calendar.yahoo.com/?${params.toString()}`
+	})
+
+	// Get calendar URL or file based on provider
+	const getCalendarUrl = (provider: CalendarProvider): string => {
+		switch (provider) {
+			case 'google':
+				return googleUrl.value
+			case 'apple':
+			case 'ics':
+				// For Apple and ICS, we'll trigger a download
+				return ''
+			case 'outlook':
+				return outlookUrl.value
+			case 'outlookcom':
+				return outlookWebUrl.value
+			case 'yahoo':
+				return yahooUrl.value
+			default:
+				return ''
+		}
+	}
+
+	// Download ICS file
+	const downloadICS = (filename = 'event.ics') => {
+		const icsContent = generateICS()
+		const blob = new Blob([icsContent], { type: 'text/calendar;charset=utf-8' })
+		const link = document.createElement('a')
+		link.href = URL.createObjectURL(blob)
+		link.download = filename
+		document.body.appendChild(link)
+		link.click()
+		document.body.removeChild(link)
+		URL.revokeObjectURL(link.href)
+	}
+
+	// Add to calendar action
+	const addToCalendar = (provider: CalendarProvider) => {
+		if (provider === 'apple' || provider === 'ics') {
+			downloadICS()
+		} else {
+			const url = getCalendarUrl(provider)
+			if (url) {
+				window.open(url, '_blank', 'noopener,noreferrer')
+			}
+		}
+	}
+
+	return {
+		googleUrl,
+		outlookUrl,
+		outlookWebUrl,
+		yahooUrl,
+		generateICS,
+		downloadICS,
+		getCalendarUrl,
+		addToCalendar,
+	}
+}