@mixd-id/web-scaffold 0.1.230406082 → 0.1.230406083

package/package.json

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

package/src/components/CodeEditor.vue

@@ -22,7 +22,6 @@ export default{
 
 		beautify(){
 			const html = JSON.parse(JSON.stringify(this.modelValue, null, 2))
-			console.log(html)
 			this.$emit('update:modelValue', html)
 		},
 

package/src/components/Flex.vue

@@ -1,5 +1,5 @@
 <template>
-	<div :class="computedClass" :style="computedStyle">
+	<div :class="compClass" :style="computedStyle">
 
 		<component v-for="(item, idx) in computedItems"
 							 :is="item.type"
@@ -10,7 +10,6 @@
 							 :class="itemClass(idx)" />
 
 	</div>
-
 </template>
 
 <script>
@@ -27,29 +26,27 @@ export default{
 		columnType: Array,
 	},
 
+	methods: {
+
+		itemClass(idx){
+			return ((this.flexColumns ?? [])[idx] ?? []).join(' ')
+		},
+	},
+
 	computed: {
 
 		computedItems(){
 			return this.items.filter((_) => _.props.enabled)
 		},
 
-		computedClass(){
-
-			const classNames = [
+		compClass(){
+			return [
 				this.$style.comp,
 				this.extClass
 			]
-
-			return classNames.join(' ')
+				.join(' ')
 		}
 
-	},
-
-	methods: {
-
-		itemClass(idx){
-			return (this.flexColumns[idx] ?? []).join(' ')
-		},
 	}
 
 }

package/src/components/Image360.vue

@@ -121,7 +121,7 @@ export default{
 	watch: {
 
 		src(to){
-			console.log('src', to)
+
 		}
 
 
@@ -137,4 +137,4 @@ export default{
 	@apply relative;
 }
 
-</style>
+</style>

package/src/components/ListView.vue

@@ -344,7 +344,6 @@ export default{
 				preset: this.preset
 			})
 				.then((res) => {
-					console.log('res', res)
 					/*const data = res && res.data ? res.data : res
 					this.summary = data*/
 				})

package/src/components/TabView.vue

@@ -52,7 +52,6 @@ export default{
   },
 
   mounted(){
-    console.log(this.$slots)
   },
 
   data(){

package/src/components/TableViewHead.vue

@@ -109,7 +109,7 @@ export default{
 
 		column:{
 			handler(to){
-				console.log('column changed')
+
 			},
 			deep: true
 		}
@@ -156,4 +156,4 @@ export default{
 	@apply w-full
 }
 
-</style>
+</style>

package/src/components/TextBlock.vue

@@ -26,7 +26,7 @@ export default{
 				this.extClass
 			]
 				.filter(_=>_)
-				.join()
+				.join(' ')
 		}
 
 	}

package/src/index.js

@@ -318,7 +318,8 @@ export default{
     app.component('BoxItem', defineAsyncComponent(() => import("./widgets/BoxItem.vue")))
     app.component('BoxSetting', defineAsyncComponent(() => import("./widgets/BoxSetting.vue")))
     app.component('ButtonItem', defineAsyncComponent(() => import("./widgets/ButtonItem.vue")))
-    app.component('ButtonSetting', defineAsyncComponent(() => import("./widgets/ButtonSetting.vue")))
+    app.component('ButtonSetting', defineAsyncComponent(() => import("./wid" +
+    "gets/ButtonSetting.vue")))
     app.component('CarouselItem', defineAsyncComponent(() => import("./widgets/CarouselItem.vue")))
     app.component('CarouselSetting', defineAsyncComponent(() => import("./widgets/CarouselSetting.vue")))
     app.component('ContactForm', defineAsyncComponent(() => import("./widgets/ContactForm.vue")))

package/src/mixin/component.js

@@ -32,7 +32,8 @@ export const componentMixin = {
     direction: Array,
     gap: Array,
     display: Array,
-    type: Array,
+
+    flexColumns: Array,
 
     fontFamily: Array,
     fontSize: Array,
@@ -64,7 +65,7 @@ export const componentMixin = {
 
     computedStyle(){
       return {
-        'background-image': this.$screenPrefix === 'md' ? (this.bgImages[1] ?? this.bgImages[0]) : this.bgImages[0]
+        'background-image': 'xmd' === 'md' ? (this.bgImages[1] ?? this.bgImages[0]) : this.bgImages[0]
       }
     }
   }

package/src/widgets/ContactForm.vue

@@ -10,16 +10,16 @@
 			<div class="flex flex-col gap-4">
 				<div v-for="field in fields">
 					<label class="text-gray-700">{{ field.label ?? field.type }}</label>
-					<Textbox v-if="field.type === 'name'" v-model="form[field.type]" class="bg-white text-xl" :readonly="succeed" />
-					<Textbox v-if="field.type === 'email'" v-model="form[field.type]" class="bg-white text-xl w-[300px] max-w-full" :readonly="succeed" />
-					<Textbox v-else-if="field.type === 'mobileNumber'" v-model="form[field.type]" class="bg-white text-xl" type="tel" :readonly="succeed" />
-					<Textbox v-else-if="field.type === 'referralCode'" v-model="form[field.type]" class="bg-white text-xl w-[200px] max-w-full" :readonly="succeed" />
-					<Textarea v-else-if="field.type === 'remark'" v-model="form[field.type]" rows="2" :readonly="succeed"></Textarea>
+					<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" />
+					<Textarea v-else-if="field.type === 'remark'" v-model="form[field.type]" rows="2" :readonly="completed"></Textarea>
 				</div>
 			</div>
 
 			<Button ref="submitBtn" class="w-full" @click="submitForm" :state="!canSubmit ? -1 : 1">
-				<h5>{{ succeed ? 'Form berhasil dikirim' : 'Kirim' }}</h5>
+				<h5>{{ completed ? 'Form berhasil dikirim' : 'Kirim' }}</h5>
 			</Button>
 
 		</div>
@@ -29,6 +29,7 @@
 <script>
 
 import {componentMixin} from "../mixin/component";
+import axios from "axios";
 
 export default{
 
@@ -53,6 +54,8 @@ export default{
 		description: String,
 		fields: Array,
 		onSubmit: Array,
+		submitUrl: String,
+		submitMethod: String
 
 	},
 
@@ -60,10 +63,18 @@ export default{
 
 		submitForm(){
 			if('edit-mode' in this.$route.query) return
+			if(!this.submitUrl) return
 
 			this.$refs.submitBtn.setState(2)
-
-			// TODO
+			axios({
+				method: this.submitMethod ?? 'post',
+				url: this.submitUrl,
+				data: this.form,
+				params: this.form
+			})
+				.then(_ => this.completed = true)
+				.catch(err => this.alert(err))
+				.finally(_ => this.$refs.submitBtn.resetState(2))
 		}
 
 	},
@@ -72,7 +83,7 @@ export default{
 
 		canSubmit(){
 			return this.fields.every(field => [ 'referralCode', 'email', 'remark' ].includes(field.type) || this.form[field.type]) &&
-				!this.succeed
+				!this.completed
 		},
 
 		compClass(){
@@ -92,7 +103,7 @@ export default{
 	data(){
 		return {
 			form: {},
-			succeed: false
+			completed: false
 		}
 	},
 

package/src/widgets/ContactFormSetting.vue

@@ -85,6 +85,21 @@
 			</ListItem>
 		</div>
 
+		<div>
+			<label class="text-text-400">Submit URL</label>
+			<div class="flex flex-row gap-2 mt-1">
+				<Dropdown v-model="item.props.submitMethod"
+									class="w-[100px]"
+									@change="$emit('change')">
+					<option value="get">GET</option>
+					<option value="post">POST</option>
+				</Dropdown>
+				<Textbox v-model="item.props.submitUrl"
+								 class="flex-1"
+								 @keyup.enter="$emit('change')"/>
+			</div>
+		</div>
+
 		<ComponentSetting :item="item"
 											:view-type="viewType"
 											:view-types="viewTypes"

package/src/widgets/FlexSetting.vue

@@ -8,7 +8,7 @@
 					<label class="text-text-400">Direction</label>
 					<Dropdown v-for="(_, idx) in viewTypes"
 										v-show="viewType === _.value"
-										v-model="item.props.direction[idx]"
+										v-model="direction[idx]"
 										@change="$emit('change')">
 						<option value="">Default</option>
 						<option :value="`${viewType}flex-row`">Row</option>
@@ -22,7 +22,7 @@
 					<label class="text-text-400">Gap</label>
 					<Dropdown v-for="(_, idx) in viewTypes"
 										v-show="viewType === _.value"
-										v-model="item.props.gap[idx]"
+										v-model="gap[idx]"
 										class="w-[120px]"
 										@change="$emit('change')">
 						<option value="">Not Set</option>
@@ -67,7 +67,6 @@
 								</div>
 							</template>
 						</ListItem>
-
 						<div class="text-center">
 							<button type="button" class="p-3 text-primary" @click="item.props.flexColumns.push([ '', '' ])">Add Column</button>
 						</div>
@@ -103,6 +102,24 @@ export default{
 
 		viewTypes: Array,
 
+	},
+
+	computed: {
+
+		direction(){
+			if(!Array.isArray(this.item.props.direction))
+				this.item.props.direction = [ 'flex-column' ]
+
+			return this.item.props.direction
+		},
+
+		gap(){
+			if(!Array.isArray(this.item.props.gap))
+				this.item.props.gap = [ 'gap-2' ]
+
+			return this.item.props.gap
+		}
+
 	}
 
 }

package/src/widgets/Share.vue

@@ -78,7 +78,7 @@ export default{
 <style module>
 
 .comp{
-	@apply p-2 px-4 bg-gray-100 rounded-lg flex flex-row md:flex-col gap-2 items-center md:items-start;
+	@apply flex flex-row md:flex-col gap-2 items-center md:items-start;
 	background-image: v-bind(bgImages[0]);
 }
 

package/src/widgets/StyleSetting.vue

@@ -126,7 +126,7 @@ export default{
 	methods: {
 
 		addStyle(compName, styleKey, variant){
-			console.log('addStyle', compName, styleKey, variant)
+
 			if(!this.item.props[compName])
 				this.item.props[compName] = {}
 

package/src/widgets/WebPageBuilder.vue

@@ -664,7 +664,7 @@ export default{
 		listen(){
 			this.socketEmit2('page.subscribe', { name:'page' })
 				.then(() => {
-					console.log('Subscribed to page hooks')
+
 				})
 				.catch((err) => this.toast(err))
 		},
@@ -672,7 +672,7 @@ export default{
 		stopListen(){
 			this.socketEmit2('page.unsubscribe', { name:'page' })
 				.then(() => {
-					console.log('Unsubscribed to page hooks')
+
 				})
 				.catch((err) => this.toast(err))
 		},
@@ -855,7 +855,7 @@ export default{
 					}},
 
 				{ type:'Flex', name:'Flex', group:'Layouts', items:[], props:{
-						flexColumns: [], direction: [], gap: [],
+						flexColumns: [], direction: [ 'flex-col' ], gap: [],
 					}},
 
 				{ type:'Grid', name:'Grid', group:'Layouts', items:[], gap:[], props:{