@bagelink/vue 0.0.1102 → 0.0.1109

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

@@ -20,6 +20,7 @@ interface NumberInputProps {
 	helptext?: string
 	layout?: NumberLayout
 	center?: boolean
+	padZero?: number
 }
 
 const {
@@ -37,6 +38,7 @@ const {
 	helptext,
 	layout,
 	id,
+	padZero,
 } = defineProps<NumberInputProps>()
 
 const emit = defineEmits(['update:modelValue'])
@@ -62,8 +64,12 @@ function decrement() {
 }
 
 function formatNumber(num: number) {
+	let formatted = num.toString()
+	if (padZero && padZero > 0) {
+		formatted = formatted.padStart(padZero, '0')
+	}
 	// eslint-disable-next-line regexp/no-unused-capturing-group
-	return num.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ',')
+	return formatted.replace(/\B(?=(\d{3})+(?!\d))/g, ',')
 }
 
 let formattedValue = $ref('')
@@ -98,7 +104,7 @@ watch(() => modelValue, (newVal) => {
 		<label :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' }]" @click="increment" />
+				<Btn v-if="layout && btnLayouts.includes(layout)" flat icon="add" class="radius" :class="[{ 'bgl-big-ctrl-num-btn': layout === 'vertical' }]" tabindex="-1" @click="increment" />
 
 				<input
 					:id
@@ -132,10 +138,10 @@ watch(() => modelValue, (newVal) => {
 					v-if="icon"
 					:icon
 				/>
-				<Btn v-if="layout && btnLayouts.includes(layout)" flat icon="remove" class="radius" :class="[{ 'bgl-big-ctrl-num-btn': layout === 'vertical' }]" @click="decrement" />
+				<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" @click="increment" />
-					<Btn icon="remove" flat thin class="bgl-ctrl-num-btn ctrl-remove color-gray" :disabled="!canDecrement" @click="decrement" />
+					<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>
@@ -157,16 +163,22 @@ watch(() => modelValue, (newVal) => {
 	inset-inline-end: 0;
 	margin-top: calc(var(--input-height) / -1);
 	line-height: 0;
+	display: flex;
+	flex-direction: column;
+	gap: 0;
 }
+
 .top-bgl-ctrl-num-btn{
 	margin-top: calc(var(--input-height) / 10) !important;
 }
 .bgl-ctrl-num-btn{
 	height: calc(var(--input-height) / 2.5) !important;
+	isolation: isolate;
 }
 
 .bgl-big-ctrl-num-btn{
 	width: 100% !important;
+	isolation: isolate;
 }
 .bgl-number-input{
 	padding-inline-end: 1.75rem !important;

package/src/components/form/inputs/index.ts

@@ -3,7 +3,7 @@ export { default as CheckInput } from './CheckInput.vue'
 export { default as CodeEditor } from './CodeEditor/Index.vue'
 export { default as ColorPicker } from './ColorPicker.vue'
 export { default as DateInput } from './DateInput.vue'
-// export { default as DatePick } from './DatePick.vue'
+export { default as DatePick } from './DatePick.vue'
 export { default as DatePicker } from './DatePicker.vue'
 export { default as FileUpload } from './FileUpload.vue'
 export { default as JSONInput } from './JSONInput.vue'

package/src/composables/useFormField.ts

@@ -0,0 +1,35 @@
+import type { Field } from '@bagelink/vue'
+import { inject, computed } from 'vue'
+import { FORM_STATE_KEY, type BagelFormState } from '../components/form/useBagelFormState'
+
+export function useFormField<T = any>(props: {
+	field: Field<T>
+	fieldID?: string
+	modelValue?: any
+}) {
+	const formState = inject<BagelFormState<T>>(FORM_STATE_KEY)
+
+	const fieldData = computed({
+		get: () => {
+			if (!props.fieldID || !formState) return props.modelValue ?? props.field.defaultValue ?? ''
+			const value = formState.getFieldData(props.fieldID)
+			if (props.field.$el === 'form' && !value) return {}
+			return value ?? ''
+		},
+		set: (val: any) => {
+			if (!props.fieldID || !formState) return
+			const currentValue = formState.getFieldData(props.fieldID)
+			if (JSON.stringify(val) === JSON.stringify(currentValue)) return
+
+			if (props.field.onUpdate) {
+				props.field.onUpdate(val, currentValue)
+			}
+			formState.updateField(props.fieldID, val)
+		}
+	})
+
+	return {
+		fieldData,
+		formState
+	}
+}