@bagelink/vue 0.0.1216 → 0.0.1220

package/src/components/Calendar/language/keys.ts

@@ -0,0 +1,90 @@
+export const languageKeys = {
+  /** The following three keys, describe the calendar modes */
+  week: {
+    "it-IT": "Settimana",
+    "en-US": "Week",
+    "de-DE": "Woche",
+    "sv-SE": "Vecka",
+    "zh-CN": "周",
+    "pt-BR": "Semana",
+    "fr-FR": "Semaine",
+    "th-TH": "สัปดาห์",
+    "nl-NL": "Week",
+    "ru-RU": "Неделя",
+    "ar-YE": "إسبوع",
+    "es-ES": "Semana",
+    "ja-JP": "週",
+    "pl-PL": "Tydzień", 
+    "hu-HU": "Hét",
+  },
+  month: {
+    "it-IT": "Mese",
+    "en-US": "Month",
+    "de-DE": "Monat",
+    "sv-SE": "Månad",
+    "zh-CN": "月",
+    "pt-BR": "Mês",
+    "fr-FR": "Mois",
+    "th-TH": "เดือน",
+    "nl-NL": "Maand",
+    "ru-RU": "Месяц",
+    "ar-YE": "شهر",
+    "es-ES": "Mes",
+    "ja-JP": "月",
+    "pl-PL": "Miesiąc", 
+    "hu-HU": "Hónap",
+  },
+  day: {
+    "it-IT": "Giorno",
+    "en-US": "Day",
+    "de-DE": "Tag",
+    "sv-SE": "Dag",
+    "zh-CN": "日",
+    "pt-BR": "Dia",
+    "fr-FR": "Jour",
+    "th-TH": "วัน",
+    "nl-NL": "Dag",
+    "ru-RU": "День",
+    "ar-YE": "يوم",
+    "es-ES": "Día",
+    "ja-JP": "日",
+    "pl-PL": "Dzień",
+    "hu-HU": "Nap",
+  },
+
+  /** Other keys */
+  moreEvents: {
+    "it-IT": "+ altri eventi",
+    "en-US": "+ more events",
+    "de-DE": "+ weitere Ereignisse",
+    "sv-SE": "+ fler event",
+    "zh-CN": "列出其他结果",
+    "pt-BR": "+ mais eventos",
+    "fr-FR": "+ d'autres événements",
+    "th-TH": "+ เหตุการณ์เพิ่มเติม",
+    "nl-NL": "meer evenementen",
+    "ru-RU": "+ ещё события",
+    "ar-YE": "+ المزيد من الأحداث",
+    "es-ES": "más eventos",
+    "ja-JP": "その他イベント",
+    "pl-PL": "+ więcej wydarzeń",
+    "hu-HU": "További események",
+  },
+  noEvent: {
+    'it-IT': 'Nessun evento',
+    'en-US': 'No events',
+    'de-DE': 'Keine Ereignisse',
+    'sv-SE': 'Inga event',
+    'zh-CN': '沒有活動',
+    'pt-BR': 'Sem eventos',
+    'fr-FR': 'Aucun Evènement',
+    'th-TH': 'ไม่มีกิจกรรม',
+    'nl-NL': 'Geen evenementen',
+    'ru-RU': 'Нет событий',
+    'ar-YE': 'لا أحداث',
+    'es-ES': 'No hay eventos',
+    "ja-JP": "イベントなし",
+    "pl-PL": "Brak wydarzeń",
+    "hu-HU": "Nincs esemény",
+  },
+};

package/src/components/Calendar/models/Event.ts

@@ -0,0 +1,112 @@
+import type {EventColor, EventID, EventInterface} from "../typings/interfaces/event.interface";
+import type {modeType} from "../typings/types";
+
+export class EventImpl implements EventInterface {
+  title?: string;
+  description?: string;
+  topic?: string;
+  location?: string;
+  with?: string;
+  colorScheme?: string;
+  color?: EventColor;
+  isEditable?: boolean;
+  disableDnD?: modeType[];
+  disableResize?: modeType[];
+  isCustom?: boolean | modeType[];
+
+  // Properties that should not be set from outside Qalendar
+  nOfPreviousConcurrentEvents?: number;
+
+  constructor(
+    public time: { start: string; end: string },
+    public id: EventID,
+  ) {}
+}
+
+export class EventBuilder {
+  private eventImpl: EventImpl;
+
+  constructor(
+    public time: { start: string; end: string },
+    id?: EventID,
+  ) {
+    if (!id) id = Math.random().toString(36).substring(2, 9);
+    this.eventImpl = new EventImpl(time, id);
+  }
+
+  build() {
+    return this.eventImpl;
+  }
+
+  withTitle(title: string) {
+    this.eventImpl.title = title;
+
+    return this;
+  }
+
+  withColor(color: EventColor) {
+    this.eventImpl.color = color;
+
+    return this;
+  }
+
+  withColorScheme(colorScheme: string) {
+    this.eventImpl.colorScheme = colorScheme;
+
+    return this;
+  }
+
+  withDescription(description: string) {
+    this.eventImpl.description = description;
+
+    return this;
+  }
+
+  withTopic(topic: string) {
+    this.eventImpl.topic = topic;
+
+    return this;
+  }
+
+  withLocation(location: string) {
+    this.eventImpl.location = location;
+
+    return this;
+  }
+
+  withWith($with: string) {
+    this.eventImpl.with = $with;
+
+    return this;
+  }
+
+  withNOfPreviousConcurrentEvents(nOfPreviousConcurrentEvents: number) {
+    this.eventImpl.nOfPreviousConcurrentEvents = nOfPreviousConcurrentEvents;
+
+    return this;
+  }
+
+  withIsEditable(isEditable: boolean) {
+    this.eventImpl.isEditable = isEditable;
+
+    return this;
+  }
+
+  withIsCustom(isCustom: boolean | modeType[]) {
+    this.eventImpl.isCustom = isCustom;
+
+    return this;
+  }
+
+  withDisableDnD(disableDnD: modeType[]) {
+    this.eventImpl.disableDnD = disableDnD;
+
+    return this;
+  }
+
+  withDisableResize(disableResize: modeType[]) {
+    this.eventImpl.disableResize = disableResize;
+
+    return this;
+  }
+}

package/src/components/Calendar/styles/_mixins.css

@@ -0,0 +1,21 @@
+@media (min-width: 37.5rem) {
+	.screen-size-m {
+		/* Content goes here */
+	}
+}
+
+@media (hover: hover) {
+	.hover {
+		/* Content goes here */
+	}
+}
+
+@media (prefers-color-scheme: dark) {
+	.dark-mode {
+		/* Content goes here */
+	}
+}
+
+[style*='color-scheme: dark'] {
+	/* Content goes here */
+}

package/src/components/Calendar/styles/_variables.css

@@ -0,0 +1,51 @@
+:root {
+	/** Color */
+	--qalendar-blue: rgb(38 132 255);
+	--qalendar-blue-transparent: rgba(38 132 255 / 90%);
+	--qalendar-gray-quite-dark: rgb(110 110 110);
+	--qalendar-gray: rgb(180 180 180);
+	--qalendar-green: rgb(51 182 121);
+	--qalendar-theme-color: var(--qalendar-blue);
+	--qalendar-light-gray: rgba(240 236 236 / 76%);
+	--qalendar-option-hover: var(--qalendar-light-gray);
+
+	--qalendar-dark-mode-elevated-surface: #383838;
+	--qalendar-dark-mode-lightly-elevated-surface: #2e2e2e;
+	--qalendar-dark-mode-text-primary: rgba(255 255 255 1);
+	--qalendar-dark-mode-text-secondary: rgba(255 255 255 0.7);
+	--qalendar-dark-mode-text-hint: rgba(255 255 255 0.5);
+	--qalendar-dark-mode-line-color: var(--qalendar-gray);
+
+	/** Borders */
+	--qalendar-border-gray-thin: 1px solid rgb(224 224 224);
+	--qalendar-border-dashed-gray-thin: 1px dashed rgb(224 224 224);
+	--qalendar-border-blue-thin: 1px solid var(--qalendar-theme-color);
+	--qalendar-border-radius: 8px;
+
+	/** Spacing */
+	--qalendar-spacing: 10px;
+	--qalendar-spacing-half: 5px;
+	--qalendar-spacing-double: 20px;
+
+	/** Miscellaneous */
+	--qalendar-box-shadow: 0 4px 4px rgba(0 0 0 / 6%), 0 1px 4px rgba(0 0 0 / 18%);
+	--qalendar-text-transition: color 0.2s ease;
+	--qalendar-week-padding-left: 56px;
+
+	/** Font */
+	--qalendar-font-3xs: 0.625rem;
+	--qalendar-font-2xs: 0.688rem;
+	--qalendar-font-xs: 0.75rem;
+	--qalendar-font-s: 0.875rem;
+	--qalendar-font-m: 1rem;
+	--qalendar-font-l: 1.25rem;
+	--qalendar-font-xl: 1.5rem;
+}
+
+@media (min-width: 62rem) {
+	.calendar-root {
+		--qalendar-spacing: 20px;
+		--qalendar-spacing-half: 10px;
+		--qalendar-spacing-double: 40px;
+	}
+}

package/src/components/Calendar/typings/config.interface.ts

@@ -0,0 +1,87 @@
+import type { WEEK_START_DAY } from '../helpers/Time'
+import type { modeType } from './types'
+
+export enum DAY_TIME_POINT {
+	MIDNIGHT = 0,
+	ONE_AM = 100,
+	TWO_AM = 200,
+	THREE_AM = 300,
+	FOUR_AM = 400,
+	FIVE_AM = 500,
+	SIX_AM = 600,
+	SEVEN_AM = 700,
+	EIGHT_AM = 800,
+	NINE_AM = 900,
+	TEN_AM = 1000,
+	ELEVEN_AM = 1100,
+	TWELVE_PM = 1200,
+	ONE_PM = 1300,
+	TWO_PM = 1400,
+	THREE_PM = 1500,
+	FOUR_PM = 1600,
+	FIVE_PM = 1700,
+	SIX_PM = 1800,
+	SEVEN_PM = 1900,
+	EIGHT_PM = 2000,
+	NINE_PM = 2100,
+	TEN_PM = 2200,
+	ELEVEN_PM = 2300,
+	TWELVE_AM = 2400,
+}
+
+export interface ColorScheme { color: string, backgroundColor: string }
+
+export interface ColorSchemes {
+	[key: string]: ColorScheme
+}
+
+export type intervalLengthType = 15 | 30 | 60
+
+// Lets the implementer define:
+// a) length in minutes, of the day intervals
+// b) the height of each individual interval
+// c) whether the intervals should appear graphically as clickable elements or not
+export interface DayIntervalsType {
+	length?: intervalLengthType
+	height?: number
+	displayClickableInterval?: boolean
+	intervalStyles?: { [key: string]: any }
+}
+
+export interface ConfigInterface {
+	locale?: string
+	week?: {
+		nDays?: 5 | 7
+		startsOn?: WEEK_START_DAY
+		scrollToHour?: number
+	}
+	style?: {
+		fontFamily?: string
+		colorSchemes?: ColorSchemes
+	}
+	defaultMode?: modeType
+	disableModes?: ('week' | 'month' | string)[]
+	isSilent?: boolean
+	dayIntervals?: DayIntervalsType
+	eventDialog?: {
+		isDisabled?: boolean
+		isCustom?: boolean
+		closeOnClickOutside?: boolean
+	}
+	dayBoundaries?: {
+		start: number // integer between 0 and 24
+		end: number // integer between 0 and 24
+	}
+	showCurrentTime?: boolean
+
+	month?: {
+		// Hide the days of the next month and previous month in calendar to enhance the appearance
+		showTrailingAndLeadingDates?: boolean
+		showEventsOnMobileView?: boolean
+	}
+
+	// The isSmall property is an internal API attached to the config object, and usage of this
+	// from an implementer is strongly discouraged
+	// TODO: create internal config interface and replace all usages in components with that
+	isSmall?: boolean
+}

package/src/components/Calendar/typings/interfaces/day.interface.ts

@@ -0,0 +1,10 @@
+import type { EventInterface } from './event.interface'
+import type { DayWithFullDayEvents } from './full-day-events-week.type'
+
+export interface DayInterface {
+	isTrailingOrLeadingDate?: boolean
+	dayName: string
+	dateTimeString: string
+	events: EventInterface[]
+	fullDayEvents?: DayWithFullDayEvents
+}

package/src/components/Calendar/typings/interfaces/event.interface.ts

@@ -0,0 +1,32 @@
+import type { modeType } from '../types'
+
+export type EventID = string | number
+
+export type EVENT_TYPE = 'SINGLE_DAY_TIMED' | 'SINGLE_DAY_FULL_DAY' | 'SINGLE_HYBRID_DAY_TIMED' | 'MULTI_DAY_TIMED' | 'MULTI_DAY_FULL_DAY'
+
+export type EventColor = 'blue' | 'yellow' | 'green' | 'red' | 'purple'
+
+export interface EventInterface {
+	id: EventID
+	title?: string
+	time: { start: string, end: string } // YYYY-MM-DD hh:mm
+	description?: string
+	topic?: string
+	location?: string // Name of the event location
+	with?: string // Names of people
+	colorScheme?: string
+	color?: EventColor // Says 'color', but represents CSS-Property background-color
+	isEditable?: boolean // If true, the event has delete- and edit icons in Event-Flyout. Can also be dragged and dropped.
+	disableDnD?: modeType[] // Disable Drag and Drop for this event, in the modes specified
+	disableResize?: modeType[] // Disable Resize for this event, in the modes specified
+	isCustom?: boolean | modeType[] // If true, the event expects to be displayed using the event slot. It can also be specified as an array, of all modes, where the event should be displayed using the event slot.
+
+	// These are properties that should never be fed into the Calendar
+	// Instead, they are assigned to events, in order to for example position/style them correctly
+	zIndex?: number
+	nOfPreviousConcurrentEvents?: number
+	totalConcurrentEvents?: number
+	timeJS?: { start: Date, end: Date }
+	originalEvent?: Omit<EventInterface, 'originalEvent'>
+	eventType?: EVENT_TYPE
+}

package/src/components/Calendar/typings/interfaces/full-day-events-week.type.ts

@@ -0,0 +1,8 @@
+import type { EventInterface } from './event.interface'
+
+export interface DayWithFullDayEvents {
+	date: Date
+	[key: string]: EventInterface | any | string
+}
+
+export type FullDayEventsWeek = DayWithFullDayEvents[]

package/src/components/Calendar/typings/interfaces/period.interface.ts

@@ -0,0 +1,5 @@
+export interface PeriodInterface {
+	start: Date
+	end: Date
+	selectedDate: Date
+}

package/src/components/Calendar/typings/interfaces/time-modes.ts

@@ -0,0 +1,9 @@
+export enum DAY_MODE {
+  // a regular day, starting and ending at 0:00 and 24:00
+  REGULAR = 'regular',
+  // a day with custom day boundaries, but within an actual calendar day
+  SHORTENED = 'shortened',
+  // a day with custom day boundaries, but spanning two actual calendar days,
+  // for example, a day that starts at 06:00 and ends at 04:00 the day after
+  FLEXIBLE = 'flexible',
+}

package/src/components/Calendar/typings/types.ts

@@ -0,0 +1,23 @@
+export interface DOMRect {
+  bottom: number;
+  height: number;
+  left: number;
+  right: number;
+  top: number;
+  width: number;
+  x: number;
+  y: number;
+}
+
+export type modeType = "day" | "week" | "month" | "agenda";
+
+export enum DRAG_N_RESIZE_DIRECTION {
+  BACKWARDS = "backwards",
+  FORWARDS = "forwards",
+}
+
+export type DayInfo = {
+  daysTotalN: number;
+  thisDayIndex: number,
+  dateTimeString: string
+}

package/src/components/DataTable/DataTable.vue

@@ -260,6 +260,10 @@ tbody tr.selected:hover {
 	margin-top: -14px;
 	margin-bottom: -14px;
 	border-radius: 5px;
+	object-fit: cover;
+}
+.col:has(img) {
+	padding-inline-end: 0.5rem;
 }
 
 .list-arrows.sorted .desc {

package/src/components/Draggable/useDraggable.ts

@@ -35,6 +35,26 @@ export function useDraggable(options: DraggableOptions = {}) {
 	const dropIndicator = ref<HTMLElement | null>(null)
 	const dropTarget = ref<DraggableElement | null>(null)
 
+	// Only run in browser environment
+	const isBrowser = typeof window !== 'undefined'
+
+	// Move style injection into setup
+	if (isBrowser) {
+		const existingStyle = document.getElementById('draggable-style')
+		if (!existingStyle) {
+			const style = document.createElement('style')
+			style.id = 'draggable-style'
+			style.textContent = `
+				.draggable-ghost {
+					opacity: 0.5;
+					box-shadow: 0 2px 10px rgba(0,0,0,0.1);
+					transition: transform 0.1s;
+				}
+			`
+			document.head.appendChild(style)
+		}
+	}
+
 	const defaultOptions: DraggableOptions = {
 		animation: 150,
 		mode: 'line',
@@ -59,6 +79,7 @@ export function useDraggable(options: DraggableOptions = {}) {
 	const POSITION_CACHE = new Map<number, { top: number, bottom: number }>()
 
 	function createGhost(el: DraggableElement) {
+		if (!isBrowser) return null
 		const ghost = el.cloneNode(true) as HTMLElement
 		const rect = el.getBoundingClientRect()
 		ghost.style.position = 'fixed'
@@ -78,6 +99,7 @@ export function useDraggable(options: DraggableOptions = {}) {
 	}
 
 	function createDropIndicator(el: DraggableElement) {
+		if (!isBrowser) return null
 		const line = document.createElement('div')
 		line.classList.add(defaultOptions.dropIndicatorClass!)
 		line.style.position = 'fixed'
@@ -212,6 +234,8 @@ export function useDraggable(options: DraggableOptions = {}) {
 	}
 
 	function cleanup() {
+		if (!isBrowser) return
+
 		document.removeEventListener('mousemove', onDragMove)
 		document.removeEventListener('mouseup', onDragEnd)
 		document.removeEventListener('keydown', onKeyDown)
@@ -252,9 +276,12 @@ export function useDraggable(options: DraggableOptions = {}) {
 
 		isDragging.value = false
 		dropTarget.value = null
-		document.body.style.userSelect = ''
-		document.body.style.webkitUserSelect = ''
-		document.body.style.cursor = ''
+
+		if (isBrowser) {
+			document.body.style.userSelect = ''
+			document.body.style.webkitUserSelect = ''
+			document.body.style.cursor = ''
+		}
 
 		if (scrollRAF) {
 			cancelAnimationFrame(scrollRAF)
@@ -273,7 +300,7 @@ export function useDraggable(options: DraggableOptions = {}) {
 	}
 
 	function onDragStart(e: MouseEvent) {
-		if (defaultOptions.disabled) return
+		if (!isBrowser || defaultOptions.disabled) return
 		if (e.button !== 0) return // Only left mouse button
 		if (e.ctrlKey || e.metaKey || e.shiftKey || e.altKey) return
 
@@ -318,16 +345,16 @@ export function useDraggable(options: DraggableOptions = {}) {
 		defaultOptions.onStart?.(e)
 
 		// Prevent text selection during drag
-		document.body.style.userSelect = 'none'
-		document.body.style.webkitUserSelect = 'none'
-
-		// Add grabbing cursor to body during drag
-		document.body.style.cursor = 'grabbing'
-
-		window.addEventListener('blur', cleanup)
-		document.addEventListener('mousemove', onDragMove)
-		document.addEventListener('mouseup', onDragEnd)
-		document.addEventListener('keydown', onKeyDown)
+		if (isBrowser) {
+			document.body.style.userSelect = 'none'
+			document.body.style.webkitUserSelect = 'none'
+			document.body.style.cursor = 'grabbing'
+
+			window.addEventListener('blur', cleanup)
+			document.addEventListener('mousemove', onDragMove)
+			document.addEventListener('mouseup', onDragEnd)
+			document.addEventListener('keydown', onKeyDown)
+		}
 	}
 
 	function findScrollParent(element: Element): Element {
@@ -472,7 +499,7 @@ export function useDraggable(options: DraggableOptions = {}) {
 	}
 
 	function onTouchStart(e: TouchEvent) {
-		if (defaultOptions.disabled || !e.target) return
+		if (!isBrowser || defaultOptions.disabled || !e.target) return
 
 		const touch = e.touches[0]
 		if (!touch) return
@@ -515,17 +542,17 @@ export function useDraggable(options: DraggableOptions = {}) {
 
 		defaultOptions.onStart?.(e as unknown as MouseEvent)
 
-		// Prevent text selection during drag
-		document.body.style.userSelect = 'none'
-		document.body.style.webkitUserSelect = 'none'
+		if (isBrowser) {
+			// Prevent text selection during drag
+			document.body.style.userSelect = 'none'
+			document.body.style.webkitUserSelect = 'none'
+			document.body.style.cursor = 'grabbing'
 
-		// Add grabbing cursor to body during drag
-		document.body.style.cursor = 'grabbing'
-
-		window.addEventListener('blur', cleanup)
-		document.addEventListener('touchmove', onTouchMove, { passive: false })
-		document.addEventListener('touchend', onTouchEnd)
-		document.addEventListener('touchcancel', onTouchEnd)
+			window.addEventListener('blur', cleanup)
+			document.addEventListener('touchmove', onTouchMove, { passive: false })
+			document.addEventListener('touchend', onTouchEnd)
+			document.addEventListener('touchcancel', onTouchEnd)
+		}
 	}
 
 	function onTouchMove(e: TouchEvent) {
@@ -560,6 +587,7 @@ export function useDraggable(options: DraggableOptions = {}) {
 	}
 
 	function initDraggableContainer(container: HTMLElement) {
+		if (!isBrowser) return
 		cleanupFn?.()
 
 		// Reset state
@@ -618,15 +646,3 @@ export function useDraggable(options: DraggableOptions = {}) {
 		initDraggableContainer
 	}
 }
-
-// Simplified default styles
-const style = document.createElement('style')
-style.textContent = `
-  .draggable-ghost {
-    opacity: 0.5;
-    box-shadow: 0 2px 10px rgba(0,0,0,0.1);
-    transition: transform 0.1s;
-
-  }
-`
-document.head.appendChild(style)