@mixd-id/web-scaffold 0.1.230406298 → 0.1.230406300

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@mixd-id/web-scaffold",
   "private": false,
-  "version": "0.1.230406298",
+  "version": "0.1.230406300",
   "scripts": {
     "dev": "vite serve",
     "build": "vite build",
@@ -47,9 +47,9 @@
     "crypto-js": "^4.2.0",
     "daisyui": "^2.19.0",
     "dayjs": "^1.11.2",
+    "eventemitter2": "^6.4.7",
     "exceljs": "^4.3.0",
     "express": "^4.18.1",
-    "eventemitter2": "^6.4.7",
     "file-type": "^18.2.1",
     "glob": "^8.0.3",
     "lodash": "^4.17.21",
@@ -57,6 +57,7 @@
     "nprogress": "^0.2.0",
     "pinia": "^2.0.14",
     "prismjs": "^1.28.0",
+    "redis": "^4.6.13",
     "serve-static": "^1.15.0",
     "tailwindcss": "^3.2.4",
     "vue": "^3.2.25",

package/src/components/Modal.vue

@@ -275,7 +275,7 @@ export default{
 
     '$route.hash': {
       handler(to){
-        if(this.hash !== null){
+        if(typeof this.hash === 'string'){
           this._state = (to ?? '').indexOf(this.hash) >= 0
         }
       }

package/src/components/TreeViewItem.vue

@@ -64,7 +64,7 @@ export default{
 
 	emits: [ 'add', 'change', 'moveup', 'movedown', 'remove' ],
 
-	inject: [ 'confirm', 'toast', 'store' ],
+	inject: [ 'confirm', 'toast', 'store', 'getConfig' ],
 
 	props: {
 		item: Object,
@@ -340,7 +340,9 @@ export default{
 
     item: {
       handler(){
-        this.childCollapsed = this.componentStore[this.item.uid] ?? this.childCollapsed
+        if(this.componentStore){
+          this.childCollapsed = this.componentStore[this.item.uid] ?? this.childCollapsed
+        }
       },
       deep: true
     },

package/src/index.js

@@ -554,6 +554,7 @@ export default{
     app.component('TestimonialSetting', defineAsyncComponent(() => import("./widgets/TestimonialSetting.vue")))
     app.component('TextBlockSetting', defineAsyncComponent(() => import("./widgets/TextBlockSetting.vue")))
     app.component('WebPageBuilder', defineAsyncComponent(() => import("./widgets/WebPageBuilder.vue")))
+    app.component('WebPageBuilder2', defineAsyncComponent(() => import("./widgets/WebPageBuilder2.vue")))
     app.component('WebComponentSelector', defineAsyncComponent(() => import("./widgets/WebComponentSelector.vue")))
     app.component('WebDatasourceSelector', defineAsyncComponent(() => import("./widgets/WebDatasourceSelector.vue")))
     app.component('WebPageSelector', defineAsyncComponent(() => import("./widgets/WebPageSelector.vue")))

package/src/utils/helpers.mjs

@@ -287,21 +287,27 @@ const createFormData = (obj) => {
 
   const form = new FormData()
 
-  const iterateObject = (parentKey, obj) => {
+  const iterateObject = (obj, parentKey = '') => {
 
-    for(let key in obj){
-      let currentKey = parentKey ? '[' + key + ']' : key
+    for (let key in obj) {
+      if (obj.hasOwnProperty(key)) {
+        const value = obj[key];
+        const propName = parentKey ? `${parentKey}[${key}]` : key;
 
-      if(obj[key] !== '' && obj[key] !== null && obj[key] !== undefined){
-        form.append(
-          currentKey,
-          obj[key] ?? ''
-        )
+        if (value instanceof File || value instanceof Blob) {
+          form.append(propName, value);
+        }
+        else if (typeof value === 'object' && value !== null) {
+          iterateObject(value, propName);
+        }
+        else {
+          form.append(propName, value);
+        }
       }
     }
   }
 
-  iterateObject('', obj)
+  iterateObject(obj)
 
   return form
 }

package/src/utils/wss.js

@@ -1,7 +1,8 @@
 const WebSocket = require('ws');
 const CryptoJS = require("crypto-js");
-const crypto = require("crypto-js");
 const EventEmitter2 = require("eventemitter2");
+const redis = require("redis");
+
 
 const convertDataUrlObj = async(obj) => {
 
@@ -85,7 +86,7 @@ class WSS extends EventEmitter2{
   async toBinaryData(obj){
     const dataUrlObj = await convertDataUrlObj(obj)
     const encryptedData = this._opt.key ?
-      crypto.AES.encrypt(JSON.stringify(dataUrlObj), this._opt.key).toString() :
+      CryptoJS.AES.encrypt(JSON.stringify(dataUrlObj), this._opt.key).toString() :
       JSON.stringify(dataUrlObj);
     return new TextEncoder().encode(encryptedData);
   }
@@ -96,24 +97,42 @@ class WSS extends EventEmitter2{
     this._opt = opt
     this._instance = new WebSocket.Server(opt);
 
+    this._client = redis.createClient()
+    this._client.connect().then()
+
     this._instance.on('connection', async (socket, req) => {
 
+      let subscriber
+
+      const listener = (message) => {
+        const { model, event, items } = JSON.parse(message)
+        this.toBinaryData({ data:{ model, event, items } })
+          .then(data => socket.send(data))
+      }
+
       socket.leave = (channel) => {
-        if((socket.channels ?? {})[channel]){
+        /*if((socket.channels ?? {})[channel]){
           delete socket.channels[channel]
+        }*/
 
-          if(process.verbose){
-            process.verbose('wss.leave', channel)
-          }
+        if(subscriber){
+          subscriber.unsubscribe(channel, listener)
+        }
+
+        if(process.verbose){
+          process.verbose('wss.leave', channel)
         }
       }
 
       socket.join = (channel) => {
-        if(!socket.channels){
+        /*if(!socket.channels){
           socket.channels = {}
         }
+        socket.channels[channel] = 1*/
 
-        socket.channels[channel] = 1
+        if(subscriber) {
+          subscriber.subscribe(channel, listener)
+        }
 
         if(process.verbose){
           process.verbose('wss.join', channel)
@@ -184,6 +203,9 @@ class WSS extends EventEmitter2{
       });
 
       socket.on('close', (e) => {
+        if(subscriber){
+          subscriber.disconnect()
+        }
         this.emit('close', e, socket)
       });
 
@@ -192,6 +214,9 @@ class WSS extends EventEmitter2{
         await this._opt.auth(token, socket)
         socket.isAuth = true
         socket.send(await this.toBinaryData({ auth:true }))
+
+        subscriber = this._client.duplicate()
+        await subscriber.connect()
       }
       catch(e){
         return socket.close(1002, e.message);
@@ -231,6 +256,14 @@ class WSS extends EventEmitter2{
 
   async broadcast(channel, { model, event, items }){
 
+    /*for(let socket of this._instance.clients){
+      if(socket.readyState === WebSocket.OPEN && (socket.channels ?? {})[channel]){
+        socket.send(await this.toBinaryData({ data:{ model, event, items } }))
+      }
+    }*/
+
+    await this._client.publish(channel, JSON.stringify({ model, event, items }))
+
     if(process.verbose){
       process.verbose('wss.broadcast', {
         channel,
@@ -239,12 +272,6 @@ class WSS extends EventEmitter2{
         items
       })
     }
-
-    for(let socket of this._instance.clients){
-      if(socket.readyState === WebSocket.OPEN && (socket.channels ?? {})[channel]){
-        socket.send(await this.toBinaryData({ data:{ model, event, items } }))
-      }
-    }
   }
 
 }

package/src/widgets/WebPageBuilder2.vue

@@ -0,0 +1,682 @@
+<template>
+	<div v-if="page" :class="$style.comp">
+
+    <div class="flex-1 flex flex-col bg-base-400">
+
+      <div class="p-3 pr-5 sticky top-0 flex justify-center gap-4 bg-base-400 dark:bg-base-300 border-b-[1px] border-text-50">
+        <div class="flex-1 flex flex-row gap-4 items-center">
+
+          <button ref="close" class=" p-1"
+                  @click="close">
+            <svg class="fill-text-300 hover:fill-red-500" width="18" height="18" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 320 512"><path d="M207.6 256l107.72-107.72c6.23-6.23 6.23-16.34 0-22.58l-25.03-25.03c-6.23-6.23-16.34-6.23-22.58 0L160 208.4 52.28 100.68c-6.23-6.23-16.34-6.23-22.58 0L4.68 125.7c-6.23 6.23-6.23 16.34 0 22.58L112.4 256 4.68 363.72c-6.23 6.23-6.23 16.34 0 22.58l25.03 25.03c6.23 6.23 16.34 6.23 22.58 0L160 303.6l107.72 107.72c6.23 6.23 16.34 6.23 22.58 0l25.03-25.03c6.23-6.23 6.23-16.34 0-22.58L207.6 256z"/></svg>
+          </button>
+
+          <h4 class="mr-5 w-[200px] text-ellipsis whitespace-nowrap overflow-hidden">
+            {{ page.title }}
+          </h4>
+
+          <div class="flex-1">
+            <Textbox :readonly="1" :value="computedIframeSrc" class="w-full rounded-full" item-class="p-1">
+              <template #start>
+                <div class="flex flex-row items-center mr-2">
+                  <button @click="reloadIframe" class="p-3">
+                    <svg width="14" height="14" viewBox="0 0 24 24" class="fill-text" xmlns="http://www.w3.org/2000/svg">
+                      <path d="M3.75 12C3.75 7.44365 7.44365 3.75 12 3.75C14.7802 3.75 17.1982 5.12612 18.6816 7.24467L16.5022 7.23828C16.088 7.23707 15.7512 7.57187 15.75 7.98608C15.7488 8.4003 16.0836 8.73706 16.4978 8.73828L19.9491 8.74839C19.9817 8.75065 20.0147 8.75076 20.0477 8.74868L20.4978 8.75C20.6971 8.75058 20.8884 8.67182 21.0296 8.53111C21.1707 8.39039 21.25 8.19929 21.25 8L21.25 4C21.25 3.58579 20.9142 3.25 20.5 3.25C20.0858 3.25 19.75 3.58579 19.75 4L19.75 6.16237C17.9894 3.79113 15.2004 2.25 12 2.25C6.61522 2.25 2.25 6.61522 2.25 12C2.25 17.3848 6.61522 21.75 12 21.75C15.8354 21.75 19.0799 19.5367 20.6716 16.3338C20.856 15.9628 20.7047 15.5127 20.3338 15.3284C19.9628 15.144 19.5127 15.2953 19.3284 15.6662C17.9747 18.3902 15.2321 20.25 12 20.25C7.44365 20.25 3.75 16.5563 3.75 12Z"/>
+                    </svg>
+                  </button>
+                  <select v-model="config.zoomLevel" :class="$style.zoomLevel" @change="resize()">
+                    <optgroup label="Zoom Level">
+                      <option value="fit">Fit</option>
+                      <option value="125%">125%</option>
+                      <option value="100%">100%</option>
+                      <option value="75%">75%</option>
+                      <option value="50%">50%</option>
+                    </optgroup>
+                  </select>
+                </div>
+              </template>
+              <template #end>
+                <div class="flex flex-row gap-4 ml-3">
+                  <CopyToClipboard :value="computedIframeSrc" @copied="toast($t('Copied'))">
+                    <svg width="14" height="14" class="fill-primary" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><path d="M433.941 65.941l-51.882-51.882A48 48 0 0 0 348.118 0H176c-26.51 0-48 21.49-48 48v48H48c-26.51 0-48 21.49-48 48v320c0 26.51 21.49 48 48 48h224c26.51 0 48-21.49 48-48v-48h80c26.51 0 48-21.49 48-48V99.882a48 48 0 0 0-14.059-33.941zM352 32.491a15.88 15.88 0 0 1 7.431 4.195l51.882 51.883A15.885 15.885 0 0 1 415.508 96H352V32.491zM288 464c0 8.822-7.178 16-16 16H48c-8.822 0-16-7.178-16-16V144c0-8.822 7.178-16 16-16h80v240c0 26.51 21.49 48 48 48h112v48zm128-96c0 8.822-7.178 16-16 16H176c-8.822 0-16-7.178-16-16V48c0-8.822 7.178-16 16-16h144v72c0 13.2 10.8 24 24 24h72v240z"/></svg>
+                  </CopyToClipboard>
+                  <a type="button" class="w-[21px]" :href="computedIframeSrc" target="_blank">
+                    <svg width="12" height="12" class="fill-primary" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path d="M497.6,0,334.4.17A14.4,14.4,0,0,0,320,14.57V47.88a14.4,14.4,0,0,0,14.69,14.4l73.63-2.72,2.06,2.06L131.52,340.49a12,12,0,0,0,0,17l23,23a12,12,0,0,0,17,0L450.38,101.62l2.06,2.06-2.72,73.63A14.4,14.4,0,0,0,464.12,192h33.31a14.4,14.4,0,0,0,14.4-14.4L512,14.4A14.4,14.4,0,0,0,497.6,0ZM432,288H416a16,16,0,0,0-16,16V458a6,6,0,0,1-6,6H54a6,6,0,0,1-6-6V118a6,6,0,0,1,6-6H208a16,16,0,0,0,16-16V80a16,16,0,0,0-16-16H48A48,48,0,0,0,0,112V464a48,48,0,0,0,48,48H400a48,48,0,0,0,48-48V304A16,16,0,0,0,432,288Z"/></svg>
+                  </a>
+                </div>
+              </template>
+            </Textbox>
+          </div>
+
+          <Tabs :items="previewModes" v-model="config.previewMode" variant="button" @change="updateIframe" />
+
+          <Button ref="saveBtn"
+                  class="w-[70px] rounded-full p-1"
+                  :state="canSave ? 1 : 1"
+                  @click="save">{{ $t('Save') }}</Button>
+        </div>
+      </div>
+
+      <div class="flex-1 flex flex-row">
+
+        <div class="flex flex-row bg-base-400 dark:bg-base-300 border-r-[1px] border-text-50"
+             :style="section1Style">
+
+          <div class="flex-1 flex flex-col overflow-y-auto">
+
+            <div class="flex flex-col items-center border-b-[1px] border-text-100" @click="currentArea = 'header'">
+              <Tabs :items="tabItems"
+                    class="pt-1"
+                    v-model="leftBar.tabIndex" />
+            </div>
+
+            <div v-if="leftBar.tabIndex === 1">
+
+            </div>
+
+            <div v-else-if="leftBar.tabIndex === 2"
+                 class="flex-1 overflow-y-auto p-6 flex flex-col gap-6">
+
+              <div>
+                <div class="flex flex-row gap-1 items-center cursor-pointer">
+                  <svg v-if="!expanded['components']" width="12" height="12" @click="expanded['components'] = !expanded['components']" class="fill-text" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 192 512"><path d="M0 384.662V127.338c0-17.818 21.543-26.741 34.142-14.142l128.662 128.662c7.81 7.81 7.81 20.474 0 28.284L34.142 398.804C21.543 411.404 0 402.48 0 384.662z"/></svg>
+                  <svg v-else width="12" height="12" @click="expanded['components'] = !expanded['components']" class="fill-text" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 320 512"><path d="M31.3 192h257.3c17.8 0 26.7 21.5 14.1 34.1L174.1 354.8c-7.8 7.8-20.5 7.8-28.3 0L17.2 226.1C4.6 213.5 13.5 192 31.3 192z"/></svg>
+                  <strong class="flex-1 text-text-400 line-clamp-1" @click="expanded['components'] = !expanded['components']">{{ $t('Components')}}</strong>
+                  <button type="button" class="text-primary flex flex-row items-center gap-1"
+                          @click="openComponentSelector({ items:page.components }); currentArea = ''">
+                    <svg width="16" height="16" class="fill-primary" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 384 512"><path d="M376 232H216V72c0-4.42-3.58-8-8-8h-32c-4.42 0-8 3.58-8 8v160H8c-4.42 0-8 3.58-8 8v32c0 4.42 3.58 8 8 8h160v160c0 4.42 3.58 8 8 8h32c4.42 0 8-3.58 8-8V280h160c4.42 0 8-3.58 8-8v-32c0-4.42-3.58-8-8-8z"/></svg>
+                    {{ $t('Add')}}
+                  </button>
+                </div>
+
+                <div v-if="expanded['components']" class="flex flex-col gap-10">
+                  <TreeView class="mt-2"
+                            v-model="page.components"
+                            :selected-item="currentItem"
+                            @add="(items) => openComponentSelector({ items })"
+                            @change="">
+                    <template #default="{ item }">
+                      <div class="flex-1 text-ellipsis whitespace-nowrap overflow-hidden"
+                           :class="!item.props.enabled ? 'line-through' : ''"
+                           @click="select(item.uid)">
+                        {{ item.props.name ?? item.type }}
+                      </div>
+                    </template>
+                  </TreeView>
+                </div>
+              </div>
+
+            </div>
+
+          </div>
+
+          <div :class="$style.resize1"
+               @mousedown="(e) => $util.dragResize(e, resize1)"></div>
+        </div>
+
+        <div class="flex-1 bg-base-300 dark:bg-base-400 relative" :class="previewClass" ref="preview">
+
+          <div class="flex flex-row p-2">
+            <select class="p-1 text-sm cursor-pointer bg-text-50 outline-none"
+                    v-model="config.previewViewType"
+                    @change="resize">
+              <option v-for="_type in previewViewTypes" :value="_type.value">{{ _type.text }}</option>
+            </select>
+          </div>
+
+          <iframe :src="iframeSrc" :width="iframeSize.width" :height="iframeSize.height"
+                  class="mx-auto border-[2px] border-text-300" :style="iframeStyle" ref="iframe"></iframe>
+
+        </div>
+
+        <div v-if="currentItem"
+             class="flex flex-row bg-base-400 dark:bg-base-300 border-l-[1px] border-text-50"
+             @click=""
+             :style="section3Style">
+
+          <div :class="$style.resize3"
+               @mousedown="(e) => $util.dragResize(e, resize3)"></div>
+
+          <div class="flex-1 flex flex-col gap-6 overflow-y-auto p-6">
+
+            <component :is="`${currentItem.type}Setting`"
+                       :item="currentItem"
+                       :view-type="config.viewType"
+                       :view-types="viewTypes"
+                       ref="settingComponent"
+                       @change="pageHistory.commit()"
+                       @postMessageToIframe="onPostMessageToIframe"/>
+
+          </div>
+
+        </div>
+
+      </div>
+
+    </div>
+
+    <WebComponentSelector ref="webPageComponentSelector"
+                          component-src="template.load"
+                          :components="availableComponents"
+                          @apply="addComponent"
+                          dismissable="true"
+                          @dismiss="$refs.webPageComponentSelector.close()" />
+
+	</div>
+</template>
+
+<script>
+
+import md5 from "md5";
+
+export default{
+
+  emits: [ 'save' ],
+
+  props: {
+
+    config: {
+      type: Object,
+      required: true
+    },
+
+    page: {
+      type: Object,
+      default: {}
+    }
+
+  },
+
+  data(){
+    return {
+      components: [
+
+        {"type":"Flex","name":"3 Column Layout","group":"Layouts","thumbnailUrl":"/images/templates/3-column-layout1.png", "items":[{"type":"Flex","name":"Flex","group":"Components","items":[{"type":"Article","name":"Article","group":"Components","props":{"htmlText":"Left","padding":["p-6",""],"enabled":true,"direction":["flex-column"],"gap":["gap-2"],"name":"Dummy Text"}}],"props":{"direction":["flex-col"],"enabled":true,"width":["","md:w-2/12"],"name":"Left"}},{"type":"Flex","name":"Flex","group":"Components","items":[{"type":"Article","name":"Article","group":"Components","props":{"htmlText":"Middle","padding":["p-6",""],"enabled":true,"direction":["flex-column"],"gap":["gap-2"],"name":"Dummy Text"}}],"props":{"direction":["flex-col"],"enabled":true,"width":[null,"md:flex-1"],"name":"Middle"}},{"type":"Flex","name":"Flex","group":"Components","items":[{"type":"Article","name":"Article","group":"Components","props":{"htmlText":"Right","padding":["p-6",""],"enabled":true,"direction":["flex-column"],"gap":["gap-2"],"name":"Dummy Text"}}],"props":{"direction":["flex-col"],"enabled":true,"width":[null,"md:w-3/12"],"name":"RIght"}}],"props":{"direction":["flex-col","md:flex-row"],"gap":[null,"md:gap-4"],"enabled":true,"name":"3 Column Layout"}},
+
+
+        {"type":"Flex","name":"Thumbnails","group":"Sections","thumbnailUrl":"/images/templates/thumbnails.gif","items":[{"type":"Flex","name":"Flex","group":"Components","items":[{"type":"TextBlock","name":"TextBlock","group":"Components","props":{"htmlText":"","enabled":true,"direction":["flex-column"],"gap":["gap-2"],"text":"Thumbnails","tagName":"h5","flex":["flex-1"]}},{"type":"Link","name":"Link","group":"Components","props":{"enabled":true,"textColor":["text-primary-500"],"direction":["flex-column"],"gap":["gap-2"],"text":"More Thumbnails"},"items":[]}],"props":{"direction":["flex-row"],"enabled":true,"flexAlign":["items-center"]}},{"type":"Flex","name":"Flex","group":"Components","items":[{"type":"Thumbnail","name":"Thumbnail","group":"Components","props":{"enabled":true,"width":["w-5/12"],"direction":["flex-column"],"gap":["gap-2"],"flex":["flex-0"]},"items":[]},{"type":"Thumbnail","name":"Thumbnail","group":"Components","props":{"enabled":true,"width":["w-5/12"],"direction":["flex-column"],"gap":["gap-2"],"flex":["flex-0"]},"items":[]},{"type":"Thumbnail","name":"Thumbnail","group":"Components","props":{"enabled":true,"width":["w-5/12"],"direction":["flex-column"],"gap":["gap-2"],"flex":["flex-0"]},"items":[]}],"props":{"direction":["flex-row"],"gap":["gap-4"],"enabled":true,"overflow":["overflow-x-scroll"],"width":["w-full"],"minWidth":["min-w-0"]}}],"props":{"direction":["flex-col"],"gap":["gap-2"],"enabled":true,"padding":["p-5",""],"name":"Thumbnails"}},
+
+        {"type":"Carousel","name":"Image Carousel","group":"Sections","thumbnailUrl":"/images/templates/carousel1.png","items":[{"type":"Image","name":"Image","group":"Components","props":{"src":["/assets/web/banner1.jpg"],"enabled":true,"direction":["flex-column"],"gap":["gap-2"],"bdRadius":["rounded-xl"],"aspectRatio":["aspect-[2/1]"],"bgColors":["bg-amber-300"]}},{"type":"Image","name":"Image","group":"Components","props":{"src":["/assets/web/banner1.jpg"],"enabled":true,"direction":["flex-column"],"gap":["gap-2"],"bdRadius":["rounded-xl"],"aspectRatio":["aspect-[2/1]"],"bgColors":["bg-lime-300"]}},{"type":"Image","name":"Image","group":"Components","props":{"src":["/assets/web/banner1.jpg"],"enabled":true,"direction":["flex-column"],"gap":["gap-2"],"bdRadius":["rounded-xl"],"aspectRatio":["aspect-[2/1]"],"bgColors":["bg-blue-300"]}}],"props":{"enabled":true,"containerGap":["gap-2"],"padding":["p-4",""],"direction":["flex-column"],"gap":["gap-2"],"useLegend":true}},
+
+        {"type":"Link","name":"Icon Link","group":"Sections","thumbnailUrl":"/images/templates/icon-link.png","props":{"enabled":true,"display":["flex"],"direction":["flex-col"],"gap":["gap-2"],"flexAlign":["items-center"],"name":"Icon Link"},"items":[{"type":"Image","name":"Image","group":"Components","props":{"src":["059bae0eadf1b650f3acff7dd1e7433a.png"],"enabled":true,"direction":["flex-column"],"gap":["gap-2"]}},{"type":"TextBlock","name":"TextBlock","group":"Components","props":{"htmlText":"","fontWeight":["font-normal"],"enabled":true,"direction":["flex-column"],"gap":["gap-2"],"text":"Icon Link 1"}}]},
+
+        {"type":"Carousel","name":"Icon Link Carousel","group":"Sections","thumbnailUrl":"/images/templates/icon-link-carousel.gif", "items":[{"type":"Grid","name":"Grid","group":"Components","thumbnailUrl":"/images/templates/grid1.png","items":[{"type":"Link","name":"Icon Link","group":"Sections","props":{"enabled":true,"display":["flex"],"direction":["flex-col"],"gap":["gap-2"],"flexAlign":["items-center"],"name":"Icon Link"},"items":[{"type":"Image","name":"Image","group":"Components","props":{"src":["059bae0eadf1b650f3acff7dd1e7433a.png"],"enabled":true,"direction":["flex-column"],"gap":["gap-2"]}},{"type":"TextBlock","name":"TextBlock","group":"Components","props":{"htmlText":"","enabled":true,"direction":["flex-column"],"gap":["gap-2"],"text":"Link 1","fontSize":["text-sm"]}}]},{"type":"Link","name":"Icon Link","group":"Sections","props":{"enabled":true,"display":["flex"],"direction":["flex-col"],"gap":["gap-2"],"flexAlign":["items-center"],"name":"Icon Link"},"items":[{"type":"Image","name":"Image","group":"Components","props":{"src":["c7e8d12c0dcda3b9d3b2862559a8bc2e.png"],"enabled":true,"direction":["flex-column"],"gap":["gap-2"]}},{"type":"TextBlock","name":"TextBlock","group":"Components","props":{"htmlText":"","enabled":true,"direction":["flex-column"],"gap":["gap-2"],"text":"Link 2","fontSize":["text-sm"]}}]},{"type":"Link","name":"Icon Link","group":"Sections","props":{"enabled":true,"display":["flex"],"direction":["flex-col"],"gap":["gap-2"],"flexAlign":["items-center"],"name":"Icon Link"},"items":[{"type":"Image","name":"Image","group":"Components","props":{"src":["47bcb782edfc426c8506664cc3b320e7.png"],"enabled":true,"direction":["flex-column"],"gap":["gap-2"]}},{"type":"TextBlock","name":"TextBlock","group":"Components","props":{"htmlText":"","enabled":true,"direction":["flex-column"],"gap":["gap-2"],"text":"Link 3","fontSize":["text-sm"]}}]},{"type":"Link","name":"Icon Link","group":"Sections","props":{"enabled":true,"display":["flex"],"direction":["flex-col"],"gap":["gap-2"],"flexAlign":["items-center"],"name":"Icon Link"},"items":[{"type":"Image","name":"Image","group":"Components","props":{"src":["01e5a3e8f0e89562a7f6a5449be44614.png"],"enabled":true,"direction":["flex-column"],"gap":["gap-2"]}},{"type":"TextBlock","name":"TextBlock","group":"Components","props":{"htmlText":"","enabled":true,"direction":["flex-column"],"gap":["gap-2"],"text":"Link 4","fontSize":["text-sm"]}}]},{"type":"Link","name":"Icon Link","group":"Sections","props":{"enabled":true,"display":["flex"],"direction":["flex-col"],"gap":["gap-2"],"flexAlign":["items-center"],"name":"Icon Link"},"items":[{"type":"Image","name":"Image","group":"Components","props":{"src":["7d7cc53e346aa5abf1f1ada463ed0e5c.png"],"enabled":true,"direction":["flex-column"],"gap":["gap-2"]}},{"type":"TextBlock","name":"TextBlock","group":"Components","props":{"htmlText":"","enabled":true,"direction":["flex-column"],"gap":["gap-2"],"text":"Link 5","fontSize":["text-sm"]}}]},{"type":"Link","name":"Icon Link","group":"Sections","props":{"enabled":true,"display":["flex"],"direction":["flex-col"],"gap":["gap-2"],"flexAlign":["items-center"],"name":"Icon Link"},"items":[{"type":"Image","name":"Image","group":"Components","props":{"src":["4a1d1808e9f1be18f0ba18322647a11e.png"],"enabled":true,"direction":["flex-column"],"gap":["gap-2"]}},{"type":"TextBlock","name":"TextBlock","group":"Components","props":{"htmlText":"","enabled":true,"direction":["flex-column"],"gap":["gap-2"],"text":"Link 6","fontSize":["text-sm"]}}]},{"type":"Link","name":"Icon Link","group":"Sections","props":{"enabled":true,"display":["flex"],"direction":["flex-col"],"gap":["gap-2"],"flexAlign":["items-center"],"name":"Icon Link"},"items":[{"type":"Image","name":"Image","group":"Components","props":{"src":["1b7f9673aeee9ebdf305658a54c63dc8.png"],"enabled":true,"direction":["flex-column"],"gap":["gap-2"]}},{"type":"TextBlock","name":"TextBlock","group":"Components","props":{"htmlText":"","enabled":true,"direction":["flex-column"],"gap":["gap-2"],"text":"Link 7","fontSize":["text-sm"]}}]},{"type":"Link","name":"Icon Link","group":"Sections","props":{"enabled":true,"display":["flex"],"direction":["flex-col"],"gap":["gap-2"],"flexAlign":["items-center"],"name":"Icon Link"},"items":[{"type":"Image","name":"Image","group":"Components","props":{"src":["71828d52f682527cd500c1ba6c2a9ef0.png"],"enabled":true,"direction":["flex-column"],"gap":["gap-2"]}},{"type":"TextBlock","name":"TextBlock","group":"Components","props":{"htmlText":"","enabled":true,"direction":["flex-column"],"gap":["gap-2"],"text":"Link 8","fontSize":["text-sm"]}}]}],"gap":[],"props":{"columns":["grid-cols-4"],"gap":["gap-5"],"enabled":true,"direction":["flex-column"],"padding":["p-5",""]}},{"type":"Grid","name":"Grid","group":"Components","thumbnailUrl":"/images/templates/grid1.png","items":[{"type":"Link","name":"Icon Link","group":"Sections","props":{"enabled":true,"display":["flex"],"direction":["flex-col"],"gap":["gap-2"],"flexAlign":["items-center"],"name":"Icon Link"},"items":[{"type":"Image","name":"Image","group":"Components","props":{"src":["71828d52f682527cd500c1ba6c2a9ef0.png"],"enabled":true,"direction":["flex-column"],"gap":["gap-2"]}},{"type":"TextBlock","name":"TextBlock","group":"Components","props":{"htmlText":"","enabled":true,"direction":["flex-column"],"gap":["gap-2"],"text":"Link 9","fontSize":["text-sm"]}}]},{"type":"Link","name":"Icon Link","group":"Sections","props":{"enabled":true,"display":["flex"],"direction":["flex-col"],"gap":["gap-2"],"flexAlign":["items-center"],"name":"Icon Link"},"items":[{"type":"Image","name":"Image","group":"Components","props":{"src":["059bae0eadf1b650f3acff7dd1e7433a.png"],"enabled":true,"direction":["flex-column"],"gap":["gap-2"]}},{"type":"TextBlock","name":"TextBlock","group":"Components","props":{"htmlText":"","enabled":true,"direction":["flex-column"],"gap":["gap-2"],"text":"Link 10","fontSize":["text-sm"]}}]},{"type":"Link","name":"Icon Link","group":"Sections","props":{"enabled":true,"display":["flex"],"direction":["flex-col"],"gap":["gap-2"],"flexAlign":["items-center"],"name":"Icon Link"},"items":[{"type":"Image","name":"Image","group":"Components","props":{"src":["4a1d1808e9f1be18f0ba18322647a11e.png"],"enabled":true,"direction":["flex-column"],"gap":["gap-2"]}},{"type":"TextBlock","name":"TextBlock","group":"Components","props":{"htmlText":"","enabled":true,"direction":["flex-column"],"gap":["gap-2"],"text":"Link 11","fontSize":["text-sm"]}}]},{"type":"Link","name":"Icon Link","group":"Sections","props":{"enabled":true,"display":["flex"],"direction":["flex-col"],"gap":["gap-2"],"flexAlign":["items-center"],"name":"Icon Link"},"items":[{"type":"Image","name":"Image","group":"Components","props":{"src":["7d7cc53e346aa5abf1f1ada463ed0e5c.png"],"enabled":true,"direction":["flex-column"],"gap":["gap-2"]}},{"type":"TextBlock","name":"TextBlock","group":"Components","props":{"htmlText":"","enabled":true,"direction":["flex-column"],"gap":["gap-2"],"text":"Link 12","fontSize":["text-sm"]}}]},{"type":"Link","name":"Icon Link","group":"Sections","props":{"enabled":true,"display":["flex"],"direction":["flex-col"],"gap":["gap-2"],"flexAlign":["items-center"],"name":"Icon Link"},"items":[{"type":"Image","name":"Image","group":"Components","props":{"src":["47bcb782edfc426c8506664cc3b320e7.png"],"enabled":true,"direction":["flex-column"],"gap":["gap-2"]}},{"type":"TextBlock","name":"TextBlock","group":"Components","props":{"htmlText":"","enabled":true,"direction":["flex-column"],"gap":["gap-2"],"text":"Link 13","fontSize":["text-sm"]}}]},{"type":"Link","name":"Icon Link","group":"Sections","props":{"enabled":true,"display":["flex"],"direction":["flex-col"],"gap":["gap-2"],"flexAlign":["items-center"],"name":"Icon Link"},"items":[{"type":"Image","name":"Image","group":"Components","props":{"src":["c7e8d12c0dcda3b9d3b2862559a8bc2e.png"],"enabled":true,"direction":["flex-column"],"gap":["gap-2"]}},{"type":"TextBlock","name":"TextBlock","group":"Components","props":{"htmlText":"","enabled":true,"direction":["flex-column"],"gap":["gap-2"],"text":"Link 14","fontSize":["text-sm"]}}]},{"type":"Link","name":"Icon Link","group":"Sections","props":{"enabled":true,"display":["flex"],"direction":["flex-col"],"gap":["gap-2"],"flexAlign":["items-center"],"name":"Icon Link"},"items":[{"type":"Image","name":"Image","group":"Components","props":{"src":["4a1d1808e9f1be18f0ba18322647a11e.png"],"enabled":true,"direction":["flex-column"],"gap":["gap-2"]}},{"type":"TextBlock","name":"TextBlock","group":"Components","props":{"htmlText":"","enabled":true,"direction":["flex-column"],"gap":["gap-2"],"text":"Link 15","fontSize":["text-sm"]}}]},{"type":"Link","name":"Icon Link","group":"Sections","props":{"enabled":true,"display":["flex"],"direction":["flex-col"],"gap":["gap-2"],"flexAlign":["items-center"],"name":"Icon Link"},"items":[{"type":"Image","name":"Image","group":"Components","props":{"src":["059bae0eadf1b650f3acff7dd1e7433a.png"],"enabled":true,"direction":["flex-column"],"gap":["gap-2"]}},{"type":"TextBlock","name":"TextBlock","group":"Components","props":{"htmlText":"","enabled":true,"direction":["flex-column"],"gap":["gap-2"],"text":"Link 16","fontSize":["text-sm"]}}]}],"gap":[],"props":{"columns":["grid-cols-4"],"gap":["gap-5"],"enabled":true,"direction":["flex-column"],"padding":["p-5",""]}}],"props":{"enabled":true,"containerGap":["gap-2"],"padding":["p-4",""],"direction":["flex-column"],"gap":["gap-2"],"useLegend":true,"bgColors":["bg-gray-200"],"name":"Icon Link Carousel"}},
+
+        { type:'ContactForm', name:'Contact Form', group:'Widgets', thumbnailUrl:"/images/templates/contact-form1.png", props:{
+            fields:[
+              { type:'name', label:'Nama', required:true },
+              { type:'mobileNumber', label:'Nomor HP', required:true },
+              { type:'remark', label:'Pertanyaan' },
+            ],
+            title: 'Contact Us',
+            description: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent gravida erat eget nisi',
+            submitMethod: 'post',
+            submitUrl: '/inquiry',
+            onSubmit:[],
+          }},
+
+        { type:'IconList', name:'Icon List', group:'Widgets', props:{
+            icons:[], columns:[ 'grid-cols-4' ],
+          }},
+
+        { type:'DataList', name:'Data List', group:'Widgets', props:{}, items:[] },
+
+        { type:'FAQ', name:'FAQ', group:'Widgets', thumbnailUrl:"/images/templates/faq.gif", props:{ items:[] }},
+        { type:'FAQ', name:'FAQ', group:'Widgets', thumbnailUrl:"/images/templates/faq.gif", props:{ items:[] }},
+
+        { type:'FeatureList', name:'Feature List', group:'Widgets', props:{ items:[], columns:[], variant:['variant1'] }},
+
+        { type:'Review', name:'Review', group:'Widgets', props:{} },
+
+        { type:'Share', name:'Share To', group:'Widgets', props:{ channels:[] }},
+
+        { type:'Testimonial', name:'Testimonial', group:'Widgets', props:{} },
+
+        { type:'Header', name:'Header', group:'Widgets', props:{}, items:[] },
+
+        { type:'ThumbnailList', name:'Thumbnail List', group:'Widgets', props:{ items:[] } },
+
+        { type:'ProductDetail', name:'Product Detail', props:{}, group:'Widgets' },
+
+
+        {"type":"Flex","name":"Section 1","group":"Components","items":[{"type":"TextBlock","name":"TextBlock","group":"Components","props":{"htmlText":"","fontSize":["text-4xl"],"enabled":true,"text":"Drive more revenue at lower costs\n","fontWeight":["font-semibold"]}},{"type":"Paragraph","name":"Paragraph","group":"Components","props":{"name":"Paragraph","enabled":true,"text":"Reach every customer on their own preferred channel with dynamic, omnichannel campaigns, using channel-responsive templates.","html":"Reach every customer on their own preferred channel with dynamic, omnichannel campaigns, using channel-responsive templates.","maxWidth":["max-w-lg"],"fontSize":["text-xl"]}},{"type":"Flex","name":"Flex","group":"Components","items":[{"type":"Button","name":"Button","group":"Components","props":{"name":"Button","text":"Start Now","enabled":true,"padding":["px-3 py-0"],"fontSize":["text-xl"]}},{"type":"Button","name":"Button","group":"Components","props":{"name":"Button","text":"Contact Sales","enabled":true,"variant":"outline","padding":["p-3"],"fontSize":["text-xl"]}}],"props":{"direction":["flex-row"],"gap":["gap-3"],"enabled":true}}],"props":{"direction":["flex-col"],"gap":["gap-4"],"enabled":true,"padding":["p-8"],"margin":["mx-auto"],"width":["w-full"],"maxWidth":["max-w-screen-xl"]}},
+
+        {"type":"Carousel","name":"Carousel","group":"Components","items":[],"props":{"enabled":true,"containerGap":["gap-2"],"padding":["p-4",""],"direction":["flex-column"],"gap":["gap-2"],"useLegend":true}},
+
+        { type:'Link', name:'Link', group:'Components', props:{}, items:[] },
+
+        { type:'Modal', name:'Modal', group:'Components', props:{}, items:[] },
+
+        { type:'Thumbnail', name:'Thumbnail', group:'Components', props:{}, items:[] },
+
+        { type:'Ahref', name:'Ahref', group:'Components', props:{ name:'Ahref', text:'Ahref' } },
+
+        { type:'Paragraph', name:'Paragraph', group:'Components', thumbnailUrl:"/images/templates/paragraph1.png", props:{ name:'Paragraph' } },
+
+        { type:'Button', name:'Button', group:'Components', props:{
+            name:'Button', text:'Button'
+          }},
+
+        { type:'Flex', name:'Flex', group:'Components', items:[], props:{ direction: [ 'flex-row' ] }},
+
+        { type:'Grid', name:'Grid', group:'Components', thumbnailUrl:"/images/templates/grid1.png", items:[], gap:[], props:{
+            columns: [], gap: [],
+          }},
+
+        { type:'Image', name:'Image', group:'Components', props:{
+            src:[],
+          }},
+
+        { type:'EmbeddedVideo', name:'Video', group:'Components', props:{
+            src:[],
+          }},
+
+        { type:'Article', name:'Article', group:'Components', props:{
+            htmlText:"Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed convallis odio at odio dapibus, " +
+                "eget molestie risus semper. Aenean magna tellus, aliquet nec tristique eget, lacinia nec urna.",
+          }},
+
+        { type:'Table', name:'Table', group:'Components', props:{
+            items: []
+          }},
+
+        { type:'TextBlock', name:'TextBlock', group:'Components', props:{
+            htmlText:'',
+            fontFamily:[], fontSize:[], fontWeight:[], textColor:[]
+          }},
+
+        { type:'Block', name:'Block', group:'Components', items:[], props:{}},
+
+        { type:'Countdown', name:'Countdown', group:'Components', props:{}},
+
+        { type:'YoutubeVideo', name:'Youtube Video', group:'Components', props:{ name:"Youtube Video", delay:"0" }},
+
+        { type:'Svg', name:'Svg', group:'Components', props:{}},
+
+      ],
+      iframeSrc: '',
+      iframeStyle: {},
+      previewModes: [
+        { text:"Design", value:1 },
+        { text:"Preview", value:2 },
+      ],
+      pageHistory: null,
+      prevData: null,
+      tabItems: [
+        { text:"Page Info", value:1 },
+        { text:"Components", value:2 },
+        { text:"Datasource", value:3 },
+      ],
+      viewTypes: [
+        { text:'Mobile', value:'' },
+        { text:'Tablet', value:'md:' },
+      ],
+      previewViewTypes: [
+        { text:'Mobile', value:'' },
+        { text:'Tablet', value:'md:' },
+        { text:'Desktop', value:'xl:' },
+        { text:'TV', value:'2xl:' },
+      ],
+    }
+  },
+
+  computed: {
+
+    availableComponents(){
+      return this.components
+        .sort((a, b) => a.type > b.type ? 1 : -1)
+    },
+
+    canSave(){
+      return this.prevData &&
+          (this.prevData.page !== JSON.stringify(this.page) ||
+              this.prevData.layout !== JSON.stringify(this.layout))
+    },
+
+    computedIframeSrc(){
+      return this.iframeSrc.substring(0, this.iframeSrc.indexOf('?'))
+    },
+
+    computedPreviewViewType(){
+      if(this.config.previewViewType === 'auto')
+        return this.config.viewType
+      return this.config.previewViewType
+    },
+
+    currentItem(){
+      if(Array.isArray(this.config.selectedComponent) && this.config.selectedComponent[0]){
+        return this.findCompByUid(this.config.selectedComponent[0], this.page.components)
+      }
+    },
+
+    expanded(){
+      if(!this.config.expanded)
+        this.config.expanded = {}
+      return this.config.expanded
+    },
+
+    iframeSize(){
+
+      let width, height
+      switch(this.computedPreviewViewType){
+        case '':
+          width = 390
+          height = 844
+          break
+
+        case 'md:':
+          width = 1024
+          height = 768
+          break
+
+        case 'xl:':
+          width = 1365
+          height = 768
+          break
+
+        case '2xl:':
+          width = 1920
+          height = 1080
+          break
+      }
+
+      return {
+        width,
+        height
+      }
+    },
+
+    leftBar(){
+      if(!this.config.leftBar){
+        this.config.leftBar = {
+          width: 360,
+          tabIndex: 2
+        }
+      }
+
+      return this.config.leftBar
+    },
+
+    previewClass(){
+      return {
+        'overflow-auto': this.config.zoomLevel !== 'fit',
+        'overflow-hidden': this.config.zoomLevel === 'fit',
+      }
+    },
+
+    rightBar(){
+      if(!this.config.rightBar){
+        this.config.rightBar = {
+          width: 360
+        }
+      }
+
+      return this.config.rightBar
+    },
+
+    section1Style(){
+      return {
+        width: this.leftBar.width + 'px'
+      }
+    },
+
+    section3Style(){
+      return {
+        width: this.rightBar.width + 'px'
+      }
+    },
+
+  },
+
+  methods: {
+
+    addComponent({ component, items, isLayout }){
+
+      Object.assign(component.props, {
+        enabled: true
+      })
+      this.setUid(component)
+
+      items.push(component)
+
+      this.config.selectedComponent = [ component.uid ]
+
+      this.$refs.webPageComponentSelector.close()
+    },
+
+    close(){
+      this.$emit('close')
+    },
+
+    findCompByUid(uid, components){
+
+      for(let i in components){
+        const comp = components[i]
+
+        if(comp.uid === uid){
+          return comp
+        }
+        else if(comp.items){
+          const c = this.findCompByUid(uid, comp.items)
+
+          if(c){
+            return c
+          }
+        }
+      }
+    },
+
+    onPostMessageToIframe(uid, data){
+      //this.$refs.iframe.contentWindow.postMessage({ uid, data }, '*')
+    },
+
+    updateIframe(){
+      if(!this.updating){
+        this.updating = true
+        return
+      }
+
+      if(this.$refs.iframe){
+
+        const headers = this.layout && Array.isArray(this.layout.headers) ?
+            this.layout.headers.map((_) => this.createComponentInstance(_)).filter(_=>_) :
+            null
+
+        const footers = this.layout && Array.isArray(this.layout.footers) ?
+            this.layout.footers.map((_) => this.createComponentInstance(_)).filter(_=>_) :
+            null
+
+        const components = (this.page.components ?? []).map((_) => this.createComponentInstance(_)).filter(_=>_)
+
+        const stylesheet = this.layout ? this.createStyleSheet(this.layout.styles) : ''
+
+        this.$refs.iframe.contentWindow.postMessage({
+          action:'update',
+          page: JSON.stringify({
+            headers,
+            footers,
+            components,
+            stylesheet,
+            data: this.page.data,
+            editMode: this.config.previewMode
+          })
+        }, '*')
+      }
+    },
+
+    openComponentSelector(params){
+      this.$refs.webPageComponentSelector.open(params)
+    },
+
+    reloadIframe(){
+
+    },
+
+    resize(){
+
+      const transformOrigin = this.computedPreviewViewType === '' ? 'center top' : '0 0'
+
+      switch(this.config.zoomLevel){
+
+        case 'fit':
+          if(this.$refs.preview){
+            const previewWidth = this.$refs.preview.clientWidth - 50
+            const previewHeight = this.$refs.preview.clientHeight - 70
+
+            let scale = 1
+            switch(this.computedPreviewViewType){
+
+              case 'md:':
+                scale = (previewWidth / 1024).toFixed(2)
+                break
+
+              case 'xl:':
+                scale = (previewWidth / 1365).toFixed(2)
+                break
+
+              case '2xl:':
+                scale = (previewWidth / 1920).toFixed(2)
+                break
+
+              default:
+                scale = (previewHeight / 844).toFixed(2)
+                break
+            }
+            console.log('scale', scale)
+
+            this.iframeStyle = {
+              'transform': `scale(${scale})`,
+              '-webkit-transform': `scale(${scale})`,
+              '-moz-transform': `scale(${scale})`,
+              'transform-origin': transformOrigin,
+              '-webkit-transform-origin': transformOrigin,
+              '-moz-transform-origin': transformOrigin
+            }
+          }
+          break
+
+        case '125%':
+          this.iframeStyle = {
+            'transform': 'scale(1.25)',
+            '-webkit-transform': 'scale(1.25)',
+            '-moz-transform': 'scale(1.25)',
+            'transform-origin': transformOrigin,
+            '-webkit-transform-origin': transformOrigin,
+            '-moz-transform-origin': transformOrigin
+          }
+          break
+
+        case '100%':
+          this.iframeStyle = {
+            'transform': 'scale(1)',
+            '-webkit-transform': 'scale(1)',
+            '-moz-transform': 'scale(1)',
+            'transform-origin': transformOrigin,
+            '-webkit-transform-origin': transformOrigin,
+            '-moz-transform-origin': transformOrigin
+          }
+          break
+
+        case '75%':
+          this.iframeStyle = {
+            'transform': 'scale(.75)',
+            '-webkit-transform': 'scale(.75)',
+            '-moz-transform': 'scale(.75)',
+            'transform-origin': transformOrigin,
+            '-webkit-transform-origin': transformOrigin,
+            '-moz-transform-origin': transformOrigin
+          }
+          break
+
+        case '50%':
+          this.iframeStyle = {
+            'transform': 'scale(.5)',
+            '-webkit-transform': 'scale(.5)',
+            '-moz-transform': 'scale(.5)',
+            'transform-origin': transformOrigin,
+            '-webkit-transform-origin': transformOrigin,
+            '-moz-transform-origin': transformOrigin
+          }
+          break
+
+      }
+    },
+
+    resize1(w){
+      if(this.leftBar.width + w >= 240){
+        this.leftBar.width += w
+      }
+    },
+
+    resize3(w){
+      if(this.rightBar.width - w >= 240){
+        this.rightBar.width -= w
+      }
+    },
+
+    save(){
+      this.$emit('save')
+    },
+
+    select(uid){
+      this.config.selectedComponent = [ uid ]
+    },
+
+    setUid(item){
+      item.uid = md5(Math.random())
+
+      if(Array.isArray(item.items)){
+        for(let subItem of item.items){
+          this.setUid(subItem)
+        }
+      }
+    },
+
+  },
+
+  mounted() {
+
+    Object.assign(this.config, Object.assign({
+      previewMode: 1,
+      version: '0.0.999',
+      layoutMode: false,
+      selectedComponent: null,
+      tabIndex: 2,
+      viewType: 'mobile',
+      previewViewType: '',
+      zoomLevel: 'fit',
+      width: [ 320, 320 ]
+    }, this.config))
+
+    this.$nextTick(() => {
+      this.resize()
+    })
+
+  }
+
+}
+
+</script>
+
+<style module>
+
+.comp{
+  @apply flex-1;
+  @apply hidden md:flex flex-row;
+  @apply divide-x divide-text-50;
+}
+
+.resize1{
+  @apply w-[3px] cursor-ew-resize;
+}
+
+.resize3{
+  @apply w-[3px] cursor-ew-resize;
+}
+
+.zoomLevel{
+  @apply appearance-none bg-base-400 text-center outline-none h-[24px] rounded-md;
+  @apply border-[1px] border-text-100;
+}
+
+</style>