feat(docs): add tabs for vue script (option/composition)

Author: MichaelGitArt

docs/package.json

@@ -20,6 +20,7 @@
     "@vueuse/core": "^6.0.0",
     "balm-ui": "9.36.0",
     "gitart-vue-dialog": "^0.2.0-alpha.3",
+    "markdown-it-container": "^3.0.0",
     "prismjs": "^1.24.1",
     "sass": "^1.38.0"
   }

docs/src/.vitepress/config.js

@@ -1,5 +1,8 @@
 /* eslint-disable @typescript-eslint/no-var-requires */
 const path = require('path')
+const mdContainerPlugin = require('markdown-it-container')
+
+console.log('🚀 ~ file: config.js ~ line 4 ~ mdContainerPlugin', mdContainerPlugin)
 
 module.exports = {
   vite: {
@@ -26,6 +29,55 @@ module.exports = {
     ['link', { rel: 'icon', href: '/favicon.png' }],
   ],
 
+  markdown: {
+    config: md => {
+
+      /**
+       * ::: vue-slot composition
+       * CONTENT
+       * :::
+       */
+      md.use(mdContainerPlugin, 'vue-slot', {
+        render(tokens, idx) {
+          const token = tokens[idx]
+
+          if (token.nesting === 1) {
+            const slotName = token.info.split(' ')[2]
+
+            return `<template #${slotName}>`
+          }
+
+          return '</template>'
+        },
+      })
+
+      /**
+       * ))) method-switch
+       *
+       * ::: vue-slot composition
+       * CONTENT
+       * :::
+       * ::: vue-slot option
+       * CONTENT
+       * :::
+       *
+       * )))
+       */
+      md.use(mdContainerPlugin, 'method-switch', {
+        marker: ')',
+        render(tokens, idx) {
+          const token = tokens[idx]
+
+          if (token.nesting === 1) {
+            return '<MethodSwitch>'
+          }
+
+          return '</MethodSwitch>'
+        },
+      })
+    },
+  },
+
   themeConfig: {
     lastUpdated: 'Last Updated',
     displayAllHeaders: true,
@@ -78,7 +130,8 @@ function getGuideSidebar() {
       text: 'Components',
       children: [
         { text: 'GDialog', link: '/docs/components/g-dialog' },
+        { text: 'GDialogRoot', link: '/docs/components/g-dialog-root' },
       ],
     },
   ]
-}
+}

docs/src/.vitepress/includes/minumal-working-example/YourComponent.html

@@ -18,6 +18,7 @@ import './custom.scss'
 
 import ButtonWrapper from '@/components/Components/ButtonWrapper.vue'
 import Example from '@/components/Components/Example/Example.vue'
+import MethodSwitch from '@/components/Components/MethodSwitch.vue'
 
 export default {
   ...DefaultTheme,
@@ -36,5 +37,6 @@ export default {
     app.component('GDialog', GDialog)
     app.component('ButtonWrapper', ButtonWrapper)
     app.component('Example', Example)
+    app.component('MethodSwitch', MethodSwitch)
   },
 }

docs/src/.vitepress/includes/minumal-working-example/YourComponent.js

@@ -0,0 +1,65 @@
+<template>
+  <div class="method-switch">
+    <UiTabBar
+      v-model="activeTab"
+      align="start"
+    >
+      <UiTab
+        v-for="({key, label}) in tabs"
+        :key="key"
+        min-width
+      >
+        {{ label }}
+      </UiTab>
+    </UiTabBar>
+
+    <div class="method-switch__slot">
+      <slot :name="activeTabKey" />
+    </div>
+  </div>
+</template>
+
+<script lang="ts">
+import { computed, defineComponent, ref } from 'vue'
+
+export default defineComponent({
+  name: 'MethodSwitch',
+
+  setup() {
+    const activeTab = ref(0)
+    const tabs = [
+      {
+        label: 'Composition API',
+        key: 'composition',
+      },
+      {
+        label: 'Option API',
+        key: 'option',
+      },
+    ]
+
+    const activeTabKey = computed(() => tabs[activeTab.value].key)
+
+    return {
+      tabs,
+      activeTab,
+      activeTabKey,
+    }
+  },
+})
+</script>
+
+<style lang="scss">
+.method-switch {
+  border: 1px solid rgba(0, 0, 0, 0.12);
+  margin: 1em 0;
+  border-radius: 6px;
+  overflow: hidden;
+
+  .language-js {
+    margin: 0;
+    border-top-left-radius: 0;
+    border-top-right-radius: 0;
+  }
+}
+</style>

docs/src/.vitepress/includes/minumal-working-example/main.js

@@ -0,0 +1,12 @@
+# GDialogRoot
+
+```js
+import { GDialogRoot } from 'gitart-vue-dialog'
+```
+
+Put `GDialogRoot` into your root component (App.vue)
+
+::: warning
+Remember GDialogRoot just render dialogs added by `$dialog.addDialog()`.
+No props, no slots, no events
+:::

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

@@ -1,3 +1,30 @@
 # GDialog
 
-...
+```js
+import { GDialog } from 'gitart-vue-dialog'
+```
+
+## Props
+
+| Name | Type | Default | Description |
+|:---|:---|:---|:---|
+| model-value | `boolean` | `false` | v-model props to activate and deactivate the dialog |
+| persistent | `boolean` | `false` | Makes clicking outside of the element will not deactivate the dialog |
+| max-width | `string,` `number` | `'none'` | Sets max-width for the dialog |
+| width | `string,` `number` | `'auto'` | Sets width for the dialog |
+| height | `string`, `number` | `'auto'` | Sets height for the dialog |
+| depressed | `boolean` | `false` | Disables default box-shadow |
+| contentClass | `string` | `''` | Applies to the div that wraps the main slot |
+
+## Slots
+
+| Name | Description |
+|:---|:---|
+| default | The default Vue slot
+
+
+## Events
+
+| Name | Payload | Description |
+|:---|:---|:---|
+| `update:modelValue` | `boolean` | runs with `false` after clicking outside