From e21ab4a480c5a3d6c7ade1fa36bcc7b8ce93032b Mon Sep 17 00:00:00 2001
From: Cagatay Civici <cagatay.civici@gmail.com>
Date: Sun, 2 Mar 2025 00:04:47 +0300
Subject: [PATCH] Implemented SelectButton

---
 apps/labs/assets/data/menu.json               |  4 ++
 apps/labs/doc/selectbutton/BasicDoc.vue       | 36 ++++++++++++
 apps/labs/doc/selectbutton/DisabledDoc.vue    | 45 +++++++++++++++
 apps/labs/doc/selectbutton/ImportDoc.vue      | 16 ++++++
 apps/labs/doc/selectbutton/InvalidDoc.vue     | 33 +++++++++++
 apps/labs/doc/selectbutton/MultipleDoc.vue    | 41 +++++++++++++
 apps/labs/doc/selectbutton/SizesDoc.vue       | 41 +++++++++++++
 apps/labs/doc/selectbutton/TemplateDoc.vue    | 51 +++++++++++++++++
 apps/labs/pages/selectbutton/index.vue        | 57 +++++++++++++++++++
 apps/labs/plex/selectbutton/index.vue         | 39 +++++++++++++
 apps/labs/plex/togglebutton/index.vue         |  1 +
 .../src/selectbutton/SelectButton.vue         |  8 ++-
 12 files changed, 371 insertions(+), 1 deletion(-)
 create mode 100644 apps/labs/doc/selectbutton/BasicDoc.vue
 create mode 100644 apps/labs/doc/selectbutton/DisabledDoc.vue
 create mode 100644 apps/labs/doc/selectbutton/ImportDoc.vue
 create mode 100644 apps/labs/doc/selectbutton/InvalidDoc.vue
 create mode 100644 apps/labs/doc/selectbutton/MultipleDoc.vue
 create mode 100644 apps/labs/doc/selectbutton/SizesDoc.vue
 create mode 100644 apps/labs/doc/selectbutton/TemplateDoc.vue
 create mode 100644 apps/labs/pages/selectbutton/index.vue
 create mode 100644 apps/labs/plex/selectbutton/index.vue

diff --git a/apps/labs/assets/data/menu.json b/apps/labs/assets/data/menu.json
index 0520cf11f..82522d674 100644
--- a/apps/labs/assets/data/menu.json
+++ b/apps/labs/assets/data/menu.json
@@ -30,6 +30,10 @@
                     "name": "InputText",
                     "to": "/inputtext"
                 },
+                {
+                    "name": "SelectButton",
+                    "to": "/selectbutton"
+                },
                 {
                     "name": "Slider",
                     "to": "/slider"
diff --git a/apps/labs/doc/selectbutton/BasicDoc.vue b/apps/labs/doc/selectbutton/BasicDoc.vue
new file mode 100644
index 000000000..339204562
--- /dev/null
+++ b/apps/labs/doc/selectbutton/BasicDoc.vue
@@ -0,0 +1,36 @@
+<template>
+    <DocSectionText v-bind="$attrs">
+        <p>
+            SelectButton is used with the <i>v-model</i> property for two-way value binding along with the <i>options</i> collection. Label and value of an option are defined with the <i>optionLabel</i> and <i>optionValue</i> properties respectively.
+            Note that, when options are simple primitive values such as a string array, no <i>optionLabel</i> and <i>optionValue</i> would be necessary.
+        </p>
+    </DocSectionText>
+    <div class="card flex justify-center">
+        <SelectButton v-model="value" :options="options" />
+    </div>
+    <DocSectionCode :code="code" />
+</template>
+
+<script setup>
+import SelectButton from '@/plex/selectbutton';
+import { ref } from 'vue';
+
+const value = ref('One Way');
+const options = ref(['One-Way', 'Return']);
+
+const code = ref(`
+<template>
+    <div class="card flex justify-center">
+        <SelectButton v-model="value" :options="options" />
+    </div>
+</template>
+
+<script setup>
+import SelectButton from '@/plex/selectbutton';
+import { ref } from 'vue';
+
+const value = ref('One Way');
+const options = ref(['One-Way', 'Return']);
+<\/script>
+`);
+</script>
diff --git a/apps/labs/doc/selectbutton/DisabledDoc.vue b/apps/labs/doc/selectbutton/DisabledDoc.vue
new file mode 100644
index 000000000..65d5ea1e1
--- /dev/null
+++ b/apps/labs/doc/selectbutton/DisabledDoc.vue
@@ -0,0 +1,45 @@
+<template>
+    <DocSectionText v-bind="$attrs">
+        <p>When <i>disabled</i> is present, the element cannot be edited and focused entirely. Certain options can also be disabled using the <i>optionDisabled</i> property.</p>
+    </DocSectionText>
+    <div class="card flex justify-center flex-wrap gap-4">
+        <SelectButton v-model="value1" :options="options1" disabled />
+        <SelectButton v-model="value2" :options="options2" optionDisabled="constant" optionLabel="name" />
+    </div>
+    <DocSectionCode :code="code" />
+</template>
+
+<script setup>
+import SelectButton from '@/plex/selectbutton';
+import { ref } from 'vue';
+
+const value1 = ref('One Way');
+const value2 = ref('One Way');
+const options1 = ref(['Off', 'On']);
+const options2 = ref([
+    { name: 'Option 1', value: 1, constant: false },
+    { name: 'Option 2', value: 2, constant: true }
+]);
+
+const code = ref(`
+<template>
+    <div class="card flex justify-center flex-wrap gap-4">
+        <SelectButton v-model="value1" :options="options1" disabled />
+        <SelectButton v-model="value2" :options="options2" optionDisabled="constant" optionLabel="name" />
+    </div>
+</template>
+
+<script setup>
+import SelectButton from '@/plex/selectbutton';
+import { ref } from 'vue';
+
+const value1 = ref('One Way');
+const value2 = ref('One Way');
+const options1 = ref(['Off', 'On']);
+const options2 = ref([
+    { name: 'Option 1', value: 1, constant: false },
+    { name: 'Option 2', value: 2, constant: true }
+]);
+<\/script>
+`);
+</script>
diff --git a/apps/labs/doc/selectbutton/ImportDoc.vue b/apps/labs/doc/selectbutton/ImportDoc.vue
new file mode 100644
index 000000000..00010e8bf
--- /dev/null
+++ b/apps/labs/doc/selectbutton/ImportDoc.vue
@@ -0,0 +1,16 @@
+<template>
+    <DocSectionText v-bind="$attrs" />
+    <DocSectionCode :code="code" lang="script" />
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            code: `
+import SelectButton from '@/plex/selectbutton';
+`
+        };
+    }
+};
+</script>
diff --git a/apps/labs/doc/selectbutton/InvalidDoc.vue b/apps/labs/doc/selectbutton/InvalidDoc.vue
new file mode 100644
index 000000000..cf87a6367
--- /dev/null
+++ b/apps/labs/doc/selectbutton/InvalidDoc.vue
@@ -0,0 +1,33 @@
+<template>
+    <DocSectionText v-bind="$attrs">
+        <p>Invalid state is displayed using the <i>invalid</i> prop to indicate a failed validation. You can use this style when integrating with form validation libraries.</p>
+    </DocSectionText>
+    <div class="card flex justify-center">
+        <SelectButton v-model="value" :options="options" aria-labelledby="basic" allowEmpty :invalid="value === null" />
+    </div>
+    <DocSectionCode :code="code" />
+</template>
+
+<script setup>
+import SelectButton from '@/plex/selectbutton';
+import { ref } from 'vue';
+
+const value = ref(null);
+const options = ref(['One-Way', 'Return']);
+
+const code = ref(`
+<template>
+    <div class="card flex justify-center">
+        <SelectButton v-model="value" :options="options" aria-labelledby="basic" allowEmpty :invalid="value === null" />
+    </div>
+</template>
+
+<script setup>
+import SelectButton from '@/plex/selectbutton';
+import { ref } from 'vue';
+
+const value = ref(null);
+const options = ref(['One-Way', 'Return']);
+<\/script>
+`);
+</script>
diff --git a/apps/labs/doc/selectbutton/MultipleDoc.vue b/apps/labs/doc/selectbutton/MultipleDoc.vue
new file mode 100644
index 000000000..137a0abe2
--- /dev/null
+++ b/apps/labs/doc/selectbutton/MultipleDoc.vue
@@ -0,0 +1,41 @@
+<template>
+    <DocSectionText v-bind="$attrs">
+        <p>SelectButton allows selecting only one item by default and setting <i>multiple</i> option enables choosing more than one item. In multiple case, model property should be an array.</p>
+    </DocSectionText>
+    <div class="card flex justify-center">
+        <SelectButton v-model="value" :options="options" optionLabel="name" multiple aria-labelledby="multiple" />
+    </div>
+    <DocSectionCode :code="code" />
+</template>
+
+<script setup>
+import SelectButton from '@/plex/selectbutton';
+import { ref } from 'vue';
+
+const value = ref(null);
+const options = ref([
+    { name: 'Option 1', value: 1 },
+    { name: 'Option 2', value: 2 },
+    { name: 'Option 3', value: 3 }
+]);
+
+const code = ref(`
+<template>
+    <div class="card flex justify-center">
+        <SelectButton v-model="value" :options="options" optionLabel="name" multiple aria-labelledby="multiple" />
+    </div>
+</template>
+
+<script setup>
+import SelectButton from '@/plex/selectbutton';
+import { ref } from 'vue';
+
+const value = ref(null);
+const options = ref([
+    { name: 'Option 1', value: 1 },
+    { name: 'Option 2', value: 2 },
+    { name: 'Option 3', value: 3 }
+]);
+<\/script>
+`);
+</script>
diff --git a/apps/labs/doc/selectbutton/SizesDoc.vue b/apps/labs/doc/selectbutton/SizesDoc.vue
new file mode 100644
index 000000000..a1dd39730
--- /dev/null
+++ b/apps/labs/doc/selectbutton/SizesDoc.vue
@@ -0,0 +1,41 @@
+<template>
+    <DocSectionText v-bind="$attrs">
+        <p>SelectButton provides <i>small</i> and <i>large</i> sizes as alternatives to the base.</p>
+    </DocSectionText>
+    <div class="card flex flex-col items-center gap-4">
+        <SelectButton v-model="value1" :options="options" size="small" />
+        <SelectButton v-model="value2" :options="options" />
+        <SelectButton v-model="value3" :options="options" size="large" />
+    </div>
+    <DocSectionCode :code="code" />
+</template>
+
+<script setup>
+import SelectButton from '@/plex/selectbutton';
+import { ref } from 'vue';
+
+const value1 = ref(null);
+const value2 = ref('Beginner');
+const value3 = ref('Expert');
+const options = ref(['Beginner', 'Expert']);
+
+const code = ref(`
+<template>
+    <div class="card flex flex-col items-center gap-4">
+        <SelectButton v-model="value1" :options="options" size="small" />
+        <SelectButton v-model="value2" :options="options" />
+        <SelectButton v-model="value3" :options="options" size="large" />
+    </div>
+</template>
+
+<script setup>
+import SelectButton from '@/plex/selectbutton';
+import { ref } from 'vue';
+
+const value1 = ref(null);
+const value2 = ref('Beginner');
+const value3 = ref('Expert');
+const options = ref(['Beginner', 'Expert']);
+<\/script>
+`);
+</script>
diff --git a/apps/labs/doc/selectbutton/TemplateDoc.vue b/apps/labs/doc/selectbutton/TemplateDoc.vue
new file mode 100644
index 000000000..ddfae29a9
--- /dev/null
+++ b/apps/labs/doc/selectbutton/TemplateDoc.vue
@@ -0,0 +1,51 @@
+<template>
+    <DocSectionText v-bind="$attrs">
+        <p>Label of an option is used as the display text of an item by default, for custom content support define an <i>option</i> template that gets the option instance as a parameter.</p>
+    </DocSectionText>
+    <div class="card flex justify-center">
+        <SelectButton v-model="value" :options="options" optionLabel="value" dataKey="value" aria-labelledby="custom">
+            <template #option="slotProps">
+                <i :class="slotProps.option.icon"></i>
+            </template>
+        </SelectButton>
+    </div>
+    <DocSectionCode :code="code" />
+</template>
+
+<script setup>
+import SelectButton from '@/plex/selectbutton';
+import { ref } from 'vue';
+
+const value = ref(null);
+const options = ref([
+    { icon: 'pi pi-align-left', value: 'Left' },
+    { icon: 'pi pi-align-right', value: 'Right' },
+    { icon: 'pi pi-align-center', value: 'Center' },
+    { icon: 'pi pi-align-justify', value: 'Justify' }
+]);
+
+const code = ref(`
+<template>
+    <div class="card flex justify-center">
+        <SelectButton v-model="value" :options="options" optionLabel="value" dataKey="value" aria-labelledby="custom">
+            <template #option="slotProps">
+                <i :class="slotProps.option.icon"></i>
+            </template>
+        </SelectButton>
+    </div>
+</template>
+
+<script setup>
+import SelectButton from '@/plex/selectbutton';
+import { ref } from 'vue';
+
+const value = ref(null);
+const options = ref([
+    { icon: 'pi pi-align-left', value: 'Left' },
+    { icon: 'pi pi-align-right', value: 'Right' },
+    { icon: 'pi pi-align-center', value: 'Center' },
+    { icon: 'pi pi-align-justify', value: 'Justify' }
+]);
+<\/script>
+`);
+</script>
diff --git a/apps/labs/pages/selectbutton/index.vue b/apps/labs/pages/selectbutton/index.vue
new file mode 100644
index 000000000..4decbb6d5
--- /dev/null
+++ b/apps/labs/pages/selectbutton/index.vue
@@ -0,0 +1,57 @@
+<template>
+    <DocComponent title="Vue SelectButton Component" header="SelectButton" description="SelectButton is used to choose single or multiple items from a list using buttons." :componentDocs="docs" :apiDocs="['SelectButton']" />
+</template>
+
+<script>
+import BasicDoc from '@/doc/selectbutton/BasicDoc.vue';
+import DisabledDoc from '@/doc/selectbutton/DisabledDoc.vue';
+import ImportDoc from '@/doc/selectbutton/ImportDoc.vue';
+import InvalidDoc from '@/doc/selectbutton/InvalidDoc.vue';
+import MultipleDoc from '@/doc/selectbutton/MultipleDoc.vue';
+import SizesDoc from '@/doc/selectbutton/SizesDoc.vue';
+import TemplateDoc from '@/doc/selectbutton/TemplateDoc.vue';
+
+export default {
+    data() {
+        return {
+            docs: [
+                {
+                    id: 'import',
+                    label: 'Import',
+                    component: ImportDoc
+                },
+                {
+                    id: 'basic',
+                    label: 'Basic',
+                    component: BasicDoc
+                },
+                {
+                    id: 'multiple',
+                    label: 'Multiple',
+                    component: MultipleDoc
+                },
+                {
+                    id: 'template',
+                    label: 'Template',
+                    component: TemplateDoc
+                },
+                {
+                    id: 'sizes',
+                    label: 'Sizes',
+                    component: SizesDoc
+                },
+                {
+                    id: 'invalid',
+                    label: 'Invalid',
+                    component: InvalidDoc
+                },
+                {
+                    id: 'disabled',
+                    label: 'Disabled',
+                    component: DisabledDoc
+                }
+            ]
+        };
+    }
+};
+</script>
diff --git a/apps/labs/plex/selectbutton/index.vue b/apps/labs/plex/selectbutton/index.vue
new file mode 100644
index 000000000..a6851f39b
--- /dev/null
+++ b/apps/labs/plex/selectbutton/index.vue
@@ -0,0 +1,39 @@
+<template>
+    <SelectButton unstyled :pt="theme">
+        <template v-for="(_, slotName) in $slots" v-slot:[slotName]="slotProps">
+            <slot :name="slotName" v-bind="slotProps ?? {}" />
+        </template>
+    </SelectButton>
+</template>
+
+<script setup>
+import SelectButton from 'primevue/selectbutton';
+import { ref } from 'vue';
+
+const theme = ref({
+    root: `inline-flex select-none rounded-md
+        p-invalid:outline p-invalid:outline-offset-0 p-invalid:outline-red-400 dark:p-invalid:outline-red-300`,
+    pcToggleButton: {
+        root: `inline-flex items-center justify-center overflow-hidden relative cursor-pointer select-none
+            border border-surface-100 dark:border-surface-950
+            rounded-none first:rounded-s-md last:rounded-e-md
+            bg-surface-100 dark:bg-surface-950
+            text-surface-500 dark:text-surface-400
+            p-checked:text-surface-700 dark:p-checked:text-surface-0
+            text-base font-medium
+            focus-visible:outline focus-visible:outline-1 focus-visible:outline-offset-2 focus-visible:outline-primary focus-visible:relative focus-visible:z-10
+            disabled:cursor-default
+            disabled:bg-surface-200 disabled:border-surface-200 disabled:text-surface-500
+            disabled:dark:bg-surface-700 disabled:dark:border-surface-700 disabled:dark:text-surface-400
+            p-invalid:border-red-400 dark:p-invalid:border-red-300
+            transition-colors duration-200
+            p-1 p-small:text-sm p-large:text-lg
+        `,
+        content: `relative flex-auto inline-flex items-center justify-center gap-2 py-1 px-3 
+            rounded-md transition-colors duration-200
+            p-checked:bg-surface-0 dark:p-checked:bg-surface-800 p-checked:shadow-[0px_1px_2px_0px_rgba(0,0,0,0.02),0px_1px_2px_0px_rgba(0,0,0,0.04)]`,
+        icon: ``,
+        label: ``
+    }
+});
+</script>
diff --git a/apps/labs/plex/togglebutton/index.vue b/apps/labs/plex/togglebutton/index.vue
index 9249021d0..b86f77ee2 100644
--- a/apps/labs/plex/togglebutton/index.vue
+++ b/apps/labs/plex/togglebutton/index.vue
@@ -7,6 +7,7 @@
 </template>
 
 <script setup>
+import ToggleButton from 'primevue/togglebutton';
 import { ref } from 'vue';
 
 const theme = ref({
diff --git a/packages/primevue/src/selectbutton/SelectButton.vue b/packages/primevue/src/selectbutton/SelectButton.vue
index 648142fe8..da25e8ef9 100755
--- a/packages/primevue/src/selectbutton/SelectButton.vue
+++ b/packages/primevue/src/selectbutton/SelectButton.vue
@@ -1,5 +1,5 @@
 <template>
-    <div :class="cx('root')" role="group" :aria-labelledby="ariaLabelledby" v-bind="ptmi('root')">
+    <div :class="cx('root')" role="group" :aria-labelledby="ariaLabelledby" v-bind="ptmi('root')" :data-p="dataP">
         <template v-for="(option, index) of options" :key="getOptionRenderKey(option)">
             <ToggleButton
                 :modelValue="isSelected(option)"
@@ -23,6 +23,7 @@
 </template>
 
 <script>
+import { cn } from '@primeuix/utils';
 import { equals, resolveFieldData } from '@primeuix/utils/object';
 import Ripple from 'primevue/ripple';
 import ToggleButton from 'primevue/togglebutton';
@@ -93,6 +94,11 @@ export default {
     computed: {
         equalityKey() {
             return this.optionValue ? null : this.dataKey;
+        },
+        dataP() {
+            return cn({
+                invalid: this.$invalid
+            });
         }
     },
     directives: {