pui9-components 1.16.4

package/src/components/PuiNumberField.vue

@@ -0,0 +1,503 @@
+<template>
+	<!-- DESKTOP - TABLE -->
+	<div v-if="!isMobile">
+		<div v-if="toplabel" class="ml-1 mr-1">
+			<v-layout>
+				<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>
+				</v-flex>
+			</v-layout>
+			<v-layout>
+				<v-flex xs12>
+					<v-text-field
+						v-show="!showVisibleModel"
+						v-model="internalModel"
+						v-bind="allProps"
+						:class="getEditedClass"
+						solo
+						outlined
+						flat
+						@blur="updateValueLazy"
+						:rules="getRules"
+						@keydown="clearMessages"
+						@keyup="validateNumber"
+						:messages="internalMessages"
+						type="number"
+						:placeholder="getPlaceholder"
+						:error-messages="internalErrorMessages"
+						:error="internalError"
+						ref="puiNumberField"
+					></v-text-field>
+					<v-text-field
+						:id="`${allProps.id}_internal`"
+						v-show="showVisibleModel"
+						v-model="visibleModel"
+						v-bind="allProps"
+						:class="getEditedClass"
+						solo
+						outlined
+						flat
+						@focus="onFocusText"
+						:messages="internalMessages"
+						:error-messages="internalErrorMessages"
+						:error="internalError"
+					></v-text-field>
+				</v-flex>
+			</v-layout>
+		</div>
+		<div v-else class="ml-1 mr-1">
+			<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>
+				</v-flex>
+				<v-flex :class="valueColumnStyles ? valueColumnStyles : 'xs12 sm6 md8 xl9'">
+					<v-text-field
+						v-show="!showVisibleModel"
+						v-model="internalModel"
+						v-bind="allProps"
+						:class="getEditedClass"
+						solo
+						outlined
+						flat
+						@blur="updateValueLazy"
+						:rules="getRules"
+						@keydown="clearMessages"
+						@keyup="validateNumber"
+						:messages="internalMessages"
+						type="number"
+						:placeholder="getPlaceholder"
+						:error-messages="internalErrorMessages"
+						:error="internalError"
+						ref="puiNumberField"
+					></v-text-field>
+					<v-text-field
+						:id="`${allProps.id}_internal`"
+						v-show="showVisibleModel"
+						v-model="visibleModel"
+						v-bind="allProps"
+						:class="getEditedClass"
+						solo
+						outlined
+						flat
+						@focus="onFocusText"
+						:messages="internalMessages"
+						:error-messages="internalErrorMessages"
+						:error="internalError"
+					></v-text-field>
+				</v-flex>
+			</v-layout>
+		</div>
+	</div>
+	<!-- MOBILE -->
+	<div v-else>
+		<v-layout>
+			<v-flex xs12>
+				<v-text-field
+					v-show="!showVisibleModel"
+					v-model="internalModel"
+					v-bind="allProps"
+					:class="getMobileClass"
+					class="v-text-field--mobile"
+					:label="getLabel"
+					flat
+					@blur="updateValueLazy"
+					@keydown="clearMessages"
+					@keyup="validateNumber"
+					:rules="getRules"
+					:messages="internalMessages"
+					type="number"
+					:placeholder="getPlaceholder"
+					:error-messages="internalErrorMessages"
+					:error="internalError"
+					ref="puiNumberField"
+				></v-text-field>
+				<v-text-field
+					:id="`${allProps.id}_internal`"
+					v-show="showVisibleModel"
+					v-model="visibleModel"
+					v-bind="allProps"
+					:class="getMobileClass"
+					class="v-text-field--mobile"
+					:label="getLabel"
+					flat
+					@focus="onFocusText"
+					:messages="internalMessages"
+					:error-messages="internalErrorMessages"
+					:error="internalError"
+				></v-text-field>
+			</v-flex>
+		</v-layout>
+	</div>
+</template>
+
+<script>
+import PuiUtilsNumberMixin from '../mixins/PuiUtilsNumberMixin';
+import PuiFormComponentMixin from '../mixins/PuiFormComponentMixin';
+
+export default {
+	name: 'PuiNumberField',
+	mixins: [PuiUtilsNumberMixin, PuiFormComponentMixin],
+	data: () => ({
+		internalMessages: [],
+		internalErrorMessages: [],
+		internalDecimals: 999,
+		internalMax: Number.MAX_SAFE_INTEGER,
+		internalMin: Number.MIN_SAFE_INTEGER,
+		infoTooltipMessages: [],
+		showVisibleModel: true
+	}),
+	props: {
+		value: {
+			type: [String, Number],
+			required: false
+		},
+		decimals: {
+			type: [String, Number],
+			default: 999,
+			required: false
+		},
+		max: {
+			type: [String, Number],
+			default: () => {
+				return Number.MAX_SAFE_INTEGER;
+			},
+			required: false
+		},
+		min: {
+			type: [String, Number],
+			default: () => {
+				return Number.MIN_SAFE_INTEGER;
+			},
+			required: false
+		},
+		tooltip: {
+			type: [Boolean],
+			default: false,
+			required: false
+		},
+		description: {
+			type: [String],
+			default: '',
+			required: false
+		},
+		integer: {
+			type: [Boolean],
+			default: false,
+			required: false
+		},
+		rules: {
+			type: Array,
+			default: () => {
+				return [];
+			}
+		},
+		placeholder: {
+			type: [String],
+			default: ' ',
+			required: false
+		},
+		noLazyModel: {
+			type: [Boolean],
+			default: false,
+			required: false
+		},
+		labelColumnStyles: {
+			type: [String],
+			required: false
+		},
+		valueColumnStyles: {
+			type: [String],
+			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 };
+		},
+		getLabelRequiredClass() {
+			return { 'v-label--required': this.required };
+		},
+		getEditedClass() {
+			return { 'v-text-field--edited': this.isEdited };
+		},
+		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);
+			}
+			return rules;
+		},
+		compPlaceholder() {
+			if (this.placeholder && this.placeholder.length > 0) {
+				return this.placeholder;
+			}
+			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;
+		},
+		decimalSeparator() {
+			return this.$store.getters.decimalSeparator;
+		},
+		visibleModel() {
+			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}`);
+		}
+	},
+	created() {
+		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.initializeModel(this.value);
+		this.getInfoTooltip();
+	},
+	watch: {
+		value(val) {
+			if (!this.noLazyModel && !this.firstLazyLoad) {
+				this.clearMessages();
+				this.initializeModel(val);
+				this.firstLazyLoad = true;
+			} else {
+				this.internalModel = val;
+				if (val) {
+					this.clearMessages();
+					this.checkMinMax(val);
+				}
+			}
+		},
+		required(val) {
+			if (!val) {
+				this.clearMessages();
+				if (this.internalModel) {
+					this.checkNumber(this.internalModel);
+				}
+			}
+		},
+		min() {
+			this.clearMessages();
+			this.formatAndSetMinMax();
+			this.checkMinMax(this.value);
+		},
+		max() {
+			this.clearMessages();
+			this.formatAndSetMinMax();
+			this.checkMinMax(this.value);
+		}
+	}
+};
+</script>

package/src/components/PuiPasswordField.vue

@@ -0,0 +1,105 @@
+<template>
+	<!-- DESKTOP -->
+	<div v-if="!isMobile">
+		<div class="ml-1 mr-1">
+			<v-layout>
+				<v-flex xs12 sm6 md4 xl3>
+					<label v-if="getLabel === '$nbsp;'">&nbsp;</label>
+					<label v-else :class="getLabelRequiredClass">{{ getLabel }}</label>
+				</v-flex>
+				<v-flex xs12 sm6 md8 xl9>
+					<v-text-field
+						:append-icon="show ? 'far fa-eye-slash' : 'far fa-eye'"
+						:type="show ? 'text' : 'password'"
+						v-bind="allProps"
+						v-model="internalModel"
+						class="input-group--focused"
+						@click:append="show = !show"
+						:rules="getRules"
+						:placeholder="getPlaceholder"
+						solo
+						flat
+						outlined
+						single-line
+						@input="updateValue"
+						v-if="!isMobile"
+					></v-text-field>
+				</v-flex>
+			</v-layout>
+		</div>
+	</div>
+
+	<!-- MOBILE -->
+	<div v-else>
+		<v-layout>
+			<v-flex xs12>
+				<v-text-field
+					:append-icon="show ? 'far fa-eye-slash' : 'far fa-eye'"
+					:type="show ? 'text' : 'password'"
+					v-bind="allProps"
+					v-model="internalModel"
+					class="input-group--focused v-text-field--mobile"
+					@click:append="show = !show"
+					:rules="getRules"
+					:placeholder="getPlaceholder"
+					flat
+					@input="updateValue"
+				></v-text-field>
+			</v-flex>
+		</v-layout>
+	</div>
+</template>
+
+<script>
+import PuiFormComponentMixin from '../mixins/PuiFormComponentMixin';
+
+export default {
+	name: 'PuiPasswordField',
+	mixins: [PuiFormComponentMixin],
+	data() {
+		return {
+			required: true,
+			isMobile: false,
+			show: false
+		};
+	},
+	props: {
+		rules: {
+			type: Array,
+			default: () => {
+				return [];
+			}
+		}
+	},
+	methods: {
+		updateValue(value) {
+			this.$emit('input', value);
+		}
+	},
+	computed: {
+		getLabelRequiredClass() {
+			return { 'v-label--required': this.required };
+		},
+		getRules() {
+			const rules = [...this.rules];
+			if (this.required) {
+				var func = (value) => !!value || this.$t('pui9.error.field_required');
+				rules.push(func);
+			}
+			return rules;
+		},
+		getPlaceholder() {
+			return this.$t('pui9.password');
+		}
+	},
+	created() {
+		this.isMobile = this.$store.getters.isMobile;
+		this.internalModel = this.value;
+	},
+	watch: {
+		value(val) {
+			this.internalModel = val;
+		}
+	}
+};
+</script>

package/src/components/PuiRadioGroup.vue

@@ -0,0 +1,105 @@
+<template>
+	<div v-if="!isMobile">
+		<div v-if="toplabel">
+			<v-layout>
+				<v-flex xs12>
+					<label v-if="getLabel === '$nbsp;'">&nbsp;</label>
+					<label v-else :class="getLabelRequiredClass">{{ getLabel }}</label>
+				</v-flex>
+			</v-layout>
+			<v-layout>
+				<v-flex xs12>
+					<v-radio-group v-model="internalModel" v-bind="allProps" @change="updateValue">
+						<v-radio v-for="radio in this.radios" :key="radio.id" :label="radio.label" :value="radio.id"></v-radio>
+					</v-radio-group>
+				</v-flex>
+			</v-layout>
+		</div>
+		<div v-else>
+			<v-layout>
+				<v-flex v-if="label" :class="labelColumnStyles ? labelColumnStyles : 'xs12 sm6 md4 xl3'">
+					<label :class="getLabelRequiredClass">{{ getLabel }}</label>
+				</v-flex>
+				<v-flex :class="valueColumnStyles ? valueColumnStyles : 'xs12 sm6 md8 xl9'">
+					<v-radio-group v-model="internalModel" v-bind="allProps" @change="updateValue">
+						<v-radio v-for="radio in this.radios" :key="radio.id" :label="radio.label" :value="radio.id"></v-radio>
+					</v-radio-group>
+				</v-flex>
+			</v-layout>
+		</div>
+	</div>
+	<!-- MOBILE -->
+	<div v-else>
+		<label v-if="label" class="mr-3">{{ getLabel }}</label>
+		<v-radio-group v-model="internalModel" v-bind="allProps" @change="updateValue">
+			<v-radio v-for="radio in this.radios" :key="radio.id" :label="radio.label" :value="radio.id" :ripple="false"></v-radio>
+		</v-radio-group>
+	</div>
+</template>
+
+<script>
+import PuiFormComponentMixin from '../mixins/PuiFormComponentMixin';
+
+export default {
+	name: 'PuiRadioGroup',
+	mixins: [PuiFormComponentMixin],
+	data: () => ({
+		initialValue: 1,
+		internalModel: 1
+	}),
+	props: {
+		radios: {
+			type: [Array],
+			required: true
+		},
+		value: {
+			type: [Number, String],
+			required: false
+		},
+		rules: {
+			type: Array,
+			default: () => {
+				return [];
+			}
+		},
+		labelColumnStyles: {
+			type: [String],
+			required: false
+		},
+		valueColumnStyles: {
+			type: [String],
+			required: false
+		}
+	},
+	methods: {
+		updateValue(value) {
+			this.$emit('input', value);
+		}
+	},
+	computed: {
+		getLabelRequiredClass() {
+			return { 'v-label--required': this.required };
+		},
+		getRules() {
+			const rules = [...this.rules];
+			if (this.required) {
+				var func = (value) => !!value || this.$t('pui9.error.field_selected');
+				rules.push(func);
+			}
+			return rules;
+		},
+		isRequired() {
+			return { 'v-input--checkbox--required': this.required };
+		}
+	},
+	created() {
+		this.initialValue = this.value;
+		this.internalModel = this.value;
+	},
+	watch: {
+		value(val) {
+			this.internalModel = val;
+		}
+	}
+};
+</script>