Skip to content

Commit

Permalink
Refactor #4209 - For InputMask
Browse files Browse the repository at this point in the history
  • Loading branch information
tugcekucukoglu committed Jul 26, 2023
1 parent 38bd271 commit ea6bd0f
Show file tree
Hide file tree
Showing 2 changed files with 38 additions and 2 deletions.
30 changes: 29 additions & 1 deletion components/lib/inputmask/InputMask.d.ts
Original file line number Diff line number Diff line change
Expand Up @@ -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.
Expand All @@ -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.
*/
Expand Down Expand Up @@ -79,6 +104,9 @@ export interface InputMaskProps {
unstyled?: boolean;
}

/**
* Defines valid slots in InputMask component.
*/
export interface InputMaskSlots {}

/**
Expand Down
10 changes: 9 additions & 1 deletion components/lib/inputmask/InputMask.vue
Original file line number Diff line number Diff line change
@@ -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>
Expand Down Expand Up @@ -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 === ''
}
};
}
}
};
Expand Down

0 comments on commit ea6bd0f

Please sign in to comment.