@bagelink/vue 1.15.15 → 1.15.26

package/src/components/form/inputs/CodeEditor/Index.vue

@@ -159,85 +159,89 @@ watch(() => props.modelValue, () => {
 </template>
 
 <style scoped>
+
 .code-editor-container {
-	margin-bottom: 0.5rem;
-	height: 100%;
+margin-bottom: 0.5rem;
+height: 100%;
 }
 
 .label {
-	display: block;
-	text-align: left;
-	margin-bottom: 0.25rem;
+display: block;
+text-align: left;
+margin-bottom: 0.25rem;
 }
 
 .code-editor-grandpa {
-	border-radius: var(--code-border-radius, 0.25rem);
-	width: 100%;
-	height: 100%;
-	overflow: auto;
-	padding: 1ch;
-	padding-inline-start: 2ch;
+border-radius: var(--code-border-radius, 0.25rem);
+width: 100%;
+height: 100%;
+overflow: auto;
+padding: 1ch;
+padding-inline-start: 2ch;
 }
 
 .code-editor-grandpa:focus-within {
-	outline: solid 1px var(--bgl-border-color, #4f575f);
-	box-shadow: inset 0 0 10px rgba(0, 0, 0, 0.13);
+outline: solid 1px var(--bgl-border-color, #4f575f);
+box-shadow: inset 0 0 10px rgba(0, 0, 0, 0.13);
 }
 
 .editor-content-papa {
-	position: relative;
-	width: 100%;
-		min-height: 100%;
+position: relative;
+width: 100%;
+	min-height: 100%;
 }
 
 .code-display,
 .code-input {
-	inset: 0;
-	margin: 0;
-	padding: 0;
-	width: 100%;
-	height: 100%;
-	font-family: monospace;
-	font-size: 1em;
-	line-height: 1.5;
-	tab-size: 2;
-	word-break: keep-all;
-	text-align: left;
+inset: 0;
+margin: 0;
+padding: 0;
+width: 100%;
+height: 100%;
+font-family: monospace;
+font-size: 1em;
+line-height: 1.5;
+tab-size: 2;
+word-break: keep-all;
+text-align: left;
 }
 
 .code-display {
-	position: relative;
-	pointer-events: none;
-	z-index: 1;
+position: relative;
+pointer-events: none;
+z-index: 1;
 }
 
 .code-display code {
-	display: block;
-	background: transparent !important;
-	padding: 0 !important;
+display: block;
+background: transparent !important;
+padding: 0 !important;
 }
 
 .code-input {
-	position: absolute;
-	background: transparent;
-	color: transparent;
-	caret-color: #fff;
-	border: none;
-	resize: none;
-	outline: none;
-	z-index: 2;
+position: absolute;
+background: transparent;
+color: transparent;
+caret-color: #fff;
+border: none;
+resize: none;
+outline: none;
+z-index: 2;
 }
 
 .code-input::selection {
-	background-color: rgba(36, 102, 188, 0.3);
-	color: transparent;
+background-color: rgba(36, 102, 188, 0.3);
+color: transparent;
 }
+
 </style>
 
 <style>
+
 /* Global styles */
 pre code.hljs {
-	padding: 0 !important;
-	background: transparent !important;
+padding: 0 !important;
+background: transparent !important;
 }
+
 </style>

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

@@ -69,73 +69,75 @@ watch(
 </template>
 
 <style>
+
 .colorInputPick {
-	--bgl-input-font-size: 12px;
-	background: transparent !important;
-	height: var(--bgl-input-height) !important;
-	min-width: 50px !important;
-	outline: none !important;
+--bgl-input-font-size: 12px;
+background: transparent !important;
+height: var(--bgl-input-height) !important;
+min-width: 50px !important;
+outline: none !important;
 }
 
 .colorInputPick:focus,
 .colorInputPick:focus-visible {
-	outline: none !important;
-	box-shadow: none !important;
+outline: none !important;
+box-shadow: none !important;
 }
 
 .bagel-input:not(.frame):not(.bgl-outline):not(.underlined) .colorInputPickWrap:focus-within {
-	box-shadow: inset 0 0 10px #00000021;
+box-shadow: inset 0 0 10px #00000021;
 }
 
 /* ── frame: transparent bg, outline that highlights on focus ── */
 .bagel-input.frame .colorInputPickWrap {
-	background: transparent !important;
-	outline: 1.5px solid var(--bgl-border-color);
-	outline-offset: -1px;
-	transition: outline-color 0.2s ease, box-shadow 0.2s ease;
+background: transparent !important;
+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 .colorInputPickWrap:focus-within {
-	outline-color: var(--bgl-input-label-active-color, var(--bgl-primary));
-	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));
+box-shadow: 0 0 0 3px color-mix(in srgb, var(--bgl-input-label-active-color, var(--bgl-primary)) 12%, transparent);
 }
 
 /* ── bgl-outline: border only ── */
 .bagel-input.bgl-outline .colorInputPickWrap {
-	outline: 1.5px solid var(--bgl-border-color);
-	outline-offset: -1px;
+outline: 1.5px solid var(--bgl-border-color);
+outline-offset: -1px;
 }
 
 /* ── underlined: suppress global border-bottom on inner inputs ── */
 .bagel-input.underlined .colorInputPickWrap input {
-	border-bottom: none !important;
-	border-radius: 0 !important;
-	padding-inline: 0.25rem !important;
+border-bottom: none !important;
+border-radius: 0 !important;
+padding-inline: 0.25rem !important;
 }
 
 /* ── underlined: bottom border only on the wrap itself ── */
 .bagel-input.underlined .colorInputPickWrap {
-	background: transparent !important;
-	border-radius: 0 !important;
-	outline: none !important;
-	border-bottom: 1.5px solid var(--bgl-border-color);
-	transition: border-color 0.25s ease;
-	position: relative;
+background: transparent !important;
+border-radius: 0 !important;
+outline: none !important;
+border-bottom: 1.5px solid var(--bgl-border-color);
+transition: border-color 0.25s ease;
+position: relative;
 }
 
 /* animated fill line — matches the global underlined ::after pattern */
 .bagel-input.underlined .colorInputPickWrap::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 .colorInputPickWrap:focus-within::after {
-	width: 100%;
+width: 100%;
 }
+
 </style>

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

@@ -231,7 +231,9 @@ onMounted(() => {
 </template>
 
 <style>
+
 .date-picker-container {
-	width: 100%;
+width: 100%;
 }
+
 </style>

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

@@ -447,108 +447,110 @@ function selectDate(date: Date | null) {
 </template>
 
 <style scoped>
+
 .calendar-container {
-	max-width: 90vw;
-	border-radius: var(--bgl-card-border-radius);
-	background: var(--bgl-box-bg);
+max-width: 90vw;
+border-radius: var(--bgl-card-border-radius);
+background: var(--bgl-box-bg);
 }
 
 .calendar-section {
-	min-width: 280px;
+min-width: 280px;
 }
 
 .calendar-grid {
-	grid-template-columns: repeat(7, 1fr);
+grid-template-columns: repeat(7, 1fr);
 }
 
 .month-grid {
-	grid-template-columns: repeat(3, 1fr);
-	grid-template-rows: repeat(4, 1fr);
+grid-template-columns: repeat(3, 1fr);
+grid-template-rows: repeat(4, 1fr);
 }
 
 .year-grid {
-	grid-template-columns: repeat(3, 1fr);
-	grid-template-rows: repeat(6, 1fr);
+grid-template-columns: repeat(3, 1fr);
+grid-template-rows: repeat(6, 1fr);
 }
 
 .month-item,
 .year-item {
-	background: none;
-	color: var(--bgl-text-color);
+background: none;
+color: var(--bgl-text-color);
 }
 
 .month-item:hover:not(.disabled),
 .year-item:hover:not(.disabled) {
-	background: var(--bgl-box-bg);
-	filter: var(--bgl-hover-filter);
+background: var(--bgl-box-bg);
+filter: var(--bgl-hover-filter);
 }
 
 .month-item:active:not(.disabled),
 .year-item:active:not(.disabled) {
-	background: var(--bgl-box-bg);
-	filter: var(--bgl-active-filter);
+background: var(--bgl-box-bg);
+filter: var(--bgl-active-filter);
 }
 
 .month-item.selected,
 .year-item.selected {
-	background-color: var(--bgl-primary);
-	color: white;
+background-color: var(--bgl-primary);
+color: white;
 }
 
 .month-item.disabled,
 .year-item.disabled {
-	opacity: 0.6;
-	filter: grayscale(0.3);
+opacity: 0.6;
+filter: grayscale(0.3);
 }
 
 .day {
-	border: none;
-	background: none;
-	color: var(--bgl-text-color);
+border: none;
+background: none;
+color: var(--bgl-text-color);
 }
 
 .day:hover:not(.disabled) {
-	background-color: var(--bgl-input-bg);
-	color: var(--bgl-text-color);
-	outline: 1px solid var(--bgl-border-color);
+background-color: var(--bgl-input-bg);
+color: var(--bgl-text-color);
+outline: 1px solid var(--bgl-border-color);
 }
 
 .day:hover:not(.disabled).selected {
-	filter: var(--bgl-hover-filter);
-	background-color: var(--bgl-primary);
-	color: var(--bgl-white);
+filter: var(--bgl-hover-filter);
+background-color: var(--bgl-primary);
+color: var(--bgl-white);
 }
 
 .day.selected {
-	background-color: var(--bgl-primary);
-	color: var(--bgl-white);
+background-color: var(--bgl-primary);
+color: var(--bgl-white);
 }
 
 .day.today:not(.selected) {
-	border: 1px solid var(--bgl-primary);
+border: 1px solid var(--bgl-primary);
 }
 
 .day.disabled {
-	opacity: 0.6;
-	filter: grayscale(0.3);
-	cursor: not-allowed;
+opacity: 0.6;
+filter: grayscale(0.3);
+cursor: not-allowed;
 }
 
 .day.not-in-month {
-	opacity: 0.4;
+opacity: 0.4;
 }
 
 .day.highlighted:not(.selected) {
-	background-color: var(--bgl-secondary-light, rgba(var(--bgl-primary-rgb, 0, 123, 255), 0.15));
-	font-weight: 500;
+background-color: var(--bgl-secondary-light, rgba(var(--bgl-primary-rgb, 0, 123, 255), 0.15));
+font-weight: 500;
 }
 
 .day.highlighted.selected {
-	/* Add a subtle ring effect for dates that are both selected and highlighted */
-	box-shadow: 0 0 0 2px var(--bgl-secondary, rgba(var(--bgl-primary-rgb, 0, 123, 255), 0.5));
+/* Add a subtle ring effect for dates that are both selected and highlighted */
+box-shadow: 0 0 0 2px var(--bgl-secondary, rgba(var(--bgl-primary-rgb, 0, 123, 255), 0.5));
 }
 
 .day.highlighted:not(.selected):hover {
-	background-color: var(--bgl-secondary-light-hover, rgba(var(--bgl-primary-rgb, 0, 123, 255), 0.25));
+background-color: var(--bgl-secondary-light-hover, rgba(var(--bgl-primary-rgb, 0, 123, 255), 0.25));
 }
+
 </style>

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

@@ -375,138 +375,142 @@ onMounted(() => {
 </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);
 }
 
 .bagel-input.format-invalid,
 .bagel-input.format-valid,
 .bagel-input.format-empty {
-	position: relative;
+position: relative;
 }
 
 .bagel-input.format-invalid::after {
-	content: '';
-	position: absolute;
-	width: 7px;
-	height: 7px;
-	border-radius: 50%;
-	background: var(--bgl-orange);
-	right: 0.6rem;
-	bottom: calc(var(--bgl-input-height) / 2 - 3.5px);
-	pointer-events: none;
+content: '';
+position: absolute;
+width: 7px;
+height: 7px;
+border-radius: 50%;
+background: var(--bgl-orange);
+right: 0.6rem;
+bottom: calc(var(--bgl-input-height) / 2 - 3.5px);
+pointer-events: none;
 }
 
 .bagel-input.format-invalid.textInputIconWrap::after,
 .bagel-input.format-valid.textInputIconWrap::after,
 .bagel-input.format-empty.textInputIconWrap::after {
-	right: calc(var(--bgl-input-height) / 3 + 1.8rem);
+right: calc(var(--bgl-input-height) / 3 + 1.8rem);
 }
 
 .bagel-input.format-empty::after {
-	content: '';
-	position: absolute;
-	width: 7px;
-	height: 7px;
-	border-radius: 50%;
-	background: var(--bgl-gray, #aaa);
-	right: 0.6rem;
-	bottom: calc(var(--bgl-input-height) / 2 - 3.5px);
-	pointer-events: none;
+content: '';
+position: absolute;
+width: 7px;
+height: 7px;
+border-radius: 50%;
+background: var(--bgl-gray, #aaa);
+right: 0.6rem;
+bottom: calc(var(--bgl-input-height) / 2 - 3.5px);
+pointer-events: none;
 }
 
 .bagel-input.format-valid {
-	position: relative;
+position: relative;
 }
 
 .bagel-input.format-valid::after {
-	content: '';
-	position: absolute;
-	width: 7px;
-	height: 7px;
-	border-radius: 50%;
-	background: var(--bgl-green);
-	right: 0.6rem;
-	bottom: calc(var(--bgl-input-height) / 2 - 3.5px);
-	pointer-events: none;
+content: '';
+position: absolute;
+width: 7px;
+height: 7px;
+border-radius: 50%;
+background: var(--bgl-green);
+right: 0.6rem;
+bottom: calc(var(--bgl-input-height) / 2 - 3.5px);
+pointer-events: none;
 }
+
 </style>
 
 <style scoped>
+
 .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;
 }
 
 .bagel-input label {
-	font-size: var(--bgl-label-font-size);
+font-size: var(--bgl-label-font-size);
 }
 
 /* email input is always LTR — use physical properties so icons stay in the correct
    visual position regardless of the document's text direction */
 .textInputIconWrap .bgl_icon-font {
-	color: var(--bgl-input-color);
-	position: absolute;
-	right: 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;
+right: calc(var(--bgl-input-height) / 3 - 0.25rem);
+margin-top: calc(var(--bgl-input-height) / 2 + 0.1rem);
+line-height: 0;
 }
 
 .textInputIconWrap input {
-	padding-right: calc(var(--bgl-input-height) / 3 + 1.5rem);
+padding-right: calc(var(--bgl-input-height) / 3 + 1.5rem);
 }
 
 .txtInputIconStart .iconStart {
-	color: var(--bgl-input-color);
-	position: absolute;
-	left: 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;
+left: calc(var(--bgl-input-height) / 3 - 0.25rem);
+margin-top: calc(var(--bgl-input-height) / 2);
+line-height: 0;
 }
 
 .txtInputIconStart input {
-	padding-left: calc(var(--bgl-input-height) / 3 + 1.5rem);
+padding-left: calc(var(--bgl-input-height) / 3 + 1.5rem);
 }
 
 .bagel-input.small textarea {
-	height: 30px;
+height: 30px;
 }
 
 .suggestion a {
-	font-weight: bold;
-	text-decoration: underline;
-	cursor: pointer;
+font-weight: bold;
+text-decoration: underline;
+cursor: pointer;
 }
 
 .validating {
-	margin-top: 0.25rem;
-	font-size: 0.8rem;
-	color: var(--bgl-gray);
-	font-style: italic;
+margin-top: 0.25rem;
+font-size: 0.8rem;
+color: var(--bgl-gray);
+font-style: italic;
 }
 
 .is-validating input {
-	border-color: var(--bgl-primary-tint);
-	background-color: rgba(var(--bgl-primary-rgb), 0.05);
+border-color: var(--bgl-primary-tint);
+background-color: rgba(var(--bgl-primary-rgb), 0.05);
 }
 
 .bagel-input.has-error input {
-	border-color: var(--bgl-red) !important;
+border-color: var(--bgl-red) !important;
 }
+
 </style>

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

@@ -48,11 +48,13 @@ function handleInput(e: Event) {
 </template>
 
 <style scoped>
+
 .bagel-input textarea {
-	font-family: monospace;
+font-family: monospace;
 }
 
 [dir='rtl'] .bagel-input textarea {
-	direction: ltr;
+direction: ltr;
 }
+
 </style>

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

@@ -122,7 +122,9 @@ defineExpose({	html })
 </template>
 
 <style scoped>
+
 .markdown-editor {
-	width: 100%;
+width: 100%;
 }
+
 </style>