open-index/open-npm huggingface dataset:
npm package: @goldencomm/alpine-plugin-imask
Description: Install the plugin from npm:
Latest version: 1.0.1

# @goldencomm/alpine-plugin-imask

## Installation

Install the plugin from npm:

```bash
npm install @goldencomm/alpine-plugin-imask
```

Import it into your bundle alongside Alpine, and register it with `Alpine.plugin()`:

```js
import Alpine from "alpinejs";
import imask from "@goldencomm/alpine-plugin-imask";

Alpine.plugin(imask);

Alpine.start();
```

## Usage

Basic usage:

```html
<input
  type="text"
  x-imask="{ mask: '200-000-0000', definitions: { '2': /[2-9]/ } }"
/>
```

The `$imask` "magic" gives you access to all of the methods and properties on the [IMask instance](https://imask.js.org/api/modules/imask.html).

```html
<input
  type="text"
  x-imask="{ mask: '200-000-0000', definitions: { '2': /[2-9]/ } }"
  x-init="$imask.on('complete', () => { console.log('complete', $imask.unmaskedValue) })"
  x-on:input="console.log('input', $imask.unmaskedValue)"
/>
```
npm package: @goldencomm/alpine-plugin-zod
Description: Install the plugin from npm:
Latest version: 2.0.0

# @goldencomm/alpine-plugin-zod

## Installation

Install the plugin from npm:

```bash
npm install @goldencomm/alpine-plugin-zod
```

Import it into your bundle alongside Alpine, and register it with `Alpine.plugin()`:

```js
import Alpine from "alpinejs";
import zod from "@goldencomm/alpine-plugin-zod";

Alpine.plugin(zod);

Alpine.start();
```

## Usage

The plugin adds `$zod` "magic", which gives you access to all of the methods and properties on the [Zod object](https://zod.dev/).

Basic usage:

```html
<form
  x-data="{
    schema: $zod.object({
      name: $zod.string().min(1),
    }),
    errors: {},
    handleSubmit(e) {
      const data = Object.fromEntries(new FormData(e.target));
      const validation = this.schema.safeParse(data);

      if (!validation.success) {
        this.errors = validation.error.format();
        return;
      }

      // ...do something
    }
  }"
  x-on:submit.prevent="handleSubmit"
>
  <div>
    <label for="name">Name</label>
    <input
      id="name"
      type="text"
      name="name"
      aria-errormessage="error-name"
      x-bind:aria-invalid="'name' in errors"
    />
    <div id="error-name" role="alert" aria-live="polite">
      <template x-if="'name' in errors">
        <template x-for="error in errors.name._errors">
          <p x-text="error"></p>
        </template>
      </template>
    </div>
  </div>
  <button>Submit</button>
</form>
```