@mixd-id/web-scaffold 0.1.230406186 → 0.1.230406187

package/package.json

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

package/src/components/Article.vue

@@ -1,8 +1,8 @@
 <template>
 	<div :class="$style.comp">
     <article ref="article" :class="$style.article"
-             v-html="htmlText"
-             :contenteditable="editMode"
+             v-html="computedHtml"
+             :contenteditable="editMode === 1"
              @input="onInput"
              @click="onClick"
              @paste="onPaste"></article>
@@ -13,6 +13,7 @@
 
 import { componentMixin } from '../mixin/component';
 import {getSelection, restoreSelection, saveSelection} from "../utils/selection";
+import {applyDatasourceReplacer} from "../utils/helpers.mjs";
 
 export default{
 
@@ -214,7 +215,7 @@ export default{
 	},
 
 	mounted() {
-		if('edit-mode' in this.$route.query){
+		if(this.editMode){
 			window.addEventListener('message', (e) => {
 
 				const { data, source } = e
@@ -325,7 +326,23 @@ export default{
 
 			})
 		}
-	}
+	},
+
+  computed: {
+
+    computedHtml(){
+      if(this.editMode && this.editMode === 1)
+        return this.htmlText
+      return applyDatasourceReplacer(this.htmlText, this.pageData)
+    },
+
+  },
+
+  data(){
+    return {
+      data: {},
+    }
+  }
 
 }
 

package/src/components/Button.vue

@@ -204,7 +204,7 @@ export default{
 	stroke-opacity: 50%;
 }
 .button-outline .svgHg{
-	fill: rgb(var(--primary));
+	fill: rgb(var(--primary-500));
 	fill-opacity: 100%;
 }
 

package/src/components/Carousel.vue

@@ -3,9 +3,8 @@
 
     <div ref="inner" :class="computedContainerClass">
 			<div v-for="item in items" :class="computedItemClass">
-				<component  :is="item.type"
-										:="item"
-                    edit-selectable="false" />
+        <slot v-if="$slots['default']" :item="item"></slot>
+				<component v-else :is="item.type" :="item" />
 			</div>
     </div>
 
@@ -156,6 +155,13 @@ export default{
 			this.$el.firstElementChild.style.transform = `translate3d(${left}px, 0, 0)`
 		},
 
+    setIndex(index){
+      if(index >= 0 && index < this.items.length){
+        this.index = index
+        this.setPosition()
+      }
+    },
+
     next(setPosition, useBack){
 
       let index = this.index + 1
@@ -327,7 +333,7 @@ export default{
 	@apply w-2 h-2 rounded-full bg-gray-100;
 }
 .legend .legendItemActive>*{
-	@apply bg-primary;
+	@apply bg-primary-500;
 }
 
 @media screen(md){

package/src/components/Countdown.vue

@@ -1,31 +1,31 @@
 <template>
 	<div :class="$style.comp">
 
-		<slot v-if="display >= 4 && $slots.day" name="day" :day="day"></slot>
-		<div ref="day" v-else-if="display >= 4" :class="$style.lap">
+		<slot v-if="computedDisplay >= 4 && $slots.day" name="day" :day="day"></slot>
+		<div ref="day" v-else-if="computedDisplay >= 4" :class="$style.lap">
 			<div></div>
 			<div></div>
 		</div>
-		<div v-if="display >= 4" class="mr-2" :style="labelStyle">hari</div>
+		<div v-if="computedDisplay >= 4" class="mr-2" :style="labelStyle">hari</div>
 
-		<slot v-if="display >= 3 && $slots.hour" name="hour" :hour="hour"></slot>
-		<div ref="hour" v-else-if="display >= 3" :class="$style.lap">
+		<slot v-if="computedDisplay >= 3 && $slots.hour" name="hour" :hour="hour"></slot>
+		<div ref="hour" v-else-if="computedDisplay >= 3" :class="$style.lap">
 			<div></div>
 			<div></div>
 		</div>
 
 		<div :style="labelStyle">:</div>
 
-		<slot v-if="display >= 2 && $slots.minute" name="minute" :minute="minute"></slot>
-		<div ref="minute" v-else-if="display >= 2" :class="$style.lap">
+		<slot v-if="computedDisplay >= 2 && $slots.minute" name="minute" :minute="minute"></slot>
+		<div ref="minute" v-else-if="computedDisplay >= 2" :class="$style.lap">
 			<div></div>
 			<div></div>
 		</div>
 
 		<div :style="labelStyle">:</div>
 
-		<slot v-if="display >= 1 && $slots.second" name="second" :second="second"></slot>
-		<div ref="second" v-else-if="display >= 1" :class="$style.lap">
+		<slot v-if="computedDisplay >= 1 && $slots.second" name="second" :second="second"></slot>
+		<div ref="second" v-else-if="computedDisplay >= 1" :class="$style.lap">
 			<div></div>
 			<div></div>
 		</div>
@@ -35,16 +35,24 @@
 
 <script>
 
+import {componentMixin} from "../mixin/component";
+import throttle from "lodash/throttle";
+
 export default{
 
+  mixins: [ componentMixin ],
+
 	props: {
 
-		display: {
+		mode: {
 			type: [ String, Number ], // default: 3
 			default: 3
 		},
 
-		value: [ String, Number ], // value in second,
+		value: {
+      type: [ String, Number ], // value in second,
+      required: true
+    },
 
 		labelStyle: Object
 
@@ -66,7 +74,11 @@ export default{
 
 		second(){
 			return (this.timer % 60).toString().padStart(2, '0')
-		}
+		},
+
+    computedDisplay(){
+      return parseInt(this.mode)
+    }
 
 	},
 
@@ -83,10 +95,6 @@ export default{
 
 	mounted() {
 		this.start()
-		if(this.$refs.second) this.$refs.second.addEventListener('transitionend', this.onSecondEnd)
-		if(this.$refs.minute) this.$refs.minute.addEventListener('transitionend', this.onMinuteEnd)
-		if(this.$refs.hour) this.$refs.hour.addEventListener('transitionend', this.onHourEnd)
-		if(this.$refs.day) this.$refs.day.addEventListener('transitionend', this.onDayEnd)
 	},
 
 	methods: {
@@ -115,13 +123,13 @@ export default{
       this.state[2] = 0
     },
 
-		onSecondEnd: function (e){
+		onSecondEnd: function (){
       if(this.state[3] !== 1) return
-			this.$refs.second.insertBefore(this.$refs.second.childNodes[1], this.$refs.second.childNodes[0])
-			this.$refs.second.classList.remove(this.$style.tick)
-			this.$refs.second.childNodes[0].innerHTML = ''
+      this.$refs.second.insertBefore(this.$refs.second.childNodes[1], this.$refs.second.childNodes[0])
+      this.$refs.second.classList.remove(this.$style.tick)
+      this.$refs.second.childNodes[0].innerHTML = ''
       this.state[3] = 0
-		},
+    },
 
 		setInitial(){
 			if(this.$refs.day) this.$refs.day.lastElementChild.innerHTML = Math.floor(this.timer / 86400).toString().padStart(2, '0')
@@ -132,7 +140,25 @@ export default{
 
 		start(){
 
-			this.timer = this.value
+      let timer
+      if(typeof this.value === 'string') {
+        const d = new Date(this.value + ' 00:00:00')
+        if(d.getFullYear() !== 1970){
+          timer = Math.floor((d.getTime() - new Date().getTime()) / 1000)
+        }
+      }
+      else{
+        timer = this.value
+      }
+
+      if(timer < 1) return
+
+			this.timer = timer
+
+      if(this.$refs.second) this.$refs.second.addEventListener('transitionend', this.onSecondEnd)
+      if(this.$refs.minute) this.$refs.minute.addEventListener('transitionend', this.onMinuteEnd)
+      if(this.$refs.hour) this.$refs.hour.addEventListener('transitionend', this.onHourEnd)
+      if(this.$refs.day) this.$refs.day.addEventListener('transitionend', this.onDayEnd)
 
 			this.setInitial()
 
@@ -151,7 +177,11 @@ export default{
 	watch: {
 
 		value(){
-			this.start()
+      this.$nextTick(() => this.start())
+		},
+
+		mode(){
+			this.$nextTick(() => this.start())
 		},
 
 		day(to, from){
@@ -198,7 +228,7 @@ export default{
 }
 
 .lap{
-	@apply relative overflow-hidden bg-gray-200 min-w-[1.8rem] rounded-lg text-center;
+	@apply relative overflow-hidden bg-gray-200 min-w-[1.8rem] px-1 rounded-lg text-center;
 }
 .lap>*{
 	@apply whitespace-nowrap font-bold;

package/src/components/Datepicker.vue

@@ -57,17 +57,17 @@
 				<div class="flex items-center">
 					<h4 class="flex-1">{{ contextMenuTitle }}</h4>
 					<button type="button" @click.stop="contextMenuPrevMonth()" class="p-2">
-						<svg width="24" height="24" class="fill-text" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
+						<svg width="21" height="21" class="fill-text" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
 							<path d="M10.5303 17.9697C10.8232 18.2626 10.8232 18.7374 10.5303 19.0303C10.2374 19.3232 9.76253 19.3232 9.46964 19.0303L3.67675 13.2374C2.99333 12.554 2.99333 11.446 3.67675 10.7626L9.46964 4.96967C9.76253 4.67678 10.2374 4.67678 10.5303 4.96967C10.8232 5.26256 10.8232 5.73744 10.5303 6.03033L5.31063 11.25H20C20.4142 11.25 20.75 11.5858 20.75 12C20.75 12.4142 20.4142 12.75 20 12.75H5.31063L10.5303 17.9697Z"/>
 						</svg>
 					</button>
 					<button type="button" @click.stop="contextMenuNextMonth()" class="p-2">
-						<svg width="24" height="24" class="fill-text" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
+						<svg width="21" height="21" class="fill-text" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
 							<path d="M13.4697 17.9697C13.1768 18.2626 13.1768 18.7374 13.4697 19.0303C13.7626 19.3232 14.2374 19.3232 14.5303 19.0303L20.3232 13.2374C21.0066 12.554 21.0066 11.446 20.3232 10.7626L14.5303 4.96967C14.2374 4.67678 13.7626 4.67678 13.4697 4.96967C13.1768 5.26256 13.1768 5.73744 13.4697 6.03033L18.6893 11.25H4C3.58579 11.25 3.25 11.5858 3.25 12C3.25 12.4142 3.58579 12.75 4 12.75H18.6893L13.4697 17.9697Z"/>
 						</svg>
 					</button>
 				</div>
-				<div class="grid grid-cols-7 gap-2">
+				<div class="grid grid-cols-7 gap-2 mt-2">
 					<div v-for="i in 7">{{ getDayOfWeekLabel(i) }}</div>
 					<button type="button" :class="buttonStyle(d.value)"
 									v-for="d in contextMenuDates" @click="setValue(d.value)">

package/src/components/Paragraph.vue

@@ -1,10 +1,12 @@
 <template>
-	<p :class="$style.comp" v-html="html"></p>
+	<p :class="$style.comp" v-html="computedHtml"></p>
 </template>
 
 <script>
 
 import {componentMixin} from "../mixin/component";
+import {applyDatasourceReplacer} from "../utils/helpers.mjs";
+
 
 export default{
 
@@ -12,6 +14,18 @@ export default{
 
   props: {
     html: String
+  },
+
+  computed: {
+
+    computedHtml(){
+      return applyDatasourceReplacer(this.html, this.pageData)
+    }
+
+  },
+
+  methods: {
+
   }
 
 }

package/src/components/Radio.vue

@@ -5,6 +5,7 @@
         <svg width="14" height="14" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><!--! Font Awesome Pro 6.2.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2022 Fonticons, Inc. --><path d="M470.6 105.4c12.5 12.5 12.5 32.8 0 45.3l-256 256c-12.5 12.5-32.8 12.5-45.3 0l-128-128c-12.5-12.5-12.5-32.8 0-45.3s32.8-12.5 45.3 0L192 338.7 425.4 105.4c12.5-12.5 32.8-12.5 45.3 0z"/></svg>
       </div>
     </div>
+    <input type="radio" class="hidden" :checked="cChecked"/>
     <slot></slot>
 	</div>
 </template>

package/src/components/Slider.vue

@@ -280,7 +280,7 @@ export default{
 
   .slider>div:nth-child(3),
   .slider>div:nth-child(4){
-    @apply absolute w-[2.3rem] h-[2.3rem] rounded-full bg-white shadow-sm border-[1px] border-text-200;
+    @apply absolute w-[2.5rem] h-[2.5rem] rounded-full bg-white shadow-sm border-[1px] border-text-200;
     @apply flex;
     top: 50%;
     transform: translate3d(0, -50%, 0);

package/src/components/Test.vue

@@ -0,0 +1,23 @@
+<template>
+	<div :class="$style.comp">
+
+    <Countdown value="2023-11-15 00:00:00" />
+
+	</div>
+</template>
+
+<script>
+
+export default{
+
+}
+
+</script>
+
+<style module>
+
+.comp{
+
+}
+
+</style>

package/src/components/Thumbnail.vue

@@ -0,0 +1,27 @@
+<template>
+	<div :class="$style.comp">
+		<Image class="w-full aspect-square bg-primary-100" />
+    <strong>Title</strong>
+    <p>sit amet bear claw sesame snaps bonbon </p>
+	</div>
+</template>
+
+<script>
+
+import {componentMixin} from "../mixin/component";
+
+export default{
+
+  mixins: [ componentMixin ],
+
+}
+
+</script>
+
+<style module>
+
+.comp{
+  @apply flex flex-col gap-1 min-w-0 w-[6/12];
+}
+
+</style>

package/src/index.js

@@ -417,6 +417,8 @@ export default{
     app.component('SplitPane', defineAsyncComponent(() => import("./components/SplitPane.vue")))
     app.component('Table', defineAsyncComponent(() => import("./components/Table.vue")))
     app.component('TabView', defineAsyncComponent(() => import("./components/TabView.vue")))
+    app.component('Test', defineAsyncComponent(() => import("./components/Test.vue")))
+    app.component('Thumbnail', defineAsyncComponent(() => import("./components/Thumbnail.vue")))
     app.component('Testimonial', defineAsyncComponent(() => import("./components/Testimonial.vue")))
     app.component('TextBlock', defineAsyncComponent(() => import("./components/TextBlock.vue")))
     app.component('TextEditor', defineAsyncComponent(() => import("./components/TextEditor.vue")))
@@ -427,6 +429,7 @@ export default{
     app.component('BoxSetting', defineAsyncComponent(() => import("./widgets/BoxSetting.vue")))
     app.component('ButtonSetting', defineAsyncComponent(() => import("./widgets/ButtonSetting.vue")))
     app.component('CarouselSetting', defineAsyncComponent(() => import("./widgets/CarouselSetting.vue")))
+    app.component('CountdownSetting', defineAsyncComponent(() => import("./widgets/CountdownSetting.vue")))
     app.component('ComponentSetting', defineAsyncComponent(() => import("./widgets/ComponentSetting.vue")))
     app.component('ContactForm', defineAsyncComponent(() => import("./widgets/ContactForm.vue")))
     app.component('ContactFormSetting', defineAsyncComponent(() => import("./widgets/ContactFormSetting.vue")))
@@ -455,6 +458,7 @@ export default{
     app.component('ShareSetting', defineAsyncComponent(() => import("./widgets/ShareSetting.vue")))
     app.component('StyleSetting', defineAsyncComponent(() => import("./widgets/StyleSetting.vue")))
     app.component('TableSetting', defineAsyncComponent(() => import("./widgets/TableSetting.vue")))
+    app.component('ThumbnailSetting', defineAsyncComponent(() => import("./widgets/ThumbnailSetting.vue")))
     app.component('TestimonialSetting', defineAsyncComponent(() => import("./widgets/TestimonialSetting.vue")))
     app.component('TextBlockSetting', defineAsyncComponent(() => import("./widgets/TextBlockSetting.vue")))
     app.component('WebPageBuilder', defineAsyncComponent(() => import("./widgets/WebPageBuilder.vue")))
@@ -462,5 +466,6 @@ export default{
     app.component('WebDatasourceSelector', defineAsyncComponent(() => import("./widgets/WebDatasourceSelector.vue")))
     app.component('WebPageSelector', defineAsyncComponent(() => import("./widgets/WebPageSelector.vue")))
     app.component('WebLayoutSelector', defineAsyncComponent(() => import("./widgets/WebLayoutSelector.vue")))
+    app.component('WebTemplateCreator', defineAsyncComponent(() => import("./widgets/WebTemplateCreator.vue")))
   }
 }

package/src/mixin/component.js

@@ -6,6 +6,8 @@ let guide, guide2
 
 export const componentMixin = {
 
+  inject: [ 'getPage' ],
+
   props: {
     enabled: Boolean,
     name: String,
@@ -85,6 +87,14 @@ export const componentMixin = {
       ]
     },
 
+    pageData(){
+      return (this.page ?? {}).data
+    },
+
+    editMode(){
+      return (this.page ?? {}).editMode
+    }
+
   },
 
   methods: {
@@ -95,6 +105,8 @@ export const componentMixin = {
     },
 
     componentClick(e){
+      if(this.editMode !== 1) return
+
       e.stopPropagation()
       e.preventDefault()
 
@@ -102,6 +114,8 @@ export const componentMixin = {
     },
 
     componentMouseOver(e){
+      if(this.editMode !== 1) return
+
       e.stopPropagation()
       e.preventDefault()
 
@@ -111,8 +125,14 @@ export const componentMixin = {
       this.$el.appendChild(this.getGuide())
     },
 
-    componentMouseOut(e){
+    componentMouseOut(){
+      if(this.editMode !== 1) return
       this.$el.style.position = this.lastStyle.position
+
+      const guide = this.getGuide()
+      if(guide.parentNode){
+        guide.parentNode.removeChild(guide)
+      }
     },
 
     getGuide(){
@@ -138,21 +158,25 @@ export const componentMixin = {
     select(){
       if(!this.$el || this.$el.nodeType !== 1) return
 
-      this.$el.appendChild(this.getGuide2())
+      //this.$el.appendChild(this.getGuide2())
     },
 
   },
 
   data(){
     return {
-      editMode: false,
-      lastStyle: {}
+      lastStyle: {},
+      store: null,
+      page: null,
     }
   },
 
   mounted(){
-    if('edit-mode' in this.$route.query){
-      this.editMode = true
+    if(this.getPage){
+      this.page = this.getPage()
+    }
+
+    if(this.editMode){
       this.editModeClick = inject('editModeClick', () => {})
       this.editRegisterComponent = inject('editRegisterComponent', () => {})
 

package/src/utils/helpers.js

@@ -392,6 +392,84 @@ const removeStyleFromTag = (html) => {
   });
 }
 
+const datasourceGet = async ({ Models }) => {
+
+  const models = []
+  for(let key in Models){
+
+    const columns = []
+    const attributes = Models[key].getAttributes()
+    for(let key in attributes){
+
+      let type
+      const fieldType = attributes[key].type.toString()
+
+      if(fieldType.startsWith('VARCHAR')){
+        type = 'string'
+      }
+      else if(fieldType.startsWith('INTEGER') || fieldType.startsWith('TINYINT')){
+        type = 'number'
+      }
+      else if(fieldType.startsWith('DATETIME')){
+        type = 'date'
+      }
+
+      if(type){
+        columns.push({
+          name: attributes[key].fieldName,
+          type,
+        })
+      }
+    }
+
+    models.push({
+      name: key,
+      columns
+    })
+  }
+
+  return {
+    models
+  }
+
+}
+
+const datasourceLoad = async ({ datasource, Models }) => {
+
+  const obj = {}
+
+  if(Array.isArray(datasource)){
+    for(let _datasource of datasource){
+
+      const Model = Models[_datasource.model]
+
+      const where = {}
+      if(Array.isArray(_datasource.filters)){
+        for(let filter of _datasource.filters){
+
+          switch(filter.operator){
+
+            case '=':
+              where[filter.key] = filter.value
+              break
+
+          }
+        }
+      }
+
+      const rows = await Model.findAll({
+        where,
+        limit: 20
+      })
+
+      obj[_datasource.key] = rows.length === 1 ? rows[0].toJSON() :
+        (rows.length === 0 ? {} : rows.map(_ => _.toJSON()))
+    }
+  }
+
+  return obj
+}
+
 
 module.exports = {
   ceil,
@@ -417,4 +495,6 @@ module.exports = {
   createComponentInstance,
   deepObjectContainsObject,
   removeStyleFromTag,
+  datasourceGet,
+  datasourceLoad,
 }

package/src/utils/helpers.mjs

@@ -341,6 +341,19 @@ function rgbToHex(r, g, b) {
   return "#" + hexR + hexG + hexB;
 }
 
+function applyDatasourceReplacer(value, datasource){
+  if(typeof value !== 'string') return value
+
+  let matches = value.match(/\{\{([^}]+)\}\}/g);
+  (matches ?? []).forEach(matchKey => {
+    matchKey = matchKey.slice(2, -2)
+    const matchValue = accessNestedObject(datasource, matchKey) ?? ''
+    value = value.replace(`{{${matchKey}}}`, matchValue, 'gi')
+  });
+
+  return value
+}
+
 export {
   downsizeImage,
   hexToRgb,
@@ -361,7 +374,8 @@ export {
   sleep,
   removeStyleFromTag,
   createFormData,
-  unslugAndCapitalize
+  unslugAndCapitalize,
+  applyDatasourceReplacer
 }
 
 function observeInit(){

package/src/utils/web.js

@@ -1,11 +1,13 @@
 const { accessNestedObject } = require("./helpers");
 
 const applyDatasourceReplacer = (value, datasource) => {
-  let matches = value.match(/\{([^}]+)\}/g);
+  console.log('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')
+    value = value.replace(`{{${matchKey}}}`, matchValue, 'gi')
   });
 
   return value

package/src/widgets/ArticleSetting.vue

@@ -61,10 +61,6 @@
         </div>
       </div>
 
-      <div>
-        <Article v-model="item.props.text" />
-      </div>
-
       <div class="flex flex-row gap-4">
         <label class="flex-1 text-text-400">Color</label>
         <ColorPicker v-for="(_viewType, index) in viewTypes"