@bagelink/vue 1.14.10 → 1.14.15

package/src/components/ImportData.vue

@@ -6,8 +6,8 @@ import {
 	Btn,
 	Card,
 	CheckInput,
+	Dialog,
 	Icon,
-	Modal,
 	Pill,
 	SelectInput,
 	Spreadsheet,
@@ -1425,7 +1425,7 @@ function getRelatedFieldWithDefaults(parentId: string, field: any) {
 				</div>
 			</div>
 		</div>
-		<Modal v-model:visible="showTransformDialog" title="Configure Transformations" width="800">
+		<Dialog :open="showTransformDialog" title="Configure Transformations" width="l" @update:open="showTransformDialog = $event">
 			<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>
@@ -1496,8 +1496,8 @@ function getRelatedFieldWithDefaults(parentId: string, field: any) {
 					<Btn class="ms-auto" value="$t:importData.close" @click="showTransformDialog = false" />
 				</div>
 			</div>
-		</Modal>
-		<Modal v-model:visible="showRelatedDialog" title="Configure Related Data" width="900">
+		</Dialog>
+		<Dialog :open="showRelatedDialog" title="Configure Related Data" width="xl" @update:open="showRelatedDialog = $event">
 			<div v-if="selectedRelationField">
 				<p class="pb-05">
 					Upload a file with related data for {{ selectedRelationField.label }}
@@ -1607,9 +1607,9 @@ function getRelatedFieldWithDefaults(parentId: string, field: any) {
 					<Btn class="ms-auto" value="$t:importData.close" @click="showRelatedDialog = false" />
 				</div>
 			</div>
-		</Modal>
+		</Dialog>
 
-		<Modal v-model:visible="showPreviewModal" title="Data Preview & Edit" width="90vw">
+		<Dialog :open="showPreviewModal" title="Data Preview & Edit" width="full" @update:open="showPreviewModal = $event">
 			<div>
 				<Spreadsheet
 					v-model="previewData" class="popupPreviewSpreadsheet" :column-config="spreadsheetColumns"
@@ -1625,9 +1625,9 @@ function getRelatedFieldWithDefaults(parentId: string, field: any) {
 					<Btn value="$t:importData.importData" @click="processData()" />
 				</div>
 			</div>
-		</Modal>
+		</Dialog>
 
-		<Modal v-model:visible="showRelatedTransformDialog" title="Configure Related Transformations" width="800">
+		<Dialog :open="showRelatedTransformDialog" title="Configure Related Transformations" width="l" @update:open="showRelatedTransformDialog = $event">
 			<div v-if="selectedRelatedTransformField">
 				<p>
 					Create transformations for <strong>{{ selectedRelatedTransformField.field.label }}</strong> in {{
@@ -1713,13 +1713,13 @@ function getRelatedFieldWithDefaults(parentId: string, field: any) {
 					<Btn value="$t:importData.close" @click="showRelatedTransformDialog = false" />
 				</div>
 			</div>
-		</Modal>
+		</Dialog>
 	</Card>
 </template>
 
 <style>
 .fileColSelect {
-	--input-bg: var(--bgl-green-light);
+	--bgl-input-bg: var(--bgl-green-light);
 }
 
 .fileColSelect .bgl_icon-font {
@@ -1733,12 +1733,12 @@ function getRelatedFieldWithDefaults(parentId: string, field: any) {
 }
 
 .mapping-table .selectinput-btn:disabled {
-	background: var(--input-bg) !important;
+	background: var(--bgl-input-bg) !important;
 	cursor: not-allowed !important;
 }
 
 .field-label {
-	--pill-height: 20px;
+	--bgl-pill-height: 20px;
 }
 
 .popupPreviewSpreadsheet .spreadsheet {

package/src/components/JSONSchema.vue

@@ -457,13 +457,13 @@ watch(() => props.modelValue, (newValue) => {
 
 <style>
 .JSONSchema{
-	--input-height: 38px;
+	--bgl-input-height: 38px;
 	--bgl-accent-color: var(--bgl-purple);
 	container-type: inline-size;
 	container-name: json-schema;
 }
 .jsonCheckbox{
-		--input-height: 44px;
+		--bgl-input-height: 44px;
 }
 .jsonFormat {
 	gap: 0.25rem !important;

package/src/components/JsonBuilder.vue

@@ -216,8 +216,8 @@ watch(() => props.modelValue, () => {
 <style scoped>
 .json-builder {
 	/* Add any custom styles here */
-	--input-height: 27px;
-	--input-font-size: 12px;
+	--bgl-input-height: 27px;
+	--bgl-input-font-size: 12px;
 }
 .grid-json-builder-row{
 	grid-template-columns: 2fr 1fr 2fr auto;

package/src/components/ListItem.vue

@@ -139,7 +139,7 @@ button.list-item {
 	left: 0;
 	right: 0;
 	bottom: 0;
-	border-bottom: 1px solid var(--border-color);
+	border-bottom: 1px solid var(--bgl-border-color);
 }
 
 .list-item:last-child::after {

package/src/components/MapEmbed/Index.vue

@@ -120,7 +120,7 @@ onMounted(initializeMap)
 <style>
 .leaflet-map {
   height: 100%;
-  border-radius: var(--input-border-radius);
+  border-radius: var(--bgl-input-border-radius);
   position: relative;
   background: var(--bgl-bg);
   direction: ltr;
@@ -149,27 +149,27 @@ onMounted(initializeMap)
 
 .leaflet-touch .leaflet-control-zoom-in,
 .leaflet-touch .leaflet-control-zoom-out {
-  font-size: var(--input-font-size);
+  font-size: var(--bgl-input-font-size);
 }
 
 .leaflet-bar {
-  border-radius: var(--input-border-radius) !important;
+  border-radius: var(--bgl-input-border-radius) !important;
 }
 
 .leaflet-touch .leaflet-bar a:first-child {
-  border-top-left-radius: calc(var(--input-border-radius) - 2px) !important;
-  border-top-right-radius: calc(var(--input-border-radius) - 2px) !important;
+  border-top-left-radius: calc(var(--bgl-input-border-radius) - 2px) !important;
+  border-top-right-radius: calc(var(--bgl-input-border-radius) - 2px) !important;
 }
 
 .leaflet-touch .leaflet-bar a:last-child {
-  border-bottom-left-radius: calc(var(--input-border-radius) - 2px) !important;
-  border-bottom-right-radius: calc(var(--input-border-radius) - 2px) !important;
+  border-bottom-left-radius: calc(var(--bgl-input-border-radius) - 2px) !important;
+  border-bottom-right-radius: calc(var(--bgl-input-border-radius) - 2px) !important;
 }
 
 .leaflet-bar a {
   background: var(--bgl-box-bg) !important;
   transition: var(--bgl-transition);
-  border-bottom: 1px solid var(--border-color) !important;
+  border-bottom: 1px solid var(--bgl-border-color) !important;
   display: flex;
   justify-content: center;
   align-items: center;

package/src/components/Pill.vue

@@ -1,4 +1,5 @@
 <script setup lang="ts">
+defineOptions({ name: 'BglPill' })
 import type { IconType, ThemeType } from '@bagelink/vue'
 import type { SetupContext } from 'vue'
 import { Btn, Icon } from '@bagelink/vue'
@@ -66,7 +67,7 @@ const computedClasses = computed(() => {
 <template>
 	<div
 		class="bgl_pill"
-		style="height: var(--pill-height);"
+		style="height: var(--bgl-pill-height);"
 		:disabled="disabled"
 		:class="computedClasses"
 	>
@@ -74,14 +75,14 @@ const computedClasses = computed(() => {
 			<div v-if="loading" class="loading absolute inset-0 mx-auto" />
 			<div class="px-025 flex gap-025 justify-content-center" :class="{ 'opacity-0': loading }">
 				<Btn v-if="btn" class="bgl_pill-btn -ms-025" icon-size="0.8" round v-bind="btn" />
-				<Icon v-if="icon" class="line-height-0" :icon="icon" style="font-size: var(--pill-font-size)" />
+				<Icon v-if="icon" class="line-height-0" :icon="icon" style="font-size: var(--bgl-pill-font-size)" />
 				<slot :class="{ uppercase }" />
 				<template v-if="!slots.default">
 					<p class="pillText inline" :class="{ uppercase }">
 						{{ slots.default ? slots.default : value || modelValue }}
 					</p>
 				</template>
-				<Icon v-if="iconEnd" class="line-height-0" :icon="iconEnd" style="font-size: var(--pill-font-size)" />
+				<Icon v-if="iconEnd" class="line-height-0" :icon="iconEnd" style="font-size: var(--bgl-pill-font-size)" />
 				<Btn v-if="btnEnd" class="bgl_pill-btn -me-025" icon-size="0.8" round v-bind="btnEnd" />
 			</div>
 		</div>
@@ -90,21 +91,21 @@ const computedClasses = computed(() => {
 
 <style scoped>
 .pillLarge{
-	--pill-font-size: var(--bgl-font-size);
-	--pill-height:auto;
+	--bgl-pill-font-size: var(--bgl-font-size);
+	--bgl-pill-height:auto;
 }
 .pillSmall{
-	--pill-font-size: 9px;
-	--pill-height:15px;
+	--bgl-pill-font-size: 9px;
+	--bgl-pill-height:15px;
 }
 .pillText{
-	font-size: var(--pill-font-size);
+	font-size: var(--bgl-pill-font-size);
 }
 .bgl_pill-btn{
-	color: var(--pill-btn-color);
-	background: var(--pill-btn-bg);
-	width: calc(var(--pill-height) / 1.25)!important;
-	height: calc(var(--pill-height) / 1.25)!important;
+	color: var(--bgl-pill-btn-color);
+	background: var(--bgl-pill-btn-bg);
+	width: calc(var(--bgl-pill-height) / 1.25)!important;
+	height: calc(var(--bgl-pill-height) / 1.25)!important;
 }
 .loading {
   border: 1px solid var(--bgl-light-text);
@@ -129,13 +130,13 @@ const computedClasses = computed(() => {
 }
 
 .bgl_pill {
-  padding-inline: calc(var(--pill-font-size) / 6);
-  padding-block: calc(var(--pill-font-size) / 24);
+  padding-inline: calc(var(--bgl-pill-font-size) / 6);
+  padding-block: calc(var(--bgl-pill-font-size) / 24);
 transition: var(--bgl-transition);
   display: inline-block;
   margin-inline-end: 0.25rem;
-  border-radius: var(--pill-border-radius);
-  min-height: var(--pill-height);
+  border-radius: var(--bgl-pill-border-radius);
+  min-height: var(--bgl-pill-height);
 vertical-align: middle;
 }
 

package/src/components/Spreadsheet/Index.vue

@@ -265,16 +265,16 @@ function handleSpreadsheetKeyDown(event: KeyboardEvent) {
 <style>
 .spreadsheet {
 	user-select: none;
-	outline: 1px solid var(--border-color);
+	outline: 1px solid var(--bgl-border-color);
 }
 
 .spreadsheet-toolbar {
-	border-bottom: 1px solid var(--border-color);
+	border-bottom: 1px solid var(--bgl-border-color);
 	padding-bottom: 0.375rem;
 	margin-bottom: 0;
 }
 
 body>div:has(.spreadsheet) ::-webkit-scrollbar-track {
-	background: var(--input-bg) !important;
+	background: var(--bgl-input-bg) !important;
 }
 </style>

package/src/components/Spreadsheet/SpreadsheetTable.vue

@@ -180,7 +180,7 @@ function selectionEdgeClasses(rowIndex: number, localColIndex: number): Record<s
 .row-number{
 	position: sticky;
 	inset-inline-start: 0;
-	background: var(--input-bg);
+	background: var(--bgl-input-bg);
 	color: var(--txt-muted, #888);
 	z-index: 1;
 }
@@ -188,7 +188,7 @@ function selectionEdgeClasses(rowIndex: number, localColIndex: number): Record<s
 	content: '';
 	position: absolute;
 	inset: -1px;
-	border: 1px solid var(--border-color);
+	border: 1px solid var(--bgl-border-color);
 }
 
 .stickyTop{
@@ -202,11 +202,11 @@ function selectionEdgeClasses(rowIndex: number, localColIndex: number): Record<s
 	position: absolute;
 	display: block;
 	inset: 0;
-	border-bottom: 1px solid var(--border-color);
+	border-bottom: 1px solid var(--bgl-border-color);
 }
 
 .fixed-columns {
-	border-right: 2px solid var(--border-color);
+	border-right: 2px solid var(--bgl-border-color);
 }
 table {
 	border-collapse: collapse;
@@ -219,14 +219,14 @@ th, td {
 }
 
 th {
-	background: var(--input-bg);
+	background: var(--bgl-input-bg);
 	white-space: nowrap;
 	position: relative;
 	padding: 0.25rem 0.5rem;
 	font-weight: 500;
 	text-align: start;
-	border-bottom: 1px solid var(--border-color);
-	border-inline-start: 1px solid var(--border-color);
+	border-bottom: 1px solid var(--bgl-border-color);
+	border-inline-start: 1px solid var(--bgl-border-color);
 
 }
 th .bgl_icon-font{
@@ -257,7 +257,7 @@ td.locked.selected {
 	background: var(--bgl-primary-light);
 }
 td {
-	border: 1px solid var(--border-color);
+	border: 1px solid var(--bgl-border-color);
 	height: 40px;
 	vertical-align: middle;
 }
@@ -311,7 +311,7 @@ td .bgl-checkbox{
 }
 td:has(.bgl-checkbox){
 	text-align: center;
-	background: var(--input-bg);
+	background: var(--bgl-input-bg);
 }
 td:has(:checked){
 	background: var(--bgl-primary-light);
@@ -355,6 +355,6 @@ td:has(:checked){
 	color: var(--txt-muted, #888);
 	font-size: 0.875rem;
 	background: var(--bgl-white);
-	border: 1px solid var(--border-color);
+	border: 1px solid var(--bgl-border-color);
 }
 </style>

package/src/components/Toast.vue

@@ -1,6 +1,8 @@
 <script setup lang="ts">
 import { Icon } from '@bagelink/vue'
 
+defineOptions({ name: 'BglToast' })
+
 interface Props {
 	message: string
 	type?: 'success' | 'error' | 'warning' | 'info'
@@ -35,27 +37,31 @@ withDefaults(defineProps<Props>(), {
 
 <style>
 .custom-toast {
-  --toast-border-radius: 6px;
+  --toast-border-radius: var(--bgl-btn-border-radius);
+  --toast-success: var(--bgl-green);
+  --toast-error: var(--bgl-red);
+  --toast-warning: var(--bgl-yellow);
+  --toast-info: var(--bgl-blue);
   display: flex;
   align-items: center;
-  gap: 12px;
-  padding: 16px;
-  padding-left: 20px;
+  gap: 0.75rem;
+  padding: 1rem;
+  padding-inline-start: 1.25rem;
   border-radius: var(--toast-border-radius);
-  background: white;
-  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15) !important;
+  background: var(--bgl-box-bg);
+  box-shadow: 0 4px 12px var(--bgl-shadow);
   min-width: 300px;
-  font-family: system-ui, -apple-system, sans-serif;
+  font-family: var(--bgl-font);
   position: relative;
   overflow: hidden;
-  outline: 1px solid var(--border-color);
-    outline-offset: -1px !important;
+  outline: 1px solid var(--bgl-border-color);
+  outline-offset: -1px;
 }
 
 .custom-toast::before {
   content: '';
   position: absolute;
-  left: 0;
+  inset-inline-start: 0;
   top: 0;
   bottom: 0;
   width: 6px;
@@ -63,52 +69,52 @@ withDefaults(defineProps<Props>(), {
 }
 
 .custom-toast--success::before {
-  background: #10b981;
+  background: var(--toast-success);
 }
 
 .custom-toast--success .custom-toast__icon {
-  color: #10b981;
+  color: var(--toast-success);
 }
 
 .custom-toast--error::before {
-  background: #ef4444;
+  background: var(--toast-error);
 }
 
 .custom-toast--error .custom-toast__icon {
-  color: #ef4444;
+  color: var(--toast-error);
 }
 
 .custom-toast--warning::before {
-  background: #f59e0b;
+  background: var(--toast-warning);
 }
 
 .custom-toast--warning .custom-toast__icon {
-  color: #f59e0b;
+  color: var(--toast-warning);
 }
 
 .custom-toast--info::before {
-  background: #3b82f6;
+  background: var(--toast-info);
 }
 
 .custom-toast--info .custom-toast__icon {
-  color: #3b82f6;
+  color: var(--toast-info);
 }
 
 .custom-toast__icon {
-  font-size: 20px;
+  font-size: 1.25rem;
   font-weight: bold;
   line-height: 1;
   display: flex;
   align-items: center;
   justify-content: center;
-  width: 24px;
-  height: 24px;
+  width: 1.5rem;
+  height: 1.5rem;
 }
 
 .custom-toast__content {
   flex: 1;
-  font-size: 14px;
-  color: #1f2937;
+  font-size: var(--bgl-input-font-size);
+  color: var(--bgl-text-color);
   line-height: 1.5;
 }
 
@@ -116,14 +122,14 @@ withDefaults(defineProps<Props>(), {
   background: none;
   border: none;
   cursor: pointer;
-  font-size: 18px;
-  color: #6b7280;
-  padding: 4px;
+  font-size: 1.125rem;
+  color: var(--bgl-gray);
+  padding: 0.25rem;
   line-height: 1;
-  transition: color 0.2s;
+  transition: var(--bgl-transition);
 }
 
 .custom-toast__close:hover {
-  color: #1f2937;
+  color: var(--bgl-text-color);
 }
 </style>

package/src/components/calendar/CalendarPopover.vue

@@ -78,7 +78,7 @@ function closePopover() {
 	min-width: 250px;
 	max-width: 350px;
 	background-color: white;
-	border-radius: var(--btn-border-radius);
+	border-radius: var(--bgl-btn-border-radius);
 	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
 	animation: fadeIn 0.2s ease;
 	transform-origin: center left;

package/src/components/calendar/Index.vue

@@ -164,7 +164,7 @@ onMounted(() => {
 			</h3>
 			<div class="ms-auto flex gap-025 m_flex-wrap">
 				<TabsNav size="s" v-if="viewSwitcher === 'tabs'" :model-value="currentView" :tabs="viewTabs" group="calendar-view" @update:model-value="handleViewChange($event as CalendarView)"
-					style="--bgl_tabs-border-radius: calc(var(--btn-border-radius) / 2)" class="txt12 m_mb-05 m_w-100p " align-txt="center" />
+					style="--bgl_tabs-border-radius: calc(var(--bgl-btn-border-radius) / 2)" class="txt12 m_mb-05 m_w-100p " align-txt="center" />
 				<Dropdown v-else thin :value="currentView" iconEnd="keyboard_arrow_down" color="gray">
 					<ListItem v-for="(_, key) in views" :key="key" thin :title="t(`calendar.views.${key.toLowerCase()}`)" @click="handleViewChange(key)" />
 				</Dropdown>

package/src/components/calendar/views/AgendaView.vue

@@ -239,12 +239,12 @@ onUnmounted(() => { containerRef.value?.removeEventListener('scroll', handleScro
 	display: block;
 	width: 1px;
 	height: calc(100% - 2rem);
-	background: var(--border-color, #e6e8ec);
+	background: var(--bgl-border-color, #e6e8ec);
 	margin: 0.5rem auto 0;
 }
 
 /* .agenda-event-card {
-	border-inline-start: var(--event-color, var(--bgl-primary)) solid calc(var(--card-border-radius) + 0.25rem); 
+	border-inline-start: var(--event-color, var(--bgl-primary)) solid calc(var(--bgl-card-border-radius) + 0.25rem); 
 } */
 
 .agenda-event-card h3::before {

package/src/components/calendar/views/DayView.vue

@@ -277,7 +277,7 @@ onUnmounted(() => {
 .events-column {
 	flex-grow: 1;
 	position: relative;
-	border-inline-start: 1px solid var(--border-color);
+	border-inline-start: 1px solid var(--bgl-border-color);
 	min-height: 100%; /* Ensure the column fills the full height */
 }
 

package/src/components/calendar/views/MonthView.vue

@@ -166,7 +166,7 @@ function handleEventSelection(event: CalendarEvent, domEvent?: MouseEvent) {
 .month-header {
 	display: grid;
 	grid-template-columns: repeat(7, 1fr);
-	border-bottom: 1px solid var(--border-color);
+	border-bottom: 1px solid var(--bgl-border-color);
 }
 
 .weekday {
@@ -181,13 +181,13 @@ function handleEventSelection(event: CalendarEvent, domEvent?: MouseEvent) {
 	grid-template-rows: repeat(6, 1fr);
 	flex-grow: 1;
 	overflow: auto;
-	border-inline-end: 1px solid var(--border-color);
+	border-inline-end: 1px solid var(--bgl-border-color);
 
 }
 
 .day-cell {
-	border-inline-start: 1px solid var(--border-color);
-	border-bottom: 1px solid var(--border-color);
+	border-inline-start: 1px solid var(--bgl-border-color);
+	border-bottom: 1px solid var(--bgl-border-color);
 	padding: 0.5rem;
 	min-height: 100px;
 	display: flex;
@@ -260,7 +260,7 @@ function handleEventSelection(event: CalendarEvent, domEvent?: MouseEvent) {
 	min-width: 250px;
 	max-width: 350px;
 	background-color: white;
-	border-radius: var(--btn-border-radius);
+	border-radius: var(--bgl-btn-border-radius);
 	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
 	animation: fadeIn 0.2s ease;
 	transform-origin: center left;