feat(Modal): add new declarative modal components

[gravitano]

🔗 Linked issue

❓ Type of change

• [ ] 📖 Documentation (updates to the documentation or readme)
• [ ] 🐞 Bug fix (a non-breaking change that fixes an issue)
• [ ] 👌 Enhancement (improving an existing functionality like performance)
• [x] ✨ New feature (a non-breaking change that adds functionality)
• [ ] ⚠️ Breaking change (fix or feature that would cause existing functionality to change)

📚 Description

This PR introduced a new declarative approach to use the modal component, providing you with enhanced flexibility. This approach involves breaking down the modal component into five separate components, each serving a specific purpose. To utilize this feature, you will need to manually import these components.

Component List

The modal components are as follows:

• Modal
• ModalHeader
• ModalTitle
• ModalBody
• ModalFooter

Usage

Unlike before, these components are not auto-imported. Therefore, you must import them individually based on your requirements.

Here's a brief overview of each modal component and its purpose:

• Modal: This is the main component that serves as the container for the entire modal dialog.
• ModalHeader: Use this component to display the header section of the modal. Typically, it contains the title and close button.
• ModalTitle: This component is used to display the title of the modal. It is usually placed inside the ModalHeader.
• ModalBody: This component allows you to add content to the body of the modal. Any information or forms you wish to present should be placed within this component.
• ModalFooter: The footer component is utilized to include any additional elements at the bottom of the modal, such as action buttons (e.g., Save, Cancel).

Example

<script setup lang="ts">
import {
  VBtn,
  Modal,
  ModalHeader,
  ModalTitle,
  ModalFooter,
  ModalBody,
} from '@morpheme/ui';

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

<template>
  <VBtn @click="isOpen = true">Open Modal</VBtn>

  <Modal v-model="isOpen" v-bind="params">
    <ModalHeader>
      <ModalTitle>Modal Title</ModalTitle>
      <VBtn
        @click="isOpen = false"
        prefix-icon="ri:close-line"
        size="sm"
        text
        icon
        fab
      />
    </ModalHeader>
    <ModalBody>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit</p>
    </ModalBody>
    <ModalFooter>
      <VBtn @click="isOpen = false">Close</VBtn>
      <VBtn @click="isOpen = false" color="primary">Okay</VBtn>
    </ModalFooter>
  </Modal>
</template>

📝 Checklist

• [ ] I have linked an issue or discussion.
• [x] I have updated the documentation accordingly.