Skip to content

Commit

Permalink
Use Vue 3 slot syntax
Browse files Browse the repository at this point in the history
  • Loading branch information
alies-dev committed Oct 27, 2022
1 parent 240b5dd commit a240cc8
Show file tree
Hide file tree
Showing 4 changed files with 39 additions and 33 deletions.
2 changes: 1 addition & 1 deletion dist/js/field.js

Large diffs are not rendered by default.

2 changes: 1 addition & 1 deletion dist/mix-manifest.json
Original file line number Diff line number Diff line change
@@ -1,3 +1,3 @@
{
"/js/field.js": "/js/field.js?id=3ecf460f94bd21b718992c4374234ed7"
"/js/field.js": "/js/field.js?id=9d7e3dbca4a217cd9b1548a8f4e1a97f"
}
61 changes: 31 additions & 30 deletions resources/js/components/DetailField.vue
Original file line number Diff line number Diff line change
@@ -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>
Expand All @@ -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>
7 changes: 6 additions & 1 deletion resources/js/components/FormField.vue
Original file line number Diff line number Diff line change
@@ -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">
Expand Down

0 comments on commit a240cc8

Please sign in to comment.