@mixd-id/web-scaffold 0.1.240411028 → 0.1.240411030

package/package.json

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

package/src/components/ContextMenu.vue

@@ -177,6 +177,17 @@ export default {
                 left = Math.round(rect.x)
                 top = Math.round(rect.y + rect.height)
                 transformOrigin = 'top left'
+                maxHeight = window.innerHeight - top - 16
+                this.transition = 'slidedown'
+
+                if(top > window.innerHeight * .8){
+                  top = null
+                  bottom = window.innerHeight - rect.top + 8
+                  transformOrigin = 'bottom'
+                  maxHeight = Math.round(rect.top - 16)
+                  console.log('maxHeight', maxHeight)
+                  this.transition = 'slideup'
+                }
                 break
             }
 
@@ -234,7 +245,7 @@ export default {
 
 .contextMenu{
 	@apply fixed bg-base-300 min-w-[150px] overflow-y-auto rounded-xl z-50;
-	@apply whitespace-nowrap shadow-2xl border-[1px] border-text-50 mt-[1px];
+	@apply whitespace-nowrap shadow-2xl border-[1px] border-text-200 mt-[1px];
 }
 
 @media screen and (min-width: 640px){

package/src/components/List.vue

@@ -985,8 +985,15 @@ export default{
     },
 
     preset(){
-      return this.configPresets.find(_ => _.uid === this.configParams.presetIdx) ??
+      const preset = this.configPresets.find(_ => _.uid === this.configParams.presetIdx) ??
           this.configSharedPresets.find(_ => _.uid === this.configParams.presetIdx)
+
+      if(preset){
+        if(this.$route.query?.search)
+          preset.search = this.$route.query.search
+      }
+
+      return preset
     },
 
     presetSrc(){

package/src/components/ListContextMenu.vue

@@ -0,0 +1,88 @@
+<template>
+  <ContextMenu ref="contextMenu" class="mt-1">
+    <div class="flex flex-col min-w-[200px]">
+
+      <div class="p-1 sticky top-0 bg-base-500" @click.stop>
+        <Textbox :clearable="true" @clear="search = ''" placeholder="Search or add..." v-model="search" />
+      </div>
+
+      <button v-if="viewedItems.length > 0" v-for="text in viewedItems" class="w-full p-3 text-left flex flex-row menu-item"
+              @click="select(text)">
+        {{ text }}
+      </button>
+
+      <button v-else-if="search.length > 0" type="button" class="w-full p-3 text-primary" @click="add(search)">
+        Tambah {{ search }}
+      </button>
+
+    </div>
+  </ContextMenu>
+</template>
+
+<script>
+import ContextMenu from "./ContextMenu.vue";
+
+export default{
+  components: {ContextMenu},
+
+  emits: [ 'select' ],
+
+  props: {
+    items: Array
+  },
+
+  computed: {
+
+    viewedItems(){
+      return (this.items ?? [])
+        .filter(text => {
+          return text.toLowerCase().includes(this.search.toLowerCase())
+        })
+        .sort((a, b) => {
+          return a.toLowerCase().localeCompare(b.toLowerCase())
+        })
+    }
+
+  },
+
+  data(){
+    return {
+      search: '',
+      cb: null
+    }
+  },
+
+  methods: {
+
+    add(text){
+      if(`${text}`.length < 1) return
+
+      this.items.push(text)
+      this.select(text)
+    },
+
+    select(text){
+      this.$emit('select', text)
+      if(typeof this.cb === 'function')
+        this.cb(text)
+    },
+
+    open(caller, cb){
+      this.search = ''
+      this.cb = cb
+      this.$refs.contextMenu.open(caller)
+    }
+
+  }
+
+}
+
+</script>
+
+<style module>
+
+.comp{
+
+}
+
+</style>

package/src/components/Textbox.vue

@@ -74,6 +74,7 @@ export default{
 				this.$style.textbox,
 				this.$style['state-' + this.computedState],
 				this.readonly ? this.$style.readonly : '',
+				this.disabled ? this.$style.disabled : '',
 				this.isActive && !this.readonly ? this.$style.active : '',
 				this.align ? this.$style['align-' + this.align] : '',
 				this.size ? this.$style['size-' + this.size] : ''
@@ -186,7 +187,6 @@ export default{
 }
 
 .textbox.readonly{
-	@apply bg-text-50;
 }
 
 .size-sm input{ @apply text-sm; }

package/src/index.js

@@ -489,6 +489,7 @@ export default{
     app.component('MultiDropdown', defineAsyncComponent(() => import("./components/MultiDropdown.vue")))
     app.component('Carousel', defineAsyncComponent(() => import("./components/Carousel.vue")))
     app.component('ContextMenu', defineAsyncComponent(() => import("./components/ContextMenu.vue")))
+    app.component('ListContextMenu', defineAsyncComponent(() => import("./components/ListContextMenu.vue")))
     app.component('FAQ', defineAsyncComponent(() => import("./widgets/FAQ.vue")))
     app.component('Flex', defineAsyncComponent(() => import("./components/Flex.vue")))
     app.component('Grid', defineAsyncComponent(() => import("./components/Grid.vue")))

package/src/utils/importer.js

@@ -5,6 +5,27 @@ const glob = require("glob");
 const Exceljs = require("exceljs")
 const { saveBuffer, unflatten } = require('./helpers.js')
 
+const getCellText = (cell) => {
+  if(!cell) return ''
+
+  let value = ''
+  if(cell.formulaType === 1){
+    value = cell.result
+  }
+  else if(cell.value?.error){
+    value = '#ERR'
+  }
+  else if(cell.value?.hyperlink){
+    value = cell.value.hyperlink
+  }
+  else{
+    value = cell.value
+  }
+
+  return value
+
+}
+
 const analyseRequest = async(req) => {
 
   const file = req.files[0]
@@ -161,9 +182,7 @@ const importRequest = async(req) => {
         const key = keys[idx]
         if(key.value && columnAddress[key.value]){
           const cell = row.getCell(columnAddress[key.value])
-          let value = cell.formulaType === 1 ? cell.result : cell.value
-          if(value && value.error) value = ''
-          obj[key.key] = value
+          obj[key.key] = getCellText(cell)
         }
       }
 

package/src/utils/wss.js

@@ -131,10 +131,6 @@ class WSS extends EventEmitter2{
         if(subscriber){
           subscriber.unsubscribe(channel, listener)
         }
-
-        if(process.verbose){
-          process.verbose('wss.leave', channel)
-        }
       }
 
       socket.join = (channel) => {
@@ -146,10 +142,6 @@ class WSS extends EventEmitter2{
         if(subscriber) {
           subscriber.subscribe(channel, listener)
         }
-
-        if(process.verbose){
-          process.verbose('wss.join', channel)
-        }
       }
 
       socket.to = (channel) => {
@@ -297,15 +289,6 @@ class WSS extends EventEmitter2{
 
     for(let channel of channels){
       await this._client.publish(channel, JSON.stringify({ model, event, items }))
-
-      if(process.verbose){
-        process.verbose('wss.broadcast', {
-          channel,
-          model,
-          event,
-          items
-        })
-      }
     }
   }
 

package/src/utils/wss.mjs

@@ -186,6 +186,8 @@ class WSS extends EventEmitter2{
     Object.assign(this._opt, opt)
 
     await this.connect(true)
+
+    console.log('RECONNECTED')
   }
 
   sendSync(path, params, cb, err, override){
@@ -222,12 +224,12 @@ class WSS extends EventEmitter2{
           t1: new Date().getTime()
         }
 
-        const timeout = (override ?? {}).timeout ?? this._opt.timeout
+        /*const timeout = (override ?? {}).timeout ?? this._opt.timeout
         setTimeout(() => {
           if(this._callbacks[_requestId] && this._instance.readyState === 1){
             err({ message: 'Timeout' })
           }
-        }, timeout)
+        }, timeout)*/
       })
   }
 

package/src/widgets/WebLayoutSelector.vue

@@ -1,5 +1,5 @@
 <template>
-	<Modal ref="modal" :width="computedWidth" height="600">
+	<Modal ref="modal" width="420" height="480">
 		<template v-slot:head>
 			<div class="relative p-6">
 				<h3>{{ $t('Create Layout') }}</h3>
@@ -23,13 +23,10 @@
 
         <div>
           <label class="text-text-400">Layouts</label>
-          <div class="grid grid-cols-4 gap-2">
-            <div v-for="template in templates"
-                 :class="$style.templateItem + (instance === template ? ' ' + $style.active : '')"
-                 @click="applyTemplate(template)">
-              <Image :src="template.imageUrl" class="aspect-[1/2]"/>
-              <label>{{ template.layout.name }} </label>
-            </div>
+          <div class="grid grid-cols-4 gap-2 mt-3">
+            <Radio v-for="(template, index) in templates" v-model="instance.templateIndex" :value="index">
+              {{ template.layout.name }}
+            </Radio>
           </div>
         </div>
 
@@ -37,7 +34,7 @@
 		</template>
 
     <template v-slot:foot>
-      <div class="p-5 flex justify-end">
+      <div class="p-5 flex">
         <Button class="w-[100px]"
                 ref="applyBtn"
                 :state="canApply ? 1 : -1"
@@ -68,182 +65,6 @@ export default{
 						footers: []
 					}
 				},
-				{
-					imageUrl: '/assets/templates/layout1.png',
-					layout: {
-						name: 'Nike',
-						headers: [
-							{
-								"type": "Flex",
-								"name": "Flex",
-								"group": "Layouts",
-								"items": [
-									{
-										"type": "Image",
-										"name": "Image",
-										"group": "Components",
-										"props": {
-											"src": [
-												"66aafad893b123b69dfcf4ef0f850537.png"
-											],
-											"enabled": true,
-											"aspectRatio": [],
-											"display": [],
-											"opacity": [],
-											"padding": [],
-											"margin": [],
-											"width": [],
-											"minWidth": [],
-											"maxWidth": [],
-											"height": [
-												"h-10vh"
-											],
-											"minHeight": [],
-											"maxHeight": [],
-											"overflow": [],
-											"colSpan": [],
-											"bgColors": [],
-											"bgImage": [
-												{},
-												{}
-											],
-											"bgSize": [],
-											"bgPosition": [],
-											"bgRepeat": [],
-											"bdSize": [],
-											"bdColor": [],
-											"bdRadius": [],
-											"bdStyle": [],
-											"boxShadow": []
-										},
-										"uid": "e9431764daac79e6d12eaaffb6db048b",
-										"instance": {
-											"type": "Image",
-											"uid": "e9431764daac79e6d12eaaffb6db048b",
-											"class": "h-10vh",
-											"src": [
-												"66aafad893b123b69dfcf4ef0f850537.png"
-											],
-											"bgImage": [
-												{},
-												{}
-											]
-										}
-									}
-								],
-								"props": {
-									"flexColumns": [],
-									"direction": [
-										"flex-col"
-									],
-									"gap": [],
-									"enabled": true,
-									"display": [],
-									"opacity": [],
-									"padding": [],
-									"margin": [],
-									"width": [],
-									"minWidth": [],
-									"maxWidth": [],
-									"height": [],
-									"minHeight": [],
-									"maxHeight": [],
-									"overflow": [],
-									"colSpan": [],
-									"bgColors": [
-										"bg-white"
-									],
-									"bgImage": [
-										{},
-										{}
-									],
-									"bgSize": [],
-									"bgPosition": [],
-									"bgRepeat": [],
-									"bdSize": [],
-									"bdColor": [],
-									"bdRadius": [],
-									"bdStyle": [],
-									"boxShadow": []
-								},
-								"uid": "f121447f5dbb20f624b2cc1c45508005",
-								"instance": {
-									"type": "Flex",
-									"uid": "f121447f5dbb20f624b2cc1c45508005",
-									"class": "bg-white flex-col",
-									"flexColumns": [],
-									"bgImage": [
-										{},
-										{}
-									],
-									"items": [
-										{
-											"type": "Image",
-											"name": "Image",
-											"group": "Components",
-											"props": {
-												"src": [
-													"66aafad893b123b69dfcf4ef0f850537.png"
-												],
-												"enabled": true,
-												"aspectRatio": [],
-												"display": [],
-												"opacity": [],
-												"padding": [],
-												"margin": [],
-												"width": [],
-												"minWidth": [],
-												"maxWidth": [],
-												"height": [
-													"h-10vh"
-												],
-												"minHeight": [],
-												"maxHeight": [],
-												"overflow": [],
-												"colSpan": [],
-												"bgColors": [],
-												"bgImage": [
-													{},
-													{}
-												],
-												"bgSize": [],
-												"bgPosition": [],
-												"bgRepeat": [],
-												"bdSize": [],
-												"bdColor": [],
-												"bdRadius": [],
-												"bdStyle": [],
-												"boxShadow": []
-											},
-											"uid": "e9431764daac79e6d12eaaffb6db048b",
-											"instance": {
-												"type": "Image",
-												"uid": "e9431764daac79e6d12eaaffb6db048b",
-												"class": "h-10vh",
-												"src": [
-													"66aafad893b123b69dfcf4ef0f850537.png"
-												],
-												"bgImage": [
-													{},
-													{}
-												]
-											}
-										}
-									]
-								}
-							}
-						],
-						footers: []
-					}
-				},
-				{
-					imageUrl: '/assets/templates/layout2.png',
-					layout: {
-						name: 'Apple',
-						headers: [],
-						footers: []
-					}
-				},
 			]
 		}
 
@@ -262,17 +83,15 @@ export default{
       this.$refs.modal.open()
 		},
 
-    applyTemplate(template){
-      Object.assign(this.instance, template.layout)
-    },
-
 		close(){
       this.$refs.modal.close()
 		},
 
 		apply(){
-			this.$emit('apply', this.instance)
-			this.close()
+			this.$emit('apply', {
+        title: this.instance.title,
+        ...(this.templates[this.instance.templateIndex].layout)
+      })
 		}
 
 	},
@@ -284,7 +103,7 @@ export default{
 		},
 
 		computedWidth(){
-			return 800;
+			return 520;
 		}
 
 	},

package/src/widgets/WebPageBuilder.vue

@@ -740,7 +740,9 @@ export default{
           .then(layout => {
             this.loadLayouts()
             this.page.layoutId = layout.id
+            this.$refs.webLayoutSelector.close()
           })
+          .catch(err => this.alert(err))
     },
 
     createStyleSheet(styles){