69 lines
1.3 KiB
Vue
69 lines
1.3 KiB
Vue
<script setup>
|
|
import {isRequestPending} from "src/composables/form/props";
|
|
import {computed, useSlots} from "vue";
|
|
import {useQuasar} from "quasar";
|
|
|
|
const props = defineProps({
|
|
modelValue: {
|
|
type: Object,
|
|
},
|
|
resetAfterSubmit: {
|
|
type: Boolean,
|
|
required: false,
|
|
default: false
|
|
},
|
|
isRequestPending,
|
|
saveButton: {
|
|
type: [Object, Boolean],
|
|
required: false,
|
|
default: () => ({
|
|
label: "Save",
|
|
icon: "save",
|
|
align: "left"
|
|
})
|
|
}
|
|
});
|
|
|
|
const emits = defineEmits(["save"]);
|
|
const saveForm = () => {
|
|
emits("save", props.modelValue);
|
|
|
|
if (props.resetAfterSubmit) {
|
|
console.error("Not implemented")
|
|
}
|
|
}
|
|
|
|
const $q = useQuasar();
|
|
const fullwidthBtn = computed(() => $q.screen.width <= $q.screen.sizes.md);
|
|
|
|
</script>
|
|
|
|
<template>
|
|
<q-form @submit.prevent="saveForm" ref="form">
|
|
<slot name="default"/>
|
|
|
|
<slot name="saveButton" />
|
|
|
|
<q-btn
|
|
color="primary"
|
|
type="submit"
|
|
:class="{'q-my-lg': true, 'btn--fullwidth': fullwidthBtn}"
|
|
v-if="saveButton"
|
|
:icon="props.saveButton.icon"
|
|
:loading="props.isRequestPending"
|
|
>
|
|
{{ props.saveButton.label }}
|
|
|
|
<template v-slot:loading>
|
|
Loading...
|
|
</template>
|
|
</q-btn>
|
|
</q-form>
|
|
</template>
|
|
|
|
<style>
|
|
.btn--fullwidth {
|
|
width: 100%;
|
|
}
|
|
</style>
|