primevue 3.29.2 → 3.30.0

package/progressbar/ProgressBar.vue

@@ -1,46 +1,23 @@
 <template>
-    <div role="progressbar" :class="containerClass" aria-valuemin="0" :aria-valuenow="value" aria-valuemax="100" v-bind="ptm('root')">
-        <div v-if="determinate" class="p-progressbar-value p-progressbar-value-animate" :style="progressStyle" v-bind="ptm('value')">
-            <div v-if="value != null && value !== 0 && showValue" class="p-progressbar-label" v-bind="ptm('label')">
+    <div role="progressbar" :class="cx('root')" aria-valuemin="0" :aria-valuenow="value" aria-valuemax="100" v-bind="ptm('root')">
+        <div v-if="determinate" :class="cx('value')" :style="progressStyle" v-bind="ptm('value')">
+            <div v-if="value != null && value !== 0 && showValue" :class="cx('label')" v-bind="ptm('label')">
                 <slot>{{ value + '%' }}</slot>
             </div>
         </div>
-        <div v-if="indeterminate" class="p-progressbar-indeterminate-container" v-bind="ptm('root')">
-            <div class="p-progressbar-value p-progressbar-value-animate" v-bind="ptm('value')"></div>
+        <div v-if="indeterminate" :class="cx('container')" v-bind="ptm('container')">
+            <div :class="cx('value')" v-bind="ptm('value')"></div>
         </div>
     </div>
 </template>
 
 <script>
-import BaseComponent from 'primevue/basecomponent';
+import BaseProgressBar from './BaseProgressBar.vue';
 
 export default {
     name: 'ProgressBar',
-    extends: BaseComponent,
-    props: {
-        value: {
-            type: Number,
-            default: null
-        },
-        mode: {
-            type: String,
-            default: 'determinate'
-        },
-        showValue: {
-            type: Boolean,
-            default: true
-        }
-    },
+    extends: BaseProgressBar,
     computed: {
-        containerClass() {
-            return [
-                'p-progressbar p-component',
-                {
-                    'p-progressbar-determinate': this.determinate,
-                    'p-progressbar-indeterminate': this.indeterminate
-                }
-            ];
-        },
         progressStyle() {
             return {
                 width: this.value + '%',
@@ -56,114 +33,3 @@ export default {
     }
 };
 </script>
-
-<style>
-.p-progressbar {
-    position: relative;
-    overflow: hidden;
-}
-
-.p-progressbar-determinate .p-progressbar-value {
-    height: 100%;
-    width: 0%;
-    position: absolute;
-    display: none;
-    border: 0 none;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    overflow: hidden;
-}
-
-.p-progressbar-determinate .p-progressbar-label {
-    display: inline-flex;
-}
-
-.p-progressbar-determinate .p-progressbar-value-animate {
-    transition: width 1s ease-in-out;
-}
-
-.p-progressbar-indeterminate .p-progressbar-value::before {
-    content: '';
-    position: absolute;
-    background-color: inherit;
-    top: 0;
-    left: 0;
-    bottom: 0;
-    will-change: left, right;
-    -webkit-animation: p-progressbar-indeterminate-anim 2.1s cubic-bezier(0.65, 0.815, 0.735, 0.395) infinite;
-    animation: p-progressbar-indeterminate-anim 2.1s cubic-bezier(0.65, 0.815, 0.735, 0.395) infinite;
-}
-
-.p-progressbar-indeterminate .p-progressbar-value::after {
-    content: '';
-    position: absolute;
-    background-color: inherit;
-    top: 0;
-    left: 0;
-    bottom: 0;
-    will-change: left, right;
-    -webkit-animation: p-progressbar-indeterminate-anim-short 2.1s cubic-bezier(0.165, 0.84, 0.44, 1) infinite;
-    animation: p-progressbar-indeterminate-anim-short 2.1s cubic-bezier(0.165, 0.84, 0.44, 1) infinite;
-    -webkit-animation-delay: 1.15s;
-    animation-delay: 1.15s;
-}
-
-@-webkit-keyframes p-progressbar-indeterminate-anim {
-    0% {
-        left: -35%;
-        right: 100%;
-    }
-    60% {
-        left: 100%;
-        right: -90%;
-    }
-    100% {
-        left: 100%;
-        right: -90%;
-    }
-}
-@keyframes p-progressbar-indeterminate-anim {
-    0% {
-        left: -35%;
-        right: 100%;
-    }
-    60% {
-        left: 100%;
-        right: -90%;
-    }
-    100% {
-        left: 100%;
-        right: -90%;
-    }
-}
-
-@-webkit-keyframes p-progressbar-indeterminate-anim-short {
-    0% {
-        left: -200%;
-        right: 100%;
-    }
-    60% {
-        left: 107%;
-        right: -8%;
-    }
-    100% {
-        left: 107%;
-        right: -8%;
-    }
-}
-@keyframes p-progressbar-indeterminate-anim-short {
-    0% {
-        left: -200%;
-        right: 100%;
-    }
-    60% {
-        left: 107%;
-        right: -8%;
-    }
-    100% {
-        left: 107%;
-        right: -8%;
-    }
-}
-</style>

package/progressbar/progressbar.cjs.js

@@ -1,123 +1,103 @@
 'use strict';
 
 var BaseComponent = require('primevue/basecomponent');
+var usestyle = require('primevue/usestyle');
 var vue = require('vue');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
 var BaseComponent__default = /*#__PURE__*/_interopDefaultLegacy(BaseComponent);
 
-var script = {
-    name: 'ProgressBar',
-    extends: BaseComponent__default["default"],
-    props: {
-        value: {
-            type: Number,
-            default: null
-        },
-        mode: {
-            type: String,
-            default: 'determinate'
-        },
-        showValue: {
-            type: Boolean,
-            default: true
-        }
+var styles = "\n.p-progressbar {\n    position: relative;\n    overflow: hidden;\n}\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\n.p-progressbar-determinate .p-progressbar-label {\n    display: inline-flex;\n}\n\n.p-progressbar-determinate .p-progressbar-value-animate {\n    transition: width 1s ease-in-out;\n}\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\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\n@-webkit-keyframes p-progressbar-indeterminate-anim {\n    0% {\n        left: -35%;\n        right: 100%;\n    }\n    60% {\n        left: 100%;\n        right: -90%;\n    }\n    100% {\n        left: 100%;\n        right: -90%;\n    }\n}\n@keyframes p-progressbar-indeterminate-anim {\n    0% {\n        left: -35%;\n        right: 100%;\n    }\n    60% {\n        left: 100%;\n        right: -90%;\n    }\n    100% {\n        left: 100%;\n        right: -90%;\n    }\n}\n\n@-webkit-keyframes p-progressbar-indeterminate-anim-short {\n    0% {\n        left: -200%;\n        right: 100%;\n    }\n    60% {\n        left: 107%;\n        right: -8%;\n    }\n    100% {\n        left: 107%;\n        right: -8%;\n    }\n}\n@keyframes p-progressbar-indeterminate-anim-short {\n    0% {\n        left: -200%;\n        right: 100%;\n    }\n    60% {\n        left: 107%;\n        right: -8%;\n    }\n    100% {\n        left: 107%;\n        right: -8%;\n    }\n}\n";
+var classes = {
+  root: function root(_ref) {
+    var instance = _ref.instance;
+    return ['p-progressbar p-component', {
+      'p-progressbar-determinate': instance.determinate,
+      'p-progressbar-indeterminate': instance.indeterminate
+    }];
+  },
+  container: 'p-progressbar-indeterminate-container',
+  value: 'p-progressbar-value p-progressbar-value-animate',
+  label: 'p-progressbar-label'
+};
+var _useStyle = usestyle.useStyle(styles, {
+    name: 'progressbar',
+    manual: true
+  }),
+  loadStyle = _useStyle.load;
+var script$1 = {
+  name: 'BaseProgressBar',
+  "extends": BaseComponent__default["default"],
+  props: {
+    value: {
+      type: Number,
+      "default": null
+    },
+    mode: {
+      type: String,
+      "default": 'determinate'
     },
-    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 this.mode === 'indeterminate';
-        },
-        determinate() {
-            return this.mode === 'determinate';
-        }
+    showValue: {
+      type: Boolean,
+      "default": true
     }
+  },
+  css: {
+    classes: classes,
+    loadStyle: loadStyle
+  },
+  provide: function provide() {
+    return {
+      $parentInstance: this
+    };
+  }
 };
 
-const _hoisted_1 = ["aria-valuenow"];
+var script = {
+  name: 'ProgressBar',
+  "extends": script$1,
+  computed: {
+    progressStyle: function progressStyle() {
+      return {
+        width: this.value + '%',
+        display: 'flex'
+      };
+    },
+    indeterminate: function indeterminate() {
+      return this.mode === 'indeterminate';
+    },
+    determinate: function determinate() {
+      return this.mode === 'determinate';
+    }
+  }
+};
 
+var _hoisted_1 = ["aria-valuenow"];
 function render(_ctx, _cache, $props, $setup, $data, $options) {
-  return (vue.openBlock(), vue.createElementBlock("div", vue.mergeProps({
+  return vue.openBlock(), vue.createElementBlock("div", vue.mergeProps({
     role: "progressbar",
-    class: $options.containerClass,
+    "class": _ctx.cx('root'),
     "aria-valuemin": "0",
-    "aria-valuenow": $props.value,
+    "aria-valuenow": _ctx.value,
     "aria-valuemax": "100"
-  }, _ctx.ptm('root')), [
-    ($options.determinate)
-      ? (vue.openBlock(), vue.createElementBlock("div", vue.mergeProps({
-          key: 0,
-          class: "p-progressbar-value p-progressbar-value-animate",
-          style: $options.progressStyle
-        }, _ctx.ptm('value')), [
-          ($props.value != null && $props.value !== 0 && $props.showValue)
-            ? (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)
-        ], 16))
-      : vue.createCommentVNode("", true),
-    ($options.indeterminate)
-      ? (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)
-  ], 16, _hoisted_1))
+  }, _ctx.ptm('root')), [$options.determinate ? (vue.openBlock(), vue.createElementBlock("div", vue.mergeProps({
+    key: 0,
+    "class": _ctx.cx('value'),
+    style: $options.progressStyle
+  }, _ctx.ptm('value')), [_ctx.value != null && _ctx.value !== 0 && _ctx.showValue ? (vue.openBlock(), vue.createElementBlock("div", vue.mergeProps({
+    key: 0,
+    "class": _ctx.cx('label')
+  }, _ctx.ptm('label')), [vue.renderSlot(_ctx.$slots, "default", {}, function () {
+    return [vue.createTextVNode(vue.toDisplayString(_ctx.value + '%'), 1)];
+  })], 16)) : vue.createCommentVNode("", true)], 16)) : vue.createCommentVNode("", true), $options.indeterminate ? (vue.openBlock(), vue.createElementBlock("div", vue.mergeProps({
+    key: 1,
+    "class": _ctx.cx('container')
+  }, _ctx.ptm('container')), [vue.createElementVNode("div", vue.mergeProps({
+    "class": _ctx.cx('value')
+  }, _ctx.ptm('value')), null, 16)], 16)) : vue.createCommentVNode("", true)], 16, _hoisted_1);
 }
 
-function styleInject(css, ref) {
-  if ( ref === void 0 ) ref = {};
-  var insertAt = ref.insertAt;
-
-  if (!css || typeof document === 'undefined') { return; }
-
-  var head = document.head || document.getElementsByTagName('head')[0];
-  var style = document.createElement('style');
-  style.type = 'text/css';
-
-  if (insertAt === 'top') {
-    if (head.firstChild) {
-      head.insertBefore(style, head.firstChild);
-    } else {
-      head.appendChild(style);
-    }
-  } else {
-    head.appendChild(style);
-  }
-
-  if (style.styleSheet) {
-    style.styleSheet.cssText = css;
-  } else {
-    style.appendChild(document.createTextNode(css));
-  }
-}
-
-var css_248z = "\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";
-styleInject(css_248z);
-
 script.render = render;
 
 module.exports = script;

package/progressbar/progressbar.cjs.min.js

@@ -1 +1 @@
-"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;
+"use strict";var e=require("primevue/basecomponent"),n=require("primevue/usestyle"),r=require("vue");function t(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var a=t(e),i=n.useStyle("\n.p-progressbar {\n    position: relative;\n    overflow: hidden;\n}\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\n.p-progressbar-determinate .p-progressbar-label {\n    display: inline-flex;\n}\n\n.p-progressbar-determinate .p-progressbar-value-animate {\n    transition: width 1s ease-in-out;\n}\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\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\n@-webkit-keyframes p-progressbar-indeterminate-anim {\n    0% {\n        left: -35%;\n        right: 100%;\n    }\n    60% {\n        left: 100%;\n        right: -90%;\n    }\n    100% {\n        left: 100%;\n        right: -90%;\n    }\n}\n@keyframes p-progressbar-indeterminate-anim {\n    0% {\n        left: -35%;\n        right: 100%;\n    }\n    60% {\n        left: 100%;\n        right: -90%;\n    }\n    100% {\n        left: 100%;\n        right: -90%;\n    }\n}\n\n@-webkit-keyframes p-progressbar-indeterminate-anim-short {\n    0% {\n        left: -200%;\n        right: 100%;\n    }\n    60% {\n        left: 107%;\n        right: -8%;\n    }\n    100% {\n        left: 107%;\n        right: -8%;\n    }\n}\n@keyframes p-progressbar-indeterminate-anim-short {\n    0% {\n        left: -200%;\n        right: 100%;\n    }\n    60% {\n        left: 107%;\n        right: -8%;\n    }\n    100% {\n        left: 107%;\n        right: -8%;\n    }\n}\n",{name:"progressbar",manual:!0}),o={name:"ProgressBar",extends:{name:"BaseProgressBar",extends:a.default,props:{value:{type:Number,default:null},mode:{type:String,default:"determinate"},showValue:{type:Boolean,default:!0}},css:{classes:{root:function(e){var n=e.instance;return["p-progressbar p-component",{"p-progressbar-determinate":n.determinate,"p-progressbar-indeterminate":n.indeterminate}]},container:"p-progressbar-indeterminate-container",value:"p-progressbar-value p-progressbar-value-animate",label:"p-progressbar-label"},loadStyle:i.load},provide:function(){return{$parentInstance:this}}},computed:{progressStyle:function(){return{width:this.value+"%",display:"flex"}},indeterminate:function(){return"indeterminate"===this.mode},determinate:function(){return"determinate"===this.mode}}},s=["aria-valuenow"];o.render=function(e,n,t,a,i,o){return r.openBlock(),r.createElementBlock("div",r.mergeProps({role:"progressbar",class:e.cx("root"),"aria-valuemin":"0","aria-valuenow":e.value,"aria-valuemax":"100"},e.ptm("root")),[o.determinate?(r.openBlock(),r.createElementBlock("div",r.mergeProps({key:0,class:e.cx("value"),style:o.progressStyle},e.ptm("value")),[null!=e.value&&0!==e.value&&e.showValue?(r.openBlock(),r.createElementBlock("div",r.mergeProps({key:0,class:e.cx("label")},e.ptm("label")),[r.renderSlot(e.$slots,"default",{},(function(){return[r.createTextVNode(r.toDisplayString(e.value+"%"),1)]}))],16)):r.createCommentVNode("",!0)],16)):r.createCommentVNode("",!0),o.indeterminate?(r.openBlock(),r.createElementBlock("div",r.mergeProps({key:1,class:e.cx("container")},e.ptm("container")),[r.createElementVNode("div",r.mergeProps({class:e.cx("value")},e.ptm("value")),null,16)],16)):r.createCommentVNode("",!0)],16,s)},module.exports=o;

package/progressbar/progressbar.esm.js

@@ -1,117 +1,97 @@
 import BaseComponent from 'primevue/basecomponent';
+import { useStyle } from 'primevue/usestyle';
 import { openBlock, createElementBlock, mergeProps, renderSlot, createTextVNode, toDisplayString, createCommentVNode, createElementVNode } from 'vue';
 
-var script = {
-    name: 'ProgressBar',
-    extends: BaseComponent,
-    props: {
-        value: {
-            type: Number,
-            default: null
-        },
-        mode: {
-            type: String,
-            default: 'determinate'
-        },
-        showValue: {
-            type: Boolean,
-            default: true
-        }
+var styles = "\n.p-progressbar {\n    position: relative;\n    overflow: hidden;\n}\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\n.p-progressbar-determinate .p-progressbar-label {\n    display: inline-flex;\n}\n\n.p-progressbar-determinate .p-progressbar-value-animate {\n    transition: width 1s ease-in-out;\n}\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\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\n@-webkit-keyframes p-progressbar-indeterminate-anim {\n    0% {\n        left: -35%;\n        right: 100%;\n    }\n    60% {\n        left: 100%;\n        right: -90%;\n    }\n    100% {\n        left: 100%;\n        right: -90%;\n    }\n}\n@keyframes p-progressbar-indeterminate-anim {\n    0% {\n        left: -35%;\n        right: 100%;\n    }\n    60% {\n        left: 100%;\n        right: -90%;\n    }\n    100% {\n        left: 100%;\n        right: -90%;\n    }\n}\n\n@-webkit-keyframes p-progressbar-indeterminate-anim-short {\n    0% {\n        left: -200%;\n        right: 100%;\n    }\n    60% {\n        left: 107%;\n        right: -8%;\n    }\n    100% {\n        left: 107%;\n        right: -8%;\n    }\n}\n@keyframes p-progressbar-indeterminate-anim-short {\n    0% {\n        left: -200%;\n        right: 100%;\n    }\n    60% {\n        left: 107%;\n        right: -8%;\n    }\n    100% {\n        left: 107%;\n        right: -8%;\n    }\n}\n";
+var classes = {
+  root: function root(_ref) {
+    var instance = _ref.instance;
+    return ['p-progressbar p-component', {
+      'p-progressbar-determinate': instance.determinate,
+      'p-progressbar-indeterminate': instance.indeterminate
+    }];
+  },
+  container: 'p-progressbar-indeterminate-container',
+  value: 'p-progressbar-value p-progressbar-value-animate',
+  label: 'p-progressbar-label'
+};
+var _useStyle = useStyle(styles, {
+    name: 'progressbar',
+    manual: true
+  }),
+  loadStyle = _useStyle.load;
+var script$1 = {
+  name: 'BaseProgressBar',
+  "extends": BaseComponent,
+  props: {
+    value: {
+      type: Number,
+      "default": null
+    },
+    mode: {
+      type: String,
+      "default": 'determinate'
     },
-    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 this.mode === 'indeterminate';
-        },
-        determinate() {
-            return this.mode === 'determinate';
-        }
+    showValue: {
+      type: Boolean,
+      "default": true
     }
+  },
+  css: {
+    classes: classes,
+    loadStyle: loadStyle
+  },
+  provide: function provide() {
+    return {
+      $parentInstance: this
+    };
+  }
 };
 
-const _hoisted_1 = ["aria-valuenow"];
+var script = {
+  name: 'ProgressBar',
+  "extends": script$1,
+  computed: {
+    progressStyle: function progressStyle() {
+      return {
+        width: this.value + '%',
+        display: 'flex'
+      };
+    },
+    indeterminate: function indeterminate() {
+      return this.mode === 'indeterminate';
+    },
+    determinate: function determinate() {
+      return this.mode === 'determinate';
+    }
+  }
+};
 
+var _hoisted_1 = ["aria-valuenow"];
 function render(_ctx, _cache, $props, $setup, $data, $options) {
-  return (openBlock(), createElementBlock("div", mergeProps({
+  return openBlock(), createElementBlock("div", mergeProps({
     role: "progressbar",
-    class: $options.containerClass,
+    "class": _ctx.cx('root'),
     "aria-valuemin": "0",
-    "aria-valuenow": $props.value,
+    "aria-valuenow": _ctx.value,
     "aria-valuemax": "100"
-  }, _ctx.ptm('root')), [
-    ($options.determinate)
-      ? (openBlock(), createElementBlock("div", mergeProps({
-          key: 0,
-          class: "p-progressbar-value p-progressbar-value-animate",
-          style: $options.progressStyle
-        }, _ctx.ptm('value')), [
-          ($props.value != null && $props.value !== 0 && $props.showValue)
-            ? (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)
-        ], 16))
-      : createCommentVNode("", true),
-    ($options.indeterminate)
-      ? (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)
-  ], 16, _hoisted_1))
+  }, _ctx.ptm('root')), [$options.determinate ? (openBlock(), createElementBlock("div", mergeProps({
+    key: 0,
+    "class": _ctx.cx('value'),
+    style: $options.progressStyle
+  }, _ctx.ptm('value')), [_ctx.value != null && _ctx.value !== 0 && _ctx.showValue ? (openBlock(), createElementBlock("div", mergeProps({
+    key: 0,
+    "class": _ctx.cx('label')
+  }, _ctx.ptm('label')), [renderSlot(_ctx.$slots, "default", {}, function () {
+    return [createTextVNode(toDisplayString(_ctx.value + '%'), 1)];
+  })], 16)) : createCommentVNode("", true)], 16)) : createCommentVNode("", true), $options.indeterminate ? (openBlock(), createElementBlock("div", mergeProps({
+    key: 1,
+    "class": _ctx.cx('container')
+  }, _ctx.ptm('container')), [createElementVNode("div", mergeProps({
+    "class": _ctx.cx('value')
+  }, _ctx.ptm('value')), null, 16)], 16)) : createCommentVNode("", true)], 16, _hoisted_1);
 }
 
-function styleInject(css, ref) {
-  if ( ref === void 0 ) ref = {};
-  var insertAt = ref.insertAt;
-
-  if (!css || typeof document === 'undefined') { return; }
-
-  var head = document.head || document.getElementsByTagName('head')[0];
-  var style = document.createElement('style');
-  style.type = 'text/css';
-
-  if (insertAt === 'top') {
-    if (head.firstChild) {
-      head.insertBefore(style, head.firstChild);
-    } else {
-      head.appendChild(style);
-    }
-  } else {
-    head.appendChild(style);
-  }
-
-  if (style.styleSheet) {
-    style.styleSheet.cssText = css;
-  } else {
-    style.appendChild(document.createTextNode(css));
-  }
-}
-
-var css_248z = "\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";
-styleInject(css_248z);
-
 script.render = render;
 
 export { script as default };

package/progressbar/progressbar.esm.min.js

@@ -1 +1 @@
-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};
+import e from"primevue/basecomponent";import{useStyle as n}from"primevue/usestyle";import{openBlock as r,createElementBlock as t,mergeProps as a,renderSlot as i,createTextVNode as s,toDisplayString as o,createCommentVNode as l,createElementVNode as p}from"vue";var m=n("\n.p-progressbar {\n    position: relative;\n    overflow: hidden;\n}\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\n.p-progressbar-determinate .p-progressbar-label {\n    display: inline-flex;\n}\n\n.p-progressbar-determinate .p-progressbar-value-animate {\n    transition: width 1s ease-in-out;\n}\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\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\n@-webkit-keyframes p-progressbar-indeterminate-anim {\n    0% {\n        left: -35%;\n        right: 100%;\n    }\n    60% {\n        left: 100%;\n        right: -90%;\n    }\n    100% {\n        left: 100%;\n        right: -90%;\n    }\n}\n@keyframes p-progressbar-indeterminate-anim {\n    0% {\n        left: -35%;\n        right: 100%;\n    }\n    60% {\n        left: 100%;\n        right: -90%;\n    }\n    100% {\n        left: 100%;\n        right: -90%;\n    }\n}\n\n@-webkit-keyframes p-progressbar-indeterminate-anim-short {\n    0% {\n        left: -200%;\n        right: 100%;\n    }\n    60% {\n        left: 107%;\n        right: -8%;\n    }\n    100% {\n        left: 107%;\n        right: -8%;\n    }\n}\n@keyframes p-progressbar-indeterminate-anim-short {\n    0% {\n        left: -200%;\n        right: 100%;\n    }\n    60% {\n        left: 107%;\n        right: -8%;\n    }\n    100% {\n        left: 107%;\n        right: -8%;\n    }\n}\n",{name:"progressbar",manual:!0}),u={name:"ProgressBar",extends:{name:"BaseProgressBar",extends:e,props:{value:{type:Number,default:null},mode:{type:String,default:"determinate"},showValue:{type:Boolean,default:!0}},css:{classes:{root:function(e){var n=e.instance;return["p-progressbar p-component",{"p-progressbar-determinate":n.determinate,"p-progressbar-indeterminate":n.indeterminate}]},container:"p-progressbar-indeterminate-container",value:"p-progressbar-value p-progressbar-value-animate",label:"p-progressbar-label"},loadStyle:m.load},provide:function(){return{$parentInstance:this}}},computed:{progressStyle:function(){return{width:this.value+"%",display:"flex"}},indeterminate:function(){return"indeterminate"===this.mode},determinate:function(){return"determinate"===this.mode}}},d=["aria-valuenow"];u.render=function(e,n,m,u,b,g){return r(),t("div",a({role:"progressbar",class:e.cx("root"),"aria-valuemin":"0","aria-valuenow":e.value,"aria-valuemax":"100"},e.ptm("root")),[g.determinate?(r(),t("div",a({key:0,class:e.cx("value"),style:g.progressStyle},e.ptm("value")),[null!=e.value&&0!==e.value&&e.showValue?(r(),t("div",a({key:0,class:e.cx("label")},e.ptm("label")),[i(e.$slots,"default",{},(function(){return[s(o(e.value+"%"),1)]}))],16)):l("",!0)],16)):l("",!0),g.indeterminate?(r(),t("div",a({key:1,class:e.cx("container")},e.ptm("container")),[p("div",a({class:e.cx("value")},e.ptm("value")),null,16)],16)):l("",!0)],16,d)};export{u as default};