@bagelink/vue 0.0.1184 → 0.0.1194

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

@@ -1,18 +1,16 @@
 import { BglFormSchemaFnT } from '../..';
-export interface BagelFormProps<T extends {
-    [key: string]: any;
-}> {
-    modelValue?: T;
-    schema?: BglFormSchemaFnT<T>;
+export interface BagelFormProps<_T> {
+    modelValue?: _T;
+    schema?: BglFormSchemaFnT<_T>;
     tag?: 'form' | 'template';
+    onSubmit?: (data: _T) => Promise<void>;
 }
 declare const _default: <T extends {
     [key: string]: any;
 }>(__VLS_props: NonNullable<Awaited<typeof __VLS_setup>>["props"], __VLS_ctx?: __VLS_PrettifyLocal<Pick<NonNullable<Awaited<typeof __VLS_setup>>, "attrs" | "emit" | "slots">>, __VLS_expose?: NonNullable<Awaited<typeof __VLS_setup>>["expose"], __VLS_setup?: Promise<{
     props: __VLS_PrettifyLocal<Pick<Partial<{}> & Omit<{
-        readonly onSubmit?: ((value: T) => any) | undefined;
         readonly "onUpdate:modelValue"?: ((value: T) => any) | undefined;
-    } & import('vue').VNodeProps & import('vue').AllowedComponentProps & import('vue').ComponentCustomProps, never>, "onSubmit" | "onUpdate:modelValue"> & BagelFormProps<T> & Partial<{}>> & import('vue').PublicProps;
+    } & import('vue').VNodeProps & import('vue').AllowedComponentProps & import('vue').ComponentCustomProps, never>, "onUpdate:modelValue"> & BagelFormProps<T> & Partial<{}>> & import('vue').PublicProps;
     expose(exposed: import('vue').ShallowUnwrapRef<{
         form: import('vue').Ref<HTMLFormElement | undefined, HTMLFormElement | undefined>;
         isDirty: import('@vue-macros/reactivity-transform/macros.js').ComputedVariable<false> | import('@vue-macros/reactivity-transform/macros.js').ComputedVariable<true>;
@@ -22,15 +20,14 @@ declare const _default: <T extends {
     slots: {
         default?(_: {}): any;
         submit?(_: {
-            submit: () => void;
+            submit: () => Promise<void>;
             isDirty: import('@vue-macros/reactivity-transform/macros.js').ComputedVariable<false> | import('@vue-macros/reactivity-transform/macros.js').ComputedVariable<true>;
             validateForm: () => boolean;
         }): any;
+        success?(_: {}): any;
+        error?(_: {}): any;
     };
-    emit: {
-        (e: "update:modelValue", value: T): void;
-        (e: "submit", value: T): void;
-    };
+    emit: (e: "update:modelValue", value: T) => void;
 }>) => import('vue').VNode & {
     __ctx?: Awaited<typeof __VLS_setup>;
 };

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

@@ -1 +1 @@
-{"version":3,"file":"BagelForm.vue.d.ts","sourceRoot":"","sources":["../../../src/components/form/BagelForm.vue"],"names":[],"mappings":"AAiHA,OAAO,KAAK,EAAE,gBAAgB,EAAS,MAAM,eAAe,CAAA;AAK5D,MAAM,WAAW,cAAc,CAAC,CAAC,SAAS;IAAE,CAAC,GAAG,EAAE,MAAM,GAAG,GAAG,CAAA;CAAE;IAC/D,UAAU,CAAC,EAAE,CAAC,CAAA;IACd,MAAM,CAAC,EAAE,gBAAgB,CAAC,CAAC,CAAC,CAAA;IAC5B,GAAG,CAAC,EAAE,MAAM,GAAG,UAAU,CAAA;CACzB;yBAEgB,CAAC,SAAS;IAAC,CAAC,GAAG,EAAC,MAAM,GAAE,GAAG,CAAA;CAAC,eAC/B,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;WAmL1D,mBAAmB,CAAC;;;0LAAkE,CAAC,4BAA2B;oBACzG,OAAO,KAAK,EAAE,gBAAgB;;;;MAAsB,GAAG,IAAI;WACpE,GAAG;;yBArCkB,GAAG;;;;;YACJ,GAAG;;;YAvI1B,mBAAmB,SAAS,CAAC,GAAG,IAAI;YACpC,QAAQ,SAAS,CAAC,GAAG,IAAI;;OA+KlB,OAAO,KAAK,EAAE,KAAK,GAAG;IAAE,KAAK,CAAC,EAAE,OAAO,CAAC,OAAO,WAAW,CAAC,CAAA;CAAE;AA7LzE,wBA6L4E;AAC5E,KAAK,mBAAmB,CAAC,CAAC,IAAI;KAAG,CAAC,IAAI,MAAM,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC;CAAG,GAAG,EAAE,CAAC"}
+{"version":3,"file":"BagelForm.vue.d.ts","sourceRoot":"","sources":["../../../src/components/form/BagelForm.vue"],"names":[],"mappings":"AAyHA,OAAO,KAAK,EAAE,gBAAgB,EAAS,MAAM,eAAe,CAAA;AAK5D,MAAM,WAAW,cAAc,CAAC,EAAE;IACjC,UAAU,CAAC,EAAE,EAAE,CAAA;IACf,MAAM,CAAC,EAAE,gBAAgB,CAAC,EAAE,CAAC,CAAA;IAC7B,GAAG,CAAC,EAAE,MAAM,GAAG,UAAU,CAAA;IACzB,QAAQ,CAAC,EAAE,CAAC,IAAI,EAAE,EAAE,KAAK,OAAO,CAAC,IAAI,CAAC,CAAA;CACtC;yBAEgB,CAAC,SAAS;IAAC,CAAC,GAAG,EAAC,MAAM,GAAE,GAAG,CAAA;CAAC,eAC/B,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;WAmM1D,mBAAmB,CAAC;;6KAAkE,CAAC,4BAA2B;oBACzG,OAAO,KAAK,EAAE,gBAAgB;;;;MAAsB,GAAG,IAAI;WACpE,GAAG;;yBAxCkB,GAAG;;;;;YACJ,GAAG;yBACF,GAAG;uBACL,GAAG;;cAtJzB,mBAAmB,SAAS,CAAC,KAAG,IAAI;OAgM7B,OAAO,KAAK,EAAE,KAAK,GAAG;IAAE,KAAK,CAAC,EAAE,OAAO,CAAC,OAAO,WAAW,CAAC,CAAA;CAAE;AA7MzE,wBA6M4E;AAC5E,KAAK,mBAAmB,CAAC,CAAC,IAAI;KAAG,CAAC,IAAI,MAAM,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC;CAAG,GAAG,EAAE,CAAC"}

package/dist/composables/useSchemaField.d.ts

@@ -5,7 +5,9 @@ export interface UseSchemaFieldOptions<T> {
     getRowData?: () => T;
     onUpdate?: (field: BaseBagelField<T>, value: any) => void;
 }
-export declare function useSchemaField<T extends Record<string, any>>(options: UseSchemaFieldOptions<T>): {
+export declare function useSchemaField<T extends {
+    [key: string]: any;
+}>(options: UseSchemaFieldOptions<T>): {
     renderField: (field: BaseBagelField<T>, slots?: Record<string, (props: {
         row: T;
         field: BaseBagelField<T>;

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,MAAM,oBAAoB,CAAA;AAwBxD,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;CACzD;AAED,wBAAgB,cAAc,CAAC,CAAC,SAAS,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,EAAE,OAAO,EAAE,qBAAqB,CAAC,CAAC,CAAC;yBA4BtF,cAAc,CAAC,CAAC,CAAC,UAChB,MAAM,CAAC,MAAM,EAAE,CAAC,KAAK,EAAE;QAAE,GAAG,EAAE,CAAC,CAAC;QAAC,KAAK,EAAE,cAAc,CAAC,CAAC,CAAC,CAAA;KAAE,KAAK,GAAG,CAAC,KAC1E,KAAK,GAAG,IAAI;0BA3Bc,cAAc,CAAC,CAAC,CAAC;EAkK9C"}
+{"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,MAAM,oBAAoB,CAAA;AAwBxD,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;CACzD;AAED,wBAAgB,cAAc,CAAC,CAAC,SAAS;IAAE,CAAC,GAAG,EAAE,MAAM,GAAG,GAAG,CAAA;CAAE,EAAE,OAAO,EAAE,qBAAqB,CAAC,CAAC,CAAC;yBA4BzF,cAAc,CAAC,CAAC,CAAC,UAChB,MAAM,CAAC,MAAM,EAAE,CAAC,KAAK,EAAE;QAAE,GAAG,EAAE,CAAC,CAAC;QAAC,KAAK,EAAE,cAAc,CAAC,CAAC,CAAC,CAAA;KAAE,KAAK,GAAG,CAAC,KAC1E,KAAK,GAAG,IAAI;0BA3Bc,cAAc,CAAC,CAAC,CAAC;EAkK9C"}

package/dist/index.cjs

@@ -11579,9 +11579,10 @@ const _sfc_main$R = /* @__PURE__ */ vue.defineComponent({
   props: {
     modelValue: { default: void 0 },
     schema: { default: void 0 },
-    tag: { default: "form" }
+    tag: { default: "form" },
+    onSubmit: {}
   },
-  emits: ["update:modelValue", "submit"],
+  emits: ["update:modelValue"],
   setup(__props, { expose: __expose, emit: __emit }) {
     const props2 = __props;
     const emit2 = __emit;
@@ -11593,6 +11594,7 @@ const _sfc_main$R = /* @__PURE__ */ vue.defineComponent({
         initialFormData.value = JSON.parse(JSON.stringify(props2.modelValue));
       }
     });
+    const formState = vue.ref("idle");
     vue.watch(() => props2.modelValue, (newValue) => {
       if (newValue !== void 0) {
         formData.value = JSON.parse(JSON.stringify(newValue));
@@ -11614,9 +11616,15 @@ const _sfc_main$R = /* @__PURE__ */ vue.defineComponent({
       };
       emit2("update:modelValue", formData.value);
     }
-    function handleSubmit() {
-      emit2("submit", formData.value);
-      initialFormData.value = structuredClone(formData.value);
+    async function handleSubmit() {
+      var _a2;
+      try {
+        await ((_a2 = props2.onSubmit) == null ? void 0 : _a2.call(props2, formData.value));
+        initialFormData.value = structuredClone(formData.value);
+        formState.value = "success";
+      } catch (error) {
+        formState.value = "error";
+      }
     }
     function shouldRenderField(field) {
       const condition = field.vIf ?? field["v-if"];
@@ -11658,7 +11666,9 @@ const _sfc_main$R = /* @__PURE__ */ vue.defineComponent({
           submit: handleSubmit,
           isDirty: isDirty.value,
           validateForm
-        })
+        }),
+        formState.value === "success" ? vue.renderSlot(_ctx.$slots, "success", { key: 2 }) : vue.createCommentVNode("", true),
+        formState.value === "error" ? vue.renderSlot(_ctx.$slots, "error", { key: 3 }) : vue.createCommentVNode("", true)
       ], 544)) : (vue.openBlock(true), vue.createElementBlock(vue.Fragment, { key: 1 }, vue.renderList(resolvedSchema.value, (field) => {
         return vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent(renderSchemaField(field)), {
           key: field.id

package/dist/index.mjs

@@ -11577,9 +11577,10 @@ const _sfc_main$R = /* @__PURE__ */ defineComponent({
   props: {
     modelValue: { default: void 0 },
     schema: { default: void 0 },
-    tag: { default: "form" }
+    tag: { default: "form" },
+    onSubmit: {}
   },
-  emits: ["update:modelValue", "submit"],
+  emits: ["update:modelValue"],
   setup(__props, { expose: __expose, emit: __emit }) {
     const props2 = __props;
     const emit2 = __emit;
@@ -11591,6 +11592,7 @@ const _sfc_main$R = /* @__PURE__ */ defineComponent({
         initialFormData.value = JSON.parse(JSON.stringify(props2.modelValue));
       }
     });
+    const formState = ref("idle");
     watch(() => props2.modelValue, (newValue) => {
       if (newValue !== void 0) {
         formData.value = JSON.parse(JSON.stringify(newValue));
@@ -11612,9 +11614,15 @@ const _sfc_main$R = /* @__PURE__ */ defineComponent({
       };
       emit2("update:modelValue", formData.value);
     }
-    function handleSubmit() {
-      emit2("submit", formData.value);
-      initialFormData.value = structuredClone(formData.value);
+    async function handleSubmit() {
+      var _a2;
+      try {
+        await ((_a2 = props2.onSubmit) == null ? void 0 : _a2.call(props2, formData.value));
+        initialFormData.value = structuredClone(formData.value);
+        formState.value = "success";
+      } catch (error) {
+        formState.value = "error";
+      }
     }
     function shouldRenderField(field) {
       const condition = field.vIf ?? field["v-if"];
@@ -11656,7 +11664,9 @@ const _sfc_main$R = /* @__PURE__ */ defineComponent({
           submit: handleSubmit,
           isDirty: isDirty.value,
           validateForm
-        })
+        }),
+        formState.value === "success" ? renderSlot(_ctx.$slots, "success", { key: 2 }) : createCommentVNode("", true),
+        formState.value === "error" ? renderSlot(_ctx.$slots, "error", { key: 3 }) : createCommentVNode("", true)
       ], 544)) : (openBlock(true), createElementBlock(Fragment, { key: 1 }, renderList(resolvedSchema.value, (field) => {
         return openBlock(), createBlock(resolveDynamicComponent(renderSchemaField(field)), {
           key: field.id

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@bagelink/vue",
   "type": "module",
-  "version": "0.0.1184",
+  "version": "0.0.1194",
   "description": "Bagel core sdk packages",
   "author": {
     "name": "Neveh Allon",
@@ -55,15 +55,16 @@
     "@types/leaflet": "^1.9.16",
     "@types/signature_pad": "^2.3.6",
     "@vue-macros/reactivity-transform": "^1.1.6",
-    "vue": "^3.5.13"
+    "vue": "^3.5.13",
+    "vue-component-type-helpers": "^2.2.0"
   },
   "peerDependencies": {
     "@bagelink/sdk": "*",
+    "@vuepic/vue-datepicker": "^8.8.1",
     "vue": "*",
     "vue-draggable-next": "^2.2.1",
     "vue-router": "*",
-    "vue3-charts": "^1.1.33",
-    "@vuepic/vue-datepicker": "^8.8.1"
+    "vue3-charts": "^1.1.33"
   },
   "peerDependenciesMeta": {
     "@vuepic/vue-datepicker": {

package/src/components/form/BagelForm.vue

@@ -4,10 +4,11 @@ import type { VNode } from 'vue'
 import { onMounted, watch, ref } from 'vue'
 import { useSchemaField } from '../../composables/useSchemaField'
 
-export interface BagelFormProps<T extends { [key: string]: any }> {
-	modelValue?: T
-	schema?: BglFormSchemaFnT<T>
+export interface BagelFormProps<_T> {
+	modelValue?: _T
+	schema?: BglFormSchemaFnT<_T>
 	tag?: 'form' | 'template'
+	onSubmit?: (data: _T) => Promise<void>
 }
 
 const props = withDefaults(defineProps<BagelFormProps<T>>(), {
@@ -18,7 +19,6 @@ const props = withDefaults(defineProps<BagelFormProps<T>>(), {
 
 const emit = defineEmits<{
 	(e: 'update:modelValue', value: T): void
-	(e: 'submit', value: T): void
 }>()
 
 const form = ref<HTMLFormElement>()
@@ -31,7 +31,8 @@ onMounted(() => {
 	}
 })
 
-// Keep formData in sync with modelValue prop only if it's provided
+const formState = ref<'success' | 'error' | 'idle'>('idle')
+
 watch(() => props.modelValue, (newValue) => {
 	if (newValue !== undefined) {
 		formData.value = JSON.parse(JSON.stringify(newValue))
@@ -57,9 +58,14 @@ function updateFormData(fieldId: string, value: any) {
 	emit('update:modelValue', formData.value)
 }
 
-function handleSubmit() {
-	emit('submit', formData.value)
-	initialFormData.value = structuredClone(formData.value)
+async function handleSubmit() {
+	try {
+		await props.onSubmit?.(formData.value)
+		initialFormData.value = structuredClone(formData.value)
+		formState.value = 'success'
+	} catch (error) {
+		formState.value = 'error'
+	}
 }
 
 function shouldRenderField(field: Field): boolean {
@@ -102,6 +108,8 @@ defineExpose({ form, isDirty, validateForm })
 		</template>
 		<slot v-else />
 		<slot name="submit" :submit="handleSubmit" :isDirty="isDirty" :validateForm="validateForm" />
+		<slot v-if="formState === 'success'" name="success" />
+		<slot v-if="formState === 'error'" name="error" />
 	</form>
 	<template v-else>
 		<template v-for="field in (resolvedSchema as Field[])" :key="field.id">

package/src/components/form/BglMultiStepForm.vue

@@ -1,14 +1,14 @@
-<script setup lang="ts" generic="T extends Record<string, any>">
+<script setup lang="ts" generic="T extends {[key:string]:any}">
 import type { BglFormSchemaFnT } from '@bagelink/vue'
+
+import type { ComponentExposed, ComponentProps } from 'vue-component-type-helpers'
 import { BagelForm, Btn, useBglSchema } from '@bagelink/vue'
 import { watch } from 'vue'
 
-type BagelFormT = InstanceType<typeof BagelForm>
-
 const props = withDefaults(
 	defineProps<{
 		bagelFormProps?: Omit<
-			BagelFormT['$props'],
+			ComponentProps<typeof BagelForm<T>>,
 			(
 			'schema' | `${string}modelValue` | `ref${string}` | `onVnode${string}` | 'onSubmit'
 			)
@@ -22,7 +22,9 @@ const props = withDefaults(
 
 const emits = defineEmits(['submit'])
 
-const formRef = $ref<InstanceType<typeof BagelForm>>()
+type BagelFormT = ComponentExposed<typeof BagelForm<T>>
+
+const formRef = $ref<BagelFormT>()
 
 const formData = defineModel<T>(
 	'modelValue',
@@ -72,9 +74,9 @@ function handleSubmit() {
 defineExpose({
 	submit: handleSubmit,
 	validateForm: formRef?.validateForm,
-	deleteItem: formRef?.deleteItem,
+	// deleteItem: formRef?.deleteItem, // ! TODO: if (does not exist) remove!()
 	isDirty: formRef?.isDirty,
-	clearForm: formRef?.clearForm,
+	// clearForm: formRef?.clearForm, // ! TODO: if (does not exist) remove!()
 })
 </script>
 

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

@@ -1,9 +1,13 @@
 <script setup lang="ts">
-import type { DatePickerInstance, VueDatePickerProps } from '@vuepic/vue-datepicker'
+import type { VueDatePickerProps } from '@vuepic/vue-datepicker'
+import type { ComponentExposed } from 'vue-component-type-helpers'
 import VDatepicker from '@vuepic/vue-datepicker'
 import { onMounted } from 'vue'
+
 import '@vuepic/vue-datepicker/dist/main.css'
 
+export type DatePickerInstance = ComponentExposed<typeof VDatepicker>
+
 const props = withDefaults(
 	defineProps<{
 		required?: boolean
@@ -13,7 +17,7 @@ const props = withDefaults(
 		enableTime?: boolean
 		modelValue?: string | Date
 		defaultValue?: string | Date
-		extraProps?: VueDatePickerProps
+		extraProps?: Omit<VueDatePickerProps, 'Slots' | 'InternalTime'>
 		allowedDates?: string[] | Date[]
 		timePickerInline?: boolean
 		minutesIncrement?: string | number

package/src/composables/useSchemaField.ts

@@ -29,7 +29,7 @@ export interface UseSchemaFieldOptions<T> {
 	onUpdate?: (field: BaseBagelField<T>, value: any) => void
 }
 
-export function useSchemaField<T extends Record<string, any>>(options: UseSchemaFieldOptions<T>) {
+export function useSchemaField<T extends { [key: string]: any }>(options: UseSchemaFieldOptions<T>) {
 	const { mode = 'form', getRowData, onUpdate } = options
 
 	function getComponent(field: BaseBagelField<T>) {
@@ -92,7 +92,7 @@ export function useSchemaField<T extends Record<string, any>>(options: UseSchema
 		// Check if this component should receive value as src
 		const isSrcValueComponent = typeof Component === 'string' && SRC_VALUE_COMPONENTS.has(Component)
 
-		const props: Record<string, any> = {
+		const props: { [key: string]: any } = {
 			...boundFieldProps,
 			required,
 			label,