70 lines
1.4 KiB
Vue
70 lines
1.4 KiB
Vue
<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>
|