pui9-components 1.17.3 → 2.0.7

package/src/components/PuiNumberField.vue

@@ -6,20 +6,7 @@
 				<v-flex xs12>
 					<label v-if="getLabel === '$nbsp;'">&nbsp;</label>
 					<label v-else :class="getLabelRequiredClass">{{ getLabel }}</label>
-					<v-tooltip top v-if="showTooltip">
-						<template v-slot:activator="{ on }">
-							<v-icon class="info-tooltip" size="14" v-on="on">fas fa-info-circle info-tooltip</v-icon>
-						</template>
-						<span>
-							<span v-if="this.description !== ''">
-								{{ this.description }}
-								<hr v-if="this.infoTooltipMessages.length > 0" />
-							</span>
-							<ul>
-								<li v-for="(message, index) in this.infoTooltipMessages" :key="index">{{ message }}</li>
-							</ul>
-						</span>
-					</v-tooltip>
+					<pui-form-tooltip v-bind="{ tooltipDescription, tooltipIcon }" v-if="showTooltip" ref="tooltip"></pui-form-tooltip>
 				</v-flex>
 			</v-layout>
 			<v-layout>
@@ -29,19 +16,16 @@
 						v-model="internalModel"
 						v-bind="allProps"
 						:class="getEditedClass"
-						solo
-						outlined
-						flat
-						@blur="updateValueLazy"
 						:rules="getRules"
-						@keydown="clearMessages"
-						@keyup="validateNumber"
-						:messages="internalMessages"
-						type="number"
+						@blur="onBlurText"
 						:placeholder="getPlaceholder"
+						:messages="internalMessages"
 						:error-messages="internalErrorMessages"
 						:error="internalError"
 						ref="puiNumberField"
+						solo
+						outlined
+						flat
 					></v-text-field>
 					<v-text-field
 						:id="`${allProps.id}_internal`"
@@ -49,13 +33,14 @@
 						v-model="visibleModel"
 						v-bind="allProps"
 						:class="getEditedClass"
-						solo
-						outlined
-						flat
+						:rules="getRules"
 						@focus="onFocusText"
 						:messages="internalMessages"
 						:error-messages="internalErrorMessages"
 						:error="internalError"
+						solo
+						outlined
+						flat
 					></v-text-field>
 				</v-flex>
 			</v-layout>
@@ -64,20 +49,7 @@
 			<v-layout>
 				<v-flex :class="labelColumnStyles ? labelColumnStyles : 'xs12 sm6 md4 xl3'">
 					<label :class="getLabelRequiredClass">{{ getLabel }}</label>
-					<v-tooltip top v-if="showTooltip">
-						<template v-slot:activator="{ on }">
-							<v-icon class="info-tooltip" size="14" v-on="on">fas fa-info-circle info-tooltip</v-icon>
-						</template>
-						<span>
-							<span v-if="this.description !== ''">
-								{{ this.description }}
-								<hr v-if="this.infoTooltipMessages.length > 0" />
-							</span>
-							<ul>
-								<li v-for="(message, index) in this.infoTooltipMessages" :key="index">{{ message }}</li>
-							</ul>
-						</span>
-					</v-tooltip>
+					<pui-form-tooltip v-bind="{ tooltipDescription, tooltipIcon }" v-if="showTooltip" ref="tooltip"></pui-form-tooltip>
 				</v-flex>
 				<v-flex :class="valueColumnStyles ? valueColumnStyles : 'xs12 sm6 md8 xl9'">
 					<v-text-field
@@ -85,19 +57,16 @@
 						v-model="internalModel"
 						v-bind="allProps"
 						:class="getEditedClass"
-						solo
-						outlined
-						flat
-						@blur="updateValueLazy"
 						:rules="getRules"
-						@keydown="clearMessages"
-						@keyup="validateNumber"
-						:messages="internalMessages"
-						type="number"
+						@blur="onBlurText"
 						:placeholder="getPlaceholder"
+						:messages="internalMessages"
 						:error-messages="internalErrorMessages"
 						:error="internalError"
 						ref="puiNumberField"
+						solo
+						outlined
+						flat
 					></v-text-field>
 					<v-text-field
 						:id="`${allProps.id}_internal`"
@@ -105,13 +74,14 @@
 						v-model="visibleModel"
 						v-bind="allProps"
 						:class="getEditedClass"
-						solo
-						outlined
-						flat
+						:rules="getRules"
 						@focus="onFocusText"
 						:messages="internalMessages"
 						:error-messages="internalErrorMessages"
 						:error="internalError"
+						solo
+						outlined
+						flat
 					></v-text-field>
 				</v-flex>
 			</v-layout>
@@ -128,17 +98,14 @@
 					:class="getMobileClass"
 					class="v-text-field--mobile"
 					:label="getLabel"
-					flat
-					@blur="updateValueLazy"
-					@keydown="clearMessages"
-					@keyup="validateNumber"
+					@blur="onBlurText"
 					:rules="getRules"
-					:messages="internalMessages"
-					type="number"
 					:placeholder="getPlaceholder"
+					:messages="internalMessages"
 					:error-messages="internalErrorMessages"
 					:error="internalError"
 					ref="puiNumberField"
+					flat
 				></v-text-field>
 				<v-text-field
 					:id="`${allProps.id}_internal`"
@@ -147,12 +114,13 @@
 					v-bind="allProps"
 					:class="getMobileClass"
 					class="v-text-field--mobile"
+					:rules="getRules"
 					:label="getLabel"
-					flat
 					@focus="onFocusText"
 					:messages="internalMessages"
 					:error-messages="internalErrorMessages"
 					:error="internalError"
+					flat
 				></v-text-field>
 			</v-flex>
 		</v-layout>
@@ -166,14 +134,18 @@ import PuiFormComponentMixin from '../mixins/PuiFormComponentMixin';
 export default {
 	name: 'PuiNumberField',
 	mixins: [PuiUtilsNumberMixin, PuiFormComponentMixin],
+	inject: {
+		form: {
+			default: null
+		}
+	},
 	data: () => ({
 		internalMessages: [],
 		internalErrorMessages: [],
 		internalDecimals: 999,
-		internalMax: Number.MAX_SAFE_INTEGER,
-		internalMin: Number.MIN_SAFE_INTEGER,
-		infoTooltipMessages: [],
-		showVisibleModel: true
+		showVisibleModel: true,
+		firstLoad: true,
+		valid: true
 	}),
 	props: {
 		value: {
@@ -182,35 +154,32 @@ export default {
 		},
 		decimals: {
 			type: [String, Number],
-			default: 999,
+			default: 8,
 			required: false
 		},
-		max: {
+		min: {
 			type: [String, Number],
-			default: () => {
-				return Number.MAX_SAFE_INTEGER;
-			},
 			required: false
 		},
-		min: {
+		max: {
 			type: [String, Number],
-			default: () => {
-				return Number.MIN_SAFE_INTEGER;
-			},
 			required: false
 		},
 		tooltip: {
-			type: [Boolean],
-			default: false,
+			type: Boolean,
+			required: false,
+			default: false
+		},
+		tooltipDescription: {
+			type: String,
 			required: false
 		},
-		description: {
-			type: [String],
-			default: '',
+		tooltipIcon: {
+			type: String,
 			required: false
 		},
 		integer: {
-			type: [Boolean],
+			type: Boolean,
 			default: false,
 			required: false
 		},
@@ -239,161 +208,6 @@ export default {
 			required: false
 		}
 	},
-	methods: {
-		getInfoTooltip() {
-			if (this.max < Number.MAX_SAFE_INTEGER) {
-				this.infoTooltipMessages.push(this.$t('pui9.components.numberField.maxvaluemessage') + ': ' + this.max);
-			}
-
-			if (this.min > Number.MIN_SAFE_INTEGER) {
-				this.infoTooltipMessages.push(this.$t('pui9.components.numberField.minvaluemessage') + ': ' + this.min);
-			}
-
-			if (this.integer) {
-				this.infoTooltipMessages.push(this.$t('pui9.components.numberField.integermessage'));
-			}
-
-			if (this.decimals !== 999) {
-				this.infoTooltipMessages.push(this.$t('pui9.components.numberField.maxdecimalsmessage') + ': ' + this.decimals);
-			}
-		},
-		onFocusText() {
-			this.showVisibleModel = false;
-			setTimeout(() => {
-				this.$refs.puiNumberField.focus();
-			}, 5);
-		},
-		updateValueLazy(val) {
-			this.showVisibleModel = true;
-			var valueAsNumber = val.target.valueAsNumber;
-
-			this.validateNumber(val);
-			this.checkMinMax(valueAsNumber);
-
-			if (!this.internalError) {
-				this.$emit('input', this.internalModel);
-			} else {
-				this.$emit('input', null);
-			}
-		},
-		showWrongNumberMessage() {
-			var message = this.$t('pui9.components.numberField.wrongnumber');
-			this.internalError = true;
-			this.internalErrorMessages = [message];
-		},
-		showRequiredMessage() {
-			var message = this.$t('pui9.error.field_required');
-			this.internalError = true;
-			this.internalErrorMessages = [message];
-		},
-		validateNumber(evt) {
-			var val = evt.target.value;
-			var valNum = evt.target.valueAsNumber;
-			var wrong = isNaN(valNum);
-
-			if (!wrong) {
-				this.checkNumber(val);
-			} else {
-				if (evt.target.validity.badInput) {
-					this.showWrongNumberMessage();
-				} else {
-					if (this.required) {
-						this.showRequiredMessage();
-					}
-				}
-				// Con este código conforme pones algo inválido te vacía el campo... Si pones un '.' sin querer te borra todo. Igual con un timeout de unos segundos sí que queda bien.
-				/* if (!val) {
-					this.internalModel = Number.NaN;
-				} */
-			}
-		},
-		checkNumber(val) {
-			// INTEGERS
-			if (this.integer) {
-				var isInt = this.checkInteger(val);
-				if (isInt) {
-					this.internalModel = parseInt(val);
-				} else {
-					var int = parseInt(val);
-					if (!isNaN(int)) {
-						this.internalModel = int;
-					} else {
-						this.showWrongNumberMessage();
-					}
-				}
-			} else {
-				var isFloat = this.checkFloat(val);
-				if (isFloat) {
-					this.formatNumber(val);
-				} else {
-					this.showWrongNumberMessage();
-				}
-			}
-		},
-		checkMinMax(value) {
-			// MAX
-			if (value > this.internalMax) {
-				this.internalErrorMessages = [];
-				this.internalErrorMessages.push(this.$t('pui9.components.numberField.maxvaluemessage') + ' ' + this.internalMax);
-				this.internalError = true;
-			}
-			// MIN
-			if (value < this.internalMin) {
-				this.internalErrorMessages = [];
-				this.internalErrorMessages.push(this.$t('pui9.components.numberField.minvaluemessage') + ' ' + this.internalMin);
-				this.internalError = true;
-			}
-		},
-		formatNumber(val) {
-			var fval = parseFloat(val);
-
-			if (val && val.length > 0) {
-				// DECIMALS
-				if (val.indexOf('.') !== -1) {
-					var parts = val.split('.');
-					var decimalPart = parts[1];
-					if (decimalPart && decimalPart.length > this.internalDecimals) {
-						var nfloat = this.truncateDecimal(val, this.internalDecimals);
-						//if (parseFloat(this.internalModel) !== nfloat) {
-						this.internalModel = nfloat;
-						this.internalMessages = [];
-						this.internalMessages.push(this.$t('pui9.components.numberField.maxdecimalsmessage') + ' ' + this.internalDecimals);
-						this.internalError = true;
-						//}
-					} else {
-						this.clearMessages();
-					}
-				} else {
-					this.clearMessages();
-				}
-				this.checkMinMax(fval);
-			} else {
-				this.clearMessages();
-			}
-		},
-		clearMessages() {
-			this.internalError = false;
-			this.internalMessages = [];
-			this.internalErrorMessages = [];
-		},
-		initializeModel(value) {
-			if (this.integer) {
-				//this.initialValue = parseInt(value);
-				this.internalModel = parseInt(value);
-			} else {
-				//this.initialValue = parseFloat(value);
-				this.internalModel = parseFloat(value);
-			}
-			// check max/min
-			this.checkMinMax(value);
-		},
-		formatAndSetMinMax() {
-			const mmax = parseFloat(this.max);
-			const mmin = parseFloat(this.min);
-			this.internalMax = !isNaN(mmax) ? mmax : this.internalMax;
-			this.internalMin = !isNaN(mmin) ? mmin : this.internalMin;
-		}
-	},
 	computed: {
 		getMobileClass() {
 			return { 'v-text-field--edited': this.isEdited, 'v-text-field--required': this.required };
@@ -406,21 +220,10 @@ export default {
 		},
 		getRules() {
 			const rules = [...this.rules];
-			var func2 = () => !this.internalError || '';
-			rules.push(func2);
-			if (this.required) {
-				// Si se descomenta el código, cuando el campo es erróneo y presionas alguna tecla antes de mostrar mensaje de campo erróneo se muestra el de campo obligatorio. Así funciona correctamente
 
-				/* var func = value => !!value || this.requiredMessage; */
-				var func3 = () => {
-					if (this.internalModel === '' || this.internalModel === null || isNaN(this.internalModel)) {
-						return this.requiredMessage;
-					}
-					return true;
-				};
-				/* rules.push(func, func2, func3); */
-				rules.push(func3);
-			}
+			let noErrorsRule = () => !this.internalError;
+			rules.push(noErrorsRule);
+
 			return rules;
 		},
 		compPlaceholder() {
@@ -429,12 +232,6 @@ export default {
 			}
 			return ' ';
 		},
-		showTooltip() {
-			if (!this.tooltip || this.getLabel === '' || this.getLabel === null) {
-				return false;
-			}
-			return (this.infoTooltipMessages.length > 0 || this.description !== '') && this.tooltip;
-		},
 		thousandSeparator() {
 			return this.$store.getters.thousandSeparator;
 		},
@@ -442,61 +239,195 @@ export default {
 			return this.$store.getters.decimalSeparator;
 		},
 		visibleModel() {
-			if (this.internalModel === null || this.internalModel === undefined || isNaN(this.internalModel)) return '';
+			if (this.internalModel === null || this.internalModel === undefined || isNaN(this.internalModel)) return ' ';
 			const value = this.internalModel.toString();
+
 			if (value.includes('.')) {
 				const parts = value.split('.');
 				parts[0] = parts[0].replace(/\B(?=(\d{3})+(?!\d))/g, this.thousandSeparator);
 				return parts.join(this.decimalSeparator);
 			}
+
 			return value.replace(/(\d)(?=(\d{3})+(?!\d))/g, `$1${this.thousandSeparator}`);
+		},
+		showTooltip() {
+			if (this.getLabel === '' || this.getLabel === null) {
+				return false;
+			}
+			return this.tooltipDescription || this.tooltip;
+		},
+		internalMin() {
+			const min = parseFloat(this.min);
+			return !isNaN(min) ? min : Number.MIN_SAFE_INTEGER;
+		},
+		internalMax() {
+			const max = parseFloat(this.max);
+			return !isNaN(max) ? max : Number.MAX_SAFE_INTEGER;
+		}
+	},
+	watch: {
+		value(v) {
+			this.setInternalModel(v);
+		},
+		internalModel(v) {
+			this.$emit('input', v);
+		},
+		internalError() {
+			this.valid = !this.internalError;
+		},
+		min() {
+			this.checkValidations(this.internalModel);
+		},
+		max() {
+			this.checkValidations(this.internalModel);
 		}
 	},
 	created() {
+		// v-form injected
+		this.form && this.form.register(this);
+
+		this.initialValue = this.value;
 		this.internalDecimals = parseInt(this.decimals);
-		this.formatAndSetMinMax();
-		if (this.noLazyModel) {
-			this.firstLazyLoad = true;
-		}
-		if (this.integer) {
-			this.initialValue = parseInt(this.value);
-		} else {
-			this.initialValue = parseFloat(this.value);
+		this.setInternalModel(this.value);
+	},
+	mounted() {
+		if (this.tooltip && this.$refs.tooltip) {
+			this.setTooltip();
 		}
-		this.initializeModel(this.value);
-		this.getInfoTooltip();
 	},
-	watch: {
-		value(val) {
-			if (!this.noLazyModel && !this.firstLazyLoad) {
-				this.clearMessages();
-				this.initializeModel(val);
-				this.firstLazyLoad = true;
+	methods: {
+		validate() {
+			this.checkValidations(this.internalModel);
+			return this.valid;
+		},
+		setTooltip() {
+			if (this.max < Number.MAX_SAFE_INTEGER) {
+				this.$refs.tooltip.pushMessage(this.$t('pui9.components.numberField.maxvaluemessage') + ': ' + this.max);
+			}
+
+			if (this.min > Number.MIN_SAFE_INTEGER) {
+				this.$refs.tooltip.pushMessage(this.$t('pui9.components.numberField.minvaluemessage') + ': ' + this.min);
+			}
+
+			if (this.integer) {
+				this.$refs.tooltip.pushMessage(this.$t('pui9.components.numberField.integermessage'));
+			}
+
+			if (this.decimals !== 999) {
+				this.$refs.tooltip.pushMessage(this.$t('pui9.components.numberField.maxdecimalsmessage') + ': ' + this.decimals);
+			}
+		},
+		onBlurText() {
+			this.showVisibleModel = true;
+		},
+		onFocusText() {
+			this.showVisibleModel = false;
+
+			setTimeout(() => {
+				this.$refs.puiNumberField.focus();
+			}, 5);
+		},
+		setInternalModel(value) {
+			if (typeof value == typeof String) {
+				value = value.replace(this.decimalSeparator, '.');
+			}
+
+			this.checkValidations(value);
+
+			if (isNaN(value)) {
+				this.internalModel = value;
+			} else if (value === null || value === '') {
+				this.internalModel = null;
+			} else if (this.integer) {
+				this.setInteger(value);
+			} else {
+				this.setFloat(value);
+			}
+		},
+		setInteger(value) {
+			this.internalModel = parseInt(value);
+		},
+		setFloat(value) {
+			if (this.internalDecimals) {
+				this.internalModel = this.truncateDecimal(parseFloat(value), this.internalDecimals);
+			} else {
+				this.internalModel = parseFloat(value);
+			}
+		},
+		checkValidations(value) {
+			this.clearMessages();
+
+			if (this.firstLoad) {
+				this.firstLoad = false;
+				return;
+			}
+
+			value && this.numberTypeValidation(value);
+			value && this.minMaxValidation(value);
+			value && this.wrongNumberValidation(value);
+			this.requiredFieldValidation(value);
+		},
+		clearMessages() {
+			this.internalError = false;
+			this.internalMessages = [];
+			this.internalErrorMessages = [];
+		},
+		requiredFieldValidation(value) {
+			if (this.required && (value === '' || value === null || value === undefined)) {
+				this.showRequiredMessage();
+			}
+		},
+		wrongNumberValidation(value) {
+			if (isNaN(value) && value !== '') {
+				this.showWrongNumberMessage();
+			}
+		},
+		numberTypeValidation(value) {
+			if (this.integer) {
+				let isInteger = this.checkInteger(value);
+				let parsedValue = parseInt(value);
+
+				if (!isInteger || isNaN(parsedValue)) {
+					this.showWrongNumberMessage();
+				}
 			} else {
-				this.internalModel = val;
-				if (val) {
-					this.clearMessages();
-					this.checkMinMax(val);
+				let isFloat = this.checkFloat(value);
+				let parsedValue = parseInt(value);
+
+				if (!isFloat || isNaN(parsedValue)) {
+					this.showWrongNumberMessage();
 				}
 			}
 		},
-		required(val) {
-			if (!val) {
-				this.clearMessages();
-				if (this.internalModel) {
-					this.checkNumber(this.internalModel);
+		decimalsValidation(value) {
+			if (value && value.length > 0 && value.indexOf('.') !== -1) {
+				let parts = value.split('.');
+				let decimalPart = parts[1];
+
+				if (decimalPart && decimalPart.length > this.internalDecimals) {
+					this.internalError = true;
+					this.internalMessages.push(this.$t('pui9.components.numberField.maxdecimalsmessage') + ' ' + this.internalDecimals);
 				}
 			}
 		},
-		min() {
-			this.clearMessages();
-			this.formatAndSetMinMax();
-			this.checkMinMax(this.value);
+		minMaxValidation(value) {
+			if (value < this.internalMin) {
+				this.internalError = true;
+				this.internalErrorMessages.push(this.$t('pui9.components.numberField.minvaluemessage') + ' ' + this.internalMin);
+			}
+
+			if (value > this.internalMax) {
+				this.internalError = true;
+				this.internalErrorMessages.push(this.$t('pui9.components.numberField.maxvaluemessage') + ' ' + this.internalMax);
+			}
 		},
-		max() {
-			this.clearMessages();
-			this.formatAndSetMinMax();
-			this.checkMinMax(this.value);
+		showWrongNumberMessage() {
+			this.internalError = true;
+			this.internalErrorMessages = [this.$t('pui9.components.numberField.wrongnumber')];
+		},
+		showRequiredMessage() {
+			this.internalError = true;
+			this.internalErrorMessages = [this.$t('pui9.error.field_required')];
 		}
 	}
 };