primevue 3.29.2 → 3.30.0

package/checkbox/checkbox.js

@@ -1,165 +1,226 @@
 this.primevue = this.primevue || {};
-this.primevue.checkbox = (function (BaseComponent, CheckIcon, utils, vue) {
+this.primevue.checkbox = (function (CheckIcon, utils, BaseComponent, vue) {
     'use strict';
 
     function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
-    var BaseComponent__default = /*#__PURE__*/_interopDefaultLegacy(BaseComponent);
     var CheckIcon__default = /*#__PURE__*/_interopDefaultLegacy(CheckIcon);
+    var BaseComponent__default = /*#__PURE__*/_interopDefaultLegacy(BaseComponent);
 
-    var script = {
-        name: 'Checkbox',
-        extends: BaseComponent__default["default"],
-        emits: ['click', 'update:modelValue', 'change', 'input', 'focus', 'blur'],
-        props: {
-            value: null,
-            modelValue: null,
-            binary: Boolean,
-            name: {
-                type: String,
-                default: null
-            },
-            trueValue: {
-                type: null,
-                default: true
-            },
-            falseValue: {
-                type: null,
-                default: false
-            },
-            disabled: {
-                type: Boolean,
-                default: false
-            },
-            readonly: {
-                type: Boolean,
-                default: false
-            },
-            required: {
-                type: Boolean,
-                default: false
-            },
-            tabindex: {
-                type: Number,
-                default: null
-            },
-            inputId: {
-                type: String,
-                default: null
-            },
-            inputClass: {
-                type: [String, Object],
-                default: null
-            },
-            inputStyle: {
-                type: Object,
-                default: null
-            },
-            inputProps: {
-                type: null,
-                default: null
-            },
-            'aria-labelledby': {
-                type: String,
-                default: null
-            },
-            'aria-label': {
-                type: String,
-                default: null
-            }
+    var classes = {
+      root: function root(_ref) {
+        var instance = _ref.instance,
+          props = _ref.props;
+        return ['p-checkbox p-component', {
+          'p-checkbox-checked': instance.checked,
+          'p-checkbox-disabled': props.disabled,
+          'p-checkbox-focused': instance.focused
+        }];
+      },
+      input: function input(_ref2) {
+        var instance = _ref2.instance,
+          props = _ref2.props;
+        return ['p-checkbox-box', {
+          'p-highlight': instance.checked,
+          'p-disabled': props.disabled,
+          'p-focus': instance.focused
+        }];
+      },
+      icon: 'p-checkbox-icon'
+    };
+    var script$1 = {
+      name: 'BaseCheckbox',
+      "extends": BaseComponent__default["default"],
+      props: {
+        value: null,
+        modelValue: null,
+        binary: Boolean,
+        name: {
+          type: String,
+          "default": null
         },
-        data() {
-            return {
-                focused: false
-            };
+        trueValue: {
+          type: null,
+          "default": true
         },
-        methods: {
-            onClick(event) {
-                if (!this.disabled && !this.readonly) {
-                    let newModelValue;
-
-                    if (this.binary) {
-                        newModelValue = this.checked ? this.falseValue : this.trueValue;
-                    } else {
-                        if (this.checked) newModelValue = this.modelValue.filter((val) => !utils.ObjectUtils.equals(val, this.value));
-                        else newModelValue = this.modelValue ? [...this.modelValue, this.value] : [this.value];
-                    }
+        falseValue: {
+          type: null,
+          "default": false
+        },
+        disabled: {
+          type: Boolean,
+          "default": false
+        },
+        readonly: {
+          type: Boolean,
+          "default": false
+        },
+        required: {
+          type: Boolean,
+          "default": false
+        },
+        tabindex: {
+          type: Number,
+          "default": null
+        },
+        inputId: {
+          type: String,
+          "default": null
+        },
+        inputClass: {
+          type: [String, Object],
+          "default": null
+        },
+        inputStyle: {
+          type: Object,
+          "default": null
+        },
+        inputProps: {
+          type: null,
+          "default": null
+        },
+        'aria-labelledby': {
+          type: String,
+          "default": null
+        },
+        'aria-label': {
+          type: String,
+          "default": null
+        }
+      },
+      css: {
+        classes: classes
+      },
+      provide: function provide() {
+        return {
+          $parentInstance: this
+        };
+      }
+    };
 
-                    this.$emit('click', event);
-                    this.$emit('update:modelValue', newModelValue);
-                    this.$emit('change', event);
-                    this.$emit('input', newModelValue);
-                    this.$refs.input.focus();
-                }
-            },
-            onFocus(event) {
-                this.focused = true;
-                this.$emit('focus', event);
-            },
-            onBlur(event) {
-                this.focused = false;
-                this.$emit('blur', event);
+    function _toConsumableArray(arr) { return _arrayWithoutHoles(arr) || _iterableToArray(arr) || _unsupportedIterableToArray(arr) || _nonIterableSpread(); }
+    function _nonIterableSpread() { throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
+    function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
+    function _iterableToArray(iter) { if (typeof Symbol !== "undefined" && iter[Symbol.iterator] != null || iter["@@iterator"] != null) return Array.from(iter); }
+    function _arrayWithoutHoles(arr) { if (Array.isArray(arr)) return _arrayLikeToArray(arr); }
+    function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i]; return arr2; }
+    var script = {
+      name: 'Checkbox',
+      "extends": script$1,
+      emits: ['click', 'update:modelValue', 'change', 'input', 'focus', 'blur'],
+      data: function data() {
+        return {
+          focused: false
+        };
+      },
+      methods: {
+        getPTOptions: function getPTOptions(key) {
+          return this.ptm(key, {
+            context: {
+              checked: this.checked,
+              focused: this.focused,
+              disabled: this.disabled
             }
+          });
         },
-        computed: {
-            checked() {
-                return this.binary ? this.modelValue === this.trueValue : utils.ObjectUtils.contains(this.value, this.modelValue);
-            },
-            containerClass() {
-                return [
-                    'p-checkbox p-component',
-                    {
-                        'p-checkbox-checked': this.checked,
-                        'p-checkbox-disabled': this.disabled,
-                        'p-checkbox-focused': this.focused
-                    }
-                ];
+        onClick: function onClick(event) {
+          var _this = this;
+          if (!this.disabled && !this.readonly) {
+            var newModelValue;
+            if (this.binary) {
+              newModelValue = this.checked ? this.falseValue : this.trueValue;
+            } else {
+              if (this.checked) newModelValue = this.modelValue.filter(function (val) {
+                return !utils.ObjectUtils.equals(val, _this.value);
+              });else newModelValue = this.modelValue ? [].concat(_toConsumableArray(this.modelValue), [this.value]) : [this.value];
             }
+            this.$emit('click', event);
+            this.$emit('update:modelValue', newModelValue);
+            this.$emit('change', event);
+            this.$emit('input', newModelValue);
+            this.$refs.input.focus();
+          }
+        },
+        onFocus: function onFocus(event) {
+          this.focused = true;
+          this.$emit('focus', event);
         },
-        components: {
-            CheckIcon: CheckIcon__default["default"]
+        onBlur: function onBlur(event) {
+          this.focused = false;
+          this.$emit('blur', event);
         }
+      },
+      computed: {
+        checked: function checked() {
+          return this.binary ? this.modelValue === this.trueValue : utils.ObjectUtils.contains(this.value, this.modelValue);
+        }
+      },
+      components: {
+        CheckIcon: CheckIcon__default["default"]
+      }
     };
 
-    const _hoisted_1 = ["id", "value", "name", "checked", "tabindex", "disabled", "readonly", "required", "aria-labelledby", "aria-label"];
-
+    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 = ["id", "value", "name", "checked", "tabindex", "disabled", "readonly", "required", "aria-labelledby", "aria-label"];
+    var _hoisted_2 = ["data-p-highlight", "data-p-disabled", "data-p-focused"];
     function render(_ctx, _cache, $props, $setup, $data, $options) {
-      return (vue.openBlock(), vue.createElementBlock("div", vue.mergeProps({
-        class: $options.containerClass,
-        onClick: _cache[2] || (_cache[2] = $event => ($options.onClick($event)))
-      }, _ctx.ptm('root')), [
-        vue.createElementVNode("div", vue.mergeProps({ class: "p-hidden-accessible" }, _ctx.ptm('hiddenInputWrapper')), [
-          vue.createElementVNode("input", vue.mergeProps({
-            ref: "input",
-            id: $props.inputId,
-            type: "checkbox",
-            value: $props.value,
-            name: $props.name,
-            checked: $options.checked,
-            tabindex: $props.tabindex,
-            disabled: $props.disabled,
-            readonly: $props.readonly,
-            required: $props.required,
-            "aria-labelledby": _ctx.ariaLabelledby,
-            "aria-label": _ctx.ariaLabel,
-            onFocus: _cache[0] || (_cache[0] = $event => ($options.onFocus($event))),
-            onBlur: _cache[1] || (_cache[1] = $event => ($options.onBlur($event)))
-          }, _ctx.ptm('hiddenInput')), null, 16, _hoisted_1)
-        ], 16),
-        vue.createElementVNode("div", vue.mergeProps({
-          ref: "box",
-          class: ['p-checkbox-box', $props.inputClass, { 'p-highlight': $options.checked, 'p-disabled': $props.disabled, 'p-focus': $data.focused }],
-          style: $props.inputStyle
-        }, { ...$props.inputProps, ..._ctx.ptm('input') }), [
-          vue.renderSlot(_ctx.$slots, "icon", { checked: $options.checked }, () => [
-            (vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent($options.checked ? 'CheckIcon' : null), vue.mergeProps({ class: "p-checkbox-icon" }, _ctx.ptm('icon')), null, 16))
-          ])
-        ], 16)
-      ], 16))
+      var _component_CheckIcon = vue.resolveComponent("CheckIcon");
+      return vue.openBlock(), vue.createElementBlock("div", vue.mergeProps({
+        "class": _ctx.cx('root'),
+        onClick: _cache[2] || (_cache[2] = function ($event) {
+          return $options.onClick($event);
+        })
+      }, $options.getPTOptions('root'), {
+        "data-pc-name": "checkbox"
+      }), [vue.createElementVNode("div", vue.mergeProps({
+        "class": "p-hidden-accessible"
+      }, _ctx.ptm('hiddenInputWrapper'), {
+        "data-p-hidden-accessible": true
+      }), [vue.createElementVNode("input", vue.mergeProps({
+        ref: "input",
+        id: _ctx.inputId,
+        type: "checkbox",
+        value: _ctx.value,
+        name: _ctx.name,
+        checked: $options.checked,
+        tabindex: _ctx.tabindex,
+        disabled: _ctx.disabled,
+        readonly: _ctx.readonly,
+        required: _ctx.required,
+        "aria-labelledby": _ctx.ariaLabelledby,
+        "aria-label": _ctx.ariaLabel,
+        onFocus: _cache[0] || (_cache[0] = function ($event) {
+          return $options.onFocus($event);
+        }),
+        onBlur: _cache[1] || (_cache[1] = function ($event) {
+          return $options.onBlur($event);
+        })
+      }, _ctx.ptm('hiddenInput')), null, 16, _hoisted_1)], 16), vue.createElementVNode("div", vue.mergeProps({
+        ref: "box",
+        "class": [_ctx.cx('input'), _ctx.inputClass],
+        style: _ctx.inputStyle
+      }, _objectSpread(_objectSpread({}, _ctx.inputProps), $options.getPTOptions('input')), {
+        "data-p-highlight": $options.checked,
+        "data-p-disabled": _ctx.disabled,
+        "data-p-focused": $data.focused
+      }), [vue.renderSlot(_ctx.$slots, "icon", {
+        checked: $options.checked,
+        "class": vue.normalizeClass(_ctx.cx('icon'))
+      }, function () {
+        return [$options.checked ? (vue.openBlock(), vue.createBlock(_component_CheckIcon, vue.mergeProps({
+          key: 0,
+          "class": _ctx.cx('icon')
+        }, $options.getPTOptions('icon')), null, 16, ["class"])) : vue.createCommentVNode("", true)];
+      })], 16, _hoisted_2)], 16);
     }
 
     script.render = render;
 
     return script;
 
-})(primevue.basecomponent, primevue.icons.check, primevue.utils, Vue);
+})(primevue.icons.check, primevue.utils, primevue.basecomponent, Vue);

package/checkbox/checkbox.min.js

@@ -1 +1 @@
-this.primevue=this.primevue||{},this.primevue.checkbox=function(e,l,t,i){"use strict";function a(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var u=a(e),n=a(l),c={name:"Checkbox",extends:u.default,emits:["click","update:modelValue","change","input","focus","blur"],props:{value:null,modelValue:null,binary:Boolean,name:{type:String,default:null},trueValue:{type:null,default:!0},falseValue:{type:null,default:!1},disabled:{type:Boolean,default:!1},readonly:{type:Boolean,default:!1},required:{type:Boolean,default:!1},tabindex:{type:Number,default:null},inputId:{type:String,default:null},inputClass:{type:[String,Object],default:null},inputStyle:{type:Object,default:null},inputProps:{type:null,default:null},"aria-labelledby":{type:String,default:null},"aria-label":{type:String,default:null}},data:()=>({focused:!1}),methods:{onClick(e){if(!this.disabled&&!this.readonly){let l;l=this.binary?this.checked?this.falseValue:this.trueValue:this.checked?this.modelValue.filter((e=>!t.ObjectUtils.equals(e,this.value))):this.modelValue?[...this.modelValue,this.value]:[this.value],this.$emit("click",e),this.$emit("update:modelValue",l),this.$emit("change",e),this.$emit("input",l),this.$refs.input.focus()}},onFocus(e){this.focused=!0,this.$emit("focus",e)},onBlur(e){this.focused=!1,this.$emit("blur",e)}},computed:{checked(){return this.binary?this.modelValue===this.trueValue:t.ObjectUtils.contains(this.value,this.modelValue)},containerClass(){return["p-checkbox p-component",{"p-checkbox-checked":this.checked,"p-checkbox-disabled":this.disabled,"p-checkbox-focused":this.focused}]}},components:{CheckIcon:n.default}};const d=["id","value","name","checked","tabindex","disabled","readonly","required","aria-labelledby","aria-label"];return c.render=function(e,l,t,a,u,n){return i.openBlock(),i.createElementBlock("div",i.mergeProps({class:n.containerClass,onClick:l[2]||(l[2]=e=>n.onClick(e))},e.ptm("root")),[i.createElementVNode("div",i.mergeProps({class:"p-hidden-accessible"},e.ptm("hiddenInputWrapper")),[i.createElementVNode("input",i.mergeProps({ref:"input",id:t.inputId,type:"checkbox",value:t.value,name:t.name,checked:n.checked,tabindex:t.tabindex,disabled:t.disabled,readonly:t.readonly,required:t.required,"aria-labelledby":e.ariaLabelledby,"aria-label":e.ariaLabel,onFocus:l[0]||(l[0]=e=>n.onFocus(e)),onBlur:l[1]||(l[1]=e=>n.onBlur(e))},e.ptm("hiddenInput")),null,16,d)],16),i.createElementVNode("div",i.mergeProps({ref:"box",class:["p-checkbox-box",t.inputClass,{"p-highlight":n.checked,"p-disabled":t.disabled,"p-focus":u.focused}],style:t.inputStyle},{...t.inputProps,...e.ptm("input")}),[i.renderSlot(e.$slots,"icon",{checked:n.checked},(()=>[(i.openBlock(),i.createBlock(i.resolveDynamicComponent(n.checked?"CheckIcon":null),i.mergeProps({class:"p-checkbox-icon"},e.ptm("icon")),null,16))]))],16)],16)},c}(primevue.basecomponent,primevue.icons.check,primevue.utils,Vue);
+this.primevue=this.primevue||{},this.primevue.checkbox=function(e,t,n,r){"use strict";function i(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var o=i(e);function l(){throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.")}function a(e,t){if(e){if("string"==typeof e)return s(e,t);var n=Object.prototype.toString.call(e).slice(8,-1);return"Object"===n&&e.constructor&&(n=e.constructor.name),"Map"===n||"Set"===n?Array.from(e):"Arguments"===n||/^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)?s(e,t):void 0}}function c(e){if("undefined"!=typeof Symbol&&null!=e[Symbol.iterator]||null!=e["@@iterator"])return Array.from(e)}function u(e){if(Array.isArray(e))return s(e)}function s(e,t){(null==t||t>e.length)&&(t=e.length);for(var n=0,r=new Array(t);n<t;n++)r[n]=e[n];return r}var d={name:"Checkbox",extends:{name:"BaseCheckbox",extends:i(n).default,props:{value:null,modelValue:null,binary:Boolean,name:{type:String,default:null},trueValue:{type:null,default:!0},falseValue:{type:null,default:!1},disabled:{type:Boolean,default:!1},readonly:{type:Boolean,default:!1},required:{type:Boolean,default:!1},tabindex:{type:Number,default:null},inputId:{type:String,default:null},inputClass:{type:[String,Object],default:null},inputStyle:{type:Object,default:null},inputProps:{type:null,default:null},"aria-labelledby":{type:String,default:null},"aria-label":{type:String,default:null}},css:{classes:{root:function(e){var t=e.instance;return["p-checkbox p-component",{"p-checkbox-checked":t.checked,"p-checkbox-disabled":e.props.disabled,"p-checkbox-focused":t.focused}]},input:function(e){var t=e.instance;return["p-checkbox-box",{"p-highlight":t.checked,"p-disabled":e.props.disabled,"p-focus":t.focused}]},icon:"p-checkbox-icon"}},provide:function(){return{$parentInstance:this}}},emits:["click","update:modelValue","change","input","focus","blur"],data:function(){return{focused:!1}},methods:{getPTOptions:function(e){return this.ptm(e,{context:{checked:this.checked,focused:this.focused,disabled:this.disabled}})},onClick:function(e){var n,r,i=this;this.disabled||this.readonly||(n=this.binary?this.checked?this.falseValue:this.trueValue:this.checked?this.modelValue.filter((function(e){return!t.ObjectUtils.equals(e,i.value)})):this.modelValue?[].concat(u(r=this.modelValue)||c(r)||a(r)||l(),[this.value]):[this.value],this.$emit("click",e),this.$emit("update:modelValue",n),this.$emit("change",e),this.$emit("input",n),this.$refs.input.focus())},onFocus:function(e){this.focused=!0,this.$emit("focus",e)},onBlur:function(e){this.focused=!1,this.$emit("blur",e)}},computed:{checked:function(){return this.binary?this.modelValue===this.trueValue:t.ObjectUtils.contains(this.value,this.modelValue)}},components:{CheckIcon:o.default}};function p(e){return p="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},p(e)}function f(e,t){var n=Object.keys(e);if(Object.getOwnPropertySymbols){var r=Object.getOwnPropertySymbols(e);t&&(r=r.filter((function(t){return Object.getOwnPropertyDescriptor(e,t).enumerable}))),n.push.apply(n,r)}return n}function b(e){for(var t=1;t<arguments.length;t++){var n=null!=arguments[t]?arguments[t]:{};t%2?f(Object(n),!0).forEach((function(t){h(e,t,n[t])})):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(n)):f(Object(n)).forEach((function(t){Object.defineProperty(e,t,Object.getOwnPropertyDescriptor(n,t))}))}return e}function h(e,t,n){return(t=m(t))in e?Object.defineProperty(e,t,{value:n,enumerable:!0,configurable:!0,writable:!0}):e[t]=n,e}function m(e){var t=y(e,"string");return"symbol"===p(t)?t:String(t)}function y(e,t){if("object"!==p(e)||null===e)return e;var n=e[Symbol.toPrimitive];if(void 0!==n){var r=n.call(e,t||"default");if("object"!==p(r))return r;throw new TypeError("@@toPrimitive must return a primitive value.")}return("string"===t?String:Number)(e)}var v=["id","value","name","checked","tabindex","disabled","readonly","required","aria-labelledby","aria-label"],k=["data-p-highlight","data-p-disabled","data-p-focused"];return d.render=function(e,t,n,i,o,l){var a=r.resolveComponent("CheckIcon");return r.openBlock(),r.createElementBlock("div",r.mergeProps({class:e.cx("root"),onClick:t[2]||(t[2]=function(e){return l.onClick(e)})},l.getPTOptions("root"),{"data-pc-name":"checkbox"}),[r.createElementVNode("div",r.mergeProps({class:"p-hidden-accessible"},e.ptm("hiddenInputWrapper"),{"data-p-hidden-accessible":!0}),[r.createElementVNode("input",r.mergeProps({ref:"input",id:e.inputId,type:"checkbox",value:e.value,name:e.name,checked:l.checked,tabindex:e.tabindex,disabled:e.disabled,readonly:e.readonly,required:e.required,"aria-labelledby":e.ariaLabelledby,"aria-label":e.ariaLabel,onFocus:t[0]||(t[0]=function(e){return l.onFocus(e)}),onBlur:t[1]||(t[1]=function(e){return l.onBlur(e)})},e.ptm("hiddenInput")),null,16,v)],16),r.createElementVNode("div",r.mergeProps({ref:"box",class:[e.cx("input"),e.inputClass],style:e.inputStyle},b(b({},e.inputProps),l.getPTOptions("input")),{"data-p-highlight":l.checked,"data-p-disabled":e.disabled,"data-p-focused":o.focused}),[r.renderSlot(e.$slots,"icon",{checked:l.checked,class:r.normalizeClass(e.cx("icon"))},(function(){return[l.checked?(r.openBlock(),r.createBlock(a,r.mergeProps({key:0,class:e.cx("icon")},l.getPTOptions("icon")),null,16,["class"])):r.createCommentVNode("",!0)]}))],16,k)],16)},d}(primevue.icons.check,primevue.utils,primevue.basecomponent,Vue);

package/chip/BaseChip.vue

@@ -0,0 +1,78 @@
+<script>
+import BaseComponent from 'primevue/basecomponent';
+import { useStyle } from 'primevue/usestyle';
+
+const styles = `
+.p-chip {
+    display: inline-flex;
+    align-items: center;
+}
+
+.p-chip-text {
+    line-height: 1.5;
+}
+
+.p-chip-icon.pi {
+    line-height: 1.5;
+}
+
+.p-chip-remove-icon {
+    line-height: 1.5;
+    cursor: pointer;
+}
+
+.p-chip img {
+    border-radius: 50%;
+}
+`;
+
+const classes = {
+    root: ({ props }) => [
+        'p-chip p-component',
+        {
+            'p-chip-image': props.image != null
+        }
+    ],
+    icon: 'p-chip-icon',
+    label: 'p-chip-text',
+    removeIcon: 'p-chip-remove-icon'
+};
+
+const { load: loadStyle } = useStyle(styles, { name: 'chip', manual: true });
+
+export default {
+    name: 'BaseChip',
+    extends: BaseComponent,
+    props: {
+        label: {
+            type: String,
+            default: null
+        },
+        icon: {
+            type: String,
+            default: null
+        },
+        image: {
+            type: String,
+            default: null
+        },
+        removable: {
+            type: Boolean,
+            default: false
+        },
+        removeIcon: {
+            type: String,
+            default: undefined
+        }
+    },
+    css: {
+        classes,
+        loadStyle
+    },
+    provide() {
+        return {
+            $parentInstance: this
+        };
+    }
+};
+</script>

package/chip/Chip.d.ts

@@ -8,6 +8,7 @@
  *
  */
 import { VNode } from 'vue';
+import { ComponentHooks } from '../basecomponent';
 import { ClassComponent, GlobalComponentConstructor } from '../ts-helpers';
 
 export declare type ChipPassThroughOptionType = ChipPassThroughAttributes | ((options: ChipPassThroughMethodOptions) => ChipPassThroughAttributes) | null | undefined;
@@ -16,6 +17,7 @@ export declare type ChipPassThroughOptionType = ChipPassThroughAttributes | ((op
  * Custom passthrough(pt) option method.
  */
 export interface ChipPassThroughMethodOptions {
+    instance: any;
     props: ChipProps;
     state: ChipState;
 }
@@ -45,6 +47,11 @@ export interface ChipPassThroughOptions {
      * Uses to pass attributes to the removeIcon's DOM element.
      */
     removeIcon?: ChipPassThroughOptionType;
+    /**
+     * Uses to manage all lifecycle hooks
+     * @see {@link BaseComponent.ComponentHooks}
+     */
+    hooks?: ComponentHooks;
 }
 
 /**
@@ -97,6 +104,11 @@ export interface ChipProps {
      * @type {ChipPassThroughOptions}
      */
     pt?: ChipPassThroughOptions;
+    /**
+     * When enabled, it removes component related styles in the core.
+     * @defaultValue false
+     */
+    unstyled?: boolean;
 }
 
 /**

package/chip/Chip.vue

@@ -1,47 +1,25 @@
 <template>
-    <div v-if="visible" :class="containerClass" :aria-label="label" v-bind="ptm('root')">
+    <div v-if="visible" :class="cx('root')" :aria-label="label" v-bind="ptm('root')" data-pc-name="chip">
         <slot>
             <img v-if="image" :src="image" v-bind="ptm('image')" />
-            <component v-else-if="$slots.icon" :is="$slots.icon" class="p-chip-icon" v-bind="ptm('icon')" />
-            <span v-else-if="icon" :class="['p-chip-icon', icon]" v-bind="ptm('icon')" />
-            <div v-if="label" class="p-chip-text" v-bind="ptm('label')">{{ label }}</div>
+            <component v-else-if="$slots.icon" :is="$slots.icon" :class="cx('icon')" v-bind="ptm('icon')" />
+            <span v-else-if="icon" :class="[cx('icon'), icon]" v-bind="ptm('icon')" />
+            <div v-if="label" :class="cx('label')" v-bind="ptm('label')">{{ label }}</div>
         </slot>
         <slot v-if="removable" name="removeicon" :onClick="close" :onKeydown="onKeydown">
-            <component :is="removeIcon ? 'span' : 'TimesCircleIcon'" tabindex="0" :class="['p-chip-remove-icon', removeIcon]" @click="close" @keydown="onKeydown" v-bind="ptm('removeIcon')"></component>
+            <component :is="removeIcon ? 'span' : 'TimesCircleIcon'" tabindex="0" :class="[cx('removeIcon'), removeIcon]" @click="close" @keydown="onKeydown" v-bind="ptm('removeIcon')"></component>
         </slot>
     </div>
 </template>
 
 <script>
-import BaseComponent from 'primevue/basecomponent';
 import TimesCircleIcon from 'primevue/icons/timescircle';
+import BaseChip from './BaseChip.vue';
 
 export default {
     name: 'Chip',
-    extends: BaseComponent,
+    extends: BaseChip,
     emits: ['remove'],
-    props: {
-        label: {
-            type: String,
-            default: null
-        },
-        icon: {
-            type: String,
-            default: null
-        },
-        image: {
-            type: String,
-            default: null
-        },
-        removable: {
-            type: Boolean,
-            default: false
-        },
-        removeIcon: {
-            type: String,
-            default: undefined
-        }
-    },
     data() {
         return {
             visible: true
@@ -58,42 +36,8 @@ export default {
             this.$emit('remove', event);
         }
     },
-    computed: {
-        containerClass() {
-            return [
-                'p-chip p-component',
-                {
-                    'p-chip-image': this.image != null
-                }
-            ];
-        }
-    },
     components: {
         TimesCircleIcon
     }
 };
 </script>
-
-<style>
-.p-chip {
-    display: inline-flex;
-    align-items: center;
-}
-
-.p-chip-text {
-    line-height: 1.5;
-}
-
-.p-chip-icon.pi {
-    line-height: 1.5;
-}
-
-.p-chip-remove-icon {
-    line-height: 1.5;
-    cursor: pointer;
-}
-
-.p-chip img {
-    border-radius: 50%;
-}
-</style>