diff options
Diffstat (limited to 'app/assets/javascripts/vue_shared/components/filtered_search_bar/tokens/base_token.vue')
-rw-r--r-- | app/assets/javascripts/vue_shared/components/filtered_search_bar/tokens/base_token.vue | 33 |
1 files changed, 20 insertions, 13 deletions
diff --git a/app/assets/javascripts/vue_shared/components/filtered_search_bar/tokens/base_token.vue b/app/assets/javascripts/vue_shared/components/filtered_search_bar/tokens/base_token.vue index fb6b9e4bc0d..3dbac0d146c 100644 --- a/app/assets/javascripts/vue_shared/components/filtered_search_bar/tokens/base_token.vue +++ b/app/assets/javascripts/vue_shared/components/filtered_search_bar/tokens/base_token.vue @@ -19,29 +19,34 @@ export default { GlLoadingIcon, }, props: { - tokenConfig: { + config: { type: Object, required: true, }, - tokenValue: { + value: { type: Object, required: true, }, - tokenActive: { + active: { type: Boolean, required: true, }, tokensListLoading: { type: Boolean, - required: true, + required: false, + default: false, }, tokenValues: { type: Array, - required: true, + required: false, + default: () => [], }, fnActiveTokenValue: { type: Function, - required: true, + required: false, + default: (tokenValues, currentTokenValue) => { + return tokenValues.find(({ value }) => value === currentTokenValue); + }, }, defaultTokenValues: { type: Array, @@ -90,9 +95,9 @@ export default { }, currentTokenValue() { if (this.fnCurrentTokenValue) { - return this.fnCurrentTokenValue(this.tokenValue.data); + return this.fnCurrentTokenValue(this.value.data); } - return this.tokenValue.data.toLowerCase(); + return this.value.data.toLowerCase(); }, activeTokenValue() { return this.fnActiveTokenValue(this.tokenValues, this.currentTokenValue); @@ -113,11 +118,11 @@ export default { }, }, watch: { - tokenActive: { + active: { immediate: true, handler(newValue) { if (!newValue && !this.tokenValues.length) { - this.$emit('fetch-token-values', this.tokenValue.data); + this.$emit('fetch-token-values', this.value.data); } }, }, @@ -148,9 +153,11 @@ export default { <template> <gl-filtered-search-token - :config="tokenConfig" - v-bind="{ ...this.$parent.$props, ...this.$parent.$attrs }" - v-on="this.$parent.$listeners" + :config="config" + :value="value" + :active="active" + v-bind="$attrs" + v-on="$listeners" @input="handleInput" @select="handleTokenValueSelected(activeTokenValue)" > |