From f7c26aad5cbb6a72689ed56b7e1780e0248a4e4a Mon Sep 17 00:00:00 2001
From: Harmen de Vries <harmen@made.frl>
Date: Fri, 22 Dec 2023 09:34:05 +0100
Subject: [PATCH 1/2] Rename slots, add prop:fullscreen, prop:maxWidth and add
 overflow to content node

---
 .../documentation/components/lv-dialog.vue    | 28 +++++++--
 src/lib/components/LvDialog/LvDialog.vue      | 57 ++++++++++++++++---
 2 files changed, 71 insertions(+), 14 deletions(-)

diff --git a/src/docs/views/documentation/components/lv-dialog.vue b/src/docs/views/documentation/components/lv-dialog.vue
index 638d92c..587429d 100644
--- 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,19 +42,27 @@
 <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>
@@ -55,6 +70,7 @@ const code = `
 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
index 574ac58..09b800f 100644
--- 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,6 +137,7 @@ export default {
 @import '../../scss/transitions/fade';
 
 .lv-dialog {
+    $self: &;
     display: flex;
     position: fixed;
     top: 0;
@@ -128,6 +145,7 @@ export default {
     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>

From 1a135f7221cd9b42c1a841e45a52d5b9f3255936 Mon Sep 17 00:00:00 2001
From: Harmen de Vries <harmen@made.frl>
Date: Fri, 22 Dec 2023 09:35:19 +0100
Subject: [PATCH 2/2] 1.1.0

---
 package-lock.json | 4 ++--
 package.json      | 2 +-
 2 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index d8cdcf7..f041075 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,12 +1,12 @@
 {
     "name": "@libvue/core",
-    "version": "1.0.0",
+    "version": "1.1.0",
     "lockfileVersion": 2,
     "requires": true,
     "packages": {
         "": {
             "name": "@libvue/core",
-            "version": "1.0.0",
+            "version": "1.1.0",
             "license": "MIT",
             "dependencies": {
                 "@tiptap/extension-link": "^2.1.12",
diff --git a/package.json b/package.json
index 4b21462..a88d87e 100644
--- 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",