primevue 3.26.0 → 3.27.0

package/divider/divider.cjs.js

@@ -1,9 +1,15 @@
 'use strict';
 
+var BaseComponent = require('primevue/basecomponent');
 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 script = {
     name: 'Divider',
+    extends: BaseComponent__default["default"],
     props: {
         align: {
             type: String,
@@ -36,23 +42,22 @@ var script = {
 };
 
 const _hoisted_1 = ["aria-orientation"];
-const _hoisted_2 = {
-  key: 0,
-  class: "p-divider-content"
-};
 
 function render(_ctx, _cache, $props, $setup, $data, $options) {
-  return (vue.openBlock(), vue.createElementBlock("div", {
-    class: vue.normalizeClass($options.containerClass),
+  return (vue.openBlock(), vue.createElementBlock("div", vue.mergeProps({
+    class: $options.containerClass,
     role: "separator",
     "aria-orientation": $props.layout
-  }, [
+  }, _ctx.ptm('root')), [
     (_ctx.$slots.default)
-      ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_2, [
+      ? (vue.openBlock(), vue.createElementBlock("div", vue.mergeProps({
+          key: 0,
+          class: "p-divider-content"
+        }, _ctx.ptm('content')), [
           vue.renderSlot(_ctx.$slots, "default")
-        ]))
+        ], 16))
       : vue.createCommentVNode("", true)
-  ], 10, _hoisted_1))
+  ], 16, _hoisted_1))
 }
 
 function styleInject(css, ref) {

package/divider/divider.cjs.min.js

@@ -1 +1 @@
-"use strict";var e=require("vue"),t={name:"Divider",props:{align:{type:String,default:null},layout:{type:String,default:"horizontal"},type:{type:String,default:"solid"}},computed:{containerClass(){return["p-divider p-component","p-divider-"+this.layout,"p-divider-"+this.type,{"p-divider-left":"horizontal"===this.layout&&(!this.align||"left"===this.align)},{"p-divider-center":"horizontal"===this.layout&&"center"===this.align},{"p-divider-right":"horizontal"===this.layout&&"right"===this.align},{"p-divider-top":"vertical"===this.layout&&"top"===this.align},{"p-divider-center":"vertical"===this.layout&&(!this.align||"center"===this.align)},{"p-divider-bottom":"vertical"===this.layout&&"bottom"===this.align}]}}};const i=["aria-orientation"],n={key:0,class:"p-divider-content"};!function(e,t){void 0===t&&(t={});var i=t.insertAt;if(e&&"undefined"!=typeof document){var n=document.head||document.getElementsByTagName("head")[0],d=document.createElement("style");d.type="text/css","top"===i&&n.firstChild?n.insertBefore(d,n.firstChild):n.appendChild(d),d.styleSheet?d.styleSheet.cssText=e:d.appendChild(document.createTextNode(e))}}("\n.p-divider-horizontal {\n    display: flex;\n    width: 100%;\n    position: relative;\n    align-items: center;\n}\n.p-divider-horizontal:before {\n    position: absolute;\n    display: block;\n    top: 50%;\n    left: 0;\n    width: 100%;\n    content: '';\n}\n.p-divider-horizontal.p-divider-left {\n    justify-content: flex-start;\n}\n.p-divider-horizontal.p-divider-right {\n    justify-content: flex-end;\n}\n.p-divider-horizontal.p-divider-center {\n    justify-content: center;\n}\n.p-divider-content {\n    z-index: 1;\n}\n.p-divider-vertical {\n    min-height: 100%;\n    margin: 0 1rem;\n    display: flex;\n    position: relative;\n    justify-content: center;\n}\n.p-divider-vertical:before {\n    position: absolute;\n    display: block;\n    top: 0;\n    left: 50%;\n    height: 100%;\n    content: '';\n}\n.p-divider-vertical.p-divider-top {\n    align-items: flex-start;\n}\n.p-divider-vertical.p-divider-center {\n    align-items: center;\n}\n.p-divider-vertical.p-divider-bottom {\n    align-items: flex-end;\n}\n.p-divider-solid.p-divider-horizontal:before {\n    border-top-style: solid;\n}\n.p-divider-solid.p-divider-vertical:before {\n    border-left-style: solid;\n}\n.p-divider-dashed.p-divider-horizontal:before {\n    border-top-style: dashed;\n}\n.p-divider-dashed.p-divider-vertical:before {\n    border-left-style: dashed;\n}\n.p-divider-dotted.p-divider-horizontal:before {\n    border-top-style: dotted;\n}\n.p-divider-dotted.p-divider-vertical:before {\n    border-left-style: dotted;\n}\n"),t.render=function(t,d,r,o,l,a){return e.openBlock(),e.createElementBlock("div",{class:e.normalizeClass(a.containerClass),role:"separator","aria-orientation":r.layout},[t.$slots.default?(e.openBlock(),e.createElementBlock("div",n,[e.renderSlot(t.$slots,"default")])):e.createCommentVNode("",!0)],10,i)},module.exports=t;
+"use strict";var e=require("primevue/basecomponent"),t=require("vue");function i(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var n={name:"Divider",extends:i(e).default,props:{align:{type:String,default:null},layout:{type:String,default:"horizontal"},type:{type:String,default:"solid"}},computed:{containerClass(){return["p-divider p-component","p-divider-"+this.layout,"p-divider-"+this.type,{"p-divider-left":"horizontal"===this.layout&&(!this.align||"left"===this.align)},{"p-divider-center":"horizontal"===this.layout&&"center"===this.align},{"p-divider-right":"horizontal"===this.layout&&"right"===this.align},{"p-divider-top":"vertical"===this.layout&&"top"===this.align},{"p-divider-center":"vertical"===this.layout&&(!this.align||"center"===this.align)},{"p-divider-bottom":"vertical"===this.layout&&"bottom"===this.align}]}}};const r=["aria-orientation"];!function(e,t){void 0===t&&(t={});var i=t.insertAt;if(e&&"undefined"!=typeof document){var n=document.head||document.getElementsByTagName("head")[0],r=document.createElement("style");r.type="text/css","top"===i&&n.firstChild?n.insertBefore(r,n.firstChild):n.appendChild(r),r.styleSheet?r.styleSheet.cssText=e:r.appendChild(document.createTextNode(e))}}("\n.p-divider-horizontal {\n    display: flex;\n    width: 100%;\n    position: relative;\n    align-items: center;\n}\n.p-divider-horizontal:before {\n    position: absolute;\n    display: block;\n    top: 50%;\n    left: 0;\n    width: 100%;\n    content: '';\n}\n.p-divider-horizontal.p-divider-left {\n    justify-content: flex-start;\n}\n.p-divider-horizontal.p-divider-right {\n    justify-content: flex-end;\n}\n.p-divider-horizontal.p-divider-center {\n    justify-content: center;\n}\n.p-divider-content {\n    z-index: 1;\n}\n.p-divider-vertical {\n    min-height: 100%;\n    margin: 0 1rem;\n    display: flex;\n    position: relative;\n    justify-content: center;\n}\n.p-divider-vertical:before {\n    position: absolute;\n    display: block;\n    top: 0;\n    left: 50%;\n    height: 100%;\n    content: '';\n}\n.p-divider-vertical.p-divider-top {\n    align-items: flex-start;\n}\n.p-divider-vertical.p-divider-center {\n    align-items: center;\n}\n.p-divider-vertical.p-divider-bottom {\n    align-items: flex-end;\n}\n.p-divider-solid.p-divider-horizontal:before {\n    border-top-style: solid;\n}\n.p-divider-solid.p-divider-vertical:before {\n    border-left-style: solid;\n}\n.p-divider-dashed.p-divider-horizontal:before {\n    border-top-style: dashed;\n}\n.p-divider-dashed.p-divider-vertical:before {\n    border-left-style: dashed;\n}\n.p-divider-dotted.p-divider-horizontal:before {\n    border-top-style: dotted;\n}\n.p-divider-dotted.p-divider-vertical:before {\n    border-left-style: dotted;\n}\n"),n.render=function(e,i,n,d,o,l){return t.openBlock(),t.createElementBlock("div",t.mergeProps({class:l.containerClass,role:"separator","aria-orientation":n.layout},e.ptm("root")),[e.$slots.default?(t.openBlock(),t.createElementBlock("div",t.mergeProps({key:0,class:"p-divider-content"},e.ptm("content")),[t.renderSlot(e.$slots,"default")],16)):t.createCommentVNode("",!0)],16,r)},module.exports=n;

package/divider/divider.esm.js

@@ -1,7 +1,9 @@
-import { openBlock, createElementBlock, normalizeClass, renderSlot, createCommentVNode } from 'vue';
+import BaseComponent from 'primevue/basecomponent';
+import { openBlock, createElementBlock, mergeProps, renderSlot, createCommentVNode } from 'vue';
 
 var script = {
     name: 'Divider',
+    extends: BaseComponent,
     props: {
         align: {
             type: String,
@@ -34,23 +36,22 @@ var script = {
 };
 
 const _hoisted_1 = ["aria-orientation"];
-const _hoisted_2 = {
-  key: 0,
-  class: "p-divider-content"
-};
 
 function render(_ctx, _cache, $props, $setup, $data, $options) {
-  return (openBlock(), createElementBlock("div", {
-    class: normalizeClass($options.containerClass),
+  return (openBlock(), createElementBlock("div", mergeProps({
+    class: $options.containerClass,
     role: "separator",
     "aria-orientation": $props.layout
-  }, [
+  }, _ctx.ptm('root')), [
     (_ctx.$slots.default)
-      ? (openBlock(), createElementBlock("div", _hoisted_2, [
+      ? (openBlock(), createElementBlock("div", mergeProps({
+          key: 0,
+          class: "p-divider-content"
+        }, _ctx.ptm('content')), [
           renderSlot(_ctx.$slots, "default")
-        ]))
+        ], 16))
       : createCommentVNode("", true)
-  ], 10, _hoisted_1))
+  ], 16, _hoisted_1))
 }
 
 function styleInject(css, ref) {

package/divider/divider.esm.min.js

@@ -1 +1 @@
-import{openBlock as e,createElementBlock as i,normalizeClass as t,renderSlot as n,createCommentVNode as d}from"vue";var r={name:"Divider",props:{align:{type:String,default:null},layout:{type:String,default:"horizontal"},type:{type:String,default:"solid"}},computed:{containerClass(){return["p-divider p-component","p-divider-"+this.layout,"p-divider-"+this.type,{"p-divider-left":"horizontal"===this.layout&&(!this.align||"left"===this.align)},{"p-divider-center":"horizontal"===this.layout&&"center"===this.align},{"p-divider-right":"horizontal"===this.layout&&"right"===this.align},{"p-divider-top":"vertical"===this.layout&&"top"===this.align},{"p-divider-center":"vertical"===this.layout&&(!this.align||"center"===this.align)},{"p-divider-bottom":"vertical"===this.layout&&"bottom"===this.align}]}}};const o=["aria-orientation"],l={key:0,class:"p-divider-content"};!function(e,i){void 0===i&&(i={});var t=i.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-divider-horizontal {\n    display: flex;\n    width: 100%;\n    position: relative;\n    align-items: center;\n}\n.p-divider-horizontal:before {\n    position: absolute;\n    display: block;\n    top: 50%;\n    left: 0;\n    width: 100%;\n    content: '';\n}\n.p-divider-horizontal.p-divider-left {\n    justify-content: flex-start;\n}\n.p-divider-horizontal.p-divider-right {\n    justify-content: flex-end;\n}\n.p-divider-horizontal.p-divider-center {\n    justify-content: center;\n}\n.p-divider-content {\n    z-index: 1;\n}\n.p-divider-vertical {\n    min-height: 100%;\n    margin: 0 1rem;\n    display: flex;\n    position: relative;\n    justify-content: center;\n}\n.p-divider-vertical:before {\n    position: absolute;\n    display: block;\n    top: 0;\n    left: 50%;\n    height: 100%;\n    content: '';\n}\n.p-divider-vertical.p-divider-top {\n    align-items: flex-start;\n}\n.p-divider-vertical.p-divider-center {\n    align-items: center;\n}\n.p-divider-vertical.p-divider-bottom {\n    align-items: flex-end;\n}\n.p-divider-solid.p-divider-horizontal:before {\n    border-top-style: solid;\n}\n.p-divider-solid.p-divider-vertical:before {\n    border-left-style: solid;\n}\n.p-divider-dashed.p-divider-horizontal:before {\n    border-top-style: dashed;\n}\n.p-divider-dashed.p-divider-vertical:before {\n    border-left-style: dashed;\n}\n.p-divider-dotted.p-divider-horizontal:before {\n    border-top-style: dotted;\n}\n.p-divider-dotted.p-divider-vertical:before {\n    border-left-style: dotted;\n}\n"),r.render=function(r,a,s,p,v,c){return e(),i("div",{class:t(c.containerClass),role:"separator","aria-orientation":s.layout},[r.$slots.default?(e(),i("div",l,[n(r.$slots,"default")])):d("",!0)],10,o)};export{r as default};
+import e from"primevue/basecomponent";import{openBlock as t,createElementBlock as i,mergeProps as n,renderSlot as d,createCommentVNode as r}from"vue";var o={name:"Divider",extends:e,props:{align:{type:String,default:null},layout:{type:String,default:"horizontal"},type:{type:String,default:"solid"}},computed:{containerClass(){return["p-divider p-component","p-divider-"+this.layout,"p-divider-"+this.type,{"p-divider-left":"horizontal"===this.layout&&(!this.align||"left"===this.align)},{"p-divider-center":"horizontal"===this.layout&&"center"===this.align},{"p-divider-right":"horizontal"===this.layout&&"right"===this.align},{"p-divider-top":"vertical"===this.layout&&"top"===this.align},{"p-divider-center":"vertical"===this.layout&&(!this.align||"center"===this.align)},{"p-divider-bottom":"vertical"===this.layout&&"bottom"===this.align}]}}};const l=["aria-orientation"];!function(e,t){void 0===t&&(t={});var i=t.insertAt;if(e&&"undefined"!=typeof document){var n=document.head||document.getElementsByTagName("head")[0],d=document.createElement("style");d.type="text/css","top"===i&&n.firstChild?n.insertBefore(d,n.firstChild):n.appendChild(d),d.styleSheet?d.styleSheet.cssText=e:d.appendChild(document.createTextNode(e))}}("\n.p-divider-horizontal {\n    display: flex;\n    width: 100%;\n    position: relative;\n    align-items: center;\n}\n.p-divider-horizontal:before {\n    position: absolute;\n    display: block;\n    top: 50%;\n    left: 0;\n    width: 100%;\n    content: '';\n}\n.p-divider-horizontal.p-divider-left {\n    justify-content: flex-start;\n}\n.p-divider-horizontal.p-divider-right {\n    justify-content: flex-end;\n}\n.p-divider-horizontal.p-divider-center {\n    justify-content: center;\n}\n.p-divider-content {\n    z-index: 1;\n}\n.p-divider-vertical {\n    min-height: 100%;\n    margin: 0 1rem;\n    display: flex;\n    position: relative;\n    justify-content: center;\n}\n.p-divider-vertical:before {\n    position: absolute;\n    display: block;\n    top: 0;\n    left: 50%;\n    height: 100%;\n    content: '';\n}\n.p-divider-vertical.p-divider-top {\n    align-items: flex-start;\n}\n.p-divider-vertical.p-divider-center {\n    align-items: center;\n}\n.p-divider-vertical.p-divider-bottom {\n    align-items: flex-end;\n}\n.p-divider-solid.p-divider-horizontal:before {\n    border-top-style: solid;\n}\n.p-divider-solid.p-divider-vertical:before {\n    border-left-style: solid;\n}\n.p-divider-dashed.p-divider-horizontal:before {\n    border-top-style: dashed;\n}\n.p-divider-dashed.p-divider-vertical:before {\n    border-left-style: dashed;\n}\n.p-divider-dotted.p-divider-horizontal:before {\n    border-top-style: dotted;\n}\n.p-divider-dotted.p-divider-vertical:before {\n    border-left-style: dotted;\n}\n"),o.render=function(e,o,a,s,p,v){return t(),i("div",n({class:v.containerClass,role:"separator","aria-orientation":a.layout},e.ptm("root")),[e.$slots.default?(t(),i("div",n({key:0,class:"p-divider-content"},e.ptm("content")),[d(e.$slots,"default")],16)):r("",!0)],16,l)};export{o as default};

package/divider/divider.js

@@ -1,9 +1,14 @@
 this.primevue = this.primevue || {};
-this.primevue.divider = (function (vue) {
+this.primevue.divider = (function (BaseComponent, vue) {
     'use strict';
 
+    function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+    var BaseComponent__default = /*#__PURE__*/_interopDefaultLegacy(BaseComponent);
+
     var script = {
         name: 'Divider',
+        extends: BaseComponent__default["default"],
         props: {
             align: {
                 type: String,
@@ -36,23 +41,22 @@ this.primevue.divider = (function (vue) {
     };
 
     const _hoisted_1 = ["aria-orientation"];
-    const _hoisted_2 = {
-      key: 0,
-      class: "p-divider-content"
-    };
 
     function render(_ctx, _cache, $props, $setup, $data, $options) {
-      return (vue.openBlock(), vue.createElementBlock("div", {
-        class: vue.normalizeClass($options.containerClass),
+      return (vue.openBlock(), vue.createElementBlock("div", vue.mergeProps({
+        class: $options.containerClass,
         role: "separator",
         "aria-orientation": $props.layout
-      }, [
+      }, _ctx.ptm('root')), [
         (_ctx.$slots.default)
-          ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_2, [
+          ? (vue.openBlock(), vue.createElementBlock("div", vue.mergeProps({
+              key: 0,
+              class: "p-divider-content"
+            }, _ctx.ptm('content')), [
               vue.renderSlot(_ctx.$slots, "default")
-            ]))
+            ], 16))
           : vue.createCommentVNode("", true)
-      ], 10, _hoisted_1))
+      ], 16, _hoisted_1))
     }
 
     function styleInject(css, ref) {
@@ -89,4 +93,4 @@ this.primevue.divider = (function (vue) {
 
     return script;
 
-})(Vue);
+})(primevue.basecomponent, Vue);

package/divider/divider.min.js

@@ -1 +1 @@
-this.primevue=this.primevue||{},this.primevue.divider=function(e){"use strict";var t={name:"Divider",props:{align:{type:String,default:null},layout:{type:String,default:"horizontal"},type:{type:String,default:"solid"}},computed:{containerClass(){return["p-divider p-component","p-divider-"+this.layout,"p-divider-"+this.type,{"p-divider-left":"horizontal"===this.layout&&(!this.align||"left"===this.align)},{"p-divider-center":"horizontal"===this.layout&&"center"===this.align},{"p-divider-right":"horizontal"===this.layout&&"right"===this.align},{"p-divider-top":"vertical"===this.layout&&"top"===this.align},{"p-divider-center":"vertical"===this.layout&&(!this.align||"center"===this.align)},{"p-divider-bottom":"vertical"===this.layout&&"bottom"===this.align}]}}};const i=["aria-orientation"],n={key:0,class:"p-divider-content"};return function(e,t){void 0===t&&(t={});var i=t.insertAt;if(e&&"undefined"!=typeof document){var n=document.head||document.getElementsByTagName("head")[0],d=document.createElement("style");d.type="text/css","top"===i&&n.firstChild?n.insertBefore(d,n.firstChild):n.appendChild(d),d.styleSheet?d.styleSheet.cssText=e:d.appendChild(document.createTextNode(e))}}("\n.p-divider-horizontal {\n    display: flex;\n    width: 100%;\n    position: relative;\n    align-items: center;\n}\n.p-divider-horizontal:before {\n    position: absolute;\n    display: block;\n    top: 50%;\n    left: 0;\n    width: 100%;\n    content: '';\n}\n.p-divider-horizontal.p-divider-left {\n    justify-content: flex-start;\n}\n.p-divider-horizontal.p-divider-right {\n    justify-content: flex-end;\n}\n.p-divider-horizontal.p-divider-center {\n    justify-content: center;\n}\n.p-divider-content {\n    z-index: 1;\n}\n.p-divider-vertical {\n    min-height: 100%;\n    margin: 0 1rem;\n    display: flex;\n    position: relative;\n    justify-content: center;\n}\n.p-divider-vertical:before {\n    position: absolute;\n    display: block;\n    top: 0;\n    left: 50%;\n    height: 100%;\n    content: '';\n}\n.p-divider-vertical.p-divider-top {\n    align-items: flex-start;\n}\n.p-divider-vertical.p-divider-center {\n    align-items: center;\n}\n.p-divider-vertical.p-divider-bottom {\n    align-items: flex-end;\n}\n.p-divider-solid.p-divider-horizontal:before {\n    border-top-style: solid;\n}\n.p-divider-solid.p-divider-vertical:before {\n    border-left-style: solid;\n}\n.p-divider-dashed.p-divider-horizontal:before {\n    border-top-style: dashed;\n}\n.p-divider-dashed.p-divider-vertical:before {\n    border-left-style: dashed;\n}\n.p-divider-dotted.p-divider-horizontal:before {\n    border-top-style: dotted;\n}\n.p-divider-dotted.p-divider-vertical:before {\n    border-left-style: dotted;\n}\n"),t.render=function(t,d,r,o,l,a){return e.openBlock(),e.createElementBlock("div",{class:e.normalizeClass(a.containerClass),role:"separator","aria-orientation":r.layout},[t.$slots.default?(e.openBlock(),e.createElementBlock("div",n,[e.renderSlot(t.$slots,"default")])):e.createCommentVNode("",!0)],10,i)},t}(Vue);
+this.primevue=this.primevue||{},this.primevue.divider=function(e,t){"use strict";function i(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var n={name:"Divider",extends:i(e).default,props:{align:{type:String,default:null},layout:{type:String,default:"horizontal"},type:{type:String,default:"solid"}},computed:{containerClass(){return["p-divider p-component","p-divider-"+this.layout,"p-divider-"+this.type,{"p-divider-left":"horizontal"===this.layout&&(!this.align||"left"===this.align)},{"p-divider-center":"horizontal"===this.layout&&"center"===this.align},{"p-divider-right":"horizontal"===this.layout&&"right"===this.align},{"p-divider-top":"vertical"===this.layout&&"top"===this.align},{"p-divider-center":"vertical"===this.layout&&(!this.align||"center"===this.align)},{"p-divider-bottom":"vertical"===this.layout&&"bottom"===this.align}]}}};const r=["aria-orientation"];return function(e,t){void 0===t&&(t={});var i=t.insertAt;if(e&&"undefined"!=typeof document){var n=document.head||document.getElementsByTagName("head")[0],r=document.createElement("style");r.type="text/css","top"===i&&n.firstChild?n.insertBefore(r,n.firstChild):n.appendChild(r),r.styleSheet?r.styleSheet.cssText=e:r.appendChild(document.createTextNode(e))}}("\n.p-divider-horizontal {\n    display: flex;\n    width: 100%;\n    position: relative;\n    align-items: center;\n}\n.p-divider-horizontal:before {\n    position: absolute;\n    display: block;\n    top: 50%;\n    left: 0;\n    width: 100%;\n    content: '';\n}\n.p-divider-horizontal.p-divider-left {\n    justify-content: flex-start;\n}\n.p-divider-horizontal.p-divider-right {\n    justify-content: flex-end;\n}\n.p-divider-horizontal.p-divider-center {\n    justify-content: center;\n}\n.p-divider-content {\n    z-index: 1;\n}\n.p-divider-vertical {\n    min-height: 100%;\n    margin: 0 1rem;\n    display: flex;\n    position: relative;\n    justify-content: center;\n}\n.p-divider-vertical:before {\n    position: absolute;\n    display: block;\n    top: 0;\n    left: 50%;\n    height: 100%;\n    content: '';\n}\n.p-divider-vertical.p-divider-top {\n    align-items: flex-start;\n}\n.p-divider-vertical.p-divider-center {\n    align-items: center;\n}\n.p-divider-vertical.p-divider-bottom {\n    align-items: flex-end;\n}\n.p-divider-solid.p-divider-horizontal:before {\n    border-top-style: solid;\n}\n.p-divider-solid.p-divider-vertical:before {\n    border-left-style: solid;\n}\n.p-divider-dashed.p-divider-horizontal:before {\n    border-top-style: dashed;\n}\n.p-divider-dashed.p-divider-vertical:before {\n    border-left-style: dashed;\n}\n.p-divider-dotted.p-divider-horizontal:before {\n    border-top-style: dotted;\n}\n.p-divider-dotted.p-divider-vertical:before {\n    border-left-style: dotted;\n}\n"),n.render=function(e,i,n,d,o,l){return t.openBlock(),t.createElementBlock("div",t.mergeProps({class:l.containerClass,role:"separator","aria-orientation":n.layout},e.ptm("root")),[e.$slots.default?(t.openBlock(),t.createElementBlock("div",t.mergeProps({key:0,class:"p-divider-content"},e.ptm("content")),[t.renderSlot(e.$slots,"default")],16)):t.createCommentVNode("",!0)],16,r)},n}(primevue.basecomponent,Vue);

package/dropdown/Dropdown.d.ts

@@ -95,7 +95,7 @@ export interface DropdownProps {
      * 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.
      */
@@ -157,6 +157,7 @@ export interface DropdownProps {
     filterInputProps?: InputHTMLAttributes | undefined;
     /**
      * Uses to pass all properties of the HTMLElement to the clear icon inside the component.
+     * @deprecated since v3.26.0. Use 'pt' peroperty.
      */
     clearIconProps?: HTMLAttributes | undefined;
     /**
@@ -171,22 +172,22 @@ export interface DropdownProps {
     loading?: boolean | undefined;
     /**
      * Icon to display in clear button.
-     * @defaultValue pi pi-times
+     * @deprecated since v3.27.0. Use 'clearicon' slot.
      */
     clearIcon?: 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;
     /**
@@ -272,6 +273,7 @@ export interface DropdownSlots {
     }): VNode[];
     /**
      * Custom indicator template.
+     * @deprecated since v3.27.0. Use 'dropdownicon or loadingicon' slots.
      */
     indicator(): VNode[];
     /**
@@ -373,6 +375,40 @@ export interface DropdownSlots {
          */
         options: any[];
     }): VNode[];
+    /**
+     * Custom clear icon template.
+     * @param {Object} scope - clear icon slot's params.
+     */
+    clearicon(scope: {
+        /**
+         * Clear icon click function.
+         */
+        onClick: void;
+    }): VNode[];
+    /**
+     * Custom dropdown icon template.
+     * @param {Object} scope - dropdown icon slot's params.
+     */
+    dropdownicon(scope: {
+        /**
+         * Style class of the component
+         */
+        class: any;
+    }): VNode[];
+    /**
+     * Custom loading icon template.
+     * @param {Object} scope - loading icon slot's params.
+     */
+    loadingicon(scope: {
+        /**
+         * Style class of the component
+         */
+        class: any;
+    }): VNode[];
+    /**
+     * Custom filter icon template.
+     */
+    filtericon(): VNode[];
 }
 
 /**

package/dropdown/Dropdown.vue

@@ -47,10 +47,16 @@
         >
             <slot name="value" :value="modelValue" :placeholder="placeholder">{{ label === 'p-emptylabel' ? '&nbsp;' : label || 'empty' }}</slot>
         </span>
-        <i v-if="showClear && modelValue != null" :class="['p-dropdown-clear-icon', clearIcon]" @click="onClearClick" v-bind="clearIconProps"></i>
+        <slot v-if="showClear && modelValue != null" name="clearicon" :onClick="onClearClick">
+            <component :is="clearIcon ? 'i' : 'TimesIcon'" :class="['p-dropdown-clear-icon', clearIcon]" @click="onClearClick" v-bind="clearIconProps" />
+        </slot>
         <div class="p-dropdown-trigger">
-            <slot name="indicator">
-                <span :class="dropdownIconClass" aria-hidden="true"></span>
+            <slot v-if="loading" name="loadingicon" class="p-dropdown-trigger-icon">
+                <span v-if="loadingIcon" :class="['p-dropdown-trigger-icon pi-spin', loadingIcon]" aria-hidden="true" />
+                <SpinnerIcon v-else class="p-dropdown-trigger-icon" spin aria-hidden="true" />
+            </slot>
+            <slot v-else name="dropdownicon" class="p-dropdown-trigger-icon">
+                <component :is="dropdownIcon ? 'span' : 'ChevronDownIcon'" :class="['p-dropdown-trigger-icon', dropdownIcon]" aria-hidden="true" />
             </slot>
         </div>
         <Portal :appendTo="appendTo">
@@ -76,7 +82,9 @@
                                 @input="onFilterChange"
                                 v-bind="filterInputProps"
                             />
-                            <span :class="['p-dropdown-filter-icon', filterIcon]" />
+                            <slot name="filtericon">
+                                <component :is="filterIcon ? 'span' : 'FilterIcon'" :class="['p-dropdown-filter-icon', filterIcon]" />
+                            </slot>
                         </div>
                         <span role="status" aria-live="polite" class="p-hidden-accessible">
                             {{ filterResultMessageText }}
@@ -137,6 +145,10 @@
 
 <script>
 import { FilterService } from 'primevue/api';
+import ChevronDownIcon from 'primevue/icons/chevrondown';
+import FilterIcon from 'primevue/icons/filter';
+import SpinnerIcon from 'primevue/icons/spinner';
+import TimesIcon from 'primevue/icons/times';
 import OverlayEventBus from 'primevue/overlayeventbus';
 import Portal from 'primevue/portal';
 import Ripple from 'primevue/ripple';
@@ -229,19 +241,19 @@ export default {
         },
         clearIcon: {
             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
         },
         resetFilterOnHide: {
             type: Boolean,
@@ -964,9 +976,6 @@ export default {
                 }
             ];
         },
-        dropdownIconClass() {
-            return ['p-dropdown-trigger-icon', this.loading ? this.loadingIcon : this.dropdownIcon];
-        },
         visibleOptions() {
             const options = this.optionGroupLabel ? this.flatOptions(this.options) : this.options || [];
 
@@ -978,9 +987,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);
@@ -1046,7 +1056,11 @@ export default {
     },
     components: {
         VirtualScroller: VirtualScroller,
-        Portal: Portal
+        Portal: Portal,
+        TimesIcon: TimesIcon,
+        ChevronDownIcon: ChevronDownIcon,
+        SpinnerIcon: SpinnerIcon,
+        FilterIcon: FilterIcon
     }
 };
 </script>

package/dropdown/dropdown.cjs.js

@@ -1,6 +1,10 @@
 'use strict';
 
 var api = require('primevue/api');
+var ChevronDownIcon = require('primevue/icons/chevrondown');
+var FilterIcon = require('primevue/icons/filter');
+var SpinnerIcon = require('primevue/icons/spinner');
+var TimesIcon = require('primevue/icons/times');
 var OverlayEventBus = require('primevue/overlayeventbus');
 var Portal = require('primevue/portal');
 var Ripple = require('primevue/ripple');
@@ -10,6 +14,10 @@ var vue = require('vue');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
+var ChevronDownIcon__default = /*#__PURE__*/_interopDefaultLegacy(ChevronDownIcon);
+var FilterIcon__default = /*#__PURE__*/_interopDefaultLegacy(FilterIcon);
+var SpinnerIcon__default = /*#__PURE__*/_interopDefaultLegacy(SpinnerIcon);
+var TimesIcon__default = /*#__PURE__*/_interopDefaultLegacy(TimesIcon);
 var OverlayEventBus__default = /*#__PURE__*/_interopDefaultLegacy(OverlayEventBus);
 var Portal__default = /*#__PURE__*/_interopDefaultLegacy(Portal);
 var Ripple__default = /*#__PURE__*/_interopDefaultLegacy(Ripple);
@@ -101,19 +109,19 @@ var script = {
         },
         clearIcon: {
             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
         },
         resetFilterOnHide: {
             type: Boolean,
@@ -830,9 +838,6 @@ var script = {
                 }
             ];
         },
-        dropdownIconClass() {
-            return ['p-dropdown-trigger-icon', this.loading ? this.loadingIcon : this.dropdownIcon];
-        },
         visibleOptions() {
             const options = this.optionGroupLabel ? this.flatOptions(this.options) : this.options || [];
 
@@ -844,9 +849,10 @@ var script = {
                     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);
@@ -912,7 +918,11 @@ var script = {
     },
     components: {
         VirtualScroller: VirtualScroller__default["default"],
-        Portal: Portal__default["default"]
+        Portal: Portal__default["default"],
+        TimesIcon: TimesIcon__default["default"],
+        ChevronDownIcon: ChevronDownIcon__default["default"],
+        SpinnerIcon: SpinnerIcon__default["default"],
+        FilterIcon: FilterIcon__default["default"]
     }
 };
 
@@ -957,6 +967,7 @@ const _hoisted_15 = {
 };
 
 function render(_ctx, _cache, $props, $setup, $data, $options) {
+  const _component_SpinnerIcon = vue.resolveComponent("SpinnerIcon");
   const _component_VirtualScroller = vue.resolveComponent("VirtualScroller");
   const _component_Portal = vue.resolveComponent("Portal");
   const _directive_ripple = vue.resolveDirective("ripple");
@@ -965,7 +976,7 @@ function render(_ctx, _cache, $props, $setup, $data, $options) {
     ref: "container",
     id: $data.id,
     class: vue.normalizeClass($options.containerClass),
-    onClick: _cache[16] || (_cache[16] = (...args) => ($options.onContainerClick && $options.onContainerClick(...args)))
+    onClick: _cache[15] || (_cache[15] = (...args) => ($options.onContainerClick && $options.onContainerClick(...args)))
   }, [
     ($props.editable)
       ? (vue.openBlock(), vue.createElementBlock("input", vue.mergeProps({
@@ -1019,19 +1030,44 @@ function render(_ctx, _cache, $props, $setup, $data, $options) {
           ])
         ], 16, _hoisted_3)),
     ($props.showClear && $props.modelValue != null)
-      ? (vue.openBlock(), vue.createElementBlock("i", vue.mergeProps({
+      ? vue.renderSlot(_ctx.$slots, "clearicon", {
           key: 2,
-          class: ['p-dropdown-clear-icon', $props.clearIcon],
-          onClick: _cache[7] || (_cache[7] = (...args) => ($options.onClearClick && $options.onClearClick(...args)))
-        }, $props.clearIconProps), null, 16))
+          onClick: $options.onClearClick
+        }, () => [
+          (vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent($props.clearIcon ? 'i' : 'TimesIcon'), vue.mergeProps({
+            class: ['p-dropdown-clear-icon', $props.clearIcon],
+            onClick: $options.onClearClick
+          }, $props.clearIconProps), null, 16, ["class", "onClick"]))
+        ])
       : vue.createCommentVNode("", true),
     vue.createElementVNode("div", _hoisted_4, [
-      vue.renderSlot(_ctx.$slots, "indicator", {}, () => [
-        vue.createElementVNode("span", {
-          class: vue.normalizeClass($options.dropdownIconClass),
-          "aria-hidden": "true"
-        }, null, 2)
-      ])
+      ($props.loading)
+        ? vue.renderSlot(_ctx.$slots, "loadingicon", {
+            key: 0,
+            class: "p-dropdown-trigger-icon"
+          }, () => [
+            ($props.loadingIcon)
+              ? (vue.openBlock(), vue.createElementBlock("span", {
+                  key: 0,
+                  class: vue.normalizeClass(['p-dropdown-trigger-icon pi-spin', $props.loadingIcon]),
+                  "aria-hidden": "true"
+                }, null, 2))
+              : (vue.openBlock(), vue.createBlock(_component_SpinnerIcon, {
+                  key: 1,
+                  class: "p-dropdown-trigger-icon",
+                  spin: "",
+                  "aria-hidden": "true"
+                }))
+          ])
+        : vue.renderSlot(_ctx.$slots, "dropdownicon", {
+            key: 1,
+            class: "p-dropdown-trigger-icon"
+          }, () => [
+            (vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent($props.dropdownIcon ? 'span' : 'ChevronDownIcon'), {
+              class: vue.normalizeClass(['p-dropdown-trigger-icon', $props.dropdownIcon]),
+              "aria-hidden": "true"
+            }, null, 8, ["class"]))
+          ])
     ]),
     vue.createVNode(_component_Portal, { appendTo: $props.appendTo }, {
       default: vue.withCtx(() => [
@@ -1049,8 +1085,8 @@ function render(_ctx, _cache, $props, $setup, $data, $options) {
                   ref: $options.overlayRef,
                   style: $props.panelStyle,
                   class: $options.panelStyleClass,
-                  onClick: _cache[14] || (_cache[14] = (...args) => ($options.onOverlayClick && $options.onOverlayClick(...args))),
-                  onKeydown: _cache[15] || (_cache[15] = (...args) => ($options.onOverlayKeyDown && $options.onOverlayKeyDown(...args)))
+                  onClick: _cache[13] || (_cache[13] = (...args) => ($options.onOverlayClick && $options.onOverlayClick(...args))),
+                  onKeydown: _cache[14] || (_cache[14] = (...args) => ($options.onOverlayKeyDown && $options.onOverlayKeyDown(...args)))
                 }, $props.panelProps), [
                   vue.createElementVNode("span", {
                     ref: "firstHiddenFocusableElementOnOverlay",
@@ -1058,7 +1094,7 @@ function render(_ctx, _cache, $props, $setup, $data, $options) {
                     "aria-hidden": "true",
                     class: "p-hidden-accessible p-hidden-focusable",
                     tabindex: 0,
-                    onFocus: _cache[8] || (_cache[8] = (...args) => ($options.onFirstHiddenFocus && $options.onFirstHiddenFocus(...args)))
+                    onFocus: _cache[7] || (_cache[7] = (...args) => ($options.onFirstHiddenFocus && $options.onFirstHiddenFocus(...args)))
                   }, null, 544),
                   vue.renderSlot(_ctx.$slots, "header", {
                     value: $props.modelValue,
@@ -1071,20 +1107,22 @@ function render(_ctx, _cache, $props, $setup, $data, $options) {
                             ref: "filterInput",
                             type: "text",
                             value: $data.filterValue,
-                            onVnodeUpdated: _cache[9] || (_cache[9] = (...args) => ($options.onFilterUpdated && $options.onFilterUpdated(...args))),
+                            onVnodeUpdated: _cache[8] || (_cache[8] = (...args) => ($options.onFilterUpdated && $options.onFilterUpdated(...args))),
                             class: "p-dropdown-filter p-inputtext p-component",
                             placeholder: $props.filterPlaceholder,
                             role: "searchbox",
                             autocomplete: "off",
                             "aria-owns": $data.id + '_list',
                             "aria-activedescendant": $options.focusedOptionId,
-                            onKeydown: _cache[10] || (_cache[10] = (...args) => ($options.onFilterKeyDown && $options.onFilterKeyDown(...args))),
-                            onBlur: _cache[11] || (_cache[11] = (...args) => ($options.onFilterBlur && $options.onFilterBlur(...args))),
-                            onInput: _cache[12] || (_cache[12] = (...args) => ($options.onFilterChange && $options.onFilterChange(...args)))
+                            onKeydown: _cache[9] || (_cache[9] = (...args) => ($options.onFilterKeyDown && $options.onFilterKeyDown(...args))),
+                            onBlur: _cache[10] || (_cache[10] = (...args) => ($options.onFilterBlur && $options.onFilterBlur(...args))),
+                            onInput: _cache[11] || (_cache[11] = (...args) => ($options.onFilterChange && $options.onFilterChange(...args)))
                           }, $props.filterInputProps), null, 16, _hoisted_7),
-                          vue.createElementVNode("span", {
-                            class: vue.normalizeClass(['p-dropdown-filter-icon', $props.filterIcon])
-                          }, null, 2)
+                          vue.renderSlot(_ctx.$slots, "filtericon", {}, () => [
+                            (vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent($props.filterIcon ? 'span' : 'FilterIcon'), {
+                              class: vue.normalizeClass(['p-dropdown-filter-icon', $props.filterIcon])
+                            }, null, 8, ["class"]))
+                          ])
                         ]),
                         vue.createElementVNode("span", _hoisted_8, vue.toDisplayString($options.filterResultMessageText), 1)
                       ]))
@@ -1193,7 +1231,7 @@ function render(_ctx, _cache, $props, $setup, $data, $options) {
                     "aria-hidden": "true",
                     class: "p-hidden-accessible p-hidden-focusable",
                     tabindex: 0,
-                    onFocus: _cache[13] || (_cache[13] = (...args) => ($options.onLastHiddenFocus && $options.onLastHiddenFocus(...args)))
+                    onFocus: _cache[12] || (_cache[12] = (...args) => ($options.onLastHiddenFocus && $options.onLastHiddenFocus(...args)))
                   }, null, 544)
                 ], 16))
               : vue.createCommentVNode("", true)