docs: add slot documentation for Controls

docs/src/.vuepress/theme/index.ts

@@ -11,18 +11,15 @@ function capitalize(str: string) {
 }
 
 const typedocSidebarEntries = (): SidebarConfigArray => {
-  const filePath = resolve(
+  const filePath = resolve(__dirname, '../../typedocs')
-    __dirname,
-    '../../typedocs'
-  )
 
-  const docsModules = readdirSync(filePath).filter(name => statSync(`${filePath}/${name}`).isDirectory())
+  const docsModules = readdirSync(filePath).filter((name) => statSync(`${filePath}/${name}`).isDirectory())
 
-  const sidebarItems = docsModules.map(module => {
+  const sidebarItems = docsModules.map((module) => {
     let children = readdirSync(`${filePath}/${module}/`).map(entry => `/typedocs/${module}/${entry}`)
 
     if (module === 'variables') {
-      children = children.filter(child => {
+      children = children.filter((child) => {
         return child.includes('default')
       })
     }
@@ -30,15 +27,7 @@ const typedocSidebarEntries = (): SidebarConfigArray => {
     return { text: capitalize(module), children }
   })
 
-  return [
+  return [...sidebarItems]
-    {
-      text: 'TypeDocs',
-      link: '/typedocs/',
-      children: [
-        ...sidebarItems,
-      ],
-    }
-  ]
 }
 
 export default {
@@ -100,7 +89,7 @@ export default {
       '/typedocs/': typedocSidebarEntries(),
     },
     navbar: [
-      { text: `v${vueFlowVersion.value}`, link: '' },
+      { text: `v${vueFlowVersion.value}`, link: '/' },
       { text: 'Guide', link: '/guide/', activeMatch: '^/guide/' },
       {
         text: 'Examples',

docs/src/guide/components/controls.md

@@ -32,3 +32,28 @@ To use the controls simply pass the `Controls` component as a child to the `VueF
 | zoom-out           | Zoom-out btn clicked        |
 | fit-view           | Fit-view btn clicked        |
 | interaction-change | Interaction locked/unlocked |
+
+## Slots
+
+### Control Buttons
+
+| Name                | Definition              |
+|---------------------|-------------------------|
+| top                 | slot above default btns |
+| control-zoom-in     | Zoom-in btn             |
+| control-zoom-out    | Zoom-out btn            |
+| control-fit-view    | Fit-view btn            |
+| control-interaction | Interaction btn         |
+| default             | slot below default btns |
+
+### Icons
+
+| Name          | Definition                |
+|---------------|---------------------------|
+| icon-zoom-in  | Zoom-in icon              |
+| icon-zoom-out | Zoom-out icon             |
+| icon-fit-view | Fit-view icon             |
+| icon-lock     | Interaction locked icon   |
+| icon-unlock   | Interaction unlocked icon |
+
+