@bagelink/vue 1.15.15 → 1.15.26

package/src/components/form/inputs/NumberInput.vue

@@ -217,109 +217,111 @@ const hasValue = computed(() => formattedValue.value.length > 0)
 </template>
 
 <style scoped>
+
 .input-icon-wrap {
-	display: flex;
-	align-items: center;
-	background: var(--bgl-input-bg);
-	border-radius: var(--bgl-input-border-radius);
-	height: var(--bgl-input-height);
-	transition: box-shadow 0.2s ease, outline-color 0.2s ease;
+display: flex;
+align-items: center;
+background: var(--bgl-input-bg);
+border-radius: var(--bgl-input-border-radius);
+height: var(--bgl-input-height);
+transition: box-shadow 0.2s ease, outline-color 0.2s ease;
 }
 
 .input-icon-wrap input {
-	flex: 1;
-	min-width: 0;
-	background: transparent !important;
-	outline: none !important;
-	box-shadow: none !important;
+flex: 1;
+min-width: 0;
+background: transparent !important;
+outline: none !important;
+box-shadow: none !important;
 }
 
 .input-icon-wrap:focus-within {
-	outline-color: var(--bgl-input-bg);
-	box-shadow: inset 0 0 8px #00000018;
+outline-color: var(--bgl-input-bg);
+box-shadow: inset 0 0 8px #00000018;
 }
 
 .input-icon-wrap .iconStart,
 .input-icon-wrap > .bgl_icon-font {
-	flex-shrink: 0;
-	color: var(--bgl-input-color);
-	line-height: 0;
-	padding-inline: 0.35rem;
+flex-shrink: 0;
+color: var(--bgl-input-color);
+line-height: 0;
+padding-inline: 0.35rem;
 }
 
 /* ── frame variant ─────────────────────────────────────────────── */
 .bagel-input.frame .input-icon-wrap {
-	background: transparent;
-	outline: 1.5px solid var(--bgl-border-color);
-	outline-offset: -1px;
+background: transparent;
+outline: 1.5px solid var(--bgl-border-color);
+outline-offset: -1px;
 }
 
 .bagel-input.frame .input-icon-wrap:focus-within {
-	outline-color: var(--bgl-input-label-active-color, var(--bgl-primary)) !important;
-	box-shadow: 0 0 0 3px color-mix(in srgb, var(--bgl-input-label-active-color, var(--bgl-primary)) 12%, transparent) !important;
+outline-color: var(--bgl-input-label-active-color, var(--bgl-primary)) !important;
+box-shadow: 0 0 0 3px color-mix(in srgb, var(--bgl-input-label-active-color, var(--bgl-primary)) 12%, transparent) !important;
 }
 
 /* ── outline variant ───────────────────────────────────────────── */
 .bagel-input.bgl-outline .input-icon-wrap {
-	outline: 1.5px solid var(--bgl-border-color);
-	outline-offset: -1px;
+outline: 1.5px solid var(--bgl-border-color);
+outline-offset: -1px;
 }
 
 /* ── underlined variant ────────────────────────────────────────── */
 .bagel-input.underlined .input-icon-wrap {
-	position: relative;
-	background: transparent;
-	border-radius: 0;
-	height: auto;
-	border-bottom: 1.5px solid var(--bgl-border-color);
+position: relative;
+background: transparent;
+border-radius: 0;
+height: auto;
+border-bottom: 1.5px solid var(--bgl-border-color);
 }
 
 .bagel-input.underlined .input-icon-wrap::after {
-	content: '';
-	position: absolute;
-	bottom: -1px;
-	inset-inline-start: 0;
-	width: 0;
-	height: 2px;
-	background: var(--bgl-input-label-active-color, var(--bgl-primary));
-	transition: width 0.6s ease;
-	pointer-events: none;
+content: '';
+position: absolute;
+bottom: -1px;
+inset-inline-start: 0;
+width: 0;
+height: 2px;
+background: var(--bgl-input-label-active-color, var(--bgl-primary));
+transition: width 0.6s ease;
+pointer-events: none;
 }
 
 .bagel-input.underlined .input-icon-wrap:focus-within {
-	box-shadow: none;
+box-shadow: none;
 }
 
 .bagel-input.underlined .input-icon-wrap:focus-within::after {
-	width: 100%;
+width: 100%;
 }
 
 .bagel-input.underlined .input-icon-wrap input {
-	border-bottom: none !important;
+border-bottom: none !important;
 }
 
 .spinner-btns {
-	flex-shrink: 0;
-	display: flex;
-	flex-direction: column;
-	margin-inline-end: 0.25rem;
+flex-shrink: 0;
+display: flex;
+flex-direction: column;
+margin-inline-end: 0.25rem;
 }
 
 .top-bgl-ctrl-num-btn {
-	margin-top: calc(var(--bgl-input-height) / 10) !important;
+margin-top: calc(var(--bgl-input-height) / 10) !important;
 }
 
 .bgl-ctrl-num-btn {
-	height: calc(var(--bgl-input-height) / 2.5) !important;
-	isolation: isolate;
+height: calc(var(--bgl-input-height) / 2.5) !important;
+isolation: isolate;
 }
 
 .bgl-big-ctrl-num-btn {
-	width: 100% !important;
-	isolation: isolate;
+width: 100% !important;
+isolation: isolate;
 }
 
 .bagel-input.has-error input {
-	border-color: var(--bgl-red) !important;
+border-color: var(--bgl-red) !important;
 }
+
 </style>

package/src/components/form/inputs/OTP.vue

@@ -116,89 +116,91 @@ function isDigitsFull() {
 </template>
 
 <style scoped>
+
 .otp-error-message {
-	color: var(--bgl-red);
+color: var(--bgl-red);
 }
 .otp_wrap.has-error input,
 .otp_wrap.has-error textarea {
-	outline: 1px solid var(--bgl-red) !important;
+outline: 1px solid var(--bgl-red) !important;
 }
 
 .otp_wrap {
-	display: flex;
-	flex-direction: row;
-	justify-content: center;
-	align-items: center;
+display: flex;
+flex-direction: row;
+justify-content: center;
+align-items: center;
 }
 
 .digit-box {
-	height: 3rem;
-	flex-grow: 1;
-	border: 1px solid var(--bgl-input-label-active-color, var(--bgl-primary-tint));
-	display: inline-block;
-	background: var(--bgl-gray-light);
-	border-radius: 5px;
-	margin: 5px;
-	text-align: center;
-	font-size: 2.4rem;
-	-moz-appearance: textfield;
-	/* Firefox */
-	caret-color: transparent;
-	/* Remove spinner arrows */
-	appearance: textfield;
-	/* Standardized property */
+height: 3rem;
+flex-grow: 1;
+border: 1px solid var(--bgl-input-label-active-color, var(--bgl-primary-tint));
+display: inline-block;
+background: var(--bgl-gray-light);
+border-radius: 5px;
+margin: 5px;
+text-align: center;
+font-size: 2.4rem;
+-moz-appearance: textfield;
+/* Firefox */
+caret-color: transparent;
+/* Remove spinner arrows */
+appearance: textfield;
+/* Standardized property */
 }
 
 /* Remove spinner arrows for Webkit browsers */
 .digit-box::-webkit-outer-spin-button,
 .digit-box::-webkit-inner-spin-button {
-	-webkit-appearance: none;
-	appearance: none;
-	margin: 0;
+-webkit-appearance: none;
+appearance: none;
+margin: 0;
 }
 
 .digit-box:focus {
-	outline: 1px solid var(--bgl-input-label-active-color, var(--bgl-primary));
-	filter: drop-shadow(0 0 0.25rem var(--bgl-input-label-active-color, var(--bgl-primary)));
-	outline-offset: 1px;
+outline: 1px solid var(--bgl-input-label-active-color, var(--bgl-primary));
+filter: drop-shadow(0 0 0.25rem var(--bgl-input-label-active-color, var(--bgl-primary)));
+outline-offset: 1px;
 }
 
 /* ── frame variant ──────────────────────────────────────────────────────── */
 
 .otp-input.frame .digit-box {
-	background: transparent;
-	outline: 1.5px solid var(--bgl-border-color);
-	outline-offset: -1px;
-	transition: outline-color 0.2s ease, box-shadow 0.2s ease;
+background: transparent;
+outline: 1.5px solid var(--bgl-border-color);
+outline-offset: -1px;
+transition: outline-color 0.2s ease, box-shadow 0.2s ease;
 }
 
 .otp-input.frame .digit-box:focus {
-	outline-color: var(--bgl-input-label-active-color, var(--bgl-primary));
-	outline-width: 2px;
-	box-shadow:
-		0 0 0 4px color-mix(in srgb, var(--bgl-input-label-active-color, var(--bgl-primary)) 15%, transparent),
-		0 2px 8px color-mix(in srgb, var(--bgl-input-label-active-color, var(--bgl-primary)) 25%, transparent);
-	filter: none;
+outline-color: var(--bgl-input-label-active-color, var(--bgl-primary));
+outline-width: 2px;
+box-shadow:
+	0 0 0 4px color-mix(in srgb, var(--bgl-input-label-active-color, var(--bgl-primary)) 15%, transparent),
+	0 2px 8px color-mix(in srgb, var(--bgl-input-label-active-color, var(--bgl-primary)) 25%, transparent);
+filter: none;
 }
 
 /* ── bgl-outline variant ────────────────────────────────────────────────── */
 
 .otp-input.bgl-outline .digit-box {
-	outline: 1.5px solid var(--bgl-border-color);
-	outline-offset: -1px;
+outline: 1.5px solid var(--bgl-border-color);
+outline-offset: -1px;
 }
 
  /* Redundant, already covered above */
 /* .digit-box[type="number"] {
-    -moz-appearance: textfield;
+-moz-appearance: textfield;
 } */
  .relative {
  	position: relative !important;
  }
 
 @media screen and (max-width: 910px) {
-	.digit-box {
-		padding: 0.25rem;
-	}
+.digit-box {
+	padding: 0.25rem;
 }
+}
+
 </style>

package/src/components/form/inputs/PasswordInput.vue

@@ -133,30 +133,32 @@ const feedbackMessage = computed(() => {
 </template>
 
 <style>
+
 .m-password {
-	height: var(--bgl-input-height) !important;
+height: var(--bgl-input-height) !important;
 }
 
 [dir='rtl'] .passwordInput input {
-	direction: ltr;
-	text-align: right;
+direction: ltr;
+text-align: right;
 }
 
 .password-strength-container {
-	height: 1.25rem;
+height: 1.25rem;
 }
 
 .password-strength-bar {
-	flex: 1;
-	height: 6px;
-	background-color: var(--bgl-input-bg);
+flex: 1;
+height: 6px;
+background-color: var(--bgl-input-bg);
 }
 
 .password-strength-fill {
-	transition: width 0.3s ease, background-color 0.3s ease;
+transition: width 0.3s ease, background-color 0.3s ease;
 }
 
 .password-strength-label {
-	transition: color 0.3s ease;
+transition: color 0.3s ease;
 }
+
 </style>

package/src/components/form/inputs/RadioGroup.vue

@@ -140,46 +140,47 @@ function handleChange() {
 
 
 <style scoped>
+
 .group-label {
-	font-size: var(--bgl-label-font-size);
-	margin: 0 0 0.25rem 0;
+font-size: var(--bgl-label-font-size);
+margin: 0 0 0.25rem 0;
 }
 
 .hideRadio.radio-input-list {
-	display: none !important;
+display: none !important;
 }
 
 .radio-input-list {
-	width: auto;
-	margin-inline-end: 0.5rem;
-	margin-top: 0;
-	accent-color: var(--bgl-input-label-active-color, var(--bgl-primary));
+width: auto;
+margin-inline-end: 0.5rem;
+margin-top: 0;
+accent-color: var(--bgl-input-label-active-color, var(--bgl-primary));
 }
 
 .radio-input-list.hidden {
-	display: none;
+display: none;
 }
 
 .active-list-item:has(:checked) {
-	background: v-bind('activeBgColor || "var(--bgl-primary-light)"') !important;
-	border-color: var(--bgl-input-label-active-color, var(--bgl-primary)) !important;
-	accent-color: var(--bgl-input-label-active-color, var(--bgl-primary));
-	color: v-bind('activeTextColor || null') !important;
+background: v-bind('activeBgColor || "var(--bgl-primary-light)"') !important;
+border-color: var(--bgl-input-label-active-color, var(--bgl-primary)) !important;
+accent-color: var(--bgl-input-label-active-color, var(--bgl-primary));
+color: v-bind('activeTextColor || null') !important;
 }
 
 .invertedActive:has(:checked) {
-	background: var(--bgl-primary) !important;
-	border-color: var(--bgl-primary) !important;
-	color: var(--bgl-white);
-	accent-color: var(--bgl-white);
+background: var(--bgl-primary) !important;
+border-color: var(--bgl-primary) !important;
+color: var(--bgl-white);
+accent-color: var(--bgl-white);
 }
 
 .has-error .active-list-item {
-	border-color: var(--bgl-red) !important;
+border-color: var(--bgl-red) !important;
 }
 
 .has-error :is(input[type="radio"]) {
-	accent-color: var(--bgl-red);
+accent-color: var(--bgl-red);
 }
 
 </style>

package/src/components/form/inputs/RangeInput.vue

@@ -157,27 +157,28 @@ const displayTo = computed(() => formatValue(validTo.value))
 </template>
 
 <style scoped>
+
 .range-slider-position-txt{
-	margin-inline-start:  calc((var(--progress) * 1%) - (var(--bgl-range-thumb-size) * var(--progress) / 100));
-	top: calc(var(--bgl-range-thumb-size) / 2 ) ;
-	transition: transform 0.1s, opacity 0.5s, top 0.5s;
-	transform: scale(0.8);
-	width: var(--bgl-range-thumb-size);
+margin-inline-start:  calc((var(--progress) * 1%) - (var(--bgl-range-thumb-size) * var(--progress) / 100));
+top: calc(var(--bgl-range-thumb-size) / 2 ) ;
+transition: transform 0.1s, opacity 0.5s, top 0.5s;
+transform: scale(0.8);
+width: var(--bgl-range-thumb-size);
 }
 .range-slider:hover .range-slider-position-txt{
-	opacity: 1;
-	transform: scale(1);
-	top: calc(var(--bgl-range-thumb-size) / 2);
+opacity: 1;
+transform: scale(1);
+top: calc(var(--bgl-range-thumb-size) / 2);
 }
 
 .range-slider {
-	height: var(--bgl-range-track-size);
-	display: flex;
-	align-items: center;
-	margin-top: calc(var(--bgl-range-thumb-size) / 2 + 0.5rem) ;
+height: var(--bgl-range-track-size);
+display: flex;
+align-items: center;
+margin-top: calc(var(--bgl-range-thumb-size) / 2 + 0.5rem) ;
 }
 .range-slider-txt{
-	margin-top: calc(var(--bgl-range-thumb-size) / 2) !important;
+margin-top: calc(var(--bgl-range-thumb-size) / 2) !important;
 }
 
 input[type="range"] {
@@ -206,8 +207,8 @@ input[type="range"]::-webkit-slider-thumb {
 }
 
 input[type="range"]::-webkit-slider-thumb:hover {
-	box-shadow: 0 0 0 calc(var(--bgl-range-thumb-size) / 2) color-mix(in srgb, var(--bgl-input-label-active-color, var(--bgl-primary)) 18%, transparent);
-	filter: brightness(90%);
+box-shadow: 0 0 0 calc(var(--bgl-range-thumb-size) / 2) color-mix(in srgb, var(--bgl-input-label-active-color, var(--bgl-primary)) 18%, transparent);
+filter: brightness(90%);
 }
 
 input[type="range"]:focus::-webkit-slider-thumb {
@@ -216,7 +217,7 @@ input[type="range"]:focus::-webkit-slider-thumb {
 }
 
 input[type="range"]:active::-webkit-slider-thumb {
-	cursor: grabbing;
+cursor: grabbing;
 }
 
 .track {
@@ -226,10 +227,11 @@ input[type="range"]:active::-webkit-slider-thumb {
   width: calc(100% - var(--bgl-range-thumb-size));
 }
 @media screen and (max-width: 768px) {
-	.range-slider-position-txt{
-		opacity: 1;
-		transform: scale(1);
-		top: calc(var(--bgl-range-thumb-size) / 1.8) ;
-	}
+.range-slider-position-txt{
+	opacity: 1;
+	transform: scale(1);
+	top: calc(var(--bgl-range-thumb-size) / 1.8) ;
 }
+}
+
 </style>

package/src/components/form/inputs/RichText/components/EditorToolbar.vue

@@ -255,32 +255,34 @@ function handleOpenAdvanced() {
 </template>
 
 <style scoped>
+
 .toolbar :deep(.active) {
-	background: var(--bgl-primary);
-	color: white !important;
+background: var(--bgl-primary);
+color: white !important;
 }
 .toolbar :deep(.active):hover {
-	background: var(--bgl-primary) !important;
-		color: white;
+background: var(--bgl-primary) !important;
+	color: white;
 }
 /* Headings menu styling */
 .toolbar :deep(.dropdown-content) {
-	min-width: 40px;
+min-width: 40px;
 }
 
 .toolbar :deep(.dropdown-content .btn) {
-	min-width: 32px;
-	height: 32px;
-	padding: 0;
+min-width: 32px;
+height: 32px;
+padding: 0;
 }
 /* Alignment active state */
 .alignment-active :deep(button) {
-	background: var(--bgl-primary) !important;
-	color: white !important;
+background: var(--bgl-primary) !important;
+color: white !important;
 }
 
 .alignment-active :deep(button:hover) {
-	background: var(--bgl-primary) !important;
-	color: white !important;
+background: var(--bgl-primary) !important;
+color: white !important;
 }
+
 </style>

package/src/components/form/inputs/RichText/components/gridBox.vue

@@ -40,17 +40,19 @@ const colSize = computed(() => {
 </template>
 
 <style scoped>
+
 .tableBoxSelect::after {
-	content: '';
-	display: block;
-	width: calc(100% - 4px);
-	height:	calc(100% - 4px);
-	border: 1px solid var(--bgl-gray);
-	background: var(--bgl-gray-light);
+content: '';
+display: block;
+width: calc(100% - 4px);
+height:	calc(100% - 4px);
+border: 1px solid var(--bgl-gray);
+background: var(--bgl-gray-light);
 
 }
 .borderSelect::after {
-	border-color: var(--bgl-primary-tint);
-	background: var(--bgl-primary-light);
+border-color: var(--bgl-primary-tint);
+background: var(--bgl-primary-light);
 }
+
 </style>