primevue 3.26.0 → 3.27.0

package/message/message.esm.js

@@ -1,5 +1,10 @@
+import CheckIcon from 'primevue/icons/check';
+import ExclamationTriangleIcon from 'primevue/icons/exclamationtriangle';
+import InfoCircleIcon from 'primevue/icons/infocircle';
+import TimesIcon from 'primevue/icons/times';
+import TimesCircleIcon from 'primevue/icons/timescircle';
 import Ripple from 'primevue/ripple';
-import { resolveDirective, openBlock, createBlock, Transition, withCtx, withDirectives, createElementVNode, normalizeClass, renderSlot, createElementBlock, mergeProps, createCommentVNode, vShow } from 'vue';
+import { resolveComponent, resolveDirective, openBlock, createBlock, Transition, withCtx, withDirectives, createElementVNode, normalizeClass, renderSlot, resolveDynamicComponent, createElementBlock, mergeProps, createCommentVNode, vShow } from 'vue';
 
 var script = {
     name: 'Message',
@@ -23,11 +28,11 @@ var script = {
         },
         icon: {
             type: String,
-            default: null
+            default: undefined
         },
         closeIcon: {
             type: String,
-            default: 'pi pi-times'
+            default: undefined
         },
         closeButtonProps: {
             type: null,
@@ -42,7 +47,7 @@ var script = {
     },
     mounted() {
         if (!this.sticky) {
-            this.x();
+            this.closeAfterDelay();
         }
     },
     methods: {
@@ -50,7 +55,7 @@ var script = {
             this.visible = false;
             this.$emit('close', event);
         },
-        x() {
+        closeAfterDelay() {
             setTimeout(() => {
                 this.visible = false;
             }, this.life);
@@ -60,18 +65,13 @@ var script = {
         containerClass() {
             return 'p-message p-component p-message-' + this.severity;
         },
-        iconClass() {
-            return [
-                'p-message-icon pi',
-                this.icon
-                    ? this.icon
-                    : {
-                          'pi-info-circle': this.severity === 'info',
-                          'pi-check': this.severity === 'success',
-                          'pi-exclamation-triangle': this.severity === 'warn',
-                          'pi-times-circle': this.severity === 'error'
-                      }
-            ];
+        iconComponent() {
+            return {
+                info: InfoCircleIcon,
+                success: CheckIcon,
+                warn: ExclamationTriangleIcon,
+                error: TimesCircleIcon
+            }[this.severity];
         },
         closeAriaLabel() {
             return this.$primevue.config.locale.aria ? this.$primevue.config.locale.aria.close : undefined;
@@ -79,6 +79,13 @@ var script = {
     },
     directives: {
         ripple: Ripple
+    },
+    components: {
+        TimesIcon,
+        InfoCircleIcon,
+        CheckIcon,
+        ExclamationTriangleIcon,
+        TimesCircleIcon
     }
 };
 
@@ -87,6 +94,7 @@ const _hoisted_2 = { class: "p-message-text" };
 const _hoisted_3 = ["aria-label"];
 
 function render(_ctx, _cache, $props, $setup, $data, $options) {
+  const _component_TimesIcon = resolveComponent("TimesIcon");
   const _directive_ripple = resolveDirective("ripple");
 
   return (openBlock(), createBlock(Transition, {
@@ -101,9 +109,11 @@ function render(_ctx, _cache, $props, $setup, $data, $options) {
         "aria-atomic": "true"
       }, [
         createElementVNode("div", _hoisted_1, [
-          createElementVNode("span", {
-            class: normalizeClass($options.iconClass)
-          }, null, 2),
+          renderSlot(_ctx.$slots, "messageicon", { class: "p-message-icon" }, () => [
+            (openBlock(), createBlock(resolveDynamicComponent($props.icon ? 'span' : $options.iconComponent), {
+              class: normalizeClass(['p-message-icon', $props.icon])
+            }, null, 8, ["class"]))
+          ]),
           createElementVNode("div", _hoisted_2, [
             renderSlot(_ctx.$slots, "default")
           ]),
@@ -115,9 +125,17 @@ function render(_ctx, _cache, $props, $setup, $data, $options) {
                 type: "button",
                 onClick: _cache[0] || (_cache[0] = $event => ($options.close($event)))
               }, $props.closeButtonProps), [
-                createElementVNode("i", {
-                  class: normalizeClass(['p-message-close-icon', $props.closeIcon])
-                }, null, 2)
+                renderSlot(_ctx.$slots, "closeicon", { class: "p-message-close-icon" }, () => [
+                  ($props.closeIcon)
+                    ? (openBlock(), createElementBlock("i", {
+                        key: 0,
+                        class: normalizeClass(['p-message-close-icon', $props.closeIcon])
+                      }, null, 2))
+                    : (openBlock(), createBlock(_component_TimesIcon, {
+                        key: 1,
+                        class: "p-message-close-icon"
+                      }))
+                ])
               ], 16, _hoisted_3)), [
                 [_directive_ripple]
               ])

package/message/message.esm.min.js

@@ -1 +1 @@
-import e from"primevue/ripple";import{resolveDirective as s,openBlock as t,createBlock as i,Transition as n,withCtx as a,withDirectives as l,createElementVNode as o,normalizeClass as r,renderSlot as c,createElementBlock as p,mergeProps as m,createCommentVNode as u,vShow as d}from"vue";var g={name:"Message",emits:["close"],props:{severity:{type:String,default:"info"},closable:{type:Boolean,default:!0},sticky:{type:Boolean,default:!0},life:{type:Number,default:3e3},icon:{type:String,default:null},closeIcon:{type:String,default:"pi pi-times"},closeButtonProps:{type:null,default:null}},timeout:null,data:()=>({visible:!0}),mounted(){this.sticky||this.x()},methods:{close(e){this.visible=!1,this.$emit("close",e)},x(){setTimeout((()=>{this.visible=!1}),this.life)}},computed:{containerClass(){return"p-message p-component p-message-"+this.severity},iconClass(){return["p-message-icon pi",this.icon?this.icon:{"pi-info-circle":"info"===this.severity,"pi-check":"success"===this.severity,"pi-exclamation-triangle":"warn"===this.severity,"pi-times-circle":"error"===this.severity}]},closeAriaLabel(){return this.$primevue.config.locale.aria?this.$primevue.config.locale.aria.close:void 0}},directives:{ripple:e}};const f={class:"p-message-wrapper"},v={class:"p-message-text"},h=["aria-label"];!function(e,s){void 0===s&&(s={});var t=s.insertAt;if(e&&"undefined"!=typeof document){var i=document.head||document.getElementsByTagName("head")[0],n=document.createElement("style");n.type="text/css","top"===t&&i.firstChild?i.insertBefore(n,i.firstChild):i.appendChild(n),n.styleSheet?n.styleSheet.cssText=e:n.appendChild(document.createTextNode(e))}}("\n.p-message-wrapper {\n    display: flex;\n    align-items: center;\n}\n.p-message-close {\n    display: flex;\n    align-items: center;\n    justify-content: center;\n}\n.p-message-close.p-link {\n    margin-left: auto;\n    overflow: hidden;\n    position: relative;\n}\n.p-message-enter-from {\n    opacity: 0;\n}\n.p-message-enter-active {\n    transition: opacity 0.3s;\n}\n.p-message.p-message-leave-from {\n    max-height: 1000px;\n}\n.p-message.p-message-leave-to {\n    max-height: 0;\n    opacity: 0;\n    margin: 0 !important;\n}\n.p-message-leave-active {\n    overflow: hidden;\n    transition: max-height 0.3s cubic-bezier(0, 1, 0, 1), opacity 0.3s, margin 0.15s;\n}\n.p-message-leave-active .p-message-close {\n    display: none;\n}\n"),g.render=function(e,g,y,b,x,C){const k=s("ripple");return t(),i(n,{name:"p-message",appear:""},{default:a((()=>[l(o("div",{class:r(C.containerClass),role:"alert","aria-live":"assertive","aria-atomic":"true"},[o("div",f,[o("span",{class:r(C.iconClass)},null,2),o("div",v,[c(e.$slots,"default")]),y.closable?l((t(),p("button",m({key:0,class:"p-message-close p-link","aria-label":C.closeAriaLabel,type:"button",onClick:g[0]||(g[0]=e=>C.close(e))},y.closeButtonProps),[o("i",{class:r(["p-message-close-icon",y.closeIcon])},null,2)],16,h)),[[k]]):u("",!0)])],2),[[d,x.visible]])])),_:3})};export{g as default};
+import e from"primevue/icons/check";import s from"primevue/icons/exclamationtriangle";import i from"primevue/icons/infocircle";import n from"primevue/icons/times";import t from"primevue/icons/timescircle";import o from"primevue/ripple";import{resolveComponent as a,resolveDirective as l,openBlock as c,createBlock as r,Transition as p,withCtx as m,withDirectives as u,createElementVNode as d,normalizeClass as f,renderSlot as g,resolveDynamicComponent as v,createElementBlock as y,mergeProps as h,createCommentVNode as b,vShow as x}from"vue";var C={name:"Message",emits:["close"],props:{severity:{type:String,default:"info"},closable:{type:Boolean,default:!0},sticky:{type:Boolean,default:!0},life:{type:Number,default:3e3},icon:{type:String,default:void 0},closeIcon:{type:String,default:void 0},closeButtonProps:{type:null,default:null}},timeout:null,data:()=>({visible:!0}),mounted(){this.sticky||this.closeAfterDelay()},methods:{close(e){this.visible=!1,this.$emit("close",e)},closeAfterDelay(){setTimeout((()=>{this.visible=!1}),this.life)}},computed:{containerClass(){return"p-message p-component p-message-"+this.severity},iconComponent(){return{info:i,success:e,warn:s,error:t}[this.severity]},closeAriaLabel(){return this.$primevue.config.locale.aria?this.$primevue.config.locale.aria.close:void 0}},directives:{ripple:o},components:{TimesIcon:n,InfoCircleIcon:i,CheckIcon:e,ExclamationTriangleIcon:s,TimesCircleIcon:t}};const k={class:"p-message-wrapper"},I={class:"p-message-text"},T=["aria-label"];!function(e,s){void 0===s&&(s={});var i=s.insertAt;if(e&&"undefined"!=typeof document){var n=document.head||document.getElementsByTagName("head")[0],t=document.createElement("style");t.type="text/css","top"===i&&n.firstChild?n.insertBefore(t,n.firstChild):n.appendChild(t),t.styleSheet?t.styleSheet.cssText=e:t.appendChild(document.createTextNode(e))}}("\n.p-message-wrapper {\n    display: flex;\n    align-items: center;\n}\n.p-message-close {\n    display: flex;\n    align-items: center;\n    justify-content: center;\n}\n.p-message-close.p-link {\n    margin-left: auto;\n    overflow: hidden;\n    position: relative;\n}\n.p-message-enter-from {\n    opacity: 0;\n}\n.p-message-enter-active {\n    transition: opacity 0.3s;\n}\n.p-message.p-message-leave-from {\n    max-height: 1000px;\n}\n.p-message.p-message-leave-to {\n    max-height: 0;\n    opacity: 0;\n    margin: 0 !important;\n}\n.p-message-leave-active {\n    overflow: hidden;\n    transition: max-height 0.3s cubic-bezier(0, 1, 0, 1), opacity 0.3s, margin 0.15s;\n}\n.p-message-leave-active .p-message-close {\n    display: none;\n}\n"),C.render=function(e,s,i,n,t,o){const C=a("TimesIcon"),B=l("ripple");return c(),r(p,{name:"p-message",appear:""},{default:m((()=>[u(d("div",{class:f(o.containerClass),role:"alert","aria-live":"assertive","aria-atomic":"true"},[d("div",k,[g(e.$slots,"messageicon",{class:"p-message-icon"},(()=>[(c(),r(v(i.icon?"span":o.iconComponent),{class:f(["p-message-icon",i.icon])},null,8,["class"]))])),d("div",I,[g(e.$slots,"default")]),i.closable?u((c(),y("button",h({key:0,class:"p-message-close p-link","aria-label":o.closeAriaLabel,type:"button",onClick:s[0]||(s[0]=e=>o.close(e))},i.closeButtonProps),[g(e.$slots,"closeicon",{class:"p-message-close-icon"},(()=>[i.closeIcon?(c(),y("i",{key:0,class:f(["p-message-close-icon",i.closeIcon])},null,2)):(c(),r(C,{key:1,class:"p-message-close-icon"}))]))],16,T)),[[B]]):b("",!0)])],2),[[x,t.visible]])])),_:3})};export{C as default};

package/message/message.js

@@ -1,9 +1,14 @@
 this.primevue = this.primevue || {};
-this.primevue.message = (function (Ripple, vue) {
+this.primevue.message = (function (CheckIcon, ExclamationTriangleIcon, InfoCircleIcon, TimesIcon, TimesCircleIcon, Ripple, vue) {
     'use strict';
 
     function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
+    var CheckIcon__default = /*#__PURE__*/_interopDefaultLegacy(CheckIcon);
+    var ExclamationTriangleIcon__default = /*#__PURE__*/_interopDefaultLegacy(ExclamationTriangleIcon);
+    var InfoCircleIcon__default = /*#__PURE__*/_interopDefaultLegacy(InfoCircleIcon);
+    var TimesIcon__default = /*#__PURE__*/_interopDefaultLegacy(TimesIcon);
+    var TimesCircleIcon__default = /*#__PURE__*/_interopDefaultLegacy(TimesCircleIcon);
     var Ripple__default = /*#__PURE__*/_interopDefaultLegacy(Ripple);
 
     var script = {
@@ -28,11 +33,11 @@ this.primevue.message = (function (Ripple, vue) {
             },
             icon: {
                 type: String,
-                default: null
+                default: undefined
             },
             closeIcon: {
                 type: String,
-                default: 'pi pi-times'
+                default: undefined
             },
             closeButtonProps: {
                 type: null,
@@ -47,7 +52,7 @@ this.primevue.message = (function (Ripple, vue) {
         },
         mounted() {
             if (!this.sticky) {
-                this.x();
+                this.closeAfterDelay();
             }
         },
         methods: {
@@ -55,7 +60,7 @@ this.primevue.message = (function (Ripple, vue) {
                 this.visible = false;
                 this.$emit('close', event);
             },
-            x() {
+            closeAfterDelay() {
                 setTimeout(() => {
                     this.visible = false;
                 }, this.life);
@@ -65,18 +70,13 @@ this.primevue.message = (function (Ripple, vue) {
             containerClass() {
                 return 'p-message p-component p-message-' + this.severity;
             },
-            iconClass() {
-                return [
-                    'p-message-icon pi',
-                    this.icon
-                        ? this.icon
-                        : {
-                              'pi-info-circle': this.severity === 'info',
-                              'pi-check': this.severity === 'success',
-                              'pi-exclamation-triangle': this.severity === 'warn',
-                              'pi-times-circle': this.severity === 'error'
-                          }
-                ];
+            iconComponent() {
+                return {
+                    info: InfoCircleIcon__default["default"],
+                    success: CheckIcon__default["default"],
+                    warn: ExclamationTriangleIcon__default["default"],
+                    error: TimesCircleIcon__default["default"]
+                }[this.severity];
             },
             closeAriaLabel() {
                 return this.$primevue.config.locale.aria ? this.$primevue.config.locale.aria.close : undefined;
@@ -84,6 +84,13 @@ this.primevue.message = (function (Ripple, vue) {
         },
         directives: {
             ripple: Ripple__default["default"]
+        },
+        components: {
+            TimesIcon: TimesIcon__default["default"],
+            InfoCircleIcon: InfoCircleIcon__default["default"],
+            CheckIcon: CheckIcon__default["default"],
+            ExclamationTriangleIcon: ExclamationTriangleIcon__default["default"],
+            TimesCircleIcon: TimesCircleIcon__default["default"]
         }
     };
 
@@ -92,6 +99,7 @@ this.primevue.message = (function (Ripple, vue) {
     const _hoisted_3 = ["aria-label"];
 
     function render(_ctx, _cache, $props, $setup, $data, $options) {
+      const _component_TimesIcon = vue.resolveComponent("TimesIcon");
       const _directive_ripple = vue.resolveDirective("ripple");
 
       return (vue.openBlock(), vue.createBlock(vue.Transition, {
@@ -106,9 +114,11 @@ this.primevue.message = (function (Ripple, vue) {
             "aria-atomic": "true"
           }, [
             vue.createElementVNode("div", _hoisted_1, [
-              vue.createElementVNode("span", {
-                class: vue.normalizeClass($options.iconClass)
-              }, null, 2),
+              vue.renderSlot(_ctx.$slots, "messageicon", { class: "p-message-icon" }, () => [
+                (vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent($props.icon ? 'span' : $options.iconComponent), {
+                  class: vue.normalizeClass(['p-message-icon', $props.icon])
+                }, null, 8, ["class"]))
+              ]),
               vue.createElementVNode("div", _hoisted_2, [
                 vue.renderSlot(_ctx.$slots, "default")
               ]),
@@ -120,9 +130,17 @@ this.primevue.message = (function (Ripple, vue) {
                     type: "button",
                     onClick: _cache[0] || (_cache[0] = $event => ($options.close($event)))
                   }, $props.closeButtonProps), [
-                    vue.createElementVNode("i", {
-                      class: vue.normalizeClass(['p-message-close-icon', $props.closeIcon])
-                    }, null, 2)
+                    vue.renderSlot(_ctx.$slots, "closeicon", { class: "p-message-close-icon" }, () => [
+                      ($props.closeIcon)
+                        ? (vue.openBlock(), vue.createElementBlock("i", {
+                            key: 0,
+                            class: vue.normalizeClass(['p-message-close-icon', $props.closeIcon])
+                          }, null, 2))
+                        : (vue.openBlock(), vue.createBlock(_component_TimesIcon, {
+                            key: 1,
+                            class: "p-message-close-icon"
+                          }))
+                    ])
                   ], 16, _hoisted_3)), [
                     [_directive_ripple]
                   ])
@@ -170,4 +188,4 @@ this.primevue.message = (function (Ripple, vue) {
 
     return script;
 
-})(primevue.ripple, Vue);
+})(primevue.icons.check, primevue.icons.exclamationtriangle, primevue.icons.infocircle, primevue.icons.times, primevue.icons.timescircle, primevue.ripple, Vue);

package/message/message.min.js

@@ -1 +1 @@
-this.primevue=this.primevue||{},this.primevue.message=function(e,t){"use strict";function s(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var i={name:"Message",emits:["close"],props:{severity:{type:String,default:"info"},closable:{type:Boolean,default:!0},sticky:{type:Boolean,default:!0},life:{type:Number,default:3e3},icon:{type:String,default:null},closeIcon:{type:String,default:"pi pi-times"},closeButtonProps:{type:null,default:null}},timeout:null,data:()=>({visible:!0}),mounted(){this.sticky||this.x()},methods:{close(e){this.visible=!1,this.$emit("close",e)},x(){setTimeout((()=>{this.visible=!1}),this.life)}},computed:{containerClass(){return"p-message p-component p-message-"+this.severity},iconClass(){return["p-message-icon pi",this.icon?this.icon:{"pi-info-circle":"info"===this.severity,"pi-check":"success"===this.severity,"pi-exclamation-triangle":"warn"===this.severity,"pi-times-circle":"error"===this.severity}]},closeAriaLabel(){return this.$primevue.config.locale.aria?this.$primevue.config.locale.aria.close:void 0}},directives:{ripple:s(e).default}};const n={class:"p-message-wrapper"},a={class:"p-message-text"},l=["aria-label"];return function(e,t){void 0===t&&(t={});var s=t.insertAt;if(e&&"undefined"!=typeof document){var i=document.head||document.getElementsByTagName("head")[0],n=document.createElement("style");n.type="text/css","top"===s&&i.firstChild?i.insertBefore(n,i.firstChild):i.appendChild(n),n.styleSheet?n.styleSheet.cssText=e:n.appendChild(document.createTextNode(e))}}("\n.p-message-wrapper {\n    display: flex;\n    align-items: center;\n}\n.p-message-close {\n    display: flex;\n    align-items: center;\n    justify-content: center;\n}\n.p-message-close.p-link {\n    margin-left: auto;\n    overflow: hidden;\n    position: relative;\n}\n.p-message-enter-from {\n    opacity: 0;\n}\n.p-message-enter-active {\n    transition: opacity 0.3s;\n}\n.p-message.p-message-leave-from {\n    max-height: 1000px;\n}\n.p-message.p-message-leave-to {\n    max-height: 0;\n    opacity: 0;\n    margin: 0 !important;\n}\n.p-message-leave-active {\n    overflow: hidden;\n    transition: max-height 0.3s cubic-bezier(0, 1, 0, 1), opacity 0.3s, margin 0.15s;\n}\n.p-message-leave-active .p-message-close {\n    display: none;\n}\n"),i.render=function(e,s,i,o,r,c){const p=t.resolveDirective("ripple");return t.openBlock(),t.createBlock(t.Transition,{name:"p-message",appear:""},{default:t.withCtx((()=>[t.withDirectives(t.createElementVNode("div",{class:t.normalizeClass(c.containerClass),role:"alert","aria-live":"assertive","aria-atomic":"true"},[t.createElementVNode("div",n,[t.createElementVNode("span",{class:t.normalizeClass(c.iconClass)},null,2),t.createElementVNode("div",a,[t.renderSlot(e.$slots,"default")]),i.closable?t.withDirectives((t.openBlock(),t.createElementBlock("button",t.mergeProps({key:0,class:"p-message-close p-link","aria-label":c.closeAriaLabel,type:"button",onClick:s[0]||(s[0]=e=>c.close(e))},i.closeButtonProps),[t.createElementVNode("i",{class:t.normalizeClass(["p-message-close-icon",i.closeIcon])},null,2)],16,l)),[[p]]):t.createCommentVNode("",!0)])],2),[[t.vShow,r.visible]])])),_:3})},i}(primevue.ripple,Vue);
+this.primevue=this.primevue||{},this.primevue.message=function(e,s,t,n,i,o,a){"use strict";function l(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var c=l(e),r=l(s),p=l(t),m=l(n),u=l(i),d={name:"Message",emits:["close"],props:{severity:{type:String,default:"info"},closable:{type:Boolean,default:!0},sticky:{type:Boolean,default:!0},life:{type:Number,default:3e3},icon:{type:String,default:void 0},closeIcon:{type:String,default:void 0},closeButtonProps:{type:null,default:null}},timeout:null,data:()=>({visible:!0}),mounted(){this.sticky||this.closeAfterDelay()},methods:{close(e){this.visible=!1,this.$emit("close",e)},closeAfterDelay(){setTimeout((()=>{this.visible=!1}),this.life)}},computed:{containerClass(){return"p-message p-component p-message-"+this.severity},iconComponent(){return{info:p.default,success:c.default,warn:r.default,error:u.default}[this.severity]},closeAriaLabel(){return this.$primevue.config.locale.aria?this.$primevue.config.locale.aria.close:void 0}},directives:{ripple:l(o).default},components:{TimesIcon:m.default,InfoCircleIcon:p.default,CheckIcon:c.default,ExclamationTriangleIcon:r.default,TimesCircleIcon:u.default}};const f={class:"p-message-wrapper"},v={class:"p-message-text"},g=["aria-label"];return function(e,s){void 0===s&&(s={});var t=s.insertAt;if(e&&"undefined"!=typeof document){var n=document.head||document.getElementsByTagName("head")[0],i=document.createElement("style");i.type="text/css","top"===t&&n.firstChild?n.insertBefore(i,n.firstChild):n.appendChild(i),i.styleSheet?i.styleSheet.cssText=e:i.appendChild(document.createTextNode(e))}}("\n.p-message-wrapper {\n    display: flex;\n    align-items: center;\n}\n.p-message-close {\n    display: flex;\n    align-items: center;\n    justify-content: center;\n}\n.p-message-close.p-link {\n    margin-left: auto;\n    overflow: hidden;\n    position: relative;\n}\n.p-message-enter-from {\n    opacity: 0;\n}\n.p-message-enter-active {\n    transition: opacity 0.3s;\n}\n.p-message.p-message-leave-from {\n    max-height: 1000px;\n}\n.p-message.p-message-leave-to {\n    max-height: 0;\n    opacity: 0;\n    margin: 0 !important;\n}\n.p-message-leave-active {\n    overflow: hidden;\n    transition: max-height 0.3s cubic-bezier(0, 1, 0, 1), opacity 0.3s, margin 0.15s;\n}\n.p-message-leave-active .p-message-close {\n    display: none;\n}\n"),d.render=function(e,s,t,n,i,o){const l=a.resolveComponent("TimesIcon"),c=a.resolveDirective("ripple");return a.openBlock(),a.createBlock(a.Transition,{name:"p-message",appear:""},{default:a.withCtx((()=>[a.withDirectives(a.createElementVNode("div",{class:a.normalizeClass(o.containerClass),role:"alert","aria-live":"assertive","aria-atomic":"true"},[a.createElementVNode("div",f,[a.renderSlot(e.$slots,"messageicon",{class:"p-message-icon"},(()=>[(a.openBlock(),a.createBlock(a.resolveDynamicComponent(t.icon?"span":o.iconComponent),{class:a.normalizeClass(["p-message-icon",t.icon])},null,8,["class"]))])),a.createElementVNode("div",v,[a.renderSlot(e.$slots,"default")]),t.closable?a.withDirectives((a.openBlock(),a.createElementBlock("button",a.mergeProps({key:0,class:"p-message-close p-link","aria-label":o.closeAriaLabel,type:"button",onClick:s[0]||(s[0]=e=>o.close(e))},t.closeButtonProps),[a.renderSlot(e.$slots,"closeicon",{class:"p-message-close-icon"},(()=>[t.closeIcon?(a.openBlock(),a.createElementBlock("i",{key:0,class:a.normalizeClass(["p-message-close-icon",t.closeIcon])},null,2)):(a.openBlock(),a.createBlock(l,{key:1,class:"p-message-close-icon"}))]))],16,g)),[[c]]):a.createCommentVNode("",!0)])],2),[[a.vShow,i.visible]])])),_:3})},d}(primevue.icons.check,primevue.icons.exclamationtriangle,primevue.icons.infocircle,primevue.icons.times,primevue.icons.timescircle,primevue.ripple,Vue);

package/multiselect/MultiSelect.d.ts

@@ -151,7 +151,7 @@ export interface MultiSelectProps {
      * Defines the filtering algorithm to use when searching the options.
      * @defaultValue contains
      */
-    filterMatchMode?: 'contains' | 'startsWith' | 'endsWith' | undefined;
+    filterMatchMode?: 'contains' | 'startsWith' | 'endsWith' | string | undefined;
     /**
      * Fields used when filtering the options, defaults to optionLabel.
      */
@@ -191,32 +191,32 @@ export interface MultiSelectProps {
     loading?: boolean | undefined;
     /**
      * Icon to display in the checkboxes.
-     * @defaultValue pi pi-check
+     * @deprecated since v3.27.0. Use 'checkboxicon' slot.
      */
     checkboxIcon?: string | undefined;
     /**
      * Icon to display in the dropdown close button.
-     * @defaultValue pi pi-times
+     * @deprecated since v3.27.0. Use 'closeicon' slot.
      */
     closeIcon?: string | undefined;
     /**
      * Icon to display in the dropdown.
-     * @defaultValue pi pi-chevron-down
+     * @deprecated since v3.27.0. Use 'dropdownicon' slot.
      */
     dropdownIcon?: string | undefined;
     /**
      * Icon to display in filter input.
-     * @defaultValue pi pi-search
+     * @deprecated since v3.27.0. Use 'filtericon' slot.
      */
     filterIcon?: string | undefined;
     /**
      * Icon to display in loading state.
-     * @defaultValue pi pi-spinner pi-spin
+     * @deprecated since v3.27.0. Use 'loadingicon' slot.
      */
     loadingIcon?: string | undefined;
     /**
      * Icon to display in chip remove action.
-     * @defaultValue pi pi-times-circle
+     * @deprecated since v3.27.0. Use 'removetokenicon' slot.
      */
     removeTokenIcon?: string | undefined;
     /**
@@ -313,6 +313,7 @@ export interface MultiSelectSlots {
     }): VNode[];
     /**
      * Custom indicator template.
+     * @deprecated since v3.27.0. Use 'loadingicon and dropdownicon' slot.
      */
     indicator(): VNode[];
     /**
@@ -414,6 +415,84 @@ export interface MultiSelectSlots {
          */
         options: any[];
     }): VNode[];
+    /**
+     * Custom remove token icon template.
+     */
+    removetokenicon(scope: {
+        /**
+         * Style class of the loading icon.
+         */
+        class: string;
+        /**
+         * Remove token icon function.
+         */
+        onClick: string;
+    }): VNode[];
+    /**
+     * Custom header checkbox icon template.
+     * @param {Object} scope - header checkbox icon slot's params.
+     */
+    headercheckboxicon(scope: {
+        /**
+         * Options of the loader items for virtualscroller
+         */
+        allSelected: boolean;
+        /**
+         * Style class of the loading icon.
+         */
+        class: string;
+    }): VNode[];
+    /**
+     * Custom filter icon template.
+     */
+    filtericon(scope: {
+        /**
+         * Style class of the loading icon.
+         */
+        class: string;
+    }): VNode[];
+    /**
+     * Custom close icon template.
+     */
+    closeicon(scope: {
+        /**
+         * Style class of the loading icon.
+         */
+        class: string;
+    }): VNode[];
+    /**
+     * Custom item checkbox icon template.
+     * @param {Object} scope - header checkbox icon slot's params.
+     */
+    itemcheckboxicon(scope: {
+        /**
+         * Options of the loader items for virtualscroller
+         */
+        selected: boolean;
+        /**
+         * Style class of the loading icon.
+         */
+        class: string;
+    }): VNode[];
+    /**
+     * Custom loading icon template.
+     * @param {Object} scope - loading icon slot's params.
+     */
+    loadingicon(scope: {
+        /**
+         * Style class of the loading icon.
+         */
+        class: string;
+    }): VNode[];
+    /**
+     * Custom dropdown icon template.
+     */
+    dropdownicon(scope: {
+        /**
+         * Style class of the loading icon.
+         */
+        class: string;
+    }): VNode[];
 }
 
 /**

package/multiselect/MultiSelect.vue

@@ -33,7 +33,10 @@
                             <slot name="chip" :value="item">
                                 <span class="p-multiselect-token-label">{{ getLabelByValue(item) }}</span>
                             </slot>
-                            <span v-if="!disabled" :class="['p-multiselect-token-icon', removeTokenIcon]" @click.stop="removeOption($event, item)"></span>
+                            <slot v-if="!disabled" name="removetokenicon" class="p-multiselect-token-icon" :onClick="(event) => removeOption(event, item)">
+                                <span v-if="removeTokenIcon" :class="['p-multiselect-token-icon', removeTokenIcon]" @click.stop="removeOption($event, item)" />
+                                <TimesCircleIcon v-else class="p-multiselect-token-icon" @click.stop="removeOption($event, item)" />
+                            </slot>
                         </div>
                         <template v-if="!modelValue || modelValue.length === 0">{{ placeholder || 'empty' }}</template>
                     </template>
@@ -41,8 +44,12 @@
             </div>
         </div>
         <div class="p-multiselect-trigger">
-            <slot name="indicator">
-                <span :class="dropdownIconClass" aria-hidden="true"></span>
+            <slot v-if="loading" name="loadingicon" class="p-multiselect-trigger-icon">
+                <span v-if="loadingIcon" :class="['p-multiselect-trigger-icon pi-spin', loadingIcon]" aria-hidden="true" />
+                <SpinnerIcon v-else class="p-multiselect-trigger-icon" spin aria-hidden="true" />
+            </slot>
+            <slot v-else name="dropdownicon" class="p-multiselect-trigger-icon">
+                <component :is="dropdownIcon ? 'span' : 'ChevronDownIcon'" :class="['p-multiselect-trigger-icon', dropdownIcon]" aria-hidden="true" />
             </slot>
         </div>
         <Portal :appendTo="appendTo">
@@ -56,7 +63,9 @@
                                 <input type="checkbox" readonly :checked="allSelected" :aria-label="toggleAllAriaLabel" @focus="onHeaderCheckboxFocus" @blur="onHeaderCheckboxBlur" />
                             </div>
                             <div :class="['p-checkbox-box', { 'p-highlight': allSelected, 'p-focus': headerCheckboxFocused }]">
-                                <span :class="['p-checkbox-icon', { [checkboxIcon]: allSelected }]"></span>
+                                <slot name="headercheckboxicon" :allSelected="allSelected" class="p-checkbox-icon">
+                                    <component :is="checkboxIcon ? 'span' : 'CheckIcon'" :class="['p-checkbox-icon', { [checkboxIcon]: allSelected }]" />
+                                </slot>
                             </div>
                         </div>
                         <div v-if="filter" class="p-multiselect-filter-container">
@@ -76,13 +85,17 @@
                                 @input="onFilterChange"
                                 v-bind="filterInputProps"
                             />
-                            <span :class="['p-multiselect-filter-icon', filterIcon]" />
+                            <slot name="filtericon" class="p-multiselect-filter-icon">
+                                <component :is="filterIcon ? 'span' : 'SearchIcon'" :class="['p-multiselect-filter-icon', filterIcon]" />
+                            </slot>
                         </div>
                         <span v-if="filter" role="status" aria-live="polite" class="p-hidden-accessible">
                             {{ filterResultMessageText }}
                         </span>
                         <button v-ripple class="p-multiselect-close p-link" :aria-label="closeAriaLabel" @click="onCloseClick" type="button" v-bind="closeButtonProps">
-                            <span :class="['p-multiselect-close-icon', closeIcon]" />
+                            <slot name="closeicon" class="p-multiselect-close-icon">
+                                <component :is="closeIcon ? 'span' : 'TimesIcon'" :class="['p-multiselect-close-icon', closeIcon]" />
+                            </slot>
                         </button>
                     </div>
                     <div class="p-multiselect-items-wrapper" :style="{ 'max-height': virtualScrollerDisabled ? scrollHeight : '' }">
@@ -110,7 +123,9 @@
                                         >
                                             <div class="p-checkbox p-component">
                                                 <div :class="['p-checkbox-box', { 'p-highlight': isSelected(option) }]">
-                                                    <span :class="['p-checkbox-icon', { [checkboxIcon]: isSelected(option) }]"></span>
+                                                    <slot name="itemcheckboxicon" :selected="isSelected(option)" class="p-checkbox-icon">
+                                                        <component :is="checkboxIcon ? 'span' : 'CheckIcon'" :class="['p-checkbox-icon', { [checkboxIcon]: isSelected(option) }]" />
+                                                    </slot>
                                                 </div>
                                             </div>
                                             <slot name="option" :option="option" :index="getOptionIndex(i, getItemOptions)">
@@ -147,6 +162,12 @@
 
 <script>
 import { FilterService } from 'primevue/api';
+import CheckIcon from 'primevue/icons/check';
+import ChevronDownIcon from 'primevue/icons/chevrondown';
+import SearchIcon from 'primevue/icons/search';
+import SpinnerIcon from 'primevue/icons/spinner';
+import TimesIcon from 'primevue/icons/times';
+import TimesCircleIcon from 'primevue/icons/timescircle';
 import OverlayEventBus from 'primevue/overlayeventbus';
 import Portal from 'primevue/portal';
 import Ripple from 'primevue/ripple';
@@ -240,27 +261,27 @@ export default {
         },
         checkboxIcon: {
             type: String,
-            default: 'pi pi-check'
+            default: undefined
         },
         closeIcon: {
             type: String,
-            default: 'pi pi-times'
+            default: undefined
         },
         dropdownIcon: {
             type: String,
-            default: 'pi pi-chevron-down'
+            default: undefined
         },
         filterIcon: {
             type: String,
-            default: 'pi pi-search'
+            default: undefined
         },
         loadingIcon: {
             type: String,
-            default: 'pi pi-spinner pi-spin'
+            default: undefined
         },
         removeTokenIcon: {
             type: String,
-            default: 'pi pi-times-circle'
+            default: undefined
         },
         selectAll: {
             type: Boolean,
@@ -1060,9 +1081,6 @@ export default {
                 }
             ];
         },
-        dropdownIconClass() {
-            return ['p-multiselect-trigger-icon', this.loading ? this.loadingIcon : this.dropdownIcon];
-        },
         panelStyleClass() {
             return [
                 'p-multiselect-panel p-component',
@@ -1093,9 +1111,10 @@ export default {
                     const filtered = [];
 
                     optionGroups.forEach((group) => {
-                        const filteredItems = group.items.filter((item) => filteredOptions.includes(item));
+                        const groupChildren = this.getOptionGroupChildren(group);
+                        const filteredItems = groupChildren.filter((item) => filteredOptions.includes(item));
 
-                        if (filteredItems.length > 0) filtered.push({ ...group, items: [...filteredItems] });
+                        if (filteredItems.length > 0) filtered.push({ ...group, [typeof this.optionGroupChildren === 'string' ? this.optionGroupChildren : 'items']: [...filteredItems] });
                     });
 
                     return this.flatOptions(filtered);
@@ -1190,7 +1209,13 @@ export default {
     },
     components: {
         VirtualScroller: VirtualScroller,
-        Portal: Portal
+        Portal: Portal,
+        TimesIcon: TimesIcon,
+        SearchIcon: SearchIcon,
+        TimesCircleIcon: TimesCircleIcon,
+        ChevronDownIcon: ChevronDownIcon,
+        SpinnerIcon: SpinnerIcon,
+        CheckIcon: CheckIcon
     }
 };
 </script>