Modal

Modal is a component that dipslays a popup dialog.

Features:

• Modal
• Size
• Parts (header, body, footer)
• Transition
• Close on click outside

Usage

<script setup>
import { Modal, Button } from 'gurunkit';
import { ref } from 'vue';

const visible = ref(false);
</script>

<template>
  <Button @click="visible = true">Open Modal</Button>
  <Modal v-model:visible="visible"> Modal Body </Modal>
</template>

Visibility

Control the modal visibility by binding the visible prop to a boolean value. Supports v-model as well.

Parts

Supported parts: header, body, footer.

Header

Only rendered when the title prop is set. Contains the modal title and a close button.

<script setup>
import { Modal, Button } from 'gurunkit';
import { ref } from 'vue';

const visible = ref(false);
</script>

<template>
  <Button @click="visible = true">Open Modal</Button>
  <Modal title="Modal Title" v-model:visible="visible"> Modal Body </Modal>
</template>

Body

Always rendered. Renders anything inside the default slot.

Footer

Only rendered when the footer slot is provided. Renders the footer slot.

<script setup>
import { Modal, Button } from 'gurunkit';
import { ref } from 'vue';

const visible = ref(false);
</script>

<template>
  <Button @click="visible = true">Open Modal</Button>
  <Modal v-model:visible="visible">
    Modal Body
    <template #footer>
      <Button @click="visible = false">Close</Button>
    </template>
  </Modal>
</template>

Size

Set input size using size props. Supported values: sm, md, lg. Default to md.

<script setup>
import { Modal, Button } from 'gurunkit';
import { ref } from 'vue';

const visible = ref(false);
</script>

<template>
  <Button @click="visible = true">Open Modal</Button>
  <Modal size="sm" v-model:visible="visible"> Modal Body </Modal>
</template>

API

Props

Name	Type	Required	Default	Description
visible	boolean	❌	-	Control modal visibility
title	string	❌	-	Modal title
size	sm, md, lg	❌	md	Modal size

Events

Name	Type	Description
update:visible	boolean	visible prop value is updated
close	-	Modal is closed

Model Value

Name	Type	Description
visible	boolean	Control visibility