feat(demo): upgrade to 0.0.14

- upgrade layout for DialogLayout
- add ScrollDialog example

Author: MichaelGitArt

demo/package.json

@@ -7,7 +7,7 @@
   },
   "license": "MIT",
   "dependencies": {
-    "gitart-vue-dialog": "^0.0.12",
+    "gitart-vue-dialog": "0.0.14",
     "vue": "3.2.0-beta.7"
   },
   "devDependencies": {

demo/src/App.vue

@@ -53,6 +53,6 @@ export default defineComponent({
 
 <style lang="scss">
 .app {
-  height: 2000px;
+  min-height: 100vh;
 }
 </style>

demo/src/components/Dialogs/ScrollDialog/ScrollDialog.vue

@@ -0,0 +1,70 @@
+<template>
+  <GDialog
+    v-model="value"
+    max-width="400"
+    height="600"
+    scrollable
+  >
+    <div
+      flex="~ col"
+      bg="gray-50"
+      border="rounded"
+    >
+      <DialogToolbar @close="onClose">
+        <h4>
+          Scroll Dialog
+        </h4>
+      </DialogToolbar>
+
+      <div
+        p="x-5 y-4"
+        overflow="auto"
+      >
+        <p v-for="item in 8" :key="item">
+          Lorem, ipsum dolor sit amet consectetur adipisicing elit. Totam quisquam iste assumenda
+          voluptates optio dolorum facere, corrupti adipisci ex possimus,
+          quis sunt. Quis dolorum voluptatibus ab quasi, nemo rem? Culpa!
+        </p>
+      </div>
+    </div>
+  </GDialog>
+</template>
+
+<script lang="ts">
+import { defineComponent } from 'vue'
+import { GDialog } from 'plugin'
+
+import { useModelWrapper } from '@/composables/modelWrapper'
+
+import DialogToolbar from '@/components/Dialog/DialogToolbar.vue'
+
+export default defineComponent({
+  name: 'BaseDialog',
+  components: {
+    GDialog,
+    DialogToolbar,
+  },
+
+  props: {
+    modelValue: {
+      type: Boolean,
+      default: false,
+    },
+  },
+
+  emits: ['update:modelValue'],
+
+  setup(props, { emit }) {
+    const value = useModelWrapper(props, emit)
+
+    const onClose = () => {
+      value.value = false
+    }
+
+    return {
+      value,
+      onClose,
+    }
+  },
+})
+</script>

demo/src/components/Layout/DialogLayout.vue

@@ -1,9 +1,10 @@
 <template>
-  <div class="flex wrap">
+  <div
+    grid="inline gap-3 auto-cols-auto flow-col"
+  >
     <DialogStateWrapper
       v-slot="{model, input}"
       label="Base"
-      class="mr-3"
     >
       <BaseDialog :model-value="model" @update:model-value="input" />
     </DialogStateWrapper>
@@ -14,20 +15,29 @@
     >
       <StyledDialog :model-value="model" @update:model-value="input" />
     </DialogStateWrapper>
+
+    <DialogStateWrapper
+      v-slot="{model, input}"
+      label="Scroll"
+    >
+      <ScrollDialog :model-value="model" @update:model-value="input" />
+    </DialogStateWrapper>
   </div>
 </template>
 
 <script lang="ts">
 import DialogStateWrapper from '@/components/Dialog/DialogStateWrapper.vue'
 import BaseDialog from '@/components/Dialogs/BaseDialog/BaseDialog.vue'
 import StyledDialog from '@/components/Dialogs/StyledDialog/StyledDialog.vue'
+import ScrollDialog from '@/components/Dialogs/ScrollDialog/ScrollDialog.vue'
 
 export default {
   name: 'DialogLayout',
   components: {
     DialogStateWrapper,
     BaseDialog,
     StyledDialog,
+    ScrollDialog,
   },
 
   setup() {},

demo/yarn.lock

@@ -322,11 +322,6 @@ bluebird@^3.7.2:
   resolved "https://registry.yarnpkg.com/bluebird/-/bluebird-3.7.2.tgz#9f229c15be272454ffa973ace0dbee79a1b0c36f"
   integrity sha512-XpNj6GDQzdfW+r2Wnn7xiSAd7TM3jzkxGXBGTtWKuSXv1xUV+azxAm8jdWZN06QTQk+2N2XB9jRDkvbmQmcRtg==
 
-body-scroll-lock@^4.0.0-beta.0:
-  version "4.0.0-beta.0"
-  resolved "https://registry.yarnpkg.com/body-scroll-lock/-/body-scroll-lock-4.0.0-beta.0.tgz#4f78789d10e6388115c0460cd6d7d4dd2bbc4f7e"
-  integrity sha512-a7tP5+0Mw3YlUJcGAKUqIBkYYGlYxk2fnCasq/FUph1hadxlTRjF+gAcZksxANnaMnALjxEddmSi/H3OR8ugcQ==
-
 braces@^3.0.1:
   version "3.0.2"
   resolved "https://registry.yarnpkg.com/braces/-/braces-3.0.2.tgz#3454e1a462ee8d599e236df336cd9ea4f8afe107"
@@ -520,12 +515,10 @@ get-intrinsic@^1.0.2:
     has "^1.0.3"
     has-symbols "^1.0.1"
 
-gitart-vue-dialog@^0.0.12:
-  version "0.0.12"
-  resolved "https://registry.yarnpkg.com/gitart-vue-dialog/-/gitart-vue-dialog-0.0.12.tgz#829b524691fc4f678827dbdacb01a1123964a8dc"
-  integrity sha512-3ix8ovWe+cJpGXWobx49TuCu2pGDt1sFSIcr4Zkhx133fZqWWYzyr+hbhVTj46OKGdI3Wb1ki2pq+PnDeqUFMA==
-  dependencies:
-    body-scroll-lock "^4.0.0-beta.0"
+gitart-vue-dialog@0.0.14:
+  version "0.0.14"
+  resolved "https://registry.yarnpkg.com/gitart-vue-dialog/-/gitart-vue-dialog-0.0.14.tgz#321a301b9db6df07941ab84a2b44027a454ff699"
+  integrity sha512-RlVLe0YDttF3aimasnK9p97XqM5pKrDlJfZ6r37JoB2cqB2c+x9UlRkcrbvLgQCCuNybh4dJSPsD3qaUTV6xpg==
 
 glob-parent@^5.1.2:
   version "5.1.2"