@mixd-id/web-scaffold 0.1.230406121 → 0.1.230406123

package/package.json

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

package/src/components/ListView.vue

@@ -284,13 +284,15 @@ export default{
 		async load(){
       if(!this.src) return
 
-			this.$refs.table1 ? this.$refs.table1.setState(3) : this.$refs.table2.setState(3)
+			this.$refs.table1 ? this.$refs.table1.setState(3) :
+				(this.$refs.table2 ? this.$refs.table2.setState(3) : null)
 			this.socketEmit2(this.src, { columns:this.config.columns, preset:this.preset })
 				.then((res) => {
 					Object.assign(this.$data, res)
 				})
 				.finally(() => {
-					this.$refs.table1 ? this.$refs.table1.setState(1) : this.$refs.table2.setState(1)
+					this.$refs.table1 ? this.$refs.table1.setState(1) :
+						(this.$refs.table2 ? this.$refs.table2.setState(1) : null)
 				})
 		},
 
@@ -379,12 +381,12 @@ export default{
 								}
 							})
 								.then(({ items }) => {
-									this.$util.unshift(this.items, ...items)
+									items.forEach(item => this.$util.unshift(this.items, item, { highlight: true }))
 								})
 								.catch((err) => console.error(err))
 						}
 						else{
-							this.$util.unshift(this.items, ...items)
+							items.forEach(item => this.$util.unshift(this.items, item, { highlight: true }))
 						}
             break
 

package/src/components/VirtualTable.vue

@@ -30,11 +30,12 @@
 							<th :class="$style.spacer"></th>
 						</tr>
 						</thead>
-						<tbody>
+						<tbody ref="tbody">
 						<tr v-for="(item, index) in visibleItems" :key="item"
 								@click="select(item, index)"
-								:class="[ selectedIndex === ((item && item.id) ? item.id : visibleStartIndex + index) ? $style.trSelected : '', item._highlight ? $style.highlight : '' ].join(' ')">
-							<td v-for="column in visibleColumns">
+								:class="trClass(item)">
+							<td v-for="column in visibleColumns"
+									:class="tdClass(item, column)">
 								<slot v-if="$slots[column.key]" :name="column.key" :column="column" :item="item" :index="visibleStartIndex + index"></slot>
 								<div v-else :class="columnClass(column)" v-html="formatColumn(item, column)"></div>
 							</td>
@@ -160,8 +161,6 @@ export default{
 			const height = (this.items.length * this.itemHeight) + (this.state === 2 ? 48 : 0)
 			const width = this.visibleColumns.reduce((r, item) => r + parseInt(item.width ?? _DEFAULT_COLUMN_WIDTH), 0)
 
-			//console.log('scrollerStyle', { width, height, columns:this.columns })
-
 			return {
 				height: height + 'px',
 				width: width + 'px'
@@ -176,7 +175,11 @@ export default{
 
 		visibleColumns(){
 			return (this.columns ?? []).filter(_ => _.visible)
-		}
+		},
+
+		visibleColumnKeys(){
+			return this.visibleColumns.map(_ => _.key)
+		},
 
 	},
 
@@ -194,6 +197,22 @@ export default{
 
 	methods: {
 
+		trClass(item){
+			const highlight = !!item._highlight && (!Array.isArray(item._highlight) ||
+				this.visibleColumns.filter((_) => item._highlight.includes(_.key)).length <= 0)
+
+			return [
+				this.selectedIndex === ((item && item.id) ? item.id : this.visibleStartIndex + index) ? this.$style.trSelected : '',
+				highlight ? this.$style.highlight : ''
+			].join(' ')
+		},
+
+		tdClass(item, column){
+			if(Array.isArray(item._highlight) && item._highlight.includes(column.key)){
+				return this.$style.highlight
+			}
+		},
+
 		select(item, index){
 			this.selectedIndex = (item && item.id) ? item.id : this.visibleStartIndex + index
 			if(item._highlight){
@@ -462,17 +481,8 @@ export default{
 	@apply bg-primary-200;
 }
 
-.table tbody tr.highlight{
-	animation: highlight 1s 1 forwards;
-}
-@keyframes highlight {
-	0% {
-		@apply bg-transparent;
-	}
-
-	100% {
-		@apply bg-primary-100;
-	}
+.highlight{
+	@apply bg-primary-50 transition-all;
 }
 
 .tdDiv{

package/src/index.js

@@ -181,12 +181,28 @@ const util = {
     }
   },
 
-  unshift: (arr, item, opt = { key:"id" }) => {
+  unshift: (arr, item, opt = {}) => {
+    opt = Object.assign({ key:"id", highlight:false }, opt)
+
     const index = arr.findIndex((_) => _[opt.key] === item[opt.key])
     if(index >= 0){
+
+      const keys = []
+      for(let key in item){
+        if(!(key in arr[index]) || arr[index][key] !== item[key]){
+          keys.push(key)
+        }
+      }
+
+      if(opt.highlight){
+        item._highlight = keys
+      }
       Object.assign(arr[index], item)
     }
     else{
+      if(opt.highlight){
+        item._highlight = true
+      }
       arr.unshift(item)
     }
   },

package/src/themes/default/index.js

@@ -45,7 +45,7 @@ const plugin = Plugin(function({ addBase, config, theme }) {
       "--secondary": '191, 219, 254',
       "--secondary-50": '248, 221, 159',
       "--secondary-100": '246, 214, 139',
-      "--secondary-200": '245, 207, 120',
+      "--secondary-200": '170, 212, 238',
       "--secondary-300": '243, 200, 101',
       "--secondary-400": '174, 209, 252',
       "--secondary-500": '191, 219, 254',
@@ -76,6 +76,8 @@ const plugin = Plugin(function({ addBase, config, theme }) {
       "--primary-200": '27, 44, 74',
 
       "--secondary": '55, 59, 65',
+      "--secondary-100": '92, 72, 25',
+      "--secondary-200": '21, 74, 107',
       "--secondary-500": '55, 59, 65',
       "--secondary-600": '68, 74, 83',
     },

package/src/widgets/BlockSetting.vue

@@ -1,6 +1,12 @@
 <template>
 	<div>
-		<h1>Block Setting</h1>
+
+		<ComponentSetting :item="item"
+											:view-type="viewType"
+											:view-types="viewTypes"
+											defaultDisplay="flex"
+											@change="$emit('change')" />
+
 	</div>
 </template>
 
@@ -25,7 +31,8 @@ export default{
 
 		item: Object,
 
-		viewTypes: Array
+		viewType: String,
+		viewTypes: Array,
 
 	}
 

package/src/widgets/WebPageBuilder.vue

@@ -734,6 +734,9 @@ export default{
 				return
 			}*/
 
+			if(!Array.isArray(this.page.ldjson))
+				this.page.ldjson = []
+
 			'index' in context ?
 				this.page.ldjson[context.index] = context.code :
 				this.page.ldjson.push(context.code);