open-index/open-npm huggingface dataset:
npm package: @mutinywallet/waila-wasm
Description: "What am I looking at?" A tool for decoding bitcoin-related strings.
Latest version: 0.5.0

# bitcoin-waila

"What am I looking at?" A tool for decoding bitcoin-related strings.

---

## What is this?

This is a tool for decoding bitcoin-related strings.
The goal is to be able to give it any string, and it will decode it for you while giving you all the relevant payment
information.

Currently supported:

- Bitcoin address
- BIP-21 URI
- Lightning invoice
- Lightning Offer
- Node Pubkey
- LNURL
- Lightning Address
- Payjoin URI
- RGB Invoice


## Examples

```js
// You need to initialize the wasm
// There's also an initSync() if you don't like async
const waila = await init();

const string =
  "bitcoin:BC1QYLH3U67J673H6Y6ALV70M0PL2YZ53TZHVXGG7U?amount=0.00001&label=sbddesign%3A%20For%20lunch%20Tuesday&message=For%20lunch%20Tuesday&lightning=LNBC10U1P3PJ257PP5YZTKWJCZ5FTL5LAXKAV23ZMZEKAW37ZK6KMV80PK4XAEV5QHTZ7QDPDWD3XGER9WD5KWM36YPRX7U3QD36KUCMGYP282ETNV3SHJCQZPGXQYZ5VQSP5USYC4LK9CHSFP53KVCNVQ456GANH60D89REYKDNGSMTJ6YW3NHVQ9QYYSSQJCEWM5CJWZ4A6RFJX77C490YCED6PEMK0UPKXHY89CMM7SCT66K8GNEANWYKZGDRWRFJE69H9U5U0W57RRCSYSAS7GADWMZXC8C6T0SPJAZUP6";

const params = new PaymentParams(string);

console.log(params.address);
console.log(params.invoice);
console.log(params.memo);
```
npm package: @mutium/hono
Description: Some extension methods for Hono Application.
Author: Mutium
Latest version: 0.2.1-preview.2

# @mutium/hono

Some extension methods for Hono Application.

## Introduction

Read the [API Reference 🧑‍💻](./docs/api-reference.md)

## Contributing

We welcome contributions to enhance the functionality and usability of this utility. Feel free to submit issues for bug reports or feature requests, and create pull requests to suggest improvements or fixes.

## License

This project is licensed under the MIT License - see the [LICENSE](./LICENSE) file for details.
npm package: @mutium/parameter
Description: Type-safe url parameter stringify.
Latest version: 0.1.1

 # @mutium/parameter

Transforms your object into a url query string.

```js
import { paramsStringify } from "@mutium/parameter";

paramsStringify({ key: "value" }, "?"); // ?key=value
```

## License

This project is licensed under the MIT License - see the [LICENSE](../../LICENSE) file for details.
npm package: @mutix/next-test-server
Description: ``` yarn add @mutix/next-test-server next-test-server -w ./web -p 3000 ./web/components/Universal/Input/__test__/ ```
Author: mutix
Latest version: 1.0.2

# next-test-server

```
yarn add @mutix/next-test-server
next-test-server -w ./web -p 3000 ./web/components/Universal/Input/__test__/
```
npm package: @mutoe/koam-logger
Description: Logger middleware for Koam
Author: mutoe
Latest version: 2.3.1

# Koam-logger

Implement a simple Koa logger.

THIS FRAMEWORK HAVE NOT BEEN STRICTLY TESTED, PLEASE DO NOT USE IT IN PRODUCTION !
许多功能未经严格测试，请勿用于生产目的！

## Usage

```ts
// entrypoint
import Koa, { logger } from '@mutoe/koam'

const app = new Koa()

app.use(logger({
  moduleName: 'My App',
  drivers: [
    {
      type: 'console',
    },
    {
      type: 'file',
      dir: '/tmp/my-app',
      filename: 'my-app.log',
      errorFilename: 'my-app-error.log'
    },
  ]
}))

// in anywhere
app.use(ctx => {
  ctx.log('Hello, Koam!') // -> echo '[LOG] [My App] Hello, Koam! {"method":"GET",status:404, ...}'
  ctx.status = 200
  ctx.log.error('Hello, Koam!') // -> echo '[ERROR] [My App] Hello, Koam! {"method":"GET",status:200,...}'
})

// And you can view the file in `/tmp/my-app/my-app.log`
// 2023-08-06T20:28:56.221+08:00 [LOG] [My App] Hello, Koam! {"method":"GET","url":"/","status":404}
// 2023-08-06T20:28:56.221+08:00 [ERROR] [My App] Hello, Koam! {"method":"GET","url":"/","status":200}
```

## Feature

1. Native STDOUT/STDERR output in the console
   ```ts
   import { Logger } from '@mutoe/koam'
   const logger = new Logger({
     drivers: [
       { type: 'console' },
     ]
   })
   ```

2. Write logs to files for logger platform like ELK or Grafana Loki
   ```ts
   import { Logger } from '@mutoe/koam'
   const logger = new Logger({
     drivers: [
       {
         type: 'file',
         dir: '/tmp/my-app',
         // optional, default is `output.log`
         filename: 'my-app.log',
         // optional, default is `output.log`
         errorFilename: 'my-app-error.log',
       },
     ]
   })
   ```

3. Timestamp when the log is written
   ```ts
   import { Logger } from '@mutoe/koam'
   const logger = new Logger({
     // your custom timestamp format, default is ISO-8601 format
     datetimeFormat: 'YYYY-MM-DDTHH:mm:ss.SSSZ',
   })
   ```
   It will auto set when using file driver

4. Use it as standalone logger utils
   ```ts
   import { Logger } from '@mutoe/koam-logger'
   const logger = new Logger()

   logger.debug('Hello')
    ```

5. If you're using logger as Koa middleware, it will automatically log the request or response information (by `customRequestLogger` option in `logger` middleware)
   ```ts
   import { logger } from '@mutoe/koam-logger'
   const app = new Koa()
   app.use(logger({
     customRequestLogger: ctx => ({
       method: ctx.method,
       url: ctx.url,
       traceId: ctx.traceId,
       status: ctx.status,
       responseTime: ctx.responseTime,
     })
   }))
   ```

   **NOTICE**: It should be noted that the content of the context depends on when you call the log method.
   For example, if you haven't got a response when you call the log, then the response won't fetch the content.
npm package: @mutoe/koam-router
Description: A lightweight router for Koam.
Author: mutoe
Latest version: 2.4.0

# Koam-router

Implement a simple Koa-like router to create a web application.

THIS FRAMEWORK HAVE NOT BEEN STRICTLY TESTED, PLEASE DO NOT USE IT IN PRODUCTION !
许多功能未经严格测试，请勿用于生产目的！

## Usage

```ts
import Koa from '@mutoe/koam-core'
import Router from '@mutoe/koam-router'

const app = new Koa()
const router = new Router()

app.use(router.routes())
```

## Roadmap

- [x] `new Route([options])`
  - [x] `options.prefix`
  - [ ] `options.exclusive`
  - [ ] `options.host`
- [x] `router.<get|post|put|patch|delete|all>(path, ...middlewares)`
  - [x] Named routes
  - [ ] Match host
  - [x] Multiple middlewares
- Path matching (lightweight `path-to-regexp`)
  - [x] named match
  - [x] unnamed match
  - [x] custom pattern match
  - [x] modifiers
- [x] `context.params`
- [x] `router.routes()`
- Nested routes
  - [x] `router.use([path], ...middlewares)`
  - [x] `router.use([path], ...anotherRouter.routes())`
- [x] `router.prefix(path)`
- [x] `router.allowedMethods([options])`
  - [ ] `options.throw`
  - [ ] `options.notImplemented`
  - [ ] `options.methodNotAllowed`
- [x] `router.redirect(source, destination, [status])`
- [x] `router.route(name)`
- [x] `router.url(name, params, [options])`
  - [x] `router.url(name, ...paramStrings, [options])`
  - [x] `options.query`
- [x] static method `Router.url(path, params, [options])`
  - [x] `Router.url(path, ...paramStrings, [options])`
  - [x] `options.query`
- [x] `router.param(param, ...middlewares)`
npm package: @mutoe/stylelint-config
Description: stylelint + idiomatic-css = ❤️
Author: mutoe
Latest version: 2.1.0

# stylus/scss + stylelint-config-clean-order = ❤️

> Inspired by [@cedric-ruiu/stylelint-config](https://github.com/Cedric-ruiu/stylelint-config)

- Based on Stylelint v16
- Support lint Sass language (extend `stylelint-config-standard-scss`)
- Support lint HTML files (extend stylelint-config-html)
- Support lint Vue files (including Sass, extend stylelint-config-html)
- Support Tailwind rules
- Support UnoCSS rules
- Logical sorting properties (A reasonably derivative version based on `stylelint-config-clean-order`)
- Reasonable defaults, best practices, only one-line of config

> Requirements
> - Stylelint v16.0.0 and above

## Installation

```sh
npm install --save-dev stylelint @mutoe/stylelint-config

yarn add --dev stylelint @mutoe/stylelint-config

pnpm add --save-dev stylelint @mutoe/stylelint-config

bun add --dev stylelint @mutoe/stylelint-config
```

## Usage

Set your stylelint config to:

```json
{
  "extends": "@mutoe/stylelint-config"
}
```

You can easily [extend](https://github.com/stylelint/stylelint/blob/master/docs/user-guide/configure.md#extends) the config to your needs.
npm package: @mutoe/stylelint-config-preset-stylus
Description: stylus + stylelint + idiomatic-css = ❤️
Author: mutoe
Latest version: 1.0.0

# stylus stylelint + idiomatic-css = ❤️

Order your styles based on [idiomatic-css](https://github.com/necolas/idiomatic-css#declaration-order).

## Installation

```sh
npm install --save-dev @mutoe/stylelint-config-preset-stylus
```

## Usage

Set your stylelint config to:

```json
{
  "extends": "@mutoe/stylelint-config-preset-stylus"
}
```

You can easily [extend](https://github.com/stylelint/stylelint/blob/master/docs/user-guide/configure.md#extends) the config to your needs.

## [License](LICENSE)
npm package: @mutoe/unocss-preset
Description: unocss preset include flex, padding, margin rules
Author: mutoe
Latest version: 1.1.1

# @mutoe/unocss-preset

A UnoCSS preset that provides enhanced flex layout utilities and padding/margin utilities.

## Features

- Enhanced flex layout utilities with intuitive positioning
- Flexible padding and margin utilities with support for different directions
- Support for `!important` modifier
- Compatible with UnoCSS directives

## Installation

```bash
pnpm add -D @mutoe/unocss-preset
```

## Usage

Add the preset to your UnoCSS configuration:

```ts
import { defineConfig } from 'unocss'
import presetMutoe from '@mutoe/unocss-preset'

export default defineConfig({
  presets: [
    presetMutoe(),
  ],
})
```

## Utilities

### Flex Layout

The preset provides enhanced flex layout utilities with intuitive positioning:

```html
<!-- Basic flex container -->
<div class="flex-row"></div>
<div class="flex-col"></div>
<div class="flex-column"></div>

<!-- With reverse direction -->
<div class="flex-row-reverse"></div>
<div class="flex-column-reverse"></div>

<!-- With justify and align -->
<div class="flex-row-center"></div>
<div class="flex-column-start-end"></div>

<!-- With !important -->
<div class="flex-row-center-center!"></div>
```

#### Number Positioning System

```html
<!-- With number positioning (1-9) -->
<div class="flex-row-5"></div>
<div class="flex-column-7"></div>
```

The preset includes a number-based positioning system (1-9) for quick flex layout positioning:

```plain
Row Direction:     Column Direction:
============>
╔═══╦═══╦═══╗      ║  ╔═══╦═══╦═══╗
║ 1 ║ 4 ║ 7 ║      ║  ║ 1 ║ 2 ║ 3 ║
╠═══╬═══╬═══╣      ║  ╠═══╬═══╬═══╣
║ 2 ║ 5 ║ 8 ║      ║  ║ 4 ║ 5 ║ 6 ║
╠═══╬═══╬═══╣      ║  ╠═══╬═══╬═══╣
║ 3 ║ 6 ║ 9 ║      ║  ║ 7 ║ 8 ║ 9 ║
╚═══╩═══╩═══╝      V  ╚═══╩═══╩═══╝
```

Available justify/align values:

- `start`
- `center`
- `end`
- `stretch`
- `between`
- `around`
- `evenly`

### Padding & Margin

The preset provides padding and margin utilities with support for different directions:

```html
<!-- Two values (y-x) -->
<div class="p-1-2"></div>  <!-- padding: 0.25rem 0.75rem -->
<div class="m-1-2"></div>  <!-- margin: 0.25rem 0.75rem -->

<!-- Three values (t-x-b) -->
<div class="p-1-2-3"></div>  <!-- padding: 0.25rem 0.75rem 0.75rem -->
<div class="m-1-2-3"></div>  <!-- margin: 0.25rem 0.75rem 0.75rem -->

<!-- Four values (t-r-b-l) -->
<div class="p-1-2-3-4"></div>  <!-- padding: 0.25rem 0.75rem 0.75rem 1rem -->
<div class="m-1-2-3-4"></div>  <!-- margin: 0.25rem 0.75rem 0.75rem 1rem -->

<!-- With !important -->
<div class="p-1-2-3-4!"></div>
<div class="m-1-2-3-4!"></div>
```

Note: All values are divided by 4 to convert to rem units (e.g., 1 = 0.25rem, 2 = 0.5rem, etc.).

## License

MIT
npm package: @mutoe/webhooks
Description: Webhooks cli
Author: mutoe
Latest version: 1.0.0

# Webhooks

![npm (scoped)](https://img.shields.io/npm/v/@mutoe/webhooks?style=flat-square)

[Chinese version](/README_cn.md)

A webhook can do anything you want

> Currently under development, support Github webhook API script generation

## Usage

```bash
npm i -g @mutoe/webhooks
# or
pnpm i -g @mutoe/webhooks

webhooks

# It will then generate a listener.js and pull.sh in your current directory, 
# and then you can edit pull.sh to pull your repository, for example

# The following line will switch to `/path/to/your/repo` and then 
# execute `git pull`
#
# sed -i "$ a\cd /path/to/your/repo\ngit pull" pull.sh

# Next, run

node listener
# or
pm2 start --name webhooks listener.js

# Awesome tool!
```
npm package: @muts/lfs
Description: list file structure
Author: devcui
Latest version: 1.1.0

# hwo to use

`npx @muts/lfs dir`

then output like this

```
│   │   ├── uri-js@4.4.1
│   │   │   └── node_modules
│   │   │       ├── punycode
│   │   │       └── uri-js
│   │   │           ├── dist
│   │   │           │   ├── es5
│   │   │           │   │   ├── uri.all.d.ts
│   │   │           │   │   ├── uri.all.js
│   │   │           │   │   ├── uri.all.js.map
│   │   │           │   │   ├── uri.all.min.d.ts
│   │   │           │   │   ├── uri.all.min.js
│   │   │           │   │   └── uri.all.min.js.map
│   │   │           │   └── esnext
│   │   │           │       ├── index.d.ts
│   │   │           │       ├── index.js
│   │   │           │       ├── index.js.map
│   │   │           │       ├── regexps-iri.d.ts
│   │   │           │       ├── regexps-iri.js
│   │   │           │       ├── regexps-iri.js.map
│   │   │           │       ├── regexps-uri.d.ts
│   │   │           │       ├── regexps-uri.js
│   │   │           │       ├── regexps-uri.js.map
│   │   │           │       ├── schemes
│   │   │           │       │   ├── http.d.ts
│   │   │           │       │   ├── http.js
│   │   │           │       │   ├── http.js.map
```
npm package: @mutsuntsai/esbuild-plugin-vue
Description: an esbuild plugin for vue 3.x SFC
Author: zhangyu, mutsuntsai
Latest version: 0.1.6

# @mutsuntsai/esbuild-plugin-vue

building vue 3.x SFC files with esbuild, forked from [wellfrog16/esbuild-plugin-vue-next](https://github.com/wellfrog16/esbuild-plugin-vue-next).

# Quickstart

- install

```bash
npm install -D @mutsuntsai/esbuild-plugin-vue
// or
yarn add -D @mutsuntsai/esbuild-plugin-vue
// or
pnpm add -D @mutsuntsai/esbuild-plugin-vue
```

- use plugin

```js
// build.js
const { build } = require('esbuild')
const pluginVue = require('@mutsuntsai/esbuild-plugin-vue')

build({
    entryPoints: ['index.js'], // your entry file
    bundle: true,
    outfile: 'bundle.js',
    plugins: [pluginVue()]
})
```

- run esbuild

```
node build.js
```

## Options

```js
export interface Options {
    // template
    templateOptions?: Pick<SFCTemplateCompileOptions, 'compiler' | 'preprocessLang' | 'preprocessOptions' | 'compilerOptions' | 'transformAssetUrls'>

    // script
    scriptOptions?: Pick<SFCScriptCompileOptions, 'babelParserPlugins'>

    // style
    styleOptions?: Pick<SFCAsyncStyleCompileOptions, 'modulesOptions' | 'preprocessLang' | 'preprocessOptions' | 'postcssOptions' | 'postcssPlugins'>
}

```
npm package: @mutsuntsai/rsbuild-plugin-vue-ssg
Description: Generate Vue SSG contents and inject those into HTML for Rsbuild. Batteries included (html-minifier-terser and jsdom).
Author: Mu-Tsun Tsai
Latest version: 1.0.4

# Rsbuild-Plugin-Vue-SSG

Generate Vue SSG contents and inject those into HTML for Rsbuild.
Batteries included (html-minifier-terser and jsdom).

## Installation

```bash
pnpm add -D @mutsuntsai/rsbuild-plugin-vue-ssg
```

Peer dependencies include: `@rsbuild/core`, `@rsbuild/plugin-vue`, `vue` (v3).

## Usage

```ts
import { defineConfig } from "@rsbuild/core";
import { pluginVue } from "@rsbuild/plugin-vue";
import { pluginVueSSG } from "@mutsuntsai/rsbuild-plugin-vue-ssg";

export default defineConfig({
	source: {
		entry: {
			index: "./src/index.ts",
		},
	},
	html: {
		// The HTML template should contain the string
		// "__VUE_SSG__" as the place for injection
		template: "./src/index.html",
	},
	plugins: [
		pluginVue(),
		pluginVueSSG({
			entry: {
				// The entry name should match the source
				index: "./src/app.vue",
			},
			// Lookup the typing here for the rest of the options
		});
	],
});
```
npm package: @mutsuntsai/rsbuild-utils
Description: Helper functions for setting up custom chunks in [Rsbuild](https://rsbuild.dev/). Supports only [PNPM](https://pnpm.io/) for now.
Author: Mu-Tsun Tsai
Latest version: 1.0.1

# Rsbuild Utils

Helper functions for setting up custom chunks in [Rsbuild](https://rsbuild.dev/).
Supports only [PNPM](https://pnpm.io/) for now.

## Installation

```bash
pnpm add -D @mutsuntsai/rsbuild-utils
```

## Usage

```ts
/**
 * Create a test function such that it returns true if and only if
 * the module matches any of the given {@link RegExp}s.
 */
export declare function makeTest(...tests: RegExp[]): (m: unknown) => boolean;

/**
 * Based on the dependencies recorded in `pnpm-lock.yaml` file,
 * create a {@link RegExp} that covers all descendant packages of the given packages.
 *
 * Note that this function has a side-effect: it will not include
 * packages that were collected during previous calls of this function.
 */
export declare function createDescendantRegExp(...names: string[]): RegExp;
```
npm package: @mutsuntsai/stylistic
Description: Customized Stylistic config.
Author: Mu-Tsun Tsai
Latest version: 1.0.4
Deprecated: Use @mutsuntsai/eslint instead


# @mutsuntsai/stylistic

This is the [Stylistic](https://eslint.style/) rules used in [my](https://github.com/MuTsunTsai) projects.

## Usage

Requires ESLint v9. Add the following to eslint.config.mjs:

```js
import stylistic from "@mutsuntsai/stylistic";

export default [
	...stylistic,
];
```
npm package: @mutt/extension-json-patch
Description: A extension to Mutt Forms to allow a JSON Patch diff to be generated from populated form data vs inputted data
Author: Nick Snell
Latest version: 1.0.0

# Mutt Forms Plugin - JSON Patch extension

> A simple plugin to allow for JSON patch diff's to be generated
> from originally populated data vs user inputed data

Install:
`npm install mutt-forms-json-patch --save`

Usage:
``` javascript
import Mutt from 'mutt-forms'
import MuttJsonPatch from 'mutt-forms-json-patch'

Mutt.use(MuttJsonPatch)

let form = Mutt({}, {})

form.populate({
  name: 'Test'
})

// Some changes to the form...

let patch = form.getJSONPatch()
```
npm package: @mutt/forms
Description: HTML Forms with a squishy face.
Author: Nick Snell
Latest version: 2.5.0

<img src="https://raw.githubusercontent.com/mutt-forms/mutt-forms/master/docs/mutt.svg?sanitize=true" alt="Mutt" width="275">

# Mutt Forms

> A HTML Form generator & manager

<img src="https://travis-ci.org/mutt-forms/mutt-forms.svg?branch=master">

Mutt forms is a tool for creating HTML forms in Javascript
from JSON Schema definitions.

It can be used as a standalone tool or as part of a larger
project. Mutt is written in ES6 with a standalone version
being ES5 compatible - via Babel.

Mutt forms was developed as internal tool at [boughtbymany.com](https://boughtbymany.com) and is now available under the
MIT license. It is heavily influenced by [Django Forms](https://docs.djangoproject.com/en/1.10/topics/forms/)/
[WTForms](http://wtforms.readthedocs.io/en/latest/) as well as [AlpacaJS](http://www.alpacajs.org/) and has a familiar
API to these tools.


### Installation

The easiest way to get started with Mutt is to install via NPM:

`npm install @mutt/forms`


### Getting Started

```javascript

import Mutt from '@mutt/forms'

let form = new Mutt({
  type: 'object',
  required: ['name', 'email'],
  properties: {
    name: {
	  type: 'string'
	},
	email: {
	  type: 'string'
	}
  }
})

form.render(document.getElementById('form'))
```

#### Browser Support & Polyfills

Mutt should work in all modern browsers. By default babel-polyfill
is not included, but it should play nicely when included.

#### Development

All pull requests should be made against the `master` branch.

---

(c) Bought By Many 2020. Credit to Helena Long for the Mutt Logo :)
npm package: @mutt/widget-age
Description: Mutt Forms Widget - Age input
Author: Sam Bateman
Latest version: 2.1.2

# Mutt Forms Widget - Age
Mutt Form Vue widget to capture an age in years & months

## Requirements

Please ensure you install the peer dependencies which are defined in `package.json`.

### Select dropdown styling

This widget makes use of the [vue-select](https://github.com/sagalbot/vue-select) component.

No styling is included for this component, you will need to include it by either
including the CSS from the component:

```css
import 'vue-select/dist/vue-select.css';
```

or importing the SCSS:

```css
@import "vue-select/src/scss/vue-select.scss";
```

More details on styling the dropdown can be found in the [documentation for vue-select](https://vue-select.org/guide/css.html#scss-variables).

## Field Options
The age widget accepts the following options:

option | type | description | default
------ | ---- | ----------- | -------
`min` | ISO-8601 formatted String | The minimum date allowed | null
`max` | ISO-8601 formatted String | The maximum date allowed | null
`default` | Date or String | The default date to set | null
`dateFieldSeparator` | String | A character or string of characters that adds a span containing the character between the date field inputs
`attrs` | Object of Strings or Numbers  | The html attributes for the field wrapper e.g `data-*` | null

Please note here that min/max refer to the minimum & maximum dates returned by the widget rather than the age, therefore max should resolve to a later date value than min

## Emitted Events

When a valid entry of years & months is entered, the widget will emit the `ageValidated` event with the following object:
```
key: this.field.name,
value: this.field.value,
action: 'populated',
validated, // true if the validation rules pass
bubble: true,
```

### Complete Example

```
dob: {
  help:
    '<p>If you don’t know the exact age, please provide a considered estimate.</p>',
  label: null,
  max: 'P-4W',
  min: 'P-21Y',
  attrs: {
    data-qa-locator: 'pet-info-age-selector'
  },
  natural: {
    prefix: ' and you are ',
    suffix: ' old.',
    title: 'How old are you?',
    trigger: '',
  },
  serialize: 'date',
  widget: 'naturalage',
},
```
npm package: @mutt/widget-algolia
Description: Mutt Forms Widget - Algolia
Author: Nick Snell
Latest version: 0.0.1

# Mutt Forms Widget - Algolia

Mutt Forms Vue widget for Algolia lookups.


### Field Options
```
{
  "algolia": {
    "id": "<algolia id>",
    "key": "<algolia key>",
    "index": "<algolia index>"
  }
}
```

- `id, key` - algolia provided keys
- `index` - Search index ID


### i18n Support
The widget has i18n support via the (Vue i18n Plugin)[https://github.com/kazupon/vue-i18n]
or any other tools that expose a `$t` function to translate strings.
npm package: @mutt/widget-datetime
Description: Mutt Forms Widget - Date and Time Input
Author: Andy Flynn
Latest version: 1.8.0

# Mutt Forms Widget - Datetime
Mutt Forms Vue widget for date and time entry.

## Field Options
The datetime widget accepts the following options:

option | type | description | default
------ | ---- | ----------- | -------
`min` | ISO-8601 formatted String | The minimum date allowed | null
`max` | ISO-8601 formatted String | The maximum date allowed | null
`dateFormat` | String | The date fields and the order in which you wish them to appear | 'day-month-year'
`showTime` | Boolean | If true, will display hour, minute and seconds fields after the date fields | false
`default` | Date or String | The default date to set | null
`hideDay` | Boolean | Can be used to hide the day field - better to set dateFormat instead where possible | false
`dateFieldSeparator` | String | A character or string of characters that adds a span containing the character between the date field inputs

## Emitted events

When a valid date format is entered (i.e. a complete and existing date) the widget will emit the `dateValidated` event with the following object:
```
key: this.field.name,
value: this.field.value,
action: 'populated',
validated, // true if the date passes all other validation rules, e.g min/max
bubble: true,
```

## Complete Example

The following example sets the minumum date to Today minus 40 years and the maximum date to Today minus 4 weeks.
```
dob: {
  help:
    '<p>If you don’t know the exact date of birth, please provide a considered estimate.</p>',
  label: null,
  max: 'P-4W',
  min: 'P-40Y',
  natural: {
    prefix: ' and you were born on ',
    suffix: '.',
    title: 'What is your date of birth?',
    trigger: '',
  },
  serialize: 'date',
  widget: 'naturaldatetime',
  dateFieldSeparator: '/'
},
```

The following example sets the date format to year/month/day.
```
dob: {
  help:
    '<p>If you don’t know the exact date of birth, please provide a considered estimate.</p>',
  label: null,
  dateFormat: 'year-month-day'
  natural: {
    prefix: ' and you were born on ',
    suffix: '.',
    title: 'What is your date of birth?',
    trigger: '',
  },
  serialize: 'date',
  widget: 'naturaldatetime',
},
```
npm package: @mutt/widget-email
Description: Mutt Forms Widget - Email Input
Author: Andy Flynn
Latest version: 1.2.0

# Mutt Forms Widget - Email
Mutt Forms Vue widget for email entry. Allows auto-scaling of text so that entered text is always visible.

![GIF demonstrating the email scaling](https://user-images.githubusercontent.com/58692394/72525602-73d97800-385c-11ea-889b-3e9555cce27a.gif)

## Field Options
The email widget accepts two additional options:

option | type | description | default
------ | ---- | ----------- | -------
`autoScale` | boolean | when false will prevent input text from scaling | true
`minFontSize` | number | the minimium font size in px that the input text can scale to | 14

## Notes
When the `autoScale` option is set to false and `minFontSize` is also specified, the component will warn that `minFontSize` will be ignored.

## Complete Example

The following example limits the font scaling size so that the text will not scale below 16px
```
email: {
  natural: {
    prefix: 'My email address is ',
    suffix: '.',
    title: 'What is your email address?',
    trigger: '',
  },
  showLabel: false,
  widget: 'naturalemail',
  minFontSize: 16,
},
```

The following example prevents auto scaling of the text
```
email: {
  natural: {
    prefix: 'My email address is ',
    suffix: '.',
    title: 'What is your email address?',
    trigger: '',
  },
  showLabel: false,
  widget: 'naturalemail',
  autoScale: false,
},
```
npm package: @mutt/widget-financial
Description: Mutt Forms Widget - Financial number Input
Author: Andy Flynn
Latest version: 2.0.1

# Mutt Forms Widget - Financial
Mutt Forms Vue widget for entering a currency value

## Field Options
The financial widget accepts the following options:

option | type | description | default
------ | ---- | ----------- | -------
`min` | String | The minimum number allowed | '0'
`max` | String | The maximum number allowed | null
`step` | String | The default increment when using the up/down keys | '1'
`currencySymbol` | String | HTML encoded currency symbol | '\&pound;'
`currencyStart` | Boolean | When true the currency symbol is placed to the left of the input field. When false it is placed to the right | true

## Complete Example

The following example sets the min and max to 0 and 2500 respectively, the step to 10, the currency symbol to the Euro, and the currency position to the right of the input.

```
value: {
  label: null,
  max: '2500',
  min: '0',
  step: '10',
  natural: {
    allowZero: true,
    prefix: 'I paid €',
    suffix: '.',
    title: 'How much did you pay?',
    trigger: '',
  },
  currencySymbol: '&euro;',
  currencyStart: false,
  widget: 'naturalfinancial',
},
```
npm package: @mutt/widget-loqate
Description: Mutt Forms Widget - Loqate
Author: Nick Snell
Latest version: 0.1.1

# Mutt Forms Widget - Loqate

Mutt Forms Vue widget for Loqate lookups


### Field Options
```
{
  "loqate": {
    "key": "<loqate key>"
  }
}
```

- `key` - loqate API key

NOTE: legacy `pca` option is also supported.
npm package: @mutt/widget-personnummer
Description: Mutt Forms Widget - Swedish Personnummer Input
Author: Nick Snell
Latest version: 2.1.0

# Mutt Forms Widget - Personnummer

Mutt Forms Vue widget for Swedish Personnummer lookup.

It is designed to be integrated with `https://www.ratsit.se/`.

## Field Options

This `ssn` options accepts the following properties:


| Property             | Type     | Required | Default                    | Description                                                                                  |
|----------------------|----------|----------|----------------------------|----------------------------------------------------------------------------------------------|
| `host`               | String   | true     | null                       | Provider API host                                                                            |
| `username`           | String   | true     | null                       | Username for the provider API                                                                |
| `password`           | String   | true     | null                       | Password for the provider API                                                                |
| `template`           | String   | false    | `'{givenName} {lastName}'` | Template used to display a search result referencing object properties in the returned result|
| `requiredFieldPaths` | String[] | false    | null                       | An array of field paths to check for values in the returned search result                    |
| `minimumAge`         | Number   | false    | null                       | The minimum age in years                                                                     |

### Complete Example

```json
{
  "field_name": {
    "widget": "personnummer",
    "ssn": {
      "host": "https://example.com/ssn-lookup",
      "username": "username",
      "password": "password123",
      "template": "{ssn} - {givenName} {lastName}",
      "minimumAge": 18
    }
  }
}
```

## Field Events

- `ssnSelect`: Emitted when the value has been entered and the detail confirmed
- `ssnClear`: When the value is changed/cleared
- `toggleOverlay`: Natural language form support
- `ssnRequiredFieldsMissing`: When `requiredFieldPaths` are specified and are missing values

## i18n Support

The widget has i18n support via the [Vue i18n Plugin](https://github.com/kazupon/vue-i18n)
or any other tools that expose a `$t` function to translate strings.
npm package: @mutt/widgets-vue
Description: Mutt forms - VueJS integration
Author: Bought By Many
Latest version: 3.8.0

<img src="https://raw.githubusercontent.com/boughtbymany/mutt-forms-vue/master/docs/mutt-vue.svg?sanitize=true" alt="Mutt Vue" width="275">

# Mutt Forms Vue

> A VueJS plugin for Mutt Forms.

![Build Status](https://travis-ci.org/boughtbymany/mutt-forms-vue.svg?branch=master)

Mutt Forms Vue integrates [Mutt Forms](https://github.com/boughtbymany/mutt-forms) with
[VueJS](https://vuejs.org/) to allow for forms to be rendered using Vue.

Full documentation is available [here](https://nicksnell.gitbooks.io/mutt-forms-vue/).

### Installation

The easiest way to get started with Mutt Forms Vue is to install via Yarn:

`npm install mutt-forms-vue`

### Integrating with Vue

Mutt Forms Vue is a standard Vue plugin, in the simplest case it can be installed
like so:

``` javascript
import Vue from 'vue'
import MuttVue from 'mutt-forms-vue'

Vue.use(MuttVue)
```

##### Read more
* [Overview](docs/overview.md)
* [Usage](docs/usage.md)
* [Widgets](docs/widgets.md)
* [Events](docs/events.md)
* [Advanced Concepts](docs/advanced.md)
* [Github](https://github.com/boughtbymany/mutt-forms-vue)