settings modal

src/components/ui/UIModal.vue

@@ -5,10 +5,12 @@ const props = withDefaults(
   defineProps<{
     open?: boolean
     persistent?: boolean
+    size?: 'sm' | 'md' | 'lg'
   }>(),
   {
     open: false,
-    persistent: false
+    persistent: false,
+    size: 'md'
   }
 )
 
@@ -46,6 +48,16 @@ const onLeave = (el: Element, done: () => void): void => {
   el.addEventListener('transitionend', () => done())
 }
 
+const styleClass = computed(() => {
+  const sizeVariants = {
+    'sm': 'max-w-xs',
+    'md': 'max-w-md',
+    'lg': 'max-w-2xl'
+  }
+  const sizeClass = sizeVariants[props.size]
+  return [sizeClass]
+})
+
 defineExpose({ open, close })
 </script>
 <template>
@@ -53,8 +65,10 @@ defineExpose({ open, close })
   <Teleport to="body">
     <Transition @enter="onEnter" @leave="onLeave" appear>
       <div class="dui-modal bg-neutral-800 bg-opacity-60" v-if="show" ref="modal">
-        <div class="dui-modal-box" ref="modalBox">
-          <h3 class="text-lg font-bold" v-if="$slots.title"><slot name="title" /></h3>
+        <div class="dui-modal-box" :class="styleClass" ref="modalBox">
+          <h3 class="flex items-center text-xl font-bold" v-if="$slots.title">
+            <slot name="title" />
+          </h3>
           <p class="py-4">
             <slot v-bind="slotProps" />
           </p>