Generate Form for quasar
Install npm or yarn
npm i quasar-app-components
yarn add quasar-app-componentsIn your vue3 applications import component
<script setup lang="ts">
import { QInput } from 'quasar'
import { z } from 'zod'
import { AppForm, AppFormSchemaField } from 'quasar-app-components'
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>| 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 |
error |
Returns field errors |
| Slot | |
|---|---|
top |
Top slot for extra content |
bottom |
Bottom slot for extra content |
[scope] |
Overwrite schema component |
| 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 |
Easy to use quasar q-select with filtering, add new value, checkbox list.
| Props | |
|---|---|
exactFilterMatch |
Filter exact |
transformNewValue |
Transform new-value label & value |
<script setup lang="ts">
import { ref } from 'vue'
import { AppSelect } from 'quasar-app-components'
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>Uses quasar dialog plugin.
Open Modal
import { Dialog } from 'quasar'
import { useAppModal } from 'quasar-app-components'
useAppModal(Dialog, {
// Qdialog props
persistent: true,
// Modal title
title: 'Edit example',
// Fetch data when open modal, and are provided when injecting modal in slot component
dependencies: fetchDataArray,
// Modal slot component content
slot: {
component: ExampleContentComponent,
componentProps: {
// Slot component props
exampleProp: true,
},
},
})// slot component
import { appModalInjectionKey } from 'quasar-app-components'
const props = defineProps<{ exampleProp: boolean }>()
const modal = inject(appModalInjectionKey) as AppModalProvider
// injected props
modal.pending // is submit pending
// data fetched in array from dependencies
modal.dependencyData
// onSubmit promise fn callback (sets pending prop and closes modal by itself)
modal.onSubmit(() => {
return new Promise()
})
// close dialog (optional payload)
modal.onDialogOK()
// close dialog
modal.onDialogCancel()Recursive list. Open nested items in new list menu
<script setup lang="ts">
import { ref } from 'vue'
import { QMenu } from 'quasar'
import { AppList, AppListItemProps } from 'quasar-app-components'
const listProps: QListProps = {
dense: false,
}
const items = ref<AppListItemProps[]>([
{
// AppListitem props
label: 'Settings',
icon: 'mdi-an-icon',
color: 'primary',
visible: true,
componentProps: {
// QItem props
disable: false,
},
items: [
{
label: 'More settings',
clickFn: () => {
// example open useAppModal()
},
},
],
},
])
</script>
<template>
<q-btn icon="mdi-dots-vertical">
<q-menu square>
<AppList :component="QMenu" :items="items" :props="listProps" />
</q-menu>
</q-btn>
<!-- or -->
<q-btn-dropdown label="Åtgärder">
<AppList :items="items" />
</q-btn-dropdown>
</template>
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent