From c51d22352641cf39ffa87407063b0f7aa97d4b8d Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Tu=C4=9F=C3=A7e=20K=C3=BC=C3=A7=C3=BCko=C4=9Flu?=
 <tugcekucukoglu.860@gmail.com>
Date: Wed, 24 May 2023 13:28:20 +0300
Subject: [PATCH] Refactor #3965 - For InputMask

---
 components/lib/inputmask/BaseInputMask.vue | 57 ++++++++++++++++++++++
 components/lib/inputmask/InputMask.d.ts    |  5 ++
 components/lib/inputmask/InputMask.vue     | 37 ++------------
 3 files changed, 65 insertions(+), 34 deletions(-)
 create mode 100644 components/lib/inputmask/BaseInputMask.vue

diff --git a/components/lib/inputmask/BaseInputMask.vue b/components/lib/inputmask/BaseInputMask.vue
new file mode 100644
index 000000000..e873f616f
--- /dev/null
+++ b/components/lib/inputmask/BaseInputMask.vue
@@ -0,0 +1,57 @@
+<script>
+import BaseComponent from 'primevue/basecomponent';
+import { useStyle } from 'primevue/usestyle';
+
+const styles = `
+`;
+
+const classes = {
+    root: ({ instance }) => [
+        'p-inputmask p-inputtext p-component',
+        {
+            'p-filled': instance.filled
+        }
+    ]
+};
+
+const { load: loadStyle, unload: unloadStyle } = useStyle(styles, { id: 'primevue_inputmask_style', manual: true });
+
+export default {
+    name: 'BaseInputMask',
+    extends: BaseComponent,
+    props: {
+        modelValue: null,
+        slotChar: {
+            type: String,
+            default: '_'
+        },
+        mask: {
+            type: String,
+            default: null
+        },
+        autoClear: {
+            type: Boolean,
+            default: true
+        },
+        unmask: {
+            type: Boolean,
+            default: false
+        },
+        readonly: {
+            type: Boolean,
+            default: false
+        }
+    },
+    css: {
+        classes
+    },
+    watch: {
+        isUnstyled: {
+            immediate: true,
+            handler(newValue) {
+                !newValue && loadStyle();
+            }
+        }
+    }
+};
+</script>
diff --git a/components/lib/inputmask/InputMask.d.ts b/components/lib/inputmask/InputMask.d.ts
index fdb65de4e..c95e8ad0f 100755
--- a/components/lib/inputmask/InputMask.d.ts
+++ b/components/lib/inputmask/InputMask.d.ts
@@ -66,6 +66,11 @@ export interface InputMaskProps {
      * @type {InputMaskPassThroughOptions}
      */
     pt?: InputMaskPassThroughOptions;
+    /**
+     * When enabled, it removes component related styles in the core.
+     * @defaultValue false
+     */
+    unstyled?: boolean;
 }
 
 export interface InputMaskSlots {}
diff --git a/components/lib/inputmask/InputMask.vue b/components/lib/inputmask/InputMask.vue
index 930b887a5..f2adc8c4a 100755
--- a/components/lib/inputmask/InputMask.vue
+++ b/components/lib/inputmask/InputMask.vue
@@ -1,38 +1,15 @@
 <template>
-    <input :class="inputClass" :readonly="readonly" @input="onInput" @focus="onFocus" @blur="onBlur" @keydown="onKeyDown" @keypress="onKeyPress" @paste="onPaste" v-bind="ptm('root')" />
+    <input :class="cx('root')" :readonly="readonly" @input="onInput" @focus="onFocus" @blur="onBlur" @keydown="onKeyDown" @keypress="onKeyPress" @paste="onPaste" v-bind="ptm('root')" />
 </template>
 
 <script>
-import BaseComponent from 'primevue/basecomponent';
 import { DomHandler } from 'primevue/utils';
+import BaseInputMask from './BaseInputMask.vue';
 
 export default {
     name: 'InputMask',
-    extends: BaseComponent,
+    extends: BaseInputMask,
     emits: ['update:modelValue', 'focus', 'blur', 'keydown', 'complete', 'keypress', 'paste'],
-    props: {
-        modelValue: null,
-        slotChar: {
-            type: String,
-            default: '_'
-        },
-        mask: {
-            type: String,
-            default: null
-        },
-        autoClear: {
-            type: Boolean,
-            default: true
-        },
-        unmask: {
-            type: Boolean,
-            default: false
-        },
-        readonly: {
-            type: Boolean,
-            default: false
-        }
-    },
     watch: {
         mask(newMask, oldMask) {
             if (oldMask !== newMask) {
@@ -519,14 +496,6 @@ export default {
     computed: {
         filled() {
             return this.modelValue != null && this.modelValue.toString().length > 0;
-        },
-        inputClass() {
-            return [
-                'p-inputmask p-inputtext p-component',
-                {
-                    'p-filled': this.filled
-                }
-            ];
         }
     }
 };