From 822c4d6500019fbc6051c151825ab37f2a1f387c Mon Sep 17 00:00:00 2001
From: tugcekucukoglu <tugcekucukoglu.860@gmail.com>
Date: Wed, 2 Oct 2024 14:09:40 +0300
Subject: [PATCH] Template demo added

---
 .../showcase/doc/toggleswitch/TemplateDoc.vue | 70 +++++++++++++++++++
 apps/showcase/pages/toggleswitch/index.vue    |  6 ++
 2 files changed, 76 insertions(+)
 create mode 100644 apps/showcase/doc/toggleswitch/TemplateDoc.vue

diff --git a/apps/showcase/doc/toggleswitch/TemplateDoc.vue b/apps/showcase/doc/toggleswitch/TemplateDoc.vue
new file mode 100644
index 000000000..f8f023691
--- /dev/null
+++ b/apps/showcase/doc/toggleswitch/TemplateDoc.vue
@@ -0,0 +1,70 @@
+<template>
+    <DocSectionText v-bind="$attrs">
+        <p>Custom content for icon is displayed with the handle slot that takes an check state as a parameter.</p>
+    </DocSectionText>
+    <div class="card flex justify-center">
+        <ToggleSwitch v-model="checked">
+            <template #handle="{ checked }">
+                <i :class="checked ? 'pi pi-check' : 'pi pi-times'" />
+            </template>
+        </ToggleSwitch>
+    </div>
+    <DocSectionCode :code="code" />
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            checked: false,
+            code: {
+                basic: `
+<ToggleSwitch v-model="checked">
+    <template #handle="{ checked }">
+        <i :class="checked ? 'pi pi-check' : 'pi pi-times'" />
+    </template>
+</ToggleSwitch>
+`,
+                options: `
+<template>
+    <div class="card flex justify-center">
+        <ToggleSwitch v-model="checked">
+            <template #handle="{ checked }">
+                <i :class="checked ? 'pi pi-check' : 'pi pi-times'" />
+            </template>
+        </ToggleSwitch>
+    </div>
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            checked: false
+        }
+    }
+};
+<\/script>
+`,
+                composition: `
+<template>
+    <div class="card flex justify-center">
+        <ToggleSwitch v-model="checked">
+            <template #handle="{ checked }">
+                <i :class="checked ? 'pi pi-check' : 'pi pi-times'" />
+            </template>
+        </ToggleSwitch>
+    </div>
+</template>
+
+<script setup>
+import { ref } from 'vue';
+
+const checked = ref(false);
+<\/script>
+`
+            }
+        };
+    }
+};
+</script>
diff --git a/apps/showcase/pages/toggleswitch/index.vue b/apps/showcase/pages/toggleswitch/index.vue
index ca1c54930..24fdeaab7 100755
--- a/apps/showcase/pages/toggleswitch/index.vue
+++ b/apps/showcase/pages/toggleswitch/index.vue
@@ -9,6 +9,7 @@ import DisabledDoc from '@/doc/toggleswitch/DisabledDoc.vue';
 import ImportDoc from '@/doc/toggleswitch/ImportDoc.vue';
 import InvalidDoc from '@/doc/toggleswitch/InvalidDoc.vue';
 import PreselectionDoc from '@/doc/toggleswitch/PreselectionDoc.vue';
+import TemplateDoc from '@/doc/toggleswitch/TemplateDoc.vue';
 import PTComponent from '@/doc/toggleswitch/pt/index.vue';
 import ThemingDoc from '@/doc/toggleswitch/theming/index.vue';
 
@@ -36,6 +37,11 @@ export default {
                     label: 'Invalid',
                     component: InvalidDoc
                 },
+                {
+                    id: 'template',
+                    label: 'Template',
+                    component: TemplateDoc
+                },
                 {
                     id: 'disabled',
                     label: 'Disabled',