@mixd-id/web-scaffold 0.1.230406087 → 0.1.230406088

package/package.json

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

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/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,5 +1,5 @@
 <template>
-	<div :class="$style.comp">
+	<div :class="compClass">
 		<div :class="$style.form">
 
 			<div>
@@ -49,6 +49,7 @@ export default{
 		padding: Array,
 		enabled: undefined,
 		name: String,
+		class: String,
 
 		title: String,
 		description: String,
@@ -89,8 +90,6 @@ export default{
 		compClass(){
 			return [
 				this.$style.comp,
-				this.status === 1 && this.spinnerType === 'shimmer' && !this.$slots['loading'] ?
-					this.$style.shimmer : '',
 				this.extClass,
 				this.class ?? ''
 			]

package/src/widgets/ContactFormSetting.vue

@@ -23,7 +23,7 @@
 					<div class="flex flex-row items-center gap-2 p-3 bg-base-500 rounded-lg">
 						<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>
+							<label>{{ field.label ?? field.type }}</label>
 						</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>
@@ -108,25 +108,10 @@
 
 		<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
+				<button v-for="field in fields"
+								class="p-3 bg-base-500 text-left pl-8 hover:bg-text-50"
+								@click="item.props.fields.push(field);$emit('change')">
+					{{ field.label }}
 				</button>
 			</div>
 		</ContextMenu>
@@ -164,6 +149,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:'Tanggal Lahir' },
+				{ type:'position', label:'Jabatan yang Dilamar' },
+				{ type:'provinceName', label:'Propinsi Domisili' },
+				{ type:'education', label:'Pendidikan Terakhir' },
+				{ type:'major', label:'Jurusan' },
+				{ type:'university', label:'Nama Sekolah/Institusi/Universitas' },
+			]
+		}
+	},
+
 	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,9 +823,9 @@ 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:{