From 4eb73f5df264d892ea675315383cc4e7bfeb8741 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Tu=C4=9F=C3=A7e=20K=C3=BC=C3=A7=C3=BCko=C4=9Flu?=
 <tugcekucukoglu.860@gmail.com>
Date: Thu, 9 Mar 2023 14:39:38 +0300
Subject: [PATCH] Demo fixes

---
 doc/datatable/ColumnGroupDoc.vue |  2 +-
 doc/datatable/ExportDoc.vue      |  4 +--
 doc/tabview/BasicDoc.vue         | 12 ++++----
 doc/tabview/ControlledDoc.vue    | 47 +++++++++++++++-----------------
 doc/tabview/DisabledDoc.vue      | 17 +++++-------
 doc/tabview/DynamicDoc.vue       | 13 ++++-----
 doc/tabview/ScrollableDoc.vue    | 13 ++++-----
 doc/tabview/TemplateDoc.vue      | 17 +++++-------
 8 files changed, 55 insertions(+), 70 deletions(-)

diff --git a/doc/datatable/ColumnGroupDoc.vue b/doc/datatable/ColumnGroupDoc.vue
index efb568e65..09a327500 100644
--- a/doc/datatable/ColumnGroupDoc.vue
+++ b/doc/datatable/ColumnGroupDoc.vue
@@ -196,7 +196,7 @@ export default {
         }
     }
 }
-<\\/script>
+<\/script>
 `,
                 composition: `
 <template>
diff --git a/doc/datatable/ExportDoc.vue b/doc/datatable/ExportDoc.vue
index e18b60a53..634c84657 100644
--- a/doc/datatable/ExportDoc.vue
+++ b/doc/datatable/ExportDoc.vue
@@ -73,7 +73,7 @@ export default {
         }
     }
 }
-<\\/script>
+<\/script>
 `,
                 composition: `
 <template>
@@ -105,7 +105,7 @@ const products = ref();
 const exportCSV = () => {
     dt.value.exportCSV();
 };
-<\\/script>
+<\/script>
 `
             }
         };
diff --git a/doc/tabview/BasicDoc.vue b/doc/tabview/BasicDoc.vue
index a09be29b2..b8b9b2a13 100644
--- a/doc/tabview/BasicDoc.vue
+++ b/doc/tabview/BasicDoc.vue
@@ -3,7 +3,7 @@
         <p>TabView consists of one or more TabPanel elements.</p>
     </DocSectionText>
     <div class="card">
-        <TabView ref="tabview1">
+        <TabView>
             <TabPanel header="Header I">
                 <p>
                     Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
@@ -33,7 +33,7 @@ export default {
         return {
             code: {
                 basic: `
-<TabView ref="tabview1">
+<TabView>
     <TabPanel header="Header I">
         <p>
             Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
@@ -57,7 +57,7 @@ export default {
                 options: `
 <template>
     <div class="card">
-        <TabView ref="tabview1">
+        <TabView>
             <TabPanel header="Header I">
                 <p>
                     Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
@@ -81,12 +81,12 @@ export default {
 </template>
 
 <script>
-<\\/script>
+<\/script>
     `,
                 composition: `
 <template>
     <div class="card">
-        <TabView ref="tabview1">
+        <TabView>
             <TabPanel header="Header I">
                 <p>
                     Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
@@ -110,7 +110,7 @@ export default {
 </template>
 
 <script setup>
-<\\/script>
+<\/script>
     `
             }
         };
diff --git a/doc/tabview/ControlledDoc.vue b/doc/tabview/ControlledDoc.vue
index 3d9c375c9..6117428b9 100644
--- a/doc/tabview/ControlledDoc.vue
+++ b/doc/tabview/ControlledDoc.vue
@@ -4,12 +4,12 @@
     </DocSectionText>
     <div class="card">
         <div class="py-2">
-            <Button @click="active1 = 0" text label="Activate 1st" />
-            <Button @click="active1 = 1" text class="mr-2" label="Activate 2nd" />
-            <Button @click="active1 = 2" text class="mr-2" label="Activate 3rd" />
+            <Button @click="active = 0" text label="Activate 1st" />
+            <Button @click="active = 1" text class="mr-2" label="Activate 2nd" />
+            <Button @click="active = 2" text class="mr-2" label="Activate 3rd" />
         </div>
 
-        <TabView ref="tabview2" v-model:activeIndex="active1">
+        <TabView v-model:activeIndex="active">
             <TabPanel header="Header I">
                 <p>
                     Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
@@ -37,16 +37,16 @@
 export default {
     data() {
         return {
-            active1: 0,
+            active: 0,
             code: {
                 basic: `
 <div class="py-2">
-    <Button @click="active1 = 0" text label="Activate 1st" />
-    <Button @click="active1 = 1" text class="mr-2" label="Activate 2nd" />
-    <Button @click="active1 = 2" text class="mr-2" label="Activate 3rd" />
+    <Button @click="active = 0" text label="Activate 1st" />
+    <Button @click="active = 1" text class="mr-2" label="Activate 2nd" />
+    <Button @click="active = 2" text class="mr-2" label="Activate 3rd" />
 </div>
 
-<TabView ref="tabview2" v-model:activeIndex="active1">
+<TabView v-model:activeIndex="active">
     <TabPanel header="Header I">
         <p>
             Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
@@ -65,18 +65,17 @@ export default {
             officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus.
         </p>
     </TabPanel>
-</TabView>
-              `,
+</TabView>`,
                 options: `
 <template>
     <div class="card">
         <div class="py-2">
-            <Button @click="active1 = 0" text label="Activate 1st" />
-            <Button @click="active1 = 1" text class="mr-2" label="Activate 2nd" />
-            <Button @click="active1 = 2" text class="mr-2" label="Activate 3rd" />
+            <Button @click="active = 0" text label="Activate 1st" />
+            <Button @click="active = 1" text class="mr-2" label="Activate 2nd" />
+            <Button @click="active = 2" text class="mr-2" label="Activate 3rd" />
         </div>
 
-        <TabView ref="tabview2" v-model:activeIndex="active1">
+        <TabView v-model:activeIndex="active">
             <TabPanel header="Header I">
                 <p>
                     Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
@@ -103,22 +102,21 @@ export default {
 export default {
     data() {
         return {
-            active1: 0
+            active: 0
         };
     }
 };
-<\\/script>
-  `,
+<\/script>`,
                 composition: `
 <template>
     <div class="card">
         <div class="py-2">
-            <Button @click="active1 = 0" text label="Activate 1st" />
-            <Button @click="active1 = 1" text class="mr-2" label="Activate 2nd" />
-            <Button @click="active1 = 2" text class="mr-2" label="Activate 3rd" />
+            <Button @click="active = 0" text label="Activate 1st" />
+            <Button @click="active = 1" text class="mr-2" label="Activate 2nd" />
+            <Button @click="active = 2" text class="mr-2" label="Activate 3rd" />
         </div>
 
-        <TabView ref="tabview2" v-model:activeIndex="active1">
+        <TabView v-model:activeIndex="active">
             <TabPanel header="Header I">
                 <p>
                     Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
@@ -144,9 +142,8 @@ export default {
 <script setup>
 import { ref } from 'vue';
 
-const active1 = ref(0);
-<\\/script>
-  `
+const active = ref(0);
+<\/script>`
             }
         };
     }
diff --git a/doc/tabview/DisabledDoc.vue b/doc/tabview/DisabledDoc.vue
index 7e2c76beb..642f195ec 100644
--- a/doc/tabview/DisabledDoc.vue
+++ b/doc/tabview/DisabledDoc.vue
@@ -3,7 +3,7 @@
         <p>Enabling <i>disabled</i> property of a TabPanel prevents user interaction.</p>
     </DocSectionText>
     <div class="card">
-        <TabView ref="tabview3">
+        <TabView>
             <TabPanel header="Header I">
                 <p>
                     Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
@@ -34,7 +34,7 @@ export default {
         return {
             code: {
                 basic: `
-<TabView ref="tabview3">
+<TabView>
     <TabPanel header="Header I">
         <p>
             Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
@@ -55,12 +55,11 @@ export default {
         </p>
     </TabPanel>
     <TabPanel header="Header IV" :disabled="true"></TabPanel>
-</TabView>
-              `,
+</TabView>`,
                 options: `
 <template>
     <div class="card">
-        <TabView ref="tabview3">
+        <TabView>
             <TabPanel header="Header I">
                 <p>
                     Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
@@ -85,12 +84,11 @@ export default {
 </template>
 
 <script>
-<\\/script>
-  `,
+<\/script>`,
                 composition: `
 <template>
     <div class="card">
-        <TabView ref="tabview3">
+        <TabView>
             <TabPanel header="Header I">
                 <p>
                     Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
@@ -115,8 +113,7 @@ export default {
 </template>
 
 <script setup>
-<\\/script>
-  `
+<\/script>`
             }
         };
     }
diff --git a/doc/tabview/DynamicDoc.vue b/doc/tabview/DynamicDoc.vue
index e2ca8782f..508dde470 100644
--- a/doc/tabview/DynamicDoc.vue
+++ b/doc/tabview/DynamicDoc.vue
@@ -27,11 +27,10 @@ export default {
     <TabPanel v-for="tab in tabs" :key="tab.title" :header="tab.title">
         <p>{{ tab.content }}</p>
     </TabPanel>
-</TabView>
-              `,
+</TabView>`,
                 options: `
 <template>
-  <div class="card">
+    <div class="card">
         <TabView>
             <TabPanel v-for="tab in tabs" :key="tab.title" :header="tab.title">
                 <p>{{ tab.content }}</p>
@@ -52,11 +51,10 @@ export default {
         };
     }
 };
-<\\/script>
-  `,
+<\/script>`,
                 composition: `
 <template>
-  <div class="card">
+    <div class="card">
         <TabView>
             <TabPanel v-for="tab in tabs" :key="tab.title" :header="tab.title">
                 <p>{{ tab.content }}</p>
@@ -73,8 +71,7 @@ const tabs = ref([
     { title: 'Tab 2', content: 'Tab 2 Content' },
     { title: 'Tab 3', content: 'Tab 3 Content' }
 ]);
-<\\/script>
-  `
+<\/script>`
             }
         };
     }
diff --git a/doc/tabview/ScrollableDoc.vue b/doc/tabview/ScrollableDoc.vue
index c3c7fa821..1734f2e64 100644
--- a/doc/tabview/ScrollableDoc.vue
+++ b/doc/tabview/ScrollableDoc.vue
@@ -23,11 +23,10 @@ export default {
     <TabPanel v-for="tab in scrollableTabs" :key="tab.title" :header="tab.title">
         <p>{{ tab.content }}</p>
     </TabPanel>
-</TabView>
-              `,
+</TabView>`,
                 options: `
 <template>
-  <div class="card">
+    <div class="card">
         <TabView :scrollable="true">
             <TabPanel v-for="tab in scrollableTabs" :key="tab.title" :header="tab.title">
                 <p>{{ tab.content }}</p>
@@ -44,11 +43,10 @@ export default {
         };
     }
 };
-<\\/script>
-  `,
+<\/script>`,
                 composition: `
 <template>
-  <div class="card">
+    <div class="card">
         <TabView :scrollable="true">
             <TabPanel v-for="tab in scrollableTabs" :key="tab.title" :header="tab.title">
                 <p>{{ tab.content }}</p>
@@ -61,8 +59,7 @@ export default {
 import { ref } from 'vue';
 
 const scrollableTabs = ref(Array.from({ length: 50 }, (_, i) => ({ title: \`Tab \${i + 1}\`, content: \`Tab \${i + 1} Content\` })));
-<\\/script>
-  `
+<\/script>`
             }
         };
     }
diff --git a/doc/tabview/TemplateDoc.vue b/doc/tabview/TemplateDoc.vue
index 96475a783..ac174aaa1 100644
--- a/doc/tabview/TemplateDoc.vue
+++ b/doc/tabview/TemplateDoc.vue
@@ -3,7 +3,7 @@
         <p>Custom content for the title section of a panel is defined using the header template.</p>
     </DocSectionText>
     <div class="card">
-        <TabView ref="tabview4" class="tabview-custom">
+        <TabView class="tabview-custom">
             <TabPanel>
                 <template #header>
                     <i class="pi pi-calendar mr-2"></i>
@@ -46,7 +46,7 @@ export default {
         return {
             code: {
                 basic: `
-<TabView ref="tabview4" class="tabview-custom">
+<TabView class="tabview-custom">
     <TabPanel>
         <template #header>
             <i class="pi pi-calendar mr-2"></i>
@@ -78,12 +78,11 @@ export default {
             officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus.
         </p>
     </TabPanel>
-</TabView>
-              `,
+</TabView>`,
                 options: `
 <template>
     <div class="card">
-        <TabView ref="tabview4" class="tabview-custom">
+        <TabView class="tabview-custom">
             <TabPanel>
                 <template #header>
                     <i class="pi pi-calendar mr-2"></i>
@@ -120,12 +119,11 @@ export default {
 </template>
 
 <script>
-<\\/script>
-  `,
+<\/script>`,
                 composition: `
 <template>
     <div class="card">
-        <TabView ref="tabview4" class="tabview-custom">
+        <TabView class="tabview-custom">
             <TabPanel>
                 <template #header>
                     <i class="pi pi-calendar ml-2"></i>
@@ -162,8 +160,7 @@ export default {
 </template>
 
 <script setup>
-<\\/script>
-  `
+<\/script>`
             }
         };
     }