@bagelink/vue 1.15.293 → 1.15.295

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@bagelink/vue",
   "type": "module",
-  "version": "1.15.293",
+  "version": "1.15.295",
   "description": "Bagel core sdk packages",
   "author": {
     "name": "Bagel Studio",

package/src/components/Btn.vue

@@ -310,9 +310,12 @@ opacity: 0;
 z-index: 1;
 }
 
-/* Loading.ring applies a thickness offset transform that pulls the spinner off-center */
-.bgl_btn :deep(.lds-ring) {
-transform: none;
+/* Pin the ring itself to the exact center of the full-button loading overlay. */
+.bgl_btn .btn-loading :deep(.lds-ring) {
+position: absolute;
+top: 50%;
+left: 50%;
+transform: translate(-50%, -50%);
 }
 
 .bgl_btn .bgl_btn-icon {

package/src/components/Card.vue

@@ -29,6 +29,8 @@ const props = defineProps<{
 	h100?: boolean
 	to?: import('vue-router').RouteLocationRaw
 	href?: string
+	/** Enable the ripple effect for linked cards. Pass `false` to disable it. */
+	ripple?: boolean
 	overflowX?: boolean
 	overflowY?: boolean
 	frame?: boolean
@@ -99,7 +101,7 @@ const hasFooter = computed<boolean>(() =>
 
 <template>
 	<component
-		:is="is" v-ripple="!!to" v-bind="bind" class="bgl_card" :class="[{
+		:is="is" v-ripple="ripple !== false && !!to" v-bind="bind" class="bgl_card" :class="[{
 			thin,
 			'border bg-transparent': outline,
 			'h-100': h100,

package/src/components/Dropdown.vue

@@ -407,7 +407,7 @@ defineExpose({ show, hide, shown })
 			<div
 				:id="bglId" ref="popoverRef" popover="manual" class="bgl-dropdown m-0 p-0 border-none"
 				role="menu"
-				style="border-radius: calc(var(--bgl-card-border-radius) * 0.7);"
+				style="border-radius:var(--bgl-card-border-radius);"
 				:class="[props.popupClass, { 'bgl-dropdown--no-positioning': shouldDisablePositioning, 'bg-white shadow': props.card }]"
 				@toggle="onPopoverToggle" @mouseenter="onPopoverMouseenter" @mouseleave="onPopoverMouseleave"
 				@focus="onPopoverMouseenter" @blur="onPopoverMouseleave" @keydown="onPopoverKeydown"

package/src/components/dataTable/DataTable.vue

@@ -185,7 +185,7 @@ const headerFontSize = computed(() => {
 			<table class="infinite-wrapper" :class="{ selecting: computedSelectedItems.length }">
 				<thead class="row first-row">
 					<th v-if="isSortable" class="col-drag" />
-					<th v-if="isSelectable" class="col-check">
+					<th v-if="isSelectable" class="col-check ps-1">
 						<input ref="allSelectorEl" type="checkbox" @click.stop @change="(e) => toggleSelectAll(e)">
 					</th>
 					<th
@@ -210,7 +210,7 @@ const headerFontSize = computed(() => {
 						<td v-if="isSortable" class="col-drag">
 							<Icon icon="drag_indicator" :size="1.2" class="drag-handle-col grab" />
 						</td>
-						<td v-if="isSelectable" class="col-check">
+						<td v-if="isSelectable" class="col-check ps-1">
 							<div @click.stop>
 								<input v-model="selectedItems" type="checkbox" :value="row?.id || ''">
 							</div>
@@ -258,9 +258,12 @@ justify-content: center;
 
 .col-check {
 width: 1rem;
-padding: 0 0.5rem;
+padding: 0rem 0.5rem;
 vertical-align: middle;
 }
+.row-item .col-check {
+padding: 0.25rem 0.5rem 0;
+}
 
 .col-check > div {
 display: flex;
@@ -374,7 +377,7 @@ vertical-align: bottom;
 
 .row.first-row::after {
 content: '';
-/* border-bottom: 1px solid var(--bgl-border-color); */
+border-bottom: 1px solid var(--bgl-border-color);
 position: absolute;
 left: 0;
 right: 0;

package/src/styles/appearance.css

@@ -162,19 +162,19 @@
 }
 
 .border-bottom {
-    border-bottom: 1px solid var(--bgl-border-color)
+    border-bottom: var(--bgl-border-width, 1px) solid var(--bgl-border-color)
 }
 
 .border-top {
-    border-top: 1px solid var(--bgl-border-color)
+    border-top: var(--bgl-border-width, 1px) solid var(--bgl-border-color)
 }
 
 .border-start {
-    border-inline-start: 1px solid var(--bgl-border-color)
+    border-inline-start: var(--bgl-border-width, 1px) solid var(--bgl-border-color)
 }
 
 .border-end {
-    border-inline-end: 1px solid var(--bgl-border-color)
+    border-inline-end: var(--bgl-border-width, 1px) solid var(--bgl-border-color)
 }
 
 .border-input input:not(.national-number-input),

package/src/styles/buttons.css

@@ -178,27 +178,23 @@
 }
 
 .border {
-    border: 1px solid var(--bgl-border-color);
+    border: var(--bgl-border-width, 1px) solid var(--bgl-border-color);
 }
 
 .border-1 {
-    border-width: 1px !important;
-    border-style: solid !important;
+    --bgl-border-width: 1px;
 }
 
 .border-2 {
-    border-width: 2px !important;
-    border-style: solid !important;
+    --bgl-border-width: 2px;
 }
 
 .border-3 {
-    border-width: 3px !important;
-    border-style: solid !important;
+    --bgl-border-width: 3px;
 }
 
 .border-4 {
-    border-width: 4px !important;
-    border-style: solid !important;
+    --bgl-border-width: 4px;
 }
 
 .outline {
@@ -288,23 +284,19 @@
     }
 
     .m_border-1 {
-        border-width: 1px !important;
-        border-style: solid !important;
+        --bgl-border-width: 1px;
     }
 
     .m_border-2 {
-        border-width: 2px !important;
-        border-style: solid !important;
+        --bgl-border-width: 2px;
     }
 
     .m_border-3 {
-        border-width: 3px !important;
-        border-style: solid !important;
+        --bgl-border-width: 3px;
     }
 
     .m_border-4 {
-        border-width: 4px !important;
-        border-style: solid !important;
+        --bgl-border-width: 4px;
     }
 }