@bagelink/vue 0.0.1256 → 0.0.1260

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

@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import type { IconType } from '@bagelink/vue'
 import { Icon, Btn } from '@bagelink/vue'
-import { watch } from 'vue'
+import { onMounted, watch } from 'vue'
 
 type NumberLayout = 'default' | 'vertical' | 'horizontal'
 
@@ -14,6 +14,7 @@ interface NumberInputProps {
 	iconStart?: IconType
 	icon?: IconType
 	label?: string
+	defaultValue?: number
 	placeholder?: string
 	disabled?: boolean
 	required?: boolean
@@ -40,11 +41,18 @@ const {
 	layout,
 	id,
 	padZero = 1,
+	defaultValue
 } = defineProps<NumberInputProps>()
 
 const emit = defineEmits(['update:modelValue'])
 
-let numberValue = $ref(Number.parseFloat(`${modelValue}`) || undefined)
+let numberValue = $ref<number>()
+
+onMounted(() => {
+	const num = modelValue !== undefined ? Number.parseFloat(`${modelValue}`) : undefined
+	const defaultNum = defaultValue !== undefined ? Number.parseFloat(`${defaultValue}`) : undefined
+	numberValue = num || defaultNum
+})
 
 const btnLayouts: NumberLayout[] = ['horizontal', 'vertical']
 

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

@@ -23,10 +23,9 @@ function handlePaste(event: ClipboardEvent, index: number) {
 }
 
 function emitUpdate() {
+	emit('update:modelValue', digits.join(''))
 	if (isDigitsFull()) {
 		emit('complete', digits.join(''))
-	} else {
-		emit('update:modelValue', digits.join(''))
 	}
 }
 
@@ -93,7 +92,7 @@ function isDigitsFull() {
 			:autofocus="ind === 0"
 			maxlength="1"
 			pattern="[0-9]*"
-			oninput="this.value = this.value.slice(0, 1);"
+			oninput="this.value = this.value.slice(0, 1)"
 			@keydown="handleKeyDown($event, ind)"
 			@paste="handlePaste($event, ind)"
 		>

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

@@ -19,6 +19,7 @@ const props = withDefaults(
 		dense?: boolean
 		required?: boolean
 		pattern?: string
+		defaultValue?: string | number
 		shrink?: boolean
 		disabled?: boolean
 		type?: string
@@ -32,6 +33,7 @@ const props = withDefaults(
 		autocomplete?: AutoFillField
 		autofocus?: boolean
 		onFocusout?: (e: FocusEvent) => void
+		onFocus?: (e: FocusEvent) => void
 	}>(),
 	{
 		type: 'text',
@@ -72,6 +74,7 @@ defineExpose({ focus, hasFocus })
 
 onMounted(() => {
 	if (props.autofocus) setTimeout(() => input?.focus(), 10)
+	if (props.defaultValue && !props.modelValue) inputVal = props.defaultValue
 })
 </script>
 
@@ -106,6 +109,7 @@ onMounted(() => {
 				:pattern
 				v-bind="nativeInputAttrs"
 				@focusout="onFocusout"
+				@focus="onFocus"
 				@input="updateInputVal"
 			>
 			<textarea

package/src/styles/layout.css

@@ -88,6 +88,7 @@
     justify-items: center;
 }
 
+.justify-content,
 .justify-content-center {
     justify-content: center;
 }
@@ -2572,6 +2573,126 @@
     min-height: 100px;
 }
 
+.h-110,
+.h110p,
+.h-110p {
+    height: 110%;
+}
+
+.vh-110,
+.h-110vh,
+.h110vh {
+    height: 110vh;
+}
+
+.h-110px,
+.h110px {
+    height: 110px;
+}
+
+.hm-110px,
+.max-h-110px,
+.h-max-110px,
+.max-h110px {
+    max-height: 110px;
+}
+
+.min-h-110px,
+.h-min-110px,
+.min-h110px {
+    min-height: 110px;
+}
+
+.h-120,
+.h120p,
+.h-120p {
+    height: 120%;
+}
+
+.vh-120,
+.h-120vh,
+.h120vh {
+    height: 120vh;
+}
+
+.h-120px,
+.h120px {
+    height: 120px;
+}
+
+.hm-120px,
+.max-h-120px,
+.h-max-120px,
+.max-h120px {
+    max-height: 120px;
+}
+
+.min-h-120px,
+.h-min-120px,
+.min-h120px {
+    min-height: 120px;
+}
+
+.h-130,
+.h130p,
+.h-130p {
+    height: 130%;
+}
+
+.vh-130,
+.h-130vh,
+.h130vh {
+    height: 130vh;
+}
+
+.h-130px,
+.h130px {
+    height: 130px;
+}
+
+.hm-130px,
+.max-h-130px,
+.h-max-130px,
+.max-h130px {
+    max-height: 130px;
+}
+
+.min-h-130px,
+.h-min-130px,
+.min-h130px {
+    min-height: 130px;
+}
+
+.h-140,
+.h140p,
+.h-140p {
+    height: 140%;
+}
+
+.vh-140,
+.h-140vh,
+.h140vh {
+    height: 140vh;
+}
+
+.h-140px,
+.h140px {
+    height: 140px;
+}
+
+.hm-140px,
+.max-h-140px,
+.h-max-140px,
+.max-h140px {
+    max-height: 140px;
+}
+
+.min-h-140px,
+.h-min-140px,
+.min-h140px {
+    min-height: 140px;
+}
+
 .h-150,
 .h150p,
 .h-150p {

package/src/styles/mobilLayout.css

@@ -117,6 +117,7 @@
         justify-items: center;
     }
 
+    .m_justify-content,
     .m_justify-content-center {
         justify-content: center;
     }
@@ -1863,6 +1864,126 @@
         min-height: 100px;
     }
 
+    .m_h-110,
+    .m_h110p,
+    .m_h-110p {
+        height: 110%;
+    }
+
+    .m_vh-110,
+    .m_h-110vh,
+    .m_h110vh {
+        height: 110vh;
+    }
+
+    .m_h-110px,
+    .m_h110px {
+        height: 110px;
+    }
+
+    .m_hm-110px,
+    .m_max-h-110px,
+    .m_h-max-110px,
+    .m_max-h110px {
+        max-height: 110px;
+    }
+
+    .m_min-h-110px,
+    .m_h-min-110px,
+    .m_min-h110px {
+        min-height: 110px;
+    }
+
+    .m_h-120,
+    .m_h120p,
+    .m_h-120p {
+        height: 120%;
+    }
+
+    .m_vh-120,
+    .m_h-120vh,
+    .m_h120vh {
+        height: 120vh;
+    }
+
+    .m_h-120px,
+    .m_h120px {
+        height: 120px;
+    }
+
+    .m_hm-120px,
+    .m_max-h-120px,
+    .m_h-max-120px,
+    .m_max-h120px {
+        max-height: 120px;
+    }
+
+    .m_min-h-120px,
+    .m_h-min-120px,
+    .m_min-h120px {
+        min-height: 120px;
+    }
+
+    .m_h-130,
+    .m_h130p,
+    .m_h-130p {
+        height: 130%;
+    }
+
+    .m_vh-130,
+    .m_h-130vh,
+    .m_h130vh {
+        height: 130vh;
+    }
+
+    .m_h-130px,
+    .m_h130px {
+        height: 130px;
+    }
+
+    .m_hm-130px,
+    .m_max-h-130px,
+    .m_h-max-130px,
+    .m_max-h130px {
+        max-height: 130px;
+    }
+
+    .m_min-h-130px,
+    .m_h-min-130px,
+    .m_min-h130px {
+        min-height: 130px;
+    }
+
+    .m_h-140,
+    .m_h140p,
+    .m_h-140p {
+        height: 140%;
+    }
+
+    .m_vh-140,
+    .m_h-140vh,
+    .m_h140vh {
+        height: 140vh;
+    }
+
+    .m_h-140px,
+    .m_h140px {
+        height: 140px;
+    }
+
+    .m_hm-140px,
+    .m_max-h-140px,
+    .m_h-max-140px,
+    .m_max-h140px {
+        max-height: 140px;
+    }
+
+    .m_min-h-140px,
+    .m_h-min-140px,
+    .m_min-h140px {
+        min-height: 140px;
+    }
+
     .m_h-150,
     .m_h150p,
     .m_h-150p {