@mixd-id/web-scaffold 0.1.230406087 → 0.1.230406089

package/package.json

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

package/src/components/Alert.vue

@@ -22,14 +22,14 @@
 						</div>
 
 						<div class="mt-4" v-if="mode === 'alert'">
-							<Button @click="$emit('dismiss')" class="min-w-[88px]">
+							<Button ref="btnOK" @click="$emit('dismiss')" class="min-w-[88px]">
 								<strong class="px-4">
 									{{ text }}
 								</strong>
 							</Button>
 						</div>
 						<div class="mt-4 flex flex-row gap-2" v-else-if="mode === 'confirm'">
-							<Button @click="$emit('confirm')" class="min-w-[88px]">
+							<Button ref="btnOK" @click="$emit('confirm')" class="min-w-[88px]" tabindex="0">
 								<strong class="px-4">
 									{{ text }}
 								</strong>
@@ -123,6 +123,7 @@ export default{
 	methods: {
 
 		onAfterAppear(){
+			this.$refs.btnOK.focus()
 			this.$emit('appear')
 		}
 

package/src/components/Button.vue

@@ -136,6 +136,10 @@ export default{
 	outline: solid 1px rgb(var(--primary-700));
 	border: solid 1px rgb(var(--primary-400));
 }
+.button-primary:focus{
+	outline-color: rgb(var(--primary-800));
+	border-color: rgb(var(--primary-600));
+}
 .button-primary:hover{
 	@apply bg-primary-600;
 	outline-color: rgb(var(--primary-800))

package/src/components/Carousel.vue

@@ -3,7 +3,11 @@
 
     <div ref="inner" :class="innerClass">
 			<div v-for="item in items" :class="itemClass">
-				<component  :is="item.type" :="item.props" :ratio="ratio" />
+				<component  :is="item.type"
+										:uid="item.uid"
+										:="item.props"
+										:ratio="ratio"
+										:ext-class="item.extClass" />
 			</div>
     </div>
 

package/src/components/CitySelector.vue

@@ -0,0 +1,59 @@
+<template>
+	<Modal :state="isOpen" width="480" height="480">
+	  <template v-slot:head>
+	    <div class="relative p-5">
+	      <h3>Pilih Kota</h3>
+	      <div class="absolute top-0 right-0">
+	        <button type="button" class="p-2" @click="close">
+	          <svg width="24" height="24" viewBox="0 0 24 24" class="fill-text-300" 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>
+	    <div class="p-5">
+
+	    </div>
+	  </template>
+	  <div class="flex-1 p-5">
+	  </div>
+	</Modal>
+</template>
+
+<script>
+
+export default{
+
+	inject: [ 'socketEmit2' ],
+
+	data(){
+		return {
+			isOpen: false
+		}
+	},
+
+	methods: {
+
+		open(id){
+			this.isOpen = true
+		},
+
+		close(){
+			this.isOpen = false
+		}
+
+	}
+
+}
+
+</script>
+
+<style module>
+
+.comp{
+
+}
+
+</style>

package/src/components/Datepicker.vue

@@ -1,23 +1,23 @@
 <template>
 
-  <div :class="compClass">
-
-    <div v-if="mode === '' || mode === 'simple'">
-			<select v-model="DD">
-				<option disabled selected>Tanggal</option>
-				<option v-for="d in 31" :value="d.toString().padStart(2, '0')">{{ d }}</option>
-			</select>
-			<select v-model="MM">
-				<option disabled selected>Bulan</option>
-				<option v-for="mmm in months" :value="mmm[0]">{{ mmm[1] }}</option>
-			</select>
-			<select v-model="YYYY">
-				<option disabled selected>Tahun</option>
-				<option v-for="yyyy in years" :value="yyyy">{{ yyyy }}</option>
-			</select>
-    </div>
-
-		<div v-else-if="mode === 'popup'" ref="popup"
+	<div v-if="mode === ''" :class="compClass">
+		<select v-model="DD">
+			<option disabled selected>Tanggal</option>
+			<option v-for="d in 31" :value="d.toString().padStart(2, '0')">{{ d }}</option>
+		</select>
+		<select v-model="MM">
+			<option disabled selected>Bulan</option>
+			<option v-for="mmm in months" :value="mmm[0]">{{ mmm[1] }}</option>
+		</select>
+		<select v-model="YYYY">
+			<option disabled selected>Tahun</option>
+			<option v-for="yyyy in years" :value="yyyy">{{ yyyy }}</option>
+		</select>
+	</div>
+
+  <div v-else :class="compClass">
+
+		<div v-if="mode === 'popup'" ref="popup"
 				 @click="!readonly ? contextMenu = { caller:$refs.popup, value:this.modelValue } : null"
 				 class="flex-1">
 			<input class="flex-1" type="text" readonly :value="DMMMYYYY"/>
@@ -102,9 +102,9 @@ export default{
 
   setup(props, { emit }){
 
-		const DD = ref(dayjs(props.modelValue).format('DD'))
-		const MM = ref(dayjs(props.modelValue).format('MM'))
-		const YYYY = ref(dayjs(props.modelValue).format('YYYY'))
+		const DD = ref(dayjs(props.modelValue ?? props.defaultValue).format('DD'))
+		const MM = ref(dayjs(props.modelValue ?? props.defaultValue).format('MM'))
+		const YYYY = ref(dayjs(props.modelValue ?? props.defaultValue).format('YYYY'))
 
 		watch([ YYYY, MM, DD ], (to) => {
 			emit('update:modelValue', to.join('-'))
@@ -136,6 +136,8 @@ export default{
 
     modelValue:String,
 
+		defaultValue: String,
+
 		readonly: undefined,
 
   },
@@ -262,9 +264,8 @@ export default{
 <style module>
 
 .datepicker {
-	@apply h-[var(--h-cp)];
+	@apply min-h-[var(--h-cp)];
 	@apply flex items-center rounded-lg overflow-hidden cursor-pointer relative;
-	@apply border-[1px] border-text-200 bg-base-50;
 	@apply cursor-pointer;
 }
 .datepicker:not(.readonly){
@@ -301,16 +302,34 @@ export default{
 	@apply block fill-text-300;
 }
 
-.datepicker.mode-calendar{
+.selected{
+	@apply bg-primary;
+}
+
+.mode-calendar{
   @apply p-2 h-auto;
 }
 
+.mode-{
+	@apply flex flex-row gap-2;
+}
+.mode- select{
+	@apply bg-base border-[1px] border-text-200 rounded-lg;
+	@apply min-h-[var(--h-cp)];
+}
+.mode- select:first-child{
+	@apply w-12;
+}
+.mode- select:nth-child(2){
+	@apply w-72;
+}
+.mode- select:last-child{
+	@apply w-48;
+}
+
 .datepicker-date--1, .datepicker-date-1{
   @apply text-gray-500;
 }
 
-.selected{
-	@apply bg-primary;
-}
 
 </style>

package/src/components/Textbox.vue

@@ -3,7 +3,7 @@
 		<slot name="start"></slot>
 		<input :type="computedType" :disabled="isDisabled" @focus="isActive = true" @input="onInput" @blur="onBlur"
 			:placeholder="placeholder" :maxlength="maxlength" ref="input" autocomplete="new-password"
-					 :value="displayedValue" :readonly="Boolean(readonly)"
+					 :value="displayedValue" :readonly="Boolean(readonly)" @paste="onPaste"
 			@keydown="onKeyDown"/>
 		<button class="mr-2" v-if="Boolean(clearable) && !Boolean(readonly) && state >= 1 && modelValue" type="button" @click="$emit('clear')">
 			<svg :class="$style.svg" width="19" height="19" viewBox="0 0 24 24" class="fill-text-200" xmlns="http://www.w3.org/2000/svg">
@@ -128,12 +128,31 @@ export default{
 			this.$emit('blur', e)
 		},
 
+		onPaste(e){
+			e.preventDefault()
+
+			let text = (e.clipboardData || window.clipboardData).getData("text");
+
+			switch(this.type){
+				case 'tel':
+					text = text.replace(/[^0-9]/g, '')
+					break
+			}
+
+			if(parseInt(this.maxlength) > 0){
+				text = text.substring(0, parseInt(this.maxlength))
+			}
+
+			this.$emit('update:modelValue', text)
+		},
+
 		onKeyDown(e){
 			if([ 'number', 'tel' ].includes(this.type)){
 				if(((e.keyCode >= 48 && e.keyCode <= 57) || (e.keyCode >= 96 && e.keyCode <= 105) ||
 					[ 8, 9, 13, 27, 37, 38, 39, 40, 46 ].includes(e.keyCode)) && !e.ctrlKey && !e.metaKey && !e.shiftKey && !e.altKey);
 				else if(e.keyCode === 65 && (e.ctrlKey || e.metaKey));
 				else if(e.keyCode === 82 && (e.ctrlKey || e.metaKey));
+				else if(e.keyCode === 86 && (e.ctrlKey || e.metaKey)); // ctrl-v
 				else{
 					e.preventDefault()
 				}

package/src/index.js

@@ -169,6 +169,14 @@ const util = {
     }
   },
 
+  removeEmpty(array, emptyValues = [ '', '{}', '[]' ]){
+    for (let i = array.length - 1; i >= 0; i--) {
+      if (!array[i] || emptyValues.includes(JSON.stringify(array[i])) || Object.values(array[i]).join('').length <= 0){
+        array.splice(i, 1);
+      }
+    }
+  },
+
   onEvent: (arr, updates, opt = {}) => {
 
     const [ model, event, items ] = updates
@@ -252,6 +260,7 @@ export default{
     app.component('Block', defineAsyncComponent(() => import("./components/Block.vue")))
     app.component('Button', defineAsyncComponent(() => import("./components/Button.vue")))
     app.component('Box', defineAsyncComponent(() => import("./components/Box.vue")))
+    app.component('CitySelector', defineAsyncComponent(() => import("./components/CitySelector.vue")))
     app.component('ColorPicker', defineAsyncComponent(() => import("./components/ColorPicker.vue")))
     app.component('SearchButton', defineAsyncComponent(() => import("./components/SearchButton.vue")))
     app.component('ChatTyping', defineAsyncComponent(() => import("./components/ChatTyping.vue")))

package/src/widgets/CarouselSetting.vue

@@ -5,33 +5,6 @@
 				 v-show="viewType === _.value">
 			<div class="grid grid-cols-2 gap-4">
 
-				<div class="col-span-2">
-					<div class="flex flex-row gap-2">
-						<label class="flex-1 text-text-400">Items</label>
-						<button type="button" class="text-primary"
-										@click="$refs.imageModal.open({ viewType, item:{ type:'Image', props:{ src:[], margin:[], padding:[], bdColor:[], bdSize:[ '0' ], bdRadius:[], bdStyle:[ 'solid' ] } } })">Add Item</button>
-					</div>
-					<ListItem :items="item.props.items" class="mt-1"
-										@reorder="(from, to) => { item.props.items.splice(to, 0, item.props.items.splice(from, 1)[0]); $emit('change') }">
-						<template v-slot="{ item:comp, index }">
-							<div class="flex flex-row gap-3 p-2 bg-base-500 items-center rounded-lg mb-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"
-										 @click="$refs.imageModal.open({ item:comp, index, viewType })">
-									<component :is="`${comp.type}Item`" :item="comp" :viewType="viewType" :viewTypes="viewTypes" />
-								</div>
-								<div>
-									<button type="button" @click="confirm('Remove item?', { onConfirm: () => { item.props.items.splice(index, 1); $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>
-							</div>
-						</template>
-					</ListItem>
-				</div>
-
 				<div>
 					<label class="text-text-400">Ratio</label>
 					<Dropdown v-model="item.props.ratio[idx]" class="mt-1" @change="$emit('change')">
@@ -105,8 +78,8 @@
 			<template #foot="{ context }">
 				<div class="p-5">
 					<Button type="button" class="w-full" @click="context.index >= 0 ?
-						item.props.items[context.index] = context.item :
-						item.props.items.push(context.item);
+						item.items[context.index] = context.item :
+						item.items.push(context.item);
 						$refs.imageModal.close();
 						$emit('change')
 						">
@@ -154,6 +127,12 @@ export default{
 
 		imageRatio(){
 			return 'aspect-[4/1] md:aspect-[8/1]'
+		},
+
+		items(){
+			if(!Array.isArray(this.item.items))
+				this.item.items = []
+			return this.item.items
 		}
 
 	}

package/src/widgets/ContactForm.vue

@@ -1,28 +1,72 @@
 <template>
-	<div :class="$style.comp">
-		<div :class="$style.form">
+	<div :class="compClass">
+		<div>
+			<h2 v-if="title">{{ title }}</h2>
+			<p v-if="description" v-html="description"></p>
+		</div>
 
-			<div>
-				<h2 v-if="title">{{ title }}</h2>
-				<p v-if="description" v-html="description"></p>
-			</div>
+		<div class="flex flex-col gap-4">
+			<div v-for="field in fields">
+				<label class="text-gray-600">{{ field.label ?? field.type }}</label>
 
-			<div class="flex flex-col gap-4">
-				<div v-for="field in fields">
-					<label class="text-gray-700">{{ field.label ?? field.type }}</label>
+				<div class="mt-1">
 					<Textbox v-if="field.type === 'name'" v-model="form[field.type]" class="bg-white text-xl" :readonly="completed" />
-					<Textbox v-if="field.type === 'email'" v-model="form[field.type]" class="bg-white text-xl md:w-[300px] max-w-full" :readonly="completed" />
-					<Textbox v-else-if="field.type === 'mobileNumber'" v-model="form[field.type]" class="bg-white text-xl" type="tel" :readonly="completed" />
-					<Textbox v-else-if="field.type === 'referralCode'" v-model="form[field.type]" class="bg-white text-xl md:w-[200px] max-w-full" :readonly="completed" />
+
+					<Textbox v-else-if="field.type === 'university'" v-model="form[field.type]"
+									 class="bg-white text-xl" :readonly="completed" />
+
+					<Textbox v-else-if="field.type === 'ktpNumber'" maxlength="16" type="tel" v-model="form[field.type]"
+									 class="bg-white text-xl font-mono" :readonly="completed" />
+
+					<Textbox v-else-if="field.type === 'email'" v-model="form[field.type]"
+									 class="bg-white text-xl md:w-[300px] max-w-full" :readonly="completed" />
+
+					<Textbox v-else-if="field.type === 'mobileNumber'" v-model="form[field.type]"
+									 class="bg-white text-xl font-mono" maxlength="18" type="tel" :readonly="completed" />
+
+					<Textbox v-else-if="field.type === 'referralCode'" v-model="form[field.type]"
+									 class="bg-white text-xl md:w-[200px] max-w-full" :readonly="completed" />
+
+					<div v-else-if="field.type === 'birthDate'" class="flex flex-col md:flex-row gap-2">
+						<Textbox v-model="form['birthPlace']" class="bg-base cursor-pointer" @click="$refs.citySelector.open()" readonly="true"
+							placeholder="Kota">
+							<template #end>
+								<div class="p-3">
+									<svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" class="fill-text-200" viewBox="0 0 320 512"><path d="M287.968 160H32.038c-28.425 0-42.767 34.488-22.627 54.627l127.962 128c12.496 12.496 32.758 12.497 45.255 0l127.968-128C330.695 194.528 316.45 160 287.968 160zM160 320L32 192h256L160 320z"/></svg>
+								</div>
+							</template>
+						</Textbox>
+						<Datepicker v-model="form['birthDate']" class="w-[200px] text-lg" default-value="2000-01-01" :readonly="completed" />
+					</div>
+
+					<Dropdown v-else-if="field.type === 'position'" v-model="form[field.type]" class="text-xl">
+						<option v-for="item in field.items" :value="item.text">{{ item.text }}</option>
+					</Dropdown>
+
+					<Dropdown v-else-if="field.type === 'provinceName'" v-model="form[field.type]" class="text-xl">
+						<option v-for="item in field.items" :value="item.text">{{ item.text }}</option>
+					</Dropdown>
+
+					<Dropdown v-else-if="field.type === 'education'" v-model="form[field.type]" class="text-xl">
+						<option v-for="item in field.items" :value="item.text">{{ item.text }}</option>
+					</Dropdown>
+
+					<Dropdown v-else-if="field.type === 'major'" v-model="form[field.type]" class="text-xl">
+						<option v-for="item in field.items" :value="item.text">{{ item.text }}</option>
+					</Dropdown>
+
 					<Textarea v-else-if="field.type === 'remark'" v-model="form[field.type]" rows="2" :readonly="completed"></Textarea>
+
+					<pre v-else>{{ field.type }}</pre>
 				</div>
 			</div>
+		</div>
 
-			<Button ref="submitBtn" class="w-full" @click="submitForm" :state="!canSubmit ? -1 : 1">
-				<h5>{{ completed ? 'Form berhasil dikirim' : 'Kirim' }}</h5>
-			</Button>
+		<CitySelector ref="citySelector" @change="(city) => form['birthPlace'] = city.alias"/>
 
-		</div>
+		<Button ref="submitBtn" class="w-full" @click="submitForm" :state="!canSubmit ? -1 : 1">
+			<h5>{{ completed ? 'Form berhasil dikirim' : 'Kirim' }}</h5>
+		</Button>
 	</div>
 </template>
 
@@ -49,6 +93,7 @@ export default{
 		padding: Array,
 		enabled: undefined,
 		name: String,
+		class: String,
 
 		title: String,
 		description: String,
@@ -68,8 +113,12 @@ export default{
 			this.$refs.submitBtn.setState(2)
 			axios({
 				method: this.submitMethod ?? 'post',
-				url: this.submitUrl,
-				data: this.form,
+				url: import.meta.env.VITE_API_HOST + this.submitUrl,
+				data: {
+					url: this.$route.path,
+					componentUid: this.uid,
+					...this.form
+				},
 				params: this.form
 			})
 				.then(_ => this.completed = true)
@@ -82,15 +131,15 @@ export default{
 	computed: {
 
 		canSubmit(){
-			return this.fields.every(field => [ 'referralCode', 'email', 'remark' ].includes(field.type) || this.form[field.type]) &&
+			return this.fields.length > 0 &&
+				this.fields.every(field => !field.required || this.form[field.type]) &&
+				Object.values(this.form).join('').length > 0 &&
 				!this.completed
 		},
 
 		compClass(){
 			return [
 				this.$style.comp,
-				this.status === 1 && this.spinnerType === 'shimmer' && !this.$slots['loading'] ?
-					this.$style.shimmer : '',
 				this.extClass,
 				this.class ?? ''
 			]
@@ -120,16 +169,11 @@ export default{
 <style module>
 
 .comp{
-	@apply flex-1;
+	@apply flex-1 w-full max-w-[480px] mx-auto rounded-lg overflow-hidden border-text-200 border-[1px] p-6;
+	@apply flex flex-col gap-8 bg-base;
 	background-image: v-bind(bgImages[0]);
 }
 
-.form{
-	@apply mx-auto bg-gray-100 border-text-200 border-[1px] p-6 rounded-lg;
-	@apply w-full max-w-[420px];
-	@apply flex flex-col gap-8;
-}
-
 @media screen and (min-width: 768px){
 	.comp{
 		background-image: v-bind(bgImages[1]);

package/src/widgets/ContactFormSetting.vue

@@ -17,16 +17,21 @@
 					Add Field
 				</button>
 			</div>
-			<ListItem :items="item.props.fields" class="mt-2" bodyClass="flex flex-col gap-1"
+			<ListItem :items="item.props.fields" class="mt-2 border-text-200 border-[1px] rounded-lg overflow-hidden"
+								bodyClass="flex flex-col gap-1 divide-y divide-text-200"
 								@reorder="(from, to) => { item.props.fields.splice(to, 0, item.props.fields.splice(from, 1)[0]); $emit('change') }">
 				<template v-slot="{ item:field, index }">
-					<div class="flex flex-row items-center gap-2 p-3 bg-base-500 rounded-lg">
+					<div class="flex flex-row items-center gap-2 px-3 bg-base-500">
 						<svg data-reorder 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 class="flex-1 px-2">
-							<label>{{ field.type }}</label>
+						<div>
+							<Checkbox v-model="field.required" @change="$emit('change')"/>
 						</div>
-						<button type="button" @click="confirm($t('Remove this item?'), '', () => { item.props.fields.splice(index, 1); $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>
+						<div class="flex-1 px-2 text-ellipsis overflow-hidden whitespace-nowrap">
+							<label>{{ field.label ?? field.type }}</label>
+						</div>
+						<button class="text-sm text-primary" v-if="field._edit" @click="$refs[field._edit].open(field)">Edit</button>
+						<button type="button" @click="confirm($t('Remove this field?'), '', () => { item.props.fields.splice(index, 1); $emit('change') })">
+							<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="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>
@@ -49,10 +54,10 @@
 							<div class="flex-1 flex flex-col gap-2">
 								<label class="text-text-400 leading-1">Send whatsapp to</label>
 								<div class="flex flex-row gap-2">
-									<Textbox class="flex-1" v-model="action.number" type="tel" />
+									<Textbox class="flex-1" v-model="action.number" type="tel"/>
 									<Button type="button" class="text-primary px-3"
 													:state="!action.number ? -1 : 1"
-													@click="delete action._edit">OK</Button>
+													@click="delete action._edit;$emit('change')">OK</Button>
 								</div>
 							</div>
 						</div>
@@ -64,7 +69,7 @@
 							<button type="button" @click="action._edit = true">
 								<svg width="13" height="13" class="fill-text-300 hover:fill-primary-500" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 576 512"><path d="M402.6 83.2l90.2 90.2c3.8 3.8 3.8 10 0 13.8L274.4 405.6l-92.8 10.3c-12.4 1.4-22.9-9.1-21.5-21.5l10.3-92.8L388.8 83.2c3.8-3.8 10-3.8 13.8 0zm162-22.9l-48.8-48.8c-15.2-15.2-39.9-15.2-55.2 0l-35.4 35.4c-3.8 3.8-3.8 10 0 13.8l90.2 90.2c3.8 3.8 10 3.8 13.8 0l35.4-35.4c15.2-15.3 15.2-40 0-55.2zM384 346.2V448H64V128h229.8c3.2 0 6.2-1.3 8.5-3.5l40-40c7.6-7.6 2.2-20.5-8.5-20.5H48C21.5 64 0 85.5 0 112v352c0 26.5 21.5 48 48 48h352c26.5 0 48-21.5 48-48V306.2c0-10.7-12.9-16-20.5-8.5l-40 40c-2.2 2.3-3.5 5.3-3.5 8.5z"/></svg>
 							</button>
-							<button type="button" @click="confirm($t('Remove this item?'), '', () => { item.props.onSubmit.splice(index, 1); $emit('change') })">
+							<button type="button" @click="confirm($t('Remove this action?'), '', () => { item.props.onSubmit.splice(index, 1); $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>
@@ -106,27 +111,13 @@
 											defaultDisplay="flex"
 											@change="$emit('change')" />
 
-		<ContextMenu ref="fieldOpt" position="bottom-right">
-			<div class="flex flex-col gap-1 min-w-[120px]">
-				<button class="p-3 bg-base-500 text-left pl-8 hover:bg-text-50"
-								@click="item.props.fields.push({ type:'name', label:'Nama' });$emit('change')">
-					Name
-				</button>
-				<button class="p-3 bg-base-500 text-left pl-8 hover:bg-text-50"
-								@click="item.props.fields.push({ type:'mobileNumber', label:'Nomor HP' });$emit('change')">
-					Mobile Number
-				</button>
-				<button class="p-3 bg-base-500 text-left pl-8 hover:bg-text-50"
-								@click="item.props.fields.push({ type:'email', label:'Email' });$emit('change')">
-					Email
-				</button>
-				<button class="p-3 bg-base-500 text-left pl-8 hover:bg-text-50"
-								@click="item.props.fields.push({ type:'remark', label:'Pertanyaan' });$emit('change')">
-					Pertanyaan
-				</button>
-				<button class="p-3 bg-base-500 text-left pl-8 hover:bg-text-50"
-								@click="item.props.fields.push({ type:'referralCode', label:'Kode Referral (optional)' });$emit('change')">
-					Referral Code
+		<ContextMenu ref="fieldOpt" position="bottom-right" class="border-text-200">
+			<div class="flex flex-col min-w-[120px] divide-y divide-text-100">
+				<button v-for="field in fields"
+								class="p-3 bg-base-500 text-left pl-8 hover:bg-text-50 disabled:bg-base-500 disabled:text-text-300"
+								@click="item.props.fields.push(field);$emit('change')"
+								:disabled="item.props.fields.findIndex((_) => _.type === field.type) >= 0">
+					{{ field.label }}
 				</button>
 			</div>
 		</ContextMenu>
@@ -135,11 +126,62 @@
 			<div class="flex flex-col gap-1 min-w-[120px]">
 				<button class="p-3 bg-base-500 text-left pl-8 hover:bg-text-50"
 								@click="item.props.onSubmit.push({ type:'send-whatsapp', _edit:true })">Send Whatsapp</button>
-				<button class="p-3 bg-base-500 text-left pl-8 hover:bg-text-50"
+				<button class="p-3 bg-base-500 text-left pl-8 hover:bg-text-50" v-if="item.props.fields.includes('referralCode')"
 								@click="item.props.onSubmit.push({ type:'send-whatsapp-referral' });$emit('change')">Send Whatsapp to Referral</button>
 			</div>
 		</ContextMenu>
 
+		<Modal ref="positionEdit" width="360" height="480">
+		  <template v-slot:head>
+		    <div class="relative p-5">
+		      <h3>Daftar Posisi</h3>
+		      <div class="absolute top-0 right-0 p-2">
+		        <button type="button" class="p-2" @click="$refs.positionEdit.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-5">
+					<Button type="button" class="w-[100px]" @click="$util.removeEmpty(context.items);$refs.positionEdit.close();$emit('change')">OK</Button>
+		    </div>
+		  </template>
+		  <template #default="{ context }">
+				<div class="flex-1 p-5">
+					<ListItem :items="context.items"
+										body-class="flex flex-col gap-2"
+					          @reorder="(from, to) => { context.items.splice(to, 0, context.items.splice(from, 1)[0]); }">
+					  <template v-slot="{ item, index }">
+					    <div class="flex flex-row items-center gap-2">
+								<div class="flex-1">
+									<Textbox v-model="item.text" @keyup.enter="context.items.push({})">
+										<template #start>
+											<div v-if="context.items.length > 1" data-reorder class="self-stretch flex items-center justify-center px-2 bg-text-50">
+												<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>
+										</template>
+									</Textbox>
+								</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>
+					  </template>
+					</ListItem>
+
+					<div class="text-center p-3">
+						<button type="button" class="text-primary" @click="context.items.push({})">Tambah Posisi</button>
+					</div>
+
+				</div>
+			</template>
+		</Modal>
+
 	</div>
 </template>
 
@@ -164,6 +206,25 @@ export default{
 
 	},
 
+	data(){
+		return {
+			fields: [
+				{ type:'name', label:'Nama' },
+				{ type:'mobileNumber', label:'Nomor HP' },
+				{ type:'email', label:'Email' },
+				{ type:'remark', label:'Pertanyaan' },
+				{ type:'referralCode', label:'Kode Referral (optional)' },
+				{ type:'ktpNumber', label:'Nomor KTP' },
+				{ type:'birthDate', label:'Tempat/Tanggal Lahir' },
+				{ type:'position', label:'Jabatan yang Dilamar', _edit:'positionEdit', items:[] },
+				{ type:'provinceName', label:'Propinsi Domisili' },
+				{ type:'education', label:'Pendidikan Terakhir', _edit:'positionEdit', items:[] },
+				{ type:'major', label:'Jurusan', _edit:'positionEdit', items:[] },
+				{ type:'university', label:'Nama Sekolah/Institusi/Universitas', _edit:'positionEdit', items:[] },
+			]
+		}
+	},
+
 	methods: {
 
 		addField(type){

package/src/widgets/WebPageBuilder.vue

@@ -564,6 +564,7 @@ export default{
 		},
 
 		generateExtClass(props){
+			if(!props || typeof props !== 'object') return ''
 
 			return [
 				props.padding ? props.padding.join(' ') : '',
@@ -604,7 +605,6 @@ export default{
       ]
           .filter(_ => _)
           .join(' ')
-
 		},
 
 		setExtClass(components){
@@ -618,6 +618,14 @@ export default{
 					comp.items = this.setExtClass(comp.items)
 				}
 
+				if(comp.props && Array.isArray(comp.props.items)){
+					comp.props.items = this.setExtClass(comp.props.items)
+				}
+
+				if(comp.type === 'Carousel'){
+					console.log('Carousel', comp)
+				}
+
 				return comp
 			})
 		},
@@ -815,16 +823,21 @@ export default{
 
 			components: [
 
-				{ type:'Carousel', name:'Carousel', group:'Widgets', props:{
+				{ type:'Carousel', name:'Carousel', group:'Widgets', items:[], props:{
 						name: 'Untitled Carousel',
-						ratio:[ '4/3', '8/3' ], items:[]
+						ratio:[ '4/3', '8/3' ]
 					}},
 
 				{ type:'ContactForm', name:'Contact Form', group:'Widgets', props:{
 						fields:[
-							{ type:'name', label:'Nama' },
-							{ type:'mobileNumber', label:'Nomor HP' }
+							{ type:'name', label:'Nama', required:true },
+							{ type:'mobileNumber', label:'Nomor HP', required:true },
+							{ type:'remark', label:'Pertanyaan' },
 						],
+						title: 'Contact Us',
+						description: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent gravida erat eget nisi',
+						submitMethod: 'post',
+						submitUrl: '/inquiry',
 						onSubmit:[],
 					}},