chore(modal): update examples and default size (#72)

indielayer · May 9, 2024 · 1ad8f6e · 1ad8f6e
1 parent a5a1503
commit 1ad8f6e
Show file tree

Hide file tree

Showing 6 changed files with 22 additions and 8 deletions.
diff --git a/.changeset/violet-kids-explode.md b/.changeset/violet-kids-explode.md
@@ -0,0 +1,5 @@
+---
+"@indielayer/ui": patch
+---
+
+chore(modal): update examples and default size
diff --git a/packages/ui/docs/pages/component/modal/composed.vue b/packages/ui/docs/pages/component/modal/composed.vue
@@ -33,6 +33,7 @@ function onSubmit(isValid: boolean) {
     show-close
     backdrop
     is-form
+    size="full"
     title="Modal title"
     label="Modal label"
     description="Lorem ipsum dolor, sit amet consectetur adipisicing elit. Sapiente, fugit."

diff --git a/packages/ui/docs/pages/component/modal/usage.vue b/packages/ui/docs/pages/component/modal/usage.vue
@@ -7,21 +7,24 @@ const show3 = ref(false)
 </script>
 
 <template>
-  <x-modal v-model="show" show-close backdrop>
+  <x-modal
+    v-model="show"
+    title="Header"
+    show-close
+    backdrop
+    size="sm"
+  >
     <template #image>
       <x-image src="https://images.unsplash.com/photo-1543352634-99a5d50ae78e?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1742&q=80" alt=""/>
     </template>
-    <template #header>
-      Modal Header
-    </template>
 
     <div>
       Lorem ipsum dolor sit amet consectetur, adipisicing elit. Iure praesentium non id dolores vitae. Nam ratione veritatis ab cumque voluptas porro illum, voluptate perferendis ducimus dolorem optio magni assumenda dolore! Doloremque facere aliquid facilis distinctio accusamus, dolorum eligendi consequuntur molestias sapiente non rem vero sed eos minus itaque sunt officiis iste ea repellendus possimus earum maiores? Quo laudantium fuga odit tenetur sint fugit deleniti dolores placeat, accusamus magni consectetur unde totam sunt labore dolor rem consequatur quaerat! Iure temporibus voluptatem cumque, dolore maiores rerum neque vero, iusto veritatis repellat eligendi amet! Molestiae cumque officiis eius harum iste, fuga corporis molestias.
     </div>
 
     <template #actions>
       <div class="text-right space-x-4">
-        <x-button>Cancel</x-button>
+        <x-button @click="show = false">Cancel</x-button>
         <x-button color="success">Confirm</x-button>
       </div>
     </template>
@@ -46,7 +49,7 @@ const show3 = ref(false)
     Lorem ipsum dolor sit amet consectetur, adipisicing elit. Iure praesentium non id dolores vitae. Nam ratione veritatis ab cumque voluptas porro illum, voluptate perferendis ducimus dolorem optio magni assumenda dolore! Doloremque facere aliquid facilis distinctio accusamus, dolorum eligendi consequuntur molestias sapiente non rem vero sed eos minus itaque sunt officiis iste ea repellendus possimus earum maiores? Quo laudantium fuga odit tenetur sint fugit deleniti dolores placeat, accusamus magni consectetur unde totam sunt labore dolor rem consequatur quaerat! Iure temporibus voluptatem cumque, dolore maiores rerum neque vero, iusto veritatis repellat eligendi amet! Molestiae cumque officiis eius harum iste, fuga corporis molestias.
 
     <template #actions>
-      <x-button>Cancel</x-button>
+      <x-button @click="show2 = false">Cancel</x-button>
       <x-button color="success">Confirm</x-button>
     </template>
   </x-modal>

diff --git a/packages/ui/src/components/modal/Modal.vue b/packages/ui/src/components/modal/Modal.vue
@@ -4,7 +4,7 @@ const modalPosition = ['top', 'center', 'bottom'] as const
 const modalProps = {
   size: {
     type: String as PropType<ModalSize>,
-    default: 'xl',
+    default: 'lg',
   },
   position: {
     type: String as PropType<ModalPosition>,
@@ -214,6 +214,9 @@ defineExpose({ open, close })
           <x-scroll
             v-if="$slots.default"
             :scrollbar="false"
+            :class="{
+              'h-full': size === 'full',
+            }"
             vertical
           >
             <div :class="classes.content">

diff --git a/packages/ui/src/components/modal/theme/Modal.base.theme.ts b/packages/ui/src/components/modal/theme/Modal.base.theme.ts
@@ -14,7 +14,7 @@ const theme: ModalTheme = {
     },
 
     modalWrapper: ({ props }) => {
-      const classes = ['flex justify-center p-4 sm:p-8 md:py-20 h-screen']
+      const classes = ['flex justify-center p-4 sm:p-8 h-screen']
 
       if (props.position === 'top') classes.push('items-start')
       else if (props.position === 'bottom') classes.push('items-end')
@@ -34,6 +34,7 @@ const theme: ModalTheme = {
       else if (props.size === 'md') classes.push('sm:max-w-lg')
       else if (props.size === 'lg') classes.push('sm:max-w-3xl')
       else if (props.size === 'xl') classes.push('sm:max-w-6xl')
+      else if (props.size === 'full') classes.push('h-full')
 
       return classes
     },

diff --git a/packages/ui/src/components/modal/theme/Modal.carbon.theme.ts b/packages/ui/src/components/modal/theme/Modal.carbon.theme.ts
@@ -24,6 +24,7 @@ const theme: ModalTheme = {
       else if (props.size === 'md') classes.push('sm:max-w-lg')
       else if (props.size === 'lg') classes.push('sm:max-w-3xl')
       else if (props.size === 'xl') classes.push('sm:max-w-6xl')
+      else if (props.size === 'full') classes.push('h-full')
 
       return classes
     },