primevue 3.26.0 → 3.27.0

package/fieldset/fieldset.cjs.js

@@ -1,15 +1,22 @@
 'use strict';
 
+var BaseComponent = require('primevue/basecomponent');
+var MinusIcon = require('primevue/icons/minus');
+var PlusIcon = require('primevue/icons/plus');
 var Ripple = require('primevue/ripple');
 var utils = require('primevue/utils');
 var vue = require('vue');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
+var BaseComponent__default = /*#__PURE__*/_interopDefaultLegacy(BaseComponent);
+var MinusIcon__default = /*#__PURE__*/_interopDefaultLegacy(MinusIcon);
+var PlusIcon__default = /*#__PURE__*/_interopDefaultLegacy(PlusIcon);
 var Ripple__default = /*#__PURE__*/_interopDefaultLegacy(Ripple);
 
 var script = {
     name: 'Fieldset',
+    extends: BaseComponent__default["default"],
     emits: ['update:collapsed', 'toggle'],
     props: {
         legend: String,
@@ -47,15 +54,6 @@ var script = {
         }
     },
     computed: {
-        iconClass() {
-            return [
-                'p-fieldset-toggler pi ',
-                {
-                    'pi-minus': !this.d_collapsed,
-                    'pi-plus': this.d_collapsed
-                }
-            ];
-        },
         ariaId() {
             return utils.UniqueComponentId();
         },
@@ -65,29 +63,30 @@ var script = {
     },
     directives: {
         ripple: Ripple__default["default"]
+    },
+    components: {
+        PlusIcon: PlusIcon__default["default"],
+        MinusIcon: MinusIcon__default["default"]
     }
 };
 
-const _hoisted_1 = { class: "p-fieldset-legend" };
-const _hoisted_2 = ["id"];
-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" };
+const _hoisted_1 = ["id"];
+const _hoisted_2 = ["id", "aria-controls", "aria-expanded", "aria-label"];
+const _hoisted_3 = ["id", "aria-labelledby"];
 
 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 }])
-  }, [
-    vue.createElementVNode("legend", _hoisted_1, [
+  return (vue.openBlock(), vue.createElementBlock("fieldset", vue.mergeProps({
+    class: ['p-fieldset p-component', { 'p-fieldset-toggleable': $props.toggleable }]
+  }, _ctx.ptm('root')), [
+    vue.createElementVNode("legend", vue.mergeProps({ class: "p-fieldset-legend" }, _ctx.ptm('legend')), [
       (!$props.toggleable)
         ? vue.renderSlot(_ctx.$slots, "legend", { key: 0 }, () => [
-            vue.createElementVNode("span", {
+            vue.createElementVNode("span", vue.mergeProps({
               id: $options.ariaId + '_header',
               class: "p-fieldset-legend-text"
-            }, vue.toDisplayString($props.legend), 9, _hoisted_2)
+            }, _ctx.ptm('legendtitle')), vue.toDisplayString($props.legend), 17, _hoisted_1)
           ])
         : vue.createCommentVNode("", true),
       ($props.toggleable)
@@ -101,36 +100,36 @@ function render(_ctx, _cache, $props, $setup, $data, $options) {
             "aria-label": $options.buttonAriaLabel,
             onClick: _cache[0] || (_cache[0] = (...args) => ($options.toggle && $options.toggle(...args))),
             onKeydown: _cache[1] || (_cache[1] = (...args) => ($options.onKeyDown && $options.onKeyDown(...args)))
-          }, $props.toggleButtonProps), [
-            vue.createElementVNode("span", {
-              class: vue.normalizeClass($options.iconClass)
-            }, null, 2),
+          }, { ...$props.toggleButtonProps, ..._ctx.ptm('toggler') }), [
+            vue.renderSlot(_ctx.$slots, "togglericon", { collapsed: $data.d_collapsed }, () => [
+              (vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent($data.d_collapsed ? 'PlusIcon' : 'MinusIcon'), vue.mergeProps({ class: "p-fieldset-toggler" }, _ctx.ptm('togglericon')), null, 16))
+            ]),
             vue.renderSlot(_ctx.$slots, "legend", {}, () => [
-              vue.createElementVNode("span", _hoisted_4, vue.toDisplayString($props.legend), 1)
+              vue.createElementVNode("span", vue.mergeProps({ class: "p-fieldset-legend-text" }, _ctx.ptm('legendtitle')), vue.toDisplayString($props.legend), 17)
             ])
-          ], 16, _hoisted_3)), [
+          ], 16, _hoisted_2)), [
             [_directive_ripple]
           ])
         : vue.createCommentVNode("", true)
-    ]),
+    ], 16),
     vue.createVNode(vue.Transition, { name: "p-toggleable-content" }, {
       default: vue.withCtx(() => [
-        vue.withDirectives(vue.createElementVNode("div", {
+        vue.withDirectives(vue.createElementVNode("div", vue.mergeProps({
           id: $options.ariaId + '_content',
           class: "p-toggleable-content",
           role: "region",
           "aria-labelledby": $options.ariaId + '_header'
-        }, [
-          vue.createElementVNode("div", _hoisted_6, [
+        }, _ctx.ptm('toggleablecontent')), [
+          vue.createElementVNode("div", vue.mergeProps({ class: "p-fieldset-content" }, _ctx.ptm('content')), [
             vue.renderSlot(_ctx.$slots, "default")
-          ])
-        ], 8, _hoisted_5), [
+          ], 16)
+        ], 16, _hoisted_3), [
           [vue.vShow, !$data.d_collapsed]
         ])
       ]),
       _: 3
     })
-  ], 2))
+  ], 16))
 }
 
 function styleInject(css, ref) {

package/fieldset/fieldset.cjs.min.js

@@ -1 +1 @@
-"use strict";var e=require("primevue/ripple"),t=require("primevue/utils"),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:{type:null,default:null}},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:()=>t.UniqueComponentId(),buttonAriaLabel(){return this.toggleButtonProps&&this.toggleButtonProps["aria-label"]?this.toggleButtonProps["aria-label"]:this.legend}},directives:{ripple:n(e).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"],p={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: flex;\n    align-items: center;\n    justify-content: center;\n}\n.p-fieldset-toggleable .p-fieldset-legend a {\n    cursor: pointer;\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,c,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",l.mergeProps({key:1,id:g.ariaId+"_header",tabindex:"0",role:"button","aria-controls":g.ariaId+"_content","aria-expanded":!c.d_collapsed,"aria-label":g.buttonAriaLabel,onClick:t[0]||(t[0]=(...e)=>g.toggle&&g.toggle(...e)),onKeydown:t[1]||(t[1]=(...e)=>g.onKeyDown&&g.onKeyDown(...e))},n.toggleButtonProps),[l.createElementVNode("span",{class:l.normalizeClass(g.iconClass)},null,2),l.renderSlot(e.$slots,"legend",{},(()=>[l.createElementVNode("span",s,l.toDisplayString(n.legend),1)]))],16,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",p,[l.renderSlot(e.$slots,"default")])],8,r),[[l.vShow,!c.d_collapsed]])])),_:3})],2)},module.exports=o;
+"use strict";var e=require("primevue/basecomponent"),t=require("primevue/icons/minus"),l=require("primevue/icons/plus"),o=require("primevue/ripple"),n=require("primevue/utils"),a=require("vue");function r(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var d=r(e),i=r(t),s=r(l),p=r(o),c={name:"Fieldset",extends:d.default,emits:["update:collapsed","toggle"],props:{legend:String,toggleable:Boolean,collapsed:Boolean,toggleButtonProps:{type:null,default:null}},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:{ariaId:()=>n.UniqueComponentId(),buttonAriaLabel(){return this.toggleButtonProps&&this.toggleButtonProps["aria-label"]?this.toggleButtonProps["aria-label"]:this.legend}},directives:{ripple:p.default},components:{PlusIcon:s.default,MinusIcon:i.default}};const g=["id"],u=["id","aria-controls","aria-expanded","aria-label"],m=["id","aria-labelledby"];!function(e,t){void 0===t&&(t={});var l=t.insertAt;if(e&&"undefined"!=typeof document){var o=document.head||document.getElementsByTagName("head")[0],n=document.createElement("style");n.type="text/css","top"===l&&o.firstChild?o.insertBefore(n,o.firstChild):o.appendChild(n),n.styleSheet?n.styleSheet.cssText=e:n.appendChild(document.createTextNode(e))}}("\n.p-fieldset-legend > a,\n.p-fieldset-legend > span {\n    display: flex;\n    align-items: center;\n    justify-content: center;\n}\n.p-fieldset-toggleable .p-fieldset-legend a {\n    cursor: pointer;\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"),c.render=function(e,t,l,o,n,r){const d=a.resolveDirective("ripple");return a.openBlock(),a.createElementBlock("fieldset",a.mergeProps({class:["p-fieldset p-component",{"p-fieldset-toggleable":l.toggleable}]},e.ptm("root")),[a.createElementVNode("legend",a.mergeProps({class:"p-fieldset-legend"},e.ptm("legend")),[l.toggleable?a.createCommentVNode("",!0):a.renderSlot(e.$slots,"legend",{key:0},(()=>[a.createElementVNode("span",a.mergeProps({id:r.ariaId+"_header",class:"p-fieldset-legend-text"},e.ptm("legendtitle")),a.toDisplayString(l.legend),17,g)])),l.toggleable?a.withDirectives((a.openBlock(),a.createElementBlock("a",a.mergeProps({key:1,id:r.ariaId+"_header",tabindex:"0",role:"button","aria-controls":r.ariaId+"_content","aria-expanded":!n.d_collapsed,"aria-label":r.buttonAriaLabel,onClick:t[0]||(t[0]=(...e)=>r.toggle&&r.toggle(...e)),onKeydown:t[1]||(t[1]=(...e)=>r.onKeyDown&&r.onKeyDown(...e))},{...l.toggleButtonProps,...e.ptm("toggler")}),[a.renderSlot(e.$slots,"togglericon",{collapsed:n.d_collapsed},(()=>[(a.openBlock(),a.createBlock(a.resolveDynamicComponent(n.d_collapsed?"PlusIcon":"MinusIcon"),a.mergeProps({class:"p-fieldset-toggler"},e.ptm("togglericon")),null,16))])),a.renderSlot(e.$slots,"legend",{},(()=>[a.createElementVNode("span",a.mergeProps({class:"p-fieldset-legend-text"},e.ptm("legendtitle")),a.toDisplayString(l.legend),17)]))],16,u)),[[d]]):a.createCommentVNode("",!0)],16),a.createVNode(a.Transition,{name:"p-toggleable-content"},{default:a.withCtx((()=>[a.withDirectives(a.createElementVNode("div",a.mergeProps({id:r.ariaId+"_content",class:"p-toggleable-content",role:"region","aria-labelledby":r.ariaId+"_header"},e.ptm("toggleablecontent")),[a.createElementVNode("div",a.mergeProps({class:"p-fieldset-content"},e.ptm("content")),[a.renderSlot(e.$slots,"default")],16)],16,m),[[a.vShow,!n.d_collapsed]])])),_:3})],16)},module.exports=c;

package/fieldset/fieldset.esm.js

@@ -1,9 +1,13 @@
+import BaseComponent from 'primevue/basecomponent';
+import MinusIcon from 'primevue/icons/minus';
+import PlusIcon from 'primevue/icons/plus';
 import Ripple from 'primevue/ripple';
 import { UniqueComponentId } from 'primevue/utils';
-import { resolveDirective, openBlock, createElementBlock, normalizeClass, createElementVNode, renderSlot, toDisplayString, createCommentVNode, withDirectives, mergeProps, createVNode, Transition, withCtx, vShow } from 'vue';
+import { resolveDirective, openBlock, createElementBlock, mergeProps, createElementVNode, renderSlot, toDisplayString, createCommentVNode, withDirectives, createBlock, resolveDynamicComponent, createVNode, Transition, withCtx, vShow } from 'vue';
 
 var script = {
     name: 'Fieldset',
+    extends: BaseComponent,
     emits: ['update:collapsed', 'toggle'],
     props: {
         legend: String,
@@ -41,15 +45,6 @@ var script = {
         }
     },
     computed: {
-        iconClass() {
-            return [
-                'p-fieldset-toggler pi ',
-                {
-                    'pi-minus': !this.d_collapsed,
-                    'pi-plus': this.d_collapsed
-                }
-            ];
-        },
         ariaId() {
             return UniqueComponentId();
         },
@@ -59,29 +54,30 @@ var script = {
     },
     directives: {
         ripple: Ripple
+    },
+    components: {
+        PlusIcon,
+        MinusIcon
     }
 };
 
-const _hoisted_1 = { class: "p-fieldset-legend" };
-const _hoisted_2 = ["id"];
-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" };
+const _hoisted_1 = ["id"];
+const _hoisted_2 = ["id", "aria-controls", "aria-expanded", "aria-label"];
+const _hoisted_3 = ["id", "aria-labelledby"];
 
 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 }])
-  }, [
-    createElementVNode("legend", _hoisted_1, [
+  return (openBlock(), createElementBlock("fieldset", mergeProps({
+    class: ['p-fieldset p-component', { 'p-fieldset-toggleable': $props.toggleable }]
+  }, _ctx.ptm('root')), [
+    createElementVNode("legend", mergeProps({ class: "p-fieldset-legend" }, _ctx.ptm('legend')), [
       (!$props.toggleable)
         ? renderSlot(_ctx.$slots, "legend", { key: 0 }, () => [
-            createElementVNode("span", {
+            createElementVNode("span", mergeProps({
               id: $options.ariaId + '_header',
               class: "p-fieldset-legend-text"
-            }, toDisplayString($props.legend), 9, _hoisted_2)
+            }, _ctx.ptm('legendtitle')), toDisplayString($props.legend), 17, _hoisted_1)
           ])
         : createCommentVNode("", true),
       ($props.toggleable)
@@ -95,36 +91,36 @@ function render(_ctx, _cache, $props, $setup, $data, $options) {
             "aria-label": $options.buttonAriaLabel,
             onClick: _cache[0] || (_cache[0] = (...args) => ($options.toggle && $options.toggle(...args))),
             onKeydown: _cache[1] || (_cache[1] = (...args) => ($options.onKeyDown && $options.onKeyDown(...args)))
-          }, $props.toggleButtonProps), [
-            createElementVNode("span", {
-              class: normalizeClass($options.iconClass)
-            }, null, 2),
+          }, { ...$props.toggleButtonProps, ..._ctx.ptm('toggler') }), [
+            renderSlot(_ctx.$slots, "togglericon", { collapsed: $data.d_collapsed }, () => [
+              (openBlock(), createBlock(resolveDynamicComponent($data.d_collapsed ? 'PlusIcon' : 'MinusIcon'), mergeProps({ class: "p-fieldset-toggler" }, _ctx.ptm('togglericon')), null, 16))
+            ]),
             renderSlot(_ctx.$slots, "legend", {}, () => [
-              createElementVNode("span", _hoisted_4, toDisplayString($props.legend), 1)
+              createElementVNode("span", mergeProps({ class: "p-fieldset-legend-text" }, _ctx.ptm('legendtitle')), toDisplayString($props.legend), 17)
             ])
-          ], 16, _hoisted_3)), [
+          ], 16, _hoisted_2)), [
             [_directive_ripple]
           ])
         : createCommentVNode("", true)
-    ]),
+    ], 16),
     createVNode(Transition, { name: "p-toggleable-content" }, {
       default: withCtx(() => [
-        withDirectives(createElementVNode("div", {
+        withDirectives(createElementVNode("div", mergeProps({
           id: $options.ariaId + '_content',
           class: "p-toggleable-content",
           role: "region",
           "aria-labelledby": $options.ariaId + '_header'
-        }, [
-          createElementVNode("div", _hoisted_6, [
+        }, _ctx.ptm('toggleablecontent')), [
+          createElementVNode("div", mergeProps({ class: "p-fieldset-content" }, _ctx.ptm('content')), [
             renderSlot(_ctx.$slots, "default")
-          ])
-        ], 8, _hoisted_5), [
+          ], 16)
+        ], 16, _hoisted_3), [
           [vShow, !$data.d_collapsed]
         ])
       ]),
       _: 3
     })
-  ], 2))
+  ], 16))
 }
 
 function styleInject(css, ref) {

package/fieldset/fieldset.esm.min.js

@@ -1 +1 @@
-import e from"primevue/ripple";import{UniqueComponentId as t}from"primevue/utils";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,mergeProps as g,createVNode as c,Transition as u,withCtx as f,vShow as h}from"vue";var m={name:"Fieldset",emits:["update:collapsed","toggle"],props:{legend:String,toggleable:Boolean,collapsed:Boolean,toggleButtonProps:{type:null,default:null}},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:()=>t(),buttonAriaLabel(){return this.toggleButtonProps&&this.toggleButtonProps["aria-label"]?this.toggleButtonProps["aria-label"]:this.legend}},directives:{ripple:e}};const b={class:"p-fieldset-legend"},y=["id"],_=["id","aria-controls","aria-expanded","aria-label"],v={class:"p-fieldset-legend-text"},x=["id","aria-labelledby"],B={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: flex;\n    align-items: center;\n    justify-content: center;\n}\n.p-fieldset-toggleable .p-fieldset-legend a {\n    cursor: pointer;\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,C,w,I){const P=l("ripple");return n(),a("fieldset",{class:o(["p-fieldset p-component",{"p-fieldset-toggleable":m.toggleable}])},[d("legend",b,[m.toggleable?r("",!0):s(e.$slots,"legend",{key:0},(()=>[d("span",{id:I.ariaId+"_header",class:"p-fieldset-legend-text"},i(m.legend),9,y)])),m.toggleable?p((n(),a("a",g({key:1,id:I.ariaId+"_header",tabindex:"0",role:"button","aria-controls":I.ariaId+"_content","aria-expanded":!w.d_collapsed,"aria-label":I.buttonAriaLabel,onClick:t[0]||(t[0]=(...e)=>I.toggle&&I.toggle(...e)),onKeydown:t[1]||(t[1]=(...e)=>I.onKeyDown&&I.onKeyDown(...e))},m.toggleButtonProps),[d("span",{class:o(I.iconClass)},null,2),s(e.$slots,"legend",{},(()=>[d("span",v,i(m.legend),1)]))],16,_)),[[P]]):r("",!0)]),c(u,{name:"p-toggleable-content"},{default:f((()=>[p(d("div",{id:I.ariaId+"_content",class:"p-toggleable-content",role:"region","aria-labelledby":I.ariaId+"_header"},[d("div",B,[s(e.$slots,"default")])],8,x),[[h,!w.d_collapsed]])])),_:3})],2)};export{m as default};
+import e from"primevue/basecomponent";import t from"primevue/icons/minus";import l from"primevue/icons/plus";import o from"primevue/ripple";import{UniqueComponentId as n}from"primevue/utils";import{resolveDirective as a,openBlock as d,createElementBlock as i,mergeProps as s,createElementVNode as r,renderSlot as p,toDisplayString as g,createCommentVNode as c,withDirectives as u,createBlock as m,resolveDynamicComponent as f,createVNode as h,Transition as b,withCtx as v,vShow as y}from"vue";var _={name:"Fieldset",extends:e,emits:["update:collapsed","toggle"],props:{legend:String,toggleable:Boolean,collapsed:Boolean,toggleButtonProps:{type:null,default:null}},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:{ariaId:()=>n(),buttonAriaLabel(){return this.toggleButtonProps&&this.toggleButtonProps["aria-label"]?this.toggleButtonProps["aria-label"]:this.legend}},directives:{ripple:o},components:{PlusIcon:l,MinusIcon:t}};const x=["id"],I=["id","aria-controls","aria-expanded","aria-label"],B=["id","aria-labelledby"];!function(e,t){void 0===t&&(t={});var l=t.insertAt;if(e&&"undefined"!=typeof document){var o=document.head||document.getElementsByTagName("head")[0],n=document.createElement("style");n.type="text/css","top"===l&&o.firstChild?o.insertBefore(n,o.firstChild):o.appendChild(n),n.styleSheet?n.styleSheet.cssText=e:n.appendChild(document.createTextNode(e))}}("\n.p-fieldset-legend > a,\n.p-fieldset-legend > span {\n    display: flex;\n    align-items: center;\n    justify-content: center;\n}\n.p-fieldset-toggleable .p-fieldset-legend a {\n    cursor: pointer;\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"),_.render=function(e,t,l,o,n,_){const P=a("ripple");return d(),i("fieldset",s({class:["p-fieldset p-component",{"p-fieldset-toggleable":l.toggleable}]},e.ptm("root")),[r("legend",s({class:"p-fieldset-legend"},e.ptm("legend")),[l.toggleable?c("",!0):p(e.$slots,"legend",{key:0},(()=>[r("span",s({id:_.ariaId+"_header",class:"p-fieldset-legend-text"},e.ptm("legendtitle")),g(l.legend),17,x)])),l.toggleable?u((d(),i("a",s({key:1,id:_.ariaId+"_header",tabindex:"0",role:"button","aria-controls":_.ariaId+"_content","aria-expanded":!n.d_collapsed,"aria-label":_.buttonAriaLabel,onClick:t[0]||(t[0]=(...e)=>_.toggle&&_.toggle(...e)),onKeydown:t[1]||(t[1]=(...e)=>_.onKeyDown&&_.onKeyDown(...e))},{...l.toggleButtonProps,...e.ptm("toggler")}),[p(e.$slots,"togglericon",{collapsed:n.d_collapsed},(()=>[(d(),m(f(n.d_collapsed?"PlusIcon":"MinusIcon"),s({class:"p-fieldset-toggler"},e.ptm("togglericon")),null,16))])),p(e.$slots,"legend",{},(()=>[r("span",s({class:"p-fieldset-legend-text"},e.ptm("legendtitle")),g(l.legend),17)]))],16,I)),[[P]]):c("",!0)],16),h(b,{name:"p-toggleable-content"},{default:v((()=>[u(r("div",s({id:_.ariaId+"_content",class:"p-toggleable-content",role:"region","aria-labelledby":_.ariaId+"_header"},e.ptm("toggleablecontent")),[r("div",s({class:"p-fieldset-content"},e.ptm("content")),[p(e.$slots,"default")],16)],16,B),[[y,!n.d_collapsed]])])),_:3})],16)};export{_ as default};

package/fieldset/fieldset.js

@@ -1,13 +1,17 @@
 this.primevue = this.primevue || {};
-this.primevue.fieldset = (function (Ripple, utils, vue) {
+this.primevue.fieldset = (function (BaseComponent, MinusIcon, PlusIcon, Ripple, utils, vue) {
     'use strict';
 
     function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
+    var BaseComponent__default = /*#__PURE__*/_interopDefaultLegacy(BaseComponent);
+    var MinusIcon__default = /*#__PURE__*/_interopDefaultLegacy(MinusIcon);
+    var PlusIcon__default = /*#__PURE__*/_interopDefaultLegacy(PlusIcon);
     var Ripple__default = /*#__PURE__*/_interopDefaultLegacy(Ripple);
 
     var script = {
         name: 'Fieldset',
+        extends: BaseComponent__default["default"],
         emits: ['update:collapsed', 'toggle'],
         props: {
             legend: String,
@@ -45,15 +49,6 @@ this.primevue.fieldset = (function (Ripple, utils, vue) {
             }
         },
         computed: {
-            iconClass() {
-                return [
-                    'p-fieldset-toggler pi ',
-                    {
-                        'pi-minus': !this.d_collapsed,
-                        'pi-plus': this.d_collapsed
-                    }
-                ];
-            },
             ariaId() {
                 return utils.UniqueComponentId();
             },
@@ -63,29 +58,30 @@ this.primevue.fieldset = (function (Ripple, utils, vue) {
         },
         directives: {
             ripple: Ripple__default["default"]
+        },
+        components: {
+            PlusIcon: PlusIcon__default["default"],
+            MinusIcon: MinusIcon__default["default"]
         }
     };
 
-    const _hoisted_1 = { class: "p-fieldset-legend" };
-    const _hoisted_2 = ["id"];
-    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" };
+    const _hoisted_1 = ["id"];
+    const _hoisted_2 = ["id", "aria-controls", "aria-expanded", "aria-label"];
+    const _hoisted_3 = ["id", "aria-labelledby"];
 
     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 }])
-      }, [
-        vue.createElementVNode("legend", _hoisted_1, [
+      return (vue.openBlock(), vue.createElementBlock("fieldset", vue.mergeProps({
+        class: ['p-fieldset p-component', { 'p-fieldset-toggleable': $props.toggleable }]
+      }, _ctx.ptm('root')), [
+        vue.createElementVNode("legend", vue.mergeProps({ class: "p-fieldset-legend" }, _ctx.ptm('legend')), [
           (!$props.toggleable)
             ? vue.renderSlot(_ctx.$slots, "legend", { key: 0 }, () => [
-                vue.createElementVNode("span", {
+                vue.createElementVNode("span", vue.mergeProps({
                   id: $options.ariaId + '_header',
                   class: "p-fieldset-legend-text"
-                }, vue.toDisplayString($props.legend), 9, _hoisted_2)
+                }, _ctx.ptm('legendtitle')), vue.toDisplayString($props.legend), 17, _hoisted_1)
               ])
             : vue.createCommentVNode("", true),
           ($props.toggleable)
@@ -99,36 +95,36 @@ this.primevue.fieldset = (function (Ripple, utils, vue) {
                 "aria-label": $options.buttonAriaLabel,
                 onClick: _cache[0] || (_cache[0] = (...args) => ($options.toggle && $options.toggle(...args))),
                 onKeydown: _cache[1] || (_cache[1] = (...args) => ($options.onKeyDown && $options.onKeyDown(...args)))
-              }, $props.toggleButtonProps), [
-                vue.createElementVNode("span", {
-                  class: vue.normalizeClass($options.iconClass)
-                }, null, 2),
+              }, { ...$props.toggleButtonProps, ..._ctx.ptm('toggler') }), [
+                vue.renderSlot(_ctx.$slots, "togglericon", { collapsed: $data.d_collapsed }, () => [
+                  (vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent($data.d_collapsed ? 'PlusIcon' : 'MinusIcon'), vue.mergeProps({ class: "p-fieldset-toggler" }, _ctx.ptm('togglericon')), null, 16))
+                ]),
                 vue.renderSlot(_ctx.$slots, "legend", {}, () => [
-                  vue.createElementVNode("span", _hoisted_4, vue.toDisplayString($props.legend), 1)
+                  vue.createElementVNode("span", vue.mergeProps({ class: "p-fieldset-legend-text" }, _ctx.ptm('legendtitle')), vue.toDisplayString($props.legend), 17)
                 ])
-              ], 16, _hoisted_3)), [
+              ], 16, _hoisted_2)), [
                 [_directive_ripple]
               ])
             : vue.createCommentVNode("", true)
-        ]),
+        ], 16),
         vue.createVNode(vue.Transition, { name: "p-toggleable-content" }, {
           default: vue.withCtx(() => [
-            vue.withDirectives(vue.createElementVNode("div", {
+            vue.withDirectives(vue.createElementVNode("div", vue.mergeProps({
               id: $options.ariaId + '_content',
               class: "p-toggleable-content",
               role: "region",
               "aria-labelledby": $options.ariaId + '_header'
-            }, [
-              vue.createElementVNode("div", _hoisted_6, [
+            }, _ctx.ptm('toggleablecontent')), [
+              vue.createElementVNode("div", vue.mergeProps({ class: "p-fieldset-content" }, _ctx.ptm('content')), [
                 vue.renderSlot(_ctx.$slots, "default")
-              ])
-            ], 8, _hoisted_5), [
+              ], 16)
+            ], 16, _hoisted_3), [
               [vue.vShow, !$data.d_collapsed]
             ])
           ]),
           _: 3
         })
-      ], 2))
+      ], 16))
     }
 
     function styleInject(css, ref) {
@@ -165,4 +161,4 @@ this.primevue.fieldset = (function (Ripple, utils, vue) {
 
     return script;
 
-})(primevue.ripple, primevue.utils, Vue);
+})(primevue.basecomponent, primevue.icons.minus, primevue.icons.plus, primevue.ripple, primevue.utils, Vue);

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 o={name:"Fieldset",emits:["update:collapsed","toggle"],props:{legend:String,toggleable:Boolean,collapsed:Boolean,toggleButtonProps:{type:null,default:null}},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:()=>t.UniqueComponentId(),buttonAriaLabel(){return this.toggleButtonProps&&this.toggleButtonProps["aria-label"]?this.toggleButtonProps["aria-label"]:this.legend}},directives:{ripple:n(e).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"],p={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: flex;\n    align-items: center;\n    justify-content: center;\n}\n.p-fieldset-toggleable .p-fieldset-legend a {\n    cursor: pointer;\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,c,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",l.mergeProps({key:1,id:g.ariaId+"_header",tabindex:"0",role:"button","aria-controls":g.ariaId+"_content","aria-expanded":!c.d_collapsed,"aria-label":g.buttonAriaLabel,onClick:t[0]||(t[0]=(...e)=>g.toggle&&g.toggle(...e)),onKeydown:t[1]||(t[1]=(...e)=>g.onKeyDown&&g.onKeyDown(...e))},n.toggleButtonProps),[l.createElementVNode("span",{class:l.normalizeClass(g.iconClass)},null,2),l.renderSlot(e.$slots,"legend",{},(()=>[l.createElementVNode("span",s,l.toDisplayString(n.legend),1)]))],16,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",p,[l.renderSlot(e.$slots,"default")])],8,r),[[l.vShow,!c.d_collapsed]])])),_:3})],2)},o}(primevue.ripple,primevue.utils,Vue);
+this.primevue=this.primevue||{},this.primevue.fieldset=function(e,t,l,o,n,a){"use strict";function d(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var i=d(e),s=d(t),r=d(l),p=d(o),c={name:"Fieldset",extends:i.default,emits:["update:collapsed","toggle"],props:{legend:String,toggleable:Boolean,collapsed:Boolean,toggleButtonProps:{type:null,default:null}},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:{ariaId:()=>n.UniqueComponentId(),buttonAriaLabel(){return this.toggleButtonProps&&this.toggleButtonProps["aria-label"]?this.toggleButtonProps["aria-label"]:this.legend}},directives:{ripple:p.default},components:{PlusIcon:r.default,MinusIcon:s.default}};const g=["id"],u=["id","aria-controls","aria-expanded","aria-label"],m=["id","aria-labelledby"];return function(e,t){void 0===t&&(t={});var l=t.insertAt;if(e&&"undefined"!=typeof document){var o=document.head||document.getElementsByTagName("head")[0],n=document.createElement("style");n.type="text/css","top"===l&&o.firstChild?o.insertBefore(n,o.firstChild):o.appendChild(n),n.styleSheet?n.styleSheet.cssText=e:n.appendChild(document.createTextNode(e))}}("\n.p-fieldset-legend > a,\n.p-fieldset-legend > span {\n    display: flex;\n    align-items: center;\n    justify-content: center;\n}\n.p-fieldset-toggleable .p-fieldset-legend a {\n    cursor: pointer;\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"),c.render=function(e,t,l,o,n,d){const i=a.resolveDirective("ripple");return a.openBlock(),a.createElementBlock("fieldset",a.mergeProps({class:["p-fieldset p-component",{"p-fieldset-toggleable":l.toggleable}]},e.ptm("root")),[a.createElementVNode("legend",a.mergeProps({class:"p-fieldset-legend"},e.ptm("legend")),[l.toggleable?a.createCommentVNode("",!0):a.renderSlot(e.$slots,"legend",{key:0},(()=>[a.createElementVNode("span",a.mergeProps({id:d.ariaId+"_header",class:"p-fieldset-legend-text"},e.ptm("legendtitle")),a.toDisplayString(l.legend),17,g)])),l.toggleable?a.withDirectives((a.openBlock(),a.createElementBlock("a",a.mergeProps({key:1,id:d.ariaId+"_header",tabindex:"0",role:"button","aria-controls":d.ariaId+"_content","aria-expanded":!n.d_collapsed,"aria-label":d.buttonAriaLabel,onClick:t[0]||(t[0]=(...e)=>d.toggle&&d.toggle(...e)),onKeydown:t[1]||(t[1]=(...e)=>d.onKeyDown&&d.onKeyDown(...e))},{...l.toggleButtonProps,...e.ptm("toggler")}),[a.renderSlot(e.$slots,"togglericon",{collapsed:n.d_collapsed},(()=>[(a.openBlock(),a.createBlock(a.resolveDynamicComponent(n.d_collapsed?"PlusIcon":"MinusIcon"),a.mergeProps({class:"p-fieldset-toggler"},e.ptm("togglericon")),null,16))])),a.renderSlot(e.$slots,"legend",{},(()=>[a.createElementVNode("span",a.mergeProps({class:"p-fieldset-legend-text"},e.ptm("legendtitle")),a.toDisplayString(l.legend),17)]))],16,u)),[[i]]):a.createCommentVNode("",!0)],16),a.createVNode(a.Transition,{name:"p-toggleable-content"},{default:a.withCtx((()=>[a.withDirectives(a.createElementVNode("div",a.mergeProps({id:d.ariaId+"_content",class:"p-toggleable-content",role:"region","aria-labelledby":d.ariaId+"_header"},e.ptm("toggleablecontent")),[a.createElementVNode("div",a.mergeProps({class:"p-fieldset-content"},e.ptm("content")),[a.renderSlot(e.$slots,"default")],16)],16,m),[[a.vShow,!n.d_collapsed]])])),_:3})],16)},c}(primevue.basecomponent,primevue.icons.minus,primevue.icons.plus,primevue.ripple,primevue.utils,Vue);

package/fileupload/FileContent.vue

@@ -7,7 +7,12 @@
             <FileUploadBadge :value="badgeValue" class="p-fileupload-file-badge" :severity="badgeSeverity" />
         </div>
         <div class="p-fileupload-file-actions">
-            <FileUploadButton icon="pi pi-times" @click="$emit('remove', index)" class="p-fileupload-file-remove p-button-text p-button-danger p-button-rounded"></FileUploadButton>
+            <FileUploadButton @click="$emit('remove', index)" text rounded severity="danger" class="p-fileupload-file-remove">
+                <template #icon="iconProps">
+                    <component v-if="templates.fileremoveicon" :is="templates.fileremoveicon" :class="iconProps.class" :file="file" :index="index" />
+                    <TimesIcon v-else :class="iconProps.class" aria-hidden="true" />
+                </template>
+            </FileUploadButton>
         </div>
     </div>
 </template>
@@ -15,6 +20,7 @@
 <script>
 import Badge from 'primevue/badge';
 import Button from 'primevue/button';
+import TimesIcon from 'primevue/icons/times';
 
 export default {
     emits: ['remove'],
@@ -34,6 +40,10 @@ export default {
         previewWidth: {
             type: Number,
             default: 50
+        },
+        templates: {
+            type: null,
+            default: null
         }
     },
     methods: {
@@ -52,7 +62,8 @@ export default {
     },
     components: {
         FileUploadButton: Button,
-        FileUploadBadge: Badge
+        FileUploadBadge: Badge,
+        TimesIcon
     }
 };
 </script>

package/fileupload/FileUpload.d.ts

@@ -236,17 +236,17 @@ export interface FileUploadProps {
     showCancelButton?: boolean | undefined;
     /**
      * Icon of the choose button.
-     * @defaultValue pi pi-fw pi-plus
+     * @deprecated since v3.27.0. Use 'chooseicon' slot.
      */
     chooseIcon?: string | undefined;
     /**
      * Icon of the upload button.
-     * @defaultValue pi pi-fw pi-upload
+     * @deprecated since v3.27.0. Use 'updateicon' slot.
      */
     uploadIcon?: string | undefined;
     /**
      * Icon of the cancel button.
-     * @defaultValue pi pi-fw pi-times
+     * @deprecated since v3.27.0. Use 'cancelicon' slot.
      */
     cancelIcon?: string | undefined;
     /**
@@ -321,6 +321,31 @@ export interface FileUploadSlots {
      * Custom content when there is no selected file.
      */
     empty(): VNode[];
+    /**
+     * Custom choose icon template.
+     */
+    chooseicon(): VNode[];
+    /**
+     * Custom upload icon template.
+     */
+    uploadicon(): VNode[];
+    /**
+     * Custom cancel icon template.
+     */
+    cancelicon(): VNode[];
+    /**
+     * Custom remove icon template for each file.
+     */
+    fileremoveicon(scope: {
+        /**
+         * File to upload.
+         */
+        file: File;
+        /**
+         * The index of file
+         */
+        index: number;
+    }): VNode[];
 }
 
 export interface FileUploadEmits {