pui9-components 1.16.4

package/src/components/PuiSelectDetailDialog.vue

@@ -0,0 +1,106 @@
+<template>
+	<pui-modal-dialog
+		:titleText="titleText"
+		:messageText="messageText"
+		:okText="okText"
+		:cancelText="cancelText"
+		:widthDialog="widthDialog"
+		:dialogName="dialogName"
+		ref="modalForm"
+	>
+		<template slot="message">
+			<component :is="componentName" :pk="componentPk" :method="componentMethod" isModalDialog></component>
+		</template>
+	</pui-modal-dialog>
+</template>
+
+<script>
+export default {
+	name: 'PuiSelectDetailDialog',
+	props: {
+		parentId: {
+			type: String,
+			required: true
+		},
+		componentLabel: {
+			type: String,
+			required: true
+		},
+		componentName: {
+			type: String,
+			required: true
+		},
+		componentPk: {
+			type: String,
+			required: true
+		},
+		componentMethod: {
+			type: String,
+			required: true
+		},
+		modelName: {
+			type: String,
+			default: null,
+			required: false
+		}
+	},
+	data() {
+		return {
+			titleText: this.componentLabel,
+			messageText: '',
+			okText: this.componentMethod !== 'read' ? this.$t('form.save') : this.$t('form.ok'),
+			cancelText: this.componentMethod !== 'read' ? this.$t('form.cancel') : null,
+			widthDialog: window.innerWidth * 0.9,
+			dialogName: this.componentName + '_' + this.parentId + '_popup'
+		};
+	},
+	mounted() {
+		var self = this;
+		this.$puiEvents.$on(`pui-modalDialog-${this.dialogName}-ok`, () => {
+			if (self.componentMethod === 'read') {
+				this.$puiEvents.$emit(`pui-modalDialog-${self.dialogName}-hide`);
+			} else {
+				const form = self.getFormComponent(self.$refs.modalForm.$children[0]);
+				if (form) {
+					form.$parent.save(true);
+					this.$puiEvents.$on(`onPui-insertRow-dataTable-${self.modelName}`, (data) => {
+						this.$puiEvents.$emit(`pui-modalDialog-${self.dialogName}-hide`, data);
+					});
+					this.$puiEvents.$on(`onPui-editRow-dataTable-${self.modelName}`, (data) => {
+						this.$puiEvents.$emit(`pui-modalDialog-${self.dialogName}-hide`, data);
+					});
+				} else {
+					this.$puiEvents.$emit(`pui-modalDialog-${self.dialogName}-hide`);
+				}
+			}
+		});
+		this.$puiEvents.$on(`pui-modalDialog-${this.dialogName}-cancel`, () => {
+			this.$puiEvents.$emit(`pui-modalDialog-${self.dialogName}-hide`);
+		});
+	},
+	destroyed() {
+		this.$puiEvents.$off(`pui-modalDialog-${this.dialogName}-ok`);
+		this.$puiEvents.$off(`pui-modalDialog-${this.dialogName}-cancel`);
+		if (this.modelName) {
+			this.$puiEvents.$off(`onPui-insertRow-dataTable-${this.modelName}`);
+			this.$puiEvents.$off(`onPui-editRow-dataTable-${this.modelName}`);
+		}
+	},
+	methods: {
+		getFormComponent(component) {
+			if (!component) {
+				return null;
+			}
+			if (component.validate && component.$options && component.$options._componentTag === 'v-form') {
+				return component;
+			}
+			for (let i = 0, childrenLength = component.$children.length; i < childrenLength; i++) {
+				const child = this.getFormComponent(component.$children[i]);
+				if (child && child.validate && child.$options && child.$options._componentTag === 'v-form') {
+					return child;
+				}
+			}
+		}
+	}
+};
+</script>

package/src/components/PuiSelectTextService.vue

@@ -0,0 +1,61 @@
+<template>
+	<v-list-item-title v-if="type === 'item'" v-html="text" :title="text" :style="'white-space: unset !important;'"></v-list-item-title>
+	<span v-else class="pr-2" :class="compClass">{{ text }}</span>
+</template>
+
+<script>
+export default {
+	name: 'PuiSelectTextService',
+	data: () => ({}),
+	props: {
+		item: {
+			type: [Object, String, Number],
+			required: true
+		},
+		type: {
+			type: String,
+			default: 'item',
+			required: false
+		},
+		itemText: {
+			type: [Function, String, Array],
+			required: true
+		},
+		truncate: {
+			type: Boolean,
+			default: false,
+			required: false
+		},
+		writing: {
+			type: Boolean,
+			default: false,
+			required: false
+		},
+		disabled: {
+			type: Boolean,
+			default: false,
+			required: false
+		}
+	},
+	computed: {
+		text() {
+			let customText;
+			if (this.itemText instanceof Function) {
+				customText = this.itemText(this.item);
+			} else if (Array.isArray(this.itemText)) {
+				customText = this.itemText.slice(1).reduce((a, b) => {
+					return `${a} - ${b}`;
+				}, this.itemText[0]);
+			}
+
+			return customText || this.item[this.itemText];
+		},
+		compClass() {
+			return {
+				'puiselect-text-truncate': this.truncate && !this.writing && !this.disabled,
+				'puiselect-text': !this.writing
+			};
+		}
+	}
+};
+</script>

package/src/components/PuiSpinnerField.vue

@@ -0,0 +1,484 @@
+<template>
+	<!-- DESKTOP -->
+	<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-model="internalModel"
+						@keyup="validateNumber"
+						v-bind="allProps"
+						:class="getEditedClass"
+						:outline="!isMobile"
+						@blur="updateValueLazy"
+						:style="getCompStyle"
+						solo
+						outlined
+						flat
+						type="number"
+						:messages="internalMessages"
+						class="pui-spinner-inline"
+						:placeholder="getPlaceholder"
+						:error-messages="internalErrorMessages"
+						:error="internalError"
+					></v-text-field>
+
+					<v-btn
+						icon
+						class="primary--text pui-spinner-btnCtrl pui-spinner-btnCtrl_minus ml-0 pl-0 pr-0 mt-0"
+						:class="{ 'pui-spinner-btnCtrl_disabled': isBtnSubstractDisable }"
+						:ripple="!isBtnSubstractDisable"
+						@click="downValue"
+					>
+						<v-icon>fal fa-minus</v-icon>
+					</v-btn>
+					<v-btn
+						icon
+						class="primary--text pui-spinner-btnCtrl pui-spinner-btnCtrl_plus mr-0 pl-0 pr-0 mt-0"
+						:class="{ 'pui-spinner-btnCtrl_disabled': isBtnAddDisable }"
+						:ripple="!isBtnAddDisable"
+						@click="upValue"
+					>
+						<v-icon>fal fa-plus</v-icon>
+					</v-btn>
+				</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 />
+							</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"
+						@keyup="validateNumber"
+						v-bind="allProps"
+						:class="getEditedClass"
+						:solo="!isMobile"
+						:outline="!isMobile"
+						@blur="updateValueLazy"
+						:style="getCompStyle"
+						flat
+						single-line
+						type="number"
+						:messages="internalMessages"
+						class="elevation-0 pui-spinner-inline"
+						:placeholder="getPlaceholder"
+						:error-messages="internalErrorMessages"
+						:error="internalError"
+					></v-text-field>
+					<v-btn
+						depressed
+						class="primary--text pui-spinner-inline white ml-0 pui-spinner-btnCtrl pui-spinner-btnCtrl_minus pl-0 pr-0 mt-0"
+						:class="{ 'pui-spinner-btnCtrl_disabled': isBtnSubstractDisable }"
+						:ripple="!isBtnSubstractDisable"
+						@click="downValue"
+					>
+						<v-icon>fal fa-minus</v-icon>
+					</v-btn>
+					<v-btn
+						depressed
+						class="primary--text pui-spinner-inline white mr-0 pui-spinner-btnCtrl pui-spinner-btnCtrl_plus pl-0 pr-0 ml-1 mt-0"
+						:class="{ 'pui-spinner-btnCtrl_disabled': isBtnAddDisable }"
+						:ripple="!isBtnAddDisable"
+						@click="upValue"
+					>
+						<v-icon>fal fa-plus</v-icon>
+					</v-btn>
+				</v-flex>
+			</v-layout>
+		</div>
+	</div>
+	<!-- MOBILE -->
+	<div v-else>
+		<v-flex xs12>
+			<label :class="getLabelRequiredClass">{{ getLabel }}</label>
+		</v-flex>
+		<v-flex xs12>
+			<v-text-field
+				v-model="internalModel"
+				@keyup="validateNumber"
+				v-bind="allProps"
+				:class="getEditedClass"
+				:solo="!isMobile"
+				:outline="!isMobile"
+				@blur="updateValueLazy"
+				flat
+				single-line
+				type="number"
+				:messages="internalMessages"
+				class="pui-spinner-hideBtns pui-spinner-inline v-text-field--mobile"
+				:placeholder="getPlaceholder"
+				:error-messages="internalErrorMessages"
+				:error="internalError"
+			></v-text-field>
+			<v-btn
+				depressed
+				class="primary--text pui-spinner-inline white ml-0 pui-spinner-btnCtrl pui-spinner-btnCtrl_minus pl-0 pr-0 mt-0"
+				:class="{ 'pui-spinner-btnCtrl_disabled': isBtnSubstractDisable }"
+				:ripple="!isBtnSubstractDisable"
+				@click="downValue"
+			>
+				<v-icon>fal fa-minus</v-icon>
+			</v-btn>
+			<v-btn
+				depressed
+				class="primary--text pui-spinner-inline white mr-0 pui-spinner-btnCtrl pui-spinner-btnCtrl_plus pl-0 pr-0 ml-1 mt-0"
+				:class="{ 'pui-spinner-btnCtrl_disabled': isBtnAddDisable }"
+				:ripple="!isBtnAddDisable"
+				@click="upValue"
+			>
+				<v-icon>fal fa-plus</v-icon>
+			</v-btn>
+		</v-flex>
+	</div>
+</template>
+
+<script>
+import PuiUtilsNumberMixin from '../mixins/PuiUtilsNumberMixin';
+import PuiFormComponentMixin from '../mixins/PuiFormComponentMixin';
+
+export default {
+	name: 'PuiSpinnerField',
+	mixins: [PuiUtilsNumberMixin, PuiFormComponentMixin],
+	data: () => ({
+		initialValue: 0,
+		internalModel: 0,
+		minValue: Number.MIN_SAFE_INTEGER,
+		maxValue: Number.MAX_SAFE_INTEGER,
+		disableBtnAdd: false,
+		disableBtnSubstract: false,
+		internalMessages: [],
+		internalErrorMessages: [],
+		infoTooltipMessages: []
+	}),
+	props: {
+		value: {
+			type: [Number],
+			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
+		},
+		title: {
+			type: [String],
+			default: '',
+			required: false
+		},
+		tooltip: {
+			type: [Boolean],
+			default: false,
+			required: false
+		},
+		description: {
+			type: [String],
+			default: '',
+			required: false
+		},
+		noLazyModel: {
+			type: [Boolean],
+			default: false,
+			required: false
+		},
+		placeholder: {
+			type: [String],
+			default: ' ',
+			required: false
+		},
+		width: {
+			type: [String, Number],
+			default: '90',
+			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.spinnerField.overmaxvalue') + ': ' + this.max);
+			}
+
+			if (this.min !== Number.MIN_SAFE_INTEGER) {
+				this.infoTooltipMessages.push(this.$t('pui9.components.spinnerField.overminvalue') + ': ' + this.min);
+			}
+		},
+		updateValueLazy() {
+			if (!this.internalError) {
+				this.$emit('input', this.internalModel);
+			}
+		},
+		validateNumber(evt) {
+			var valNum = evt.target.valueAsNumber;
+			var wrong = isNaN(valNum);
+			if (!wrong) {
+				this.clearErrorMessage();
+				this.checkNumber(valNum);
+			} else {
+				this.showWrongNumberMessage();
+			}
+		},
+		checkNumber(val) {
+			var isInt = this.checkInteger(val);
+			if (isInt) {
+				var intVal = parseInt(val);
+				const validated = this.validateMinMax(intVal);
+				if (validated) {
+					this.internalModel = intVal;
+				}
+			} else {
+				var int = parseInt(val);
+				if (!isNaN(int)) {
+					const validated = this.validateMinMax(int);
+					if (validated) {
+						this.internalModel = int;
+					}
+				} else {
+					this.showWrongNumberMessage();
+				}
+			}
+		},
+		validateMinMax(num) {
+			var ok = true;
+			if (num) {
+				if (num > this.maxValue) {
+					this.internalModel = this.maxValue;
+					this.showErrorMessageOverMaxvalue();
+					ok = false;
+				} else {
+					this.disableBtnAdd = false;
+				}
+				if (num < this.minValue) {
+					this.internalModel = this.minValue;
+					this.showErrorMessageOverMinvalue();
+					ok = false;
+				} else {
+					this.disableBtnSubstract = false;
+				}
+			} else {
+				this.resetBtns();
+			}
+			return ok;
+		},
+		upValue() {
+			if (!this.disableBtnAdd) {
+				this.internalModel++;
+				this.clearErrorMessage();
+				this.$emit('input', this.internalModel);
+			}
+		},
+		downValue() {
+			if (!this.disableBtnSubstract) {
+				this.internalModel--;
+				this.clearErrorMessage();
+				this.$emit('input', this.internalModel);
+			}
+		},
+		checkBtnAddDisable() {
+			if (this.disabled || this.internalModel >= this.max) {
+				this.disableBtnAdd = true;
+				return true;
+			}
+			this.disableBtnAdd = false;
+			return false;
+		},
+		checkBtnSubstarctDisable() {
+			if (this.disabled || this.internalModel <= this.min) {
+				this.disableBtnSubstract = true;
+				return true;
+			}
+			this.disableBtnSubstract = false;
+			return false;
+		},
+		showErrorMessageOverMaxvalue() {
+			var message = this.$t('pui9.components.spinnerField.overmaxvalue') + ' ' + this.maxValue;
+			this.internalMessages = [message];
+		},
+		showErrorMessageOverMinvalue() {
+			var message = this.$t('pui9.components.spinnerField.overminvalue') + ' ' + this.minValue;
+			this.internalMessages = [message];
+		},
+		showWrongNumberMessage() {
+			var message = this.$t('pui9.components.spinnerField.wrongnumber');
+			this.internalError = true;
+			this.internalErrorMessages = [message];
+		},
+		clearErrorMessage() {
+			this.internalMessages = [];
+			this.internalErrorMessages = [];
+			this.internalError = false;
+		},
+		resetBtns() {
+			this.disableBtnAdd = false;
+			this.disableBtnSubstract = false;
+			this.clearErrorMessage();
+		},
+		initializeModel(value) {
+			if (this.min !== null && this.min !== undefined) {
+				const minVal = parseInt(this.min);
+				if (!isNaN(minVal)) {
+					if (minVal < this.maxValue) {
+						this.minValue = minVal;
+					}
+				}
+			}
+			if (this.max !== null && this.max !== undefined) {
+				const maxVal = parseInt(this.max);
+				if (!isNaN(maxVal)) {
+					if (maxVal > this.minValue) {
+						this.maxValue = maxVal;
+					}
+				}
+			}
+
+			if (value === null) {
+				this.initialValue = 0;
+				this.internalModel = 0;
+			} else {
+				var noNullValue = value ? parseInt(value) : 0;
+				this.initialValue = noNullValue;
+				this.internalModel = noNullValue;
+
+				if (this.internalModel < this.minValue) {
+					this.internalModel = this.minValue;
+					this.initialValue = this.minValue;
+				}
+				this.firstLazyLoad = true;
+			}
+		}
+	},
+	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 };
+		},
+		getCompStyle() {
+			var inputWidth = this.width;
+			if (this.value && !isNaN(parseInt(this.value))) {
+				var numLength = this.value.toString().length;
+				var newle = numLength * 13;
+				const sufPref = this.allProps.suffix || this.allProps.prefix;
+				if (sufPref) newle += sufPref.length * 13;
+				if (newle > inputWidth) {
+					inputWidth = newle;
+				}
+			}
+			return { width: inputWidth + 'px' };
+		},
+		isBtnAddDisable() {
+			return this.checkBtnAddDisable();
+		},
+		isBtnSubstractDisable() {
+			return this.checkBtnSubstarctDisable();
+		},
+		showTooltip() {
+			if (!this.tooltip || this.getLabel === '' || this.getLabel === null) {
+				return false;
+			}
+			return (this.infoTooltipMessages.length > 0 || this.description !== '') && this.tooltip;
+		}
+	},
+	created() {
+		if (this.noLazyModel) {
+			this.firstLazyLoad = true;
+		}
+		this.initializeModel(this.value);
+
+		this.getInfoTooltip();
+	},
+	watch: {
+		value(val) {
+			if (!this.noLazyModel && !this.firstLazyLoad) {
+				this.initializeModel(val);
+				this.firstLazyLoad = true;
+			} else {
+				this.internalModel = val;
+			}
+		},
+		min(newVal) {
+			if (newVal !== null && newVal !== undefined) {
+				const minVal = parseInt(newVal);
+				if (!isNaN(minVal)) {
+					if (minVal < this.maxValue) {
+						this.minValue = minVal;
+					}
+				}
+			} else {
+				this.minValue = Number.MIN_SAFE_INTEGER;
+			}
+		},
+		max(newVal) {
+			if (newVal !== null && newVal !== undefined) {
+				const maxVal = parseInt(newVal);
+				if (!isNaN(maxVal)) {
+					if (maxVal > this.minValue) {
+						this.maxValue = maxVal;
+					}
+				}
+			} else {
+				this.maxValue = Number.MAX_SAFE_INTEGER;
+			}
+		}
+	},
+	destroyed() {
+		// No hay que eliminar el evento de onPuiTreeMenuItemSelected
+	}
+};
+</script>