primevue 3.16.2 → 3.18.0

package/fieldset/fieldset.cjs.js

@@ -14,12 +14,13 @@ var script = {
     props: {
         legend: String,
         toggleable: Boolean,
-        collapsed: Boolean
+        collapsed: Boolean,
+        toggleButtonProps: String
     },
     data() {
         return {
-           d_collapsed: this.collapsed
-        }
+            d_collapsed: this.collapsed
+        };
     },
     watch: {
         collapsed(newValue) {
@@ -34,27 +35,36 @@ var script = {
                 originalEvent: event,
                 value: this.d_collapsed
             });
+        },
+        onKeyDown(event) {
+            if (event.code === 'Enter' || event.code === 'Space') {
+                this.toggle(event);
+                event.preventDefault();
+            }
         }
     },
-	computed: {
-		iconClass() {
-			return ['p-fieldset-toggler pi ', {
-				'pi-minus': !this.d_collapsed,
-				'pi-plus': this.d_collapsed
-			}]
+    computed: {
+        iconClass() {
+            return [
+                'p-fieldset-toggler pi ',
+                {
+                    'pi-minus': !this.d_collapsed,
+                    'pi-plus': this.d_collapsed
+                }
+            ];
         },
         ariaId() {
             return utils.UniqueComponentId();
         }
     },
     directives: {
-        'ripple': Ripple__default["default"]
+        ripple: Ripple__default["default"]
     }
 };
 
 const _hoisted_1 = { class: "p-fieldset-legend" };
 const _hoisted_2 = ["id"];
-const _hoisted_3 = ["id", "aria-controls", "aria-expanded"];
+const _hoisted_3 = ["id", "aria-controls", "aria-expanded", "aria-label"];
 const _hoisted_4 = { class: "p-fieldset-legend-text" };
 const _hoisted_5 = ["id", "aria-labelledby"];
 const _hoisted_6 = { class: "p-fieldset-content" };
@@ -63,26 +73,28 @@ function render(_ctx, _cache, $props, $setup, $data, $options) {
   const _directive_ripple = vue.resolveDirective("ripple");
 
   return (vue.openBlock(), vue.createElementBlock("fieldset", {
-    class: vue.normalizeClass(['p-fieldset p-component', {'p-fieldset-toggleable': $props.toggleable}])
+    class: vue.normalizeClass(['p-fieldset p-component', { 'p-fieldset-toggleable': $props.toggleable }])
   }, [
     vue.createElementVNode("legend", _hoisted_1, [
       (!$props.toggleable)
         ? vue.renderSlot(_ctx.$slots, "legend", { key: 0 }, () => [
             vue.createElementVNode("span", {
-              class: "p-fieldset-legend-text",
-              id: $options.ariaId + '_header'
+              id: $options.ariaId + '_header',
+              class: "p-fieldset-legend-text"
             }, vue.toDisplayString($props.legend), 9, _hoisted_2)
           ])
         : vue.createCommentVNode("", true),
       ($props.toggleable)
         ? vue.withDirectives((vue.openBlock(), vue.createElementBlock("a", {
             key: 1,
+            id: $options.ariaId + '_header',
             tabindex: "0",
-            onClick: _cache[0] || (_cache[0] = (...args) => ($options.toggle && $options.toggle(...args))),
-            onKeydown: _cache[1] || (_cache[1] = vue.withKeys((...args) => ($options.toggle && $options.toggle(...args)), ["enter"])),
-            id: $options.ariaId +  '_header',
+            role: "button",
             "aria-controls": $options.ariaId + '_content',
-            "aria-expanded": !$data.d_collapsed
+            "aria-expanded": !$data.d_collapsed,
+            "aria-label": $props.toggleButtonProps || $props.legend,
+            onClick: _cache[0] || (_cache[0] = (...args) => ($options.toggle && $options.toggle(...args))),
+            onKeydown: _cache[1] || (_cache[1] = (...args) => ($options.onKeyDown && $options.onKeyDown(...args)))
           }, [
             vue.createElementVNode("span", {
               class: vue.normalizeClass($options.iconClass)
@@ -98,9 +110,9 @@ function render(_ctx, _cache, $props, $setup, $data, $options) {
     vue.createVNode(vue.Transition, { name: "p-toggleable-content" }, {
       default: vue.withCtx(() => [
         vue.withDirectives(vue.createElementVNode("div", {
+          id: $options.ariaId + '_content',
           class: "p-toggleable-content",
           role: "region",
-          id: $options.ariaId + '_content',
           "aria-labelledby": $options.ariaId + '_header'
         }, [
           vue.createElementVNode("div", _hoisted_6, [

package/fieldset/fieldset.cjs.min.js

@@ -1 +1 @@
-"use strict";var e=require("primevue/utils"),t=require("primevue/ripple"),l=require("vue");function n(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var a={name:"Fieldset",emits:["update:collapsed","toggle"],props:{legend:String,toggleable:Boolean,collapsed:Boolean},data(){return{d_collapsed:this.collapsed}},watch:{collapsed(e){this.d_collapsed=e}},methods:{toggle(e){this.d_collapsed=!this.d_collapsed,this.$emit("update:collapsed",this.d_collapsed),this.$emit("toggle",{originalEvent:e,value:this.d_collapsed})}},computed:{iconClass(){return["p-fieldset-toggler pi ",{"pi-minus":!this.d_collapsed,"pi-plus":this.d_collapsed}]},ariaId:()=>e.UniqueComponentId()},directives:{ripple:n(t).default}};const o={class:"p-fieldset-legend"},d=["id"],i=["id","aria-controls","aria-expanded"],s={class:"p-fieldset-legend-text"},r=["id","aria-labelledby"],c={class:"p-fieldset-content"};!function(e,t){void 0===t&&(t={});var l=t.insertAt;if(e&&"undefined"!=typeof document){var n=document.head||document.getElementsByTagName("head")[0],a=document.createElement("style");a.type="text/css","top"===l&&n.firstChild?n.insertBefore(a,n.firstChild):n.appendChild(a),a.styleSheet?a.styleSheet.cssText=e:a.appendChild(document.createTextNode(e))}}("\n.p-fieldset-legend > a,\n.p-fieldset-legend > span {\n    display: -webkit-box;\n    display: -ms-flexbox;\n    display: flex;\n    -webkit-box-align: center;\n        -ms-flex-align: center;\n            align-items: center;\n    -webkit-box-pack: center;\n        -ms-flex-pack: center;\n            justify-content: center;\n}\n.p-fieldset-toggleable .p-fieldset-legend a {\n    cursor: pointer;\n    -webkit-user-select: none;\n       -moz-user-select: none;\n        -ms-user-select: none;\n            user-select: none;\n    overflow: hidden;\n    position: relative;\n    text-decoration: none;\n}\n.p-fieldset-legend-text {\n    line-height: 1;\n}\n"),a.render=function(e,t,n,a,p,g){const m=l.resolveDirective("ripple");return l.openBlock(),l.createElementBlock("fieldset",{class:l.normalizeClass(["p-fieldset p-component",{"p-fieldset-toggleable":n.toggleable}])},[l.createElementVNode("legend",o,[n.toggleable?l.createCommentVNode("",!0):l.renderSlot(e.$slots,"legend",{key:0},(()=>[l.createElementVNode("span",{class:"p-fieldset-legend-text",id:g.ariaId+"_header"},l.toDisplayString(n.legend),9,d)])),n.toggleable?l.withDirectives((l.openBlock(),l.createElementBlock("a",{key:1,tabindex:"0",onClick:t[0]||(t[0]=(...e)=>g.toggle&&g.toggle(...e)),onKeydown:t[1]||(t[1]=l.withKeys(((...e)=>g.toggle&&g.toggle(...e)),["enter"])),id:g.ariaId+"_header","aria-controls":g.ariaId+"_content","aria-expanded":!p.d_collapsed},[l.createElementVNode("span",{class:l.normalizeClass(g.iconClass)},null,2),l.renderSlot(e.$slots,"legend",{},(()=>[l.createElementVNode("span",s,l.toDisplayString(n.legend),1)]))],40,i)),[[m]]):l.createCommentVNode("",!0)]),l.createVNode(l.Transition,{name:"p-toggleable-content"},{default:l.withCtx((()=>[l.withDirectives(l.createElementVNode("div",{class:"p-toggleable-content",role:"region",id:g.ariaId+"_content","aria-labelledby":g.ariaId+"_header"},[l.createElementVNode("div",c,[l.renderSlot(e.$slots,"default")])],8,r),[[l.vShow,!p.d_collapsed]])])),_:3})],2)},module.exports=a;
+"use strict";var e=require("primevue/utils"),t=require("primevue/ripple"),l=require("vue");function n(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var o={name:"Fieldset",emits:["update:collapsed","toggle"],props:{legend:String,toggleable:Boolean,collapsed:Boolean,toggleButtonProps:String},data(){return{d_collapsed:this.collapsed}},watch:{collapsed(e){this.d_collapsed=e}},methods:{toggle(e){this.d_collapsed=!this.d_collapsed,this.$emit("update:collapsed",this.d_collapsed),this.$emit("toggle",{originalEvent:e,value:this.d_collapsed})},onKeyDown(e){"Enter"!==e.code&&"Space"!==e.code||(this.toggle(e),e.preventDefault())}},computed:{iconClass(){return["p-fieldset-toggler pi ",{"pi-minus":!this.d_collapsed,"pi-plus":this.d_collapsed}]},ariaId:()=>e.UniqueComponentId()},directives:{ripple:n(t).default}};const a={class:"p-fieldset-legend"},d=["id"],i=["id","aria-controls","aria-expanded","aria-label"],s={class:"p-fieldset-legend-text"},r=["id","aria-labelledby"],c={class:"p-fieldset-content"};!function(e,t){void 0===t&&(t={});var l=t.insertAt;if(e&&"undefined"!=typeof document){var n=document.head||document.getElementsByTagName("head")[0],o=document.createElement("style");o.type="text/css","top"===l&&n.firstChild?n.insertBefore(o,n.firstChild):n.appendChild(o),o.styleSheet?o.styleSheet.cssText=e:o.appendChild(document.createTextNode(e))}}("\n.p-fieldset-legend > a,\n.p-fieldset-legend > span {\n    display: -webkit-box;\n    display: -ms-flexbox;\n    display: flex;\n    -webkit-box-align: center;\n        -ms-flex-align: center;\n            align-items: center;\n    -webkit-box-pack: center;\n        -ms-flex-pack: center;\n            justify-content: center;\n}\n.p-fieldset-toggleable .p-fieldset-legend a {\n    cursor: pointer;\n    -webkit-user-select: none;\n       -moz-user-select: none;\n        -ms-user-select: none;\n            user-select: none;\n    overflow: hidden;\n    position: relative;\n    text-decoration: none;\n}\n.p-fieldset-legend-text {\n    line-height: 1;\n}\n"),o.render=function(e,t,n,o,p,g){const u=l.resolveDirective("ripple");return l.openBlock(),l.createElementBlock("fieldset",{class:l.normalizeClass(["p-fieldset p-component",{"p-fieldset-toggleable":n.toggleable}])},[l.createElementVNode("legend",a,[n.toggleable?l.createCommentVNode("",!0):l.renderSlot(e.$slots,"legend",{key:0},(()=>[l.createElementVNode("span",{id:g.ariaId+"_header",class:"p-fieldset-legend-text"},l.toDisplayString(n.legend),9,d)])),n.toggleable?l.withDirectives((l.openBlock(),l.createElementBlock("a",{key:1,id:g.ariaId+"_header",tabindex:"0",role:"button","aria-controls":g.ariaId+"_content","aria-expanded":!p.d_collapsed,"aria-label":n.toggleButtonProps||n.legend,onClick:t[0]||(t[0]=(...e)=>g.toggle&&g.toggle(...e)),onKeydown:t[1]||(t[1]=(...e)=>g.onKeyDown&&g.onKeyDown(...e))},[l.createElementVNode("span",{class:l.normalizeClass(g.iconClass)},null,2),l.renderSlot(e.$slots,"legend",{},(()=>[l.createElementVNode("span",s,l.toDisplayString(n.legend),1)]))],40,i)),[[u]]):l.createCommentVNode("",!0)]),l.createVNode(l.Transition,{name:"p-toggleable-content"},{default:l.withCtx((()=>[l.withDirectives(l.createElementVNode("div",{id:g.ariaId+"_content",class:"p-toggleable-content",role:"region","aria-labelledby":g.ariaId+"_header"},[l.createElementVNode("div",c,[l.renderSlot(e.$slots,"default")])],8,r),[[l.vShow,!p.d_collapsed]])])),_:3})],2)},module.exports=o;

package/fieldset/fieldset.esm.js

@@ -1,6 +1,6 @@
 import { UniqueComponentId } from 'primevue/utils';
 import Ripple from 'primevue/ripple';
-import { resolveDirective, openBlock, createElementBlock, normalizeClass, createElementVNode, renderSlot, toDisplayString, createCommentVNode, withDirectives, withKeys, createVNode, Transition, withCtx, vShow } from 'vue';
+import { resolveDirective, openBlock, createElementBlock, normalizeClass, createElementVNode, renderSlot, toDisplayString, createCommentVNode, withDirectives, createVNode, Transition, withCtx, vShow } from 'vue';
 
 var script = {
     name: 'Fieldset',
@@ -8,12 +8,13 @@ var script = {
     props: {
         legend: String,
         toggleable: Boolean,
-        collapsed: Boolean
+        collapsed: Boolean,
+        toggleButtonProps: String
     },
     data() {
         return {
-           d_collapsed: this.collapsed
-        }
+            d_collapsed: this.collapsed
+        };
     },
     watch: {
         collapsed(newValue) {
@@ -28,27 +29,36 @@ var script = {
                 originalEvent: event,
                 value: this.d_collapsed
             });
+        },
+        onKeyDown(event) {
+            if (event.code === 'Enter' || event.code === 'Space') {
+                this.toggle(event);
+                event.preventDefault();
+            }
         }
     },
-	computed: {
-		iconClass() {
-			return ['p-fieldset-toggler pi ', {
-				'pi-minus': !this.d_collapsed,
-				'pi-plus': this.d_collapsed
-			}]
+    computed: {
+        iconClass() {
+            return [
+                'p-fieldset-toggler pi ',
+                {
+                    'pi-minus': !this.d_collapsed,
+                    'pi-plus': this.d_collapsed
+                }
+            ];
         },
         ariaId() {
             return UniqueComponentId();
         }
     },
     directives: {
-        'ripple': Ripple
+        ripple: Ripple
     }
 };
 
 const _hoisted_1 = { class: "p-fieldset-legend" };
 const _hoisted_2 = ["id"];
-const _hoisted_3 = ["id", "aria-controls", "aria-expanded"];
+const _hoisted_3 = ["id", "aria-controls", "aria-expanded", "aria-label"];
 const _hoisted_4 = { class: "p-fieldset-legend-text" };
 const _hoisted_5 = ["id", "aria-labelledby"];
 const _hoisted_6 = { class: "p-fieldset-content" };
@@ -57,26 +67,28 @@ function render(_ctx, _cache, $props, $setup, $data, $options) {
   const _directive_ripple = resolveDirective("ripple");
 
   return (openBlock(), createElementBlock("fieldset", {
-    class: normalizeClass(['p-fieldset p-component', {'p-fieldset-toggleable': $props.toggleable}])
+    class: normalizeClass(['p-fieldset p-component', { 'p-fieldset-toggleable': $props.toggleable }])
   }, [
     createElementVNode("legend", _hoisted_1, [
       (!$props.toggleable)
         ? renderSlot(_ctx.$slots, "legend", { key: 0 }, () => [
             createElementVNode("span", {
-              class: "p-fieldset-legend-text",
-              id: $options.ariaId + '_header'
+              id: $options.ariaId + '_header',
+              class: "p-fieldset-legend-text"
             }, toDisplayString($props.legend), 9, _hoisted_2)
           ])
         : createCommentVNode("", true),
       ($props.toggleable)
         ? withDirectives((openBlock(), createElementBlock("a", {
             key: 1,
+            id: $options.ariaId + '_header',
             tabindex: "0",
-            onClick: _cache[0] || (_cache[0] = (...args) => ($options.toggle && $options.toggle(...args))),
-            onKeydown: _cache[1] || (_cache[1] = withKeys((...args) => ($options.toggle && $options.toggle(...args)), ["enter"])),
-            id: $options.ariaId +  '_header',
+            role: "button",
             "aria-controls": $options.ariaId + '_content',
-            "aria-expanded": !$data.d_collapsed
+            "aria-expanded": !$data.d_collapsed,
+            "aria-label": $props.toggleButtonProps || $props.legend,
+            onClick: _cache[0] || (_cache[0] = (...args) => ($options.toggle && $options.toggle(...args))),
+            onKeydown: _cache[1] || (_cache[1] = (...args) => ($options.onKeyDown && $options.onKeyDown(...args)))
           }, [
             createElementVNode("span", {
               class: normalizeClass($options.iconClass)
@@ -92,9 +104,9 @@ function render(_ctx, _cache, $props, $setup, $data, $options) {
     createVNode(Transition, { name: "p-toggleable-content" }, {
       default: withCtx(() => [
         withDirectives(createElementVNode("div", {
+          id: $options.ariaId + '_content',
           class: "p-toggleable-content",
           role: "region",
-          id: $options.ariaId + '_content',
           "aria-labelledby": $options.ariaId + '_header'
         }, [
           createElementVNode("div", _hoisted_6, [

package/fieldset/fieldset.esm.min.js

@@ -1 +1 @@
-import{UniqueComponentId as e}from"primevue/utils";import l from"primevue/ripple";import{resolveDirective as t,openBlock as n,createElementBlock as d,normalizeClass as s,createElementVNode as a,renderSlot as i,toDisplayString as o,createCommentVNode as p,withDirectives as r,withKeys as c,createVNode as g,Transition as f,withCtx as m,vShow as u}from"vue";var h={name:"Fieldset",emits:["update:collapsed","toggle"],props:{legend:String,toggleable:Boolean,collapsed:Boolean},data(){return{d_collapsed:this.collapsed}},watch:{collapsed(e){this.d_collapsed=e}},methods:{toggle(e){this.d_collapsed=!this.d_collapsed,this.$emit("update:collapsed",this.d_collapsed),this.$emit("toggle",{originalEvent:e,value:this.d_collapsed})}},computed:{iconClass(){return["p-fieldset-toggler pi ",{"pi-minus":!this.d_collapsed,"pi-plus":this.d_collapsed}]},ariaId:()=>e()},directives:{ripple:l}};const b={class:"p-fieldset-legend"},x=["id"],_=["id","aria-controls","aria-expanded"],y={class:"p-fieldset-legend-text"},v=["id","aria-labelledby"],k={class:"p-fieldset-content"};!function(e,l){void 0===l&&(l={});var t=l.insertAt;if(e&&"undefined"!=typeof document){var n=document.head||document.getElementsByTagName("head")[0],d=document.createElement("style");d.type="text/css","top"===t&&n.firstChild?n.insertBefore(d,n.firstChild):n.appendChild(d),d.styleSheet?d.styleSheet.cssText=e:d.appendChild(document.createTextNode(e))}}("\n.p-fieldset-legend > a,\n.p-fieldset-legend > span {\n    display: -webkit-box;\n    display: -ms-flexbox;\n    display: flex;\n    -webkit-box-align: center;\n        -ms-flex-align: center;\n            align-items: center;\n    -webkit-box-pack: center;\n        -ms-flex-pack: center;\n            justify-content: center;\n}\n.p-fieldset-toggleable .p-fieldset-legend a {\n    cursor: pointer;\n    -webkit-user-select: none;\n       -moz-user-select: none;\n        -ms-user-select: none;\n            user-select: none;\n    overflow: hidden;\n    position: relative;\n    text-decoration: none;\n}\n.p-fieldset-legend-text {\n    line-height: 1;\n}\n"),h.render=function(e,l,h,w,C,I){const $=t("ripple");return n(),d("fieldset",{class:s(["p-fieldset p-component",{"p-fieldset-toggleable":h.toggleable}])},[a("legend",b,[h.toggleable?p("",!0):i(e.$slots,"legend",{key:0},(()=>[a("span",{class:"p-fieldset-legend-text",id:I.ariaId+"_header"},o(h.legend),9,x)])),h.toggleable?r((n(),d("a",{key:1,tabindex:"0",onClick:l[0]||(l[0]=(...e)=>I.toggle&&I.toggle(...e)),onKeydown:l[1]||(l[1]=c(((...e)=>I.toggle&&I.toggle(...e)),["enter"])),id:I.ariaId+"_header","aria-controls":I.ariaId+"_content","aria-expanded":!C.d_collapsed},[a("span",{class:s(I.iconClass)},null,2),i(e.$slots,"legend",{},(()=>[a("span",y,o(h.legend),1)]))],40,_)),[[$]]):p("",!0)]),g(f,{name:"p-toggleable-content"},{default:m((()=>[r(a("div",{class:"p-toggleable-content",role:"region",id:I.ariaId+"_content","aria-labelledby":I.ariaId+"_header"},[a("div",k,[i(e.$slots,"default")])],8,v),[[u,!C.d_collapsed]])])),_:3})],2)};export{h as default};
+import{UniqueComponentId as e}from"primevue/utils";import t from"primevue/ripple";import{resolveDirective as l,openBlock as n,createElementBlock as a,normalizeClass as o,createElementVNode as d,renderSlot as s,toDisplayString as i,createCommentVNode as r,withDirectives as p,createVNode as c,Transition as g,withCtx as u,vShow as f}from"vue";var m={name:"Fieldset",emits:["update:collapsed","toggle"],props:{legend:String,toggleable:Boolean,collapsed:Boolean,toggleButtonProps:String},data(){return{d_collapsed:this.collapsed}},watch:{collapsed(e){this.d_collapsed=e}},methods:{toggle(e){this.d_collapsed=!this.d_collapsed,this.$emit("update:collapsed",this.d_collapsed),this.$emit("toggle",{originalEvent:e,value:this.d_collapsed})},onKeyDown(e){"Enter"!==e.code&&"Space"!==e.code||(this.toggle(e),e.preventDefault())}},computed:{iconClass(){return["p-fieldset-toggler pi ",{"pi-minus":!this.d_collapsed,"pi-plus":this.d_collapsed}]},ariaId:()=>e()},directives:{ripple:t}};const h={class:"p-fieldset-legend"},b=["id"],x=["id","aria-controls","aria-expanded","aria-label"],y={class:"p-fieldset-legend-text"},_=["id","aria-labelledby"],v={class:"p-fieldset-content"};!function(e,t){void 0===t&&(t={});var l=t.insertAt;if(e&&"undefined"!=typeof document){var n=document.head||document.getElementsByTagName("head")[0],a=document.createElement("style");a.type="text/css","top"===l&&n.firstChild?n.insertBefore(a,n.firstChild):n.appendChild(a),a.styleSheet?a.styleSheet.cssText=e:a.appendChild(document.createTextNode(e))}}("\n.p-fieldset-legend > a,\n.p-fieldset-legend > span {\n    display: -webkit-box;\n    display: -ms-flexbox;\n    display: flex;\n    -webkit-box-align: center;\n        -ms-flex-align: center;\n            align-items: center;\n    -webkit-box-pack: center;\n        -ms-flex-pack: center;\n            justify-content: center;\n}\n.p-fieldset-toggleable .p-fieldset-legend a {\n    cursor: pointer;\n    -webkit-user-select: none;\n       -moz-user-select: none;\n        -ms-user-select: none;\n            user-select: none;\n    overflow: hidden;\n    position: relative;\n    text-decoration: none;\n}\n.p-fieldset-legend-text {\n    line-height: 1;\n}\n"),m.render=function(e,t,m,w,k,C){const B=l("ripple");return n(),a("fieldset",{class:o(["p-fieldset p-component",{"p-fieldset-toggleable":m.toggleable}])},[d("legend",h,[m.toggleable?r("",!0):s(e.$slots,"legend",{key:0},(()=>[d("span",{id:C.ariaId+"_header",class:"p-fieldset-legend-text"},i(m.legend),9,b)])),m.toggleable?p((n(),a("a",{key:1,id:C.ariaId+"_header",tabindex:"0",role:"button","aria-controls":C.ariaId+"_content","aria-expanded":!k.d_collapsed,"aria-label":m.toggleButtonProps||m.legend,onClick:t[0]||(t[0]=(...e)=>C.toggle&&C.toggle(...e)),onKeydown:t[1]||(t[1]=(...e)=>C.onKeyDown&&C.onKeyDown(...e))},[d("span",{class:o(C.iconClass)},null,2),s(e.$slots,"legend",{},(()=>[d("span",y,i(m.legend),1)]))],40,x)),[[B]]):r("",!0)]),c(g,{name:"p-toggleable-content"},{default:u((()=>[p(d("div",{id:C.ariaId+"_content",class:"p-toggleable-content",role:"region","aria-labelledby":C.ariaId+"_header"},[d("div",v,[s(e.$slots,"default")])],8,_),[[f,!k.d_collapsed]])])),_:3})],2)};export{m as default};

package/fieldset/fieldset.js

@@ -12,12 +12,13 @@ this.primevue.fieldset = (function (utils, Ripple, vue) {
         props: {
             legend: String,
             toggleable: Boolean,
-            collapsed: Boolean
+            collapsed: Boolean,
+            toggleButtonProps: String
         },
         data() {
             return {
-               d_collapsed: this.collapsed
-            }
+                d_collapsed: this.collapsed
+            };
         },
         watch: {
             collapsed(newValue) {
@@ -32,27 +33,36 @@ this.primevue.fieldset = (function (utils, Ripple, vue) {
                     originalEvent: event,
                     value: this.d_collapsed
                 });
+            },
+            onKeyDown(event) {
+                if (event.code === 'Enter' || event.code === 'Space') {
+                    this.toggle(event);
+                    event.preventDefault();
+                }
             }
         },
-    	computed: {
-    		iconClass() {
-    			return ['p-fieldset-toggler pi ', {
-    				'pi-minus': !this.d_collapsed,
-    				'pi-plus': this.d_collapsed
-    			}]
+        computed: {
+            iconClass() {
+                return [
+                    'p-fieldset-toggler pi ',
+                    {
+                        'pi-minus': !this.d_collapsed,
+                        'pi-plus': this.d_collapsed
+                    }
+                ];
             },
             ariaId() {
                 return utils.UniqueComponentId();
             }
         },
         directives: {
-            'ripple': Ripple__default["default"]
+            ripple: Ripple__default["default"]
         }
     };
 
     const _hoisted_1 = { class: "p-fieldset-legend" };
     const _hoisted_2 = ["id"];
-    const _hoisted_3 = ["id", "aria-controls", "aria-expanded"];
+    const _hoisted_3 = ["id", "aria-controls", "aria-expanded", "aria-label"];
     const _hoisted_4 = { class: "p-fieldset-legend-text" };
     const _hoisted_5 = ["id", "aria-labelledby"];
     const _hoisted_6 = { class: "p-fieldset-content" };
@@ -61,26 +71,28 @@ this.primevue.fieldset = (function (utils, Ripple, vue) {
       const _directive_ripple = vue.resolveDirective("ripple");
 
       return (vue.openBlock(), vue.createElementBlock("fieldset", {
-        class: vue.normalizeClass(['p-fieldset p-component', {'p-fieldset-toggleable': $props.toggleable}])
+        class: vue.normalizeClass(['p-fieldset p-component', { 'p-fieldset-toggleable': $props.toggleable }])
       }, [
         vue.createElementVNode("legend", _hoisted_1, [
           (!$props.toggleable)
             ? vue.renderSlot(_ctx.$slots, "legend", { key: 0 }, () => [
                 vue.createElementVNode("span", {
-                  class: "p-fieldset-legend-text",
-                  id: $options.ariaId + '_header'
+                  id: $options.ariaId + '_header',
+                  class: "p-fieldset-legend-text"
                 }, vue.toDisplayString($props.legend), 9, _hoisted_2)
               ])
             : vue.createCommentVNode("", true),
           ($props.toggleable)
             ? vue.withDirectives((vue.openBlock(), vue.createElementBlock("a", {
                 key: 1,
+                id: $options.ariaId + '_header',
                 tabindex: "0",
-                onClick: _cache[0] || (_cache[0] = (...args) => ($options.toggle && $options.toggle(...args))),
-                onKeydown: _cache[1] || (_cache[1] = vue.withKeys((...args) => ($options.toggle && $options.toggle(...args)), ["enter"])),
-                id: $options.ariaId +  '_header',
+                role: "button",
                 "aria-controls": $options.ariaId + '_content',
-                "aria-expanded": !$data.d_collapsed
+                "aria-expanded": !$data.d_collapsed,
+                "aria-label": $props.toggleButtonProps || $props.legend,
+                onClick: _cache[0] || (_cache[0] = (...args) => ($options.toggle && $options.toggle(...args))),
+                onKeydown: _cache[1] || (_cache[1] = (...args) => ($options.onKeyDown && $options.onKeyDown(...args)))
               }, [
                 vue.createElementVNode("span", {
                   class: vue.normalizeClass($options.iconClass)
@@ -96,9 +108,9 @@ this.primevue.fieldset = (function (utils, Ripple, vue) {
         vue.createVNode(vue.Transition, { name: "p-toggleable-content" }, {
           default: vue.withCtx(() => [
             vue.withDirectives(vue.createElementVNode("div", {
+              id: $options.ariaId + '_content',
               class: "p-toggleable-content",
               role: "region",
-              id: $options.ariaId + '_content',
               "aria-labelledby": $options.ariaId + '_header'
             }, [
               vue.createElementVNode("div", _hoisted_6, [

package/fieldset/fieldset.min.js

@@ -1 +1 @@
-this.primevue=this.primevue||{},this.primevue.fieldset=function(e,t,l){"use strict";function n(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var i={name:"Fieldset",emits:["update:collapsed","toggle"],props:{legend:String,toggleable:Boolean,collapsed:Boolean},data(){return{d_collapsed:this.collapsed}},watch:{collapsed(e){this.d_collapsed=e}},methods:{toggle(e){this.d_collapsed=!this.d_collapsed,this.$emit("update:collapsed",this.d_collapsed),this.$emit("toggle",{originalEvent:e,value:this.d_collapsed})}},computed:{iconClass(){return["p-fieldset-toggler pi ",{"pi-minus":!this.d_collapsed,"pi-plus":this.d_collapsed}]},ariaId:()=>e.UniqueComponentId()},directives:{ripple:n(t).default}};const a={class:"p-fieldset-legend"},d=["id"],o=["id","aria-controls","aria-expanded"],s={class:"p-fieldset-legend-text"},r=["id","aria-labelledby"],c={class:"p-fieldset-content"};return function(e,t){void 0===t&&(t={});var l=t.insertAt;if(e&&"undefined"!=typeof document){var n=document.head||document.getElementsByTagName("head")[0],i=document.createElement("style");i.type="text/css","top"===l&&n.firstChild?n.insertBefore(i,n.firstChild):n.appendChild(i),i.styleSheet?i.styleSheet.cssText=e:i.appendChild(document.createTextNode(e))}}("\n.p-fieldset-legend > a,\n.p-fieldset-legend > span {\n    display: -webkit-box;\n    display: -ms-flexbox;\n    display: flex;\n    -webkit-box-align: center;\n        -ms-flex-align: center;\n            align-items: center;\n    -webkit-box-pack: center;\n        -ms-flex-pack: center;\n            justify-content: center;\n}\n.p-fieldset-toggleable .p-fieldset-legend a {\n    cursor: pointer;\n    -webkit-user-select: none;\n       -moz-user-select: none;\n        -ms-user-select: none;\n            user-select: none;\n    overflow: hidden;\n    position: relative;\n    text-decoration: none;\n}\n.p-fieldset-legend-text {\n    line-height: 1;\n}\n"),i.render=function(e,t,n,i,p,g){const m=l.resolveDirective("ripple");return l.openBlock(),l.createElementBlock("fieldset",{class:l.normalizeClass(["p-fieldset p-component",{"p-fieldset-toggleable":n.toggleable}])},[l.createElementVNode("legend",a,[n.toggleable?l.createCommentVNode("",!0):l.renderSlot(e.$slots,"legend",{key:0},(()=>[l.createElementVNode("span",{class:"p-fieldset-legend-text",id:g.ariaId+"_header"},l.toDisplayString(n.legend),9,d)])),n.toggleable?l.withDirectives((l.openBlock(),l.createElementBlock("a",{key:1,tabindex:"0",onClick:t[0]||(t[0]=(...e)=>g.toggle&&g.toggle(...e)),onKeydown:t[1]||(t[1]=l.withKeys(((...e)=>g.toggle&&g.toggle(...e)),["enter"])),id:g.ariaId+"_header","aria-controls":g.ariaId+"_content","aria-expanded":!p.d_collapsed},[l.createElementVNode("span",{class:l.normalizeClass(g.iconClass)},null,2),l.renderSlot(e.$slots,"legend",{},(()=>[l.createElementVNode("span",s,l.toDisplayString(n.legend),1)]))],40,o)),[[m]]):l.createCommentVNode("",!0)]),l.createVNode(l.Transition,{name:"p-toggleable-content"},{default:l.withCtx((()=>[l.withDirectives(l.createElementVNode("div",{class:"p-toggleable-content",role:"region",id:g.ariaId+"_content","aria-labelledby":g.ariaId+"_header"},[l.createElementVNode("div",c,[l.renderSlot(e.$slots,"default")])],8,r),[[l.vShow,!p.d_collapsed]])])),_:3})],2)},i}(primevue.utils,primevue.ripple,Vue);
+this.primevue=this.primevue||{},this.primevue.fieldset=function(e,t,l){"use strict";function n(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var o={name:"Fieldset",emits:["update:collapsed","toggle"],props:{legend:String,toggleable:Boolean,collapsed:Boolean,toggleButtonProps:String},data(){return{d_collapsed:this.collapsed}},watch:{collapsed(e){this.d_collapsed=e}},methods:{toggle(e){this.d_collapsed=!this.d_collapsed,this.$emit("update:collapsed",this.d_collapsed),this.$emit("toggle",{originalEvent:e,value:this.d_collapsed})},onKeyDown(e){"Enter"!==e.code&&"Space"!==e.code||(this.toggle(e),e.preventDefault())}},computed:{iconClass(){return["p-fieldset-toggler pi ",{"pi-minus":!this.d_collapsed,"pi-plus":this.d_collapsed}]},ariaId:()=>e.UniqueComponentId()},directives:{ripple:n(t).default}};const a={class:"p-fieldset-legend"},i=["id"],d=["id","aria-controls","aria-expanded","aria-label"],s={class:"p-fieldset-legend-text"},r=["id","aria-labelledby"],c={class:"p-fieldset-content"};return function(e,t){void 0===t&&(t={});var l=t.insertAt;if(e&&"undefined"!=typeof document){var n=document.head||document.getElementsByTagName("head")[0],o=document.createElement("style");o.type="text/css","top"===l&&n.firstChild?n.insertBefore(o,n.firstChild):n.appendChild(o),o.styleSheet?o.styleSheet.cssText=e:o.appendChild(document.createTextNode(e))}}("\n.p-fieldset-legend > a,\n.p-fieldset-legend > span {\n    display: -webkit-box;\n    display: -ms-flexbox;\n    display: flex;\n    -webkit-box-align: center;\n        -ms-flex-align: center;\n            align-items: center;\n    -webkit-box-pack: center;\n        -ms-flex-pack: center;\n            justify-content: center;\n}\n.p-fieldset-toggleable .p-fieldset-legend a {\n    cursor: pointer;\n    -webkit-user-select: none;\n       -moz-user-select: none;\n        -ms-user-select: none;\n            user-select: none;\n    overflow: hidden;\n    position: relative;\n    text-decoration: none;\n}\n.p-fieldset-legend-text {\n    line-height: 1;\n}\n"),o.render=function(e,t,n,o,p,g){const u=l.resolveDirective("ripple");return l.openBlock(),l.createElementBlock("fieldset",{class:l.normalizeClass(["p-fieldset p-component",{"p-fieldset-toggleable":n.toggleable}])},[l.createElementVNode("legend",a,[n.toggleable?l.createCommentVNode("",!0):l.renderSlot(e.$slots,"legend",{key:0},(()=>[l.createElementVNode("span",{id:g.ariaId+"_header",class:"p-fieldset-legend-text"},l.toDisplayString(n.legend),9,i)])),n.toggleable?l.withDirectives((l.openBlock(),l.createElementBlock("a",{key:1,id:g.ariaId+"_header",tabindex:"0",role:"button","aria-controls":g.ariaId+"_content","aria-expanded":!p.d_collapsed,"aria-label":n.toggleButtonProps||n.legend,onClick:t[0]||(t[0]=(...e)=>g.toggle&&g.toggle(...e)),onKeydown:t[1]||(t[1]=(...e)=>g.onKeyDown&&g.onKeyDown(...e))},[l.createElementVNode("span",{class:l.normalizeClass(g.iconClass)},null,2),l.renderSlot(e.$slots,"legend",{},(()=>[l.createElementVNode("span",s,l.toDisplayString(n.legend),1)]))],40,d)),[[u]]):l.createCommentVNode("",!0)]),l.createVNode(l.Transition,{name:"p-toggleable-content"},{default:l.withCtx((()=>[l.withDirectives(l.createElementVNode("div",{id:g.ariaId+"_content",class:"p-toggleable-content",role:"region","aria-labelledby":g.ariaId+"_header"},[l.createElementVNode("div",c,[l.renderSlot(e.$slots,"default")])],8,r),[[l.vShow,!p.d_collapsed]])])),_:3})],2)},o}(primevue.utils,primevue.ripple,Vue);

package/fileupload/FileContent.vue

@@ -0,0 +1,51 @@
+<template>
+    <div v-for="(file, index) of files" :key="file.name + file.type + file.size" class="p-fileupload-file">
+        <img role="presentation" class="p-fileupload-file-thumbnail" :alt="file.name" :src="file.objectURL" :width="previewWidth" />
+        <div class="p-fileupload-file-details">
+            <div class="p-fileupload-file-name">{{ file.name }}</div>
+            <span class="p-fileupload-file-size">{{ formatSize(file.size) }}</span>
+            <Badge :value="badgeValue" class="p-fileupload-file-badge" :severity="badgeSeverity" />
+        </div>
+        <div class="p-fileupload-file-actions">
+            <Button icon="pi pi-times" @click="$emit('remove', index)" class="p-fileupload-file-remove p-button-text p-button-danger p-button-rounded"></Button>
+        </div>
+    </div>
+</template>
+
+<script>
+export default {
+    emits: ['remove'],
+    props: {
+        files: {
+            type: Array,
+            default: () => []
+        },
+        badgeSeverity: {
+            type: String,
+            default: 'warning'
+        },
+        badgeValue: {
+            type: String,
+            default: null
+        },
+        previewWidth: {
+            type: Number,
+            default: 50
+        }
+    },
+    methods: {
+        formatSize(bytes) {
+            if (bytes === 0) {
+                return '0 B';
+            }
+
+            let k = 1000,
+                dm = 3,
+                sizes = ['B', 'KB', 'MB', 'GB', 'TB', 'PB', 'EB', 'ZB', 'YB'],
+                i = Math.floor(Math.log(bytes) / Math.log(k));
+
+            return parseFloat((bytes / Math.pow(k, i)).toFixed(dm)) + ' ' + sizes[i];
+        }
+    }
+};
+</script>

package/fileupload/FileUpload.d.ts

@@ -87,6 +87,17 @@ export interface FileUploadRemoveEvent {
     files: File[];
 }
 
+export interface FileUploadRemoveUploadedFile {
+    /**
+     * Removed file.
+     */
+    file: File;
+    /**
+     * Remaining files to be uploaded.
+     */
+    files: File[];
+}
+
 export interface FileUploadProps {
     /**
      * Name of the request parameter to identify the files at backend.
@@ -202,7 +213,11 @@ export interface FileUploadProps {
 
 export interface FileUploadSlots {
     /**
-     * Custom empty template.
+     * Custom uploaded content template.
+     */
+    content: () => VNode[];
+    /**
+     * Custom content when there is no selected file.
      */
     empty: () => VNode[];
 }
@@ -212,7 +227,7 @@ export declare type FileUploadEmits = {
      * Callback to invoke when files are selected.
      * @param {FileUploadSelectEvent} event - Custom select event.
      */
-    'select': (event: FileUploadSelectEvent) => void;
+    select: (event: FileUploadSelectEvent) => void;
     /**
      * Callback to invoke before file upload begins to customize the request such as post parameters before the files.
      * @param {FileUploadBeforeUploadEvent} event - Custom before upload event.
@@ -222,22 +237,22 @@ export declare type FileUploadEmits = {
      * Callback to invoke when files are being uploaded.
      * @param {FileUploadProgressEvent} event - Custom progress event.
      */
-    'progress': (event: FileUploadProgressEvent) => void;
+    progress: (event: FileUploadProgressEvent) => void;
     /**
      * Callback to invoke when file upload is complete.
      * @param {FileUploadUploadEvent} event - Custom upload event.
      */
-    'upload': (event: FileUploadUploadEvent) => void;
+    upload: (event: FileUploadUploadEvent) => void;
     /**
      * Callback to invoke to implement a custom upload.
      * @param {FileUploadUploaderEvent} event - Custom uploader event.
      */
-    'uploader': (event: FileUploadUploaderEvent) => void;
+    uploader: (event: FileUploadUploaderEvent) => void;
     /**
      * Callback to invoke if file upload fails.
      * @param {FileUploadErrorEvent} event - Custom error event.
      */
-    'error': (event: FileUploadErrorEvent) => void;
+    error: (event: FileUploadErrorEvent) => void;
     /**
      * Callback to invoke before file send begins to customize the request such as adding headers.
      * @param {FileUploadBeforeSendEvent} event - Custom before send event.
@@ -246,19 +261,24 @@ export declare type FileUploadEmits = {
     /**
      * Callback to invoke when files in queue are removed without uploading.
      */
-    'clear': () => void;
+    clear: () => void;
     /**
      * Callback to invoke when a singe file is removed from the list.
      * @param {FileUploadRemoveEvent} event - Custom remove event.
      */
-    'remove': (event: FileUploadRemoveEvent) => void;
-}
+    remove: (event: FileUploadRemoveEvent) => void;
+    /**
+     * Callback to invoke when a single uploaded file is removed from the uploaded file list.
+     * @param {FileUploadRemoveUploadedFile} event - Custom uploaded file remove event.
+     */
+    removeUploadedFile: (event: FileUploadRemoveUploadedFile) => void;
+};
 
-declare class FileUpload extends ClassComponent<FileUploadProps, FileUploadSlots, FileUploadEmits> { }
+declare class FileUpload extends ClassComponent<FileUploadProps, FileUploadSlots, FileUploadEmits> {}
 
 declare module '@vue/runtime-core' {
     interface GlobalComponents {
-        FileUpload: GlobalComponentConstructor<FileUpload>
+        FileUpload: GlobalComponentConstructor<FileUpload>;
     }
 }
 
@@ -268,7 +288,7 @@ declare module '@vue/runtime-core' {
  *
  * Demos:
  *
- * - [FileUpload](https://www.primefaces.org/primevue/showcase/#/fileupload)
+ * - [FileUpload](https://www.primefaces.org/primevue/fileupload)
  *
  */
 export default FileUpload;