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

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

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

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

const inputHandler = async () => {
    if(state.value.name.length >= 2){
        state.value.uid = await getGeneratedUid( state.value.name ,false);
    }else{
        state.value.uid = '';
    }
};

const createHandler = () => {
    const newGroup: IGroup = {uid: state.value.uid, name: state.value.name}; 
    emit('create', {store: 'groups', record: newGroup});
};

const cancelHandler = () => {
    emit('cancel');
};
</script>
<template>
    <div class="d-flex flex-column gap-2">
        <div>
            <div><b>UID:</b> <code>{{ state.uid }}</code></div>
            <div><b>Имя:</b> <code>{{ 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" @input="inputHandler"></div>
        </div>
        <div class="d-flex gap-2">
            <button type="button" class="btn btn-success" :disabled="!(state.name.length >= 2)" @click="createHandler">Создать</button>
            <button type="button" class="btn btn-secondary" @click="cancelHandler">Отменить</button>
        </div>
    </div>
</template>