@mixd-id/web-scaffold 0.1.230406021 → 0.1.230406025

package/package.json

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

package/src/components/ListPage1.vue

@@ -25,7 +25,7 @@
 					</Textbox>
 				</div>
 				<div class="hidden md:block">
-					<slot name="lp-tabspace" :preset="preset"/>
+					<slot name="lp-tabspace" :preset="preset" :extra="extra"/>
 				</div>
 				<div :class="$style.optArea">
 					<Dropdown class="w-[150px]" :value="preset.name" mode="custom" position="bottom-right">
@@ -859,6 +859,8 @@ export default{
 				presetTab: 'column'
 			},
 
+			extra: {},
+
 			mapApiKey: null,
 
 			selectedColumn: null,
@@ -936,6 +938,7 @@ export default{
 				this.isLoading = this.isSummaryLoading = false
 
 				Object.assign(this.configs, data.configs)
+				Object.assign(this.extra, data.extra ?? {})
 				this.mapApiKey = data.mapApiKey
 				this.patchPresets()
 				this.$nextTick(() => {

package/src/components/Textbox.vue

@@ -5,14 +5,7 @@
 			:placeholder="placeholder" :maxlength="maxlength" ref="input" autocomplete="new-password"
 					 :value="displayedValue" @input="onInput" :readonly="Boolean(readonly)"
 			@keydown="onKeyDown"/>
-		<div v-if="!!(errors)">
-			<svg :class="$style.svg" width="24" height="24" class="fill-red-500" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-				<path fill-rule="evenodd" clip-rule="evenodd" d="M12 13.75C12.4142 13.75 12.75 13.4142 12.75 13V8.00001C12.75 7.5858 12.4142 7.25001 12 7.25001C11.5858 7.25001 11.25 7.5858 11.25 8.00001V13C11.25 13.4142 11.5858 13.75 12 13.75Z"/>
-				<path d="M13 16C13 16.5523 12.5523 17 12 17C11.4477 17 11 16.5523 11 16C11 15.4477 11.4477 15 12 15C12.5523 15 13 15.4477 13 16Z"/>
-				<path fill-rule="evenodd" clip-rule="evenodd" d="M12 20.5C16.6944 20.5 20.5 16.6944 20.5 12C20.5 7.30558 16.6944 3.5 12 3.5C7.30558 3.5 3.5 7.30558 3.5 12C3.5 16.6944 7.30558 20.5 12 20.5ZM12 22C17.5228 22 22 17.5228 22 12C22 6.47715 17.5228 2 12 2C6.47715 2 2 6.47715 2 12C2 17.5228 6.47715 22 12 22Z"/>
-			</svg>
-		</div>
-		<button class="mr-2" v-if="[ '1', 1, true, 'true' ].includes(clearable) && state >= 1 && modelValue" type="button" @click="$emit('clear')">
+		<button class="mr-2" v-if="Boolean(clearable) && !Boolean(readonly) && state >= 1 && modelValue" type="button" @click="$emit('clear')">
 			<svg :class="$style.svg" width="19" height="19" viewBox="0 0 24 24" class="fill-text-200" xmlns="http://www.w3.org/2000/svg">
 				<path d="M6.53034 5.46965C6.23745 5.17676 5.76257 5.17676 5.46968 5.46965C5.17679 5.76255 5.17679 6.23742 5.46968 6.53031L10.9393 12L5.46967 17.4697C5.17678 17.7626 5.17678 18.2374 5.46967 18.5303C5.76256 18.8232 6.23744 18.8232 6.53033 18.5303L12 13.0606L17.4697 18.5303C17.7626 18.8232 18.2375 18.8232 18.5303 18.5303C18.8232 18.2374 18.8232 17.7626 18.5303 17.4697L13.0607 12L18.5303 6.53032C18.8232 6.23743 18.8232 5.76256 18.5303 5.46966C18.2374 5.17677 17.7626 5.17677 17.4697 5.46966L12 10.9393L6.53034 5.46965Z"/>
 			</svg>
@@ -35,8 +28,6 @@ export default{
 
 		clearable: [ Boolean, String, Number ],
 
-		customClass: String,
-
 		state: {
 			type: Number,
 			default: 1 // 1:normal, -1:disabled, -2:error
@@ -52,11 +43,6 @@ export default{
 			default: ''
 		},
 
-		errors:{
-			type: [ String, Array ],
-			default: ''
-		},
-
 		modelValue: [ String, Number ],
 
 		value: String,
@@ -68,28 +54,14 @@ export default{
 
 	},
 
-	watch:{
-
-		modelValue(to, from){
-			this.$emit('update:modelValue', to)
-			this.$emit('change', to)
-		}
-
-	},
-
 	computed: {
 
 		computedState(){
-			if(this.errors){
-				return -2
-			}
-			else{
-				return this.state
-			}
+			return this.state
 		},
 
 		computedClass(){
-			return this.customClass ?? [
+			return [
 				this.$style.textbox,
 				this.$style['state-' + this.computedState],
 				this.isActive && !this.readonly ? this.$style.active : '',
@@ -134,10 +106,6 @@ export default{
 
 	},
 
-	mounted() {
-		this.$refs.input.addEventListener('keyup', this.onKeyUp)
-	},
-
 	data(){
 		return {
 			isActive: false
@@ -150,30 +118,21 @@ export default{
 			this.$refs.input.select()
 		},
 
-		onKeyUp(e){
-			if(e.keyCode === 13){
-				this.$emit('submit')
-			}
-			else if(e.keyCode === 27 && this.clearable){
-				this.$emit('clear')
-			}
-		},
-
 		onInput(e){
 			this.$emit('update:modelValue', e.target.value)
-			this.$emit('change', e.target.value)
 		},
 
 		onBlur(e){
 			this.isActive = false
-			this.$emit('blur', e.target.value)
+			this.$emit('blur', e)
 		},
 
 		onKeyDown(e){
 			if([ 'number', 'tel' ].includes(this.type)){
 				if(((e.keyCode >= 48 && e.keyCode <= 57) || (e.keyCode >= 96 && e.keyCode <= 105) ||
-					[ 8, 13 ].includes(e.keyCode)) && !e.ctrlKey && !e.metaKey && !e.shiftKey && !e.altKey);
+					[ 8, 9, 13, 27, 37, 38, 39, 40, 46 ].includes(e.keyCode)) && !e.ctrlKey && !e.metaKey && !e.shiftKey && !e.altKey);
 				else if(e.keyCode === 65 && (e.ctrlKey || e.metaKey));
+				else if(e.keyCode === 82 && (e.ctrlKey || e.metaKey));
 				else{
 					e.preventDefault()
 				}

package/src/components/VirtualTable.vue

@@ -73,6 +73,7 @@
 
 import throttle from "lodash/throttle";
 import dayjs from "dayjs";
+import {accessNestedObject} from "../utils/helpers.mjs";
 
 const _DEFAULT_COLUMN_WIDTH = '100px'
 
@@ -322,16 +323,7 @@ export default{
 
 			let value
 			if((column.key ?? '').toString().indexOf('.') > -1){
-				const columnKeys = column.key.split('.')
-				const columnAs = columnKeys[0]
-				const columnKey = columnKeys[1]
-
-				let columnValue = [];
-				(item[columnAs] ?? []).forEach((item) => {
-					columnValue.push(item[columnKey])
-				})
-
-				value = columnValue.join(',')
+        value = accessNestedObject(item, column.key)
 			}
 			else{
 				value = item[column.key ?? ''] ?? ''

package/src/utils/helpers.mjs

@@ -125,6 +125,22 @@ const uid = function(prefix){
   return (prefix ?? '') + __uid++;
 }
 
+const accessNestedObject = function(obj, path) {
+  const keys = path.split('.');
+  let nestedObj = obj;
+
+  for (let key of keys) {
+    if (nestedObj.hasOwnProperty(key)) {
+      nestedObj = nestedObj[key];
+    } else {
+      // Return undefined if any key in the path is missing
+      return undefined;
+    }
+  }
+
+  return nestedObj;
+}
+
 export {
   downsizeImage,
   uid,
@@ -132,7 +148,8 @@ export {
   csvToArray,
   parseBoolean,
   urlQuery,
-  getQueryString
+  getQueryString,
+  accessNestedObject
 }
 
 function observeInit(){

package/src/utils/listpage1.js

@@ -78,10 +78,13 @@ let ListPage1 = {
 
     const mapApiKey = this.getMapApiKey ? this.getMapApiKey() : undefined
 
+    let extra = this.patchExtra ? await this.patchExtra() : {}
+
     return {
       configs: currentPreset,
       mapApiKey,
-      ...data
+      ...data,
+      extra
     }
   },
 
@@ -449,7 +452,7 @@ let ListPage1 = {
 
     let includes
     if(this.getModelIncludes){
-      includes = this.getModelIncludes(preset)
+      includes = await this.getModelIncludes(preset)
     }
 
     let attributes = { id:1, updatedAt:1 }
@@ -475,6 +478,12 @@ let ListPage1 = {
         }
       })
     }
+    if(typeof this.extraAttributes === 'function'){
+      attributes = {
+        ...attributes,
+        ...((await this.extraAttributes(preset)) ?? {})
+      }
+    }
     attributes = Object.keys(attributes)
 
     if(preset.filters){