@bagelink/vue 0.0.1133 → 0.0.1135

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

@@ -232,18 +232,21 @@ const timezoneDisplay = $computed(() => {
 			</div>
 
 			<template #popper>
-				<div class="calendar-container">
-					<div class="calendar-section">
-						<div class="calendar-header">
+				<div
+					class="
+			 flex gap-075 p-05 m_flex-wrap calendar-container justify-content-center h-100p"
+				>
+					<div class="calendar-section border-end m_border-none pe-05 m_p-0">
+						<div class="flex space-between pb-1">
 							<template v-if="currentView === 'days'">
 								<Btn flat icon="chevron_left" @click="previousMonth" />
-								<div class="month-year-selector">
-									<button class="month-btn" @click="currentView = 'months'">
+								<div class="flex gap-05">
+									<Btn flat class="month-btn" @click="currentView = 'months'">
 										{{ currentMonthValue.formatted.month }}
-									</button>
-									<button class="year-btn" @click="currentView = 'years'">
+									</Btn>
+									<Btn flat class="year-btn" @click="currentView = 'years'">
 										{{ currentMonthValue.formatted.year }}
-									</button>
+									</Btn>
 								</div>
 								<Btn flat icon="chevron_right" @click="nextMonth" />
 							</template>
@@ -254,8 +257,11 @@ const timezoneDisplay = $computed(() => {
 							</template>
 						</div>
 
-						<div v-if="currentView === 'days'" class="calendar-grid">
-							<div v-for="day in ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat']" :key="day" class="weekday">
+						<div v-if="currentView === 'days'" class="calendar-grid grid gap-025">
+							<div
+								v-for="day in ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat']" :key="day" class=" txt-center
+							txt-12 opacity-6"
+							>
 								{{ day }}
 							</div>
 
@@ -263,7 +269,7 @@ const timezoneDisplay = $computed(() => {
 								v-for="(date, index) in currentMonthDays"
 								:key="index"
 								type="button"
-								class="day"
+								class="day aspect-ratio-1 flex align-items-center justify-content-center pointer round txt14 p-0"
 								:class="{
 									selected: isSelected(date),
 									today: isToday(date),
@@ -276,11 +282,11 @@ const timezoneDisplay = $computed(() => {
 							</button>
 						</div>
 
-						<div v-else-if="currentView === 'months'" class="month-grid">
+						<div v-else-if="currentView === 'months'" class="month-grid grid gap-05 p-05">
 							<button
 								v-for="month in months"
 								:key="month.value"
-								class="month-item"
+								class="month-item flex align-items-center justify-content-center pointer rounded p-05 txt14 border-none "
 								:class="{
 									selected: month.value === currentMonthValue.month,
 									disabled: month.disabled,
@@ -292,11 +298,11 @@ const timezoneDisplay = $computed(() => {
 							</button>
 						</div>
 
-						<div v-else class="year-grid">
+						<div v-else class="year-grid grid gap-05 p-0">
 							<button
 								v-for="year in years"
 								:key="year.value"
-								class="year-item"
+								class="year-item flex align-items-center justify-content-center pointer rounded p-05 txt14 border-none"
 								:class="{
 									selected: year.value === currentMonthValue.year,
 									disabled: year.disabled,
@@ -309,8 +315,8 @@ const timezoneDisplay = $computed(() => {
 						</div>
 					</div>
 
-					<div v-if="enableTime && currentView === 'days'" class="time-picker">
-						<div class="time-input-group">
+					<div v-if="enableTime && currentView === 'days'" class="time-picker flex column gap-1 w-120px">
+						<div class="flex gap-025 ">
 							<NumberInput
 								center
 								:model-value="hours"
@@ -321,7 +327,9 @@ const timezoneDisplay = $computed(() => {
 								:padZero="2"
 								@update:model-value="handleHourInput"
 							/>
-							<span>:</span>
+							<p class="pb-075">
+								:
+							</p>
 							<NumberInput
 								center
 								:model-value="minutes"
@@ -333,7 +341,7 @@ const timezoneDisplay = $computed(() => {
 								@update:model-value="handleMinuteInput"
 							/>
 						</div>
-						<span class="timezone-display">{{ timezoneDisplay }}</span>
+						<span class="txt-center opacity-6 txt14">{{ timezoneDisplay }}</span>
 						<Btn v-if="selectedDate" flat @click="isOpen = false">
 							Done
 						</Btn>
@@ -345,209 +353,79 @@ const timezoneDisplay = $computed(() => {
 </template>
 
 <style scoped>
-.bagel-input {
-	display: flex;
-	flex-direction: column;
-	gap: 0.5rem;
-	position: relative;
-}
-
-.date-picker-container {
-	position: relative;
-}
-
-.date-input {
-	padding: 0.5rem;
-	border: 1px solid #ddd;
-	border-radius: 4px;
-	font-size: 1rem;
-	width: 100%;
-	background: white;
-}
-
-.date-input:focus {
-	outline: none;
-	border-color: #4a90e2;
-	box-shadow: 0 0 0 2px rgba(74, 144, 226, 0.2);
-}
-
-.date-input:disabled {
-	background-color: #f5f5f5;
-	cursor: not-allowed;
-}
-
-.small .date-input {
-	padding: 0.25rem;
-	font-size: 0.875rem;
-}
-
-.required {
-	color: #ff4d4f;
-	margin-left: 4px;
+.calendar-container{
+	max-width: 90vw;
 }
-
-.calendar-popup {
-	background: white;
-	border: 1px solid #ddd;
-	border-radius: 4px;
-	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
-	padding: 1rem;
-}
-
-.calendar-container {
-	display: flex;
-	gap: 1rem;
-}
-
 .calendar-section {
-	width: 300px;
-}
-
-.calendar-header {
-	display: flex;
-	align-items: center;
-	justify-content: space-between;
-	margin-bottom: 1rem;
-}
-
-.month-year-selector {
-	display: flex;
-	gap: 0.5rem;
-	align-items: center;
-}
-
-.month-btn,
-.year-btn {
-	background: none;
-	border: none;
-	font-weight: 500;
-	cursor: pointer;
-	padding: 0.25rem 0.5rem;
-	border-radius: 4px;
-}
-
-.month-btn:hover,
-.year-btn:hover {
-	background-color: #f5f5f5;
+	min-width: 280px;
 }
 
 .calendar-grid {
-	display: grid;
 	grid-template-columns: repeat(7, 1fr);
-	gap: 0.25rem;
 }
 
 .month-grid {
-	display: grid;
 	grid-template-columns: repeat(3, 1fr);
 	grid-template-rows: repeat(4, 1fr);
-	gap: 0.5rem;
-	padding: 0.5rem;
 }
 
 .year-grid {
-	display: grid;
 	grid-template-columns: repeat(3, 1fr);
 	grid-template-rows: repeat(7, 1fr);
-	gap: 0.5rem;
-	padding: 0.5rem;
 }
 
 .month-item,
 .year-item {
-	display: flex;
-	align-items: center;
-	justify-content: center;
-	border: none;
 	background: none;
-	cursor: pointer;
-	border-radius: 4px;
-	font-size: 0.875rem;
-	color: #333;
-	padding: 0.5rem;
-	min-height: 2.5rem;
+	color: var(--bgl-text-color);
 }
 
 .month-item:hover:not(.disabled),
 .year-item:hover:not(.disabled) {
-	background-color: #f5f5f5;
+	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);
 }
 
 .month-item.selected,
 .year-item.selected {
-	background-color: #4a90e2;
+	background-color: var(--bgl-primary);
 	color: white;
 }
 
 .month-item.disabled,
 .year-item.disabled {
-	color: #ccc;
-	cursor: not-allowed;
-}
-
-.weekday {
-	text-align: center;
-	font-size: 0.875rem;
-	color: #666;
-	padding: 0.5rem 0;
+	opacity: 0.6;
+	filter: grayscale(0.3);
 }
 
 .day {
-	aspect-ratio: 1;
-	display: flex;
-	align-items: center;
-	justify-content: center;
 	border: none;
 	background: none;
-	cursor: pointer;
-	border-radius: 50%;
-	font-size: 0.875rem;
-	color: #333;
-	padding: 0;
+	color: var(--bgl-text-color);
 }
 
 .day:hover:not(.disabled) {
-	background-color: #f5f5f5;
+	background-color: var(--input-bg);
 }
 
 .day.selected {
-	background-color: #4a90e2;
-	color: white;
+	background-color: var(--bgl-primary);
+	color: var(--bgl-white);
 }
 
 .day.today:not(.selected) {
-	border: 1px solid #4a90e2;
+	border: 1px solid var(--bgl-primary);
 }
 
 .day.disabled {
-	color: #ccc;
-	cursor: not-allowed;
-}
-
-.timezone-display {
-	color: #666;
-	font-size: 0.875rem;
-	text-align: center;
-}
-
-.time-picker {
-	display: flex;
-	flex-direction: column;
-	gap: 1rem;
-	border-left: 1px solid #ddd;
-	width: 100px;
-	align-items: center;
-}
-
-.time-input-group {
-	display: flex;
-	align-items: center;
-	gap: 0.25rem;
-}
-
-.time-input-group span {
-	font-size: 1.25rem;
-	color: #666;
-	padding: 0 0.25rem;
+  opacity: 0.6;
+  filter: grayscale(0.3);
+  cursor: not-allowed;
 }
 </style>

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

@@ -102,7 +102,7 @@ watch(() => modelValue, (newVal) => {
 			txtInputIconStart: iconStart,
 		}"
 	>
-		<label :for="id">
+		<div :for="id">
 			{{ label }}
 			<div class="gap-025" :class="{ 'column flex': layout === 'vertical', 'flex': layout === 'horizontal' }">
 				<Btn v-if="layout && btnLayouts.includes(layout)" flat icon="add" class="radius" :class="[{ 'bgl-big-ctrl-num-btn': layout === 'vertical' }]" tabindex="-1" @click="increment" />
@@ -129,7 +129,9 @@ watch(() => modelValue, (newVal) => {
 					@keydown.up.prevent="increment"
 					@keydown.down.prevent="decrement"
 				>
-				<p v-if="helptext">{{ helptext }}</p>
+				<p v-if="helptext">
+					{{ helptext }}
+				</p>
 				<Icon
 					v-if="iconStart"
 					class="iconStart"
@@ -140,12 +142,13 @@ watch(() => modelValue, (newVal) => {
 					:icon
 				/>
 				<Btn v-if="layout && btnLayouts.includes(layout)" flat icon="remove" class="radius" :class="[{ 'bgl-big-ctrl-num-btn': layout === 'vertical' }]" tabindex="-1" @click="decrement" />
+
 				<div v-if="spinner && (!layout || !btnLayouts.includes(layout))" class="flex column spinner">
 					<Btn icon="add" flat thin class="bgl-ctrl-num-btn ctrl-add color-gray top-bgl-ctrl-num-btn" :disabled="!canAdd" tabindex="-1" @click="increment" />
 					<Btn icon="remove" flat thin class="bgl-ctrl-num-btn ctrl-remove color-gray" :disabled="!canDecrement" tabindex="-1" @click="decrement" />
 				</div>
 			</div>
-		</label>
+		</div>
 	</div>
 </template>