Refactor #3965 - For SelectButton

components/lib/selectbutton/BaseSelectButton.vue

@@ -0,0 +1,41 @@
+<script>
+import BaseComponent from 'primevue/basecomponent';
+
+const classes = {
+    root: ({ props }) => ['p-selectbutton p-buttonset p-component', { 'p-disabled': props.disabled }],
+    button: ({ instance, option }) => [
+        'p-button p-component',
+        {
+            'p-highlight': instance.isSelected(option),
+            'p-disabled': instance.isOptionDisabled(option)
+        }
+    ],
+    label: 'p-button-label'
+};
+
+export default {
+    name: 'BaseSelectButton',
+    extends: BaseComponent,
+    props: {
+        modelValue: null,
+        options: Array,
+        optionLabel: null,
+        optionValue: null,
+        optionDisabled: null,
+        multiple: Boolean,
+        unselectable: {
+            type: Boolean,
+            default: false
+        },
+        disabled: Boolean,
+        dataKey: null,
+        'aria-labelledby': {
+            type: String,
+            default: null
+        }
+    },
+    css: {
+        classes
+    }
+};
+</script>

components/lib/selectbutton/SelectButton.d.ts

@@ -140,6 +140,11 @@ export interface SelectButtonProps {
      * @type {SelectButtonPassThroughOptions}
      */
     pt?: SelectButtonPassThroughOptions;
+    /**
+     * When enabled, it removes component related styles in the core.
+     * @defaultValue false
+     */
+    unstyled?: boolean;
 }
 
 /**

components/lib/selectbutton/SelectButton.vue

@@ -1,5 +1,5 @@
 <template>
-    <div ref="container" :class="containerClass" role="group" :aria-labelledby="ariaLabelledby" v-bind="ptm('root')">
+    <div ref="container" :class="cx('root')" role="group" :aria-labelledby="ariaLabelledby" v-bind="ptm('root')">
         <div
             v-for="(option, i) of options"
             :key="getOptionRenderKey(option)"
@@ -9,47 +9,31 @@
             :role="multiple ? 'checkbox' : 'radio'"
             :aria-checked="isSelected(option)"
             :aria-disabled="optionDisabled"
-            :class="getButtonClass(option, i)"
+            :class="cx('button', { option })"
             @click="onOptionSelect($event, option, i)"
             @keydown="onKeydown($event, option, i)"
             @focus="onFocus($event)"
             @blur="onBlur($event, option)"
             v-bind="getPTOptions(option, 'button')"
+            :data-p-highlight="isSelected(option)"
+            :data-p-disabled="isOptionDisabled(option)"
         >
-            <slot name="option" :option="option" :index="i">
+            <slot name="option" :option="option" :index="i" :class="cx('label')">
-                <span class="p-button-label" v-bind="getPTOptions(option, 'label')">{{ getOptionLabel(option) }}</span>
+                <span :class="cx('label')" v-bind="getPTOptions(option, 'label')">{{ getOptionLabel(option) }}</span>
             </slot>
         </div>
     </div>
 </template>
 
 <script>
-import BaseComponent from 'primevue/basecomponent';
 import Ripple from 'primevue/ripple';
 import { DomHandler, ObjectUtils } from 'primevue/utils';
+import BaseSelectButton from './BaseSelectButton.vue';
 
 export default {
     name: 'SelectButton',
-    extends: BaseComponent,
+    extends: BaseSelectButton,
     emits: ['update:modelValue', 'focus', 'blur', 'change'],
-    props: {
-        modelValue: null,
-        options: Array,
-        optionLabel: null,
-        optionValue: null,
-        optionDisabled: null,
-        multiple: Boolean,
-        unselectable: {
-            type: Boolean,
-            default: false
-        },
-        disabled: Boolean,
-        dataKey: null,
-        'aria-labelledby': {
-            type: String,
-            default: null
-        }
-    },
     data() {
         return {
             focusedIndex: 0
@@ -60,11 +44,11 @@ export default {
     },
     methods: {
         defaultTabIndexes() {
-            let opts = DomHandler.find(this.$refs.container, '.p-button');
+            let opts = DomHandler.find(this.$refs.container, '[data-pc-section="button"]');
-            let firstHighlight = DomHandler.findSingle(this.$refs.container, '.p-highlight');
+            let firstHighlight = DomHandler.findSingle(this.$refs.container, '[data-p-highlight="true"]');
 
             for (let i = 0; i < opts.length; i++) {
-                if ((DomHandler.hasClass(opts[i], 'p-highlight') && ObjectUtils.equals(opts[i], firstHighlight)) || (firstHighlight === null && i == 0)) {
+                if ((DomHandler.getAttribute(opts[i], 'data-p-highlight') === true && ObjectUtils.equals(opts[i], firstHighlight)) || (firstHighlight === null && i == 0)) {
                     this.focusedIndex = i;
                 }
             }
@@ -189,26 +173,9 @@ export default {
             }
 
             this.$emit('blur', event, option);
-        },
-        getButtonClass(option) {
-            return [
-                'p-button p-component',
-                {
-                    'p-highlight': this.isSelected(option),
-                    'p-disabled': this.isOptionDisabled(option)
-                }
-            ];
         }
     },
     computed: {
-        containerClass() {
-            return [
-                'p-selectbutton p-buttonset p-component',
-                {
-                    'p-disabled': this.disabled
-                }
-            ];
-        },
         equalityKey() {
             return this.optionValue ? null : this.dataKey;
         }