Refactor #5426 - For InputMask

components/lib/inputmask/BaseInputMask.vue

@@ -31,6 +31,10 @@ export default {
             type: Boolean,
             default: false
         },
+        disabled: {
+            type: Boolean,
+            default: false
+        },
         variant: {
             type: String,
             default: null

components/lib/inputmask/InputMask.d.ts

@@ -8,6 +8,7 @@
  *
  */
 import { ComponentHooks } from '../basecomponent';
+import { InputTextPassThroughOptions } from '../inputtext';
 import { PassThroughOptions } from '../passthrough';
 import { ClassComponent, GlobalComponentConstructor, PassThrough } from '../ts-helpers';
 
@@ -43,15 +44,26 @@ export interface InputMaskPassThroughMethodOptions {
     global: object | undefined;
 }
 
+/**
+ * Custom shared passthrough(pt) option method.
+ */
+export interface InputMaskSharedPassThroughMethodOptions {
+    /**
+     * Defines valid properties.
+     */
+    props: InputMaskProps;
+}
+
 /**
  * Custom passthrough(pt) options.
  * @see {@link InputMaskProps.pt}
  */
 export interface InputMaskPassThroughOptions {
     /**
-     * Used to pass attributes to the root's DOM element.
+     * Used to pass attributes to the InputText component.
+     * @see {@link InputTextPassThroughOptions}
      */
-    root?: InputMaskPassThroughOptionType;
+    root?: InputTextPassThroughOptions<InputMaskSharedPassThroughMethodOptions>;
     /**
      * Used to manage all lifecycle hooks.
      * @see {@link BaseComponent.ComponentHooks}
@@ -124,6 +136,11 @@ export interface InputMaskProps {
      * @defaultValue outlined
      */
     variant?: 'outlined' | 'filled' | undefined;
+    /**
+     * When present, it specifies that the component should be disabled.
+     * @defaultValue false
+     */
+    disabled?: boolean | undefined;
     /**
      * Used to pass attributes to DOM elements inside the component.
      * @type {InputMaskPassThroughOptions}

components/lib/inputmask/InputMask.vue

@@ -1,8 +1,24 @@
 <template>
-    <input :class="cx('root')" :readonly="readonly" :aria-invalid="invalid || undefined" @input="onInput" @focus="onFocus" @blur="onBlur" @keydown="onKeyDown" @keypress="onKeyPress" @paste="onPaste" v-bind="ptmi('root', ptmParams)" />
+    <IMInputText
+        :value="modelValue"
+        :class="cx('root')"
+        :readonly="readonly"
+        :disabled="disabled"
+        :invalid="invalid"
+        :variant="variant"
+        :unstyled="unstyled"
+        @input="onInput"
+        @focus="onFocus"
+        @blur="onBlur"
+        @keydown="onKeyDown"
+        @keypress="onKeyPress"
+        @paste="onPaste"
+        :pt="ptmi('root', ptmParams)"
+    />
 </template>
 
 <script>
+import InputText from 'primevue/inputtext';
 import { DomHandler } from 'primevue/utils';
 import BaseInputMask from './BaseInputMask.vue';
 
@@ -503,11 +519,13 @@ export default {
         ptmParams() {
             return {
                 context: {
-                    filled: this.filled,
+                    filled: this.filled
-                    disabled: this.$attrs.disabled || this.$attrs.disabled === ''
                 }
             };
         }
+    },
+    components: {
+        IMInputText: InputText
     }
 };
 </script>

components/lib/inputmask/style/InputMaskStyle.js

@@ -1,14 +1,7 @@
 import BaseStyle from 'primevue/base/style';
 
 const classes = {
-    root: ({ props, instance }) => [
+    root: 'p-inputmask p-inputmask-text p-component'
-        'p-inputmask p-inputtext p-component',
-        {
-            'p-filled': instance.filled,
-            'p-invalid': props.invalid,
-            'p-variant-filled': props.variant ? props.variant === 'filled' : instance.$primevue.config.inputStyle === 'filled'
-        }
-    ]
 };
 
 export default BaseStyle.extend({