feat(AlertDialog): create component (#26)

docs/app.vue

@@ -61,7 +61,7 @@ import { UseDark } from '@vueuse/components'
 const sections = [
   { label: 'Getting Started', links: [{ label: 'Usage', to: '/' }, { label: 'Examples', to: '/examples' }, { label: 'Migration', to: '/migration' }, { label: 'Dark mode', to: '/dark' }] },
   { label: 'Elements', links: [{ label: 'Avatar', to: '/components/Avatar' }, { label: 'AvatarGroup', to: '/components/AvatarGroup' }, { label: 'Badge', to: '/components/Badge' }, { label: 'Button', to: '/components/Button' }, { label: 'Dropdown', to: '/components/Dropdown' }, { label: 'Icon', to: '/components/Icon' }] },
-  { label: 'Feedback', links: [{ label: 'Alert', to: '/components/Alert' }] },
+  { label: 'Feedback', links: [{ label: 'Alert', to: '/components/Alert' }, { label: 'AlertDialog', to: '/components/AlertDialog' }] },
   { label: 'Forms', links: [{ label: 'Checkbox', to: '/components/Checkbox' }, { label: 'Input', to: '/components/Input' }, { label: 'FormGroup', to: '/components/FormGroup' }, { label: 'Radio', to: '/components/Radio' }, { label: 'Select', to: '/components/Select' }, { label: 'Textarea', to: '/components/Textarea' }, { label: 'Toggle', to: '/components/Toggle' }] },
   { label: 'Layout', links: [{ label: 'Card', to: '/components/Card' }, { label: 'Container', to: '/components/Container' }] },
   // { label: 'Navigation', links: [{ label: 'Pills', to: '/components/Pills' }, { label: 'Tabs', to: '/components/Tabs' }, { label: 'VerticalNavigation', to: '/components/VerticalNavigation' }] },

docs/pages/components/[component].vue

@@ -100,6 +100,7 @@ const is = `U${params.component}`
 
 const component = nuxtApp.vueApp.component(is)
 
+const alertDialog = ref(false)
 const toggle = ref(false)
 const modal = ref(false)
 
@@ -113,6 +114,19 @@ const defaultProps = {
   Alert: {
     title: 'A new software update is available. See what’s new in version 2.0.4.'
   },
+  AlertDialog: {
+    title: 'Are you sure you want to close this modal?',
+    modelValue: alertDialog,
+    'onUpdate:modelValue': (v) => { alertDialog.value = v },
+    component: {
+      name: 'Button',
+      props: {
+        variant: 'secondary',
+        label: 'Open modal',
+        onClick: () => { alertDialog.value = true }
+      }
+    }
+  },
   Avatar: {
     src: 'https://picsum.photos/200/300'
   },

docs/pages/migration.vue

@@ -116,7 +116,15 @@ const components = [
   },
   {
     label: 'Alert',
-    to: '/components/Alert'
+    to: '/components/Alert',
+    nuxt3: true
+  },
+  {
+    label: 'AlertDialog',
+    to: '/components/AlertDialog',
+    nuxt3: true,
+    capi: true,
+    preset: true
   },
   {
     label: 'Input',