TreeSelect demo fixes

doc/treeselect/BasicDoc.vue

@@ -14,6 +14,7 @@
 
 <script>
 import { NodeService } from '/service/NodeService';
+
 export default {
     data() {
         return {
@@ -30,6 +31,8 @@ export default {
 </template>
 
 <script>
+import { NodeService } from './service/NodeService';
+
 export default {
     data() {
         return {
@@ -51,6 +54,7 @@ export default {
 
 <script setup>
 import { ref, onMounted } from 'vue';
+import { NodeService } from './service/NodeService';
 
 const nodes = ref(null);
 const selectedValue = ref(null);

doc/treeselect/CheckboxDoc.vue

@@ -15,6 +15,7 @@
 
 <script>
 import { NodeService } from '/service/NodeService';
+
 export default {
     data() {
         return {
@@ -34,39 +35,42 @@ export default {
 <TreeSelect v-model="selectedValue" :options="nodes" selectionMode="checkbox" placeholder="Select Item" class="md:w-20rem w-full" />`,
                 options: `
 <template>
-<div class="card flex justify-content-center">
+    <div class="card flex justify-content-center">
-    <TreeSelect v-model="selectedValue" :options="nodes" selectionMode="checkbox" placeholder="Select Item" class="md:w-20rem w-full" />
+        <TreeSelect v-model="selectedValue" :options="nodes" selectionMode="checkbox" placeholder="Select Item" class="md:w-20rem w-full" />
-</div>
+    </div>
 </template>
 
 <script>
+import { NodeService } from './service/NodeService';
+
 export default {
-data() {
+    data() {
-    return {
+        return {
-        nodes: null,
+            nodes: null,
-        selectedValue: null,
+            selectedValue: null,
+        }
+    },
+    mounted() {
+        NodeService.getTreeNodes().then((data) => (this.nodes = data));
     }
-},
-mounted() {
-    NodeService.getTreeNodes().then((data) => (this.nodes = data));
-}
 }
 <\/script>`,
                 composition: `
 <template>
-<div class="card flex justify-content-center">
+    <div class="card flex justify-content-center">
-    <TreeSelect v-model="selectedValue" :options="nodes" selectionMode="checkbox" placeholder="Select Item" class="md:w-20rem w-full" />
+        <TreeSelect v-model="selectedValue" :options="nodes" selectionMode="checkbox" placeholder="Select Item" class="md:w-20rem w-full" />
-</div>
+    </div>
 </template>
 
 <script setup>
 import { ref, onMounted } from 'vue';
+import { NodeService } from './service/NodeService';
 
 const nodes = ref(null);
 const selectedValue = ref(null);
 
 onMounted(() => {
-NodeService.getTreeNodes().then((data) => (nodes.value = data));
+    NodeService.getTreeNodes().then((data) => (nodes.value = data));
 });
 <\/script>`,
                 data: `

doc/treeselect/DisabledDoc.vue

@@ -26,6 +26,8 @@ export default {
 </template>
 
 <script>
+import { NodeService } from './service/NodeService';
+
 export default {
     data() {
         return {
@@ -34,7 +36,7 @@ export default {
         }
     },
     mounted() {
-        NodeService.getTreeNodes().then((data) => (this.nodes     = data));
+        NodeService.getTreeNodes().then((data) => (this.nodes = data));
     }
 }
 <\/script>`,
@@ -47,6 +49,7 @@ export default {
 
 <script setup>
 import { ref, onMounted } from 'vue';
+import { NodeService } from './service/NodeService';
 
 const nodes = ref(null);
 const selectedValue = ref(null);

doc/treeselect/FloatLabelDoc.vue

@@ -13,6 +13,7 @@
 
 <script>
 import { NodeService } from '/service/NodeService';
+
 export default {
     data() {
         return {
@@ -33,6 +34,8 @@ export default {
 </template>
 
 <script>
+import { NodeService } from './service/NodeService';
+
 export default {
     data() {
         return {
@@ -56,6 +59,7 @@ export default {
 
 <script setup>
 import { ref, onMounted } from 'vue';
+import { NodeService } from './service/NodeService';
 
 const nodes = ref(null);
 const selectedValue = ref(null);

doc/treeselect/InvalidDoc.vue

@@ -10,6 +10,7 @@
 
 <script>
 import { NodeService } from '/service/NodeService';
+
 export default {
     data() {
         return {
@@ -26,16 +27,18 @@ export default {
 </template>
 
 <script>
+import { NodeService } from './service/NodeService';
+
 export default {
-data() {
+    data() {
-return {
+        return {
-    nodes: null,
+            nodes: null,
-    selectedValue: null,
+            selectedValue: null,
-}
+        }
-},
+    },
-mounted() {
+    mounted() {
-NodeService.getTreeNodes().then((data) => (this.nodes = data));
+        NodeService.getTreeNodes().then((data) => (this.nodes = data));
-}
+    }
 }
 <\/script>`,
                 composition: `
@@ -47,6 +50,7 @@ NodeService.getTreeNodes().then((data) => (this.nodes = data));
 
 <script setup>
 import { ref, onMounted } from 'vue';
+import { NodeService } from './service/NodeService';
 
 const nodes = ref(null);
 const selectedValue = ref(null);

doc/treeselect/MultipleDoc.vue

@@ -38,6 +38,8 @@ export default {
 </template>
 
 <script>
+import { NodeService } from './service/NodeService';
+
 export default {
     data() {
         return {
@@ -59,6 +61,7 @@ export default {
 
 <script setup>
 import { ref, onMounted } from 'vue';
+import { NodeService } from './service/NodeService';
 
 const nodes = ref(null);
 const selectedValue = ref(null);

doc/treeselect/form/VeeValidateDoc.vue

@@ -67,6 +67,7 @@ export default {
 import { useToast } from 'primevue/usetoast';
 import { useField, useForm } from 'vee-validate';
 import { NodeService } from '@/service/NodeService';
+
 export default {
     setup() {
         const { handleSubmit, resetForm } = useForm();

doc/treeselect/pt/PTDoc.vue

@@ -60,6 +60,8 @@ export default {
 </template>
 
 <script>
+import { NodeService } from './service/NodeService';
+
 export default {
     data() {
         return {
@@ -93,6 +95,7 @@ export default {
 
 <script setup>
 import { ref, onMounted } from 'vue';
+import { NodeService } from './service/NodeService';
 
 const nodes = ref(null);
 const selectedValue = ref(null);