Merge pull request #144 from libvue/feature/improve-dialog

Feature/improve dialog
libvue · Dec 22, 2023 · 6294e8a · 6294e8a
2 parents a97d36e + 1a135f7
commit 6294e8a
Show file tree

Hide file tree

Showing 4 changed files with 74 additions and 17 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
     "name": "@libvue/core",
-    "version": "1.0.0",
+    "version": "1.1.0",
     "private": false,
     "scripts": {
         "dev": "vite",

diff --git a/src/docs/views/documentation/components/lv-dialog.vue b/src/docs/views/documentation/components/lv-dialog.vue
@@ -10,20 +10,27 @@
 
     <lv-card v-space-after="1">
         <lv-button label="Open the dialog" @click="showDialog = true"/>
-        <lv-dialog :show="showDialog" @click-backdrop="showDialog = false" :modal="false">
-            <template #title>
+        <lv-dialog :show="showDialog" @click-backdrop="showDialog = false" :modal="false" :fullscreen="fullscreen">
+            <template #header>
                 <lv-heading :level="4" v-space-after="1">Make a choice</lv-heading>
             </template>
             <template #content>
                 <lv-heading :level="6">Do you want to continue?</lv-heading>
                 <lv-text v-space-after="0.5">Press continue to keep doing what you were doing.</lv-text>
+                <lv-text v-space-after="0.5">
+                    Lorem ipsum dolor sit amet, consectetur adipisicing elit. A ab cum, dolorem ex explicabo inventore iure, iusto minus nulla pariatur placeat rerum voluptas. Accusantium ad adipisci amet blanditiis consequatur cumque ducimus esse est expedita facere fuga, hic incidunt nesciunt obcaecati reiciendis, rerum sapiente sit ullam, veniam veritatis! Architecto eaque ex facere harum maxime praesentium rem temporibus voluptatum! Culpa doloremque explicabo facere harum officia quidem ut voluptate. Alias aperiam eos recusandae temporibus. Ab ad aperiam asperiores cumque doloremque eaque eligendi expedita in laborum libero nam, neque non numquam perspiciatis quibusdam quisquam sapiente sint soluta voluptate voluptatem. Deserunt magni modi rerum vel.
+                </lv-text>
+                <lv-text v-space-after="0.5">
+                    Lorem ipsum dolor sit amet, consectetur adipisicing elit. A ab cum, dolorem ex explicabo inventore iure, iusto minus nulla pariatur placeat rerum voluptas. Accusantium ad adipisci amet blanditiis consequatur cumque ducimus esse est expedita facere fuga, hic incidunt nesciunt obcaecati reiciendis, rerum sapiente sit ullam, veniam veritatis! Architecto eaque ex facere harum maxime praesentium rem temporibus voluptatum! Culpa doloremque explicabo facere harum officia quidem ut voluptate. Alias aperiam eos recusandae temporibus. Ab ad aperiam asperiores cumque doloremque eaque eligendi expedita in laborum libero nam, neque non numquam perspiciatis quibusdam quisquam sapiente sint soluta voluptate voluptatem. Deserunt magni modi rerum vel.
+                </lv-text>
                 <lv-switch v-model="model" v-space-after="1" label="Enable something"/>
                 <lv-input v-space-after="1" placeholder="Type something" />
             </template>
-            <template #close>
+            <template #footer>
                 <lv-flex>
                     <lv-button label="Continue" color="solid-primary" @click="showDialog = false"/>
                     <lv-button label="Cancel" color="solid-dimmed-primary" @click="showDialog = false"/>
+                    <lv-button label="Toggle Fullscreen" color="solid-dimmed-primary" @click="fullscreen = !fullscreen"></lv-button>
                 </lv-flex>
             </template>
         </lv-dialog>
@@ -35,26 +42,35 @@
 <script>
 const code = `
 <lv-button label="Open the dialog" @click="showDialog = true"/>
-<lv-dialog :show="showDialog" @click-overlay="showDialog = false" :modal="false">
-    <template #title>
+<lv-dialog :show="showDialog" @click-backdrop="showDialog = false" :modal="false" :fullscreen="fullscreen">
+    <template #header>
         <lv-heading :level="4" v-space-after="1">Make a choice</lv-heading>
     </template>
     <template #content>
         <lv-heading :level="6">Do you want to continue?</lv-heading>
         <lv-text v-space-after="0.5">Press continue to keep doing what you were doing.</lv-text>
+        <lv-text v-space-after="0.5">
+            Lorem ipsum dolor sit amet, consectetur adipisicing elit. A ab cum, dolorem ex explicabo inventore iure, iusto minus nulla pariatur placeat rerum voluptas. Accusantium ad adipisci amet blanditiis consequatur cumque ducimus esse est expedita facere fuga, hic incidunt nesciunt obcaecati reiciendis, rerum sapiente sit ullam, veniam veritatis! Architecto eaque ex facere harum maxime praesentium rem temporibus voluptatum! Culpa doloremque explicabo facere harum officia quidem ut voluptate. Alias aperiam eos recusandae temporibus. Ab ad aperiam asperiores cumque doloremque eaque eligendi expedita in laborum libero nam, neque non numquam perspiciatis quibusdam quisquam sapiente sint soluta voluptate voluptatem. Deserunt magni modi rerum vel.
+        </lv-text>
+        <lv-text v-space-after="0.5">
+            Lorem ipsum dolor sit amet, consectetur adipisicing elit. A ab cum, dolorem ex explicabo inventore iure, iusto minus nulla pariatur placeat rerum voluptas. Accusantium ad adipisci amet blanditiis consequatur cumque ducimus esse est expedita facere fuga, hic incidunt nesciunt obcaecati reiciendis, rerum sapiente sit ullam, veniam veritatis! Architecto eaque ex facere harum maxime praesentium rem temporibus voluptatum! Culpa doloremque explicabo facere harum officia quidem ut voluptate. Alias aperiam eos recusandae temporibus. Ab ad aperiam asperiores cumque doloremque eaque eligendi expedita in laborum libero nam, neque non numquam perspiciatis quibusdam quisquam sapiente sint soluta voluptate voluptatem. Deserunt magni modi rerum vel.
+        </lv-text>
+        <lv-switch v-model="model" v-space-after="1" label="Enable something"/>
         <lv-input v-space-after="1" placeholder="Type something" />
     </template>
-    <template #close>
+    <template #footer>
         <lv-flex>
             <lv-button label="Continue" color="solid-primary" @click="showDialog = false"/>
             <lv-button label="Cancel" color="solid-dimmed-primary" @click="showDialog = false"/>
+            <lv-button label="Toggle Fullscreen" color="solid-dimmed-primary" @click="fullscreen = !fullscreen"></lv-button>
         </lv-flex>
     </template>
 </lv-dialog>
 `.trim();
 export default {
     data() {
         return {
+            fullscreen: false,
             showDialog: false,
             code,
             model: false,

diff --git a/src/lib/components/LvDialog/LvDialog.vue b/src/lib/components/LvDialog/LvDialog.vue
@@ -5,6 +5,7 @@
             v-if="computedShow && mounted"
             :options="focusTrap ? focusTrapOptions : null"
             class="lv-dialog"
+            :class="classObject"
             role="dialog"
             :aria-modal="modal"
             :aria-label="ariaLabel"
@@ -15,13 +16,11 @@
                 <div v-if="show" class="lv-dialog__backdrop" @click="onClickBackdrop"></div>
             </transition>
             <transition name="fade-slide-up" appear>
-                <div v-if="show" ref="content" class="lv-dialog__window">
+                <div v-if="show" ref="content" class="lv-dialog__window" :style="windowStyleObject">
                     <slot name="default">
-                        <div v-if="!!$slots.title" class="lv-dialog__title"><slot name="title"></slot></div>
-                        <div v-if="!!$slots.content" class="lv-dialog__content">
-                            <slot name="content"></slot>
-                        </div>
-                        <div v-if="!!$slots.close" class="lv-dialog__close"><slot name="close"></slot></div>
+                        <div v-if="!!$slots.header" class="lv-dialog__header"><slot name="header"></slot></div>
+                        <div v-if="!!$slots.content" class="lv-dialog__content"><slot name="content"></slot></div>
+                        <div v-if="!!$slots.footer" class="lv-dialog__footer"><slot name="footer"></slot></div>
                     </slot>
                 </div>
             </transition>
@@ -64,6 +63,14 @@ export default {
             type: Boolean,
             default: (props) => !!props.modal,
         },
+        maxWidth: {
+            type: String,
+            default: '900px'
+        },
+        fullscreen: {
+            type: Boolean,
+            default: false,
+        },
     },
     emits: ['click-backdrop'],
     setup() {
@@ -90,11 +97,20 @@ export default {
                 fallbackFocus: document.body,
             };
         },
+        windowStyleObject() {
+            return {
+                'maxWidth': this.maxWidth,
+            }
+        },
+        classObject() {
+            return {
+                'lv-dialog--fullscreen': this.fullscreen,
+            };
+        }
     },
     watch: {
         show(val) {
             this.isLocked = !!val;
-
             // If invisible, directly show
             // Otherwise hide with a delay
             if (val) {
@@ -121,13 +137,15 @@ export default {
 @import '../../scss/transitions/fade';
 
 .lv-dialog {
+    $self: &;
     display: flex;
     position: fixed;
     top: 0;
     left: 0;
     justify-content: center;
     align-items: center;
     z-index: var(--z-dialog);
+    padding: 1.5rem;
     width: 100%;
     height: 100%;
 
@@ -144,7 +162,30 @@ export default {
         border-radius: var(--border-radius);
         background-color: var(--background-color);
         padding: calc(var(--padding) * 2);
-        max-height: 100vh;
+        max-height: 100%;
+        display: flex;
+        flex-direction: column;
+    }
+
+    #{$self}__content {
+        flex-shrink: 1;
+        overflow-y: auto;
+    }
+    #{$self}__footer {
+        padding-top: 1rem;
+    }
+
+    &--fullscreen {
+        padding: 0;
+        #{$self}__window {
+            width: 100vw;
+            height: 100vh;
+            max-width: none !important;
+            border-radius: 0;
+        }
+        #{$self}__content {
+            flex-grow: 1;
+        }
     }
 }
 </style>