primevue 3.12.4 → 3.13.0

package/sidebar/sidebar.cjs.js

@@ -2,11 +2,13 @@
 
 var utils = require('primevue/utils');
 var Ripple = require('primevue/ripple');
+var Portal = require('primevue/portal');
 var vue = require('vue');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
 var Ripple__default = /*#__PURE__*/_interopDefaultLegacy(Ripple);
+var Portal__default = /*#__PURE__*/_interopDefaultLegacy(Portal);
 
 var script = {
     name: 'Sidebar',
@@ -149,58 +151,77 @@ var script = {
         }
     },
     directives: {
-        'ripple': Ripple__default['default']
+        'ripple': Ripple__default["default"]
+    },
+    components: {
+        'Portal': Portal__default["default"]
     }
 };
 
-const _hoisted_1 = { class: "p-sidebar-header" };
-const _hoisted_2 = /*#__PURE__*/vue.createVNode("span", { class: "p-sidebar-close-icon pi pi-times" }, null, -1);
-const _hoisted_3 = { class: "p-sidebar-content" };
+const _hoisted_1 = ["aria-modal"];
+const _hoisted_2 = { class: "p-sidebar-header" };
+const _hoisted_3 = {
+  key: 0,
+  class: "p-sidebar-header-content"
+};
+const _hoisted_4 = ["aria-label"];
+const _hoisted_5 = /*#__PURE__*/vue.createElementVNode("span", { class: "p-sidebar-close-icon pi pi-times" }, null, -1);
+const _hoisted_6 = [
+  _hoisted_5
+];
+const _hoisted_7 = { class: "p-sidebar-content" };
 
 function render(_ctx, _cache, $props, $setup, $data, $options) {
+  const _component_Portal = vue.resolveComponent("Portal");
   const _directive_ripple = vue.resolveDirective("ripple");
 
-  return (vue.openBlock(), vue.createBlock(vue.Teleport, { to: "body" }, [
-    vue.createVNode(vue.Transition, {
-      name: "p-sidebar",
-      onEnter: $options.onEnter,
-      onLeave: $options.onLeave,
-      onAfterLeave: $options.onAfterLeave,
-      appear: ""
-    }, {
-      default: vue.withCtx(() => [
-        ($props.visible)
-          ? (vue.openBlock(), vue.createBlock("div", vue.mergeProps({
-              key: 0,
-              class: $options.containerClass,
-              ref: $options.containerRef,
-              role: "complementary",
-              "aria-modal": $props.modal
-            }, _ctx.$attrs), [
-              vue.createVNode("div", _hoisted_1, [
-                ($props.showCloseIcon)
-                  ? vue.withDirectives((vue.openBlock(), vue.createBlock("button", {
-                      key: 0,
-                      class: "p-sidebar-close p-sidebar-icon p-link",
-                      onClick: _cache[1] || (_cache[1] = (...args) => ($options.hide && $options.hide(...args))),
-                      "aria-label": $props.ariaCloseLabel,
-                      type: "button"
-                    }, [
-                      _hoisted_2
-                    ], 8, ["aria-label"])), [
-                      [_directive_ripple]
-                    ])
-                  : vue.createCommentVNode("", true)
-              ]),
-              vue.createVNode("div", _hoisted_3, [
-                vue.renderSlot(_ctx.$slots, "default")
-              ])
-            ], 16, ["aria-modal"]))
-          : vue.createCommentVNode("", true)
-      ]),
-      _: 3
-    }, 8, ["onEnter", "onLeave", "onAfterLeave"])
-  ]))
+  return (vue.openBlock(), vue.createBlock(_component_Portal, null, {
+    default: vue.withCtx(() => [
+      vue.createVNode(vue.Transition, {
+        name: "p-sidebar",
+        onEnter: $options.onEnter,
+        onLeave: $options.onLeave,
+        onAfterLeave: $options.onAfterLeave,
+        appear: ""
+      }, {
+        default: vue.withCtx(() => [
+          ($props.visible)
+            ? (vue.openBlock(), vue.createElementBlock("div", vue.mergeProps({
+                key: 0,
+                class: $options.containerClass,
+                ref: $options.containerRef,
+                role: "complementary",
+                "aria-modal": $props.modal
+              }, _ctx.$attrs), [
+                vue.createElementVNode("div", _hoisted_2, [
+                  (_ctx.$slots.header)
+                    ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_3, [
+                        vue.renderSlot(_ctx.$slots, "header")
+                      ]))
+                    : vue.createCommentVNode("", true),
+                  ($props.showCloseIcon)
+                    ? vue.withDirectives((vue.openBlock(), vue.createElementBlock("button", {
+                        key: 1,
+                        class: "p-sidebar-close p-sidebar-icon p-link",
+                        onClick: _cache[0] || (_cache[0] = (...args) => ($options.hide && $options.hide(...args))),
+                        "aria-label": $props.ariaCloseLabel,
+                        type: "button"
+                      }, _hoisted_6, 8, _hoisted_4)), [
+                        [_directive_ripple]
+                      ])
+                    : vue.createCommentVNode("", true)
+                ]),
+                vue.createElementVNode("div", _hoisted_7, [
+                  vue.renderSlot(_ctx.$slots, "default")
+                ])
+              ], 16, _hoisted_1))
+            : vue.createCommentVNode("", true)
+        ]),
+        _: 3
+      }, 8, ["onEnter", "onLeave", "onAfterLeave"])
+    ]),
+    _: 3
+  }))
 }
 
 function styleInject(css, ref) {

package/sidebar/sidebar.cjs.min.js

@@ -1 +1 @@
-"use strict";var e=require("primevue/utils"),t=require("primevue/ripple"),n=require("vue");function i(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var s={name:"Sidebar",emits:["update:visible","show","hide"],inheritAttrs:!1,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},modal:{type:Boolean,default:!0},ariaCloseLabel:{type:String,default:"close"}},mask:null,maskClickListener:null,container:null,beforeUnmount(){this.destroyModal(),this.container&&this.autoZIndex&&e.ZIndexUtils.clear(this.container),this.container=null},methods:{hide(){this.$emit("update:visible",!1)},onEnter(t){this.$emit("show"),this.autoZIndex&&e.ZIndexUtils.set("modal",t,this.baseZIndex||this.$primevue.config.zIndex.modal),this.focus(),this.modal&&!this.fullScreen&&this.enableModality()},onLeave(){this.$emit("hide"),this.modal&&!this.fullScreen&&this.disableModality()},onAfterLeave(t){this.autoZIndex&&e.ZIndexUtils.clear(t)},focus(){let t=e.DomHandler.findSingle(this.container,"input,button");t&&t.focus()},enableModality(){this.mask||(this.mask=document.createElement("div"),this.mask.setAttribute("class","p-sidebar-mask p-component-overlay p-component-overlay-enter"),this.mask.style.zIndex=String(parseInt(this.container.style.zIndex,10)-1),this.dismissable&&this.bindMaskClickListener(),document.body.appendChild(this.mask),e.DomHandler.addClass(document.body,"p-overflow-hidden"))},disableModality(){this.mask&&(e.DomHandler.addClass(this.mask,"p-component-overlay-leave"),this.mask.addEventListener("animationend",(()=>{this.destroyModal()})))},bindMaskClickListener(){this.maskClickListener||(this.maskClickListener=()=>{this.hide()},this.mask.addEventListener("click",this.maskClickListener))},unbindMaskClickListener(){this.maskClickListener&&(this.mask.removeEventListener("click",this.maskClickListener),this.maskClickListener=null)},destroyModal(){this.mask&&(this.unbindMaskClickListener(),document.body.removeChild(this.mask),e.DomHandler.removeClass(document.body,"p-overflow-hidden"),this.mask=null)},containerRef(e){this.container=e}},computed:{containerClass(){return["p-sidebar p-component p-sidebar-"+this.position,{"p-sidebar-active":this.visible,"p-input-filled":"filled"===this.$primevue.config.inputStyle,"p-ripple-disabled":!1===this.$primevue.config.ripple}]},fullScreen(){return"full"===this.position}},directives:{ripple:i(t).default}};const a={class:"p-sidebar-header"},r=n.createVNode("span",{class:"p-sidebar-close-icon pi pi-times"},null,-1),o={class:"p-sidebar-content"};!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 {\n    position: fixed;\n    -webkit-transition: -webkit-transform .3s;\n    transition: -webkit-transform .3s;\n    transition: transform .3s;\n    transition: transform .3s, -webkit-transform .3s;\n    display: -webkit-box;\n    display: -ms-flexbox;\n    display: flex;\n    -webkit-box-orient: vertical;\n    -webkit-box-direction: normal;\n        -ms-flex-direction: column;\n            flex-direction: column;\n}\n.p-sidebar-content {\n    position: relative;\n    overflow-y: auto;\n}\n.p-sidebar-header {\n    display: -webkit-box;\n    display: -ms-flexbox;\n    display: flex;\n    -webkit-box-align: center;\n        -ms-flex-align: center;\n            align-items: center;\n    -webkit-box-pack: end;\n        -ms-flex-pack: end;\n            justify-content: flex-end;\n}\n.p-sidebar-icon {\n    display: -webkit-box;\n    display: -ms-flexbox;\n    display: flex;\n    -webkit-box-align: center;\n        -ms-flex-align: center;\n            align-items: center;\n    -webkit-box-pack: center;\n        -ms-flex-pack: center;\n            justify-content: center;\n    position: relative;\n    overflow: hidden;\n}\n.p-sidebar-left {\n    top: 0;\n    left: 0;\n    width: 20rem;\n    height: 100%;\n}\n.p-sidebar-right {\n    top: 0;\n    right: 0;\n    width: 20rem;\n    height: 100%;\n}\n.p-sidebar-top {\n    top: 0;\n    left: 0;\n    width: 100%;\n    height: 10rem;\n}\n.p-sidebar-bottom {\n    bottom: 0;\n    left: 0;\n    width: 100%;\n    height: 10rem;\n}\n.p-sidebar-full {\n    width: 100%;\n    height: 100%;\n    top: 0;\n    left: 0;\n    -webkit-transition: none;\n    transition: none;\n}\n.p-sidebar-left.p-sidebar-enter-from,\n.p-sidebar-left.p-sidebar-leave-to {\n    -webkit-transform: translateX(-100%);\n            transform: translateX(-100%);\n}\n.p-sidebar-right.p-sidebar-enter-from,\n.p-sidebar-right.p-sidebar-leave-to {\n    -webkit-transform: translateX(100%);\n            transform: translateX(100%);\n}\n.p-sidebar-top.p-sidebar-enter-from,\n.p-sidebar-top.p-sidebar-leave-to {\n    -webkit-transform: translateY(-100%);\n            transform: translateY(-100%);\n}\n.p-sidebar-bottom.p-sidebar-enter-from,\n.p-sidebar-bottom.p-sidebar-leave-to {\n    -webkit-transform: translateY(100%);\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    -webkit-transition: opacity 400ms cubic-bezier(0.25, 0.8, 0.25, 1);\n    transition: opacity 400ms cubic-bezier(0.25, 0.8, 0.25, 1);\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@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"),s.render=function(e,t,i,s,d,l){const p=n.resolveDirective("ripple");return n.openBlock(),n.createBlock(n.Teleport,{to:"body"},[n.createVNode(n.Transition,{name:"p-sidebar",onEnter:l.onEnter,onLeave:l.onLeave,onAfterLeave:l.onAfterLeave,appear:""},{default:n.withCtx((()=>[i.visible?(n.openBlock(),n.createBlock("div",n.mergeProps({key:0,class:l.containerClass,ref:l.containerRef,role:"complementary","aria-modal":i.modal},e.$attrs),[n.createVNode("div",a,[i.showCloseIcon?n.withDirectives((n.openBlock(),n.createBlock("button",{key:0,class:"p-sidebar-close p-sidebar-icon p-link",onClick:t[1]||(t[1]=(...e)=>l.hide&&l.hide(...e)),"aria-label":i.ariaCloseLabel,type:"button"},[r],8,["aria-label"])),[[p]]):n.createCommentVNode("",!0)]),n.createVNode("div",o,[n.renderSlot(e.$slots,"default")])],16,["aria-modal"])):n.createCommentVNode("",!0)])),_:3},8,["onEnter","onLeave","onAfterLeave"])])},module.exports=s;
+"use strict";var e=require("primevue/utils"),t=require("primevue/ripple"),n=require("primevue/portal"),i=require("vue");function s(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var a=s(t),r=s(n),o={name:"Sidebar",emits:["update:visible","show","hide"],inheritAttrs:!1,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},modal:{type:Boolean,default:!0},ariaCloseLabel:{type:String,default:"close"}},mask:null,maskClickListener:null,container:null,beforeUnmount(){this.destroyModal(),this.container&&this.autoZIndex&&e.ZIndexUtils.clear(this.container),this.container=null},methods:{hide(){this.$emit("update:visible",!1)},onEnter(t){this.$emit("show"),this.autoZIndex&&e.ZIndexUtils.set("modal",t,this.baseZIndex||this.$primevue.config.zIndex.modal),this.focus(),this.modal&&!this.fullScreen&&this.enableModality()},onLeave(){this.$emit("hide"),this.modal&&!this.fullScreen&&this.disableModality()},onAfterLeave(t){this.autoZIndex&&e.ZIndexUtils.clear(t)},focus(){let t=e.DomHandler.findSingle(this.container,"input,button");t&&t.focus()},enableModality(){this.mask||(this.mask=document.createElement("div"),this.mask.setAttribute("class","p-sidebar-mask p-component-overlay p-component-overlay-enter"),this.mask.style.zIndex=String(parseInt(this.container.style.zIndex,10)-1),this.dismissable&&this.bindMaskClickListener(),document.body.appendChild(this.mask),e.DomHandler.addClass(document.body,"p-overflow-hidden"))},disableModality(){this.mask&&(e.DomHandler.addClass(this.mask,"p-component-overlay-leave"),this.mask.addEventListener("animationend",(()=>{this.destroyModal()})))},bindMaskClickListener(){this.maskClickListener||(this.maskClickListener=()=>{this.hide()},this.mask.addEventListener("click",this.maskClickListener))},unbindMaskClickListener(){this.maskClickListener&&(this.mask.removeEventListener("click",this.maskClickListener),this.maskClickListener=null)},destroyModal(){this.mask&&(this.unbindMaskClickListener(),document.body.removeChild(this.mask),e.DomHandler.removeClass(document.body,"p-overflow-hidden"),this.mask=null)},containerRef(e){this.container=e}},computed:{containerClass(){return["p-sidebar p-component p-sidebar-"+this.position,{"p-sidebar-active":this.visible,"p-input-filled":"filled"===this.$primevue.config.inputStyle,"p-ripple-disabled":!1===this.$primevue.config.ripple}]},fullScreen(){return"full"===this.position}},directives:{ripple:a.default},components:{Portal:r.default}};const l=["aria-modal"],d={class:"p-sidebar-header"},p={key:0,class:"p-sidebar-header-content"},m=["aria-label"],b=[i.createElementVNode("span",{class:"p-sidebar-close-icon pi pi-times"},null,-1)],c={class:"p-sidebar-content"};!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 {\n    position: fixed;\n    -webkit-transition: -webkit-transform .3s;\n    transition: -webkit-transform .3s;\n    transition: transform .3s;\n    transition: transform .3s, -webkit-transform .3s;\n    display: -webkit-box;\n    display: -ms-flexbox;\n    display: flex;\n    -webkit-box-orient: vertical;\n    -webkit-box-direction: normal;\n        -ms-flex-direction: column;\n            flex-direction: column;\n}\n.p-sidebar-content {\n    position: relative;\n    overflow-y: auto;\n}\n.p-sidebar-header {\n    display: -webkit-box;\n    display: -ms-flexbox;\n    display: flex;\n    -webkit-box-align: center;\n        -ms-flex-align: center;\n            align-items: center;\n    -webkit-box-pack: end;\n        -ms-flex-pack: end;\n            justify-content: flex-end;\n}\n.p-sidebar-icon {\n    display: -webkit-box;\n    display: -ms-flexbox;\n    display: flex;\n    -webkit-box-align: center;\n        -ms-flex-align: center;\n            align-items: center;\n    -webkit-box-pack: center;\n        -ms-flex-pack: center;\n            justify-content: center;\n    position: relative;\n    overflow: hidden;\n}\n.p-sidebar-left {\n    top: 0;\n    left: 0;\n    width: 20rem;\n    height: 100%;\n}\n.p-sidebar-right {\n    top: 0;\n    right: 0;\n    width: 20rem;\n    height: 100%;\n}\n.p-sidebar-top {\n    top: 0;\n    left: 0;\n    width: 100%;\n    height: 10rem;\n}\n.p-sidebar-bottom {\n    bottom: 0;\n    left: 0;\n    width: 100%;\n    height: 10rem;\n}\n.p-sidebar-full {\n    width: 100%;\n    height: 100%;\n    top: 0;\n    left: 0;\n    -webkit-transition: none;\n    transition: none;\n}\n.p-sidebar-left.p-sidebar-enter-from,\n.p-sidebar-left.p-sidebar-leave-to {\n    -webkit-transform: translateX(-100%);\n            transform: translateX(-100%);\n}\n.p-sidebar-right.p-sidebar-enter-from,\n.p-sidebar-right.p-sidebar-leave-to {\n    -webkit-transform: translateX(100%);\n            transform: translateX(100%);\n}\n.p-sidebar-top.p-sidebar-enter-from,\n.p-sidebar-top.p-sidebar-leave-to {\n    -webkit-transform: translateY(-100%);\n            transform: translateY(-100%);\n}\n.p-sidebar-bottom.p-sidebar-enter-from,\n.p-sidebar-bottom.p-sidebar-leave-to {\n    -webkit-transform: translateY(100%);\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    -webkit-transition: opacity 400ms cubic-bezier(0.25, 0.8, 0.25, 1);\n    transition: opacity 400ms cubic-bezier(0.25, 0.8, 0.25, 1);\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@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"),o.render=function(e,t,n,s,a,r){const o=i.resolveComponent("Portal"),h=i.resolveDirective("ripple");return i.openBlock(),i.createBlock(o,null,{default:i.withCtx((()=>[i.createVNode(i.Transition,{name:"p-sidebar",onEnter:r.onEnter,onLeave:r.onLeave,onAfterLeave:r.onAfterLeave,appear:""},{default:i.withCtx((()=>[n.visible?(i.openBlock(),i.createElementBlock("div",i.mergeProps({key:0,class:r.containerClass,ref:r.containerRef,role:"complementary","aria-modal":n.modal},e.$attrs),[i.createElementVNode("div",d,[e.$slots.header?(i.openBlock(),i.createElementBlock("div",p,[i.renderSlot(e.$slots,"header")])):i.createCommentVNode("",!0),n.showCloseIcon?i.withDirectives((i.openBlock(),i.createElementBlock("button",{key:1,class:"p-sidebar-close p-sidebar-icon p-link",onClick:t[0]||(t[0]=(...e)=>r.hide&&r.hide(...e)),"aria-label":n.ariaCloseLabel,type:"button"},b,8,m)),[[h]]):i.createCommentVNode("",!0)]),i.createElementVNode("div",c,[i.renderSlot(e.$slots,"default")])],16,l)):i.createCommentVNode("",!0)])),_:3},8,["onEnter","onLeave","onAfterLeave"])])),_:3})},module.exports=o;

package/sidebar/sidebar.esm.js

@@ -1,6 +1,7 @@
 import { ZIndexUtils, DomHandler } from 'primevue/utils';
 import Ripple from 'primevue/ripple';
-import { resolveDirective, openBlock, createBlock, Teleport, createVNode, Transition, withCtx, mergeProps, withDirectives, createCommentVNode, renderSlot } from 'vue';
+import Portal from 'primevue/portal';
+import { resolveComponent, resolveDirective, openBlock, createBlock, withCtx, createVNode, Transition, createElementBlock, mergeProps, createElementVNode, renderSlot, createCommentVNode, withDirectives } from 'vue';
 
 var script = {
     name: 'Sidebar',
@@ -144,57 +145,76 @@ var script = {
     },
     directives: {
         'ripple': Ripple
+    },
+    components: {
+        'Portal': Portal
     }
 };
 
-const _hoisted_1 = { class: "p-sidebar-header" };
-const _hoisted_2 = /*#__PURE__*/createVNode("span", { class: "p-sidebar-close-icon pi pi-times" }, null, -1);
-const _hoisted_3 = { class: "p-sidebar-content" };
+const _hoisted_1 = ["aria-modal"];
+const _hoisted_2 = { class: "p-sidebar-header" };
+const _hoisted_3 = {
+  key: 0,
+  class: "p-sidebar-header-content"
+};
+const _hoisted_4 = ["aria-label"];
+const _hoisted_5 = /*#__PURE__*/createElementVNode("span", { class: "p-sidebar-close-icon pi pi-times" }, null, -1);
+const _hoisted_6 = [
+  _hoisted_5
+];
+const _hoisted_7 = { class: "p-sidebar-content" };
 
 function render(_ctx, _cache, $props, $setup, $data, $options) {
+  const _component_Portal = resolveComponent("Portal");
   const _directive_ripple = resolveDirective("ripple");
 
-  return (openBlock(), createBlock(Teleport, { to: "body" }, [
-    createVNode(Transition, {
-      name: "p-sidebar",
-      onEnter: $options.onEnter,
-      onLeave: $options.onLeave,
-      onAfterLeave: $options.onAfterLeave,
-      appear: ""
-    }, {
-      default: withCtx(() => [
-        ($props.visible)
-          ? (openBlock(), createBlock("div", mergeProps({
-              key: 0,
-              class: $options.containerClass,
-              ref: $options.containerRef,
-              role: "complementary",
-              "aria-modal": $props.modal
-            }, _ctx.$attrs), [
-              createVNode("div", _hoisted_1, [
-                ($props.showCloseIcon)
-                  ? withDirectives((openBlock(), createBlock("button", {
-                      key: 0,
-                      class: "p-sidebar-close p-sidebar-icon p-link",
-                      onClick: _cache[1] || (_cache[1] = (...args) => ($options.hide && $options.hide(...args))),
-                      "aria-label": $props.ariaCloseLabel,
-                      type: "button"
-                    }, [
-                      _hoisted_2
-                    ], 8, ["aria-label"])), [
-                      [_directive_ripple]
-                    ])
-                  : createCommentVNode("", true)
-              ]),
-              createVNode("div", _hoisted_3, [
-                renderSlot(_ctx.$slots, "default")
-              ])
-            ], 16, ["aria-modal"]))
-          : createCommentVNode("", true)
-      ]),
-      _: 3
-    }, 8, ["onEnter", "onLeave", "onAfterLeave"])
-  ]))
+  return (openBlock(), createBlock(_component_Portal, null, {
+    default: withCtx(() => [
+      createVNode(Transition, {
+        name: "p-sidebar",
+        onEnter: $options.onEnter,
+        onLeave: $options.onLeave,
+        onAfterLeave: $options.onAfterLeave,
+        appear: ""
+      }, {
+        default: withCtx(() => [
+          ($props.visible)
+            ? (openBlock(), createElementBlock("div", mergeProps({
+                key: 0,
+                class: $options.containerClass,
+                ref: $options.containerRef,
+                role: "complementary",
+                "aria-modal": $props.modal
+              }, _ctx.$attrs), [
+                createElementVNode("div", _hoisted_2, [
+                  (_ctx.$slots.header)
+                    ? (openBlock(), createElementBlock("div", _hoisted_3, [
+                        renderSlot(_ctx.$slots, "header")
+                      ]))
+                    : createCommentVNode("", true),
+                  ($props.showCloseIcon)
+                    ? withDirectives((openBlock(), createElementBlock("button", {
+                        key: 1,
+                        class: "p-sidebar-close p-sidebar-icon p-link",
+                        onClick: _cache[0] || (_cache[0] = (...args) => ($options.hide && $options.hide(...args))),
+                        "aria-label": $props.ariaCloseLabel,
+                        type: "button"
+                      }, _hoisted_6, 8, _hoisted_4)), [
+                        [_directive_ripple]
+                      ])
+                    : createCommentVNode("", true)
+                ]),
+                createElementVNode("div", _hoisted_7, [
+                  renderSlot(_ctx.$slots, "default")
+                ])
+              ], 16, _hoisted_1))
+            : createCommentVNode("", true)
+        ]),
+        _: 3
+      }, 8, ["onEnter", "onLeave", "onAfterLeave"])
+    ]),
+    _: 3
+  }))
 }
 
 function styleInject(css, ref) {
@@ -229,4 +249,4 @@ styleInject(css_248z);
 
 script.render = render;
 
-export default script;
+export { script as default };

package/sidebar/sidebar.esm.min.js

@@ -1 +1 @@
-import{ZIndexUtils as e,DomHandler as t}from"primevue/utils";import i from"primevue/ripple";import{resolveDirective as n,openBlock as s,createBlock as a,Teleport as r,createVNode as o,Transition as d,withCtx as l,mergeProps as p,withDirectives as b,createCommentVNode as m,renderSlot as h}from"vue";var c={name:"Sidebar",emits:["update:visible","show","hide"],inheritAttrs:!1,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},modal:{type:Boolean,default:!0},ariaCloseLabel:{type:String,default:"close"}},mask:null,maskClickListener:null,container:null,beforeUnmount(){this.destroyModal(),this.container&&this.autoZIndex&&e.clear(this.container),this.container=null},methods:{hide(){this.$emit("update:visible",!1)},onEnter(t){this.$emit("show"),this.autoZIndex&&e.set("modal",t,this.baseZIndex||this.$primevue.config.zIndex.modal),this.focus(),this.modal&&!this.fullScreen&&this.enableModality()},onLeave(){this.$emit("hide"),this.modal&&!this.fullScreen&&this.disableModality()},onAfterLeave(t){this.autoZIndex&&e.clear(t)},focus(){let e=t.findSingle(this.container,"input,button");e&&e.focus()},enableModality(){this.mask||(this.mask=document.createElement("div"),this.mask.setAttribute("class","p-sidebar-mask p-component-overlay p-component-overlay-enter"),this.mask.style.zIndex=String(parseInt(this.container.style.zIndex,10)-1),this.dismissable&&this.bindMaskClickListener(),document.body.appendChild(this.mask),t.addClass(document.body,"p-overflow-hidden"))},disableModality(){this.mask&&(t.addClass(this.mask,"p-component-overlay-leave"),this.mask.addEventListener("animationend",(()=>{this.destroyModal()})))},bindMaskClickListener(){this.maskClickListener||(this.maskClickListener=()=>{this.hide()},this.mask.addEventListener("click",this.maskClickListener))},unbindMaskClickListener(){this.maskClickListener&&(this.mask.removeEventListener("click",this.maskClickListener),this.maskClickListener=null)},destroyModal(){this.mask&&(this.unbindMaskClickListener(),document.body.removeChild(this.mask),t.removeClass(document.body,"p-overflow-hidden"),this.mask=null)},containerRef(e){this.container=e}},computed:{containerClass(){return["p-sidebar p-component p-sidebar-"+this.position,{"p-sidebar-active":this.visible,"p-input-filled":"filled"===this.$primevue.config.inputStyle,"p-ripple-disabled":!1===this.$primevue.config.ripple}]},fullScreen(){return"full"===this.position}},directives:{ripple:i}};const f={class:"p-sidebar-header"},u=o("span",{class:"p-sidebar-close-icon pi pi-times"},null,-1),k={class:"p-sidebar-content"};!function(e,t){void 0===t&&(t={});var i=t.insertAt;if(e&&"undefined"!=typeof document){var n=document.head||document.getElementsByTagName("head")[0],s=document.createElement("style");s.type="text/css","top"===i&&n.firstChild?n.insertBefore(s,n.firstChild):n.appendChild(s),s.styleSheet?s.styleSheet.cssText=e:s.appendChild(document.createTextNode(e))}}("\n.p-sidebar {\n    position: fixed;\n    -webkit-transition: -webkit-transform .3s;\n    transition: -webkit-transform .3s;\n    transition: transform .3s;\n    transition: transform .3s, -webkit-transform .3s;\n    display: -webkit-box;\n    display: -ms-flexbox;\n    display: flex;\n    -webkit-box-orient: vertical;\n    -webkit-box-direction: normal;\n        -ms-flex-direction: column;\n            flex-direction: column;\n}\n.p-sidebar-content {\n    position: relative;\n    overflow-y: auto;\n}\n.p-sidebar-header {\n    display: -webkit-box;\n    display: -ms-flexbox;\n    display: flex;\n    -webkit-box-align: center;\n        -ms-flex-align: center;\n            align-items: center;\n    -webkit-box-pack: end;\n        -ms-flex-pack: end;\n            justify-content: flex-end;\n}\n.p-sidebar-icon {\n    display: -webkit-box;\n    display: -ms-flexbox;\n    display: flex;\n    -webkit-box-align: center;\n        -ms-flex-align: center;\n            align-items: center;\n    -webkit-box-pack: center;\n        -ms-flex-pack: center;\n            justify-content: center;\n    position: relative;\n    overflow: hidden;\n}\n.p-sidebar-left {\n    top: 0;\n    left: 0;\n    width: 20rem;\n    height: 100%;\n}\n.p-sidebar-right {\n    top: 0;\n    right: 0;\n    width: 20rem;\n    height: 100%;\n}\n.p-sidebar-top {\n    top: 0;\n    left: 0;\n    width: 100%;\n    height: 10rem;\n}\n.p-sidebar-bottom {\n    bottom: 0;\n    left: 0;\n    width: 100%;\n    height: 10rem;\n}\n.p-sidebar-full {\n    width: 100%;\n    height: 100%;\n    top: 0;\n    left: 0;\n    -webkit-transition: none;\n    transition: none;\n}\n.p-sidebar-left.p-sidebar-enter-from,\n.p-sidebar-left.p-sidebar-leave-to {\n    -webkit-transform: translateX(-100%);\n            transform: translateX(-100%);\n}\n.p-sidebar-right.p-sidebar-enter-from,\n.p-sidebar-right.p-sidebar-leave-to {\n    -webkit-transform: translateX(100%);\n            transform: translateX(100%);\n}\n.p-sidebar-top.p-sidebar-enter-from,\n.p-sidebar-top.p-sidebar-leave-to {\n    -webkit-transform: translateY(-100%);\n            transform: translateY(-100%);\n}\n.p-sidebar-bottom.p-sidebar-enter-from,\n.p-sidebar-bottom.p-sidebar-leave-to {\n    -webkit-transform: translateY(100%);\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    -webkit-transition: opacity 400ms cubic-bezier(0.25, 0.8, 0.25, 1);\n    transition: opacity 400ms cubic-bezier(0.25, 0.8, 0.25, 1);\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@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"),c.render=function(e,t,i,c,v,y){const x=n("ripple");return s(),a(r,{to:"body"},[o(d,{name:"p-sidebar",onEnter:y.onEnter,onLeave:y.onLeave,onAfterLeave:y.onAfterLeave,appear:""},{default:l((()=>[i.visible?(s(),a("div",p({key:0,class:y.containerClass,ref:y.containerRef,role:"complementary","aria-modal":i.modal},e.$attrs),[o("div",f,[i.showCloseIcon?b((s(),a("button",{key:0,class:"p-sidebar-close p-sidebar-icon p-link",onClick:t[1]||(t[1]=(...e)=>y.hide&&y.hide(...e)),"aria-label":i.ariaCloseLabel,type:"button"},[u],8,["aria-label"])),[[x]]):m("",!0)]),o("div",k,[h(e.$slots,"default")])],16,["aria-modal"])):m("",!0)])),_:3},8,["onEnter","onLeave","onAfterLeave"])])};export default c;
+import{ZIndexUtils as e,DomHandler as t}from"primevue/utils";import n from"primevue/ripple";import i from"primevue/portal";import{resolveComponent as s,resolveDirective as a,openBlock as r,createBlock as o,withCtx as l,createVNode as d,Transition as p,createElementBlock as b,mergeProps as m,createElementVNode as h,renderSlot as c,createCommentVNode as f,withDirectives as u}from"vue";var k={name:"Sidebar",emits:["update:visible","show","hide"],inheritAttrs:!1,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},modal:{type:Boolean,default:!0},ariaCloseLabel:{type:String,default:"close"}},mask:null,maskClickListener:null,container:null,beforeUnmount(){this.destroyModal(),this.container&&this.autoZIndex&&e.clear(this.container),this.container=null},methods:{hide(){this.$emit("update:visible",!1)},onEnter(t){this.$emit("show"),this.autoZIndex&&e.set("modal",t,this.baseZIndex||this.$primevue.config.zIndex.modal),this.focus(),this.modal&&!this.fullScreen&&this.enableModality()},onLeave(){this.$emit("hide"),this.modal&&!this.fullScreen&&this.disableModality()},onAfterLeave(t){this.autoZIndex&&e.clear(t)},focus(){let e=t.findSingle(this.container,"input,button");e&&e.focus()},enableModality(){this.mask||(this.mask=document.createElement("div"),this.mask.setAttribute("class","p-sidebar-mask p-component-overlay p-component-overlay-enter"),this.mask.style.zIndex=String(parseInt(this.container.style.zIndex,10)-1),this.dismissable&&this.bindMaskClickListener(),document.body.appendChild(this.mask),t.addClass(document.body,"p-overflow-hidden"))},disableModality(){this.mask&&(t.addClass(this.mask,"p-component-overlay-leave"),this.mask.addEventListener("animationend",(()=>{this.destroyModal()})))},bindMaskClickListener(){this.maskClickListener||(this.maskClickListener=()=>{this.hide()},this.mask.addEventListener("click",this.maskClickListener))},unbindMaskClickListener(){this.maskClickListener&&(this.mask.removeEventListener("click",this.maskClickListener),this.maskClickListener=null)},destroyModal(){this.mask&&(this.unbindMaskClickListener(),document.body.removeChild(this.mask),t.removeClass(document.body,"p-overflow-hidden"),this.mask=null)},containerRef(e){this.container=e}},computed:{containerClass(){return["p-sidebar p-component p-sidebar-"+this.position,{"p-sidebar-active":this.visible,"p-input-filled":"filled"===this.$primevue.config.inputStyle,"p-ripple-disabled":!1===this.$primevue.config.ripple}]},fullScreen(){return"full"===this.position}},directives:{ripple:n},components:{Portal:i}};const v=["aria-modal"],y={class:"p-sidebar-header"},x={key:0,class:"p-sidebar-header-content"},g=["aria-label"],w=[h("span",{class:"p-sidebar-close-icon pi pi-times"},null,-1)],C={class:"p-sidebar-content"};!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 {\n    position: fixed;\n    -webkit-transition: -webkit-transform .3s;\n    transition: -webkit-transform .3s;\n    transition: transform .3s;\n    transition: transform .3s, -webkit-transform .3s;\n    display: -webkit-box;\n    display: -ms-flexbox;\n    display: flex;\n    -webkit-box-orient: vertical;\n    -webkit-box-direction: normal;\n        -ms-flex-direction: column;\n            flex-direction: column;\n}\n.p-sidebar-content {\n    position: relative;\n    overflow-y: auto;\n}\n.p-sidebar-header {\n    display: -webkit-box;\n    display: -ms-flexbox;\n    display: flex;\n    -webkit-box-align: center;\n        -ms-flex-align: center;\n            align-items: center;\n    -webkit-box-pack: end;\n        -ms-flex-pack: end;\n            justify-content: flex-end;\n}\n.p-sidebar-icon {\n    display: -webkit-box;\n    display: -ms-flexbox;\n    display: flex;\n    -webkit-box-align: center;\n        -ms-flex-align: center;\n            align-items: center;\n    -webkit-box-pack: center;\n        -ms-flex-pack: center;\n            justify-content: center;\n    position: relative;\n    overflow: hidden;\n}\n.p-sidebar-left {\n    top: 0;\n    left: 0;\n    width: 20rem;\n    height: 100%;\n}\n.p-sidebar-right {\n    top: 0;\n    right: 0;\n    width: 20rem;\n    height: 100%;\n}\n.p-sidebar-top {\n    top: 0;\n    left: 0;\n    width: 100%;\n    height: 10rem;\n}\n.p-sidebar-bottom {\n    bottom: 0;\n    left: 0;\n    width: 100%;\n    height: 10rem;\n}\n.p-sidebar-full {\n    width: 100%;\n    height: 100%;\n    top: 0;\n    left: 0;\n    -webkit-transition: none;\n    transition: none;\n}\n.p-sidebar-left.p-sidebar-enter-from,\n.p-sidebar-left.p-sidebar-leave-to {\n    -webkit-transform: translateX(-100%);\n            transform: translateX(-100%);\n}\n.p-sidebar-right.p-sidebar-enter-from,\n.p-sidebar-right.p-sidebar-leave-to {\n    -webkit-transform: translateX(100%);\n            transform: translateX(100%);\n}\n.p-sidebar-top.p-sidebar-enter-from,\n.p-sidebar-top.p-sidebar-leave-to {\n    -webkit-transform: translateY(-100%);\n            transform: translateY(-100%);\n}\n.p-sidebar-bottom.p-sidebar-enter-from,\n.p-sidebar-bottom.p-sidebar-leave-to {\n    -webkit-transform: translateY(100%);\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    -webkit-transition: opacity 400ms cubic-bezier(0.25, 0.8, 0.25, 1);\n    transition: opacity 400ms cubic-bezier(0.25, 0.8, 0.25, 1);\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@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"),k.render=function(e,t,n,i,k,L){const I=s("Portal"),M=a("ripple");return r(),o(I,null,{default:l((()=>[d(p,{name:"p-sidebar",onEnter:L.onEnter,onLeave:L.onLeave,onAfterLeave:L.onAfterLeave,appear:""},{default:l((()=>[n.visible?(r(),b("div",m({key:0,class:L.containerClass,ref:L.containerRef,role:"complementary","aria-modal":n.modal},e.$attrs),[h("div",y,[e.$slots.header?(r(),b("div",x,[c(e.$slots,"header")])):f("",!0),n.showCloseIcon?u((r(),b("button",{key:1,class:"p-sidebar-close p-sidebar-icon p-link",onClick:t[0]||(t[0]=(...e)=>L.hide&&L.hide(...e)),"aria-label":n.ariaCloseLabel,type:"button"},w,8,g)),[[M]]):f("",!0)]),h("div",C,[c(e.$slots,"default")])],16,v)):f("",!0)])),_:3},8,["onEnter","onLeave","onAfterLeave"])])),_:3})};export{k as default};

package/sidebar/sidebar.js

@@ -1,10 +1,11 @@
 this.primevue = this.primevue || {};
-this.primevue.sidebar = (function (utils, Ripple, vue) {
+this.primevue.sidebar = (function (utils, Ripple, Portal, vue) {
     'use strict';
 
     function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
     var Ripple__default = /*#__PURE__*/_interopDefaultLegacy(Ripple);
+    var Portal__default = /*#__PURE__*/_interopDefaultLegacy(Portal);
 
     var script = {
         name: 'Sidebar',
@@ -147,58 +148,77 @@ this.primevue.sidebar = (function (utils, Ripple, vue) {
             }
         },
         directives: {
-            'ripple': Ripple__default['default']
+            'ripple': Ripple__default["default"]
+        },
+        components: {
+            'Portal': Portal__default["default"]
         }
     };
 
-    const _hoisted_1 = { class: "p-sidebar-header" };
-    const _hoisted_2 = /*#__PURE__*/vue.createVNode("span", { class: "p-sidebar-close-icon pi pi-times" }, null, -1);
-    const _hoisted_3 = { class: "p-sidebar-content" };
+    const _hoisted_1 = ["aria-modal"];
+    const _hoisted_2 = { class: "p-sidebar-header" };
+    const _hoisted_3 = {
+      key: 0,
+      class: "p-sidebar-header-content"
+    };
+    const _hoisted_4 = ["aria-label"];
+    const _hoisted_5 = /*#__PURE__*/vue.createElementVNode("span", { class: "p-sidebar-close-icon pi pi-times" }, null, -1);
+    const _hoisted_6 = [
+      _hoisted_5
+    ];
+    const _hoisted_7 = { class: "p-sidebar-content" };
 
     function render(_ctx, _cache, $props, $setup, $data, $options) {
+      const _component_Portal = vue.resolveComponent("Portal");
       const _directive_ripple = vue.resolveDirective("ripple");
 
-      return (vue.openBlock(), vue.createBlock(vue.Teleport, { to: "body" }, [
-        vue.createVNode(vue.Transition, {
-          name: "p-sidebar",
-          onEnter: $options.onEnter,
-          onLeave: $options.onLeave,
-          onAfterLeave: $options.onAfterLeave,
-          appear: ""
-        }, {
-          default: vue.withCtx(() => [
-            ($props.visible)
-              ? (vue.openBlock(), vue.createBlock("div", vue.mergeProps({
-                  key: 0,
-                  class: $options.containerClass,
-                  ref: $options.containerRef,
-                  role: "complementary",
-                  "aria-modal": $props.modal
-                }, _ctx.$attrs), [
-                  vue.createVNode("div", _hoisted_1, [
-                    ($props.showCloseIcon)
-                      ? vue.withDirectives((vue.openBlock(), vue.createBlock("button", {
-                          key: 0,
-                          class: "p-sidebar-close p-sidebar-icon p-link",
-                          onClick: _cache[1] || (_cache[1] = (...args) => ($options.hide && $options.hide(...args))),
-                          "aria-label": $props.ariaCloseLabel,
-                          type: "button"
-                        }, [
-                          _hoisted_2
-                        ], 8, ["aria-label"])), [
-                          [_directive_ripple]
-                        ])
-                      : vue.createCommentVNode("", true)
-                  ]),
-                  vue.createVNode("div", _hoisted_3, [
-                    vue.renderSlot(_ctx.$slots, "default")
-                  ])
-                ], 16, ["aria-modal"]))
-              : vue.createCommentVNode("", true)
-          ]),
-          _: 3
-        }, 8, ["onEnter", "onLeave", "onAfterLeave"])
-      ]))
+      return (vue.openBlock(), vue.createBlock(_component_Portal, null, {
+        default: vue.withCtx(() => [
+          vue.createVNode(vue.Transition, {
+            name: "p-sidebar",
+            onEnter: $options.onEnter,
+            onLeave: $options.onLeave,
+            onAfterLeave: $options.onAfterLeave,
+            appear: ""
+          }, {
+            default: vue.withCtx(() => [
+              ($props.visible)
+                ? (vue.openBlock(), vue.createElementBlock("div", vue.mergeProps({
+                    key: 0,
+                    class: $options.containerClass,
+                    ref: $options.containerRef,
+                    role: "complementary",
+                    "aria-modal": $props.modal
+                  }, _ctx.$attrs), [
+                    vue.createElementVNode("div", _hoisted_2, [
+                      (_ctx.$slots.header)
+                        ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_3, [
+                            vue.renderSlot(_ctx.$slots, "header")
+                          ]))
+                        : vue.createCommentVNode("", true),
+                      ($props.showCloseIcon)
+                        ? vue.withDirectives((vue.openBlock(), vue.createElementBlock("button", {
+                            key: 1,
+                            class: "p-sidebar-close p-sidebar-icon p-link",
+                            onClick: _cache[0] || (_cache[0] = (...args) => ($options.hide && $options.hide(...args))),
+                            "aria-label": $props.ariaCloseLabel,
+                            type: "button"
+                          }, _hoisted_6, 8, _hoisted_4)), [
+                            [_directive_ripple]
+                          ])
+                        : vue.createCommentVNode("", true)
+                    ]),
+                    vue.createElementVNode("div", _hoisted_7, [
+                      vue.renderSlot(_ctx.$slots, "default")
+                    ])
+                  ], 16, _hoisted_1))
+                : vue.createCommentVNode("", true)
+            ]),
+            _: 3
+          }, 8, ["onEnter", "onLeave", "onAfterLeave"])
+        ]),
+        _: 3
+      }))
     }
 
     function styleInject(css, ref) {
@@ -235,4 +255,4 @@ this.primevue.sidebar = (function (utils, Ripple, vue) {
 
     return script;
 
-}(primevue.utils, primevue.ripple, Vue));
+})(primevue.utils, primevue.ripple, primevue.portal, Vue);

package/sidebar/sidebar.min.js

@@ -1 +1 @@
-this.primevue=this.primevue||{},this.primevue.sidebar=function(e,t,n){"use strict";function i(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var s={name:"Sidebar",emits:["update:visible","show","hide"],inheritAttrs:!1,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},modal:{type:Boolean,default:!0},ariaCloseLabel:{type:String,default:"close"}},mask:null,maskClickListener:null,container:null,beforeUnmount(){this.destroyModal(),this.container&&this.autoZIndex&&e.ZIndexUtils.clear(this.container),this.container=null},methods:{hide(){this.$emit("update:visible",!1)},onEnter(t){this.$emit("show"),this.autoZIndex&&e.ZIndexUtils.set("modal",t,this.baseZIndex||this.$primevue.config.zIndex.modal),this.focus(),this.modal&&!this.fullScreen&&this.enableModality()},onLeave(){this.$emit("hide"),this.modal&&!this.fullScreen&&this.disableModality()},onAfterLeave(t){this.autoZIndex&&e.ZIndexUtils.clear(t)},focus(){let t=e.DomHandler.findSingle(this.container,"input,button");t&&t.focus()},enableModality(){this.mask||(this.mask=document.createElement("div"),this.mask.setAttribute("class","p-sidebar-mask p-component-overlay p-component-overlay-enter"),this.mask.style.zIndex=String(parseInt(this.container.style.zIndex,10)-1),this.dismissable&&this.bindMaskClickListener(),document.body.appendChild(this.mask),e.DomHandler.addClass(document.body,"p-overflow-hidden"))},disableModality(){this.mask&&(e.DomHandler.addClass(this.mask,"p-component-overlay-leave"),this.mask.addEventListener("animationend",(()=>{this.destroyModal()})))},bindMaskClickListener(){this.maskClickListener||(this.maskClickListener=()=>{this.hide()},this.mask.addEventListener("click",this.maskClickListener))},unbindMaskClickListener(){this.maskClickListener&&(this.mask.removeEventListener("click",this.maskClickListener),this.maskClickListener=null)},destroyModal(){this.mask&&(this.unbindMaskClickListener(),document.body.removeChild(this.mask),e.DomHandler.removeClass(document.body,"p-overflow-hidden"),this.mask=null)},containerRef(e){this.container=e}},computed:{containerClass(){return["p-sidebar p-component p-sidebar-"+this.position,{"p-sidebar-active":this.visible,"p-input-filled":"filled"===this.$primevue.config.inputStyle,"p-ripple-disabled":!1===this.$primevue.config.ripple}]},fullScreen(){return"full"===this.position}},directives:{ripple:i(t).default}};const a={class:"p-sidebar-header"},r=n.createVNode("span",{class:"p-sidebar-close-icon pi pi-times"},null,-1),o={class:"p-sidebar-content"};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 {\n    position: fixed;\n    -webkit-transition: -webkit-transform .3s;\n    transition: -webkit-transform .3s;\n    transition: transform .3s;\n    transition: transform .3s, -webkit-transform .3s;\n    display: -webkit-box;\n    display: -ms-flexbox;\n    display: flex;\n    -webkit-box-orient: vertical;\n    -webkit-box-direction: normal;\n        -ms-flex-direction: column;\n            flex-direction: column;\n}\n.p-sidebar-content {\n    position: relative;\n    overflow-y: auto;\n}\n.p-sidebar-header {\n    display: -webkit-box;\n    display: -ms-flexbox;\n    display: flex;\n    -webkit-box-align: center;\n        -ms-flex-align: center;\n            align-items: center;\n    -webkit-box-pack: end;\n        -ms-flex-pack: end;\n            justify-content: flex-end;\n}\n.p-sidebar-icon {\n    display: -webkit-box;\n    display: -ms-flexbox;\n    display: flex;\n    -webkit-box-align: center;\n        -ms-flex-align: center;\n            align-items: center;\n    -webkit-box-pack: center;\n        -ms-flex-pack: center;\n            justify-content: center;\n    position: relative;\n    overflow: hidden;\n}\n.p-sidebar-left {\n    top: 0;\n    left: 0;\n    width: 20rem;\n    height: 100%;\n}\n.p-sidebar-right {\n    top: 0;\n    right: 0;\n    width: 20rem;\n    height: 100%;\n}\n.p-sidebar-top {\n    top: 0;\n    left: 0;\n    width: 100%;\n    height: 10rem;\n}\n.p-sidebar-bottom {\n    bottom: 0;\n    left: 0;\n    width: 100%;\n    height: 10rem;\n}\n.p-sidebar-full {\n    width: 100%;\n    height: 100%;\n    top: 0;\n    left: 0;\n    -webkit-transition: none;\n    transition: none;\n}\n.p-sidebar-left.p-sidebar-enter-from,\n.p-sidebar-left.p-sidebar-leave-to {\n    -webkit-transform: translateX(-100%);\n            transform: translateX(-100%);\n}\n.p-sidebar-right.p-sidebar-enter-from,\n.p-sidebar-right.p-sidebar-leave-to {\n    -webkit-transform: translateX(100%);\n            transform: translateX(100%);\n}\n.p-sidebar-top.p-sidebar-enter-from,\n.p-sidebar-top.p-sidebar-leave-to {\n    -webkit-transform: translateY(-100%);\n            transform: translateY(-100%);\n}\n.p-sidebar-bottom.p-sidebar-enter-from,\n.p-sidebar-bottom.p-sidebar-leave-to {\n    -webkit-transform: translateY(100%);\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    -webkit-transition: opacity 400ms cubic-bezier(0.25, 0.8, 0.25, 1);\n    transition: opacity 400ms cubic-bezier(0.25, 0.8, 0.25, 1);\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@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"),s.render=function(e,t,i,s,d,l){const p=n.resolveDirective("ripple");return n.openBlock(),n.createBlock(n.Teleport,{to:"body"},[n.createVNode(n.Transition,{name:"p-sidebar",onEnter:l.onEnter,onLeave:l.onLeave,onAfterLeave:l.onAfterLeave,appear:""},{default:n.withCtx((()=>[i.visible?(n.openBlock(),n.createBlock("div",n.mergeProps({key:0,class:l.containerClass,ref:l.containerRef,role:"complementary","aria-modal":i.modal},e.$attrs),[n.createVNode("div",a,[i.showCloseIcon?n.withDirectives((n.openBlock(),n.createBlock("button",{key:0,class:"p-sidebar-close p-sidebar-icon p-link",onClick:t[1]||(t[1]=(...e)=>l.hide&&l.hide(...e)),"aria-label":i.ariaCloseLabel,type:"button"},[r],8,["aria-label"])),[[p]]):n.createCommentVNode("",!0)]),n.createVNode("div",o,[n.renderSlot(e.$slots,"default")])],16,["aria-modal"])):n.createCommentVNode("",!0)])),_:3},8,["onEnter","onLeave","onAfterLeave"])])},s}(primevue.utils,primevue.ripple,Vue);
+this.primevue=this.primevue||{},this.primevue.sidebar=function(e,t,n,i){"use strict";function s(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var a=s(t),r=s(n),o={name:"Sidebar",emits:["update:visible","show","hide"],inheritAttrs:!1,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},modal:{type:Boolean,default:!0},ariaCloseLabel:{type:String,default:"close"}},mask:null,maskClickListener:null,container:null,beforeUnmount(){this.destroyModal(),this.container&&this.autoZIndex&&e.ZIndexUtils.clear(this.container),this.container=null},methods:{hide(){this.$emit("update:visible",!1)},onEnter(t){this.$emit("show"),this.autoZIndex&&e.ZIndexUtils.set("modal",t,this.baseZIndex||this.$primevue.config.zIndex.modal),this.focus(),this.modal&&!this.fullScreen&&this.enableModality()},onLeave(){this.$emit("hide"),this.modal&&!this.fullScreen&&this.disableModality()},onAfterLeave(t){this.autoZIndex&&e.ZIndexUtils.clear(t)},focus(){let t=e.DomHandler.findSingle(this.container,"input,button");t&&t.focus()},enableModality(){this.mask||(this.mask=document.createElement("div"),this.mask.setAttribute("class","p-sidebar-mask p-component-overlay p-component-overlay-enter"),this.mask.style.zIndex=String(parseInt(this.container.style.zIndex,10)-1),this.dismissable&&this.bindMaskClickListener(),document.body.appendChild(this.mask),e.DomHandler.addClass(document.body,"p-overflow-hidden"))},disableModality(){this.mask&&(e.DomHandler.addClass(this.mask,"p-component-overlay-leave"),this.mask.addEventListener("animationend",(()=>{this.destroyModal()})))},bindMaskClickListener(){this.maskClickListener||(this.maskClickListener=()=>{this.hide()},this.mask.addEventListener("click",this.maskClickListener))},unbindMaskClickListener(){this.maskClickListener&&(this.mask.removeEventListener("click",this.maskClickListener),this.maskClickListener=null)},destroyModal(){this.mask&&(this.unbindMaskClickListener(),document.body.removeChild(this.mask),e.DomHandler.removeClass(document.body,"p-overflow-hidden"),this.mask=null)},containerRef(e){this.container=e}},computed:{containerClass(){return["p-sidebar p-component p-sidebar-"+this.position,{"p-sidebar-active":this.visible,"p-input-filled":"filled"===this.$primevue.config.inputStyle,"p-ripple-disabled":!1===this.$primevue.config.ripple}]},fullScreen(){return"full"===this.position}},directives:{ripple:a.default},components:{Portal:r.default}};const l=["aria-modal"],d={class:"p-sidebar-header"},p={key:0,class:"p-sidebar-header-content"},m=["aria-label"],b=[i.createElementVNode("span",{class:"p-sidebar-close-icon pi pi-times"},null,-1)],c={class:"p-sidebar-content"};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 {\n    position: fixed;\n    -webkit-transition: -webkit-transform .3s;\n    transition: -webkit-transform .3s;\n    transition: transform .3s;\n    transition: transform .3s, -webkit-transform .3s;\n    display: -webkit-box;\n    display: -ms-flexbox;\n    display: flex;\n    -webkit-box-orient: vertical;\n    -webkit-box-direction: normal;\n        -ms-flex-direction: column;\n            flex-direction: column;\n}\n.p-sidebar-content {\n    position: relative;\n    overflow-y: auto;\n}\n.p-sidebar-header {\n    display: -webkit-box;\n    display: -ms-flexbox;\n    display: flex;\n    -webkit-box-align: center;\n        -ms-flex-align: center;\n            align-items: center;\n    -webkit-box-pack: end;\n        -ms-flex-pack: end;\n            justify-content: flex-end;\n}\n.p-sidebar-icon {\n    display: -webkit-box;\n    display: -ms-flexbox;\n    display: flex;\n    -webkit-box-align: center;\n        -ms-flex-align: center;\n            align-items: center;\n    -webkit-box-pack: center;\n        -ms-flex-pack: center;\n            justify-content: center;\n    position: relative;\n    overflow: hidden;\n}\n.p-sidebar-left {\n    top: 0;\n    left: 0;\n    width: 20rem;\n    height: 100%;\n}\n.p-sidebar-right {\n    top: 0;\n    right: 0;\n    width: 20rem;\n    height: 100%;\n}\n.p-sidebar-top {\n    top: 0;\n    left: 0;\n    width: 100%;\n    height: 10rem;\n}\n.p-sidebar-bottom {\n    bottom: 0;\n    left: 0;\n    width: 100%;\n    height: 10rem;\n}\n.p-sidebar-full {\n    width: 100%;\n    height: 100%;\n    top: 0;\n    left: 0;\n    -webkit-transition: none;\n    transition: none;\n}\n.p-sidebar-left.p-sidebar-enter-from,\n.p-sidebar-left.p-sidebar-leave-to {\n    -webkit-transform: translateX(-100%);\n            transform: translateX(-100%);\n}\n.p-sidebar-right.p-sidebar-enter-from,\n.p-sidebar-right.p-sidebar-leave-to {\n    -webkit-transform: translateX(100%);\n            transform: translateX(100%);\n}\n.p-sidebar-top.p-sidebar-enter-from,\n.p-sidebar-top.p-sidebar-leave-to {\n    -webkit-transform: translateY(-100%);\n            transform: translateY(-100%);\n}\n.p-sidebar-bottom.p-sidebar-enter-from,\n.p-sidebar-bottom.p-sidebar-leave-to {\n    -webkit-transform: translateY(100%);\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    -webkit-transition: opacity 400ms cubic-bezier(0.25, 0.8, 0.25, 1);\n    transition: opacity 400ms cubic-bezier(0.25, 0.8, 0.25, 1);\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@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"),o.render=function(e,t,n,s,a,r){const o=i.resolveComponent("Portal"),h=i.resolveDirective("ripple");return i.openBlock(),i.createBlock(o,null,{default:i.withCtx((()=>[i.createVNode(i.Transition,{name:"p-sidebar",onEnter:r.onEnter,onLeave:r.onLeave,onAfterLeave:r.onAfterLeave,appear:""},{default:i.withCtx((()=>[n.visible?(i.openBlock(),i.createElementBlock("div",i.mergeProps({key:0,class:r.containerClass,ref:r.containerRef,role:"complementary","aria-modal":n.modal},e.$attrs),[i.createElementVNode("div",d,[e.$slots.header?(i.openBlock(),i.createElementBlock("div",p,[i.renderSlot(e.$slots,"header")])):i.createCommentVNode("",!0),n.showCloseIcon?i.withDirectives((i.openBlock(),i.createElementBlock("button",{key:1,class:"p-sidebar-close p-sidebar-icon p-link",onClick:t[0]||(t[0]=(...e)=>r.hide&&r.hide(...e)),"aria-label":n.ariaCloseLabel,type:"button"},b,8,m)),[[h]]):i.createCommentVNode("",!0)]),i.createElementVNode("div",c,[i.renderSlot(e.$slots,"default")])],16,l)):i.createCommentVNode("",!0)])),_:3},8,["onEnter","onLeave","onAfterLeave"])])),_:3})},o}(primevue.utils,primevue.ripple,primevue.portal,Vue);

package/skeleton/skeleton.cjs.js

@@ -47,9 +47,9 @@ var script = {
 };
 
 function render(_ctx, _cache, $props, $setup, $data, $options) {
-  return (vue.openBlock(), vue.createBlock("div", {
-    style: $options.containerStyle,
-    class: $options.containerClass
+  return (vue.openBlock(), vue.createElementBlock("div", {
+    style: vue.normalizeStyle($options.containerStyle),
+    class: vue.normalizeClass($options.containerClass)
   }, null, 6))
 }
 

package/skeleton/skeleton.cjs.min.js

@@ -1 +1 @@
-"use strict";var e=require("vue"),n={name:"Skeleton",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,n){void 0===n&&(n={});var t=n.insertAt;if(e&&"undefined"!=typeof document){var i=document.head||document.getElementsByTagName("head")[0],a=document.createElement("style");a.type="text/css","top"===t&&i.firstChild?i.insertBefore(a,i.firstChild):i.appendChild(a),a.styleSheet?a.styleSheet.cssText=e:a.appendChild(document.createTextNode(e))}}('\n.p-skeleton {\n    position: relative;\n    overflow: hidden;\n}\n.p-skeleton::after {\n    content: "";\n    -webkit-animation: p-skeleton-animation 1.2s infinite;\n            animation: p-skeleton-animation 1.2s infinite;\n    height: 100%;\n    left: 0;\n    position: absolute;\n    right: 0;\n    top: 0;\n    -webkit-transform: translateX(-100%);\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   -webkit-animation: none;\n           animation: none;\n}\n@-webkit-keyframes p-skeleton-animation {\nfrom {\n        -webkit-transform: translateX(-100%);\n                transform: translateX(-100%);\n}\nto {\n        -webkit-transform: translateX(100%);\n                transform: translateX(100%);\n}\n}\n@keyframes p-skeleton-animation {\nfrom {\n        -webkit-transform: translateX(-100%);\n                transform: translateX(-100%);\n}\nto {\n        -webkit-transform: translateX(100%);\n                transform: translateX(100%);\n}\n}\n'),n.render=function(n,t,i,a,r,s){return e.openBlock(),e.createBlock("div",{style:s.containerStyle,class:s.containerClass},null,6)},module.exports=n;
+"use strict";var e=require("vue"),n={name:"Skeleton",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,n){void 0===n&&(n={});var t=n.insertAt;if(e&&"undefined"!=typeof document){var i=document.head||document.getElementsByTagName("head")[0],a=document.createElement("style");a.type="text/css","top"===t&&i.firstChild?i.insertBefore(a,i.firstChild):i.appendChild(a),a.styleSheet?a.styleSheet.cssText=e:a.appendChild(document.createTextNode(e))}}('\n.p-skeleton {\n    position: relative;\n    overflow: hidden;\n}\n.p-skeleton::after {\n    content: "";\n    -webkit-animation: p-skeleton-animation 1.2s infinite;\n            animation: p-skeleton-animation 1.2s infinite;\n    height: 100%;\n    left: 0;\n    position: absolute;\n    right: 0;\n    top: 0;\n    -webkit-transform: translateX(-100%);\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   -webkit-animation: none;\n           animation: none;\n}\n@-webkit-keyframes p-skeleton-animation {\nfrom {\n        -webkit-transform: translateX(-100%);\n                transform: translateX(-100%);\n}\nto {\n        -webkit-transform: translateX(100%);\n                transform: translateX(100%);\n}\n}\n@keyframes p-skeleton-animation {\nfrom {\n        -webkit-transform: translateX(-100%);\n                transform: translateX(-100%);\n}\nto {\n        -webkit-transform: translateX(100%);\n                transform: translateX(100%);\n}\n}\n'),n.render=function(n,t,i,a,r,s){return e.openBlock(),e.createElementBlock("div",{style:e.normalizeStyle(s.containerStyle),class:e.normalizeClass(s.containerClass)},null,6)},module.exports=n;

package/skeleton/skeleton.esm.js

@@ -1,4 +1,4 @@
-import { openBlock, createBlock } from 'vue';
+import { openBlock, createElementBlock, normalizeStyle, normalizeClass } from 'vue';
 
 var script = {
     name: 'Skeleton',
@@ -45,9 +45,9 @@ var script = {
 };
 
 function render(_ctx, _cache, $props, $setup, $data, $options) {
-  return (openBlock(), createBlock("div", {
-    style: $options.containerStyle,
-    class: $options.containerClass
+  return (openBlock(), createElementBlock("div", {
+    style: normalizeStyle($options.containerStyle),
+    class: normalizeClass($options.containerClass)
   }, null, 6))
 }
 
@@ -83,4 +83,4 @@ styleInject(css_248z);
 
 script.render = render;
 
-export default script;
+export { script as default };

package/skeleton/skeleton.esm.min.js

@@ -1 +1 @@
-import{openBlock as n,createBlock as e}from"vue";var t={name:"Skeleton",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(n,e){void 0===e&&(e={});var t=e.insertAt;if(n&&"undefined"!=typeof document){var i=document.head||document.getElementsByTagName("head")[0],a=document.createElement("style");a.type="text/css","top"===t&&i.firstChild?i.insertBefore(a,i.firstChild):i.appendChild(a),a.styleSheet?a.styleSheet.cssText=n:a.appendChild(document.createTextNode(n))}}('\n.p-skeleton {\n    position: relative;\n    overflow: hidden;\n}\n.p-skeleton::after {\n    content: "";\n    -webkit-animation: p-skeleton-animation 1.2s infinite;\n            animation: p-skeleton-animation 1.2s infinite;\n    height: 100%;\n    left: 0;\n    position: absolute;\n    right: 0;\n    top: 0;\n    -webkit-transform: translateX(-100%);\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   -webkit-animation: none;\n           animation: none;\n}\n@-webkit-keyframes p-skeleton-animation {\nfrom {\n        -webkit-transform: translateX(-100%);\n                transform: translateX(-100%);\n}\nto {\n        -webkit-transform: translateX(100%);\n                transform: translateX(100%);\n}\n}\n@keyframes p-skeleton-animation {\nfrom {\n        -webkit-transform: translateX(-100%);\n                transform: translateX(-100%);\n}\nto {\n        -webkit-transform: translateX(100%);\n                transform: translateX(100%);\n}\n}\n'),t.render=function(t,i,a,r,o,s){return n(),e("div",{style:s.containerStyle,class:s.containerClass},null,6)};export default t;
+import{openBlock as n,createElementBlock as e,normalizeStyle as t,normalizeClass as i}from"vue";var a={name:"Skeleton",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(n,e){void 0===e&&(e={});var t=e.insertAt;if(n&&"undefined"!=typeof document){var i=document.head||document.getElementsByTagName("head")[0],a=document.createElement("style");a.type="text/css","top"===t&&i.firstChild?i.insertBefore(a,i.firstChild):i.appendChild(a),a.styleSheet?a.styleSheet.cssText=n:a.appendChild(document.createTextNode(n))}}('\n.p-skeleton {\n    position: relative;\n    overflow: hidden;\n}\n.p-skeleton::after {\n    content: "";\n    -webkit-animation: p-skeleton-animation 1.2s infinite;\n            animation: p-skeleton-animation 1.2s infinite;\n    height: 100%;\n    left: 0;\n    position: absolute;\n    right: 0;\n    top: 0;\n    -webkit-transform: translateX(-100%);\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   -webkit-animation: none;\n           animation: none;\n}\n@-webkit-keyframes p-skeleton-animation {\nfrom {\n        -webkit-transform: translateX(-100%);\n                transform: translateX(-100%);\n}\nto {\n        -webkit-transform: translateX(100%);\n                transform: translateX(100%);\n}\n}\n@keyframes p-skeleton-animation {\nfrom {\n        -webkit-transform: translateX(-100%);\n                transform: translateX(-100%);\n}\nto {\n        -webkit-transform: translateX(100%);\n                transform: translateX(100%);\n}\n}\n'),a.render=function(a,r,s,o,l,d){return n(),e("div",{style:t(d.containerStyle),class:i(d.containerClass)},null,6)};export{a as default};