@bagelink/vue 0.0.511 → 0.0.522

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

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-defineProps<{
+const props = defineProps<{
 	label?: string
 	id?: string
 	title?: string
@@ -7,18 +7,25 @@ defineProps<{
 	required?: boolean
 }>()
 
+const inputId = $ref(props.id || Math.random().toString(36).substring(7))
+
 const checked = defineModel<boolean>('modelValue', { default: false })
 </script>
 
 <template>
-	<div class="bagel-input bgl-checkbox" :title="title" :class="{ small }">
-		<div class="check-square" :class="{ checked }" @click="checked = !checked">
-			<svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 -960 960 960" width="24">
-				<path d="M382-240 154-468l57-57 171 171 367-367 57 57-424 424Z" />
-			</svg>
-		</div>
-		<label>
-			<input :id="id" v-model="checked" :required="required" type="checkbox">
+	<div
+		class="bagel-input bgl-checkbox align-items-center ps-025"
+		:title="title"
+		:class="{ small }"
+	>
+		<input
+			:id="inputId"
+			v-model="checked"
+			:required="required"
+			type="checkbox"
+			class="me-05"
+		>
+		<label :for="inputId">
 			<slot name="label">
 				{{ label }}
 			</slot>
@@ -26,75 +33,44 @@ const checked = defineModel<boolean>('modelValue', { default: false })
 	</div>
 </template>
 
-<style>
-:root {
-  --bgl-white: #fff;
-  --input-height: 40px;
-  --input-border-radius: 7px;
-  --bgl-transition: all 200ms ease;
-  --bgl-primary: #19b8ea;
-
-}
-</style>
-
 <style scoped>
 .bgl-checkbox {
-  position: relative;
-  display: flex;
-  flex-direction: row;
-  align-items: center;
-}
-
-.bgl-checkbox input[type=checkbox] {
-  position: absolute;
-  opacity: 0;
-  z-index: -1;
+	flex-direction: row;
+	cursor: pointer;
 }
-
-.bgl-checkbox label {
-  padding-inline-start: 0.5rem;
-  transition: var(--bgl-transition);
-  cursor: pointer;
-  user-select: none;
-  font-size: var(--input-font-size);
+.bgl-checkbox input[type='checkbox'] {
+	accent-color: var(--bgl-primary);
+	height: calc(var(--input-height) / 2.75);
+	width: calc(var(--input-height) / 2.75);
+	min-width: 0;
 }
-
-.bgl-checkbox:hover {
-  filter: brightness(95%);
+.bgl-checkbox input[type='checkbox']::before {
+	content: '';
+	height: calc(var(--input-height) / 2.75);
+	width: calc(var(--input-height) / 2.75);
+	background: var(--bgl-primary);
+	border-radius: 100%;
+	opacity: 0;
+	transition: all 200ms ease;
+	position: absolute;
 }
-
-.bgl-checkbox:active {
-  filter: var(--bgl-active-filter);
+.bgl-checkbox input[type='checkbox']:hover::before {
+	opacity: 0.2;
+	transform: scale(2);
 }
-
-.bgl-checkbox .check-square {
-  width: calc(var(--input-height) / 2.5);
-  height: calc(var(--input-height) / 2.5);
-  background: var(--bgl-white);
-  border-radius: calc(var(--input-border-radius) / 2);
-  border: var(--bgl-primary) 1px solid;
-  position: relative;
-  display: flex;
-  align-items: center;
-  justify-content: center;
+.bgl-checkbox label {
+	cursor: pointer;
+	user-select: none;
+	font-size: var(--input-font-size);
+	transition: var(--bgl-transition-400);
 }
-
-.check-square.checked {
-  background: var(--bgl-primary);
+.bgl-checkbox:hover label {
+  color: var(--bgl-primary) !important;
 }
-
-.bgl-checkbox svg {
-  width: calc(var(--input-height) / 2.5);
-  height: calc(var(--input-height) / 2.5);
-  position: absolute;
-  z-index: 2;
-  fill: var(--bgl-white);
-  pointer-events: none;
-  transform: scale(0);
-  transition: var(--bgl-transition);
+.bgl-checkbox input:checked + label{
+	color: var(--bgl-primary) !important;
 }
-
-.check-square.checked svg {
-  transform: scale(1);
+.bagel-input:focus-within.bgl-checkbox:not(:checked) label {
+    color: var(--label-color) !important;
 }
 </style>

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

@@ -12,6 +12,10 @@ const props = withDefaults(
 		modelValue?: string | Date
 		defaultValue?: string | Date
 		extraProps?: VueDatePickerProps
+		allowedDates?: string[] | Date[]
+		timePickerInline?: boolean
+		minutesIncrement?: string | number
+		minutesGridIncrement?: string | number
 	}>(),
 	{
 		enableTime: false,
@@ -59,7 +63,12 @@ onMounted(() => {
 			v-model="date"
 			:auto-apply="true"
 			:enable-time-picker="enableTime"
+			:allowed-dates="allowedDates"
 			v-bind="extraProps"
+			:time-picker-inline="timePickerInline"
+			:minutes-increment="minutesIncrement"
+			:minutes-grid-increment="minutesGridIncrement"
+			:start-time="{ hours: 8, minutes: 0 }"
 		/>
 	</div>
 </template>

package/src/components/layout/TabsNav.vue

@@ -1,12 +1,12 @@
 <script setup lang="ts">
-import { Icon } from '@bagelink/vue'
+import { Icon, type MaterialIcons } from '@bagelink/vue'
 import { nextTick, onBeforeUnmount, onMounted, ref, watch } from 'vue'
 import { useTabs } from './tabsManager'
 
 interface TabType {
 	id?: string
 	label?: string
-	icon?: string
+	icon?: MaterialIcons
 }
 
 const props = defineProps<{

package/src/styles/appearance.css

@@ -431,6 +431,39 @@
     box-shadow: 0 1px 5px 0 rgba(0, 0, 0, .1), 0 1px 2px -1px rgba(0, 0, 0, .1) !important;
 }
 
+.border-bottom {
+    border-bottom: 1px solid var(--border-color)
+}
+
+.border-top {
+    border-top: 1px solid var(--border-color)
+}
+
+.border-start {
+    border-inline-start: 1px solid var(--border-color)
+}
+
+.border-end {
+    border-inline-end: 1px solid var(--border-color)
+}
+
+.border-inner-bottom>* {
+    border-bottom: 1px solid var(--border-color)
+}
+
+.border-inner-top>* {
+    border-top: 1px solid var(--border-color)
+}
+
+.border-inner-start>* {
+    border-inline-start: 1px solid var(--border-color)
+}
+
+.border-inner-end>* {
+    border-inline-end: 1px solid var(--border-color)
+}
+
+
 
 @media screen and (max-width: 910px) {
     .m_opacity-0 {
@@ -862,4 +895,37 @@
         box-shadow: 0 1px 5px 0 rgba(0, 0, 0, .1), 0 1px 2px -1px rgba(0, 0, 0, .1) !important;
     }
 
+    .m_border-bottom {
+        border-bottom: 1px solid var(--border-color)
+    }
+
+    .m_border-top {
+        border-top: 1px solid var(--border-color)
+    }
+
+    .m_border-start {
+        border-inline-start: 1px solid var(--border-color)
+    }
+
+    .m_border-end {
+        border-inline-end: 1px solid var(--border-color)
+    }
+
+    .m_border-inner-bottom>* {
+        border-bottom: 1px solid var(--border-color)
+    }
+
+    .m_border-inner-top>* {
+        border-top: 1px solid var(--border-color)
+    }
+
+    .m_border-inner-start>* {
+        border-inline-start: 1px solid var(--border-color)
+    }
+
+    .m_border-inner-end>* {
+        border-inline-end: 1px solid var(--border-color)
+    }
+
+
 }

package/src/styles/bagel.css

@@ -37,7 +37,7 @@ body {
     min-height: 100%;
     background-color: var(--bgl-bg);
     font-family: var(--bgl-font);
-    font-size: 18px;
+    font-size: 16px;
     font-weight: 400;
     line-height: 1.65;
     width: auto;

package/src/styles/layout.css

@@ -127,6 +127,20 @@
     inset-inline-end: 0px;
 }
 
+.position-bottom-center {
+    position: absolute;
+    bottom: 0px;
+    inset-inline-start: 0px;
+    inset-inline-end: 0px;
+}
+
+.position-center {
+    position: absolute;
+    top: 0px;
+    inset-inline-start: 0px;
+    inset-inline-end: 0px;
+}
+
 .positioned-full,
 .p-all {
     top: 0;

package/src/styles/mobilLayout.css

@@ -146,6 +146,20 @@
         inset-inline-end: 0px;
     }
 
+    .m_position-bottom-center {
+        position: absolute;
+        bottom: 0px;
+        inset-inline-start: 0px;
+        inset-inline-end: 0px;
+    }
+
+    .m_position-center {
+        position: absolute;
+        top: 0px;
+        inset-inline-start: 0px;
+        inset-inline-end: 0px;
+    }
+
     .m_positioned-full {
         top: 0;
         bottom: 0;

package/src/styles/scrollbar.css

@@ -3,13 +3,11 @@
     height: 0.5rem;
 }
 
-::-webkit-scrollbar-track {
-    /* -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3); */
-}
+::-webkit-scrollbar-track {}
 
 ::-webkit-scrollbar-thumb {
     background-color: var(--bgl-gray);
-    border-radius: 5px;
+    border-radius: 1rem;
 }
 
 ::-webkit-scrollbar-corner {

package/src/utils/BagelFormUtils.ts

@@ -15,6 +15,8 @@ interface InputOptions {
 	helptext?: string
 }
 
+type DateOptions = InputOptions
+
 interface TextInputOptions extends InputOptions {
 	type?: 'text' | 'tel' | 'email'
 	pattern?: string
@@ -61,6 +63,7 @@ export function txtField(
 		required: options?.required,
 		id,
 		label,
+		disabled: options?.disabled,
 		placeholder: options?.placeholder,
 		defaultValue: options?.defaultValue,
 		attrs: {
@@ -108,6 +111,25 @@ export function checkField(
 	}
 }
 
+export function dateField(
+	id: string,
+	label?: string,
+	options?: DateOptions,
+): Field {
+	return {
+		$el: 'date',
+		class: options?.class,
+		required: options?.required,
+		id,
+		disabled: options?.disabled,
+		label,
+		defaultValue: options?.defaultValue,
+		attrs: {
+			disabled: options?.disabled,
+		},
+	}
+}
+
 export function numField(
 	id: string,
 	label?: string,
@@ -120,6 +142,7 @@ export function numField(
 		defaultValue: options?.defaultValue,
 		id,
 		label,
+		disabled: options?.disabled,
 		placeholder: options?.placeholder,
 		helptext: options?.helptext,
 		attrs: {