@mixd-id/web-scaffold 0.1.230406116 → 0.1.230406117

package/package.json

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

package/src/components/ListView.vue

@@ -170,9 +170,10 @@ import throttle from "lodash/throttle";
 import { Bar, Line } from 'vue-chartjs'
 import Chart from 'chart.js/auto'
 import dayjs from "dayjs";
+import VirtualTable from "./VirtualTable.vue"
 
 export default{
-	components: {Line, Bar},
+	components: {Line, Bar, VirtualTable},
 
 	emits: [ ],
 
@@ -280,7 +281,7 @@ export default{
       this.$refs.columnMenu.close()
     },
 
-		load(){
+		async load(){
       if(!this.src) return
 
 			this.$refs.table1 ? this.$refs.table1.setState(3) : this.$refs.table2.setState(3)
@@ -491,8 +492,6 @@ export default{
 
 			const items = [ ...this.summary.items ]
 
-			//console.log('#1', this.presetSummary.showColumnTotal, this.presetSummary.showRowTotal, items.length)
-
 			if(this.presetSummary.mode === 'table' && this.presetSummary.table.showColumnTotal){
 				items.forEach((item) => {
 					let total = 0
@@ -504,7 +503,6 @@ export default{
 				})
 			}
 
-
 			if(this.presetSummary.mode === 'table' && this.presetSummary.table.showRowTotal){
 				const totalItem = { dfDate:"Total" }
 				this.summary.items.forEach((item) => {
@@ -523,6 +521,10 @@ export default{
 			return items
 		},
 
+		onResize: throttle(function() {
+			this.calcMediaPrefix()
+		}, 100, { leading:true }),
+
 	},
 
 	inject: [ 'socket', 'socketEmit2', 'toast', 'alert' ],
@@ -791,22 +793,22 @@ export default{
 
 
 	mounted() {
-		window.addEventListener('resize', throttle(() => this.calcMediaPrefix(), 100, { leading:true }))
-		this.calcMediaPrefix()
+		window.addEventListener('resize', this.onResize)
 
-    this.socket.onAny(this.onHooks)
+		this.calcMediaPrefix()
 
-		window.setTimeout(() => {
-			this.loadConfig().then(() => {
-				window.setTimeout(() => {})
-					this.load()
-				}, 1000)
-		}, 201)
+		this.loadConfig().then(() => {
+			this.load()
+				.then(() => {
+					this.subscribe()
+				})
+		})
 
-		this.subscribe()
+		this.socket.onAny(this.onHooks)
   },
 
 	unmounted() {
+		window.removeEventListener('resize', this.onResize)
     this.socket.offAny(this.onHooks)
   },
 

package/src/widgets/WebPageBuilder.vue

@@ -486,8 +486,8 @@ export default{
 			this.$refs.webPageComponentSelector.close()
 		},
 
-		load(){
-			this.socketEmit2('page.open', { uid:this.$route.params.uid })
+		async load(){
+			return this.socketEmit2('page.open', { uid:this.$route.params.uid })
 				.then(({ page, layouts }) => {
 
 					const patchComponents = (items) => {
@@ -780,6 +780,51 @@ export default{
 			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.store.selectedComponent = [ uid ]
+					break
+			}
+		},
+
 		onLayoutItemPaste(items, currentItem, newItem){
 			this.onItemPaste(items, currentItem, newItem, true)
 		},
@@ -823,7 +868,11 @@ export default{
 
 		getPage(){
 			return this.page
-		}
+		},
+
+		onResize: throttle(function() {
+			this.resize()
+		}, 500, { leading:true }),
 
 	},
 
@@ -1079,57 +1128,18 @@ export default{
 	mounted() {
 		this.load()
 
-		window.addEventListener('message', (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.setSubAction)
-						this.$refs.settingComponent.setSubAction(value)
-					break
-
-				case 'component-click':
-					this.store.selectedComponent = [ uid ]
-					break
-			}
-		})
+		window.addEventListener('message', this.onMessage)
+		window.addEventListener('resize', this.onResize)
 
 		this.listen()
 		this.socket.onAny(this.onHooks)
 	},
 
 	unmounted() {
+		window.removeEventListener('resize', this.onResize)
+		window.removeEventListener('message', this.onMessage)
 		this.stopListen()
+		this.socket.offAny(this.onHooks)
 	},
 
 	provide(){