@bagelink/vue 0.0.1082 → 0.0.1084

package/dist/index.cjs

@@ -10091,22 +10091,23 @@ const _sfc_main$R = /* @__PURE__ */ vue.defineComponent({
     const emit2 = __emit;
     const slots = vue.useSlots();
     const { showModal } = useModal();
-    const instAt = /* @__PURE__ */ new Date();
-    const timeSinceInst = () => Date.now() - instAt.getTime();
     const existingFormState = vue.inject(FORM_STATE_KEY);
     const isNested = Boolean(existingFormState && props2.fieldID);
     const { data: data2, isDirty } = isNested ? existingFormState : provideBagelFormState(props2.modelValue);
+    let emitDirty = vue.ref(false);
     if (!isNested) {
       vue.watch(() => props2.modelValue, (newVal) => {
-        if (JSON.stringify(newVal) !== JSON.stringify(data2.value)) {
-          data2.value = newVal;
+        if (emitDirty.value) {
+          emitDirty.value = false;
+          return;
         }
+        data2.value = newVal;
       }, { deep: true, immediate: true });
-      vue.watch(data2, (newVal) => {
-        if (timeSinceInst() > 100 && JSON.stringify(newVal) !== JSON.stringify(props2.modelValue)) {
-          emit2("dirty");
-          emit2("update:modelValue", newVal);
-        }
+      vue.watch(() => data2, (newVal) => {
+        if (emitDirty.value) return;
+        emitDirty.value = true;
+        emit2("dirty");
+        emit2("update:modelValue", newVal);
       }, { deep: true });
     }
     const form = vue.ref();

package/dist/index.mjs

@@ -10089,22 +10089,23 @@ const _sfc_main$R = /* @__PURE__ */ defineComponent({
     const emit2 = __emit;
     const slots = useSlots();
     const { showModal } = useModal();
-    const instAt = /* @__PURE__ */ new Date();
-    const timeSinceInst = () => Date.now() - instAt.getTime();
     const existingFormState = inject(FORM_STATE_KEY);
     const isNested = Boolean(existingFormState && props2.fieldID);
     const { data: data2, isDirty } = isNested ? existingFormState : provideBagelFormState(props2.modelValue);
+    let emitDirty = ref(false);
     if (!isNested) {
       watch(() => props2.modelValue, (newVal) => {
-        if (JSON.stringify(newVal) !== JSON.stringify(data2.value)) {
-          data2.value = newVal;
+        if (emitDirty.value) {
+          emitDirty.value = false;
+          return;
         }
+        data2.value = newVal;
       }, { deep: true, immediate: true });
-      watch(data2, (newVal) => {
-        if (timeSinceInst() > 100 && JSON.stringify(newVal) !== JSON.stringify(props2.modelValue)) {
-          emit2("dirty");
-          emit2("update:modelValue", newVal);
-        }
+      watch(() => data2, (newVal) => {
+        if (emitDirty.value) return;
+        emitDirty.value = true;
+        emit2("dirty");
+        emit2("update:modelValue", newVal);
       }, { deep: true });
     }
     const form = ref();

package/dist/style.css

@@ -3832,7 +3832,7 @@ to {
     border-radius: calc(var(--btn-border-radius) * 4) !important;
 }
 .round-none {
-    border-radius: 0;
+    border-radius: 0 !important;
 }
 .oval {
     border-radius: 100%;

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@bagelink/vue",
   "type": "module",
-  "version": "0.0.1082",
+  "version": "0.0.1084",
   "description": "Bagel core sdk packages",
   "author": {
     "name": "Neveh Allon",

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/styles/layout.css

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