primevue 3.26.1 → 3.28.0

package/progressbar/progressbar.cjs.min.js

@@ -1 +1 @@
-"use strict";var e=require("vue"),n={name:"ProgressBar",props:{value:{type:Number,default:null},mode:{type:String,default:"determinate"},showValue:{type:Boolean,default:!0}},computed:{containerClass(){return["p-progressbar p-component",{"p-progressbar-determinate":this.determinate,"p-progressbar-indeterminate":this.indeterminate}]},progressStyle(){return{width:this.value+"%",display:"flex"}},indeterminate(){return"indeterminate"===this.mode},determinate(){return"determinate"===this.mode}}};const t=["aria-valuenow"],r={key:0,class:"p-progressbar-label"},a={key:1,class:"p-progressbar-indeterminate-container"},i=[e.createElementVNode("div",{class:"p-progressbar-value p-progressbar-value-animate"},null,-1)];!function(e,n){void 0===n&&(n={});var t=n.insertAt;if(e&&"undefined"!=typeof document){var r=document.head||document.getElementsByTagName("head")[0],a=document.createElement("style");a.type="text/css","top"===t&&r.firstChild?r.insertBefore(a,r.firstChild):r.appendChild(a),a.styleSheet?a.styleSheet.cssText=e:a.appendChild(document.createTextNode(e))}}("\n.p-progressbar {\n    position: relative;\n    overflow: hidden;\n}\n.p-progressbar-determinate .p-progressbar-value {\n    height: 100%;\n    width: 0%;\n    position: absolute;\n    display: none;\n    border: 0 none;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    overflow: hidden;\n}\n.p-progressbar-determinate .p-progressbar-label {\n    display: inline-flex;\n}\n.p-progressbar-determinate .p-progressbar-value-animate {\n    transition: width 1s ease-in-out;\n}\n.p-progressbar-indeterminate .p-progressbar-value::before {\n    content: '';\n    position: absolute;\n    background-color: inherit;\n    top: 0;\n    left: 0;\n    bottom: 0;\n    will-change: left, right;\n    -webkit-animation: p-progressbar-indeterminate-anim 2.1s cubic-bezier(0.65, 0.815, 0.735, 0.395) infinite;\n    animation: p-progressbar-indeterminate-anim 2.1s cubic-bezier(0.65, 0.815, 0.735, 0.395) infinite;\n}\n.p-progressbar-indeterminate .p-progressbar-value::after {\n    content: '';\n    position: absolute;\n    background-color: inherit;\n    top: 0;\n    left: 0;\n    bottom: 0;\n    will-change: left, right;\n    -webkit-animation: p-progressbar-indeterminate-anim-short 2.1s cubic-bezier(0.165, 0.84, 0.44, 1) infinite;\n    animation: p-progressbar-indeterminate-anim-short 2.1s cubic-bezier(0.165, 0.84, 0.44, 1) infinite;\n    -webkit-animation-delay: 1.15s;\n    animation-delay: 1.15s;\n}\n@-webkit-keyframes p-progressbar-indeterminate-anim {\n0% {\n        left: -35%;\n        right: 100%;\n}\n60% {\n        left: 100%;\n        right: -90%;\n}\n100% {\n        left: 100%;\n        right: -90%;\n}\n}\n@keyframes p-progressbar-indeterminate-anim {\n0% {\n        left: -35%;\n        right: 100%;\n}\n60% {\n        left: 100%;\n        right: -90%;\n}\n100% {\n        left: 100%;\n        right: -90%;\n}\n}\n@-webkit-keyframes p-progressbar-indeterminate-anim-short {\n0% {\n        left: -200%;\n        right: 100%;\n}\n60% {\n        left: 107%;\n        right: -8%;\n}\n100% {\n        left: 107%;\n        right: -8%;\n}\n}\n@keyframes p-progressbar-indeterminate-anim-short {\n0% {\n        left: -200%;\n        right: 100%;\n}\n60% {\n        left: 107%;\n        right: -8%;\n}\n100% {\n        left: 107%;\n        right: -8%;\n}\n}\n"),n.render=function(n,s,o,l,p,m){return e.openBlock(),e.createElementBlock("div",{role:"progressbar",class:e.normalizeClass(m.containerClass),"aria-valuemin":"0","aria-valuenow":o.value,"aria-valuemax":"100"},[m.determinate?(e.openBlock(),e.createElementBlock("div",{key:0,class:"p-progressbar-value p-progressbar-value-animate",style:e.normalizeStyle(m.progressStyle)},[null!=o.value&&0!==o.value&&o.showValue?(e.openBlock(),e.createElementBlock("div",r,[e.renderSlot(n.$slots,"default",{},(()=>[e.createTextVNode(e.toDisplayString(o.value+"%"),1)]))])):e.createCommentVNode("",!0)],4)):e.createCommentVNode("",!0),m.indeterminate?(e.openBlock(),e.createElementBlock("div",a,i)):e.createCommentVNode("",!0)],10,t)},module.exports=n;
+"use strict";var e=require("primevue/basecomponent"),n=require("vue");function t(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var r={name:"ProgressBar",extends:t(e).default,props:{value:{type:Number,default:null},mode:{type:String,default:"determinate"},showValue:{type:Boolean,default:!0}},computed:{containerClass(){return["p-progressbar p-component",{"p-progressbar-determinate":this.determinate,"p-progressbar-indeterminate":this.indeterminate}]},progressStyle(){return{width:this.value+"%",display:"flex"}},indeterminate(){return"indeterminate"===this.mode},determinate(){return"determinate"===this.mode}}};const a=["aria-valuenow"];!function(e,n){void 0===n&&(n={});var t=n.insertAt;if(e&&"undefined"!=typeof document){var r=document.head||document.getElementsByTagName("head")[0],a=document.createElement("style");a.type="text/css","top"===t&&r.firstChild?r.insertBefore(a,r.firstChild):r.appendChild(a),a.styleSheet?a.styleSheet.cssText=e:a.appendChild(document.createTextNode(e))}}("\n.p-progressbar {\n    position: relative;\n    overflow: hidden;\n}\n.p-progressbar-determinate .p-progressbar-value {\n    height: 100%;\n    width: 0%;\n    position: absolute;\n    display: none;\n    border: 0 none;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    overflow: hidden;\n}\n.p-progressbar-determinate .p-progressbar-label {\n    display: inline-flex;\n}\n.p-progressbar-determinate .p-progressbar-value-animate {\n    transition: width 1s ease-in-out;\n}\n.p-progressbar-indeterminate .p-progressbar-value::before {\n    content: '';\n    position: absolute;\n    background-color: inherit;\n    top: 0;\n    left: 0;\n    bottom: 0;\n    will-change: left, right;\n    -webkit-animation: p-progressbar-indeterminate-anim 2.1s cubic-bezier(0.65, 0.815, 0.735, 0.395) infinite;\n    animation: p-progressbar-indeterminate-anim 2.1s cubic-bezier(0.65, 0.815, 0.735, 0.395) infinite;\n}\n.p-progressbar-indeterminate .p-progressbar-value::after {\n    content: '';\n    position: absolute;\n    background-color: inherit;\n    top: 0;\n    left: 0;\n    bottom: 0;\n    will-change: left, right;\n    -webkit-animation: p-progressbar-indeterminate-anim-short 2.1s cubic-bezier(0.165, 0.84, 0.44, 1) infinite;\n    animation: p-progressbar-indeterminate-anim-short 2.1s cubic-bezier(0.165, 0.84, 0.44, 1) infinite;\n    -webkit-animation-delay: 1.15s;\n    animation-delay: 1.15s;\n}\n@-webkit-keyframes p-progressbar-indeterminate-anim {\n0% {\n        left: -35%;\n        right: 100%;\n}\n60% {\n        left: 100%;\n        right: -90%;\n}\n100% {\n        left: 100%;\n        right: -90%;\n}\n}\n@keyframes p-progressbar-indeterminate-anim {\n0% {\n        left: -35%;\n        right: 100%;\n}\n60% {\n        left: 100%;\n        right: -90%;\n}\n100% {\n        left: 100%;\n        right: -90%;\n}\n}\n@-webkit-keyframes p-progressbar-indeterminate-anim-short {\n0% {\n        left: -200%;\n        right: 100%;\n}\n60% {\n        left: 107%;\n        right: -8%;\n}\n100% {\n        left: 107%;\n        right: -8%;\n}\n}\n@keyframes p-progressbar-indeterminate-anim-short {\n0% {\n        left: -200%;\n        right: 100%;\n}\n60% {\n        left: 107%;\n        right: -8%;\n}\n100% {\n        left: 107%;\n        right: -8%;\n}\n}\n"),r.render=function(e,t,r,i,o,s){return n.openBlock(),n.createElementBlock("div",n.mergeProps({role:"progressbar",class:s.containerClass,"aria-valuemin":"0","aria-valuenow":r.value,"aria-valuemax":"100"},e.ptm("root")),[s.determinate?(n.openBlock(),n.createElementBlock("div",n.mergeProps({key:0,class:"p-progressbar-value p-progressbar-value-animate",style:s.progressStyle},e.ptm("value")),[null!=r.value&&0!==r.value&&r.showValue?(n.openBlock(),n.createElementBlock("div",n.mergeProps({key:0,class:"p-progressbar-label"},e.ptm("label")),[n.renderSlot(e.$slots,"default",{},(()=>[n.createTextVNode(n.toDisplayString(r.value+"%"),1)]))],16)):n.createCommentVNode("",!0)],16)):n.createCommentVNode("",!0),s.indeterminate?(n.openBlock(),n.createElementBlock("div",n.mergeProps({key:1,class:"p-progressbar-indeterminate-container"},e.ptm("root")),[n.createElementVNode("div",n.mergeProps({class:"p-progressbar-value p-progressbar-value-animate"},e.ptm("value")),null,16)],16)):n.createCommentVNode("",!0)],16,a)},module.exports=r;

package/progressbar/progressbar.esm.js

@@ -1,7 +1,9 @@
-import { openBlock, createElementBlock, normalizeClass, normalizeStyle, renderSlot, createTextVNode, toDisplayString, createCommentVNode, createElementVNode } from 'vue';
+import BaseComponent from 'primevue/basecomponent';
+import { openBlock, createElementBlock, mergeProps, renderSlot, createTextVNode, toDisplayString, createCommentVNode, createElementVNode } from 'vue';
 
 var script = {
     name: 'ProgressBar',
+    extends: BaseComponent,
     props: {
         value: {
             type: Number,
@@ -42,46 +44,42 @@ var script = {
 };
 
 const _hoisted_1 = ["aria-valuenow"];
-const _hoisted_2 = {
-  key: 0,
-  class: "p-progressbar-label"
-};
-const _hoisted_3 = {
-  key: 1,
-  class: "p-progressbar-indeterminate-container"
-};
-const _hoisted_4 = /*#__PURE__*/createElementVNode("div", { class: "p-progressbar-value p-progressbar-value-animate" }, null, -1);
-const _hoisted_5 = [
-  _hoisted_4
-];
 
 function render(_ctx, _cache, $props, $setup, $data, $options) {
-  return (openBlock(), createElementBlock("div", {
+  return (openBlock(), createElementBlock("div", mergeProps({
     role: "progressbar",
-    class: normalizeClass($options.containerClass),
+    class: $options.containerClass,
     "aria-valuemin": "0",
     "aria-valuenow": $props.value,
     "aria-valuemax": "100"
-  }, [
+  }, _ctx.ptm('root')), [
     ($options.determinate)
-      ? (openBlock(), createElementBlock("div", {
+      ? (openBlock(), createElementBlock("div", mergeProps({
           key: 0,
           class: "p-progressbar-value p-progressbar-value-animate",
-          style: normalizeStyle($options.progressStyle)
-        }, [
+          style: $options.progressStyle
+        }, _ctx.ptm('value')), [
           ($props.value != null && $props.value !== 0 && $props.showValue)
-            ? (openBlock(), createElementBlock("div", _hoisted_2, [
+            ? (openBlock(), createElementBlock("div", mergeProps({
+                key: 0,
+                class: "p-progressbar-label"
+              }, _ctx.ptm('label')), [
                 renderSlot(_ctx.$slots, "default", {}, () => [
                   createTextVNode(toDisplayString($props.value + '%'), 1)
                 ])
-              ]))
+              ], 16))
             : createCommentVNode("", true)
-        ], 4))
+        ], 16))
       : createCommentVNode("", true),
     ($options.indeterminate)
-      ? (openBlock(), createElementBlock("div", _hoisted_3, _hoisted_5))
+      ? (openBlock(), createElementBlock("div", mergeProps({
+          key: 1,
+          class: "p-progressbar-indeterminate-container"
+        }, _ctx.ptm('root')), [
+          createElementVNode("div", mergeProps({ class: "p-progressbar-value p-progressbar-value-animate" }, _ctx.ptm('value')), null, 16)
+        ], 16))
       : createCommentVNode("", true)
-  ], 10, _hoisted_1))
+  ], 16, _hoisted_1))
 }
 
 function styleInject(css, ref) {

package/progressbar/progressbar.esm.min.js

@@ -1 +1 @@
-import{openBlock as e,createElementBlock as n,normalizeClass as r,normalizeStyle as t,renderSlot as i,createTextVNode as a,toDisplayString as s,createCommentVNode as o,createElementVNode as l}from"vue";var p={name:"ProgressBar",props:{value:{type:Number,default:null},mode:{type:String,default:"determinate"},showValue:{type:Boolean,default:!0}},computed:{containerClass(){return["p-progressbar p-component",{"p-progressbar-determinate":this.determinate,"p-progressbar-indeterminate":this.indeterminate}]},progressStyle(){return{width:this.value+"%",display:"flex"}},indeterminate(){return"indeterminate"===this.mode},determinate(){return"determinate"===this.mode}}};const d=["aria-valuenow"],m={key:0,class:"p-progressbar-label"},g={key:1,class:"p-progressbar-indeterminate-container"},u=[l("div",{class:"p-progressbar-value p-progressbar-value-animate"},null,-1)];!function(e,n){void 0===n&&(n={});var r=n.insertAt;if(e&&"undefined"!=typeof document){var t=document.head||document.getElementsByTagName("head")[0],i=document.createElement("style");i.type="text/css","top"===r&&t.firstChild?t.insertBefore(i,t.firstChild):t.appendChild(i),i.styleSheet?i.styleSheet.cssText=e:i.appendChild(document.createTextNode(e))}}("\n.p-progressbar {\n    position: relative;\n    overflow: hidden;\n}\n.p-progressbar-determinate .p-progressbar-value {\n    height: 100%;\n    width: 0%;\n    position: absolute;\n    display: none;\n    border: 0 none;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    overflow: hidden;\n}\n.p-progressbar-determinate .p-progressbar-label {\n    display: inline-flex;\n}\n.p-progressbar-determinate .p-progressbar-value-animate {\n    transition: width 1s ease-in-out;\n}\n.p-progressbar-indeterminate .p-progressbar-value::before {\n    content: '';\n    position: absolute;\n    background-color: inherit;\n    top: 0;\n    left: 0;\n    bottom: 0;\n    will-change: left, right;\n    -webkit-animation: p-progressbar-indeterminate-anim 2.1s cubic-bezier(0.65, 0.815, 0.735, 0.395) infinite;\n    animation: p-progressbar-indeterminate-anim 2.1s cubic-bezier(0.65, 0.815, 0.735, 0.395) infinite;\n}\n.p-progressbar-indeterminate .p-progressbar-value::after {\n    content: '';\n    position: absolute;\n    background-color: inherit;\n    top: 0;\n    left: 0;\n    bottom: 0;\n    will-change: left, right;\n    -webkit-animation: p-progressbar-indeterminate-anim-short 2.1s cubic-bezier(0.165, 0.84, 0.44, 1) infinite;\n    animation: p-progressbar-indeterminate-anim-short 2.1s cubic-bezier(0.165, 0.84, 0.44, 1) infinite;\n    -webkit-animation-delay: 1.15s;\n    animation-delay: 1.15s;\n}\n@-webkit-keyframes p-progressbar-indeterminate-anim {\n0% {\n        left: -35%;\n        right: 100%;\n}\n60% {\n        left: 100%;\n        right: -90%;\n}\n100% {\n        left: 100%;\n        right: -90%;\n}\n}\n@keyframes p-progressbar-indeterminate-anim {\n0% {\n        left: -35%;\n        right: 100%;\n}\n60% {\n        left: 100%;\n        right: -90%;\n}\n100% {\n        left: 100%;\n        right: -90%;\n}\n}\n@-webkit-keyframes p-progressbar-indeterminate-anim-short {\n0% {\n        left: -200%;\n        right: 100%;\n}\n60% {\n        left: 107%;\n        right: -8%;\n}\n100% {\n        left: 107%;\n        right: -8%;\n}\n}\n@keyframes p-progressbar-indeterminate-anim-short {\n0% {\n        left: -200%;\n        right: 100%;\n}\n60% {\n        left: 107%;\n        right: -8%;\n}\n100% {\n        left: 107%;\n        right: -8%;\n}\n}\n"),p.render=function(l,p,b,f,h,c){return e(),n("div",{role:"progressbar",class:r(c.containerClass),"aria-valuemin":"0","aria-valuenow":b.value,"aria-valuemax":"100"},[c.determinate?(e(),n("div",{key:0,class:"p-progressbar-value p-progressbar-value-animate",style:t(c.progressStyle)},[null!=b.value&&0!==b.value&&b.showValue?(e(),n("div",m,[i(l.$slots,"default",{},(()=>[a(s(b.value+"%"),1)]))])):o("",!0)],4)):o("",!0),c.indeterminate?(e(),n("div",g,u)):o("",!0)],10,d)};export{p as default};
+import e from"primevue/basecomponent";import{openBlock as n,createElementBlock as t,mergeProps as r,renderSlot as i,createTextVNode as a,toDisplayString as s,createCommentVNode as o,createElementVNode as l}from"vue";var p={name:"ProgressBar",extends:e,props:{value:{type:Number,default:null},mode:{type:String,default:"determinate"},showValue:{type:Boolean,default:!0}},computed:{containerClass(){return["p-progressbar p-component",{"p-progressbar-determinate":this.determinate,"p-progressbar-indeterminate":this.indeterminate}]},progressStyle(){return{width:this.value+"%",display:"flex"}},indeterminate(){return"indeterminate"===this.mode},determinate(){return"determinate"===this.mode}}};const m=["aria-valuenow"];!function(e,n){void 0===n&&(n={});var t=n.insertAt;if(e&&"undefined"!=typeof document){var r=document.head||document.getElementsByTagName("head")[0],i=document.createElement("style");i.type="text/css","top"===t&&r.firstChild?r.insertBefore(i,r.firstChild):r.appendChild(i),i.styleSheet?i.styleSheet.cssText=e:i.appendChild(document.createTextNode(e))}}("\n.p-progressbar {\n    position: relative;\n    overflow: hidden;\n}\n.p-progressbar-determinate .p-progressbar-value {\n    height: 100%;\n    width: 0%;\n    position: absolute;\n    display: none;\n    border: 0 none;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    overflow: hidden;\n}\n.p-progressbar-determinate .p-progressbar-label {\n    display: inline-flex;\n}\n.p-progressbar-determinate .p-progressbar-value-animate {\n    transition: width 1s ease-in-out;\n}\n.p-progressbar-indeterminate .p-progressbar-value::before {\n    content: '';\n    position: absolute;\n    background-color: inherit;\n    top: 0;\n    left: 0;\n    bottom: 0;\n    will-change: left, right;\n    -webkit-animation: p-progressbar-indeterminate-anim 2.1s cubic-bezier(0.65, 0.815, 0.735, 0.395) infinite;\n    animation: p-progressbar-indeterminate-anim 2.1s cubic-bezier(0.65, 0.815, 0.735, 0.395) infinite;\n}\n.p-progressbar-indeterminate .p-progressbar-value::after {\n    content: '';\n    position: absolute;\n    background-color: inherit;\n    top: 0;\n    left: 0;\n    bottom: 0;\n    will-change: left, right;\n    -webkit-animation: p-progressbar-indeterminate-anim-short 2.1s cubic-bezier(0.165, 0.84, 0.44, 1) infinite;\n    animation: p-progressbar-indeterminate-anim-short 2.1s cubic-bezier(0.165, 0.84, 0.44, 1) infinite;\n    -webkit-animation-delay: 1.15s;\n    animation-delay: 1.15s;\n}\n@-webkit-keyframes p-progressbar-indeterminate-anim {\n0% {\n        left: -35%;\n        right: 100%;\n}\n60% {\n        left: 100%;\n        right: -90%;\n}\n100% {\n        left: 100%;\n        right: -90%;\n}\n}\n@keyframes p-progressbar-indeterminate-anim {\n0% {\n        left: -35%;\n        right: 100%;\n}\n60% {\n        left: 100%;\n        right: -90%;\n}\n100% {\n        left: 100%;\n        right: -90%;\n}\n}\n@-webkit-keyframes p-progressbar-indeterminate-anim-short {\n0% {\n        left: -200%;\n        right: 100%;\n}\n60% {\n        left: 107%;\n        right: -8%;\n}\n100% {\n        left: 107%;\n        right: -8%;\n}\n}\n@keyframes p-progressbar-indeterminate-anim-short {\n0% {\n        left: -200%;\n        right: 100%;\n}\n60% {\n        left: 107%;\n        right: -8%;\n}\n100% {\n        left: 107%;\n        right: -8%;\n}\n}\n"),p.render=function(e,p,d,u,b,g){return n(),t("div",r({role:"progressbar",class:g.containerClass,"aria-valuemin":"0","aria-valuenow":d.value,"aria-valuemax":"100"},e.ptm("root")),[g.determinate?(n(),t("div",r({key:0,class:"p-progressbar-value p-progressbar-value-animate",style:g.progressStyle},e.ptm("value")),[null!=d.value&&0!==d.value&&d.showValue?(n(),t("div",r({key:0,class:"p-progressbar-label"},e.ptm("label")),[i(e.$slots,"default",{},(()=>[a(s(d.value+"%"),1)]))],16)):o("",!0)],16)):o("",!0),g.indeterminate?(n(),t("div",r({key:1,class:"p-progressbar-indeterminate-container"},e.ptm("root")),[l("div",r({class:"p-progressbar-value p-progressbar-value-animate"},e.ptm("value")),null,16)],16)):o("",!0)],16,m)};export{p as default};

package/progressbar/progressbar.js

@@ -1,9 +1,14 @@
 this.primevue = this.primevue || {};
-this.primevue.progressbar = (function (vue) {
+this.primevue.progressbar = (function (BaseComponent, vue) {
     'use strict';
 
+    function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+    var BaseComponent__default = /*#__PURE__*/_interopDefaultLegacy(BaseComponent);
+
     var script = {
         name: 'ProgressBar',
+        extends: BaseComponent__default["default"],
         props: {
             value: {
                 type: Number,
@@ -44,46 +49,42 @@ this.primevue.progressbar = (function (vue) {
     };
 
     const _hoisted_1 = ["aria-valuenow"];
-    const _hoisted_2 = {
-      key: 0,
-      class: "p-progressbar-label"
-    };
-    const _hoisted_3 = {
-      key: 1,
-      class: "p-progressbar-indeterminate-container"
-    };
-    const _hoisted_4 = /*#__PURE__*/vue.createElementVNode("div", { class: "p-progressbar-value p-progressbar-value-animate" }, null, -1);
-    const _hoisted_5 = [
-      _hoisted_4
-    ];
 
     function render(_ctx, _cache, $props, $setup, $data, $options) {
-      return (vue.openBlock(), vue.createElementBlock("div", {
+      return (vue.openBlock(), vue.createElementBlock("div", vue.mergeProps({
         role: "progressbar",
-        class: vue.normalizeClass($options.containerClass),
+        class: $options.containerClass,
         "aria-valuemin": "0",
         "aria-valuenow": $props.value,
         "aria-valuemax": "100"
-      }, [
+      }, _ctx.ptm('root')), [
         ($options.determinate)
-          ? (vue.openBlock(), vue.createElementBlock("div", {
+          ? (vue.openBlock(), vue.createElementBlock("div", vue.mergeProps({
               key: 0,
               class: "p-progressbar-value p-progressbar-value-animate",
-              style: vue.normalizeStyle($options.progressStyle)
-            }, [
+              style: $options.progressStyle
+            }, _ctx.ptm('value')), [
               ($props.value != null && $props.value !== 0 && $props.showValue)
-                ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_2, [
+                ? (vue.openBlock(), vue.createElementBlock("div", vue.mergeProps({
+                    key: 0,
+                    class: "p-progressbar-label"
+                  }, _ctx.ptm('label')), [
                     vue.renderSlot(_ctx.$slots, "default", {}, () => [
                       vue.createTextVNode(vue.toDisplayString($props.value + '%'), 1)
                     ])
-                  ]))
+                  ], 16))
                 : vue.createCommentVNode("", true)
-            ], 4))
+            ], 16))
           : vue.createCommentVNode("", true),
         ($options.indeterminate)
-          ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_3, _hoisted_5))
+          ? (vue.openBlock(), vue.createElementBlock("div", vue.mergeProps({
+              key: 1,
+              class: "p-progressbar-indeterminate-container"
+            }, _ctx.ptm('root')), [
+              vue.createElementVNode("div", vue.mergeProps({ class: "p-progressbar-value p-progressbar-value-animate" }, _ctx.ptm('value')), null, 16)
+            ], 16))
           : vue.createCommentVNode("", true)
-      ], 10, _hoisted_1))
+      ], 16, _hoisted_1))
     }
 
     function styleInject(css, ref) {
@@ -120,4 +121,4 @@ this.primevue.progressbar = (function (vue) {
 
     return script;
 
-})(Vue);
+})(primevue.basecomponent, Vue);

package/progressbar/progressbar.min.js

@@ -1 +1 @@
-this.primevue=this.primevue||{},this.primevue.progressbar=function(e){"use strict";var n={name:"ProgressBar",props:{value:{type:Number,default:null},mode:{type:String,default:"determinate"},showValue:{type:Boolean,default:!0}},computed:{containerClass(){return["p-progressbar p-component",{"p-progressbar-determinate":this.determinate,"p-progressbar-indeterminate":this.indeterminate}]},progressStyle(){return{width:this.value+"%",display:"flex"}},indeterminate(){return"indeterminate"===this.mode},determinate(){return"determinate"===this.mode}}};const t=["aria-valuenow"],r={key:0,class:"p-progressbar-label"},i={key:1,class:"p-progressbar-indeterminate-container"},a=[e.createElementVNode("div",{class:"p-progressbar-value p-progressbar-value-animate"},null,-1)];return function(e,n){void 0===n&&(n={});var t=n.insertAt;if(e&&"undefined"!=typeof document){var r=document.head||document.getElementsByTagName("head")[0],i=document.createElement("style");i.type="text/css","top"===t&&r.firstChild?r.insertBefore(i,r.firstChild):r.appendChild(i),i.styleSheet?i.styleSheet.cssText=e:i.appendChild(document.createTextNode(e))}}("\n.p-progressbar {\n    position: relative;\n    overflow: hidden;\n}\n.p-progressbar-determinate .p-progressbar-value {\n    height: 100%;\n    width: 0%;\n    position: absolute;\n    display: none;\n    border: 0 none;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    overflow: hidden;\n}\n.p-progressbar-determinate .p-progressbar-label {\n    display: inline-flex;\n}\n.p-progressbar-determinate .p-progressbar-value-animate {\n    transition: width 1s ease-in-out;\n}\n.p-progressbar-indeterminate .p-progressbar-value::before {\n    content: '';\n    position: absolute;\n    background-color: inherit;\n    top: 0;\n    left: 0;\n    bottom: 0;\n    will-change: left, right;\n    -webkit-animation: p-progressbar-indeterminate-anim 2.1s cubic-bezier(0.65, 0.815, 0.735, 0.395) infinite;\n    animation: p-progressbar-indeterminate-anim 2.1s cubic-bezier(0.65, 0.815, 0.735, 0.395) infinite;\n}\n.p-progressbar-indeterminate .p-progressbar-value::after {\n    content: '';\n    position: absolute;\n    background-color: inherit;\n    top: 0;\n    left: 0;\n    bottom: 0;\n    will-change: left, right;\n    -webkit-animation: p-progressbar-indeterminate-anim-short 2.1s cubic-bezier(0.165, 0.84, 0.44, 1) infinite;\n    animation: p-progressbar-indeterminate-anim-short 2.1s cubic-bezier(0.165, 0.84, 0.44, 1) infinite;\n    -webkit-animation-delay: 1.15s;\n    animation-delay: 1.15s;\n}\n@-webkit-keyframes p-progressbar-indeterminate-anim {\n0% {\n        left: -35%;\n        right: 100%;\n}\n60% {\n        left: 100%;\n        right: -90%;\n}\n100% {\n        left: 100%;\n        right: -90%;\n}\n}\n@keyframes p-progressbar-indeterminate-anim {\n0% {\n        left: -35%;\n        right: 100%;\n}\n60% {\n        left: 100%;\n        right: -90%;\n}\n100% {\n        left: 100%;\n        right: -90%;\n}\n}\n@-webkit-keyframes p-progressbar-indeterminate-anim-short {\n0% {\n        left: -200%;\n        right: 100%;\n}\n60% {\n        left: 107%;\n        right: -8%;\n}\n100% {\n        left: 107%;\n        right: -8%;\n}\n}\n@keyframes p-progressbar-indeterminate-anim-short {\n0% {\n        left: -200%;\n        right: 100%;\n}\n60% {\n        left: 107%;\n        right: -8%;\n}\n100% {\n        left: 107%;\n        right: -8%;\n}\n}\n"),n.render=function(n,s,o,l,p,m){return e.openBlock(),e.createElementBlock("div",{role:"progressbar",class:e.normalizeClass(m.containerClass),"aria-valuemin":"0","aria-valuenow":o.value,"aria-valuemax":"100"},[m.determinate?(e.openBlock(),e.createElementBlock("div",{key:0,class:"p-progressbar-value p-progressbar-value-animate",style:e.normalizeStyle(m.progressStyle)},[null!=o.value&&0!==o.value&&o.showValue?(e.openBlock(),e.createElementBlock("div",r,[e.renderSlot(n.$slots,"default",{},(()=>[e.createTextVNode(e.toDisplayString(o.value+"%"),1)]))])):e.createCommentVNode("",!0)],4)):e.createCommentVNode("",!0),m.indeterminate?(e.openBlock(),e.createElementBlock("div",i,a)):e.createCommentVNode("",!0)],10,t)},n}(Vue);
+this.primevue=this.primevue||{},this.primevue.progressbar=function(e,n){"use strict";function t(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var r={name:"ProgressBar",extends:t(e).default,props:{value:{type:Number,default:null},mode:{type:String,default:"determinate"},showValue:{type:Boolean,default:!0}},computed:{containerClass(){return["p-progressbar p-component",{"p-progressbar-determinate":this.determinate,"p-progressbar-indeterminate":this.indeterminate}]},progressStyle(){return{width:this.value+"%",display:"flex"}},indeterminate(){return"indeterminate"===this.mode},determinate(){return"determinate"===this.mode}}};const i=["aria-valuenow"];return function(e,n){void 0===n&&(n={});var t=n.insertAt;if(e&&"undefined"!=typeof document){var r=document.head||document.getElementsByTagName("head")[0],i=document.createElement("style");i.type="text/css","top"===t&&r.firstChild?r.insertBefore(i,r.firstChild):r.appendChild(i),i.styleSheet?i.styleSheet.cssText=e:i.appendChild(document.createTextNode(e))}}("\n.p-progressbar {\n    position: relative;\n    overflow: hidden;\n}\n.p-progressbar-determinate .p-progressbar-value {\n    height: 100%;\n    width: 0%;\n    position: absolute;\n    display: none;\n    border: 0 none;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    overflow: hidden;\n}\n.p-progressbar-determinate .p-progressbar-label {\n    display: inline-flex;\n}\n.p-progressbar-determinate .p-progressbar-value-animate {\n    transition: width 1s ease-in-out;\n}\n.p-progressbar-indeterminate .p-progressbar-value::before {\n    content: '';\n    position: absolute;\n    background-color: inherit;\n    top: 0;\n    left: 0;\n    bottom: 0;\n    will-change: left, right;\n    -webkit-animation: p-progressbar-indeterminate-anim 2.1s cubic-bezier(0.65, 0.815, 0.735, 0.395) infinite;\n    animation: p-progressbar-indeterminate-anim 2.1s cubic-bezier(0.65, 0.815, 0.735, 0.395) infinite;\n}\n.p-progressbar-indeterminate .p-progressbar-value::after {\n    content: '';\n    position: absolute;\n    background-color: inherit;\n    top: 0;\n    left: 0;\n    bottom: 0;\n    will-change: left, right;\n    -webkit-animation: p-progressbar-indeterminate-anim-short 2.1s cubic-bezier(0.165, 0.84, 0.44, 1) infinite;\n    animation: p-progressbar-indeterminate-anim-short 2.1s cubic-bezier(0.165, 0.84, 0.44, 1) infinite;\n    -webkit-animation-delay: 1.15s;\n    animation-delay: 1.15s;\n}\n@-webkit-keyframes p-progressbar-indeterminate-anim {\n0% {\n        left: -35%;\n        right: 100%;\n}\n60% {\n        left: 100%;\n        right: -90%;\n}\n100% {\n        left: 100%;\n        right: -90%;\n}\n}\n@keyframes p-progressbar-indeterminate-anim {\n0% {\n        left: -35%;\n        right: 100%;\n}\n60% {\n        left: 100%;\n        right: -90%;\n}\n100% {\n        left: 100%;\n        right: -90%;\n}\n}\n@-webkit-keyframes p-progressbar-indeterminate-anim-short {\n0% {\n        left: -200%;\n        right: 100%;\n}\n60% {\n        left: 107%;\n        right: -8%;\n}\n100% {\n        left: 107%;\n        right: -8%;\n}\n}\n@keyframes p-progressbar-indeterminate-anim-short {\n0% {\n        left: -200%;\n        right: 100%;\n}\n60% {\n        left: 107%;\n        right: -8%;\n}\n100% {\n        left: 107%;\n        right: -8%;\n}\n}\n"),r.render=function(e,t,r,a,o,s){return n.openBlock(),n.createElementBlock("div",n.mergeProps({role:"progressbar",class:s.containerClass,"aria-valuemin":"0","aria-valuenow":r.value,"aria-valuemax":"100"},e.ptm("root")),[s.determinate?(n.openBlock(),n.createElementBlock("div",n.mergeProps({key:0,class:"p-progressbar-value p-progressbar-value-animate",style:s.progressStyle},e.ptm("value")),[null!=r.value&&0!==r.value&&r.showValue?(n.openBlock(),n.createElementBlock("div",n.mergeProps({key:0,class:"p-progressbar-label"},e.ptm("label")),[n.renderSlot(e.$slots,"default",{},(()=>[n.createTextVNode(n.toDisplayString(r.value+"%"),1)]))],16)):n.createCommentVNode("",!0)],16)):n.createCommentVNode("",!0),s.indeterminate?(n.openBlock(),n.createElementBlock("div",n.mergeProps({key:1,class:"p-progressbar-indeterminate-container"},e.ptm("root")),[n.createElementVNode("div",n.mergeProps({class:"p-progressbar-value p-progressbar-value-animate"},e.ptm("value")),null,16)],16)):n.createCommentVNode("",!0)],16,i)},r}(primevue.basecomponent,Vue);

package/progressspinner/ProgressSpinner.d.ts

@@ -9,6 +9,41 @@
  */
 import { ClassComponent, GlobalComponentConstructor } from '../ts-helpers';
 
+export declare type ProgressSpinnerPassThroughOptionType = ProgressSpinnerPassThroughAttributes | ((options: ProgressSpinnerPassThroughMethodOptions) => ProgressSpinnerPassThroughAttributes) | null | undefined;
+
+/**
+ * Custom passthrough(pt) option method.
+ */
+export interface ProgressSpinnerPassThroughMethodOptions {
+    props: ProgressSpinnerProps;
+}
+
+/**
+ * Custom passthrough(pt) options.
+ * @see {@link ProgressSpinnerProps.pt}
+ */
+export interface ProgressSpinnerPassThroughOptions {
+    /**
+     * Uses to pass attributes to the root's DOM element.
+     */
+    root?: ProgressSpinnerPassThroughOptionType;
+    /**
+     * Uses to pass attributes to the spinner's DOM element.
+     */
+    spinner?: ProgressSpinnerPassThroughOptionType;
+    /**
+     * Uses to pass attributes to the circle's DOM element.
+     */
+    circle?: ProgressSpinnerPassThroughOptionType;
+}
+
+/**
+ * Custom passthrough attributes for each DOM elements
+ */
+export interface ProgressSpinnerPassThroughAttributes {
+    [key: string]: any;
+}
+
 /**
  * Defines valid properties in ProgressSpinner component.
  */
@@ -27,6 +62,11 @@ export interface ProgressSpinnerProps {
      * @defaultValue 2s
      */
     animationDuration?: string | undefined;
+    /**
+     * Uses to pass attributes to DOM elements inside the component.
+     * @type {ProgressSpinnerPassThroughOptions}
+     */
+    pt?: ProgressSpinnerPassThroughOptions;
 }
 
 /**

package/progressspinner/ProgressSpinner.vue

@@ -1,14 +1,17 @@
 <template>
-    <div class="p-progress-spinner" role="progressbar">
-        <svg class="p-progress-spinner-svg" viewBox="25 25 50 50" :style="svgStyle">
-            <circle class="p-progress-spinner-circle" cx="50" cy="50" r="20" :fill="fill" :stroke-width="strokeWidth" strokeMiterlimit="10" />
+    <div class="p-progress-spinner" role="progressbar" v-bind="ptm('root')">
+        <svg class="p-progress-spinner-svg" viewBox="25 25 50 50" :style="svgStyle" v-bind="ptm('spinner')">
+            <circle class="p-progress-spinner-circle" cx="50" cy="50" r="20" :fill="fill" :stroke-width="strokeWidth" strokeMiterlimit="10" v-bind="ptm('circle')" />
         </svg>
     </div>
 </template>
 
 <script>
+import BaseComponent from 'primevue/basecomponent';
+
 export default {
     name: 'ProgressSpinner',
+    extends: BaseComponent,
     props: {
         strokeWidth: {
             type: String,

package/progressspinner/progressspinner.cjs.js

@@ -1,9 +1,15 @@
 'use strict';
 
+var BaseComponent = require('primevue/basecomponent');
 var vue = require('vue');
 
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+var BaseComponent__default = /*#__PURE__*/_interopDefaultLegacy(BaseComponent);
+
 var script = {
     name: 'ProgressSpinner',
+    extends: BaseComponent__default["default"],
     props: {
         strokeWidth: {
             type: String,
@@ -27,20 +33,19 @@ var script = {
     }
 };
 
-const _hoisted_1 = {
-  class: "p-progress-spinner",
-  role: "progressbar"
-};
-const _hoisted_2 = ["fill", "stroke-width"];
+const _hoisted_1 = ["fill", "stroke-width"];
 
 function render(_ctx, _cache, $props, $setup, $data, $options) {
-  return (vue.openBlock(), vue.createElementBlock("div", _hoisted_1, [
-    (vue.openBlock(), vue.createElementBlock("svg", {
+  return (vue.openBlock(), vue.createElementBlock("div", vue.mergeProps({
+    class: "p-progress-spinner",
+    role: "progressbar"
+  }, _ctx.ptm('root')), [
+    (vue.openBlock(), vue.createElementBlock("svg", vue.mergeProps({
       class: "p-progress-spinner-svg",
       viewBox: "25 25 50 50",
-      style: vue.normalizeStyle($options.svgStyle)
-    }, [
-      vue.createElementVNode("circle", {
+      style: $options.svgStyle
+    }, _ctx.ptm('spinner')), [
+      vue.createElementVNode("circle", vue.mergeProps({
         class: "p-progress-spinner-circle",
         cx: "50",
         cy: "50",
@@ -48,9 +53,9 @@ function render(_ctx, _cache, $props, $setup, $data, $options) {
         fill: $props.fill,
         "stroke-width": $props.strokeWidth,
         strokeMiterlimit: "10"
-      }, null, 8, _hoisted_2)
-    ], 4))
-  ]))
+      }, _ctx.ptm('circle')), null, 16, _hoisted_1)
+    ], 16))
+  ], 16))
 }
 
 function styleInject(css, ref) {

package/progressspinner/progressspinner.cjs.min.js

@@ -1 +1 @@
-"use strict";var e=require("vue"),n={name:"ProgressSpinner",props:{strokeWidth:{type:String,default:"2"},fill:{type:String,default:"none"},animationDuration:{type:String,default:"2s"}},computed:{svgStyle(){return{"animation-duration":this.animationDuration}}}};const t={class:"p-progress-spinner",role:"progressbar"},r=["fill","stroke-width"];!function(e,n){void 0===n&&(n={});var t=n.insertAt;if(e&&"undefined"!=typeof document){var r=document.head||document.getElementsByTagName("head")[0],i=document.createElement("style");i.type="text/css","top"===t&&r.firstChild?r.insertBefore(i,r.firstChild):r.appendChild(i),i.styleSheet?i.styleSheet.cssText=e:i.appendChild(document.createTextNode(e))}}("\n.p-progress-spinner {\n    position: relative;\n    margin: 0 auto;\n    width: 100px;\n    height: 100px;\n    display: inline-block;\n}\n.p-progress-spinner::before {\n    content: '';\n    display: block;\n    padding-top: 100%;\n}\n.p-progress-spinner-svg {\n    height: 100%;\n    transform-origin: center center;\n    width: 100%;\n    position: absolute;\n    top: 0;\n    bottom: 0;\n    left: 0;\n    right: 0;\n    margin: auto;\n}\n"),n.render=function(n,i,o,s,l,p){return e.openBlock(),e.createElementBlock("div",t,[(e.openBlock(),e.createElementBlock("svg",{class:"p-progress-spinner-svg",viewBox:"25 25 50 50",style:e.normalizeStyle(p.svgStyle)},[e.createElementVNode("circle",{class:"p-progress-spinner-circle",cx:"50",cy:"50",r:"20",fill:o.fill,"stroke-width":o.strokeWidth,strokeMiterlimit:"10"},null,8,r)],4))])},module.exports=n;
+"use strict";var e=require("primevue/basecomponent"),t=require("vue");function n(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var r={name:"ProgressSpinner",extends:n(e).default,props:{strokeWidth:{type:String,default:"2"},fill:{type:String,default:"none"},animationDuration:{type:String,default:"2s"}},computed:{svgStyle(){return{"animation-duration":this.animationDuration}}}};const i=["fill","stroke-width"];!function(e,t){void 0===t&&(t={});var n=t.insertAt;if(e&&"undefined"!=typeof document){var r=document.head||document.getElementsByTagName("head")[0],i=document.createElement("style");i.type="text/css","top"===n&&r.firstChild?r.insertBefore(i,r.firstChild):r.appendChild(i),i.styleSheet?i.styleSheet.cssText=e:i.appendChild(document.createTextNode(e))}}("\n.p-progress-spinner {\n    position: relative;\n    margin: 0 auto;\n    width: 100px;\n    height: 100px;\n    display: inline-block;\n}\n.p-progress-spinner::before {\n    content: '';\n    display: block;\n    padding-top: 100%;\n}\n.p-progress-spinner-svg {\n    height: 100%;\n    transform-origin: center center;\n    width: 100%;\n    position: absolute;\n    top: 0;\n    bottom: 0;\n    left: 0;\n    right: 0;\n    margin: auto;\n}\n"),r.render=function(e,n,r,o,s,p){return t.openBlock(),t.createElementBlock("div",t.mergeProps({class:"p-progress-spinner",role:"progressbar"},e.ptm("root")),[(t.openBlock(),t.createElementBlock("svg",t.mergeProps({class:"p-progress-spinner-svg",viewBox:"25 25 50 50",style:p.svgStyle},e.ptm("spinner")),[t.createElementVNode("circle",t.mergeProps({class:"p-progress-spinner-circle",cx:"50",cy:"50",r:"20",fill:r.fill,"stroke-width":r.strokeWidth,strokeMiterlimit:"10"},e.ptm("circle")),null,16,i)],16))],16)},module.exports=r;

package/progressspinner/progressspinner.esm.js

@@ -1,7 +1,9 @@
-import { openBlock, createElementBlock, normalizeStyle, createElementVNode } from 'vue';
+import BaseComponent from 'primevue/basecomponent';
+import { openBlock, createElementBlock, mergeProps, createElementVNode } from 'vue';
 
 var script = {
     name: 'ProgressSpinner',
+    extends: BaseComponent,
     props: {
         strokeWidth: {
             type: String,
@@ -25,20 +27,19 @@ var script = {
     }
 };
 
-const _hoisted_1 = {
-  class: "p-progress-spinner",
-  role: "progressbar"
-};
-const _hoisted_2 = ["fill", "stroke-width"];
+const _hoisted_1 = ["fill", "stroke-width"];
 
 function render(_ctx, _cache, $props, $setup, $data, $options) {
-  return (openBlock(), createElementBlock("div", _hoisted_1, [
-    (openBlock(), createElementBlock("svg", {
+  return (openBlock(), createElementBlock("div", mergeProps({
+    class: "p-progress-spinner",
+    role: "progressbar"
+  }, _ctx.ptm('root')), [
+    (openBlock(), createElementBlock("svg", mergeProps({
       class: "p-progress-spinner-svg",
       viewBox: "25 25 50 50",
-      style: normalizeStyle($options.svgStyle)
-    }, [
-      createElementVNode("circle", {
+      style: $options.svgStyle
+    }, _ctx.ptm('spinner')), [
+      createElementVNode("circle", mergeProps({
         class: "p-progress-spinner-circle",
         cx: "50",
         cy: "50",
@@ -46,9 +47,9 @@ function render(_ctx, _cache, $props, $setup, $data, $options) {
         fill: $props.fill,
         "stroke-width": $props.strokeWidth,
         strokeMiterlimit: "10"
-      }, null, 8, _hoisted_2)
-    ], 4))
-  ]))
+      }, _ctx.ptm('circle')), null, 16, _hoisted_1)
+    ], 16))
+  ], 16))
 }
 
 function styleInject(css, ref) {

package/progressspinner/progressspinner.esm.min.js

@@ -1 +1 @@
-import{openBlock as e,createElementBlock as n,normalizeStyle as t,createElementVNode as r}from"vue";var i={name:"ProgressSpinner",props:{strokeWidth:{type:String,default:"2"},fill:{type:String,default:"none"},animationDuration:{type:String,default:"2s"}},computed:{svgStyle(){return{"animation-duration":this.animationDuration}}}};const s={class:"p-progress-spinner",role:"progressbar"},o=["fill","stroke-width"];!function(e,n){void 0===n&&(n={});var t=n.insertAt;if(e&&"undefined"!=typeof document){var r=document.head||document.getElementsByTagName("head")[0],i=document.createElement("style");i.type="text/css","top"===t&&r.firstChild?r.insertBefore(i,r.firstChild):r.appendChild(i),i.styleSheet?i.styleSheet.cssText=e:i.appendChild(document.createTextNode(e))}}("\n.p-progress-spinner {\n    position: relative;\n    margin: 0 auto;\n    width: 100px;\n    height: 100px;\n    display: inline-block;\n}\n.p-progress-spinner::before {\n    content: '';\n    display: block;\n    padding-top: 100%;\n}\n.p-progress-spinner-svg {\n    height: 100%;\n    transform-origin: center center;\n    width: 100%;\n    position: absolute;\n    top: 0;\n    bottom: 0;\n    left: 0;\n    right: 0;\n    margin: auto;\n}\n"),i.render=function(i,p,l,a,d,c){return e(),n("div",s,[(e(),n("svg",{class:"p-progress-spinner-svg",viewBox:"25 25 50 50",style:t(c.svgStyle)},[r("circle",{class:"p-progress-spinner-circle",cx:"50",cy:"50",r:"20",fill:l.fill,"stroke-width":l.strokeWidth,strokeMiterlimit:"10"},null,8,o)],4))])};export{i as default};
+import e from"primevue/basecomponent";import{openBlock as t,createElementBlock as n,mergeProps as r,createElementVNode as i}from"vue";var s={name:"ProgressSpinner",extends:e,props:{strokeWidth:{type:String,default:"2"},fill:{type:String,default:"none"},animationDuration:{type:String,default:"2s"}},computed:{svgStyle(){return{"animation-duration":this.animationDuration}}}};const o=["fill","stroke-width"];!function(e,t){void 0===t&&(t={});var n=t.insertAt;if(e&&"undefined"!=typeof document){var r=document.head||document.getElementsByTagName("head")[0],i=document.createElement("style");i.type="text/css","top"===n&&r.firstChild?r.insertBefore(i,r.firstChild):r.appendChild(i),i.styleSheet?i.styleSheet.cssText=e:i.appendChild(document.createTextNode(e))}}("\n.p-progress-spinner {\n    position: relative;\n    margin: 0 auto;\n    width: 100px;\n    height: 100px;\n    display: inline-block;\n}\n.p-progress-spinner::before {\n    content: '';\n    display: block;\n    padding-top: 100%;\n}\n.p-progress-spinner-svg {\n    height: 100%;\n    transform-origin: center center;\n    width: 100%;\n    position: absolute;\n    top: 0;\n    bottom: 0;\n    left: 0;\n    right: 0;\n    margin: auto;\n}\n"),s.render=function(e,s,p,l,a,d){return t(),n("div",r({class:"p-progress-spinner",role:"progressbar"},e.ptm("root")),[(t(),n("svg",r({class:"p-progress-spinner-svg",viewBox:"25 25 50 50",style:d.svgStyle},e.ptm("spinner")),[i("circle",r({class:"p-progress-spinner-circle",cx:"50",cy:"50",r:"20",fill:p.fill,"stroke-width":p.strokeWidth,strokeMiterlimit:"10"},e.ptm("circle")),null,16,o)],16))],16)};export{s as default};

package/progressspinner/progressspinner.js

@@ -1,9 +1,14 @@
 this.primevue = this.primevue || {};
-this.primevue.progressspinner = (function (vue) {
+this.primevue.progressspinner = (function (BaseComponent, vue) {
     'use strict';
 
+    function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+    var BaseComponent__default = /*#__PURE__*/_interopDefaultLegacy(BaseComponent);
+
     var script = {
         name: 'ProgressSpinner',
+        extends: BaseComponent__default["default"],
         props: {
             strokeWidth: {
                 type: String,
@@ -27,20 +32,19 @@ this.primevue.progressspinner = (function (vue) {
         }
     };
 
-    const _hoisted_1 = {
-      class: "p-progress-spinner",
-      role: "progressbar"
-    };
-    const _hoisted_2 = ["fill", "stroke-width"];
+    const _hoisted_1 = ["fill", "stroke-width"];
 
     function render(_ctx, _cache, $props, $setup, $data, $options) {
-      return (vue.openBlock(), vue.createElementBlock("div", _hoisted_1, [
-        (vue.openBlock(), vue.createElementBlock("svg", {
+      return (vue.openBlock(), vue.createElementBlock("div", vue.mergeProps({
+        class: "p-progress-spinner",
+        role: "progressbar"
+      }, _ctx.ptm('root')), [
+        (vue.openBlock(), vue.createElementBlock("svg", vue.mergeProps({
           class: "p-progress-spinner-svg",
           viewBox: "25 25 50 50",
-          style: vue.normalizeStyle($options.svgStyle)
-        }, [
-          vue.createElementVNode("circle", {
+          style: $options.svgStyle
+        }, _ctx.ptm('spinner')), [
+          vue.createElementVNode("circle", vue.mergeProps({
             class: "p-progress-spinner-circle",
             cx: "50",
             cy: "50",
@@ -48,9 +52,9 @@ this.primevue.progressspinner = (function (vue) {
             fill: $props.fill,
             "stroke-width": $props.strokeWidth,
             strokeMiterlimit: "10"
-          }, null, 8, _hoisted_2)
-        ], 4))
-      ]))
+          }, _ctx.ptm('circle')), null, 16, _hoisted_1)
+        ], 16))
+      ], 16))
     }
 
     function styleInject(css, ref) {
@@ -87,4 +91,4 @@ this.primevue.progressspinner = (function (vue) {
 
     return script;
 
-})(Vue);
+})(primevue.basecomponent, Vue);

package/progressspinner/progressspinner.min.js

@@ -1 +1 @@
-this.primevue=this.primevue||{},this.primevue.progressspinner=function(e){"use strict";var n={name:"ProgressSpinner",props:{strokeWidth:{type:String,default:"2"},fill:{type:String,default:"none"},animationDuration:{type:String,default:"2s"}},computed:{svgStyle(){return{"animation-duration":this.animationDuration}}}};const t={class:"p-progress-spinner",role:"progressbar"},r=["fill","stroke-width"];return function(e,n){void 0===n&&(n={});var t=n.insertAt;if(e&&"undefined"!=typeof document){var r=document.head||document.getElementsByTagName("head")[0],i=document.createElement("style");i.type="text/css","top"===t&&r.firstChild?r.insertBefore(i,r.firstChild):r.appendChild(i),i.styleSheet?i.styleSheet.cssText=e:i.appendChild(document.createTextNode(e))}}("\n.p-progress-spinner {\n    position: relative;\n    margin: 0 auto;\n    width: 100px;\n    height: 100px;\n    display: inline-block;\n}\n.p-progress-spinner::before {\n    content: '';\n    display: block;\n    padding-top: 100%;\n}\n.p-progress-spinner-svg {\n    height: 100%;\n    transform-origin: center center;\n    width: 100%;\n    position: absolute;\n    top: 0;\n    bottom: 0;\n    left: 0;\n    right: 0;\n    margin: auto;\n}\n"),n.render=function(n,i,s,o,l,p){return e.openBlock(),e.createElementBlock("div",t,[(e.openBlock(),e.createElementBlock("svg",{class:"p-progress-spinner-svg",viewBox:"25 25 50 50",style:e.normalizeStyle(p.svgStyle)},[e.createElementVNode("circle",{class:"p-progress-spinner-circle",cx:"50",cy:"50",r:"20",fill:s.fill,"stroke-width":s.strokeWidth,strokeMiterlimit:"10"},null,8,r)],4))])},n}(Vue);
+this.primevue=this.primevue||{},this.primevue.progressspinner=function(e,t){"use strict";function n(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var r={name:"ProgressSpinner",extends:n(e).default,props:{strokeWidth:{type:String,default:"2"},fill:{type:String,default:"none"},animationDuration:{type:String,default:"2s"}},computed:{svgStyle(){return{"animation-duration":this.animationDuration}}}};const i=["fill","stroke-width"];return function(e,t){void 0===t&&(t={});var n=t.insertAt;if(e&&"undefined"!=typeof document){var r=document.head||document.getElementsByTagName("head")[0],i=document.createElement("style");i.type="text/css","top"===n&&r.firstChild?r.insertBefore(i,r.firstChild):r.appendChild(i),i.styleSheet?i.styleSheet.cssText=e:i.appendChild(document.createTextNode(e))}}("\n.p-progress-spinner {\n    position: relative;\n    margin: 0 auto;\n    width: 100px;\n    height: 100px;\n    display: inline-block;\n}\n.p-progress-spinner::before {\n    content: '';\n    display: block;\n    padding-top: 100%;\n}\n.p-progress-spinner-svg {\n    height: 100%;\n    transform-origin: center center;\n    width: 100%;\n    position: absolute;\n    top: 0;\n    bottom: 0;\n    left: 0;\n    right: 0;\n    margin: auto;\n}\n"),r.render=function(e,n,r,s,o,p){return t.openBlock(),t.createElementBlock("div",t.mergeProps({class:"p-progress-spinner",role:"progressbar"},e.ptm("root")),[(t.openBlock(),t.createElementBlock("svg",t.mergeProps({class:"p-progress-spinner-svg",viewBox:"25 25 50 50",style:p.svgStyle},e.ptm("spinner")),[t.createElementVNode("circle",t.mergeProps({class:"p-progress-spinner-circle",cx:"50",cy:"50",r:"20",fill:r.fill,"stroke-width":r.strokeWidth,strokeMiterlimit:"10"},e.ptm("circle")),null,16,i)],16))],16)},r}(primevue.basecomponent,Vue);

package/rating/Rating.d.ts

@@ -59,17 +59,17 @@ export interface RatingProps {
     cancel?: boolean | undefined;
     /**
      * Icon for the on state.
-     * @defaultValue pi pi-star
+     * @deprecated since v3.27.0. Use 'onicon' slot.
      */
     onIcon?: string | undefined;
     /**
      * Icon for the off state.
-     * @defaultValue pi pi-star-fill
+     * @deprecated since v3.27.0. Use 'officon' slot.
      */
     offIcon?: string | undefined;
     /**
      * Icon for the cancelable state.
-     * @defaultValue pi pi-ban
+     * @deprecated since v3.27.0. Use 'cancelicon' slot.
      */
     cancelIcon?: string | undefined;
 }

package/rating/Rating.vue

@@ -5,7 +5,7 @@
                 <input type="radio" value="0" :name="name" :checked="modelValue === 0" :disabled="disabled" :readonly="readonly" :aria-label="cancelAriaLabel()" @focus="onFocus($event, 0)" @blur="onBlur" @change="onChange($event, 0)" />
             </span>
             <slot name="cancelicon">
-                <span :class="cancelIconClass" />
+                <component :is="cancelIcon ? 'span' : 'BanIcon'" :class="['p-rating-icon p-rating-cancel', cancelIcon]" />
             </slot>
         </div>
         <template v-for="value in stars" :key="value">
@@ -25,10 +25,10 @@
                     />
                 </span>
                 <slot v-if="value <= modelValue" name="onicon" :value="value">
-                    <span :class="onIconClass" />
+                    <component :is="onIcon ? 'span' : 'StarFillIcon'" :class="['p-rating-icon', onIcon]" />
                 </slot>
                 <slot v-else name="officon" :value="value">
-                    <span :class="offIconClass" />
+                    <component :is="onIcon ? 'span' : 'StarIcon'" :class="['p-rating-icon', offIcon]" />
                 </slot>
             </div>
         </template>
@@ -36,6 +36,9 @@
 </template>
 
 <script>
+import BanIcon from 'primevue/icons/ban';
+import StarIcon from 'primevue/icons/star';
+import StarFillIcon from 'primevue/icons/starfill';
 import { DomHandler, UniqueComponentId } from 'primevue/utils';
 
 export default {
@@ -64,15 +67,15 @@ export default {
         },
         onIcon: {
             type: String,
-            default: 'pi pi-star-fill'
+            default: undefined
         },
         offIcon: {
             type: String,
-            default: 'pi pi-star'
+            default: undefined
         },
         cancelIcon: {
             type: String,
-            default: 'pi pi-ban'
+            default: undefined
         }
     },
     data() {
@@ -133,16 +136,12 @@ export default {
                     'p-disabled': this.disabled
                 }
             ];
-        },
-        cancelIconClass() {
-            return ['p-rating-icon p-rating-cancel', this.cancelIcon];
-        },
-        onIconClass() {
-            return ['p-rating-icon', this.onIcon];
-        },
-        offIconClass() {
-            return ['p-rating-icon', this.offIcon];
         }
+    },
+    components: {
+        StarFillIcon: StarFillIcon,
+        StarIcon: StarIcon,
+        BanIcon: BanIcon
     }
 };
 </script>