diff options
author | Dennis Tang <dtang@gitlab.com> | 2018-05-08 16:24:50 +0300 |
---|---|---|
committer | Dennis Tang <dtang@gitlab.com> | 2018-05-08 16:24:50 +0300 |
commit | aa7e55f274a362078ad728262337a50fd9ea5972 (patch) | |
tree | a71991c9200272bbd76321d62ae4c107f0329fd8 /app/assets/javascripts/vue_shared/components/dropdown | |
parent | da3610fff25b2d21e2ad33196bf34dbbf6fddcf3 (diff) |
refactor dropdown reusable components
Diffstat (limited to 'app/assets/javascripts/vue_shared/components/dropdown')
3 files changed, 58 insertions, 3 deletions
diff --git a/app/assets/javascripts/vue_shared/components/dropdown/dropdown_button.vue b/app/assets/javascripts/vue_shared/components/dropdown/dropdown_button.vue new file mode 100644 index 00000000000..7862b204f20 --- /dev/null +++ b/app/assets/javascripts/vue_shared/components/dropdown/dropdown_button.vue @@ -0,0 +1,55 @@ +<script> +import { __ } from '~/locale'; +import LoadingIcon from '~/vue_shared/components/loading_icon.vue'; + +export default { + components: { + LoadingIcon, + }, + props: { + isDisabled: { + type: Boolean, + required: false, + default: false, + }, + isLoading: { + type: Boolean, + required: false, + default: false, + }, + toggleText: { + type: String, + required: false, + default: __('Select'), + }, + }, +}; +</script> + +<template> + <button + class="dropdown-menu-toggle dropdown-menu-full-width" + type="button" + data-toggle="dropdown" + aria-expanded="true" + :disabled="isDisabled || isLoading" + > + <loading-icon + v-show="isLoading" + :inline="true" + /> + <span class="dropdown-toggle-text"> + {{ toggleText }} + </span> + <span + class="dropdown-toggle-icon" + v-show="!isLoading" + > + <i + class="fa fa-chevron-down" + aria-hidden="true" + data-hidden="true" + ></i> + </span> + </button> +</template> diff --git a/app/assets/javascripts/vue_shared/components/dropdown/dropdown_hidden_input.vue b/app/assets/javascripts/vue_shared/components/dropdown/dropdown_hidden_input.vue index 7f3e88a9a40..1fe27eb97ab 100644 --- a/app/assets/javascripts/vue_shared/components/dropdown/dropdown_hidden_input.vue +++ b/app/assets/javascripts/vue_shared/components/dropdown/dropdown_hidden_input.vue @@ -6,7 +6,7 @@ export default { required: true, }, value: { - type: String, + type: [Number, String], required: true, }, }, diff --git a/app/assets/javascripts/vue_shared/components/dropdown/dropdown_search_input.vue b/app/assets/javascripts/vue_shared/components/dropdown/dropdown_search_input.vue index 17afd2cbdae..c2145a26e64 100644 --- a/app/assets/javascripts/vue_shared/components/dropdown/dropdown_search_input.vue +++ b/app/assets/javascripts/vue_shared/components/dropdown/dropdown_search_input.vue @@ -30,14 +30,14 @@ export default { autocomplete="off" /> <i - aria-hidden="true" class="fa fa-search dropdown-input-search" + aria-hidden="true" data-hidden="true" > </i> <i - aria-hidden="true" class="fa fa-times dropdown-input-clear js-dropdown-input-clear" + aria-hidden="true" data-hidden="true" role="button" > |