From e9623c448432e421a783136355d654af2c04811f 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: Wed, 26 Jul 2023 18:39:58 +0300
Subject: [PATCH] RadioButton, Rating, SelectButton, Slider unstyled demo
 updates

---
 .../{StyleDoc.vue => theming/StyledDoc.vue}   |  0
 doc/radiobutton/theming/UnstyledDoc.vue       | 47 +++++++++++++++++++
 doc/radiobutton/theming/index.vue             | 33 +++++++++++++
 .../{StyleDoc.vue => theming/StyledDoc.vue}   |  0
 doc/rating/theming/UnstyledDoc.vue            | 30 ++++++++++++
 doc/rating/theming/index.vue                  | 33 +++++++++++++
 doc/selectbutton/theming/StyledDoc.vue        | 29 ++++++++++++
 doc/selectbutton/theming/UnstyledDoc.vue      | 32 +++++++++++++
 doc/selectbutton/theming/index.vue            | 33 +++++++++++++
 .../{StyleDoc.vue => theming/StyledDoc.vue}   |  0
 doc/slider/theming/UnstyledDoc.vue            | 30 ++++++++++++
 doc/slider/theming/index.vue                  | 33 +++++++++++++
 pages/radiobutton/index.vue                   | 20 ++++----
 pages/rating/index.vue                        | 12 ++---
 pages/selectbutton/index.vue                  | 16 +++++--
 pages/slider/index.vue                        | 12 ++---
 16 files changed, 333 insertions(+), 27 deletions(-)
 rename doc/radiobutton/{StyleDoc.vue => theming/StyledDoc.vue} (100%)
 create mode 100644 doc/radiobutton/theming/UnstyledDoc.vue
 create mode 100644 doc/radiobutton/theming/index.vue
 rename doc/rating/{StyleDoc.vue => theming/StyledDoc.vue} (100%)
 create mode 100644 doc/rating/theming/UnstyledDoc.vue
 create mode 100644 doc/rating/theming/index.vue
 create mode 100644 doc/selectbutton/theming/StyledDoc.vue
 create mode 100644 doc/selectbutton/theming/UnstyledDoc.vue
 create mode 100644 doc/selectbutton/theming/index.vue
 rename doc/slider/{StyleDoc.vue => theming/StyledDoc.vue} (100%)
 create mode 100644 doc/slider/theming/UnstyledDoc.vue
 create mode 100644 doc/slider/theming/index.vue

diff --git a/doc/radiobutton/StyleDoc.vue b/doc/radiobutton/theming/StyledDoc.vue
similarity index 100%
rename from doc/radiobutton/StyleDoc.vue
rename to doc/radiobutton/theming/StyledDoc.vue
diff --git a/doc/radiobutton/theming/UnstyledDoc.vue b/doc/radiobutton/theming/UnstyledDoc.vue
new file mode 100644
index 000000000..f82fe2608
--- /dev/null
+++ b/doc/radiobutton/theming/UnstyledDoc.vue
@@ -0,0 +1,47 @@
+<template>
+    <DocSectionText v-bind="$attrs">
+        <p>Theming is implemented with the pass through properties in unstyled mode. Example below demonstrates the built-in Tailwind theme.</p>
+    </DocSectionText>
+    <DocSectionCode :code="code" embedded />
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            ingredient: '',
+            code: {
+                composition: `
+<template>
+    <div class="card flex justify-center">
+        <div class="flex flex-wrap gap-3">
+            <div class="flex align-items-center">
+                <RadioButton v-model="ingredient" inputId="ingredient1" name="pizza" value="Cheese" />
+                <label for="ingredient1" class="ml-2">Cheese</label>
+            </div>
+            <div class="flex align-items-center">
+                <RadioButton v-model="ingredient" inputId="ingredient2" name="pizza" value="Mushroom" />
+                <label for="ingredient2" class="ml-2">Mushroom</label>
+            </div>
+            <div class="flex align-items-center">
+                <RadioButton v-model="ingredient" inputId="ingredient3" name="pizza" value="Pepper" />
+                <label for="ingredient3" class="ml-2">Pepper</label>
+            </div>
+            <div class="flex align-items-center">
+                <RadioButton v-model="ingredient" inputId="ingredient4" name="pizza" value="Onion" />
+                <label for="ingredient4" class="ml-2">Onion</label>
+            </div>
+        </div>
+    </div>
+</template>
+
+<script setup>
+import { ref } from 'vue';
+
+const ingredient = ref('');
+<\/script>`
+            }
+        };
+    }
+};
+</script>
diff --git a/doc/radiobutton/theming/index.vue b/doc/radiobutton/theming/index.vue
new file mode 100644
index 000000000..a8a1a2dc4
--- /dev/null
+++ b/doc/radiobutton/theming/index.vue
@@ -0,0 +1,33 @@
+<template>
+    <div class="doc-main">
+        <div class="doc-intro">
+            <h1>RadioButton Theming</h1>
+        </div>
+        <DocSections :docs="docs" />
+    </div>
+    <DocSectionNav :docs="docs" />
+</template>
+
+<script>
+import StyledDoc from './StyledDoc.vue';
+import UnstyledDoc from './UnstyledDoc.vue';
+
+export default {
+    data() {
+        return {
+            docs: [
+                {
+                    id: 'styled',
+                    label: 'Styled',
+                    component: StyledDoc
+                },
+                {
+                    id: 'unstyled',
+                    label: 'Unstyled',
+                    component: UnstyledDoc
+                }
+            ]
+        };
+    }
+};
+</script>
diff --git a/doc/rating/StyleDoc.vue b/doc/rating/theming/StyledDoc.vue
similarity index 100%
rename from doc/rating/StyleDoc.vue
rename to doc/rating/theming/StyledDoc.vue
diff --git a/doc/rating/theming/UnstyledDoc.vue b/doc/rating/theming/UnstyledDoc.vue
new file mode 100644
index 000000000..a2ac2ea97
--- /dev/null
+++ b/doc/rating/theming/UnstyledDoc.vue
@@ -0,0 +1,30 @@
+<template>
+    <DocSectionText v-bind="$attrs">
+        <p>Theming is implemented with the pass through properties in unstyled mode. Example below demonstrates the built-in Tailwind theme.</p>
+    </DocSectionText>
+    <DocSectionCode :code="code" embedded />
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            value: null,
+            code: {
+                composition: `
+<template>
+    <div class="card flex justify-center">
+        <Rating v-model="value" />
+    </div>
+</template>
+
+<script setup>
+import { ref } from 'vue';
+
+const value = ref(null);
+<\/script>`
+            }
+        };
+    }
+};
+</script>
diff --git a/doc/rating/theming/index.vue b/doc/rating/theming/index.vue
new file mode 100644
index 000000000..bb127c40b
--- /dev/null
+++ b/doc/rating/theming/index.vue
@@ -0,0 +1,33 @@
+<template>
+    <div class="doc-main">
+        <div class="doc-intro">
+            <h1>Rating Theming</h1>
+        </div>
+        <DocSections :docs="docs" />
+    </div>
+    <DocSectionNav :docs="docs" />
+</template>
+
+<script>
+import StyledDoc from './StyledDoc.vue';
+import UnstyledDoc from './UnstyledDoc.vue';
+
+export default {
+    data() {
+        return {
+            docs: [
+                {
+                    id: 'styled',
+                    label: 'Styled',
+                    component: StyledDoc
+                },
+                {
+                    id: 'unstyled',
+                    label: 'Unstyled',
+                    component: UnstyledDoc
+                }
+            ]
+        };
+    }
+};
+</script>
diff --git a/doc/selectbutton/theming/StyledDoc.vue b/doc/selectbutton/theming/StyledDoc.vue
new file mode 100644
index 000000000..03e2d91ed
--- /dev/null
+++ b/doc/selectbutton/theming/StyledDoc.vue
@@ -0,0 +1,29 @@
+<template>
+    <DocSectionText id="style" label="Style" v-bind="$attrs">
+        <p>List of class names used in the styled mode.</p>
+    </DocSectionText>
+    <div class="doc-tablewrapper">
+        <table class="doc-table">
+            <thead>
+                <tr>
+                    <th>Name</th>
+                    <th>Element</th>
+                </tr>
+            </thead>
+            <tbody>
+                <tr>
+                    <td>p-select-button</td>
+                    <td>SelectButton element</td>
+                </tr>
+                <tr>
+                    <td>p-button</td>
+                    <td>Button element</td>
+                </tr>
+                <tr>
+                    <td>p-button-label</td>
+                    <td>Label element of the button</td>
+                </tr>
+            </tbody>
+        </table>
+    </div>
+</template>
diff --git a/doc/selectbutton/theming/UnstyledDoc.vue b/doc/selectbutton/theming/UnstyledDoc.vue
new file mode 100644
index 000000000..e8edcf170
--- /dev/null
+++ b/doc/selectbutton/theming/UnstyledDoc.vue
@@ -0,0 +1,32 @@
+<template>
+    <DocSectionText v-bind="$attrs">
+        <p>Theming is implemented with the pass through properties in unstyled mode. Example below demonstrates the built-in Tailwind theme.</p>
+    </DocSectionText>
+    <DocSectionCode :code="code" embedded />
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            value: 'Off',
+            options: ['Off', 'On'],
+            code: {
+                composition: `
+<template>
+    <div class="card flex justify-center">
+        <SelectButton v-model="value" :options="options" aria-labelledby="basic" />
+    </div>
+</template>
+
+<script setup>
+import { ref } from 'vue';
+
+const value = ref('off');
+const options = ref(['Off', 'On']);
+<\/script>`
+            }
+        };
+    }
+};
+</script>
diff --git a/doc/selectbutton/theming/index.vue b/doc/selectbutton/theming/index.vue
new file mode 100644
index 000000000..5794035d3
--- /dev/null
+++ b/doc/selectbutton/theming/index.vue
@@ -0,0 +1,33 @@
+<template>
+    <div class="doc-main">
+        <div class="doc-intro">
+            <h1>SelectButton Theming</h1>
+        </div>
+        <DocSections :docs="docs" />
+    </div>
+    <DocSectionNav :docs="docs" />
+</template>
+
+<script>
+import StyledDoc from './StyledDoc.vue';
+import UnstyledDoc from './UnstyledDoc.vue';
+
+export default {
+    data() {
+        return {
+            docs: [
+                {
+                    id: 'styled',
+                    label: 'Styled',
+                    component: StyledDoc
+                },
+                {
+                    id: 'unstyled',
+                    label: 'Unstyled',
+                    component: UnstyledDoc
+                }
+            ]
+        };
+    }
+};
+</script>
diff --git a/doc/slider/StyleDoc.vue b/doc/slider/theming/StyledDoc.vue
similarity index 100%
rename from doc/slider/StyleDoc.vue
rename to doc/slider/theming/StyledDoc.vue
diff --git a/doc/slider/theming/UnstyledDoc.vue b/doc/slider/theming/UnstyledDoc.vue
new file mode 100644
index 000000000..8d295d8f0
--- /dev/null
+++ b/doc/slider/theming/UnstyledDoc.vue
@@ -0,0 +1,30 @@
+<template>
+    <DocSectionText v-bind="$attrs">
+        <p>Theming is implemented with the pass through properties in unstyled mode. Example below demonstrates the built-in Tailwind theme.</p>
+    </DocSectionText>
+    <DocSectionCode :code="code" embedded />
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            value: null,
+            code: {
+                composition: `
+<template>
+    <div class="card flex justify-center">
+        <Slider v-model="value" class="w-14rem" />
+    </div>
+</template>
+
+<script setup>
+import { ref } from 'vue';
+
+const value = ref(null);
+<\/script>`
+            }
+        };
+    }
+};
+</script>
diff --git a/doc/slider/theming/index.vue b/doc/slider/theming/index.vue
new file mode 100644
index 000000000..e3c307a47
--- /dev/null
+++ b/doc/slider/theming/index.vue
@@ -0,0 +1,33 @@
+<template>
+    <div class="doc-main">
+        <div class="doc-intro">
+            <h1>Slider Theming</h1>
+        </div>
+        <DocSections :docs="docs" />
+    </div>
+    <DocSectionNav :docs="docs" />
+</template>
+
+<script>
+import StyledDoc from './StyledDoc.vue';
+import UnstyledDoc from './UnstyledDoc.vue';
+
+export default {
+    data() {
+        return {
+            docs: [
+                {
+                    id: 'styled',
+                    label: 'Styled',
+                    component: StyledDoc
+                },
+                {
+                    id: 'unstyled',
+                    label: 'Unstyled',
+                    component: UnstyledDoc
+                }
+            ]
+        };
+    }
+};
+</script>
diff --git a/pages/radiobutton/index.vue b/pages/radiobutton/index.vue
index b52037950..6391242f8 100755
--- a/pages/radiobutton/index.vue
+++ b/pages/radiobutton/index.vue
@@ -1,5 +1,13 @@
 <template>
-    <DocComponent title="Vue RadioButton Component" header="RadioButton" description="RadioButton is an extension to standard radio button element with theming." :componentDocs="docs" :apiDocs="['RadioButton']" :ptTabComponent="ptComponent" />
+    <DocComponent
+        title="Vue RadioButton Component"
+        header="RadioButton"
+        description="RadioButton is an extension to standard radio button element with theming."
+        :componentDocs="docs"
+        :apiDocs="['RadioButton']"
+        :ptTabComponent="ptComponent"
+        :themingDocs="themingDoc"
+    />
 </template>
 
 <script>
@@ -9,9 +17,9 @@ import DynamicDoc from '@/doc/radiobutton/DynamicDoc.vue';
 import GroupDoc from '@/doc/radiobutton/GroupDoc.vue';
 import ImportDoc from '@/doc/radiobutton/ImportDoc.vue';
 import InvalidDoc from '@/doc/radiobutton/InvalidDoc.vue';
-import StyleDoc from '@/doc/radiobutton/StyleDoc.vue';
 import VeeValidateDoc from '@/doc/radiobutton/form/VeeValidateDoc.vue';
 import PTComponent from '@/doc/radiobutton/pt/index.vue';
+import ThemingDoc from '@/doc/radiobutton/theming/index.vue';
 
 export default {
     data() {
@@ -54,18 +62,14 @@ export default {
                         }
                     ]
                 },
-                {
-                    id: 'style',
-                    label: 'Style',
-                    component: StyleDoc
-                },
                 {
                     id: 'accessibility',
                     label: 'Accessibility',
                     component: AccessibilityDoc
                 }
             ],
-            ptComponent: PTComponent
+            ptComponent: PTComponent,
+            themingDoc: ThemingDoc
         };
     }
 };
diff --git a/pages/rating/index.vue b/pages/rating/index.vue
index e80fbce94..571e52719 100755
--- a/pages/rating/index.vue
+++ b/pages/rating/index.vue
@@ -1,5 +1,5 @@
 <template>
-    <DocComponent title="Vue Rating Component" header="Rating" description="Rating component is a star based selection input." :componentDocs="docs" :apiDocs="['Rating']" :ptTabComponent="ptComponent" />
+    <DocComponent title="Vue Rating Component" header="Rating" description="Rating component is a star based selection input." :componentDocs="docs" :apiDocs="['Rating']" :ptTabComponent="ptComponent" :themingDocs="themingDoc" />
 </template>
 
 <script>
@@ -9,10 +9,10 @@ import DisabledDoc from '@/doc/rating/DisabledDoc.vue';
 import ImportDoc from '@/doc/rating/ImportDoc.vue';
 import NumberOfStarsDoc from '@/doc/rating/NumberOfStarsDoc.vue';
 import ReadOnlyDoc from '@/doc/rating/ReadOnlyDoc.vue';
-import StyleDoc from '@/doc/rating/StyleDoc.vue';
 import TemplateDoc from '@/doc/rating/TemplateDoc.vue';
 import WithoutCancelDoc from '@/doc/rating/WithoutCancelDoc.vue';
 import PTComponent from '@/doc/rating/pt/index.vue';
+import ThemingDoc from '@/doc/rating/theming/index.vue';
 
 export default {
     data() {
@@ -53,18 +53,14 @@ export default {
                     label: 'Disabled',
                     component: DisabledDoc
                 },
-                {
-                    id: 'style',
-                    label: 'Style',
-                    component: StyleDoc
-                },
                 {
                     id: 'accessibility',
                     label: 'Accessibility',
                     component: AccessibilityDoc
                 }
             ],
-            ptComponent: PTComponent
+            ptComponent: PTComponent,
+            themingDoc: ThemingDoc
         };
     }
 };
diff --git a/pages/selectbutton/index.vue b/pages/selectbutton/index.vue
index 0cc830923..a80953c24 100755
--- a/pages/selectbutton/index.vue
+++ b/pages/selectbutton/index.vue
@@ -1,17 +1,26 @@
 <template>
-    <DocComponent title="Vue SelectButton Component" header="SelectButton" description="Slider is a component to provide input with a drag handle." :componentDocs="docs" :apiDocs="['SelectButton']" :ptTabComponent="ptComponent" />
+    <DocComponent
+        title="Vue SelectButton Component"
+        header="SelectButton"
+        description="Slider is a component to provide input with a drag handle."
+        :componentDocs="docs"
+        :apiDocs="['SelectButton']"
+        :ptTabComponent="ptComponent"
+        :themingDocs="themingDoc"
+    />
 </template>
 
 <script>
 import AccessibilityDoc from '@/doc/selectbutton/AccessibilityDoc';
 import BasicDoc from '@/doc/selectbutton/BasicDoc';
 import DisabledDoc from '@/doc/selectbutton/DisabledDoc';
-import VeeValidateDoc from '@/doc/selectbutton/form/VeeValidateDoc';
 import ImportDoc from '@/doc/selectbutton/ImportDoc';
 import InvalidDoc from '@/doc/selectbutton/InvalidDoc';
 import MultipleDoc from '@/doc/selectbutton/MultipleDoc';
 import TemplateDoc from '@/doc/selectbutton/TemplateDoc';
+import VeeValidateDoc from '@/doc/selectbutton/form/VeeValidateDoc';
 import PTComponent from '@/doc/selectbutton/pt/index.vue';
+import ThemingDoc from '@/doc/selectbutton/theming/index.vue';
 
 export default {
     data() {
@@ -65,7 +74,8 @@ export default {
                     component: AccessibilityDoc
                 }
             ],
-            ptComponent: PTComponent
+            ptComponent: PTComponent,
+            themingDoc: ThemingDoc
         };
     }
 };
diff --git a/pages/slider/index.vue b/pages/slider/index.vue
index 4ecf1f03b..b184d423c 100755
--- a/pages/slider/index.vue
+++ b/pages/slider/index.vue
@@ -1,5 +1,5 @@
 <template>
-    <DocComponent title="Vue Slider Component" header="Slider" description="Slider is a component to provide input with a drag handle." :componentDocs="docs" :apiDocs="['Slider']" :ptTabComponent="ptComponent" />
+    <DocComponent title="Vue Slider Component" header="Slider" description="Slider is a component to provide input with a drag handle." :componentDocs="docs" :apiDocs="['Slider']" :ptTabComponent="ptComponent" :themingDocs="themingDoc" />
 </template>
 
 <script>
@@ -9,9 +9,9 @@ import ImportDoc from '@/doc/slider/ImportDoc';
 import InputDoc from '@/doc/slider/InputDoc';
 import RangeDoc from '@/doc/slider/RangeDoc';
 import StepDoc from '@/doc/slider/StepDoc';
-import StyleDoc from '@/doc/slider/StyleDoc';
 import VerticalDoc from '@/doc/slider/VerticalDoc';
 import PTComponent from '@/doc/slider/pt/index.vue';
+import ThemingDoc from '@/doc/slider/theming/index.vue';
 
 export default {
     data() {
@@ -47,18 +47,14 @@ export default {
                     label: 'Vertical',
                     component: VerticalDoc
                 },
-                {
-                    id: 'style',
-                    label: 'Style',
-                    component: StyleDoc
-                },
                 {
                     id: 'accessibility',
                     label: 'Accessibility',
                     component: AccessibilityDoc
                 }
             ],
-            ptComponent: PTComponent
+            ptComponent: PTComponent,
+            themingDoc: ThemingDoc
         };
     }
 };