Dialog

Плагін діалогу являє собою велику кількість численних можливостей для отримання конкретного рішення або списку дій. Діалог може інформувати користувача, або вимагати якихось конкретних дій для прийняття (або множинних рішень).

Підключення

Vue

<div @click="$openDialog({title: 'Greetings', html: 'Hello world!'})">Open dialog</div>

Component API

Content

Name	Description	Type
title	Назва модального вікна.	String
component	Компонент якщо потрібен для відображення за допогою () => import(...).	Boolean
componentName	Глобальне ім'я компонента.	String
props	Пропси до компонента.	Boolean
message	Текст-декоратор нижче title	String
optionsType	Визначає, чи вставляти в діалог компоненту чекбоксу чи радіо з опціями. Доступнв значення: radio, checkbox	String
options	Масив для обраного компоненту з опціями. Те, як правильно передавати опції можна продивитися в	Boolean
prompt	Тип діалогового вікна-підсказки. Опції: text, number	String
alert	Тип діалогового вікна-підсказки. З цим пропсом замість дефолтних кнопок Відмінити, Зберегти буде кнопка Ок. Цей тип діалогу доречний, коли, наприклад, потрібно вивести якесь інформаційне повідомлення/попередження користувачеві	Boolean

Style

Name	Description	Type
canсel	Пропс, який відповідає за показ хрестику закриття діалогу у верхньому правому краї. За замовчуванням true, якщо поставити false, то хрестик пропаде	Boolean

Slots

Name	Description
default	Слот без імені. Якщо його задати. то він стане єдиним вмістом діалогу, а інші слоти з іменами будуть ігноруватися.
header	Слот хедеру з назвою header.
content	Слот хедеру з назвою content.
footer	Слот футеру з назвою footer.

Приклади

Базове використання

Нижче наведено базове використання плагіну: в першому прикладі та другому використано пропс html, куди можна напряму вставляти будь-який html; у першому прикладі окрім пропса html також використовужється пропс alert, який замінює дефолтні кнопки закриття та збереження на кнопку Ок. У третьому прикладі задано пропс prompt, що дозволяє нам не прописувати пропс html, нижче буде більше прикладів даного пропсу, також використовується проас message, що є текстом під назвою ділогу. Усі діалоги мають пропс title, що є назвою вспливаючого вікна.

  <template>
    <div class="flex gap-5">
      <VsButton @click="openAlert">ALERT</VsButton>
      <VsButton @click="openConfirm">CONFIRM</VsButton>
      <VsButton @click="openPrompt">PROMPT</VsButton>
    </div>
  </template>
  <script>
    export default {
      methods: {
        openAlert() {
          this.$openDialog({
            title: 'ALERT',
            html: 'Не вдалося зберегти зміни😔',
            alert: true,
          })
        },
        openConfirm() {
          this.$openDialog({
            title: 'CONFIRM',
            html: 'Зміни були успішно внесені.',
            confirm: true,
          })
        },
        openPrompt() {
          this.$openDialog({
            title: 'PROMPT',
            message: 'Введіть ПІБ',
            prompt: 'text',
          })
        },
      },
    };
  </script>

component

Крім простої вставки html, в діалог можна задати готовий компонент (в документації приклад не вийде показати, тому що потрібен імпорт з самого проекту компоненти. Для вставки компоненту потрібно вказати імпорт (властивість component) відносно поточного проекту та ім'я компоненту (його глобальна назва - властиивість componentName). Крім цього, можна задати цьому компоненту доступні йому пропси через властивість props

Details

Vue

<template>
  <VsButton class="ml-3" @click="openModal"> component </VsButton>
</template>
<script>
  export default {
    methods: {
      openModal() {
        this.$openDialog({
          title: "Enter a phone number",
          componentName: "VsButton",
          component: () => import("@/components/form/vs-form-text.vue"),
          message: "What is your phone number?",
          props: { type: "tel", clearable: true },
        });
      },
    },
  };
</script>

options, optionsType

Для зручності, аби не задавати самостійно компонент, де потрібно вибрати варіант/варіанти із списку доступних опцій, можна відразу прописати пропс options. По замовчуванню будуть радіокнопки, якщо потрібно явно прописати пропс optionsType та задати йому checkbox.

  <template>
    <div class="flex gap-5">
      <VsButton @click="openModalRadio">Prompt radio</VsButton>
      <VsButton @click="openModalCheckbox">Prompt checkbox</VsButton>
    </div>
  </template>
  <script>
    export default {
      methods: {
        openModalRadio() {
          this.$openDialog({
            title: 'Радіокнопки',
            message: 'Приклад використання опцій радіокнопки',
            options: [
              { id: 'Option 1', text: 'option 1' },
              { id: 'Option 2', text: 'option 2' },
            ],
          })
        },
        openModalCheckbox() {
          this.$openDialog({
            title: 'Чекбокси',
            message: 'Приклад використання опцій чекбоксу',
            optionsType: 'checkbox',
            options: [
              { label: 'Option 1', value: 'option 1' },
              { label: 'Option 2', value: 'option 2' },
            ],
          
          })
        },
      },
    };
  </script>

prompt

Ще одним способом задання компоненту без його імпорту є пропс prompt, де наразі доступно два види задання компоненту: text та number.

  <template>
    <div class="flex gap-5">
      <VsButton @click="openText">Text</VsButton>
      <VsButton @click="openNumber">Number</VsButton>
    </div>
  </template>
  <script>
    export default {
      methods: {
        openText() {
          this.$openDialog({
            title: 'Особисті дані',
            message: 'Введіть номер телефону',
            prompt: 'text',
            props: { inputType: 'tel', clearable: true },
          })
        },
        openNumber() {
          this.$openDialog({
            title: 'Вік',
            message: 'Введіть Ваш вік',
            prompt: 'number',
            props: { min: 10, max: 100 },
          })
        },
      },
    };
  </script>

cancel

cancel - пропс, що ховає хрестик у верхньому правому краї. За замовчуванням true, якщо поставити false, то хрестик пропаде.

  <template>
    <div class="flex gap-5">
      <VsButton @click="openText">Open dialog</VsButton>
    </div>
  </template>
  <script>
    export default {
      methods: {
        openText() {
          this.$openDialog({
            title: 'Діалог без хрестика',
            html: 'Хрестик схований у цьому діалоговому вікні',
            cancel: false,
          })
        },
      },
    };
  </script>

persistent

persistent - пропс, що відповідає за закриття діалогового вікна прикліці поза його межами. Якщо встановити persistent: true, користувач не зможе закрити діалогове вікно, якщо клацне поза ним.

  <template>
    <div class="flex gap-5">
      <VsButton @click="openText">Open dialog</VsButton>
    </div>
  </template>
  <script>
    export default {
      methods: {
        openText() {
          this.$openDialog({
            title: 'Діалог',
            html: 'Це діалоге вікно закриється при кліці поза його межами',
            persistent: false,
          })
        },
      },
    };
  </script>