fix(docs): fix inline vue components

Author: MichaelGitArt

docs/src/.vitepress/components/Base/BaseBtn.vue renamed to docs/src/.vitepress/components/Components/BaseBtn.vue

@@ -13,7 +13,7 @@ export default {
 }
 </script>
 
-<style lang="scss" scoped>
+<style lang="scss">
 .base-btn {
   cursor: pointer;
   display: inline-block;

docs/src/.vitepress/components/Layout/BtnWrapper.vue renamed to docs/src/.vitepress/components/Components/BtnWrapper.vue

@@ -10,7 +10,7 @@ export default {
 }
 </script>
 
-<style lang="scss" scoped>
+<style lang="scss">
 .btn-wrapper {
   padding: 30px;
   border-radius: 4px;

docs/src/.vitepress/components/Dialogs/Guide/BaseDialog.vue

@@ -0,0 +1,42 @@
+<template>
+  <GDialog v-model="value">
+    Content
+  </GDialog>
+  
+  <BtnWrapper>
+    <BaseBtn @click="onOpen">
+      Open Dialog
+    </BaseBtn>
+  </BtnWrapper>
+</template>
+
+<script>
+import {ref, computed} from 'vue'
+
+export default {
+  name: 'base-dialog',
+
+  setup() {
+    const dialogState = ref(false)
+    
+    const value = computed({
+      get() {
+        return dialogState.value
+      },
+      set(val) {
+        dialogState.value = val
+      }
+    })
+
+    const onOpen = ()=>{
+      value.value = true
+    }
+
+    return {
+      value,
+      onOpen
+    }
+  },
+}
+</script>
+

docs/src/.vitepress/components/Dialogs/Guide/BaseStyledDialog.vue

@@ -0,0 +1,51 @@
+<template>
+  <GDialog v-model="value" max-width="500">
+    <div class="getting-started-example-styled">
+      Content
+    </div>
+  </GDialog>
+  
+  <BtnWrapper>
+    <BaseBtn @click="onOpen">
+      Open Dialog
+    </BaseBtn>
+  </BtnWrapper>
+</template>
+
+<script>
+import {ref, computed} from 'vue'
+
+export default {
+  name: 'base-dialog',
+
+  setup() {
+    const dialogState = ref(false)
+    
+    const value = computed({
+      get() {
+        return dialogState.value
+      },
+      set(val) {
+        dialogState.value = val
+      }
+    })
+
+    const onOpen = ()=>{
+      value.value = true
+    }
+
+    return {
+      value,
+      onOpen
+    }
+  },
+}
+</script>
+
+<style lang="scss">
+  .getting-started-example-styled {
+    padding: 30px;
+    background: #fff;
+  }
+</style>
+  

docs/src/.vitepress/components/GettingStartedExample.vue

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

docs/src/.vitepress/components/GettingStartedExampleStyled.vue

@@ -1,7 +1,4 @@
-<!-- <script setup>
-import BaseDialog from '@/.vitepress/components/Dialogs/Guide/BaseDialog.vue'
-import BaseStyledDialog from '@/.vitepress/components/Dialogs/Guide/BaseStyledDialog.vue'
-</script> -->
+
 
 ![Tux, the Linux mascot](/gitart-dialog-logo.svg)
 
@@ -34,8 +31,15 @@ Let's use standalone component (without installing plugin)
 <<< @/.vitepress/includes/minumal-working-example/YourComponent.js
 <<< @/.vitepress/includes/minumal-working-example/YourComponent.html
 
-<!-- <BaseDialog />
+<script setup>
+  import GettingStartedExample from '@/.vitepress/components/GettingStartedExample.vue'
+  import GettingStartedExampleStyled from '@/.vitepress/components/GettingStartedExampleStyled.vue'
+</script>
+
+<GettingStartedExample />
 
 Pretty **ugly** dialog, right? Let's add max-width, background and some padding. Take a look:
 
-<BaseStyledDialog /> -->
+<GettingStartedExampleStyled />
+
+Looks better. Here is more advanced [examples](https://michaelgitart.github.io/gitart-vue-dialog)