🆙 improve new fields

Author: icebob

src/fields/fieldCleave.vue

@@ -1,5 +1,5 @@
 <template lang="jade">
-	input.form-control(type="text")
+	input.form-control(type="text", v-model="value", :readonly="schema.readonly", :disabled="disabled", :placeholder="schema.placeholder")
 </template>
 
 <script>
@@ -15,81 +15,30 @@ export default {
 		};
 	},
 
-	watch: {
-		/*model: {
-			get(){
-				if (window.Cleave) {
-					console.log("get model", this.model);
-				}
-			},
-			set(value) {
-				if (window.Cleave) {
-					console.log("set model", this.model, value);
-					
-				}
-			}
-		}*/
-	},
-
-	methods: {
-		/*formatValueToField(){
-			console.log(" 1 formatValueToField",this.cleave);
-			if (this.cleave) {
-
-				return this.cleave.getRawValue();
-			}else{
-				console.log("fail")
-				// this.cleave.element.value = "";
-				return "";
-			}
-		},*/
-		/*formatValueToModel(newValue){
-			console.log(" 2 formatValueToModel");
-			this.cleave.setRawValue(newValue);
-			return newValue;
-		}*/
-		// onCreditCardTypeChanged(type){
-		// 	let onCreditCardTypeChanged = this.schema.onCreditCardTypeChanged;
-		// 	if (typeof(onNewTag) == "function") {
-		// 		onNewTag(newTag, id, this.options, this.value);
-		// 	}
-		// }
-		/*onChange(value) {
-			console.log(value);
-			if (value.length === 1) {
-				// Single value
-				this.value = parseFloat(value[0]);
-			} else {
-				// Array (range)
-				this.value = [parseFloat(value[0]), parseFloat(value[1])];
-			}
-		}*/
-	},
-
 	ready() {
 		if (window.Cleave) {
-			this.cleave = new Cleave(this.$el, defaults(this.schema.cleaveOptions || {}, {
+			this.cleave = new window.Cleave(this.$el, defaults(this.schema.cleaveOptions || {}, {
 				// Credit Card
-			    creditCard: false,
-			    // onCreditCardTypeChanged: onCreditCardTypeChanged.bind(this),
-			    // Phone
-			    phone: false,
-    			phoneRegionCode: 'AU',
-    			// Date
-    			date: false,
-    			datePattern: ['d', 'm', 'Y'],
-    			// Numerals
-    			numeral: false,
-    			numeralThousandsGroupStyle: 'thousand',
-    			numeralDecimalScale: 2,
-    			numeralDecimalMark: '.',
-    			// General
-    			blocks: [],
-    			delimiter: ' ',
-    			prefix: null,
-    			numericOnly: false,
-    			uppercase: false,
-    			lowercase: false
+				creditCard: false,
+				// onCreditCardTypeChanged: onCreditCardTypeChanged.bind(this),
+				// Phone
+				phone: false,
+				phoneRegionCode: 'AU',
+				// Date
+				date: false,
+				datePattern: ['d', 'm', 'Y'],
+				// Numerals
+				numeral: false,
+				numeralThousandsGroupStyle: 'thousand',
+				numeralDecimalScale: 2,
+				numeralDecimalMark: '.',
+				// General
+				blocks: [],
+				delimiter: ' ',
+				prefix: null,
+				numericOnly: false,
+				uppercase: false,
+				lowercase: false
 			}));
 		} else {
 			console.warn("Cleave is missing. Please download from https://github.com/nosir/cleave.js/ and load the script in the HTML head section!");

src/fields/fieldPikaday.vue

@@ -1,5 +1,5 @@
 <template lang="jade">
-	input.form-control(type="text")
+	input.form-control(type="text", v-model="value", :readonly="schema.readonly", :disabled="disabled", :placeholder="schema.placeholder")
 </template>
 
 <script>
@@ -39,16 +39,14 @@
 					else
 						value = m.toDate().valueOf();
 				}
-				console.log(this.value);
-				// this.value = value;
 				return value;
 			}
 
 		},
 
 		ready() {
 			if (window.Pikaday){
-				this.picker = new Pikaday(defaults(this.schema.pikadayOptions || {}, {
+				this.picker = new window.Pikaday(defaults(this.schema.pikadayOptions || {}, {
 					field: this.$el, // bind the datepicker to a form field
 					// trigger: , // use a different element to trigger opening the datepicker, see [trigger example][] (default to `field`)
 					bound: true, // automatically show/hide the datepicker on `field` focus (default `true` if `field` is set)
@@ -86,7 +84,6 @@
 					// onDraw: , // callback function for when the picker draws a new month
 				}));
 			}
-			// this.slider.noUiSlider.on("change", this.onChange.bind(this));
 			else{
 				console.warn("Pikaday is missing. Please download from https://github.com/dbushell/Pikaday/ and load the script and CSS in the HTML head section!");
 			}