nuxt-ui-formwerk 0.1.13 → 0.1.15

package/dist/module.d.mts

@@ -1,4 +1,5 @@
 import * as _nuxt_schema from '@nuxt/schema';
+export * from '../dist/runtime/types/index.js';
 
 declare const _default: _nuxt_schema.NuxtModule<_nuxt_schema.ModuleOptions, _nuxt_schema.ModuleOptions, false>;
 

package/dist/module.json

@@ -1,7 +1,7 @@
 {
   "name": "nuxt-ui-formwerk",
   "configKey": "uiElements",
-  "version": "0.1.13",
+  "version": "0.1.15",
   "builder": {
     "@nuxt/module-builder": "1.0.2",
     "unbuild": "unknown"

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

@@ -1,20 +1,30 @@
+export type FieldProps = Omit<FormFieldProps, "validateOnInputDelay" | "errorPattern" | "eagerValidation" | "error">;
+export interface FieldSlots {
+    default(props: {
+        model: {
+            modelValue: any;
+            "onUpdate:modelValue": (value: any) => void;
+        };
+        setValue: (value: any) => void;
+        value: any;
+    }): any;
+}
 import type { FormFieldProps } from "@nuxt/ui";
-type __VLS_Props = Omit<FormFieldProps, "validateOnInputDelay" | "errorPattern" | "eagerValidation" | "error">;
-declare var __VLS_8: {
-    model: {
-        modelValue: any;
-        "onUpdate:modelValue": (value: any) => void;
-    };
-    setValue: (value: any) => void;
-    value: any;
-};
-type __VLS_Slots = {} & {
-    default?: (props: typeof __VLS_8) => any;
-};
-declare const __VLS_base: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
-declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
 declare const _default: typeof __VLS_export;
 export default _default;
+declare const __VLS_export: __VLS_WithSlots<import("vue").DefineComponent<FieldProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<FieldProps> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>, {
+    default?: (props: {
+        model: {
+            modelValue: any;
+            "onUpdate:modelValue": (value: any) => void;
+        };
+        setValue: (value: any) => void;
+        value: any;
+        isTouched: boolean;
+        isBlurred: boolean;
+        isDirty: boolean;
+    }) => any;
+}>;
 type __VLS_WithSlots<T, S> = T & {
     new (): {
         $slots: S;

package/dist/runtime/components/Field.vue

@@ -1,8 +1,11 @@
-<script setup>
-import { useCustomControl } from "@formwerk/core";
+<script>
+import { useCustomControl, useFormField } from "@formwerk/core";
 import { formBusInjectionKey } from "#imports";
 import { inject, watch, computed } from "vue";
-import { formwerkOptionsInjectionKey, formwerkBusInjectionKey } from "./Form.vue";
+import { formwerkOptionsInjectionKey, formwerkBusInjectionKey } from "../types/form";
+</script>
+
+<script setup>
 const props = defineProps({
   as: { type: null, required: false },
   name: { type: String, required: false },
@@ -19,13 +22,19 @@ const props = defineProps({
 const formBus = inject(formBusInjectionKey, void 0);
 const formwerkBus = inject(formwerkBusInjectionKey, void 0);
 const formwerkOptions = inject(formwerkOptionsInjectionKey, void 0);
+const field = useFormField({
+  path: props.name,
+  label: props.label,
+  description: props.description
+});
 const {
   field: { errorMessage, fieldValue, setValue, setBlurred, setTouched, isTouched, isBlurred, isDirty }
-  // eslint-disable-next-line @typescript-eslint/no-explicit-any
 } = useCustomControl({
   name: props.name,
   required: props.required,
-  disabled: formwerkOptions?.value?.disabled
+  disabled: formwerkOptions?.value?.disabled,
+  controlType: "NuxtUIInput",
+  _field: field
 });
 const emitFormEvent = (type, name, payload) => {
   if (formwerkBus && name) formwerkBus.emit(type, { name, payload });
@@ -35,12 +44,10 @@ watch(isBlurred, (newValue) => emitFormEvent("blur", props.name, newValue));
 watch(isDirty, (newValue) => emitFormEvent("dirty", props.name, newValue));
 const error = computed(() => {
   if (!formwerkOptions || !formwerkOptions.value) return errorMessage.value ? errorMessage.value : void 0;
-  switch (formwerkOptions.value.validateOn) {
-    case "blur":
-      return isBlurred.value && errorMessage.value ? errorMessage.value : void 0;
-    default:
-      return errorMessage.value ? errorMessage.value : void 0;
+  if (formwerkOptions.value.validateOn === "blur") {
+    return isBlurred.value && errorMessage.value ? errorMessage.value : void 0;
   }
+  return errorMessage.value ? errorMessage.value : void 0;
 });
 const model = computed(() => ({
   modelValue: fieldValue.value,
@@ -48,6 +55,7 @@ const model = computed(() => ({
 }));
 if (formBus) {
   formBus.on(async (event) => {
+    if ("name" in event && event.name !== props.name) return;
     switch (event.type) {
       case "blur":
         setBlurred(true);
@@ -63,7 +71,15 @@ if (formBus) {
 </script>
 
 <template>
-  <UFormField v-bind="props" :error="error">
-    <slot :model="model" :set-value="setValue" :value="fieldValue" />
-  </UFormField>
+  <div>
+    <UFormField v-bind="props" :error="error">
+      <slot
+        :model="model"
+        :set-value="setValue"
+        :value="fieldValue"
+        :is-touched="isTouched"
+        :is-blurred="isBlurred"
+        :is-dirty="isDirty" />
+    </UFormField>
+  </div>
 </template>

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

@@ -1,20 +1,30 @@
+export type FieldProps = Omit<FormFieldProps, "validateOnInputDelay" | "errorPattern" | "eagerValidation" | "error">;
+export interface FieldSlots {
+    default(props: {
+        model: {
+            modelValue: any;
+            "onUpdate:modelValue": (value: any) => void;
+        };
+        setValue: (value: any) => void;
+        value: any;
+    }): any;
+}
 import type { FormFieldProps } from "@nuxt/ui";
-type __VLS_Props = Omit<FormFieldProps, "validateOnInputDelay" | "errorPattern" | "eagerValidation" | "error">;
-declare var __VLS_8: {
-    model: {
-        modelValue: any;
-        "onUpdate:modelValue": (value: any) => void;
-    };
-    setValue: (value: any) => void;
-    value: any;
-};
-type __VLS_Slots = {} & {
-    default?: (props: typeof __VLS_8) => any;
-};
-declare const __VLS_base: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
-declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
 declare const _default: typeof __VLS_export;
 export default _default;
+declare const __VLS_export: __VLS_WithSlots<import("vue").DefineComponent<FieldProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<FieldProps> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>, {
+    default?: (props: {
+        model: {
+            modelValue: any;
+            "onUpdate:modelValue": (value: any) => void;
+        };
+        setValue: (value: any) => void;
+        value: any;
+        isTouched: boolean;
+        isBlurred: boolean;
+        isDirty: boolean;
+    }) => any;
+}>;
 type __VLS_WithSlots<T, S> = T & {
     new (): {
         $slots: S;

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

@@ -0,0 +1,25 @@
+export interface FormSlots {
+    default(props: {
+        blurredFields: ReadonlySet<any>;
+        touchedFields: ReadonlySet<any>;
+        dirtyFields: ReadonlySet<any>;
+    }): any;
+}
+export interface Props {
+    validateOn?: "touched" | "blur" | "dirty";
+    disabled?: boolean;
+}
+declare const _default: typeof __VLS_export;
+export default _default;
+declare const __VLS_export: __VLS_WithSlots<import("vue").DefineComponent<Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<Props> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>, {
+    default?: (props: {
+        blurredFields: Set<any>;
+        touchedFields: Set<any>;
+        dirtyFields: Set<any>;
+    }) => any;
+}>;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/runtime/components/Form.vue

@@ -3,8 +3,10 @@ import { provide, reactive, computed } from "vue";
 import { useEventBus } from "@vueuse/core";
 import { useFormContext } from "@formwerk/core";
 import { formBusInjectionKey, formOptionsInjectionKey } from "#imports";
-export const formwerkOptionsInjectionKey = /* @__PURE__ */ Symbol("nuxt-ui-formwerk.form-options");
-export const formwerkBusInjectionKey = /* @__PURE__ */ Symbol("nuxt-ui-formwerk.form-events");
+import {
+  formwerkOptionsInjectionKey,
+  formwerkBusInjectionKey
+} from "../types/form";
 </script>
 
 <script setup>

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

@@ -0,0 +1,25 @@
+export interface FormSlots {
+    default(props: {
+        blurredFields: ReadonlySet<any>;
+        touchedFields: ReadonlySet<any>;
+        dirtyFields: ReadonlySet<any>;
+    }): any;
+}
+export interface Props {
+    validateOn?: "touched" | "blur" | "dirty";
+    disabled?: boolean;
+}
+declare const _default: typeof __VLS_export;
+export default _default;
+declare const __VLS_export: __VLS_WithSlots<import("vue").DefineComponent<Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<Props> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>, {
+    default?: (props: {
+        blurredFields: Set<any>;
+        touchedFields: Set<any>;
+        dirtyFields: Set<any>;
+    }) => any;
+}>;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/runtime/types/form.d.ts

@@ -0,0 +1,13 @@
+import type { InjectionKey, ComputedRef } from "vue";
+import type { UseEventBusReturn } from "@vueuse/core";
+export interface FormInjectedOptions {
+    disabled?: boolean;
+    validateOn?: FormwerkInputEvents;
+}
+export type FormwerkInputEvent = {
+    name: string;
+    payload: unknown;
+};
+export type FormwerkInputEvents = "touched" | "blur" | "dirty";
+export declare const formwerkOptionsInjectionKey: InjectionKey<ComputedRef<FormInjectedOptions>>;
+export declare const formwerkBusInjectionKey: InjectionKey<UseEventBusReturn<FormwerkInputEvents, FormwerkInputEvent>>;

package/dist/runtime/types/form.js

@@ -0,0 +1,2 @@
+export const formwerkOptionsInjectionKey = Symbol("nuxt-ui-formwerk.form-options");
+export const formwerkBusInjectionKey = Symbol("nuxt-ui-formwerk.form-events");

package/dist/runtime/types/index.d.ts

@@ -0,0 +1,4 @@
+export * from "../components/Form.vue.js";
+export * from "../components/Field.vue.js";
+export * from "../components/Group.vue.js";
+export * from "./form.js";

package/dist/runtime/types/index.js

@@ -0,0 +1,4 @@
+export * from "../components/Form.vue";
+export * from "../components/Field.vue";
+export * from "../components/Group.vue";
+export * from "./form.js";

package/dist/types.d.mts

@@ -5,3 +5,5 @@ import type { default as Module } from './module.mjs'
 export type ModuleOptions = typeof Module extends NuxtModule<infer O> ? Partial<O> : Record<string, any>
 
 export { default } from './module.mjs'
+
+export * from '../dist/runtime/types/index.js'

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "nuxt-ui-formwerk",
-  "version": "0.1.13",
+  "version": "0.1.15",
   "description": "A collection of beautiful, animated UI components for Nuxt applications",
   "license": "MIT",
   "repository": "https://github.com/genu/nuxt-ui-formwerk.git",
@@ -31,7 +31,7 @@
     "@nuxt/eslint-config": "^1.12.1",
     "@nuxt/module-builder": "^1.0.2",
     "@nuxt/schema": "^4.2.2",
-    "@nuxt/test-utils": "^3.22.0",
+    "@nuxt/test-utils": "^3.23.0",
     "@types/culori": "^4.0.1",
     "@types/node": "latest",
     "changelogen": "^0.6.2",