@mixd-id/web-scaffold 0.1.230406272 → 0.1.230406274

package/LICENSE

@@ -1,3 +1,4 @@
+
 MIT License
 
 Copyright (c) 2022 mixd-id

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@mixd-id/web-scaffold",
   "private": false,
-  "version": "0.1.230406272",
+  "version": "0.1.230406274",
   "scripts": {
     "dev": "vite serve",
     "build": "vite build",
@@ -12,6 +12,7 @@
     ".": "./src/index.js",
     "./themes/default": "./src/themes/default/index.js",
     "./components/*": "./src/components/*",
+    "./widgets/*": "./src/widgets/*",
     "./mixin/component": "./src/mixin/component.js",
     "./mixin/edit-mode": "./src/mixin/edit-mode.js",
     "./middleware/http/trim-string": "./src/middleware/http/trim-string.js",

package/src/components/List.vue

@@ -1,5 +1,6 @@
 <template>
   <div class="flex flex-col">
+
     <div v-if="readyState === 1"
          class="flex-1 flex flex-row">
 
@@ -84,6 +85,7 @@
         </slot>
 
         <VirtualTable v-if="presetView === 'table'"
+                      ref="table"
                       :columns="columns"
                       class="flex-1 rounded-lg panel-400"
                       :items="data.items"
@@ -102,6 +104,7 @@
         </VirtualTable>
 
         <VirtualGrid v-else-if="presetView === 'grid'"
+                     ref="grid"
                      :items="dataItems"
                      :column="computedGridColumn"
                      class="flex-1"
@@ -145,7 +148,7 @@ export default{
   props: {
     config: {
       type: Object,
-      default: {}
+      default: { columns:[], presets:[{}] }
     },
     presetKey: String,
     subscribeKey: String,
@@ -237,7 +240,7 @@ export default{
                 this.preset.columns.push(...columns)
               }
 
-              this.data = data
+              Object.assign(this.data, data ?? {})
 
               this.$emit('after-load')
             })
@@ -269,22 +272,32 @@ export default{
     },
 
     loadPreset(){
-      if(this.presetKey){
-        if(!('reset' in this.$route.query)){
+      if(!('reset' in this.$route.query)){
+        if(this.presetKey){
           return this.socket.send('user.preset', { key:this.presetKey })
               .then(config => {
                 Object.assign(this.config, config)
               })
         }
-        else{
-          return new Promise((resolve) => {
-            this.savePreset()
-            this.$router.replace({ name:this.$route.name })
-            resolve()
+        return new Promise(resolve => resolve())
+      }
+      else{
+        return new Promise((resolve) => {
+          this.savePreset()
+
+          const query = {}
+          for(let key in this.$route.query){
+            if(key !== 'reset')
+              query[key] = this.$route.query[key]
+          }
+          this.$router.replace({
+            ...this.$route,
+            query
           })
-        }
+
+          resolve()
+        })
       }
-      return new Promise(resolve => resolve())
     },
 
     resize1(w){
@@ -364,13 +377,20 @@ export default{
           })
             .then(({ items:nextItems }) => {
               nextItems.forEach(item => this.$util.unshift(this.data.items, item, { highlight: true }))
-              const destroyedItems = items.filter(_ => !nextItems.find(i => i.id === _.id))
+
+              const key = nextItems[0] && nextItems[0].uid ? 'uid' : 'id'
+              const destroyedItems = items.filter(_ => !nextItems.find(i => i[key] === _[key]))
               this.$util.remove(this.data.items, destroyedItems)
             })
           break
       }
     },
 
+    resize(){
+      this.$refs.table ? this.$refs.table.resize() : null
+      this.$refs.grid ? this.$refs.grid.resize() : null
+    }
+
   },
 
   components: {PresetBar, PresetSelector, VirtualGrid, VirtualTable},

package/src/components/Modal.vue

@@ -124,9 +124,15 @@ export default{
 
 		close(){
       if(this.hash){
+
+        const hash = this.$route.hash
+            .split('#')
+            .filter(_ => _.length > 0 && !_.startsWith(this.hash.substring(1)))
+            .join('#')
+
         this.$router.replace({
           ...this.$route,
-          hash: this.hash === '#' ? '' : this.$route.hash.replace(`${this.hash}`, '')
+          hash
         })
       }
       else{

package/src/components/VirtualTable.vue

@@ -7,7 +7,7 @@
 					<th v-for="column in visibleColumns" :style="thStyle(column)">
 						<slot v-if="$slots['col-' + column.key]" :name="'col-' + column.key" :column="column"></slot>
 						<div v-else :class="headerColumnClass(column)">
-							<span v-if="column.label && !column.label.startsWith('(')">{{ column.label }}</span>
+							<span>{{ column.label ?? column.key }}</span>
 						</div>
 						<div :class="$style.separator" @mousedown="startResize($event, column)"></div>
 					</th>
@@ -193,6 +193,12 @@ export default{
 
 		this.resize()
 
+    const observer = new MutationObserver((mutationsList) => {
+      console.log(mutationsList)
+      this.resize()
+    });
+    observer.observe(this.$el, { attributes: true });
+
 	},
 
 	methods: {

package/src/index.js

@@ -188,9 +188,12 @@ const util = {
     window.addEventListener('mouseup', onMouseUp)
   },
 
-  push: (arr, items, opt = { key:"id" }) => {
+  push: (arr, items, opt = { key }) => {
     if(!Array.isArray(arr)) return
     if(!Array.isArray(items)) items = [ items ]
+    if(!opt.key){
+      opt.key = items[0] && items[0].uid ? 'uid' : 'id'
+    }
 
     for(let item of items){
       if(!item) continue
@@ -205,16 +208,19 @@ const util = {
     }
   },
 
-  remove: (arr, sliced, opt = { key:'id' }) => {
+  remove: (arr, items, opt = {}) => {
     if(!Array.isArray(arr)) return
-    if(!Array.isArray(sliced)) sliced = [ sliced ]
+    if(!Array.isArray(items)) items = [ items ]
+    if(!opt.key){
+      opt.key = items[0] && items[0].uid ? 'uid' : 'id'
+    }
 
-    sliced = groupBy(sliced, opt.key)
+    items = groupBy(items, opt.key)
 
     for(let i = arr.length - 1 ; i >= 0 ; i--){
       if(!arr[i]) continue
 
-      if(arr[i][opt.key] in sliced){
+      if(arr[i][opt.key] in items){
         arr.splice(i, 1)
       }
     }
@@ -222,6 +228,9 @@ const util = {
 
   unshift: (arr, item, opt = {}) => {
     if(!Array.isArray(arr)) return
+    if(!opt.key){
+      opt.key = item && item.uid ? 'uid' : 'id'
+    }
 
     opt = Object.assign({ key:"id", highlight:false }, opt)
 

package/src/utils/preset-selector.mjs

@@ -20,10 +20,11 @@ const sortsFn = function(a, b, sorts, index){
 }
 
 const pickColumns = function(columns, keys){
+  if(!Array.isArray(columns)) return keys
 
   const picked = []
 
-  const groupedColumns = JSON.parse(JSON.stringify(columns))
+  const groupedColumns = columns
     .reduce((acc, column) => {
       acc[column.key] = column
       return acc
@@ -39,7 +40,25 @@ const pickColumns = function(columns, keys){
   return picked
 }
 
+const setupConfig = (config) => {
+
+  if(Array.isArray(config.presets)){
+    for(let idx in config.presets){
+      if(!Array.isArray(config.presets[idx].columns)){
+        config.presets[idx].columns = []
+      }
+
+      if(config.presets[idx].columns[0] && typeof config.presets[idx].columns[0] === 'string'){
+        config.presets[idx].columns = pickColumns(config.columns ?? [], config.presets[idx].columns)
+      }
+    }
+  }
+
+  return config
+}
+
 export {
   sortsFn,
-  pickColumns
+  pickColumns,
+  setupConfig
 }

package/src/widgets/WebComponentSelector.vue

@@ -110,8 +110,10 @@ export default{
       if(!this.componentSrc) return
 
       this.socketEmit2(this.componentSrc, { type: 2 })
-        .then(({ items }) => {
-          this.extraComponents = items.map(_ => {
+        .then((res) => {
+          const { items } = res ?? {}
+
+          this.extraComponents = (items ?? []).map(_ => {
             return {
               ..._.data,
               name: _.name,

package/src/widgets/WebPageBuilder.vue

@@ -86,23 +86,13 @@
 
           <div class="flex-1 flex flex-col overflow-y-auto">
 
-            <div class="flex flex-col items-center pt-6 pb-3" @click="currentArea = 'header'">
-              <Tabs variant="button" :items="tabItems" v-model="store.tabIndex">
-                <template #tab="{ item }">
-                  <div v-if="item.value === 1" v-tooltip="'Page Info'" class="p-1 px-2">
-                    <svg width="14" height="14" class="fill-text pointer-events-none" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path d="M256 40c118.621 0 216 96.075 216 216 0 119.291-96.61 216-216 216-119.244 0-216-96.562-216-216 0-119.203 96.602-216 216-216m0-32C119.043 8 8 119.083 8 256c0 136.997 111.043 248 248 248s248-111.003 248-248C504 119.083 392.957 8 256 8zm-36 344h12V232h-12c-6.627 0-12-5.373-12-12v-8c0-6.627 5.373-12 12-12h48c6.627 0 12 5.373 12 12v140h12c6.627 0 12 5.373 12 12v8c0 6.627-5.373 12-12 12h-72c-6.627 0-12-5.373-12-12v-8c0-6.627 5.373-12 12-12zm36-240c-17.673 0-32 14.327-32 32s14.327 32 32 32 32-14.327 32-32-14.327-32-32-32z"/></svg>
-                  </div>
-                  <div v-else-if="item.value === 2" v-tooltip="'Components'" class="p-1 px-2">
-                    <svg width="14" height="14" class="fill-text pointer-events-none" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path d="M512 256.01c0-9.98-5.81-18.94-14.77-22.81l-99.74-43.27 99.7-43.26c9-3.89 14.81-12.84 14.81-22.81s-5.81-18.92-14.77-22.79L271.94 3.33c-10.1-4.44-21.71-4.45-31.87-.02L14.81 101.06C5.81 104.95 0 113.9 0 123.87s5.81 18.92 14.77 22.79l99.73 43.28-99.7 43.26C5.81 237.08 0 246.03 0 256.01c0 9.97 5.81 18.92 14.77 22.79l99.72 43.26-99.69 43.25C5.81 369.21 0 378.16 0 388.14c0 9.97 5.81 18.92 14.77 22.79l225.32 97.76a40.066 40.066 0 0 0 15.9 3.31c5.42 0 10.84-1.1 15.9-3.31l225.29-97.74c9-3.89 14.81-12.84 14.81-22.81 0-9.98-5.81-18.94-14.77-22.81l-99.72-43.26 99.69-43.25c9-3.89 14.81-12.84 14.81-22.81zM45.23 123.87l208.03-90.26.03-.02c1.74-.71 3.65-.76 5.45.02l208.03 90.26-208.03 90.27c-1.81.77-3.74.77-5.48 0L45.23 123.87zm421.54 264.27L258.74 478.4c-1.81.77-3.74.77-5.48 0L45.23 388.13l110.76-48.06 84.11 36.49a40.066 40.066 0 0 0 15.9 3.31c5.42 0 10.84-1.1 15.9-3.31l84.11-36.49 110.76 48.07zm-208.03-41.87c-1.81.77-3.74.77-5.48 0L45.23 256 156 207.94l84.1 36.5a40.066 40.066 0 0 0 15.9 3.31c5.42 0 10.84-1.1 15.9-3.31l84.1-36.49 110.77 48.07-208.03 90.25z"/></svg>
-                  </div>
-                  <div v-else-if="item.value === 3" v-tooltip="'Datasource'" class="p-1 px-2">
-                    <svg width="14" height="14" class="fill-text pointer-events-none" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><path d="M224 32c106 0 192 28.75 192 64v32c0 35.25-86 64-192 64S32 163.25 32 128V96c0-35.25 86-64 192-64m192 149.5V224c0 35.25-86 64-192 64S32 259.25 32 224v-42.5c41.25 29 116.75 42.5 192 42.5s150.749-13.5 192-42.5m0 96V320c0 35.25-86 64-192 64S32 355.25 32 320v-42.5c41.25 29 116.75 42.5 192 42.5s150.749-13.5 192-42.5m0 96V416c0 35.25-86 64-192 64S32 451.25 32 416v-42.5c41.25 29 116.75 42.5 192 42.5s150.749-13.5 192-42.5M224 0C145.858 0 0 18.801 0 96v320c0 77.338 146.096 96 224 96 78.142 0 224-18.801 224-96V96c0-77.338-146.096-96-224-96z"/></svg>
-                  </div>
-                </template>
-              </Tabs>
+            <div class="flex flex-col items-center border-b-[1px] border-text-100" @click="currentArea = 'header'">
+              <Tabs :items="tabItems"
+                    class="pt-1"
+                    v-model="store.tabIndex" />
             </div>
 
-            <div v-if="store.tabIndex === 1" class="flex-1 overflow-y-auto flex flex-col gap-4 px-6 py-3" @click="currentArea = 'pageinfo'">
+            <div v-if="store.tabIndex === 1" class="flex-1 overflow-y-auto flex flex-col gap-4 p-6" @click="currentArea = 'pageinfo'">
 
               <div class="flex flex-row gap-4" v-if="!page.isSystem">
                 <div class="flex flex-col gap-1">
@@ -205,7 +195,7 @@
 
             </div>
 
-            <div v-else-if="store.tabIndex === 2" class="flex-1 overflow-y-auto px-6 py-3 flex flex-col gap-6">
+            <div v-else-if="store.tabIndex === 2" class="flex-1 overflow-y-auto p-6 flex flex-col gap-6">
 
               <div>
                 <div class="flex flex-row gap-2" @click="currentArea = 'layout'">
@@ -353,7 +343,7 @@
 
             </div>
 
-            <div v-else-if="store.tabIndex === 3" class="flex-1" @click="currentArea = 'datasource'">
+            <div v-else-if="store.tabIndex === 3" class="flex-1 overflow-y-auto p-6" @click="currentArea = 'datasource'">
 
               <div class="p-6 flex flex-col gap-2" v-if="Array.isArray(page.datasource) && page.datasource.length > 0">
                 <div v-for="(ds, index) in page.datasource"
@@ -652,6 +642,16 @@ export default{
       }
     },
 
+    src:{
+      type: [ String, Array ],
+      default: 'page.open'
+    },
+
+    saveSrc:{
+      type: [ String, Array ],
+      default: 'page.save'
+    },
+
     /**
      * @param {Object} config
      * @param {String} config.method
@@ -901,12 +901,11 @@ export default{
     },
 
     async load(){
-      return this.socketEmit2('page.open', { uid:this.$route.params.uid })
+      return this.socketEmit2(this.src, { uid:this.$route.params.uid })
           .then(({ page, layouts, host }) => {
-
-            Object.assign(this.page, page)
-            this.layouts = layouts
-            this.host = host
+            if(page) this.page = page
+            if(layouts) this.layouts = layouts
+            if(host) this.host = host
 
             this.prevData = {
               page: JSON.stringify(this.page),
@@ -1267,7 +1266,7 @@ export default{
     createInstances(){
       if(!this.page.instances || typeof this.page.instances !== 'object' || Array.isArray(this.page.instances))
         this.page.instances = {}
-      this.page.instances.components = this.page.components.map((_) => this.createComponentInstance(_)).filter(_=>_)
+      this.page.instances.components = (this.page.components ?? []).map((_) => this.createComponentInstance(_)).filter(_=>_)
 
       if(this.layout){
         if(!this.layout.instances || typeof this.layout.instances !== 'object' || Array.isArray(this.layout.instances))
@@ -1283,7 +1282,7 @@ export default{
       this.createInstances()
 
       this.$refs.saveBtn.setState(2)
-      this.socketEmit2('page.save', { ...this.page, layout:this.layout })
+      this.socketEmit2(this.saveSrc, { ...this.page, layout:this.layout })
           .then((_) => {
             this.prevData = {
               page: JSON.stringify(this.page),
@@ -1348,15 +1347,15 @@ export default{
 
       if(this.$refs.iframe){
 
-        const headers = this.layout && this.layout.headers ?
+        const headers = this.layout && Array.isArray(this.layout.headers) ?
             this.layout.headers.map((_) => this.createComponentInstance(_)).filter(_=>_) :
             null
 
-        const footers = this.layout && this.layout.footers ?
+        const footers = this.layout && Array.isArray(this.layout.footers) ?
             this.layout.footers.map((_) => this.createComponentInstance(_)).filter(_=>_) :
             null
 
-        const components = this.page.components.map((_) => this.createComponentInstance(_)).filter(_=>_)
+        const components = (this.page.components ?? []).map((_) => this.createComponentInstance(_)).filter(_=>_)
 
         const stylesheet = this.layout ? this.createStyleSheet(this.layout.styles) : ''
 
@@ -1514,7 +1513,7 @@ export default{
 
     layout(){
       if(this.page){
-        return this.layouts.find((_) => _.id === parseInt(this.page.layoutId))
+        return (this.layouts ?? []).find((_) => _.id === parseInt(this.page.layoutId))
       }
     },
 

package/src/widgets/WebPageSelector.vue

@@ -1,5 +1,5 @@
 <template>
-	<Modal @show="load">
+	<Modal @show="load" :hash="hash">
 		<template v-slot:head>
 			<div class="relative p-6">
 				<h3>{{ $t('Choose Template:') }}</h3>
@@ -71,6 +71,11 @@ export default{
 			default: 'page.create'
 		},
 
+    hash: {
+      type: String,
+      default: '#selector'
+    },
+
 		templateSrc: String,
 
     templates: Array,
@@ -99,9 +104,12 @@ export default{
 		load(){
       if(this.templateSrc){
         this.socketEmit2(this.templateSrc, { type:1 })
-          .then(({ items }) => {
-            this.selectedGroup = items[0] ? items[0].group : this.selectedGroup
-            this._templates = items
+          .then((res) => {
+            if(res){
+              const { items:[] } = res ?? {}
+              this.selectedGroup = items[0] ? items[0].group : this.selectedGroup
+              this._templates = items
+            }
           })
       }
 		},