From 72e7943f517ec2ffd6944a185e622dadc3f74f50 Mon Sep 17 00:00:00 2001
From: khairulhaaziq <rhycoz@yahoo.com>
Date: Sun, 16 Jul 2023 02:38:13 +0800
Subject: [PATCH] separator

---
 docs/content/components/separator.md    | 34 ++++++++++++-------------
 docs/content/components/slider.md       |  7 +++++
 docs/content/components/switch.md       |  7 +++++
 docs/content/components/tabs.md         |  7 +++++
 docs/content/components/toggle-group.md |  7 +++++
 docs/content/components/toggle.md       |  7 +++++
 docs/content/components/toolbar.md      |  7 +++++
 7 files changed, 58 insertions(+), 18 deletions(-)

diff --git a/docs/content/components/separator.md b/docs/content/components/separator.md
index 8e14b5eae..d2282c89a 100644
--- a/docs/content/components/separator.md
+++ b/docs/content/components/separator.md
@@ -52,10 +52,14 @@ npm install radix-vue
 
 Import all parts and piece them together.
 
-```jsx
-import * as Separator from 'radix-vue';
+```vue
+<script setup>
+import { Separator } from "radix-vue";
+</script>
 
-export default () => <Separator.Root />;
+<template>
+  <Separator />
+</template>
 ```
 
 ## API Reference
@@ -63,9 +67,9 @@ export default () => <Separator.Root />;
 ### Root
 
 The separator.
-```
+
 <PropsTable
-  data={[
+  :data="[
     {
       name: 'asChild',
       required: false,
@@ -75,34 +79,28 @@ The separator.
     },
     {
       name: 'orientation',
-      type: '"horizontal" | "vertical"',
+      type: '&quot;horizontal&quot; | &quot;vertical&quot;',
       typeSimple: 'enum',
-      default: '"horizontal"',
+      default: '&quot;horizontal&quot;',
       description: 'The orientation of the separator.',
     },
     {
       name: 'decorative',
       type: 'boolean',
-      description: (
-        <span>
-          When <Code>true</Code>, signifies that it is purely visual, carries no
-          semantic meaning, and ensures it is not present in the accessibility
-          tree.
-        </span>
-      ),
+      description: '<span> When <Code>true</Code>, signifies that it is purely visual, carries no semantic meaning, and ensures it is not present in the accessibility tree.</span>',
     },
-  ]}
+  ]"
 />
 
 <DataAttributesTable
-  data={[
+  :data="[
     {
       attribute: '[data-orientation]',
       values: ['vertical', 'horizontal'],
     },
-  ]}
+  ]"
 />
-```
+
 ## Accessibility
 
 Adheres to the [`separator` role requirements](https://www.w3.org/TR/wai-aria-1.2/#separator).
\ No newline at end of file
diff --git a/docs/content/components/slider.md b/docs/content/components/slider.md
index 76aeb0089..c29c38efa 100644
--- a/docs/content/components/slider.md
+++ b/docs/content/components/slider.md
@@ -62,6 +62,13 @@ npm install radix-vue
 Import all parts and piece them together.
 
 ```jsx
+<script setup>
+import { Separator } from "radix-vue";
+</script>
+
+<template>
+  <Separator />
+</template>
 import * as Slider from 'radix-vue';
 
 export default () => (
diff --git a/docs/content/components/switch.md b/docs/content/components/switch.md
index 52b8e0be6..93cf7f592 100644
--- a/docs/content/components/switch.md
+++ b/docs/content/components/switch.md
@@ -55,6 +55,13 @@ npm install radix-vue
 Import all parts and piece them together.
 
 ```jsx
+<script setup>
+import { Separator } from "radix-vue";
+</script>
+
+<template>
+  <Separator />
+</template>
 import * as Switch from 'radix-vue';
 
 export default () => (
diff --git a/docs/content/components/tabs.md b/docs/content/components/tabs.md
index 8bd9cd4ec..92a242a60 100644
--- a/docs/content/components/tabs.md
+++ b/docs/content/components/tabs.md
@@ -60,6 +60,13 @@ npm install radix-vue
 Import all parts and piece them together.
 
 ```jsx
+<script setup>
+import { Separator } from "radix-vue";
+</script>
+
+<template>
+  <Separator />
+</template>
 import * as Tabs from 'radix-vue';
 
 export default () => (
diff --git a/docs/content/components/toggle-group.md b/docs/content/components/toggle-group.md
index de3ad8ff4..0fabfeafc 100644
--- a/docs/content/components/toggle-group.md
+++ b/docs/content/components/toggle-group.md
@@ -61,6 +61,13 @@ npm install radix-vue
 Import the component.
 
 ```jsx
+<script setup>
+import { Separator } from "radix-vue";
+</script>
+
+<template>
+  <Separator />
+</template>
 import * as ToggleGroup from 'radix-vue';
 
 export default () => (
diff --git a/docs/content/components/toggle.md b/docs/content/components/toggle.md
index 9625bbbca..42302c3fd 100644
--- a/docs/content/components/toggle.md
+++ b/docs/content/components/toggle.md
@@ -55,6 +55,13 @@ npm install radix-vue
 Import the component.
 
 ```vue
+<script setup>
+import { Separator } from "radix-vue";
+</script>
+
+<template>
+  <Separator />
+</template>
 import * as Toggle from 'radix-vue';
 
 export default () => <Toggle.Root />;
diff --git a/docs/content/components/toolbar.md b/docs/content/components/toolbar.md
index 7317e696c..73e9784a6 100644
--- a/docs/content/components/toolbar.md
+++ b/docs/content/components/toolbar.md
@@ -55,6 +55,13 @@ npm install radix-vue
 Import the component.
 
 ```jsx
+<script setup>
+import { Separator } from "radix-vue";
+</script>
+
+<template>
+  <Separator />
+</template>
 import * as Toolbar from 'radix-vue';
 
 export default () => (