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',

src/runtime/components/feedback/AlertDialog.vue

@@ -0,0 +1,97 @@
+<template>
+  <Modal v-model="isOpen" class="w-full">
+    <div class="sm:flex sm:items-start">
+      <div v-if="icon" :class="iconWrapperClass" class="mx-auto flex-shrink-0 flex items-center justify-center rounded-full sm:mx-0">
+        <Icon :name="icon" :class="iconClass" />
+      </div>
+      <div class="mt-3 text-center sm:mt-0 sm:ml-4 sm:text-left space-y-2">
+        <DialogTitle v-if="title" as="h3" :class="titleClass">
+          {{ title }}
+        </DialogTitle>
+        <DialogDescription v-if="description" as="p" :class="descriptionClass">
+          {{ description }}
+        </DialogDescription>
+      </div>
+    </div>
+    <div class="mt-5 space-y-3 sm:space-y-0 sm:mt-4 sm:flex sm:gap-3" :class="{ 'sm:flex-row-reverse': !leadingButtons }">
+      <Button variant="primary" :label="confirmLabel" block custom-class="sm:w-auto" @click="onConfirm" />
+      <Button variant="secondary" :label="cancelLabel" block custom-class="sm:w-auto" @click="onCancel" />
+    </div>
+  </Modal>
+</template>
+
+<script setup>
+import { computed } from 'vue'
+import { DialogTitle, DialogDescription } from '@headlessui/vue'
+import Modal from '../overlays/Modal'
+import Button from '../elements/Button'
+import Icon from '../elements/Icon'
+import $ui from '#build/ui'
+
+const props = defineProps({
+  modelValue: {
+    type: Boolean,
+    default: false
+  },
+  icon: {
+    type: String,
+    default: ''
+  },
+  iconClass: {
+    type: String,
+    default: () => $ui.alertDialog.icon.base
+  },
+  iconWrapperClass: {
+    type: String,
+    default: () => $ui.alertDialog.icon.wrapper
+  },
+  title: {
+    type: String,
+    default: ''
+  },
+  titleClass: {
+    type: String,
+    default: () => $ui.alertDialog.icon.title
+  },
+  description: {
+    type: String,
+    default: ''
+  },
+  descriptionClass: {
+    type: String,
+    default: () => $ui.alertDialog.description
+  },
+  confirmLabel: {
+    type: String,
+    default: 'Confirm'
+  },
+  cancelLabel: {
+    type: String,
+    default: 'Cancel'
+  },
+  leadingButtons: {
+    type: Boolean,
+    default: false
+  }
+})
+
+const emit = defineEmits(['update:modelValue', 'confirm', 'cancel'])
+
+const isOpen = computed({
+  get () {
+    return props.modelValue
+  },
+  set (value) {
+    emit('update:modelValue', value)
+  }
+})
+
+function onConfirm () {
+  emit('confirm')
+  isOpen.value = false
+}
+function onCancel () {
+  emit('cancel')
+  isOpen.value = false
+}
+</script>

src/runtime/components/overlays/Modal.vue

@@ -1,7 +1,7 @@
 <template>
   <TransitionRoot :show="isOpen" as="template">
     <Dialog @close="setIsOpen">
-      <div class="fixed z-10 inset-0 overflow-y-auto">
+      <div class="fixed z-20 inset-0 overflow-y-auto">
         <div class="flex items-end justify-center min-h-screen pt-4 px-4 pb-20 text-center sm:block sm:p-0">
           <TransitionChild
             as="template"

src/runtime/presets/tailwindui.ts

@@ -266,6 +266,15 @@ const verticalNavigation = {
   }
 }
 
+const alertDialog = {
+  icon: {
+    wrapper: 'h-12 w-12 sm:h-10 sm:w-10 bg-primary-100',
+    base: 'text-primary-600'
+  },
+  title: 'text-lg leading-6 font-medium text-gray-900',
+  description: 'text-sm text-gray-500'
+}
+
 export default {
   card,
   button,
@@ -278,5 +287,6 @@ export default {
   radio,
   container,
   toggle,
-  verticalNavigation
+  verticalNavigation,
+  alertDialog
 }