@bagelink/vue 0.0.214 → 0.0.216

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":"AAmBA;AAEA,OAAO,EAAE,KAAK,KAAK,EAAa,MAAM,eAAe,CAAC;;gBAoFtC,OAAO,MAAM,EAAE,GAAG,CAAC;WACxB,KAAK;;;;gBADA,OAAO,MAAM,EAAE,GAAG,CAAC;WACxB,KAAK;;;;AAPhB,wBAUG;AACH,KAAK,sBAAsB,CAAC,CAAC,IAAI,CAAC,SAAS,SAAS,GAAG,KAAK,GAAG,CAAC,CAAC;AACjE,KAAK,6BAA6B,CAAC,CAAC,IAAI;KAAG,CAAC,IAAI,MAAM,CAAC,CAAC,CAAC,GAAG,EAAE,SAAS,IAAI,CAAC,CAAC,EAAE,CAAC,CAAC,GAAG;QAAE,IAAI,EAAE,OAAO,KAAK,EAAE,QAAQ,CAAC,sBAAsB,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAA;KAAE,GAAG;QAAE,IAAI,EAAE,OAAO,KAAK,EAAE,QAAQ,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC;QAAC,QAAQ,EAAE,IAAI,CAAA;KAAE;CAAE,CAAC"}
+{"version":3,"file":"BglField.vue.d.ts","sourceRoot":"","sources":["../../../src/components/form/BglField.vue"],"names":[],"mappings":"AAoBA;AAEA,OAAO,EAAE,KAAK,KAAK,EAAa,MAAM,eAAe,CAAC;;gBA+FtC,OAAO,MAAM,EAAE,GAAG,CAAC;WACxB,KAAK;;;;gBADA,OAAO,MAAM,EAAE,GAAG,CAAC;WACxB,KAAK;;;;AAPhB,wBAUG;AACH,KAAK,sBAAsB,CAAC,CAAC,IAAI,CAAC,SAAS,SAAS,GAAG,KAAK,GAAG,CAAC,CAAC;AACjE,KAAK,6BAA6B,CAAC,CAAC,IAAI;KAAG,CAAC,IAAI,MAAM,CAAC,CAAC,CAAC,GAAG,EAAE,SAAS,IAAI,CAAC,CAAC,EAAE,CAAC,CAAC,GAAG;QAAE,IAAI,EAAE,OAAO,KAAK,EAAE,QAAQ,CAAC,sBAAsB,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAA;KAAE,GAAG;QAAE,IAAI,EAAE,OAAO,KAAK,EAAE,QAAQ,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC;QAAC,QAAQ,EAAE,IAAI,CAAA;KAAE;CAAE,CAAC"}

package/dist/components/form/BglForm.vue.d.ts

@@ -1,33 +1,38 @@
 import { type BglFormSchemaT } from '../..';
-declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__VLS_TypePropsToRuntimeProps<{
-    modelValue?: any;
-    schema: BglFormSchemaT;
-    onDelete?: ((id: string) => void) | undefined;
-    onSubmit?: ((data: any) => void) | undefined;
-}>, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<{
+    modelValue: import("vue").PropType<Record<string, any>>;
+    schema: {
+        type: import("vue").PropType<BglFormSchemaT>;
+        required: true;
+    };
+    onDelete: {
+        type: import("vue").PropType<(id: string) => void>;
+    };
+    onSubmit: {
+        type: import("vue").PropType<(data: any) => void>;
+    };
+}, {
+    validateForm: () => boolean | undefined;
+}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
     submit: (...args: any[]) => void;
-    "update:modelValue": (...args: any[]) => void;
-}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<__VLS_TypePropsToRuntimeProps<{
-    modelValue?: any;
-    schema: BglFormSchemaT;
-    onDelete?: ((id: string) => void) | undefined;
-    onSubmit?: ((data: any) => void) | undefined;
-}>>> & {
-    "onUpdate:modelValue"?: ((...args: any[]) => any) | undefined;
+}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
+    modelValue: import("vue").PropType<Record<string, any>>;
+    schema: {
+        type: import("vue").PropType<BglFormSchemaT>;
+        required: true;
+    };
+    onDelete: {
+        type: import("vue").PropType<(id: string) => void>;
+    };
+    onSubmit: {
+        type: import("vue").PropType<(data: any) => void>;
+    };
+}>> & {
     onSubmit?: ((...args: any[]) => any) | undefined;
 }, {}, {}>, {
     submit?(_: {}): any;
 }>;
 export default _default;
-type __VLS_NonUndefinedable<T> = T extends undefined ? never : T;
-type __VLS_TypePropsToRuntimeProps<T> = {
-    [K in keyof T]-?: {} extends Pick<T, K> ? {
-        type: import('vue').PropType<__VLS_NonUndefinedable<T[K]>>;
-    } : {
-        type: import('vue').PropType<T[K]>;
-        required: true;
-    };
-};
 type __VLS_WithTemplateSlots<T, S> = T & {
     new (): {
         $slots: S;

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

@@ -1 +1 @@
-{"version":3,"file":"BglForm.vue.d.ts","sourceRoot":"","sources":["../../../src/components/form/BglForm.vue"],"names":[],"mappings":"AAgBA;AAGA,OAAO,EAAE,KAAK,cAAc,EAAE,MAAM,eAAe,CAAC;;;;;;;;;;;;;;;;;;;;AAkMpD,wBAAwG;AACxG,KAAK,sBAAsB,CAAC,CAAC,IAAI,CAAC,SAAS,SAAS,GAAG,KAAK,GAAG,CAAC,CAAC;AACjE,KAAK,6BAA6B,CAAC,CAAC,IAAI;KAAG,CAAC,IAAI,MAAM,CAAC,CAAC,CAAC,GAAG,EAAE,SAAS,IAAI,CAAC,CAAC,EAAE,CAAC,CAAC,GAAG;QAAE,IAAI,EAAE,OAAO,KAAK,EAAE,QAAQ,CAAC,sBAAsB,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAA;KAAE,GAAG;QAAE,IAAI,EAAE,OAAO,KAAK,EAAE,QAAQ,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC;QAAC,QAAQ,EAAE,IAAI,CAAA;KAAE;CAAE,CAAC;AAC9M,KAAK,uBAAuB,CAAC,CAAC,EAAE,CAAC,IAAI,CAAC,GAAG;IAAE,QAAO;QAClD,MAAM,EAAE,CAAC,CAAC;KACT,CAAA;CAAE,CAAC"}
+{"version":3,"file":"BglForm.vue.d.ts","sourceRoot":"","sources":["../../../src/components/form/BglForm.vue"],"names":[],"mappings":"AAgBA;AAGA,OAAO,EAAE,KAAK,cAAc,EAAE,MAAM,eAAe,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA8MpD,wBAAwG;AAGxG,KAAK,uBAAuB,CAAC,CAAC,EAAE,CAAC,IAAI,CAAC,GAAG;IAAE,QAAO;QAClD,MAAM,EAAE,CAAC,CAAC;KACT,CAAA;CAAE,CAAC"}

package/dist/components/form/inputs/CheckInput.vue.d.ts

@@ -1,47 +1,46 @@
-declare const _default: import("vue").DefineComponent<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<{
-    label: string;
-    id?: string | undefined;
-    title?: string | undefined;
-    modelValue: boolean;
-    editMode?: boolean | undefined;
-    small?: boolean | undefined;
-}>, {
-    editMode: boolean;
-    id: string;
-}>, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
-    "update:modelValue": (...args: any[]) => void;
-}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<{
-    label: string;
-    id?: string | undefined;
-    title?: string | undefined;
-    modelValue: boolean;
-    editMode?: boolean | undefined;
-    small?: boolean | undefined;
-}>, {
-    editMode: boolean;
-    id: string;
-}>>> & {
-    "onUpdate:modelValue"?: ((...args: any[]) => any) | undefined;
-}, {
+declare const _default: import("vue").DefineComponent<{
+    modelValue: import("vue").PropType<boolean>;
+    small: {
+        type: import("vue").PropType<boolean>;
+    };
+    title: {
+        type: import("vue").PropType<string>;
+    };
+    label: {
+        type: import("vue").PropType<string>;
+        required: true;
+    };
+    id: {
+        type: import("vue").PropType<string>;
+        default: string;
+    };
+    editMode: {
+        type: import("vue").PropType<boolean>;
+        default: boolean;
+    };
+}, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
+    modelValue: import("vue").PropType<boolean>;
+    small: {
+        type: import("vue").PropType<boolean>;
+    };
+    title: {
+        type: import("vue").PropType<string>;
+    };
+    label: {
+        type: import("vue").PropType<string>;
+        required: true;
+    };
+    id: {
+        type: import("vue").PropType<string>;
+        default: string;
+    };
+    editMode: {
+        type: import("vue").PropType<boolean>;
+        default: boolean;
+    };
+}>>, {
     id: string;
     editMode: boolean;
 }, {}>;
 export default _default;
-type __VLS_NonUndefinedable<T> = T extends undefined ? never : T;
-type __VLS_TypePropsToRuntimeProps<T> = {
-    [K in keyof T]-?: {} extends Pick<T, K> ? {
-        type: import('vue').PropType<__VLS_NonUndefinedable<T[K]>>;
-    } : {
-        type: import('vue').PropType<T[K]>;
-        required: true;
-    };
-};
-type __VLS_WithDefaults<P, D> = {
-    [K in keyof Pick<P, keyof P>]: K extends keyof D ? __VLS_Prettify<P[K] & {
-        default: D[K];
-    }> : P[K];
-};
-type __VLS_Prettify<T> = {
-    [K in keyof T]: T[K];
-} & {};
 //# sourceMappingURL=CheckInput.vue.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"CheckInput.vue.d.ts","sourceRoot":"","sources":["../../../../src/components/form/inputs/CheckInput.vue"],"names":[],"mappings":"AAuBA;;WAsJW,MAAM;;;gBAGD,OAAO;;;;;;;;;WAHZ,MAAM;;;gBAGD,OAAO;;;;;;;;;QAFd,MAAM;cAGA,OAAO;;AAVtB,wBAcG;AACH,KAAK,sBAAsB,CAAC,CAAC,IAAI,CAAC,SAAS,SAAS,GAAG,KAAK,GAAG,CAAC,CAAC;AACjE,KAAK,6BAA6B,CAAC,CAAC,IAAI;KAAG,CAAC,IAAI,MAAM,CAAC,CAAC,CAAC,GAAG,EAAE,SAAS,IAAI,CAAC,CAAC,EAAE,CAAC,CAAC,GAAG;QAAE,IAAI,EAAE,OAAO,KAAK,EAAE,QAAQ,CAAC,sBAAsB,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAA;KAAE,GAAG;QAAE,IAAI,EAAE,OAAO,KAAK,EAAE,QAAQ,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC;QAAC,QAAQ,EAAE,IAAI,CAAA;KAAE;CAAE,CAAC;AAC9M,KAAK,kBAAkB,CAAC,CAAC,EAAE,CAAC,IAAI;KAE1B,CAAC,IAAI,MAAM,IAAI,CAAC,CAAC,EAAE,MAAM,CAAC,CAAC,GAAG,CAAC,SAAS,MAAM,CAAC,GAAG,cAAc,CAAC,CAAC,CAAC,CAAC,CAAC,GAAG;QACxE,OAAO,EAAE,CAAC,CAAC,CAAC,CAAC,CAAA;KACb,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC;CACT,CAAC;AACN,KAAK,cAAc,CAAC,CAAC,IAAI;KAAG,CAAC,IAAI,MAAM,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC;CAAG,GAAG,EAAE,CAAC"}
+{"version":3,"file":"CheckInput.vue.d.ts","sourceRoot":"","sources":["../../../../src/components/form/inputs/CheckInput.vue"],"names":[],"mappings":"AAuBA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;QA4IS,MAAM;cAEA,OAAO;;AAVtB,wBAeG"}

package/dist/index.cjs

@@ -18471,32 +18471,37 @@ const _sfc_main$s = /* @__PURE__ */ vue.defineComponent({
 const _hoisted_1$B = { key: 2 };
 const _sfc_main$r = /* @__PURE__ */ vue.defineComponent({
   __name: "BglForm",
-  props: {
-    modelValue: {},
+  props: /* @__PURE__ */ vue.mergeModels({
     schema: {},
     onDelete: { type: Function },
     onSubmit: { type: Function }
-  },
-  emits: ["update:modelValue", "submit"],
-  setup(__props, { emit: __emit }) {
+  }, {
+    "modelValue": { default: {} },
+    "modelModifiers": {}
+  }),
+  emits: /* @__PURE__ */ vue.mergeModels(["submit"], ["update:modelValue"]),
+  setup(__props, { expose: __expose, emit: __emit }) {
     const { showModal } = useModal();
+    const data2 = vue.useModel(__props, "modelValue");
     const props2 = __props;
-    let data2 = vue.ref({});
-    vue.watch(() => props2.modelValue, (val) => {
-      data2.value = val;
-    }, { immediate: true, deep: true });
+    const form = vue.ref();
+    const validateForm = () => {
+      var _a2, _b;
+      return (_b = (_a2 = form.value) == null ? void 0 : _a2.reportValidity) == null ? void 0 : _b.call(_a2);
+    };
     const updateModelValue = (val, fieldID) => {
-      if (!fieldID)
+      if (!fieldID || !data2.value)
         return;
       data2.value[fieldID] = val;
-      emits("update:modelValue", data2.value);
     };
+    __expose({ validateForm });
+    const clearForm = () => Object.assign(data2, {});
     const emits = __emit;
     const runSubmit = () => {
-      emits("submit", data2.value);
+      validateForm();
+      emits("submit", data2);
       clearForm();
     };
-    const clearForm = () => data2.value = {};
     const i18nT = (val) => val;
     const runDelete = () => {
       showModal(
@@ -18521,17 +18526,19 @@ const _sfc_main$r = /* @__PURE__ */ vue.defineComponent({
     return (_ctx, _cache) => {
       var _a2;
       return vue.openBlock(), vue.createElementBlock("form", {
+        ref_key: "form",
+        ref: form,
         onSubmit: vue.withModifiers(runSubmit, ["prevent"])
       }, [
         (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(_ctx.schema, (field, i3) => {
           return vue.openBlock(), vue.createBlock(vue.unref(_sfc_main$q), {
             key: field.id || `${i3}p`,
             field,
-            modelValue: vue.unref(data2),
+            modelValue: data2.value,
             "onUpdate:modelValue": ($event) => updateModelValue($event, (field == null ? void 0 : field.id) || "")
           }, null, 8, ["field", "modelValue", "onUpdate:modelValue"]);
         }), 128)),
-        ((_a2 = _ctx.modelValue) == null ? void 0 : _a2.id) && _ctx.onDelete ? (vue.openBlock(), vue.createBlock(vue.unref(Btn), {
+        ((_a2 = data2.value) == null ? void 0 : _a2.id) && _ctx.onDelete ? (vue.openBlock(), vue.createBlock(vue.unref(Btn), {
           key: 0,
           class: "del-top",
           onClick: runDelete,
@@ -18549,7 +18556,7 @@ const _sfc_main$r = /* @__PURE__ */ vue.defineComponent({
         })) : (vue.openBlock(), vue.createElementBlock("div", _hoisted_1$B, [
           vue.renderSlot(_ctx.$slots, "submit")
         ]))
-      ], 32);
+      ], 544);
     };
   }
 });
@@ -18562,11 +18569,23 @@ const _sfc_main$q = /* @__PURE__ */ vue.defineComponent({
   emits: ["update:modelValue"],
   setup(__props, { emit: __emit }) {
     const props2 = __props;
+    const vIf = vue.computed(() => {
+      if (props2.field["v-if"] === void 0)
+        return true;
+      if (typeof props2.field["v-if"] === "boolean")
+        return props2.field["v-if"];
+      if (typeof props2.field["v-if"] === "string")
+        return !!props2.modelValue[props2.field["v-if"]];
+      if (typeof props2.field["v-if"] === "function")
+        return props2.field["v-if"](props2.modelValue[props2.field.id || ""], props2.modelValue);
+      return true;
+    });
     const emits = __emit;
     return (_ctx, _cache) => {
       var _a2;
       const _component_BglField = vue.resolveComponent("BglField", true);
-      return vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent(_ctx.field.$el || "div"), vue.mergeProps({
+      return vIf.value ? (vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent(_ctx.field.$el || "div"), vue.mergeProps({
+        key: 0,
         required: _ctx.field.required
       }, vue.unref(bindAttrs)(((_a2 = _ctx.field) == null ? void 0 : _a2.attrs) || {}, props2.modelValue[_ctx.field.id || ""], props2.modelValue), {
         label: _ctx.field.label,
@@ -18586,11 +18605,11 @@ const _sfc_main$q = /* @__PURE__ */ vue.defineComponent({
           }), 128))
         ]),
         _: 1
-      }, 16, ["required", "label", "id", "placeholder", "modelValue"]);
+      }, 16, ["required", "label", "id", "placeholder", "modelValue"])) : vue.createCommentVNode("", true);
     };
   }
 });
-const _withScopeId = (n) => (vue.pushScopeId("data-v-4594626f"), n = n(), vue.popScopeId(), n);
+const _withScopeId = (n) => (vue.pushScopeId("data-v-0cde7fe3"), n = n(), vue.popScopeId(), n);
 const _hoisted_1$A = ["title"];
 const _hoisted_2$x = ["id"];
 const _hoisted_3$t = /* @__PURE__ */ _withScopeId(() => /* @__PURE__ */ vue.createElementVNode("svg", {
@@ -18604,32 +18623,19 @@ const _hoisted_3$t = /* @__PURE__ */ _withScopeId(() => /* @__PURE__ */ vue.crea
 const _hoisted_4$f = ["for"];
 const _sfc_main$p = /* @__PURE__ */ vue.defineComponent({
   __name: "CheckInput",
-  props: {
+  props: /* @__PURE__ */ vue.mergeModels({
     label: {},
     id: { default: Math.random().toString(36).substring(7) },
     title: {},
-    modelValue: { type: Boolean },
     editMode: { type: Boolean, default: true },
     small: { type: Boolean }
-  },
+  }, {
+    "modelValue": { type: Boolean, ...{ default: false } },
+    "modelModifiers": {}
+  }),
   emits: ["update:modelValue"],
-  setup(__props, { emit: __emit }) {
-    const emits = __emit;
-    const props2 = __props;
-    let inputVal = vue.ref(false);
-    vue.watch(inputVal.value, (newVal) => {
-      if (newVal === void 0)
-        return;
-      emits("update:modelValue", newVal);
-    });
-    vue.watch(
-      () => props2.modelValue,
-      (newVal) => {
-        if (inputVal.value !== newVal)
-          inputVal.value = newVal;
-      },
-      { immediate: true }
-    );
+  setup(__props) {
+    const inputVal = vue.useModel(__props, "modelValue");
     return (_ctx, _cache) => {
       return vue.openBlock(), vue.createElementBlock("div", {
         class: vue.normalizeClass(["bagel-input bgl-checkbox", { small: _ctx.small, "no-edit": !_ctx.editMode }]),
@@ -18638,10 +18644,10 @@ const _sfc_main$p = /* @__PURE__ */ vue.defineComponent({
         vue.withDirectives(vue.createElementVNode("input", {
           id: _ctx.id,
           type: "checkbox",
-          "onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => vue.isRef(inputVal) ? inputVal.value = $event : inputVal = $event),
+          "onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => inputVal.value = $event),
           class: vue.normalizeClass({ "no-edit": !_ctx.editMode })
         }, null, 10, _hoisted_2$x), [
-          [vue.vModelCheckbox, vue.unref(inputVal)]
+          [vue.vModelCheckbox, inputVal.value]
         ]),
         _hoisted_3$t,
         vue.createElementVNode("label", { for: _ctx.id }, vue.toDisplayString(_ctx.label), 9, _hoisted_4$f)
@@ -18649,7 +18655,7 @@ const _sfc_main$p = /* @__PURE__ */ vue.defineComponent({
     };
   }
 });
-const CheckInput = /* @__PURE__ */ _export_sfc(_sfc_main$p, [["__scopeId", "data-v-4594626f"]]);
+const CheckInput = /* @__PURE__ */ _export_sfc(_sfc_main$p, [["__scopeId", "data-v-0cde7fe3"]]);
 const _hoisted_1$z = ["title"];
 const _hoisted_2$w = { key: 0 };
 const _hoisted_3$s = { class: "flex gap-3" };

package/dist/index.mjs

@@ -1,4 +1,4 @@
-import { inject, ref, defineComponent, h, openBlock, createElementBlock, Fragment as Fragment$1, createElementVNode, createTextVNode, toDisplayString, watch, onMounted, withKeys, withModifiers, normalizeStyle, resolveComponent, normalizeClass, renderSlot, renderList, createBlock, withCtx, pushScopeId, popScopeId, useCssVars, useSlots, computed, resolveDynamicComponent, unref, createCommentVNode, onUnmounted, createVNode, mergeProps, withDirectives, vModelText, isRef, reactive, Transition, markRaw, vModelCheckbox, Teleport, vModelDynamic, TransitionGroup, toRef, nextTick, createSlots, normalizeProps, guardReactiveProps, render as render$e, onBeforeUpdate, vShow, getCurrentScope, onScopeDispose, vModelRadio, provide } from "vue";
+import { inject, ref, defineComponent, h, openBlock, createElementBlock, Fragment as Fragment$1, createElementVNode, createTextVNode, toDisplayString, watch, onMounted, withKeys, withModifiers, normalizeStyle, resolveComponent, normalizeClass, renderSlot, renderList, createBlock, withCtx, pushScopeId, popScopeId, useCssVars, useSlots, computed, resolveDynamicComponent, unref, createCommentVNode, onUnmounted, createVNode, mergeProps, withDirectives, vModelText, isRef, reactive, Transition, markRaw, vModelCheckbox, mergeModels, useModel, Teleport, vModelDynamic, TransitionGroup, toRef, nextTick, createSlots, normalizeProps, guardReactiveProps, render as render$e, onBeforeUpdate, vShow, getCurrentScope, onScopeDispose, vModelRadio, provide } from "vue";
 function bind$2(fn2, thisArg) {
   return function wrap2() {
     return fn2.apply(thisArg, arguments);
@@ -18469,32 +18469,37 @@ const _sfc_main$s = /* @__PURE__ */ defineComponent({
 const _hoisted_1$B = { key: 2 };
 const _sfc_main$r = /* @__PURE__ */ defineComponent({
   __name: "BglForm",
-  props: {
-    modelValue: {},
+  props: /* @__PURE__ */ mergeModels({
     schema: {},
     onDelete: { type: Function },
     onSubmit: { type: Function }
-  },
-  emits: ["update:modelValue", "submit"],
-  setup(__props, { emit: __emit }) {
+  }, {
+    "modelValue": { default: {} },
+    "modelModifiers": {}
+  }),
+  emits: /* @__PURE__ */ mergeModels(["submit"], ["update:modelValue"]),
+  setup(__props, { expose: __expose, emit: __emit }) {
     const { showModal } = useModal();
+    const data2 = useModel(__props, "modelValue");
     const props2 = __props;
-    let data2 = ref({});
-    watch(() => props2.modelValue, (val) => {
-      data2.value = val;
-    }, { immediate: true, deep: true });
+    const form = ref();
+    const validateForm = () => {
+      var _a2, _b;
+      return (_b = (_a2 = form.value) == null ? void 0 : _a2.reportValidity) == null ? void 0 : _b.call(_a2);
+    };
     const updateModelValue = (val, fieldID) => {
-      if (!fieldID)
+      if (!fieldID || !data2.value)
         return;
       data2.value[fieldID] = val;
-      emits("update:modelValue", data2.value);
     };
+    __expose({ validateForm });
+    const clearForm = () => Object.assign(data2, {});
     const emits = __emit;
     const runSubmit = () => {
-      emits("submit", data2.value);
+      validateForm();
+      emits("submit", data2);
       clearForm();
     };
-    const clearForm = () => data2.value = {};
     const i18nT = (val) => val;
     const runDelete = () => {
       showModal(
@@ -18519,17 +18524,19 @@ const _sfc_main$r = /* @__PURE__ */ defineComponent({
     return (_ctx, _cache) => {
       var _a2;
       return openBlock(), createElementBlock("form", {
+        ref_key: "form",
+        ref: form,
         onSubmit: withModifiers(runSubmit, ["prevent"])
       }, [
         (openBlock(true), createElementBlock(Fragment$1, null, renderList(_ctx.schema, (field, i3) => {
           return openBlock(), createBlock(unref(_sfc_main$q), {
             key: field.id || `${i3}p`,
             field,
-            modelValue: unref(data2),
+            modelValue: data2.value,
             "onUpdate:modelValue": ($event) => updateModelValue($event, (field == null ? void 0 : field.id) || "")
           }, null, 8, ["field", "modelValue", "onUpdate:modelValue"]);
         }), 128)),
-        ((_a2 = _ctx.modelValue) == null ? void 0 : _a2.id) && _ctx.onDelete ? (openBlock(), createBlock(unref(Btn), {
+        ((_a2 = data2.value) == null ? void 0 : _a2.id) && _ctx.onDelete ? (openBlock(), createBlock(unref(Btn), {
           key: 0,
           class: "del-top",
           onClick: runDelete,
@@ -18547,7 +18554,7 @@ const _sfc_main$r = /* @__PURE__ */ defineComponent({
         })) : (openBlock(), createElementBlock("div", _hoisted_1$B, [
           renderSlot(_ctx.$slots, "submit")
         ]))
-      ], 32);
+      ], 544);
     };
   }
 });
@@ -18560,11 +18567,23 @@ const _sfc_main$q = /* @__PURE__ */ defineComponent({
   emits: ["update:modelValue"],
   setup(__props, { emit: __emit }) {
     const props2 = __props;
+    const vIf = computed(() => {
+      if (props2.field["v-if"] === void 0)
+        return true;
+      if (typeof props2.field["v-if"] === "boolean")
+        return props2.field["v-if"];
+      if (typeof props2.field["v-if"] === "string")
+        return !!props2.modelValue[props2.field["v-if"]];
+      if (typeof props2.field["v-if"] === "function")
+        return props2.field["v-if"](props2.modelValue[props2.field.id || ""], props2.modelValue);
+      return true;
+    });
     const emits = __emit;
     return (_ctx, _cache) => {
       var _a2;
       const _component_BglField = resolveComponent("BglField", true);
-      return openBlock(), createBlock(resolveDynamicComponent(_ctx.field.$el || "div"), mergeProps({
+      return vIf.value ? (openBlock(), createBlock(resolveDynamicComponent(_ctx.field.$el || "div"), mergeProps({
+        key: 0,
         required: _ctx.field.required
       }, unref(bindAttrs)(((_a2 = _ctx.field) == null ? void 0 : _a2.attrs) || {}, props2.modelValue[_ctx.field.id || ""], props2.modelValue), {
         label: _ctx.field.label,
@@ -18584,11 +18603,11 @@ const _sfc_main$q = /* @__PURE__ */ defineComponent({
           }), 128))
         ]),
         _: 1
-      }, 16, ["required", "label", "id", "placeholder", "modelValue"]);
+      }, 16, ["required", "label", "id", "placeholder", "modelValue"])) : createCommentVNode("", true);
     };
   }
 });
-const _withScopeId = (n) => (pushScopeId("data-v-4594626f"), n = n(), popScopeId(), n);
+const _withScopeId = (n) => (pushScopeId("data-v-0cde7fe3"), n = n(), popScopeId(), n);
 const _hoisted_1$A = ["title"];
 const _hoisted_2$x = ["id"];
 const _hoisted_3$t = /* @__PURE__ */ _withScopeId(() => /* @__PURE__ */ createElementVNode("svg", {
@@ -18602,32 +18621,19 @@ const _hoisted_3$t = /* @__PURE__ */ _withScopeId(() => /* @__PURE__ */ createEl
 const _hoisted_4$f = ["for"];
 const _sfc_main$p = /* @__PURE__ */ defineComponent({
   __name: "CheckInput",
-  props: {
+  props: /* @__PURE__ */ mergeModels({
     label: {},
     id: { default: Math.random().toString(36).substring(7) },
     title: {},
-    modelValue: { type: Boolean },
     editMode: { type: Boolean, default: true },
     small: { type: Boolean }
-  },
+  }, {
+    "modelValue": { type: Boolean, ...{ default: false } },
+    "modelModifiers": {}
+  }),
   emits: ["update:modelValue"],
-  setup(__props, { emit: __emit }) {
-    const emits = __emit;
-    const props2 = __props;
-    let inputVal = ref(false);
-    watch(inputVal.value, (newVal) => {
-      if (newVal === void 0)
-        return;
-      emits("update:modelValue", newVal);
-    });
-    watch(
-      () => props2.modelValue,
-      (newVal) => {
-        if (inputVal.value !== newVal)
-          inputVal.value = newVal;
-      },
-      { immediate: true }
-    );
+  setup(__props) {
+    const inputVal = useModel(__props, "modelValue");
     return (_ctx, _cache) => {
       return openBlock(), createElementBlock("div", {
         class: normalizeClass(["bagel-input bgl-checkbox", { small: _ctx.small, "no-edit": !_ctx.editMode }]),
@@ -18636,10 +18642,10 @@ const _sfc_main$p = /* @__PURE__ */ defineComponent({
         withDirectives(createElementVNode("input", {
           id: _ctx.id,
           type: "checkbox",
-          "onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => isRef(inputVal) ? inputVal.value = $event : inputVal = $event),
+          "onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => inputVal.value = $event),
           class: normalizeClass({ "no-edit": !_ctx.editMode })
         }, null, 10, _hoisted_2$x), [
-          [vModelCheckbox, unref(inputVal)]
+          [vModelCheckbox, inputVal.value]
         ]),
         _hoisted_3$t,
         createElementVNode("label", { for: _ctx.id }, toDisplayString(_ctx.label), 9, _hoisted_4$f)
@@ -18647,7 +18653,7 @@ const _sfc_main$p = /* @__PURE__ */ defineComponent({
     };
   }
 });
-const CheckInput = /* @__PURE__ */ _export_sfc(_sfc_main$p, [["__scopeId", "data-v-4594626f"]]);
+const CheckInput = /* @__PURE__ */ _export_sfc(_sfc_main$p, [["__scopeId", "data-v-0cde7fe3"]]);
 const _hoisted_1$z = ["title"];
 const _hoisted_2$w = { key: 0 };
 const _hoisted_3$s = { class: "flex gap-3" };

package/dist/style.css

@@ -1738,25 +1738,25 @@ input:checked + .slider[data-v-dee6bdf5]:before {
   --bgl-primary: #19b8ea;
 }
 
-.bgl-checkbox[data-v-4594626f]{
+.bgl-checkbox[data-v-0cde7fe3]{
 position: relative;
 }
-.bgl-checkbox input[type=checkbox][data-v-4594626f]{
+.bgl-checkbox input[type=checkbox][data-v-0cde7fe3]{
   display: none;
 }
-.bgl-checkbox label[data-v-4594626f]{
+.bgl-checkbox label[data-v-0cde7fe3]{
   padding-inline-start: calc(var(--input-height) / 2 + 0.25rem);
   transition: var(--bgl-transition);
   cursor: pointer;
   user-select: none;
 }
-.bgl-checkbox[data-v-4594626f]:hover{
+.bgl-checkbox[data-v-0cde7fe3]:hover{
   filter: brightness(90%);
 }
-.bgl-checkbox[data-v-4594626f]:active{
+.bgl-checkbox[data-v-0cde7fe3]:active{
   filter: var(--bgl-active-filter);
 }
-.bgl-checkbox label[data-v-4594626f]::before{
+.bgl-checkbox label[data-v-0cde7fe3]::before{
   content: "";
   width: calc(var(--input-height) / 2.5);
   height: calc(var(--input-height) / 2.5);
@@ -1768,10 +1768,10 @@ position: relative;
   border-radius: calc(var(--input-border-radius) / 2) ;
   border: var(--bgl-primary) 1px solid;
 }
-input:checked ~ label[data-v-4594626f]::before{
+input:checked ~ label[data-v-0cde7fe3]::before{
   background: var(--bgl-primary);
 }
-.bgl-checkbox svg[data-v-4594626f]{
+.bgl-checkbox svg[data-v-0cde7fe3]{
   width: calc(var(--input-height) / 2.5);
   height: calc(var(--input-height) / 2.5);
   position: absolute;
@@ -1782,7 +1782,7 @@ input:checked ~ label[data-v-4594626f]::before{
   opacity: 0;
   pointer-events: none;
 }
-input:checked ~ svg[data-v-4594626f]{
+input:checked ~ svg[data-v-0cde7fe3]{
   opacity: 1;
 }
 

package/package.json

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

package/src/components/form/BglField.vue

@@ -2,6 +2,7 @@
 	<component
 		:required="field.required"
 		v-bind="bindAttrs(field?.attrs||{}, props.modelValue[field.id || ''], props.modelValue,)"
+		v-if="vIf"
 		:is="field.$el || 'div'"
 		:label="field.label"
 		:id="field.id"
@@ -26,5 +27,13 @@ const props = defineProps<{
     field: Field
   }>();
 
+const vIf = $computed(() => {
+	if (props.field['v-if'] === undefined) return true;
+	if (typeof props.field['v-if'] === 'boolean') return props.field['v-if'];
+	if (typeof props.field['v-if'] === 'string') return !!props.modelValue[props.field['v-if']];
+	if (typeof props.field['v-if'] === 'function') return props.field['v-if']!(props.modelValue[props.field.id || ''], props.modelValue);
+	return true;
+});
+
 const emits = defineEmits(['update:modelValue']);
 </script>

package/src/components/form/BglForm.vue

@@ -1,11 +1,11 @@
 <template>
-	<form @submit.prevent="runSubmit">
+	<form ref="form" @submit.prevent="runSubmit">
 		<BglField
 			v-for="(field, i) in schema" :key="field.id || `${i  }p`" :field="field" :modelValue="data"
 			@update:modelValue="($event)=>updateModelValue($event, field?.id || '')"
 		/>
 		<Btn
-			class="del-top" v-if="modelValue?.id && onDelete" @click="runDelete" value="Delete" flat icon="delete"
+			class="del-top" v-if="data?.id && onDelete" @click="runDelete" value="Delete" flat icon="delete"
 			color="red" thin
 		/>
 		<Btn v-if="!$slots.submit && onSubmit" value="Submit" type="submit" thin />
@@ -18,37 +18,37 @@
 <script lang="ts" setup>
 import { Btn, useModal, BglField } from '@bagelink/vue';
 import { type BglFormSchemaT } from '@bagelink/vue';
-import { watch } from 'vue';
 
 const { showModal } = useModal();
 
+const data = defineModel<Record<string, any>>('modelValue', { default: {} });
+
 const props = defineProps<{
-	modelValue?: any;
 	schema: BglFormSchemaT;
 	onDelete?: ((id: string) => void);
 	onSubmit?: ((data: any) => void);
 }>();
 
-let data = $ref<Record<string, any>>({});
+const form = $ref<HTMLFormElement>();
 
-watch(() => props.modelValue, (val) => {
-	data = val;
-}, { immediate: true, deep: true });
+const validateForm = () => form?.reportValidity?.();
 
 const updateModelValue = (val: any, fieldID: string) => {
-	if (!fieldID) return;
-	data[fieldID] = val;
-	emits('update:modelValue', data);
+	if (!fieldID || !data.value) return;
+	data.value[fieldID] = val;
 };
 
-const emits = defineEmits(['update:modelValue', 'submit']);
+defineExpose({ validateForm });
+
+const clearForm = () => Object.assign(data, {});
+const emits = defineEmits(['submit']);
+
 const runSubmit = () => {
+	validateForm();
 	emits('submit', data);
 	clearForm();
 };
 
-const clearForm = () => data = {};
-
 const i18nT = (val: string) => val;
 
 const runDelete = () => {
@@ -60,7 +60,7 @@ const runDelete = () => {
 				{
 					value: 'Confirm',
 					color: 'red',
-					onClick: () => props.onDelete?.(data.id),
+					onClick: () => props.onDelete?.(data.value.id),
 				},
 				{ value: 'Cancel', color: 'gray' },
 			],

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

@@ -23,15 +23,11 @@
 </template>
 
 <script setup lang="ts">
-import { watch } from 'vue';
-
-const emits = defineEmits(['update:modelValue']);
-const props = withDefaults(
+withDefaults(
 	defineProps<{
     label: string;
     id?: string;
     title?: string;
-    modelValue: boolean;
     editMode?: boolean;
     small?: boolean;
   }>(),
@@ -41,19 +37,7 @@ const props = withDefaults(
 	},
 );
 
-let inputVal = $ref(false);
-watch(inputVal, (newVal) => {
-	if (newVal === undefined) return;
-	emits('update:modelValue', newVal);
-});
-
-watch(
-	() => props.modelValue,
-	(newVal) => {
-		if (inputVal !== newVal) inputVal = newVal;
-	},
-	{ immediate: true },
-);
+const inputVal = defineModel<boolean>('modelValue', { default: false });
 </script>
 <style>
 :root {

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

@@ -20,15 +20,11 @@
 </template>
 
 <script setup lang="ts">
-import { watch, ref, onMounted } from 'vue';
-
-const emits = defineEmits(['update:modelValue']);
-const props = withDefaults(
+withDefaults(
 	defineProps<{
     label: string;
     id?: string;
     title?: string;
-    modelValue: boolean;
     editMode?: boolean;
     small?: boolean;
   }>(),
@@ -38,18 +34,7 @@ const props = withDefaults(
 	},
 );
 
-const inputVal = ref(false);
-watch(inputVal, (newVal) => {
-	if (newVal === undefined) return;
-	emits('update:modelValue', newVal);
-});
-watch(
-	() => props.modelValue,
-	(newVal) => {
-		if (inputVal.value !== newVal) inputVal.value = newVal;
-	},
-);
-onMounted(() => (inputVal.value = !!props.modelValue));
+const inputVal = defineModel<boolean>('modelValue', { default: false });
 </script>
 
 <style scoped>