# vue-app-form

> Generate Form for quasar

Latest version **0.0.26** (published 2023-09-22) · 0 weekly downloads

## Install

```sh
npm install vue-app-form
pnpm add vue-app-form
yarn add vue-app-form
bun add vue-app-form
```

## Health

**Score 25/100 (F)** — status: abandoned.

Positive: has types; esm support; no vulnerabilities.

Warnings: low downloads; pre 1.0.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.0.26 |
| Published | 2023-09-22 |
| First published | 2023-09-03 |
| Weekly downloads | 0 |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Dependencies | 5 |
| Unpacked size | 380.8 KB |
| Known vulnerabilities | 0 (+1 in 1 direct dependencies) |
| Install scripts | no |
| GitHub stars | 0 |
| Author | Rasmus Hallström |
| Maintainers | walraz |
| Keywords | vue, vue3, component, library, quasar, zod, form, validation |

## Links

- npm: https://www.npmjs.com/package/vue-app-form
- Repository: https://github.com/Walraz/vue-app-form
- Homepage: https://github.com/Walraz/vue-app-form#readme
- Issues: https://github.com/Walraz/vue-app-form/issues
- npm.io page: https://npm.io/package/vue-app-form

## Dependencies (5)

- [vue](https://npm.io/package/vue.md) ^3.3.4
- [zod](https://npm.io/package/zod.md) ^3.22.2
- [quasar](https://npm.io/package/quasar.md) ^2.12.5
- [lodash.get](https://npm.io/package/lodash.get.md) ^4.4.2
- [lodash.set](https://npm.io/package/lodash.set.md) ^4.3.2

## Alternatives

- [mobx-react](https://npm.io/package/mobx-react.md) — 2.8M weekly downloads
- [rc-tree](https://npm.io/package/rc-tree.md) — 2.6M weekly downloads
- [@react-oauth/google](https://npm.io/package/@react-oauth/google.md) — 1.3M weekly downloads
- [@wagmi/connectors](https://npm.io/package/@wagmi/connectors.md) — 877.0K weekly downloads
- [vee-validate](https://npm.io/package/vee-validate.md) — 836.4K weekly downloads

## Recent versions

- 0.0.26 (latest) — 2023-09-22
- 0.0.25 — 2023-09-11
- 0.0.24 — 2023-09-11
- 0.0.23 — 2023-09-09
- 0.0.22 — 2023-09-09
- 0.0.21 — 2023-09-08
- 0.0.20 — 2023-09-04
- 0.0.19 — 2023-09-03
- 0.0.18 — 2023-09-03
- 0.0.17 — 2023-09-03
- 0.0.16 — 2023-09-03
- 0.0.15 — 2023-09-03
- 0.0.14 — 2023-09-03
- 0.0.13 — 2023-09-03
- 0.0.12 — 2023-09-03
- … 12 more at https://npm.io/package/vue-app-form/versions

## README

# AppForm

Generate Form for quasar

Install npm or yarn

```sh
npm i vue-app-form
yarn add vue-app-form
```

## Documentation

In your vue3 applications import component

```vue
<script setup lang="ts">
import { QInput } from 'quasar'
import { z } from 'zod'
import { AppForm, AppFormSchemaField } from 'vue-app-form'

const modelSchema = z.object({
  name: z.string().noempty(),
})

const schema: AppFormSchemaField[] = [
  {
    scope: 'name',
    component: QInput,
    defaultValue: '',
    componentProps: {
      label: 'Namn',
      // component props i.e from quasar
      square: true,
    },
  },
]
</script>

<template>
  <app-form :schema="schema" :model-schema="modelSchema" />
</template>
```

### AppForm

| Prop           |                                  | Default | Required |
| -------------- | -------------------------------- | ------- | -------- |
| `schema`       | See AppFormSchemaField interface |         | Yes      |
| `modelSchema`  | A ZodType Object                 |         | Yes      |
| `colGutter`    | Gutter of columns                | 'sm'    |          |
| `modelValue`   | Bind formData                    |         |          |
| `readonly`     | Make all fields readonly         | false   |          |
| `disable`      | Make all fields disabled         | false   |          |
| `loading`      | Bind loading prop buttons        | false   |          |
| `fieldWrapper` | Wrapper around all fields        | 'div'   |          |

| Event    |                                     |
| -------- | ----------------------------------- |
| `submit` | Returns validated formData if valid |
| `reset`  | Reset formData to defaultValues     |

| Slot      |                               |
| --------- | ----------------------------- |
| `top`     | Top slot for extra content    |
| `bottom`  | Bottom slot for extra content |
| `[scope]` | Overwrite schema component    |

### AppFormSchemaField interface

| Prop             |                                                                    | Default     | Required |
| ---------------- | ------------------------------------------------------------------ | ----------- | -------- |
| `scope`          | Object path i.e 'obj.value'                                        |             | Yes      |
| `cols`           | Span number of cols (max 12)                                       | 'cols-auto' |          |
| `component`      | Field component                                                    |             | Yes      |
| `column`         | Column position in row                                             | 1           |          |
| `transform`      | Transform value function before setting to modelValue              |             |          |
| `defaultValue`   | Default value of field if not specified in AppForm modelValue prop |             | Yes      |
| `componentProps` | Props to add to component                                          |             | Yes      |

### AppSelect

Easy to use quasar q-select with filtering, add new value, checkbox list.

```vue
<script setup lang="ts">
import { ref } from 'vue'
import { AppSelect } from 'vue-app-form'

const model = ref([])
const options = [
   {
      value: 1,
      label: 'Test',
      // optional
      caption: 'Caption'
      disable: true
   },
   {
      value: 2,
      label: 'Test 2',
   }
]
</script>

<template>
  <app-select v-model="model" multiple :options="options" new-value />
</template>
```

---
_Source: https://npm.io/package/vue-app-form · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._