migrate transition exporter to Vue

9 files changed, 622 insertions, 0 deletions

diff --git a/plugins/Transitions/vue/dist/Transitions.umd.js b/plugins/Transitions/vue/dist/Transitions.umd.js
new file mode 100644
index 0000000000..1b3462fd48
--- /dev/null
+++ b/plugins/Transitions/vue/dist/Transitions.umd.js
@@ -0,0 +1,346 @@
+(function webpackUniversalModuleDefinition(root, factory) {
+	if(typeof exports === 'object' && typeof module === 'object')
+		module.exports = factory(require("CoreHome"), require("vue"), require("CorePluginsAdmin"));
+	else if(typeof define === 'function' && define.amd)
+		define(["CoreHome", , "CorePluginsAdmin"], factory);
+	else if(typeof exports === 'object')
+		exports["Transitions"] = factory(require("CoreHome"), require("vue"), require("CorePluginsAdmin"));
+	else
+		root["Transitions"] = factory(root["CoreHome"], root["Vue"], root["CorePluginsAdmin"]);
+})((typeof self !== 'undefined' ? self : this), function(__WEBPACK_EXTERNAL_MODULE__19dc__, __WEBPACK_EXTERNAL_MODULE__8bbf__, __WEBPACK_EXTERNAL_MODULE_a5a2__) {
+return /******/ (function(modules) { // webpackBootstrap
+/******/ 	// The module cache
+/******/ 	var installedModules = {};
+/******/
+/******/ 	// The require function
+/******/ 	function __webpack_require__(moduleId) {
+/******/
+/******/ 		// Check if module is in cache
+/******/ 		if(installedModules[moduleId]) {
+/******/ 			return installedModules[moduleId].exports;
+/******/ 		}
+/******/ 		// Create a new module (and put it into the cache)
+/******/ 		var module = installedModules[moduleId] = {
+/******/ 			i: moduleId,
+/******/ 			l: false,
+/******/ 			exports: {}
+/******/ 		};
+/******/
+/******/ 		// Execute the module function
+/******/ 		modules[moduleId].call(module.exports, module, module.exports, __webpack_require__);
+/******/
+/******/ 		// Flag the module as loaded
+/******/ 		module.l = true;
+/******/
+/******/ 		// Return the exports of the module
+/******/ 		return module.exports;
+/******/ 	}
+/******/
+/******/
+/******/ 	// expose the modules object (__webpack_modules__)
+/******/ 	__webpack_require__.m = modules;
+/******/
+/******/ 	// expose the module cache
+/******/ 	__webpack_require__.c = installedModules;
+/******/
+/******/ 	// define getter function for harmony exports
+/******/ 	__webpack_require__.d = function(exports, name, getter) {
+/******/ 		if(!__webpack_require__.o(exports, name)) {
+/******/ 			Object.defineProperty(exports, name, { enumerable: true, get: getter });
+/******/ 		}
+/******/ 	};
+/******/
+/******/ 	// define __esModule on exports
+/******/ 	__webpack_require__.r = function(exports) {
+/******/ 		if(typeof Symbol !== 'undefined' && Symbol.toStringTag) {
+/******/ 			Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
+/******/ 		}
+/******/ 		Object.defineProperty(exports, '__esModule', { value: true });
+/******/ 	};
+/******/
+/******/ 	// create a fake namespace object
+/******/ 	// mode & 1: value is a module id, require it
+/******/ 	// mode & 2: merge all properties of value into the ns
+/******/ 	// mode & 4: return value when already ns object
+/******/ 	// mode & 8|1: behave like require
+/******/ 	__webpack_require__.t = function(value, mode) {
+/******/ 		if(mode & 1) value = __webpack_require__(value);
+/******/ 		if(mode & 8) return value;
+/******/ 		if((mode & 4) && typeof value === 'object' && value && value.__esModule) return value;
+/******/ 		var ns = Object.create(null);
+/******/ 		__webpack_require__.r(ns);
+/******/ 		Object.defineProperty(ns, 'default', { enumerable: true, value: value });
+/******/ 		if(mode & 2 && typeof value != 'string') for(var key in value) __webpack_require__.d(ns, key, function(key) { return value[key]; }.bind(null, key));
+/******/ 		return ns;
+/******/ 	};
+/******/
+/******/ 	// getDefaultExport function for compatibility with non-harmony modules
+/******/ 	__webpack_require__.n = function(module) {
+/******/ 		var getter = module && module.__esModule ?
+/******/ 			function getDefault() { return module['default']; } :
+/******/ 			function getModuleExports() { return module; };
+/******/ 		__webpack_require__.d(getter, 'a', getter);
+/******/ 		return getter;
+/******/ 	};
+/******/
+/******/ 	// Object.prototype.hasOwnProperty.call
+/******/ 	__webpack_require__.o = function(object, property) { return Object.prototype.hasOwnProperty.call(object, property); };
+/******/
+/******/ 	// __webpack_public_path__
+/******/ 	__webpack_require__.p = "plugins/Transitions/vue/dist/";
+/******/
+/******/
+/******/ 	// Load entry module and return exports
+/******/ 	return __webpack_require__(__webpack_require__.s = "fae3");
+/******/ })
+/************************************************************************/
+/******/ ({
+
+/***/ "19dc":
+/***/ (function(module, exports) {
+
+module.exports = __WEBPACK_EXTERNAL_MODULE__19dc__;
+
+/***/ }),
+
+/***/ "8bbf":
+/***/ (function(module, exports) {
+
+module.exports = __WEBPACK_EXTERNAL_MODULE__8bbf__;
+
+/***/ }),
+
+/***/ "a5a2":
+/***/ (function(module, exports) {
+
+module.exports = __WEBPACK_EXTERNAL_MODULE_a5a2__;
+
+/***/ }),
+
+/***/ "fae3":
+/***/ (function(module, __webpack_exports__, __webpack_require__) {
+
+"use strict";
+// ESM COMPAT FLAG
+__webpack_require__.r(__webpack_exports__);
+
+// EXPORTS
+__webpack_require__.d(__webpack_exports__, "TransitionExporter", function() { return /* reexport */ TransitionExporter; });
+
+// CONCATENATED MODULE: ./node_modules/@vue/cli-service/lib/commands/build/setPublicPath.js
+// This file is imported into lib/wc client bundles.
+
+if (typeof window !== 'undefined') {
+  var currentScript = window.document.currentScript
+  if (false) { var getCurrentScript; }
+
+  var src = currentScript && currentScript.src.match(/(.+\/)[^/]+\.js(\?.*)?$/)
+  if (src) {
+    __webpack_require__.p = src[1] // eslint-disable-line
+  }
+}
+
+// Indicate to webpack that this file can be concatenated
+/* harmony default export */ var setPublicPath = (null);
+
+// EXTERNAL MODULE: external "CoreHome"
+var external_CoreHome_ = __webpack_require__("19dc");
+
+// EXTERNAL MODULE: external {"commonjs":"vue","commonjs2":"vue","root":"Vue"}
+var external_commonjs_vue_commonjs2_vue_root_Vue_ = __webpack_require__("8bbf");
+
+// CONCATENATED MODULE: ./node_modules/@vue/cli-plugin-babel/node_modules/cache-loader/dist/cjs.js??ref--12-0!./node_modules/@vue/cli-plugin-babel/node_modules/thread-loader/dist/cjs.js!./node_modules/babel-loader/lib!./node_modules/@vue/cli-service/node_modules/vue-loader-v16/dist/templateLoader.js??ref--6!./node_modules/@vue/cli-service/node_modules/cache-loader/dist/cjs.js??ref--0-0!./node_modules/@vue/cli-service/node_modules/vue-loader-v16/dist??ref--0-1!./plugins/Transitions/vue/src/TransitionExporter/TransitionExporterPopover.vue?vue&type=template&id=35161b10
+
+var _hoisted_1 = {
+  class: "transition-export-popover row"
+};
+var _hoisted_2 = {
+  class: "col l6"
+};
+var _hoisted_3 = {
+  class: "input-field"
+};
+var _hoisted_4 = {
+  class: "matomo-field"
+};
+var _hoisted_5 = {
+  class: "col l12"
+};
+var _hoisted_6 = ["href"];
+function render(_ctx, _cache, $props, $setup, $data, $options) {
+  var _component_Field = Object(external_commonjs_vue_commonjs2_vue_root_Vue_["resolveComponent"])("Field");
+
+  return Object(external_commonjs_vue_commonjs2_vue_root_Vue_["openBlock"])(), Object(external_commonjs_vue_commonjs2_vue_root_Vue_["createElementBlock"])("div", _hoisted_1, [Object(external_commonjs_vue_commonjs2_vue_root_Vue_["createElementVNode"])("div", _hoisted_2, [Object(external_commonjs_vue_commonjs2_vue_root_Vue_["createElementVNode"])("div", _hoisted_3, [Object(external_commonjs_vue_commonjs2_vue_root_Vue_["createElementVNode"])("div", _hoisted_4, [Object(external_commonjs_vue_commonjs2_vue_root_Vue_["createVNode"])(_component_Field, {
+    uicontrol: "radio",
+    name: "exportFormat",
+    title: _ctx.translate('CoreHome_ExportFormat'),
+    "model-value": _ctx.exportFormat,
+    "onUpdate:modelValue": _cache[0] || (_cache[0] = function ($event) {
+      return _ctx.exportFormat = $event;
+    }),
+    "full-width": true,
+    options: _ctx.exportFormatOptions
+  }, null, 8, ["title", "model-value", "options"])])])]), Object(external_commonjs_vue_commonjs2_vue_root_Vue_["createElementVNode"])("div", _hoisted_5, [Object(external_commonjs_vue_commonjs2_vue_root_Vue_["createElementVNode"])("a", {
+    class: "btn",
+    href: _ctx.exportLink,
+    target: "_new",
+    title: "translate('CoreHome_ExportTooltip')"
+  }, Object(external_commonjs_vue_commonjs2_vue_root_Vue_["toDisplayString"])(_ctx.translate('General_Export')), 9, _hoisted_6)])]);
+}
+// CONCATENATED MODULE: ./plugins/Transitions/vue/src/TransitionExporter/TransitionExporterPopover.vue?vue&type=template&id=35161b10
+
+// EXTERNAL MODULE: external "CorePluginsAdmin"
+var external_CorePluginsAdmin_ = __webpack_require__("a5a2");
+
+// CONCATENATED MODULE: ./plugins/Transitions/vue/src/TransitionExporter/transitionParams.ts
+/*!
+ * Matomo - free/libre analytics platform
+ *
+ * @link https://matomo.org
+ * @license http://www.gnu.org/licenses/gpl-3.0.html GPL v3 or later
+ */
+
+
+var actionType = Object(external_commonjs_vue_commonjs2_vue_root_Vue_["ref"])('');
+var actionName = Object(external_commonjs_vue_commonjs2_vue_root_Vue_["ref"])('');
+
+var onDataChanged = function onDataChanged(params) {
+  actionType.value = params.actionType;
+  actionName.value = params.actionName;
+};
+
+external_CoreHome_["Matomo"].on('Transitions.dataChanged', onDataChanged);
+
+// CONCATENATED MODULE: ./node_modules/@vue/cli-plugin-typescript/node_modules/cache-loader/dist/cjs.js??ref--14-0!./node_modules/babel-loader/lib!./node_modules/@vue/cli-plugin-typescript/node_modules/ts-loader??ref--14-2!./node_modules/@vue/cli-service/node_modules/cache-loader/dist/cjs.js??ref--0-0!./node_modules/@vue/cli-service/node_modules/vue-loader-v16/dist??ref--0-1!./plugins/Transitions/vue/src/TransitionExporter/TransitionExporterPopover.vue?vue&type=script&lang=ts
+
+
+
+
+/* harmony default export */ var TransitionExporterPopovervue_type_script_lang_ts = (Object(external_commonjs_vue_commonjs2_vue_root_Vue_["defineComponent"])({
+  props: {
+    exportFormatOptions: {
+      type: Object,
+      required: true
+    }
+  },
+  components: {
+    Field: external_CorePluginsAdmin_["Field"]
+  },
+  data: function data() {
+    return {
+      exportFormat: 'JSON'
+    };
+  },
+  computed: {
+    exportLink: function exportLink() {
+      var exportUrlParams = {
+        module: 'API'
+      };
+      exportUrlParams.method = 'Transitions.getTransitionsForAction';
+      exportUrlParams.actionType = actionType.value;
+      exportUrlParams.actionName = actionName.value;
+      exportUrlParams.idSite = external_CoreHome_["Matomo"].idSite;
+      exportUrlParams.period = external_CoreHome_["Matomo"].period;
+      exportUrlParams.date = external_CoreHome_["Matomo"].currentDateString;
+      exportUrlParams.format = this.exportFormat;
+      exportUrlParams.token_auth = external_CoreHome_["Matomo"].token_auth;
+      exportUrlParams.force_api_session = 1;
+      var currentUrl = window.location.href;
+      var urlParts = currentUrl.split('/');
+      urlParts.pop();
+      var url = urlParts.join('/');
+      return "".concat(url, "/index.php?").concat(external_CoreHome_["MatomoUrl"].stringify(exportUrlParams));
+    }
+  }
+}));
+// CONCATENATED MODULE: ./plugins/Transitions/vue/src/TransitionExporter/TransitionExporterPopover.vue?vue&type=script&lang=ts
+ 
+// CONCATENATED MODULE: ./plugins/Transitions/vue/src/TransitionExporter/TransitionExporterPopover.vue
+
+
+
+TransitionExporterPopovervue_type_script_lang_ts.render = render
+
+/* harmony default export */ var TransitionExporterPopover = (TransitionExporterPopovervue_type_script_lang_ts);
+// CONCATENATED MODULE: ./plugins/Transitions/vue/src/TransitionExporter/TransitionExporter.ts
+/*!
+ * Matomo - free/libre analytics platform
+ *
+ * @link https://matomo.org
+ * @license http://www.gnu.org/licenses/gpl-3.0.html GPL v3 or later
+ */
+
+
+
+var _window = window,
+    Piwik_Popover = _window.Piwik_Popover;
+/* harmony default export */ var TransitionExporter = ({
+  mounted: function mounted(element) {
+    element.addEventListener('click', function () {
+      var props = {
+        exportFormat: 'JSON',
+        exportFormatOptions: [{
+          key: 'JSON',
+          value: 'JSON'
+        }, {
+          key: 'XML',
+          value: 'XML'
+        }]
+      };
+      var app = Object(external_CoreHome_["createVueApp"])({
+        template: "\n          <popover v-bind=\"bind\"/>",
+        data: function data() {
+          return {
+            bind: props
+          };
+        }
+      });
+      app.component('popover', TransitionExporterPopover);
+      var mountPoint = document.createElement('div');
+      app.mount(mountPoint);
+      Piwik_Popover.setTitle("".concat(actionName.value, " ").concat(Object(external_CoreHome_["translate"])('Transitions_Transitions')));
+      Piwik_Popover.setContent(mountPoint);
+      Piwik_Popover.onClose(function () {
+        app.unmount();
+      });
+    });
+  }
+});
+// CONCATENATED MODULE: ./plugins/Transitions/vue/src/TransitionExporter/TransitionExporter.adapter.ts
+/*!
+ * Matomo - free/libre analytics platform
+ *
+ * @link https://matomo.org
+ * @license http://www.gnu.org/licenses/gpl-3.0.html GPL v3 or later
+ */
+
+
+function transitionExporter() {
+  return {
+    restrict: 'A',
+    link: function link(scope, element) {
+      TransitionExporter.mounted(element[0]);
+    }
+  };
+}
+
+window.angular.module('piwikApp').directive('transitionExporter', transitionExporter);
+// CONCATENATED MODULE: ./plugins/Transitions/vue/src/index.ts
+/*!
+ * Matomo - free/libre analytics platform
+ *
+ * @link https://matomo.org
+ * @license http://www.gnu.org/licenses/gpl-3.0.html GPL v3 or later
+ */
+
+
+// CONCATENATED MODULE: ./node_modules/@vue/cli-service/lib/commands/build/entry-lib-no-default.js
+
+
+
+
+/***/ })
+
+/******/ });
+});
+//# sourceMappingURL=Transitions.umd.js.map
\ No newline at end of file
diff --git a/plugins/Transitions/vue/dist/Transitions.umd.min.js b/plugins/Transitions/vue/dist/Transitions.umd.min.js
new file mode 100644
index 0000000000..266e5087c4
--- /dev/null
+++ b/plugins/Transitions/vue/dist/Transitions.umd.min.js
@@ -0,0 +1,21 @@
+(function(e,t){"object"===typeof exports&&"object"===typeof module?module.exports=t(require("CoreHome"),require("vue"),require("CorePluginsAdmin")):"function"===typeof define&&define.amd?define(["CoreHome",,"CorePluginsAdmin"],t):"object"===typeof exports?exports["Transitions"]=t(require("CoreHome"),require("vue"),require("CorePluginsAdmin")):e["Transitions"]=t(e["CoreHome"],e["Vue"],e["CorePluginsAdmin"])})("undefined"!==typeof self?self:this,(function(e,t,o){return function(e){var t={};function o(n){if(t[n])return t[n].exports;var r=t[n]={i:n,l:!1,exports:{}};return e[n].call(r.exports,r,r.exports,o),r.l=!0,r.exports}return o.m=e,o.c=t,o.d=function(e,t,n){o.o(e,t)||Object.defineProperty(e,t,{enumerable:!0,get:n})},o.r=function(e){"undefined"!==typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})},o.t=function(e,t){if(1&t&&(e=o(e)),8&t)return e;if(4&t&&"object"===typeof e&&e&&e.__esModule)return e;var n=Object.create(null);if(o.r(n),Object.defineProperty(n,"default",{enumerable:!0,value:e}),2&t&&"string"!=typeof e)for(var r in e)o.d(n,r,function(t){return e[t]}.bind(null,r));return n},o.n=function(e){var t=e&&e.__esModule?function(){return e["default"]}:function(){return e};return o.d(t,"a",t),t},o.o=function(e,t){return Object.prototype.hasOwnProperty.call(e,t)},o.p="plugins/Transitions/vue/dist/",o(o.s="fae3")}({"19dc":function(t,o){t.exports=e},"8bbf":function(e,o){e.exports=t},a5a2:function(e,t){e.exports=o},fae3:function(e,t,o){"use strict";if(o.r(t),o.d(t,"TransitionExporter",(function(){return w})),"undefined"!==typeof window){var n=window.document.currentScript,r=n&&n.src.match(/(.+\/)[^/]+\.js(\?.*)?$/);r&&(o.p=r[1])}var i=o("19dc"),a=o("8bbf"),u={class:"transition-export-popover row"},c={class:"col l6"},l={class:"input-field"},p={class:"matomo-field"},d={class:"col l12"},s=["href"];function f(e,t,o,n,r,i){var f=Object(a["resolveComponent"])("Field");return Object(a["openBlock"])(),Object(a["createElementBlock"])("div",u,[Object(a["createElementVNode"])("div",c,[Object(a["createElementVNode"])("div",l,[Object(a["createElementVNode"])("div",p,[Object(a["createVNode"])(f,{uicontrol:"radio",name:"exportFormat",title:e.translate("CoreHome_ExportFormat"),"model-value":e.exportFormat,"onUpdate:modelValue":t[0]||(t[0]=function(t){return e.exportFormat=t}),"full-width":!0,options:e.exportFormatOptions},null,8,["title","model-value","options"])])])]),Object(a["createElementVNode"])("div",d,[Object(a["createElementVNode"])("a",{class:"btn",href:e.exportLink,target:"_new",title:"translate('CoreHome_ExportTooltip')"},Object(a["toDisplayString"])(e.translate("General_Export")),9,s)])])}var m=o("a5a2"),v=Object(a["ref"])(""),b=Object(a["ref"])(""),x=function(e){v.value=e.actionType,b.value=e.actionName};
+/*!
+ * Matomo - free/libre analytics platform
+ *
+ * @link https://matomo.org
+ * @license http://www.gnu.org/licenses/gpl-3.0.html GPL v3 or later
+ */i["Matomo"].on("Transitions.dataChanged",x);var O=Object(a["defineComponent"])({props:{exportFormatOptions:{type:Object,required:!0}},components:{Field:m["Field"]},data:function(){return{exportFormat:"JSON"}},computed:{exportLink:function(){var e={module:"API",method:"Transitions.getTransitionsForAction"};e.actionType=v.value,e.actionName=b.value,e.idSite=i["Matomo"].idSite,e.period=i["Matomo"].period,e.date=i["Matomo"].currentDateString,e.format=this.exportFormat,e.token_auth=i["Matomo"].token_auth,e.force_api_session=1;var t=window.location.href,o=t.split("/");o.pop();var n=o.join("/");return"".concat(n,"/index.php?").concat(i["MatomoUrl"].stringify(e))}}});O.render=f;var j=O,y=window,g=y.Piwik_Popover,w={mounted:function(e){e.addEventListener("click",(function(){var e={exportFormat:"JSON",exportFormatOptions:[{key:"JSON",value:"JSON"},{key:"XML",value:"XML"}]},t=Object(i["createVueApp"])({template:'\n          <popover v-bind="bind"/>',data:function(){return{bind:e}}});t.component("popover",j);var o=document.createElement("div");t.mount(o),g.setTitle("".concat(b.value," ").concat(Object(i["translate"])("Transitions_Transitions"))),g.setContent(o),g.onClose((function(){t.unmount()}))}))}};
+/*!
+ * Matomo - free/libre analytics platform
+ *
+ * @link https://matomo.org
+ * @license http://www.gnu.org/licenses/gpl-3.0.html GPL v3 or later
+ */
+/*!
+ * Matomo - free/libre analytics platform
+ *
+ * @link https://matomo.org
+ * @license http://www.gnu.org/licenses/gpl-3.0.html GPL v3 or later
+ */
+function _(){return{restrict:"A",link:function(e,t){w.mounted(t[0])}}}window.angular.module("piwikApp").directive("transitionExporter",_)}})}));
+//# sourceMappingURL=Transitions.umd.min.js.map
\ No newline at end of file
diff --git a/plugins/Transitions/vue/dist/umd.metadata.json b/plugins/Transitions/vue/dist/umd.metadata.json
new file mode 100644
index 0000000000..dce4477a3c
--- /dev/null
+++ b/plugins/Transitions/vue/dist/umd.metadata.json
@@ -0,0 +1,6 @@
+{
+  "dependsOn": [
+    "CoreHome",
+    "CorePluginsAdmin"
+  ]
+}
\ No newline at end of file
diff --git a/plugins/Transitions/vue/src/TransitionExporter/TransitionExporter.adapter.ts b/plugins/Transitions/vue/src/TransitionExporter/TransitionExporter.adapter.ts
new file mode 100644
index 0000000000..82f1a78ca5
--- /dev/null
+++ b/plugins/Transitions/vue/src/TransitionExporter/TransitionExporter.adapter.ts
@@ -0,0 +1,20 @@
+/*!
+ * Matomo - free/libre analytics platform
+ *
+ * @link https://matomo.org
+ * @license http://www.gnu.org/licenses/gpl-3.0.html GPL v3 or later
+ */
+
+import { IDirective } from 'angular';
+import TransitionExporter from './TransitionExporter';
+
+function transitionExporter(): IDirective {
+  return {
+    restrict: 'A',
+    link(scope, element) {
+      TransitionExporter.mounted(element[0]);
+    },
+  };
+}
+
+window.angular.module('piwikApp').directive('transitionExporter', transitionExporter);
diff --git a/plugins/Transitions/vue/src/TransitionExporter/TransitionExporter.ts b/plugins/Transitions/vue/src/TransitionExporter/TransitionExporter.ts
new file mode 100644
index 0000000000..48795de64f
--- /dev/null
+++ b/plugins/Transitions/vue/src/TransitionExporter/TransitionExporter.ts
@@ -0,0 +1,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();
+      });
+    });
+  },
+};
diff --git a/plugins/Transitions/vue/src/TransitionExporter/TransitionExporterPopover.less b/plugins/Transitions/vue/src/TransitionExporter/TransitionExporterPopover.less
new file mode 100644
index 0000000000..c793232928
--- /dev/null
+++ b/plugins/Transitions/vue/src/TransitionExporter/TransitionExporterPopover.less
@@ -0,0 +1,52 @@
+.transitions-export-popover {
+
+  [name=format] {
+    .form-group label.fieldRadioTitle {
+      display: block;
+    }
+
+    p.radio {
+      width: 50%;
+      float: left;
+      display: block;
+    }
+  }
+
+  textarea {
+    word-break: break-all;
+    padding: 5px;
+    height: 80px;
+  }
+
+  .toggle-export-url {
+    font-size: 14px;
+    margin-left: 20px;
+  }
+
+  .filter_limit {
+    clear: both;
+    float: none;
+
+    .matomo-field {
+      width: 50%;
+      float: left;
+    }
+  }
+
+  .showoptions > span {
+    color: @color-blue-piwik;
+    cursor: pointer;
+    text-decoration: underline;
+  }
+
+  .tooltip {
+    color: @color-silver;
+    font-size: 13px;
+    padding: 5px;
+  }
+
+  .tooltip > a {
+    color: @color-blue-piwik;
+    text-decoration: underline;
+  }
+}
\ No newline at end of file
diff --git a/plugins/Transitions/vue/src/TransitionExporter/TransitionExporterPopover.vue b/plugins/Transitions/vue/src/TransitionExporter/TransitionExporterPopover.vue
new file mode 100644
index 0000000000..b900645d31
--- /dev/null
+++ b/plugins/Transitions/vue/src/TransitionExporter/TransitionExporterPopover.vue
@@ -0,0 +1,91 @@
+<!--
+  Matomo - free/libre analytics platform
+
+  @link https://matomo.org
+  @license http://www.gnu.org/licenses/gpl-3.0.html GPL v3 or later
+-->
+
+<template>
+  <div class="transition-export-popover row">
+    <div class="col l6">
+      <div class="input-field">
+        <div class="matomo-field">
+          <Field
+            uicontrol="radio"
+            name="exportFormat"
+            :title="translate('CoreHome_ExportFormat')"
+            :model-value="exportFormat"
+            @update:model-value="exportFormat = $event"
+            :full-width="true"
+            :options="exportFormatOptions"
+          />
+        </div>
+      </div>
+    </div>
+
+    <div class="col l12">
+      <a
+        class="btn"
+        :href="exportLink"
+        target="_new"
+        title="translate('CoreHome_ExportTooltip')"
+      >
+        {{ translate('General_Export') }}
+      </a>
+    </div>
+  </div>
+</template>
+
+<script lang="ts">
+import { defineComponent } from 'vue';
+import { Matomo, MatomoUrl } from 'CoreHome';
+import { Field } from 'CorePluginsAdmin';
+import { actionType, actionName } from './transitionParams';
+
+interface TransitionExportPopoverState {
+  exportFormat: string;
+}
+
+export default defineComponent({
+  props: {
+    exportFormatOptions: {
+      type: Object,
+      required: true,
+    },
+  },
+  components: {
+    Field,
+  },
+  data(): TransitionExportPopoverState {
+    return {
+      exportFormat: 'JSON',
+    };
+  },
+  computed: {
+    exportLink() {
+      const exportUrlParams: QueryParameters = {
+        module: 'API',
+      };
+
+      exportUrlParams.method = 'Transitions.getTransitionsForAction';
+      exportUrlParams.actionType = actionType.value;
+      exportUrlParams.actionName = actionName.value;
+
+      exportUrlParams.idSite = Matomo.idSite;
+      exportUrlParams.period = Matomo.period;
+      exportUrlParams.date = Matomo.currentDateString;
+      exportUrlParams.format = this.exportFormat;
+      exportUrlParams.token_auth = Matomo.token_auth;
+      exportUrlParams.force_api_session = 1;
+
+      const currentUrl = window.location.href;
+
+      const urlParts = currentUrl.split('/');
+      urlParts.pop();
+
+      const url = urlParts.join('/');
+      return `${url}/index.php?${MatomoUrl.stringify(exportUrlParams)}`;
+    },
+  },
+});
+</script>
diff --git a/plugins/Transitions/vue/src/TransitionExporter/transitionParams.ts b/plugins/Transitions/vue/src/TransitionExporter/transitionParams.ts
new file mode 100644
index 0000000000..f49b698cf9
--- /dev/null
+++ b/plugins/Transitions/vue/src/TransitionExporter/transitionParams.ts
@@ -0,0 +1,29 @@
+/*!
+ * Matomo - free/libre analytics platform
+ *
+ * @link https://matomo.org
+ * @license http://www.gnu.org/licenses/gpl-3.0.html GPL v3 or later
+ */
+
+import { ref } from 'vue';
+import { Matomo } from 'CoreHome';
+
+interface DataChangedParams {
+  actionType: string;
+  actionName: string;
+}
+
+const actionType = ref('');
+const actionName = ref('');
+
+const onDataChanged = (params: DataChangedParams) => {
+  actionType.value = params.actionType;
+  actionName.value = params.actionName;
+};
+
+Matomo.on('Transitions.dataChanged', onDataChanged);
+
+export {
+  actionType,
+  actionName,
+};
diff --git a/plugins/Transitions/vue/src/index.ts b/plugins/Transitions/vue/src/index.ts
new file mode 100644
index 0000000000..f023ec17c0
--- /dev/null
+++ b/plugins/Transitions/vue/src/index.ts
@@ -0,0 +1,10 @@
+/*!
+ * Matomo - free/libre analytics platform
+ *
+ * @link https://matomo.org
+ * @license http://www.gnu.org/licenses/gpl-3.0.html GPL v3 or later
+ */
+
+import './TransitionExporter/TransitionExporter.adapter.ts';
+
+export { default as TransitionExporter } from './TransitionExporter/TransitionExporter';