@mixd-id/web-scaffold 0.1.230406160 → 0.1.230406161

package/package.json

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

package/src/components/TreeViewItem.vue

@@ -235,11 +235,11 @@ export default{
     },
 
     isSelected(to){
-      if(to){
+      /*if(to){
         this.$el.scrollIntoView({
           behavior: 'smooth',
         })
-      }
+      }*/
     }
 
   },

package/src/widgets/FlexSetting.vue

@@ -4,7 +4,7 @@
 		<div>
 			<div class="grid grid-cols-2 gap-4">
 
-				<div v-if="item.props.direction">
+				<div>
 					<label class="text-text-400">Direction</label>
 					<Dropdown v-for="(_, idx) in viewTypes"
 										v-show="viewType === _.value"
@@ -18,7 +18,7 @@
 					</Dropdown>
 				</div>
 
-				<div v-if="Array.isArray(item.props.gap)">
+				<div>
 					<label class="text-text-400">Gap</label>
 					<Dropdown v-for="(_, idx) in viewTypes"
 										v-show="viewType === _.value"
@@ -38,50 +38,32 @@
 					</Dropdown>
 				</div>
 
-				<div class="col-span-2 flex flex-col gap-4 hidden">
-					<div>
-						<label class="text-text-400">Columns</label>
-						<ListItem :items="item.props.flexColumns">
-							<template v-slot="{ item:obj, index }">
-								<div class="flex flex-row gap-2 mb-1">
-									<Dropdown v-for="(_, idx) in viewTypes"
-														v-show="viewType === _.value"
-														v-model="obj[idx]"
-														class="w-[120px]"
-														@change="$emit('change')">
-										<option value="">Not Set</option>
-										<option :value="`${viewType}basis-1/12`">1</option>
-										<option :value="`${viewType}basis-2/12`">2</option>
-										<option :value="`${viewType}basis-3/12`">3</option>
-										<option :value="`${viewType}basis-4/12`">4</option>
-										<option :value="`${viewType}basis-5/12`">5</option>
-										<option :value="`${viewType}basis-6/12`">6</option>
-										<option :value="`${viewType}basis-7/12`">7</option>
-										<option :value="`${viewType}basis-8/12`">8</option>
-										<option :value="`${viewType}basis-9/12`">9</option>
-										<option :value="`${viewType}basis-10/12`">10</option>
-										<option :value="`${viewType}basis-11/12`">11</option>
-										<option :value="`${viewType}basis-full`">Full</option>
-									</Dropdown>
-									<button type="button" @click="item.props.flexColumns.splice(index, 1);$emit('change')()">Remove</button>
-								</div>
-							</template>
-						</ListItem>
-						<div class="text-center">
-							<button type="button" class="p-3 text-primary" @click="item.props.flexColumns.push([ '', '' ])">Add Column</button>
-						</div>
-					</div>
+				<div>
+					<label class="text-text-400">Wrap</label>
+					<Dropdown v-for="(_, idx) in viewTypes"
+										v-show="viewType === _.value"
+										v-model="wrap[idx]"
+										class="w-[120px]"
+										@change="$emit('change')">
+						<option value="">Not Set</option>
+						<option :value="`${viewType}flex-wrap`">Wrap</option>
+						<option :value="`${viewType}flex-wrap-reverse`">Wrap reverse</option>
+						<option :value="`${viewType}flex-nowrap`">No wrap</option>
+					</Dropdown>
 				</div>
 
 			</div>
 
-			<ComponentSetting :item="item"
-												:view-type="viewType"
-												:view-types="viewTypes"
-												defaultDisplay="flex"
-												@change="$emit('change')" />
+      <br />
+
 		</div>
 
+    <ComponentSetting :item="item"
+                      :view-type="viewType"
+                      :view-types="viewTypes"
+                      defaultDisplay="flex"
+                      @change="$emit('change')" />
+
 	</div>
 </template>
 
@@ -118,6 +100,13 @@ export default{
 				this.item.props.gap = [ 'gap-2' ]
 
 			return this.item.props.gap
+		},
+
+    wrap(){
+			if(!Array.isArray(this.item.props.wrap))
+				this.item.props.wrap = []
+
+			return this.item.props.wrap
 		}
 
 	}

package/src/widgets/WebPageBuilder.vue

@@ -6,14 +6,16 @@
 
 			<div class="flex-1 flex flex-col overflow-y-auto">
 
-				<div class="p-6 flex flex-row gap-4">
+				<div class="p-6 flex flex-row gap-4" @click="currentArea = 'header'">
 					<button type="button" @click="$emit('close')">
 						<svg width="18" height="18" class="fill-text" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><path d="M229.9 473.899l19.799-19.799c4.686-4.686 4.686-12.284 0-16.971L94.569 282H436c6.627 0 12-5.373 12-12v-28c0-6.627-5.373-12-12-12H94.569l155.13-155.13c4.686-4.686 4.686-12.284 0-16.971L229.9 38.101c-4.686-4.686-12.284-4.686-16.971 0L3.515 247.515c-4.686 4.686-4.686 12.284 0 16.971L212.929 473.9c4.686 4.686 12.284 4.686 16.971-.001z"/></svg>
 					</button>
-					<h4 class="whitespace-nowrap text-ellipsis overflow-hidden">{{ page.title }}</h4>
+					<div class="flex-1">
+            <h4 class="whitespace-nowrap text-ellipsis overflow-hidden">{{ page.title }}</h4>
+          </div>
 				</div>
 
-				<div class="flex flex-col items-center pb-6">
+				<div class="flex flex-col items-center pb-6" @click="currentArea = 'header'">
 					<Tabs variant="button" :items="tabItems" v-model="store.tabIndex">
 						<template #tab="{ item }">
 							<div v-if="item.value === 1" v-tooltip="'Page Info'" class="p-1 px-2">
@@ -29,7 +31,7 @@
 					</Tabs>
 				</div>
 
-				<div v-if="store.tabIndex === 1" class="flex flex-col gap-4 p-6">
+				<div v-if="store.tabIndex === 1" class="flex flex-col gap-4 p-6" @click="currentArea = 'pageinfo'">
 
 					<div class="flex flex-row gap-4" v-if="!page.isSystem">
 						<div class="flex flex-col gap-1">
@@ -104,7 +106,7 @@
 				<div v-else-if="store.tabIndex === 2" class="flex-1 overflow-y-auto p-6 flex flex-col gap-6">
 
 					<div>
-						<div class="flex flex-row gap-2">
+						<div class="flex flex-row gap-2" @click="currentArea = 'layout'">
 							<label class="flex-1 text-text-400">{{ $t('Layout')}}</label>
 							<button type="button" class="text-primary" @click="store.layoutMode = !store.layoutMode">
 								{{ store.layoutMode ? 'Hide Layout' : 'Show Layout' }}
@@ -144,13 +146,14 @@
 						</div>
 					</div>
 
-					<div v-if="store.layoutMode && layout && useStyle" class="flex flex-row gap-2">
+					<div v-if="store.layoutMode && layout && useStyle" class="flex flex-row gap-2"
+               @click="currentArea = 'style'">
 						<label class="flex-1 text-text-400">{{ $t('Style')}}</label>
 						<button type="button" class="text-primary"
 										@click="store.selectedComponent = [ 'style' ]">Edit Style</button>
 					</div>
 
-					<div v-if="store.layoutMode && layout">
+					<div v-if="store.layoutMode && layout" @click="currentArea = 'headers'">
 						<div class="flex flex-row gap-2">
 							<label class="flex-1 text-text-400">{{ $t('Header')}}</label>
 							<button type="button" class="text-primary"
@@ -170,7 +173,7 @@
 						</TreeView>
 					</div>
 
-					<div v-if="store.layoutMode && layout">
+					<div v-if="store.layoutMode && layout"  @click="currentArea = 'footers'">
 						<div class="flex flex-row gap-2">
 							<label class="flex-1 text-text-400">{{ $t('Footer')}}</label>
 							<button type="button" class="text-primary"
@@ -190,7 +193,7 @@
 						</TreeView>
 					</div>
 
-					<div>
+					<div @click="currentArea = 'components'">
 						<div class="flex flex-row gap-4">
 							<label class="flex-1 text-text-400">{{ $t('Components')}}</label>
 							<button type="button" class="text-primary"
@@ -216,7 +219,7 @@
 
 				</div>
 
-				<div v-else-if="store.tabIndex === 3" class="flex-1">
+				<div v-else-if="store.tabIndex === 3" class="flex-1" @click="currentArea = 'datasource'">
 
 					<div class="p-6 flex flex-col gap-2">
 						<div v-for="(ds, index) in page.datasource"
@@ -249,7 +252,7 @@
 
 		</div>
 
-		<div class="flex-1 flex flex-col bg-base-400">
+		<div class="flex-1 flex flex-col bg-base-400" @click="currentArea = 'preview'">
 
 			<div class="p-3 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">
@@ -312,6 +315,7 @@
 		</div>
 
 		<div v-if="currentItem" class="flex flex-col bg-base-400 dark:bg-base-300"
+         @click="currentArea = 'properties'"
 			:style="section3Style">
 
 			<div class="px-6 pt-6 pb-4 bg-base-300 flex flex-col">
@@ -514,46 +518,85 @@ export default{
 
 	methods: {
 
-		addComponent({ type, items, isLayout }){
+    addComponent({ type, items, isLayout }){
 
-			let obj = this.availableComponents.find((_) => _.type === type)
-			obj = JSON.parse(JSON.stringify(obj))
+      let obj = this.availableComponents.find((_) => _.type === type)
+      obj = JSON.parse(JSON.stringify(obj))
 
-			Object.assign(obj.props, {
-				enabled: true
-			})
+      Object.assign(obj.props, {
+        enabled: true
+      })
 
-			obj.uid = md5(obj.type + Math.random())
+      obj.uid = md5(obj.type + Math.random())
 
-			items.push(obj)
+      items.push(obj)
 
-			this.store.selectedComponent = [ obj.uid ]
+      this.store.selectedComponent = [ obj.uid ]
 
-			this.$refs.webPageComponentSelector.close()
+      this.$refs.webPageComponentSelector.close()
 
       isLayout ? this.saveLayout() : this.save()
-		},
+    },
 
-		addDatasource(datasource){
+    addDatasource(datasource){
 
-			if(!Array.isArray(this.page.datasource)){
-				this.page.datasource = []
-			}
+      if(!Array.isArray(this.page.datasource)){
+        this.page.datasource = []
+      }
 
-			this.page.datasource.push(datasource)
+      this.page.datasource.push(datasource)
 
-			this.save()
-		},
+      this.save()
+    },
 
-		removeDatasource(index){
-			this.confirm({
-				title:this.$t('Remove this item?'),
-				onConfirm: () => {
-					this.page.datasource.splice(index, 1)
-					this.save()
-				}
-			})
-		},
+    createLayout(layout){
+      this.page.layoutId = layout.id
+      this.save()
+    },
+
+    createComponentInstance(component){
+
+      const compUid = '_' + component.uid.substring(0, 4) + ' '
+
+      const instance = {
+        type: component.type,
+        uid: component.uid,
+
+        class: compUid + this.compClasses.map(key => {
+          return Array.isArray(component.props[key]) ? component.props[key].join(' ') : ''
+        })
+            .filter(_ => _)
+            .join(' '),
+
+        containerClass: this.containerClasses.map(key => {
+          return Array.isArray(component.props[key]) ? component.props[key].join(' ') : ''
+        })
+            .filter(_ => _)
+            .join(' '),
+
+        itemClass: this.itemClasses.map(key => {
+          return Array.isArray(component.props[key]) ? component.props[key].join(' ') : ''
+        })
+            .filter(_ => _)
+            .join(' ')
+      }
+
+      for(let key in component.props){
+        if(!this.compClasses.includes(key) && ![ 'enabled' ].includes(key)){
+          instance[key] = component.props[key]
+        }
+      }
+
+      if(Array.isArray(component.items)){
+        instance.items = component.items.map((_) => this.createComponentInstance(_))
+      }
+
+      if(component.props && Array.isArray(component.props.items)){
+        instance.items = component.props.items
+      }
+
+      return instance
+    },
 
 		copy(){
 			if(!this.currentItem) return
@@ -616,6 +659,88 @@ export default{
 				})
 		},
 
+    onHooks(model, event, items){
+      if(model === 'page' && event === 'update'){
+        items.forEach((item) => {
+          if(item.id === this.page.id){
+            Object.assign(this.page, item)
+            //this.reloadIframe()
+          }
+        })
+      }
+    },
+
+    onMessage(event){
+
+      const { uid, type, value } = event.data ?? {}
+
+      let comp
+      let compType
+      if(uid){
+        comp = this.findCompByUid(uid, this.page.components)
+        if(!comp){
+          comp = this.findCompByUid(uid, this.layout.headers)
+          if(!comp){
+            comp = this.findCompByUid(uid, this.layout.footers)
+            if(comp){
+              compType = 'footers'
+            }
+          }
+          else{
+            compType = 'headers'
+          }
+        }
+        else{
+          compType = 'components'
+        }
+      }
+
+      switch(type){
+
+        case 'setProp':
+          if(comp){
+            Object.assign(comp.props, value)
+            compType === 'components' ? this.save(false) : this.saveLayout(false)
+          }
+          break
+
+        case 'setSubAction':
+          if(this.$refs.settingComponent && this.$refs.settingComponent.setSubAction)
+            this.$refs.settingComponent.setSubAction(value)
+          break
+
+        case 'component-click':
+          this.select(uid)
+          break
+      }
+    },
+
+    onPostMessageToIframe(uid, data){
+      this.$refs.iframe.contentWindow.postMessage({ uid, data }, '*')
+    },
+
+    onSave(reload){
+      if([ 'headers', 'footers', 'style' ].includes(this.store.selectedComponent[1])){
+        this.saveLayout(reload)
+      }
+      else{
+        this.save(reload)
+      }
+    },
+
+    postIframe(data){
+      return new Promise((resolve, reject) => {
+        const handleResponse = (e) => {
+          window.removeEventListener('message', handleResponse)
+          resolve(e.data)
+        }
+
+        window.addEventListener('message', handleResponse)
+
+        this.$refs.iframe.contentWindow.postMessage(data, '*')
+      })
+    },
+
 		reloadIframe(){
 			if(this.$refs.iframe && this.$refs.iframe.contentWindow){
 				this.$refs.iframe.contentWindow.postMessage({
@@ -624,18 +749,15 @@ export default{
 			}
 		},
 
-		postIframe(data){
-			return new Promise((resolve, reject) => {
-				const handleResponse = (e) => {
-					window.removeEventListener('message', handleResponse)
-					resolve(e.data)
-				}
-
-				window.addEventListener('message', handleResponse)
-
-				this.$refs.iframe.contentWindow.postMessage(data, '*')
-			})
-		},
+    removeDatasource(index){
+      this.confirm({
+        title:this.$t('Remove this item?'),
+        onConfirm: () => {
+          this.page.datasource.splice(index, 1)
+          this.save()
+        }
+      })
+    },
 
 		resize(){
 
@@ -726,64 +848,6 @@ export default{
 			}
 		},
 
-		onSave(reload){
-			if([ 'headers', 'footers', 'style' ].includes(this.store.selectedComponent[1])){
-				this.saveLayout(reload)
-			}
-			else{
-				this.save(reload)
-			}
-		},
-
-		createLayout(layout){
-			this.page.layoutId = layout.id
-			this.save()
-		},
-
-		createComponentInstance(component){
-
-			const compUid = '_' + component.uid.substring(0, 4) + ' '
-
-			const instance = {
-				type: component.type,
-				uid: component.uid,
-
-				class: compUid + this.compClasses.map(key => {
-					return Array.isArray(component.props[key]) ? component.props[key].join(' ') : ''
-				})
-					.filter(_ => _)
-					.join(' '),
-
-				containerClass: this.containerClasses.map(key => {
-					return Array.isArray(component.props[key]) ? component.props[key].join(' ') : ''
-				})
-					.filter(_ => _)
-					.join(' '),
-
-				itemClass: this.itemClasses.map(key => {
-					return Array.isArray(component.props[key]) ? component.props[key].join(' ') : ''
-				})
-					.filter(_ => _)
-					.join(' ')
-			}
-
-			for(let key in component.props){
-				if(!this.compClasses.includes(key) && ![ 'enabled' ].includes(key)){
-					instance[key] = component.props[key]
-				}
-			}
-
-			if(Array.isArray(component.items)){
-				instance.items = component.items.map((_) => this.createComponentInstance(_))
-			}
-
-			if(component.props && Array.isArray(component.props.items)){
-				instance.items = component.props.items
-			}
-
-			return instance
-		},
-
 		save: throttle(function(reload = true){
 
 			if(!this.page.instances || typeof this.page.instances !== 'object' || Array.isArray(this.page.instances))
@@ -862,66 +926,6 @@ export default{
 				.catch((err) => this.toast(err))
 		},
 
-		onHooks(model, event, items){
-			if(model === 'page' && event === 'update'){
-				items.forEach((item) => {
-					if(item.id === this.page.id){
-						Object.assign(this.page, item)
-						//this.reloadIframe()
-					}
-				})
-			}
-		},
-
-		onPostMessageToIframe(uid, data){
-			this.$refs.iframe.contentWindow.postMessage({ uid, data }, '*')
-		},
-
-		onMessage(event){
-
-			const { uid, type, value } = event.data ?? {}
-
-			let comp
-			let compType
-			if(uid){
-				comp = this.findCompByUid(uid, this.page.components)
-				if(!comp){
-					comp = this.findCompByUid(uid, this.layout.headers)
-					if(!comp){
-						comp = this.findCompByUid(uid, this.layout.footers)
-						if(comp){
-							compType = 'footers'
-						}
-					}
-					else{
-						compType = 'headers'
-					}
-				}
-				else{
-					compType = 'components'
-				}
-			}
-
-			switch(type){
-
-				case 'setProp':
-					if(comp){
-						Object.assign(comp.props, value)
-						compType === 'components' ? this.save(false) : this.saveLayout(false)
-					}
-					break
-
-				case 'setSubAction':
-					if(this.$refs.settingComponent && this.$refs.settingComponent.setSubAction)
-						this.$refs.settingComponent.setSubAction(value)
-					break
-
-				case 'component-click':
-          this.select(uid)
-					break
-			}
-		},
-
 		remove(item){
 			this.confirm(this.$t('Remove this item?'), {
 				onConfirm: () => {
@@ -933,6 +937,15 @@ export default{
 			})
 		},
 
+    select(uid){
+      this.store.selectedComponent = [ uid ]
+
+      this.$refs.iframe.contentWindow.postMessage({
+        action: 'select',
+        uid
+      }, '*')
+    },
+
 		setUid(item){
 			item.uid = md5(Math.random())
 
@@ -1011,12 +1024,16 @@ export default{
 		}, 500, { leading:true }),
 
 		onKeyDown(e){
-			if(e.keyCode === 67 && (e.metaKey || e.ctrlKey)){
-				//this.copy()
-			}
-			else if(e.keyCode === 86 && (e.metaKey || e.ctrlKey)){
-				//this.paste(e)
-			}
+
+      if([ 'components' ].includes(this.currentArea)){
+        if(e.keyCode === 67 && (e.metaKey || e.ctrlKey)){
+          this.copy()
+        }
+        else if(e.keyCode === 86 && (e.metaKey || e.ctrlKey)){
+          this.paste(e)
+        }
+      }
+
 			/*else if(e.keyCode === 8){
 				if(this.currentItem){
 					this.remove(this.currentItem)
@@ -1024,15 +1041,6 @@ export default{
 			}*/
 		},
 
-    select(uid){
-      this.store.selectedComponent = [ uid ]
-
-      this.$refs.iframe.contentWindow.postMessage({
-        action: 'select',
-        uid
-      }, '*')
-    }
-
 	},
 
 	computed: {
@@ -1246,6 +1254,7 @@ export default{
 				{ type:'Box', name:'Box', props:{ title:'Untitled Box' }, group:'Components' },
 
 			],
+      currentArea: null,
 			iframeStyle: {},
 			iframeSrc: '',
 			host: null,
@@ -1267,14 +1276,13 @@ export default{
 
 			currentComponentItems: null,
 
-
 			compClasses: [
 				'aspectRatio',
 				'bdSize', 'bdColor', 'bdRadius', 'bdStyle',
 				'bgColors', 'bgSize', 'bgPosition', 'bgRepeat',
 				'gap',
 				'padding', 'margin',
-				'direction', 'columns', 'display',
+				'direction', 'columns', 'display', 'wrap',
 				'width', 'minWidth', 'maxWidth',
 				'height', 'minHeight', 'maxHeight',
 				'fontFamily', 'fontSize', 'fontWeight', 'textColor', 'lineHeight', 'overflow',