quasar-app-components

AppForm

Generate Form for quasar

Install npm or yarn

npm i quasar-app-components
yarn add quasar-app-components

Documentation

In 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>

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
error	Returns field errors

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.

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>

AppModal

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()

AppList & AppListItem

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>