Refactor #5426 - For SelectButton

components/lib/selectbutton/SelectButton.d.ts

@@ -10,14 +10,15 @@
 import { VNode } from 'vue';
 import { ComponentHooks } from '../basecomponent';
 import { PassThroughOptions } from '../passthrough';
+// import { ToggleButtonPassThroughOptions } from '../togglebutton';
 import { ClassComponent, GlobalComponentConstructor, PassThrough } from '../ts-helpers';
 
-export declare type SelectButtonPassThroughOptionType<T = any> = SelectButtonPassThroughAttributes | ((options: SelectButtonPassThroughMethodOptions<T>) => SelectButtonPassThroughAttributes | string) | string | null | undefined;
+export declare type SelectButtonPassThroughOptionType = SelectButtonPassThroughAttributes | ((options: SelectButtonPassThroughMethodOptions) => SelectButtonPassThroughAttributes | string) | string | null | undefined;
 
 /**
  * Custom passthrough(pt) option method.
  */
-export interface SelectButtonPassThroughMethodOptions<T = any> {
+export interface SelectButtonPassThroughMethodOptions {
     /**
      * Defines instance.
      */
@@ -41,7 +42,7 @@ export interface SelectButtonPassThroughMethodOptions<T = any> {
     /**
      * Defines parent options.
      */
-    parent: T;
+    parent: any;
     /**
      * Defines passthrough(pt) options in global config.
      */
@@ -52,19 +53,19 @@ export interface SelectButtonPassThroughMethodOptions<T = any> {
  * Custom passthrough(pt) options.
  * @see {@link SelectButtonProps.pt}
  */
-export interface SelectButtonPassThroughOptions<T = any> {
+export interface SelectButtonPassThroughOptions {
     /**
      * Used to pass attributes to the root's DOM element.
      */
-    root?: SelectButtonPassThroughOptionType<T>;
+    root?: SelectButtonPassThroughOptionType;
     /**
      * Used to pass attributes to the button's DOM element.
      */
-    button?: SelectButtonPassThroughOptionType<T>;
+    button?: SelectButtonPassThroughOptionType;
     /**
      * Used to pass attributes to the label's DOM element.
      */
-    label?: SelectButtonPassThroughOptionType<T>;
+    label?: SelectButtonPassThroughOptionType;
     /**
      * Used to manage all lifecycle hooks.
      * @see {@link BaseComponent.ComponentHooks}

components/lib/selectbutton/SelectButton.vue

@@ -1,26 +1,20 @@
 <template>
     <div :class="cx('root')" role="group" :aria-labelledby="ariaLabelledby" v-bind="ptmi('root')">
-        <button
-            v-for="(option, i) of options"
-            :key="getOptionRenderKey(option)"
-            v-ripple
-            :aria-pressed="isSelected(option)"
-            :aria-disabled="isOptionDisabled(option)"
-            :class="cx('button', { option })"
-            @click="onOptionSelect($event, option, i)"
-            v-bind="getPTOptions(option, 'button')"
-            :data-p-highlight="isSelected(option)"
-            :data-p-disabled="isOptionDisabled(option)"
-        >
-            <slot name="option" :option="option" :index="i" :class="cx('label')">
-                <span :class="cx('label')" v-bind="getPTOptions(option, 'label')">{{ getOptionLabel(option) }}</span>
-            </slot>
-        </button>
+        <template v-for="(option, index) of options" :key="getOptionRenderKey(option)">
+            <ToggleButton :modelValue="isSelected(option)" :onLabel="getOptionLabel(option)" :offLabel="getOptionLabel(option)" :disabled="disabled" :invalid="invalid" @change="onOptionSelect($event, option, index)" :pt="ptm('button')">
+                <template v-if="$slots.option" #default>
+                    <slot name="option" :option="option" :index="index">
+                        <span v-bind="ptm('button')['label']">{{ getOptionLabel(option) }}</span>
+                    </slot>
+                </template>
+            </ToggleButton>
+        </template>
     </div>
 </template>
 
 <script>
 import Ripple from 'primevue/ripple';
+import ToggleButton from 'primevue/togglebutton';
 import { ObjectUtils } from 'primevue/utils';
 import BaseSelectButton from './BaseSelectButton.vue';
 
@@ -103,6 +97,9 @@ export default {
     },
     directives: {
         ripple: Ripple
+    },
+    components: {
+        ToggleButton
     }
 };
 </script>

components/lib/togglebutton/ToggleButton.d.ts

@@ -12,12 +12,12 @@ import { ComponentHooks } from '../basecomponent';
 import { PassThroughOptions } from '../passthrough';
 import { ClassComponent, GlobalComponentConstructor, PassThrough } from '../ts-helpers';
 
-export declare type ToggleButtonPassThroughOptionType = ToggleButtonPassThroughAttributes | ((options: ToggleButtonPassThroughMethodOptions) => ToggleButtonPassThroughAttributes | string) | string | null | undefined;
+export declare type ToggleButtonPassThroughOptionType<T = any> = ToggleButtonPassThroughAttributes | ((options: ToggleButtonPassThroughMethodOptions<T = any>) => ToggleButtonPassThroughAttributes | string) | string | null | undefined;
 
 /**
  * Custom passthrough(pt) option method.
  */
-export interface ToggleButtonPassThroughMethodOptions {
+export interface ToggleButtonPassThroughMethodOptions<T = any> {
     /**
      * Defines instance.
      */
@@ -37,7 +37,7 @@ export interface ToggleButtonPassThroughMethodOptions {
     /**
      * Defines parent options.
      */
-    parent: any;
+    parent: T;
     /**
      * Defines passthrough(pt) options in global config.
      */
@@ -48,19 +48,19 @@ export interface ToggleButtonPassThroughMethodOptions {
  * Custom passthrough(pt) options.
  * @see {@link ToggleButtonProps.pt}
  */
-export interface ToggleButtonPassThroughOptions {
+export interface ToggleButtonPassThroughOptions<T = any>  {
     /**
      * Used to pass attributes to the root's DOM element.
      */
-    root?: ToggleButtonPassThroughOptionType;
+    root?: ToggleButtonPassThroughOptionType<T>;
     /**
      * Used to pass attributes to the icon's DOM element.
      */
-    icon?: ToggleButtonPassThroughOptionType;
+    icon?: ToggleButtonPassThroughOptionType<T>;
     /**
      * Used to pass attributes to the label's DOM element.
      */
-    label?: ToggleButtonPassThroughOptionType;
+    label?: ToggleButtonPassThroughOptionType<T>;
     /**
      * Used to manage all lifecycle hooks.
      * @see {@link BaseComponent.ComponentHooks}
@@ -173,6 +173,10 @@ export interface ToggleButtonProps {
  * Defines valid slots in ToggleButton component.
  */
 export interface ToggleButtonSlots {
+    /**
+     * Custom content such as icons, images and text can be placed inside the button via the default slot.
+     */
+    default(): VNode[];
     /**
      * Custom icon template.
      * @param {Object} scope - icon slot's params.

components/lib/togglebutton/ToggleButton.vue

@@ -1,9 +1,11 @@
 <template>
     <button v-ripple type="button" :class="cx('root')" :tabindex="tabindex" :disabled="disabled" :aria-pressed="modelValue" @click="onChange" v-bind="getPTOptions('root')" :data-p-highlight="active" :data-p-disabled="disabled">
-        <slot name="icon" :value="modelValue" :class="cx('icon')">
-            <span v-if="onIcon || offIcon" :class="[cx('icon'), modelValue ? onIcon : offIcon]" v-bind="getPTOptions('icon')" />
+        <slot>
+            <slot name="icon" :value="modelValue" :class="cx('icon')">
+                <span v-if="onIcon || offIcon" :class="[cx('icon'), modelValue ? onIcon : offIcon]" v-bind="getPTOptions('icon')" />
+            </slot>
+            <span :class="cx('label')" v-bind="getPTOptions('label')">{{ label }}</span>
         </slot>
-        <span :class="cx('label')" v-bind="getPTOptions('label')">{{ label }}</span>
     </button>
 </template>