feat(Modal): new component

playground/app.vue

@@ -5,13 +5,13 @@ useHead({
   }
 })
 
-const components = ['avatar', 'badge', 'button', 'chip', 'collapsible', 'kbd', 'popover', 'skeleton', 'tabs', 'tooltip']
+const components = ['avatar', 'badge', 'button', 'card', 'chip', 'collapsible', 'kbd', 'modal', 'popover', 'skeleton', 'tabs', 'tooltip']
 </script>
 
 <template>
   <UProvider>
     <UContainer class="min-h-screen flex flex-col gap-4 items-center justify-center overflow-y-auto">
-      <div class="flex gap-1.5 py-4">
+      <div class="flex gap-1.5 py-4 overflow-x-auto w-full">
         <ULink v-for="component in components" :key="component" :to="`/${component}`" active-class="text-primary-500 dark:text-primary-400 font-medium" class="capitalize text-sm">
           {{ component }}
         </ULink>

playground/pages/modal.vue

@@ -0,0 +1,49 @@
+<template>
+  <div class="flex flex-col gap-2">
+    <UModal title="First" description="My first modal">
+      <UButton color="white" label="Open with nested" />
+
+      <template #footer>
+        <UModal title="Second" description="My second modal">
+          <UButton label="Open second" />
+        </UModal>
+      </template>
+    </UModal>
+
+    <UModal v-model:open="open" title="Modal with v-model" description="This can be useful to control the state of the modal yourself." />
+
+    <UButton label="Open with v-model" color="gray" @click="open = true" />
+
+    <UModal title="Modal without overlay" description="This modal has `overlay: false` prop." :overlay="false">
+      <UButton label="Open without overlay" color="white" />
+    </UModal>
+
+    <UModal title="Modal without modal & overlay" description="This modal has `modal: false` and `overlay: false` to interact with outside content." :overlay="false" :modal="false">
+      <UButton label="Open without modal" color="gray" />
+    </UModal>
+
+    <UModal title="Modal without transition" description="This modal has `transition: false` prop." :transition="false">
+      <UButton label="Open without transition" color="white" />
+    </UModal>
+
+    <UModal title="Modal fullscreen" description="This modal has `fullscreen: true` prop." fullscreen>
+      <UButton label="Open fullscreen" color="gray" />
+    </UModal>
+
+    <UModal title="Modal prevent close" description="This modal has `prevent-close: true` prop so it won't close when clicking outside." prevent-close>
+      <UButton label="Open unclosable" color="white" />
+    </UModal>
+
+    <UModal title="Modal without close button" description="This modal has `close: null` prop." :close="null">
+      <UButton label="Open without close button" color="gray" />
+    </UModal>
+
+    <UModal title="Modal with custom close button" description="The `close` prop inherits from the Button props." :close="{ color: 'primary', variant: 'solid', size: 'xs' }" :ui="{ close: 'top-3.5 rounded-full' }">
+      <UButton label="Open with custom close button" color="white" />
+    </UModal>
+  </div>
+</template>
+
+<script setup lang="ts">
+const open = ref(false)
+</script>