@bagelink/vue 0.0.1078 → 0.0.1084

package/src/components/form/BglForm.vue

@@ -1,6 +1,6 @@
 <script lang="ts" setup>
 import { BglField, type BglFormSchemaFnT, Title, useBglSchema, useModal } from '@bagelink/vue'
-import { inject, useSlots, watch } from 'vue'
+import { inject, onMounted, useSlots, watch } from 'vue'
 import { FORM_STATE_KEY, provideBagelFormState, type BagelFormState } from './useBagelFormState'
 
 export type FormStatus = 'idle' | 'loading' | 'success' | 'error'
@@ -26,8 +26,6 @@ const emit = defineEmits(['update:modelValue', 'submit', 'dirty'])
 
 const slots = useSlots() as any
 const { showModal } = useModal()
-const instAt = new Date()
-const timeSinceInst = () => Date.now() - instAt.getTime()
 
 // Check if we're a nested form
 const existingFormState = inject<BagelFormState | undefined>(FORM_STATE_KEY)
@@ -38,20 +36,22 @@ const { data, isDirty } = isNested
 	? existingFormState!
 	: provideBagelFormState(props.modelValue)
 
-// Only watch for external updates if we're not nested
+let emitDirty = $ref(false)
+
 if (!isNested) {
 	watch(() => props.modelValue, (newVal) => {
-		if (JSON.stringify(newVal) !== JSON.stringify(data.value)) {
-			data.value = newVal
+		if (emitDirty) {
+			emitDirty = false
+			return
 		}
+		data.value = newVal
 	}, { deep: true, immediate: true })
 
-	// Emit updates when internal state changes
-	watch(data, (newVal) => {
-		if (timeSinceInst() > 100 && JSON.stringify(newVal) !== JSON.stringify(props.modelValue)) {
-			emit('dirty')
-			emit('update:modelValue', newVal)
-		}
+	watch(() => data, (newVal) => {
+		if (emitDirty) return
+		emitDirty = true
+		emit('dirty')
+		emit('update:modelValue', newVal)
 	}, { deep: true })
 }
 

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

@@ -112,7 +112,7 @@ const displayTo = $computed(() => formatValue(validTo))
 			</div>
 			<p
 				v-if="validFrom !== min"
-				class="txt-center txt-12 range-slider-position-txt absolute line-height-1 opacity-0"
+				class="txt-center txt-12 range-slider-position-txt absolute line-height-1"
 				:style="{ '--progress': `${fromPercentage}` }"
 			>
 				<slot v-if="!multiRange" name="progress" :progress="displayFrom" :min="formatValue(min)" :max="formatValue(max)">
@@ -124,7 +124,7 @@ const displayTo = $computed(() => formatValue(validTo))
 			</p>
 			<p
 				v-if="multiRange && validTo !== max"
-				class="txt-center txt-12 range-slider-position-txt opacity-0 line-height-1 absolute"
+				class="txt-center txt-12 range-slider-position-txt line-height-1 absolute"
 				:style="{ '--progress': `${toPercentage}` }"
 			>
 				<slot name="to" :to="displayTo" :from="displayFrom" :min="formatValue(min)" :max="formatValue(max)">
@@ -148,7 +148,7 @@ const displayTo = $computed(() => formatValue(validTo))
 	margin-inline-start:  calc((var(--progress) * 1%) - (var(--bgl-range-thumb-size) * var(--progress) / 100));
 	top: calc(var(--bgl-range-thumb-size) / 2 ) ;
 	transition: transform 0.1s, opacity 0.5s, top 0.5s;
-	transform: scale(0.5);
+	transform: scale(0.8);
 	width: var(--bgl-range-thumb-size);
 }
 .range-slider:hover .range-slider-position-txt{

package/src/styles/layout.css

@@ -44,7 +44,7 @@
 
 
 .round-none {
-    border-radius: 0;
+    border-radius: 0 !important;
 }
 
 .oval {