src/components/EditGroupModalBody.vue - dev - vdele/app

<script setup lang="ts">
import { ref } from 'vue';
import type { IGroup } from '@/libs/types';

const { uid } = defineProps({
    uid: {
        type: String,
        required: true,
    },
    name: {
        type: String,
        required: true,
    },
});

const emit = defineEmits(['cancel', 'save']);

const state = ref<IGroup>({
    uid: uid,
    name: ''
});

const saveHandler = () => {
    const group: IGroup = { uid: state.value.uid, name: state.value.name };
    emit('save', { store: 'groups', record: group});
};

const cancelHandler = () => {
    emit('cancel');
};
</script>
<template>
    <div class="d-flex flex-column gap-2">
        <div>
            <div><b>UID:</b> <code>{{ uid }}</code></div>
            <div><b>Имя:</b> {{ name }} <code>{{ state.name ? '=> ' + state.name : '' }}</code></div>
            <div><input placeholder="Введите новое имя группы..." type="text" style="max-width: 400px;" :class="['form-control', 'border-' + ( state.name.length === 0 || state.name.length >= 2 ? 'success' : 'danger')]" v-model="state.name"></div>
        </div>
        <div class="d-flex gap-2">
            <button type="button" class="btn btn-success" :disabled="!(state.name.length >= 2)" @click="saveHandler">Сохранить</button>
            <button type="button" class="btn btn-secondary" @click="cancelHandler">Отменить</button>
        </div>
    </div>
</template>