chore(Modal): add preset system

docs/pages/migration.vue

@@ -213,6 +213,7 @@ const components = [
     label: 'Modal',
     to: '/components/Modal',
     nuxt3: true,
+    preset: true,
     capi: true
   },
   {

src/module.ts

@@ -107,6 +107,14 @@ export default defineNuxtModule<ModuleOptions>({
           {
             pattern: new RegExp(`ring-(${safeColorsAsRegex})-(500)`),
             variants: ['focus']
+          },
+          {
+            pattern: /rounded-(sm|md|lg|xl|2xl|3xl)/,
+            variants: ['sm']
+          },
+          {
+            pattern: /max-w-(xs|sm|md|lg|xl|2xl|3xl|4xl|5xl|6xl|7xl)/,
+            variants: ['sm']
           }
         ]
       },

src/runtime/components/layout/Card.vue

@@ -57,6 +57,13 @@ export default {
       type: String,
       default: () => $ui.card.ring
     },
+    roundedClass: {
+      type: String,
+      default: () => $ui.card.rounded,
+      validator (value) {
+        return ['sm', 'md', 'lg', 'xl', '2xl', '3xl'].map(size => `rounded-${size}`).includes(value)
+      }
+    },
     bodyClass: {
       type: String,
       default: () => $ui.card.body
@@ -90,8 +97,8 @@ export default {
     const cardClass = computed(() => {
       return classNames(
         props.baseClass,
-        props.padded && props.rounded && 'rounded-md',
-        !props.padded && props.rounded && 'sm:rounded-md',
+        props.padded && props.rounded && props.roundedClass,
+        !props.padded && props.rounded && `sm:${props.roundedClass}`,
         props.ringClass,
         props.shadowClass,
         props.backgroundClass,

src/runtime/components/overlays/Modal.vue

@@ -30,9 +30,14 @@
             leave-to="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
           >
             <Card
-              class="inline-block align-bottom bg-white rounded-lg text-left overflow-hidden shadow-xl transform transition-all sm:my-8 sm:align-middle sm:max-w-lg sm:w-full"
+              :base-class="baseClass"
+              :background-class="backgroundClass"
+              :shadow-class="shadowClass"
+              :ring-class="ringClass"
+              :rounded-class="roundedClass"
+              :class="modalClass"
+              padded
               v-bind="$attrs"
-              ring-class
             >
               <template v-if="$slots.header" #header>
                 <slot name="header" />
@@ -52,8 +57,9 @@
 <script>
 import { computed } from 'vue'
 import { Dialog, DialogOverlay, TransitionRoot, TransitionChild } from '@headlessui/vue'
-
+import { classNames } from '../../utils/'
 import Card from '../layout/Card'
+import $ui from '#build/ui'
 
 export default {
   components: {
@@ -72,6 +78,33 @@ export default {
     appear: {
       type: Boolean,
       default: false
+    },
+    baseClass: {
+      type: String,
+      default: () => $ui.modal.base
+    },
+    backgroundClass: {
+      type: String,
+      default: () => $ui.modal.background
+    },
+    shadowClass: {
+      type: String,
+      default: () => $ui.modal.shadow
+    },
+    ringClass: {
+      type: String,
+      default: () => $ui.modal.ring
+    },
+    roundedClass: {
+      type: String,
+      default: () => $ui.modal.rounded
+    },
+    widthClass: {
+      type: String,
+      default: () => $ui.modal.width,
+      validator (value) {
+        return ['xs', 'sm', 'md', 'lg', 'xl', '2xl', '3xl', '4xl', '5xl', '6xl', '7xl'].map(width => `max-w-${width}`).includes(value)
+      }
     }
   },
   emits: ['update:modelValue', 'close'],
@@ -85,8 +118,15 @@ export default {
       }
     })
 
+    const modalClass = computed(() => {
+      return classNames(
+        `sm:${props.widthClass}`
+      )
+    })
+
     return {
       isOpen,
+      modalClass,
       close (value) {
         isOpen.value = value
         emit('close')

src/runtime/presets/default.ts

@@ -223,12 +223,23 @@ const card = {
   background: 'u-bg-white',
   border: 'u-border-gray-200',
   ring: 'ring-1 u-ring-gray-200',
+  rounded: 'rounded-md',
   shadow: 'shadow',
   body: 'px-4 py-5 sm:p-6',
   header: 'px-4 py-5 sm:px-6',
   footer: 'px-4 py-4 sm:px-6'
 }
 
+const modal = {
+  base: 'relative inline-block align-bottom text-left overflow-hidden transform transition-all sm:my-8 sm:align-middle w-full',
+  background: 'u-bg-white',
+  border: '',
+  ring: '',
+  rounded: 'rounded-lg',
+  shadow: 'shadow-xl',
+  width: 'max-w-lg'
+}
+
 const container = {
   constrained: 'max-w-7xl'
 }
@@ -352,6 +363,7 @@ const avatar = {
 
 export default {
   card,
+  modal,
   button,
   badge,
   formGroup,