feat(demo): add fullscreen example

Author: MichaelGitArt

demo/src/components/Dialogs/FullscreenDialog/FullscreenDialog.vue

@@ -0,0 +1,79 @@
+<template>
+  <GDialog
+    v-model="value"
+    fullscreen
+  >
+    <div
+      bg="gray-50"
+      min-h="full"
+    >
+      <DialogToolbar @close="onClose">
+        <h4>
+          Fullscreen Dialog
+        </h4>
+      </DialogToolbar>
+
+      <div p="x-5 y-4">
+        <BooleanSwitch
+          v-model="longContent"
+          label="Long Content"
+        />
+
+        <div
+          v-if="longContent"
+          bg="purple-500"
+          font="semibold"
+          h="screen"
+          p="6"
+          rounded="md"
+          text="xl white"
+        >
+          Long Content
+        </div>
+      </div>
+    </div>
+  </GDialog>
+</template>
+
+<script lang="ts">
+import { defineComponent, ref } from 'vue'
+import { useVModel } from '@vueuse/core'
+import { GDialog } from 'plugin'
+
+import DialogToolbar from '@/components/Dialog/DialogToolbar.vue'
+import BooleanSwitch from '@/components/PropControls/BooleanSwitch/BooleanSwitch.vue'
+
+export default defineComponent({
+  name: 'FullscreenDialog',
+  components: {
+    GDialog,
+    DialogToolbar,
+    BooleanSwitch,
+  },
+
+  props: {
+    modelValue: {
+      type: Boolean,
+      default: false,
+    },
+  },
+
+  emits: ['update:modelValue'],
+
+  setup(props, { emit }) {
+    const value = useVModel(props, 'modelValue', emit)
+    const onClose = () => {
+      value.value = false
+    }
+
+    const longContent = ref(false)
+
+    return {
+      value,
+      onClose,
+
+      longContent,
+    }
+  },
+})
+</script>

demo/src/components/Layout/DialogLayout.vue

@@ -30,6 +30,16 @@
         @update:model-value="input"
       />
     </DialogStateWrapper>
+
+    <DialogStateWrapper
+      v-slot="{model, input}"
+      label="Fullscreen"
+    >
+      <FullscreenDialog
+        :model-value="model"
+        @update:model-value="input"
+      />
+    </DialogStateWrapper>
   </ButtonGrid>
 </template>
 
@@ -42,6 +52,7 @@ import ButtonGrid from '@/components/Layout/ButtonGrid.vue'
 const BaseDialog = defineAsyncComponent(() => import('@/components/Dialogs/BaseDialog/BaseDialog.vue'))
 const StyledDialog = defineAsyncComponent(() => import('@/components/Dialogs/StyledDialog/StyledDialog.vue'))
 const ScrollDialog = defineAsyncComponent(() => import('@/components/Dialogs/ScrollDialog/ScrollDialog.vue'))
+const FullscreenDialog = defineAsyncComponent(() => import('@/components/Dialogs/FullscreenDialog/FullscreenDialog.vue'))
 
 export default defineComponent({
   name: 'DialogLayout',
@@ -51,6 +62,7 @@ export default defineComponent({
     BaseDialog,
     StyledDialog,
     ScrollDialog,
+    FullscreenDialog,
   },
 
   setup() {},