recipes/vue3/src/components/model_editors/PropertyEditor.vue

<template>
    <model-editor-base
        :loading="loading"
        :dialog="dialog"
        @save="saveObject"
        @delete="deleteObject"
        @close="emit('close'); editingObjChanged = false"
        :is-update="isUpdate()"
        :is-changed="editingObjChanged"
        :model-class="modelClass"
        :object-name="editingObjName()"
    :editing-object="editingObj">
        <v-card-text>
            <v-form>
                <v-number-input :step="10" v-model="editingObj.propertyAmount" control-variant="stacked" :precision="2">
                    <template #append-inner v-if="editingObj.propertyType">
                        <v-chip class="me-4">{{ editingObj.propertyType.unit }}</v-chip>
                    </template>
                </v-number-input>
                <model-select :label="$t('Property')" v-model="editingObj.propertyType" model="PropertyType"></model-select>
            </v-form>
        </v-card-text>
    </model-editor-base>

</template>

<script setup lang="ts">

import {onMounted, PropType, watch} from "vue";
import {Property} from "@/openapi";

import ModelSelect from "@/components/inputs/ModelSelect.vue";

import ModelEditorBase from "@/components/model_editors/ModelEditorBase.vue";
import {useModelEditorFunctions} from "@/composables/useModelEditorFunctions";


const props = defineProps({
    item: {type: {} as PropType<Property>, required: false, default: null},
    itemId: {type: [Number, String], required: false, default: undefined},
    itemDefaults: {type: {} as PropType<Property>, required: false, default: {} as Property},
    dialog: {type: Boolean, default: false}
})

const emit = defineEmits(['create', 'save', 'delete', 'close', 'changedState'])
const {setupState, deleteObject, saveObject, isUpdate, editingObjName, loading, editingObj, editingObjChanged, modelClass} = useModelEditorFunctions<Property>('Property', emit)

/**
 * watch prop changes and re-initialize editor
 * required to embed editor directly into pages and be able to change item from the outside
 */
watch([() => props.item, () => props.itemId], () => {
    initializeEditor()
})

// object specific data (for selects/display)

onMounted(() => {
    initializeEditor()
})

/**
 * component specific state setup logic
 */
function initializeEditor(){
    setupState(props.item, props.itemId, {itemDefaults: props.itemDefaults})
}


</script>

<style scoped>

</style>