@mixd-id/web-scaffold 0.1.230406311 → 0.1.230406312

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@mixd-id/web-scaffold",
   "private": false,
-  "version": "0.1.230406311",
+  "version": "0.1.230406312",
   "scripts": {
     "dev": "vite serve",
     "build": "vite build",

package/src/App.vue

@@ -4,6 +4,14 @@
 
 <script>
 
+export default {
+  name: 'App',
+
+  setup(){
+
+  }
+}
+
 </script>
 
 <style>
@@ -14,4 +22,4 @@
 <style module>
 
 
-</style>
+</style>

package/src/components/Carousel.vue

@@ -12,8 +12,7 @@
     </div>
 
     <div v-if="items && items.length > 1" :class="$style.carouselNext" @click="next(true)">
-      <slot name="next">
-      </slot>
+      <slot name="next"></slot>
     </div>
 
 		<div v-if="items && items.length > 1" :class="$style.carouselPrev" @click="prev">
@@ -179,7 +178,8 @@ export default{
     },
 
 		play(){
-			this.timeoutId = window.setTimeout(() => { this.next(true); this.play() }, this.autoPlay)
+      if(this.autoPlay > 0)
+			  this.timeoutId = window.setTimeout(() => { this.next(true); this.play() }, this.autoPlay)
 		},
 
 		stop(){

package/src/components/ColorPicker2.vue

@@ -83,7 +83,7 @@ export default{
 
 		select(color){
 			if(this.mode === 'class'){
-				this.$emit('update:modelValue', color ? this.keys[0][0] + color : '')
+				this.$emit('update:modelValue', color ? `${this.prefix}${this.keys[0][0]}` + color : '')
 			}
 			else{
         if(this.valueType === 'rgb'){

package/src/components/Image.vue

@@ -14,7 +14,7 @@
     </slot>
 
     <div v-else-if="status === 2 && actualSrc.indexOf('<svg') >= 0" v-html="actualSrc"></div>
-    <img v-else-if="status === 2" :class="computedItemClass" :src="actualSrc" ref="img" />
+    <img v-else-if="status === 2" :class="computedItemClass" :src="actualSrc" ref="img" :alt="alt" />
 
 		<slot v-else-if="status === 3" name="error" :instance="this"></slot>
 
@@ -45,6 +45,8 @@ export default{
 
   props:{
 
+    alt: String,
+
     eager: {
       type: [ Boolean, String ],
       default: false
@@ -207,9 +209,9 @@ export default{
 			else if(Array.isArray(this.src)){
 
 				const src = {}
-				src['all'] = import.meta.env.VITE_IMAGE_HOST + '/' + this.src[0]
+				src['all'] = this.src[0]
 				if(this.src[1]){
-					src['md'] = import.meta.env.VITE_IMAGE_HOST + '/' + this.src[1]
+					src['md'] = this.src[1]
 				}
 
 				let imgSrc

package/src/components/Modal.vue

@@ -308,7 +308,7 @@ export default{
 
 .bW9k{
 	@apply z-20 hidden w-[100vw] h-[100vh];
-	@apply bg-white/50 backdrop-blur-md;
+	@apply bg-white/50 backdrop-blur-xl;
   position: fixed;
   top: 0;
   left: 0;
@@ -334,7 +334,7 @@ export default{
   background-color: rgba(255, 255, 255, .6)
 }
 html[data-theme='dark'] .modal{
-  background-color: rgba(0, 0, 0, .3)
+  background-color: rgba(0, 0, 0, .6)
 }
 
 .modal.v-show{

package/src/components/Text.vue

@@ -0,0 +1,34 @@
+<template>
+	<component :is="tag" v-html="htmlText2[$device.mediaIndex]"></component>
+</template>
+
+<script>
+
+import {componentMixin} from "../mixin/component";
+
+export default{
+
+  mixins: [ componentMixin ],
+
+  props: {
+
+    tag: {
+      type: String,
+      default: 'div'
+    },
+
+    htmlText2: {
+      type: Array,
+      default: () => []
+    }
+
+  }
+
+}
+
+</script>
+
+<style module>
+
+
+</style>

package/src/components/Textbox.vue

@@ -92,7 +92,7 @@ export default{
 				switch(this.type){
 
 					case 'number':
-						const val = parseInt(this.modelValue)
+						const val = parseFloat(this.modelValue)
 						return isNaN(val) ? '' : val.toLocaleString()
 
 					default:

package/src/components/VirtualTable.vue

@@ -4,7 +4,7 @@
 			<table :class="$style.table" ref="tableHead" :style="tableHeadStyle">
 				<thead>
 				<tr>
-					<th v-for="column in visibleColumns" :style="thStyle(column)"
+					<th v-for="column in visibleColumns" :style="thStyle(column)" :class="thClass(column)"
               v-tooltip="`${column.label ? column.label : column.key}`">
 						<slot v-if="$slots['col-' + column.key]" :name="'col-' + column.key" :column="column"></slot>
 						<div v-else :class="headerColumnClass(column)">
@@ -64,7 +64,7 @@
 				<table :class="$style.table">
 					<tbody>
 					<tr>
-						<td v-for="column in columns" :style="thStyle(column)">
+						<td v-for="column in columns" :style="thStyle(column)" :class="thClass(column)">
 							<slot v-if="$slots[column.key]" :name="column.key" :column="column" :item="items[0]"></slot>
 							<slot v-else-if="$slots.default" name="default" :column="column" :item="items[0]"></slot>
 							<div v-else :class="columnClass(column)" v-html="formatColumn(items[0] ?? {}, column)"></div>
@@ -246,6 +246,16 @@ export default{
 			}
 		},
 
+    thClass(column){
+      let classNames = []
+
+      if(column.align){
+        classNames.push(`text-${column.align}`)
+      }
+
+      return classNames.join(' ')
+    },
+
 		async resize(){
 
 			this.$nextTick(() => {

package/src/index.js

@@ -10,13 +10,13 @@ const uniqid = (additionalKey = '') => {
   return 'u' + Math.random().toString(36).substr(2) + Date.now().toString(36)
 }
 
-const mediaBreakpoints = {
-  640: 'sm',
-  768: 'md',
-  1024: 'lg',
-  1280: 'xl',
-  1536: '2xl',
-}
+const mediaBreakpoints = [
+  [ 640, 'sm:' ],
+  [ 768, 'md:' ],
+  [ 1024, 'lg:' ],
+  [ 1280, 'xl:' ],
+  [ 1536, '2xl:' ],
+]
 
 const download = (url, as) => {
   url = url + (url.indexOf('?') >= 0 ? '&' : '?') + 'nocache=' + new Date().getTime()
@@ -291,14 +291,18 @@ const util = {
 
   calculateMediaPrefix(width){
 
-    let prefix = ''
-    for(let breakpoint in mediaBreakpoints){
+    let media = ''
+    let mediaIndex = 0
+    for(let breakpointIdx in mediaBreakpoints){
+      const [ breakpoint, breakpointPrefix ] = mediaBreakpoints[breakpointIdx]
       if(width > breakpoint){
-        prefix = mediaBreakpoints[breakpoint] ?? prefix
+        media = breakpointPrefix
+        mediaIndex = breakpointIdx
       }
+      else break
     }
 
-    return prefix
+    return { media, mediaIndex }
   },
 
   uniqid
@@ -403,29 +407,9 @@ export default{
     app.config.globalProperties.timeLog = consoleTimeLog
     app.config.globalProperties.timeEnd = consoleTimeEnd
     app.config.globalProperties.$device = reactive({
-
-      getValue: (arr) => {
-        if(Array.isArray(arr)){
-          let index = 0
-          switch(app.config.globalProperties.$device){
-            case 'md':
-              index = 1
-              break
-            case 'lg':
-              index = 2
-              break
-          }
-
-          for(let i = index ; i >= 0 ; i--){
-            if(arr && arr[i])
-              return arr[i]
-          }
-        }
-      },
-
       type: 'mobile',
       media: '',
-
+      mediaIndex: 0
     })
     app.config.globalProperties.$isDebugMode = () => {
       if(!('isDebugMode' in privateVars)){
@@ -477,18 +461,16 @@ export default{
       }
 
       const onWindowResize = throttle(() => {
-
         Object.assign(app.config.globalProperties.$device, {
           type: getDeviceType(),
-          media: util.calculateMediaPrefix(document.documentElement.clientWidth)
+          ...util.calculateMediaPrefix(document.documentElement.clientWidth)
         })
 
         resizeEvents.forEach((fn) => fn())
-      }, 1000, {leading: true})
+      }, 300, {leading: true})
       window.addEventListener('resize', onWindowResize)
 
       app.config.globalProperties.$addResizeListener = (el, fn) => {
-
         if (!resizeObserver) {
           resizeObserver = new ResizeObserver((entries) => {
             for (const entry of entries) {
@@ -515,8 +497,8 @@ export default{
       app.config.globalProperties.$onMounted = () => {
         Object.assign(app.config.globalProperties.$device, {
           type: getDeviceType(),
-          media: util.calculateMediaPrefix(document.documentElement.clientWidth),
-          touchSupported: isTouchSupported()
+          touchSupported: isTouchSupported(),
+          ...util.calculateMediaPrefix(document.documentElement.clientWidth)
         })
       }
     }
@@ -658,6 +640,7 @@ export default{
     app.component('WebPageBuilder', defineAsyncComponent(() => import("./widgets/WebPageBuilder.vue")))
     app.component('WebPageBuilder2', defineAsyncComponent(() => import("./widgets/WebPageBuilder2.vue")))
     app.component('WebPageBuilder3', defineAsyncComponent(() => import("./widgets/WebPageBuilder3.vue")))
+    app.component('WebPageBuilder4', defineAsyncComponent(() => import("./widgets/WebPageBuilder4.vue")))
     app.component('WebPagePreview', defineAsyncComponent(() => import("./widgets/WebPagePreview.vue")))
     app.component('WebComponentSelector', defineAsyncComponent(() => import("./widgets/WebComponentSelector.vue")))
     app.component('WebDatasourceSelector', defineAsyncComponent(() => import("./widgets/WebDatasourceSelector.vue")))
@@ -685,6 +668,7 @@ export default{
     app.component('TypographySetting', defineAsyncComponent(() => import("./widgets/TypographySetting.vue")))
     app.component('FiltersSetting', defineAsyncComponent(() => import("./widgets/FiltersSetting.vue")))
     app.component('MenuEditor', defineAsyncComponent(() => import("./widgets/MenuEditor.vue")))
+    app.component('Text', defineAsyncComponent(() => import("./components/Text.vue")))
   }
 
 }

package/src/main.js

@@ -5,14 +5,6 @@ import { createRouter } from './router'
 import WebScaffold from './index'
 import './index.css'
 
-const AppScaffold = {
-  install: (app, options) => {
-    app.component('PropertyTable', defineAsyncComponent(() => import("./pages/playground/components/PropertyTable.vue")))
-    app.component('Preview', defineAsyncComponent(() => import("./pages/playground/components/Preview.vue")))
-    app.component('SourceCode', defineAsyncComponent(() => import("./pages/playground/components/SourceCode.vue")))
-  }
-}
-
 export function createApp(){
 
   const app = createSSRApp(App)
@@ -22,7 +14,6 @@ export function createApp(){
   app.use(router)
   app.use(pinia)
   app.use(WebScaffold)
-  app.use(AppScaffold)
 
   return { app, router, pinia }
 }

package/src/mixin/component.js

@@ -67,6 +67,7 @@ export const componentMixin = {
     },
 
     htmlText: String,
+    htmlText2: Array,
 
     editSelectable: {
       type: undefined,
@@ -119,7 +120,7 @@ export const componentMixin = {
     },
 
     componentClick(e){
-      if(this.editMode !== 1) return
+      if(!this.editMode) return
 
       e.stopPropagation()
       e.preventDefault()

package/src/utils/preset-selector.js

@@ -995,7 +995,10 @@ const presetToSequelizeList = async(preset, {
       searchReplacements = syntaxSearchOpt.replacements
     }
     else{
-      const match = (config.columns ?? []).filter(_ => (_.search && _.key)).map(_ => _.key)
+      const match = (config.columns ?? [])
+        .filter(_ => (_.search && _.key))
+        .map(_ => typeof _.search === 'string' ? _.search : _.key)
+
       if(match !== null){
         const searchOpt = await searchToSequelizeWhere(search, {
           match

package/src/utils/wss.js

@@ -97,7 +97,12 @@ class WSS extends EventEmitter2{
     this._opt = opt
     this._instance = new WebSocket.Server(opt);
 
-    this._client = redis.createClient()
+    this._client = redis.createClient({
+      socket: {
+        host: process.env.REDIS_HOST ?? '127.0.0.1',
+        port: process.env.REDIS_PORT ?? 6379
+      }
+    })
     this._client.connect().then()
 
     this._instance.on('connection', async (socket, req) => {

package/src/utils/wss.mjs

@@ -128,8 +128,8 @@ class WSS extends EventEmitter2{
 
           if(this._opt.debug){
             status === 200 ?
-              console.log(new Date().getTime() - t1, path, params, data) :
-              console.error(new Date().getTime() - t1, path, params, data)
+              console.log(`${new Date().getTime() - t1}ms`, `l:${JSON.stringify(data ?? '').length}`, path, params, data) :
+              console.error(`${new Date().getTime() - t1}ms`, `l:${JSON.stringify(data ?? '').length}`, path, params, data)
           }
         }
       }

package/src/widgets/WebPageBuilder3.vue

@@ -1,222 +1,7 @@
 <template>
-	<div :class="$style.comp" v-if="page">
-
-    <div class="flex flex-row p-3 pr-5 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>
-
-        <h5 class="mr-5 w-[200px] text-ellipsis whitespace-nowrap overflow-hidden">
-          {{ page.title }}
-        </h5>
-
-      </div>
-
-      <div>
-        <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 overflow-y-auto">
-          <div class="px-3 flex flex-col border-b-[1px] border-text-50 overflow-x-auto">
-            <Tabs :items="tabItems"
-                  class="pt-1"
-                  v-model="config.leftbarTabIndex" />
-          </div>
-
-          <div v-if="config.leftbarTabIndex === 2" class="p-5">
-            <div>
-              <div class="flex flex-row gap-1 items-center cursor-pointer">
-                <strong class="flex-1 text-text-400 line-clamp-1">{{ $t('Headers')}}</strong>
-                <button type="button" class="text-primary flex flex-row items-center gap-1"
-                        @click="$refs.webPageComponentSelector.open(comp => addComponent(layout.headers, comp))">
-                  <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 class="flex flex-col gap-10">
-                <TreeView class="mt-2"
-                          :config="config"
-                          :items="layout.headers"
-                          :selected-item="currentItem"
-                          @change="">
-                  <template #default="{ item, index, parent, depth }">
-                    <div class="flex-1 flex flex-row gap-2">
-                      <div class="flex-1 text-ellipsis whitespace-nowrap overflow-hidden"
-                           :class="!item.props.enabled ? 'line-through' : ''"
-                           @click="config.selectedComponent = item.uid">
-                        {{ item.props.name ?? item.type }}
-                      </div>
-                      <button v-if="Array.isArray(item.items)"
-                              type="button"
-                              @click="$refs.webPageComponentSelector.open(comp => addComponent(item.items, comp))">
-                        <svg width="14" height="14" class="fill-text-300 hover:fill-primary" 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 256C432 269.3 421.3 280 408 280h-160v160c0 13.25-10.75 24.01-24 24.01S200 453.3 200 440v-160h-160c-13.25 0-24-10.74-24-23.99C16 242.8 26.75 232 40 232h160v-160c0-13.25 10.75-23.99 24-23.99S248 58.75 248 72v160h160C421.3 232 432 242.8 432 256z"/></svg>
-                      </button>
-                      <button type="button" @click="parent ? parent.items.splice(index, 1) : layout.headers.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="M193.94 256L296.5 153.44l21.15-21.15c3.12-3.12 3.12-8.19 0-11.31l-22.63-22.63c-3.12-3.12-8.19-3.12-11.31 0L160 222.06 36.29 98.34c-3.12-3.12-8.19-3.12-11.31 0L2.34 120.97c-3.12 3.12-3.12 8.19 0 11.31L126.06 256 2.34 379.71c-3.12 3.12-3.12 8.19 0 11.31l22.63 22.63c3.12 3.12 8.19 3.12 11.31 0L160 289.94 262.56 392.5l21.15 21.15c3.12 3.12 8.19 3.12 11.31 0l22.63-22.63c3.12-3.12 3.12-8.19 0-11.31L193.94 256z"/></svg>
-                      </button>
-                    </div>
-                  </template>
-                </TreeView>
-              </div>
-            </div>
-
-            <div>
-              <div class="flex flex-row gap-1 items-center cursor-pointer">
-                <strong class="flex-1 text-text-400 line-clamp-1">{{ $t('Footers')}}</strong>
-                <button type="button" class="text-primary flex flex-row items-center gap-1"
-                        @click="$refs.webPageComponentSelector.open(comp => addComponent(layout.footers, comp))">
-                  <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 class="flex flex-col gap-10">
-                <TreeView class="mt-2"
-                          :config="config"
-                          :items="layout.footers"
-                          :selected-item="currentItem"
-                          @change="">
-                  <template #default="{ item, index, parent, depth }">
-                    <div class="flex-1 flex flex-row gap-2">
-                      <div class="flex-1 text-ellipsis whitespace-nowrap overflow-hidden"
-                           :class="!item.props.enabled ? 'line-through' : ''"
-                           @click="config.selectedComponent = item.uid">
-                        {{ item.props.name ?? item.type }}
-                      </div>
-                      <button v-if="Array.isArray(item.items)"
-                              type="button"
-                              @click="$refs.webPageComponentSelector.open(comp => addComponent(item.items, comp))">
-                        <svg width="14" height="14" class="fill-text-300 hover:fill-primary" 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 256C432 269.3 421.3 280 408 280h-160v160c0 13.25-10.75 24.01-24 24.01S200 453.3 200 440v-160h-160c-13.25 0-24-10.74-24-23.99C16 242.8 26.75 232 40 232h160v-160c0-13.25 10.75-23.99 24-23.99S248 58.75 248 72v160h160C421.3 232 432 242.8 432 256z"/></svg>
-                      </button>
-                      <button type="button" @click="parent ? parent.items.splice(index, 1) : layout.footers.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="M193.94 256L296.5 153.44l21.15-21.15c3.12-3.12 3.12-8.19 0-11.31l-22.63-22.63c-3.12-3.12-8.19-3.12-11.31 0L160 222.06 36.29 98.34c-3.12-3.12-8.19-3.12-11.31 0L2.34 120.97c-3.12 3.12-3.12 8.19 0 11.31L126.06 256 2.34 379.71c-3.12 3.12-3.12 8.19 0 11.31l22.63 22.63c3.12 3.12 8.19 3.12 11.31 0L160 289.94 262.56 392.5l21.15 21.15c3.12 3.12 8.19 3.12 11.31 0l22.63-22.63c3.12-3.12 3.12-8.19 0-11.31L193.94 256z"/></svg>
-                      </button>
-                    </div>
-                  </template>
-                </TreeView>
-              </div>
-            </div>
-
-            <div>
-              <div class="flex flex-row gap-1 items-center cursor-pointer">
-                <strong class="flex-1 text-text-400 line-clamp-1">{{ $t('Styles')}}</strong>
-                <button type="button" class="text-primary flex flex-row items-center gap-1"
-                        @click="">
-                  <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>
-              <TreeView class="mt-2"
-                        :items="styles"
-                        :selected-item="currentItem"
-                        :config="config"
-                        @change="">
-                <template #default="{ item, index, parent, depth }">
-                  <div class="flex-1 flex flex-row gap-2">
-                    <div class="flex-1 text-ellipsis whitespace-nowrap overflow-hidden"
-                         @click="config.selectedComponent = item.uid">
-                      {{ item.props.name ?? item.type }}
-                    </div>
-                  </div>
-                </template>
-              </TreeView>
-            </div>
-          </div>
-
-          <div v-else-if="config.leftbarTabIndex === 3" class="p-5">
-            <div class="flex flex-row gap-1 items-center cursor-pointer">
-              <strong class="flex-1 text-text-400 line-clamp-1">{{ $t('Components')}}</strong>
-              <button type="button" class="text-primary flex flex-row items-center gap-1"
-                      @click="$refs.webPageComponentSelector.open(comp => addComponent(page.components, comp))">
-                <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>
-
-            <TreeView class="mt-2"
-                      :items="page.components"
-                      :selected-item="currentItem"
-                      :config="config"
-                      @change="">
-              <template #default="{ item, index, parent, depth }">
-                <div class="flex-1 flex flex-row gap-2">
-                  <div class="flex-1 text-ellipsis whitespace-nowrap overflow-hidden"
-                       :class="!item.props.enabled ? 'line-through' : ''"
-                       @click="config.selectedComponent = item.uid">
-                    {{ item.props.name ?? item.type }}
-                  </div>
-                  <button v-if="Array.isArray(item.items)"
-                          type="button"
-                          @click="$refs.webPageComponentSelector.open(comp => addComponent(item.items, comp))">
-                    <svg width="14" height="14" class="fill-text-300 hover:fill-primary" 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 256C432 269.3 421.3 280 408 280h-160v160c0 13.25-10.75 24.01-24 24.01S200 453.3 200 440v-160h-160c-13.25 0-24-10.74-24-23.99C16 242.8 26.75 232 40 232h160v-160c0-13.25 10.75-23.99 24-23.99S248 58.75 248 72v160h160C421.3 232 432 242.8 432 256z"/></svg>
-                  </button>
-                  <button type="button" @click="parent ? parent.items.splice(index, 1) : page.components.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="M193.94 256L296.5 153.44l21.15-21.15c3.12-3.12 3.12-8.19 0-11.31l-22.63-22.63c-3.12-3.12-8.19-3.12-11.31 0L160 222.06 36.29 98.34c-3.12-3.12-8.19-3.12-11.31 0L2.34 120.97c-3.12 3.12-3.12 8.19 0 11.31L126.06 256 2.34 379.71c-3.12 3.12-3.12 8.19 0 11.31l22.63 22.63c3.12 3.12 8.19 3.12 11.31 0L160 289.94 262.56 392.5l21.15 21.15c3.12 3.12 8.19 3.12 11.31 0l22.63-22.63c3.12-3.12 3.12-8.19 0-11.31L193.94 256z"/></svg>
-                  </button>
-                </div>
-              </template>
-            </TreeView>
-          </div>
-
-          <WebComponentSelector ref="webPageComponentSelector"
-                                :components="components"
-                                dismissable="true"
-                                @dismiss="$refs.webPageComponentSelector.close()" />
-        </div>
-
-        <div :class="$style.resize1"
-             @mousedown="(e) => $util.dragResize(e, resize1)"></div>
-
-      </div>
-
-      <div class="flex-1 flex flex-col bg-base-300 dark:bg-base-400 relative">
-
-        <WebPagePreview :config="config"
-                        :page="page"
-                        class="flex-1"
-                        ref="preview"
-                        @message="onIframeMessage" />
-
-      </div>
-
-      <div v-if="currentItem" class="flex flex-row bg-base-400 dark:bg-base-300 border-l-[1px] border-text-50"
-           :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">
-
-          <StyleSetting2 v-if="currentItem.type.startsWith('style:')"
-                         :item="currentItem"
-                         :config="config"
-                         ref="settingComponent" />
-
-          <ComponentSetting3 v-else
-                             :item="currentItem"
-                             :config="config"
-                             ref="settingComponent" />
-
-        </div>
-
-      </div>
-
-    </div>
-
-	</div>
+  <div>
+    <h1>Web Page Builder 3</h1>
+  </div>
 </template>
 
 <script>