diff --git a/src/system/components/data-input/FormItem/style.scss b/src/system/components/data-input/FormItem/style.scss index dfa2aedc2..f5ae79926 100644 --- a/src/system/components/data-input/FormItem/style.scss +++ b/src/system/components/data-input/FormItem/style.scss @@ -26,4 +26,4 @@ color: $text-color-soft; font-size: $font-size-base; display: block; -} \ No newline at end of file +} diff --git a/src/system/components/data-input/Select/Select.vue b/src/system/components/data-input/Select/Select.vue index 0728a2a45..08d8382bc 100755 --- a/src/system/components/data-input/Select/Select.vue +++ b/src/system/components/data-input/Select/Select.vue @@ -134,10 +134,17 @@ -
@@ -233,13 +240,20 @@ export default { type: Boolean, default: true }, + /** + * Should a loading indicator be shown? + */ + loading: { + type: Boolean, + default: false + }, /** * Function to filter the results */ filter: { type: Function, - default: (option, searchString = '') => { - const value = option.value || option + default: (option, searchString = '', labelProp) => { + const value = option[labelProp] || option const searchParts = (typeof searchString === 'string') ? searchString.split(' ') : [] return searchParts.every(part => { if (!part) { @@ -270,7 +284,7 @@ export default { return this.options } - return this.options.filter((option) => this.filter(option, this.searchString)) + return this.options.filter((option) => this.filter(option, this.searchString, this.labelProp)) }, pointerMax() { return this.filteredOptions.length - 1 diff --git a/src/system/components/data-input/Select/style.scss b/src/system/components/data-input/Select/style.scss index ba4e79ece..5c4bec3b4 100644 --- a/src/system/components/data-input/Select/style.scss +++ b/src/system/components/data-input/Select/style.scss @@ -4,9 +4,12 @@ .ds-select { user-select: none; + transition: border-bottom 0ms; + .ds-select-is-open & { border-bottom-left-radius: 0; border-bottom-right-radius: 0; + border-bottom: 0; } } @@ -127,7 +130,7 @@ border-bottom-right-radius: $border-radius-base; visibility: hidden; opacity: 0; - transition: all $duration-short $ease-out; + transition: all $duration-short $ease-out, border-bottom 0ms; max-height: 240px; overflow: auto; @@ -139,6 +142,7 @@ .ds-select-dropdown-message { padding: $input-padding-vertical $space-x-small; + color: $text-color-disabled; } .ds-select-options { @@ -148,11 +152,11 @@ .ds-select-option { padding: $input-padding-vertical $space-x-small; cursor: pointer; - transition: all $duration-short $ease-out; + transition: all $duration-short $ease-out, border-bottom 0ms; &.ds-select-option-hover { - background-color: $background-color-primary; - color: $text-color-primary-inverse; + background-color: $background-color-softer; + color: $text-color-base; } } diff --git a/src/system/components/data-input/shared/input.scss b/src/system/components/data-input/shared/input.scss index 4d97e16b0..58a83514e 100644 --- a/src/system/components/data-input/shared/input.scss +++ b/src/system/components/data-input/shared/input.scss @@ -14,9 +14,9 @@ height: $input-height; color: $text-color-base; - background: $background-color-base; + background: $background-color-soft; - border: $input-border-size solid $border-color-base; + border: $input-border-size solid $border-color-softer; border-radius: $border-radius-base; outline: none; transition: all $duration-short $ease-out;