@bagelink/vue 0.0.1104 → 0.0.1109

package/dist/components/form/BglField.vue.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"BglField.vue.d.ts","sourceRoot":"","sources":["../../../src/components/form/BglField.vue"],"names":[],"mappings":"AAAA,OAkGO,EAIN,KAAK,KAAK,EAWV,MAAM,eAAe,CAAA;yBAIL,CAAC,SAAS,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,eAChC,WAAW,CAAC,OAAO,CAAC,OAAO,WAAW,CAAC,CAAC,CAAC,OAAO,CAAC,cAClD,mBAAmB,CAAC,IAAI,CAAC,WAAW,CAAC,OAAO,CAAC,OAAO,WAAW,CAAC,CAAC,EAAE,OAAO,GAAG,MAAM,GAAG,OAAO,CAAC,CAAC,iBAC5F,WAAW,CAAC,OAAO,CAAC,OAAO,WAAW,CAAC,CAAC,CAAC,QAAQ,CAAC;WAwJ1D,mBAAmB,CAAC;;;eArJpB,KAAK,CAAC,CAAC,CAAC;kBACL,MAAM;qBACH,GAAG;qBACH,MAAM;mBAkJ0E,CAAC,4BAA2B;oBACzG,OAAO,KAAK,EAAE,gBAAgB,CAAC,EAAE,CAAC,GAAG,IAAI;WAClD,GAAG;;;OAKC,OAAO,KAAK,EAAE,KAAK,GAAG;IAAE,KAAK,CAAC,EAAE,OAAO,CAAC,OAAO,WAAW,CAAC,CAAA;CAAE;AAlKzE,wBAkK4E;AAC5E,KAAK,mBAAmB,CAAC,CAAC,IAAI;KAAG,CAAC,IAAI,MAAM,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC;CAAG,GAAG,EAAE,CAAC"}
+{"version":3,"file":"BglField.vue.d.ts","sourceRoot":"","sources":["../../../src/components/form/BglField.vue"],"names":[],"mappings":"AAAA,OAqIO,EAIN,KAAK,KAAK,EAYV,MAAM,eAAe,CAAA;yBAKL,CAAC,SAAS,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,eAChC,WAAW,CAAC,OAAO,CAAC,OAAO,WAAW,CAAC,CAAC,CAAC,OAAO,CAAC,cAClD,mBAAmB,CAAC,IAAI,CAAC,WAAW,CAAC,OAAO,CAAC,OAAO,WAAW,CAAC,CAAC,EAAE,OAAO,GAAG,MAAM,GAAG,OAAO,CAAC,CAAC,iBAC5F,WAAW,CAAC,OAAO,CAAC,OAAO,WAAW,CAAC,CAAC,CAAC,QAAQ,CAAC;WA0L1D,mBAAmB,CAAC;;;eAvLpB,KAAK,CAAC,CAAC,CAAC;kBACL,MAAM;qBACH,GAAG;qBACH,MAAM;mBAoL0E,CAAC,4BAA2B;oBACzG,OAAO,KAAK,EAAE,gBAAgB,CAAC,EAAE,CAAC,GAAG,IAAI;WAClD,GAAG;;;OAKC,OAAO,KAAK,EAAE,KAAK,GAAG;IAAE,KAAK,CAAC,EAAE,OAAO,CAAC,OAAO,WAAW,CAAC,CAAA;CAAE;AApMzE,wBAoM4E;AAC5E,KAAK,mBAAmB,CAAC,CAAC,IAAI;KAAG,CAAC,IAAI,MAAM,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC;CAAG,GAAG,EAAE,CAAC"}

package/dist/components/form/inputs/NumberInput.vue.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"NumberInput.vue.d.ts","sourceRoot":"","sources":["../../../../src/components/form/inputs/NumberInput.vue"],"names":[],"mappings":"AA4LA,OAAO,EAAQ,KAAK,aAAa,EAAO,MAAM,eAAe,CAAA;AAG7D,KAAK,YAAY,GAAG,SAAS,GAAG,UAAU,GAAG,YAAY,CAAA;AAEzD,UAAU,gBAAgB;IACzB,UAAU,CAAC,EAAE,MAAM,CAAA;IACnB,GAAG,CAAC,EAAE,MAAM,CAAA;IACZ,GAAG,CAAC,EAAE,MAAM,CAAA;IACZ,IAAI,CAAC,EAAE,MAAM,CAAA;IACb,OAAO,CAAC,EAAE,OAAO,CAAA;IACjB,SAAS,CAAC,EAAE,aAAa,CAAA;IACzB,IAAI,CAAC,EAAE,aAAa,CAAA;IACpB,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,EAAE,CAAC,EAAE,MAAM,CAAA;IACX,QAAQ,CAAC,EAAE,MAAM,CAAA;IACjB,MAAM,CAAC,EAAE,YAAY,CAAA;IACrB,MAAM,CAAC,EAAE,OAAO,CAAA;IAChB,OAAO,CAAC,EAAE,MAAM,CAAA;CAChB;;;;;;AA2SD,wBAQG"}
+{"version":3,"file":"NumberInput.vue.d.ts","sourceRoot":"","sources":["../../../../src/components/form/inputs/NumberInput.vue"],"names":[],"mappings":"AA4LA,OAAO,EAAQ,KAAK,aAAa,EAAO,MAAM,eAAe,CAAA;AAG7D,KAAK,YAAY,GAAG,SAAS,GAAG,UAAU,GAAG,YAAY,CAAA;AAEzD,UAAU,gBAAgB;IACzB,UAAU,CAAC,EAAE,MAAM,CAAA;IACnB,GAAG,CAAC,EAAE,MAAM,CAAA;IACZ,GAAG,CAAC,EAAE,MAAM,CAAA;IACZ,IAAI,CAAC,EAAE,MAAM,CAAA;IACb,OAAO,CAAC,EAAE,OAAO,CAAA;IACjB,SAAS,CAAC,EAAE,aAAa,CAAA;IACzB,IAAI,CAAC,EAAE,aAAa,CAAA;IACpB,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,EAAE,CAAC,EAAE,MAAM,CAAA;IACX,QAAQ,CAAC,EAAE,MAAM,CAAA;IACjB,MAAM,CAAC,EAAE,YAAY,CAAA;IACrB,MAAM,CAAC,EAAE,OAAO,CAAA;IAChB,OAAO,CAAC,EAAE,MAAM,CAAA;CAChB;;;;;;AAmTD,wBAQG"}

package/dist/index.cjs

@@ -9811,91 +9811,6 @@ const _sfc_main$V = /* @__PURE__ */ vue.defineComponent({
   }
 });
 const Flag = /* @__PURE__ */ _export_sfc(_sfc_main$V, [["__scopeId", "data-v-f99f1900"]]);
-const FORM_STATE_KEY = Symbol("bagelFormState");
-function safeClone(obj) {
-  if (obj === null || typeof obj !== "object") return obj;
-  const seen = /* @__PURE__ */ new WeakSet();
-  return JSON.parse(JSON.stringify(obj, (key, value) => {
-    if (typeof value === "object" && value !== null) {
-      if (seen.has(value)) {
-        return void 0;
-      }
-      seen.add(value);
-    }
-    return value;
-  }));
-}
-function provideBagelFormState(initialData) {
-  const data2 = vue.ref(initialData);
-  const isDirty = vue.ref(false);
-  const getFieldData = (path) => {
-    if (!path) return "";
-    const keys4 = path.split(/[.[]/);
-    let current = data2.value;
-    for (let i2 = 0; i2 < keys4.length; i2++) {
-      const key = keys4[i2];
-      if (!current || typeof current !== "object" || !(key in current)) {
-        return "";
-      }
-      current = current[key];
-    }
-    return current ?? "";
-  };
-  const updateField = (path, value) => {
-    const keys4 = path.split(/[.[]/);
-    if (typeof data2.value !== "object" || data2.value === null) {
-      data2.value = {};
-    }
-    let current = data2.value;
-    for (let i2 = 0; i2 < keys4.length - 1; i2++) {
-      const key = keys4[i2];
-      if (!(key in current) || typeof current[key] !== "object" || current[key] === null) {
-        current[key] = {};
-      }
-      current = current[key];
-    }
-    const safeValue = safeClone(value);
-    current[keys4[keys4.length - 1]] = safeValue;
-    isDirty.value = true;
-  };
-  const state2 = {
-    data: data2,
-    getFieldData,
-    updateField,
-    isDirty
-  };
-  vue.provide(FORM_STATE_KEY, state2);
-  return state2;
-}
-function useBagelFormState() {
-  const state2 = vue.inject(FORM_STATE_KEY);
-  if (!state2) throw new Error("BagelFormState must be provided");
-  return state2;
-}
-function useFormField(props2) {
-  const formState = vue.inject(FORM_STATE_KEY);
-  const fieldData = vue.computed({
-    get: () => {
-      if (!props2.fieldID || !formState) return props2.modelValue ?? props2.field.defaultValue ?? "";
-      const value = formState.getFieldData(props2.fieldID);
-      if (props2.field.$el === "form" && !value) return {};
-      return value ?? "";
-    },
-    set: (val) => {
-      if (!props2.fieldID || !formState) return;
-      const currentValue = formState.getFieldData(props2.fieldID);
-      if (JSON.stringify(val) === JSON.stringify(currentValue)) return;
-      if (props2.field.onUpdate) {
-        props2.field.onUpdate(val, currentValue);
-      }
-      formState.updateField(props2.fieldID, val);
-    }
-  });
-  return {
-    fieldData,
-    formState
-  };
-}
 const state$1 = vue.reactive(/* @__PURE__ */ new Map());
 function useTabs(group) {
   if (!state$1.has(group)) {
@@ -10000,6 +9915,67 @@ const _sfc_main$U = /* @__PURE__ */ vue.defineComponent({
   }
 });
 const TabsNav = /* @__PURE__ */ _export_sfc(_sfc_main$U, [["__scopeId", "data-v-307612a9"]]);
+const FORM_STATE_KEY = Symbol("bagelFormState");
+function safeClone(obj) {
+  if (obj === null || typeof obj !== "object") return obj;
+  const seen = /* @__PURE__ */ new WeakSet();
+  return JSON.parse(JSON.stringify(obj, (key, value) => {
+    if (typeof value === "object" && value !== null) {
+      if (seen.has(value)) {
+        return void 0;
+      }
+      seen.add(value);
+    }
+    return value;
+  }));
+}
+function provideBagelFormState(initialData) {
+  const data2 = vue.ref(initialData);
+  const isDirty = vue.ref(false);
+  const getFieldData = (path) => {
+    if (!path) return "";
+    const keys4 = path.split(/[.[]/);
+    let current = data2.value;
+    for (let i2 = 0; i2 < keys4.length; i2++) {
+      const key = keys4[i2];
+      if (!current || typeof current !== "object" || !(key in current)) {
+        return "";
+      }
+      current = current[key];
+    }
+    return current ?? "";
+  };
+  const updateField = (path, value) => {
+    const keys4 = path.split(/[.[]/);
+    if (typeof data2.value !== "object" || data2.value === null) {
+      data2.value = {};
+    }
+    let current = data2.value;
+    for (let i2 = 0; i2 < keys4.length - 1; i2++) {
+      const key = keys4[i2];
+      if (!(key in current) || typeof current[key] !== "object" || current[key] === null) {
+        current[key] = {};
+      }
+      current = current[key];
+    }
+    const safeValue = safeClone(value);
+    current[keys4[keys4.length - 1]] = safeValue;
+    isDirty.value = true;
+  };
+  const state2 = {
+    data: data2,
+    getFieldData,
+    updateField,
+    isDirty
+  };
+  vue.provide(FORM_STATE_KEY, state2);
+  return state2;
+}
+function useBagelFormState() {
+  const state2 = vue.inject(FORM_STATE_KEY);
+  if (!state2) throw new Error("BagelFormState must be provided");
+  return state2;
+}
 const _hoisted_1$K = { key: 1 };
 const _sfc_main$T = /* @__PURE__ */ vue.defineComponent({
   __name: "BglField",
@@ -10012,7 +9988,8 @@ const _sfc_main$T = /* @__PURE__ */ vue.defineComponent({
   emits: ["update:modelValue"],
   setup(__props, { emit: __emit }) {
     const props2 = __props;
-    const { fieldData } = useFormField(props2);
+    const emit2 = __emit;
+    const formState = vue.inject(FORM_STATE_KEY) ?? provideBagelFormState(props2.modelValue);
     const customAttrs = vue.ref({});
     const is4 = vue.computed(() => {
       if (props2.field.$el === "text") return TextInput;
@@ -10033,24 +10010,50 @@ const _sfc_main$T = /* @__PURE__ */ vue.defineComponent({
       if (props2.field.$el === "bglform") return _sfc_main$S;
       return props2.field.$el ?? "div";
     });
+    const fieldData = vue.computed({
+      get: () => {
+        if (!props2.fieldID) return props2.field.defaultValue ?? (props2.field.$el === "form" ? {} : "");
+        const value = formState.getFieldData(props2.fieldID);
+        if (props2.field.$el === "form" && !value) return {};
+        return value ?? "";
+      },
+      set: (val) => {
+        if (!props2.fieldID) return;
+        const currentValue = formState.getFieldData(props2.fieldID);
+        if (JSON.stringify(val) === JSON.stringify(currentValue)) return;
+        emit2("update:modelValue", val);
+        if (props2.field.onUpdate) {
+          props2.field.onUpdate(val, currentValue);
+        }
+        formState.updateField(props2.fieldID, val);
+      }
+    });
+    const vIf = vue.computed(() => {
+      if (props2.field["v-if"] === void 0 && props2.field.vIf === void 0) return true;
+      if (typeof props2.field["v-if"] === "boolean" || typeof props2.field.vIf === "boolean") return props2.field["v-if"];
+      if (typeof props2.field["v-if"] === "string" || typeof props2.field.vIf === "string") return true;
+      if (typeof props2.field["v-if"] === "function") return props2.field["v-if"](fieldData.value, formState.data.value);
+      if (typeof props2.field.vIf === "function") return props2.field.vIf(fieldData.value, formState.data.value);
+      return true;
+    });
     const computedOptions = vue.computed(
-      () => bindAttrs({ options: props2.field.options }, fieldData, props2.modelValue).options
+      () => bindAttrs({ options: props2.field.options }, fieldData.value, formState.data.value).options
     );
     const computedAttrs = vue.computed(() => {
       const attrs = { ...customAttrs.value, ...props2.field.attrs };
-      return bindAttrs(attrs, fieldData, props2.modelValue);
+      return bindAttrs(attrs, fieldData.value, formState.data.value);
     });
     const computedClass = vue.computed(
       () => {
         var _a2;
-        return classify(fieldData, props2.modelValue, props2.field.class, (_a2 = props2.field.attrs) == null ? void 0 : _a2.class);
+        return classify(fieldData.value, formState.data.value, props2.field.class, (_a2 = props2.field.attrs) == null ? void 0 : _a2.class);
       }
     );
     return (_ctx, _cache) => {
       const _component_BglField = vue.resolveComponent("BglField", true);
-      return _ctx.field.vIf === void 0 || _ctx.field.vIf ? (vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent(is4.value), vue.mergeProps({ key: 0 }, computedAttrs.value, {
-        modelValue: vue.unref(fieldData),
-        "onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => vue.isRef(fieldData) ? fieldData.value = $event : null),
+      return vIf.value ? (vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent(is4.value), vue.mergeProps({ key: 0 }, computedAttrs.value, {
+        modelValue: fieldData.value,
+        "onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => fieldData.value = $event),
         fieldID: props2.fieldID,
         required: _ctx.field.required,
         class: computedClass.value,
@@ -20436,6 +20439,7 @@ const _sfc_main$F = /* @__PURE__ */ vue.defineComponent({
               flat: "",
               icon: "add",
               class: vue.normalizeClass(["radius", [{ "bgl-big-ctrl-num-btn": _ctx.layout === "vertical" }]]),
+              tabindex: "-1",
               onClick: increment
             }, null, 8, ["class"])) : vue.createCommentVNode("", true),
             vue.withDirectives(vue.createElementVNode("input", {
@@ -20489,6 +20493,7 @@ const _sfc_main$F = /* @__PURE__ */ vue.defineComponent({
               flat: "",
               icon: "remove",
               class: vue.normalizeClass(["radius", [{ "bgl-big-ctrl-num-btn": _ctx.layout === "vertical" }]]),
+              tabindex: "-1",
               onClick: decrement
             }, null, 8, ["class"])) : vue.createCommentVNode("", true),
             _ctx.spinner && (!_ctx.layout || !btnLayouts.includes(_ctx.layout)) ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_4$c, [
@@ -20498,6 +20503,7 @@ const _sfc_main$F = /* @__PURE__ */ vue.defineComponent({
                 thin: "",
                 class: "bgl-ctrl-num-btn ctrl-add color-gray top-bgl-ctrl-num-btn",
                 disabled: !canAdd.value,
+                tabindex: "-1",
                 onClick: increment
               }, null, 8, ["disabled"]),
               vue.createVNode(vue.unref(Btn), {
@@ -20506,6 +20512,7 @@ const _sfc_main$F = /* @__PURE__ */ vue.defineComponent({
                 thin: "",
                 class: "bgl-ctrl-num-btn ctrl-remove color-gray",
                 disabled: !canDecrement.value,
+                tabindex: "-1",
                 onClick: decrement
               }, null, 8, ["disabled"])
             ])) : vue.createCommentVNode("", true)
@@ -20515,7 +20522,7 @@ const _sfc_main$F = /* @__PURE__ */ vue.defineComponent({
     };
   }
 });
-const NumberInput = /* @__PURE__ */ _export_sfc(_sfc_main$F, [["__scopeId", "data-v-3a20cf4a"]]);
+const NumberInput = /* @__PURE__ */ _export_sfc(_sfc_main$F, [["__scopeId", "data-v-f265687e"]]);
 const _hoisted_1$w = ["value", "autofocus", "onKeydown", "onPaste"];
 const _sfc_main$E = /* @__PURE__ */ vue.defineComponent({
   __name: "OTP",

package/dist/index.mjs

@@ -9809,91 +9809,6 @@ const _sfc_main$V = /* @__PURE__ */ defineComponent({
   }
 });
 const Flag = /* @__PURE__ */ _export_sfc(_sfc_main$V, [["__scopeId", "data-v-f99f1900"]]);
-const FORM_STATE_KEY = Symbol("bagelFormState");
-function safeClone(obj) {
-  if (obj === null || typeof obj !== "object") return obj;
-  const seen = /* @__PURE__ */ new WeakSet();
-  return JSON.parse(JSON.stringify(obj, (key, value) => {
-    if (typeof value === "object" && value !== null) {
-      if (seen.has(value)) {
-        return void 0;
-      }
-      seen.add(value);
-    }
-    return value;
-  }));
-}
-function provideBagelFormState(initialData) {
-  const data2 = ref(initialData);
-  const isDirty = ref(false);
-  const getFieldData = (path) => {
-    if (!path) return "";
-    const keys4 = path.split(/[.[]/);
-    let current = data2.value;
-    for (let i2 = 0; i2 < keys4.length; i2++) {
-      const key = keys4[i2];
-      if (!current || typeof current !== "object" || !(key in current)) {
-        return "";
-      }
-      current = current[key];
-    }
-    return current ?? "";
-  };
-  const updateField = (path, value) => {
-    const keys4 = path.split(/[.[]/);
-    if (typeof data2.value !== "object" || data2.value === null) {
-      data2.value = {};
-    }
-    let current = data2.value;
-    for (let i2 = 0; i2 < keys4.length - 1; i2++) {
-      const key = keys4[i2];
-      if (!(key in current) || typeof current[key] !== "object" || current[key] === null) {
-        current[key] = {};
-      }
-      current = current[key];
-    }
-    const safeValue = safeClone(value);
-    current[keys4[keys4.length - 1]] = safeValue;
-    isDirty.value = true;
-  };
-  const state2 = {
-    data: data2,
-    getFieldData,
-    updateField,
-    isDirty
-  };
-  provide(FORM_STATE_KEY, state2);
-  return state2;
-}
-function useBagelFormState() {
-  const state2 = inject(FORM_STATE_KEY);
-  if (!state2) throw new Error("BagelFormState must be provided");
-  return state2;
-}
-function useFormField(props2) {
-  const formState = inject(FORM_STATE_KEY);
-  const fieldData = computed({
-    get: () => {
-      if (!props2.fieldID || !formState) return props2.modelValue ?? props2.field.defaultValue ?? "";
-      const value = formState.getFieldData(props2.fieldID);
-      if (props2.field.$el === "form" && !value) return {};
-      return value ?? "";
-    },
-    set: (val) => {
-      if (!props2.fieldID || !formState) return;
-      const currentValue = formState.getFieldData(props2.fieldID);
-      if (JSON.stringify(val) === JSON.stringify(currentValue)) return;
-      if (props2.field.onUpdate) {
-        props2.field.onUpdate(val, currentValue);
-      }
-      formState.updateField(props2.fieldID, val);
-    }
-  });
-  return {
-    fieldData,
-    formState
-  };
-}
 const state$1 = reactive(/* @__PURE__ */ new Map());
 function useTabs(group) {
   if (!state$1.has(group)) {
@@ -9998,6 +9913,67 @@ const _sfc_main$U = /* @__PURE__ */ defineComponent({
   }
 });
 const TabsNav = /* @__PURE__ */ _export_sfc(_sfc_main$U, [["__scopeId", "data-v-307612a9"]]);
+const FORM_STATE_KEY = Symbol("bagelFormState");
+function safeClone(obj) {
+  if (obj === null || typeof obj !== "object") return obj;
+  const seen = /* @__PURE__ */ new WeakSet();
+  return JSON.parse(JSON.stringify(obj, (key, value) => {
+    if (typeof value === "object" && value !== null) {
+      if (seen.has(value)) {
+        return void 0;
+      }
+      seen.add(value);
+    }
+    return value;
+  }));
+}
+function provideBagelFormState(initialData) {
+  const data2 = ref(initialData);
+  const isDirty = ref(false);
+  const getFieldData = (path) => {
+    if (!path) return "";
+    const keys4 = path.split(/[.[]/);
+    let current = data2.value;
+    for (let i2 = 0; i2 < keys4.length; i2++) {
+      const key = keys4[i2];
+      if (!current || typeof current !== "object" || !(key in current)) {
+        return "";
+      }
+      current = current[key];
+    }
+    return current ?? "";
+  };
+  const updateField = (path, value) => {
+    const keys4 = path.split(/[.[]/);
+    if (typeof data2.value !== "object" || data2.value === null) {
+      data2.value = {};
+    }
+    let current = data2.value;
+    for (let i2 = 0; i2 < keys4.length - 1; i2++) {
+      const key = keys4[i2];
+      if (!(key in current) || typeof current[key] !== "object" || current[key] === null) {
+        current[key] = {};
+      }
+      current = current[key];
+    }
+    const safeValue = safeClone(value);
+    current[keys4[keys4.length - 1]] = safeValue;
+    isDirty.value = true;
+  };
+  const state2 = {
+    data: data2,
+    getFieldData,
+    updateField,
+    isDirty
+  };
+  provide(FORM_STATE_KEY, state2);
+  return state2;
+}
+function useBagelFormState() {
+  const state2 = inject(FORM_STATE_KEY);
+  if (!state2) throw new Error("BagelFormState must be provided");
+  return state2;
+}
 const _hoisted_1$K = { key: 1 };
 const _sfc_main$T = /* @__PURE__ */ defineComponent({
   __name: "BglField",
@@ -10010,7 +9986,8 @@ const _sfc_main$T = /* @__PURE__ */ defineComponent({
   emits: ["update:modelValue"],
   setup(__props, { emit: __emit }) {
     const props2 = __props;
-    const { fieldData } = useFormField(props2);
+    const emit2 = __emit;
+    const formState = inject(FORM_STATE_KEY) ?? provideBagelFormState(props2.modelValue);
     const customAttrs = ref({});
     const is4 = computed(() => {
       if (props2.field.$el === "text") return TextInput;
@@ -10031,24 +10008,50 @@ const _sfc_main$T = /* @__PURE__ */ defineComponent({
       if (props2.field.$el === "bglform") return _sfc_main$S;
       return props2.field.$el ?? "div";
     });
+    const fieldData = computed({
+      get: () => {
+        if (!props2.fieldID) return props2.field.defaultValue ?? (props2.field.$el === "form" ? {} : "");
+        const value = formState.getFieldData(props2.fieldID);
+        if (props2.field.$el === "form" && !value) return {};
+        return value ?? "";
+      },
+      set: (val) => {
+        if (!props2.fieldID) return;
+        const currentValue = formState.getFieldData(props2.fieldID);
+        if (JSON.stringify(val) === JSON.stringify(currentValue)) return;
+        emit2("update:modelValue", val);
+        if (props2.field.onUpdate) {
+          props2.field.onUpdate(val, currentValue);
+        }
+        formState.updateField(props2.fieldID, val);
+      }
+    });
+    const vIf = computed(() => {
+      if (props2.field["v-if"] === void 0 && props2.field.vIf === void 0) return true;
+      if (typeof props2.field["v-if"] === "boolean" || typeof props2.field.vIf === "boolean") return props2.field["v-if"];
+      if (typeof props2.field["v-if"] === "string" || typeof props2.field.vIf === "string") return true;
+      if (typeof props2.field["v-if"] === "function") return props2.field["v-if"](fieldData.value, formState.data.value);
+      if (typeof props2.field.vIf === "function") return props2.field.vIf(fieldData.value, formState.data.value);
+      return true;
+    });
     const computedOptions = computed(
-      () => bindAttrs({ options: props2.field.options }, fieldData, props2.modelValue).options
+      () => bindAttrs({ options: props2.field.options }, fieldData.value, formState.data.value).options
     );
     const computedAttrs = computed(() => {
       const attrs = { ...customAttrs.value, ...props2.field.attrs };
-      return bindAttrs(attrs, fieldData, props2.modelValue);
+      return bindAttrs(attrs, fieldData.value, formState.data.value);
     });
     const computedClass = computed(
       () => {
         var _a2;
-        return classify(fieldData, props2.modelValue, props2.field.class, (_a2 = props2.field.attrs) == null ? void 0 : _a2.class);
+        return classify(fieldData.value, formState.data.value, props2.field.class, (_a2 = props2.field.attrs) == null ? void 0 : _a2.class);
       }
     );
     return (_ctx, _cache) => {
       const _component_BglField = resolveComponent("BglField", true);
-      return _ctx.field.vIf === void 0 || _ctx.field.vIf ? (openBlock(), createBlock(resolveDynamicComponent(is4.value), mergeProps({ key: 0 }, computedAttrs.value, {
-        modelValue: unref(fieldData),
-        "onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => isRef(fieldData) ? fieldData.value = $event : null),
+      return vIf.value ? (openBlock(), createBlock(resolveDynamicComponent(is4.value), mergeProps({ key: 0 }, computedAttrs.value, {
+        modelValue: fieldData.value,
+        "onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => fieldData.value = $event),
         fieldID: props2.fieldID,
         required: _ctx.field.required,
         class: computedClass.value,
@@ -20434,6 +20437,7 @@ const _sfc_main$F = /* @__PURE__ */ defineComponent({
               flat: "",
               icon: "add",
               class: normalizeClass(["radius", [{ "bgl-big-ctrl-num-btn": _ctx.layout === "vertical" }]]),
+              tabindex: "-1",
               onClick: increment
             }, null, 8, ["class"])) : createCommentVNode("", true),
             withDirectives(createElementVNode("input", {
@@ -20487,6 +20491,7 @@ const _sfc_main$F = /* @__PURE__ */ defineComponent({
               flat: "",
               icon: "remove",
               class: normalizeClass(["radius", [{ "bgl-big-ctrl-num-btn": _ctx.layout === "vertical" }]]),
+              tabindex: "-1",
               onClick: decrement
             }, null, 8, ["class"])) : createCommentVNode("", true),
             _ctx.spinner && (!_ctx.layout || !btnLayouts.includes(_ctx.layout)) ? (openBlock(), createElementBlock("div", _hoisted_4$c, [
@@ -20496,6 +20501,7 @@ const _sfc_main$F = /* @__PURE__ */ defineComponent({
                 thin: "",
                 class: "bgl-ctrl-num-btn ctrl-add color-gray top-bgl-ctrl-num-btn",
                 disabled: !canAdd.value,
+                tabindex: "-1",
                 onClick: increment
               }, null, 8, ["disabled"]),
               createVNode(unref(Btn), {
@@ -20504,6 +20510,7 @@ const _sfc_main$F = /* @__PURE__ */ defineComponent({
                 thin: "",
                 class: "bgl-ctrl-num-btn ctrl-remove color-gray",
                 disabled: !canDecrement.value,
+                tabindex: "-1",
                 onClick: decrement
               }, null, 8, ["disabled"])
             ])) : createCommentVNode("", true)
@@ -20513,7 +20520,7 @@ const _sfc_main$F = /* @__PURE__ */ defineComponent({
     };
   }
 });
-const NumberInput = /* @__PURE__ */ _export_sfc(_sfc_main$F, [["__scopeId", "data-v-3a20cf4a"]]);
+const NumberInput = /* @__PURE__ */ _export_sfc(_sfc_main$F, [["__scopeId", "data-v-f265687e"]]);
 const _hoisted_1$w = ["value", "autofocus", "onKeydown", "onPaste"];
 const _sfc_main$E = /* @__PURE__ */ defineComponent({
   __name: "OTP",

package/dist/style.css

@@ -1251,14 +1251,14 @@ pre code.hljs{
 	direction: ltr;
 }
 
-.txtInputIconStart .iconStart[data-v-3a20cf4a] {
+.txtInputIconStart .iconStart[data-v-f265687e] {
 	color: var(--input-color);
 	position: absolute;
     inset-inline-start:calc(var(--input-height) / 3 - 0.25rem);
 	margin-top: calc(var(--input-height) / 2 );
 	line-height: 0;
 }
-.textInputSpinnerWrap .spinner[data-v-3a20cf4a] {
+.textInputSpinnerWrap .spinner[data-v-f265687e] {
 	color: var(--input-color);
 	position: absolute;
 	inset-inline-end: 0;
@@ -1268,18 +1268,18 @@ pre code.hljs{
 	flex-direction: column;
 	gap: 0;
 }
-.top-bgl-ctrl-num-btn[data-v-3a20cf4a]{
+.top-bgl-ctrl-num-btn[data-v-f265687e]{
 	margin-top: calc(var(--input-height) / 10) !important;
 }
-.bgl-ctrl-num-btn[data-v-3a20cf4a]{
+.bgl-ctrl-num-btn[data-v-f265687e]{
 	height: calc(var(--input-height) / 2.5) !important;
 	isolation: isolate;
 }
-.bgl-big-ctrl-num-btn[data-v-3a20cf4a]{
+.bgl-big-ctrl-num-btn[data-v-f265687e]{
 	width: 100% !important;
 	isolation: isolate;
 }
-.bgl-number-input[data-v-3a20cf4a]{
+.bgl-number-input[data-v-f265687e]{
 	padding-inline-end: 1.75rem !important;
 }
 

package/package.json

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

package/src/components/form/BglField.vue

@@ -13,10 +13,12 @@ import {
 	classify,
 	NumberInput,
 	UploadInput,
+	type BagelFormState,
 	BglForm
 } from '@bagelink/vue'
-import { useFormField } from '../../composables/useFormField'
+import { inject } from 'vue'
 import TabsNav from '../layout/TabsNav.vue'
+import { FORM_STATE_KEY, provideBagelFormState } from './useBagelFormState'
 
 const props = defineProps<{
 	field: Field<T>
@@ -29,7 +31,7 @@ const emit = defineEmits<{
 	'update:modelValue': [value: any]
 }>()
 
-const { fieldData } = useFormField(props)
+const formState = inject<BagelFormState<T>>(FORM_STATE_KEY) ?? provideBagelFormState(props.modelValue)
 
 const customAttrs = $ref<{ [key: string]: any }>({})
 
@@ -53,17 +55,50 @@ const is = $computed(() => {
 	return props.field.$el ?? 'div'
 })
 
+const fieldData = $computed({
+	get: () => {
+		if (!props.fieldID) return props.field.defaultValue ?? (props.field.$el === 'form' ? {} : '')
+		const value = formState.getFieldData(props.fieldID)
+		if (props.field.$el === 'form' && !value) return {}
+		return value ?? ''
+	},
+	set: (val: any) => {
+		if (!props.fieldID) return
+		const currentValue = formState.getFieldData(props.fieldID)
+		if (JSON.stringify(val) === JSON.stringify(currentValue)) return
+
+		emit('update:modelValue', val)
+		if (props.field.onUpdate) {
+			props.field.onUpdate(val, currentValue)
+		}
+		formState.updateField(props.fieldID, val)
+	}
+})
+
+const vIf = $computed(() => {
+	if (props.field['v-if'] === undefined && props.field.vIf === undefined) return true
+	if (typeof props.field['v-if'] === 'boolean' || typeof props.field.vIf === 'boolean') return props.field['v-if']
+	if (typeof props.field['v-if'] === 'string' || typeof props.field.vIf === 'string') return true
+	if (typeof props.field['v-if'] === 'function') return props.field['v-if'](fieldData, formState.data.value as T)
+	if (typeof props.field.vIf === 'function') return props.field.vIf(fieldData, formState.data.value as T)
+	return true
+})
+
+// const computedFieldData = $computed(
+// 	() => props.field.transform?.(fieldData, formState.data.value as T) ?? fieldData
+// )
+
 const computedOptions = $computed(
-	() => bindAttrs({ options: props.field.options }, fieldData, props.modelValue).options
+	() => bindAttrs({ options: props.field.options }, fieldData, formState.data.value).options
 )
 
 const computedAttrs = $computed(() => {
 	const attrs = { ...customAttrs, ...props.field.attrs }
-	return bindAttrs(attrs, fieldData, props.modelValue)
+	return bindAttrs(attrs, fieldData, formState.data.value)
 })
 
 const computedClass = $computed(
-	() => classify(fieldData, props.modelValue, props.field.class, props.field.attrs?.class)
+	() => classify(fieldData, formState.data.value, props.field.class, props.field.attrs?.class)
 )
 </script>
 
@@ -71,7 +106,7 @@ const computedClass = $computed(
 	<component
 		v-bind="computedAttrs"
 		:is="is"
-		v-if="field.vIf === undefined || field.vIf"
+		v-if="vIf"
 		v-model="fieldData"
 		:fieldID="props.fieldID"
 		:required="field.required"

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

@@ -104,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
@@ -138,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>