@bagelink/vue 1.15.15 → 1.15.26

package/src/components/Spreadsheet/SpreadsheetTable.vue

@@ -177,63 +177,64 @@ function selectionEdgeClasses(rowIndex: number, localColIndex: number): Record<s
 </template>
 
 <style scoped>
+
 .row-number{
-	position: sticky;
-	inset-inline-start: 0;
-	background: var(--bgl-input-bg);
-	color: var(--txt-muted, #888);
-	z-index: 1;
+position: sticky;
+inset-inline-start: 0;
+background: var(--bgl-input-bg);
+color: var(--txt-muted, #888);
+z-index: 1;
 }
 .row-number:before{
-	content: '';
-	position: absolute;
-	inset: -1px;
-	border: 1px solid var(--bgl-border-color);
+content: '';
+position: absolute;
+inset: -1px;
+border: 1px solid var(--bgl-border-color);
 }
 
 .stickyTop{
-	position: sticky;
-	top: 0px;
-	z-index: 2;
+position: sticky;
+top: 0px;
+z-index: 2;
 
 }
 .stickyTop:before{
-	content: '1';
-	position: absolute;
-	display: block;
-	inset: 0;
-	border-bottom: 1px solid var(--bgl-border-color);
+content: '1';
+position: absolute;
+display: block;
+inset: 0;
+border-bottom: 1px solid var(--bgl-border-color);
 }
 
 .fixed-columns {
-	border-right: 2px solid var(--bgl-border-color);
+border-right: 2px solid var(--bgl-border-color);
 }
 table {
-	border-collapse: collapse;
+border-collapse: collapse;
 }
 th, td {
-	padding: 0.1rem 0.5rem;
-	min-width: 80px;
-	background: var(--bgl-white);
-	user-select: none;
+padding: 0.1rem 0.5rem;
+min-width: 80px;
+background: var(--bgl-white);
+user-select: none;
 }
 
 th {
-	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(--bgl-border-color);
-	border-inline-start: 1px solid var(--bgl-border-color);
+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(--bgl-border-color);
+border-inline-start: 1px solid var(--bgl-border-color);
 
 }
 th .bgl_icon-font{
-	vertical-align: middle;
+vertical-align: middle;
 }
 td.selected {
-	background: var(--bgl-primary-light);
+background: var(--bgl-primary-light);
 }
 td.sel-top    { box-shadow: inset 0 2px 0 var(--bgl-primary); }
 td.sel-bottom { box-shadow: inset 0 -2px 0 var(--bgl-primary); }
@@ -250,111 +251,112 @@ td.sel-top.sel-bottom.sel-left     { box-shadow: inset 2px 2px 0 var(--bgl-prima
 td.sel-top.sel-bottom.sel-right    { box-shadow: inset -2px 2px 0 var(--bgl-primary), inset -2px -2px 0 var(--bgl-primary); }
 td.sel-top.sel-bottom.sel-left.sel-right { box-shadow: inset 2px 2px 0 var(--bgl-primary), inset -2px -2px 0 var(--bgl-primary), inset -2px 2px 0 var(--bgl-primary), inset 2px -2px 0 var(--bgl-primary); }
 td.locked {
-	background: var(--bgl-gray-light);
-	cursor: default;
+background: var(--bgl-gray-light);
+cursor: default;
 }
 td.locked.selected {
-	background: var(--bgl-primary-light);
+background: var(--bgl-primary-light);
 }
 td {
-	border: 1px solid var(--bgl-border-color);
-	height: 40px;
-	vertical-align: middle;
+border: 1px solid var(--bgl-border-color);
+height: 40px;
+vertical-align: middle;
 }
 td:has(img){
-	padding: 0;
+padding: 0;
 }
 td span{
-	display: block;
-    display: -webkit-box;
-    max-width: 100%;
-    -webkit-box-orient: vertical;
-    overflow: hidden;
-    text-overflow: ellipsis;
-    -webkit-line-clamp: 1;
-	word-break: break-all;
+display: block;
+display: -webkit-box;
+max-width: 100%;
+-webkit-box-orient: vertical;
+overflow: hidden;
+text-overflow: ellipsis;
+-webkit-line-clamp: 1;
+word-break: break-all;
 }
 td.wrap-text {
-	height: auto;
-	min-height: 40px;
+height: auto;
+min-height: 40px;
 }
 td.wrap-text span {
-	white-space: normal;
-	-webkit-line-clamp: unset;
-	word-break: break-word;
+white-space: normal;
+-webkit-line-clamp: unset;
+word-break: break-word;
 }
 input {
-	width: 100%;
-	border: none;
-	background: transparent;
-	padding: 0;
-	margin: 0;
-	min-height: 0;
-	min-width: 0;
+width: 100%;
+border: none;
+background: transparent;
+padding: 0;
+margin: 0;
+min-height: 0;
+min-width: 0;
 }
 input:focus {
-	outline: 2px solid var(--bgl-primary);
-	outline-offset: 6px;
+outline: 2px solid var(--bgl-primary);
+outline-offset: 6px;
 }
 th.sortable {
-	cursor: pointer;
+cursor: pointer;
 }
 .row-number-header, .row-number {
-	width: fit-content;
-	min-width: fit-content !important;
-	padding: 0.1rem 0.7rem !important;
+width: fit-content;
+min-width: fit-content !important;
+padding: 0.1rem 0.7rem !important;
 }
 td .bgl-checkbox{
-	margin: 0;
-	text-align: center;
-	justify-content: center;
+margin: 0;
+text-align: center;
+justify-content: center;
 }
 td:has(.bgl-checkbox){
-	text-align: center;
-	background: var(--bgl-input-bg);
+text-align: center;
+background: var(--bgl-input-bg);
 }
 td:has(:checked){
-	background: var(--bgl-primary-light);
+background: var(--bgl-primary-light);
 }
 
 .spreadsheetCellPlaceHolder{
-	height: 0px;
-	overflow: hidden;
-	opacity: 0;
-	pointer-events: none;
-	user-select: none;
+height: 0px;
+overflow: hidden;
+opacity: 0;
+pointer-events: none;
+user-select: none;
 }
 
 .th-content {
-	position: relative;
-	display: flex;
-	align-items: center;
-	width: 100%;
-	height: 100%;
+position: relative;
+display: flex;
+align-items: center;
+width: 100%;
+height: 100%;
 }
 
 .resize-handle {
-	position: absolute;
-	right: -8px;
-	top: 0;
-	bottom: 0;
-	width: 4px;
-	z-index: 100;
-	cursor: col-resize;
-	background: transparent;
-	transition: background 0.2s;
+position: absolute;
+right: -8px;
+top: 0;
+bottom: 0;
+width: 4px;
+z-index: 100;
+cursor: col-resize;
+background: transparent;
+transition: background 0.2s;
 }
 
 .resize-handle:hover {
-	background: var(--bgl-primary);
+background: var(--bgl-primary);
 }
 
 .empty-state {
-	text-align: center;
-	padding: 2rem 1rem;
-	color: var(--txt-muted, #888);
-	font-size: 0.875rem;
-	background: var(--bgl-white);
-	border: 1px solid var(--bgl-border-color);
+text-align: center;
+padding: 2rem 1rem;
+color: var(--txt-muted, #888);
+font-size: 0.875rem;
+background: var(--bgl-white);
+border: 1px solid var(--bgl-border-color);
 }
+
 </style>

package/src/components/Swiper.vue

@@ -454,62 +454,65 @@ defineExpose({
 </template>
 
 <style>
+
 .swiper {
-	width: 100%;
+width: 100%;
 }
 
 :root {
-	--swiper-navigation-color: white;
-	--swiper-pagination-color: white;
+--swiper-navigation-color: white;
+--swiper-pagination-color: white;
 }
 
 .swi-ctrl {
-	position: absolute;
-	top: 50%;
-	transform: translateY(-50%);
-	width: 100%;
-	z-index: 99;
-	display: flex;
-	justify-content: space-between;
-	padding: 0rem 4rem;
-	height: 0;
-	pointer-events: none;
+position: absolute;
+top: 50%;
+transform: translateY(-50%);
+width: 100%;
+z-index: 99;
+display: flex;
+justify-content: space-between;
+padding: 0rem 4rem;
+height: 0;
+pointer-events: none;
 }
 
 .swi-ctrl>* {
-	pointer-events: auto;
+pointer-events: auto;
 }
 
 .swi-ctrl img {
-	height: 20px;
+height: 20px;
 }
 
 .swi-wrap {
-	position: relative;
+isolation: isolate;
+position: relative;
 }
 
 .swi-prev,
 .swi-next {
-	background: var(--blue);
-	height: 40px;
-	width: 40px;
-	border-radius: 100%;
-	padding: 10px;
-	display: flex;
-	justify-content: center;
-	align-items: center;
-	cursor: pointer;
-	transition: opacity 0.3s ease;
+background: var(--blue);
+height: 40px;
+width: 40px;
+border-radius: 100%;
+padding: 10px;
+display: flex;
+justify-content: center;
+align-items: center;
+cursor: pointer;
+transition: opacity 0.3s ease;
 }
 
 .swi-prev:hover,
 .swi-next:hover {
-	opacity: 0.8;
+opacity: 0.8;
 }
 
 @media screen and (max-width: 910px) {
-	.swi-ctrl {
-		padding: 0rem 0.5rem;
-	}
+.swi-ctrl {
+	padding: 0rem 0.5rem;
 }
+}
+
 </style>

package/src/components/Toast.vue

@@ -51,6 +51,7 @@ const computedType = computed<ToastType>(() => {
 </template>
 
 <style>
+
 .custom-toast {
   --toast-border-radius: var(--bgl-btn-border-radius);
   --toast-success: var(--bgl-green);
@@ -147,4 +148,5 @@ const computedType = computed<ToastType>(() => {
 .custom-toast__close:hover {
   color: var(--bgl-text-color);
 }
+
 </style>

package/src/components/analytics/BarChart.vue

@@ -238,23 +238,25 @@ function formatTooltip(item: any): string {
 </template>
 
 <style>
+
 .trendTooltip p {
-	font-weight: 300 !important;
-	font-size: 12px;
+font-weight: 300 !important;
+font-size: 12px;
 }
 
 .trendTooltip {
-	font-weight: 700 !important;
+font-weight: 700 !important;
 }
 
 .v-popper--theme-tooltip .v-popper__inner:has(.trendTooltip) {
-	background-color: var(--bgl-black) !important;
-	color: var(--bgl-white) !important;
-	border-radius: 0.5rem !important;
-	padding: 0.25rem 0.5rem !important;
+background-color: var(--bgl-black) !important;
+color: var(--bgl-white) !important;
+border-radius: 0.5rem !important;
+padding: 0.25rem 0.5rem !important;
 }
 
 .bar {
-	min-width: 2rem;
+min-width: 2rem;
 }
+
 </style>

package/src/components/analytics/LineChart.vue

@@ -291,63 +291,67 @@ onUnmounted(() => {
 </template>
 
 <style scoped>
+
 .line-chart,
 .chart-container {
-	direction: inherit;
+direction: inherit;
 }
 
 .chart-svg {
-	transform-origin: center;
-	display: block;
-	/* Remove any inline spacing */
+transform-origin: center;
+display: block;
+/* Remove any inline spacing */
 }
 
 .chart-container {
-	overflow: hidden;
-	/* Prevent any overflow spacing */
+overflow: hidden;
+/* Prevent any overflow spacing */
 }
 
 .grid-label,
 .axis-label {
-	fill: var(--bgl-gray) !important;
-	;
-	font-family: system-ui, -apple-system, sans-serif;
-	font-size: 12px;
-	margin: 1rem;
+fill: var(--bgl-gray) !important;
+;
+font-family: system-ui, -apple-system, sans-serif;
+font-size: 12px;
+margin: 1rem;
 }
 
 .axis-label {
-	text-anchor: middle;
+text-anchor: middle;
 }
 
 .data-point {
-	cursor: pointer;
-	transition: r 0.2s ease;
+cursor: pointer;
+transition: r 0.2s ease;
 }
 
 .data-point:hover {
-	r: 6;
+r: 6;
 }
 
 [dir="rtl"] .line-chart {
-	text-align: right;
+text-align: right;
 }
+
 </style>
 
 <style>
+
 .lineTooltip p {
-	font-weight: 300 !important;
-	font-size: 12px;
+font-weight: 300 !important;
+font-size: 12px;
 }
 
 .lineTooltip {
-	font-weight: 700 !important;
+font-weight: 700 !important;
 }
 
 .v-popper--theme-tooltip .v-popper__inner:has(.lineTooltip) {
-	background-color: var(--bgl-black) !important;
-	color: var(--bgl-white) !important;
-	border-radius: 0.5rem !important;
-	padding: 0.25rem 0.5rem !important;
+background-color: var(--bgl-black) !important;
+color: var(--bgl-white) !important;
+border-radius: 0.5rem !important;
+padding: 0.25rem 0.5rem !important;
 }
+
 </style>

package/src/components/analytics/PieChart.vue

@@ -464,77 +464,81 @@ function formatTooltip(segment: any): string {
 </template>
 
 <style scoped>
+
 .pie-segment {
-	transition: opacity 0.3s ease;
+transition: opacity 0.3s ease;
 }
 
 [dir="rtl"] .chart-container.with-legend {
-	flex-direction: row-reverse;
+flex-direction: row-reverse;
 }
 
 .pie-segment {
-	cursor: pointer;
-	transition: opacity 0.2s ease;
-	animation: fadeIn 0.3s ease-in-out;
+cursor: pointer;
+transition: opacity 0.2s ease;
+animation: fadeIn 0.3s ease-in-out;
 }
 
 @keyframes fadeIn {
-	from {
-		opacity: 0;
-	}
+from {
+	opacity: 0;
+}
 
-	to {
-		opacity: 1;
-	}
+to {
+	opacity: 1;
+}
 }
 
 .pie-segment:hover {
-	opacity: 0.8;
+opacity: 0.8;
 }
 
 /* RTL support for legend */
 [dir="rtl"] .legend-item {
-	flex-direction: row-reverse;
+flex-direction: row-reverse;
 }
 
 .legend-color {
-	width: 12px;
-	height: 12px;
+width: 12px;
+height: 12px;
 }
 
 .connector-lines polyline {
-	opacity: 0.8;
+opacity: 0.8;
 }
 
 .chart-container.with-connectors {
-	overflow: visible;
-	padding: 10px;
+overflow: visible;
+padding: 10px;
 }
 
 .chart-container.with-connectors .chart-svg {
-	overflow: visible;
+overflow: visible;
 }
 
 .chart-svg {
-	max-width: 100%;
-	max-height: 100%;
+max-width: 100%;
+max-height: 100%;
 }
 
 .chart-container {
-	min-height: 0;
-	align-items: center;
+min-height: 0;
+align-items: center;
 }
 
 .chart-container.flex-grow {
-	flex: 1;
+flex: 1;
 }
+
 </style>
 
 <style>
+
 .v-popper--theme-tooltip .v-popper__inner:has(.pieTooltip) {
-	background-color: var(--bgl-black) !important;
-	color: var(--bgl-white) !important;
-	border-radius: 0.5rem !important;
-	padding: 0.25rem 0.5rem !important;
+background-color: var(--bgl-black) !important;
+color: var(--bgl-white) !important;
+border-radius: 0.5rem !important;
+padding: 0.25rem 0.5rem !important;
 }
+
 </style>

package/src/components/calendar/CalendarPopover.vue

@@ -72,27 +72,29 @@ function closePopover() {
 </template>
 
 <style scoped>
+
 .custom-popover {
-	position: fixed;
-	z-index: 1000;
-	min-width: 250px;
-	max-width: 350px;
-	background-color: white;
-	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;
+position: fixed;
+z-index: 1000;
+min-width: 250px;
+max-width: 350px;
+background-color: white;
+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;
 }
 
 @keyframes fadeIn {
-	from {
-		opacity: 0;
-		transform: scale(0.95);
-	}
+from {
+	opacity: 0;
+	transform: scale(0.95);
+}
 
-	to {
-		opacity: 1;
-		transform: scale(1);
-	}
+to {
+	opacity: 1;
+	transform: scale(1);
+}
 }
+
 </style>

package/src/components/calendar/Index.vue

@@ -208,10 +208,12 @@ onMounted(() => {
 </template>
 
 <style scoped>
+
 .calendar {
-	display: flex;
-	flex-direction: column;
-	height: 100%;
-	width: 100%;
+display: flex;
+flex-direction: column;
+height: 100%;
+width: 100%;
 }
+
 </style>