diff --git a/apps/showcase/doc/common/apidoc/index.json b/apps/showcase/doc/common/apidoc/index.json index 8036284d1..7db307586 100644 --- a/apps/showcase/doc/common/apidoc/index.json +++ b/apps/showcase/doc/common/apidoc/index.json @@ -8517,6 +8517,14 @@ "default": "", "description": "Used to pass attributes to the label's DOM element." }, + { + "name": "clearIcon", + "optional": true, + "readonly": false, + "type": "CascadeSelectPassThroughOptionType", + "default": "", + "description": "Used to pass attributes to the label's DOM element." + }, { "name": "dropdown", "optional": true, @@ -8950,6 +8958,22 @@ "default": "", "description": "A property to uniquely identify an option." }, + { + "name": "showClear", + "optional": true, + "readonly": false, + "type": "boolean", + "default": "false", + "description": "When enabled, a clear icon is displayed to clear the value." + }, + { + "name": "clearIcon", + "optional": true, + "readonly": false, + "type": "string", + "default": "", + "description": "Icon to display in clear button." + }, { "name": "inputId", "optional": true, @@ -9298,6 +9322,19 @@ ], "returnType": "VNode[]", "description": "Custom footer template." + }, + { + "name": "clearicon", + "parameters": [ + { + "name": "scope", + "optional": false, + "type": "{\n \t clearCallback: (event: Event) ⇒ void, // Clear icon click function.\n}", + "description": "clear icon slot's params." + } + ], + "returnType": "VNode[]", + "description": "Custom clear icon template." } ] }, @@ -9545,6 +9582,13 @@ "value": "\"p-cascadeselect-loading-icon\"", "description": "Class name of the loading icon element" }, + { + "name": "clearIcon", + "optional": false, + "readonly": false, + "value": "\"p-cascadeselect-clear-icon\"", + "description": "Class name of the dropdown icon element" + }, { "name": "dropdownIcon", "optional": false, @@ -42307,6 +42351,14 @@ "default": "", "description": "Used to pass attributes to the label's DOM element." }, + { + "name": "clearIcon", + "optional": true, + "readonly": false, + "type": "MultiSelectPassThroughOptionType", + "default": "", + "description": "Used to pass attributes to the label's DOM element." + }, { "name": "chipItem", "optional": true, @@ -42807,6 +42859,30 @@ "default": "", "description": "A property to uniquely identify an option." }, + { + "name": "showClear", + "optional": true, + "readonly": false, + "type": "boolean", + "default": "false", + "description": "When enabled, a clear icon is displayed to clear the value." + }, + { + "name": "clearIcon", + "optional": true, + "readonly": false, + "type": "string", + "default": "", + "description": "Icon to display in clear button." + }, + { + "name": "resetFilterOnClear", + "optional": true, + "readonly": false, + "type": "boolean", + "default": "false", + "description": "Clears the filter value when clicking on the clear icon." + }, { "name": "filter", "optional": true, @@ -43314,6 +43390,19 @@ "returnType": "VNode[]", "description": "Custom loading icon template." }, + { + "name": "clearicon", + "parameters": [ + { + "name": "scope", + "optional": false, + "type": "{\n \t clearCallback: (event: Event) ⇒ void, // Clear icon click function.\n}", + "description": "clear icon slot's params." + } + ], + "returnType": "VNode[]", + "description": "Custom clear icon template." + }, { "name": "dropdownicon", "parameters": [ @@ -77210,6 +77299,14 @@ "default": "", "description": "Used to pass tokens of the option section" }, + { + "name": "clearIcon", + "optional": true, + "readonly": false, + "type": "Object", + "default": "", + "description": "Used to pass tokens of the clear icon section" + }, { "name": "colorScheme", "optional": true, @@ -77677,6 +77774,15 @@ "type": "string", "default": "", "description": "Icon size of option" + }, + { + "name": "clearIcon.color", + "token": "cascadeselect.clear.icon.color", + "optional": true, + "readonly": false, + "type": "string", + "default": "", + "description": "Color of clear icon" } ] } @@ -89066,6 +89172,14 @@ "default": "", "description": "Used to pass tokens of the option group section" }, + { + "name": "clearIcon", + "optional": true, + "readonly": false, + "type": "Object", + "default": "", + "description": "Used to pass tokens of the clear icon section" + }, { "name": "chip", "optional": true, @@ -89561,6 +89675,15 @@ "default": "", "description": "Padding of option group" }, + { + "name": "clearIcon.color", + "token": "multiselect.clear.icon.color", + "optional": true, + "readonly": false, + "type": "string", + "default": "", + "description": "Color of clear icon" + }, { "name": "chip.borderRadius", "token": "multiselect.chip.border.radius", diff --git a/packages/primevue/src/cascadeselect/BaseCascadeSelect.vue b/packages/primevue/src/cascadeselect/BaseCascadeSelect.vue index fe2b5ad67..55f893579 100644 --- a/packages/primevue/src/cascadeselect/BaseCascadeSelect.vue +++ b/packages/primevue/src/cascadeselect/BaseCascadeSelect.vue @@ -18,6 +18,14 @@ export default { default: '960px' }, dataKey: null, + showClear: { + type: Boolean, + default: false + }, + clearIcon: { + type: String, + default: undefined + }, inputId: { type: String, default: null diff --git a/packages/primevue/src/cascadeselect/CascadeSelect.d.ts b/packages/primevue/src/cascadeselect/CascadeSelect.d.ts index a93d66ed7..e7db1a3e8 100644 --- a/packages/primevue/src/cascadeselect/CascadeSelect.d.ts +++ b/packages/primevue/src/cascadeselect/CascadeSelect.d.ts @@ -88,6 +88,10 @@ export interface CascadeSelectPassThroughOptions { * Used to pass attributes to the label's DOM element. */ label?: CascadeSelectPassThroughOptionType; + /** + * Used to pass attributes to the label's DOM element. + */ + clearIcon?: CascadeSelectPassThroughOptionType; /** * Used to pass attributes to the dropdown button's DOM element. */ @@ -327,6 +331,15 @@ export interface CascadeSelectProps { * A property to uniquely identify an option. */ dataKey?: string | undefined; + /** + * When enabled, a clear icon is displayed to clear the value. + * @defaultValue false + */ + showClear?: boolean | undefined; + /** + * Icon to display in clear button. + */ + clearIcon?: string | undefined; /** * Identifier of the underlying input element. */ @@ -553,6 +566,17 @@ export interface CascadeSelectSlots { */ options: any[]; }): VNode[]; + /** + * Custom clear icon template. + * @param {Object} scope - clear icon slot's params. + */ + clearicon(scope: { + /** + * Clear icon click function. + * @param {Event} event - Browser event + */ + clearCallback: (event: Event) => void; + }): VNode[]; } /** diff --git a/packages/primevue/src/cascadeselect/CascadeSelect.vue b/packages/primevue/src/cascadeselect/CascadeSelect.vue index 188a388f6..8c3c221b8 100644 --- a/packages/primevue/src/cascadeselect/CascadeSelect.vue +++ b/packages/primevue/src/cascadeselect/CascadeSelect.vue @@ -30,6 +30,9 @@ {{ label }} + + +
+ + +