Skip to content

Commit

Permalink
feat: add the clearIcon prop to input and autocomplete
Browse files Browse the repository at this point in the history 
* feat: add the clearIcon prop to input and autocomplete

* fix: use the syntax that read it from global config
  • Loading branch information
@fabiiomiiguel
fabiiomiiguel authored May 5, 2023
1 parent d318986 commit a33ee8e
Show file tree
Hide file tree
Showing 8 changed files with 50 additions and 10 deletions.
1 change: 1 addition & 0 deletions packages/docs-next/components/Autocomplete.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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 | - | [] |
Expand Down
1 change: 1 addition & 0 deletions packages/docs-next/components/Input.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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 | - | <div>From <b>config</b></div><br><code style='white-space: nowrap; padding: 0;'> input: {<br>&nbsp;&nbsp;clearable: false<br>}</code> |
| 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 | - | <div>From <b>config</b></div><br><code style='white-space: nowrap; padding: 0;'> input: {<br>&nbsp;&nbsp;counter: false<br>}</code> |
| icon | Icon name to be added | string | - | |
Expand Down
1 change: 1 addition & 0 deletions packages/docs/components/Autocomplete.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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 | - | [] |
Expand Down
1 change: 1 addition & 0 deletions packages/docs/components/Input.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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 | - | <div>From <b>config</b></div><br><code style='white-space: nowrap; padding: 0;'> input: {<br>&nbsp;&nbsp;clearable: false<br>}</code> |
| 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 | - | <div>From <b>config</b></div><br><code style='white-space: nowrap; padding: 0;'> input: {<br>&nbsp;&nbsp;counter: false<br>}</code> |
| icon | Icon name to be added | string | - | |
Expand Down
13 changes: 11 additions & 2 deletions packages/oruga-next/src/components/autocomplete/Autocomplete.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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],
/**
Expand Down Expand Up @@ -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
},
Expand Down
15 changes: 12 additions & 3 deletions packages/oruga-next/src/components/input/Input.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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],
Expand Down Expand Up @@ -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
}
Expand Down
13 changes: 11 additions & 2 deletions packages/oruga/src/components/autocomplete/Autocomplete.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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],
/**
Expand Down Expand Up @@ -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
},
Expand Down
15 changes: 12 additions & 3 deletions packages/oruga/src/components/input/Input.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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],
Expand Down Expand Up @@ -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
}
Expand Down

0 comments on commit a33ee8e

Please sign in to comment.