Refactor #4209 - For InputMask

components/lib/inputmask/InputMask.d.ts

@@ -10,7 +10,16 @@
 import { ComponentHooks } from '../basecomponent';
 import { ClassComponent, GlobalComponentConstructor } from '../ts-helpers';
 
-export declare type InputMaskPassThroughOptionType = InputMaskPassThroughAttributes | null | undefined;
+export declare type InputMaskPassThroughOptionType = InputMaskPassThroughAttributes | ((options: InputMaskPassThroughMethodOptions) => InputMaskPassThroughAttributes | string) | string | null | undefined;
+
+/**
+ * Custom passthrough(pt) option method.
+ */
+export interface InputMaskPassThroughMethodOptions {
+    instance: any;
+    props: InputMaskProps;
+    context: InputMaskContext;
+}
 
 /**
  * Custom passthrough(pt) options.
@@ -35,6 +44,22 @@ export interface InputMaskPassThroughAttributes {
     [key: string]: any;
 }
 
+/**
+ * Defines current options in InputMask component.
+ */
+export interface InputMaskContext {
+    /**
+     * Current filled state of the component as a boolean.
+     * @defaultValue false
+     */
+    filled: boolean;
+    /**
+     * Current disabled state of the component as a boolean.
+     * @defaultValue false
+     */
+    disabled: boolean;
+}
+
 /**
  * Defines valid properties in InputMask component.
  */
@@ -79,6 +104,9 @@ export interface InputMaskProps {
     unstyled?: boolean;
 }
 
+/**
+ * Defines valid slots in InputMask component.
+ */
 export interface InputMaskSlots {}
 
 /**

components/lib/inputmask/InputMask.vue

@@ -1,5 +1,5 @@
 <template>
-    <input :class="cx('root')" :readonly="readonly" @input="onInput" @focus="onFocus" @blur="onBlur" @keydown="onKeyDown" @keypress="onKeyPress" @paste="onPaste" v-bind="ptm('root')" data-pc-name="inputmask" />
+    <input :class="cx('root')" :readonly="readonly" @input="onInput" @focus="onFocus" @blur="onBlur" @keydown="onKeyDown" @keypress="onKeyPress" @paste="onPaste" v-bind="ptm('root', ptmParams)" data-pc-name="inputmask" />
 </template>
 
 <script>
@@ -496,6 +496,14 @@ export default {
     computed: {
         filled() {
             return this.modelValue != null && this.modelValue.toString().length > 0;
+        },
+        ptmParams() {
+            return {
+                context: {
+                    filled: this.filled,
+                    disabled: this.$attrs.disabled || this.$attrs.disabled === ''
+                }
+            };
         }
     }
 };