Awesome Quasar Form

Install

npm install awesome-quasar-form
# or
yarn add awesome-quasar-form

Connect to quasar

File : ~/boot/awesome.js

import { boot } from 'quasar/wrappers';
import { install as AwesomeQasarForm } from 'awesome-quasar-form';

export default boot(({ app }) => {
  app.use(AwesomeQasarForm);
});

/* OR
import { boot } from 'quasar/wrappers';
import AwesomeQasarForm, { AwesomeCodeEditor } from 'awesome-quasar-form';

export default boot(({ app }) => {
  app.component(AwesomeQasarForm.name, AwesomeQasarForm);
  app.component(AwesomeCodeEditor.name, AwesomeCodeEditor);
});
*/

Props

| Props | Type | Required | Default | |------------|:-------:|:--------:|:--------:| | modelValue | Object | true | {} | | isValid | Boolean | | | | structure | Array |

structure

| KEY | TYPe | REQUIRED | EXPLANE | |-|:-:|:-:|:-:| | type | String | + | field type [string, textarea, number, integer, percent, boolean, select, color, lookup, code, json, array] | | key | String | + | field variable name | | default | type, Function | - | field name | | label | String | - | field name in form | | props | Object | - | component properties |

string (q-input)

{
    type: "string",
    key: "title",
    props: {
        placeholder: "Enter some title",
        autogrow: true
    }
}

// { title: "Some title" }

textarea (q-input)

{
    type: "textarea",
    key: "desc",
    props: {
        placeholder: "Enter some description",
        autogrow: true
    }
}
// { desc: "Some text" }

number (q-input)

{
    type: "number",
    key: "persent",
    default: 0.42,
    props: {
        min: 0,
        max: 1
    }
}
// { persent: 0.42 }

integer (q-input)

{
    type: "integer",
    key: "year",
    props: {
        min: 1980,
        max: 2042
    }
}
// { year: 1980 }

boolean (q-checkbox)

{
    type: "boolean",
    key: "checkbox",
    default: false
}
// { checkbox: false }

select (q-select)

{
    type: "select",
    key: "selected_number",
    props: {
        // options: ["1", "2"],
        options: [
            { _id: '1', name: "Foo" },
            { _id: '2', name: "Bar" }
        ],
        optionLabel: 'name', 
        optionValue: '_id'
    }
}
// { selected_number: "1" }

lookup (q-select)

{
    type: "lookup",
    key: "",
    props: {
        store: 'Users', // store module name
        optionLabel: '_id', 
        optionValue: '_id'
    }
}
// 

color (q-input)

{
    type: "color",
    key: ""
}

code (q-checkbox)

{
    type: "code",
    key: "code",
    props: {}
}

// { code: "() => { // js code }" }

json (awesome-code-editor)

{
    type: "json",
    key: "json_data",
    props: {}
}
// { json_data: '{ "foo": "bar" }' }

array (awesome-code-editor)

{
    type: "array",
    key: "names",
    props: {
        type: "string" // string | object
        // structure: [] // item structure (if type object)
    }
}
// { names: ['1', '2'] }

{
    type: "array",
    key: "names",
    props: {
        type: "object"
        structure: [
            { type: 'string', key: 'name' }
        ]
    }
}

// { names: [{ name: '1' }, { name: '2' }] }

Example

<template>
    <awesome-qusare-form
        v-model="data"
        :structure="structure"
    ></awesome-qusare-form>
</template>

<script>
import { ref } from 'vue';

export default {
    setup() {
        return {
            data: ref({}),
            structure: [
                {
                    key: "string", 
                    type: "string",

                    rules: [],
                    disable: false, 
                    props: { required: true } 
                },
                { key: "textarea", type: "textarea" },
                { key: "number", type: "number" },
                { key: "integer", type: "integer" },
                { key: "percent", type: "percent" },
                { key: "boolean", type: "boolean" },
                { key: "select", type: "select", options: ["1", "2", "3"] },
                { key: "color", type: "color" },
                { key: "code", type: "code" },
                { key: "json", type: "json" },
                {
                    key: "lookup",
                    type: "lookup",
                    store: "test",
                    optionLabel: "name",
                    optionValue: "id",
                },
            ]
        }
    }
}
</script>