@bagelink/vue 1.4.111 → 1.4.118

package/src/components/ImportData.vue

@@ -126,7 +126,7 @@ const relatedDefaultValues = reactive<Record<string, Record<string, any>>>({})
 const relatedTransformations = reactive<Record<string, Record<string, Transformation[]>>>({})
 
 const formData = ref<any>({})
-const { renderField } = useSchemaField<any, any>({
+const { renderField } = useSchemaField<any>({
 	mode: 'form',
 	getFormData: () => formData.value,
 	onUpdateModelValue: (field: Field<any>, value: any) => {
@@ -1305,13 +1305,10 @@ function getRelatedFieldWithDefaults(parentId: string, field: any) {
 	<Card class="upload-data-container h-100p grid overflow-hidden list-wrap ">
 		<h2 class="line-height-1 m-0 pb-2 txt-center" v-text="props.title || 'Upload and Map Data'" />
 		<div v-if="!file" class="h-100p flex column justify-content-center">
-			<DragOver
-				accept=".csv,.xls,.xlsx"
-				class="max-h300px w-500px"
-				browse
-				@addFiles="handleFilesUploaded"
-			>
-				<Card class="flex flex-column items-center justify-center outline-dashed outline-3 bg-input hover h-100p justify-content-center txt-center">
+			<DragOver accept=".csv,.xls,.xlsx" class="max-h300px w-500px" browse @addFiles="handleFilesUploaded">
+				<Card
+					class="flex flex-column items-center justify-center outline-dashed outline-3 bg-input hover h-100p justify-content-center txt-center"
+				>
 					<Icon name="upload" size="5" />
 					<p>Drag and drop an Excel or CSV file here</p>
 					<u>or click to select a file</u>
@@ -1332,7 +1329,10 @@ function getRelatedFieldWithDefaults(parentId: string, field: any) {
 					<Icon icon="draft" size="1.5" weight="300" />
 					<p v-text="file.name" />
 				</Btn>
-				<SelectInput v-if="sheetNames.length > 1" v-model="selectedSheet" :options="sheetNames" label="Select Sheet" />
+				<SelectInput
+					v-if="sheetNames.length > 1" v-model="selectedSheet" :options="sheetNames"
+					label="Select Sheet"
+				/>
 				<CheckInput
 					v-model="hasHeaders" label="Mark this if file has a header row" class="m-0"
 					style="--bgl-accent-color: var(--bgl-black); --bgl-primary: var(--bgl-black);"
@@ -1340,7 +1340,8 @@ function getRelatedFieldWithDefaults(parentId: string, field: any) {
 			</div>
 			<div v-if="file && !isLoading && fileHeaders.length > 0">
 				<p class="label pb-1 border-bottom mb-1">
-					Match each required field to a column from your file, set default values, or configure transformations
+					Match each required field to a column from your file, set default values, or configure
+					transformations
 				</p>
 
 				<div class="mapping-table">
@@ -1352,7 +1353,11 @@ function getRelatedFieldWithDefaults(parentId: string, field: any) {
 						<p>Actions</p>
 					</div>
 
-					<div v-for="field in schemaFields" :key="field.id" class="grid grid-wrap-5 gap-1  m_gap-025 m_pb-1-5" :class="{ 'array-field-row': field.isArrayField || field.$el === 'array' }">
+					<div
+						v-for="field in schemaFields" :key="field.id"
+						class="grid grid-wrap-5 gap-1  m_gap-025 m_pb-1-5"
+						:class="{ 'array-field-row': field.isArrayField || field.$el === 'array' }"
+					>
 						<div>
 							<div class="field-label">
 								<p class="grid-span-2 input-size line-height-1 inline-block">
@@ -1373,12 +1378,8 @@ function getRelatedFieldWithDefaults(parentId: string, field: any) {
 						</div>
 						<div class="fileColSelect">
 							<SelectInput
-								v-model="fieldMapping[field.id]"
-								icon="table_chart"
-								:options="fileHeaders"
-								searchable
-								:required="isFieldRequired(field)"
-								:disabled="field.disabled"
+								v-model="fieldMapping[field.id]" icon="table_chart" :options="fileHeaders"
+								searchable :required="isFieldRequired(field)" :disabled="field.disabled"
 								@change="handleSelectChange($event, field.id)"
 							/>
 						</div>
@@ -1386,28 +1387,25 @@ function getRelatedFieldWithDefaults(parentId: string, field: any) {
 							<!-- Default Value Input -->
 							<div class="default-value-container hideLabel">
 								{{ initDefaultValue(field.id) }}
-								<component
-									:is="renderField(getFieldWithDefaults(field))"
-								/>
+								<component :is="renderField(getFieldWithDefaults(field))" />
 							</div>
 						</div>
 						<div>
 							<SelectInput
-								v-model="fieldDataTypes[field.id]"
-								:options="dataTypeOptions"
+								v-model="fieldDataTypes[field.id]" :options="dataTypeOptions"
 								:disabled="!fieldMapping[field.id] && !defaultValues[field.id]"
 							/>
 						</div>
 						<div>
 							<div class="flex gap-05 my-05">
 								<Btn
-									v-tooltip="'Transform'"
-									thin
-									:disabled="field.disabled"
-									icon="transform"
+									v-tooltip="'Transform'" thin :disabled="field.disabled" icon="transform"
 									@click="openTransformDialog(field)"
 								/>
-								<Btn v-if="field.$el === 'array'" v-tooltip="'Related File'" thin icon="attach_file" :disabled="field.disabled" @click="openRelatedDialog(field)" />
+								<Btn
+									v-if="field.$el === 'array'" v-tooltip="'Related File'" thin icon="attach_file"
+									:disabled="field.disabled" @click="openRelatedDialog(field)"
+								/>
 							</div>
 						</div>
 					</div>
@@ -1429,7 +1427,10 @@ function getRelatedFieldWithDefaults(parentId: string, field: any) {
 			<div v-if="selectedTransformField">
 				<div class="flex space-between gap-1 mb-1 border-bottom pb-05 m_flex-wrap">
 					<p>Create transformations for <strong>{{ selectedTransformField.label }}</strong></p>
-					<Btn icon="auto_awesome" thin value="Autodetect" @click="autoPopulateTransformations(selectedTransformField.id)" />
+					<Btn
+						icon="auto_awesome" thin value="Autodetect"
+						@click="autoPopulateTransformations(selectedTransformField.id)"
+					/>
 				</div>
 
 				<div>
@@ -1443,7 +1444,10 @@ function getRelatedFieldWithDefaults(parentId: string, field: any) {
 						<p>Action</p>
 					</div>
 					<div>
-						<div v-for="(transform, index) in transformations[selectedTransformField.id] || []" :key="index" class="grid grid-wrap-7 gap-1 align-items-center m_gap-025  m_pb-1-5">
+						<div
+							v-for="(transform, index) in transformations[selectedTransformField.id] || []" :key="index"
+							class="grid grid-wrap-7 gap-1 align-items-center m_gap-025  m_pb-1-5"
+						>
 							<p class="grid-span-2 input-size line-height-1">
 								{{ transform.sourceValue }}
 							</p>
@@ -1451,11 +1455,7 @@ function getRelatedFieldWithDefaults(parentId: string, field: any) {
 								{{ transform.targetValue }}
 							</p>
 							<Btn
-								v-tooltip="'Remove'"
-								class="mb-05"
-								thin
-								icon="delete"
-								color="red"
+								v-tooltip="'Remove'" class="mb-05" thin icon="delete" color="red"
 								@click="removeTransformation(selectedTransformField.id, index)"
 							/>
 						</div>
@@ -1463,29 +1463,27 @@ function getRelatedFieldWithDefaults(parentId: string, field: any) {
 							<div class="grid-span-2">
 								<SelectInput
 									v-if="fieldMapping[selectedTransformField.id]"
-									v-model="selectedSourceValue"
-									searchable
-									:options="sourceValueOptions"
+									v-model="selectedSourceValue" searchable :options="sourceValueOptions"
 									placeholder="Select source value"
 								/>
-								<TextInput v-else v-model="selectedSourceValue" type="text" placeholder="Source value" />
+								<TextInput
+									v-else v-model="selectedSourceValue" type="text"
+									placeholder="Source value"
+								/>
 							</div>
 							<div class="grid-span-4">
 								<SelectInput
 									v-if="selectedTransformField.options && selectedTransformField.options.length > 0"
-									v-model="selectedTargetValue"
-									searchable
-									:options="selectedTransformField.options"
+									v-model="selectedTargetValue" searchable :options="selectedTransformField.options"
 									placeholder="Select target value"
 								/>
-								<TextInput v-else v-model="selectedTargetValue" type="text" placeholder="Target value" />
+								<TextInput
+									v-else v-model="selectedTargetValue" type="text"
+									placeholder="Target value"
+								/>
 							</div>
 							<Btn
-								v-tooltip="'Add'"
-								class="mb-05"
-								thin
-								icon="add"
-								color="primary"
+								v-tooltip="'Add'" class="mb-05" thin icon="add" color="primary"
 								@click="addTransformation(selectedTransformField.id)"
 							/>
 						</div>
@@ -1505,11 +1503,12 @@ function getRelatedFieldWithDefaults(parentId: string, field: any) {
 
 				<div v-if="!relatedFiles[selectedRelationField.id]" class="mb-05">
 					<DragOver
-						accept=".csv,.xls,.xlsx"
-						browse
+						accept=".csv,.xls,.xlsx" browse
 						@addFiles="(files) => processRelatedFile(selectedRelationField!.id, files)"
 					>
-						<Card class="flex flex-column items-center justify-center outline-dashed outline-3 hover bg-input">
+						<Card
+							class="flex flex-column items-center justify-center outline-dashed outline-3 hover bg-input"
+						>
 							<Icon name="upload" size="5" />
 							<p>Drag and drop an Excel or CSV file here</p>
 							<p>or click to select a file</p>
@@ -1532,8 +1531,15 @@ function getRelatedFieldWithDefaults(parentId: string, field: any) {
 						<h4>Configure Relationship</h4>
 
 						<div class="flex gap-1">
-							<SelectInput v-model="parentKeyField[selectedRelationField.id]" :options="fileHeaders" label="Source Key Field (from this file)" />
-							<SelectInput v-model="relatedKeyField[selectedRelationField.id]" :options="Object.keys(relatedFileData[selectedRelationField.id][0] || {})" label="Related Key Field (from related file)" />
+							<SelectInput
+								v-model="parentKeyField[selectedRelationField.id]" :options="fileHeaders"
+								label="Source Key Field (from this file)"
+							/>
+							<SelectInput
+								v-model="relatedKeyField[selectedRelationField.id]"
+								:options="Object.keys(relatedFileData[selectedRelationField.id][0] || {})"
+								label="Related Key Field (from related file)"
+							/>
 						</div>
 
 						<h4>Map Related Fields</h4>
@@ -1549,7 +1555,10 @@ function getRelatedFieldWithDefaults(parentId: string, field: any) {
 								</tr>
 							</thead>
 							<tbody>
-								<tr v-for="schemaItem in (selectedRelationField.attrs?.schema || [])" :key="schemaItem.id">
+								<tr
+									v-for="schemaItem in (selectedRelationField.attrs?.schema || [])"
+									:key="schemaItem.id"
+								>
 									<td>{{ schemaItem.label }}</td>
 									<td>
 										<SelectInput
@@ -1577,8 +1586,7 @@ function getRelatedFieldWithDefaults(parentId: string, field: any) {
 									<td>
 										<div class="action-buttons-cell">
 											<Btn
-												thin
-												icon="transform"
+												thin icon="transform"
 												@click="openRelatedTransformDialog(selectedRelationField.id, schemaItem)"
 											>
 												Transform
@@ -1599,9 +1607,7 @@ function getRelatedFieldWithDefaults(parentId: string, field: any) {
 		<Modal v-model:visible="showPreviewModal" title="Data Preview & Edit" width="90vw">
 			<div>
 				<Spreadsheet
-					v-model="previewData"
-					class="popupPreviewSpreadsheet"
-					:column-config="spreadsheetColumns"
+					v-model="previewData" class="popupPreviewSpreadsheet" :column-config="spreadsheetColumns"
 					allow-add-row
 				/>
 			</div>
@@ -1618,16 +1624,15 @@ function getRelatedFieldWithDefaults(parentId: string, field: any) {
 
 		<Modal v-model:visible="showRelatedTransformDialog" title="Configure Related Transformations" width="800">
 			<div v-if="selectedRelatedTransformField">
-				<p>Create transformations for <strong>{{ selectedRelatedTransformField.field.label }}</strong> in {{ selectedRelationField?.label }}</p>
+				<p>
+					Create transformations for <strong>{{ selectedRelatedTransformField.field.label }}</strong> in {{
+						selectedRelationField?.label }}
+				</p>
 
 				<div>
 					<div>
 						<Btn
-							thin
-							icon="auto_awesome"
-							value="Autolink"
-							color="primary"
-							@click="autoPopulateRelatedTransformations(
+							thin icon="auto_awesome" value="Autolink" color="primary" @click="autoPopulateRelatedTransformations(
 								selectedRelatedTransformField.parentId,
 								selectedRelatedTransformField.field.id,
 							)"
@@ -1653,11 +1658,7 @@ function getRelatedFieldWithDefaults(parentId: string, field: any) {
 								<td>{{ transform.targetValue }}</td>
 								<td>
 									<Btn
-										v-tooltip="'Remove'"
-										thin
-										icon="delete"
-										color="red"
-										@click="removeRelatedTransformation(
+										v-tooltip="'Remove'" thin icon="delete" color="red" @click="removeRelatedTransformation(
 											selectedRelatedTransformField.parentId,
 											selectedRelatedTransformField.field.id,
 											index,
@@ -1669,30 +1670,29 @@ function getRelatedFieldWithDefaults(parentId: string, field: any) {
 								<td>
 									<SelectInput
 										v-if="relatedFileMappings[selectedRelatedTransformField.parentId]?.[selectedRelatedTransformField.field.id]"
-										v-model="selectedRelatedSourceValue"
-										searchable
-										:options="relatedSourceValueOptions"
-										placeholder="Select source value"
+										v-model="selectedRelatedSourceValue" searchable
+										:options="relatedSourceValueOptions" placeholder="Select source value"
 									/>
-									<input v-else v-model="selectedRelatedSourceValue" type="text" placeholder="Source value">
+									<input
+										v-else v-model="selectedRelatedSourceValue" type="text"
+										placeholder="Source value"
+									>
 								</td>
 								<td>
 									<SelectInput
 										v-if="selectedRelatedTransformField.field.options && selectedRelatedTransformField.field.options.length > 0"
-										v-model="selectedRelatedTargetValue"
-										searchable
+										v-model="selectedRelatedTargetValue" searchable
 										:options="selectedRelatedTransformField.field.options"
 										placeholder="Select target value"
 									/>
-									<input v-else v-model="selectedRelatedTargetValue" type="text" placeholder="Target value">
+									<input
+										v-else v-model="selectedRelatedTargetValue" type="text"
+										placeholder="Target value"
+									>
 								</td>
 								<td>
 									<Btn
-										v-tooltip="'Add'"
-										thin
-										icon="add"
-										color="primary"
-										@click="addRelatedTransformation(
+										v-tooltip="'Add'" thin icon="add" color="primary" @click="addRelatedTransformation(
 											selectedRelatedTransformField.parentId,
 											selectedRelatedTransformField.field.id,
 										)"
@@ -1712,24 +1712,30 @@ function getRelatedFieldWithDefaults(parentId: string, field: any) {
 </template>
 
 <style>
-.fileColSelect{
+.fileColSelect {
 	--input-bg: var(--bgl-green-light);
 }
-.fileColSelect .bgl_icon-font{
+
+.fileColSelect .bgl_icon-font {
 	color: var(--bgl-green);
 	line-height: 0;
 }
-.hideLabel label, .hideLabel .label{
+
+.hideLabel label,
+.hideLabel .label {
 	font-size: 0 !important;
 }
-.mapping-table .selectinput-btn:disabled{
+
+.mapping-table .selectinput-btn:disabled {
 	background: var(--input-bg) !important;
 	cursor: not-allowed !important;
 }
-.field-label{
+
+.field-label {
 	--pill-height: 20px;
 }
-.popupPreviewSpreadsheet .spreadsheet{
+
+.popupPreviewSpreadsheet .spreadsheet {
 	width: 100%;
 	overflow: auto;
 	height: calc(100vh - 300px);

package/src/components/analytics/PieChart.vue

@@ -1,6 +1,6 @@
 <script setup lang="ts">
-import { computed } from 'vue'
 import { Icon } from '@bagelink/vue'
+import { computed } from 'vue'
 
 interface PieData {
 	label: string
@@ -32,27 +32,26 @@ const colors = computed(() => {
 	const baseColor = props.color
 	const opacities = [1, 0.8, 0.6, 0.4, 0.85, 0.7, 0.5, 0.3, 0.9, 0.75]
 
-	return opacities.map(opacity => {
+	return opacities.map((opacity) => {
 		// Convert hex to rgba with opacity
 		const hex = baseColor.replace('#', '')
-		const r = parseInt(hex.substr(0, 2), 16)
-		const g = parseInt(hex.substr(2, 2), 16)
-		const b = parseInt(hex.substr(4, 2), 16)
+		const r = Number.parseInt(hex.substr(0, 2), 16)
+		const g = Number.parseInt(hex.substr(2, 2), 16)
+		const b = Number.parseInt(hex.substr(4, 2), 16)
 
 		return `rgba(${r}, ${g}, ${b}, ${opacity})`
 	})
 })
 
-// RTL detection
-const isRtl = computed(() => {
-	if (typeof document !== 'undefined') {
-		return document.documentElement.dir === 'rtl' || document.body.dir === 'rtl'
-	}
-	return false
-})
+// // RTL detection
+// const isRtl = computed(() => {
+// 	if (typeof document !== 'undefined') {
+// 		return document.documentElement.dir === 'rtl' || document.body.dir === 'rtl'
+// 	}
+// 	return false
+// })
 
-const totalValue = computed(() =>
-	props.data.reduce((sum, item) => sum + item.value, 0)
+const totalValue = computed(() => props.data.reduce((sum, item) => sum + item.value, 0)
 )
 
 const pieSegments = computed(() => {
@@ -131,36 +130,24 @@ function formatPercentage(percentage: number): string {
 			</div>
 		</div>
 		<div class="chart-container flex space-between gap-1 flex-wrap" :class="{ 'with-legend': showLegend }">
-			<svg
-				:width="size"
-				:height="size"
-				class="chart-svg mx-auto flex-shrink-0"
-			>
+			<svg :width="size" :height="size" class="chart-svg mx-auto flex-shrink-0">
 				<g :transform="`translate(${size / 2}, ${size / 2})`">
 					<path
-						v-for="(segment, index) in pieSegments"
-						:key="index"
-						:d="segment.pathData"
-						:fill="segment.color"
-						class="pie-segment"
-						stroke="white"
-						stroke-width="2"
+						v-for="(segment, index) in pieSegments" :key="index" :d="segment.pathData"
+						:fill="segment.color" class="pie-segment" stroke="white" stroke-width="2"
 					>
-						<title>{{ segment.label }}: {{ formatValue(segment.value) }} ({{ formatPercentage(segment.percentage) }})</title>
+						<title>{{ segment.label }}: {{ formatValue(segment.value) }} ({{
+							formatPercentage(segment.percentage) }})</title>
 					</path>
 				</g>
 			</svg>
 
 			<div v-if="showLegend" class="legend mx-auto display-flex column gap-05 min-w-100px">
 				<div
-					v-for="(segment, index) in pieSegments"
-					:key="index"
+					v-for="(segment, index) in pieSegments" :key="index"
 					class="gap-1 flex align-items-center txt14 justify-content-start"
 				>
-					<div
-						class="legend-color flex-shrink-0 radius-05"
-						:style="{ backgroundColor: segment.color }"
-					/>
+					<div class="legend-color flex-shrink-0 radius-05" :style="{ backgroundColor: segment.color }" />
 					<span v-if="segment.label" class="flex-shrink-1 flex-grow-1">{{ segment.label }}</span>
 					<span class="bold">{{ formatValue(segment.value) }}</span>
 					<span class="opacity-6 txt12">({{ formatPercentage(segment.percentage) }})</span>
@@ -174,6 +161,7 @@ function formatPercentage(percentage: number): string {
 [dir="rtl"] .chart-container.with-legend {
 	flex-direction: row-reverse;
 }
+
 .pie-segment {
 	cursor: pointer;
 	transition: opacity 0.2s ease;
@@ -192,5 +180,4 @@ function formatPercentage(percentage: number): string {
 	width: 12px;
 	height: 12px;
 }
-
 </style>

package/src/components/calendar/Index.vue

@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import type { Component } from 'vue'
 import type { CalendarEvent, CalendarProps, CalendarView, CalendarViewState } from './CalendarTypes'
-import { timeDelta, Btn, ListItem, Dropdown, fmtDate } from '@bagelink/vue'
+import { timeDelta, Btn, ListItem, Dropdown, formatDate } from '@bagelink/vue'
 import { ref, computed, onMounted } from 'vue'
 import CalendarPopover from './CalendarPopover.vue'
 import AgendaView from './views/AgendaView.vue'
@@ -124,44 +124,28 @@ onMounted(() => { emit('ready', state.value) })
 	<div class="calendar">
 		<div class="flex m_block m_pb-1">
 			<h3 class="txt-light my-0">
-				<b>{{ fmtDate(currentDate, { fmt: 'MMMM' }) }}</b>
-				{{ fmtDate(currentDate, { fmt: 'YYYY' }) }}
+				<b>{{ formatDate(currentDate, 'MMMM') }}</b>
+				{{ formatDate(currentDate, 'YYYY') }}
 			</h3>
 			<div class="ms-auto flex gap-025">
 				<Dropdown thin :value="currentView" iconEnd="keyboard_arrow_down" color="gray">
-					<ListItem
-						v-for="(_, key) in views"
-						:key="key"
-						:title="key"
-						@click="handleViewChange(key)"
-					/>
+					<ListItem v-for="(_, key) in views" :key="key" thin :title="key" @click="handleViewChange(key)" />
 				</Dropdown>
 				<Btn icon="calendar" thin color="gray" value="Today" @click="handleDateChange(new Date())" />
 				<Btn
-					icon="chevron_left"
-					color="gray"
-					thin
+					icon="chevron_left" color="gray" thin
 					@click="handleDateChange(timeDelta(currentDate, { [currentView]: -1 }))"
 				/>
 				<Btn
-					icon="chevron_right"
-					color="gray"
-					thin
+					icon="chevron_right" color="gray" thin
 					@click="handleDateChange(timeDelta(currentDate, { [currentView]: 1 }))"
 				/>
 			</div>
 		</div>
 		<component
-			:is="views[currentView]"
-			:events="events"
-			:start-date="currentDate"
-			:week-start="weekStart"
-			@event-click="handleEventClick"
-			@event-create="handleEventCreate"
-			@event-update="handleEventUpdate"
-			@event-delete="handleEventDelete"
-			@date-change="handleDateChange"
-			@open-popover="openPopover"
+			:is="views[currentView]" :events="events" :start-date="currentDate" :week-start="weekStart"
+			@event-click="handleEventClick" @event-create="handleEventCreate" @event-update="handleEventUpdate"
+			@event-delete="handleEventDelete" @date-change="handleDateChange" @open-popover="openPopover"
 		>
 			<template #eventContent="{ event }">
 				<slot name="eventContent" :event="event" />
@@ -170,12 +154,8 @@ onMounted(() => { emit('ready', state.value) })
 
 		<!-- Global Popover -->
 		<CalendarPopover
-			:event="activeEvent"
-			:position="popoverPosition"
-			:show="showPopover"
-			:has-event-content-slot="!!$slots.eventContent"
-			@close="closePopover"
-			@event-click="handleEventClick"
+			:event="activeEvent" :position="popoverPosition" :show="showPopover"
+			:has-event-content-slot="!!$slots.eventContent" @close="closePopover" @event-click="handleEventClick"
 		>
 			<template #eventContent="{ event }">
 				<slot name="eventContent" :event="event" />
@@ -186,9 +166,9 @@ onMounted(() => { emit('ready', state.value) })
 
 <style scoped>
 .calendar {
-  display: flex;
-  flex-direction: column;
-  height: 100%;
-  width: 100%;
+	display: flex;
+	flex-direction: column;
+	height: 100%;
+	width: 100%;
 }
 </style>