diff options
Diffstat (limited to 'app/assets/javascripts/vue_shared')
3 files changed, 73 insertions, 2 deletions
diff --git a/app/assets/javascripts/vue_shared/components/callout.vue b/app/assets/javascripts/vue_shared/components/callout.vue index ddbb14ae812..56bafebf4ce 100644 --- a/app/assets/javascripts/vue_shared/components/callout.vue +++ b/app/assets/javascripts/vue_shared/components/callout.vue @@ -11,13 +11,14 @@ export default { }, message: { type: String, - required: true, + required: false, + default: '', }, }, }; </script> <template> <div :class="`bs-callout bs-callout-${category}`" role="alert" aria-live="assertive"> - {{ message }} + {{ message }} <slot></slot> </div> </template> diff --git a/app/assets/javascripts/vue_shared/components/gl_modal_vuex.vue b/app/assets/javascripts/vue_shared/components/gl_modal_vuex.vue new file mode 100644 index 00000000000..df6fadf10cd --- /dev/null +++ b/app/assets/javascripts/vue_shared/components/gl_modal_vuex.vue @@ -0,0 +1,69 @@ +<script> +import { mapState, mapActions } from 'vuex'; +import { GlModal } from '@gitlab/ui'; + +/** + * This component keeps the GlModal's visibility in sync with the given vuex module. + */ +export default { + components: { + GlModal, + }, + props: { + modalId: { + type: String, + required: true, + }, + modalModule: { + type: String, + required: true, + }, + }, + computed: { + ...mapState({ + isVisible(state) { + return state[this.modalModule].isVisible; + }, + }), + attrs() { + const { modalId, modalModule, ...attrs } = this.$attrs; + + return attrs; + }, + }, + watch: { + isVisible(val) { + return val ? this.bsShow() : this.bsHide(); + }, + }, + methods: { + ...mapActions({ + syncShow(dispatch) { + return dispatch(`${this.modalModule}/show`); + }, + syncHide(dispatch) { + return dispatch(`${this.modalModule}/hide`); + }, + }), + bsShow() { + this.$root.$emit('bv::show::modal', this.modalId); + }, + bsHide() { + // $root.$emit is a workaround because other b-modal approaches don't work yet with gl-modal + this.$root.$emit('bv::hide::modal', this.modalId); + }, + }, +}; +</script> + +<template> + <gl-modal + v-bind="attrs" + :modal-id="modalId" + v-on="$listeners" + @shown="syncShow" + @hidden="syncHide" + > + <slot></slot> + </gl-modal> +</template> diff --git a/app/assets/javascripts/vue_shared/components/user_avatar/user_avatar_image.vue b/app/assets/javascripts/vue_shared/components/user_avatar/user_avatar_image.vue index e833a8e0483..95f4395ac13 100644 --- a/app/assets/javascripts/vue_shared/components/user_avatar/user_avatar_image.vue +++ b/app/assets/javascripts/vue_shared/components/user_avatar/user_avatar_image.vue @@ -67,6 +67,7 @@ export default { // In both cases we should render the defaultAvatarUrl sanitizedSource() { let baseSrc = this.imgSrc === '' || this.imgSrc === null ? defaultAvatarUrl : this.imgSrc; + // Only adds the width to the URL if its not a base64 data image if (!baseSrc.startsWith('data:') && !baseSrc.includes('?')) baseSrc += `?width=${this.size}`; return baseSrc; }, |