[Vue] shallowRef() does not work at all when passing components as refs (#18624)

* shallowRef() does not work at all when passing components as refs

* Update FormField.adapter.ts

* built vue files

3 files changed, 33 insertions, 6 deletions

diff --git a/plugins/CorePluginsAdmin/vue/dist/CorePluginsAdmin.umd.js b/plugins/CorePluginsAdmin/vue/dist/CorePluginsAdmin.umd.js
index 8684ec601c..bf10568b2f 100644
--- a/plugins/CorePluginsAdmin/vue/dist/CorePluginsAdmin.umd.js
+++ b/plugins/CorePluginsAdmin/vue/dist/CorePluginsAdmin.umd.js
@@ -2088,6 +2088,21 @@ function conditionFn(scope, condition) {
       angularJsBind: '=',
       transform: function transform(v, vm, scope) {
         var value = v;
+
+        function getComponent() {
+          if (value.templateFile) {
+            return Object(external_commonjs_vue_commonjs2_vue_root_Vue_["markRaw"])(FieldAngularJsTemplate);
+          }
+
+          var comp = transformVueComponentRef(value.component);
+
+          if (!comp) {
+            return undefined;
+          }
+
+          return Object(external_commonjs_vue_commonjs2_vue_root_Vue_["markRaw"])(comp);
+        }
+
         return FormField_adapter_objectSpread(FormField_adapter_objectSpread({}, value), {}, {
           condition: value.condition ? conditionFn.bind(null, scope, value.condition) : value.condition,
           disabled: Object(external_CoreHome_["transformAngularJsBoolAttr"])(value.disabled),
@@ -2100,7 +2115,7 @@ function conditionFn(scope, condition) {
           rows: Object(external_CoreHome_["transformAngularJsIntAttr"])(value.rows),
           min: Object(external_CoreHome_["transformAngularJsIntAttr"])(value.min),
           max: Object(external_CoreHome_["transformAngularJsIntAttr"])(value.max),
-          component: value.templateFile ? Object(external_commonjs_vue_commonjs2_vue_root_Vue_["markRaw"])(FieldAngularJsTemplate) : Object(external_commonjs_vue_commonjs2_vue_root_Vue_["shallowRef"])(transformVueComponentRef(value.component))
+          component: getComponent()
         });
       }
     },
diff --git a/plugins/CorePluginsAdmin/vue/dist/CorePluginsAdmin.umd.min.js b/plugins/CorePluginsAdmin/vue/dist/CorePluginsAdmin.umd.min.js
index dfa07db24b..032dfe1a61 100644
--- a/plugins/CorePluginsAdmin/vue/dist/CorePluginsAdmin.umd.min.js
+++ b/plugins/CorePluginsAdmin/vue/dist/CorePluginsAdmin.umd.min.js
@@ -10,7 +10,7 @@
  *
  * @link https://matomo.org
  * @license http://www.gnu.org/licenses/gpl-3.0.html GPL v3 or later
- */function nn(e){if(e){var t=e.plugin,n=e.name;if(!t||!n)throw new Error("Invalid component property given to piwik-field directive, must be {plugin: '...',name: '...'}");return Object(i["useExternalPluginComponent"])(t,n)}}function rn(e,t){var n={};return Object.values(e.allSettings||{}).forEach((function(e){"0"===e.value?n[e.name]=0:n[e.name]=e.value})),e.$eval(t,n)}Object(i["createAngularJsAdapter"])({component:Kt,scope:{modelValue:{default:function(e){var t=e.piwikFormField;return"string"!==typeof t.value||!t.value||"array"!==t.type&&"multituple"!==t.uiControl&&"field-array"!==t.uiControl&&"multiselect"!==t.uiControl&&"site"!==t.uiControl||(t.value=JSON.parse(t.value)),"checkbox"===t.uiControl?Object(i["transformAngularJsBoolAttr"])(t.value):t.value}},piwikFormField:{vue:"formField",angularJsBind:"=",transform:function(e,t,n){var r=e;return en(en({},r),{},{condition:r.condition?rn.bind(null,n,r.condition):r.condition,disabled:Object(i["transformAngularJsBoolAttr"])(r.disabled),autocomplete:Object(i["transformAngularJsBoolAttr"])(r.autocomplete),autofocus:Object(i["transformAngularJsBoolAttr"])(r.autofocus),tabindex:Object(i["transformAngularJsIntAttr"])(r.tabindex),fullWidth:Object(i["transformAngularJsBoolAttr"])(r.fullWidth),maxlength:Object(i["transformAngularJsIntAttr"])(r.maxlength),required:Object(i["transformAngularJsBoolAttr"])(r.required),rows:Object(i["transformAngularJsIntAttr"])(r.rows),min:Object(i["transformAngularJsIntAttr"])(r.min),max:Object(i["transformAngularJsIntAttr"])(r.max),component:r.templateFile?Object(l["markRaw"])(Qt):Object(l["shallowRef"])(nn(r.component))})}},allSettings:{angularJsBind:"="}},directiveName:"piwikFormField",events:{"update:modelValue":function(e,t,n,r,o,i,l){e!==n.piwikFormField.value&&l((function(){n.piwikFormField.value=e}))}},$inject:["$timeout"],postCreate:function(e,t){t.$watch("piwikFormField.value",(function(t,n){t!==n&&(e.modelValue=t)})),t.$watch("allSettings",(function(){e.formField=en(en({},e.formField),{},{condition:t.piwikFormField.condition?rn.bind(null,t,t.piwikFormField.condition):t.piwikFormField.condition})}),!0)}});function on(e,t,n,r,o,i){var a=Object(l["resolveComponent"])("FormField");return Object(l["openBlock"])(),Object(l["createBlock"])(a,{"form-field":e.field,"model-value":e.modelValue,"onUpdate:modelValue":t[0]||(t[0]=function(t){return e.onChange(t)}),component:e.component},null,8,["form-field","model-value","component"])}function ln(e,t){var n=Object.keys(e);if(Object.getOwnPropertySymbols){var r=Object.getOwnPropertySymbols(e);t&&(r=r.filter((function(t){return Object.getOwnPropertyDescriptor(e,t).enumerable}))),n.push.apply(n,r)}return n}function an(e){for(var t=1;t<arguments.length;t++){var n=null!=arguments[t]?arguments[t]:{};t%2?ln(Object(n),!0).forEach((function(t){un(e,t,n[t])})):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(n)):ln(Object(n)).forEach((function(t){Object.defineProperty(e,t,Object.getOwnPropertyDescriptor(n,t))}))}return e}function un(e,t,n){return t in e?Object.defineProperty(e,t,{value:n,enumerable:!0,configurable:!0,writable:!0}):e[t]=n,e}var cn={multiselect:"array",checkbox:"boolean",site:"object",number:"integer"},sn=Object(l["defineComponent"])({props:{modelValue:null,uicontrol:String,name:String,defaultValue:null,options:[Object,Array],description:String,introduction:String,title:String,inlineHelp:String,disabled:Boolean,uiControlAttributes:{type:Object,default:function(){return{}}},uiControlOptions:{type:Object,default:function(){return{}}},autocomplete:Boolean,condition:Function,varType:String,autofocus:Boolean,tabindex:Number,fullWidth:Boolean,maxlength:Number,required:Boolean,placeholder:String,rows:Number,min:Number,max:Number,component:null},emits:["update:modelValue"],components:{FormField:Kt},computed:{type:function(){if(this.varType)return this.varType;var e=this.uicontrol;return e&&cn[e]?cn[e]:"string"},field:function(){return{uiControl:this.uicontrol,type:this.type,name:this.name,defaultValue:this.defaultValue,availableValues:this.options,description:this.description,introduction:this.introduction,inlineHelp:this.inlineHelp,title:this.title,uiControlAttributes:an(an({},this.uiControlAttributes),{},{disabled:this.disabled,autocomplete:this.autocomplete,tabindex:this.tabindex,autofocus:this.autofocus,rows:this.rows,required:this.required,maxlength:this.maxlength,placeholder:this.placeholder,min:this.min,max:this.max}),fullWidth:this.fullWidth,uiControlOptions:this.uiControlOptions}}},methods:{onChange:function(e){this.$emit("update:modelValue",e)}}});sn.render=on;var dn=sn;function mn(e,t){var n=Object.keys(e);if(Object.getOwnPropertySymbols){var r=Object.getOwnPropertySymbols(e);t&&(r=r.filter((function(t){return Object.getOwnPropertyDescriptor(e,t).enumerable}))),n.push.apply(n,r)}return n}function fn(e){for(var t=1;t<arguments.length;t++){var n=null!=arguments[t]?arguments[t]:{};t%2?mn(Object(n),!0).forEach((function(t){pn(e,t,n[t])})):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(n)):mn(Object(n)).forEach((function(t){Object.defineProperty(e,t,Object.getOwnPropertyDescriptor(n,t))}))}return e}function pn(e,t,n){return t in e?Object.defineProperty(e,t,{value:n,enumerable:!0,configurable:!0,writable:!0}):e[t]=n,e}
+ */function nn(e){if(e){var t=e.plugin,n=e.name;if(!t||!n)throw new Error("Invalid component property given to piwik-field directive, must be {plugin: '...',name: '...'}");return Object(i["useExternalPluginComponent"])(t,n)}}function rn(e,t){var n={};return Object.values(e.allSettings||{}).forEach((function(e){"0"===e.value?n[e.name]=0:n[e.name]=e.value})),e.$eval(t,n)}Object(i["createAngularJsAdapter"])({component:Kt,scope:{modelValue:{default:function(e){var t=e.piwikFormField;return"string"!==typeof t.value||!t.value||"array"!==t.type&&"multituple"!==t.uiControl&&"field-array"!==t.uiControl&&"multiselect"!==t.uiControl&&"site"!==t.uiControl||(t.value=JSON.parse(t.value)),"checkbox"===t.uiControl?Object(i["transformAngularJsBoolAttr"])(t.value):t.value}},piwikFormField:{vue:"formField",angularJsBind:"=",transform:function(e,t,n){var r=e;function o(){if(r.templateFile)return Object(l["markRaw"])(Qt);var e=nn(r.component);return e?Object(l["markRaw"])(e):void 0}return en(en({},r),{},{condition:r.condition?rn.bind(null,n,r.condition):r.condition,disabled:Object(i["transformAngularJsBoolAttr"])(r.disabled),autocomplete:Object(i["transformAngularJsBoolAttr"])(r.autocomplete),autofocus:Object(i["transformAngularJsBoolAttr"])(r.autofocus),tabindex:Object(i["transformAngularJsIntAttr"])(r.tabindex),fullWidth:Object(i["transformAngularJsBoolAttr"])(r.fullWidth),maxlength:Object(i["transformAngularJsIntAttr"])(r.maxlength),required:Object(i["transformAngularJsBoolAttr"])(r.required),rows:Object(i["transformAngularJsIntAttr"])(r.rows),min:Object(i["transformAngularJsIntAttr"])(r.min),max:Object(i["transformAngularJsIntAttr"])(r.max),component:o()})}},allSettings:{angularJsBind:"="}},directiveName:"piwikFormField",events:{"update:modelValue":function(e,t,n,r,o,i,l){e!==n.piwikFormField.value&&l((function(){n.piwikFormField.value=e}))}},$inject:["$timeout"],postCreate:function(e,t){t.$watch("piwikFormField.value",(function(t,n){t!==n&&(e.modelValue=t)})),t.$watch("allSettings",(function(){e.formField=en(en({},e.formField),{},{condition:t.piwikFormField.condition?rn.bind(null,t,t.piwikFormField.condition):t.piwikFormField.condition})}),!0)}});function on(e,t,n,r,o,i){var a=Object(l["resolveComponent"])("FormField");return Object(l["openBlock"])(),Object(l["createBlock"])(a,{"form-field":e.field,"model-value":e.modelValue,"onUpdate:modelValue":t[0]||(t[0]=function(t){return e.onChange(t)}),component:e.component},null,8,["form-field","model-value","component"])}function ln(e,t){var n=Object.keys(e);if(Object.getOwnPropertySymbols){var r=Object.getOwnPropertySymbols(e);t&&(r=r.filter((function(t){return Object.getOwnPropertyDescriptor(e,t).enumerable}))),n.push.apply(n,r)}return n}function an(e){for(var t=1;t<arguments.length;t++){var n=null!=arguments[t]?arguments[t]:{};t%2?ln(Object(n),!0).forEach((function(t){un(e,t,n[t])})):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(n)):ln(Object(n)).forEach((function(t){Object.defineProperty(e,t,Object.getOwnPropertyDescriptor(n,t))}))}return e}function un(e,t,n){return t in e?Object.defineProperty(e,t,{value:n,enumerable:!0,configurable:!0,writable:!0}):e[t]=n,e}var cn={multiselect:"array",checkbox:"boolean",site:"object",number:"integer"},sn=Object(l["defineComponent"])({props:{modelValue:null,uicontrol:String,name:String,defaultValue:null,options:[Object,Array],description:String,introduction:String,title:String,inlineHelp:String,disabled:Boolean,uiControlAttributes:{type:Object,default:function(){return{}}},uiControlOptions:{type:Object,default:function(){return{}}},autocomplete:Boolean,condition:Function,varType:String,autofocus:Boolean,tabindex:Number,fullWidth:Boolean,maxlength:Number,required:Boolean,placeholder:String,rows:Number,min:Number,max:Number,component:null},emits:["update:modelValue"],components:{FormField:Kt},computed:{type:function(){if(this.varType)return this.varType;var e=this.uicontrol;return e&&cn[e]?cn[e]:"string"},field:function(){return{uiControl:this.uicontrol,type:this.type,name:this.name,defaultValue:this.defaultValue,availableValues:this.options,description:this.description,introduction:this.introduction,inlineHelp:this.inlineHelp,title:this.title,uiControlAttributes:an(an({},this.uiControlAttributes),{},{disabled:this.disabled,autocomplete:this.autocomplete,tabindex:this.tabindex,autofocus:this.autofocus,rows:this.rows,required:this.required,maxlength:this.maxlength,placeholder:this.placeholder,min:this.min,max:this.max}),fullWidth:this.fullWidth,uiControlOptions:this.uiControlOptions}}},methods:{onChange:function(e){this.$emit("update:modelValue",e)}}});sn.render=on;var dn=sn;function mn(e,t){var n=Object.keys(e);if(Object.getOwnPropertySymbols){var r=Object.getOwnPropertySymbols(e);t&&(r=r.filter((function(t){return Object.getOwnPropertyDescriptor(e,t).enumerable}))),n.push.apply(n,r)}return n}function fn(e){for(var t=1;t<arguments.length;t++){var n=null!=arguments[t]?arguments[t]:{};t%2?mn(Object(n),!0).forEach((function(t){pn(e,t,n[t])})):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(n)):mn(Object(n)).forEach((function(t){Object.defineProperty(e,t,Object.getOwnPropertyDescriptor(n,t))}))}return e}function pn(e,t,n){return t in e?Object.defineProperty(e,t,{value:n,enumerable:!0,configurable:!0,writable:!0}):e[t]=n,e}
 /*!
  * Matomo - free/libre analytics platform
  *
diff --git a/plugins/CorePluginsAdmin/vue/src/FormField/FormField.adapter.ts b/plugins/CorePluginsAdmin/vue/src/FormField/FormField.adapter.ts
index 1e9cbddf64..fad8f05cf9 100644
--- a/plugins/CorePluginsAdmin/vue/src/FormField/FormField.adapter.ts
+++ b/plugins/CorePluginsAdmin/vue/src/FormField/FormField.adapter.ts
@@ -12,7 +12,7 @@ import {
   transformAngularJsIntAttr,
   useExternalPluginComponent,
 } from 'CoreHome';
-import { shallowRef, markRaw } from 'vue';
+import { markRaw } from 'vue';
 import FormField from './FormField.vue';
 import FieldAngularJsTemplate from './FieldAngularJsTemplate.vue';
 
@@ -81,6 +81,20 @@ export default createAngularJsAdapter<[ITimeoutService]>({
       angularJsBind: '=',
       transform(v: unknown, vm: unknown, scope: IScope) {
         const value = v as Record<string, unknown>;
+
+        function getComponent() {
+          if (value.templateFile) {
+            return markRaw(FieldAngularJsTemplate);
+          }
+
+          const comp = transformVueComponentRef(value.component as Record<string, string>);
+          if (!comp) {
+            return undefined;
+          }
+
+          return markRaw(comp);
+        }
+
         return {
           ...value,
           condition: value.condition
@@ -96,9 +110,7 @@ export default createAngularJsAdapter<[ITimeoutService]>({
           rows: transformAngularJsIntAttr(value.rows),
           min: transformAngularJsIntAttr(value.min),
           max: transformAngularJsIntAttr(value.max),
-          component: value.templateFile
-            ? markRaw(FieldAngularJsTemplate)
-            : shallowRef(transformVueComponentRef(value.component as Record<string, string>)),
+          component: getComponent(),
         };
       },
     },