@mixd-id/web-scaffold 0.1.230406198 → 0.1.230406200

package/package.json

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

package/src/components/Carousel.vue

@@ -360,21 +360,24 @@ export default{
 	@apply bg-primary-500;
 }
 
-.htmlNoScroll{
-  min-height: 100.3%;
-  overscroll-behavior-y: none;
-  height: 100%;
-  overflow: hidden;
-}
-.bodyNoScroll{
-  overscroll-behavior: none;
-  overscroll-behavior-y: none;
-  overflow: hidden;
-  position: fixed;
-  width: 100%;
-  margin: 0;
-  max-height: 100%;
-  -webkit-overflow-scrolling: touch;
+@media screen and (max-width: 768px){
+  .htmlNoScroll{
+    min-height: 100.3%;
+    overscroll-behavior-y: none;
+    height: 100%;
+    overflow: hidden;
+  }
+  .bodyNoScroll{
+    overscroll-behavior: none;
+    overscroll-behavior-y: none;
+    overflow: hidden;
+    position: fixed;
+    width: 100%;
+    margin: 0;
+    max-height: 100%;
+    -webkit-overflow-scrolling: touch;
+  }
 }
 
+
 </style>

package/src/components/DataList.vue

@@ -0,0 +1,59 @@
+<template>
+	<div :class="$style.comp">
+
+    <component v-for="(item, idx) in dataItems"
+               :is="item.type"
+               :key="item.key"
+               :="item" />
+	</div>
+</template>
+
+<script>
+
+import {componentMixin} from "../mixin/component";
+
+export default{
+
+  mixins: [ componentMixin ],
+
+  props: {
+
+    datasource: Object,
+
+    items: Array,
+
+  },
+
+  computed: {
+
+    dataItems(){
+      if(this.items.length < 1) return []
+
+      const items = []
+
+      const dataItems = ((this.pageData ?? {})[(this.datasource ?? {}).key] ?? {}).items ?? []
+
+      const itemJSON = JSON.stringify(this.items[0])
+
+      for(let data of dataItems){
+        const item = JSON.parse(itemJSON)
+        item.data = data
+        items.push(item)
+      }
+
+      return items
+    }
+
+  }
+
+}
+
+</script>
+
+<style module>
+
+.comp{
+
+}
+
+</style>

package/src/components/Flex.vue

@@ -21,8 +21,15 @@ export default{
 		items: Array,
 		flexColumns: Array,
 		columnType: Array,
+    data: Object
 	},
 
+  provide(){
+    return {
+      parentData: this.data
+    }
+  }
+
 }
 
 </script>

package/src/components/Link.vue

@@ -50,6 +50,7 @@ export default{
     target: String,
     text: String,
     download: Object,
+    data: Object,
   },
 
   computed: {
@@ -70,6 +71,12 @@ export default{
       return obj
     }
 
+  },
+
+  provide(){
+    return {
+      parentData: this.data
+    }
   }
 
 }

package/src/components/Modal.vue

@@ -79,6 +79,8 @@ export default{
 
     height: String,
 
+    dock: String,
+
     position: {
 			type: String,
 			default: 'bottom'
@@ -167,7 +169,7 @@ export default{
     computedClass(){
       return [
         this.$style.modal,
-				this.$style['modal-' + this.position],
+				this.$style['modal-' + (this.dock ?? this.position)],
         this.class,
         this.mode === 'v-show' ? this.$style['v-show'] : '',
         this.computedState ? this.$style.open : ''
@@ -188,7 +190,7 @@ export default{
         return this.transition
       }
       else{
-        switch(this.position){
+        switch(this.dock ?? this.position){
           case 'top':
             return 'slidedown'
           case 'bottom':

package/src/components/TextBlock.vue

@@ -1,15 +1,18 @@
 <template>
 	<component :is="tagName" :class="$style.comp">
-		{{ text }}
+		{{ computedText }}
 	</component>
 </template>
 
 <script>
 
 import {componentMixin} from "../mixin/component";
+import {applyDatasourceReplacer} from "../utils/helpers";
 
 export default{
 
+  inject: [ 'parentData' ],
+
 	mixins: [ componentMixin ],
 
 	props: {
@@ -21,7 +24,18 @@ export default{
       default: 'span'
     }
 
-	}
+	},
+
+  computed: {
+
+    computedText(){
+      if(this.parentData){
+        return applyDatasourceReplacer(this.text, this.parentData)
+      }
+      return this.text
+    }
+
+  }
 
 }
 

package/src/index.js

@@ -422,6 +422,7 @@ export default{
     app.component('Testimonial', defineAsyncComponent(() => import("./components/Testimonial.vue")))
     app.component('TextBlock', defineAsyncComponent(() => import("./components/TextBlock.vue")))
     app.component('TextEditor', defineAsyncComponent(() => import("./components/TextEditor.vue")))
+    app.component('DataList', defineAsyncComponent(() => import("./components/DataList.vue")))
 
     app.component('AhrefSetting', defineAsyncComponent(() => import("./widgets/AhrefSetting.vue")))
     app.component('ArticleSetting', defineAsyncComponent(() => import("./widgets/ArticleSetting.vue")))
@@ -470,5 +471,6 @@ export default{
     app.component('WebLayoutSelector', defineAsyncComponent(() => import("./widgets/WebLayoutSelector.vue")))
     app.component('WebTemplateCreator', defineAsyncComponent(() => import("./widgets/WebTemplateCreator.vue")))
     app.component('ModalSetting', defineAsyncComponent(() => import("./widgets/ModalSetting.vue")))
+    app.component('DataListSetting', defineAsyncComponent(() => import("./widgets/DataListSetting.vue")))
   }
 }

package/src/widgets/ComponentSetting.vue

@@ -495,7 +495,117 @@
         </button>
       </div>
       <div class="h-[1px] bg-text-100 mt-2 mb-4"></div>
-      <div class="grid grid-cols-2 gap-4" v-if="expanded['gridColumn']">
+      <div v-if="expanded['gridColumn']"
+           v-for="(_, idx) in viewTypes"
+           v-show="viewType === _.value"
+           class="grid grid-cols-2 gap-4">
+
+        <div>
+          <label class="text-text-400">Columns</label>
+          <Dropdown v-model="columns[idx]" class="mt-1">
+            <option value="">Not Set</option>
+            <option :value="`${viewType}grid-cols-1`">1</option>
+            <option :value="`${viewType}grid-cols-2`">2</option>
+            <option :value="`${viewType}grid-cols-3`">3</option>
+            <option :value="`${viewType}grid-cols-4`">4</option>
+            <option :value="`${viewType}grid-cols-5`">5</option>
+            <option :value="`${viewType}grid-cols-6`">6</option>
+            <option :value="`${viewType}grid-cols-7`">7</option>
+            <option :value="`${viewType}grid-cols-8`">8</option>
+            <option :value="`${viewType}grid-cols-9`">9</option>
+            <option :value="`${viewType}grid-cols-10`">10</option>
+            <option :value="`${viewType}grid-cols-11`">11</option>
+            <option :value="`${viewType}grid-cols-12`">12</option>
+            <option :value="`${viewType}grid-cols-none`">None</option>
+          </Dropdown>
+        </div>
+
+        <div>
+          <label class="text-text-400">Rows</label>
+          <Dropdown v-model="rows[idx]"
+                    class="mt-1">
+            <option value="">Not Set</option>
+            <option :value="`${viewType}grid-rows-1`">1</option>
+            <option :value="`${viewType}grid-rows-2`">2</option>
+            <option :value="`${viewType}grid-rows-3`">3</option>
+            <option :value="`${viewType}grid-rows-4`">4</option>
+            <option :value="`${viewType}grid-rows-5`">5</option>
+            <option :value="`${viewType}grid-rows-6`">6</option>
+            <option :value="`${viewType}grid-rows-7`">7</option>
+            <option :value="`${viewType}grid-rows-8`">8</option>
+            <option :value="`${viewType}grid-rows-9`">9</option>
+            <option :value="`${viewType}grid-rows-10`">10</option>
+            <option :value="`${viewType}grid-rows-11`">11</option>
+            <option :value="`${viewType}grid-rows-12`">12</option>
+            <option :value="`${viewType}grid-rows-none`">None</option>
+          </Dropdown>
+        </div>
+
+        <div>
+          <label class="text-text-400">Gap</label>
+          <Dropdown v-model="gap[idx]" class="mt-1">
+            <option value="">Not Set</option>
+            <option :value="`${viewType}gap-0`">0</option>
+            <option :value="`${viewType}gap-1`">1</option>
+            <option :value="`${viewType}gap-2`">2</option>
+            <option :value="`${viewType}gap-3`">3</option>
+            <option :value="`${viewType}gap-4`">4</option>
+            <option :value="`${viewType}gap-5`">5</option>
+            <option :value="`${viewType}gap-6`">6</option>
+            <option :value="`${viewType}gap-7`">7</option>
+            <option :value="`${viewType}gap-8`">8</option>
+            <option :value="`${viewType}gap-9`">9</option>
+            <option :value="`${viewType}gap-10`">10</option>
+            <option :value="`${viewType}gap-11`">11</option>
+            <option :value="`${viewType}gap-12`">12</option>
+          </Dropdown>
+        </div>
+
+        <div>
+          <label class="text-text-400">Auto Flow</label>
+          <Dropdown v-model="autoFlow[idx]" class="mt-1">
+            <option value="">Not Set</option>
+            <option :value="`${viewType}grid-flow-row`">Row</option>
+            <option :value="`${viewType}grid-flow-col`">Col</option>
+            <option :value="`${viewType}grid-flow-dense`">Dense</option>
+            <option :value="`${viewType}grid-flow-row-dense`">Row Dense</option>
+            <option :value="`${viewType}grid-flow-col-dense`">Col Dense</option>
+          </Dropdown>
+        </div>
+
+        <div>
+          <label class="text-text-400">Align Items</label>
+          <Dropdown v-for="(_, idx) in viewTypes"
+                    v-show="viewType === _.value"
+                    v-model="alignItems[idx]"
+                    class="w-full">
+            <option value="">Not Set</option>
+            <option :value="`${viewType}items-start`">Start</option>
+            <option :value="`${viewType}items-end`">End</option>
+            <option :value="`${viewType}items-center`">Center</option>
+            <option :value="`${viewType}items-baseline`">Baseline</option>
+            <option :value="`${viewType}items-stretch`">Stretch</option>
+          </Dropdown>
+        </div>
+
+        <div>
+          <label class="text-text-400">Justify Content</label>
+          <Dropdown v-for="(_, idx) in viewTypes"
+                    v-show="viewType === _.value"
+                    v-model="justifyContent[idx]"
+                    class="w-full">
+            <option value="">Not Set</option>
+            <option :value="`${viewType}justify-normal`">Normal</option>
+            <option :value="`${viewType}justify-start`">Start</option>
+            <option :value="`${viewType}justify-end`">End</option>
+            <option :value="`${viewType}justify-center`">Center</option>
+            <option :value="`${viewType}justify-between`">Between</option>
+            <option :value="`${viewType}justify-around`">Around</option>
+            <option :value="`${viewType}justify-evenly`">Evenly</option>
+            <option :value="`${viewType}justify-stretch`">Stretch</option>
+          </Dropdown>
+        </div>
+
         <div>
           <label class="flex-1 text-text-400">Column Span</label>
           <div v-for="(_, index) in viewTypes"
@@ -1083,6 +1193,36 @@ export default{
 
 	computed: {
 
+    autoFlow(){
+      if(!Array.isArray(this.item.props.autoFlow))
+        this.item.props.autoFlow = []
+      return this.item.props.autoFlow
+    },
+
+    columns(){
+      if(!Array.isArray(this.item.props.columns))
+        this.item.props.columns = []
+      return this.item.props.columns
+    },
+
+    rows(){
+      if(!Array.isArray(this.item.props.rows))
+        this.item.props.rows = []
+      return this.item.props.rows
+    },
+
+    alignItems(){
+      if(!Array.isArray(this.item.props.alignItems))
+        this.item.props.alignItems = []
+      return this.item.props.alignItems
+    },
+
+    justifyContent(){
+      if(!Array.isArray(this.item.props.justifyContent))
+        this.item.props.justifyContent = []
+      return this.item.props.justifyContent
+    },
+
     animate(){
       if(!Array.isArray(this.item.props.animate))
         this.item.props.animate = []
@@ -1582,6 +1722,8 @@ export default{
           [ 'Inline Flex', 'inline-flex' ],
           [ 'Table', 'table' ],
           [ 'Inline Table', 'inline-table' ],
+          [ 'Grid', 'grid' ],
+          [ 'Inline Grid', 'inline-grid' ],
         ],
         divideStyle: [
           [ 'Solid', 'divide-solid' ],

package/src/widgets/ContactForm.vue

@@ -25,7 +25,7 @@
 
 					<Dropdown v-else-if="field.type === 'topic'" v-model="form[field.type]"
 									 class="bg-white text-xl md:w-[200px] max-w-full">
-            <option value="" disabled selected>Pilih Topik Pertanyaan</option>
+            <option value="" disabled selected>{{ field.placeholder ? field.placeholder : 'Pilih Topik Pertanyaan' }}</option>
             <option v-for="item in field.items" :value="item.text">{{ item.text }}</option>
           </Dropdown>
 
@@ -91,6 +91,18 @@ export default{
 				return
 			}
 
+      const utm = this.utm && Object.values(this.utm).join('').length > 0 ? this.utm :
+          ('utm_source' in this.$route.query || 'utm_medium' in this.$route.query ||
+          'utm_campaign' in this.$route.query || 'utm_id' in this.$route.query ||
+          'utm_term' in this.$route.query || 'utm_content' in this.$route.query ? {
+            source: this.$route.query.utm_source,
+            medium: this.$route.query.utm_medium,
+            campaign: this.$route.query.utm_campaign,
+            id: this.$route.query.utm_id,
+            term: this.$route.query.utm_term,
+            content: this.$route.query.utm_content,
+          } : null)
+
 			this.$refs.submitBtn.setState(2)
 			this.axios({
 				method: this.submitMethod ?? 'post',
@@ -101,7 +113,7 @@ export default{
 					componentUid: this.uid,
 					...this.form,
           type: 1,
-          utm: this.utm,
+          utm,
 				},
 				params: this.form
 			})

package/src/widgets/ContactFormSetting.vue

@@ -205,6 +205,10 @@
       <template v-slot:head>
         <div class="relative p-5">
           <h3>Topic</h3>
+
+          <button type="button" class="absolute right-0 top-0 p-3" @click="$refs.topicModal.close()">
+            <svg width="18" height="18" class="fill-text-300 hover:fill-red-500" 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>
       </template>
       <template #foot="{ context }">
@@ -213,32 +217,48 @@
         </div>
       </template>
       <template #default="{ context }">
-        <div class="flex-1 p-5 flex flex-col gap-6">
-
-          <ListItem :items="context.items"
-                    @reorder="(from, to) => { context.items.splice(to, 0, context.items.splice(from, 1)[0]); }"
-                    body-class="flex flex-col divide-y divide-text-200">
-            <template v-slot="{ item, index }">
-              <div class="flex flex-row items-center gap-3">
-                <div data-reorder>
-                  <svg width="14" height="14" class="fill-text-300" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path d="M496 288H16c-8.8 0-16 7.2-16 16v32c0 8.8 7.2 16 16 16h480c8.8 0 16-7.2 16-16v-32c0-8.8-7.2-16-16-16zm0-128H16c-8.8 0-16 7.2-16 16v32c0 8.8 7.2 16 16 16h480c8.8 0 16-7.2 16-16v-32c0-8.8-7.2-16-16-16z"/></svg>
-                </div>
-                <div class="flex-1">
-                  <Textbox v-model="item.text" class="border-none" placeholder="Topic Name" />
-                </div>
-                <div>
-                  <button type="button" @click="context.items.splice(index, 1)">
-                    <svg width="16" height="16" class="fill-text-300 hover:fill-red-500" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 320 512"><path d="M207.6 256l107.72-107.72c6.23-6.23 6.23-16.34 0-22.58l-25.03-25.03c-6.23-6.23-16.34-6.23-22.58 0L160 208.4 52.28 100.68c-6.23-6.23-16.34-6.23-22.58 0L4.68 125.7c-6.23 6.23-6.23 16.34 0 22.58L112.4 256 4.68 363.72c-6.23 6.23-6.23 16.34 0 22.58l25.03 25.03c6.23 6.23 16.34 6.23 22.58 0L160 303.6l107.72 107.72c6.23 6.23 16.34 6.23 22.58 0l25.03-25.03c6.23-6.23 6.23-16.34 0-22.58L207.6 256z"/></svg>
-                  </button>
+        <div class="flex-1 p-5 flex flex-col gap-4">
+
+          <div>
+            <label class="text-text-400">Label</label>
+            <Textbox v-model="context.label" />
+          </div>
+
+          <div>
+            <label class="text-text-400">Items</label>
+            <ListItem :items="context.items"
+                      @reorder="(from, to) => { context.items.splice(to, 0, context.items.splice(from, 1)[0]); }"
+                      body-class="flex flex-col divide-y divide-text-200 border-[1px] border-text-200 mt-1">
+              <template v-slot="{ item, index }">
+                <div class="flex flex-row items-center gap-3 px-3">
+                  <div data-reorder>
+                    <svg width="14" height="14" class="fill-text-300" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path d="M496 288H16c-8.8 0-16 7.2-16 16v32c0 8.8 7.2 16 16 16h480c8.8 0 16-7.2 16-16v-32c0-8.8-7.2-16-16-16zm0-128H16c-8.8 0-16 7.2-16 16v32c0 8.8 7.2 16 16 16h480c8.8 0 16-7.2 16-16v-32c0-8.8-7.2-16-16-16z"/></svg>
+                  </div>
+                  <div class="flex-1">
+                    <Textbox v-model="item.text" class="border-none" placeholder="Topic Name" />
+                  </div>
+                  <div>
+                    <button type="button" @click="context.items.splice(index, 1)">
+                      <svg width="16" height="16" class="fill-text-300 hover:fill-red-500" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 320 512"><path d="M207.6 256l107.72-107.72c6.23-6.23 6.23-16.34 0-22.58l-25.03-25.03c-6.23-6.23-16.34-6.23-22.58 0L160 208.4 52.28 100.68c-6.23-6.23-16.34-6.23-22.58 0L4.68 125.7c-6.23 6.23-6.23 16.34 0 22.58L112.4 256 4.68 363.72c-6.23 6.23-6.23 16.34 0 22.58l25.03 25.03c6.23 6.23 16.34 6.23 22.58 0L160 303.6l107.72 107.72c6.23 6.23 16.34 6.23 22.58 0l25.03-25.03c6.23-6.23 6.23-16.34 0-22.58L207.6 256z"/></svg>
+                    </button>
+                  </div>
                 </div>
-              </div>
-            </template>
-          </ListItem>
+              </template>
+            </ListItem>
+
+            <div class="text-center">
+              <button type="button" class="text-primary p-3" @click="context.items.push({})">Add Item</button>
+            </div>
+          </div>
 
-          <div class="text-center">
-            <button type="button" class="text-primary" @click="context.items.push({})">Add Topic</button>
+          <div>
+            <label class="text-text-400">Placeholder</label>
+            <Textbox v-model="context.placeholder" />
           </div>
 
+          <br />
+          <br />
+
         </div>
       </template>
     </Modal>

package/src/widgets/DataListSetting.vue

@@ -0,0 +1,102 @@
+<template>
+	<div :class="$style.comp">
+
+    <div>
+      <div class="flex flex-row gap-4 items-center cursor-pointer"
+           @click="expanded['datalist'] = !expanded['datalist']">
+        <strong class="flex-1 text-text-400">Data List</strong>
+        <label class="text-primary">
+          {{ expanded['datalist'] ? 'Hide': 'Show' }}
+        </label>
+      </div>
+      <div class="h-[1px] bg-text-100 mt-2 mb-4"></div>
+      <div v-if="expanded['datalist']">
+
+        <div>
+          <label class="flex-1 text-text-400">Data key</label>
+          <Textbox v-model="datasource.key" @keyup.enter="apply"/>
+        </div>
+
+      </div>
+    </div>
+
+		<ComponentSetting :item="item"
+											:view-type="viewType"
+											:view-types="viewTypes"
+											defaultDisplay="flex"
+											@change="apply" />
+
+	</div>
+</template>
+
+<script>
+
+export default{
+
+	emits: [ 'change' ],
+
+  inject: [ 'confirm', 'imageSrc', 'uploadImage', 'store' ],
+
+	props: {
+
+		item: {
+			type: Object,
+			required: true
+		},
+
+		viewType: String,
+
+		viewTypes: Array,
+
+	},
+
+	methods: {
+
+		apply(){
+			this.$emit('change')
+		}
+
+	},
+
+	computed: {
+
+    componentStore(){
+      if(this.store && this.store.components){
+        if(!this.store.components.compsetting)
+          this.store.components.compsetting = {}
+
+        return this.store.components.compsetting
+      }
+      return {}
+    },
+
+    expanded(){
+      if(!this.componentStore['expanded'])
+        this.componentStore['expanded'] = {}
+      return this.componentStore['expanded']
+    },
+
+    datasource(){
+      if(!this.item.props.datasource)
+        this.item.props.datasource = {}
+      return this.item.props.datasource
+    }
+
+	},
+
+	data(){
+		return {
+		}
+	},
+
+}
+
+</script>
+
+<style module>
+
+.comp{
+	@apply flex flex-col gap-6;
+}
+
+</style>

package/src/widgets/GridSetting.vue

@@ -33,9 +33,7 @@
 
           <div>
             <label class="text-text-400">Rows</label>
-            <Dropdown v-for="(_, index) in viewTypes"
-                      v-show="_.value === viewType"
-                      v-model="rows[index]"
+            <Dropdown v-model="rows[idx]"
                       class="mt-1"
                       @change="$emit('change')">
               <option value="">Not Set</option>

package/src/widgets/ImageSetting.vue

@@ -10,7 +10,7 @@
         </label>
       </div>
       <div class="h-[1px] bg-text-100 mt-2 mb-4"></div>
-      <div v-if="expanded['image']">
+      <div v-if="expanded['image']" class="flex flex-col gap-4">
 
         <div v-for="(_viewType, index) in viewTypes"
              v-show="_viewType.value === viewType">

package/src/widgets/ModalSetting.vue

@@ -20,7 +20,7 @@
         <div class="col-span-2 flex flex-row items-center">
           <label :class="$style.label" class="flex-1">Position</label>
           <div class="flex flex-row items-center gap-1">
-            <Dropdown v-model="position">
+            <Dropdown v-model="item.props.dock">
               <option disabled selected>Choose Position</option>
               <option value="center">Center</option>
               <option value="top">Top</option>
@@ -72,13 +72,6 @@ export default{
 
   computed: {
 
-    position(){
-      if(!Array.isArray(this.item.props.position))
-        this.item.props.position = []
-
-      return this.item.props.position
-    }
-
   }
 
 }

package/src/widgets/StyleSetting.vue

@@ -163,7 +163,7 @@
     </div>
 
     <div class="p-6 text-center">
-      <button type="button" class="text-primary" @click="resetMedia">Reset</button>
+      <button type="button" class="text-primary" @click="resetMedia">Reset to Default Style</button>
     </div>
 
 	</div>

package/src/widgets/WebDatasourceSelector.vue

@@ -19,45 +19,43 @@
 	  </template>
 	  <div class="flex-1 p-6 flex flex-col gap-4">
 
-			<div>
-				<label class="text-text-400">Name</label>
-        <Textbox v-model="datasource.name" />
-			</div>
-
-			<div>
-				<label class="text-text-400">Key</label>
-        <Textbox v-model="datasource.key" />
-			</div>
-
-			<div>
-				<label class="text-text-400">Model</label>
-        <Dropdown v-model="datasource.model">
+      <div>
+        <label class="text-text-400">Model</label>
+        <Dropdown v-model="datasource.type" @change="setType">
           <option disabled selected>Select Model</option>
-          <option v-for="model in models" :value="model.name">{{ model.name }}</option>
+          <option v-for="model in datasources" :value="model.type">{{ model.name }}</option>
         </Dropdown>
-			</div>
+      </div>
+
+      <div v-if="datasource.type">
 
-      <div>
-        <label class="text-text-400">Filters</label>
         <div>
-          <div v-for="(filter, idx) in datasource.filters" class="flex flex-row gap-2">
-            <Dropdown v-model="filter.key">
-              <option disabled selected>Choose Field</option>
-              <option v-for="column in modelColumns" :value="column.name">{{ column.name }}</option>
-            </Dropdown>
-            <Dropdown v-model="filter.operator">
-              <option disabled selected>Choose Operator</option>
-              <option value="=">=</option>
-            </Dropdown>
-            <Textbox v-model="filter.value" />
-            <button type="button" @click="datasource.filters.splice(idx, 1)">
-              <svg width="14" height="14" class="fill-text-300 hover:fill-red-500" 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>
+          <label class="text-text-400">Key</label>
+          <Textbox v-model="datasource.key" />
         </div>
-        <div class="p-3 text-center">
-          <button type="button" class="text-primary"
-                  @click="datasource.filters.push({})">Add Filter</button>
+
+        <div v-if="datasource.filters">
+          <label class="text-text-400">Filters</label>
+          <div>
+            <div v-for="(filter, idx) in datasource.filters" class="flex flex-row gap-2">
+              <Dropdown v-model="filter.key">
+                <option disabled selected>Choose Field</option>
+                <option v-for="column in modelColumns" :value="column.name">{{ column.name }}</option>
+              </Dropdown>
+              <Dropdown v-model="filter.operator">
+                <option disabled selected>Choose Operator</option>
+                <option value="=">=</option>
+              </Dropdown>
+              <Textbox v-model="filter.value" />
+              <button type="button" @click="datasource.filters.splice(idx, 1)">
+                <svg width="14" height="14" class="fill-text-300 hover:fill-red-500" 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>
+          <div class="p-3 text-center">
+            <button type="button" class="text-primary"
+                    @click="datasource.filters.push({})">Add Filter</button>
+          </div>
         </div>
       </div>
 
@@ -89,7 +87,7 @@ export default{
 		},
 
     create(){
-      this.datasource = { filters:[] }
+      this.datasource = {}
       this.isOpen = true
     },
 
@@ -102,12 +100,17 @@ export default{
       if(this.useDatasource){
         this.socketEmit2(this.useDatasource[0], {})
           .then(res => {
-            this.models = res.models
+            this.datasources = res.datasources
           })
           .catch(err => console.error(err))
       }
     },
 
+    setType(){
+      const datasource = this.datasources.filter(_ => _.type === this.datasource.type).pop()
+      Object.assign(this.datasource, datasource)
+    }
+
 	},
 
   mounted() {
@@ -117,13 +120,12 @@ export default{
   computed: {
 
     canApply(){
-      return this.datasource.name &&
-          this.datasource.key &&
-          this.datasource.model
+      return this.datasource.type &&
+          this.datasource.key
     },
 
     modelColumns(){
-      return (this.models.filter(_ => _.name === this.datasource.model).pop() ?? {}).columns ?? []
+      return (this.datasources.filter(_ => _.name === this.datasource.model).pop() ?? {}).columns ?? []
     }
 
   },
@@ -131,7 +133,7 @@ export default{
 	data(){
 		return {
 			isOpen: false,
-			models: null,
+			datasources: null,
       datasource: {
         filters: []
       },

package/src/widgets/WebPageBuilder.vue

@@ -540,8 +540,7 @@
                            @postMessageToIframe="onPostMessageToIframe"/>
               </div>
 
-
-              <div class="p-5 text-center" v-if="useTemplateCreator">
+              <div class="p-5 text-center" v-if="useTemplateCreator && currentItem.type !== 'Style'">
                 <button type="button" class="text-primary"
                         @click="openTemplateCreator">
                   Save as Template
@@ -748,13 +747,11 @@ export default{
       }
 
       for(let key in component.props){
-        if(!this.compClasses.includes(key) && ![ 'enabled' ].includes(key)){
-
-          let value = component.props[key]
-          /*if(key === 'htmlText'){
-            value = removeStyleFromTag(value)
-          }*/
-          instance[key] = value
+        if(!this.compClasses.includes(key) &&
+            !this.containerClasses.includes(key) &&
+            !this.itemClasses.includes(key) &&
+            ![ 'enabled' ].includes(key)){
+          instance[key] = component.props[key]
         }
       }
 
@@ -1543,6 +1540,8 @@ export default{
             icons:[], columns:[ 'grid-cols-4' ],
           }},
 
+        { type:'DataList', name:'Data List', group:'Widgets', props:{}, items:[] },
+
         { type:'FAQ', name:'FAQ', group:'Widgets', thumbnailUrl:"/images/templates/faq.gif", props:{ items:[] }},
 
         { type:'FeatureList', name:'Feature List', group:'Widgets', props:{ items:[], columns:[], variant:['variant1'] }},
@@ -1635,9 +1634,11 @@ export default{
         'textTransform', 'whitespace', 'textOverflow', 'textDecoration',
         'boxShadow', 'opacity',
         'colSpan', 'rowSpan',
-        'flex', 'flexAlign', 'flexJustify', 'zIndex',
+        'flex', 'flexAlign', 'flexJustify', 'flexBasis', 'flexColumns',
+        'zIndex',
 
         'autoFlow', 'alignItems', 'justifyContent',
+        'letterSpacing',
 
         'animate',
 
@@ -1646,12 +1647,12 @@ export default{
       containerClasses: [
         'containerVariant', 'containerGridColumn', 'containerGap'
       ],
-      host: null,
-      iframeStyle: {},
-      iframeSrc: '',
       itemClasses: [
         'itemMinWidth', 'itemRatio', 'itemVariant'
       ],
+      host: null,
+      iframeStyle: {},
+      iframeSrc: '',
       layouts: [],
       prevData: null,
       previewModes: [

package/tailwind.config.js

@@ -35,6 +35,7 @@ module.exports = {
     'aspect-[1/2]', 'aspect-[2/3]', 'aspect-[3/4]', 'aspect-[8/9]',
 
     'hidden', 'block', 'inline-block', 'inline', 'flex', 'inline-flex', 'table', 'inline-table',
+    'grid', 'inline-grid',
 
     'static', 'fixed', 'absolute', 'relative', 'sticky',
 
@@ -252,6 +253,7 @@ module.exports = {
     'md:aspect-[1/2]', 'md:aspect-[2/3]', 'md:aspect-[3/4]', 'md:aspect-[8/9]',
 
     'md:hidden', 'md:block', 'md:inline-block', 'md:inline', 'md:flex', 'md:inline-flex', 'md:table', 'md:inline-table',
+    'md:grid', 'md:inline-grid',
 
     'md:static', 'md:fixed', 'md:absolute', 'md:relative', 'md:sticky',