primevue 3.29.2 → 3.30.0

package/sidebar/sidebar.min.js

@@ -1 +1 @@
-this.primevue=this.primevue||{},this.primevue.sidebar=function(e,t,n,i,s,r,o){"use strict";function a(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var l=a(e),d=a(t),p=a(n),c=a(i),m=a(s),h={name:"Sidebar",extends:l.default,inheritAttrs:!1,emits:["update:visible","show","hide","after-hide"],props:{visible:{type:Boolean,default:!1},position:{type:String,default:"left"},baseZIndex:{type:Number,default:0},autoZIndex:{type:Boolean,default:!0},dismissable:{type:Boolean,default:!0},showCloseIcon:{type:Boolean,default:!0},closeIcon:{type:String,default:void 0},modal:{type:Boolean,default:!0},blockScroll:{type:Boolean,default:!1}},data(){return{containerVisible:this.visible}},container:null,mask:null,content:null,headerContainer:null,closeButton:null,outsideClickListener:null,updated(){this.visible&&(this.containerVisible=this.visible)},beforeUnmount(){this.disableDocumentSettings(),this.mask&&this.autoZIndex&&r.ZIndexUtils.clear(this.mask),this.container=null,this.mask=null},methods:{hide(){this.$emit("update:visible",!1)},onEnter(){this.$emit("show"),this.focus(),this.autoZIndex&&r.ZIndexUtils.set("modal",this.mask,this.baseZIndex||this.$primevue.config.zIndex.modal)},onAfterEnter(){this.enableDocumentSettings()},onBeforeLeave(){this.modal&&r.DomHandler.addClass(this.mask,"p-component-overlay-leave")},onLeave(){this.$emit("hide")},onAfterLeave(){this.autoZIndex&&r.ZIndexUtils.clear(this.mask),this.containerVisible=!1,this.disableDocumentSettings(),this.$emit("after-hide")},onMaskClick(e){this.dismissable&&this.modal&&this.mask===e.target&&this.hide()},focus(){const e=e=>e.querySelector("[autofocus]");let t=this.$slots.default&&e(this.content);t||(t=this.$slots.header&&e(this.headerContainer),t||(t=e(this.container))),t&&t.focus()},enableDocumentSettings(){this.dismissable&&!this.modal&&this.bindOutsideClickListener(),this.blockScroll&&r.DomHandler.addClass(document.body,"p-overflow-hidden")},disableDocumentSettings(){this.unbindOutsideClickListener(),this.blockScroll&&r.DomHandler.removeClass(document.body,"p-overflow-hidden")},onKeydown(e){"Escape"===e.code&&this.hide()},containerRef(e){this.container=e},maskRef(e){this.mask=e},contentRef(e){this.content=e},headerContainerRef(e){this.headerContainer=e},closeButtonRef(e){this.closeButton=e},getPositionClass(){const e=["left","right","top","bottom"].find((e=>e===this.position));return e?`p-sidebar-${e}`:""},bindOutsideClickListener(){this.outsideClickListener||(this.outsideClickListener=e=>{this.isOutsideClicked(e)&&this.hide()},document.addEventListener("click",this.outsideClickListener))},unbindOutsideClickListener(){this.outsideClickListener&&(document.removeEventListener("click",this.outsideClickListener),this.outsideClickListener=null)},isOutsideClicked(e){return this.container&&!this.container.contains(e.target)}},computed:{containerClass(){return["p-sidebar p-component",{"p-input-filled":"filled"===this.$primevue.config.inputStyle,"p-ripple-disabled":!1===this.$primevue.config.ripple,"p-sidebar-full":this.fullScreen}]},fullScreen(){return"full"===this.position},closeAriaLabel(){return this.$primevue.config.locale.aria?this.$primevue.config.locale.aria.close:void 0},maskClass(){return["p-sidebar-mask",this.getPositionClass(),{"p-component-overlay p-component-overlay-enter":this.modal,"p-sidebar-mask-scrollblocker":this.blockScroll,"p-sidebar-visible":this.containerVisible,"p-sidebar-full":this.fullScreen}]}},directives:{focustrap:d.default,ripple:m.default},components:{Portal:c.default,TimesIcon:p.default}};const b=["aria-modal"],u=["aria-label"];return function(e,t){void 0===t&&(t={});var n=t.insertAt;if(e&&"undefined"!=typeof document){var i=document.head||document.getElementsByTagName("head")[0],s=document.createElement("style");s.type="text/css","top"===n&&i.firstChild?i.insertBefore(s,i.firstChild):i.appendChild(s),s.styleSheet?s.styleSheet.cssText=e:s.appendChild(document.createTextNode(e))}}("\n.p-sidebar-mask {\n    position: fixed;\n    top: 0;\n    left: 0;\n    width: 100%;\n    height: 100%;\n    display: none;\n    justify-content: center;\n    align-items: center;\n    pointer-events: none;\n    background-color: transparent;\n    transition-property: background-color;\n}\n.p-sidebar-mask.p-component-overlay {\n    pointer-events: auto;\n}\n.p-sidebar-visible {\n    display: flex;\n}\n.p-sidebar {\n    display: flex;\n    flex-direction: column;\n    pointer-events: auto;\n    transform: translate3d(0px, 0px, 0px);\n    position: relative;\n    transition: transform 0.3s;\n}\n.p-sidebar-content {\n    overflow-y: auto;\n    flex-grow: 1;\n}\n.p-sidebar-header {\n    display: flex;\n    align-items: center;\n    justify-content: flex-end;\n    flex-shrink: 0;\n}\n.p-sidebar-icon {\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    overflow: hidden;\n    position: relative;\n}\n.p-sidebar-full .p-sidebar {\n    transition: none;\n    transform: none;\n    width: 100vw !important;\n    height: 100vh !important;\n    max-height: 100%;\n    top: 0px !important;\n    left: 0px !important;\n}\n\n/* Animation */\n/* Center */\n.p-sidebar-left .p-sidebar-enter-from,\n.p-sidebar-left .p-sidebar-leave-to {\n    transform: translateX(-100%);\n}\n.p-sidebar-right .p-sidebar-enter-from,\n.p-sidebar-right .p-sidebar-leave-to {\n    transform: translateX(100%);\n}\n.p-sidebar-top .p-sidebar-enter-from,\n.p-sidebar-top .p-sidebar-leave-to {\n    transform: translateY(-100%);\n}\n.p-sidebar-bottom .p-sidebar-enter-from,\n.p-sidebar-bottom .p-sidebar-leave-to {\n    transform: translateY(100%);\n}\n.p-sidebar-full .p-sidebar-enter-from,\n.p-sidebar-full .p-sidebar-leave-to {\n    opacity: 0;\n}\n.p-sidebar-full .p-sidebar-enter-active,\n.p-sidebar-full .p-sidebar-leave-active {\n    transition: opacity 400ms cubic-bezier(0.25, 0.8, 0.25, 1);\n}\n\n/* Position */\n.p-sidebar-left {\n    justify-content: flex-start;\n}\n.p-sidebar-right {\n    justify-content: flex-end;\n}\n.p-sidebar-top {\n    align-items: flex-start;\n}\n.p-sidebar-bottom {\n    align-items: flex-end;\n}\n\n/* Size */\n.p-sidebar-left .p-sidebar {\n    width: 20rem;\n    height: 100%;\n}\n.p-sidebar-right .p-sidebar {\n    width: 20rem;\n    height: 100%;\n}\n.p-sidebar-top .p-sidebar {\n    height: 10rem;\n    width: 100%;\n}\n.p-sidebar-bottom .p-sidebar {\n    height: 10rem;\n    width: 100%;\n}\n.p-sidebar-left .p-sidebar-sm,\n.p-sidebar-right .p-sidebar-sm {\n    width: 20rem;\n}\n.p-sidebar-left .p-sidebar-md,\n.p-sidebar-right .p-sidebar-md {\n    width: 40rem;\n}\n.p-sidebar-left .p-sidebar-lg,\n.p-sidebar-right .p-sidebar-lg {\n    width: 60rem;\n}\n.p-sidebar-top .p-sidebar-sm,\n.p-sidebar-bottom .p-sidebar-sm {\n    height: 10rem;\n}\n.p-sidebar-top .p-sidebar-md,\n.p-sidebar-bottom .p-sidebar-md {\n    height: 20rem;\n}\n.p-sidebar-top .p-sidebar-lg,\n.p-sidebar-bottom .p-sidebar-lg {\n    height: 30rem;\n}\n.p-sidebar-left .p-sidebar-content,\n.p-sidebar-right .p-sidebar-content,\n.p-sidebar-top .p-sidebar-content,\n.p-sidebar-bottom .p-sidebar-content {\n    width: 100%;\n    height: 100%;\n}\n@media screen and (max-width: 64em) {\n.p-sidebar-left .p-sidebar-lg,\n    .p-sidebar-left .p-sidebar-md,\n    .p-sidebar-right .p-sidebar-lg,\n    .p-sidebar-right .p-sidebar-md {\n        width: 20rem;\n}\n}\n"),h.render=function(e,t,n,i,s,r){const a=o.resolveComponent("Portal"),l=o.resolveDirective("ripple"),d=o.resolveDirective("focustrap");return o.openBlock(),o.createBlock(a,null,{default:o.withCtx((()=>[s.containerVisible?(o.openBlock(),o.createElementBlock("div",o.mergeProps({key:0,ref:r.maskRef,class:r.maskClass,onMousedown:t[2]||(t[2]=(...e)=>r.onMaskClick&&r.onMaskClick(...e))},e.ptm("mask")),[o.createVNode(o.Transition,{name:"p-sidebar",onEnter:r.onEnter,onAfterEnter:r.onAfterEnter,onBeforeLeave:r.onBeforeLeave,onLeave:r.onLeave,onAfterLeave:r.onAfterLeave,appear:""},{default:o.withCtx((()=>[n.visible?o.withDirectives((o.openBlock(),o.createElementBlock("div",o.mergeProps({key:0,ref:r.containerRef,class:r.containerClass,role:"complementary","aria-modal":n.modal,onKeydown:t[1]||(t[1]=(...e)=>r.onKeydown&&r.onKeydown(...e))},{...e.$attrs,...e.ptm("root")}),[o.createElementVNode("div",o.mergeProps({ref:r.headerContainerRef,class:"p-sidebar-header"},e.ptm("header")),[e.$slots.header?(o.openBlock(),o.createElementBlock("div",o.mergeProps({key:0,class:"p-sidebar-header-content"},e.ptm("headerContent")),[o.renderSlot(e.$slots,"header")],16)):o.createCommentVNode("",!0),n.showCloseIcon?o.withDirectives((o.openBlock(),o.createElementBlock("button",o.mergeProps({key:1,ref:r.closeButtonRef,autofocus:"",type:"button",class:"p-sidebar-close p-sidebar-icon p-link","aria-label":r.closeAriaLabel,onClick:t[0]||(t[0]=(...e)=>r.hide&&r.hide(...e))},e.ptm("closeButton")),[o.renderSlot(e.$slots,"closeicon",{},(()=>[(o.openBlock(),o.createBlock(o.resolveDynamicComponent(n.closeIcon?"span":"TimesIcon"),o.mergeProps({class:["p-sidebar-close-icon ",n.closeIcon]},e.ptm("closeIcon")),null,16,["class"]))]))],16,u)),[[l]]):o.createCommentVNode("",!0)],16),o.createElementVNode("div",o.mergeProps({ref:r.contentRef,class:"p-sidebar-content"},e.ptm("content")),[o.renderSlot(e.$slots,"default")],16)],16,b)),[[d]]):o.createCommentVNode("",!0)])),_:3},8,["onEnter","onAfterEnter","onBeforeLeave","onLeave","onAfterLeave"])],16)):o.createCommentVNode("",!0)])),_:3})},h}(primevue.basecomponent,primevue.focustrap,primevue.icons.times,primevue.portal,primevue.ripple,primevue.utils,Vue);
+this.primevue=this.primevue||{},this.primevue.sidebar=function(e,n,t,i,r,o,s,a){"use strict";function l(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var d=l(e),c=l(n),p=l(t),u=l(i),f=l(o),m=s.useStyle("\n.p-sidebar-mask {\n    display: none;\n    pointer-events: none;\n    background-color: transparent;\n    transition-property: background-color;\n}\n\n.p-sidebar-mask.p-component-overlay {\n    pointer-events: auto;\n}\n\n.p-sidebar-visible {\n    display: flex;\n}\n\n.p-sidebar {\n    display: flex;\n    flex-direction: column;\n    pointer-events: auto;\n    transform: translate3d(0px, 0px, 0px);\n    position: relative;\n    transition: transform 0.3s;\n}\n\n.p-sidebar-content {\n    overflow-y: auto;\n    flex-grow: 1;\n}\n\n.p-sidebar-header {\n    display: flex;\n    align-items: center;\n    justify-content: flex-end;\n    flex-shrink: 0;\n}\n\n.p-sidebar-icon {\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    overflow: hidden;\n    position: relative;\n}\n\n.p-sidebar-full .p-sidebar {\n    transition: none;\n    transform: none;\n    width: 100vw !important;\n    height: 100vh !important;\n    max-height: 100%;\n    top: 0px !important;\n    left: 0px !important;\n}\n\n/* Animation */\n/* Center */\n.p-sidebar-left .p-sidebar-enter-from,\n.p-sidebar-left .p-sidebar-leave-to {\n    transform: translateX(-100%);\n}\n.p-sidebar-right .p-sidebar-enter-from,\n.p-sidebar-right .p-sidebar-leave-to {\n    transform: translateX(100%);\n}\n.p-sidebar-top .p-sidebar-enter-from,\n.p-sidebar-top .p-sidebar-leave-to {\n    transform: translateY(-100%);\n}\n.p-sidebar-bottom .p-sidebar-enter-from,\n.p-sidebar-bottom .p-sidebar-leave-to {\n    transform: translateY(100%);\n}\n.p-sidebar-full .p-sidebar-enter-from,\n.p-sidebar-full .p-sidebar-leave-to {\n    opacity: 0;\n}\n.p-sidebar-full .p-sidebar-enter-active,\n.p-sidebar-full .p-sidebar-leave-active {\n    transition: opacity 400ms cubic-bezier(0.25, 0.8, 0.25, 1);\n}\n\n/* Size */\n.p-sidebar-left .p-sidebar {\n    width: 20rem;\n    height: 100%;\n}\n\n.p-sidebar-right .p-sidebar {\n    width: 20rem;\n    height: 100%;\n}\n\n.p-sidebar-top .p-sidebar {\n    height: 10rem;\n    width: 100%;\n}\n\n.p-sidebar-bottom .p-sidebar {\n    height: 10rem;\n    width: 100%;\n}\n\n.p-sidebar-left .p-sidebar-sm,\n.p-sidebar-right .p-sidebar-sm {\n    width: 20rem;\n}\n\n.p-sidebar-left .p-sidebar-md,\n.p-sidebar-right .p-sidebar-md {\n    width: 40rem;\n}\n\n.p-sidebar-left .p-sidebar-lg,\n.p-sidebar-right .p-sidebar-lg {\n    width: 60rem;\n}\n\n.p-sidebar-top .p-sidebar-sm,\n.p-sidebar-bottom .p-sidebar-sm {\n    height: 10rem;\n}\n\n.p-sidebar-top .p-sidebar-md,\n.p-sidebar-bottom .p-sidebar-md {\n    height: 20rem;\n}\n\n.p-sidebar-top .p-sidebar-lg,\n.p-sidebar-bottom .p-sidebar-lg {\n    height: 30rem;\n}\n\n.p-sidebar-left .p-sidebar-content,\n.p-sidebar-right .p-sidebar-content,\n.p-sidebar-top .p-sidebar-content,\n.p-sidebar-bottom .p-sidebar-content {\n    width: 100%;\n    height: 100%;\n}\n\n@media screen and (max-width: 64em) {\n    .p-sidebar-left .p-sidebar-lg,\n    .p-sidebar-left .p-sidebar-md,\n    .p-sidebar-right .p-sidebar-lg,\n    .p-sidebar-right .p-sidebar-md {\n        width: 20rem;\n    }\n}\n",{name:"sidebar",manual:!0}),b={name:"Sidebar",extends:{name:"BaseSidebar",extends:f.default,props:{visible:{type:Boolean,default:!1},position:{type:String,default:"left"},baseZIndex:{type:Number,default:0},autoZIndex:{type:Boolean,default:!0},dismissable:{type:Boolean,default:!0},showCloseIcon:{type:Boolean,default:!0},closeIcon:{type:String,default:void 0},modal:{type:Boolean,default:!0},blockScroll:{type:Boolean,default:!1}},css:{classes:{mask:function(e){var n=e.instance,t=e.props,i=["left","right","top","bottom"].find((function(e){return e===t.position}));return["p-sidebar-mask",{"p-component-overlay p-component-overlay-enter":t.modal,"p-sidebar-mask-scrollblocker":t.blockScroll,"p-sidebar-visible":n.containerVisible,"p-sidebar-full":n.fullScreen},i?"p-sidebar-".concat(i):""]},root:function(e){var n=e.instance;return["p-sidebar p-component",{"p-input-filled":"filled"===n.$primevue.config.inputStyle,"p-ripple-disabled":!1===n.$primevue.config.ripple,"p-sidebar-full":n.fullScreen}]},header:"p-sidebar-header",headerContent:"p-sidebar-header-content",closeButton:"p-sidebar-close p-sidebar-icon p-link",closeIcon:"p-sidebar-close-icon",content:"p-sidebar-content"},inlineStyles:{mask:function(e){var n=e.position;return{position:"fixed",height:"100%",width:"100%",left:0,top:0,display:"flex",justifyContent:"left"===n?"flex-start":"right"===n?"flex-end":"center",alignItems:"top"===n?"flex-start":"bottom"===n?"flex-end":"center"}}},loadStyle:m.load},provide:function(){return{$parentInstance:this}}},inheritAttrs:!1,emits:["update:visible","show","hide","after-hide"],data:function(){return{containerVisible:this.visible}},container:null,mask:null,content:null,headerContainer:null,closeButton:null,outsideClickListener:null,updated:function(){this.visible&&(this.containerVisible=this.visible)},beforeUnmount:function(){this.disableDocumentSettings(),this.mask&&this.autoZIndex&&r.ZIndexUtils.clear(this.mask),this.container=null,this.mask=null},methods:{hide:function(){this.$emit("update:visible",!1)},onEnter:function(){this.$emit("show"),this.focus(),this.autoZIndex&&r.ZIndexUtils.set("modal",this.mask,this.baseZIndex||this.$primevue.config.zIndex.modal)},onAfterEnter:function(){this.enableDocumentSettings()},onBeforeLeave:function(){this.modal&&!this.isUnstyled&&r.DomHandler.addClass(this.mask,"p-component-overlay-leave")},onLeave:function(){this.$emit("hide")},onAfterLeave:function(){this.autoZIndex&&r.ZIndexUtils.clear(this.mask),this.containerVisible=!1,this.disableDocumentSettings(),this.$emit("after-hide")},onMaskClick:function(e){this.dismissable&&this.modal&&this.mask===e.target&&this.hide()},focus:function(){var e=function(e){return e.querySelector("[autofocus]")},n=this.$slots.default&&e(this.content);n||(n=this.$slots.header&&e(this.headerContainer))||(n=e(this.container)),n&&n.focus()},enableDocumentSettings:function(){this.dismissable&&!this.modal&&this.bindOutsideClickListener(),this.blockScroll&&r.DomHandler.addClass(document.body,"p-overflow-hidden")},disableDocumentSettings:function(){this.unbindOutsideClickListener(),this.blockScroll&&r.DomHandler.removeClass(document.body,"p-overflow-hidden")},onKeydown:function(e){"Escape"===e.code&&this.hide()},containerRef:function(e){this.container=e},maskRef:function(e){this.mask=e},contentRef:function(e){this.content=e},headerContainerRef:function(e){this.headerContainer=e},closeButtonRef:function(e){this.closeButton=e},bindOutsideClickListener:function(){var e=this;this.outsideClickListener||(this.outsideClickListener=function(n){e.isOutsideClicked(n)&&e.hide()},document.addEventListener("click",this.outsideClickListener))},unbindOutsideClickListener:function(){this.outsideClickListener&&(document.removeEventListener("click",this.outsideClickListener),this.outsideClickListener=null)},isOutsideClicked:function(e){return this.container&&!this.container.contains(e.target)}},computed:{fullScreen:function(){return"full"===this.position},closeAriaLabel:function(){return this.$primevue.config.locale.aria?this.$primevue.config.locale.aria.close:void 0}},directives:{focustrap:d.default,ripple:u.default},components:{Portal:p.default,TimesIcon:c.default}};function h(e){return h="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},h(e)}function v(e,n){var t=Object.keys(e);if(Object.getOwnPropertySymbols){var i=Object.getOwnPropertySymbols(e);n&&(i=i.filter((function(n){return Object.getOwnPropertyDescriptor(e,n).enumerable}))),t.push.apply(t,i)}return t}function y(e){for(var n=1;n<arguments.length;n++){var t=null!=arguments[n]?arguments[n]:{};n%2?v(Object(t),!0).forEach((function(n){k(e,n,t[n])})):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(t)):v(Object(t)).forEach((function(n){Object.defineProperty(e,n,Object.getOwnPropertyDescriptor(t,n))}))}return e}function k(e,n,t){return(n=g(n))in e?Object.defineProperty(e,n,{value:t,enumerable:!0,configurable:!0,writable:!0}):e[n]=t,e}function g(e){var n=x(e,"string");return"symbol"===h(n)?n:String(n)}function x(e,n){if("object"!==h(e)||null===e)return e;var t=e[Symbol.toPrimitive];if(void 0!==t){var i=t.call(e,n||"default");if("object"!==h(i))return i;throw new TypeError("@@toPrimitive must return a primitive value.")}return("string"===n?String:Number)(e)}var w=["aria-modal"],C=["aria-label"];return b.render=function(e,n,t,i,r,o){var s=a.resolveComponent("Portal"),l=a.resolveDirective("ripple"),d=a.resolveDirective("focustrap");return a.openBlock(),a.createBlock(s,null,{default:a.withCtx((function(){return[r.containerVisible?(a.openBlock(),a.createElementBlock("div",a.mergeProps({key:0,ref:o.maskRef,onMousedown:n[2]||(n[2]=function(){return o.onMaskClick&&o.onMaskClick.apply(o,arguments)}),class:e.cx("mask"),style:e.sx("mask",!0,{position:e.position})},e.ptm("mask")),[a.createVNode(a.Transition,{name:"p-sidebar",onEnter:o.onEnter,onAfterEnter:o.onAfterEnter,onBeforeLeave:o.onBeforeLeave,onLeave:o.onLeave,onAfterLeave:o.onAfterLeave,appear:""},{default:a.withCtx((function(){return[e.visible?a.withDirectives((a.openBlock(),a.createElementBlock("div",a.mergeProps({key:0,ref:o.containerRef,class:e.cx("root"),role:"complementary","aria-modal":e.modal,onKeydown:n[1]||(n[1]=function(){return o.onKeydown&&o.onKeydown.apply(o,arguments)})},y(y({},e.$attrs),e.ptm("root"))),[a.createElementVNode("div",a.mergeProps({ref:o.headerContainerRef,class:e.cx("header")},e.ptm("header")),[e.$slots.header?(a.openBlock(),a.createElementBlock("div",a.mergeProps({key:0,class:e.cx("headerContent")},e.ptm("headerContent")),[a.renderSlot(e.$slots,"header")],16)):a.createCommentVNode("",!0),e.showCloseIcon?a.withDirectives((a.openBlock(),a.createElementBlock("button",a.mergeProps({key:1,ref:o.closeButtonRef,autofocus:"",type:"button",class:e.cx("closeButton"),"aria-label":o.closeAriaLabel,onClick:n[0]||(n[0]=function(){return o.hide&&o.hide.apply(o,arguments)})},e.ptm("closeButton")),[a.renderSlot(e.$slots,"closeicon",{},(function(){return[(a.openBlock(),a.createBlock(a.resolveDynamicComponent(e.closeIcon?"span":"TimesIcon"),a.mergeProps({class:[e.cx("closeIcon"),e.closeIcon]},e.ptm("closeIcon")),null,16,["class"]))]}))],16,C)),[[l]]):a.createCommentVNode("",!0)],16),a.createElementVNode("div",a.mergeProps({ref:o.contentRef,class:e.cx("content")},e.ptm("content")),[a.renderSlot(e.$slots,"default")],16)],16,w)),[[d]]):a.createCommentVNode("",!0)]})),_:3},8,["onEnter","onAfterEnter","onBeforeLeave","onLeave","onAfterLeave"])],16)):a.createCommentVNode("",!0)]})),_:3})},b}(primevue.focustrap,primevue.icons.times,primevue.portal,primevue.ripple,primevue.utils,primevue.basecomponent,primevue.usestyle,Vue);

package/skeleton/BaseSkeleton.vue

@@ -0,0 +1,96 @@
+<script>
+import BaseComponent from 'primevue/basecomponent';
+import { useStyle } from 'primevue/usestyle';
+
+const styles = `
+.p-skeleton {
+    overflow: hidden;
+}
+
+.p-skeleton::after {
+    content: '';
+    animation: p-skeleton-animation 1.2s infinite;
+    height: 100%;
+    left: 0;
+    position: absolute;
+    right: 0;
+    top: 0;
+    transform: translateX(-100%);
+    z-index: 1;
+}
+
+.p-skeleton.p-skeleton-circle {
+    border-radius: 50%;
+}
+
+.p-skeleton-none::after {
+    animation: none;
+}
+
+@keyframes p-skeleton-animation {
+    from {
+        transform: translateX(-100%);
+    }
+    to {
+        transform: translateX(100%);
+    }
+}
+`;
+
+const inlineStyles = {
+    root: { position: 'relative' }
+};
+
+const classes = {
+    root: ({ props }) => [
+        'p-skeleton p-component',
+        {
+            'p-skeleton-circle': props.shape === 'circle',
+            'p-skeleton-none': props.animation === 'none'
+        }
+    ]
+};
+
+const { load: loadStyle } = useStyle(styles, { name: 'skeleton', manual: true });
+
+export default {
+    name: 'BaseSkeleton',
+    extends: BaseComponent,
+    props: {
+        shape: {
+            type: String,
+            default: 'rectangle'
+        },
+        size: {
+            type: String,
+            default: null
+        },
+        width: {
+            type: String,
+            default: '100%'
+        },
+        height: {
+            type: String,
+            default: '1rem'
+        },
+        borderRadius: {
+            type: String,
+            default: null
+        },
+        animation: {
+            type: String,
+            default: 'wave'
+        }
+    },
+    css: {
+        classes,
+        inlineStyles,
+        loadStyle
+    },
+    provide() {
+        return {
+            $parentInstance: this
+        };
+    }
+};
+</script>

package/skeleton/Skeleton.d.ts

@@ -7,6 +7,7 @@
  * @module skeleton
  *
  */
+import { ComponentHooks } from '../basecomponent';
 import { ClassComponent, GlobalComponentConstructor } from '../ts-helpers';
 
 export declare type SkeletonPassThroughOptionType = SkeletonPassThroughAttributes | ((options: SkeletonPassThroughMethodOptions) => SkeletonPassThroughAttributes) | null | undefined;
@@ -15,6 +16,7 @@ export declare type SkeletonPassThroughOptionType = SkeletonPassThroughAttribute
  * Custom passthrough(pt) option method.
  */
 export interface SkeletonPassThroughMethodOptions {
+    instance: any;
     props: SkeletonProps;
 }
 
@@ -27,6 +29,11 @@ export interface SkeletonPassThroughOptions {
      * Uses to pass attributes to the root's DOM element.
      */
     root?: SkeletonPassThroughOptionType;
+    /**
+     * Uses to manage all lifecycle hooks
+     * @see {@link BaseComponent.ComponentHooks}
+     */
+    hooks?: ComponentHooks;
 }
 
 /**
@@ -73,6 +80,11 @@ export interface SkeletonProps {
      * @type {SkeletonPassThroughOptions}
      */
     pt?: SkeletonPassThroughOptions;
+    /**
+     * When enabled, it removes component related styles in the core.
+     * @defaultValue false
+     */
+    unstyled?: boolean;
 }
 
 /**

package/skeleton/Skeleton.vue

@@ -1,49 +1,14 @@
 <template>
-    <div :style="containerStyle" :class="containerClass" aria-hidden="true" v-bind="ptm('root')"></div>
+    <div :class="cx('root')" :style="[sx('root'), containerStyle]" aria-hidden="true" v-bind="ptm('root')" data-pc-name="skeleton"></div>
 </template>
 
 <script>
-import BaseComponent from 'primevue/basecomponent';
+import BaseSkeleton from './BaseSkeleton.vue';
 
 export default {
     name: 'Skeleton',
-    extends: BaseComponent,
-    props: {
-        shape: {
-            type: String,
-            default: 'rectangle'
-        },
-        size: {
-            type: String,
-            default: null
-        },
-        width: {
-            type: String,
-            default: '100%'
-        },
-        height: {
-            type: String,
-            default: '1rem'
-        },
-        borderRadius: {
-            type: String,
-            default: null
-        },
-        animation: {
-            type: String,
-            default: 'wave'
-        }
-    },
+    extends: BaseSkeleton,
     computed: {
-        containerClass() {
-            return [
-                'p-skeleton p-component',
-                {
-                    'p-skeleton-circle': this.shape === 'circle',
-                    'p-skeleton-none': this.animation === 'none'
-                }
-            ];
-        },
         containerStyle() {
             if (this.size) return { width: this.size, height: this.size, borderRadius: this.borderRadius };
             else return { width: this.width, height: this.height, borderRadius: this.borderRadius };
@@ -51,39 +16,3 @@ export default {
     }
 };
 </script>
-
-<style>
-.p-skeleton {
-    position: relative;
-    overflow: hidden;
-}
-
-.p-skeleton::after {
-    content: '';
-    animation: p-skeleton-animation 1.2s infinite;
-    height: 100%;
-    left: 0;
-    position: absolute;
-    right: 0;
-    top: 0;
-    transform: translateX(-100%);
-    z-index: 1;
-}
-
-.p-skeleton.p-skeleton-circle {
-    border-radius: 50%;
-}
-
-.p-skeleton-none::after {
-    animation: none;
-}
-
-@keyframes p-skeleton-animation {
-    from {
-        transform: translateX(-100%);
-    }
-    to {
-        transform: translateX(100%);
-    }
-}
-</style>

package/skeleton/skeleton.cjs.js

@@ -1,96 +1,102 @@
 'use strict';
 
 var BaseComponent = require('primevue/basecomponent');
+var usestyle = require('primevue/usestyle');
 var vue = require('vue');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
 var BaseComponent__default = /*#__PURE__*/_interopDefaultLegacy(BaseComponent);
 
-var script = {
-    name: 'Skeleton',
-    extends: BaseComponent__default["default"],
-    props: {
-        shape: {
-            type: String,
-            default: 'rectangle'
-        },
-        size: {
-            type: String,
-            default: null
-        },
-        width: {
-            type: String,
-            default: '100%'
-        },
-        height: {
-            type: String,
-            default: '1rem'
-        },
-        borderRadius: {
-            type: String,
-            default: null
-        },
-        animation: {
-            type: String,
-            default: 'wave'
-        }
+var styles = "\n.p-skeleton {\n    overflow: hidden;\n}\n\n.p-skeleton::after {\n    content: '';\n    animation: p-skeleton-animation 1.2s infinite;\n    height: 100%;\n    left: 0;\n    position: absolute;\n    right: 0;\n    top: 0;\n    transform: translateX(-100%);\n    z-index: 1;\n}\n\n.p-skeleton.p-skeleton-circle {\n    border-radius: 50%;\n}\n\n.p-skeleton-none::after {\n    animation: none;\n}\n\n@keyframes p-skeleton-animation {\n    from {\n        transform: translateX(-100%);\n    }\n    to {\n        transform: translateX(100%);\n    }\n}\n";
+var inlineStyles = {
+  root: {
+    position: 'relative'
+  }
+};
+var classes = {
+  root: function root(_ref) {
+    var props = _ref.props;
+    return ['p-skeleton p-component', {
+      'p-skeleton-circle': props.shape === 'circle',
+      'p-skeleton-none': props.animation === 'none'
+    }];
+  }
+};
+var _useStyle = usestyle.useStyle(styles, {
+    name: 'skeleton',
+    manual: true
+  }),
+  loadStyle = _useStyle.load;
+var script$1 = {
+  name: 'BaseSkeleton',
+  "extends": BaseComponent__default["default"],
+  props: {
+    shape: {
+      type: String,
+      "default": 'rectangle'
+    },
+    size: {
+      type: String,
+      "default": null
     },
-    computed: {
-        containerClass() {
-            return [
-                'p-skeleton p-component',
-                {
-                    'p-skeleton-circle': this.shape === 'circle',
-                    'p-skeleton-none': this.animation === 'none'
-                }
-            ];
-        },
-        containerStyle() {
-            if (this.size) return { width: this.size, height: this.size, borderRadius: this.borderRadius };
-            else return { width: this.width, height: this.height, borderRadius: this.borderRadius };
-        }
+    width: {
+      type: String,
+      "default": '100%'
+    },
+    height: {
+      type: String,
+      "default": '1rem'
+    },
+    borderRadius: {
+      type: String,
+      "default": null
+    },
+    animation: {
+      type: String,
+      "default": 'wave'
     }
+  },
+  css: {
+    classes: classes,
+    inlineStyles: inlineStyles,
+    loadStyle: loadStyle
+  },
+  provide: function provide() {
+    return {
+      $parentInstance: this
+    };
+  }
 };
 
-function render(_ctx, _cache, $props, $setup, $data, $options) {
-  return (vue.openBlock(), vue.createElementBlock("div", vue.mergeProps({
-    style: $options.containerStyle,
-    class: $options.containerClass,
-    "aria-hidden": "true"
-  }, _ctx.ptm('root')), null, 16))
-}
-
-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);
+var script = {
+  name: 'Skeleton',
+  "extends": script$1,
+  computed: {
+    containerStyle: function containerStyle() {
+      if (this.size) return {
+        width: this.size,
+        height: this.size,
+        borderRadius: this.borderRadius
+      };else return {
+        width: this.width,
+        height: this.height,
+        borderRadius: this.borderRadius
+      };
     }
-  } else {
-    head.appendChild(style);
   }
+};
 
-  if (style.styleSheet) {
-    style.styleSheet.cssText = css;
-  } else {
-    style.appendChild(document.createTextNode(css));
-  }
+function render(_ctx, _cache, $props, $setup, $data, $options) {
+  return vue.openBlock(), vue.createElementBlock("div", vue.mergeProps({
+    "class": _ctx.cx('root'),
+    style: [_ctx.sx('root'), $options.containerStyle],
+    "aria-hidden": "true"
+  }, _ctx.ptm('root'), {
+    "data-pc-name": "skeleton"
+  }), null, 16);
 }
 
-var css_248z = "\n.p-skeleton {\n    position: relative;\n    overflow: hidden;\n}\n.p-skeleton::after {\n    content: '';\n    animation: p-skeleton-animation 1.2s infinite;\n    height: 100%;\n    left: 0;\n    position: absolute;\n    right: 0;\n    top: 0;\n    transform: translateX(-100%);\n    z-index: 1;\n}\n.p-skeleton.p-skeleton-circle {\n    border-radius: 50%;\n}\n.p-skeleton-none::after {\n    animation: none;\n}\n@keyframes p-skeleton-animation {\nfrom {\n        transform: translateX(-100%);\n}\nto {\n        transform: translateX(100%);\n}\n}\n";
-styleInject(css_248z);
-
 script.render = render;
 
 module.exports = script;

package/skeleton/skeleton.cjs.min.js

@@ -1 +1 @@
-"use strict";var e=require("primevue/basecomponent"),t=require("vue");function n(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var i={name:"Skeleton",extends:n(e).default,props:{shape:{type:String,default:"rectangle"},size:{type:String,default:null},width:{type:String,default:"100%"},height:{type:String,default:"1rem"},borderRadius:{type:String,default:null},animation:{type:String,default:"wave"}},computed:{containerClass(){return["p-skeleton p-component",{"p-skeleton-circle":"circle"===this.shape,"p-skeleton-none":"none"===this.animation}]},containerStyle(){return this.size?{width:this.size,height:this.size,borderRadius:this.borderRadius}:{width:this.width,height:this.height,borderRadius:this.borderRadius}}}};!function(e,t){void 0===t&&(t={});var n=t.insertAt;if(e&&"undefined"!=typeof document){var i=document.head||document.getElementsByTagName("head")[0],r=document.createElement("style");r.type="text/css","top"===n&&i.firstChild?i.insertBefore(r,i.firstChild):i.appendChild(r),r.styleSheet?r.styleSheet.cssText=e:r.appendChild(document.createTextNode(e))}}("\n.p-skeleton {\n    position: relative;\n    overflow: hidden;\n}\n.p-skeleton::after {\n    content: '';\n    animation: p-skeleton-animation 1.2s infinite;\n    height: 100%;\n    left: 0;\n    position: absolute;\n    right: 0;\n    top: 0;\n    transform: translateX(-100%);\n    z-index: 1;\n}\n.p-skeleton.p-skeleton-circle {\n    border-radius: 50%;\n}\n.p-skeleton-none::after {\n    animation: none;\n}\n@keyframes p-skeleton-animation {\nfrom {\n        transform: translateX(-100%);\n}\nto {\n        transform: translateX(100%);\n}\n}\n"),i.render=function(e,n,i,r,o,a){return t.openBlock(),t.createElementBlock("div",t.mergeProps({style:a.containerStyle,class:a.containerClass,"aria-hidden":"true"},e.ptm("root")),null,16)},module.exports=i;
+"use strict";var e=require("primevue/basecomponent"),n=require("primevue/usestyle"),t=require("vue");function r(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var i=r(e),o=n.useStyle("\n.p-skeleton {\n    overflow: hidden;\n}\n\n.p-skeleton::after {\n    content: '';\n    animation: p-skeleton-animation 1.2s infinite;\n    height: 100%;\n    left: 0;\n    position: absolute;\n    right: 0;\n    top: 0;\n    transform: translateX(-100%);\n    z-index: 1;\n}\n\n.p-skeleton.p-skeleton-circle {\n    border-radius: 50%;\n}\n\n.p-skeleton-none::after {\n    animation: none;\n}\n\n@keyframes p-skeleton-animation {\n    from {\n        transform: translateX(-100%);\n    }\n    to {\n        transform: translateX(100%);\n    }\n}\n",{name:"skeleton",manual:!0}),a={name:"Skeleton",extends:{name:"BaseSkeleton",extends:i.default,props:{shape:{type:String,default:"rectangle"},size:{type:String,default:null},width:{type:String,default:"100%"},height:{type:String,default:"1rem"},borderRadius:{type:String,default:null},animation:{type:String,default:"wave"}},css:{classes:{root:function(e){var n=e.props;return["p-skeleton p-component",{"p-skeleton-circle":"circle"===n.shape,"p-skeleton-none":"none"===n.animation}]}},inlineStyles:{root:{position:"relative"}},loadStyle:o.load},provide:function(){return{$parentInstance:this}}},computed:{containerStyle:function(){return this.size?{width:this.size,height:this.size,borderRadius:this.borderRadius}:{width:this.width,height:this.height,borderRadius:this.borderRadius}}}};a.render=function(e,n,r,i,o,a){return t.openBlock(),t.createElementBlock("div",t.mergeProps({class:e.cx("root"),style:[e.sx("root"),a.containerStyle],"aria-hidden":"true"},e.ptm("root"),{"data-pc-name":"skeleton"}),null,16)},module.exports=a;

package/skeleton/skeleton.esm.js

@@ -1,90 +1,96 @@
 import BaseComponent from 'primevue/basecomponent';
+import { useStyle } from 'primevue/usestyle';
 import { openBlock, createElementBlock, mergeProps } from 'vue';
 
-var script = {
-    name: 'Skeleton',
-    extends: BaseComponent,
-    props: {
-        shape: {
-            type: String,
-            default: 'rectangle'
-        },
-        size: {
-            type: String,
-            default: null
-        },
-        width: {
-            type: String,
-            default: '100%'
-        },
-        height: {
-            type: String,
-            default: '1rem'
-        },
-        borderRadius: {
-            type: String,
-            default: null
-        },
-        animation: {
-            type: String,
-            default: 'wave'
-        }
+var styles = "\n.p-skeleton {\n    overflow: hidden;\n}\n\n.p-skeleton::after {\n    content: '';\n    animation: p-skeleton-animation 1.2s infinite;\n    height: 100%;\n    left: 0;\n    position: absolute;\n    right: 0;\n    top: 0;\n    transform: translateX(-100%);\n    z-index: 1;\n}\n\n.p-skeleton.p-skeleton-circle {\n    border-radius: 50%;\n}\n\n.p-skeleton-none::after {\n    animation: none;\n}\n\n@keyframes p-skeleton-animation {\n    from {\n        transform: translateX(-100%);\n    }\n    to {\n        transform: translateX(100%);\n    }\n}\n";
+var inlineStyles = {
+  root: {
+    position: 'relative'
+  }
+};
+var classes = {
+  root: function root(_ref) {
+    var props = _ref.props;
+    return ['p-skeleton p-component', {
+      'p-skeleton-circle': props.shape === 'circle',
+      'p-skeleton-none': props.animation === 'none'
+    }];
+  }
+};
+var _useStyle = useStyle(styles, {
+    name: 'skeleton',
+    manual: true
+  }),
+  loadStyle = _useStyle.load;
+var script$1 = {
+  name: 'BaseSkeleton',
+  "extends": BaseComponent,
+  props: {
+    shape: {
+      type: String,
+      "default": 'rectangle'
+    },
+    size: {
+      type: String,
+      "default": null
     },
-    computed: {
-        containerClass() {
-            return [
-                'p-skeleton p-component',
-                {
-                    'p-skeleton-circle': this.shape === 'circle',
-                    'p-skeleton-none': this.animation === 'none'
-                }
-            ];
-        },
-        containerStyle() {
-            if (this.size) return { width: this.size, height: this.size, borderRadius: this.borderRadius };
-            else return { width: this.width, height: this.height, borderRadius: this.borderRadius };
-        }
+    width: {
+      type: String,
+      "default": '100%'
+    },
+    height: {
+      type: String,
+      "default": '1rem'
+    },
+    borderRadius: {
+      type: String,
+      "default": null
+    },
+    animation: {
+      type: String,
+      "default": 'wave'
     }
+  },
+  css: {
+    classes: classes,
+    inlineStyles: inlineStyles,
+    loadStyle: loadStyle
+  },
+  provide: function provide() {
+    return {
+      $parentInstance: this
+    };
+  }
 };
 
-function render(_ctx, _cache, $props, $setup, $data, $options) {
-  return (openBlock(), createElementBlock("div", mergeProps({
-    style: $options.containerStyle,
-    class: $options.containerClass,
-    "aria-hidden": "true"
-  }, _ctx.ptm('root')), null, 16))
-}
-
-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);
+var script = {
+  name: 'Skeleton',
+  "extends": script$1,
+  computed: {
+    containerStyle: function containerStyle() {
+      if (this.size) return {
+        width: this.size,
+        height: this.size,
+        borderRadius: this.borderRadius
+      };else return {
+        width: this.width,
+        height: this.height,
+        borderRadius: this.borderRadius
+      };
     }
-  } else {
-    head.appendChild(style);
   }
+};
 
-  if (style.styleSheet) {
-    style.styleSheet.cssText = css;
-  } else {
-    style.appendChild(document.createTextNode(css));
-  }
+function render(_ctx, _cache, $props, $setup, $data, $options) {
+  return openBlock(), createElementBlock("div", mergeProps({
+    "class": _ctx.cx('root'),
+    style: [_ctx.sx('root'), $options.containerStyle],
+    "aria-hidden": "true"
+  }, _ctx.ptm('root'), {
+    "data-pc-name": "skeleton"
+  }), null, 16);
 }
 
-var css_248z = "\n.p-skeleton {\n    position: relative;\n    overflow: hidden;\n}\n.p-skeleton::after {\n    content: '';\n    animation: p-skeleton-animation 1.2s infinite;\n    height: 100%;\n    left: 0;\n    position: absolute;\n    right: 0;\n    top: 0;\n    transform: translateX(-100%);\n    z-index: 1;\n}\n.p-skeleton.p-skeleton-circle {\n    border-radius: 50%;\n}\n.p-skeleton-none::after {\n    animation: none;\n}\n@keyframes p-skeleton-animation {\nfrom {\n        transform: translateX(-100%);\n}\nto {\n        transform: translateX(100%);\n}\n}\n";
-styleInject(css_248z);
-
 script.render = render;
 
 export { script as default };

package/skeleton/skeleton.esm.min.js

@@ -1 +1 @@
-import e from"primevue/basecomponent";import{openBlock as t,createElementBlock as n,mergeProps as i}from"vue";var r={name:"Skeleton",extends:e,props:{shape:{type:String,default:"rectangle"},size:{type:String,default:null},width:{type:String,default:"100%"},height:{type:String,default:"1rem"},borderRadius:{type:String,default:null},animation:{type:String,default:"wave"}},computed:{containerClass(){return["p-skeleton p-component",{"p-skeleton-circle":"circle"===this.shape,"p-skeleton-none":"none"===this.animation}]},containerStyle(){return this.size?{width:this.size,height:this.size,borderRadius:this.borderRadius}:{width:this.width,height:this.height,borderRadius:this.borderRadius}}}};!function(e,t){void 0===t&&(t={});var n=t.insertAt;if(e&&"undefined"!=typeof document){var i=document.head||document.getElementsByTagName("head")[0],r=document.createElement("style");r.type="text/css","top"===n&&i.firstChild?i.insertBefore(r,i.firstChild):i.appendChild(r),r.styleSheet?r.styleSheet.cssText=e:r.appendChild(document.createTextNode(e))}}("\n.p-skeleton {\n    position: relative;\n    overflow: hidden;\n}\n.p-skeleton::after {\n    content: '';\n    animation: p-skeleton-animation 1.2s infinite;\n    height: 100%;\n    left: 0;\n    position: absolute;\n    right: 0;\n    top: 0;\n    transform: translateX(-100%);\n    z-index: 1;\n}\n.p-skeleton.p-skeleton-circle {\n    border-radius: 50%;\n}\n.p-skeleton-none::after {\n    animation: none;\n}\n@keyframes p-skeleton-animation {\nfrom {\n        transform: translateX(-100%);\n}\nto {\n        transform: translateX(100%);\n}\n}\n"),r.render=function(e,r,o,a,s,l){return t(),n("div",i({style:l.containerStyle,class:l.containerClass,"aria-hidden":"true"},e.ptm("root")),null,16)};export{r as default};
+import e from"primevue/basecomponent";import{useStyle as n}from"primevue/usestyle";import{openBlock as t,createElementBlock as o,mergeProps as i}from"vue";var r=n("\n.p-skeleton {\n    overflow: hidden;\n}\n\n.p-skeleton::after {\n    content: '';\n    animation: p-skeleton-animation 1.2s infinite;\n    height: 100%;\n    left: 0;\n    position: absolute;\n    right: 0;\n    top: 0;\n    transform: translateX(-100%);\n    z-index: 1;\n}\n\n.p-skeleton.p-skeleton-circle {\n    border-radius: 50%;\n}\n\n.p-skeleton-none::after {\n    animation: none;\n}\n\n@keyframes p-skeleton-animation {\n    from {\n        transform: translateX(-100%);\n    }\n    to {\n        transform: translateX(100%);\n    }\n}\n",{name:"skeleton",manual:!0}),a={name:"Skeleton",extends:{name:"BaseSkeleton",extends:e,props:{shape:{type:String,default:"rectangle"},size:{type:String,default:null},width:{type:String,default:"100%"},height:{type:String,default:"1rem"},borderRadius:{type:String,default:null},animation:{type:String,default:"wave"}},css:{classes:{root:function(e){var n=e.props;return["p-skeleton p-component",{"p-skeleton-circle":"circle"===n.shape,"p-skeleton-none":"none"===n.animation}]}},inlineStyles:{root:{position:"relative"}},loadStyle:r.load},provide:function(){return{$parentInstance:this}}},computed:{containerStyle:function(){return this.size?{width:this.size,height:this.size,borderRadius:this.borderRadius}:{width:this.width,height:this.height,borderRadius:this.borderRadius}}}};a.render=function(e,n,r,a,s,l){return t(),o("div",i({class:e.cx("root"),style:[e.sx("root"),l.containerStyle],"aria-hidden":"true"},e.ptm("root"),{"data-pc-name":"skeleton"}),null,16)};export{a as default};