@mixd-id/web-scaffold 0.1.230406199 → 0.1.230406201

package/package.json

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

package/src/components/DataList.vue

@@ -0,0 +1,92 @@
+<template>
+	<div :class="$style.comp">
+
+    <component v-for="(item, idx) in computedItems"
+               :is="item.type"
+               :key="item.key"
+               :="item" />
+
+    <div v-show="hasNext">
+      <button type="button" @click="loadNext" class="p-3 w-full text-primary">Load More</button>
+    </div>
+
+	</div>
+</template>
+
+<script>
+
+import {componentMixin} from "../mixin/component";
+
+export default{
+
+  inject: [ 'pageLoad' ],
+
+  mixins: [ componentMixin ],
+
+  props: {
+
+    data: Object,
+    datasource: Object,
+
+    items: Array,
+  },
+
+  computed: {
+
+    computedData(){
+      return (this.pageData ?? {})[(this.datasource ?? {}).key] ?? {}
+    },
+
+    dataItems(){
+      const dataItems = this.computedData.items ?? []
+      if(this.editMode === 1 && this.dataItems.length < 1) dataItems.push({})
+      return dataItems
+    },
+
+    computedItems(){
+      if(this.items.length < 1) return []
+
+      const items = []
+      const itemJSON = JSON.stringify(this.items[0])
+
+      for(let data of this.dataItems){
+        const item = JSON.parse(itemJSON)
+        item.data = data
+        items.push(item)
+
+        if(this.editMode === 1) break
+      }
+
+      return items
+    },
+
+    hasNext(){
+      return true
+    }
+
+  },
+
+  methods: {
+
+    loadNext(){
+      if(!this.pageLoad) return
+
+      this.pageLoad({
+        ...this.datasource,
+        page: (this.computedData.page ?? 0) + 1
+      })
+    },
+
+  }
+
+}
+
+</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

@@ -31,6 +31,7 @@
 <script>
 
 import { componentMixin } from "../mixin/component";
+import { applyDatasourceReplacer } from "../utils/helpers";
 
 export default{
 
@@ -50,6 +51,7 @@ export default{
     target: String,
     text: String,
     download: Object,
+    data: Object,
   },
 
   computed: {
@@ -62,14 +64,22 @@ export default{
       const obj = {}
 
       if(this.route.hash)
-        obj.hash = '#' + this.route.hash
+        obj.hash = '#' + (this.editMode === 1 ? this.route.hash :
+            applyDatasourceReplacer(this.route.hash, this.data))
 
       if(this.route.path)
-        obj.path = this.route.path
+        obj.path = this.editMode === 1 ? this.route.path :
+            applyDatasourceReplacer(this.route.path, this.data)
 
       return obj
     }
 
+  },
+
+  provide(){
+    return {
+      parentData: this.data
+    }
   }
 
 }

package/src/components/Modal.vue

@@ -1,48 +1,46 @@
 <template>
-  <div>
-    <Teleport to=".bW9k">
-      <Transition :name="computedTransition"
-									appear
-									@after-leave="onAfterLeave(); $emit('hide')"
-									@after-enter="$emit('show')">
-        <div v-if="currentState"
-             ref="modal"
-             :class="computedClass"
-             :style="computedStyle"
-						 :data-state="computedState ? 1 : 0">
-          <component v-if="Array.isArray(items) && items.length > 0"
-                     v-for="(item, idx) in items"
-                     :is="item.type"
-                     :key="item.key"
-                     :="item" />
-          <form v-else-if="useForm" @submit.prevent="$emit('submit')">
-            <div class="modal-head">
-              <slot name="head" :context="context"></slot>
-            </div>
-            <div :class="$style.modalBody">
-              <slot :context="context"></slot>
-            </div>
-            <div class="modal-foot">
-              <slot name="foot" :context="context"></slot>
-            </div>
-						<div v-if="isDisabled" :class="$style.overlay"></div>
-          </form>
-					<div v-else class="flex-1 min-h-0 flex flex-col relative">
-						<div class="modal-head">
-							<slot name="head" :context="context"></slot>
-						</div>
-						<div :class="$style.modalBody">
-							<slot :context="context"></slot>
-						</div>
-						<div class="modal-foot">
-							<slot name="foot" :context="context"></slot>
-						</div>
-						<div v-if="isDisabled" :class="$style.overlay"></div>
-					</div>
+  <Teleport to=".bW9k">
+    <Transition :name="computedTransition"
+                appear
+                @after-leave="onAfterLeave(); $emit('hide')"
+                @after-enter="$emit('show')">
+      <div v-if="currentState"
+           ref="modal"
+           :class="computedClass"
+           :style="computedStyle"
+           :data-state="computedState ? 1 : 0">
+        <component v-if="Array.isArray(items) && items.length > 0"
+                   v-for="(item, idx) in items"
+                   :is="item.type"
+                   :key="item.key"
+                   :="item" />
+        <form v-else-if="useForm" @submit.prevent="$emit('submit')">
+          <div class="modal-head">
+            <slot name="head" :context="context"></slot>
+          </div>
+          <div :class="$style.modalBody">
+            <slot :context="context"></slot>
+          </div>
+          <div class="modal-foot">
+            <slot name="foot" :context="context"></slot>
+          </div>
+          <div v-if="isDisabled" :class="$style.overlay"></div>
+        </form>
+        <div v-else class="flex-1 min-h-0 flex flex-col relative">
+          <div class="modal-head">
+            <slot name="head" :context="context"></slot>
+          </div>
+          <div :class="$style.modalBody">
+            <slot :context="context"></slot>
+          </div>
+          <div class="modal-foot">
+            <slot name="foot" :context="context"></slot>
+          </div>
+          <div v-if="isDisabled" :class="$style.overlay"></div>
         </div>
-      </Transition>
-    </Teleport>
-  </div>
+      </div>
+    </Transition>
+  </Teleport>
 </template>
 
 <script>

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: {
@@ -18,10 +21,21 @@ export default{
 
     tagName: {
       type: String,
-      default: 'span'
+      default: 'div'
+    }
+
+	},
+
+  computed: {
+
+    computedText(){
+      if(this.parentData && this.editMode !== 1){
+        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/mixin/component.js

@@ -177,7 +177,6 @@ export const componentMixin = {
   data(){
     return {
       lastStyle: {},
-      store: null,
       page: null,
     }
   },

package/src/widgets/ComponentSetting.vue

@@ -371,6 +371,22 @@
           </div>
         </div>
 
+        <div>
+          <label class="text-text-400">Line Clamp</label>
+          <div v-for="(_, index) in viewTypes"
+               v-show="_.value === viewType">
+            <Dropdown v-model="lineClamp[index]">
+              <option value="">
+                {{ emptyComponentText('lineClamp', index) }}
+              </option>
+              <option v-for="opt in components.lineClamp"
+                      :value="`${viewType}${opt[1]}`">
+                {{ opt[0] }}
+              </option>
+            </Dropdown>
+          </div>
+        </div>
+
         <div>
           <label class="text-text-400">Letter Spacing</label>
           <div v-for="(_, index) in viewTypes"
@@ -495,7 +511,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 +1209,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 = []
@@ -1288,6 +1444,12 @@ export default{
 
       return this.item.props.letterSpacing
     },
+    lineClamp(){
+      if(!Array.isArray(this.item.props.lineClamp))
+        this.item.props.lineClamp = []
+
+      return this.item.props.lineClamp
+    },
     lineHeight(){
       if(!Array.isArray(this.item.props.lineHeight))
         this.item.props.lineHeight = []
@@ -1582,6 +1744,8 @@ export default{
           [ 'Inline Flex', 'inline-flex' ],
           [ 'Table', 'table' ],
           [ 'Inline Table', 'inline-table' ],
+          [ 'Grid', 'grid' ],
+          [ 'Inline Grid', 'inline-grid' ],
         ],
         divideStyle: [
           [ 'Solid', 'divide-solid' ],
@@ -1730,6 +1894,15 @@ export default{
           [ 'Wider', 'tracking-wider' ],
           [ 'Widest', 'tracking-widest' ],
         ],
+        lineClamp: [
+          [ '1', 'line-clamp-1' ],
+          [ '2', 'line-clamp-2' ],
+          [ '3', 'line-clamp-3' ],
+          [ '4', 'line-clamp-4' ],
+          [ '5', 'line-clamp-5' ],
+          [ '6', 'line-clamp-6' ],
+          [ 'None', 'line-clamp-none' ],
+        ],
         lineHeight: [
           [ 'None', 'leading-none' ],
           [ 'Tight', 'leading-tight' ],

package/src/widgets/ContactForm.vue

@@ -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/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/WebPageBuilder.vue

@@ -1540,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'] }},
@@ -1636,7 +1638,7 @@ export default{
         'zIndex',
 
         'autoFlow', 'alignItems', 'justifyContent',
-        'letterSpacing',
+        'letterSpacing', 'lineClamp',
 
         'animate',
 

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',
 
@@ -228,6 +229,9 @@ module.exports = {
     'underline', 'overline', 'line-through', 'no-underline',
     'truncate', 'text-ellipsis', 'text-clip',
 
+    'line-clamp-1', 'line-clamp-2', 'line-clamp-3',  'line-clamp-4',  'line-clamp-5',
+    'line-clamp-6', 'line-clamp-none',
+
     // // //
 
     'md:flex-wrap', 'md:flex-wrap-reverse', 'md:flex-nowrap',
@@ -252,6 +256,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',
 
@@ -445,6 +450,9 @@ module.exports = {
     'md:underline', 'md:overline', 'md:line-through', 'md:no-underline',
     'md:truncate', 'md:text-ellipsis', 'md:text-clip',
 
+    'md:line-clamp-1', 'md:line-clamp-2', 'md:line-clamp-3',  'md:line-clamp-4',  'md:line-clamp-5',
+    'md:line-clamp-6', 'md:line-clamp-none',
+
   ],
   theme: {
     extend: {