Диалоговые окна

<script setup lang="ts">
import { useTemplateRef, ref } from "vue";
import { ComponentExposed } from "vue-component-type-helpers";
import { ButtonBusy, BaseDialog, type Errors } from "luna";

const dialog = useTemplateRef<ComponentExposed<typeof BaseDialog>>('dialog');
const busy = ref(false);
const errors = ref<Errors>({});
const value = ref<string|null>(null);

const showDialog = () => {
  dialog.value.show();
}

const hide = () => {
  dialog.value.hide();
}

const submit = () => {
  if (!value.value) {
    errors.value['name'] = 'Название обязательно';
    return;
  }

  busy.value = true;
  setTimeout(() => {
    busy.value = false;
    hide();
  }, 1000);
}
</script>
<template>
  <BaseDialog :busy="busy" class="medium" ref="dialog">
    <template v-slot:header>Заголовок</template>
    <template v-slot:default>
      <form class="pad" @submit.prevent="submit">
        <div class="field-group">
          <label for="name" class="required">Название</label>
          <input type="text" id="name" v-model="value">
          <div class="error" v-if="errors['name']">{{ errors['name'] }}</div>
        </div>
      </form>
    </template>
    <template v-slot:footer>
      <div class="footer-info">
        <div class="field-group">
          <label>
            <input type="checkbox">
            Создать еще
          </label>
        </div>
      </div>
      <div>
        <button type="button" :disabled="busy"
                               @click="hide">Отмена</button>
        <ButtonBusy :busy="busy" :disabled="busy"
                     @click="submit" class="primary">Отправить</ButtonBusy>
      </div>
    </template>
  </BaseDialog>
  <button type="button" @click="showDialog">Открыть окно</button>
</template>

Информация

Вы можете сделать окно больше используя классы medium и large. При необходимости вы можете задать произвольный размер через style="width: 1000px"