@maz-ui/mcp 5.0.0-beta.5 → 5.0.0-beta.51

package/docs/src/composables/use-form-validator.md

@@ -1,6 +1,6 @@
 ---
 title: useFormValidator
-description: Vue composables for form validation with Valibot - useFormValidator and useFormField provide a flexible and typed approach to handle form validation in your Vue applications.
+description: Vue composables for form validation with any Standard Schema library (Valibot, Zod, ArkType...) - useFormValidator and useFormField provide a flexible and typed approach to handle form validation in your Vue applications.
 ---
 
 # {{ $frontmatter.title }}
@@ -9,7 +9,7 @@ description: Vue composables for form validation with Valibot - useFormValidator
 
 ## Introduction
 
-`useFormValidator` and `useFormField` are two Vue composables that work together to provide powerful form validation using [Valibot](https://valibot.dev/guides/introduction/).
+`useFormValidator` and `useFormField` are two Vue composables that work together to provide powerful form validation. They are **validation library agnostic**: any library implementing [Standard Schema](https://standardschema.dev) works out of the box, like [Valibot](https://valibot.dev), [Zod](https://zod.dev) or [ArkType](https://arktype.io). See [Validation Libraries](#validation-libraries).
 
 - **useFormValidator**: Initializes form validation for your entire form. Use it in your form's parent component.
 - **useFormField**: Manages individual field validation states. Use it when you need fine-grained control over a field or when fields are in child components.
@@ -23,6 +23,24 @@ description: Vue composables for form validation with Valibot - useFormValidator
 
 ## Quick Start
 
+Install the validation library of your choice (Valibot is used in most examples of this page):
+
+::: code-group
+
+```bash [valibot]
+pnpm add valibot
+```
+
+```bash [zod]
+pnpm add zod
+```
+
+```bash [arktype]
+pnpm add arktype
+```
+
+:::
+
 Here's the simplest form you can create with `useFormValidator`:
 
 <ComponentDemo>
@@ -104,6 +122,186 @@ const onSubmit = handleSubmit((data) => {
   </template>
 </ComponentDemo>
 
+## Validation Libraries
+
+`useFormValidator` relies on [Standard Schema](https://standardschema.dev), a common interface shared by the main validation libraries. Maz-UI does not ship any validation library: install the one you prefer and pass its schemas. Valibot, Zod and ArkType are declared as optional peer dependencies of `maz-ui`, so your package manager warns you if the installed version is not supported.
+
+| Library | Supported versions |
+|---------|--------------------|
+| [Valibot](https://valibot.dev) | `>=1.0.0 <2.0.0` |
+| [Zod](https://zod.dev) | `>=3.24.0 <5.0.0` (v3 and v4) |
+| [ArkType](https://arktype.io) | `>=2.0.0 <3.0.0` |
+| [Others](https://standardschema.dev/#what-schema-libraries-implement-the-spec) | Any library implementing Standard Schema V1 |
+
+The `schema` option is always a **plain object** where each key is a field name and each value is a schema of your library. Do not wrap it with `object()` / `z.object()`.
+
+### Same form, different libraries
+
+::: code-group
+
+```ts [valibot]
+import { useFormValidator } from 'maz-ui/composables'
+import { email, minLength, nonEmpty, pipe, string } from 'valibot'
+
+const { model, errorMessages, handleSubmit } = useFormValidator({
+  schema: {
+    email: pipe(string(), nonEmpty('Email is required'), email('Invalid email')),
+    password: pipe(string(), minLength(8, 'Min 8 characters')),
+  },
+})
+```
+
+```ts [zod]
+import { useFormValidator } from 'maz-ui/composables'
+import { z } from 'zod'
+
+const { model, errorMessages, handleSubmit } = useFormValidator({
+  schema: {
+    email: z.string().min(1, 'Email is required').pipe(z.email('Invalid email')),
+    password: z.string().min(8, 'Min 8 characters'),
+  },
+})
+```
+
+```ts [arktype]
+import { type } from 'arktype'
+import { useFormValidator } from 'maz-ui/composables'
+
+const { model, errorMessages, handleSubmit } = useFormValidator({
+  schema: {
+    email: type('string.email'),
+    password: type('string >= 8'),
+  },
+})
+```
+
+:::
+
+### Live example with Zod
+
+<ComponentDemo>
+  <form class="maz:flex maz:flex-col maz:gap-4" @submit="onSubmitZod">
+    <MazInput
+      v-model="zodModel.username"
+      label="Username"
+      :hint="zodErrors.username"
+      :error="!!zodErrors.username"
+      :success="zodStates.username.valid"
+    />
+    <MazInput
+      v-model="zodModel.age"
+      label="Age"
+      type="number"
+      :hint="zodErrors.age"
+      :error="!!zodErrors.age"
+      :success="zodStates.age.valid"
+    />
+    <MazBtn type="submit" :loading="zodSubmitting">
+      Submit
+    </MazBtn>
+  </form>
+
+  <template #code>
+
+```vue
+<script lang="ts" setup>
+import { useFormValidator } from 'maz-ui/composables'
+import { z } from 'zod'
+
+const schema = {
+  username: z.string().min(1, 'Username is required').min(3, 'Min 3 characters'),
+  age: z.number({ error: 'Age is required' }).min(18, 'Min 18').max(100, 'Max 100'),
+}
+
+const {
+  model,
+  errorMessages,
+  fieldsStates,
+  isSubmitting,
+  handleSubmit,
+} = useFormValidator({ schema })
+
+const onSubmit = handleSubmit((data) => {
+  // data is typed as { username: string, age: number }
+  console.log('Form submitted:', data)
+})
+</script>
+
+<template>
+  <form @submit="onSubmit">
+    <MazInput
+      v-model="model.username"
+      label="Username"
+      :hint="errorMessages.username"
+      :error="!!errorMessages.username"
+      :success="fieldsStates.username.valid"
+    />
+    <MazInput
+      v-model="model.age"
+      label="Age"
+      type="number"
+      :hint="errorMessages.age"
+      :error="!!errorMessages.age"
+      :success="fieldsStates.age.valid"
+    />
+    <MazBtn type="submit" :loading="isSubmitting">
+      Submit
+    </MazBtn>
+  </form>
+</template>
+```
+
+  </template>
+</ComponentDemo>
+
+### Mixing libraries
+
+Each field is validated by its own schema, so you can mix libraries in the same form (useful during a progressive migration from one library to another):
+
+```ts
+import { useFormValidator } from 'maz-ui/composables'
+import { email, pipe, string } from 'valibot'
+import { z } from 'zod'
+
+const { model } = useFormValidator({
+  schema: {
+    email: pipe(string(), email('Invalid email')),
+    age: z.number().min(18, 'Min 18'),
+  },
+})
+```
+
+### Custom schema
+
+You can also write your own validator by implementing the `StandardSchemaV1` interface (exported by `maz-ui/composables`). `validate` can be synchronous or return a `Promise`:
+
+```ts
+import type { StandardSchemaV1 } from 'maz-ui/composables'
+import { useFormValidator } from 'maz-ui/composables'
+
+const frenchZipCode: StandardSchemaV1<string, string> = {
+  '~standard': {
+    version: 1,
+    vendor: 'my-app',
+    validate: value =>
+      typeof value === 'string' && /^\d{5}$/.test(value)
+        ? { value }
+        : { issues: [{ message: 'Invalid zip code' }] },
+  },
+}
+
+const { model } = useFormValidator({
+  schema: { zipCode: frenchZipCode },
+})
+```
+
+### Good to know
+
+- **Empty values**: `undefined` and `null` field values are validated as an empty string (`''`). To make a field required, use a length rule (`nonEmpty()` with Valibot, `.min(1)` with Zod). An optional field with a format rule (email, URL...) has to accept the empty string explicitly, for example `z.email().or(z.literal(''))` with Zod or `union([literal(''), pipe(string(), email())])` with Valibot.
+- **Error messages**: `errorMessages` contains the message of the first issue of each field, whatever the library.
+- **Issues type**: `errors` and `fieldsStates[field].errors` are typed as `ValidationIssues`, the Standard Schema issue shape (`message` and `path`). At runtime, they are the native issues of your library, so you can cast them to access library specific properties (for example `BaseIssue<unknown>` from Valibot or `z.core.$ZodIssue` from Zod).
+- **Type inference**: the `model` type (input) and the `handleSubmit` payload type (output, after transformations) are inferred from the schemas whatever the library.
+
 ## Understanding Form State
 
 `useFormValidator` returns several reactive values to help you manage your form:
@@ -151,7 +349,7 @@ Each field in `fieldsStates` contains:
         v-model="stateModel.age"
         label="Age (18-100)"
         type="number"
-        :hint="stateErrors.age"s
+        :hint="stateErrors.age"
         :error="!!stateErrors.age"
         :success="stateFields.age.valid"
       />
@@ -365,7 +563,7 @@ Requires `useFormField` with `ref` option or `validationEvents`.
       :success="eagerEmailValid"
       :class="{ 'has-error-eager': eagerEmailHasError }"
     />
-    <MazBtn type="submit" :loading="eagerSubmitting">Submit</MazBtn>
+    <MazBtn type="submit" :loading="eagerSubmitting" :disabled="!eagerIsValid">Submit</MazBtn>
   </form>
 
   <template #code>
@@ -381,7 +579,7 @@ const schema = {
   email: pipe(string(), nonEmpty('Required'), email('Invalid email')),
 }
 
-const { isSubmitting, handleSubmit } = useFormValidator({
+const { isSubmitting, handleSubmit, isValid } = useFormValidator({
   schema,
   options: {
     mode: 'eager',
@@ -430,6 +628,8 @@ const {
       :error="emailHasError"
       :success="emailValid"
     />
+
+    <MazBtn type="submit" :loading="isSubmitting" :disabled="!isValid">Submit</MazBtn>
   </form>
 </template>
 ```
@@ -614,6 +814,8 @@ const { value: name, hasError, errorMessage, isValid } = useFormField<string>('n
 
 Pass a template ref to `useFormField`. It will automatically detect interactive elements and attach blur listeners.
 
+The `ref` option is **reactive**: if the field is rendered conditionally (e.g. with `v-if`), the blur listeners are attached automatically as soon as the element appears in the DOM, and removed when it is unmounted. You don't need to handle anything special.
+
 ```vue
 <script setup>
 import { useFormField } from 'maz-ui/composables'
@@ -635,6 +837,41 @@ const { value, errorMessage, hasError } = useFormField<string>('email', {
 </template>
 ```
 
+Because it is reactive, the same code works even when the input is wrapped in a `v-if`:
+
+```vue
+<script setup>
+import { useFormField } from 'maz-ui/composables'
+import { useTemplateRef, ref } from 'vue'
+
+const isVisible = ref(false)
+
+const { value, errorMessage, hasError } = useFormField<string>('email', {
+  ref: useTemplateRef('emailRef'),
+  formIdentifier: 'my-form',
+})
+</script>
+
+<template>
+  <MazInput
+    v-if="isVisible"
+    ref="emailRef"
+    v-model="value"
+    :hint="errorMessage"
+    :error="hasError"
+  />
+</template>
+```
+
+You can also pass a raw `HTMLElement` directly. In that case it won't be reactive, so the element must already exist in the DOM:
+
+```ts
+const { value } = useFormField<string>('email', {
+  ref: document.querySelector('input'),
+  formIdentifier: 'my-form',
+})
+```
+
 #### Option 2: Using `validationEvents`
 
 If your component emits a `blur` event, you can use `v-bind` with `validationEvents`.
@@ -660,7 +897,7 @@ const { value, errorMessage, hasError, validationEvents } = useFormField<string>
 
 ## TypeScript Type Inference
 
-The form model is automatically typed based on your schema:
+The form model is automatically typed based on your schema, whatever the validation library:
 
 ```ts
 const schema = {
@@ -706,7 +943,23 @@ const { value: email } = useFormField<string>('email', {
 
 ## Async Validation
 
-Use Valibot's `pipeAsync` and `checkAsync` for async validations like checking username availability:
+Async validations (like checking username availability) are supported by every library: Valibot's `pipeAsync` and `checkAsync`, Zod's async `refine`, etc. The example below uses Valibot, here is the Zod equivalent of the schema:
+
+```ts
+import { z } from 'zod'
+
+const schema = {
+  username: z
+    .string()
+    .min(1, 'Username is required')
+    .min(3, 'Min 3 characters')
+    .refine(async (value) => {
+      // Simulate API call
+      await new Promise(resolve => setTimeout(resolve, 2000))
+      return value !== 'taken'
+    }, 'Username is already taken'),
+}
+```
 
 <ComponentDemo>
   <div class="maz:mb-4">
@@ -1026,7 +1279,7 @@ If your custom component isn't detected for blur events, add `data-interactive`:
 
 ```ts
 useFormValidator<TSchema>({
-  schema: TSchema,                                    // Valibot validation schema (required)
+  schema: TSchema,                                    // Object of Standard Schema field schemas: Valibot, Zod, ArkType... (required)
   model?: Ref<Model>,                                 // External model ref (optional)
   defaultValues?: DeepPartial<Model>,                 // Initial values (optional)
   options?: {
@@ -1074,7 +1327,7 @@ useFormField<FieldType>(
   options?: {
     defaultValue?: FieldType,                         // Default value for this field
     mode?: 'lazy' | 'aggressive' | 'eager' | 'blur' | 'progressive', // Override form mode
-    ref?: Ref<HTMLElement | ComponentInstance>,       // Template ref for blur detection
+    ref?: Ref<HTMLElement | ComponentInstance> | HTMLElement, // Reactive template ref (v-if friendly) or raw element
     formIdentifier?: string | symbol,                 // Must match useFormValidator's identifier
   }
 )
@@ -1101,6 +1354,14 @@ useFormField<FieldType>(
 ### Types
 
 ```ts
+// Standard Schema issue (https://standardschema.dev)
+interface ValidationIssue {
+  readonly message: string
+  readonly path?: ReadonlyArray<PropertyKey | { readonly key: PropertyKey }>
+}
+
+type ValidationIssues = ValidationIssue[]
+
 interface FormValidatorOptions<Model> {
   mode?: 'eager' | 'lazy' | 'aggressive' | 'blur' | 'progressive'
   throttledFields?: Partial<Record<keyof Model, number | true>>
@@ -1113,7 +1374,7 @@ interface FormValidatorOptions<Model> {
 interface FormFieldOptions<FieldType> {
   defaultValue?: FieldType
   mode?: 'eager' | 'lazy' | 'aggressive' | 'blur' | 'progressive'
-  ref?: Ref<HTMLElement | ComponentInstance>
+  ref?: Ref<HTMLElement | ComponentInstance> | HTMLElement
   formIdentifier?: string | symbol
 }
 
@@ -1166,14 +1427,13 @@ const { value, validationEvents } = useFormField<string>('name')
 // Then: v-bind="validationEvents" on your input
 ```
 
-### Element Not Found Warning
+### Conditionally Rendered Fields (`v-if`)
 
-**Problem**: `No element found for ref in field 'name'`
+The `ref` option is reactive, so a field wrapped in `v-if` works out of the box: blur listeners are attached as soon as the element is rendered and removed when it is unmounted.
 
-**Solutions**:
-1. Ensure the ref is bound to an HTML element or Vue component
-2. Make sure the component has a `$el` property
-3. For custom components, add `data-interactive` attribute
+If blur validation still doesn't trigger:
+1. Ensure the `ref` is bound to an HTML element or a Vue component exposing `$el`
+2. For custom components, add the `data-interactive` attribute
 
 ### Mismatched Form Identifiers
 
@@ -1214,9 +1474,29 @@ import {
   pipeAsync,
   checkAsync,
 } from 'valibot'
+import { z } from 'zod'
 
 const toast = useToast()
 
+// Zod Demo
+const zodSchema = {
+  username: z.string().min(1, 'Username is required').min(3, 'Min 3 characters'),
+  age: z.number({ error: 'Age is required' }).min(18, 'Min 18').max(100, 'Max 100'),
+}
+
+const {
+  model: zodModel,
+  errorMessages: zodErrors,
+  fieldsStates: zodStates,
+  isSubmitting: zodSubmitting,
+  handleSubmit: handleZod,
+} = useFormValidator({ schema: zodSchema })
+
+const onSubmitZod = handleZod(async (data) => {
+  await sleep(1000)
+  toast.success(`Welcome ${data.username} (${data.age})!`, { position: 'top' })
+})
+
 // Quick Start Demo
 const quickStartSchema = {
   email: pipe(string(), nonEmpty('Email is required'), email('Invalid email')),
@@ -1310,6 +1590,7 @@ const eagerSchema = {
 const {
   isSubmitting: eagerSubmitting,
   handleSubmit: handleEager,
+  isValid: eagerIsValid,
 } = useFormValidator({
   schema: eagerSchema,
   options: { mode: 'eager', scrollToError: '.has-error-eager', identifier: 'form-eager' },

package/docs/src/composables/use-pull-to-refresh.md

@@ -0,0 +1,79 @@
+---
+title: usePullToRefresh
+description: usePullToRefresh is a headless Vue composable for the pull to refresh gesture on the window or any scroll container.
+---
+
+# {{ $frontmatter.title }}
+
+{{ $frontmatter.description }}
+
+## Introduction
+
+`usePullToRefresh` tracks the pull to refresh gesture and gives you its state (distance, progress, ready, refreshing) to build your own indicator. It powers [MazPullToRefresh](./../components/maz-pull-to-refresh.md): use the component for a ready-made indicator, the composable when you need full control over the rendering.
+
+The pull only starts when the target is scrolled to the top, follows a rubber band beyond the threshold, ignores horizontal and multi-touch gestures, and prevents the native bounce while pulling.
+
+## Basic usage
+
+```vue
+<script lang="ts" setup>
+import { usePullToRefresh } from 'maz-ui/composables'
+import { useTemplateRef } from 'vue'
+
+const scroller = useTemplateRef<HTMLElement>('scroller')
+
+const { distance, progress, isReady, isRefreshing } = usePullToRefresh({
+  target: scroller,
+  onRefresh: () => fetchData(),
+})
+</script>
+
+<template>
+  <div ref="scroller" class="maz:h-screen maz:overflow-y-auto">
+    <div class="maz:flex maz:items-end maz:justify-center maz:overflow-hidden" :style="{ height: `${distance}px` }">
+      <span v-if="isRefreshing">Refreshing…</span>
+      <span v-else-if="isReady">Release to refresh</span>
+      <span v-else :style="{ opacity: progress }">Pull to refresh</span>
+    </div>
+
+    <p>Content</p>
+  </div>
+</template>
+```
+
+Without `target`, the gesture is tracked on the window.
+
+## Options
+
+| Option        | Type                                         | Default           | Description                                                                          |
+| ------------- | -------------------------------------------- | ----------------- | ------------------------------------------------------------------------------------ |
+| `onRefresh`   | `() => unknown`                              | -                 | Called on release past the threshold, or by `refresh()`                              |
+| `target`      | `MaybeRefOrGetter<HTMLElement \| Window \| null>` | `window`          | Scroll container receiving the gesture                                               |
+| `threshold`   | `MaybeRefOrGetter<number>`                   | `80`              | Pull distance (px, after resistance) needed to trigger a refresh                     |
+| `maxDistance` | `MaybeRefOrGetter<number>`                   | `threshold * 1.6` | Upper bound of the rubber band                                                       |
+| `resistance`  | `MaybeRefOrGetter<number>`                   | `0.5`             | Ratio between the finger movement and the pull distance                              |
+| `minDuration` | `MaybeRefOrGetter<number>`                   | `400`             | Minimum duration (ms) of the refreshing state                                        |
+| `haptic`      | `MaybeRefOrGetter<boolean>`                  | `true`            | Vibrate briefly when the threshold is reached                                        |
+| `disabled`    | `MaybeRefOrGetter<boolean>`                  | `false`           | Disable the gesture                                                                  |
+| `onError`     | `(error: unknown) => void`                   | -                 | Called when `onRefresh` throws or rejects (the error is also exposed in `error`)     |
+
+## Return
+
+| Property       | Type                        | Description                                                  |
+| -------------- | --------------------------- | ------------------------------------------------------------ |
+| `distance`     | `Readonly<Ref<number>>`     | Current pull distance in px                                  |
+| `progress`     | `ComputedRef<number>`       | Progress towards the threshold, from 0 to 1                  |
+| `isPulling`    | `Readonly<Ref<boolean>>`    | The user is pulling                                          |
+| `isReady`      | `ComputedRef<boolean>`      | Releasing now triggers a refresh                             |
+| `isRefreshing` | `Readonly<Ref<boolean>>`    | `onRefresh` is running                                       |
+| `error`        | `Readonly<Ref<unknown>>`    | Error of the last refresh, reset on each refresh             |
+| `refresh`      | `() => Promise<void>`       | Run the refresh programmatically (for a keyboard-usable button) |
+| `start`        | `() => void`                | Attach the listeners (done automatically on mount)           |
+| `stop`         | `() => void`                | Detach the listeners (done automatically on unmount)         |
+
+## Notes
+
+- Inside a component, listeners are attached on mount and removed when the scope is disposed. Outside of a component, they are attached right away.
+- When `target` changes (for example a ref resolved later), the listeners move to the new element.
+- `refresh()` never throws: errors go to `error` and `onError`. Calling it while a refresh is running does nothing.
+- SSR safe: nothing touches the DOM before mount.

package/docs/src/composables/use-swipe.md

@@ -12,11 +12,19 @@ description: useSwipe is a Vue composable that simplifies the management of "swi
 `useSwipe` allows you to detect and react to swiping movements on an HTML element. It provides you with various information about the swipe movement, such as the direction, distance, start, and end coordinates.
 You can use this information to implement specific interactions in your application, such as scrolling a carousel, opening a side menu, etc.
 
+It is built on top of [Pointer Events](https://developer.mozilla.org/en-US/docs/Web/API/Pointer_events), so it works with **touch, mouse and pen** out of the box.
+
+::: tip
+For a real-time drag gesture (follow the pointer, snap back, drag-to-dismiss…) rather than discrete directional detection, use [useDrag](./use-drag.md).
+:::
+
 ## Key Features
 
 - Detects swipes in all 4 directions (left, right, up, down)
+- Works with touch, mouse and pen (Pointer Events)
 - Provides key information about the swipe movement (start/end coordinates, horizontal/vertical distance)
 - Allows you to configure callbacks for each swipe direction
+- Restrict the gesture to specific pointer types
 - Possibility to customize the swipe detection threshold
 - Automatically handles the addition and removal of event listeners
 - Can be used with any HTML element
@@ -27,7 +35,7 @@ You can use this information to implement specific interactions in your applicat
   <p>
     Swipe in any direction<br>
     <span class="maz:text-xs maz:text-muted">
-      (You should use a real device or a mobile simulator to test the swipe functionality)
+      (works with touch, mouse and pen)
     </span>
     <br><br>
     Last swipe direction: {{lastSwipeDirection || 'None'}}
@@ -74,7 +82,7 @@ onUnmounted(() => {
     <p>
       Swipe in any direction<br>
       <span class="maz:text-sm maz:text-muted">
-        (You should use a real device or a mobile simulator to test the swipe functionality)
+        (works with touch, mouse and pen)
       </span>
       <br><br>
       Last swipe direction: {{ lastSwipeDirection || 'None' }}
@@ -153,35 +161,41 @@ interface UseSwipeOptions {
    */
   element: HTMLElement | string | Ref<HTMLElement>
   /** Callback executed when a left swipe is detected. */
-  onLeft?: (event: TouchEvent) => void
+  onLeft?: (event: PointerEvent) => void
   /** Callback executed when a right swipe is detected. */
-  onRight?: (event: TouchEvent) => void
+  onRight?: (event: PointerEvent) => void
   /** Callback executed when an up swipe is detected. */
-  onUp?: (event: TouchEvent) => void
+  onUp?: (event: PointerEvent) => void
   /** Callback executed when a down swipe is detected. */
-  onDown?: (event: TouchEvent) => void
+  onDown?: (event: PointerEvent) => void
   /**
    * The minimum distance the swipe must travel to be considered valid.
    * @default 50
    */
   threshold?: number
   /**
-   * Whether to prevent the default behavior of the touchmove event.
+   * Pointer types that can trigger the swipe.
+   * @default ['mouse', 'touch', 'pen']
+   */
+  pointerTypes?: ('mouse' | 'touch' | 'pen')[]
+  /**
+   * Whether to prevent the default behavior of the pointer move event
+   * (the move listener becomes non-passive when enabled).
    * @default false
    */
-  preventDefaultOnTouchMove?: boolean
+  preventDefaultOnMove?: boolean
   /**
    * Whether to prevent the default behavior of the mousewheel event.
    * @default false
    */
   preventDefaultOnMouseWheel?: boolean
   /**
-   * Whether to trigger the swipe event immediately on touchstart/mousedown.
+   * Whether to start listening immediately on instantiation.
    * @default false
    */
   immediate?: boolean
   /**
-   * Whether to trigger the swipe event only on touchend/mouseup.
+   * Whether to trigger the swipe event only on pointer up.
    * @default false
    */
   triggerOnEnd?: boolean
@@ -220,4 +234,5 @@ interface UseSwipeReturn {
 - If you use the composable in a Vue component, make sure to call it in the `setup()` and clean up the event listeners in the `onUnmounted()`.
 - The composable automatically handles the addition and removal of event listeners based on the provided options.
 - You can customize the swipe detection threshold by modifying the `threshold` option.
-- If you want to prevent the default behavior of touchmove or mousewheel events, you can set the `preventDefaultOnTouchMove` and `preventDefaultOnMouseWheel` options, respectively.
+- If you want to prevent the default behavior of pointer move or mousewheel events, you can set the `preventDefaultOnMove` and `preventDefaultOnMouseWheel` options, respectively.
+- Use the `pointerTypes` option to restrict the gesture to specific input types (e.g. `['touch']` for touch-only).