Moved imports to composition

apps/volt/doc/avatar/ImportDoc.vue

@@ -3,13 +3,10 @@
     <DocSectionCode :code="code" lang="script" />
 </template>
 
-<script>
-export default {
-    data() {
-        return {
-            code: `import InputText from '@/volt/inputtext';
-`
-        };
-    }
-};
+<script setup>
+import { ref } from 'vue';
+
+const code = ref(`import Avatar from '@/volt/avatar';
+import AvatarGroup from '@/volt/avatargroup';
+`);
 </script>

apps/volt/doc/badge/ImportDoc.vue

@@ -3,14 +3,10 @@
     <DocSectionCode :code="code" lang="script" />
 </template>
 
-<script>
-export default {
-    data() {
-        return {
-            code: `import Badge from '@/volt/badge';
+<script setup>
+import { ref } from 'vue';
+
+const code = ref(`import Badge from '@/volt/badge';
 import OverlayBadge from '@/volt/overlaybadge';
-`
-        };
-    }
-};
+`);
 </script>

apps/volt/doc/button/ImportDoc.vue

@@ -3,16 +3,12 @@
     <DocSectionCode :code="code" lang="script" />
 </template>
 
-<script>
-export default {
-    data() {
-        return {
-            code: `import Button from '@/volt/button';
+<script setup>
+import { ref } from 'vue';
+
+const code = ref(`import Button from '@/volt/button';
 import SecondaryButton from '@/volt/button/secondary';
 import ContrastButton from '@/volt/button/contrast';
 import DangerButton from '@/volt/button/danger';
-`
-        };
-    }
-};
+`);
 </script>

apps/volt/doc/card/ImportDoc.vue

@@ -3,13 +3,9 @@
     <DocSectionCode :code="code" lang="script" />
 </template>
 
-<script>
-export default {
-    data() {
-        return {
-            code: `import Card from '@/volt/card';
-`
-        };
-    }
-};
+<script setup>
+import { ref } from 'vue';
+
+const code = ref(`import Card from '@/volt/card';
+`);
 </script>

apps/volt/doc/checkbox/ImportDoc.vue

@@ -3,13 +3,9 @@
     <DocSectionCode :code="code" lang="script" />
 </template>
 
-<script>
-export default {
-    data() {
-        return {
-            code: `import Checkbox from '@/volt/checkbox';
-`
-        };
-    }
-};
+<script setup>
+import { ref } from 'vue';
+
+const code = ref(`import Checkbox from '@/volt/checkbox';
+`);
 </script>

apps/volt/doc/chip/ImportDoc.vue

@@ -3,14 +3,9 @@
     <DocSectionCode :code="code" lang="script" />
 </template>
 
-<script>
-export default {
-    data() {
-        return {
-            code: `
-import Chip from '@/volt/chip';
-`
-        };
-    }
-};
+<script setup>
+import { ref } from 'vue';
+
+const code = ref(`import Chip from '@/volt/chip';
+`);
 </script>

apps/volt/doc/divider/ImportDoc.vue

@@ -3,13 +3,9 @@
     <DocSectionCode :code="code" lang="script" />
 </template>
 
-<script>
-export default {
-    data() {
-        return {
-            code: `import Divider from '@/volt/divider';
-`
-        };
-    }
-};
+<script setup>
+import { ref } from 'vue';
+
+const code = ref(`import Divider from '@/volt/divider';
+`);
 </script>

apps/volt/doc/inputmask/ImportDoc.vue

@@ -3,13 +3,9 @@
     <DocSectionCode :code="code" lang="script" />
 </template>
 
-<script>
-export default {
-    data() {
-        return {
-            code: `import InputMask from '@/volt/inputmask';
-`
-        };
-    }
-};
+<script setup>
+import { ref } from 'vue';
+
+const code = ref(`import InputMask from '@/volt/inputmask';
+`);
 </script>

apps/volt/doc/inputnumber/ImportDoc.vue

@@ -3,13 +3,9 @@
     <DocSectionCode :code="code" lang="script" />
 </template>
 
-<script>
-export default {
-    data() {
-        return {
-            code: `import InputNumber from '@/volt/inputnumber';
-`
-        };
-    }
-};
+<script setup>
+import { ref } from 'vue';
+
+const code = ref(`import InputNumber from '@/volt/inputnumber';
+`);
 </script>

apps/volt/doc/inputtext/ImportDoc.vue

@@ -3,13 +3,9 @@
     <DocSectionCode :code="code" lang="script" />
 </template>
 
-<script>
-export default {
-    data() {
-        return {
-            code: `import InputText from '@/volt/inputtext';
-`
-        };
-    }
-};
+<script setup>
+import { ref } from 'vue';
+
+const code = ref(`import InputText from '@/volt/inputtext';
+`);
 </script>

apps/volt/doc/progressbar/ImportDoc.vue

@@ -3,13 +3,9 @@
     <DocSectionCode :code="code" lang="script" />
 </template>
 
-<script>
-export default {
-    data() {
-        return {
-            code: `import ProgressBar from '@/volt/progressbar';
-`
-        };
-    }
-};
+<script setup>
+import { ref } from 'vue';
+
+const code = ref(`import ProgressBar from '@/volt/progressbar';
+`);
 </script>

apps/volt/doc/radiobutton/ImportDoc.vue

@@ -3,13 +3,9 @@
     <DocSectionCode :code="code" lang="script" />
 </template>
 
-<script>
-export default {
-    data() {
-        return {
-            code: `import RadioButton from '@/volt/radiobutton';
-`
-        };
-    }
-};
+<script setup>
+import { ref } from 'vue';
+
+const code = ref(`import RadioButton from '@/volt/radiobutton';
+`);
 </script>

apps/volt/doc/rating/ImportDoc.vue

@@ -3,13 +3,9 @@
     <DocSectionCode :code="code" lang="script" />
 </template>
 
-<script>
-export default {
-    data() {
-        return {
-            code: `import Rating from '@/volt/rating';
-`
-        };
-    }
-};
+<script setup>
+import { ref } from 'vue';
+
+const code = ref(`import Rating from '@/volt/rating';
+`);
 </script>

apps/volt/doc/selectbutton/ImportDoc.vue

@@ -3,13 +3,9 @@
     <DocSectionCode :code="code" lang="script" />
 </template>
 
-<script>
-export default {
-    data() {
-        return {
-            code: `import SelectButton from '@/volt/selectbutton';
-`
-        };
-    }
-};
+<script setup>
+import { ref } from 'vue';
+
+const code = ref(`import SelectButton from '@/volt/selectbutton';
+`);
 </script>

apps/volt/doc/skeleton/ImportDoc.vue

@@ -3,13 +3,9 @@
     <DocSectionCode :code="code" lang="script" />
 </template>
 
-<script>
-export default {
-    data() {
-        return {
-            code: `import Skeleton from '@/volt/skeleton';
-`
-        };
-    }
-};
+<script setup>
+import { ref } from 'vue';
+
+const code = ref(`import Skeleton from '@/volt/skeleton';
+`);
 </script>

apps/volt/doc/slider/ImportDoc.vue

@@ -3,13 +3,9 @@
     <DocSectionCode :code="code" lang="script" />
 </template>
 
-<script>
-export default {
-    data() {
-        return {
-            code: `import Slider from '@/volt/slider';
-`
-        };
-    }
-};
+<script setup>
+import { ref } from 'vue';
+
+const code = ref(`import Slider from '@/volt/slider';
+`);
 </script>

apps/volt/doc/textarea/ImportDoc.vue

@@ -3,13 +3,9 @@
     <DocSectionCode :code="code" lang="script" />
 </template>
 
-<script>
-export default {
-    data() {
-        return {
-            code: `import Textarea from '@/volt/textarea';
-`
-        };
-    }
-};
+<script setup>
+import { ref } from 'vue';
+
+const code = ref(`import Textarea from '@/volt/textarea';
+`);
 </script>

apps/volt/doc/timeline/ImportDoc.vue

@@ -3,13 +3,9 @@
     <DocSectionCode :code="code" lang="script" />
 </template>
 
-<script>
-export default {
-    data() {
-        return {
-            code: `import Timeline from '@/volt/timeline';
-`
-        };
-    }
-};
+<script setup>
+import { ref } from 'vue';
+
+const code = ref(`import Timeline from '@/volt/timeline';
+`);
 </script>

apps/volt/doc/togglebutton/ImportDoc.vue

@@ -3,13 +3,9 @@
     <DocSectionCode :code="code" lang="script" />
 </template>
 
-<script>
-export default {
-    data() {
-        return {
-            code: `import ToggleButton from '@/volt/togglebutton';
-`
-        };
-    }
-};
+<script setup>
+import { ref } from 'vue';
+
+const code = ref(`import ToggleButton from '@/volt/togglebutton';
+`);
 </script>

apps/volt/doc/toggleswitch/ImportDoc.vue

@@ -3,13 +3,9 @@
     <DocSectionCode :code="code" lang="script" />
 </template>
 
-<script>
-export default {
-    data() {
-        return {
-            code: `import ToggleSwitch from '@/volt/toggleswitch';
-`
-        };
-    }
-};
+<script setup>
+import { ref } from 'vue';
+
+const code = ref(`import ToggleSwitch from '@/volt/toggleswitch';
+`);
 </script>