Use Vue 3 slot syntax

Author: alies-dev

dist/js/field.js

@@ -1,3 +1,3 @@
 {
-    "/js/field.js": "/js/field.js?id=3ecf460f94bd21b718992c4374234ed7"
+    "/js/field.js": "/js/field.js?id=9d7e3dbca4a217cd9b1548a8f4e1a97f"
 }

dist/mix-manifest.json

@@ -1,6 +1,6 @@
 <template>
-    <PanelItem :field="field">
-        <template slot="value">
+    <PanelItem :index="index" :field="field">
+        <template #value>
             <div class="overflow-hidden">
                 <iframe :id="iframeId" sandbox="allow-scripts allow-same-origin" importance="low" width="100%"></iframe>
             </div>
@@ -9,36 +9,37 @@
 </template>
 
 <script>
-    export default {
-        props: ['resource', 'resourceName', 'resourceId', 'field'],
+export default {
+    props: ['index', 'resource', 'resourceName', 'resourceId', 'field'],
 
-        beforeCreate() {
-            const uniqueId = Math.random().toString(36).slice(-5);
-            this.iframeId = `previewUnlayerHtmlIframe-${uniqueId}`;
-        },
+    beforeCreate() {
+        const uniqueId = Math.random().toString(36).slice(-5);
+        this.iframeId = `previewUnlayerHtmlIframe-${uniqueId}`;
+    },
 
-        mounted() {
-            let iframe = document.getElementById(this.iframeId);
-            this.setIframeContent(iframe, this.field.html);
-            this.resizeIFrameToFitContent(iframe)
-        },
+    mounted() {
+        let iframe = document.getElementById(this.iframeId);
+        this.setIframeContent(iframe, this.field.html);
+        this.resizeIFrameToFitContent(iframe)
+    },
 
-        methods: {
-            /**
-             * @param {HTMLIFrameElement} iframe
-             * @param {string} htmlContent
-             */
-            setIframeContent: function(iframe, htmlContent) {
-                const container = document.createElement('div');
-                container.innerHTML = htmlContent;
-                iframe.contentWindow.document.body.appendChild(container);
-            },
-            /**
-             * @param {HTMLIFrameElement} iframe
-             */
-            resizeIFrameToFitContent: function (iframe) {
-                iframe.height = iframe.contentWindow.document.body.scrollHeight;
-            }
+    methods: {
+        /**
+         * @param {HTMLIFrameElement} iframe
+         * @param {string} htmlContent
+         */
+        setIframeContent: function (iframe, htmlContent) {
+            const container = document.createElement('div');
+            container.innerHTML = htmlContent;
+            iframe.contentWindow.document.body.appendChild(container);
         },
-    }
+
+        /**
+         * @param {HTMLIFrameElement} iframe
+         */
+        resizeIFrameToFitContent: function (iframe) {
+            iframe.height = iframe.contentWindow.document.body.scrollHeight;
+        }
+    },
+}
 </script>

resources/js/components/DetailField.vue

@@ -1,5 +1,10 @@
 <template>
-    <DefaultField :field="field" :errors="errors" :show-help-text="showHelpText" :full-width-content="true">
+    <DefaultField
+        :field="field"
+        :errors="errors"
+        :show-help-text="showHelpText"
+        :full-width-content="true"
+    >
         <template #field>
             <div class="fullscreenable">
                 <div class="unlayerControls flex">