feat: upgrade component example on the site

- add balm-ui
- add tsconfig
- setup viewing code of the example component

Author: MichaelGitArt

docs/package.json

@@ -12,10 +12,13 @@
     "serve": "vitepress serve src"
   },
   "devDependencies": {
+    "@types/prismjs": "^1.16.6",
     "vitepress": "^0.16.1"
   },
   "dependencies": {
+    "@mdi/js": "^5.9.55",
     "@vueuse/core": "^6.0.0",
+    "balm-ui": "9.36.0",
     "gitart-vue-dialog": "^0.2.0-alpha.3",
     "prismjs": "^1.24.1",
     "sass": "^1.38.0"

docs/shims-vue.d.ts

@@ -0,0 +1,6 @@
+declare module '*.vue' {
+  import { DefineComponent } from 'vue'
+
+  const component: DefineComponent<{}, {}, any>
+  export default component
+}

docs/src/.vitepress/theme/_var.scss

@@ -0,0 +1 @@
+$primary: #8f6cf9;

docs/src/.vitepress/theme/custom.css

@@ -0,0 +1,6 @@
+@import './var';
+
+:root {
+  --c-brand: #{$primary};
+  --c-brand-light: #{lighten($primary, 5%)};
+}

docs/src/.vitepress/theme/custom.scss

@@ -1,18 +1,40 @@
 import DefaultTheme from 'vitepress/theme'
+
+// BalmUI
+import UiButton from 'balm-ui/components/button'
+import UiTabsComponents from 'balm-ui/components/tabs'
+
+import 'balm-ui/components/core.css'
+import 'balm-ui/components/button/button.css'
+import 'balm-ui/components/tabs/tabs.css'
+
+import $theme from 'balm-ui/plugins/theme'
+
+// Gitart Dialog
 import { GDialog } from 'gitart-vue-dialog/dist/server'
 import 'gitart-vue-dialog/dist/style.css'
-import './custom.css'
 
-import BaseBtn from '@/components/Components/BaseBtn.vue'
-import BtnWrapper from '@/components/Components/BtnWrapper.vue'
-import Example from '@/components/Components/Example.vue'
+import './custom.scss'
+
+import ButtonWrapper from '@/components/Components/ButtonWrapper.vue'
+import Example from '@/components/Components/Example/Example.vue'
 
 export default {
   ...DefaultTheme,
   enhanceApp({ app }) {
+
+    app.use($theme, {
+      primary: '#8f6cf9',
+      'on-primary': '#fff',
+    })
+
+    app.use(UiButton, {
+      raised: true,
+    })
+    app.use(UiTabsComponents)
+
     app.component('GDialog', GDialog)
-    app.component('BaseBtn', BaseBtn)
-    app.component('BtnWrapper', BtnWrapper)
+    app.component('ButtonWrapper', ButtonWrapper)
     app.component('Example', Example)
   },
 }

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

@@ -4,18 +4,20 @@
   </div>
 </template>
 
-<script>
+<script lang="ts">
 export default {
   name: 'BtnWrapper',
 }
 </script>
 
 <style lang="scss">
+@import '@/.vitepress/theme/var';
+
 .btn-wrapper {
   padding: 30px;
   border-radius: 4px;
   display: flex;
   justify-content: center;
-  background: #8f6cf92f;
+  background: rgba($primary, 0.2);
 }
 </style>

docs/src/components/Components/BaseBtn.vue

@@ -33,7 +33,7 @@ export default defineComponent({
         h('code', {
           ...attrs,
           class: [attrs.class, className],
-          innerHTML: Prism.highlight(code.value, prismLanguage),
+          innerHTML: Prism.highlight(code.value, prismLanguage, language.value),
         }),
       ],
     )