@mixd-id/web-scaffold 0.1.230406064 → 0.1.230406065

package/package.json

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

package/src/components/Box.vue

@@ -9,7 +9,12 @@
 export default{
 
   props: {
-    title: String
+
+    title: {
+			type: String,
+			default: 'Box'
+		}
+
 	}
 
 }
@@ -19,7 +24,7 @@ export default{
 <style module>
 
 .comp{
-	@apply flex-1 bg-base-300 flex items-center justify-center;
+	@apply border-[1px] border-text-200 flex items-center justify-center;
 }
 
 </style>

package/src/components/Flex.vue

@@ -0,0 +1,89 @@
+<template>
+	<div :class="computedClass">
+
+		<component v-for="(item, idx) in items"
+							 :is="item.type"
+							 :="item.props"
+							 :items="item.items"
+							 :class="classOf(item, idx)"></component>
+
+	</div>
+</template>
+
+<script>
+
+export default{
+
+	props:{
+		items: Array,
+		type: Array,
+		columnType: Array,
+		columns: Array,
+		gap: Array,
+	},
+
+	computed: {
+
+		computedClass(){
+
+			const classNames = [
+				'flex'
+			]
+
+			if(Array.isArray(this.type)){
+				for(let i in this.type){
+					classNames.push(this.prefixes[i] + 'flex-' + this.type[i])
+				}
+			}
+
+			if(Array.isArray(this.gap)){
+				for(let i in this.gap){
+					classNames.push(this.prefixes[i] + 'gap-' + this.gap[i])
+				}
+			}
+
+			return classNames.join(' ')
+		}
+
+	},
+
+	methods: {
+
+		classOf(item, idx){
+
+			const classNames = []
+			for(let i in this.columns){
+				const column = this.columns[i][idx % this.columns.length]
+
+				if(!column) continue
+
+				if(column && column.width !== 'auto'){
+					classNames.push(`${this.prefixes[i]}w-[${column.width}]`)
+				}
+				else{
+					classNames.push(`${this.prefixes[i]}flex-1`)
+				}
+			}
+			return classNames.join(' ')
+		}
+	},
+
+	data(){
+		return {
+			prefixes: [
+				'',
+				'md:'
+			]
+		}
+	}
+
+}
+
+</script>
+
+<style module>
+
+.comp{
+}
+
+</style>

package/src/components/Grid.vue

@@ -1,29 +1,43 @@
 <template>
   <div :class="gridClass">
-    <component v-for="(item, index) in items" :key="index" :is="item.type" :="item"></component>
+    <component v-for="item in items" :is="item.type" :="item.props" :items="item.items"
+			:class="classOf(item)"></component>
   </div>
 </template>
 
 <script>
 
-const gridCols = [
-  "", "", "grid-cols-2", "grid-cols-3", "grid-cols-4"
-]
-
 export default{
-  name: "Grid",
-  props:[ "type", "items", "columns" ],
+
+	props:{
+		items: Array,
+		columns: undefined,
+		gap: undefined
+	},
+
   computed:{
     gridClass(){
       return [
         "grid",
-        gridCols[this.columns]
+				this.columns[0] ? `grid-cols-${this.columns[0]}` : '',
+				this.columns[1] ? `md:grid-cols-${this.columns[1]}` : '',
+				`gap-${this.gap}`
       ]
         .filter(function(item){ return item.length > 0 })
         .join(' ')
     }
   },
-  mounted(){
-  }
+
+	methods: {
+
+		classOf(item){
+			return [
+				'col-span-' + item.props.colSpan
+			]
+				.join(' ')
+		}
+
+	}
+
 }
-</script>
+</script>

package/src/components/Tabs.vue

@@ -1,5 +1,5 @@
 <template>
-	<div :class="$style.comp">
+	<div :class="computedClass">
 		<button v-for="(item, index) in items" :class="tabClass(item)"
 			@click="onClick(item)" type="button" >
 			<slot v-if="$slots.tab" name="tab" :="{ item, index }"></slot>
@@ -17,13 +17,26 @@ export default{
 	emits: [ 'change', 'update:modelValue' ],
 
 	props: {
+
 		modelValue: undefined,
+
 		bodyClass: String,
-		items: Array
+
+		items: Array,
+
+		variant: {
+			type: String,
+			default: 'comp'
+		}
+
 	},
 
 	computed: {
 
+		computedClass(){
+			return this.$style[this.variant]
+		}
+
 	},
 
 	methods: {
@@ -57,12 +70,10 @@ export default{
 .comp::-webkit-scrollbar {
 	display: none;
 }
-
 .comp>*{
 	@apply border-b-[2px] border-transparent;
 	@apply p-2;
 }
-
 .comp>*[class*="active"]{
 	@apply border-b-[2px] border-primary;
 }
@@ -71,4 +82,26 @@ export default{
 	@apply whitespace-nowrap overflow-hidden;
 }
 
-</style>
+.button{
+	@apply overflow-x-auto;
+	@apply flex flex-row;
+	scrollbar-width: none;
+	@apply border-[1px] border-primary rounded-xl;
+}
+.button>*{
+	@apply p-[1px] px-2 m-[1px];
+}
+.button>*:first-child{
+	@apply rounded-l-lg;
+}
+.button>*:last-child{
+	@apply rounded-r-lg;
+}
+.button>*[class*="active"]{
+	@apply bg-primary text-text-500;
+}
+.button>*[class*="active"] *{
+	@apply text-white;
+}
+
+</style>

package/src/components/Textbox.vue

@@ -47,9 +47,9 @@ export default{
 
 		value: String,
 
-		placeholder: [ String, Number ],
+		placeholder: String,
 		readonly: undefined,
-		maxlength: String,
+		maxlength: [ String, Number ],
 		type: String // text, tel, password, number,
 
 	},

package/src/components/TreeView.vue

@@ -0,0 +1,84 @@
+<template>
+	<div :class="$style.comp">
+
+		<TreeViewItem v-for="(item, index) in modelValue"
+									:item="item"
+									:parent="modelValue"
+									@moveup="moveUp(item)"
+									@movedown="moveDown(item)"
+									@change="$emit('change')"
+									@remove="modelValue.splice(index, 1);$emit('change')"
+									@add="$emit('add')"
+									:create-fn="createFn">
+			<template #default="{ item }">
+				<slot :item="item"></slot>
+			</template>
+		</TreeViewItem>
+
+		<div class="flex flex-row items-center justify-center">
+			<button type="button" class="p-3 text-primary flex flex-row gap-1 items-center" @click="add">
+				<svg width="14" height="14" 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>
+				Add
+			</button>
+		</div>
+
+	</div>
+</template>
+
+<script>
+
+import TreeViewItem from "./TreeViewItem.vue";
+
+export default{
+	components: {TreeViewItem},
+
+	emits: [ 'add', 'change' ],
+
+	props: {
+
+		modelValue: Array,
+
+		createFn: undefined
+
+	},
+
+	methods: {
+
+		moveDown(item){
+			const idx = this.modelValue.indexOf(item)
+			if(idx < this.modelValue.length - 1){
+				this.modelValue.splice(idx + 1, 0, this.modelValue.splice(idx, 1)[0])
+				this.$emit('change')
+			}
+		},
+
+		moveUp(item){
+			const idx = this.modelValue.indexOf(item)
+			if(idx - 1 >= 0){
+				this.modelValue.splice(idx - 1, 0, this.modelValue.splice(idx, 1)[0])
+				this.$emit('change')
+			}
+		},
+
+		add(){
+			if(this.createFn){
+				this.createFn((obj) => {
+					this.modelValue.push(obj)
+					this.$emit('add', this.modelValue[this.modelValue.length - 1])
+				})
+			}
+		}
+
+	}
+
+}
+
+</script>
+
+<style module>
+
+.comp{
+
+}
+
+</style>

package/src/components/TreeViewItem.vue

@@ -0,0 +1,176 @@
+<template>
+	<div>
+		<div ref="item" :class="$style.item"
+				 @mouseover="hoverMouseOver" @mouseout="hoverMouseOut">
+			<div class="cursor-move" ref="drag" @mousedown="mouseDown">
+				<svg width="14" height="14" class="fill-text-300" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 320 512"><path d="M96 32H32C14.33 32 0 46.33 0 64v64c0 17.67 14.33 32 32 32h64c17.67 0 32-14.33 32-32V64c0-17.67-14.33-32-32-32zm0 160H32c-17.67 0-32 14.33-32 32v64c0 17.67 14.33 32 32 32h64c17.67 0 32-14.33 32-32v-64c0-17.67-14.33-32-32-32zm0 160H32c-17.67 0-32 14.33-32 32v64c0 17.67 14.33 32 32 32h64c17.67 0 32-14.33 32-32v-64c0-17.67-14.33-32-32-32zM288 32h-64c-17.67 0-32 14.33-32 32v64c0 17.67 14.33 32 32 32h64c17.67 0 32-14.33 32-32V64c0-17.67-14.33-32-32-32zm0 160h-64c-17.67 0-32 14.33-32 32v64c0 17.67 14.33 32 32 32h64c17.67 0 32-14.33 32-32v-64c0-17.67-14.33-32-32-32zm0 160h-64c-17.67 0-32 14.33-32 32v64c0 17.67 14.33 32 32 32h64c17.67 0 32-14.33 32-32v-64c0-17.67-14.33-32-32-32z"/></svg>
+			</div>
+			<div class="flex flex-col hidden">
+				<button type="button" @click="$emit('moveup')">
+					<svg width="14" height="14" class="fill-text-300" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 320 512"><path d="M32.032 352h255.93c28.425 0 42.767-34.488 22.627-54.627l-127.962-128c-12.496-12.496-32.758-12.497-45.255 0l-127.968 128C-10.695 317.472 3.55 352 32.032 352zM160 192l128 128H32l128-128z"/></svg>
+				</button>
+				<button type="button" @click="$emit('movedown')">
+					<svg width="14" height="14" class="fill-text-300" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 320 512"><path d="M287.968 160H32.038c-28.425 0-42.767 34.488-22.627 54.627l127.962 128c12.496 12.496 32.758 12.497 45.255 0l127.968-128C330.695 194.528 316.45 160 287.968 160zM160 320L32 192h256L160 320z"/></svg>
+				</button>
+			</div>
+			<code class="text-sm">{{ item.type }}</code>
+			<slot :item="item"></slot>
+			<button type="button" class="py-3" @click="$emit('remove')">
+				<svg width="16" height="16" class="fill-primary" 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>
+		<div ref="container" v-if="item && Array.isArray(item.items)" class="ml-8">
+			<TreeViewItem v-for="(subItem, index) in item.items"
+										:create-fn="createFn"
+										:item="subItem"
+										:parent="item.items"
+										@moveup="moveUp(subItem)"
+										@movedown="moveDown(subItem)"
+										@remove="item.items.splice(index, 1);$emit('change')"
+										@add="$emit('add')"
+										@change="$emit('change')">
+				<template #default="{ item }">
+					<slot :item="item"></slot>
+				</template>
+			</TreeViewItem>
+
+			<div class="flex flex-row items-center justify-center mb-2">
+				<button type="button" class="p-1 text-primary flex flex-row gap-1 items-center" @click="add">
+					<svg width="14" height="14" 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>
+					Add
+				</button>
+			</div>
+		</div>
+	</div>
+</template>
+
+<script>
+
+let dragged = null
+
+export default{
+
+	emits: [ 'add', 'change', 'moveup', 'movedown', 'remove' ],
+
+	props: {
+		item: Object,
+
+		createFn: undefined,
+
+		parent: Array
+	},
+
+	methods: {
+
+		moveDown(item){
+			const idx = this.item.items.indexOf(item)
+			if(idx < this.item.items.length - 1){
+				this.item.items.splice(idx + 1, 0, this.item.items.splice(idx, 1)[0])
+				this.$emit('change')
+			}
+		},
+
+		moveUp(item){
+			const idx = this.item.items.indexOf(item)
+			if(idx - 1 >= 0){
+				this.item.items.splice(idx - 1, 0, this.item.items.splice(idx, 1)[0])
+				this.$emit('change')
+			}
+		},
+
+		add(){
+			if(this.createFn){
+				this.createFn((obj) => {
+					this.item.items.push(obj)
+					this.$emit('add', this.item.items[this.item.items.length - 1])
+				})
+			}
+		},
+
+		mouseDown(e){
+
+			e.preventDefault()
+
+			const cloned = this.$el.cloneNode(true)
+			cloned.style.position = 'absolute'
+			cloned.style.left = (e.clientX - 10) + "px"
+			cloned.style.top = (e.clientY - 10) + "px"
+			cloned.style.width = this.$el.clientWidth + "px"
+			cloned.style.pointerEvents = 'none'
+			document.body.appendChild(cloned)
+
+			dragged = {
+				item: this.item,
+				parent: this.parent
+			}
+
+			const mouseMove = (e) => {
+				cloned.style.left = (e.clientX - 10) + "px"
+				cloned.style.top = (e.clientY - 10) + "px"
+			}
+
+			const mouseUp = (e) => {
+				document.body.removeChild(cloned)
+				window.removeEventListener('mousemove', mouseMove)
+				window.removeEventListener('mouseup', mouseUp)
+			}
+
+			window.addEventListener('mousemove', mouseMove)
+			window.addEventListener('mouseup', mouseUp)
+		},
+
+		hoverMouseUp(e){
+
+			if(dragged){
+				const targetIdx = this.parent.indexOf(dragged.target)
+				const startIdx = this.parent.indexOf(dragged.item)
+				if(targetIdx !== startIdx){
+					this.parent.splice(targetIdx, 0, this.parent.splice(startIdx, 1)[0])
+					this.$emit('change')
+				}
+			}
+
+			this.$refs.item.classList.remove(this.$style.itemMouseOver)
+			window.removeEventListener('mouseup', this.hoverMouseUp)
+			dragged = false
+		},
+
+		hoverMouseOver(e){
+
+			if(dragged && dragged.item !== this.item && dragged.parent === this.parent){
+				this.$refs.item.classList.add(this.$style.itemMouseOver)
+				dragged.target = this.item
+				window.addEventListener('mouseup', this.hoverMouseUp)
+			}
+
+		},
+
+		hoverMouseOut(e){
+
+			if(dragged){
+				this.$refs.item.classList.remove(this.$style.itemMouseOver)
+			}
+
+		}
+
+	}
+
+}
+
+</script>
+
+<style module>
+
+.comp{
+
+}
+
+.item{
+	@apply bg-base-400 flex flex-row gap-2 px-3 items-center border-[1px] border-text-200 rounded-lg mb-1;
+}
+
+.itemMouseOver{
+	@apply !bg-primary;
+}
+
+</style>

package/src/index.js

@@ -260,6 +260,8 @@ export default{
     app.component('ListViewMapSummary', defineAsyncComponent(() => import("./components/ListViewMapSummary.vue")))
     app.component('Carousel', defineAsyncComponent(() => import("./components/Carousel.vue")))
     app.component('ContextMenu', defineAsyncComponent(() => import("./components/ContextMenu.vue")))
+    app.component('Flex', defineAsyncComponent(() => import("./components/Flex.vue")))
+    app.component('Grid', defineAsyncComponent(() => import("./components/Grid.vue")))
     app.component('Modal', defineAsyncComponent(() => import("./components/Modal.vue")))
     app.component('OTPField', defineAsyncComponent(() => import("./components/OTPField.vue")))
     app.component('PageBuilder', defineAsyncComponent(() => import("./components/PageBuilder.vue")))
@@ -271,6 +273,8 @@ export default{
     app.component('Textarea', defineAsyncComponent(() => import("./components/Textarea.vue")))
     app.component('Timepicker', defineAsyncComponent(() => import("./components/Timepicker.vue")))
     app.component('Toast', defineAsyncComponent(() => import("./components/Toast.vue")))
+    app.component('TreeView', defineAsyncComponent(() => import("./components/TreeView.vue")))
+    app.component('TreeViewItem', defineAsyncComponent(() => import("./components/TreeViewItem.vue")))
     app.component('VirtualScroll', defineAsyncComponent(() => import("./components/VirtualScroll.vue")))
     app.component('VirtualTable', defineAsyncComponent(() => import("./components/VirtualTable.vue")))
     app.component('Slider', defineAsyncComponent(() => import("./components/Slider.vue")))

package/src/utils/listview.js

@@ -11,83 +11,6 @@ let ListView = {
   model: '',
   channel: '',
 
-  async patch(params, socket){
-
-    const { reset } = params
-
-    let currentPreset
-    const preset = this['loadPreset'] && !reset ? await this.loadPreset() : undefined
-    if(preset){
-      currentPreset = {
-        ...this.getDefaultPresets(),
-        ...preset
-      }
-    }
-    else{
-      currentPreset = {
-        ...this.getDefaultPresets()
-      }
-    }
-
-    for(let i = 0 ; i < currentPreset.presets.length ; i++){
-
-      Object.assign({
-            name: 'Default',
-            columns: [],
-            sorts: [],
-            filters: [],
-            summaries: [],
-          },
-          currentPreset.presets[i])
-
-      if(currentPreset.presets[i].summaries){
-        for(let j = 0 ; j < currentPreset.presets[i].summaries.length ; j++){
-
-          Object.assign({
-                map: {
-                  mapRadius: 16,
-                  mapType: "heatmap",
-                  zoom: 7
-                }
-              },
-              currentPreset.presets[i].summaries[j])
-        }
-      }
-    }
-
-    /*if(this.user && this.socket && this.socket.auth){
-      const { userId } = this.socket.auth
-      const user = await this.user.withId(userId)
-      const preset = await user.loadPreset(this.presetName)
-
-    }
-    else{
-
-    }*/
-
-    const data = await this.load({ preset:currentPreset.presets[currentPreset.presetIdx] })
-
-    if(this.channel && this.socket){
-      if(this.socket.joinWithArgs){
-        this.socket.joinWithArgs(this.channel, { preset:currentPreset.presets[currentPreset.presetIdx] })
-      }
-      else{
-        this.socket.join(this.channel)
-      }
-    }
-
-    const mapApiKey = this.getMapApiKey ? this.getMapApiKey() : undefined
-
-    let extra = this.patchExtra ? await this.patchExtra() : {}
-
-    return {
-      configs: currentPreset,
-      mapApiKey,
-      ...data,
-      extra
-    }
-  },
-
   async load(params){
 
     this.columns = params.columns
@@ -156,7 +79,7 @@ let ListView = {
   async subscribe(params, socket){
     const { name } = params
     if(name){
-      socket.join(this.name)
+      socket.join(name)
     }
   },
 
@@ -1330,6 +1253,8 @@ let ListView = {
 
   async onHooks(model, event, items, socket){
 
+    //console.log('listview.js onHooks', model, event, items)
+
     if(socket.loadParams && socket.loadParams[this.name] && [ 'create', 'update' ].includes(event)){
       const loadParams = { ...socket.loadParams[this.name] }
 

package/src/components/GridColumn.vue

@@ -1,31 +0,0 @@
-<template>
-  <div :class="className">
-    <component v-for="(item, index) in items" :key="index" :is="item.type" :="item"></component>
-  </div>
-</template>
-
-<script>
-
-const rowSpans = [
-  "", "", "row-span-2", "row-span-3", "row-span-4"
-]
-
-export default{
-  name: "GridColumn",
-  props:[ "id", "type", "items", "colSpan", "rowSpan" ],
-  computed:{
-    className(){
-      return [
-        "border-[1px]",
-        "border-gray-300",
-        typeof this.rowSpan !== 'undefined' ? rowSpans[this.rowSpan] : ''
-      ]
-          .filter(function(item){ return item.length > 0 })
-          .join(' ')
-    }
-  },
-  mounted(){
-  }
-}
-
-</script>