@mixd-id/web-scaffold 0.1.230406126 → 0.1.230406128

package/package.json

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

package/src/components/Ahref.vue

@@ -30,6 +30,7 @@ export default {
 			type: [ String, Number ],
 			default: "primary" // primary|secondary|outline, default:primary
 		},
+
 	},
 
 	computed: {
@@ -46,6 +47,7 @@ export default {
 				.filter(_ => _)
 				.join(' ')
 		},
+
 	},
 }
 </script>

package/src/components/Alert.vue

@@ -50,15 +50,19 @@
 export default{
 
 	props: {
+
 		state: Object,
+
 		mode: {
 			type: String,
 			default: 'alert' // alert | confirm
 		},
+
 		text: {
 			type: String,
 			default: 'OK'
-		}
+		},
+
 	},
 
 	computed: {

package/src/components/Switch.vue

@@ -13,9 +13,13 @@ import { parseBoolean, uid } from "../utils/helpers.mjs"
 export default{
 
 	props:{
-		modelValue: [ String, Number, Boolean ],
+
+		modelValue: undefined,
+
 		trueValue: undefined,
-		falseValue: undefined
+
+		falseValue: undefined,
+
 	},
 
 	computed: {
@@ -86,4 +90,4 @@ export default{
 .switch>input:not(:checked) + label + * + *{
 	@apply hidden;
 }
-</style>
+</style>

package/src/index.js

@@ -399,7 +399,6 @@ 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('PaddingBox', defineAsyncComponent(() => import("./components/PaddingBox.vue")))
 
     app.component('WebPageBuilder', defineAsyncComponent(() => import("./widgets/WebPageBuilder.vue")))
     app.component('WebPageSelector', defineAsyncComponent(() => import("./widgets/WebPageSelector.vue")))
@@ -443,6 +442,9 @@ export default{
     app.component('ImageSetting', defineAsyncComponent(() => import("./widgets/ImageSetting.vue")))
     app.component('MarginSetting', defineAsyncComponent(() => import("./widgets/MarginSetting.vue")))
     app.component('PaddingSetting', defineAsyncComponent(() => import("./widgets/PaddingSetting.vue")))
+    app.component('Review', defineAsyncComponent(() => import("./widgets/Review.vue")))
+    app.component('ReviewItem', defineAsyncComponent(() => import("./widgets/ReviewItem.vue")))
+    app.component('ReviewSetting', defineAsyncComponent(() => import("./widgets/ReviewSetting.vue")))
     app.component('Share', defineAsyncComponent(() => import("./widgets/Share.vue")))
     app.component('ShareItem', defineAsyncComponent(() => import("./widgets/ShareItem.vue")))
     app.component('ShareSetting', defineAsyncComponent(() => import("./widgets/ShareSetting.vue")))

package/src/widgets/Review.vue

@@ -0,0 +1,133 @@
+<template>
+	<div :class="$style.review" v-if="items && items.rate && items.count && Array.isArray(items.reviews)">
+
+		<div>
+			<h3>{{ title }}</h3>
+		</div>
+
+		<div class="flex flex-col md:flex-row md:gap-12">
+			<div class="md:w-[25%]">
+
+				<div class="flex flex-col gap-4">
+					<div class="p-3 rounded-lg text-center flex flex-col items-center">
+						<div class="flex flex-row items-baseline">
+							<h4 class="text-9xl text-primary">{{ items.rate.toFixed(1) }}</h4>
+							<strong class="text-lg">/ 5.0</strong>
+						</div>
+						<div>
+							<label>Total: {{ items.count }} ulasan</label>
+						</div>
+					</div>
+
+					<div class="flex flex-col gap-2">
+						<div class="flex flex-row items-center gap-4" v-for="i in 5">
+							<div class="flex flex-row gap-1">
+								<svg width="19" height="19" class="fill-primary" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 576 512"><path d="M259.3 17.8L194 150.2 47.9 171.5c-26.2 3.8-36.7 36.1-17.7 54.6l105.7 103-25 145.5c-4.5 26.3 23.2 46 46.4 33.7L288 439.6l130.7 68.7c23.2 12.2 50.9-7.4 46.4-33.7l-25-145.5 105.7-103c19-18.5 8.5-50.8-17.7-54.6L382 150.2 316.7 17.8c-11.7-23.6-45.6-23.9-57.4 0z"/></svg>
+								<div>{{ i }}</div>
+							</div>
+							<div class="flex-1">
+								<div :class="$style.bar">
+									<div :style="barStyle(items.countByRate ? items.countByRate[i] : 0, items.count)"></div>
+								</div>
+							</div>
+							<div class="w-[2rem] text-right">{{ items.countByRate ? items.countByRate[i] : 0 }}</div>
+						</div>
+					</div>
+
+				</div>
+			</div>
+
+			<div class="md:flex-1 py-6 flex flex-col divide-y divide-gray-200">
+
+				<div v-for="review in items.reviews" class="py-4 flex flex-col gap-2">
+					<div class="flex flex-row gap-4">
+						<div class="flex-1 flex flex-col gap-2">
+							<div class="flex flex-row gap-1">
+								<div v-for="i in 5">
+									<svg v-if="review.rate >= i" width="14" height="14" class="fill-primary" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 576 512"><path d="M259.3 17.8L194 150.2 47.9 171.5c-26.2 3.8-36.7 36.1-17.7 54.6l105.7 103-25 145.5c-4.5 26.3 23.2 46 46.4 33.7L288 439.6l130.7 68.7c23.2 12.2 50.9-7.4 46.4-33.7l-25-145.5 105.7-103c19-18.5 8.5-50.8-17.7-54.6L382 150.2 316.7 17.8c-11.7-23.6-45.6-23.9-57.4 0z"/></svg>
+									<svg v-else width="14" height="14" class="fill-primary" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 576 512"><path d="M528.1 171.5L382 150.2 316.7 17.8c-11.7-23.6-45.6-23.9-57.4 0L194 150.2 47.9 171.5c-26.2 3.8-36.7 36.1-17.7 54.6l105.7 103-25 145.5c-4.5 26.3 23.2 46 46.4 33.7L288 439.6l130.7 68.7c23.2 12.2 50.9-7.4 46.4-33.7l-25-145.5 105.7-103c19-18.5 8.5-50.8-17.7-54.6zM388.6 312.3l23.7 138.4L288 385.4l-124.3 65.3 23.7-138.4-100.6-98 139-20.2 62.2-126 62.2 126 139 20.2-100.6 98z"/></svg>
+								</div>
+							</div>
+							<p>{{ review.details ?? review.text }}</p>
+						</div>
+						<div v-if="review.imageUrl">
+							<Image :src="imageSrc(review.imageUrl)" class="w-[80px] aspect-square rounded-lg" />
+						</div>
+					</div>
+					<div class="flex flex-row gap-2">
+						<small class="text-gray-400">{{ review.name }}</small>
+						<div class="text-gray-400">&bull;</div>
+						<small class="text-gray-400">{{ timeOf(review.createdAt) }}</small>
+					</div>
+				</div>
+
+			</div>
+		</div>
+
+	</div>
+</template>
+
+<script>
+
+import { componentMixin } from "../mixin/component";
+import dayjs from "dayjs";
+
+export default{
+
+	mixins: [ componentMixin ],
+
+	props: {
+
+		title: String,
+
+		items: Object
+
+	},
+
+	methods: {
+
+		barStyle(count, totalCount){
+			count = count > totalCount ? totalCount : count
+			const width = Math.round(count / totalCount * 100) + '%'
+			return {
+				width
+			}
+		},
+
+		timeOf(date){
+			return dayjs(date).format('D MMM YYYY HH:mm')
+		},
+
+
+		imageSrc(url){
+			return import.meta.env.VITE_IMAGE_HOST + '/' + url
+		}
+
+	},
+
+}
+
+</script>
+
+<style module>
+
+.review{
+	@apply relative flex flex-col gap-4;
+	background-image: v-bind(bgImages[0]);
+}
+
+.bar{
+	@apply h-[1rem] bg-gray-100 rounded-lg;
+	@apply relative;
+}
+.bar>*{
+	@apply absolute top-0 left-0 h-full bg-primary rounded-lg;
+}
+
+@media screen(md){
+	.review{
+		background-image: v-bind(bgImages[1]);
+	}
+}
+
+</style>

package/src/widgets/ReviewItem.vue

@@ -0,0 +1,25 @@
+<template>
+	<div class="flex-1 flex flex-row items-center gap-2">
+		{{ item.props.name ?? item.type }}
+	</div>
+</template>
+
+<script>
+
+export default{
+
+	props: {
+		item: Object
+	}
+
+}
+
+</script>
+
+<style module>
+
+.comp{
+
+}
+
+</style>

package/src/widgets/ReviewSetting.vue

@@ -0,0 +1,192 @@
+<template>
+	<div :class="$style.comp">
+
+		<div class="flex flex-col gap-1">
+			<label class="text-text-400">Title</label>
+			<Textbox v-model="item.props.title" maxlength="40" @keyup.enter="$emit('change')" placeholder="Title" />
+		</div>
+
+		<div class="flex flex-col gap-1">
+			<label class="text-text-400">Mode</label>
+			<Dropdown v-model="item.props.mode" @change="item.props.items = { reviews:[] }">
+				<option value="">Static</option>
+				<option value="dynamic">Dynamic</option>
+			</Dropdown>
+			<Textbox v-if="item.props.mode === 'dynamic'"
+							 placeholder="Var" v-model="item.props.src"
+							 @blur="$emit('change')"
+							 @keyup.enter="$emit('change')" />
+		</div>
+
+		<div v-if="item.props.mode !== 'dynamic'">
+			<div class="flex flex-row gap-2">
+				<label class="flex-1 text-text-400">Reviews</label>
+				<button type="button" class="text-primary" @click="$refs.reviewModal.open({ item:{} })">Add Review</button>
+			</div>
+			<div class="mt-1">
+				<ListItem :items="items.reviews"
+				          @reorder="(from, to) => { items.reviews.splice(to, 0, items.reviews.splice(from, 1)[0]); calcReview(); $emit('change') }">
+				  <template v-slot="{ item, index }">
+				    <div class="flex flex-row items-center gap-3 p-2">
+				      <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 cursor-pointer" @click="$refs.reviewModal.open({ item, index })">
+								<p class="line-clamp-1">
+									<span class="w-[19px] aspect-square rounded-full bg-primary text-white inline-flex items-center justify-center">
+										{{ item.rate }}
+									</span>
+									{{ item.text }}
+								</p>
+							</div>
+							<button type="button" @click="confirm($t('Remove this item?'), '', () => { items.reviews.splice(index, 1); calcReview(); $emit('change')  })">
+								<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>
+				  </template>
+				</ListItem>
+			</div>
+		</div>
+
+		<Modal ref="reviewModal" width="360" height="420">
+		  <template v-slot:head>
+		    <div class="relative p-6">
+		      <h3>Review</h3>
+		      <div class="absolute top-0 right-0 p-2">
+		        <button type="button" class="p-2" @click="$refs.reviewModal.close()">
+		          <svg width="24" height="24" viewBox="0 0 24 24" class="fill-text-300 hover:fill-red-500" xmlns="http://www.w3.org/2000/svg">
+		            <path d="M6.53034 5.46965C6.23745 5.17676 5.76257 5.17676 5.46968 5.46965C5.17679 5.76255 5.17679 6.23742 5.46968 6.53031L10.9393 12L5.46967 17.4697C5.17678 17.7626 5.17678 18.2374 5.46967 18.5303C5.76256 18.8232 6.23744 18.8232 6.53033 18.5303L12 13.0606L17.4697 18.5303C17.7626 18.8232 18.2375 18.8232 18.5303 18.5303C18.8232 18.2374 18.8232 17.7626 18.5303 17.4697L13.0607 12L18.5303 6.53032C18.8232 6.23743 18.8232 5.76256 18.5303 5.46966C18.2374 5.17677 17.7626 5.17677 17.4697 5.46966L12 10.9393L6.53034 5.46965Z"/>
+		          </svg>
+		        </button>
+		      </div>
+		    </div>
+		  </template>
+		  <template v-slot:foot="{ context }">
+		    <div class="p-6 flex flex-row gap-3">
+					<Button class="w-[100px]"
+									:state="!canSaveReview(context.item) ? -1 : 1"
+									@click="addReview(context.item, context.index); $refs.reviewModal.close()">
+						Add Review
+					</Button>
+					<Button class="w-[100px]" variant="secondary"
+									:state="!canSaveReview(context.item) ? -1 : 1"
+									@click="addReview(context.item, context.index); Object.assign(context, { item:{}, index:-1 })">
+						Add More
+					</Button>
+		    </div>
+		  </template>
+		  <template #default="{ context }">
+				<div class="flex-1 p-6 flex flex-col gap-3">
+					<div>
+						<Dropdown v-model="context.item.rate" class="w-[120px]">
+							<option :value="5">5</option>
+							<option :value="4">4</option>
+							<option :value="3">3</option>
+							<option :value="2">2</option>
+							<option :value="1">1</option>
+						</Dropdown>
+					</div>
+					<div>
+						<Textbox v-model="context.item.text" class="flex-1" placeholder="Text"/>
+					</div>
+					<div class="flex flex-col gap-2">
+						<div class="flex flex-row gap-3">
+							<Textbox v-model="context.item.name" class="flex-1" placeholder="Nama"/>
+							<Datepicker mode="popup" v-model="context.item.date" class="w-[100px]" />
+							<Textbox v-model="context.item.time" class="w-[80px]" maxlength="5" />
+						</div>
+					</div>
+					<div>
+						<Image ref="currentReviewImage" :src="context.item.imageUrl"
+									 class="w-[96px] aspect-square bg-text-50 rounded-lg"
+									 :editable="true"
+									 @click="$refs.currentReviewImage.edit()"
+									 @change="(_, file) => context.item.imageUrl = file" />
+					</div>
+				</div>
+			</template>
+		</Modal>
+
+		<ComponentSetting :item="item"
+											:view-type="viewType"
+											:view-types="viewTypes"
+											defaultDisplay="flex"
+											@change="$emit('change')" />
+
+	</div>
+</template>
+
+<script>
+
+import dayjs from "dayjs";
+
+export default{
+
+	emits: [ 'change' ],
+
+	inject: [ 'confirm', 'socketEmit2' ],
+
+	methods: {
+
+		addReview(review, index){
+			review.createdAt = review.date + ' ' + review.time
+
+			if(index >= 0){
+				Object.assign(this.items.reviews[index], review)
+			}
+			else{
+				this.items.reviews.push(review)
+			}
+			this.calcReview()
+			this.$emit('change')
+		},
+
+		calcReview(){
+			this.items.count = this.items.reviews.length
+			this.items.rate = this.items.reviews.reduce((acc, cur) => acc + parseInt(cur.rate), 0) / this.items.count
+		},
+
+		save(){
+			this.$emit('save')
+			this.close()
+		},
+
+		canSaveReview(item){
+			const date = dayjs(item.date + ' ' + item.time)
+			return item.rate && item.text && item.name &&
+				date.format('YYYY-MM-DD') === item.date && date.format('HH:mm') === item.time
+		}
+
+	},
+
+	props: {
+
+		item: Object,
+
+		viewType: String,
+		viewTypes: Array,
+
+	},
+
+	computed: {
+
+		items(){
+			if(!this.item.props.items){
+				this.item.props.items = { reviews:[] }
+			}
+			return this.item.props.items
+		}
+
+	}
+
+}
+
+</script>
+
+<style module>
+
+.comp{
+	@apply flex flex-col gap-4;
+}
+
+</style>

package/src/widgets/WebPageBuilder.vue

@@ -1072,6 +1072,10 @@ export default{
 						items:[], columns:[], variant:['variant1'],
 					}},
 
+				{ type:'Review', name:'Review', group:'Widgets', props:{
+						channels:[],
+					}},
+
 				{ type:'Share', name:'Share To', group:'Widgets', props:{
 						channels:[],
 					}},

package/src/components/PaddingBox.vue

@@ -1,134 +0,0 @@
-<template>
-	<div :class="$style.comp">
-		<div class="flex flex-row gap-1">
-			<button v-if="types.includes(1)" type="button" @click="setType(1)">
-				<svg width="12" height="12" class="fill-text" :class="{ 'fill-primary-500':type === 1 }" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><path d="M400 32H48C21.5 32 0 53.5 0 80v352c0 26.5 21.5 48 48 48h352c26.5 0 48-21.5 48-48V80c0-26.5-21.5-48-48-48zm16 400c0 8.8-7.2 16-16 16H48c-8.8 0-16-7.2-16-16V80c0-8.8 7.2-16 16-16h352c8.8 0 16 7.2 16 16v352z"/></svg>
-			</button>
-			<button v-if="types.includes(2)" type="button" @click="setType(2)">
-				<svg width="12" height="12" class="fill-text" :class="{ 'fill-primary-500':type === 2 }" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><path d="M120 32H48A48 48 0 0 0 0 80v352a48 48 0 0 0 48 48h72a8 8 0 0 0 8-8v-16a8 8 0 0 0-8-8H48a16 16 0 0 1-16-16V80a16 16 0 0 1 16-16h72a8 8 0 0 0 8-8V40a8 8 0 0 0-8-8zm280 0h-72a8 8 0 0 0-8 8v16a8 8 0 0 0 8 8h72a16 16 0 0 1 16 16v352a16 16 0 0 1-16 16h-72a8 8 0 0 0-8 8v16a8 8 0 0 0 8 8h72a48 48 0 0 0 48-48V80a48 48 0 0 0-48-48z"/></svg>
-			</button>
-			<button v-if="types.includes(4)" type="button" @click="setType(4)">
-				<svg width="12" height="12" class="fill-text" :class="{ 'fill-primary-500':type === 4 }" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path d="M0 80v352c0 26.51 21.49 48 48 48h416c26.51 0 48-21.49 48-48V80c0-26.51-21.49-48-48-48H48C21.49 32 0 53.49 0 80zm240-16v176H32V80c0-8.837 7.163-16 16-16h192zM32 432V272h208v176H48c-8.837 0-16-7.163-16-16zm240 16V272h208v160c0 8.837-7.163 16-16 16H272zm208-208H272V64h192c8.837 0 16 7.163 16 16v160z"/></svg>
-			</button>
-		</div>
-		<div class="grid gap-1" :class="type >= 4 ? 'grid-cols-4' : 'grid-cols-2'">
-			<select v-if="type >= 1" :value="values[0]"
-							@change="(e) => setValue(0, e.target.value)">
-				<option v-for="obj in opts" :value="obj.value">{{ obj.text ?? obj.value }}</option>
-			</select>
-			<select v-if="type >= 2" :value="values[1]"
-							@change="(e) => setValue(1, e.target.value)">
-				<option v-for="obj in opts" :value="obj.value">{{ obj.text ?? obj.value }}</option>
-			</select>
-			<select v-if="type >= 4" :value="values[2]"
-							@change="(e) => setValue(2, e.target.value)">
-				<option v-for="obj in opts" :value="obj.value">{{ obj.text ?? obj.value }}</option>
-			</select>
-			<select v-if="type >= 4" :value="values[3]"
-							@change="(e) => setValue(3, e.target.value)">
-				<option v-for="obj in opts" :value="obj.value">{{ obj.text ?? obj.value }}</option>
-			</select>
-		</div>
-	</div>
-</template>
-
-<script>
-
-export default{
-
-	emits: [ 'change', 'update:modelValue' ],
-
-	props: {
-
-		modelValue: String,
-
-		types: {
-			type: Array,
-			default: [ 1, 2, 4 ]
-		},
-
-		opts: {
-			type: Array,
-			default: [
-				{ text:'0', value:'' },
-				{ text:'1', value:'1' },
-				{ text:'2', value:'2' },
-				{ text:'3', value:'3' },
-				{ text:'4', value:'4' },
-				{ text:'5', value:'5' },
-				{ text:'6', value:'6' },
-				{ text:'7', value:'7' },
-				{ text:'8', value:'8' },
-			]
-		}
-
-	},
-
-	methods: {
-
-		setType(type){
-			let v
-			switch(type){
-				case 1:
-					v = [ this.values[0] ]
-					break
-				case 2:
-					v = [ this.values[0], this.values[1] ?? '0' ]
-					break
-				case 4:
-					v = [
-						this.values[0],
-						this.values[1] ?? '0',
-						this.values[2] ?? '0',
-						this.values[3] ?? '0'
-					]
-					break
-			}
-
-			if(Array.isArray(v)){
-				this.$emit('update:modelValue', v.join(','))
-				this.$emit('change')
-			}
-		},
-
-		setValue(idx, value){
-			const v = [ ...this.values ]
-			v[idx] = value
-			this.$emit('update:modelValue', v.join(','))
-			this.$emit('change')
-		}
-
-	},
-
-	computed: {
-
-		type(){
-			return (this.modelValue ?? '').split(',').length
-		},
-
-		values(){
-			return (this.modelValue ?? '').split(',')
-		}
-
-	}
-
-}
-
-</script>
-
-<style module>
-
-.comp{
-	@apply flex flex-col gap-1;
-}
-
-.comp button{
-	@apply border-[1px] border-text-200 bg-text-100 rounded-lg p-1 px-3;
-}
-
-.comp select{
-	@apply appearance-none outline-none p-1 px-2 bg-transparent cursor-pointer w-full;
-	@apply border-[1px] border-text-200 rounded-lg;
-}
-
-</style>