pui9-components 1.16.4

package/src/components/PuiSwitch.vue

@@ -0,0 +1,104 @@
+<template>
+	<v-switch
+		class="pui-switch"
+		:class="isRequired"
+		v-model="internalModel"
+		v-bind="allProps"
+		:rules="getRules"
+		:label="getLabel"
+		@change="updateValue"
+		:ripple="false"
+		:false-value="falseValue"
+		:true-value="trueValue"
+		:error="internalError"
+	></v-switch>
+</template>
+
+<script>
+import PuiFormComponentMixin from '../mixins/PuiFormComponentMixin';
+
+export default {
+	name: 'PuiSwitch',
+	mixins: [PuiFormComponentMixin],
+	props: {
+		value: {
+			required: false
+		},
+		rules: {
+			type: Array,
+			default: () => {
+				return [];
+			}
+		},
+		// falseValue en lugar de 'false-value' para que funcione. Lo mismo con el true
+		falseValue: {
+			type: [Boolean, String, Number],
+			default: false,
+			required: false
+		},
+		trueValue: {
+			type: [Boolean, String, Number],
+			default: true,
+			required: false
+		}
+	},
+	computed: {
+		getRules() {
+			const rules = [...this.rules];
+			if (this.required) {
+				var func = (value) => !!value || this.requiredMessage;
+				var func2 = () => !this.internalError;
+				var func3 = () => {
+					if (this.internalModel === false) {
+						return this.requiredMessage;
+					}
+					return true;
+				};
+				rules.push(func, func2, func3);
+			}
+			return rules;
+		},
+		isRequired() {
+			return { 'v-input--checkbox--required': this.required };
+		},
+		requiredMessage() {
+			return this.$t('pui9.error.field_selected');
+		}
+	},
+	watch: {
+		value(val) {
+			this.internalModel = val;
+		}
+	},
+	created() {
+		this.initialValue = this.value; // no se usa
+		this.internalModel = this.value;
+
+		// Hay que pasar el value a string para que si llega del servidor '1' (por poner un ejemplo) el
+		// switch lo detecte como activo
+		if (this.value && typeof this.value !== 'boolean') {
+			this.internalModel = this.value.toString();
+		}
+	},
+	methods: {
+		updateValue(value) {
+			this.$emit('input', value);
+			this.checkValue();
+		},
+		checkValue() {
+			this.clearMessages();
+			if (this.required) {
+				if (this.internalModel === false) {
+					this.showErrorMessage();
+				}
+			}
+		},
+		clearMessages() {
+			this.internalError = false;
+		},
+		showErrorMessage() {
+			this.internalError = true;
+		}
+	}
+};
+</script>

package/src/components/PuiTextArea.vue

@@ -0,0 +1,203 @@
+<template>
+	<!-- DESKTOP - TABLET -->
+	<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-flex>
+			</v-layout>
+			<v-layout>
+				<v-flex xs12>
+					<v-textarea
+						v-model="internalModel"
+						v-bind="allProps"
+						:class="getEditedClass"
+						:rules="getRules"
+						solo
+						outlined
+						flat
+						single-line
+						auto-grow
+						@blur="updateValueLazy"
+						@input="updateValueRealtime"
+						:placeholder="getPlaceholder"
+						:error="internalError"
+					></v-textarea>
+				</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-flex>
+				<v-flex :class="valueColumnStyles ? valueColumnStyles : 'xs12 sm6 md8 xl9'">
+					<v-textarea
+						v-model="internalModel"
+						v-bind="allProps"
+						:class="getEditedClass"
+						:rules="getRules"
+						solo
+						outlined
+						flat
+						single-line
+						auto-grow
+						@blur="updateValueLazy"
+						@input="updateValueRealtime"
+						:placeholder="getPlaceholder"
+						:error="internalError"
+					></v-textarea>
+				</v-flex>
+			</v-layout>
+		</div>
+	</div>
+	<!-- MOBILE -->
+	<div v-else>
+		<v-layout>
+			<v-flex xs12>
+				<v-textarea
+					v-model="internalModel"
+					v-bind="allProps"
+					:class="getMobileClass"
+					:rules="getRules"
+					class="v-text-field--mobile"
+					:label="getLabel"
+					flat
+					auto-grow
+					@blur="updateValueLazy"
+					@input="updateValueRealtime"
+					:placeholder="getPlaceholder"
+					:error="internalError"
+				></v-textarea>
+			</v-flex>
+		</v-layout>
+	</div>
+</template>
+
+<script>
+import PuiFormComponentMixin from '../mixins/PuiFormComponentMixin';
+
+export default {
+	name: 'PuiTextArea',
+	mixins: [PuiFormComponentMixin],
+	data: () => ({
+		rules: []
+	}),
+	props: {
+		value: {
+			type: [String, Number],
+			required: false
+		},
+		realtime: {
+			type: Boolean,
+			required: false,
+			default: false
+		},
+		placeholder: {
+			type: String,
+			default: ' ',
+			required: false
+		},
+		noLazyModel: {
+			type: Boolean,
+			required: false,
+			default: false
+		},
+		labelColumnStyles: {
+			type: String,
+			required: false
+		},
+		valueColumnStyles: {
+			type: String,
+			required: false
+		}
+	},
+	computed: {
+		getLabelRequiredClass() {
+			return { 'v-label--required': this.required };
+		},
+		getEditedClass() {
+			return { 'v-text-field--edited': this.isEdited };
+		},
+		getMobileClass() {
+			return { 'v-text-field--edited': this.isEdited, 'v-text-field--required': this.required };
+		},
+		getRules() {
+			const rules = [...this.rules];
+			if (this.required) {
+				var func = (value) => !!value || this.requiredMessage;
+				var func2 = () => !this.internalError;
+				var func3 = () => {
+					if (this.internalModel === '' || this.internalModel === null) {
+						return this.requiredMessage;
+					}
+					return true;
+				};
+				rules.push(func, func2, func3);
+			}
+			return rules;
+		}
+	},
+	watch: {
+		value(val) {
+			if (!this.noLazyModel && !this.firstLazyLoad) {
+				this.initializeModel(val);
+				this.firstLazyLoad = true;
+			} else {
+				this.internalModel = val;
+			}
+		}
+	},
+	created() {
+		if (this.noLazyModel) {
+			this.firstLazyLoad = true;
+		}
+		this.initialValue = this.value;
+		this.initializeModel(this.value);
+	},
+	methods: {
+		updateValueLazy() {
+			this.checkValue();
+			if (!this.realtime) {
+				this.internalModel = this.sanitizePuiFormHtmlText(this.internalModel);
+				if (this.internalModel === '' || this.internalModel === 'null' || this.internalModel === 'undefined') {
+					this.internalModel = undefined;
+				}
+				this.$emit('input', this.internalModel);
+			}
+		},
+		updateValueRealtime() {
+			this.checkValue();
+			if (this.realtime) {
+				this.internalModel = this.sanitizePuiFormHtmlText(this.internalModel);
+				if (this.internalModel === '' || this.internalModel === 'null' || this.internalModel === 'undefined') {
+					this.internalModel = undefined;
+				}
+				this.$emit('input', this.internalModel);
+			}
+		},
+		initializeModel(value) {
+			this.internalModel = value;
+			if (value !== null && !this.firstLazyLoad) {
+				this.firstLazyLoad = true;
+			}
+		},
+		checkValue() {
+			this.clearMessages();
+			if (this.required) {
+				if (this.internalModel === '' || this.internalModel === null) {
+					this.showErrorMessage();
+				}
+			}
+		},
+		clearMessages() {
+			this.internalError = false;
+		},
+		showErrorMessage() {
+			this.internalError = true;
+		}
+	}
+};
+</script>

package/src/components/PuiTextField.vue

@@ -0,0 +1,272 @@
+<template>
+	<!-- DESKTOP - TABLET -->
+	<div v-if="!isMobile">
+		<div v-if="toplabel || !hasLabel" class="ml-1 mr-1">
+			<v-layout v-if="hasLabel">
+				<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-model="internalModel"
+						v-bind="allProps"
+						:class="getEditedClass"
+						:rules="getRules"
+						solo
+						outlined
+						flat
+						@blur="updateValueLazy"
+						@input="updateValueRealtime"
+						:placeholder="getPlaceholder"
+						:error="internalError"
+						v-on="$listeners"
+					></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-model="internalModel"
+						v-bind="allProps"
+						:class="getEditedClass"
+						:rules="getRules"
+						solo
+						outlined
+						flat
+						@blur="updateValueLazy"
+						@input="updateValueRealtime"
+						:placeholder="getPlaceholder"
+						:error="internalError"
+						v-on="$listeners"
+					></v-text-field>
+				</v-flex>
+			</v-layout>
+		</div>
+	</div>
+	<!-- MOBILE -->
+	<div v-else>
+		<v-layout>
+			<v-flex xs12>
+				<v-text-field
+					v-model="internalModel"
+					v-bind="allProps"
+					:class="getMobileClass"
+					:rules="getRules"
+					class="v-text-field--mobile"
+					flat
+					@blur="updateValueLazy"
+					@input="updateValueRealtime"
+					:placeholder="getPlaceholder"
+					:error="internalError"
+					v-on="$listeners"
+				></v-text-field>
+			</v-flex>
+		</v-layout>
+	</div>
+</template>
+
+<script>
+import PuiFormComponentMixin from '../mixins/PuiFormComponentMixin';
+
+export default {
+	name: 'PuiTextField',
+	mixins: [PuiFormComponentMixin],
+	data: () => ({
+		infoTooltipMessages: []
+	}),
+	props: {
+		value: {
+			type: [String, Number],
+			required: false
+		},
+		tooltip: {
+			type: Boolean,
+			required: false,
+			default: false
+		},
+		description: {
+			type: String,
+			required: false,
+			default: ''
+		},
+		realtime: {
+			type: Boolean,
+			required: false,
+			default: false
+		},
+		placeholder: {
+			type: String,
+			required: false,
+			default: ' '
+		},
+		noLazyModel: {
+			type: Boolean,
+			required: false,
+			default: false
+		},
+		readonly: {
+			type: Boolean,
+			required: false,
+			default: false
+		},
+		rules: {
+			type: Array,
+			default: () => {
+				return [];
+			}
+		},
+		maxlength: {
+			type: [Number, String],
+			required: false
+		},
+		labelColumnStyles: {
+			type: String,
+			required: false
+		},
+		valueColumnStyles: {
+			type: String,
+			required: false
+		}
+	},
+	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];
+			if (this.required) {
+				var func = (value) => !!value || this.requiredMessage;
+				var func2 = () => !this.internalError;
+				var func3 = () => {
+					if (this.internalModel === '' || this.internalModel === null) {
+						return this.requiredMessage;
+					}
+					return true;
+				};
+				rules.push(func, func2, 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;
+		}
+	},
+	watch: {
+		value(val) {
+			if (!this.noLazyModel && !this.firstLazyLoad) {
+				this.initializeModel(val);
+				this.firstLazyLoad = true;
+			} else {
+				this.internalModel = val;
+			}
+		}
+	},
+	created() {
+		if (this.noLazyModel) {
+			this.firstLazyLoad = true;
+		}
+		this.initialValue = this.value;
+		this.initializeModel(this.value);
+
+		this.getInfoTooltip();
+	},
+	methods: {
+		getInfoTooltip() {
+			if (this.maxlength) {
+				this.infoTooltipMessages.push(`${this.$t('pui9.error.field_maxlength')} ${this.maxlength}`);
+			}
+		},
+		updateValueLazy() {
+			this.checkValue();
+			if (!this.realtime) {
+				this.internalModel = this.sanitizePuiFormHtmlText(this.internalModel);
+				if (this.internalModel === '' || this.internalModel === 'null' || this.internalModel === 'undefined') {
+					this.internalModel = undefined;
+				}
+				this.$emit('input', this.internalModel);
+			}
+		},
+		updateValueRealtime() {
+			this.checkValue();
+			if (this.realtime) {
+				this.internalModel = this.sanitizePuiFormHtmlText(this.internalModel);
+				if (this.internalModel === '' || this.internalModel === 'null' || this.internalModel === 'undefined') {
+					this.internalModel = undefined;
+				}
+				this.$emit('input', this.internalModel);
+			}
+		},
+		initializeModel(value) {
+			this.internalModel = value;
+			if (value !== null && !this.firstLazyLoad) {
+				this.firstLazyLoad = true;
+			}
+		},
+		checkValue() {
+			this.clearMessages();
+			if (this.required) {
+				if (this.internalModel === '' || this.internalModel === null) {
+					this.showErrorMessage();
+				}
+			}
+		},
+		clearMessages() {
+			this.internalError = false;
+		},
+		showErrorMessage() {
+			this.internalError = true;
+		}
+	}
+};
+</script>

package/src/dateTimeUtils.js

@@ -0,0 +1,78 @@
+import moment from 'moment';
+
+/// //////////////// MOMENTJS TIME SUPPORT
+export default {
+	getLocalDateNowMillis: () => {
+		return moment();
+	},
+	getLocalDateNow: (format) => {
+		var f = 'YYYY-MM-DD';
+		if (format) {
+			f = format;
+		}
+		return moment().format(f);
+	},
+	formatDate: (date, format) => {
+		return moment(date).format(format);
+	},
+	getLocalTimeNow: (format) => {
+		var f = 'HH:mm:ss';
+		if (format) {
+			f = format;
+		}
+		return moment().format(f);
+	},
+	getLocalDate: (date) => {
+		if (date) {
+			return moment(date).format();
+		}
+		return date;
+	},
+	getLocalFormattedDateFromMillis: (millis, isoFormat) => {
+		return moment(millis).format(isoFormat);
+	},
+	getLocalFormattedDate: (date, isoFormat) => {
+		if (date) {
+			return moment(date).format(isoFormat);
+		}
+		return date;
+	},
+	isLocalDateValid: (date) => {
+		return moment(date).isValid();
+	},
+	isLocalDateBefore: (date, date2) => {
+		var d2 = moment(date2);
+		return moment(date).isBefore(d2);
+	},
+	isLocalDateSameOrBefore: (date, date2) => {
+		var d2 = moment(date2);
+		return moment(date).isSameOrBefore(d2);
+	},
+	isLocalDateAfter: (date, date2) => {
+		var d2 = moment(date2);
+		return moment(date).isAfter(d2);
+	},
+	isLocalDateSameOrAfter: (date, date2) => {
+		var d2 = moment(date2);
+		return moment(date).isSameOrAfter(d2);
+	},
+	isLocalDateEqual: (date, date2) => {
+		var d2 = moment(date2);
+		return moment(date).isSame(d2);
+	},
+	getUTCDate: (date) => {
+		return moment.utc(date).format();
+	},
+	getUTCOffset: () => {
+		return moment().utcOffset();
+	},
+	getUTCDateNow: () => {
+		return moment.utc().format();
+	},
+	addDaysToLocalDate(date, numberOfDays) {
+		return moment(date).add(numberOfDays, 'days').utc().format();
+	},
+	getMomentFromDate(date) {
+		return moment(date);
+	}
+};