primevue 3.35.0 → 3.36.0

package/sidebar/sidebar.js

@@ -1,5 +1,5 @@
 this.primevue = this.primevue || {};
-this.primevue.sidebar = (function (FocusTrap, TimesIcon, Portal, Ripple, utils, BaseComponent, usestyle, vue) {
+this.primevue.sidebar = (function (FocusTrap, TimesIcon, Portal, Ripple, utils, BaseComponent, SidebarStyle, vue) {
     'use strict';
 
     function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
@@ -9,59 +9,8 @@ this.primevue.sidebar = (function (FocusTrap, TimesIcon, Portal, Ripple, utils,
     var Portal__default = /*#__PURE__*/_interopDefaultLegacy(Portal);
     var Ripple__default = /*#__PURE__*/_interopDefaultLegacy(Ripple);
     var BaseComponent__default = /*#__PURE__*/_interopDefaultLegacy(BaseComponent);
+    var SidebarStyle__default = /*#__PURE__*/_interopDefaultLegacy(SidebarStyle);
 
-    var styles = "\n@layer primevue {\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}\n";
-
-    /* Position */
-    var inlineStyles = {
-      mask: function mask(_ref) {
-        var position = _ref.position;
-        return {
-          position: 'fixed',
-          height: '100%',
-          width: '100%',
-          left: 0,
-          top: 0,
-          display: 'flex',
-          justifyContent: position === 'left' ? 'flex-start' : position === 'right' ? 'flex-end' : 'center',
-          alignItems: position === 'top' ? 'flex-start' : position === 'bottom' ? 'flex-end' : 'center'
-        };
-      }
-    };
-    var classes = {
-      mask: function mask(_ref2) {
-        var instance = _ref2.instance,
-          props = _ref2.props;
-        var positions = ['left', 'right', 'top', 'bottom'];
-        var pos = positions.find(function (item) {
-          return item === props.position;
-        });
-        return ['p-sidebar-mask', {
-          'p-component-overlay p-component-overlay-enter': props.modal,
-          'p-sidebar-mask-scrollblocker': props.blockScroll,
-          'p-sidebar-visible': instance.containerVisible,
-          'p-sidebar-full': instance.fullScreen
-        }, pos ? "p-sidebar-".concat(pos) : ''];
-      },
-      root: function root(_ref3) {
-        var instance = _ref3.instance;
-        return ['p-sidebar p-component', {
-          'p-input-filled': instance.$primevue.config.inputStyle === 'filled',
-          'p-ripple-disabled': instance.$primevue.config.ripple === false,
-          'p-sidebar-full': instance.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'
-    };
-    var _useStyle = usestyle.useStyle(styles, {
-        name: 'sidebar',
-        manual: true
-      }),
-      loadStyle = _useStyle.load;
     var script$1 = {
       name: 'BaseSidebar',
       "extends": BaseComponent__default["default"],
@@ -103,11 +52,7 @@ this.primevue.sidebar = (function (FocusTrap, TimesIcon, Portal, Ripple, utils,
           "default": false
         }
       },
-      css: {
-        classes: classes,
-        inlineStyles: inlineStyles,
-        loadStyle: loadStyle
-      },
+      style: SidebarStyle__default["default"],
       provide: function provide() {
         return {
           $parentInstance: this
@@ -183,29 +128,27 @@ this.primevue.sidebar = (function (FocusTrap, TimesIcon, Portal, Ripple, utils,
           var findFocusableElement = function findFocusableElement(container) {
             return container && container.querySelector('[autofocus]');
           };
-          var focusTarget = this.$slots["default"] && findFocusableElement(this.content);
+          var focusTarget = this.$slots.header && findFocusableElement(this.headerContainer);
           if (!focusTarget) {
-            focusTarget = this.$slots.header && findFocusableElement(this.headerContainer);
+            focusTarget = this.$slots["default"] && findFocusableElement(this.container);
             if (!focusTarget) {
-              focusTarget = findFocusableElement(this.container);
+              focusTarget = this.closeButton;
             }
           }
-          focusTarget && focusTarget.focus();
+          focusTarget && utils.DomHandler.focus(focusTarget);
         },
         enableDocumentSettings: function enableDocumentSettings() {
           if (this.dismissable && !this.modal) {
             this.bindOutsideClickListener();
           }
           if (this.blockScroll) {
-            utils.DomHandler.addClass(document.body, 'p-overflow-hidden');
-            document.body.style.setProperty('--scrollbar-width', utils.DomHandler.calculateScrollbarWidth() + 'px');
+            utils.DomHandler.blockBodyScroll();
           }
         },
         disableDocumentSettings: function disableDocumentSettings() {
           this.unbindOutsideClickListener();
           if (this.blockScroll) {
-            utils.DomHandler.removeClass(document.body, 'p-overflow-hidden');
-            document.body.style.removeProperty('--scrollbar-width');
+            utils.DomHandler.unblockBodyScroll();
           }
         },
         onKeydown: function onKeydown(event) {
@@ -324,7 +267,6 @@ this.primevue.sidebar = (function (FocusTrap, TimesIcon, Portal, Ripple, utils,
               }, _ctx.ptm('headerContent')), [vue.renderSlot(_ctx.$slots, "header")], 16)) : vue.createCommentVNode("", true), _ctx.showCloseIcon ? vue.withDirectives((vue.openBlock(), vue.createElementBlock("button", vue.mergeProps({
                 key: 1,
                 ref: $options.closeButtonRef,
-                autofocus: "",
                 type: "button",
                 "class": _ctx.cx('closeButton'),
                 "aria-label": $options.closeAriaLabel,
@@ -355,4 +297,4 @@ this.primevue.sidebar = (function (FocusTrap, TimesIcon, Portal, Ripple, utils,
 
     return script;
 
-})(primevue.focustrap, primevue.icons.times, primevue.portal, primevue.ripple, primevue.utils, primevue.basecomponent, primevue.usestyle, Vue);
+})(primevue.focustrap, primevue.icons.times, primevue.portal, primevue.ripple, primevue.utils, primevue.basecomponent, primevue.sidebar.style, Vue);

package/sidebar/sidebar.min.js

@@ -1 +1 @@
-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 c=l(e),d=l(n),p=l(t),u=l(i),m=l(o),f=s.useStyle("\n@layer primevue {\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}\n",{name:"sidebar",manual:!0}),b={name:"Sidebar",extends:{name:"BaseSidebar",extends:m.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:f.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&&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"),document.body.style.setProperty("--scrollbar-width",r.DomHandler.calculateScrollbarWidth()+"px"))},disableDocumentSettings:function(){this.unbindOutsideClickListener(),this.blockScroll&&(r.DomHandler.removeClass(document.body,"p-overflow-hidden"),document.body.style.removeProperty("--scrollbar-width"))},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:c.default,ripple:u.default},components:{Portal:p.default,TimesIcon:d.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"),c=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,a.mergeProps({name:"p-sidebar",onEnter:o.onEnter,onAfterEnter:o.onAfterEnter,onBeforeLeave:o.onBeforeLeave,onLeave:o.onLeave,onAfterLeave:o.onAfterLeave,appear:""},e.ptm("transition")),{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"))),[e.$slots.container?a.renderSlot(e.$slots,"container",{key:0,onClose:o.hide}):(a.openBlock(),a.createElementBlock(a.Fragment,{key:1},[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"),{"data-pc-group-section":"iconcontainer"}),[a.renderSlot(e.$slots,"closeicon",{class:a.normalizeClass(e.cx("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)],64))],16,w)),[[c]]):a.createCommentVNode("",!0)]})),_:3},16,["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);
+this.primevue=this.primevue||{},this.primevue.sidebar=function(e,t,n,o,i,r,s,l){"use strict";function c(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var a=c(e),u=c(t),d=c(n),f=c(o),m={name:"Sidebar",extends:{name:"BaseSidebar",extends:c(r).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}},style:c(s).default,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&&i.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&&i.ZIndexUtils.set("modal",this.mask,this.baseZIndex||this.$primevue.config.zIndex.modal)},onAfterEnter:function(){this.enableDocumentSettings()},onBeforeLeave:function(){this.modal&&!this.isUnstyled&&i.DomHandler.addClass(this.mask,"p-component-overlay-leave")},onLeave:function(){this.$emit("hide")},onAfterLeave:function(){this.autoZIndex&&i.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&&e.querySelector("[autofocus]")},t=this.$slots.header&&e(this.headerContainer);t||(t=this.$slots.default&&e(this.container))||(t=this.closeButton),t&&i.DomHandler.focus(t)},enableDocumentSettings:function(){this.dismissable&&!this.modal&&this.bindOutsideClickListener(),this.blockScroll&&i.DomHandler.blockBodyScroll()},disableDocumentSettings:function(){this.unbindOutsideClickListener(),this.blockScroll&&i.DomHandler.unblockBodyScroll()},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(t){e.isOutsideClicked(t)&&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:a.default,ripple:f.default},components:{Portal:d.default,TimesIcon:u.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 h(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 b(e){for(var t=1;t<arguments.length;t++){var n=null!=arguments[t]?arguments[t]:{};t%2?h(Object(n),!0).forEach((function(t){v(e,t,n[t])})):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(n)):h(Object(n)).forEach((function(t){Object.defineProperty(e,t,Object.getOwnPropertyDescriptor(n,t))}))}return e}function v(e,t,n){return(t=k(t))in e?Object.defineProperty(e,t,{value:n,enumerable:!0,configurable:!0,writable:!0}):e[t]=n,e}function k(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 o=n.call(e,t||"default");if("object"!==p(o))return o;throw new TypeError("@@toPrimitive must return a primitive value.")}return("string"===t?String:Number)(e)}var C=["aria-modal"],g=["aria-label"];return m.render=function(e,t,n,o,i,r){var s=l.resolveComponent("Portal"),c=l.resolveDirective("ripple"),a=l.resolveDirective("focustrap");return l.openBlock(),l.createBlock(s,null,{default:l.withCtx((function(){return[i.containerVisible?(l.openBlock(),l.createElementBlock("div",l.mergeProps({key:0,ref:r.maskRef,onMousedown:t[2]||(t[2]=function(){return r.onMaskClick&&r.onMaskClick.apply(r,arguments)}),class:e.cx("mask"),style:e.sx("mask",!0,{position:e.position})},e.ptm("mask")),[l.createVNode(l.Transition,l.mergeProps({name:"p-sidebar",onEnter:r.onEnter,onAfterEnter:r.onAfterEnter,onBeforeLeave:r.onBeforeLeave,onLeave:r.onLeave,onAfterLeave:r.onAfterLeave,appear:""},e.ptm("transition")),{default:l.withCtx((function(){return[e.visible?l.withDirectives((l.openBlock(),l.createElementBlock("div",l.mergeProps({key:0,ref:r.containerRef,class:e.cx("root"),role:"complementary","aria-modal":e.modal,onKeydown:t[1]||(t[1]=function(){return r.onKeydown&&r.onKeydown.apply(r,arguments)})},b(b({},e.$attrs),e.ptm("root"))),[e.$slots.container?l.renderSlot(e.$slots,"container",{key:0,onClose:r.hide}):(l.openBlock(),l.createElementBlock(l.Fragment,{key:1},[l.createElementVNode("div",l.mergeProps({ref:r.headerContainerRef,class:e.cx("header")},e.ptm("header")),[e.$slots.header?(l.openBlock(),l.createElementBlock("div",l.mergeProps({key:0,class:e.cx("headerContent")},e.ptm("headerContent")),[l.renderSlot(e.$slots,"header")],16)):l.createCommentVNode("",!0),e.showCloseIcon?l.withDirectives((l.openBlock(),l.createElementBlock("button",l.mergeProps({key:1,ref:r.closeButtonRef,type:"button",class:e.cx("closeButton"),"aria-label":r.closeAriaLabel,onClick:t[0]||(t[0]=function(){return r.hide&&r.hide.apply(r,arguments)})},e.ptm("closeButton"),{"data-pc-group-section":"iconcontainer"}),[l.renderSlot(e.$slots,"closeicon",{class:l.normalizeClass(e.cx("closeIcon"))},(function(){return[(l.openBlock(),l.createBlock(l.resolveDynamicComponent(e.closeIcon?"span":"TimesIcon"),l.mergeProps({class:[e.cx("closeIcon"),e.closeIcon]},e.ptm("closeIcon")),null,16,["class"]))]}))],16,g)),[[c]]):l.createCommentVNode("",!0)],16),l.createElementVNode("div",l.mergeProps({ref:r.contentRef,class:e.cx("content")},e.ptm("content")),[l.renderSlot(e.$slots,"default")],16)],64))],16,C)),[[a]]):l.createCommentVNode("",!0)]})),_:3},16,["onEnter","onAfterEnter","onBeforeLeave","onLeave","onAfterLeave"])],16)):l.createCommentVNode("",!0)]})),_:3})},m}(primevue.focustrap,primevue.icons.times,primevue.portal,primevue.ripple,primevue.utils,primevue.basecomponent,primevue.sidebar.style,Vue);

package/sidebar/style/SidebarStyle.d.ts

@@ -0,0 +1,3 @@
+import { BaseStyle } from '../../base/style';
+
+export interface SidebarStyle extends BaseStyle {}

package/sidebar/style/package.json

@@ -0,0 +1,6 @@
+{
+    "main": "./sidebarstyle.cjs.js",
+    "module": "./sidebarstyle.esm.js",
+    "unpkg": "./sidebarstyle.min.js",
+    "types": "./SidebarStyle.d.ts"
+}

package/sidebar/style/sidebarstyle.cjs.js

@@ -0,0 +1,61 @@
+'use strict';
+
+var BaseStyle = require('primevue/base/style');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+var BaseStyle__default = /*#__PURE__*/_interopDefaultLegacy(BaseStyle);
+
+var css = "\n@layer primevue {\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}\n";
+var inlineStyles = {
+  mask: function mask(_ref) {
+    var position = _ref.position;
+    return {
+      position: 'fixed',
+      height: '100%',
+      width: '100%',
+      left: 0,
+      top: 0,
+      display: 'flex',
+      justifyContent: position === 'left' ? 'flex-start' : position === 'right' ? 'flex-end' : 'center',
+      alignItems: position === 'top' ? 'flex-start' : position === 'bottom' ? 'flex-end' : 'center'
+    };
+  }
+};
+var classes = {
+  mask: function mask(_ref2) {
+    var instance = _ref2.instance,
+      props = _ref2.props;
+    var positions = ['left', 'right', 'top', 'bottom'];
+    var pos = positions.find(function (item) {
+      return item === props.position;
+    });
+    return ['p-sidebar-mask', {
+      'p-component-overlay p-component-overlay-enter': props.modal,
+      'p-sidebar-mask-scrollblocker': props.blockScroll,
+      'p-sidebar-visible': instance.containerVisible,
+      'p-sidebar-full': instance.fullScreen
+    }, pos ? "p-sidebar-".concat(pos) : ''];
+  },
+  root: function root(_ref3) {
+    var instance = _ref3.instance;
+    return ['p-sidebar p-component', {
+      'p-input-filled': instance.$primevue.config.inputStyle === 'filled',
+      'p-ripple-disabled': instance.$primevue.config.ripple === false,
+      'p-sidebar-full': instance.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'
+};
+var SidebarStyle = BaseStyle__default["default"].extend({
+  name: 'sidebar',
+  css: css,
+  classes: classes,
+  inlineStyles: inlineStyles
+});
+
+module.exports = SidebarStyle;

package/sidebar/style/sidebarstyle.cjs.min.js

@@ -0,0 +1 @@
+"use strict";function e(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var n=e(require("primevue/base/style")).default.extend({name:"sidebar",css:"\n@layer primevue {\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}\n",classes:{mask:function(e){var n=e.instance,r=e.props,i=["left","right","top","bottom"].find((function(e){return e===r.position}));return["p-sidebar-mask",{"p-component-overlay p-component-overlay-enter":r.modal,"p-sidebar-mask-scrollblocker":r.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"}}}});module.exports=n;

package/sidebar/style/sidebarstyle.esm.js

@@ -0,0 +1,55 @@
+import BaseStyle from 'primevue/base/style';
+
+var css = "\n@layer primevue {\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}\n";
+var inlineStyles = {
+  mask: function mask(_ref) {
+    var position = _ref.position;
+    return {
+      position: 'fixed',
+      height: '100%',
+      width: '100%',
+      left: 0,
+      top: 0,
+      display: 'flex',
+      justifyContent: position === 'left' ? 'flex-start' : position === 'right' ? 'flex-end' : 'center',
+      alignItems: position === 'top' ? 'flex-start' : position === 'bottom' ? 'flex-end' : 'center'
+    };
+  }
+};
+var classes = {
+  mask: function mask(_ref2) {
+    var instance = _ref2.instance,
+      props = _ref2.props;
+    var positions = ['left', 'right', 'top', 'bottom'];
+    var pos = positions.find(function (item) {
+      return item === props.position;
+    });
+    return ['p-sidebar-mask', {
+      'p-component-overlay p-component-overlay-enter': props.modal,
+      'p-sidebar-mask-scrollblocker': props.blockScroll,
+      'p-sidebar-visible': instance.containerVisible,
+      'p-sidebar-full': instance.fullScreen
+    }, pos ? "p-sidebar-".concat(pos) : ''];
+  },
+  root: function root(_ref3) {
+    var instance = _ref3.instance;
+    return ['p-sidebar p-component', {
+      'p-input-filled': instance.$primevue.config.inputStyle === 'filled',
+      'p-ripple-disabled': instance.$primevue.config.ripple === false,
+      'p-sidebar-full': instance.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'
+};
+var SidebarStyle = BaseStyle.extend({
+  name: 'sidebar',
+  css: css,
+  classes: classes,
+  inlineStyles: inlineStyles
+});
+
+export { SidebarStyle as default };

package/sidebar/style/sidebarstyle.esm.min.js

@@ -0,0 +1 @@
+import e from"primevue/base/style";var n=e.extend({name:"sidebar",css:"\n@layer primevue {\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}\n",classes:{mask:function(e){var n=e.instance,r=e.props,i=["left","right","top","bottom"].find((function(e){return e===r.position}));return["p-sidebar-mask",{"p-component-overlay p-component-overlay-enter":r.modal,"p-sidebar-mask-scrollblocker":r.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"}}}});export{n as default};

package/sidebar/style/sidebarstyle.js

@@ -0,0 +1,64 @@
+this.primevue = this.primevue || {};
+this.primevue.sidebar = this.primevue.sidebar || {};
+this.primevue.sidebar.style = (function (BaseStyle) {
+    'use strict';
+
+    function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+    var BaseStyle__default = /*#__PURE__*/_interopDefaultLegacy(BaseStyle);
+
+    var css = "\n@layer primevue {\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}\n";
+    var inlineStyles = {
+      mask: function mask(_ref) {
+        var position = _ref.position;
+        return {
+          position: 'fixed',
+          height: '100%',
+          width: '100%',
+          left: 0,
+          top: 0,
+          display: 'flex',
+          justifyContent: position === 'left' ? 'flex-start' : position === 'right' ? 'flex-end' : 'center',
+          alignItems: position === 'top' ? 'flex-start' : position === 'bottom' ? 'flex-end' : 'center'
+        };
+      }
+    };
+    var classes = {
+      mask: function mask(_ref2) {
+        var instance = _ref2.instance,
+          props = _ref2.props;
+        var positions = ['left', 'right', 'top', 'bottom'];
+        var pos = positions.find(function (item) {
+          return item === props.position;
+        });
+        return ['p-sidebar-mask', {
+          'p-component-overlay p-component-overlay-enter': props.modal,
+          'p-sidebar-mask-scrollblocker': props.blockScroll,
+          'p-sidebar-visible': instance.containerVisible,
+          'p-sidebar-full': instance.fullScreen
+        }, pos ? "p-sidebar-".concat(pos) : ''];
+      },
+      root: function root(_ref3) {
+        var instance = _ref3.instance;
+        return ['p-sidebar p-component', {
+          'p-input-filled': instance.$primevue.config.inputStyle === 'filled',
+          'p-ripple-disabled': instance.$primevue.config.ripple === false,
+          'p-sidebar-full': instance.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'
+    };
+    var SidebarStyle = BaseStyle__default["default"].extend({
+      name: 'sidebar',
+      css: css,
+      classes: classes,
+      inlineStyles: inlineStyles
+    });
+
+    return SidebarStyle;
+
+})(primevue.base.style);

package/sidebar/style/sidebarstyle.min.js

@@ -0,0 +1 @@
+this.primevue=this.primevue||{},this.primevue.sidebar=this.primevue.sidebar||{},this.primevue.sidebar.style=function(e){"use strict";function n(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}return n(primevue.base.style).default.extend({name:"sidebar",css:"\n@layer primevue {\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}\n",classes:{mask:function(e){var n=e.instance,i=e.props,r=["left","right","top","bottom"].find((function(e){return e===i.position}));return["p-sidebar-mask",{"p-component-overlay p-component-overlay-enter":i.modal,"p-sidebar-mask-scrollblocker":i.blockScroll,"p-sidebar-visible":n.containerVisible,"p-sidebar-full":n.fullScreen},r?"p-sidebar-".concat(r):""]},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"}}}})}();

package/skeleton/BaseSkeleton.vue

@@ -1,59 +1,6 @@
 <script>
 import BaseComponent from 'primevue/basecomponent';
-import { useStyle } from 'primevue/usestyle';
-
-const styles = `
-@layer primevue {
-    .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 });
+import SkeletonStyle from 'primevue/skeleton/style';
 
 export default {
     name: 'BaseSkeleton',
@@ -84,11 +31,7 @@ export default {
             default: 'wave'
         }
     },
-    css: {
-        classes,
-        inlineStyles,
-        loadStyle
-    },
+    style: SkeletonStyle,
     provide() {
         return {
             $parentInstance: this

package/skeleton/package.json

@@ -1,9 +1,9 @@
 {
-  "main": "./skeleton.cjs.js",
-  "module": "./skeleton.esm.js",
-  "unpkg": "./skeleton.min.js",
-  "types": "./Skeleton.d.ts",
-  "browser": {
-    "./sfc": "./Skeleton.vue"
-  }
-}
+    "main": "./skeleton.cjs.js",
+    "module": "./skeleton.esm.js",
+    "unpkg": "./skeleton.min.js",
+    "types": "./Skeleton.d.ts",
+    "browser": {
+        "./sfc": "./Skeleton.vue"
+    }
+}

package/skeleton/skeleton.cjs.js

@@ -1,33 +1,14 @@
 'use strict';
 
 var BaseComponent = require('primevue/basecomponent');
-var usestyle = require('primevue/usestyle');
+var SkeletonStyle = require('primevue/skeleton/style');
 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 SkeletonStyle__default = /*#__PURE__*/_interopDefaultLegacy(SkeletonStyle);
 
-var styles = "\n@layer primevue {\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}\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"],
@@ -57,11 +38,7 @@ var script$1 = {
       "default": 'wave'
     }
   },
-  css: {
-    classes: classes,
-    inlineStyles: inlineStyles,
-    loadStyle: loadStyle
-  },
+  style: SkeletonStyle__default["default"],
   provide: function provide() {
     return {
       $parentInstance: this

package/skeleton/skeleton.cjs.min.js

@@ -1 +1 @@
-"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@layer primevue {\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}\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;
+"use strict";var e=require("primevue/basecomponent"),t=require("primevue/skeleton/style"),r=require("vue");function i(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var n={name:"Skeleton",extends:{name:"BaseSkeleton",extends:i(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"}},style:i(t).default,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}}}};n.render=function(e,t,i,n,a,s){return r.openBlock(),r.createElementBlock("div",r.mergeProps({class:e.cx("root"),style:[e.sx("root"),s.containerStyle],"aria-hidden":"true"},e.ptm("root"),{"data-pc-name":"skeleton"}),null,16)},module.exports=n;

package/skeleton/skeleton.esm.js

@@ -1,27 +1,7 @@
 import BaseComponent from 'primevue/basecomponent';
-import { useStyle } from 'primevue/usestyle';
+import SkeletonStyle from 'primevue/skeleton/style';
 import { openBlock, createElementBlock, mergeProps } from 'vue';
 
-var styles = "\n@layer primevue {\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}\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,
@@ -51,11 +31,7 @@ var script$1 = {
       "default": 'wave'
     }
   },
-  css: {
-    classes: classes,
-    inlineStyles: inlineStyles,
-    loadStyle: loadStyle
-  },
+  style: SkeletonStyle,
   provide: function provide() {
     return {
       $parentInstance: this