From 898337667e419453c6257cdb0ed1d9d1ff542d55 Mon Sep 17 00:00:00 2001
From: tugcekucukoglu <tugcekucukoglu.860@gmail.com>
Date: Mon, 18 Mar 2024 13:02:00 +0300
Subject: [PATCH] Refactor #5426 - For InputMask

---
 components/lib/inputmask/BaseInputMask.vue    |  4 ++++
 components/lib/inputmask/InputMask.d.ts       | 21 ++++++++++++++--
 components/lib/inputmask/InputMask.vue        | 24 ++++++++++++++++---
 .../lib/inputmask/style/InputMaskStyle.js     |  9 +------
 4 files changed, 45 insertions(+), 13 deletions(-)

diff --git a/components/lib/inputmask/BaseInputMask.vue b/components/lib/inputmask/BaseInputMask.vue
index 5484a129e1..eb7d1976e6 100644
--- a/components/lib/inputmask/BaseInputMask.vue
+++ b/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
diff --git a/components/lib/inputmask/InputMask.d.ts b/components/lib/inputmask/InputMask.d.ts
index 9f24848947..eb3f7782a3 100755
--- a/components/lib/inputmask/InputMask.d.ts
+++ b/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}
diff --git a/components/lib/inputmask/InputMask.vue b/components/lib/inputmask/InputMask.vue
index ec56d278a6..2062f4289f 100755
--- a/components/lib/inputmask/InputMask.vue
+++ b/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,
-                    disabled: this.$attrs.disabled || this.$attrs.disabled === ''
+                    filled: this.filled
                 }
             };
         }
+    },
+    components: {
+        IMInputText: InputText
     }
 };
 </script>
diff --git a/components/lib/inputmask/style/InputMaskStyle.js b/components/lib/inputmask/style/InputMaskStyle.js
index 30b3291874..d3f653c9b1 100644
--- a/components/lib/inputmask/style/InputMaskStyle.js
+++ b/components/lib/inputmask/style/InputMaskStyle.js
@@ -1,14 +1,7 @@
 import BaseStyle from 'primevue/base/style';
 
 const classes = {
-    root: ({ props, instance }) => [
-        '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'
-        }
-    ]
+    root: 'p-inputmask p-inputmask-text p-component'
 };
 
 export default BaseStyle.extend({