Modal

The Modal component, often referred to as a Dialog or Popover, is a layer above the page that engages users with content requiring their interaction

<VsButton @click="toggleDialog">Magic Button</VsButton>
<VsModal v-model:visible="isOpen" title="The Enchanted Dialog">
  <div class="p-4">
    <p class="text-pink-500">Why did the developer go broke?</p>
    <p class="text-purple-500">Because he used up all his cache! 😄</p>
  </div>
</VsModal>

Footer

buttonText - button text, @done - event on button click

<VsModal v-model:visible="isOpen" title="The Enchanted Dialog"
   buttonText='Save' 
   @done="notify( {title:'Save', message: 'Save successfully'})">
    <MyComponent/>
</VsModal>

Function

<script setup>
import { modal } from '@opengis/core';
modal({     
    title: "Діалог 1", 
    template: "This is the default content",
});
</script>

Plugin

<VsButton @click="$modal({title: 'Діалог 1',template: 'Content'})">
  Modal
</VsButton>

Interface

export interface ModalProps {
  title: string;
  template?: string;
  visible: boolean;
  size?: 'small' | 'medium' | 'lg';
  closeClickBack?: boolean;
}