refactor: make dynamic import for examples

Author: MichaelGitArt

docs/src/.vitepress/components/Components/Example.vue

@@ -0,0 +1,46 @@
+<template>
+  <div>
+    <Component
+      :is="component"
+      v-if="component"
+      v-bind="{
+        ...$attrs,
+      }"
+    />
+  </div>
+</template>
+
+<script>
+import { defineComponent, shallowRef } from 'vue'
+
+export default defineComponent({
+  name: 'Example',
+  props: {
+    file: {
+      type: String,
+      required: true,
+    },
+  },
+
+  data: () => ({
+    component: null,
+  }),
+
+  created() {
+    this.load()
+  },
+
+  methods: {
+    async load() {
+      try {
+        const res = await import(`../Examples/${this.file}.vue`)
+        console.log('🚀 ~ file: Example.vue ~ line 38 ~ load ~ res2', res2)
+
+        this.component = shallowRef(res.default)
+      } catch (error) {
+        console.log('🚀 ~ file: Example.vue ~ line 32 ~ load ~ error', error)
+      }
+    },
+  },
+})
+</script>

docs/src/.vitepress/components/GettingStartedExample.vue renamed to docs/src/.vitepress/components/Examples/Introduction/GettingStartedExample.vue

@@ -14,7 +14,7 @@
 import { ref, computed } from 'vue'
 
 export default {
-  name: 'BaseDialog',
+  name: 'GettingStartedExample',
 
   setup() {
     const dialogState = ref(false)

docs/src/.vitepress/components/GettingStartedExampleStyled.vue renamed to docs/src/.vitepress/components/Examples/Introduction/GettingStartedExampleStyled.vue

@@ -16,7 +16,7 @@
 import { ref, computed } from 'vue'
 
 export default {
-  name: 'BaseDialog',
+  name: 'GettingStartedExampleStyled',
 
   setup() {
     const dialogState = ref(false)

docs/src/.vitepress/theme/index.js

@@ -1,16 +1,18 @@
 import DefaultTheme from 'vitepress/theme'
-import { GDialog } from 'gitart-vue-dialog'
+import { GDialog } from 'gitart-vue-dialog/dist/server'
 import 'gitart-vue-dialog/dist/style.css'
 import './custom.css'
 
 import BaseBtn from '@/.vitepress/components/Components/BaseBtn.vue'
 import BtnWrapper from '@/.vitepress/components/Components/BtnWrapper.vue'
+import Example from '@/.vitepress/components/Components/Example.vue'
 
 export default {
   ...DefaultTheme,
   enhanceApp({ app }) {
     app.component('GDialog', GDialog)
     app.component('BaseBtn', BaseBtn)
     app.component('BtnWrapper', BtnWrapper)
+    app.component('Example', Example)
   },
 }

docs/src/docs/introduction/getting-started.md

@@ -31,15 +31,10 @@ Let's use standalone component (without installing plugin)
 <<< @/.vitepress/includes/minumal-working-example/YourComponent.js
 <<< @/.vitepress/includes/minumal-working-example/YourComponent.html
 
-<script setup>
-  import GettingStartedExample from '@/.vitepress/components/GettingStartedExample.vue'
-  import GettingStartedExampleStyled from '@/.vitepress/components/GettingStartedExampleStyled.vue'
-</script>
-
-<GettingStartedExample />
+<Example file="Introduction/GettingStartedExample" />
 
 Pretty **ugly** dialog, right? Let's add max-width, background and some padding. Take a look:
 
-<GettingStartedExampleStyled />
+<Example file="Introduction/GettingStartedExampleStyled" />
 
-Looks better. Here is more advanced [examples](https://michaelgitart.github.io/gitart-vue-dialog)
+Looks better. Here is more advanced [examples](https://michaelgitart.github.io/gitart-vue-dialog)