nuxt-ui-formwerk 0.1.3 → 0.1.4

package/README.md

@@ -31,8 +31,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 +47,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 +75,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 +142,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 +233,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.4",
   "builder": {
     "@nuxt/module-builder": "1.0.2",
     "unbuild": "unknown"

package/dist/module.mjs

@@ -10,7 +10,9 @@ const module$1 = defineNuxtModule({
     const resolver = createResolver(import.meta.url);
     const logger = useLogger("nuxt-ui-formwerk");
     if (!hasNuxtModule("@nuxt/ui")) {
-      logger.error("[nuxt-ui-formwerk] @nuxt/ui is required. Please install it");
+      logger.error(
+        "[nuxt-ui-formwerk] @nuxt/ui is required. Please install it"
+      );
     }
     addComponentsDir({
       path: resolver.resolve("./runtime/components"),

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 "@nuxt/ui/composables/useFormField";
+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.4",
   "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",