@sfxcode/nuxt-ui-formkit 1.2.3 → 1.2.5

package/README.md

@@ -75,6 +75,7 @@ FormKit Nuxt UI bridges the gap between [FormKit](https://formkit.com/)'s powerf
 - `useFormKitMultiStep` - Multi-step tab-item mapping and navigation bridging
 - `useFormKitForm` - Submit/reset/error-management wrapper for a form's imperative APIs, callable from outside the form
 - `useFormKitAutoForm` - Schema inference from data value shapes, Valibot, or Zod schemas (`inferFormSchema`/`inferFormSchemaFromValibot`/`inferFormSchemaFromZod`)
+- `useFormKitOverlay` - Promise-based modal/slideover forms: `await overlay.edit({ data, schema, title })` (or `.auto(...)` for a schema-free version), resolving to the saved data or `null` on cancel
 - `colorConverter` - Color format conversion utilities
 - `durationConverter` - Duration format conversion utilities
 

package/dist/module.json

@@ -4,7 +4,7 @@
   "compatibility": {
     "nuxt": ">=4.0.0"
   },
-  "version": "1.2.3",
+  "version": "1.2.5",
   "builder": {
     "@nuxt/module-builder": "1.0.2",
     "unbuild": "3.6.1"

package/dist/runtime/components/FUAutoForm.d.vue.ts

@@ -1,4 +1,3 @@
-import type { FormKitSchemaDefinition } from '@formkit/core';
 import type { PropType } from 'vue';
 import type { AutoFormOverrides, ValibotLikeSchema, ZodLikeSchema } from '../composables/useFormKitAutoForm.js';
 declare var __VLS_10: string, __VLS_11: any;
@@ -7,7 +6,7 @@ type __VLS_Slots = {} & {
 };
 declare const __VLS_base: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
     data: {
-        type: ObjectConstructor;
+        type: PropType<Record<string, unknown>>;
         default: null;
     };
     overrides: {
@@ -23,13 +22,13 @@ declare const __VLS_base: import("vue").DefineComponent<import("vue").ExtractPro
         default: undefined;
     };
     modelValue: {
-        type: PropType<FormKitSchemaDefinition>;
+        type: PropType<Record<string, unknown>>;
     };
 }>, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
-    "update:modelValue": (value: FormKitSchemaDefinition | undefined) => any;
+    "update:modelValue": (value: Record<string, unknown> | undefined) => any;
 }, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
     data: {
-        type: ObjectConstructor;
+        type: PropType<Record<string, unknown>>;
         default: null;
     };
     overrides: {
@@ -45,12 +44,12 @@ declare const __VLS_base: import("vue").DefineComponent<import("vue").ExtractPro
         default: undefined;
     };
     modelValue: {
-        type: PropType<FormKitSchemaDefinition>;
+        type: PropType<Record<string, unknown>>;
     };
 }>> & Readonly<{
-    "onUpdate:modelValue"?: ((value: FormKitSchemaDefinition | undefined) => any) | undefined;
+    "onUpdate:modelValue"?: ((value: Record<string, unknown> | undefined) => any) | undefined;
 }>, {
-    data: Record<string, any>;
+    data: Record<string, unknown>;
     overrides: AutoFormOverrides;
     valibotSchema: ValibotLikeSchema;
     zodSchema: ZodLikeSchema;

package/dist/runtime/components/FUAutoForm.vue

@@ -21,7 +21,7 @@ const props = defineProps({
     default: void 0
   }
 });
-const formData = defineModel({ type: [Object, String, Array] });
+const formData = defineModel({ type: Object });
 if (!formData.value && props.data) {
   formData.value = props.data;
 }

package/dist/runtime/components/FUAutoForm.vue.d.ts

@@ -1,4 +1,3 @@
-import type { FormKitSchemaDefinition } from '@formkit/core';
 import type { PropType } from 'vue';
 import type { AutoFormOverrides, ValibotLikeSchema, ZodLikeSchema } from '../composables/useFormKitAutoForm.js';
 declare var __VLS_10: string, __VLS_11: any;
@@ -7,7 +6,7 @@ type __VLS_Slots = {} & {
 };
 declare const __VLS_base: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
     data: {
-        type: ObjectConstructor;
+        type: PropType<Record<string, unknown>>;
         default: null;
     };
     overrides: {
@@ -23,13 +22,13 @@ declare const __VLS_base: import("vue").DefineComponent<import("vue").ExtractPro
         default: undefined;
     };
     modelValue: {
-        type: PropType<FormKitSchemaDefinition>;
+        type: PropType<Record<string, unknown>>;
     };
 }>, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
-    "update:modelValue": (value: FormKitSchemaDefinition | undefined) => any;
+    "update:modelValue": (value: Record<string, unknown> | undefined) => any;
 }, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
     data: {
-        type: ObjectConstructor;
+        type: PropType<Record<string, unknown>>;
         default: null;
     };
     overrides: {
@@ -45,12 +44,12 @@ declare const __VLS_base: import("vue").DefineComponent<import("vue").ExtractPro
         default: undefined;
     };
     modelValue: {
-        type: PropType<FormKitSchemaDefinition>;
+        type: PropType<Record<string, unknown>>;
     };
 }>> & Readonly<{
-    "onUpdate:modelValue"?: ((value: FormKitSchemaDefinition | undefined) => any) | undefined;
+    "onUpdate:modelValue"?: ((value: Record<string, unknown> | undefined) => any) | undefined;
 }>, {
-    data: Record<string, any>;
+    data: Record<string, unknown>;
     overrides: AutoFormOverrides;
     valibotSchema: ValibotLikeSchema;
     zodSchema: ZodLikeSchema;

package/dist/runtime/components/FUAutoFormOverlay.d.vue.ts

@@ -0,0 +1,82 @@
+import type { PropType } from 'vue';
+import type { AutoFormOverrides, ValibotLikeSchema, ZodLikeSchema } from '../composables/useFormKitAutoForm.js';
+declare const __VLS_export: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
+    id: {
+        type: StringConstructor;
+        required: true;
+    };
+    data: {
+        type: ObjectConstructor;
+        default: null;
+    };
+    valibotSchema: {
+        type: PropType<ValibotLikeSchema>;
+        default: undefined;
+    };
+    zodSchema: {
+        type: PropType<ZodLikeSchema>;
+        default: undefined;
+    };
+    overrides: {
+        type: PropType<AutoFormOverrides>;
+        default: undefined;
+    };
+    title: {
+        type: StringConstructor;
+        default: undefined;
+    };
+    as: {
+        type: PropType<"modal" | "slideover">;
+        default: string;
+    };
+    open: {
+        type: PropType<boolean>;
+    };
+}>, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    close: (value: unknown) => any;
+    "update:open": (value: boolean) => any;
+}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
+    id: {
+        type: StringConstructor;
+        required: true;
+    };
+    data: {
+        type: ObjectConstructor;
+        default: null;
+    };
+    valibotSchema: {
+        type: PropType<ValibotLikeSchema>;
+        default: undefined;
+    };
+    zodSchema: {
+        type: PropType<ZodLikeSchema>;
+        default: undefined;
+    };
+    overrides: {
+        type: PropType<AutoFormOverrides>;
+        default: undefined;
+    };
+    title: {
+        type: StringConstructor;
+        default: undefined;
+    };
+    as: {
+        type: PropType<"modal" | "slideover">;
+        default: string;
+    };
+    open: {
+        type: PropType<boolean>;
+    };
+}>> & Readonly<{
+    onClose?: ((value: unknown) => any) | undefined;
+    "onUpdate:open"?: ((value: boolean) => any) | undefined;
+}>, {
+    data: Record<string, any>;
+    title: string;
+    as: "modal" | "slideover";
+    overrides: AutoFormOverrides;
+    valibotSchema: ValibotLikeSchema;
+    zodSchema: ZodLikeSchema;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/runtime/components/FUAutoFormOverlay.vue

@@ -0,0 +1,106 @@
+<script setup>
+import { useOverlayCloseResolution } from "../utils/useOverlayCloseResolution";
+import FUAutoForm from "./FUAutoForm.vue";
+defineProps({
+  id: {
+    type: String,
+    required: true
+  },
+  data: {
+    type: Object,
+    default: null
+  },
+  valibotSchema: {
+    type: Object,
+    default: void 0
+  },
+  zodSchema: {
+    type: Object,
+    default: void 0
+  },
+  overrides: {
+    type: Object,
+    default: void 0
+  },
+  title: {
+    type: String,
+    default: void 0
+  },
+  as: {
+    type: String,
+    default: "modal"
+  }
+});
+const emit = defineEmits(["close"]);
+const open = defineModel("open", { type: Boolean, ...{ default: false } });
+const { resolveOnce } = useOverlayCloseResolution(open, emit);
+function handleSaved(savedData) {
+  resolveOnce(savedData);
+}
+function handleCancel() {
+  resolveOnce(null);
+}
+</script>
+
+<template>
+  <UModal
+    v-if="as === 'modal'"
+    v-model:open="open"
+    :title="title"
+  >
+    <template #body>
+      <FUAutoForm
+        :id="id"
+        :data="data"
+        :valibot-schema="valibotSchema"
+        :zod-schema="zodSchema"
+        :overrides="overrides"
+        @data-saved="handleSaved"
+      >
+        <template #submit>
+          <UButton
+            type="submit"
+            label="Save"
+          />
+          <UButton
+            type="button"
+            label="Cancel"
+            color="neutral"
+            variant="outline"
+            @click="handleCancel"
+          />
+        </template>
+      </FUAutoForm>
+    </template>
+  </UModal>
+  <USlideover
+    v-else
+    v-model:open="open"
+    :title="title"
+  >
+    <template #body>
+      <FUAutoForm
+        :id="id"
+        :data="data"
+        :valibot-schema="valibotSchema"
+        :zod-schema="zodSchema"
+        :overrides="overrides"
+        @data-saved="handleSaved"
+      >
+        <template #submit>
+          <UButton
+            type="submit"
+            label="Save"
+          />
+          <UButton
+            type="button"
+            label="Cancel"
+            color="neutral"
+            variant="outline"
+            @click="handleCancel"
+          />
+        </template>
+      </FUAutoForm>
+    </template>
+  </USlideover>
+</template>

package/dist/runtime/components/FUAutoFormOverlay.vue.d.ts

@@ -0,0 +1,82 @@
+import type { PropType } from 'vue';
+import type { AutoFormOverrides, ValibotLikeSchema, ZodLikeSchema } from '../composables/useFormKitAutoForm.js';
+declare const __VLS_export: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
+    id: {
+        type: StringConstructor;
+        required: true;
+    };
+    data: {
+        type: ObjectConstructor;
+        default: null;
+    };
+    valibotSchema: {
+        type: PropType<ValibotLikeSchema>;
+        default: undefined;
+    };
+    zodSchema: {
+        type: PropType<ZodLikeSchema>;
+        default: undefined;
+    };
+    overrides: {
+        type: PropType<AutoFormOverrides>;
+        default: undefined;
+    };
+    title: {
+        type: StringConstructor;
+        default: undefined;
+    };
+    as: {
+        type: PropType<"modal" | "slideover">;
+        default: string;
+    };
+    open: {
+        type: PropType<boolean>;
+    };
+}>, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    close: (value: unknown) => any;
+    "update:open": (value: boolean) => any;
+}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
+    id: {
+        type: StringConstructor;
+        required: true;
+    };
+    data: {
+        type: ObjectConstructor;
+        default: null;
+    };
+    valibotSchema: {
+        type: PropType<ValibotLikeSchema>;
+        default: undefined;
+    };
+    zodSchema: {
+        type: PropType<ZodLikeSchema>;
+        default: undefined;
+    };
+    overrides: {
+        type: PropType<AutoFormOverrides>;
+        default: undefined;
+    };
+    title: {
+        type: StringConstructor;
+        default: undefined;
+    };
+    as: {
+        type: PropType<"modal" | "slideover">;
+        default: string;
+    };
+    open: {
+        type: PropType<boolean>;
+    };
+}>> & Readonly<{
+    onClose?: ((value: unknown) => any) | undefined;
+    "onUpdate:open"?: ((value: boolean) => any) | undefined;
+}>, {
+    data: Record<string, any>;
+    title: string;
+    as: "modal" | "slideover";
+    overrides: AutoFormOverrides;
+    valibotSchema: ValibotLikeSchema;
+    zodSchema: ZodLikeSchema;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/runtime/components/FUDataEdit.d.vue.ts

@@ -15,7 +15,7 @@ declare const __VLS_base: import("vue").DefineComponent<import("vue").ExtractPro
         default: string;
     };
     data: {
-        type: ObjectConstructor;
+        type: PropType<Record<string, unknown>>;
         default: null;
     };
     schema: {
@@ -79,17 +79,17 @@ declare const __VLS_base: import("vue").DefineComponent<import("vue").ExtractPro
         default: boolean;
     };
     modelValue: {
-        type: PropType<FormKitSchemaDefinition>;
+        type: PropType<Record<string, unknown>>;
     };
 }>, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
-    "update:modelValue": (value: FormKitSchemaDefinition | undefined) => any;
+    "update:modelValue": (value: Record<string, unknown> | undefined) => any;
 }, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
     id: {
         type: StringConstructor;
         default: string;
     };
     data: {
-        type: ObjectConstructor;
+        type: PropType<Record<string, unknown>>;
         default: null;
     };
     schema: {
@@ -153,13 +153,13 @@ declare const __VLS_base: import("vue").DefineComponent<import("vue").ExtractPro
         default: boolean;
     };
     modelValue: {
-        type: PropType<FormKitSchemaDefinition>;
+        type: PropType<Record<string, unknown>>;
     };
 }>> & Readonly<{
-    "onUpdate:modelValue"?: ((value: FormKitSchemaDefinition | undefined) => any) | undefined;
+    "onUpdate:modelValue"?: ((value: Record<string, unknown> | undefined) => any) | undefined;
 }>, {
     schema: FormKitSchemaDefinition;
-    data: Record<string, any>;
+    data: Record<string, unknown>;
     id: string;
     standardSchema: StandardSchemaV1<unknown, unknown>;
     formClass: string;

package/dist/runtime/components/FUDataEdit.vue

@@ -82,7 +82,7 @@ useFormKitContextById(props.id, (context) => {
 });
 onScopeDispose(() => detachStandardSchema?.());
 const formSchema = ref(props.schema);
-const formData = defineModel({ type: [Object, String, Array] });
+const formData = defineModel({ type: Object });
 watch(() => props.schema, (newSchema) => {
   formSchema.value = newSchema;
 }, { deep: true });
@@ -95,7 +95,8 @@ if (props.data) {
   formData.value = props.data;
 }
 function handleSave() {
-  emit("dataSaved", formData.value);
+  const { slots: _slots, ...data } = formData.value ?? {};
+  emit("dataSaved", data);
 }
 function handleReset() {
   reset(props.id);

package/dist/runtime/components/FUDataEdit.vue.d.ts

@@ -15,7 +15,7 @@ declare const __VLS_base: import("vue").DefineComponent<import("vue").ExtractPro
         default: string;
     };
     data: {
-        type: ObjectConstructor;
+        type: PropType<Record<string, unknown>>;
         default: null;
     };
     schema: {
@@ -79,17 +79,17 @@ declare const __VLS_base: import("vue").DefineComponent<import("vue").ExtractPro
         default: boolean;
     };
     modelValue: {
-        type: PropType<FormKitSchemaDefinition>;
+        type: PropType<Record<string, unknown>>;
     };
 }>, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
-    "update:modelValue": (value: FormKitSchemaDefinition | undefined) => any;
+    "update:modelValue": (value: Record<string, unknown> | undefined) => any;
 }, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
     id: {
         type: StringConstructor;
         default: string;
     };
     data: {
-        type: ObjectConstructor;
+        type: PropType<Record<string, unknown>>;
         default: null;
     };
     schema: {
@@ -153,13 +153,13 @@ declare const __VLS_base: import("vue").DefineComponent<import("vue").ExtractPro
         default: boolean;
     };
     modelValue: {
-        type: PropType<FormKitSchemaDefinition>;
+        type: PropType<Record<string, unknown>>;
     };
 }>> & Readonly<{
-    "onUpdate:modelValue"?: ((value: FormKitSchemaDefinition | undefined) => any) | undefined;
+    "onUpdate:modelValue"?: ((value: Record<string, unknown> | undefined) => any) | undefined;
 }>, {
     schema: FormKitSchemaDefinition;
-    data: Record<string, any>;
+    data: Record<string, unknown>;
     id: string;
     standardSchema: StandardSchemaV1<unknown, unknown>;
     formClass: string;

package/dist/runtime/components/FUDataEditOverlay.d.vue.ts

@@ -0,0 +1,64 @@
+import type { FormKitSchemaDefinition } from '@formkit/core';
+import type { PropType } from 'vue';
+declare const __VLS_export: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
+    id: {
+        type: StringConstructor;
+        required: true;
+    };
+    data: {
+        type: ObjectConstructor;
+        default: null;
+    };
+    schema: {
+        type: PropType<FormKitSchemaDefinition>;
+        default: null;
+    };
+    title: {
+        type: StringConstructor;
+        default: undefined;
+    };
+    as: {
+        type: PropType<"modal" | "slideover">;
+        default: string;
+    };
+    open: {
+        type: PropType<boolean>;
+    };
+}>, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    close: (value: unknown) => any;
+    "update:open": (value: boolean) => any;
+}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
+    id: {
+        type: StringConstructor;
+        required: true;
+    };
+    data: {
+        type: ObjectConstructor;
+        default: null;
+    };
+    schema: {
+        type: PropType<FormKitSchemaDefinition>;
+        default: null;
+    };
+    title: {
+        type: StringConstructor;
+        default: undefined;
+    };
+    as: {
+        type: PropType<"modal" | "slideover">;
+        default: string;
+    };
+    open: {
+        type: PropType<boolean>;
+    };
+}>> & Readonly<{
+    onClose?: ((value: unknown) => any) | undefined;
+    "onUpdate:open"?: ((value: boolean) => any) | undefined;
+}>, {
+    schema: FormKitSchemaDefinition;
+    data: Record<string, any>;
+    title: string;
+    as: "modal" | "slideover";
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/runtime/components/FUDataEditOverlay.vue

@@ -0,0 +1,94 @@
+<script setup>
+import { useOverlayCloseResolution } from "../utils/useOverlayCloseResolution";
+import FUDataEdit from "./FUDataEdit.vue";
+defineProps({
+  id: {
+    type: String,
+    required: true
+  },
+  data: {
+    type: Object,
+    default: null
+  },
+  schema: {
+    type: Object,
+    default: null
+  },
+  title: {
+    type: String,
+    default: void 0
+  },
+  as: {
+    type: String,
+    default: "modal"
+  }
+});
+const emit = defineEmits(["close"]);
+const open = defineModel("open", { type: Boolean, ...{ default: false } });
+const { resolveOnce } = useOverlayCloseResolution(open, emit);
+function handleSaved(savedData) {
+  resolveOnce(savedData);
+}
+function handleCancel() {
+  resolveOnce(null);
+}
+</script>
+
+<template>
+  <UModal
+    v-if="as === 'modal'"
+    v-model:open="open"
+    :title="title"
+  >
+    <template #body>
+      <FUDataEdit
+        :id="id"
+        :data="data"
+        :schema="schema"
+        @data-saved="handleSaved"
+      >
+        <template #submit>
+          <UButton
+            type="submit"
+            label="Save"
+          />
+          <UButton
+            type="button"
+            label="Cancel"
+            color="neutral"
+            variant="outline"
+            @click="handleCancel"
+          />
+        </template>
+      </FUDataEdit>
+    </template>
+  </UModal>
+  <USlideover
+    v-else
+    v-model:open="open"
+    :title="title"
+  >
+    <template #body>
+      <FUDataEdit
+        :id="id"
+        :data="data"
+        :schema="schema"
+        @data-saved="handleSaved"
+      >
+        <template #submit>
+          <UButton
+            type="submit"
+            label="Save"
+          />
+          <UButton
+            type="button"
+            label="Cancel"
+            color="neutral"
+            variant="outline"
+            @click="handleCancel"
+          />
+        </template>
+      </FUDataEdit>
+    </template>
+  </USlideover>
+</template>