Refactor #5437 - For ToggleButton

components/lib/togglebutton/BaseToggleButton.vue

@@ -37,18 +37,6 @@ export default {
             type: Number,
             default: null
         },
-        inputId: {
-            type: String,
-            default: null
-        },
-        inputClass: {
-            type: [String, Object],
-            default: null
-        },
-        inputStyle: {
-            type: Object,
-            default: null
-        },
         ariaLabelledby: {
             type: String,
             default: null

components/lib/togglebutton/ToggleButton.d.ts

@@ -26,10 +26,6 @@ export interface ToggleButtonPassThroughMethodOptions {
      * Defines valid properties.
      */
     props: ToggleButtonProps;
-    /**
-     * Defines current inline state.
-     */
-    state: ToggleButtonState;
     /**
      * Defines current options.
      */
@@ -58,13 +54,9 @@ export interface ToggleButtonPassThroughOptions {
      */
     root?: ToggleButtonPassThroughOptionType;
     /**
-     * Used to pass attributes to the input's DOM element.
+     * Used to pass attributes to the button's DOM element.
      */
-    input?: ToggleButtonPassThroughOptionType;
+    button?: ToggleButtonPassThroughOptionType;
-    /**
-     * Used to pass attributes to the box's DOM element.
-     */
-    box?: ToggleButtonPassThroughOptionType;
     /**
      * Used to pass attributes to the icon's DOM element.
      */
@@ -87,13 +79,6 @@ export interface ToggleButtonPassThroughAttributes {
     [key: string]: any;
 }
 
-/**
- * Defines current inline state in ToggleButton component.
- */
-export interface ToggleButtonState {
-    [key: string]: any;
-}
-
 /**
  * Defines current options in ToggleButton component.
  */
@@ -163,18 +148,6 @@ export interface ToggleButtonProps {
      * Index of the element in tabbing order.
      */
     tabindex?: string | undefined;
-    /**
-     * 	Identifier of the focus input to match a label defined for the chips.
-     */
-    inputId?: string | undefined;
-    /**
-     * Style class of the input field.
-     */
-    inputClass?: string | object | undefined;
-    /**
-     * Inline style of the input field.
-     */
-    inputStyle?: object | undefined;
     /**
      * Establishes relationships between the component and label(s) where its value should be one or more element IDs.
      */

components/lib/togglebutton/ToggleButton.vue

@@ -1,30 +1,11 @@
 <template>
     <div :class="cx('root')" v-bind="getPTOptions('root')" :data-p-highlight="active" :data-p-disabled="disabled">
-        <input
+        <button v-ripple type="button" :class="cx('button')" :tabindex="tabindex" :aria-pressed="modelValue" :aria-disabled="disabled" @click="onChange" v-bind="getPTOptions('button')">
-            :id="inputId"
-            type="checkbox"
-            role="switch"
-            :class="[cx('input'), inputClass]"
-            :style="inputStyle"
-            :value="modelValue"
-            :checked="active"
-            :tabindex="tabindex"
-            :disabled="disabled"
-            :readonly="readonly"
-            :aria-labelledby="ariaLabelledby"
-            :aria-label="ariaLabel"
-            :aria-invalid="invalid || undefined"
-            @focus="onFocus"
-            @blur="onBlur"
-            @change="onChange"
-            v-bind="getPTOptions('input')"
-        />
-        <div v-ripple :class="cx('box')" v-bind="getPTOptions('box')">
             <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>
-        </div>
+        </button>
     </div>
 </template>
 
@@ -37,7 +18,7 @@ export default {
     name: 'ToggleButton',
     extends: BaseToggleButton,
     inheritAttrs: false,
-    emits: ['update:modelValue', 'change', 'focus', 'blur'],
+    emits: ['update:modelValue', 'change'],
     methods: {
         getPTOptions(key) {
             const _ptm = key === 'root' ? this.ptmi : this.ptm;
@@ -54,12 +35,6 @@ export default {
                 this.$emit('update:modelValue', !this.modelValue);
                 this.$emit('change', event);
             }
-        },
-        onFocus(event) {
-            this.$emit('focus', event);
-        },
-        onBlur(event) {
-            this.$emit('blur', event);
         }
     },
     computed: {
@@ -69,9 +44,6 @@ export default {
         hasLabel() {
             return ObjectUtils.isNotEmpty(this.onLabel) && ObjectUtils.isNotEmpty(this.offLabel);
         },
-        hasIcon() {
-            return this.$slots.icon || (this.onIcon && this.offIcon);
-        },
         label() {
             return this.hasLabel ? (this.modelValue ? this.onLabel : this.offLabel) : '&nbsp;';
         }

components/lib/togglebutton/style/ToggleButtonStyle.js

@@ -9,21 +9,15 @@ const classes = {
             'p-invalid': props.invalid
         }
     ],
-    input: 'p-togglebutton-input',
+    button: 'p-togglebutton-button',
-    box: ({ instance }) => [
-        'p-button p-component',
-        {
-            'p-button-icon-only': instance.hasIcon && !instance.hasLabel
-        }
-    ],
     icon: ({ instance, props }) => [
-        'p-button-icon',
+        'p-togglebutton-icon',
         {
-            'p-button-icon-left': props.iconPos === 'left' && instance.label,
+            'p-togglebutton-icon-left': props.iconPos === 'left' && instance.label,
-            'p-button-icon-right': props.iconPos === 'right' && instance.label
+            'p-togglebutton-icon-right': props.iconPos === 'right' && instance.label
         }
     ],
-    label: 'p-button-label'
+    label: 'p-togglebutton-label'
 };
 
 export default BaseStyle.extend({