@bagelink/vue 1.15.15 → 1.15.26

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

@@ -290,46 +290,47 @@ onMounted(initializeCountry)
 </template>
 
 <style scoped>
+
 .tel-input {
-	direction: ltr;
-	text-align: left;
-	background: var(--bgl-input-bg);
-	border: none;
-	padding-inline-start: 0.7rem;
-	border-radius: var(--bgl-input-border-radius);
-	color: var(--bgl-input-color);
-	min-width: calc(var(--bgl-input-height) * 3);
-	width: 100%;
-	display: flex;
-	align-items: center;
+direction: ltr;
+text-align: left;
+background: var(--bgl-input-bg);
+border: none;
+padding-inline-start: 0.7rem;
+border-radius: var(--bgl-input-border-radius);
+color: var(--bgl-input-color);
+min-width: calc(var(--bgl-input-height) * 3);
+width: 100%;
+display: flex;
+align-items: center;
 }
 
 .tel-input:focus-within {
-	outline: none;
-	box-shadow: inset 0 0 10px #00000012;
+outline: none;
+box-shadow: inset 0 0 10px #00000012;
 }
 
 /* In frame mode, remove the solid background from .tel-input wrapper */
 .bagel-input.frame .tel-input {
-	background: transparent !important;
+background: transparent !important;
 }
 
 /* frame variant: outline on the tel-input wrapper */
 .bagel-input.frame .tel-input {
-	outline: 1.5px solid var(--bgl-border-color);
-	outline-offset: -1px;
-	transition: outline-color 0.2s ease, box-shadow 0.2s ease;
+outline: 1.5px solid var(--bgl-border-color);
+outline-offset: -1px;
+transition: outline-color 0.2s ease, box-shadow 0.2s ease;
 }
 
 .bagel-input.frame .tel-input: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;
 }
 
 /* bgl-outline variant: outline on the tel-input wrapper */
 .bagel-input.bgl-outline .tel-input {
-	outline: 1.5px solid var(--bgl-border-color);
-	outline-offset: -1px;
+outline: 1.5px solid var(--bgl-border-color);
+outline-offset: -1px;
 }
 
 /* Prevent the global frame/outline rules from hitting the inner inputs */
@@ -337,130 +338,131 @@ onMounted(initializeCountry)
 .bagel-input.bgl-outline .tel-input input,
 .bagel-input.frame .tel-input input:focus,
 .bagel-input.frame .tel-input input:focus-visible {
-	outline: none !important;
-	box-shadow: none !important;
-	background: transparent;
+outline: none !important;
+box-shadow: none !important;
+background: transparent;
 }
 
 .tel-input input {
-	background: transparent;
-	text-align: left;
-	flex: 1;
+background: transparent;
+text-align: left;
+flex: 1;
 }
 
 .tel-input input:focus,
 .tel-input input:focus-visible {
-	outline: none !important;
-	box-shadow: none !important;
+outline: none !important;
+box-shadow: none !important;
 }
 
 .country-code-display {
-	align-items: center;
-	white-space: nowrap;
+align-items: center;
+white-space: nowrap;
 }
 
 .dial-code {
-	font-size: var(--bgl-input-font-size);
-	color: var(--bgl-input-color);
-	opacity: 0.6;
+font-size: var(--bgl-input-font-size);
+color: var(--bgl-input-color);
+opacity: 0.6;
 }
 
 .tel-country {
-	font-size: var(--bgl-input-font-size);
-	max-width: 200px;
-	white-space: nowrap;
-	text-overflow: ellipsis;
-	overflow: hidden;
-	margin-top: 0;
-	margin-bottom: 0;
+font-size: var(--bgl-input-font-size);
+max-width: 200px;
+white-space: nowrap;
+text-overflow: ellipsis;
+overflow: hidden;
+margin-top: 0;
+margin-bottom: 0;
 }
 
 .tel-countryp-dropdown {
-	direction: ltr;
-	text-align: left;
+direction: ltr;
+text-align: left;
 }
 
 .national-number-input {
-	margin-left: 4px;
+margin-left: 4px;
 }
 
 .national-number-input:focus,
 .national-number-input:focus-visible {
-	outline: none !important;
-	box-shadow: none !important;
+outline: none !important;
+box-shadow: none !important;
 }
 
 .country-changed {
-	animation: highlight-country 1.5s ease-in-out;
+animation: highlight-country 1.5s ease-in-out;
 }
 
 .invalid input {
-	border-color: var(--error-color, red);
+border-color: var(--error-color, red);
 }
 
 .bagel-input.has-error .tel-input {
-	border: 1px solid var(--bgl-red) !important;
+border: 1px solid var(--bgl-red) !important;
 }
 .bagel-input.has-error .tel-input {
-	--bgl-border-color: var(--bgl-red) !important;
+--bgl-border-color: var(--bgl-red) !important;
 }
 
 @keyframes highlight-country {
 
-	0%,
-	100% {
-		background-color: transparent;
-	}
+0%,
+100% {
+	background-color: transparent;
+}
 
-	30% {
-		background-color: var(--primary-color-light, rgba(0, 123, 255, 0.2));
-	}
+30% {
+	background-color: var(--primary-color-light, rgba(0, 123, 255, 0.2));
+}
 
-	70% {
-		background-color: var(--primary-color-light, rgba(0, 123, 255, 0.2));
-	}
+70% {
+	background-color: var(--primary-color-light, rgba(0, 123, 255, 0.2));
+}
 }
 /* Underlined mode styling */
 .bagel-input.underlined {
-	padding-top: 1.1rem;
+padding-top: 1.1rem;
 }
 
 /* In underlined mode, always show label at top */
 .bagel-input.underlined .label-text {
-	position: absolute;
-	top: -0.65rem;
-	inset-inline-start: 0.25rem;
-	font-size: 0.65rem;
-	color: var(--bgl-text-color, #555);
-	opacity: 0.8;
-	line-height: 1;
-	z-index: 1;
+position: absolute;
+top: -0.65rem;
+inset-inline-start: 0.25rem;
+font-size: 0.65rem;
+color: var(--bgl-text-color, #555);
+opacity: 0.8;
+line-height: 1;
+z-index: 1;
 }
 
 /* When focused in underlined mode, make label primary color */
 .bagel-input.underlined:focus-within .label-text {
-	color: var(--bgl-input-label-active-color, var(--bgl-primary));
-	opacity: 1;
+color: var(--bgl-input-label-active-color, var(--bgl-primary));
+opacity: 1;
 }
 
 .bagel-input.underlined .tel-input {
-	outline: none !important;
-	box-shadow: none !important;
-	background: transparent !important;
-	border-radius: 0 !important;
-	border: none !important;
-	border-bottom: 1.5px solid var(--bgl-border-color) !important;
-	padding-inline: 0.25rem !important;
+outline: none !important;
+box-shadow: none !important;
+background: transparent !important;
+border-radius: 0 !important;
+border: none !important;
+border-bottom: 1.5px solid var(--bgl-border-color) !important;
+padding-inline: 0.25rem !important;
 }
 
 .bagel-input.underlined .tel-input:focus-within {
-	outline: none !important;
-	box-shadow: none !important;
+outline: none !important;
+box-shadow: none !important;
 }
 
 /* Remove border from internal input to avoid double border */
 .bagel-input.underlined .tel-input input {
-	border: none !important;
-	border-bottom: none !important;
+border: none !important;
+border-bottom: none !important;
 }
+
 </style>

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

@@ -186,92 +186,96 @@ onMounted(async () => {
 </template>
 
 <style>
+
 .bagel-input.shrink,
 .bagel-input.shrink input {
-	min-width: unset !important;
-	/* width: auto; */
+min-width: unset !important;
+/* width: auto; */
 }
 
 .bagel-input label {
-	font-size: var(--bgl-label-font-size);
+font-size: var(--bgl-label-font-size);
 }
 
 /* multiline textarea: reset gradient, use full border */
 .bagel-input.underlined.text-input textarea {
-	background: transparent !important;
-	background-image: none !important;
-	background-size: unset !important;
+background: transparent !important;
+background-image: none !important;
+background-size: unset !important;
 }
+
 </style>
 
 <style scoped>
+
 .bagel-input textarea {
-	min-height: unset;
-	font-size: var(--bgl-input-font-size);
+min-height: unset;
+font-size: var(--bgl-input-font-size);
 }
 
 .bagel-input.text-input textarea {
-	resize: none;
+resize: none;
 }
 
 .code textarea {
-	font-family: 'Inconsolata', monospace;
-	background: var(--bgl-code-bg) !important;
-	color: var(--bgl-light-text) !important;
+font-family: 'Inconsolata', monospace;
+background: var(--bgl-code-bg) !important;
+color: var(--bgl-light-text) !important;
 }
 
 .code textarea::placeholder {
-	color: var(--bgl-light-text) !important;
-	opacity: 0.3;
+color: var(--bgl-light-text) !important;
+opacity: 0.3;
 }
 
 .bagel-input.small {
-	margin-bottom: 0;
-	height: 30px;
+margin-bottom: 0;
+height: 30px;
 }
 
 .bagel-input.dense label {
-	display: flex;
-	align-items: center;
-	gap: 0.5rem;
+display: flex;
+align-items: center;
+gap: 0.5rem;
 }
 
 .bagel-input input:disabled {
-	background: #f5f5f5;
+background: #f5f5f5;
 }
 
 .textInputIconWrap .bgl_icon-font {
-	color: var(--bgl-input-color);
-	position: absolute;
-	inset-inline-end: calc(var(--bgl-input-height) / 3 - 0.25rem);
-	margin-top: calc(var(--bgl-input-height) / 2 + 0.1rem);
-	line-height: 0;
+color: var(--bgl-input-color);
+position: absolute;
+inset-inline-end: calc(var(--bgl-input-height) / 3 - 0.25rem);
+margin-top: calc(var(--bgl-input-height) / 2 + 0.1rem);
+line-height: 0;
 }
 
 .textInputIconWrap input,
 .textInputIconWrap textarea {
-	padding-inline-end: calc(var(--bgl-input-height) / 3 + 1.5rem);
+padding-inline-end: calc(var(--bgl-input-height) / 3 + 1.5rem);
 }
 
 .txtInputIconStart .iconStart {
-	color: var(--bgl-input-color);
-	position: absolute;
-	inset-inline-start: calc(var(--bgl-input-height) / 3 - 0.25rem);
-	margin-top: calc(var(--bgl-input-height) / 2);
-	line-height: 0;
+color: var(--bgl-input-color);
+position: absolute;
+inset-inline-start: calc(var(--bgl-input-height) / 3 - 0.25rem);
+margin-top: calc(var(--bgl-input-height) / 2);
+line-height: 0;
 }
 
 .txtInputIconStart input,
 .txtInputIconStart textarea {
-	padding-inline-start: calc(var(--bgl-input-height) / 3 + 1.5rem);
+padding-inline-start: calc(var(--bgl-input-height) / 3 + 1.5rem);
 }
 
 .bagel-input.small textarea {
-	height: 30px;
+height: 30px;
 }
 
 .bagel-input.has-error input,
 .bagel-input.has-error textarea {
-	border-color: var(--bgl-red) !important;
+border-color: var(--bgl-red) !important;
 }
+
 </style>

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

@@ -51,29 +51,30 @@ onMounted(() => {
 </template>
 
 <style scoped>
+
 .bagel-input.bgl-toggle{
-    display: unset !important;
+display: unset !important;
 }
 .bagel-input.bgl-toggle *{
   cursor: pointer !important;
 }
 .bagel-input.bgl-toggle input{
-    padding:  unset !important;
-    min-width:  unset !important;
-    margin: 0 !important;
+padding:  unset !important;
+min-width:  unset !important;
+margin: 0 !important;
 }
 .bgl-toggle input {
-    appearance: none;
-    position: relative;
-    display: inline-block;
-    background: var(--bgl-input-bg);
-    height: calc(var(--bgl-input-height) / 2);
-    width: calc(var(--bgl-input-height) - 2px);
-    vertical-align: middle;
-    border-radius: 2rem;
-    box-shadow: 0px 1px 3px #0003 inset;
-    transition: 0.25s linear all;
-    outline: 1px solid var(--bgl-border-color);
+appearance: none;
+position: relative;
+display: inline-block;
+background: var(--bgl-input-bg);
+height: calc(var(--bgl-input-height) / 2);
+width: calc(var(--bgl-input-height) - 2px);
+vertical-align: middle;
+border-radius: 2rem;
+box-shadow: 0px 1px 3px #0003 inset;
+transition: 0.25s linear all;
+outline: 1px solid var(--bgl-border-color);
 
 }
 .bgl-toggle input::before {
@@ -109,15 +110,15 @@ onMounted(() => {
 }
 
 .bgl-toggle input:focus-visible {
-    outline: -webkit-focus-ring-color auto 1px;
-    outline-offset: 2px
+outline: -webkit-focus-ring-color auto 1px;
+outline-offset: 2px
 }
 .bgl-toggle input:focus {
-    outline-color: transparent;
+outline-color: transparent;
 }
 .bgl-toggle input:focus-visible {
-    outline: -webkit-focus-ring-color auto 1px;
-    outline-offset: 2px
+outline: -webkit-focus-ring-color auto 1px;
+outline-offset: 2px
 }
 .bgl-toggle :checked{
   background: var(--bgl-input-label-active-color, var(--bgl-primary));
@@ -126,25 +127,26 @@ onMounted(() => {
   margin-inline-start:calc(var(--bgl-input-height) / 2 - 2px) ;
 }
 .bgl-toggle input:checked + label {
-    color: var(--bgl-input-label-active-color, var(--bgl-primary)) !important;
+color: var(--bgl-input-label-active-color, var(--bgl-primary)) !important;
 }
 
 /* ── bgl-outline variant ── */
 .bgl-outline input {
-    outline: 1.5px solid var(--bgl-border-color) !important;
-    outline-offset: 2px;
+outline: 1.5px solid var(--bgl-border-color) !important;
+outline-offset: 2px;
 }
 
 /* ── frame variant ── */
 .frame input {
-    outline: 1.5px solid var(--bgl-border-color) !important;
-    outline-offset: 2px;
-    transition: outline-color 0.2s ease, box-shadow 0.2s ease;
-    background: transparent;
+outline: 1.5px solid var(--bgl-border-color) !important;
+outline-offset: 2px;
+transition: outline-color 0.2s ease, box-shadow 0.2s ease;
+background: transparent;
 }
 
 .frame input:checked {
-    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);
+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);
 }
+
 </style>

package/src/components/layout/AppContent.vue

@@ -73,53 +73,57 @@ const { isOpen, toggleMenu, sidebarCardStyle } = useAppLayout()
 </template>
 
 <style>
+
 .slide-fade-enter-from:has(.app-header),
 .slide-fade-leave-to:has(.app-header) {
-	transform: translateX(0) !important;
-	opacity: 1 !important;
+transform: translateX(0) !important;
+opacity: 1 !important;
 }
 
 .slide-fade-enter-from:has(.app-header) .pageContent,
 .slide-fade-leave-to:has(.app-header) .pageContent {
-	transform: translateX(-20px) !important;
-	opacity: 0 !important;
+transform: translateX(-20px) !important;
+opacity: 0 !important;
 }
 
 .slide-fade-enter-active:has(.app-header) .pageContent,
 .slide-fade-leave-active:has(.app-header) .pageContent {
-	transition: all 0.15s ease-in;
-	overflow: hidden;
+transition: all 0.15s ease-in;
+overflow: hidden;
 }
 body:has(.cardWrapSide) .pageContent,
 body:has(.cardWrapSide) .app-header {
-	padding-inline: 0 !important;
+padding-inline: 0 !important;
 }
 
 @media screen and (max-width: 910px) {
 
-	body:has(.cardWrapSide) .pageContent,
-	body:has(.cardWrapSide) .app-header {
-		padding-inline: 0.5rem !important;
-	}
+body:has(.cardWrapSide) .pageContent,
+body:has(.cardWrapSide) .app-header {
+	padding-inline: 0.5rem !important;
 }
+}
+
 </style>
 
 <style scoped>
+
 .app-content {
-	height: 100vh;
+height: 100vh;
 }
 
 .app-header {
-	flex-shrink: 0;
+flex-shrink: 0;
 }
 
 main {
-	min-height: 0;
+min-height: 0;
 }
 
 @media screen and (max-width: 910px) {
-	.app-header {
-		padding-inline: 0.5rem;
-	}
+.app-header {
+	padding-inline: 0.5rem;
 }
+}
+
 </style>

package/src/components/layout/AppLayout.vue

@@ -130,44 +130,46 @@ onUnmounted(() => {
 </template>
 
 <style scoped>
+
 .app-layout {
-	display: flex;
-	height: 100vh;
-	overflow: hidden;
+display: flex;
+height: 100vh;
+overflow: hidden;
 }
 .app-layout:has(.cardWrapSide) {
-	padding-inline-start: 0.5rem;
-	padding-inline-end: 1rem;
+padding-inline-start: 0.5rem;
+padding-inline-end: 1rem;
 }
 
 .app-layout:has(.sidebar-collapsed .cardWrapSide) {
-	padding-inline-start: 1.5rem;
+padding-inline-start: 1.5rem;
 }
 
 /* Overlay for mobile */
 .overlay {
-	position: fixed;
-	inset: 0;
-	background: rgba(0, 0, 0, 0.5);
-	z-index: 40;
+position: fixed;
+inset: 0;
+background: rgba(0, 0, 0, 0.5);
+z-index: 40;
 }
 
 /* Main Content */
 .main-content {
-	flex: 1;
-	overflow: hidden;
-	transition: margin-inline-start 400ms ease;
-		min-height: 100vh
-	}
+flex: 1;
+overflow: hidden;
+transition: margin-inline-start 400ms ease;
+	min-height: 100vh
+}
 
-	.page-content {
-		overflow: auto;
-	}
+.page-content {
+	overflow: auto;
+}
 @media screen and (max-width: 910px) {
-	.app-layout:has(.cardWrapSide),
-	.app-layout:has(.sidebar-collapsed .cardWrapSide) {
-		padding-inline-start: 0rem;
-		padding-inline-end: 0rem;
-	}
+.app-layout:has(.cardWrapSide),
+.app-layout:has(.sidebar-collapsed .cardWrapSide) {
+	padding-inline-start: 0rem;
+	padding-inline-end: 0rem;
 }
+}
+
 </style>