@bagelink/vue 1.1.33 → 1.1.35-beta.2

package/dist/components/form/useBagelFormState.d.ts

@@ -1,6 +1,6 @@
 import { Ref } from 'vue';
 export declare const FORM_STATE_KEY: unique symbol;
-export interface BagelFormState<T = any> {
+export interface BagelFormState<T> {
     data: Ref<T>;
     getFieldData: (path?: string) => any;
     updateField: (path: string, value: any) => void;

package/dist/components/form/useBagelFormState.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"useBagelFormState.d.ts","sourceRoot":"","sources":["../../../src/components/form/useBagelFormState.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,GAAG,EAAE,MAAM,KAAK,CAAA;AAI9B,eAAO,MAAM,cAAc,eAA2B,CAAA;AAEtD,MAAM,WAAW,cAAc,CAAC,CAAC,GAAG,GAAG;IACtC,IAAI,EAAE,GAAG,CAAC,CAAC,CAAC,CAAA;IACZ,YAAY,EAAE,CAAC,IAAI,CAAC,EAAE,MAAM,KAAK,GAAG,CAAA;IACpC,WAAW,EAAE,CAAC,IAAI,EAAE,MAAM,EAAE,KAAK,EAAE,GAAG,KAAK,IAAI,CAAA;IAC/C,OAAO,EAAE,GAAG,CAAC,OAAO,CAAC,CAAA;CACrB;AAkBD,wBAAgB,qBAAqB,CAAC,CAAC,EAAE,WAAW,EAAE,CAAC,qBAwCtD;AAED,wBAAgB,iBAAiB,CAAC,CAAC,EAAE,YAAY,GAAE,OAAO,cAA+B,GAAG,cAAc,CAAC,CAAC,CAAC,CAI5G"}
+{"version":3,"file":"useBagelFormState.d.ts","sourceRoot":"","sources":["../../../src/components/form/useBagelFormState.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,GAAG,EAAE,MAAM,KAAK,CAAA;AAI9B,eAAO,MAAM,cAAc,eAA2B,CAAA;AAEtD,MAAM,WAAW,cAAc,CAAC,CAAC;IAChC,IAAI,EAAE,GAAG,CAAC,CAAC,CAAC,CAAA;IACZ,YAAY,EAAE,CAAC,IAAI,CAAC,EAAE,MAAM,KAAK,GAAG,CAAA;IACpC,WAAW,EAAE,CAAC,IAAI,EAAE,MAAM,EAAE,KAAK,EAAE,GAAG,KAAK,IAAI,CAAA;IAC/C,OAAO,EAAE,GAAG,CAAC,OAAO,CAAC,CAAA;CACrB;AAkBD,wBAAgB,qBAAqB,CAAC,CAAC,EAAE,WAAW,EAAE,CAAC,qBAwCtD;AAED,wBAAgB,iBAAiB,CAAC,CAAC,EAAE,YAAY,GAAE,OAAO,cAA+B,GAAG,cAAc,CAAC,CAAC,CAAC,CAI5G"}

package/dist/composables/index.d.ts

@@ -1,6 +1,7 @@
 import { BglFormSchemaFnT, BglFormSchemaT, IfAny } from '..';
 import { Ref, UnwrapRef } from 'vue';
 export { useDevice } from './useDevice';
+export { useValidateFieldValue } from './useValidateFieldValue';
 interface UseBglSchemaParamsT<T> {
     schema?: BglFormSchemaFnT<T>;
     columns?: string[];

package/dist/composables/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/composables/index.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,gBAAgB,EAAE,cAAc,EAAE,KAAK,EAAE,MAAM,eAAe,CAAA;AAE5E,OAAO,KAAK,EAAE,GAAG,EAAE,SAAS,EAAE,MAAM,KAAK,CAAA;AAIzC,OAAO,EAAE,SAAS,EAAE,MAAM,aAAa,CAAA;AAEvC,UAAU,mBAAmB,CAAC,CAAC;IAC9B,MAAM,CAAC,EAAE,gBAAgB,CAAC,CAAC,CAAC,CAAA;IAC5B,OAAO,CAAC,EAAE,MAAM,EAAE,CAAA;IAClB,IAAI,CAAC,EAAE,GAAG,EAAE,CAAA;CACZ;AAED,wBAAgB,YAAY,CAAC,CAAC,GAAG;IAAE,CAAC,GAAG,EAAE,MAAM,GAAG,OAAO,CAAA;CAAE,EAC1D,EAAE,MAAM,EAAE,OAAO,EAAE,IAAI,EAAE,GAAE,mBAAmB,CAAC,CAAC,CAAM,GACpD,cAAc,CAAC,CAAC,CAAC,CAanB;AAED,wBAAgB,QAAQ,CAAC,CAAC,EACzB,GAAG,EAAE,MAAM,EACX,YAAY,EAAE,CAAC,GACb,CAAC,CAAC,CAAC,SAAS,CAAC,GAAG,CAAC,GAAG,EAAE,GAAG,CAAC,CAAC,GAC5B,KAAK,CAAC,CAAC,EAAE,GAAG,CAAC,CAAC,EAAE,CAAC,CAAC,EAAE,CAAC,CAAC,GACtB,GAAG,CAAC,SAAS,CAAC,CAAC,CAAC,EAAE,CAAC,GAAG,SAAS,CAAC,CAAC,CAAC,CAAC,CAUpC;AAED,eAAO,MAAM,eAAe,iBAAW,CAAA"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/composables/index.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,gBAAgB,EAAE,cAAc,EAAE,KAAK,EAAE,MAAM,eAAe,CAAA;AAE5E,OAAO,KAAK,EAAE,GAAG,EAAE,SAAS,EAAE,MAAM,KAAK,CAAA;AAIzC,OAAO,EAAE,SAAS,EAAE,MAAM,aAAa,CAAA;AACvC,OAAO,EAAE,qBAAqB,EAAE,MAAM,yBAAyB,CAAA;AAE/D,UAAU,mBAAmB,CAAC,CAAC;IAC9B,MAAM,CAAC,EAAE,gBAAgB,CAAC,CAAC,CAAC,CAAA;IAC5B,OAAO,CAAC,EAAE,MAAM,EAAE,CAAA;IAClB,IAAI,CAAC,EAAE,GAAG,EAAE,CAAA;CACZ;AAED,wBAAgB,YAAY,CAAC,CAAC,GAAG;IAAE,CAAC,GAAG,EAAE,MAAM,GAAG,OAAO,CAAA;CAAE,EAC1D,EAAE,MAAM,EAAE,OAAO,EAAE,IAAI,EAAE,GAAE,mBAAmB,CAAC,CAAC,CAAM,GACpD,cAAc,CAAC,CAAC,CAAC,CAanB;AAED,wBAAgB,QAAQ,CAAC,CAAC,EACzB,GAAG,EAAE,MAAM,EACX,YAAY,EAAE,CAAC,GACb,CAAC,CAAC,CAAC,SAAS,CAAC,GAAG,CAAC,GAAG,EAAE,GAAG,CAAC,CAAC,GAC5B,KAAK,CAAC,CAAC,EAAE,GAAG,CAAC,CAAC,EAAE,CAAC,CAAC,EAAE,CAAC,CAAC,GACtB,GAAG,CAAC,SAAS,CAAC,CAAC,CAAC,EAAE,CAAC,GAAG,SAAS,CAAC,CAAC,CAAC,CAAC,CAUpC;AAED,eAAO,MAAM,eAAe,iBAAW,CAAA"}

package/dist/composables/useFormField.d.ts

@@ -1,6 +1,6 @@
 import { Field } from '..';
 import { BagelFormState } from '../components/form/useBagelFormState';
-export declare function useFormField<T = any>(props: {
+export declare function useFormField<T>(props: {
     field: Field<T>;
     fieldID?: string;
     modelValue?: any;

package/dist/composables/useFormField.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"useFormField.d.ts","sourceRoot":"","sources":["../../src/composables/useFormField.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,KAAK,EAAE,MAAM,eAAe,CAAA;AAC1C,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,sCAAsC,CAAA;AAI1E,wBAAgB,YAAY,CAAC,CAAC,GAAG,GAAG,EAAE,KAAK,EAAE;IAC5C,KAAK,EAAE,KAAK,CAAC,CAAC,CAAC,CAAA;IACf,OAAO,CAAC,EAAE,MAAM,CAAA;IAChB,UAAU,CAAC,EAAE,GAAG,CAAA;CAChB;;;EA0BA"}
+{"version":3,"file":"useFormField.d.ts","sourceRoot":"","sources":["../../src/composables/useFormField.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,KAAK,EAAE,MAAM,eAAe,CAAA;AAC1C,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,sCAAsC,CAAA;AAI1E,wBAAgB,YAAY,CAAC,CAAC,EAAE,KAAK,EAAE;IACtC,KAAK,EAAE,KAAK,CAAC,CAAC,CAAC,CAAA;IACf,OAAO,CAAC,EAAE,MAAM,CAAA;IAChB,UAAU,CAAC,EAAE,GAAG,CAAA;CAChB;;;EA0BA"}

package/dist/composables/useSchemaField.d.ts

@@ -2,7 +2,7 @@ import { VNode } from 'vue';
 import { BaseBagelField, BglFormSchemaT } from '../types/BagelForm';
 export interface UseSchemaFieldOptions<T> {
     mode?: 'form' | 'preview' | 'table';
-    getRowData?: () => T;
+    getFormData?: () => T;
     onUpdate?: (field: BaseBagelField<T>, value: any) => void;
     includeUnset?: boolean;
 }

package/dist/composables/useSchemaField.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"useSchemaField.d.ts","sourceRoot":"","sources":["../../src/composables/useSchemaField.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,KAAK,EAAE,MAAM,KAAK,CAAA;AAChC,OAAO,KAAK,EAAE,cAAc,EAAE,cAAc,EAAE,MAAM,oBAAoB,CAAA;AA2BxE,MAAM,WAAW,qBAAqB,CAAC,CAAC;IACvC,IAAI,CAAC,EAAE,MAAM,GAAG,SAAS,GAAG,OAAO,CAAA;IACnC,UAAU,CAAC,EAAE,MAAM,CAAC,CAAA;IACpB,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,cAAc,CAAC,CAAC,CAAC,EAAE,KAAK,EAAE,GAAG,KAAK,IAAI,CAAA;IACzD,YAAY,CAAC,EAAE,OAAO,CAAA;CACtB;AAID,UAAU,SAAS,CAAC,CAAC;IAAI,GAAG,EAAE,CAAC,CAAC;IAAC,KAAK,EAAE,cAAc,CAAC,CAAC,CAAC,CAAA;CAAE;AAC3D,KAAK,YAAY,CAAC,CAAC,IAAI,CAAC,KAAK,EAAE,SAAS,CAAC,CAAC,CAAC,KAAK,GAAG,CAAA;AACnD,KAAK,aAAa,CAAC,CAAC,IAAI,cAAc,CAAC,CAAC,CAAC,GAAG,KAAK,GAAG,YAAY,CAAC,CAAC,CAAC,CAAA;AAEnE,wBAAgB,cAAc,CAAC,CAAC,SAAS;IAAE,CAAC,GAAG,EAAE,MAAM,GAAG,GAAG,CAAA;CAAE,EAAE,KAAK,EAAE,qBAAqB,CAAC,CAAC,CAAC;yBAoEvF,cAAc,CAAC,CAAC,CAAC,UAChB,MAAM,CAAC,MAAM,EAAE,aAAa,CAAC,CAAC,CAAC,CAAC,KACtC,KAAK,GAAG,IAAI;0BApCc,cAAc,CAAC,CAAC,CAAC;EAiN9C"}
+{"version":3,"file":"useSchemaField.d.ts","sourceRoot":"","sources":["../../src/composables/useSchemaField.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,KAAK,EAAE,MAAM,KAAK,CAAA;AAChC,OAAO,KAAK,EAAE,cAAc,EAAE,cAAc,EAAE,MAAM,oBAAoB,CAAA;AA2BxE,MAAM,WAAW,qBAAqB,CAAC,CAAC;IACvC,IAAI,CAAC,EAAE,MAAM,GAAG,SAAS,GAAG,OAAO,CAAA;IACnC,WAAW,CAAC,EAAE,MAAM,CAAC,CAAA;IACrB,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,cAAc,CAAC,CAAC,CAAC,EAAE,KAAK,EAAE,GAAG,KAAK,IAAI,CAAA;IACzD,YAAY,CAAC,EAAE,OAAO,CAAA;CACtB;AAID,UAAU,SAAS,CAAC,CAAC;IAAI,GAAG,EAAE,CAAC,CAAC;IAAC,KAAK,EAAE,cAAc,CAAC,CAAC,CAAC,CAAA;CAAE;AAC3D,KAAK,YAAY,CAAC,CAAC,IAAI,CAAC,KAAK,EAAE,SAAS,CAAC,CAAC,CAAC,KAAK,GAAG,CAAA;AACnD,KAAK,aAAa,CAAC,CAAC,IAAI,cAAc,CAAC,CAAC,CAAC,GAAG,KAAK,GAAG,YAAY,CAAC,CAAC,CAAC,CAAA;AAEnE,wBAAgB,cAAc,CAAC,CAAC,SAAS;IAAE,CAAC,GAAG,EAAE,MAAM,GAAG,GAAG,CAAA;CAAE,EAAE,KAAK,EAAE,qBAAqB,CAAC,CAAC,CAAC;yBAoEvF,cAAc,CAAC,CAAC,CAAC,UAChB,MAAM,CAAC,MAAM,EAAE,aAAa,CAAC,CAAC,CAAC,CAAC,KACtC,KAAK,GAAG,IAAI;0BApCc,cAAc,CAAC,CAAC,CAAC;EAsN9C"}

package/dist/composables/useValidateFieldValue.d.ts

@@ -0,0 +1,4 @@
+import { ValidateInputBaseT } from '..';
+import { WatchSource } from 'vue';
+export declare function useValidateFieldValue(inputVal: WatchSource, getInput?: () => HTMLInputElement | HTMLTextAreaElement | HTMLSelectElement | undefined, validateFn?: ValidateInputBaseT['validate'], getFormData?: ValidateInputBaseT['getFormData']): void;
+//# sourceMappingURL=useValidateFieldValue.d.ts.map

package/dist/composables/useValidateFieldValue.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useValidateFieldValue.d.ts","sourceRoot":"","sources":["../../src/composables/useValidateFieldValue.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,eAAe,CAAA;AACvD,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,KAAK,CAAA;AAGtC,wBAAgB,qBAAqB,CACpC,QAAQ,EAAE,WAAW,EACrB,QAAQ,CAAC,EAAE,MAAM,gBAAgB,GAAG,mBAAmB,GAAG,iBAAiB,GAAG,SAAS,EACvF,UAAU,CAAC,EAAE,kBAAkB,CAAC,UAAU,CAAC,EAC3C,WAAW,CAAC,EAAE,kBAAkB,CAAC,aAAa,CAAC,QAiB/C"}

package/dist/index.cjs

@@ -275,7 +275,7 @@ const _sfc_main$1k = /* @__PURE__ */ vue.defineComponent({
     };
   }
 });
-const Btn = /* @__PURE__ */ _export_sfc(_sfc_main$1k, [["__scopeId", "data-v-bfc435b3"]]);
+const Btn = /* @__PURE__ */ _export_sfc(_sfc_main$1k, [["__scopeId", "data-v-5a91aa12"]]);
 const _hoisted_1$18 = ["dismissable"];
 const _hoisted_2$S = { class: "m-0" };
 const _sfc_main$1j = /* @__PURE__ */ vue.defineComponent({
@@ -10529,7 +10529,7 @@ const _sfc_main$_ = /* @__PURE__ */ vue.defineComponent({
 const SLOT_VALUE_COMPONENTS$1 = /* @__PURE__ */ new Set(["div", "span", "p"]);
 const SRC_VALUE_COMPONENTS$1 = /* @__PURE__ */ new Set(["img", "iframe"]);
 function useSchemaField(optns) {
-  const { mode = "form", getRowData, onUpdate, includeUnset = false } = optns;
+  const { mode = "form", getFormData, onUpdate, includeUnset = false } = optns;
   function renderObject(obj, depth = 0) {
     if (obj === null || obj === void 0) return "";
     if (typeof obj !== "object") return String(obj);
@@ -10581,7 +10581,7 @@ ${indent}}`;
   function renderField(field, slots) {
     const Component = getComponent(field);
     if (!Component) return null;
-    const rowData = (getRowData == null ? void 0 : getRowData()) || {};
+    const rowData = (getFormData == null ? void 0 : getFormData()) || {};
     const condition = field.vIf ?? field["v-if"];
     if (condition !== void 0) {
       if (typeof condition === "function") {
@@ -10604,6 +10604,7 @@ ${indent}}`;
       class: fieldClass,
       id,
       transform,
+      validate,
       slots: fieldSlots,
       required: required2,
       label,
@@ -10621,7 +10622,10 @@ ${indent}}`;
       required: required2,
       label,
       placeholder,
-      disabled
+      disabled,
+      validate,
+      id,
+      getFormData
     };
     if (mode === "form") {
       props2.modelValue = currentValue;
@@ -10891,7 +10895,7 @@ const _sfc_main$Z = /* @__PURE__ */ vue.defineComponent({
     });
     const { renderField } = useSchemaField({
       mode: "preview",
-      getRowData: () => firstItem.value,
+      getFormData: () => firstItem.value,
       includeUnset: props2.includeUnset
     });
     return (_ctx, _cache) => {
@@ -10905,7 +10909,7 @@ const _sfc_main$Z = /* @__PURE__ */ vue.defineComponent({
     };
   }
 });
-const DataPreview = /* @__PURE__ */ _export_sfc(_sfc_main$Z, [["__scopeId", "data-v-2a466c93"]]);
+const DataPreview = /* @__PURE__ */ _export_sfc(_sfc_main$Z, [["__scopeId", "data-v-3a662018"]]);
 function useTableSelection(options) {
   const allSelectorEl = vue.ref();
   const computedSelectedItems = vue.computed(() => options.selectedItems.value);
@@ -10986,6 +10990,9 @@ function createFilterWrapper(filter3, fn) {
   }
   return wrapper;
 }
+const bypassFilter = (invoke) => {
+  return invoke();
+};
 function debounceFilter(ms, options = {}) {
   let timer;
   let maxTimer;
@@ -11049,6 +11056,20 @@ function useDebounceFn(fn, ms = 200, options = {}) {
     fn
   );
 }
+function watchWithFilter(source, cb, options = {}) {
+  const {
+    eventFilter = bypassFilter,
+    ...watchOptions
+  } = options;
+  return vue.watch(
+    source,
+    createFilterWrapper(
+      eventFilter,
+      cb
+    ),
+    watchOptions
+  );
+}
 function tryOnMounted(fn, sync = true, target) {
   const instance = getLifeCycleTarget();
   if (instance)
@@ -11182,6 +11203,21 @@ function createUntil(r2, isNot = false) {
 function until(r2) {
   return createUntil(r2);
 }
+function watchDebounced(source, cb, options = {}) {
+  const {
+    debounce: debounce2 = 0,
+    maxWait = void 0,
+    ...watchOptions
+  } = options;
+  return watchWithFilter(
+    source,
+    cb,
+    {
+      ...watchOptions,
+      eventFilter: debounceFilter(debounce2, { maxWait })
+    }
+  );
+}
 function watchImmediate(source, cb, options) {
   return vue.watch(
     source,
@@ -11748,7 +11784,7 @@ const _sfc_main$Y = /* @__PURE__ */ vue.defineComponent({
   emits: /* @__PURE__ */ vue.mergeModels(["orderBy", "select", "lastItemVisible"], ["update:loading", "update:itemHeight", "update:selectedItems"]),
   setup(__props, { emit: __emit }) {
     vue.useCssVars((_ctx) => ({
-      "5e326637": vue.unref(computedItemHeight)
+      "140ab2e6": vue.unref(computedItemHeight)
     }));
     const props2 = __props;
     const emit2 = __emit;
@@ -11812,7 +11848,7 @@ const _sfc_main$Y = /* @__PURE__ */ vue.defineComponent({
     function renderFieldForRow(field, row) {
       const { renderField } = useSchemaField({
         mode: "table",
-        getRowData: () => {
+        getFormData: () => {
           if (field.id) {
             return { [field.id]: getNestedValue(row, field.id) };
           }
@@ -11936,7 +11972,7 @@ const _sfc_main$Y = /* @__PURE__ */ vue.defineComponent({
     };
   }
 });
-const DataTable = /* @__PURE__ */ _export_sfc(_sfc_main$Y, [["__scopeId", "data-v-642a5cfe"]]);
+const DataTable = /* @__PURE__ */ _export_sfc(_sfc_main$Y, [["__scopeId", "data-v-9b6d2a47"]]);
 function useDraggable(options = {}) {
   const isDragging = vue.ref(false);
   const dragElement = vue.ref(null);
@@ -15200,6 +15236,7 @@ function txtField(id, label, options) {
     disabled: options == null ? void 0 : options.disabled,
     placeholder: options == null ? void 0 : options.placeholder,
     defaultValue: options == null ? void 0 : options.defaultValue,
+    validate: options == null ? void 0 : options.validate,
     attrs: {
       type: options == null ? void 0 : options.type,
       pattern: options == null ? void 0 : options.pattern,
@@ -15697,7 +15734,7 @@ const _sfc_main$T = /* @__PURE__ */ vue.defineComponent({
       var _a;
       return ((_a = form.value) == null ? void 0 : _a.reportValidity()) ?? false;
     };
-    let formError = vue.ref();
+    const formError = vue.ref();
     async function handleSubmit() {
       var _a;
       try {
@@ -15717,7 +15754,7 @@ const _sfc_main$T = /* @__PURE__ */ vue.defineComponent({
     }
     const { renderField } = useSchemaField({
       mode: "form",
-      getRowData: () => ({
+      getFormData: () => ({
         ...formData.value,
         get: (path) => getNestedValue(formData.value, path, "")
       }),
@@ -15783,7 +15820,7 @@ const _sfc_main$T = /* @__PURE__ */ vue.defineComponent({
         formState.value === "success" ? vue.renderSlot(_ctx.$slots, "success", { key: 1 }) : vue.createCommentVNode("", true),
         formState.value === "error" ? vue.renderSlot(_ctx.$slots, "error", {
           key: 2,
-          error: vue.unref(formError)
+          error: formError.value
         }) : vue.createCommentVNode("", true)
       ], 64);
     };
@@ -16838,7 +16875,6 @@ const _sfc_main$M = /* @__PURE__ */ vue.defineComponent({
     const time = new Time(props2.firstDayOfWeek, props2.locale);
     function formatDisplayDate(date2) {
       if (!date2) return "";
-      console.log("date", date2);
       return formatDate(date2, props2.enableTime ? "DD.MM.YY HH:mm" : "DD.MM.YY", props2.locale);
     }
     const formattedDisplayValue = vue.computed(() => formatDisplayDate(props2.modelValue));
@@ -17153,7 +17189,7 @@ const _sfc_main$M = /* @__PURE__ */ vue.defineComponent({
     };
   }
 });
-const DatePick = /* @__PURE__ */ _export_sfc(_sfc_main$M, [["__scopeId", "data-v-43cb2e62"]]);
+const DatePick = /* @__PURE__ */ _export_sfc(_sfc_main$M, [["__scopeId", "data-v-8b1c2495"]]);
 const _hoisted_1$E = { class: "datetime-wrap" };
 const _hoisted_2$s = {
   key: 0,
@@ -22957,7 +22993,7 @@ const _sfc_main$E = /* @__PURE__ */ vue.defineComponent({
     };
   }
 });
-const RadioGroup = /* @__PURE__ */ _export_sfc(_sfc_main$E, [["__scopeId", "data-v-a692c596"]]);
+const RadioGroup = /* @__PURE__ */ _export_sfc(_sfc_main$E, [["__scopeId", "data-v-29cff93d"]]);
 const _hoisted_1$w = { class: "bagel-input" };
 const _hoisted_2$l = { class: "pb-025" };
 const _hoisted_3$i = { class: "flex gap-05 flex-wrap" };
@@ -28655,7 +28691,9 @@ const _sfc_main$v = /* @__PURE__ */ vue.defineComponent({
     autocomplete: {},
     autofocus: { type: Boolean },
     onFocusout: {},
-    onFocus: {}
+    onFocus: {},
+    validate: {},
+    getFormData: {}
   },
   emits: ["update:modelValue", "debounce"],
   setup(__props, { expose: __expose, emit: __emit }) {
@@ -28663,6 +28701,12 @@ const _sfc_main$v = /* @__PURE__ */ vue.defineComponent({
     const emit2 = __emit;
     let inputVal = vue.ref();
     const input = vue.ref();
+    useValidateFieldValue(
+      () => inputVal.value,
+      () => input.value,
+      props2.validate,
+      props2.getFormData
+    );
     const inputRows = vue.computed(() => {
       let rows = Number(props2.rows) || 1;
       if (props2.autoheight) rows = Math.max(rows, String(inputVal.value).split("\n").length);
@@ -28775,7 +28819,7 @@ const _sfc_main$v = /* @__PURE__ */ vue.defineComponent({
     };
   }
 });
-const TextInput = /* @__PURE__ */ _export_sfc(_sfc_main$v, [["__scopeId", "data-v-dbcf2010"]]);
+const TextInput = /* @__PURE__ */ _export_sfc(_sfc_main$v, [["__scopeId", "data-v-6dfc73c3"]]);
 const _hoisted_1$n = ["title"];
 const _hoisted_2$d = ["id", "required"];
 const _hoisted_3$b = ["for"];
@@ -35345,7 +35389,7 @@ const _sfc_main$6 = /* @__PURE__ */ vue.defineComponent({
     };
   }
 });
-const SpreadsheetTable = /* @__PURE__ */ _export_sfc(_sfc_main$6, [["__scopeId", "data-v-5386c509"]]);
+const SpreadsheetTable = /* @__PURE__ */ _export_sfc(_sfc_main$6, [["__scopeId", "data-v-ad70b6cd"]]);
 const _hoisted_1$3 = { class: "flex gap-05 py-05 justify-content-end m_flex-wrap" };
 const _hoisted_2$1 = {
   key: 0,
@@ -35992,7 +36036,7 @@ const _sfc_main$5 = /* @__PURE__ */ vue.defineComponent({
     };
   }
 });
-const Index = /* @__PURE__ */ _export_sfc(_sfc_main$5, [["__scopeId", "data-v-42b4475d"]]);
+const Index = /* @__PURE__ */ _export_sfc(_sfc_main$5, [["__scopeId", "data-v-1e744d43"]]);
 const _sfc_main$4 = /* @__PURE__ */ vue.defineComponent({
   __name: "Title",
   props: {
@@ -36528,6 +36572,20 @@ function useDevice() {
     isMobile
   };
 }
+function useValidateFieldValue(inputVal, getInput, validateFn, getFormData) {
+  watchDebounced(
+    inputVal,
+    (newVal, oldVal) => {
+      var _a, _b;
+      (_a = getInput == null ? void 0 : getInput()) == null ? void 0 : _a.setCustomValidity("");
+      console.log({ validateFn, getFormData, input: getInput });
+      if (!validateFn || newVal === oldVal || !newVal) return;
+      const isValid = validateFn(newVal, getFormData == null ? void 0 : getFormData());
+      if (typeof isValid === "string") (_b = getInput == null ? void 0 : getInput()) == null ? void 0 : _b.setCustomValidity(isValid);
+    },
+    { debounce: 500 }
+  );
+}
 function useBglSchema({ schema, columns, data: data2 } = {}) {
   let _schema = schema;
   if (typeof _schema === "function") {
@@ -38039,4 +38097,5 @@ exports.useI18nT = useI18nT;
 exports.useLang = useLang;
 exports.useLocalStorage = useLocalStorage;
 exports.useModal = useModal;
+exports.useValidateFieldValue = useValidateFieldValue;
 exports.vDraggable = vDraggable;

package/dist/index.mjs

@@ -273,7 +273,7 @@ const _sfc_main$1k = /* @__PURE__ */ defineComponent({
     };
   }
 });
-const Btn = /* @__PURE__ */ _export_sfc(_sfc_main$1k, [["__scopeId", "data-v-bfc435b3"]]);
+const Btn = /* @__PURE__ */ _export_sfc(_sfc_main$1k, [["__scopeId", "data-v-5a91aa12"]]);
 const _hoisted_1$18 = ["dismissable"];
 const _hoisted_2$S = { class: "m-0" };
 const _sfc_main$1j = /* @__PURE__ */ defineComponent({
@@ -10527,7 +10527,7 @@ const _sfc_main$_ = /* @__PURE__ */ defineComponent({
 const SLOT_VALUE_COMPONENTS$1 = /* @__PURE__ */ new Set(["div", "span", "p"]);
 const SRC_VALUE_COMPONENTS$1 = /* @__PURE__ */ new Set(["img", "iframe"]);
 function useSchemaField(optns) {
-  const { mode = "form", getRowData, onUpdate, includeUnset = false } = optns;
+  const { mode = "form", getFormData, onUpdate, includeUnset = false } = optns;
   function renderObject(obj, depth = 0) {
     if (obj === null || obj === void 0) return "";
     if (typeof obj !== "object") return String(obj);
@@ -10579,7 +10579,7 @@ ${indent}}`;
   function renderField(field, slots) {
     const Component = getComponent(field);
     if (!Component) return null;
-    const rowData = (getRowData == null ? void 0 : getRowData()) || {};
+    const rowData = (getFormData == null ? void 0 : getFormData()) || {};
     const condition = field.vIf ?? field["v-if"];
     if (condition !== void 0) {
       if (typeof condition === "function") {
@@ -10602,6 +10602,7 @@ ${indent}}`;
       class: fieldClass,
       id,
       transform,
+      validate,
       slots: fieldSlots,
       required: required2,
       label,
@@ -10619,7 +10620,10 @@ ${indent}}`;
       required: required2,
       label,
       placeholder,
-      disabled
+      disabled,
+      validate,
+      id,
+      getFormData
     };
     if (mode === "form") {
       props2.modelValue = currentValue;
@@ -10889,7 +10893,7 @@ const _sfc_main$Z = /* @__PURE__ */ defineComponent({
     });
     const { renderField } = useSchemaField({
       mode: "preview",
-      getRowData: () => firstItem.value,
+      getFormData: () => firstItem.value,
       includeUnset: props2.includeUnset
     });
     return (_ctx, _cache) => {
@@ -10903,7 +10907,7 @@ const _sfc_main$Z = /* @__PURE__ */ defineComponent({
     };
   }
 });
-const DataPreview = /* @__PURE__ */ _export_sfc(_sfc_main$Z, [["__scopeId", "data-v-2a466c93"]]);
+const DataPreview = /* @__PURE__ */ _export_sfc(_sfc_main$Z, [["__scopeId", "data-v-3a662018"]]);
 function useTableSelection(options) {
   const allSelectorEl = ref();
   const computedSelectedItems = computed(() => options.selectedItems.value);
@@ -10984,6 +10988,9 @@ function createFilterWrapper(filter3, fn) {
   }
   return wrapper;
 }
+const bypassFilter = (invoke) => {
+  return invoke();
+};
 function debounceFilter(ms, options = {}) {
   let timer;
   let maxTimer;
@@ -11047,6 +11054,20 @@ function useDebounceFn(fn, ms = 200, options = {}) {
     fn
   );
 }
+function watchWithFilter(source, cb, options = {}) {
+  const {
+    eventFilter = bypassFilter,
+    ...watchOptions
+  } = options;
+  return watch(
+    source,
+    createFilterWrapper(
+      eventFilter,
+      cb
+    ),
+    watchOptions
+  );
+}
 function tryOnMounted(fn, sync = true, target) {
   const instance = getLifeCycleTarget();
   if (instance)
@@ -11180,6 +11201,21 @@ function createUntil(r2, isNot = false) {
 function until(r2) {
   return createUntil(r2);
 }
+function watchDebounced(source, cb, options = {}) {
+  const {
+    debounce: debounce2 = 0,
+    maxWait = void 0,
+    ...watchOptions
+  } = options;
+  return watchWithFilter(
+    source,
+    cb,
+    {
+      ...watchOptions,
+      eventFilter: debounceFilter(debounce2, { maxWait })
+    }
+  );
+}
 function watchImmediate(source, cb, options) {
   return watch(
     source,
@@ -11746,7 +11782,7 @@ const _sfc_main$Y = /* @__PURE__ */ defineComponent({
   emits: /* @__PURE__ */ mergeModels(["orderBy", "select", "lastItemVisible"], ["update:loading", "update:itemHeight", "update:selectedItems"]),
   setup(__props, { emit: __emit }) {
     useCssVars((_ctx) => ({
-      "5e326637": unref(computedItemHeight)
+      "140ab2e6": unref(computedItemHeight)
     }));
     const props2 = __props;
     const emit2 = __emit;
@@ -11810,7 +11846,7 @@ const _sfc_main$Y = /* @__PURE__ */ defineComponent({
     function renderFieldForRow(field, row) {
       const { renderField } = useSchemaField({
         mode: "table",
-        getRowData: () => {
+        getFormData: () => {
           if (field.id) {
             return { [field.id]: getNestedValue(row, field.id) };
           }
@@ -11934,7 +11970,7 @@ const _sfc_main$Y = /* @__PURE__ */ defineComponent({
     };
   }
 });
-const DataTable = /* @__PURE__ */ _export_sfc(_sfc_main$Y, [["__scopeId", "data-v-642a5cfe"]]);
+const DataTable = /* @__PURE__ */ _export_sfc(_sfc_main$Y, [["__scopeId", "data-v-9b6d2a47"]]);
 function useDraggable(options = {}) {
   const isDragging = ref(false);
   const dragElement = ref(null);
@@ -15198,6 +15234,7 @@ function txtField(id, label, options) {
     disabled: options == null ? void 0 : options.disabled,
     placeholder: options == null ? void 0 : options.placeholder,
     defaultValue: options == null ? void 0 : options.defaultValue,
+    validate: options == null ? void 0 : options.validate,
     attrs: {
       type: options == null ? void 0 : options.type,
       pattern: options == null ? void 0 : options.pattern,
@@ -15695,7 +15732,7 @@ const _sfc_main$T = /* @__PURE__ */ defineComponent({
       var _a;
       return ((_a = form.value) == null ? void 0 : _a.reportValidity()) ?? false;
     };
-    let formError = ref();
+    const formError = ref();
     async function handleSubmit() {
       var _a;
       try {
@@ -15715,7 +15752,7 @@ const _sfc_main$T = /* @__PURE__ */ defineComponent({
     }
     const { renderField } = useSchemaField({
       mode: "form",
-      getRowData: () => ({
+      getFormData: () => ({
         ...formData.value,
         get: (path) => getNestedValue(formData.value, path, "")
       }),
@@ -15781,7 +15818,7 @@ const _sfc_main$T = /* @__PURE__ */ defineComponent({
         formState.value === "success" ? renderSlot(_ctx.$slots, "success", { key: 1 }) : createCommentVNode("", true),
         formState.value === "error" ? renderSlot(_ctx.$slots, "error", {
           key: 2,
-          error: unref(formError)
+          error: formError.value
         }) : createCommentVNode("", true)
       ], 64);
     };
@@ -16836,7 +16873,6 @@ const _sfc_main$M = /* @__PURE__ */ defineComponent({
     const time = new Time(props2.firstDayOfWeek, props2.locale);
     function formatDisplayDate(date2) {
       if (!date2) return "";
-      console.log("date", date2);
       return formatDate(date2, props2.enableTime ? "DD.MM.YY HH:mm" : "DD.MM.YY", props2.locale);
     }
     const formattedDisplayValue = computed(() => formatDisplayDate(props2.modelValue));
@@ -17151,7 +17187,7 @@ const _sfc_main$M = /* @__PURE__ */ defineComponent({
     };
   }
 });
-const DatePick = /* @__PURE__ */ _export_sfc(_sfc_main$M, [["__scopeId", "data-v-43cb2e62"]]);
+const DatePick = /* @__PURE__ */ _export_sfc(_sfc_main$M, [["__scopeId", "data-v-8b1c2495"]]);
 const _hoisted_1$E = { class: "datetime-wrap" };
 const _hoisted_2$s = {
   key: 0,
@@ -22955,7 +22991,7 @@ const _sfc_main$E = /* @__PURE__ */ defineComponent({
     };
   }
 });
-const RadioGroup = /* @__PURE__ */ _export_sfc(_sfc_main$E, [["__scopeId", "data-v-a692c596"]]);
+const RadioGroup = /* @__PURE__ */ _export_sfc(_sfc_main$E, [["__scopeId", "data-v-29cff93d"]]);
 const _hoisted_1$w = { class: "bagel-input" };
 const _hoisted_2$l = { class: "pb-025" };
 const _hoisted_3$i = { class: "flex gap-05 flex-wrap" };
@@ -28653,7 +28689,9 @@ const _sfc_main$v = /* @__PURE__ */ defineComponent({
     autocomplete: {},
     autofocus: { type: Boolean },
     onFocusout: {},
-    onFocus: {}
+    onFocus: {},
+    validate: {},
+    getFormData: {}
   },
   emits: ["update:modelValue", "debounce"],
   setup(__props, { expose: __expose, emit: __emit }) {
@@ -28661,6 +28699,12 @@ const _sfc_main$v = /* @__PURE__ */ defineComponent({
     const emit2 = __emit;
     let inputVal = ref();
     const input = ref();
+    useValidateFieldValue(
+      () => inputVal.value,
+      () => input.value,
+      props2.validate,
+      props2.getFormData
+    );
     const inputRows = computed(() => {
       let rows = Number(props2.rows) || 1;
       if (props2.autoheight) rows = Math.max(rows, String(inputVal.value).split("\n").length);
@@ -28773,7 +28817,7 @@ const _sfc_main$v = /* @__PURE__ */ defineComponent({
     };
   }
 });
-const TextInput = /* @__PURE__ */ _export_sfc(_sfc_main$v, [["__scopeId", "data-v-dbcf2010"]]);
+const TextInput = /* @__PURE__ */ _export_sfc(_sfc_main$v, [["__scopeId", "data-v-6dfc73c3"]]);
 const _hoisted_1$n = ["title"];
 const _hoisted_2$d = ["id", "required"];
 const _hoisted_3$b = ["for"];
@@ -35343,7 +35387,7 @@ const _sfc_main$6 = /* @__PURE__ */ defineComponent({
     };
   }
 });
-const SpreadsheetTable = /* @__PURE__ */ _export_sfc(_sfc_main$6, [["__scopeId", "data-v-5386c509"]]);
+const SpreadsheetTable = /* @__PURE__ */ _export_sfc(_sfc_main$6, [["__scopeId", "data-v-ad70b6cd"]]);
 const _hoisted_1$3 = { class: "flex gap-05 py-05 justify-content-end m_flex-wrap" };
 const _hoisted_2$1 = {
   key: 0,
@@ -35990,7 +36034,7 @@ const _sfc_main$5 = /* @__PURE__ */ defineComponent({
     };
   }
 });
-const Index = /* @__PURE__ */ _export_sfc(_sfc_main$5, [["__scopeId", "data-v-42b4475d"]]);
+const Index = /* @__PURE__ */ _export_sfc(_sfc_main$5, [["__scopeId", "data-v-1e744d43"]]);
 const _sfc_main$4 = /* @__PURE__ */ defineComponent({
   __name: "Title",
   props: {
@@ -36526,6 +36570,20 @@ function useDevice() {
     isMobile
   };
 }
+function useValidateFieldValue(inputVal, getInput, validateFn, getFormData) {
+  watchDebounced(
+    inputVal,
+    (newVal, oldVal) => {
+      var _a, _b;
+      (_a = getInput == null ? void 0 : getInput()) == null ? void 0 : _a.setCustomValidity("");
+      console.log({ validateFn, getFormData, input: getInput });
+      if (!validateFn || newVal === oldVal || !newVal) return;
+      const isValid = validateFn(newVal, getFormData == null ? void 0 : getFormData());
+      if (typeof isValid === "string") (_b = getInput == null ? void 0 : getInput()) == null ? void 0 : _b.setCustomValidity(isValid);
+    },
+    { debounce: 500 }
+  );
+}
 function useBglSchema({ schema, columns, data: data2 } = {}) {
   let _schema = schema;
   if (typeof _schema === "function") {
@@ -38038,5 +38096,6 @@ export {
   useLang,
   useLocalStorage,
   useModal,
+  useValidateFieldValue,
   vDraggable
 };

package/dist/plugins/modal.d.ts

@@ -1,9 +1,11 @@
 import { InjectionKey, Plugin } from 'vue';
 import { ConfirmModalUserOptions, ModalComponentProps, ModalFormComponentProps, ModalFormOptions, ModalOptions } from './modalTypes';
 export interface ModalApi {
-    showModal: (options: ModalOptions, slots?: {
+    showModal: <T extends {
         [key: string]: any;
-    }) => ModalComponentProps | undefined;
+    }>(options: ModalOptions, slots?: {
+        [key: string]: any;
+    }) => ModalComponentProps<T> | undefined;
     showModalForm: <T extends {
         [key: string]: any;
     }>(options: ModalFormOptions<T>, slots?: {

package/dist/plugins/modal.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"modal.d.ts","sourceRoot":"","sources":["../../src/plugins/modal.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,EAAE,MAAM,KAAK,CAAA;AAC/C,OAAO,KAAK,EAAE,uBAAuB,EAAE,mBAAmB,EAAuB,uBAAuB,EAAE,gBAAgB,EAAE,YAAY,EAAa,MAAM,cAAc,CAAA;AAIzK,MAAM,WAAW,QAAQ;IACxB,SAAS,EAAE,CAAC,OAAO,EAAE,YAAY,EAAE,KAAK,CAAC,EAAE;QAAE,CAAC,GAAG,EAAE,MAAM,GAAG,GAAG,CAAA;KAAE,KAAK,mBAAmB,GAAG,SAAS,CAAA;IACrG,aAAa,EAAE,CAAC,CAAC,SAAS;QAAE,CAAC,GAAG,EAAE,MAAM,GAAG,GAAG,CAAA;KAAE,EAAE,OAAO,EAAE,gBAAgB,CAAC,CAAC,CAAC,EAAE,KAAK,CAAC,EAAE;QAAE,CAAC,GAAG,EAAE,MAAM,GAAG,GAAG,CAAA;KAAE,KAAK,uBAAuB,CAAC,CAAC,CAAC,GAAG,SAAS,CAAA;IACzJ,SAAS,EAAE,CAAC,KAAK,CAAC,EAAE,MAAM,KAAK,IAAI,CAAA;IACnC,YAAY,EAAE,CAAC,OAAO,EAAE,uBAAuB,KAAK,OAAO,CAAC,OAAO,CAAC,CAAA;CACpE;AAED,eAAO,MAAM,WAAW,EAAE,YAAY,CAAC,QAAQ,CAAmB,CAAA;AAElE,wBAAgB,QAAQ,IAAI,QAAQ,CAInC;AAED,eAAO,MAAM,WAAW,EAAE,MAsEzB,CAAA"}
+{"version":3,"file":"modal.d.ts","sourceRoot":"","sources":["../../src/plugins/modal.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,EAAE,MAAM,KAAK,CAAA;AAE/C,OAAO,KAAK,EAAE,uBAAuB,EAAE,mBAAmB,EAAuB,uBAAuB,EAAE,gBAAgB,EAAE,YAAY,EAAa,MAAM,cAAc,CAAA;AAIzK,MAAM,WAAW,QAAQ;IACxB,SAAS,EAAE,CAAC,CAAC,SAAS;QAAE,CAAC,GAAG,EAAE,MAAM,GAAG,GAAG,CAAA;KAAE,EAAE,OAAO,EAAE,YAAY,EAAE,KAAK,CAAC,EAAE;QAAE,CAAC,GAAG,EAAE,MAAM,GAAG,GAAG,CAAA;KAAE,KAAK,mBAAmB,CAAC,CAAC,CAAC,GAAG,SAAS,CAAA;IAC1I,aAAa,EAAE,CAAC,CAAC,SAAS;QAAE,CAAC,GAAG,EAAE,MAAM,GAAG,GAAG,CAAA;KAAE,EAAE,OAAO,EAAE,gBAAgB,CAAC,CAAC,CAAC,EAAE,KAAK,CAAC,EAAE;QAAE,CAAC,GAAG,EAAE,MAAM,GAAG,GAAG,CAAA;KAAE,KAAK,uBAAuB,CAAC,CAAC,CAAC,GAAG,SAAS,CAAA;IACzJ,SAAS,EAAE,CAAC,KAAK,CAAC,EAAE,MAAM,KAAK,IAAI,CAAA;IACnC,YAAY,EAAE,CAAC,OAAO,EAAE,uBAAuB,KAAK,OAAO,CAAC,OAAO,CAAC,CAAA;CACpE;AAED,eAAO,MAAM,WAAW,EAAE,YAAY,CAAC,QAAQ,CAAmB,CAAA;AAElE,wBAAgB,QAAQ,IAAI,QAAQ,CAInC;AAED,eAAO,MAAM,WAAW,EAAE,MAsEzB,CAAA"}