You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
77 lines
1.5 KiB
77 lines
1.5 KiB
<template>
|
|
<div>
|
|
<div class="field">
|
|
<div class="p-float-label">
|
|
<InputText
|
|
id="item_title"
|
|
v-model="v$.item.title.$model"
|
|
:class="{ 'p-invalid': v$.item.title.$invalid }"
|
|
/>
|
|
<label
|
|
v-t="'Title'"
|
|
for="item_title"
|
|
/>
|
|
</div>
|
|
<small
|
|
v-if="v$.item.title.$invalid || v$.item.title.$pending.$response"
|
|
v-t="v$.item.title.required.$message"
|
|
class="p-error"
|
|
/>
|
|
</div>
|
|
|
|
<slot />
|
|
|
|
<div class="text-right">
|
|
<Button
|
|
:disabled="v$.item.$invalid"
|
|
:label="t('Save')"
|
|
class="p-button-secondary"
|
|
icon="mdi mdi-content-save"
|
|
type="button"
|
|
@click="btnSaveOnClick"
|
|
/>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup>
|
|
import InputText from "primevue/inputtext"
|
|
import Button from "primevue/button"
|
|
import useVuelidate from "@vuelidate/core"
|
|
import { required } from "@vuelidate/validators"
|
|
import { useI18n } from "vue-i18n"
|
|
import { computed } from "vue"
|
|
|
|
const { t } = useI18n()
|
|
|
|
const props = defineProps({
|
|
modelValue: {
|
|
type: Object,
|
|
default: () => {},
|
|
},
|
|
})
|
|
|
|
const emit = defineEmits(["update:modelValue", "submit"])
|
|
|
|
const v$ = useVuelidate(
|
|
{
|
|
item: {
|
|
title: {
|
|
required,
|
|
},
|
|
parentResourceNodeId: {},
|
|
},
|
|
},
|
|
{
|
|
item: computed(() => props.modelValue),
|
|
},
|
|
)
|
|
|
|
function btnSaveOnClick() {
|
|
const item = { ...props.modelValue, ...v$.value.item.$model }
|
|
|
|
emit("update:modelValue", item)
|
|
|
|
emit("submit", item)
|
|
}
|
|
</script>
|
|
|