@bagelink/vue 0.0.1220 → 0.0.1224

package/src/components/form/BagelForm.vue

@@ -8,7 +8,7 @@ export interface BagelFormProps<_T> {
 	modelValue?: _T
 	schema?: BglFormSchemaFnT<_T>
 	tag?: 'form' | 'template'
-	onSubmit?: (data: _T) => Promise<void>
+	onSubmit?: (data: _T) => Promise<void> | void
 }
 
 const props = withDefaults(defineProps<BagelFormProps<T>>(), {

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

@@ -17,6 +17,8 @@ const props = withDefaults(
 		mode?: modeType
 		firstDayOfWeek?: WEEK_START_DAY
 		locale?: string
+		center?: boolean
+
 	}>(),
 	{
 		enableTime: false,
@@ -40,7 +42,7 @@ const time = new Time(props.firstDayOfWeek, props.locale)
 function formatDisplayDate(date: Date | string | undefined): string {
 	if (!date) return ''
 	const dateObj = typeof date === 'string' ? new Date(date) : date
-	
+
 	if (props.enableTime) {
 		return dateObj.toLocaleString(props.locale || undefined, {
 			year: 'numeric',
@@ -51,7 +53,7 @@ function formatDisplayDate(date: Date | string | undefined): string {
 			timeZone: props.timezone
 		})
 	}
-	
+
 	return dateObj.toLocaleString(props.locale || undefined, {
 		year: 'numeric',
 		month: 'short',
@@ -260,6 +262,8 @@ function isNotInMonth(date: Date) {
 						:required="required"
 						:disabled="!editMode"
 						class="date-input"
+						:class="{
+							'txt-center': center }"
 						readonly
 						@click="isOpen = true"
 					>

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

@@ -32,7 +32,7 @@ const hours = Array.from({ length: 18 }, (_, index) => {
 
 <template>
 	<div class="datetime-wrap">
-		<div class="date-wrap">
+		<!-- <div class="date-wrap">
 			<VDatepicker
 				v-model="selectedDate"
 				inline
@@ -48,7 +48,7 @@ const hours = Array.from({ length: 18 }, (_, index) => {
 				<template #action-buttons />
 				<template #action-preview />
 			</VDatepicker>
-		</div>
+		</div> -->
 		<div v-if="showTimeWrap" class="time-wrap">
 			<template v-for="hr in hours" :key="hr">
 				<input

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

@@ -100,7 +100,7 @@ function formatNumber(num: number) {
 
 let formattedValue = $ref('')
 function inputHandler() {
-	let numeric = formattedValue.replace(/[^\d.-]/g, '')
+	const numeric = formattedValue.replace(/[^\d.-]/g, '')
 	const emptyValue = ['', '-', '.'].includes(numeric)
 	if (numeric === '-.' || numeric.endsWith('.') || emptyValue) return
 
@@ -129,7 +129,7 @@ watch(() => modelValue, (newVal) => {
 		}"
 	>
 		<div :for="id">
-			<label v-if="label">
+			<label v-if="label" class="block">
 				{{ label }}
 			</label>
 			<div class="gap-025" :class="{ 'column flex': layout === 'vertical', 'flex': layout === 'horizontal' }">

package/src/components/index.ts

@@ -36,6 +36,7 @@ export { default as NavBar } from './NavBar.vue'
 export { default as PageTitle } from './PageTitle.vue'
 export { default as Pill } from './Pill.vue'
 export { default as RouterWrapper } from './RouterWrapper.vue'
+export { default as Spreadsheet } from './Spreadsheet/Index.vue'
 export { default as Title } from './Title.vue'
 export { default as ToolBar } from './ToolBar.vue'
 export { default as TopBar } from './TopBar.vue'

package/src/styles/buttons.css

@@ -1,132 +1,140 @@
 .bgl_btn,
 .bgl_flatBtn,
 .bgl_btn-icon {
-	font-family: inherit;
-	white-space: nowrap;
-	cursor: pointer;
-	box-sizing: border-box;
-	user-select: none;
-	border: none;
-	transition: var(--bgl-transition);
-	border-radius: var(--btn-border-radius);
-	line-height: var(--btn-height);
-	font-size: var(--input-font-size);
-	display: inline-block;
-	height: var(--btn-height);
-	padding: 0;
+    font-family: inherit;
+    white-space: nowrap;
+    cursor: pointer;
+    box-sizing: border-box;
+    user-select: none;
+    border: none;
+    transition: var(--bgl-transition);
+    border-radius: var(--btn-border-radius);
+    line-height: var(--btn-height);
+    font-size: var(--input-font-size);
+    display: inline-block;
+    height: var(--btn-height);
+    padding: 0;
 }
 
 .btn-close {
-	margin-top: -20px;
-	margin-inline-end: -20px;
-	margin-inline-start: auto;
-	margin-bottom: 15px;
-	transition: var(--bgl-transition);
-	height: 30px;
-	width: 30px;
-	opacity: 0.6;
-	cursor: pointer;
-	border-radius: 100%;
-	outline: 2px solid transparent;
-	display: flex;
-	align-items: center;
-	justify-content: center;
+    margin-top: -20px;
+    margin-inline-end: -20px;
+    margin-inline-start: auto;
+    margin-bottom: 15px;
+    transition: var(--bgl-transition);
+    height: 30px;
+    width: 30px;
+    opacity: 0.6;
+    cursor: pointer;
+    border-radius: 100%;
+    outline: 2px solid transparent;
+    display: flex;
+    align-items: center;
+    justify-content: center;
 }
 
 .btn-close:hover {
-	background: var(--bgl-gray-light);
-	opacity: 1;
+    background: var(--bgl-gray-light);
+    opacity: 1;
 }
 
 .btn-close:active {
-	background: var(--bgl-gray);
+    background: var(--bgl-gray);
 }
 
 .btn-close::before {
-	content: 'close';
-	font-family: 'Material Symbols Outlined', serif;
+    content: 'close';
+    font-family: 'Material Symbols Outlined', serif;
 }
 
 .bgl_btn.thin {
-	height: calc(var(--btn-height) * 0.7);
-	line-height: calc(var(--btn-height) * 0.7);
+    height: calc(var(--btn-height) * 0.7);
+    line-height: calc(var(--btn-height) * 0.7);
 }
 
 .hover {
-	cursor: pointer;
-	transition: all 400ms ease;
+    cursor: pointer;
+    transition: all 400ms ease;
 }
 
 .hover:hover {
-	filter: brightness(90%);
+    filter: brightness(90%);
 }
 
 .hover:active {
-	filter: brightness(80%);
+    filter: brightness(80%);
 }
 
 .border {
-	border: 1px solid var(--border-color);
+    border: 1px solid var(--border-color);
 }
 
 .border-primary {
-	border: 1px solid var(--bgl-primary);
+    border: 1px solid var(--bgl-primary);
+}
+
+.outline {
+    outline: 1px solid var(--border-color);
+}
+
+.outline-primary {
+    outline: 1px solid var(--bgl-primary);
 }
 
 .rotate-270 {
-	transform: rotate(270deg);
+    transform: rotate(270deg);
 }
 
 .rotate-180 {
-	transform: rotate(180deg);
+    transform: rotate(180deg);
 }
 
 .rotate-90 {
-	transform: rotate(90deg);
+    transform: rotate(90deg);
 }
 
 .rotate-0 {
-	transform: rotate(0deg);
+    transform: rotate(0deg);
 }
 
 @media screen and (max-width: 910px) {
-	.bgl_btn {
-		padding: 0 20px;
-	}
+    .bgl_btn {
+        padding: 0 20px;
+    }
 
-	.m_border {
-		border: 1px solid var(--border-color);
-	}
+    .m_border {
+        border: 1px solid var(--border-color);
+    }
 
-	.m_rotate-270 {
-		transform: rotate(270deg);
-	}
+    .m_rotate-270 {
+        transform: rotate(270deg);
+    }
 
-	.m_rotate-180 {
-		transform: rotate(180deg);
-	}
+    .m_rotate-180 {
+        transform: rotate(180deg);
+    }
 
-	.m_rotate-90 {
-		transform: rotate(90deg);
-	}
+    .m_rotate-90 {
+        transform: rotate(90deg);
+    }
 
-	.m_rotate-0 {
-		transform: rotate(0deg);
-	}
+    .m_rotate-0 {
+        transform: rotate(0deg);
+    }
 }
 
 .ripple {
-	position: absolute;
-	border-radius: 50%;
-	transform: scale(0);
-	background: rgba(0, 0, 0, 0.3);
-	pointer-events: none;
-	animation: rippleEffect 0.6s ease-out;
+    position: absolute;
+    border-radius: 50%;
+    transform: scale(0);
+    background: rgba(0, 0, 0, 0.3);
+    pointer-events: none;
+    animation: rippleEffect 0.6s ease-out;
 }
 
 @keyframes rippleEffect {
-	to {
-		transform: scale(4);
-		opacity: 0;
-	}
-}
+    to {
+        transform: scale(4);
+        opacity: 0;
+    }
+}

package/src/styles/layout.css

@@ -55,6 +55,27 @@
     aspect-ratio: 1;
 }
 
+.vertical-align-middle,
+.vertical-middle {
+    vertical-align: middle;
+}
+
+.vertical-align-top,
+.vertical-top {
+    vertical-align: top;
+}
+
+.vertical-align-bottom,
+.vertical-bottom {
+    vertical-align: bottom;
+}
+
+.vertical-align-baseline,
+.vertical-baseline {
+    vertical-align: baseline;
+}
+
+
 .flex-center {
     justify-content: center;
     align-items: center;
@@ -5380,6 +5401,10 @@
     justify-content: space-between;
 }
 
+.space-evenly {
+    justify-content: space-evenly;
+}
+
 .label {
     display: block;
     font-size: var(--label-font-size);

package/src/styles/mobilLayout.css

@@ -80,6 +80,27 @@
         aspect-ratio: 1;
     }
 
+    .m_vertical-align-middle,
+    .m_vertical-middle {
+        vertical-align: middle;
+    }
+
+    .m_vertical-align-top,
+    .m_vertical-top {
+        vertical-align: top;
+    }
+
+    .m_vertical-align-bottom,
+    .m_vertical-bottom {
+        vertical-align: bottom;
+    }
+
+    .m_vertical-align-baseline,
+    .m_vertical-baseline {
+        vertical-align: baseline;
+    }
+
+
     .m_flex-center {
         justify-items: center;
         align-items: center;
@@ -4635,6 +4656,10 @@
         justify-content: space-between;
     }
 
+    .m_space-evenly {
+        justify-content: space-evenly;
+    }
+
     .m_label {
         display: block;
         font-size: var(--label-font-size);

package/src/styles/text.css

@@ -258,6 +258,46 @@
     font-weight: 900;
 }
 
+.line-height-0 {
+    line-height: 0;
+}
+
+.line-height-01 {
+    line-height: 0.1;
+}
+
+.line-height-02 {
+    line-height: 0.2;
+}
+
+.line-height-03 {
+    line-height: 0.3;
+}
+
+.line-height-04 {
+    line-height: 0.4;
+}
+
+.line-height-05 {
+    line-height: 0.5;
+}
+
+.line-height-06 {
+    line-height: 0.6;
+}
+
+.line-height-07 {
+    line-height: 0.7;
+}
+
+.line-height-08 {
+    line-height: 0.8;
+}
+
+.line-height-09 {
+    line-height: 0.9;
+}
+
 .line-height-1 {
     line-height: 1;
 }
@@ -417,6 +457,7 @@
 }
 
 @media screen and (max-width: 910px) {
+
     .txt20,
     .txt-20 {
         font-size: 18px;
@@ -692,6 +733,46 @@
         font-weight: 900;
     }
 
+    .m_line-height-0 {
+        line-height: 0;
+    }
+
+    .m_line-height-01 {
+        line-height: 0.1;
+    }
+
+    .m_line-height-02 {
+        line-height: 0.2;
+    }
+
+    .m_line-height-03 {
+        line-height: 0.3;
+    }
+
+    .m_line-height-04 {
+        line-height: 0.4;
+    }
+
+    .m_line-height-05 {
+        line-height: 0.5;
+    }
+
+    .m_line-height-06 {
+        line-height: 0.6;
+    }
+
+    .m_line-height-07 {
+        line-height: 0.7;
+    }
+
+    .m_line-height-08 {
+        line-height: 0.8;
+    }
+
+    .m_line-height-09 {
+        line-height: 0.9;
+    }
+
     .m_line-height-1 {
         line-height: 1;
     }
@@ -833,4 +914,4 @@
     .m_capitalize {
         text-transform: capitalize;
     }
-}
+}