primevue 3.29.2 → 3.30.0

package/togglebutton/togglebutton.js

@@ -1,193 +1,216 @@
 this.primevue = this.primevue || {};
-this.primevue.togglebutton = (function (BaseComponent, Ripple, vue) {
+this.primevue.togglebutton = (function (Ripple, 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 Ripple__default = /*#__PURE__*/_interopDefaultLegacy(Ripple);
+    var BaseComponent__default = /*#__PURE__*/_interopDefaultLegacy(BaseComponent);
+
+    var classes = {
+      root: function root(_ref) {
+        var instance = _ref.instance,
+          props = _ref.props;
+        return ['p-button p-togglebutton p-component', {
+          'p-focus': instance.focused,
+          'p-button-icon-only': instance.hasIcon && !instance.hasLabel,
+          'p-disabled': props.disabled,
+          'p-highlight': props.modelValue === true
+        }];
+      },
+      icon: function icon(_ref2) {
+        var instance = _ref2.instance,
+          props = _ref2.props;
+        return ['p-button-icon', {
+          'p-button-icon-left': props.iconPos === 'left' && instance.label,
+          'p-button-icon-right': props.iconPos === 'right' && instance.label
+        }];
+      },
+      label: 'p-button-label'
+    };
+    var script$1 = {
+      name: 'BaseToggleButton',
+      "extends": BaseComponent__default["default"],
+      props: {
+        modelValue: Boolean,
+        onIcon: String,
+        offIcon: String,
+        onLabel: {
+          type: String,
+          "default": 'Yes'
+        },
+        offLabel: {
+          type: String,
+          "default": 'No'
+        },
+        iconPos: {
+          type: String,
+          "default": 'left'
+        },
+        disabled: {
+          type: Boolean,
+          "default": false
+        },
+        tabindex: {
+          type: Number,
+          "default": null
+        },
+        inputId: {
+          type: String,
+          "default": null
+        },
+        inputClass: {
+          type: [String, Object],
+          "default": null
+        },
+        inputStyle: {
+          type: Object,
+          "default": null
+        },
+        inputProps: {
+          type: null,
+          "default": null
+        },
+        'aria-labelledby': {
+          type: String,
+          "default": null
+        },
+        'aria-label': {
+          type: String,
+          "default": null
+        }
+      },
+      css: {
+        classes: classes
+      },
+      provide: function provide() {
+        return {
+          $parentInstance: this
+        };
+      }
+    };
 
     var script = {
-        name: 'ToggleButton',
-        extends: BaseComponent__default["default"],
-        emits: ['update:modelValue', 'change', 'click', 'focus', 'blur'],
-        props: {
-            modelValue: Boolean,
-            onIcon: String,
-            offIcon: String,
-            onLabel: {
-                type: String,
-                default: 'Yes'
-            },
-            offLabel: {
-                type: String,
-                default: 'No'
-            },
-            iconPos: {
-                type: String,
-                default: 'left'
-            },
-            disabled: {
-                type: Boolean,
-                default: false
-            },
-            tabindex: {
-                type: Number,
-                default: null
-            },
-            inputId: {
-                type: String,
-                default: null
-            },
-            inputClass: {
-                type: [String, Object],
-                default: null
-            },
-            inputStyle: {
-                type: Object,
-                default: null
-            },
-            inputProps: {
-                type: null,
-                default: null
-            },
-            'aria-labelledby': {
-                type: String,
-                default: null
-            },
-            'aria-label': {
-                type: String,
-                default: null
-            }
-        },
-        outsideClickListener: null,
-        data() {
-            return {
-                focused: false
+      name: 'ToggleButton',
+      "extends": script$1,
+      emits: ['update:modelValue', 'change', 'click', 'focus', 'blur'],
+      outsideClickListener: null,
+      data: function data() {
+        return {
+          focused: false
+        };
+      },
+      mounted: function mounted() {
+        this.bindOutsideClickListener();
+      },
+      beforeUnmount: function beforeUnmount() {
+        this.unbindOutsideClickListener();
+      },
+      methods: {
+        onClick: function onClick(event) {
+          if (!this.disabled) {
+            this.$emit('update:modelValue', !this.modelValue);
+            this.$emit('change', event);
+            this.$emit('click', event);
+            this.focused = true;
+          }
+        },
+        onFocus: function onFocus(event) {
+          this.focused = true;
+          this.$emit('focus', event);
+        },
+        onBlur: function onBlur(event) {
+          this.focused = false;
+          this.$emit('blur', event);
+        },
+        bindOutsideClickListener: function bindOutsideClickListener() {
+          var _this = this;
+          if (!this.outsideClickListener) {
+            this.outsideClickListener = function (event) {
+              if (_this.focused && !_this.$refs.container.contains(event.target)) {
+                _this.focused = false;
+              }
             };
+            document.addEventListener('click', this.outsideClickListener);
+          }
         },
-        mounted() {
-            this.bindOutsideClickListener();
-        },
-        beforeUnmount() {
-            this.unbindOutsideClickListener();
-        },
-        methods: {
-            onClick(event) {
-                if (!this.disabled) {
-                    this.$emit('update:modelValue', !this.modelValue);
-                    this.$emit('change', event);
-                    this.$emit('click', event);
-                    this.focused = true;
-                }
-            },
-            onFocus(event) {
-                this.focused = true;
-                this.$emit('focus', event);
-            },
-            onBlur(event) {
-                this.focused = false;
-                this.$emit('blur', event);
-            },
-            bindOutsideClickListener() {
-                if (!this.outsideClickListener) {
-                    this.outsideClickListener = (event) => {
-                        if (this.focused && !this.$refs.container.contains(event.target)) {
-                            this.focused = false;
-                        }
-                    };
-
-                    document.addEventListener('click', this.outsideClickListener);
-                }
-            },
-            unbindOutsideClickListener() {
-                if (this.outsideClickListener) {
-                    document.removeEventListener('click', this.outsideClickListener);
-                    this.outsideClickListener = null;
-                }
-            }
-        },
-        computed: {
-            buttonClass() {
-                return [
-                    'p-button p-togglebutton p-component',
-                    {
-                        'p-focus': this.focused,
-                        'p-button-icon-only': this.hasIcon && !this.hasLabel,
-                        'p-disabled': this.disabled,
-                        'p-highlight': this.modelValue === true
-                    }
-                ];
-            },
-            iconClass() {
-                return [
-                    this.modelValue ? this.onIcon : this.offIcon,
-                    'p-button-icon',
-                    {
-                        'p-button-icon-left': this.iconPos === 'left' && this.label,
-                        'p-button-icon-right': this.iconPos === 'right' && this.label
-                    }
-                ];
-            },
-            hasLabel() {
-                return this.onLabel && this.onLabel.length > 0 && this.offLabel && this.offLabel.length > 0;
-            },
-            hasIcon() {
-                return this.$slots.icon || (this.onIcon && this.offIcon);
-            },
-            label() {
-                return this.hasLabel ? (this.modelValue ? this.onLabel : this.offLabel) : ' ';
-            }
-        },
-        directives: {
-            ripple: Ripple__default["default"]
+        unbindOutsideClickListener: function unbindOutsideClickListener() {
+          if (this.outsideClickListener) {
+            document.removeEventListener('click', this.outsideClickListener);
+            this.outsideClickListener = null;
+          }
+        }
+      },
+      computed: {
+        hasLabel: function hasLabel() {
+          return this.onLabel && this.onLabel.length > 0 && this.offLabel && this.offLabel.length > 0;
+        },
+        hasIcon: function hasIcon() {
+          return this.$slots.icon || this.onIcon && this.offIcon;
+        },
+        label: function label() {
+          return this.hasLabel ? this.modelValue ? this.onLabel : this.offLabel : ' ';
         }
+      },
+      directives: {
+        ripple: Ripple__default["default"]
+      }
     };
 
-    const _hoisted_1 = ["id", "checked", "value", "aria-labelledby", "aria-label"];
-
+    function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (obj) { return typeof obj; } : function (obj) { return obj && "function" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }, _typeof(obj); }
+    function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+    function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+    function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+    function _toPropertyKey(arg) { var key = _toPrimitive(arg, "string"); return _typeof(key) === "symbol" ? key : String(key); }
+    function _toPrimitive(input, hint) { if (_typeof(input) !== "object" || input === null) return input; var prim = input[Symbol.toPrimitive]; if (prim !== undefined) { var res = prim.call(input, hint || "default"); if (_typeof(res) !== "object") return res; throw new TypeError("@@toPrimitive must return a primitive value."); } return (hint === "string" ? String : Number)(input); }
+    var _hoisted_1 = ["data-p-active"];
+    var _hoisted_2 = ["id", "checked", "value", "aria-labelledby", "aria-label"];
     function render(_ctx, _cache, $props, $setup, $data, $options) {
-      const _directive_ripple = vue.resolveDirective("ripple");
-
+      var _directive_ripple = vue.resolveDirective("ripple");
       return vue.withDirectives((vue.openBlock(), vue.createElementBlock("div", vue.mergeProps({
         ref: "container",
-        class: $options.buttonClass,
-        onClick: _cache[2] || (_cache[2] = $event => ($options.onClick($event)))
-      }, _ctx.ptm('root')), [
-        vue.createElementVNode("span", vue.mergeProps({ class: "p-hidden-accessible" }, _ctx.ptm('hiddenInputWrapper')), [
-          vue.createElementVNode("input", vue.mergeProps({
-            id: $props.inputId,
-            type: "checkbox",
-            role: "switch",
-            class: $props.inputClass,
-            style: $props.inputStyle,
-            checked: $props.modelValue,
-            value: $props.modelValue,
-            "aria-labelledby": _ctx.ariaLabelledby,
-            "aria-label": _ctx.ariaLabel,
-            onFocus: _cache[0] || (_cache[0] = $event => ($options.onFocus($event))),
-            onBlur: _cache[1] || (_cache[1] = $event => ($options.onBlur($event)))
-          }, { ...$props.inputProps, ..._ctx.ptm('hiddenInput') }), null, 16, _hoisted_1)
-        ], 16),
-        vue.renderSlot(_ctx.$slots, "icon", {
-          value: $props.modelValue,
-          class: vue.normalizeClass($options.iconClass)
-        }, () => [
-          ($props.onIcon || $props.offIcon)
-            ? (vue.openBlock(), vue.createElementBlock("span", vue.mergeProps({
-                key: 0,
-                class: $options.iconClass
-              }, _ctx.ptm('icon')), null, 16))
-            : vue.createCommentVNode("", true)
-        ]),
-        vue.createElementVNode("span", vue.mergeProps({ class: "p-button-label" }, _ctx.ptm('label')), vue.toDisplayString($options.label), 17)
-      ], 16)), [
-        [_directive_ripple]
-      ])
+        "class": _ctx.cx('root'),
+        onClick: _cache[2] || (_cache[2] = function ($event) {
+          return $options.onClick($event);
+        })
+      }, _ctx.ptm('root'), {
+        "data-p-active": _ctx.modelValue === true,
+        "data-pc-name": "togglebutton"
+      }), [vue.createElementVNode("span", vue.mergeProps({
+        "class": "p-hidden-accessible"
+      }, _ctx.ptm('hiddenInputWrapper'), {
+        "data-p-hidden-accessible": true
+      }), [vue.createElementVNode("input", vue.mergeProps({
+        id: _ctx.inputId,
+        type: "checkbox",
+        role: "switch",
+        "class": _ctx.inputClass,
+        style: _ctx.inputStyle,
+        checked: _ctx.modelValue,
+        value: _ctx.modelValue,
+        "aria-labelledby": _ctx.ariaLabelledby,
+        "aria-label": _ctx.ariaLabel,
+        onFocus: _cache[0] || (_cache[0] = function ($event) {
+          return $options.onFocus($event);
+        }),
+        onBlur: _cache[1] || (_cache[1] = function ($event) {
+          return $options.onBlur($event);
+        })
+      }, _objectSpread(_objectSpread({}, _ctx.inputProps), _ctx.ptm('hiddenInput'))), null, 16, _hoisted_2)], 16), vue.renderSlot(_ctx.$slots, "icon", {
+        value: _ctx.modelValue,
+        "class": vue.normalizeClass(_ctx.cx('icon'))
+      }, function () {
+        return [_ctx.onIcon || _ctx.offIcon ? (vue.openBlock(), vue.createElementBlock("span", vue.mergeProps({
+          key: 0,
+          "class": [_ctx.cx('icon'), _ctx.modelValue ? _ctx.onIcon : _ctx.offIcon]
+        }, _ctx.ptm('icon')), null, 16)) : vue.createCommentVNode("", true)];
+      }), vue.createElementVNode("span", vue.mergeProps({
+        "class": _ctx.cx('label')
+      }, _ctx.ptm('label')), vue.toDisplayString($options.label), 17)], 16, _hoisted_1)), [[_directive_ripple]]);
     }
 
     script.render = render;
 
     return script;
 
-})(primevue.basecomponent, primevue.ripple, Vue);
+})(primevue.ripple, primevue.basecomponent, Vue);

package/togglebutton/togglebutton.min.js

@@ -1 +1 @@
-this.primevue=this.primevue||{},this.primevue.togglebutton=function(e,t,i){"use strict";function l(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var n=l(e),s=l(t),o={name:"ToggleButton",extends:n.default,emits:["update:modelValue","change","click","focus","blur"],props:{modelValue:Boolean,onIcon:String,offIcon:String,onLabel:{type:String,default:"Yes"},offLabel:{type:String,default:"No"},iconPos:{type:String,default:"left"},disabled:{type:Boolean,default:!1},tabindex:{type:Number,default:null},inputId:{type:String,default:null},inputClass:{type:[String,Object],default:null},inputStyle:{type:Object,default:null},inputProps:{type:null,default:null},"aria-labelledby":{type:String,default:null},"aria-label":{type:String,default:null}},outsideClickListener:null,data:()=>({focused:!1}),mounted(){this.bindOutsideClickListener()},beforeUnmount(){this.unbindOutsideClickListener()},methods:{onClick(e){this.disabled||(this.$emit("update:modelValue",!this.modelValue),this.$emit("change",e),this.$emit("click",e),this.focused=!0)},onFocus(e){this.focused=!0,this.$emit("focus",e)},onBlur(e){this.focused=!1,this.$emit("blur",e)},bindOutsideClickListener(){this.outsideClickListener||(this.outsideClickListener=e=>{this.focused&&!this.$refs.container.contains(e.target)&&(this.focused=!1)},document.addEventListener("click",this.outsideClickListener))},unbindOutsideClickListener(){this.outsideClickListener&&(document.removeEventListener("click",this.outsideClickListener),this.outsideClickListener=null)}},computed:{buttonClass(){return["p-button p-togglebutton p-component",{"p-focus":this.focused,"p-button-icon-only":this.hasIcon&&!this.hasLabel,"p-disabled":this.disabled,"p-highlight":!0===this.modelValue}]},iconClass(){return[this.modelValue?this.onIcon:this.offIcon,"p-button-icon",{"p-button-icon-left":"left"===this.iconPos&&this.label,"p-button-icon-right":"right"===this.iconPos&&this.label}]},hasLabel(){return this.onLabel&&this.onLabel.length>0&&this.offLabel&&this.offLabel.length>0},hasIcon(){return this.$slots.icon||this.onIcon&&this.offIcon},label(){return this.hasLabel?this.modelValue?this.onLabel:this.offLabel:" "}},directives:{ripple:s.default}};const a=["id","checked","value","aria-labelledby","aria-label"];return o.render=function(e,t,l,n,s,o){const u=i.resolveDirective("ripple");return i.withDirectives((i.openBlock(),i.createElementBlock("div",i.mergeProps({ref:"container",class:o.buttonClass,onClick:t[2]||(t[2]=e=>o.onClick(e))},e.ptm("root")),[i.createElementVNode("span",i.mergeProps({class:"p-hidden-accessible"},e.ptm("hiddenInputWrapper")),[i.createElementVNode("input",i.mergeProps({id:l.inputId,type:"checkbox",role:"switch",class:l.inputClass,style:l.inputStyle,checked:l.modelValue,value:l.modelValue,"aria-labelledby":e.ariaLabelledby,"aria-label":e.ariaLabel,onFocus:t[0]||(t[0]=e=>o.onFocus(e)),onBlur:t[1]||(t[1]=e=>o.onBlur(e))},{...l.inputProps,...e.ptm("hiddenInput")}),null,16,a)],16),i.renderSlot(e.$slots,"icon",{value:l.modelValue,class:i.normalizeClass(o.iconClass)},(()=>[l.onIcon||l.offIcon?(i.openBlock(),i.createElementBlock("span",i.mergeProps({key:0,class:o.iconClass},e.ptm("icon")),null,16)):i.createCommentVNode("",!0)])),i.createElementVNode("span",i.mergeProps({class:"p-button-label"},e.ptm("label")),i.toDisplayString(o.label),17)],16)),[[u]])},o}(primevue.basecomponent,primevue.ripple,Vue);
+this.primevue=this.primevue||{},this.primevue.togglebutton=function(e,t,n){"use strict";function i(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var o=i(e),l={name:"ToggleButton",extends:{name:"BaseToggleButton",extends:i(t).default,props:{modelValue:Boolean,onIcon:String,offIcon:String,onLabel:{type:String,default:"Yes"},offLabel:{type:String,default:"No"},iconPos:{type:String,default:"left"},disabled:{type:Boolean,default:!1},tabindex:{type:Number,default:null},inputId:{type:String,default:null},inputClass:{type:[String,Object],default:null},inputStyle:{type:Object,default:null},inputProps:{type:null,default:null},"aria-labelledby":{type:String,default:null},"aria-label":{type:String,default:null}},css:{classes:{root:function(e){var t=e.instance,n=e.props;return["p-button p-togglebutton p-component",{"p-focus":t.focused,"p-button-icon-only":t.hasIcon&&!t.hasLabel,"p-disabled":n.disabled,"p-highlight":!0===n.modelValue}]},icon:function(e){var t=e.instance,n=e.props;return["p-button-icon",{"p-button-icon-left":"left"===n.iconPos&&t.label,"p-button-icon-right":"right"===n.iconPos&&t.label}]},label:"p-button-label"}},provide:function(){return{$parentInstance:this}}},emits:["update:modelValue","change","click","focus","blur"],outsideClickListener:null,data:function(){return{focused:!1}},mounted:function(){this.bindOutsideClickListener()},beforeUnmount:function(){this.unbindOutsideClickListener()},methods:{onClick:function(e){this.disabled||(this.$emit("update:modelValue",!this.modelValue),this.$emit("change",e),this.$emit("click",e),this.focused=!0)},onFocus:function(e){this.focused=!0,this.$emit("focus",e)},onBlur:function(e){this.focused=!1,this.$emit("blur",e)},bindOutsideClickListener:function(){var e=this;this.outsideClickListener||(this.outsideClickListener=function(t){e.focused&&!e.$refs.container.contains(t.target)&&(e.focused=!1)},document.addEventListener("click",this.outsideClickListener))},unbindOutsideClickListener:function(){this.outsideClickListener&&(document.removeEventListener("click",this.outsideClickListener),this.outsideClickListener=null)}},computed:{hasLabel:function(){return this.onLabel&&this.onLabel.length>0&&this.offLabel&&this.offLabel.length>0},hasIcon:function(){return this.$slots.icon||this.onIcon&&this.offIcon},label:function(){return this.hasLabel?this.modelValue?this.onLabel:this.offLabel:"&nbsp;"}},directives:{ripple:o.default}};function r(e){return r="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(e){return typeof e}:function(e){return e&&"function"==typeof Symbol&&e.constructor===Symbol&&e!==Symbol.prototype?"symbol":typeof e},r(e)}function u(e,t){var n=Object.keys(e);if(Object.getOwnPropertySymbols){var i=Object.getOwnPropertySymbols(e);t&&(i=i.filter((function(t){return Object.getOwnPropertyDescriptor(e,t).enumerable}))),n.push.apply(n,i)}return n}function c(e){for(var t=1;t<arguments.length;t++){var n=null!=arguments[t]?arguments[t]:{};t%2?u(Object(n),!0).forEach((function(t){s(e,t,n[t])})):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(n)):u(Object(n)).forEach((function(t){Object.defineProperty(e,t,Object.getOwnPropertyDescriptor(n,t))}))}return e}function s(e,t,n){return(t=a(t))in e?Object.defineProperty(e,t,{value:n,enumerable:!0,configurable:!0,writable:!0}):e[t]=n,e}function a(e){var t=p(e,"string");return"symbol"===r(t)?t:String(t)}function p(e,t){if("object"!==r(e)||null===e)return e;var n=e[Symbol.toPrimitive];if(void 0!==n){var i=n.call(e,t||"default");if("object"!==r(i))return i;throw new TypeError("@@toPrimitive must return a primitive value.")}return("string"===t?String:Number)(e)}var d=["data-p-active"],f=["id","checked","value","aria-labelledby","aria-label"];return l.render=function(e,t,i,o,l,r){var u=n.resolveDirective("ripple");return n.withDirectives((n.openBlock(),n.createElementBlock("div",n.mergeProps({ref:"container",class:e.cx("root"),onClick:t[2]||(t[2]=function(e){return r.onClick(e)})},e.ptm("root"),{"data-p-active":!0===e.modelValue,"data-pc-name":"togglebutton"}),[n.createElementVNode("span",n.mergeProps({class:"p-hidden-accessible"},e.ptm("hiddenInputWrapper"),{"data-p-hidden-accessible":!0}),[n.createElementVNode("input",n.mergeProps({id:e.inputId,type:"checkbox",role:"switch",class:e.inputClass,style:e.inputStyle,checked:e.modelValue,value:e.modelValue,"aria-labelledby":e.ariaLabelledby,"aria-label":e.ariaLabel,onFocus:t[0]||(t[0]=function(e){return r.onFocus(e)}),onBlur:t[1]||(t[1]=function(e){return r.onBlur(e)})},c(c({},e.inputProps),e.ptm("hiddenInput"))),null,16,f)],16),n.renderSlot(e.$slots,"icon",{value:e.modelValue,class:n.normalizeClass(e.cx("icon"))},(function(){return[e.onIcon||e.offIcon?(n.openBlock(),n.createElementBlock("span",n.mergeProps({key:0,class:[e.cx("icon"),e.modelValue?e.onIcon:e.offIcon]},e.ptm("icon")),null,16)):n.createCommentVNode("",!0)]})),n.createElementVNode("span",n.mergeProps({class:e.cx("label")},e.ptm("label")),n.toDisplayString(r.label),17)],16,d)),[[u]])},l}(primevue.ripple,primevue.basecomponent,Vue);

package/toolbar/BaseToolbar.vue

@@ -0,0 +1,55 @@
+<script>
+import BaseComponent from 'primevue/basecomponent';
+import { useStyle } from 'primevue/usestyle';
+
+const styles = `
+.p-toolbar {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    flex-wrap: wrap;
+}
+
+.p-toolbar-group-start,
+.p-toolbar-group-center,
+.p-toolbar-group-end {
+    display: flex;
+    align-items: center;
+}
+
+.p-toolbar-group-left,
+.p-toolbar-group-right {
+    display: flex;
+    align-items: center;
+}
+`;
+
+const classes = {
+    root: 'p-toolbar p-component',
+    start: 'p-toolbar-group-start p-toolbar-group-left',
+    center: 'p-toolbar-group-center',
+    end: 'p-toolbar-group-end p-toolbar-group-right'
+};
+
+const { load: loadStyle, unload: unloadStyle } = useStyle(styles, { name: 'toolbar', manual: true });
+
+export default {
+    name: 'BaseToolbar',
+    extends: BaseComponent,
+    props: {
+        'aria-labelledby': {
+            type: String,
+            default: null
+        }
+    },
+    css: {
+        classes,
+        loadStyle
+    },
+    provide() {
+        return {
+            $parentInstance: this
+        };
+    }
+};
+</script>

package/toolbar/Toolbar.d.ts

@@ -8,6 +8,7 @@
  *
  */
 import { VNode } from 'vue';
+import { ComponentHooks } from '../basecomponent';
 import { ClassComponent, GlobalComponentConstructor } from '../ts-helpers';
 
 export declare type ToolbarPassThroughOptionType = ToolbarPassThroughAttributes | ((options: ToolbarPassThroughMethodOptions) => ToolbarPassThroughAttributes) | null | undefined;
@@ -16,6 +17,7 @@ export declare type ToolbarPassThroughOptionType = ToolbarPassThroughAttributes
  * Custom passthrough(pt) option method.
  */
 export interface ToolbarPassThroughMethodOptions {
+    instance: any;
     props: ToolbarProps;
 }
 
@@ -40,6 +42,11 @@ export interface ToolbarPassThroughOptions {
      * Uses to pass attributes to the right's DOM element.
      */
     end?: ToolbarPassThroughOptionType;
+    /**
+     * Uses to manage all lifecycle hooks
+     * @see {@link BaseComponent.ComponentHooks}
+     */
+    hooks?: ComponentHooks;
 }
 
 /**
@@ -62,6 +69,11 @@ export interface ToolbarProps {
      * @type {ToolbarPassThroughOptions}
      */
     pt?: ToolbarPassThroughOptions;
+    /**
+     * When enabled, it removes component related styles in the core.
+     * @defaultValue false
+     */
+    unstyled?: boolean;
 }
 
 /**

package/toolbar/Toolbar.vue

@@ -1,49 +1,22 @@
 <template>
-    <div class="p-toolbar p-component" role="toolbar" :aria-labelledby="ariaLabelledby" v-bind="ptm('root')">
-        <div class="p-toolbar-group-start p-toolbar-group-left" v-bind="ptm('start')">
+    <div :class="cx('root')" role="toolbar" :aria-labelledby="ariaLabelledby" v-bind="ptm('root')" data-pc-name="toolbar">
+        <div :class="cx('start')" data-pc-section="start" v-bind="ptm('start')">
             <slot name="start"></slot>
         </div>
-        <div class="p-toolbar-group-center" v-bind="ptm('center')">
+        <div :class="cx('center')" data-pc-section="center" v-bind="ptm('center')">
             <slot name="center"></slot>
         </div>
-        <div class="p-toolbar-group-end p-toolbar-group-right" v-bind="ptm('end')">
+        <div :class="cx('end')" data-pc-section="end" v-bind="ptm('end')">
             <slot name="end"></slot>
         </div>
     </div>
 </template>
 
 <script>
-import BaseComponent from 'primevue/basecomponent';
+import BaseToolbar from './BaseToolbar.vue';
+
 export default {
     name: 'Toolbar',
-    extends: BaseComponent,
-    props: {
-        'aria-labelledby': {
-            type: String,
-            default: null
-        }
-    }
+    extends: BaseToolbar
 };
 </script>
-
-<style>
-.p-toolbar {
-    display: flex;
-    align-items: center;
-    justify-content: space-between;
-    flex-wrap: wrap;
-}
-
-.p-toolbar-group-start,
-.p-toolbar-group-center,
-.p-toolbar-group-end {
-    display: flex;
-    align-items: center;
-}
-
-.p-toolbar-group-left,
-.p-toolbar-group-right {
-    display: flex;
-    align-items: center;
-}
-</style>