primevue 3.15.0 → 3.16.2

package/timeline/timeline.cjs.min.js

@@ -1 +1 @@
-"use strict";var e=require("primevue/utils"),n=require("vue"),t={name:"Timeline",props:{value:null,align:{mode:String,default:"left"},layout:{mode:String,default:"vertical"},dataKey:null},methods:{getKey(n,t){return this.dataKey?e.ObjectUtils.resolveFieldData(n,this.dataKey):t}},computed:{containerClass(){return["p-timeline p-component","p-timeline-"+this.align,"p-timeline-"+this.layout]}}};const i={class:"p-timeline-event-opposite"},l={class:"p-timeline-event-separator"},o=n.createElementVNode("div",{class:"p-timeline-event-marker"},null,-1),r=n.createElementVNode("div",{class:"p-timeline-event-connector"},null,-1),m={class:"p-timeline-event-content"};!function(e,n){void 0===n&&(n={});var t=n.insertAt;if(e&&"undefined"!=typeof document){var i=document.head||document.getElementsByTagName("head")[0],l=document.createElement("style");l.type="text/css","top"===t&&i.firstChild?i.insertBefore(l,i.firstChild):i.appendChild(l),l.styleSheet?l.styleSheet.cssText=e:l.appendChild(document.createTextNode(e))}}("\n.p-timeline {\n    display: -webkit-box;\n    display: -ms-flexbox;\n    display: flex;\n    -webkit-box-flex: 1;\n        -ms-flex-positive: 1;\n            flex-grow: 1;\n    -webkit-box-orient: vertical;\n    -webkit-box-direction: normal;\n        -ms-flex-direction: column;\n            flex-direction: column;\n}\n.p-timeline-left .p-timeline-event-opposite {\n    text-align: right;\n}\n.p-timeline-left .p-timeline-event-content {\n    text-align: left;\n}\n.p-timeline-right .p-timeline-event {\n    -webkit-box-orient: horizontal;\n    -webkit-box-direction: reverse;\n        -ms-flex-direction: row-reverse;\n            flex-direction: row-reverse;\n}\n.p-timeline-right .p-timeline-event-opposite {\n    text-align: left;\n}\n.p-timeline-right .p-timeline-event-content {\n    text-align: right;\n}\n.p-timeline-vertical.p-timeline-alternate .p-timeline-event:nth-child(even) {\n    -webkit-box-orient: horizontal;\n    -webkit-box-direction: reverse;\n        -ms-flex-direction: row-reverse;\n            flex-direction: row-reverse;\n}\n.p-timeline-vertical.p-timeline-alternate .p-timeline-event:nth-child(odd) .p-timeline-event-opposite {\n    text-align: right;\n}\n.p-timeline-vertical.p-timeline-alternate .p-timeline-event:nth-child(odd) .p-timeline-event-content {\n    text-align: left;\n}\n.p-timeline-vertical.p-timeline-alternate .p-timeline-event:nth-child(even) .p-timeline-event-opposite {\n    text-align: left;\n}\n.p-timeline-vertical.p-timeline-alternate .p-timeline-event:nth-child(even) .p-timeline-event-content {\n    text-align: right;\n}\n.p-timeline-event {\n    display: -webkit-box;\n    display: -ms-flexbox;\n    display: flex;\n    position: relative;\n    min-height: 70px;\n}\n.p-timeline-event:last-child {\n    min-height: 0;\n}\n.p-timeline-event-opposite {\n    -webkit-box-flex: 1;\n        -ms-flex: 1;\n            flex: 1;\n    padding: 0 1rem;\n}\n.p-timeline-event-content {\n    -webkit-box-flex: 1;\n        -ms-flex: 1;\n            flex: 1;\n    padding: 0 1rem;\n}\n.p-timeline-event-separator {\n    -webkit-box-flex: 0;\n        -ms-flex: 0;\n            flex: 0;\n    display: -webkit-box;\n    display: -ms-flexbox;\n    display: flex;\n    -webkit-box-align: center;\n        -ms-flex-align: center;\n            align-items: center;\n    -webkit-box-orient: vertical;\n    -webkit-box-direction: normal;\n        -ms-flex-direction: column;\n            flex-direction: column;\n}\n.p-timeline-event-marker {\n    display: -webkit-box;\n    display: -ms-flexbox;\n    display: flex;\n    -ms-flex-item-align: baseline;\n        align-self: baseline;\n}\n.p-timeline-event-connector {\n    -webkit-box-flex: 1;\n        -ms-flex-positive: 1;\n            flex-grow: 1;\n}\n.p-timeline-horizontal {\n    -webkit-box-orient: horizontal;\n    -webkit-box-direction: normal;\n        -ms-flex-direction: row;\n            flex-direction: row;\n}\n.p-timeline-horizontal .p-timeline-event {\n    -webkit-box-orient: vertical;\n    -webkit-box-direction: normal;\n        -ms-flex-direction: column;\n            flex-direction: column;\n    -webkit-box-flex: 1;\n        -ms-flex: 1;\n            flex: 1;\n}\n.p-timeline-horizontal .p-timeline-event:last-child {\n    -webkit-box-flex: 0;\n        -ms-flex: 0;\n            flex: 0;\n}\n.p-timeline-horizontal .p-timeline-event-separator {\n    -webkit-box-orient: horizontal;\n    -webkit-box-direction: normal;\n        -ms-flex-direction: row;\n            flex-direction: row;\n}\n.p-timeline-horizontal .p-timeline-event-connector  {\n    width: 100%;\n}\n.p-timeline-bottom .p-timeline-event {\n    -webkit-box-orient: vertical;\n    -webkit-box-direction: reverse;\n        -ms-flex-direction: column-reverse;\n            flex-direction: column-reverse;\n}\n.p-timeline-horizontal.p-timeline-alternate .p-timeline-event:nth-child(even) {\n    -webkit-box-orient: vertical;\n    -webkit-box-direction: reverse;\n        -ms-flex-direction: column-reverse;\n            flex-direction: column-reverse;\n}\n"),t.render=function(e,t,a,s,c,p){return n.openBlock(),n.createElementBlock("div",{class:n.normalizeClass(p.containerClass)},[(n.openBlock(!0),n.createElementBlock(n.Fragment,null,n.renderList(a.value,((t,s)=>(n.openBlock(),n.createElementBlock("div",{key:p.getKey(t,s),class:"p-timeline-event"},[n.createElementVNode("div",i,[n.renderSlot(e.$slots,"opposite",{item:t,index:s})]),n.createElementVNode("div",l,[n.renderSlot(e.$slots,"marker",{item:t,index:s},(()=>[o])),s!==a.value.length-1?n.renderSlot(e.$slots,"connector",{key:0},(()=>[r])):n.createCommentVNode("",!0)]),n.createElementVNode("div",m,[n.renderSlot(e.$slots,"content",{item:t,index:s})])])))),128))],2)},module.exports=t;
+"use strict";var e=require("primevue/utils"),n=require("vue"),t={name:"Timeline",props:{value:null,align:{mode:String,default:"left"},layout:{mode:String,default:"vertical"},dataKey:null},methods:{getKey(n,t){return this.dataKey?e.ObjectUtils.resolveFieldData(n,this.dataKey):t}},computed:{containerClass(){return["p-timeline p-component","p-timeline-"+this.align,"p-timeline-"+this.layout]}}};const i={class:"p-timeline-event-opposite"},l={class:"p-timeline-event-separator"},o=n.createElementVNode("div",{class:"p-timeline-event-marker"},null,-1),r=n.createElementVNode("div",{class:"p-timeline-event-connector"},null,-1),m={class:"p-timeline-event-content"};!function(e,n){void 0===n&&(n={});var t=n.insertAt;if(e&&"undefined"!=typeof document){var i=document.head||document.getElementsByTagName("head")[0],l=document.createElement("style");l.type="text/css","top"===t&&i.firstChild?i.insertBefore(l,i.firstChild):i.appendChild(l),l.styleSheet?l.styleSheet.cssText=e:l.appendChild(document.createTextNode(e))}}("\n.p-timeline {\n    display: -webkit-box;\n    display: -ms-flexbox;\n    display: flex;\n    -webkit-box-flex: 1;\n        -ms-flex-positive: 1;\n            flex-grow: 1;\n    -webkit-box-orient: vertical;\n    -webkit-box-direction: normal;\n        -ms-flex-direction: column;\n            flex-direction: column;\n}\n.p-timeline-left .p-timeline-event-opposite {\n    text-align: right;\n}\n.p-timeline-left .p-timeline-event-content {\n    text-align: left;\n}\n.p-timeline-right .p-timeline-event {\n    -webkit-box-orient: horizontal;\n    -webkit-box-direction: reverse;\n        -ms-flex-direction: row-reverse;\n            flex-direction: row-reverse;\n}\n.p-timeline-right .p-timeline-event-opposite {\n    text-align: left;\n}\n.p-timeline-right .p-timeline-event-content {\n    text-align: right;\n}\n.p-timeline-vertical.p-timeline-alternate .p-timeline-event:nth-child(even) {\n    -webkit-box-orient: horizontal;\n    -webkit-box-direction: reverse;\n        -ms-flex-direction: row-reverse;\n            flex-direction: row-reverse;\n}\n.p-timeline-vertical.p-timeline-alternate .p-timeline-event:nth-child(odd) .p-timeline-event-opposite {\n    text-align: right;\n}\n.p-timeline-vertical.p-timeline-alternate .p-timeline-event:nth-child(odd) .p-timeline-event-content {\n    text-align: left;\n}\n.p-timeline-vertical.p-timeline-alternate .p-timeline-event:nth-child(even) .p-timeline-event-opposite {\n    text-align: left;\n}\n.p-timeline-vertical.p-timeline-alternate .p-timeline-event:nth-child(even) .p-timeline-event-content {\n    text-align: right;\n}\n.p-timeline-event {\n    display: -webkit-box;\n    display: -ms-flexbox;\n    display: flex;\n    position: relative;\n    min-height: 70px;\n}\n.p-timeline-event:last-child {\n    min-height: 0;\n}\n.p-timeline-event-opposite {\n    -webkit-box-flex: 1;\n        -ms-flex: 1;\n            flex: 1;\n    padding: 0 1rem;\n}\n.p-timeline-event-content {\n    -webkit-box-flex: 1;\n        -ms-flex: 1;\n            flex: 1;\n    padding: 0 1rem;\n}\n.p-timeline-event-separator {\n    -webkit-box-flex: 0;\n        -ms-flex: 0;\n            flex: 0;\n    display: -webkit-box;\n    display: -ms-flexbox;\n    display: flex;\n    -webkit-box-align: center;\n        -ms-flex-align: center;\n            align-items: center;\n    -webkit-box-orient: vertical;\n    -webkit-box-direction: normal;\n        -ms-flex-direction: column;\n            flex-direction: column;\n}\n.p-timeline-event-marker {\n    display: -webkit-box;\n    display: -ms-flexbox;\n    display: flex;\n    -ms-flex-item-align: baseline;\n        align-self: baseline;\n}\n.p-timeline-event-connector {\n    -webkit-box-flex: 1;\n        -ms-flex-positive: 1;\n            flex-grow: 1;\n}\n.p-timeline-horizontal {\n    -webkit-box-orient: horizontal;\n    -webkit-box-direction: normal;\n        -ms-flex-direction: row;\n            flex-direction: row;\n}\n.p-timeline-horizontal .p-timeline-event {\n    -webkit-box-orient: vertical;\n    -webkit-box-direction: normal;\n        -ms-flex-direction: column;\n            flex-direction: column;\n    -webkit-box-flex: 1;\n        -ms-flex: 1;\n            flex: 1;\n}\n.p-timeline-horizontal .p-timeline-event:last-child {\n    -webkit-box-flex: 0;\n        -ms-flex: 0;\n            flex: 0;\n}\n.p-timeline-horizontal .p-timeline-event-separator {\n    -webkit-box-orient: horizontal;\n    -webkit-box-direction: normal;\n        -ms-flex-direction: row;\n            flex-direction: row;\n}\n.p-timeline-horizontal .p-timeline-event-connector  {\n    width: 100%;\n}\n.p-timeline-bottom .p-timeline-event {\n    -webkit-box-orient: vertical;\n    -webkit-box-direction: reverse;\n        -ms-flex-direction: column-reverse;\n            flex-direction: column-reverse;\n}\n.p-timeline-horizontal.p-timeline-alternate .p-timeline-event:nth-child(even) {\n    -webkit-box-orient: vertical;\n    -webkit-box-direction: reverse;\n        -ms-flex-direction: column-reverse;\n            flex-direction: column-reverse;\n}\n"),t.render=function(e,t,a,s,c,p){return n.openBlock(),n.createElementBlock("div",{class:n.normalizeClass(p.containerClass)},[(n.openBlock(!0),n.createElementBlock(n.Fragment,null,n.renderList(a.value,((t,s)=>(n.openBlock(),n.createElementBlock("div",{key:p.getKey(t,s),class:"p-timeline-event"},[n.createElementVNode("div",i,[n.renderSlot(e.$slots,"opposite",{item:t,index:s})]),n.createElementVNode("div",l,[n.renderSlot(e.$slots,"marker",{item:t,index:s},(()=>[o])),s!==a.value.length-1?n.renderSlot(e.$slots,"connector",{key:0,item:t,index:s},(()=>[r])):n.createCommentVNode("",!0)]),n.createElementVNode("div",m,[n.renderSlot(e.$slots,"content",{item:t,index:s})])])))),128))],2)},module.exports=t;

package/timeline/timeline.esm.js

@@ -60,7 +60,11 @@ function render(_ctx, _cache, $props, $setup, $data, $options) {
             _hoisted_3
           ]),
           (index !== ($props.value.length - 1))
-            ? renderSlot(_ctx.$slots, "connector", { key: 0 }, () => [
+            ? renderSlot(_ctx.$slots, "connector", {
+                key: 0,
+                item: item,
+                index: index
+              }, () => [
                 _hoisted_4
               ])
             : createCommentVNode("", true)

package/timeline/timeline.esm.min.js

@@ -1 +1 @@
-import{ObjectUtils as e}from"primevue/utils";import{openBlock as n,createElementBlock as i,normalizeClass as t,Fragment as l,renderList as o,createElementVNode as r,renderSlot as m,createCommentVNode as a}from"vue";var s={name:"Timeline",props:{value:null,align:{mode:String,default:"left"},layout:{mode:String,default:"vertical"},dataKey:null},methods:{getKey(n,i){return this.dataKey?e.resolveFieldData(n,this.dataKey):i}},computed:{containerClass(){return["p-timeline p-component","p-timeline-"+this.align,"p-timeline-"+this.layout]}}};const p={class:"p-timeline-event-opposite"},x={class:"p-timeline-event-separator"},c=r("div",{class:"p-timeline-event-marker"},null,-1),d=r("div",{class:"p-timeline-event-connector"},null,-1),v={class:"p-timeline-event-content"};!function(e,n){void 0===n&&(n={});var i=n.insertAt;if(e&&"undefined"!=typeof document){var t=document.head||document.getElementsByTagName("head")[0],l=document.createElement("style");l.type="text/css","top"===i&&t.firstChild?t.insertBefore(l,t.firstChild):t.appendChild(l),l.styleSheet?l.styleSheet.cssText=e:l.appendChild(document.createTextNode(e))}}("\n.p-timeline {\n    display: -webkit-box;\n    display: -ms-flexbox;\n    display: flex;\n    -webkit-box-flex: 1;\n        -ms-flex-positive: 1;\n            flex-grow: 1;\n    -webkit-box-orient: vertical;\n    -webkit-box-direction: normal;\n        -ms-flex-direction: column;\n            flex-direction: column;\n}\n.p-timeline-left .p-timeline-event-opposite {\n    text-align: right;\n}\n.p-timeline-left .p-timeline-event-content {\n    text-align: left;\n}\n.p-timeline-right .p-timeline-event {\n    -webkit-box-orient: horizontal;\n    -webkit-box-direction: reverse;\n        -ms-flex-direction: row-reverse;\n            flex-direction: row-reverse;\n}\n.p-timeline-right .p-timeline-event-opposite {\n    text-align: left;\n}\n.p-timeline-right .p-timeline-event-content {\n    text-align: right;\n}\n.p-timeline-vertical.p-timeline-alternate .p-timeline-event:nth-child(even) {\n    -webkit-box-orient: horizontal;\n    -webkit-box-direction: reverse;\n        -ms-flex-direction: row-reverse;\n            flex-direction: row-reverse;\n}\n.p-timeline-vertical.p-timeline-alternate .p-timeline-event:nth-child(odd) .p-timeline-event-opposite {\n    text-align: right;\n}\n.p-timeline-vertical.p-timeline-alternate .p-timeline-event:nth-child(odd) .p-timeline-event-content {\n    text-align: left;\n}\n.p-timeline-vertical.p-timeline-alternate .p-timeline-event:nth-child(even) .p-timeline-event-opposite {\n    text-align: left;\n}\n.p-timeline-vertical.p-timeline-alternate .p-timeline-event:nth-child(even) .p-timeline-event-content {\n    text-align: right;\n}\n.p-timeline-event {\n    display: -webkit-box;\n    display: -ms-flexbox;\n    display: flex;\n    position: relative;\n    min-height: 70px;\n}\n.p-timeline-event:last-child {\n    min-height: 0;\n}\n.p-timeline-event-opposite {\n    -webkit-box-flex: 1;\n        -ms-flex: 1;\n            flex: 1;\n    padding: 0 1rem;\n}\n.p-timeline-event-content {\n    -webkit-box-flex: 1;\n        -ms-flex: 1;\n            flex: 1;\n    padding: 0 1rem;\n}\n.p-timeline-event-separator {\n    -webkit-box-flex: 0;\n        -ms-flex: 0;\n            flex: 0;\n    display: -webkit-box;\n    display: -ms-flexbox;\n    display: flex;\n    -webkit-box-align: center;\n        -ms-flex-align: center;\n            align-items: center;\n    -webkit-box-orient: vertical;\n    -webkit-box-direction: normal;\n        -ms-flex-direction: column;\n            flex-direction: column;\n}\n.p-timeline-event-marker {\n    display: -webkit-box;\n    display: -ms-flexbox;\n    display: flex;\n    -ms-flex-item-align: baseline;\n        align-self: baseline;\n}\n.p-timeline-event-connector {\n    -webkit-box-flex: 1;\n        -ms-flex-positive: 1;\n            flex-grow: 1;\n}\n.p-timeline-horizontal {\n    -webkit-box-orient: horizontal;\n    -webkit-box-direction: normal;\n        -ms-flex-direction: row;\n            flex-direction: row;\n}\n.p-timeline-horizontal .p-timeline-event {\n    -webkit-box-orient: vertical;\n    -webkit-box-direction: normal;\n        -ms-flex-direction: column;\n            flex-direction: column;\n    -webkit-box-flex: 1;\n        -ms-flex: 1;\n            flex: 1;\n}\n.p-timeline-horizontal .p-timeline-event:last-child {\n    -webkit-box-flex: 0;\n        -ms-flex: 0;\n            flex: 0;\n}\n.p-timeline-horizontal .p-timeline-event-separator {\n    -webkit-box-orient: horizontal;\n    -webkit-box-direction: normal;\n        -ms-flex-direction: row;\n            flex-direction: row;\n}\n.p-timeline-horizontal .p-timeline-event-connector  {\n    width: 100%;\n}\n.p-timeline-bottom .p-timeline-event {\n    -webkit-box-orient: vertical;\n    -webkit-box-direction: reverse;\n        -ms-flex-direction: column-reverse;\n            flex-direction: column-reverse;\n}\n.p-timeline-horizontal.p-timeline-alternate .p-timeline-event:nth-child(even) {\n    -webkit-box-orient: vertical;\n    -webkit-box-direction: reverse;\n        -ms-flex-direction: column-reverse;\n            flex-direction: column-reverse;\n}\n"),s.render=function(e,s,f,b,h,w){return n(),i("div",{class:t(w.containerClass)},[(n(!0),i(l,null,o(f.value,((t,l)=>(n(),i("div",{key:w.getKey(t,l),class:"p-timeline-event"},[r("div",p,[m(e.$slots,"opposite",{item:t,index:l})]),r("div",x,[m(e.$slots,"marker",{item:t,index:l},(()=>[c])),l!==f.value.length-1?m(e.$slots,"connector",{key:0},(()=>[d])):a("",!0)]),r("div",v,[m(e.$slots,"content",{item:t,index:l})])])))),128))],2)};export{s as default};
+import{ObjectUtils as e}from"primevue/utils";import{openBlock as n,createElementBlock as i,normalizeClass as t,Fragment as l,renderList as o,createElementVNode as r,renderSlot as m,createCommentVNode as a}from"vue";var s={name:"Timeline",props:{value:null,align:{mode:String,default:"left"},layout:{mode:String,default:"vertical"},dataKey:null},methods:{getKey(n,i){return this.dataKey?e.resolveFieldData(n,this.dataKey):i}},computed:{containerClass(){return["p-timeline p-component","p-timeline-"+this.align,"p-timeline-"+this.layout]}}};const p={class:"p-timeline-event-opposite"},x={class:"p-timeline-event-separator"},c=r("div",{class:"p-timeline-event-marker"},null,-1),d=r("div",{class:"p-timeline-event-connector"},null,-1),v={class:"p-timeline-event-content"};!function(e,n){void 0===n&&(n={});var i=n.insertAt;if(e&&"undefined"!=typeof document){var t=document.head||document.getElementsByTagName("head")[0],l=document.createElement("style");l.type="text/css","top"===i&&t.firstChild?t.insertBefore(l,t.firstChild):t.appendChild(l),l.styleSheet?l.styleSheet.cssText=e:l.appendChild(document.createTextNode(e))}}("\n.p-timeline {\n    display: -webkit-box;\n    display: -ms-flexbox;\n    display: flex;\n    -webkit-box-flex: 1;\n        -ms-flex-positive: 1;\n            flex-grow: 1;\n    -webkit-box-orient: vertical;\n    -webkit-box-direction: normal;\n        -ms-flex-direction: column;\n            flex-direction: column;\n}\n.p-timeline-left .p-timeline-event-opposite {\n    text-align: right;\n}\n.p-timeline-left .p-timeline-event-content {\n    text-align: left;\n}\n.p-timeline-right .p-timeline-event {\n    -webkit-box-orient: horizontal;\n    -webkit-box-direction: reverse;\n        -ms-flex-direction: row-reverse;\n            flex-direction: row-reverse;\n}\n.p-timeline-right .p-timeline-event-opposite {\n    text-align: left;\n}\n.p-timeline-right .p-timeline-event-content {\n    text-align: right;\n}\n.p-timeline-vertical.p-timeline-alternate .p-timeline-event:nth-child(even) {\n    -webkit-box-orient: horizontal;\n    -webkit-box-direction: reverse;\n        -ms-flex-direction: row-reverse;\n            flex-direction: row-reverse;\n}\n.p-timeline-vertical.p-timeline-alternate .p-timeline-event:nth-child(odd) .p-timeline-event-opposite {\n    text-align: right;\n}\n.p-timeline-vertical.p-timeline-alternate .p-timeline-event:nth-child(odd) .p-timeline-event-content {\n    text-align: left;\n}\n.p-timeline-vertical.p-timeline-alternate .p-timeline-event:nth-child(even) .p-timeline-event-opposite {\n    text-align: left;\n}\n.p-timeline-vertical.p-timeline-alternate .p-timeline-event:nth-child(even) .p-timeline-event-content {\n    text-align: right;\n}\n.p-timeline-event {\n    display: -webkit-box;\n    display: -ms-flexbox;\n    display: flex;\n    position: relative;\n    min-height: 70px;\n}\n.p-timeline-event:last-child {\n    min-height: 0;\n}\n.p-timeline-event-opposite {\n    -webkit-box-flex: 1;\n        -ms-flex: 1;\n            flex: 1;\n    padding: 0 1rem;\n}\n.p-timeline-event-content {\n    -webkit-box-flex: 1;\n        -ms-flex: 1;\n            flex: 1;\n    padding: 0 1rem;\n}\n.p-timeline-event-separator {\n    -webkit-box-flex: 0;\n        -ms-flex: 0;\n            flex: 0;\n    display: -webkit-box;\n    display: -ms-flexbox;\n    display: flex;\n    -webkit-box-align: center;\n        -ms-flex-align: center;\n            align-items: center;\n    -webkit-box-orient: vertical;\n    -webkit-box-direction: normal;\n        -ms-flex-direction: column;\n            flex-direction: column;\n}\n.p-timeline-event-marker {\n    display: -webkit-box;\n    display: -ms-flexbox;\n    display: flex;\n    -ms-flex-item-align: baseline;\n        align-self: baseline;\n}\n.p-timeline-event-connector {\n    -webkit-box-flex: 1;\n        -ms-flex-positive: 1;\n            flex-grow: 1;\n}\n.p-timeline-horizontal {\n    -webkit-box-orient: horizontal;\n    -webkit-box-direction: normal;\n        -ms-flex-direction: row;\n            flex-direction: row;\n}\n.p-timeline-horizontal .p-timeline-event {\n    -webkit-box-orient: vertical;\n    -webkit-box-direction: normal;\n        -ms-flex-direction: column;\n            flex-direction: column;\n    -webkit-box-flex: 1;\n        -ms-flex: 1;\n            flex: 1;\n}\n.p-timeline-horizontal .p-timeline-event:last-child {\n    -webkit-box-flex: 0;\n        -ms-flex: 0;\n            flex: 0;\n}\n.p-timeline-horizontal .p-timeline-event-separator {\n    -webkit-box-orient: horizontal;\n    -webkit-box-direction: normal;\n        -ms-flex-direction: row;\n            flex-direction: row;\n}\n.p-timeline-horizontal .p-timeline-event-connector  {\n    width: 100%;\n}\n.p-timeline-bottom .p-timeline-event {\n    -webkit-box-orient: vertical;\n    -webkit-box-direction: reverse;\n        -ms-flex-direction: column-reverse;\n            flex-direction: column-reverse;\n}\n.p-timeline-horizontal.p-timeline-alternate .p-timeline-event:nth-child(even) {\n    -webkit-box-orient: vertical;\n    -webkit-box-direction: reverse;\n        -ms-flex-direction: column-reverse;\n            flex-direction: column-reverse;\n}\n"),s.render=function(e,s,f,b,h,w){return n(),i("div",{class:t(w.containerClass)},[(n(!0),i(l,null,o(f.value,((t,l)=>(n(),i("div",{key:w.getKey(t,l),class:"p-timeline-event"},[r("div",p,[m(e.$slots,"opposite",{item:t,index:l})]),r("div",x,[m(e.$slots,"marker",{item:t,index:l},(()=>[c])),l!==f.value.length-1?m(e.$slots,"connector",{key:0,item:t,index:l},(()=>[d])):a("",!0)]),r("div",v,[m(e.$slots,"content",{item:t,index:l})])])))),128))],2)};export{s as default};

package/timeline/timeline.js

@@ -61,7 +61,11 @@ this.primevue.timeline = (function (utils, vue) {
                 _hoisted_3
               ]),
               (index !== ($props.value.length - 1))
-                ? vue.renderSlot(_ctx.$slots, "connector", { key: 0 }, () => [
+                ? vue.renderSlot(_ctx.$slots, "connector", {
+                    key: 0,
+                    item: item,
+                    index: index
+                  }, () => [
                     _hoisted_4
                   ])
                 : vue.createCommentVNode("", true)

package/timeline/timeline.min.js

@@ -1 +1 @@
-this.primevue=this.primevue||{},this.primevue.timeline=function(e,n){"use strict";var t={name:"Timeline",props:{value:null,align:{mode:String,default:"left"},layout:{mode:String,default:"vertical"},dataKey:null},methods:{getKey(n,t){return this.dataKey?e.ObjectUtils.resolveFieldData(n,this.dataKey):t}},computed:{containerClass(){return["p-timeline p-component","p-timeline-"+this.align,"p-timeline-"+this.layout]}}};const i={class:"p-timeline-event-opposite"},l={class:"p-timeline-event-separator"},o=n.createElementVNode("div",{class:"p-timeline-event-marker"},null,-1),r=n.createElementVNode("div",{class:"p-timeline-event-connector"},null,-1),m={class:"p-timeline-event-content"};return function(e,n){void 0===n&&(n={});var t=n.insertAt;if(e&&"undefined"!=typeof document){var i=document.head||document.getElementsByTagName("head")[0],l=document.createElement("style");l.type="text/css","top"===t&&i.firstChild?i.insertBefore(l,i.firstChild):i.appendChild(l),l.styleSheet?l.styleSheet.cssText=e:l.appendChild(document.createTextNode(e))}}("\n.p-timeline {\n    display: -webkit-box;\n    display: -ms-flexbox;\n    display: flex;\n    -webkit-box-flex: 1;\n        -ms-flex-positive: 1;\n            flex-grow: 1;\n    -webkit-box-orient: vertical;\n    -webkit-box-direction: normal;\n        -ms-flex-direction: column;\n            flex-direction: column;\n}\n.p-timeline-left .p-timeline-event-opposite {\n    text-align: right;\n}\n.p-timeline-left .p-timeline-event-content {\n    text-align: left;\n}\n.p-timeline-right .p-timeline-event {\n    -webkit-box-orient: horizontal;\n    -webkit-box-direction: reverse;\n        -ms-flex-direction: row-reverse;\n            flex-direction: row-reverse;\n}\n.p-timeline-right .p-timeline-event-opposite {\n    text-align: left;\n}\n.p-timeline-right .p-timeline-event-content {\n    text-align: right;\n}\n.p-timeline-vertical.p-timeline-alternate .p-timeline-event:nth-child(even) {\n    -webkit-box-orient: horizontal;\n    -webkit-box-direction: reverse;\n        -ms-flex-direction: row-reverse;\n            flex-direction: row-reverse;\n}\n.p-timeline-vertical.p-timeline-alternate .p-timeline-event:nth-child(odd) .p-timeline-event-opposite {\n    text-align: right;\n}\n.p-timeline-vertical.p-timeline-alternate .p-timeline-event:nth-child(odd) .p-timeline-event-content {\n    text-align: left;\n}\n.p-timeline-vertical.p-timeline-alternate .p-timeline-event:nth-child(even) .p-timeline-event-opposite {\n    text-align: left;\n}\n.p-timeline-vertical.p-timeline-alternate .p-timeline-event:nth-child(even) .p-timeline-event-content {\n    text-align: right;\n}\n.p-timeline-event {\n    display: -webkit-box;\n    display: -ms-flexbox;\n    display: flex;\n    position: relative;\n    min-height: 70px;\n}\n.p-timeline-event:last-child {\n    min-height: 0;\n}\n.p-timeline-event-opposite {\n    -webkit-box-flex: 1;\n        -ms-flex: 1;\n            flex: 1;\n    padding: 0 1rem;\n}\n.p-timeline-event-content {\n    -webkit-box-flex: 1;\n        -ms-flex: 1;\n            flex: 1;\n    padding: 0 1rem;\n}\n.p-timeline-event-separator {\n    -webkit-box-flex: 0;\n        -ms-flex: 0;\n            flex: 0;\n    display: -webkit-box;\n    display: -ms-flexbox;\n    display: flex;\n    -webkit-box-align: center;\n        -ms-flex-align: center;\n            align-items: center;\n    -webkit-box-orient: vertical;\n    -webkit-box-direction: normal;\n        -ms-flex-direction: column;\n            flex-direction: column;\n}\n.p-timeline-event-marker {\n    display: -webkit-box;\n    display: -ms-flexbox;\n    display: flex;\n    -ms-flex-item-align: baseline;\n        align-self: baseline;\n}\n.p-timeline-event-connector {\n    -webkit-box-flex: 1;\n        -ms-flex-positive: 1;\n            flex-grow: 1;\n}\n.p-timeline-horizontal {\n    -webkit-box-orient: horizontal;\n    -webkit-box-direction: normal;\n        -ms-flex-direction: row;\n            flex-direction: row;\n}\n.p-timeline-horizontal .p-timeline-event {\n    -webkit-box-orient: vertical;\n    -webkit-box-direction: normal;\n        -ms-flex-direction: column;\n            flex-direction: column;\n    -webkit-box-flex: 1;\n        -ms-flex: 1;\n            flex: 1;\n}\n.p-timeline-horizontal .p-timeline-event:last-child {\n    -webkit-box-flex: 0;\n        -ms-flex: 0;\n            flex: 0;\n}\n.p-timeline-horizontal .p-timeline-event-separator {\n    -webkit-box-orient: horizontal;\n    -webkit-box-direction: normal;\n        -ms-flex-direction: row;\n            flex-direction: row;\n}\n.p-timeline-horizontal .p-timeline-event-connector  {\n    width: 100%;\n}\n.p-timeline-bottom .p-timeline-event {\n    -webkit-box-orient: vertical;\n    -webkit-box-direction: reverse;\n        -ms-flex-direction: column-reverse;\n            flex-direction: column-reverse;\n}\n.p-timeline-horizontal.p-timeline-alternate .p-timeline-event:nth-child(even) {\n    -webkit-box-orient: vertical;\n    -webkit-box-direction: reverse;\n        -ms-flex-direction: column-reverse;\n            flex-direction: column-reverse;\n}\n"),t.render=function(e,t,a,s,c,p){return n.openBlock(),n.createElementBlock("div",{class:n.normalizeClass(p.containerClass)},[(n.openBlock(!0),n.createElementBlock(n.Fragment,null,n.renderList(a.value,((t,s)=>(n.openBlock(),n.createElementBlock("div",{key:p.getKey(t,s),class:"p-timeline-event"},[n.createElementVNode("div",i,[n.renderSlot(e.$slots,"opposite",{item:t,index:s})]),n.createElementVNode("div",l,[n.renderSlot(e.$slots,"marker",{item:t,index:s},(()=>[o])),s!==a.value.length-1?n.renderSlot(e.$slots,"connector",{key:0},(()=>[r])):n.createCommentVNode("",!0)]),n.createElementVNode("div",m,[n.renderSlot(e.$slots,"content",{item:t,index:s})])])))),128))],2)},t}(primevue.utils,Vue);
+this.primevue=this.primevue||{},this.primevue.timeline=function(e,n){"use strict";var t={name:"Timeline",props:{value:null,align:{mode:String,default:"left"},layout:{mode:String,default:"vertical"},dataKey:null},methods:{getKey(n,t){return this.dataKey?e.ObjectUtils.resolveFieldData(n,this.dataKey):t}},computed:{containerClass(){return["p-timeline p-component","p-timeline-"+this.align,"p-timeline-"+this.layout]}}};const i={class:"p-timeline-event-opposite"},l={class:"p-timeline-event-separator"},o=n.createElementVNode("div",{class:"p-timeline-event-marker"},null,-1),r=n.createElementVNode("div",{class:"p-timeline-event-connector"},null,-1),m={class:"p-timeline-event-content"};return function(e,n){void 0===n&&(n={});var t=n.insertAt;if(e&&"undefined"!=typeof document){var i=document.head||document.getElementsByTagName("head")[0],l=document.createElement("style");l.type="text/css","top"===t&&i.firstChild?i.insertBefore(l,i.firstChild):i.appendChild(l),l.styleSheet?l.styleSheet.cssText=e:l.appendChild(document.createTextNode(e))}}("\n.p-timeline {\n    display: -webkit-box;\n    display: -ms-flexbox;\n    display: flex;\n    -webkit-box-flex: 1;\n        -ms-flex-positive: 1;\n            flex-grow: 1;\n    -webkit-box-orient: vertical;\n    -webkit-box-direction: normal;\n        -ms-flex-direction: column;\n            flex-direction: column;\n}\n.p-timeline-left .p-timeline-event-opposite {\n    text-align: right;\n}\n.p-timeline-left .p-timeline-event-content {\n    text-align: left;\n}\n.p-timeline-right .p-timeline-event {\n    -webkit-box-orient: horizontal;\n    -webkit-box-direction: reverse;\n        -ms-flex-direction: row-reverse;\n            flex-direction: row-reverse;\n}\n.p-timeline-right .p-timeline-event-opposite {\n    text-align: left;\n}\n.p-timeline-right .p-timeline-event-content {\n    text-align: right;\n}\n.p-timeline-vertical.p-timeline-alternate .p-timeline-event:nth-child(even) {\n    -webkit-box-orient: horizontal;\n    -webkit-box-direction: reverse;\n        -ms-flex-direction: row-reverse;\n            flex-direction: row-reverse;\n}\n.p-timeline-vertical.p-timeline-alternate .p-timeline-event:nth-child(odd) .p-timeline-event-opposite {\n    text-align: right;\n}\n.p-timeline-vertical.p-timeline-alternate .p-timeline-event:nth-child(odd) .p-timeline-event-content {\n    text-align: left;\n}\n.p-timeline-vertical.p-timeline-alternate .p-timeline-event:nth-child(even) .p-timeline-event-opposite {\n    text-align: left;\n}\n.p-timeline-vertical.p-timeline-alternate .p-timeline-event:nth-child(even) .p-timeline-event-content {\n    text-align: right;\n}\n.p-timeline-event {\n    display: -webkit-box;\n    display: -ms-flexbox;\n    display: flex;\n    position: relative;\n    min-height: 70px;\n}\n.p-timeline-event:last-child {\n    min-height: 0;\n}\n.p-timeline-event-opposite {\n    -webkit-box-flex: 1;\n        -ms-flex: 1;\n            flex: 1;\n    padding: 0 1rem;\n}\n.p-timeline-event-content {\n    -webkit-box-flex: 1;\n        -ms-flex: 1;\n            flex: 1;\n    padding: 0 1rem;\n}\n.p-timeline-event-separator {\n    -webkit-box-flex: 0;\n        -ms-flex: 0;\n            flex: 0;\n    display: -webkit-box;\n    display: -ms-flexbox;\n    display: flex;\n    -webkit-box-align: center;\n        -ms-flex-align: center;\n            align-items: center;\n    -webkit-box-orient: vertical;\n    -webkit-box-direction: normal;\n        -ms-flex-direction: column;\n            flex-direction: column;\n}\n.p-timeline-event-marker {\n    display: -webkit-box;\n    display: -ms-flexbox;\n    display: flex;\n    -ms-flex-item-align: baseline;\n        align-self: baseline;\n}\n.p-timeline-event-connector {\n    -webkit-box-flex: 1;\n        -ms-flex-positive: 1;\n            flex-grow: 1;\n}\n.p-timeline-horizontal {\n    -webkit-box-orient: horizontal;\n    -webkit-box-direction: normal;\n        -ms-flex-direction: row;\n            flex-direction: row;\n}\n.p-timeline-horizontal .p-timeline-event {\n    -webkit-box-orient: vertical;\n    -webkit-box-direction: normal;\n        -ms-flex-direction: column;\n            flex-direction: column;\n    -webkit-box-flex: 1;\n        -ms-flex: 1;\n            flex: 1;\n}\n.p-timeline-horizontal .p-timeline-event:last-child {\n    -webkit-box-flex: 0;\n        -ms-flex: 0;\n            flex: 0;\n}\n.p-timeline-horizontal .p-timeline-event-separator {\n    -webkit-box-orient: horizontal;\n    -webkit-box-direction: normal;\n        -ms-flex-direction: row;\n            flex-direction: row;\n}\n.p-timeline-horizontal .p-timeline-event-connector  {\n    width: 100%;\n}\n.p-timeline-bottom .p-timeline-event {\n    -webkit-box-orient: vertical;\n    -webkit-box-direction: reverse;\n        -ms-flex-direction: column-reverse;\n            flex-direction: column-reverse;\n}\n.p-timeline-horizontal.p-timeline-alternate .p-timeline-event:nth-child(even) {\n    -webkit-box-orient: vertical;\n    -webkit-box-direction: reverse;\n        -ms-flex-direction: column-reverse;\n            flex-direction: column-reverse;\n}\n"),t.render=function(e,t,a,s,c,p){return n.openBlock(),n.createElementBlock("div",{class:n.normalizeClass(p.containerClass)},[(n.openBlock(!0),n.createElementBlock(n.Fragment,null,n.renderList(a.value,((t,s)=>(n.openBlock(),n.createElementBlock("div",{key:p.getKey(t,s),class:"p-timeline-event"},[n.createElementVNode("div",i,[n.renderSlot(e.$slots,"opposite",{item:t,index:s})]),n.createElementVNode("div",l,[n.renderSlot(e.$slots,"marker",{item:t,index:s},(()=>[o])),s!==a.value.length-1?n.renderSlot(e.$slots,"connector",{key:0,item:t,index:s},(()=>[r])):n.createCommentVNode("",!0)]),n.createElementVNode("div",m,[n.renderSlot(e.$slots,"content",{item:t,index:s})])])))),128))],2)},t}(primevue.utils,Vue);

package/togglebutton/ToggleButton.d.ts

@@ -31,6 +31,38 @@ export interface ToggleButtonProps {
      * Default value is 'left'.
      */
     iconPos?: ToggleButtonType;
+    /**
+     * When present, it specifies that the element should be disabled.
+     */
+    disabled?: boolean | undefined;
+    /**
+     * Index of the element in tabbing order.
+     */
+    tabindex?: string | undefined;
+    /**
+     * 	Identifier of the focus input to match a label defined for the chips.
+     */
+    inputId?: string | undefined;
+    /**
+     * Style class of the input field.
+     */
+    inputClass?: any | undefined;
+    /**
+     * Inline style of the input field.
+     */
+    inputStyle?: any | undefined;
+    /**
+     * Uses to pass all properties of the HTMLInputElement to the focusable input element inside the component.
+     */
+    inputProps?: HTMLInputElement | undefined;
+    /**
+     * Establishes relationships between the component and label(s) where its value should be one or more element IDs.
+     */
+    'aria-labelledby'?: string | undefined;
+    /**
+     * Establishes a string value that labels the component.
+     */
+    'aria-label'?: string | undefined;
 }
 
 export interface ToggleButtonSlots {
@@ -47,6 +79,16 @@ export declare type ToggleButtonEmits = {
      * @param {Event} event - Browser event.
      */
     'change': (event: Event) => void;
+    /**
+     * Callback to invoke when the component receives focus.
+     * @param {Event} event - Browser event.
+     */
+    'focus': (event: Event) => void;
+    /**
+     * Callback to invoke when the component loses focus.
+     * @param {Event} event - Browser event.
+     */
+    'blur': (event: Event) => void;
 }
 
 declare class ToggleButton extends ClassComponent<ToggleButtonProps, ToggleButtonSlots, ToggleButtonEmits> { }

package/togglebutton/ToggleButton.vue

@@ -1,5 +1,9 @@
 <template>
-    <div :class="buttonClass" @click="onClick($event)" role="checkbox" :aria-checked="modelValue" :tabindex="$attrs.disabled ? null : '0'" v-ripple>
+    <div :class="buttonClass" @click="onClick($event)" v-ripple>
+        <span class="p-hidden-accessible">
+            <input type="checkbox" role="switch" :id="inputId" :class="inputClass" :style="inputStyle" :checked="modelValue" :value="modelValue" :aria-labelledby="ariaLabelledby" :aria-label="ariaLabel"
+                @focus="onFocus($event)" @blur="onBlur($event)" v-bind="inputProps">
+        </span>
         <span v-if="hasIcon" :class="iconClass"></span>
         <span class="p-button-label">{{label}}</span>
     </div>
@@ -10,24 +14,57 @@ import Ripple from 'primevue/ripple';
 
 export default {
     name: 'ToggleButton',
-    emits: ['update:modelValue', 'change'],
+    emits: ['update:modelValue', 'change', 'click', 'focus', 'blur'],
     props: {
         modelValue: Boolean,
 		onIcon: String,
 		offIcon: String,
-        onLabel: String,
-        offLabel: 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: null,
+        inputClass: null,
+        inputStyle: null,
+        inputProps: null,
+        'aria-labelledby': {
+            type: String,
+			default: null
+        },
+        'aria-label': {
+            type: String,
+            default: null
         }
     },
     methods: {
         onClick(event) {
-            if (!this.$attrs.disabled) {
+            if (!this.disabled) {
                 this.$emit('update:modelValue', !this.modelValue);
                 this.$emit('change', event);
+                this.$emit('click', event);
             }
+        },
+        onFocus(event) {
+            this.$emit('focus', event);
+        },
+        onBlur(event) {
+            this.$emit('blur', event);
         }
     },
     computed: {
@@ -35,7 +72,7 @@ export default {
             return {
                 'p-button p-togglebutton p-component': true,
                 'p-button-icon-only': this.hasIcon && !this.hasLabel,
-                'p-disabled': this.$attrs.disabled,
+                'p-disabled': this.disabled,
                 'p-highlight': this.modelValue === true
             }
         },
@@ -63,4 +100,4 @@ export default {
         'ripple': Ripple
     }
 }
-</script>
+</script>

package/togglebutton/togglebutton.cjs.js

@@ -9,24 +9,57 @@ var Ripple__default = /*#__PURE__*/_interopDefaultLegacy(Ripple);
 
 var script = {
     name: 'ToggleButton',
-    emits: ['update:modelValue', 'change'],
+    emits: ['update:modelValue', 'change', 'click', 'focus', 'blur'],
     props: {
         modelValue: Boolean,
 		onIcon: String,
 		offIcon: String,
-        onLabel: String,
-        offLabel: 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: null,
+        inputClass: null,
+        inputStyle: null,
+        inputProps: null,
+        'aria-labelledby': {
+            type: String,
+			default: null
+        },
+        'aria-label': {
+            type: String,
+            default: null
         }
     },
     methods: {
         onClick(event) {
-            if (!this.$attrs.disabled) {
+            if (!this.disabled) {
                 this.$emit('update:modelValue', !this.modelValue);
                 this.$emit('change', event);
+                this.$emit('click', event);
             }
+        },
+        onFocus(event) {
+            this.$emit('focus', event);
+        },
+        onBlur(event) {
+            this.$emit('blur', event);
         }
     },
     computed: {
@@ -34,7 +67,7 @@ var script = {
             return {
                 'p-button p-togglebutton p-component': true,
                 'p-button-icon-only': this.hasIcon && !this.hasLabel,
-                'p-disabled': this.$attrs.disabled,
+                'p-disabled': this.disabled,
                 'p-highlight': this.modelValue === true
             }
         },
@@ -63,27 +96,40 @@ var script = {
     }
 };
 
-const _hoisted_1 = ["aria-checked", "tabindex"];
-const _hoisted_2 = { class: "p-button-label" };
+const _hoisted_1 = { class: "p-hidden-accessible" };
+const _hoisted_2 = ["id", "checked", "value", "aria-labelledby", "aria-label"];
+const _hoisted_3 = { class: "p-button-label" };
 
 function render(_ctx, _cache, $props, $setup, $data, $options) {
   const _directive_ripple = vue.resolveDirective("ripple");
 
   return vue.withDirectives((vue.openBlock(), vue.createElementBlock("div", {
     class: vue.normalizeClass($options.buttonClass),
-    onClick: _cache[0] || (_cache[0] = $event => ($options.onClick($event))),
-    role: "checkbox",
-    "aria-checked": $props.modelValue,
-    tabindex: _ctx.$attrs.disabled ? null : '0'
+    onClick: _cache[2] || (_cache[2] = $event => ($options.onClick($event)))
   }, [
+    vue.createElementVNode("span", _hoisted_1, [
+      vue.createElementVNode("input", vue.mergeProps({
+        type: "checkbox",
+        role: "switch",
+        id: $props.inputId,
+        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), null, 16, _hoisted_2)
+    ]),
     ($options.hasIcon)
       ? (vue.openBlock(), vue.createElementBlock("span", {
           key: 0,
           class: vue.normalizeClass($options.iconClass)
         }, null, 2))
       : vue.createCommentVNode("", true),
-    vue.createElementVNode("span", _hoisted_2, vue.toDisplayString($options.label), 1)
-  ], 10, _hoisted_1)), [
+    vue.createElementVNode("span", _hoisted_3, vue.toDisplayString($options.label), 1)
+  ], 2)), [
     [_directive_ripple]
   ])
 }

package/togglebutton/togglebutton.cjs.min.js

@@ -1 +1 @@
-"use strict";var e=require("primevue/ripple"),t=require("vue");function o(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var l={name:"ToggleButton",emits:["update:modelValue","change"],props:{modelValue:Boolean,onIcon:String,offIcon:String,onLabel:String,offLabel:String,iconPos:{type:String,default:"left"}},methods:{onClick(e){this.$attrs.disabled||(this.$emit("update:modelValue",!this.modelValue),this.$emit("change",e))}},computed:{buttonClass(){return{"p-button p-togglebutton p-component":!0,"p-button-icon-only":this.hasIcon&&!this.hasLabel,"p-disabled":this.$attrs.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.onIcon&&this.onIcon.length>0&&this.offIcon&&this.offIcon.length>0},label(){return this.hasLabel?this.modelValue?this.onLabel:this.offLabel:" "}},directives:{ripple:o(e).default}};const n=["aria-checked","tabindex"],i={class:"p-button-label"};l.render=function(e,o,l,s,a,c){const r=t.resolveDirective("ripple");return t.withDirectives((t.openBlock(),t.createElementBlock("div",{class:t.normalizeClass(c.buttonClass),onClick:o[0]||(o[0]=e=>c.onClick(e)),role:"checkbox","aria-checked":l.modelValue,tabindex:e.$attrs.disabled?null:"0"},[c.hasIcon?(t.openBlock(),t.createElementBlock("span",{key:0,class:t.normalizeClass(c.iconClass)},null,2)):t.createCommentVNode("",!0),t.createElementVNode("span",i,t.toDisplayString(c.label),1)],10,n)),[[r]])},module.exports=l;
+"use strict";var e=require("primevue/ripple"),l=require("vue");function t(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var n={name:"ToggleButton",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:null,inputClass:null,inputStyle:null,inputProps:null,"aria-labelledby":{type:String,default:null},"aria-label":{type:String,default:null}},methods:{onClick(e){this.disabled||(this.$emit("update:modelValue",!this.modelValue),this.$emit("change",e),this.$emit("click",e))},onFocus(e){this.$emit("focus",e)},onBlur(e){this.$emit("blur",e)}},computed:{buttonClass(){return{"p-button p-togglebutton p-component":!0,"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.onIcon&&this.onIcon.length>0&&this.offIcon&&this.offIcon.length>0},label(){return this.hasLabel?this.modelValue?this.onLabel:this.offLabel:" "}},directives:{ripple:t(e).default}};const o={class:"p-hidden-accessible"},i=["id","checked","value","aria-labelledby","aria-label"],a={class:"p-button-label"};n.render=function(e,t,n,s,u,r){const c=l.resolveDirective("ripple");return l.withDirectives((l.openBlock(),l.createElementBlock("div",{class:l.normalizeClass(r.buttonClass),onClick:t[2]||(t[2]=e=>r.onClick(e))},[l.createElementVNode("span",o,[l.createElementVNode("input",l.mergeProps({type:"checkbox",role:"switch",id:n.inputId,class:n.inputClass,style:n.inputStyle,checked:n.modelValue,value:n.modelValue,"aria-labelledby":e.ariaLabelledby,"aria-label":e.ariaLabel,onFocus:t[0]||(t[0]=e=>r.onFocus(e)),onBlur:t[1]||(t[1]=e=>r.onBlur(e))},n.inputProps),null,16,i)]),r.hasIcon?(l.openBlock(),l.createElementBlock("span",{key:0,class:l.normalizeClass(r.iconClass)},null,2)):l.createCommentVNode("",!0),l.createElementVNode("span",a,l.toDisplayString(r.label),1)],2)),[[c]])},module.exports=n;

package/togglebutton/togglebutton.esm.js

@@ -1,26 +1,59 @@
 import Ripple from 'primevue/ripple';
-import { resolveDirective, withDirectives, openBlock, createElementBlock, normalizeClass, createCommentVNode, createElementVNode, toDisplayString } from 'vue';
+import { resolveDirective, withDirectives, openBlock, createElementBlock, normalizeClass, createElementVNode, mergeProps, createCommentVNode, toDisplayString } from 'vue';
 
 var script = {
     name: 'ToggleButton',
-    emits: ['update:modelValue', 'change'],
+    emits: ['update:modelValue', 'change', 'click', 'focus', 'blur'],
     props: {
         modelValue: Boolean,
 		onIcon: String,
 		offIcon: String,
-        onLabel: String,
-        offLabel: 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: null,
+        inputClass: null,
+        inputStyle: null,
+        inputProps: null,
+        'aria-labelledby': {
+            type: String,
+			default: null
+        },
+        'aria-label': {
+            type: String,
+            default: null
         }
     },
     methods: {
         onClick(event) {
-            if (!this.$attrs.disabled) {
+            if (!this.disabled) {
                 this.$emit('update:modelValue', !this.modelValue);
                 this.$emit('change', event);
+                this.$emit('click', event);
             }
+        },
+        onFocus(event) {
+            this.$emit('focus', event);
+        },
+        onBlur(event) {
+            this.$emit('blur', event);
         }
     },
     computed: {
@@ -28,7 +61,7 @@ var script = {
             return {
                 'p-button p-togglebutton p-component': true,
                 'p-button-icon-only': this.hasIcon && !this.hasLabel,
-                'p-disabled': this.$attrs.disabled,
+                'p-disabled': this.disabled,
                 'p-highlight': this.modelValue === true
             }
         },
@@ -57,27 +90,40 @@ var script = {
     }
 };
 
-const _hoisted_1 = ["aria-checked", "tabindex"];
-const _hoisted_2 = { class: "p-button-label" };
+const _hoisted_1 = { class: "p-hidden-accessible" };
+const _hoisted_2 = ["id", "checked", "value", "aria-labelledby", "aria-label"];
+const _hoisted_3 = { class: "p-button-label" };
 
 function render(_ctx, _cache, $props, $setup, $data, $options) {
   const _directive_ripple = resolveDirective("ripple");
 
   return withDirectives((openBlock(), createElementBlock("div", {
     class: normalizeClass($options.buttonClass),
-    onClick: _cache[0] || (_cache[0] = $event => ($options.onClick($event))),
-    role: "checkbox",
-    "aria-checked": $props.modelValue,
-    tabindex: _ctx.$attrs.disabled ? null : '0'
+    onClick: _cache[2] || (_cache[2] = $event => ($options.onClick($event)))
   }, [
+    createElementVNode("span", _hoisted_1, [
+      createElementVNode("input", mergeProps({
+        type: "checkbox",
+        role: "switch",
+        id: $props.inputId,
+        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), null, 16, _hoisted_2)
+    ]),
     ($options.hasIcon)
       ? (openBlock(), createElementBlock("span", {
           key: 0,
           class: normalizeClass($options.iconClass)
         }, null, 2))
       : createCommentVNode("", true),
-    createElementVNode("span", _hoisted_2, toDisplayString($options.label), 1)
-  ], 10, _hoisted_1)), [
+    createElementVNode("span", _hoisted_3, toDisplayString($options.label), 1)
+  ], 2)), [
     [_directive_ripple]
   ])
 }

package/togglebutton/togglebutton.esm.min.js

@@ -1 +1 @@
-import t from"primevue/ripple";import{resolveDirective as e,withDirectives as o,openBlock as n,createElementBlock as l,normalizeClass as i,createCommentVNode as s,createElementVNode as a,toDisplayString as h}from"vue";var c={name:"ToggleButton",emits:["update:modelValue","change"],props:{modelValue:Boolean,onIcon:String,offIcon:String,onLabel:String,offLabel:String,iconPos:{type:String,default:"left"}},methods:{onClick(t){this.$attrs.disabled||(this.$emit("update:modelValue",!this.modelValue),this.$emit("change",t))}},computed:{buttonClass(){return{"p-button p-togglebutton p-component":!0,"p-button-icon-only":this.hasIcon&&!this.hasLabel,"p-disabled":this.$attrs.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.onIcon&&this.onIcon.length>0&&this.offIcon&&this.offIcon.length>0},label(){return this.hasLabel?this.modelValue?this.onLabel:this.offLabel:" "}},directives:{ripple:t}};const r=["aria-checked","tabindex"],u={class:"p-button-label"};c.render=function(t,c,b,p,d,f){const m=e("ripple");return o((n(),l("div",{class:i(f.buttonClass),onClick:c[0]||(c[0]=t=>f.onClick(t)),role:"checkbox","aria-checked":b.modelValue,tabindex:t.$attrs.disabled?null:"0"},[f.hasIcon?(n(),l("span",{key:0,class:i(f.iconClass)},null,2)):s("",!0),a("span",u,h(f.label),1)],10,r)),[[m]])};export{c as default};
+import l from"primevue/ripple";import{resolveDirective as e,withDirectives as t,openBlock as n,createElementBlock as i,normalizeClass as o,createElementVNode as a,mergeProps as s,createCommentVNode as u,toDisplayString as c}from"vue";var h={name:"ToggleButton",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:null,inputClass:null,inputStyle:null,inputProps:null,"aria-labelledby":{type:String,default:null},"aria-label":{type:String,default:null}},methods:{onClick(l){this.disabled||(this.$emit("update:modelValue",!this.modelValue),this.$emit("change",l),this.$emit("click",l))},onFocus(l){this.$emit("focus",l)},onBlur(l){this.$emit("blur",l)}},computed:{buttonClass(){return{"p-button p-togglebutton p-component":!0,"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.onIcon&&this.onIcon.length>0&&this.offIcon&&this.offIcon.length>0},label(){return this.hasLabel?this.modelValue?this.onLabel:this.offLabel:" "}},directives:{ripple:l}};const r={class:"p-hidden-accessible"},p=["id","checked","value","aria-labelledby","aria-label"],b={class:"p-button-label"};h.render=function(l,h,d,f,m,g){const y=e("ripple");return t((n(),i("div",{class:o(g.buttonClass),onClick:h[2]||(h[2]=l=>g.onClick(l))},[a("span",r,[a("input",s({type:"checkbox",role:"switch",id:d.inputId,class:d.inputClass,style:d.inputStyle,checked:d.modelValue,value:d.modelValue,"aria-labelledby":l.ariaLabelledby,"aria-label":l.ariaLabel,onFocus:h[0]||(h[0]=l=>g.onFocus(l)),onBlur:h[1]||(h[1]=l=>g.onBlur(l))},d.inputProps),null,16,p)]),g.hasIcon?(n(),i("span",{key:0,class:o(g.iconClass)},null,2)):u("",!0),a("span",b,c(g.label),1)],2)),[[y]])};export{h as default};

package/togglebutton/togglebutton.js

@@ -8,24 +8,57 @@ this.primevue.togglebutton = (function (Ripple, vue) {
 
     var script = {
         name: 'ToggleButton',
-        emits: ['update:modelValue', 'change'],
+        emits: ['update:modelValue', 'change', 'click', 'focus', 'blur'],
         props: {
             modelValue: Boolean,
     		onIcon: String,
     		offIcon: String,
-            onLabel: String,
-            offLabel: 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: null,
+            inputClass: null,
+            inputStyle: null,
+            inputProps: null,
+            'aria-labelledby': {
+                type: String,
+    			default: null
+            },
+            'aria-label': {
+                type: String,
+                default: null
             }
         },
         methods: {
             onClick(event) {
-                if (!this.$attrs.disabled) {
+                if (!this.disabled) {
                     this.$emit('update:modelValue', !this.modelValue);
                     this.$emit('change', event);
+                    this.$emit('click', event);
                 }
+            },
+            onFocus(event) {
+                this.$emit('focus', event);
+            },
+            onBlur(event) {
+                this.$emit('blur', event);
             }
         },
         computed: {
@@ -33,7 +66,7 @@ this.primevue.togglebutton = (function (Ripple, vue) {
                 return {
                     'p-button p-togglebutton p-component': true,
                     'p-button-icon-only': this.hasIcon && !this.hasLabel,
-                    'p-disabled': this.$attrs.disabled,
+                    'p-disabled': this.disabled,
                     'p-highlight': this.modelValue === true
                 }
             },
@@ -62,27 +95,40 @@ this.primevue.togglebutton = (function (Ripple, vue) {
         }
     };
 
-    const _hoisted_1 = ["aria-checked", "tabindex"];
-    const _hoisted_2 = { class: "p-button-label" };
+    const _hoisted_1 = { class: "p-hidden-accessible" };
+    const _hoisted_2 = ["id", "checked", "value", "aria-labelledby", "aria-label"];
+    const _hoisted_3 = { class: "p-button-label" };
 
     function render(_ctx, _cache, $props, $setup, $data, $options) {
       const _directive_ripple = vue.resolveDirective("ripple");
 
       return vue.withDirectives((vue.openBlock(), vue.createElementBlock("div", {
         class: vue.normalizeClass($options.buttonClass),
-        onClick: _cache[0] || (_cache[0] = $event => ($options.onClick($event))),
-        role: "checkbox",
-        "aria-checked": $props.modelValue,
-        tabindex: _ctx.$attrs.disabled ? null : '0'
+        onClick: _cache[2] || (_cache[2] = $event => ($options.onClick($event)))
       }, [
+        vue.createElementVNode("span", _hoisted_1, [
+          vue.createElementVNode("input", vue.mergeProps({
+            type: "checkbox",
+            role: "switch",
+            id: $props.inputId,
+            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), null, 16, _hoisted_2)
+        ]),
         ($options.hasIcon)
           ? (vue.openBlock(), vue.createElementBlock("span", {
               key: 0,
               class: vue.normalizeClass($options.iconClass)
             }, null, 2))
           : vue.createCommentVNode("", true),
-        vue.createElementVNode("span", _hoisted_2, vue.toDisplayString($options.label), 1)
-      ], 10, _hoisted_1)), [
+        vue.createElementVNode("span", _hoisted_3, vue.toDisplayString($options.label), 1)
+      ], 2)), [
         [_directive_ripple]
       ])
     }