@bagelink/vue 1.15.13 → 1.15.26

package/src/components/Btn.vue

@@ -202,214 +202,215 @@ const slots: SetupContext['slots'] = useSlots()
 </template>
 
 <style scoped>
+
 /* @import '../styles/base-colors.css'; */
 
 .bgl_btn {
-	padding-left: var(--bgl-btn-padding);
-	padding-right: var(--bgl-btn-padding);
-	transition: var(--bgl-transition);
-	text-decoration: none;
-	/* Colors now handled by pair-* classes */
+padding-left: var(--bgl-btn-padding);
+padding-right: var(--bgl-btn-padding);
+transition: var(--bgl-transition);
+text-decoration: none;
+/* Colors now handled by pair-* classes */
 }
 
 /* Touch targets: keep visuals, but extend the hit area to >=44px on touch devices */
 @media (pointer: coarse) {
-	.bgl_btn {
-		position: relative;
-	}
+.bgl_btn {
+	position: relative;
+}
 
-	.bgl_btn::after {
-		content: '';
-		position: absolute;
-		left: 50%;
-		top: 50%;
-		transform: translate(-50%, -50%);
-		width: max(100%, 44px);
-		height: max(100%, 44px);
-	}
+.bgl_btn::after {
+	content: '';
+	position: absolute;
+	left: 50%;
+	top: 50%;
+	transform: translate(-50%, -50%);
+	width: max(100%, 44px);
+	height: max(100%, 44px);
+}
 }
 
 .bgl_btn.bgl_btn-icon {
-	padding-left: 0;
-	padding-right: 0;
-	height: var(--bgl-btn-height);
-	width: var(--bgl-btn-height);
-	border-radius: 100%;
-	font-size: 1rem;
-	flex-shrink: 0;
+padding-left: 0;
+padding-right: 0;
+height: var(--bgl-btn-height);
+width: var(--bgl-btn-height);
+border-radius: 100%;
+font-size: 1rem;
+flex-shrink: 0;
 }
 
 a {
-	text-decoration: none;
+text-decoration: none;
 }
 
 .bgl_btn-flex {
-	display: flex;
-	align-items: center;
-	gap: 0.5rem;
-	justify-content: center;
-	height: 100%;
+display: flex;
+align-items: center;
+gap: 0.5rem;
+justify-content: center;
+height: 100%;
 }
 
 .bgl_btn .bgl_btn-icon {
-	font-size: calc(var(--bgl-input-font-size) * 1.3);
+font-size: calc(var(--bgl-input-font-size) * 1.3);
 }
 
 .bgl_btn:hover,
 .bgl_btn-icon:hover {
-	filter: var(--bgl-hover-filter);
+filter: var(--bgl-hover-filter);
 }
 
 .bgl_btn:active:not(:disabled),
 .bgl_btn-icon:active:not(:disabled) {
-	filter: var(--bgl-active-filter);
+filter: var(--bgl-active-filter);
 }
 
 /* Flat hover/active styles now handled by base-colors.css */
 
 .bgl_btn.round {
-	border-radius: 1000px !important;
+border-radius: 1000px !important;
 }
 
 [dir="rtl"] .bgl_btn-icon {
-	transform: rotateY(180deg);
+transform: rotateY(180deg);
 }
 
 [dir="rtl"] .ltr .bgl_btn-icon {
-	transform: rotateY(0deg);
+transform: rotateY(0deg);
 }
 
 /* Border active styles now handled by base-colors.css */
 
 .bgl_btn:disabled,
 .bgl_btn[disabled=true] {
-	opacity: 0.7;
-	filter: grayscale(0.3);
-	cursor: not-allowed;
+opacity: 0.7;
+filter: grayscale(0.3);
+cursor: not-allowed;
 }
 
 .bgl_btn-icon .bgl_btn-flex {
-	height: 100%;
+height: 100%;
 }
 
 /* xs size */
 .bgl_btn_xsSize {
-	padding-inline: calc(var(--bgl-btn-padding) / 6);
-	border-radius: calc(var(--bgl-btn-border-radius) / 2);
-	font-size: calc(var(--bgl-input-font-size) * 0.6);
+padding-inline: calc(var(--bgl-btn-padding) / 6);
+border-radius: calc(var(--bgl-btn-border-radius) / 2);
+font-size: calc(var(--bgl-input-font-size) * 0.6);
 }
 
 .bgl_btn-icon.bgl_btn_xsSize {
-	height: calc(var(--bgl-btn-height) / 2);
-	width: calc(var(--bgl-btn-height) / 2);
-	line-height: normal;
+height: calc(var(--bgl-btn-height) / 2);
+width: calc(var(--bgl-btn-height) / 2);
+line-height: normal;
 }
 
 .bgl_btn_xsSize {
-	height: calc(var(--bgl-btn-height) / 2);
-	line-height: calc(var(--bgl-btn-height) / 2);
+height: calc(var(--bgl-btn-height) / 2);
+line-height: calc(var(--bgl-btn-height) / 2);
 }
 
 .bgl_btn_xsSize .bgl_btn-flex {
-	gap: 0.2rem;
+gap: 0.2rem;
 }
 
 /* s size */
 .bgl_btn.thin,
 .bgl_btn_sSize {
-	padding-inline: calc(var(--bgl-btn-padding) / 3);
-	border-radius: calc(var(--bgl-btn-border-radius) / 1.5);
+padding-inline: calc(var(--bgl-btn-padding) / 3);
+border-radius: calc(var(--bgl-btn-border-radius) / 1.5);
 }
 
 .bgl_btn-icon.thin,
 .bgl_btn-icon.bgl_btn_sSize {
-	height: calc(var(--bgl-btn-height) / 1.5);
-	width: calc(var(--bgl-btn-height) / 1.5);
-	line-height: normal;
+height: calc(var(--bgl-btn-height) / 1.5);
+width: calc(var(--bgl-btn-height) / 1.5);
+line-height: normal;
 }
 
 .bgl_btn.thin,
 .bgl_btn_sSize {
-	height: calc(var(--bgl-btn-height) * 0.7);
-	line-height: calc(var(--bgl-btn-height) * 0.7);
+height: calc(var(--bgl-btn-height) * 0.7);
+line-height: calc(var(--bgl-btn-height) * 0.7);
 }
 
 /* m size */
 .bgl_btn_mSize {
-	padding-inline: var(--bgl-btn-padding);
-	font-size: var(--bgl-input-font-size);
-	height: var(--bgl-btn-height);
-	line-height: var(--bgl-btn-height);
+padding-inline: var(--bgl-btn-padding);
+font-size: var(--bgl-input-font-size);
+height: var(--bgl-btn-height);
+line-height: var(--bgl-btn-height);
 }
 
 .bgl_btn-icon.bgl_btn_mSize {
-	height: var(--bgl-btn-height);
-	width: var(--bgl-btn-height);
+height: var(--bgl-btn-height);
+width: var(--bgl-btn-height);
 }
 
 /* l size */
 .bgl_btn_lSize {
-	padding-inline: calc(var(--bgl-btn-padding) * 1.3);
-	font-size: calc(var(--bgl-input-font-size) * 1.1);
-	height: calc(var(--bgl-btn-height) * 1.2);
-	line-height: calc(var(--bgl-btn-height) * 1.2);
+padding-inline: calc(var(--bgl-btn-padding) * 1.3);
+font-size: calc(var(--bgl-input-font-size) * 1.1);
+height: calc(var(--bgl-btn-height) * 1.2);
+line-height: calc(var(--bgl-btn-height) * 1.2);
 }
 
 .bgl_btn-icon.bgl_btn_lSize {
-	height: calc(var(--bgl-btn-height) * 1.2);
-	width: calc(var(--bgl-btn-height) * 1.2);
+height: calc(var(--bgl-btn-height) * 1.2);
+width: calc(var(--bgl-btn-height) * 1.2);
 }
 
 /* xl size */
 .bgl_btn_xlSize {
-	padding-inline: calc(var(--bgl-btn-padding) * 1.6);
-	font-size: calc(var(--bgl-input-font-size) * 1.3);
-	height: calc(var(--bgl-btn-height) * 1.5);
-	line-height: calc(var(--bgl-btn-height) * 1.5);
+padding-inline: calc(var(--bgl-btn-padding) * 1.6);
+font-size: calc(var(--bgl-input-font-size) * 1.3);
+height: calc(var(--bgl-btn-height) * 1.5);
+line-height: calc(var(--bgl-btn-height) * 1.5);
 }
 
 .bgl_btn-icon.bgl_btn_xlSize {
-	height: calc(var(--bgl-btn-height) * 1.5);
-	width: calc(var(--bgl-btn-height) * 1.5);
+height: calc(var(--bgl-btn-height) * 1.5);
+width: calc(var(--bgl-btn-height) * 1.5);
 }
 
 .bgl_btn_fullWidth {
-	width: 100%;
+width: 100%;
 }
 
 .bgl_btn_fullWidthMobile {
-	width: auto;
+width: auto;
 }
 
 /* Content alignment styles */
 .bgl_btn_alignStart .bgl_btn-flex {
-	justify-content: flex-start;
+justify-content: flex-start;
 }
 
 .bgl_btn_alignEnd .bgl_btn-flex {
-	justify-content: flex-end;
+justify-content: flex-end;
 }
 
 .bgl_btn_alignStartMobile .bgl_btn-flex {
-	justify-content: center;
+justify-content: center;
 }
 
 .bgl_btn_alignEndMobile .bgl_btn-flex {
-	justify-content: center;
+justify-content: center;
 }
 
 @media screen and (max-width: 910px) {
-	.bgl_btn_fullWidthMobile {
-		width: 100%;
-	}
+.bgl_btn_fullWidthMobile {
+	width: 100%;
+}
 
-	.bgl_btn_alignStartMobile .bgl_btn-flex {
-		justify-content: flex-start;
-	}
+.bgl_btn_alignStartMobile .bgl_btn-flex {
+	justify-content: flex-start;
+}
 
-	.bgl_btn_alignEndMobile .bgl_btn-flex {
-		justify-content: flex-end;
-	}
+.bgl_btn_alignEndMobile .bgl_btn-flex {
+	justify-content: flex-end;
+}
 }
 
 </style>

package/src/components/Card.vue

@@ -60,64 +60,66 @@ const is = computed(() => {
 </template>
 
 <style>
+
 .card_frame {
-	border: 1px solid var(--bgl-border-color);
+border: 1px solid var(--bgl-border-color);
 }
 .card_label {
-	font-size: 1rem;
-	position: relative;
-	top: -0.5rem;
-	padding: 0.75rem 0;
-	display: block;
-	border-bottom: 1px solid var(--bgl-border-color);
-	margin-bottom: 1rem;
+font-size: 1rem;
+position: relative;
+top: -0.5rem;
+padding: 0.75rem 0;
+display: block;
+border-bottom: 1px solid var(--bgl-border-color);
+margin-bottom: 1rem;
 }
 
 .border .card_label {
-	font-size: 0.7rem;
-	font-weight: 300;
-	background: var(--bgl-box-bg);
-	padding: 0 0.75rem;
-	position: absolute;
-	top: -0.5rem;
-	inset-inline-start: 1rem;
-	border-left: 1px solid var(--bgl-border-color);
-	border-right: 1px solid var(--bgl-border-color);
-	border-bottom: unset;
+font-size: 0.7rem;
+font-weight: 300;
+background: var(--bgl-box-bg);
+padding: 0 0.75rem;
+position: absolute;
+top: -0.5rem;
+inset-inline-start: 1rem;
+border-left: 1px solid var(--bgl-border-color);
+border-right: 1px solid var(--bgl-border-color);
+border-bottom: unset;
 
 }
 
 .bgl_card {
-	border-radius: var(--bgl-card-border-radius);
-	background: var(--bgl-box-bg);
-	padding: 2rem 2rem;
-	position: relative;
+border-radius: var(--bgl-card-border-radius);
+background: var(--bgl-box-bg);
+padding: 2rem 2rem;
+position: relative;
 }
 
 .bgl_card.gray {
-	background: var(--bgl-gray-tint);
+background: var(--bgl-gray-tint);
 }
 
 .bgl_card.border {
-	border: 1px solid var(--bgl-border-color);
-	background-color: transparent;
+border: 1px solid var(--bgl-border-color);
+background-color: transparent;
 }
 
 .bgl_card.thin {
-	padding: 1rem 1rem;
+padding: 1rem 1rem;
 }
 
 .bgl_card.BagelTable {
-	height: 100%;
-	overflow: auto;
-	padding-top: 0;
+height: 100%;
+overflow: auto;
+padding-top: 0;
 }
 
 .bgl_card.thin .tabs {
-	margin-bottom: 1rem;
+margin-bottom: 1rem;
 }
 
 .bgl_card .bgl_card.tabs-top {
-	padding: 0;
+padding: 0;
 }
+
 </style>

package/src/components/DataPreview.vue

@@ -70,33 +70,35 @@ const { renderField } = useSchemaField<T>({
 </template>
 
 <style scoped>
+
 .data-preview {
-	display: flex;
-	flex-direction: column;
-	gap: 0.5rem;
+display: flex;
+flex-direction: column;
+gap: 0.5rem;
 }
 
 .preview-field {
-	display: flex;
-	flex-direction: row;
-	align-items: center;
-	gap: 0.5rem;
+display: flex;
+flex-direction: row;
+align-items: center;
+gap: 0.5rem;
 }
 
 .field-label {
-	font-size: 0.8rem;
-	color: var(--bgl-black-tint);
-	font-weight: 500;
+font-size: 0.8rem;
+color: var(--bgl-black-tint);
+font-weight: 500;
 }
 
 .field-value {
-	font-size: 0.95rem;
+font-size: 0.95rem;
 }
 
 .empty-preview {
-	font-size: 0.9rem;
-	color: var(--bgl-black-tint);
-	padding: 1rem 0;
-	text-align: center;
+font-size: 0.9rem;
+color: var(--bgl-black-tint);
+padding: 1rem 0;
+text-align: center;
 }
+
 </style>

package/src/components/DragOver.vue

@@ -92,6 +92,7 @@ function handleDrop(e: DragEvent) {
 </template>
 
 <style scoped>
+
 .drag-over-container {
   position: relative;
 }
@@ -126,4 +127,5 @@ function handleDrop(e: DragEvent) {
   opacity: 0.6;
   cursor: not-allowed;
 }
+
 </style>

package/src/components/Dropdown.vue

@@ -298,73 +298,75 @@ defineExpose({ show, hide, shown })
 </template>
 
 <style>
+
 /* Reset browser UA popover styles */
 .bgl-dropdown {
-	margin: 0;
-	padding: 0;
-	border: none;
-	background: transparent;
-	overflow: visible;
-	position: fixed;
-	inset: unset;
-	top: 0;
-	left: 0;
+margin: 0;
+padding: 0;
+border: none;
+background: transparent;
+overflow: visible;
+position: fixed;
+inset: unset;
+top: 0;
+left: 0;
 }
 
 /* Mobile full-screen slide-up mode */
 .bgl-dropdown.bgl-dropdown--no-positioning {
-	inset: 0;
-	width: 100%;
-	height: 100%;
-	display: flex;
-	align-items: flex-end;
-	overflow: hidden;
+inset: 0;
+width: 100%;
+height: 100%;
+display: flex;
+align-items: flex-end;
+overflow: hidden;
 }
 
 .bgl-dropdown.bgl-dropdown--no-positioning .bgl-dropdown__backdrop {
-	position: absolute;
-	inset: 0;
-	background: rgba(0 0 0 / 90%);
+position: absolute;
+inset: 0;
+background: rgba(0 0 0 / 90%);
 }
 
 .bgl-dropdown.bgl-dropdown--no-positioning .bgl-dropdown__content {
-	width: 100%;
-	position: relative;
-	transform: translateY(0);
+width: 100%;
+position: relative;
+transform: translateY(0);
 }
 
 @starting-style {
-	.bgl-dropdown.bgl-dropdown--no-positioning:popover-open .bgl-dropdown__content {
-		transform: translateY(100%);
-	}
+.bgl-dropdown.bgl-dropdown--no-positioning:popover-open .bgl-dropdown__content {
+	transform: translateY(100%);
+}
 }
 
 .bgl-dropdown.bgl-dropdown--no-positioning .bgl-dropdown__content {
-	transition: transform 0.15s ease-out;
+transition: transform 0.15s ease-out;
 }
 
 /* Hide backdrop in normal mode */
 .bgl-dropdown:not(.bgl-dropdown--no-positioning) .bgl-dropdown__backdrop {
-	display: none;
+display: none;
 }
 
 /* Desktop open animation */
 @keyframes bgl-dropdown-enter {
-	from {
-		opacity: 0;
-		transform: translateY(-4px) scaleY(0.95);
-	}
+from {
+	opacity: 0;
+	transform: translateY(-4px) scaleY(0.95);
+}
 
-	to {
-		opacity: 1;
-		transform: translateY(0) scaleY(1);
-	}
+to {
+	opacity: 1;
+	transform: translateY(0) scaleY(1);
+}
 }
 
 .bgl-dropdown:not(.bgl-dropdown--no-positioning):popover-open {
-	animation: bgl-dropdown-enter 0.18s ease 0.04s both;
-	transform-origin: top left;
+animation: bgl-dropdown-enter 0.18s ease 0.04s both;
+transform-origin: top left;
 }
+
 </style>
 <!-- prettier-ignore-end -->
 <!-- eslint-enable -->

package/src/components/FieldSetVue.vue

@@ -15,9 +15,11 @@ defineProps<{
 </template>
 
 <style scoped>
-	fieldset {
-		border: 1px solid var(--bgl-border-color);
-		border-radius: var(--bgl-card-border-radius);
-		padding: var(--space-md);
-	}
+
+fieldset {
+	border: 1px solid var(--bgl-border-color);
+	border-radius: var(--bgl-card-border-radius);
+	padding: var(--space-md);
+}
+
 </style>

package/src/components/FilterQuery.vue

@@ -512,68 +512,72 @@ function onConnectorChange(id: string, connector: LogicalOperator) {
 </template>
 
 <style>
+
 .and-or-select {
-	--bgl-input-font-size: 12px !important;
-	--input-background-color: transparent !important;
+--bgl-input-font-size: 12px !important;
+--input-background-color: transparent !important;
 }
 
 .and-or-select .selectinput-btn {
-	border: none;
-	width: 100%;
-	box-shadow: none;
-	padding: 0 0.5rem !important;
-	font-size: 12px !important;
-	width: 100%;
+border: none;
+width: 100%;
+box-shadow: none;
+padding: 0 0.5rem !important;
+font-size: 12px !important;
+width: 100%;
 }
 
 .first-filter-row {
-	grid-template-columns: minmax(calc(140px + 0.25rem), 0.5fr) minmax(170px, 0.75fr) minmax(120px, 0.5fr) auto;
-	padding-top: 0 !important;
+grid-template-columns: minmax(calc(140px + 0.25rem), 0.5fr) minmax(170px, 0.75fr) minmax(120px, 0.5fr) auto;
+padding-top: 0 !important;
 }
 
 .filter-row {
-	grid-template-columns: 50px minmax(90px, 0.5fr) minmax(170px, 0.75fr) minmax(120px, 0.5fr) auto;
+grid-template-columns: 50px minmax(90px, 0.5fr) minmax(170px, 0.75fr) minmax(120px, 0.5fr) auto;
 }
 
 /* Transition animations */
 .condition-enter-active,
 .condition-leave-active {
-	transition: all 0.25s ease;
+transition: all 0.25s ease;
 }
 
 .condition-enter-from {
-	opacity: 0;
-	transform: translateX(-10px);
+opacity: 0;
+transform: translateX(-10px);
 }
 
 .condition-leave-to {
-	opacity: 0;
-	transform: translateX(10px);
+opacity: 0;
+transform: translateX(10px);
 }
 
 :dir(rtl) .condition-enter-from {
-	transform: translateX(10px);
+transform: translateX(10px);
 }
 
 :dir(rtl) .condition-leave-to {
-	transform: translateX(-10px);
+transform: translateX(-10px);
 }
 
 @media (max-width: 910px) {
 
-	.filter-row,
-	.first-filter-row {
-		grid-template-columns: auto;
-	}
+.filter-row,
+.first-filter-row {
+	grid-template-columns: auto;
+}
 }
+
 </style>
 
 <style>
+
 .borderHover * {
-	transition: all 0.2s ease-in-out !important;
+transition: all 0.2s ease-in-out !important;
 }
 
 .borderHover:hover {
-	--bgl-border-color: var(--bgl-primary);
+--bgl-border-color: var(--bgl-primary);
 }
+
 </style>