@mixd-id/web-scaffold 0.1.230406148 → 0.1.230406150

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@mixd-id/web-scaffold",
   "private": false,
-  "version": "0.1.230406148",
+  "version": "0.1.230406150",
   "scripts": {
     "dev": "vite serve",
     "build": "vite build",
@@ -22,7 +22,8 @@
     },
     "./importer": "./src/utils/importer.js",
     "./listpage1": "./src/utils/listpage1.js",
-    "./listview": "./src/utils/listview.js"
+    "./listview": "./src/utils/listview.js",
+    "./web": "./src/utils/web.js"
   },
   "dependencies": {
     "@faker-js/faker": "^7.3.0",

package/src/components/Article.vue

@@ -1,10 +1,12 @@
 <template>
-	<article :class="$style.comp"
-					 v-html="htmlText"
-					 :contenteditable="editable"
-					 @input="onInput"
-					 @click="onClick"
-					 @paste="onPaste"></article>
+	<div :class="$style.comp">
+    <article :class="$style.article"
+             v-html="htmlText"
+             :contenteditable="editMode"
+             @input="onInput"
+             @click="onClick"
+             @paste="onPaste"></article>
+  </div>
 </template>
 
 <script>
@@ -46,13 +48,13 @@ export default{
 		},
 
 		onInput(){
-			if(this.editable){
+			if(this.editMode){
 				this.triggerUpdate()
 			}
 		},
 
 		onClick(){
-			if(this.editable){
+			if(this.editMode){
 				let { element } = getSelection(this.$el)
 
 				const table = this.closest(element, 'table')
@@ -211,18 +213,14 @@ export default{
 
 	},
 
-	data(){
-		return {
-			editable: false
-		}
-	},
-
 	mounted() {
 		if('edit-mode' in this.$route.query){
 			window.addEventListener('message', (e) => {
 
 				const { data, source } = e
 
+        if(!data || !source) return
+
 				if(data.uid === this.uid){
 
 					const { action, type, value } = data.data ?? {}
@@ -325,7 +323,6 @@ export default{
 				}
 
 			})
-			this.editable = true
 		}
 	}
 
@@ -336,38 +333,42 @@ export default{
 <style module>
 
 .comp{
-	background-image: v-bind(bgImages[0]);
+  @apply relative;
+  background-image: v-bind(bgImages[0]);
+}
+
+.article{
 }
-.comp *{
+.article *{
 }
-.comp[contenteditable]{
+.article[contenteditable]{
 	@apply outline-none;
 }
 
-.comp a{
+.article a{
 	@apply text-primary underline;
 }
 
-.comp ul li{
+.article ul li{
 	@apply list-disc list-inside;
 }
-.comp ol li{
+.article ol li{
 	@apply list-decimal list-inside;
 }
 
-font[size='1']{ @apply text-xs; }
-font[size='2']{ @apply text-sm; }
-font[size='3']{ @apply text-lg; }
-font[size='4']{ @apply text-xl; }
-font[size='5']{ @apply text-2xl; }
-font[size='6']{ @apply text-3xl; }
-font[size='7']{ @apply text-4xl; }
+.article font[size='1']{ @apply text-xs; }
+.article font[size='2']{ @apply text-sm; }
+.article font[size='3']{ @apply text-lg; }
+.article font[size='4']{ @apply text-xl; }
+.article font[size='5']{ @apply text-2xl; }
+.article font[size='6']{ @apply text-3xl; }
+.article font[size='7']{ @apply text-4xl; }
 
-.comp table{
+.article table{
 	@apply border-[1px] border-text-200 border-collapse w-full;
 	table-layout: fixed;
 }
-.comp table th, .comp table td{
+.article table th, .article table td{
 	@apply border-[1px] border-text-200 p-3 text-left;
 	@apply break-words;
 }

package/src/components/Button.vue

@@ -125,7 +125,7 @@ export default{
 			}
 		},
 
-	}
+	},
 
 }
 

package/src/components/Carousel.vue

@@ -4,8 +4,7 @@
     <div ref="inner" :class="computedContainerClass">
 			<div v-for="item in items" :class="computedItemClass">
 				<component  :is="item.type"
-										:="item"
-										@click.stop="editModeClick(item.uid)" />
+										:="item" />
 			</div>
     </div>
 
@@ -39,8 +38,6 @@ import {componentMixin} from "../mixin/component";
 
 export default{
 
-	inject: [ 'editModeClick' ],
-
 	mixins: [ componentMixin ],
 
   props:{

package/src/components/Flex.vue

@@ -3,8 +3,7 @@
 
 		<component v-for="(item, idx) in items"
 							 :is="item.type"
-							 :="item"
-							 @click.stop="editModeClick(item.uid)" />
+							 :="item" />
 
 	</div>
 </template>
@@ -15,8 +14,6 @@ import {componentMixin} from "../mixin/component";
 
 export default{
 
-	inject: [ 'editModeClick' ],
-
 	mixins: [ componentMixin ],
 
 	props:{

package/src/components/Grid.vue

@@ -3,8 +3,7 @@
 
     <component v-for="item in items"
 							 :is="item.type"
-							 :="item"
-							 @click.stop="editModeClick(item.uid)" />
+							 :="item" />
 
   </div>
 </template>
@@ -15,8 +14,6 @@ import {componentMixin} from "../mixin/component";
 
 export default{
 
-	inject: [ 'editModeClick' ],
-
 	mixins: [ componentMixin ],
 
 	props:{

package/src/components/ListView.vue

@@ -372,7 +372,8 @@ export default{
 		},
 
 		async loadConfig(){
-			if(!this.configStoreObj || 'reset' in ((this.$route ?? {}).query ?? {})){
+			if(!this.configStoreObj ||
+				Object.keys(((this.$route ?? {}).query ?? {})).map(_ => _.toLowerCase()).includes('reset')){
 				this.configLoaded = true
 				if('reset' in ((this.$route ?? {}).query ?? {}))
 					await this.saveConfig()

package/src/components/Modal.vue

@@ -239,7 +239,7 @@ export default{
 }
 
 .modalBody{
-	@apply flex-1 min-h-0 overflow-y-auto flex bg-base-400 dark:bg-base-300;
+	@apply flex-1 min-h-0 overflow-y-auto flex bg-base-400;
 }
 
 .overlay{

package/src/components/Tabs.vue

@@ -1,6 +1,6 @@
 <template>
 	<div :class="computedClass">
-		<button v-for="(item, index) in items" :class="tabClass(item)"
+		<button v-for="(item, index) in filteredItems" :class="tabClass(item)"
 			@click="onClick(item)" type="button" >
 			<slot v-if="$slots.tab" name="tab" :="{ item, index }"></slot>
 			<div v-else :class="$style.item">
@@ -35,7 +35,11 @@ export default{
 
 		computedClass(){
 			return this.$style[this.variant]
-		}
+		},
+
+    filteredItems(){
+      return this.items.filter(_=>_)
+    }
 
 	},
 
@@ -79,7 +83,7 @@ export default{
 }
 
 .item{
-	@apply whitespace-nowrap overflow-hidden;
+	@apply whitespace-nowrap overflow-hidden p-0.5;
 }
 
 .button{

package/src/index.js

@@ -332,6 +332,7 @@ export default{
     app.config.globalProperties.warn = consoleWarn
     app.config.globalProperties.info = consoleInfo
 
+    app.component('Ahref', defineAsyncComponent(() => import("./components/Ahref.vue")))
     app.component('Alert', defineAsyncComponent(() => import("./components/Alert.vue")))
     app.component('Article', defineAsyncComponent(() => import("./components/Article.vue")))
     app.component('Block', defineAsyncComponent(() => import("./components/Block.vue")))
@@ -352,7 +353,6 @@ export default{
     app.component('Feed', defineAsyncComponent(() => import("./components/Feed.vue")))
     app.component('Gmaps', defineAsyncComponent(() => import("./components/Gmaps.vue")))
     app.component('HTMLEditor', defineAsyncComponent(() => import("./components/HTMLEditor.vue")))
-    app.component('Ahref', defineAsyncComponent(() => import("./components/Ahref.vue")))
     app.component('Switch', defineAsyncComponent(() => import("./components/Switch.vue")))
     app.component('IconMenu', defineAsyncComponent(() => import("./components/IconMenu.vue")))
     app.component('IconMenu2', defineAsyncComponent(() => import("./components/IconMenu2.vue")))
@@ -402,22 +402,19 @@ export default{
     app.component('TextBlock', defineAsyncComponent(() => import("./components/TextBlock.vue")))
     app.component('TextEditor', defineAsyncComponent(() => import("./components/TextEditor.vue")))
 
-    app.component('WebPageBuilder', defineAsyncComponent(() => import("./widgets/WebPageBuilder.vue")))
-    app.component('WebPageSelector', defineAsyncComponent(() => import("./widgets/WebPageSelector.vue")))
-    app.component('WebLayoutSelector', defineAsyncComponent(() => import("./widgets/WebLayoutSelector.vue")))
-    app.component('ComponentSetting', defineAsyncComponent(() => import("./widgets/ComponentSetting.vue")))
+    app.component('AhrefItem', defineAsyncComponent(() => import("./widgets/AhrefItem.vue")))
+    app.component('AhrefSetting', defineAsyncComponent(() => import("./widgets/AhrefSetting.vue")))
     app.component('ArticleItem', defineAsyncComponent(() => import("./widgets/ArticleItem.vue")))
     app.component('ArticleSetting', defineAsyncComponent(() => import("./widgets/ArticleSetting.vue")))
     app.component('BlockItem', defineAsyncComponent(() => import("./widgets/BlockItem.vue")))
     app.component('BlockSetting', defineAsyncComponent(() => import("./widgets/BlockSetting.vue")))
     app.component('BoxItem', defineAsyncComponent(() => import("./widgets/BoxItem.vue")))
     app.component('BoxSetting', defineAsyncComponent(() => import("./widgets/BoxSetting.vue")))
-    app.component('AhrefItem', defineAsyncComponent(() => import("./widgets/AhrefItem.vue")))
-    app.component('AhrefSetting', defineAsyncComponent(() => import("./widgets/AhrefSetting.vue")))
     app.component('ButtonItem', defineAsyncComponent(() => import("./widgets/ButtonItem.vue")))
     app.component('ButtonSetting', defineAsyncComponent(() => import("./widgets/ButtonSetting.vue")))
     app.component('CarouselItem', defineAsyncComponent(() => import("./widgets/CarouselItem.vue")))
     app.component('CarouselSetting', defineAsyncComponent(() => import("./widgets/CarouselSetting.vue")))
+    app.component('ComponentSetting', defineAsyncComponent(() => import("./widgets/ComponentSetting.vue")))
     app.component('ContactForm', defineAsyncComponent(() => import("./widgets/ContactForm.vue")))
     app.component('ContactFormItem', defineAsyncComponent(() => import("./widgets/ContactFormItem.vue")))
     app.component('ContactFormSetting', defineAsyncComponent(() => import("./widgets/ContactFormSetting.vue")))
@@ -457,5 +454,10 @@ export default{
     app.component('TestimonialSetting', defineAsyncComponent(() => import("./widgets/TestimonialSetting.vue")))
     app.component('TextBlockItem', defineAsyncComponent(() => import("./widgets/TextBlockItem.vue")))
     app.component('TextBlockSetting', defineAsyncComponent(() => import("./widgets/TextBlockSetting.vue")))
+    app.component('WebPageBuilder', defineAsyncComponent(() => import("./widgets/WebPageBuilder.vue")))
+    app.component('WebComponentSelector', defineAsyncComponent(() => import("./widgets/WebComponentSelector.vue")))
+    app.component('WebDatasourceSelector', defineAsyncComponent(() => import("./widgets/WebDatasourceSelector.vue")))
+    app.component('WebPageSelector', defineAsyncComponent(() => import("./widgets/WebPageSelector.vue")))
+    app.component('WebLayoutSelector', defineAsyncComponent(() => import("./widgets/WebLayoutSelector.vue")))
   }
 }

package/src/mixin/component.js

@@ -1,4 +1,8 @@
 // mixin/component.js
+import { inject } from 'vue'
+import {parseBoolean} from "../utils/helpers.mjs";
+
+let guide, guide2
 
 export const componentMixin = {
 
@@ -46,7 +50,12 @@ export const componentMixin = {
     opacity: Array,
 
     containerClass: String,
-    itemClass: String
+    itemClass: String,
+
+    editSelectable: {
+      type: undefined,
+      default: true
+    },
   },
 
   computed: {
@@ -63,7 +72,7 @@ export const componentMixin = {
             (this.bgImage && this.bgImage[0] && this.bgImage[0].imageUrl ?
                 `url('${import.meta.env.VITE_IMAGE_HOST + '/' + this.bgImage[0].imageUrl}')` : '')
       ]
-    }
+    },
 
   },
 
@@ -72,7 +81,80 @@ export const componentMixin = {
     imageSrc(src){
       return typeof src === 'string' ?
           import.meta.env.VITE_IMAGE_HOST + '/' + src : src
+    },
+
+    componentClick(e){
+      e.stopPropagation()
+      e.preventDefault()
+
+      this.editModeClick ? this.editModeClick(this.uid) : null
+    },
+
+    componentMouseOver(e){
+      e.stopPropagation()
+      e.preventDefault()
+
+      this.lastStyle.position = this.$el.style.position
+      this.$el.style.position = 'relative'
+
+      this.$el.appendChild(this.getGuide())
+    },
+
+    componentMouseOut(e){
+      this.$el.style.position = this.lastStyle.position
+    },
+
+    getGuide(){
+      if(!guide){
+        guide = document.createElement('div')
+        guide.className = "absolute top-0 left-0 right-0 bottom-0 border-[3px] border-blue-600" +
+          " pointer-events-none"
+      }
+
+      return guide
+    },
+
+    getGuide2(){
+      if(!guide2){
+        guide2 = document.createElement('div')
+        guide2.className = "absolute top-0 left-0 right-0 bottom-0 border-[3px] border-blue-600" +
+          " pointer-events-none"
+      }
+
+      return guide2
+    },
+
+    select(){
+      this.$el.appendChild(this.getGuide2())
+    },
+
+  },
+
+  data(){
+    return {
+      editMode: false,
+      lastStyle: {}
+    }
+  },
+
+  mounted(){
+    if('edit-mode' in this.$route.query){
+      this.editMode = true
+      this.editModeClick = inject('editModeClick', () => {})
+      this.editRegisterComponent = inject('editRegisterComponent', () => {})
+
+      if(parseBoolean(this.editSelectable)){
+        this.$el.addEventListener('click', this.componentClick)
+        this.$el.addEventListener('mouseover', this.componentMouseOver)
+        this.$el.addEventListener('mouseout', this.componentMouseOut)
+      }
+
+      this.editRegisterComponent(this.uid, this)
     }
+  },
+
+  unmounted(){
+    this.$el.removeEventListener('click', this.componentClick)
+  },
 
-  }
 };

package/src/utils/web.js

@@ -0,0 +1,48 @@
+const { accessNestedObject } = require("./helpers");
+
+const applyDatasourceReplacer = (value, datasource) => {
+  let matches = value.match(/\{([^}]+)\}/g);
+  (matches ?? []).forEach(matchKey => {
+    matchKey = matchKey.slice(1, -1)
+    const matchValue = accessNestedObject(datasource, matchKey) ?? ''
+    value = value.replace(`{${matchKey}}`, matchValue, 'gi')
+  });
+
+  return value
+}
+
+const applyDatasource = async (items, datasource, keys = [ 'htmlText', 'text' ]) => {
+
+  for(let idx in items){
+    const item = items[idx]
+
+    for(let key of keys){
+
+      // Replace array type value
+      if(Array.isArray(item[key])){
+        for(let itemIdx in item[key]){
+          item[key][itemIdx] = applyDatasourceReplacer(item[key][itemIdx], datasource)
+        }
+      }
+
+      // Replace primitive type value
+      else if(item[key]){
+        item[key] = applyDatasourceReplacer(item[key], datasource)
+      }
+    }
+
+    // Iterate child items
+    if(Array.isArray(item.items)){
+      item.items = await applyDatasource(item.items, datasource, keys)
+    }
+
+    items[idx] = item
+  }
+
+  return items
+}
+
+module.exports = {
+  applyDatasource,
+  applyDatasourceReplacer
+}