nuxt-ui-formwerk 0.1.3 → 0.1.5

package/README.md

@@ -5,6 +5,13 @@
 [![License][license-src]][license-href]
 [![Nuxt][nuxt-src]][nuxt-href]
 
+> [!WARNING]
+> **⚠️ Experimental Module**
+>
+> This module is currently in an experimental phase. APIs may change, and some features may not be fully stable. Use with caution in production environments and please report any issues you encounter.
+>
+> **Technical Note:** This module works by tapping into Nuxt UI's form component injection mechanism and intercepting bus events to coordinate between Nuxt UI's native form system and formwerk's validation engine. Changes to Nuxt UI's internal form architecture may require updates to this module.
+
 Enhanced form components for Nuxt UI with [@formwerk/core](https://formwerk.dev/) integration. This module bridges the gap between Formwerk's powerful form validation and state management with Nuxt UI's beautiful form components.
 
 - [✨  Release Notes](/CHANGELOG.md)
@@ -31,8 +38,8 @@ Add the module to your `nuxt.config.ts`:
 
 ```ts
 export default defineNuxtConfig({
-  modules: ['@nuxt/ui', 'nuxt-ui-formwerk']
-})
+  modules: ["@nuxt/ui", "nuxt-ui-formwerk"],
+});
 ```
 
 That's it! You can now use enhanced form components in your Nuxt app ✨
@@ -47,21 +54,26 @@ The root form component that provides validation context and tracks form state.
 
 ```vue
 <script setup lang="ts">
-import { z } from 'zod'
+import { z } from "zod";
 
 const schema = z.object({
   email: z.string().email(),
-  password: z.string().min(8)
-})
+  password: z.string().min(8),
+});
 
 const state = reactive({
-  email: '',
-  password: ''
-})
+  email: "",
+  password: "",
+});
 </script>
 
 <template>
-  <FormwerkForm :schema="schema" :state="state" validate-on="blur" #="{ blurredFields, touchedFields, dirtyFields }">
+  <FormwerkForm
+    :schema="schema"
+    :state="state"
+    validate-on="blur"
+    #="{ blurredFields, touchedFields, dirtyFields }"
+  >
     <!-- Form content here -->
     <p>Blurred fields: {{ blurredFields.size }}</p>
   </FormwerkForm>
@@ -70,10 +82,10 @@ const state = reactive({
 
 #### Props
 
-| Prop         | Type                           | Default  | Description                                     |
-| ------------ | ------------------------------ | -------- | ----------------------------------------------- |
-| `validateOn` | `'touched' \| 'blur' \| 'dirty'` | `'blur'` | When to trigger validation                      |
-| `disabled`   | `boolean`                      | `false`  | Disable all form fields                         |
+| Prop         | Type                             | Default  | Description                |
+| ------------ | -------------------------------- | -------- | -------------------------- |
+| `validateOn` | `'touched' \| 'blur' \| 'dirty'` | `'blur'` | When to trigger validation |
+| `disabled`   | `boolean`                        | `false`  | Disable all form fields    |
 
 #### Slot Props
 
@@ -137,43 +149,64 @@ Groups related form fields together for nested validation.
 
 ```vue
 <script setup lang="ts">
-import { z } from 'zod'
+import { z } from "zod";
 
 const schema = z.object({
-  name: z.string().min(2, 'Name must be at least 2 characters'),
-  email: z.string().email('Invalid email address'),
-  password: z.string().min(8, 'Password must be at least 8 characters')
-})
+  name: z.string().min(2, "Name must be at least 2 characters"),
+  email: z.string().email("Invalid email address"),
+  password: z.string().min(8, "Password must be at least 8 characters"),
+});
 
 const state = reactive({
-  name: '',
-  email: '',
-  password: ''
-})
+  name: "",
+  email: "",
+  password: "",
+});
 
 const onSubmit = () => {
-  console.log('Form submitted:', state)
-}
+  console.log("Form submitted:", state);
+};
 </script>
 
 <template>
-  <FormwerkForm :schema="schema" :state="state" validate-on="blur" #="{ blurredFields }">
+  <FormwerkForm
+    :schema="schema"
+    :state="state"
+    validate-on="blur"
+    #="{ blurredFields }"
+  >
     <div class="space-y-4">
       <FormwerkField name="name" label="Name" required #="{ setValue, value }">
         <UInput :model-value="value" @update:model-value="setValue" />
       </FormwerkField>
 
-      <FormwerkField name="email" label="Email" required #="{ setValue, value }">
-        <UInput :model-value="value" @update:model-value="setValue" type="email" />
+      <FormwerkField
+        name="email"
+        label="Email"
+        required
+        #="{ setValue, value }"
+      >
+        <UInput
+          :model-value="value"
+          @update:model-value="setValue"
+          type="email"
+        />
       </FormwerkField>
 
-      <FormwerkField name="password" label="Password" required #="{ setValue, value }">
-        <UInput :model-value="value" @update:model-value="setValue" type="password" />
+      <FormwerkField
+        name="password"
+        label="Password"
+        required
+        #="{ setValue, value }"
+      >
+        <UInput
+          :model-value="value"
+          @update:model-value="setValue"
+          type="password"
+        />
       </FormwerkField>
 
-      <UButton type="submit" @click="onSubmit">
-        Submit
-      </UButton>
+      <UButton type="submit" @click="onSubmit"> Submit </UButton>
 
       <p class="text-sm text-gray-500">
         Fields blurred: {{ blurredFields.size }}
@@ -207,38 +240,38 @@ The integration allows you to use Nuxt UI's beautiful form components while leve
 <details>
   <summary>Local development</summary>
 
-  ```bash
-  # Install dependencies
-  pnpm install
+```bash
+# Install dependencies
+pnpm install
 
-  # Generate type stubs and prepare playground
-  pnpm dev:prepare
+# Generate type stubs and prepare playground
+pnpm dev:prepare
 
-  # Develop with the playground
-  pnpm dev
+# Develop with the playground
+pnpm dev
 
-  # Build the playground
-  pnpm dev:build
+# Build the playground
+pnpm dev:build
 
-  # Run linter (oxlint)
-  pnpm lint
+# Run linter (oxlint)
+pnpm lint
 
-  # Fix linting issues
-  pnpm lint:fix
+# Fix linting issues
+pnpm lint:fix
 
-  # Format code (oxfmt)
-  pnpm format
+# Format code (oxfmt)
+pnpm format
 
-  # Run tests
-  pnpm test
-  pnpm test:watch
+# Run tests
+pnpm test
+pnpm test:watch
 
-  # Type check
-  pnpm test:types
+# Type check
+pnpm test:types
 
-  # Release new version
-  pnpm release
-  ```
+# Release new version
+pnpm release
+```
 
 </details>
 

package/dist/module.json

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

package/dist/module.mjs

@@ -6,6 +6,9 @@ const module$1 = defineNuxtModule({
     configKey: "uiElements"
   },
   defaults: {},
+  moduleDependencies: {
+    "@nuxt/ui": {}
+  },
   setup(_options, _nuxt) {
     const resolver = createResolver(import.meta.url);
     const logger = useLogger("nuxt-ui-formwerk");

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

@@ -1,4 +1,4 @@
-import type { FormFieldProps } from "@nuxt/ui";
+import { type FormFieldProps } from "@nuxt/ui";
 type __VLS_Props = Omit<FormFieldProps, "validateOnInputDelay" | "errorPattern" | "eagerValidation" | "error">;
 declare var __VLS_8: {
     setValue: (value: any) => void;

package/dist/runtime/components/Field.vue

@@ -1,6 +1,12 @@
 <script setup>
+import {} from "@nuxt/ui";
 import { useCustomControl } from "@formwerk/core";
-import { formwerkOptionsInjectionKey, formwerkBusInjectionKey } from "./Form.vue";
+import { formBusInjectionKey } from "#imports";
+import { inject, watch, computed } from "vue";
+import {
+  formwerkOptionsInjectionKey,
+  formwerkBusInjectionKey
+} from "./Form.vue";
 const props = defineProps({
   as: { type: null, required: false },
   name: { type: String, required: false },
@@ -17,8 +23,21 @@ const formBus = inject(formBusInjectionKey, void 0);
 const formwerkBus = inject(formwerkBusInjectionKey, void 0);
 const formwerkOptions = inject(formwerkOptionsInjectionKey, void 0);
 const {
-  field: { errorMessage, fieldValue, setValue, setBlurred, setTouched, isTouched, isBlurred, isDirty }
-} = useCustomControl({ name: props.name, required: props.required, disabled: formwerkOptions?.value?.disabled });
+  field: {
+    errorMessage,
+    fieldValue,
+    setValue,
+    setBlurred,
+    setTouched,
+    isTouched,
+    isBlurred,
+    isDirty
+  }
+} = useCustomControl({
+  name: props.name,
+  required: props.required,
+  disabled: formwerkOptions?.value?.disabled
+});
 const emitFormEvent = (type, name, payload) => {
   if (formwerkBus && name) formwerkBus.emit(type, { name, payload });
 };
@@ -26,7 +45,8 @@ watch(isTouched, (newValue) => emitFormEvent("touched", props.name, newValue));
 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;
+  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;

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

@@ -1,4 +1,4 @@
-import type { FormFieldProps } from "@nuxt/ui";
+import { type FormFieldProps } from "@nuxt/ui";
 type __VLS_Props = Omit<FormFieldProps, "validateOnInputDelay" | "errorPattern" | "eagerValidation" | "error">;
 declare var __VLS_8: {
     setValue: (value: any) => void;

package/dist/runtime/components/Form.vue

@@ -1,4 +1,10 @@
 <script>
+import { provide, reactive, computed } from "vue";
+import {
+  formBusInjectionKey,
+  formOptionsInjectionKey
+} from "@nuxt/ui/composables/useFormField";
+import { useEventBus } from "@vueuse/core";
 import { useFormContext } from "@formwerk/core";
 export const formwerkOptionsInjectionKey = /* @__PURE__ */ Symbol("nuxt-ui-formwerk.form-options");
 export const formwerkBusInjectionKey = /* @__PURE__ */ Symbol("nuxt-ui-formwerk.form-events");
@@ -10,7 +16,9 @@ const { validateOn = "blur", disabled = false } = defineProps({
   validateOn: { type: String, required: false },
   disabled: { type: Boolean, required: false }
 });
-const formwerkBus = useEventBus(`formwerk-form-${context.id}`);
+const formwerkBus = useEventBus(
+  `formwerk-form-${context.id}`
+);
 const NuxtUiFormBus = useEventBus(`form-${context.id}`);
 const dirtyFields = reactive(/* @__PURE__ */ new Set());
 const touchedFields = reactive(/* @__PURE__ */ new Set());
@@ -55,6 +63,10 @@ formwerkBus.on(async (event, payload) => {
 
 <template>
   <div>
-    <slot :blurred-fields="blurredFields" :touched-fields="touchedFields" :dirty-fields="dirtyFields" />
+    <slot
+      :blurred-fields="blurredFields"
+      :touched-fields="touchedFields"
+      :dirty-fields="dirtyFields"
+    />
   </div>
 </template>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "nuxt-ui-formwerk",
-  "version": "0.1.3",
+  "version": "0.1.5",
   "description": "A collection of beautiful, animated UI components for Nuxt applications",
   "license": "MIT",
   "repository": "https://github.com/genu/nuxt-ui-formwerk.git",
@@ -23,7 +23,8 @@
     }
   },
   "dependencies": {
-    "@nuxt/kit": "^4.2.2"
+    "@nuxt/kit": "^4.2.2",
+    "@vueuse/core": "^14.1.0"
   },
   "devDependencies": {
     "@nuxt/devtools": "^3.1.1",
@@ -37,13 +38,14 @@
     "oxfmt": "^0.20.0",
     "oxlint": "^1.35.0",
     "oxlint-tsgolint": "^0.10.0",
+    "prettier": "^3.7.4",
     "typescript": "~5.9.3",
     "vitest": "^4.0.16",
     "vue-tsc": "^3.2.1"
   },
   "peerDependencies": {
-    "@nuxt/ui": "^4.0.0",
-    "@formwerk/core": "^0.14.4"
+    "@formwerk/core": "^0.14.4",
+    "@nuxt/ui": "^4.0.0"
   },
   "scripts": {
     "dev": "pnpm dev:prepare && nuxi dev playground",
@@ -51,8 +53,8 @@
     "dev:prepare": "nuxt-module-build build --stub && nuxt-module-build prepare && nuxi prepare playground",
     "lint": "oxlint --type-aware",
     "lint:fix": "oxlint --fix --type-aware",
-    "format": "oxfmt --write",
-    "format:check": "oxfmt --check",
+    "format": "prettier --write .",
+    "format:check": "prettier --check .",
     "release": "pnpm lint && pnpm test && pnpm prepack && changelogen --release && pnpm publish && git push --follow-tags",
     "test": "vitest run",
     "test:watch": "vitest watch",