pui9-components 2.0.8 → 3.0.1

package/src/components/PuiSpinnerField.vue

@@ -1,464 +0,0 @@
-<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>
-					<pui-form-tooltip v-bind="{ tooltipDescription, tooltipIcon }" v-if="showTooltip" ref="tooltip"></pui-form-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-2 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>
-					<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
-						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: []
-	}),
-	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,
-            required: false,
-            default: false
-        },
-        tooltipDescription: {
-			type: String,
-			required: false
-		},
-		tooltipIcon: {
-			type: String,
-			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
-		}
-	},
-	
-	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.getLabel === '' || this.getLabel === null) {
-                return false;
-            }
-            return this.tooltipDescription || this.tooltip;
-        }
-	},
-	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;
-			}
-		}
-	},
-	created() {
-		if (this.noLazyModel) {
-			this.firstLazyLoad = true;
-		}
-		this.initializeModel(this.value);
-	},
-	mounted() {
-		if (this.tooltip && this.$refs.tooltip) {
-			this.setTooltip();
-		}
-    },
-	destroyed() {
-		// No hay que eliminar el evento de onPuiTreeMenuItemSelected
-	},
-	methods: {
-		setTooltip() {
-			if (this.max !== Number.MAX_SAFE_INTEGER) {
-				this.$refs.tooltip.pushMessage(this.$t('pui9.components.spinnerField.overmaxvalue') + ': ' + this.max);
-			}
-
-			if (this.min !== Number.MIN_SAFE_INTEGER) {
-				this.$refs.tooltip.pushMessage(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;
-			}
-		}
-	}
-};
-</script>

package/src/components/PuiSwitch.vue

@@ -1,104 +0,0 @@
-<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>