plugins/Transitions/vue/src/TransitionExporter/TransitionExporter.ts


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47

/*!
 * Matomo - free/libre analytics platform
 *
 * @link https://matomo.org
 * @license http://www.gnu.org/licenses/gpl-3.0.html GPL v3 or later
 */

import { createVueApp, translate } from 'CoreHome';
import TransitionExporterPopover from './TransitionExporterPopover';
import { actionName } from './transitionParams';

const { Piwik_Popover } = window;

export default {
  mounted(element: HTMLElement): void {
    element.addEventListener('click', () => {
      const props = {
        exportFormat: 'JSON',
        exportFormatOptions: [
          { key: 'JSON', value: 'JSON' },
          { key: 'XML', value: 'XML' },
        ],
      };

      const app = createVueApp({
        template: `
          <popover v-bind="bind"/>`,
        data() {
          return {
            bind: props,
          };
        },
      });
      app.component('popover', TransitionExporterPopover);

      const mountPoint = document.createElement('div');
      app.mount(mountPoint);

      Piwik_Popover.setTitle(`${actionName.value} ${translate('Transitions_Transitions')}`);
      Piwik_Popover.setContent(mountPoint);

      Piwik_Popover.onClose(() => {
        app.unmount();
      });
    });
  },
};