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

AppFormSchemaField interface

AppSelect

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

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