primevue 3.29.2 → 3.30.0

package/inplace/inplace.js

@@ -1,173 +1,172 @@
 this.primevue = this.primevue || {};
-this.primevue.inplace = (function (BaseComponent, Button, FocusTrap, TimesIcon, vue) {
+this.primevue.inplace = (function (Button, FocusTrap, TimesIcon, BaseComponent, usestyle, vue) {
     'use strict';
 
     function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
-    var BaseComponent__default = /*#__PURE__*/_interopDefaultLegacy(BaseComponent);
     var Button__default = /*#__PURE__*/_interopDefaultLegacy(Button);
     var FocusTrap__default = /*#__PURE__*/_interopDefaultLegacy(FocusTrap);
     var TimesIcon__default = /*#__PURE__*/_interopDefaultLegacy(TimesIcon);
+    var BaseComponent__default = /*#__PURE__*/_interopDefaultLegacy(BaseComponent);
 
-    var script = {
-        name: 'Inplace',
-        extends: BaseComponent__default["default"],
-        emits: ['open', 'close', 'update:active'],
-        props: {
-            closable: {
-                type: Boolean,
-                default: false
-            },
-            active: {
-                type: Boolean,
-                default: false
-            },
-            disabled: {
-                type: Boolean,
-                default: false
-            },
-            closeIcon: {
-                type: String,
-                default: undefined
-            },
-            displayProps: {
-                type: null,
-                default: null
-            },
-            closeButtonProps: {
-                type: null,
-                default: null
-            }
-        },
-        data() {
-            return {
-                d_active: this.active
-            };
+    var styles = "\n.p-inplace .p-inplace-display {\n    display: inline;\n    cursor: pointer;\n}\n\n.p-inplace .p-inplace-content {\n    display: inline;\n}\n\n.p-fluid .p-inplace.p-inplace-closable .p-inplace-content {\n    display: flex;\n}\n\n.p-fluid .p-inplace.p-inplace-closable .p-inplace-content > .p-inputtext {\n    flex: 1 1 auto;\n    width: 1%;\n}\n";
+    var classes = {
+      root: function root(_ref) {
+        var props = _ref.props;
+        return ['p-inplace p-component', {
+          'p-inplace-closable': props.closable
+        }];
+      },
+      display: function display(_ref2) {
+        var props = _ref2.props;
+        return ['p-inplace-display', {
+          'p-disabled': props.disabled
+        }];
+      },
+      content: 'p-inplace-content'
+    };
+    var _useStyle = usestyle.useStyle(styles, {
+        name: 'inplace',
+        manual: true
+      }),
+      loadStyle = _useStyle.load;
+    var script$1 = {
+      name: 'BaseInplace',
+      "extends": BaseComponent__default["default"],
+      props: {
+        closable: {
+          type: Boolean,
+          "default": false
         },
-        watch: {
-            active(newValue) {
-                this.d_active = newValue;
-            }
+        active: {
+          type: Boolean,
+          "default": false
         },
-        methods: {
-            open(event) {
-                if (this.disabled) {
-                    return;
-                }
-
-                this.$emit('open', event);
-                this.d_active = true;
-                this.$emit('update:active', true);
-            },
-            close(event) {
-                this.$emit('close', event);
-                this.d_active = false;
-                this.$emit('update:active', false);
-                setTimeout(() => {
-                    this.$refs.display.focus();
-                }, 0);
-            }
+        disabled: {
+          type: Boolean,
+          "default": false
         },
-        computed: {
-            containerClass() {
-                return ['p-inplace p-component', { 'p-inplace-closable': this.closable }];
-            },
-            displayClass() {
-                return ['p-inplace-display', { 'p-disabled': this.disabled }];
-            },
-            closeAriaLabel() {
-                return this.$primevue.config.locale.aria ? this.$primevue.config.locale.aria.close : undefined;
-            }
+        closeIcon: {
+          type: String,
+          "default": undefined
         },
-        components: {
-            IPButton: Button__default["default"],
-            TimesIcon: TimesIcon__default["default"]
+        displayProps: {
+          type: null,
+          "default": null
         },
-        directives: {
-            focustrap: FocusTrap__default["default"]
+        closeButtonProps: {
+          type: null,
+          "default": null
         }
+      },
+      css: {
+        classes: classes,
+        loadStyle: loadStyle
+      },
+      provide: function provide() {
+        return {
+          $parentInstance: this
+        };
+      }
     };
 
-    const _hoisted_1 = ["tabindex"];
+    var script = {
+      name: 'Inplace',
+      "extends": script$1,
+      emits: ['open', 'close', 'update:active'],
+      data: function data() {
+        return {
+          d_active: this.active
+        };
+      },
+      watch: {
+        active: function active(newValue) {
+          this.d_active = newValue;
+        }
+      },
+      methods: {
+        open: function open(event) {
+          if (this.disabled) {
+            return;
+          }
+          this.$emit('open', event);
+          this.d_active = true;
+          this.$emit('update:active', true);
+        },
+        close: function close(event) {
+          var _this = this;
+          this.$emit('close', event);
+          this.d_active = false;
+          this.$emit('update:active', false);
+          setTimeout(function () {
+            _this.$refs.display.focus();
+          }, 0);
+        }
+      },
+      computed: {
+        closeAriaLabel: function closeAriaLabel() {
+          return this.$primevue.config.locale.aria ? this.$primevue.config.locale.aria.close : undefined;
+        }
+      },
+      components: {
+        IPButton: Button__default["default"],
+        TimesIcon: TimesIcon__default["default"]
+      },
+      directives: {
+        focustrap: FocusTrap__default["default"]
+      }
+    };
 
+    function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (obj) { return typeof obj; } : function (obj) { return obj && "function" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }, _typeof(obj); }
+    function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+    function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+    function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+    function _toPropertyKey(arg) { var key = _toPrimitive(arg, "string"); return _typeof(key) === "symbol" ? key : String(key); }
+    function _toPrimitive(input, hint) { if (_typeof(input) !== "object" || input === null) return input; var prim = input[Symbol.toPrimitive]; if (prim !== undefined) { var res = prim.call(input, hint || "default"); if (_typeof(res) !== "object") return res; throw new TypeError("@@toPrimitive must return a primitive value."); } return (hint === "string" ? String : Number)(input); }
+    var _hoisted_1 = ["tabindex"];
     function render(_ctx, _cache, $props, $setup, $data, $options) {
-      const _component_IPButton = vue.resolveComponent("IPButton");
-      const _directive_focustrap = vue.resolveDirective("focustrap");
-
+      var _component_IPButton = vue.resolveComponent("IPButton");
+      var _directive_focustrap = vue.resolveDirective("focustrap");
       return vue.withDirectives((vue.openBlock(), vue.createElementBlock("div", vue.mergeProps({
-        class: $options.containerClass,
+        "class": _ctx.cx('root'),
         "aria-live": "polite"
-      }, _ctx.ptm('root')), [
-        (!$data.d_active)
-          ? (vue.openBlock(), vue.createElementBlock("div", vue.mergeProps({
-              key: 0,
-              ref: "display",
-              class: $options.displayClass,
-              tabindex: _ctx.$attrs.tabindex || '0',
-              role: "button",
-              onClick: _cache[0] || (_cache[0] = (...args) => ($options.open && $options.open(...args))),
-              onKeydown: _cache[1] || (_cache[1] = vue.withKeys((...args) => ($options.open && $options.open(...args)), ["enter"]))
-            }, { ...$props.displayProps, ..._ctx.ptm('display') }), [
-              vue.renderSlot(_ctx.$slots, "display")
-            ], 16, _hoisted_1))
-          : (vue.openBlock(), vue.createElementBlock("div", vue.mergeProps({
-              key: 1,
-              class: "p-inplace-content"
-            }, _ctx.ptm('content')), [
-              vue.renderSlot(_ctx.$slots, "content"),
-              ($props.closable)
-                ? (vue.openBlock(), vue.createBlock(_component_IPButton, vue.mergeProps({
-                    key: 0,
-                    "aria-label": $options.closeAriaLabel,
-                    onClick: $options.close,
-                    pt: _ctx.ptm('closeButton')
-                  }, $props.closeButtonProps), {
-                    icon: vue.withCtx(() => [
-                      vue.renderSlot(_ctx.$slots, "closeicon", {}, () => [
-                        (vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent($props.closeIcon ? 'span' : 'TimesIcon'), vue.mergeProps({ class: $props.closeIcon }, _ctx.ptm('closeButton')['icon']), null, 16, ["class"]))
-                      ])
-                    ]),
-                    _: 3
-                  }, 16, ["aria-label", "onClick", "pt"]))
-                : vue.createCommentVNode("", true)
-            ], 16))
-      ], 16)), [
-        [_directive_focustrap]
-      ])
-    }
-
-    function styleInject(css, ref) {
-      if ( ref === void 0 ) ref = {};
-      var insertAt = ref.insertAt;
-
-      if (!css || typeof document === 'undefined') { return; }
-
-      var head = document.head || document.getElementsByTagName('head')[0];
-      var style = document.createElement('style');
-      style.type = 'text/css';
-
-      if (insertAt === 'top') {
-        if (head.firstChild) {
-          head.insertBefore(style, head.firstChild);
-        } else {
-          head.appendChild(style);
-        }
-      } else {
-        head.appendChild(style);
-      }
-
-      if (style.styleSheet) {
-        style.styleSheet.cssText = css;
-      } else {
-        style.appendChild(document.createTextNode(css));
-      }
+      }, _ctx.ptm('root'), {
+        "data-pc-name": "inplace"
+      }), [!$data.d_active ? (vue.openBlock(), vue.createElementBlock("div", vue.mergeProps({
+        key: 0,
+        ref: "display",
+        "class": _ctx.cx('display'),
+        tabindex: _ctx.$attrs.tabindex || '0',
+        role: "button",
+        onClick: _cache[0] || (_cache[0] = function () {
+          return $options.open && $options.open.apply($options, arguments);
+        }),
+        onKeydown: _cache[1] || (_cache[1] = vue.withKeys(function () {
+          return $options.open && $options.open.apply($options, arguments);
+        }, ["enter"]))
+      }, _objectSpread(_objectSpread({}, _ctx.displayProps), _ctx.ptm('display'))), [vue.renderSlot(_ctx.$slots, "display")], 16, _hoisted_1)) : (vue.openBlock(), vue.createElementBlock("div", vue.mergeProps({
+        key: 1,
+        "class": _ctx.cx('content')
+      }, _ctx.ptm('content')), [vue.renderSlot(_ctx.$slots, "content"), _ctx.closable ? (vue.openBlock(), vue.createBlock(_component_IPButton, vue.mergeProps({
+        key: 0,
+        "aria-label": $options.closeAriaLabel,
+        onClick: $options.close,
+        unstyled: _ctx.unstyled,
+        pt: _ctx.ptm('closeButton')
+      }, _ctx.closeButtonProps), {
+        icon: vue.withCtx(function () {
+          return [vue.renderSlot(_ctx.$slots, "closeicon", {}, function () {
+            return [(vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent(_ctx.closeIcon ? 'span' : 'TimesIcon'), vue.mergeProps({
+              "class": _ctx.closeIcon
+            }, _ctx.ptm('closeButton')['icon']), null, 16, ["class"]))];
+          })];
+        }),
+        _: 3
+      }, 16, ["aria-label", "onClick", "unstyled", "pt"])) : vue.createCommentVNode("", true)], 16))], 16)), [[_directive_focustrap]]);
     }
 
-    var css_248z = "\n.p-inplace .p-inplace-display {\n    display: inline;\n    cursor: pointer;\n}\n.p-inplace .p-inplace-content {\n    display: inline;\n}\n.p-fluid .p-inplace.p-inplace-closable .p-inplace-content {\n    display: flex;\n}\n.p-fluid .p-inplace.p-inplace-closable .p-inplace-content > .p-inputtext {\n    flex: 1 1 auto;\n    width: 1%;\n}\n";
-    styleInject(css_248z);
-
     script.render = render;
 
     return script;
 
-})(primevue.basecomponent, primevue.button, primevue.focustrap, primevue.icons.times, Vue);
+})(primevue.button, primevue.focustrap, primevue.icons.times, primevue.basecomponent, primevue.usestyle, Vue);

package/inplace/inplace.min.js

@@ -1 +1 @@
-this.primevue=this.primevue||{},this.primevue.inplace=function(e,t,n,o,l){"use strict";function i(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var a=i(e),s=i(t),c=i(n),p=i(o),r={name:"Inplace",extends:a.default,emits:["open","close","update:active"],props:{closable:{type:Boolean,default:!1},active:{type:Boolean,default:!1},disabled:{type:Boolean,default:!1},closeIcon:{type:String,default:void 0},displayProps:{type:null,default:null},closeButtonProps:{type:null,default:null}},data(){return{d_active:this.active}},watch:{active(e){this.d_active=e}},methods:{open(e){this.disabled||(this.$emit("open",e),this.d_active=!0,this.$emit("update:active",!0))},close(e){this.$emit("close",e),this.d_active=!1,this.$emit("update:active",!1),setTimeout((()=>{this.$refs.display.focus()}),0)}},computed:{containerClass(){return["p-inplace p-component",{"p-inplace-closable":this.closable}]},displayClass(){return["p-inplace-display",{"p-disabled":this.disabled}]},closeAriaLabel(){return this.$primevue.config.locale.aria?this.$primevue.config.locale.aria.close:void 0}},components:{IPButton:s.default,TimesIcon:p.default},directives:{focustrap:c.default}};const d=["tabindex"];return function(e,t){void 0===t&&(t={});var n=t.insertAt;if(e&&"undefined"!=typeof document){var o=document.head||document.getElementsByTagName("head")[0],l=document.createElement("style");l.type="text/css","top"===n&&o.firstChild?o.insertBefore(l,o.firstChild):o.appendChild(l),l.styleSheet?l.styleSheet.cssText=e:l.appendChild(document.createTextNode(e))}}("\n.p-inplace .p-inplace-display {\n    display: inline;\n    cursor: pointer;\n}\n.p-inplace .p-inplace-content {\n    display: inline;\n}\n.p-fluid .p-inplace.p-inplace-closable .p-inplace-content {\n    display: flex;\n}\n.p-fluid .p-inplace.p-inplace-closable .p-inplace-content > .p-inputtext {\n    flex: 1 1 auto;\n    width: 1%;\n}\n"),r.render=function(e,t,n,o,i,a){const s=l.resolveComponent("IPButton"),c=l.resolveDirective("focustrap");return l.withDirectives((l.openBlock(),l.createElementBlock("div",l.mergeProps({class:a.containerClass,"aria-live":"polite"},e.ptm("root")),[i.d_active?(l.openBlock(),l.createElementBlock("div",l.mergeProps({key:1,class:"p-inplace-content"},e.ptm("content")),[l.renderSlot(e.$slots,"content"),n.closable?(l.openBlock(),l.createBlock(s,l.mergeProps({key:0,"aria-label":a.closeAriaLabel,onClick:a.close,pt:e.ptm("closeButton")},n.closeButtonProps),{icon:l.withCtx((()=>[l.renderSlot(e.$slots,"closeicon",{},(()=>[(l.openBlock(),l.createBlock(l.resolveDynamicComponent(n.closeIcon?"span":"TimesIcon"),l.mergeProps({class:n.closeIcon},e.ptm("closeButton").icon),null,16,["class"]))]))])),_:3},16,["aria-label","onClick","pt"])):l.createCommentVNode("",!0)],16)):(l.openBlock(),l.createElementBlock("div",l.mergeProps({key:0,ref:"display",class:a.displayClass,tabindex:e.$attrs.tabindex||"0",role:"button",onClick:t[0]||(t[0]=(...e)=>a.open&&a.open(...e)),onKeydown:t[1]||(t[1]=l.withKeys(((...e)=>a.open&&a.open(...e)),["enter"]))},{...n.displayProps,...e.ptm("display")}),[l.renderSlot(e.$slots,"display")],16,d))],16)),[[c]])},r}(primevue.basecomponent,primevue.button,primevue.focustrap,primevue.icons.times,Vue);
+this.primevue=this.primevue||{},this.primevue.inplace=function(e,t,n,o,i,r){"use strict";function l(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var c=l(e),a=l(t),p=l(n),s=l(o),u=i.useStyle("\n.p-inplace .p-inplace-display {\n    display: inline;\n    cursor: pointer;\n}\n\n.p-inplace .p-inplace-content {\n    display: inline;\n}\n\n.p-fluid .p-inplace.p-inplace-closable .p-inplace-content {\n    display: flex;\n}\n\n.p-fluid .p-inplace.p-inplace-closable .p-inplace-content > .p-inputtext {\n    flex: 1 1 auto;\n    width: 1%;\n}\n",{name:"inplace",manual:!0}),d={name:"Inplace",extends:{name:"BaseInplace",extends:s.default,props:{closable:{type:Boolean,default:!1},active:{type:Boolean,default:!1},disabled:{type:Boolean,default:!1},closeIcon:{type:String,default:void 0},displayProps:{type:null,default:null},closeButtonProps:{type:null,default:null}},css:{classes:{root:function(e){return["p-inplace p-component",{"p-inplace-closable":e.props.closable}]},display:function(e){return["p-inplace-display",{"p-disabled":e.props.disabled}]},content:"p-inplace-content"},loadStyle:u.load},provide:function(){return{$parentInstance:this}}},emits:["open","close","update:active"],data:function(){return{d_active:this.active}},watch:{active:function(e){this.d_active=e}},methods:{open:function(e){this.disabled||(this.$emit("open",e),this.d_active=!0,this.$emit("update:active",!0))},close:function(e){var t=this;this.$emit("close",e),this.d_active=!1,this.$emit("update:active",!1),setTimeout((function(){t.$refs.display.focus()}),0)}},computed:{closeAriaLabel:function(){return this.$primevue.config.locale.aria?this.$primevue.config.locale.aria.close:void 0}},components:{IPButton:c.default,TimesIcon:p.default},directives:{focustrap:a.default}};function f(e){return f="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(e){return typeof e}:function(e){return e&&"function"==typeof Symbol&&e.constructor===Symbol&&e!==Symbol.prototype?"symbol":typeof e},f(e)}function m(e,t){var n=Object.keys(e);if(Object.getOwnPropertySymbols){var o=Object.getOwnPropertySymbols(e);t&&(o=o.filter((function(t){return Object.getOwnPropertyDescriptor(e,t).enumerable}))),n.push.apply(n,o)}return n}function y(e){for(var t=1;t<arguments.length;t++){var n=null!=arguments[t]?arguments[t]:{};t%2?m(Object(n),!0).forEach((function(t){b(e,t,n[t])})):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(n)):m(Object(n)).forEach((function(t){Object.defineProperty(e,t,Object.getOwnPropertyDescriptor(n,t))}))}return e}function b(e,t,n){return(t=v(t))in e?Object.defineProperty(e,t,{value:n,enumerable:!0,configurable:!0,writable:!0}):e[t]=n,e}function v(e){var t=h(e,"string");return"symbol"===f(t)?t:String(t)}function h(e,t){if("object"!==f(e)||null===e)return e;var n=e[Symbol.toPrimitive];if(void 0!==n){var o=n.call(e,t||"default");if("object"!==f(o))return o;throw new TypeError("@@toPrimitive must return a primitive value.")}return("string"===t?String:Number)(e)}var P=["tabindex"];return d.render=function(e,t,n,o,i,l){var c=r.resolveComponent("IPButton"),a=r.resolveDirective("focustrap");return r.withDirectives((r.openBlock(),r.createElementBlock("div",r.mergeProps({class:e.cx("root"),"aria-live":"polite"},e.ptm("root"),{"data-pc-name":"inplace"}),[i.d_active?(r.openBlock(),r.createElementBlock("div",r.mergeProps({key:1,class:e.cx("content")},e.ptm("content")),[r.renderSlot(e.$slots,"content"),e.closable?(r.openBlock(),r.createBlock(c,r.mergeProps({key:0,"aria-label":l.closeAriaLabel,onClick:l.close,unstyled:e.unstyled,pt:e.ptm("closeButton")},e.closeButtonProps),{icon:r.withCtx((function(){return[r.renderSlot(e.$slots,"closeicon",{},(function(){return[(r.openBlock(),r.createBlock(r.resolveDynamicComponent(e.closeIcon?"span":"TimesIcon"),r.mergeProps({class:e.closeIcon},e.ptm("closeButton").icon),null,16,["class"]))]}))]})),_:3},16,["aria-label","onClick","unstyled","pt"])):r.createCommentVNode("",!0)],16)):(r.openBlock(),r.createElementBlock("div",r.mergeProps({key:0,ref:"display",class:e.cx("display"),tabindex:e.$attrs.tabindex||"0",role:"button",onClick:t[0]||(t[0]=function(){return l.open&&l.open.apply(l,arguments)}),onKeydown:t[1]||(t[1]=r.withKeys((function(){return l.open&&l.open.apply(l,arguments)}),["enter"]))},y(y({},e.displayProps),e.ptm("display"))),[r.renderSlot(e.$slots,"display")],16,P))],16)),[[a]])},d}(primevue.button,primevue.focustrap,primevue.icons.times,primevue.basecomponent,primevue.usestyle,Vue);

package/inputmask/BaseInputMask.vue

@@ -0,0 +1,43 @@
+<script>
+import BaseComponent from 'primevue/basecomponent';
+
+const classes = {
+    root: ({ instance }) => [
+        'p-inputmask p-inputtext p-component',
+        {
+            'p-filled': instance.filled
+        }
+    ]
+};
+
+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
+    }
+};
+</script>

package/inputmask/InputMask.d.ts

@@ -7,6 +7,7 @@
  * @module inputmask
  *
  */
+import { ComponentHooks } from '../basecomponent';
 import { ClassComponent, GlobalComponentConstructor } from '../ts-helpers';
 
 export declare type InputMaskPassThroughOptionType = InputMaskPassThroughAttributes | null | undefined;
@@ -20,6 +21,11 @@ export interface InputMaskPassThroughOptions {
      * Uses to pass attributes to the root's DOM element.
      */
     root?: InputMaskPassThroughOptionType;
+    /**
+     * Uses to manage all lifecycle hooks
+     * @see {@link BaseComponent.ComponentHooks}
+     */
+    hooks?: ComponentHooks;
 }
 
 /**
@@ -66,6 +72,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 {}

package/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')" data-pc-name="inputmask" />
 </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
-                }
-            ];
         }
     }
 };