From a33ee8ec11b69df218c17f388b4202947d473164 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?F=C3=A1bio=20Carvalho?= Date: Fri, 5 May 2023 17:29:50 +0100 Subject: [PATCH] feat: add the clearIcon prop to input and autocomplete * feat: add the clearIcon prop to input and autocomplete * fix: use the syntax that read it from global config --- packages/docs-next/components/Autocomplete.md | 1 + packages/docs-next/components/Input.md | 1 + packages/docs/components/Autocomplete.md | 1 + packages/docs/components/Input.md | 1 + .../src/components/autocomplete/Autocomplete.vue | 13 +++++++++++-- .../oruga-next/src/components/input/Input.vue | 15 ++++++++++++--- .../src/components/autocomplete/Autocomplete.vue | 13 +++++++++++-- packages/oruga/src/components/input/Input.vue | 15 ++++++++++++--- 8 files changed, 50 insertions(+), 10 deletions(-) diff --git a/packages/docs-next/components/Autocomplete.md b/packages/docs-next/components/Autocomplete.md index ce890bb6c..4881c692e 100644 --- a/packages/docs-next/components/Autocomplete.md +++ b/packages/docs-next/components/Autocomplete.md @@ -33,6 +33,7 @@ title: Autocomplete | checkInfiniteScroll | Makes the component check if list reached scroll end and emit infinite-scroll event. | boolean | - | | | clearOnSelect | Clear input text on select | boolean | - | | | clearable | Add a button/icon to clear the inputed text | boolean | - | | +| clearIcon | Icon name to be added on the clear button | string | - | 'close-circle' | | confirmKeys | Array of keys (https://developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent/key/Key_Values) which will add a tag when typing (default tab and enter) | array | - | ['Tab', 'Enter'] | | customFormatter | Function to format an option to a string for display in the input as alternative to field prop) | func | - | | | data | Options / suggestions | array | - | [] | diff --git a/packages/docs-next/components/Input.md b/packages/docs-next/components/Input.md index 797b4e177..7ce59ec05 100644 --- a/packages/docs-next/components/Input.md +++ b/packages/docs-next/components/Input.md @@ -30,6 +30,7 @@ title: Input | autocomplete | Native options to use in HTML5 validation | string | - | | | autosize | Automatically adjust height in textarea | boolean | - | false | | clearable | Add a button/icon to clear the inputed text | boolean | - |
From config

input: {
  clearable: false
} | +| clearIcon | Icon name to be added on the clear button | string | - | 'close-circle' | | expanded | Makes input full width when inside a grouped or addon field | boolean | - | | | hasCounter | Show character counter when maxlength prop is passed | boolean | - |
From config

input: {
  counter: false
} | | icon | Icon name to be added | string | - | | diff --git a/packages/docs/components/Autocomplete.md b/packages/docs/components/Autocomplete.md index 1581c207a..fab27732a 100644 --- a/packages/docs/components/Autocomplete.md +++ b/packages/docs/components/Autocomplete.md @@ -472,6 +472,7 @@ export default { | checkInfiniteScroll | Makes the component check if list reached scroll end and emit infinite-scroll event. | boolean | - | | | clearOnSelect | Clear input text on select | boolean | - | | | clearable | Add a button/icon to clear the inputed text | boolean | - | | +| clearIcon | Icon name to be added on the clear button | string | - | 'close-circle' | | confirmKeys | Array of keys (https://developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent/key/Key_Values) which will add a tag when typing (default tab and enter) | array | - | ['Tab', 'Enter'] | | customFormatter | Function to format an option to a string for display in the input as alternative to field prop) | func | - | | | data | Options / suggestions | array | - | [] | diff --git a/packages/docs/components/Input.md b/packages/docs/components/Input.md index 0f12086b6..7e207d72e 100644 --- a/packages/docs/components/Input.md +++ b/packages/docs/components/Input.md @@ -253,6 +253,7 @@ export default { | autocomplete | Native options to use in HTML5 validation | string | - | | | autosize | Automatically adjust height in textarea | boolean | - | false | | clearable | Add a button/icon to clear the inputed text | boolean | - |
From config

input: {
  clearable: false
} | +| clearIcon | Icon name to be added on the clear button | string | - | 'close-circle' | | expanded | Makes input full width when inside a grouped or addon field | boolean | - | | | hasCounter | Show character counter when maxlength prop is passed | boolean | - |
From config

input: {
  counter: false
} | | icon | Icon name to be added | string | - | | diff --git a/packages/oruga-next/src/components/autocomplete/Autocomplete.vue b/packages/oruga-next/src/components/autocomplete/Autocomplete.vue index 2c4152d11..3895e482f 100644 --- a/packages/oruga-next/src/components/autocomplete/Autocomplete.vue +++ b/packages/oruga-next/src/components/autocomplete/Autocomplete.vue @@ -156,6 +156,15 @@ export default defineComponent({ keepOpen: Boolean, /** Add a button/icon to clear the inputed text */ clearable: Boolean, + /** + * Icon name to be added on the clear button + */ + clearIcon: { + type: String, + default: () => { + return getValueByPath(getOptions(), 'autocomplete.clearIcon', 'close-circle') + } + }, /** Max height of dropdown content */ maxHeight: [String, Number], /** @@ -359,8 +368,8 @@ export default defineComponent({ }, newIconRight() { - if (this.clearable && this.newValue) { - return 'close-circle' + if (this.clearable && this.newValue && this.clearIcon) { + return this.clearIcon } return this.iconRight }, diff --git a/packages/oruga-next/src/components/input/Input.vue b/packages/oruga-next/src/components/input/Input.vue index 905b2f4ed..a8f761595 100644 --- a/packages/oruga-next/src/components/input/Input.vue +++ b/packages/oruga-next/src/components/input/Input.vue @@ -141,6 +141,15 @@ export default defineComponent({ type: Boolean, default: () => { return getValueByPath(getOptions(), 'input.clearable', false) } }, + /** + * Icon name to be added on the clear button + */ + clearIcon: { + type: String, + default: () => { + return getValueByPath(getOptions(), 'input.clearIcon', 'close-circle') + } + }, rootClass: [String, Function, Array], expandedClass: [String, Function, Array], iconLeftSpaceClass: [String, Function, Array], @@ -210,14 +219,14 @@ export default defineComponent({ hasIconRight() { return this.passwordReveal || (this.statusIcon && this.statusVariantIcon) - || (this.clearable && this.newValue) + || (this.clearable && this.newValue && this.clearIcon) || this.iconRight }, rightIcon() { if (this.passwordReveal) { return this.passwordVisibleIcon - } else if (this.clearable && this.newValue) { - return 'close-circle' + } else if (this.clearable && this.newValue && this.clearIcon) { + return this.clearIcon } else if (this.iconRight) { return this.iconRight } diff --git a/packages/oruga/src/components/autocomplete/Autocomplete.vue b/packages/oruga/src/components/autocomplete/Autocomplete.vue index dc31edaa8..cf403df88 100644 --- a/packages/oruga/src/components/autocomplete/Autocomplete.vue +++ b/packages/oruga/src/components/autocomplete/Autocomplete.vue @@ -151,6 +151,15 @@ export default { keepOpen: Boolean, /** Add a button/icon to clear the inputed text */ clearable: Boolean, + /** + * Icon name to be added on the clear button + */ + clearIcon: { + type: String, + default: () => { + return getValueByPath(getOptions(), 'autocomplete.clearIcon', 'close-circle') + } + }, /** Max height of dropdown content */ maxHeight: [String, Number], /** @@ -353,8 +362,8 @@ export default { }, newIconRight() { - if (this.clearable && this.newValue) { - return 'close-circle' + if (this.clearable && this.newValue && this.clearIcon) { + return this.clearIcon } return this.iconRight }, diff --git a/packages/oruga/src/components/input/Input.vue b/packages/oruga/src/components/input/Input.vue index d7f6975dd..5424646fb 100644 --- a/packages/oruga/src/components/input/Input.vue +++ b/packages/oruga/src/components/input/Input.vue @@ -136,6 +136,15 @@ export default { type: Boolean, default: () => { return getValueByPath(getOptions(), 'input.clearable', false) } }, + /** + * Icon name to be added on the clear button + */ + clearIcon: { + type: String, + default: () => { + return getValueByPath(getOptions(), 'input.clearIcon', 'close-circle') + } + }, rootClass: [String, Function, Array], expandedClass: [String, Function, Array], iconLeftSpaceClass: [String, Function, Array], @@ -204,14 +213,14 @@ export default { hasIconRight() { return this.passwordReveal || (this.statusIcon && this.statusVariantIcon) - || (this.clearable && this.newValue) + || (this.clearable && this.newValue && this.clearIcon) || this.iconRight }, rightIcon() { if (this.passwordReveal) { return this.passwordVisibleIcon - } else if (this.clearable && this.newValue) { - return 'close-circle' + } else if (this.clearable && this.newValue && this.clearIcon) { + return this.clearIcon } else if (this.iconRight) { return this.iconRight }