@mixd-id/web-scaffold 0.2.240705 → 0.2.250801009

package/src/widgets/WebPageBuilder4.vue

@@ -1,157 +1,107 @@
 <template>
   <div :class="$style.comp">
 
-    <div v-if="page"
-         :class="$style.leftPane"
-         :style="leftStyle"
-         @click="printConfig">
+    <div :class="$style.leftPane"
+         @click="printConfig"
+         :style="leftStyle">
       <div :class="$style.leftBoundary" @mousedown="(e) => $util.dragResize(e, resize1)"></div>
 
-      <div v-if="config.mode === 'layout'" class="flex-1 flex flex-col">
-        <div class="border-b-[1px] border-text-50">
+      <div v-if="config.mode === 'layout'">
+        <div class="border-b-[1px] border-border-50">
           <div class="p-3 flex flex-row items-center gap-3">
             <button type="button" @click="delete config.mode">
-              <svg class="fill-text" height="16" viewBox="0 0 448 512" width="16" xmlns="http://www.w3.org/2000/svg">
-                <!--! Font Awesome Pro 6.0.0-alpha3 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) -->
-                <path
-                    d="M447.1 256C447.1 273.7 433.7 288 416 288H109.3l105.4 105.4c12.5 12.5 12.5 32.75 0 45.25C208.4 444.9 200.2 448 192 448s-16.38-3.125-22.62-9.375l-160-160c-12.5-12.5-12.5-32.75 0-45.25l160-160c12.5-12.5 32.75-12.5 45.25 0s12.5 32.75 0 45.25L109.3 224H416C433.7 224 447.1 238.3 447.1 256z"/>
-              </svg>
+              <svg width="16" height="16" class="fill-text" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><!--! Font Awesome Pro 6.0.0-alpha3 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) --><path d="M447.1 256C447.1 273.7 433.7 288 416 288H109.3l105.4 105.4c12.5 12.5 12.5 32.75 0 45.25C208.4 444.9 200.2 448 192 448s-16.38-3.125-22.62-9.375l-160-160c-12.5-12.5-12.5-32.75 0-45.25l160-160c12.5-12.5 32.75-12.5 45.25 0s12.5 32.75 0 45.25L109.3 224H416C433.7 224 447.1 238.3 447.1 256z"/></svg>
             </button>
             <div class="flex-1 flex flex-col leading-3">
               <small>Layout</small>
-              <Textbox v-model="layout.name" class="flex-1 border-transparent bg-transparent text-lg bg-red-100"
-                       item-class="p-0"/>
+              <Textbox v-model="layout.name" class="flex-1 border-transparent bg-transparent text-lg bg-red-100" item-class="p-0" />
             </div>
             <Button ref="saveBtn"
-                    :state="canSave ? 1 : -1"
                     class="w-[56px]"
+                    :state="canSave ? 1 : -1"
                     @click="save()">
               Save
             </Button>
           </div>
         </div>
 
-        <div class="flex-1 overflow-y-auto">
-          <div class="p-5">
-            <div class="flex flex-row items-center gap-2">
-              <div class="flex-1">
-                <label @click="log(config)">Headers</label>
-              </div>
-              <button class="text-primary" type="button"
-                      @click="$refs.componentSelector.open((component) => layout.headers.push(component))">
-                Add Component
-              </button>
+        <div class="p-5">
+          <div class="flex flex-row items-center gap-2">
+            <div class="flex-1">
+              <label>Headers</label>
             </div>
-            <TreeView v-model="config.selectedUid"
-                      :config="componentsConfig"
-                      :items="layout.headers"
-                      class="mt-2">
-              <template #item="{ item, parent }">
-                <div class="flex-1 p-1 px-3 mb-1 overflow-hidden text-ellipsis cursor-pointer flex flex-row gap-2"
-                     @click="addToCopy(item, parent)">
-                  <div class="flex-1">
-                    <strong>{{ item.name }}</strong>
-                  </div>
-                  <button v-if="item.isContainer"
-                          type="button"
-                          @click="$refs.componentSelector.open(c => item.items.push(c))">
-                    <svg class="fill-text-300 hover:fill-primary-600" height="14" viewBox="0 0 448 512" width="14"
-                         xmlns="http://www.w3.org/2000/svg">
-                      <!--! Font Awesome Pro 6.0.0-alpha3 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) -->
-                      <path
-                          d="M432 256c0 17.69-14.33 32.01-32 32.01H256v144c0 17.69-14.33 31.99-32 31.99s-32-14.3-32-31.99v-144H48c-17.67 0-32-14.32-32-32.01s14.33-31.99 32-31.99H192v-144c0-17.69 14.33-32.01 32-32.01s32 14.32 32 32.01v144h144C417.7 224 432 238.3 432 256z"/>
-                    </svg>
-                  </button>
-                  <button type="button" @click="parent.splice(parent.indexOf(item), 1)">
-                    <svg class="fill-text-300 hover:fill-red-600" height="14" viewBox="0 0 320 512" width="14"
-                         xmlns="http://www.w3.org/2000/svg">
-                      <!--! Font Awesome Pro 6.0.0-alpha3 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) -->
-                      <path
-                          d="M310.6 361.4c12.5 12.5 12.5 32.75 0 45.25C304.4 412.9 296.2 416 288 416s-16.38-3.125-22.62-9.375L160 301.3L54.63 406.6C48.38 412.9 40.19 416 32 416S15.63 412.9 9.375 406.6c-12.5-12.5-12.5-32.75 0-45.25l105.4-105.4L9.375 150.6c-12.5-12.5-12.5-32.75 0-45.25s32.75-12.5 45.25 0L160 210.8l105.4-105.4c12.5-12.5 32.75-12.5 45.25 0s12.5 32.75 0 45.25l-105.4 105.4L310.6 361.4z"/>
-                    </svg>
-                  </button>
-                </div>
-              </template>
-            </TreeView>
+            <button type="button" class="text-primary"
+                    @click="$refs.componentSelector.open((component) => layout.headers.push(component))">
+              Add Component
+            </button>
           </div>
-
-          <div class="p-5">
-            <div class="flex flex-row items-center gap-2">
-              <div class="flex-1">
-                <label>Footers</label>
-              </div>
-              <button class="text-primary" type="button"
-                      @click="$refs.componentSelector.open((component) => layout.footers.push(component))">
-                Add Component
-              </button>
-            </div>
-            <TreeView v-model="config.selectedUid"
-                      :config="componentsConfig"
-                      :items="layout.footers"
-                      class="mt-2">
-              <template #item="{ item, parent }">
-                <div class="flex-1 p-1 px-3 mb-1 overflow-hidden text-ellipsis cursor-pointer flex flex-row gap-2"
-                     @click="addToCopy(item, parent)">
-                  <div class="flex-1">
-                    <strong>{{ item.name }}</strong>
-                  </div>
-                  <button v-if="item.isContainer"
-                          type="button"
-                          @click="$refs.componentSelector.open(c => item.items.push(c))">
-                    <svg class="fill-text-300 hover:fill-primary-600" height="14" viewBox="0 0 448 512" width="14"
-                         xmlns="http://www.w3.org/2000/svg">
-                      <!--! Font Awesome Pro 6.0.0-alpha3 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) -->
-                      <path
-                          d="M432 256c0 17.69-14.33 32.01-32 32.01H256v144c0 17.69-14.33 31.99-32 31.99s-32-14.3-32-31.99v-144H48c-17.67 0-32-14.32-32-32.01s14.33-31.99 32-31.99H192v-144c0-17.69 14.33-32.01 32-32.01s32 14.32 32 32.01v144h144C417.7 224 432 238.3 432 256z"/>
-                    </svg>
-                  </button>
-                  <button type="button" @click="parent.splice(parent.indexOf(item), 1)">
-                    <svg class="fill-text-300 hover:fill-red-600" height="14" viewBox="0 0 320 512" width="14"
-                         xmlns="http://www.w3.org/2000/svg">
-                      <!--! Font Awesome Pro 6.0.0-alpha3 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) -->
-                      <path
-                          d="M310.6 361.4c12.5 12.5 12.5 32.75 0 45.25C304.4 412.9 296.2 416 288 416s-16.38-3.125-22.62-9.375L160 301.3L54.63 406.6C48.38 412.9 40.19 416 32 416S15.63 412.9 9.375 406.6c-12.5-12.5-12.5-32.75 0-45.25l105.4-105.4L9.375 150.6c-12.5-12.5-12.5-32.75 0-45.25s32.75-12.5 45.25 0L160 210.8l105.4-105.4c12.5-12.5 32.75-12.5 45.25 0s12.5 32.75 0 45.25l-105.4 105.4L310.6 361.4z"/>
-                    </svg>
-                  </button>
+          <TreeView :items="layout.headers"
+                    :config="componentsConfig"
+                    v-model="config.selectedUid"
+                    class="mt-2">
+            <template #item="{ item, parent }">
+              <div class="flex-1 p-1 px-3 mb-1 overflow-hidden text-ellipsis cursor-pointer flex flex-row gap-2">
+                <div class="flex-1">
+                  <strong>{{ item.name }}</strong>
                 </div>
-              </template>
-            </TreeView>
-          </div>
-
-          <div class="p-5">
-            <div class="flex flex-row items-center gap-2">
-              <div class="flex-1">
-                <label>Style</label>
+                <button type="button"
+                        v-if="item.isContainer"
+                        @click="$refs.componentSelector.open(c => item.items.push(c))">
+                  <svg width="14" height="14" class="fill-text-300 hover:fill-primary-600" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><!--! Font Awesome Pro 6.0.0-alpha3 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) --><path d="M432 256c0 17.69-14.33 32.01-32 32.01H256v144c0 17.69-14.33 31.99-32 31.99s-32-14.3-32-31.99v-144H48c-17.67 0-32-14.32-32-32.01s14.33-31.99 32-31.99H192v-144c0-17.69 14.33-32.01 32-32.01s32 14.32 32 32.01v144h144C417.7 224 432 238.3 432 256z"/></svg>
+                </button>
+                <button type="button" @click="parent.splice(parent.indexOf(item), 1)">
+                  <svg width="14" height="14" class="fill-text-300 hover:fill-red-600" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 320 512"><!--! Font Awesome Pro 6.0.0-alpha3 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) --><path d="M310.6 361.4c12.5 12.5 12.5 32.75 0 45.25C304.4 412.9 296.2 416 288 416s-16.38-3.125-22.62-9.375L160 301.3L54.63 406.6C48.38 412.9 40.19 416 32 416S15.63 412.9 9.375 406.6c-12.5-12.5-12.5-32.75 0-45.25l105.4-105.4L9.375 150.6c-12.5-12.5-12.5-32.75 0-45.25s32.75-12.5 45.25 0L160 210.8l105.4-105.4c12.5-12.5 32.75-12.5 45.25 0s12.5 32.75 0 45.25l-105.4 105.4L310.6 361.4z"/></svg>
+                </button>
               </div>
-              <button class="text-primary" type="button"
-                      @click="config.selectedUid = 'style'">
-                Edit Style
-              </button>
+            </template>
+          </TreeView>
+        </div>
+
+        <div class="p-5">
+          <div class="flex flex-row items-center gap-2">
+            <div class="flex-1">
+              <label>Footers</label>
             </div>
+            <button type="button" class="text-primary"
+                    @click="$refs.componentSelector.open((component) => layout.footers.push(component))">
+              Add Component
+            </button>
           </div>
+          <TreeView :items="layout.footers"
+                    :config="componentsConfig"
+                    v-model="config.selectedUid"
+                    class="mt-2">
+            <template #item="{ item, parent }">
+              <div class="flex-1 p-1 px-3 mb-1 overflow-hidden text-ellipsis cursor-pointer flex flex-row gap-2">
+                <div class="flex-1">
+                  <strong>{{ item.name }}</strong>
+                </div>
+                <button type="button"
+                        v-if="item.isContainer"
+                        @click="$refs.componentSelector.open(c => item.items.push(c))">
+                  <svg width="14" height="14" class="fill-text-300 hover:fill-primary-600" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><!--! Font Awesome Pro 6.0.0-alpha3 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) --><path d="M432 256c0 17.69-14.33 32.01-32 32.01H256v144c0 17.69-14.33 31.99-32 31.99s-32-14.3-32-31.99v-144H48c-17.67 0-32-14.32-32-32.01s14.33-31.99 32-31.99H192v-144c0-17.69 14.33-32.01 32-32.01s32 14.32 32 32.01v144h144C417.7 224 432 238.3 432 256z"/></svg>
+                </button>
+                <button type="button" @click="parent.splice(parent.indexOf(item), 1)">
+                  <svg width="14" height="14" class="fill-text-300 hover:fill-red-600" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 320 512"><!--! Font Awesome Pro 6.0.0-alpha3 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) --><path d="M310.6 361.4c12.5 12.5 12.5 32.75 0 45.25C304.4 412.9 296.2 416 288 416s-16.38-3.125-22.62-9.375L160 301.3L54.63 406.6C48.38 412.9 40.19 416 32 416S15.63 412.9 9.375 406.6c-12.5-12.5-12.5-32.75 0-45.25l105.4-105.4L9.375 150.6c-12.5-12.5-12.5-32.75 0-45.25s32.75-12.5 45.25 0L160 210.8l105.4-105.4c12.5-12.5 32.75-12.5 45.25 0s12.5 32.75 0 45.25l-105.4 105.4L310.6 361.4z"/></svg>
+                </button>
+              </div>
+            </template>
+          </TreeView>
         </div>
+
       </div>
 
-      <div v-else class="flex-1 flex flex-col">
-        <div class="border-b-[1px] border-text-50">
-          <div class="p-3 flex flex-row items-start gap-3">
-            <button type="button" @click="$emit('close')">
-              <svg class="fill-text hover:fill-red-600" height="16" viewBox="0 0 320 512" width="16"
-                   xmlns="http://www.w3.org/2000/svg">
-                <!--! Font Awesome Pro 6.0.0-alpha3 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) -->
-                <path
-                    d="M312.1 375c9.369 9.369 9.369 24.57 0 33.94s-24.57 9.369-33.94 0L160 289.9l-119 119c-9.369 9.369-24.57 9.369-33.94 0s-9.369-24.57 0-33.94L126.1 256L7.027 136.1c-9.369-9.369-9.369-24.57 0-33.94s24.57-9.369 33.94 0L160 222.1l119-119c9.369-9.369 24.57-9.369 33.94 0s9.369 24.57 0 33.94L193.9 256L312.1 375z"/>
-              </svg>
-            </button>
-            <div v-if="page" class="flex-1 flex flex-col leading-3">
+      <div v-else>
+        <div class="border-b-[1px] border-border-50">
+          <div class="p-3 flex flex-row items-center gap-3">
+            <div class="flex-1 flex flex-col leading-3">
               <small>Page</small>
-              <Textbox v-model="page.name" class="flex-1 border-transparent bg-transparent text-lg bg-red-100"
-                       item-class="p-0"/>
+              <Textbox v-model="page.name" class="flex-1 border-transparent bg-transparent text-lg bg-red-100" item-class="p-0" />
             </div>
             <div>
               <Button ref="saveBtn"
-                      :state="canSave ? 1 : -1"
                       class="w-[56px]"
+                      :state="canSave ? 1 : -1"
                       @click="save()">
                 Save
               </Button>
@@ -159,166 +109,77 @@
           </div>
         </div>
 
-        <div class="flex-1 overflow-y-auto">
+        <div class="p-5">
+          <div class="flex flex-row items-center gap-2">
+            <div class="flex-1">
+              <label>Layout</label>
+            </div>
+            <button type="button" class="text-primary" @click="config.mode = 'layout'">Edit Layout</button>
+          </div>
+          <Dropdown class="mt-1" v-model="page.layoutId">
+            <option v-for="layout in layouts"
+                    :value="layout.id">
+              {{ layout.name }}
+            </option>
+          </Dropdown>
+        </div>
 
-          <div class="p-5">
-            <div class="flex flex-row items-center gap-2">
-              <div class="flex-1">
-                <label>Layout</label>
-              </div>
-              <button v-if="page.layoutId > 0"
-                      class="text-primary"
-                      type="button"
-                      @click="config.mode = 'layout'">
-                Edit Layout
-              </button>
+        <div class="p-5">
+          <div class="flex flex-row items-center gap-2">
+            <div class="flex-1">
+              <label>Components</label>
             </div>
-            <button ref="layoutBtn"
-                    type="button"
-                    class="mt-1 flex flex-row w-full p-2 bg-text-50 border-[1px] border-text-200 rounded-lg"
-                    @click="$refs.layoutList.open($refs.layoutBtn)">
-              <label>{{ layout ? layout.name : 'None' }}</label>
+            <button type="button" class="text-primary"
+                    @click="$refs.componentSelector.open((component) => page.components.push(component))">
+              Add Component
             </button>
-
-            <ContextMenu ref="layoutList" position="bottom-left" width="parent">
-              <div class="flex flex-col min-w-[200px] divide-y divide-text-100 border-[1px] border-text-200 rounded-lg">
-                <button type="button" class="p-2 text-left"
-                        @click="page.layoutId = null">
-                  None
-                </button>
-                <div v-for="layout in layouts"
-                     class="flex flex-row gap-2">
-                  <button type="button"
-                          class="flex-1 p-2 text-left"
-                          @click="page.layoutId = layout.id">
-                    {{ layout.name }}
-                  </button>
-                  <div v-if="layout.id !== page.layoutId" class="flex flex-row">
-                    <button type="button" class="p-2 text-primary"
-                            @click="duplicateLayout(layout)">
-                      <svg width="14" height="14" class="fill-primary" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><!--! Font Awesome Pro 6.0.0-alpha3 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) --><path d="M502.6 70.63l-61.25-61.25C435.4 3.371 427.2 0 418.7 0H255.1c-35.35 0-64 28.66-64 64l.0195 256C192 355.4 220.7 384 256 384h192c35.2 0 64-28.8 64-64V93.25C512 84.77 508.6 76.63 502.6 70.63zM464 320c0 8.836-7.164 16-16 16H255.1c-8.838 0-16-7.164-16-16L239.1 64.13c0-8.836 7.164-16 16-16h128L384 96c0 17.67 14.33 32 32 32h47.1V320zM272 448c0 8.836-7.164 16-16 16H63.1c-8.838 0-16-7.164-16-16L47.98 192.1c0-8.836 7.164-16 16-16H160V128H63.99c-35.35 0-64 28.65-64 64l.0098 256C.002 483.3 28.66 512 64 512h192c35.2 0 64-28.8 64-64v-32h-47.1L272 448z"/></svg>
-                    </button>
-                    <button type="button" class="p-2 text-primary"
-                            @click.stop="confirm($t('Remove this layout?'), () => {})">
-                      <svg width="14" height="14" class="fill-text-300 hover:fill-red-600" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 320 512"><!--! Font Awesome Pro 6.0.0-alpha3 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) --><path d="M312.1 375c9.369 9.369 9.369 24.57 0 33.94s-24.57 9.369-33.94 0L160 289.9l-119 119c-9.369 9.369-24.57 9.369-33.94 0s-9.369-24.57 0-33.94L126.1 256L7.027 136.1c-9.369-9.369-9.369-24.57 0-33.94s24.57-9.369 33.94 0L160 222.1l119-119c9.369-9.369 24.57-9.369 33.94 0s9.369 24.57 0 33.94L193.9 256L312.1 375z"/></svg>
-                    </button>
-                  </div>
+          </div>
+          <TreeView :items="page.components"
+                    :config="componentsConfig"
+                    v-model="config.selectedUid"
+                    class="mt-2">
+            <template #item="{ item, parent }">
+              <div class="flex-1 p-1 px-3 mb-1 overflow-hidden text-ellipsis cursor-pointer flex flex-row gap-2">
+                <div class="flex-1">
+                  <strong>{{ item.name }}</strong>
                 </div>
                 <button type="button"
-                        class="p-2 text-left text-primary"
-                        @click="">
-                  New Layout...
+                        v-if="item.isContainer"
+                        @click="$refs.componentSelector.open(c => item.items.push(c))">
+                  <svg width="14" height="14" class="fill-text-300 hover:fill-primary-600" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><!--! Font Awesome Pro 6.0.0-alpha3 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) --><path d="M432 256c0 17.69-14.33 32.01-32 32.01H256v144c0 17.69-14.33 31.99-32 31.99s-32-14.3-32-31.99v-144H48c-17.67 0-32-14.32-32-32.01s14.33-31.99 32-31.99H192v-144c0-17.69 14.33-32.01 32-32.01s32 14.32 32 32.01v144h144C417.7 224 432 238.3 432 256z"/></svg>
+                </button>
+                <button type="button" @click="parent.splice(parent.indexOf(item), 1)">
+                  <svg width="14" height="14" class="fill-text-300 hover:fill-red-600" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 320 512"><!--! Font Awesome Pro 6.0.0-alpha3 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) --><path d="M310.6 361.4c12.5 12.5 12.5 32.75 0 45.25C304.4 412.9 296.2 416 288 416s-16.38-3.125-22.62-9.375L160 301.3L54.63 406.6C48.38 412.9 40.19 416 32 416S15.63 412.9 9.375 406.6c-12.5-12.5-12.5-32.75 0-45.25l105.4-105.4L9.375 150.6c-12.5-12.5-12.5-32.75 0-45.25s32.75-12.5 45.25 0L160 210.8l105.4-105.4c12.5-12.5 32.75-12.5 45.25 0s12.5 32.75 0 45.25l-105.4 105.4L310.6 361.4z"/></svg>
                 </button>
               </div>
-            </ContextMenu>
-          </div>
-
-          <div class="p-5">
-            <div class="flex flex-row items-center gap-2">
-              <div class="flex-1">
-                <label>Components</label>
-              </div>
-              <button class="text-primary" type="button"
-                      @click="$refs.componentSelector.open((component) => page.components.push(component))">
-                Add Component
-              </button>
-            </div>
-            <TreeView v-model="config.selectedUid"
-                      :config="componentsConfig"
-                      :items="page.components"
-                      class="mt-2">
-              <template #item="{ item, parent }">
-                <div class="flex-1 p-1 px-3 mb-1 overflow-hidden text-ellipsis cursor-pointer flex flex-row gap-2"
-                     @click="addToCopy(item, parent)">
-                  <div class="flex-1">
-                    <strong>{{ item.name }}</strong>
-                  </div>
-                  <button v-if="item.isContainer"
-                          type="button"
-                          @click="$refs.componentSelector.open(c => item.items.push(c))">
-                    <svg class="fill-text-300 hover:fill-primary-600" height="14" viewBox="0 0 448 512" width="14"
-                         xmlns="http://www.w3.org/2000/svg">
-                      <!--! Font Awesome Pro 6.0.0-alpha3 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) -->
-                      <path
-                          d="M432 256c0 17.69-14.33 32.01-32 32.01H256v144c0 17.69-14.33 31.99-32 31.99s-32-14.3-32-31.99v-144H48c-17.67 0-32-14.32-32-32.01s14.33-31.99 32-31.99H192v-144c0-17.69 14.33-32.01 32-32.01s32 14.32 32 32.01v144h144C417.7 224 432 238.3 432 256z"/>
-                    </svg>
-                  </button>
-                  <button type="button" @click="parent.splice(parent.indexOf(item), 1)">
-                    <svg class="fill-text-300 hover:fill-red-600" height="14" viewBox="0 0 320 512" width="14"
-                         xmlns="http://www.w3.org/2000/svg">
-                      <!--! Font Awesome Pro 6.0.0-alpha3 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) -->
-                      <path
-                          d="M310.6 361.4c12.5 12.5 12.5 32.75 0 45.25C304.4 412.9 296.2 416 288 416s-16.38-3.125-22.62-9.375L160 301.3L54.63 406.6C48.38 412.9 40.19 416 32 416S15.63 412.9 9.375 406.6c-12.5-12.5-12.5-32.75 0-45.25l105.4-105.4L9.375 150.6c-12.5-12.5-12.5-32.75 0-45.25s32.75-12.5 45.25 0L160 210.8l105.4-105.4c12.5-12.5 32.75-12.5 45.25 0s12.5 32.75 0 45.25l-105.4 105.4L310.6 361.4z"/>
-                    </svg>
-                  </button>
-                </div>
-              </template>
-            </TreeView>
-          </div>
-
-          <div class="p-5">
-            <div class="flex flex-row items-center gap-2">
-              <div class="flex-1">
-                <label>Data</label>
-              </div>
-              <button class="text-primary" type="button"
-                      @click="$refs.webPageDataEdit.create()">
-                Add Data
-              </button>
-            </div>
-            <TreeView v-model="config.selectedUid"
-                      :config="componentsConfig"
-                      :items="page.data"
-                      class="mt-2">
-              <template #item="{ item, parent }">
-                <div class="flex-1 flex flex-row items-center gap-3 px-2">
-                  <div class="flex-1 p-2">
-                    {{ item.key }}
-                  </div>
-                  <button type="button" @click="page.data.splice(index, 1)">
-                    <svg width="16" height="16" class="fill-text-300 hover:fill-red-500" 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>
-                </div>
-              </template>
-            </TreeView>
-          </div>
-
+            </template>
+          </TreeView>
         </div>
       </div>
 
       <WebPageComponentSelector ref="componentSelector"
-                                @select="(item) => config.selectedUid = item.uid"/>
-
-      <WebPageDataEdit ref="webPageDataEdit" @apply="applyData" />
-
+                                @select="(item) => config.selectedUid = item.uid" />
     </div>
 
     <div :class="$style.centerPane">
 
-      <div class="flex flex-row gap-2 items-start p-3">
-        <div class="flex flex-col gap-2">
-          <div class="flex flex-row gap-2">
-            <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>
-            <select v-model="config.previewMode" :class="$style.zoomLevel" class="w-[70px]" @change="resize()">
-              <option value="design">Design</option>
-              <option value="preview">Preview</option>
-            </select>
-          </div>
-          <Checkbox v-model="config.autoSelect" item-class="items-center">
-            <small>Auto Select</small>
-          </Checkbox>
-        </div>
+      <div class="flex flex-row gap-2 items-center p-3">
+        <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>
+        <select v-model="config.previewMode" class="w-[70px]" :class="$style.zoomLevel" @change="resize()">
+          <option value="design">Design</option>
+          <option value="preview">Preview</option>
+        </select>
         <div class="flex-1"></div>
-        <select v-model="config.viewType"
-                :class="$style.zoomLevel"
+        <select class="p-1 text-sm cursor-pointer bg-text-50 outline-none"
+                v-model="config.viewType"
                 @change="resize">
           <option v-for="_type in viewTypes" :value="_type.value">{{ _type.text }}</option>
         </select>
@@ -326,13 +187,13 @@
 
       <div ref="preview" :class="`${$style.preview}${config.zoomLevel !== 'fit' ? '' : ' ' + $style.fit}`">
 
-        <iframe ref="iframe"
-                :height="iframeSize.height"
-                :src="iframeSrc"
-                :style="iframeStyle"
+        <iframe :src="iframeSrc"
                 :width="iframeSize.width"
+                :height="iframeSize.height"
                 class="mx-auto border-[2px] border-text-300"
-                @load="updateIframe"></iframe>
+                :style="iframeStyle"
+                @load="updateIframe"
+                ref="iframe"></iframe>
 
       </div>
 
@@ -341,21 +202,16 @@
     <div :class="$style.rightPane" :style="rightStyle">
       <div :class="$style.rightBoundary" @mousedown="(e) => $util.dragResize(e, resize2)"></div>
 
-      <div class="p-5" @click="log(selectedComponent)">
-
-        <StyleSetting v-if="config.selectedUid === 'style'"
-                      :config="config"
-                      :index="viewTypeIndex"
-                      :value="layout"
-                      :view-type="config.viewType"/>
-
+      <div class="p-5">
         <component :is="`${selectedComponent?.type}Setting`"
-                   v-else
                    :config="config"
-                   :index="viewTypeIndex"
                    :value="selectedComponent"
-                   :view-type="config.viewType"/>
+                   :index="viewTypeIndex"
+                   :view-type="config.viewType" />
 
+        <pre class="text-xs whitespace-pre">
+          {{ selectedComponent }}
+        </pre>
       </div>
     </div>
 
@@ -367,47 +223,56 @@
 import {defineAsyncComponent} from "vue";
 import TreeView from "./WebPageBuilder4/TreeView.vue";
 import throttle from "lodash/throttle";
-import md5 from "md5";
+/*import ButtonSetting from "./WebPageBuilder4/ButtonSetting.vue";
+import FlexSetting from "./WebPageBuilder4/FlexSetting.vue";
+import ImageSetting from "./WebPageBuilder4/ImageSetting.vue";
+import PaddingSetting from "./WebPageBuilder4/PaddingSetting.vue";
+import WebPageComponentSelector from "./WebPageBuilder4/WebPageComponentSelector.vue";*/
 
-export default {
+export default{
 
   components: {
     ButtonSetting: defineAsyncComponent(() => import('./WebPageBuilder4/ButtonSetting.vue')),
     CarouselSetting: defineAsyncComponent(() => import('./WebPageBuilder4/CarouselSetting.vue')),
-    DataSetting: defineAsyncComponent(() => import('./WebPageBuilder4/DataSetting.vue')),
     FlexSetting: defineAsyncComponent(() => import('./WebPageBuilder4/FlexSetting.vue')),
     GridSetting: defineAsyncComponent(() => import('./WebPageBuilder4/GridSetting.vue')),
     ImageSetting: defineAsyncComponent(() => import('./WebPageBuilder4/ImageSetting.vue')),
-    LinkSetting: defineAsyncComponent(() => import('./WebPageBuilder4/LinkSetting.vue')),
     MarginSetting: defineAsyncComponent(() => import('./WebPageBuilder4/MarginSetting.vue')),
-    MobileMenuSetting: defineAsyncComponent(() => import('./WebPageBuilder4/MobileMenuSetting.vue')),
     PaddingSetting: defineAsyncComponent(() => import('./WebPageBuilder4/PaddingSetting.vue')),
     TextSetting: defineAsyncComponent(() => import('./WebPageBuilder4/TextSetting.vue')),
-    StyleSetting: defineAsyncComponent(() => import('./WebPageBuilder4/StyleSetting.vue')),
-    SvgSetting: defineAsyncComponent(() => import('./WebPageBuilder4/SvgSetting.vue')),
     TreeView,
-    WebPageDataEdit: defineAsyncComponent(() => import('./WebPageBuilder4/WebPageDataEdit.vue')),
     WebPageComponentSelector: defineAsyncComponent(() => import('./WebPageBuilder4/WebPageComponentSelector.vue')),
   },
 
+  emits: [ 'save' ],
+
+  props:{
+    page: {
+      type: Object,
+      default: {}
+    },
+    config: Object,
+    layouts: Array,
+  },
+
   computed: {
 
-    canSave() {
-      if (this.config.mode === 'layout')
+    canSave(){
+      if(this.config.mode === 'layout')
         return JSON.stringify(this.layout) !== this.initialLayout
       return JSON.stringify(this.page) !== this.initialPage
     },
 
-    componentsConfig() {
-      if (!this.config.components)
+    componentsConfig(){
+      if(!this.config.components)
         this.config.components = {}
       return this.config.components
     },
 
-    iframeSize() {
+    iframeSize(){
 
       let width, height
-      switch (this.config.viewType) {
+      switch(this.config.viewType){
         case '':
           width = 390
           height = 844
@@ -418,7 +283,7 @@ export default {
           height = 768
           break
 
-        case 'lg:':
+        case 'xl:':
           width = 1365
           height = 768
           break
@@ -435,16 +300,12 @@ export default {
       }
     },
 
-    iframeSrc() {
-      return `/?edit-mode=${this.config.previewMode}`
+    layout(){
+      return (this.layouts ?? []).find(_ => _.id === this.page?.layoutId)
     },
 
-    layout() {
-      return (this.layouts ?? []).find(_ => _.id === parseInt(this.page?.layoutId))
-    },
-
-    leftBar() {
-      if (!this.config.leftBar) {
+    leftBar(){
+      if(!this.config.leftBar){
         this.config.leftBar = {
           width: 360
         }
@@ -453,27 +314,27 @@ export default {
       return this.config.leftBar
     },
 
-    leftStyle() {
+    leftStyle(){
       return {
         width: this.leftBar.width + 'px'
       }
     },
 
-    previewStyle() {
+    previewStyle(){
       return {
         'overflow-auto !important': this.config.zoomLevel !== 'fit',
         'overflow-hidden !important': this.config.zoomLevel === 'fit',
       }
     },
 
-    rightStyle() {
+    rightStyle(){
       return {
         width: this.rightBar.width + 'px'
       }
     },
 
-    rightBar() {
-      if (!this.config.rightBar) {
+    rightBar(){
+      if(!this.config.rightBar){
         this.config.rightBar = {
           width: 360
         }
@@ -482,40 +343,39 @@ export default {
       return this.config.rightBar
     },
 
-    selectedComponent() {
-      if (!this.config.selectedUid) return
-      if (!this.page) return
+    selectedComponent(){
+      if(!this.config.selectedUid) return
+      if(!this.page) return
 
       const findComponents = (items, uid) => {
-        for (let item of items) {
-          if (item.uid === uid)
+        for(let item of items){
+          if(item.uid === uid)
             return item
 
-          if (item.items) {
+          if(item.items){
             const component = findComponents(item.items, uid)
-            if (component)
+            if(component)
               return component
           }
         }
       }
 
-      if (this.config.mode === 'layout') {
+      if(this.config.mode === 'layout'){
         return findComponents(this.layout.headers ?? [], this.config.selectedUid) ??
             findComponents(this.layout.footers ?? [], this.config.selectedUid)
       }
-      else {
-        return findComponents(this.page.components, this.config.selectedUid) ??
-            findComponents(this.page.data ?? [], this.config.selectedUid)
+      else{
+        return findComponents(this.page.components, this.config.selectedUid)
       }
     },
 
-    viewTypeIndex() {
+    viewTypeIndex(){
       return this.viewTypes.findIndex(v => v.value === this.config.viewType)
     }
 
   },
 
-  data() {
+  data(){
     return {
       compClasses: [
         'aspectRatio', 'position', 'left', 'top', 'right', 'bottom',
@@ -553,91 +413,34 @@ export default {
       ],
       initialPage: null,
       initialLayout: null,
-      iframeStyle: {},
       viewTypes: [
-        {text: 'Mobile', value: ''},
-        {text: 'Tablet', value: 'md:'},
-        {text: 'Desktop', value: 'lg:'},
-        {text: 'TV', value: '2xl:'},
+        { text:'Mobile', value:'' },
+        { text:'Tablet', value:'md:' },
+        { text:'Desktop', value:'xl:' },
+        { text:'TV', value:'2xl:' },
       ],
-      copyItem: {}
+      iframeSrc: '/?edit-mode=1',
+      iframeStyle: {}
     }
   },
 
-  emits: ['close', 'save'],
-
-  inject: [ 'confirm', 'toast' ],
-
   methods: {
 
-    applyData(obj, idx){
-      if(!Array.isArray(this.page.data))
-        this.page.data = []
-
-      idx >= 0 ?
-        Object.assign(this.page.data[idx], obj) :
-        this.page.data.push(obj)
-
-      this.config.selectedUid = obj.uid
-    },
-
-    applyPage(obj) {
-      const {page, layout} = obj
-
-      Object.assign(this.page, page)
-      this.initialPage = JSON.stringify(this.page)
-
-      if(layout){
-        Object.assign(this.layout, layout)
+    applyPage(page){
+      if(page.type === 1){
+        Object.assign(this.layout, page)
         this.initialLayout = JSON.stringify(this.layout)
       }
+      else{
+        Object.assign(this.page, page)
+        this.initialPage = JSON.stringify(this.page)
+      }
     },
 
-    addToCopy(item, parent) {
-      Object.assign(this.copyItem, {
-        item,
-        parent
-      })
-    },
-
-    copy() {
-      if (!this.copyItem) return
-      this.copyItem.copied = JSON.stringify(this.copyItem.item)
-      this.toast('Component copied')
-    },
-
-    duplicateLayout(layout){
-      const newLayout = JSON.parse(JSON.stringify(layout))
-      newLayout.id = -1
-      newLayout.name += ' copy'
-      delete newLayout.uid
-      this.layouts.push(newLayout)
-      this.page.layoutId = newLayout.id
-
-      this.config.mode = 'layout'
-    },
-
-    getPage(){
-      return this.page
-    },
-
-    paste() {
-      if (!this.copyItem || !this.copyItem.copied) return
-
-      const newItem = JSON.parse(this.copyItem.copied)
-      this.setUid(newItem)
-      newItem.name += ' copy'
-
-      this.config.components[newItem.uid] = { childCollapsed:true }
-
-      const itemIndex = this.copyItem.parent.indexOf(this.copyItem.item)
-      this.copyItem.parent.splice(itemIndex + 1, 0, newItem)
-    },
-
-    createComponentInstance(component) {
+    createComponentInstance(component){
 
-      if (!component.uid) return
-      if (!component.props.enabled) return
+      if(!component.uid) return
+      if(!component.props.enabled) return
 
       const compUid = '_' + component.uid.substring(0, 4) + ' '
 
@@ -664,153 +467,99 @@ export default {
             .join(' ')
       }
 
-      for (let key in component.props) {
-        if (!this.compClasses.includes(key) &&
+      for(let key in component.props){
+        if(!this.compClasses.includes(key) &&
             !this.containerClasses.includes(key) &&
             !this.itemClasses.includes(key) &&
-            !['enabled'].includes(key)) {
+            ![ 'enabled' ].includes(key)){
           instance[key] = component.props[key]
         }
       }
 
-      const whitelistProps = ['containerVariant']
+      const whitelistProps = [ 'containerVariant' ]
       whitelistProps.forEach((key) => {
-        if (component.props[key]) {
+        if(component.props[key]){
           instance[key] = component.props[key]
         }
       })
 
-      if (Array.isArray(component.items)) {
-        instance.items = component.items.map((_) => this.createComponentInstance(_)).filter(_ => _)
+      if(Array.isArray(component.items)){
+        instance.items = component.items.map((_) => this.createComponentInstance(_)).filter(_=>_)
       }
 
-      if (component.props && Array.isArray(component.props.items)) {
+      if(component.props && Array.isArray(component.props.items)){
         instance.items = component.props.items
       }
 
       return instance
     },
 
-    createInstance() {
-
-      const headers = (this.layout?.headers ?? []).map((_) => this.createComponentInstance(_)).filter(_ => _)
-      const footers = (this.layout?.footers ?? []).map((_) => this.createComponentInstance(_)).filter(_ => _)
-      const components = (this.page.components ?? []).map((_) => this.createComponentInstance(_)).filter(_ => _)
-
-      return {
-        headers,
-        footers,
-        components,
-        style: this.layout?.style,
-        data: this.page.data
-        //stylesheet,
-        //data: this.page.data,
-        //editMode: this.store.previewMode
-      }
-    },
-
-    findComponentByUid(uid, items) {
+    findComponentByUid(uid, items){
       let component
 
-      for (let item of items) {
-        if (item.uid === uid) {
+      for(let item of items){
+        if(item.uid === uid){
           component = item
           break
-        } else if (Array.isArray(item.items)) {
+        }
+        else if(Array.isArray(item.items)){
           component = this.findComponentByUid(uid, item.items)
-          if (component) break
+          if(component) break
         }
       }
 
       return component
     },
 
-    getComponentIdWithType() {
-
-      const getComponentsWithMethods = (items, methods) => {
-
-        if (Array.isArray(items)) {
-          for (let item of items) {
-
-            if (Array.isArray(item.methods)) {
-              for (let method of item.methods) {
-                if (!methods[method]) methods[method] = []
-                methods[method].push(item)
-              }
-            } else if (item.isContainer) {
-              const childMethods = getComponentsWithMethods(item.items, methods)
-              for (let method in childMethods) {
-                if (!methods[method]) methods[method] = []
-                methods[method].push(...childMethods[method])
-              }
-            }
-
-          }
-        }
-      }
-
-      const methods = {}
-      getComponentsWithMethods(this.page.components, methods)
-      getComponentsWithMethods(this.layout?.headers, methods)
-      getComponentsWithMethods(this.layout?.footers, methods)
-      return methods
-    },
-
-    onKeyDown(e) {
+    onKeyDown(e){
 
-      if (e.altKey) {
-        if ([49, 50, 51, 52].includes(e.keyCode)) {
-          if (e.keyCode === 49) {
+      if(e.altKey){
+        if([ 49, 50, 51, 52 ].includes(e.keyCode)){
+          if(e.keyCode === 49){
             this.config.viewType = ''
-          } else if (e.keyCode === 50) {
+          }
+          else if(e.keyCode === 50){
             this.config.viewType = 'md:'
-          } else if (e.keyCode === 51) {
-            this.config.viewType = 'lg:'
-          } else if (e.keyCode === 52) {
+          }
+          else if(e.keyCode === 51){
+            this.config.viewType = 'xl:'
+          }
+          else if(e.keyCode === 52){
             this.config.viewType = '2xl:'
           }
           this.resize()
-        } else if (e.keyCode === 65) {
-          this.config.autoSelect = !this.config.autoSelect
         }
-      } else if ((e.ctrlKey || e.metaKey) && e.keyCode === 83) {
+      }
+      else if((e.ctrlKey || e.metaKey) && e.keyCode === 83){
         e.preventDefault()
         this.save()
-      } else if ((e.ctrlKey || e.metaKey)) {
-        if (e.keyCode === 67) {
-          this.copy()
-        } else if (e.keyCode === 86) {
-          this.paste()
-        }
       }
 
     },
 
-    onIframeMessage(event) {
-      const {uid, type, value} = event.data ?? {}
+    onIframeMessage(event){
+      const { uid, type, value } = event.data ?? {}
 
-      switch (type) {
+      switch(type) {
 
         case 'mounted':
           this.updateIframe()
           break
 
         case 'component-click':
-          if (!this.config.autoSelect) {
-            return
-          }
 
           let component
-          if (this.config.mode === 'layout') {
+          if(this.config.mode === 'layout'){
             component = this.findComponentByUid(uid, this.layout.headers)
-            if (!component)
+            if(!component)
               component = this.findComponentByUid(uid, this.layout.footers)
-          } else {
+          }
+          else{
             component = this.findComponentByUid(uid, this.page.components)
           }
 
-          if (!component) {
-            if (this.config.mode === 'layout')
+          if(!component){
+            if(this.config.mode === 'layout')
               delete this.config.mode
             else
               this.config.mode = 'layout'
@@ -823,17 +572,17 @@ export default {
       }
     },
 
-    printConfig(e) {
-      if (e.altKey) {
+    printConfig(e){
+      if(e.altKey){
         console.log(this.config)
       }
     },
 
-    resize() {
+    resize(){
 
       const transformOrigin = this.config.viewType === '' ? 'center top' : '0 0'
 
-      switch (this.config.zoomLevel) {
+      switch(this.config.zoomLevel){
 
         case '125%':
           this.iframeStyle = {
@@ -880,18 +629,18 @@ export default {
           break
 
         default:
-          if (this.$refs.preview) {
+          if(this.$refs.preview){
             const previewWidth = this.$refs.preview.clientWidth - 50
             const previewHeight = this.$refs.preview.clientHeight - 70
 
             let scale = 1
-            switch (this.config.viewType) {
+            switch(this.config.viewType){
 
               case 'md:':
                 scale = (previewWidth / 1024).toFixed(2)
                 break
 
-              case 'lg:':
+              case 'xl:':
                 scale = (previewWidth / 1365).toFixed(2)
                 break
 
@@ -917,65 +666,53 @@ export default {
       }
     },
 
-    resize1(w) {
+    resize1(w){
       const nextWidth = this.leftBar.width + w
-      if (nextWidth >= 240 && nextWidth <= 480) {
+      if(nextWidth >= 240 && nextWidth <= 480){
         this.leftBar.width += w
       }
     },
 
-    resize2(w) {
+    resize2(w){
       const nextWidth = this.rightBar.width - w
-      if (nextWidth >= 240 && nextWidth <= 480) {
+      if(nextWidth >= 240 && nextWidth <= 480){
         this.rightBar.width -= w
       }
     },
 
-    resetState() {
+    resetState(){
       this.$refs.saveBtn.resetState()
     },
 
-    save() {
-      if (!this.canSave) return
-
-      this.$emit('save', {
-
-        layout: this.layout ? {
-          ...this.layout,
-          id: this.layout.id === -1 ? null : this.layout.id
-        } : undefined,
-
-        page: {
-          ...this.page,
-          layoutId: this.page.layoutId ? parseInt(this.page.layoutId) : null,
-          instance: this.createInstance()
-        }
+    save(){
+      if(!this.canSave) return
 
-      })
+      this.$emit('save',
+        this.config.mode === 'layout' ? this.layout : this.page
+      )
     },
 
-    setState(state) {
+    setState(state){
       this.$refs.saveBtn.setState(state)
     },
 
-    setUid(item){
-      item.uid = md5(JSON.stringify(item) + new Date().getTime())
-      if (Array.isArray(item.methods))
-        item.props.id = item.uid
-
-      if(Array.isArray(item.items)){
-        for(let subItem of item.items){
-          this.setUid(subItem)
-        }
-      }
-    },
+    updateIframe: throttle(function(){
+      if(!this.$refs.iframe) return
 
-    updateIframe: throttle(function () {
-      if (!this.$refs.iframe) return
+      const headers = (this.layout?.headers ?? []).map((_) => this.createComponentInstance(_)).filter(_=>_)
+      const footers = (this.layout?.footers ?? []).map((_) => this.createComponentInstance(_)).filter(_=>_)
+      const components = (this.page.components ?? []).map((_) => this.createComponentInstance(_)).filter(_=>_)
 
       this.$refs.iframe.contentWindow.postMessage({
-        action: 'update',
-        page: JSON.stringify(this.createInstance())
+        action:'update',
+        page: JSON.stringify({
+          headers,
+          footers,
+          components,
+          //stylesheet,
+          //data: this.page.data,
+          //editMode: this.store.previewMode
+        })
       }, '*')
     }, 300, {
       leading: false,
@@ -984,14 +721,13 @@ export default {
 
   },
 
-  mounted() {
-    Object.assign(this.config, {
-      autoSelect: this.config?.autoSelect ?? true,
-      previewMode: this.config?.previewMode ?? 'design',
-      viewType: this.config?.viewType ?? this.viewTypes[0].value,
-      zoomLevel: this.config?.zoomLevel ?? 'fit',
-    })
+  provide(){
+    return {
+      viewTypes: this.viewTypes
+    }
+  },
 
+  mounted() {
     window.addEventListener('message', this.onIframeMessage)
     window.addEventListener('keydown', this.onKeyDown)
 
@@ -1000,36 +736,18 @@ export default {
     this.resize()
   },
 
-  props: {
-    config: Object,
-    layouts: Array,
-    page: {
-      type: Object,
-      default: {}
-    },
-    store: Object
-  },
-
-  provide() {
-    return {
-      getComponentIdWithType: this.getComponentIdWithType,
-      getPage: this.getPage,
-      viewTypes: this.viewTypes
-    }
-  },
-
   watch: {
 
-    layout: {
+    page: {
       deep: true,
-      handler() {
+      handler(){
         this.updateIframe()
       }
     },
 
-    page: {
+    layout: {
       deep: true,
-      handler() {
+      handler(){
         this.updateIframe()
       }
     },
@@ -1042,43 +760,39 @@ export default {
 
 <style module>
 
-.comp {
+.comp{
   @apply flex-1 flex flex-row;
 }
 
-.leftPane {
+.leftPane{
   @apply relative overflow-y-auto;
-  @apply flex flex-col;
 }
-
-.leftBoundary {
-  @apply absolute top-0 right-0 bottom-0 w-[3px] border-r-[1px] border-text-50 cursor-e-resize;
+.leftBoundary{
+  @apply absolute top-0 right-0 bottom-0 w-[3px] border-r-[1px] border-border-50 cursor-e-resize;
 }
 
-.centerPane {
+.centerPane{
   @apply flex-1 flex flex-col;
 }
 
-.preview {
+.preview{
   @apply flex-1 relative overflow-y-auto;
 }
-
-.preview.fit {
+.preview.fit{
   @apply flex-1 relative overflow-hidden;
 }
 
-.rightPane {
+.rightPane{
   @apply relative overflow-y-auto;
 
 }
-
-.rightBoundary {
-  @apply absolute top-0 left-0 bottom-0 w-[3px] border-l-[1px] border-text-50 cursor-w-resize;
+.rightBoundary{
+  @apply absolute top-0 left-0 bottom-0 w-[3px] border-l-[1px] border-border-50 cursor-w-resize;
 }
 
-.zoomLevel {
-  @apply appearance-none bg-base-400 text-center outline-none h-[24px] rounded-md px-2;
-  @apply border-[1px] border-text-100;
+.zoomLevel{
+  @apply appearance-none bg-base-400 text-center outline-none h-[24px] rounded-md;
+  @apply border-[1px] border-border-100;
 }
 
 </style>