pui9-components 2.0.8 → 3.0.0

package/src/components/PuiNumberField.vue

@@ -1,434 +0,0 @@
-<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>
-					<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-show="!showVisibleModel"
-						v-model="internalModel"
-						v-bind="allProps"
-						:class="getEditedClass"
-						:rules="getRules"
-						@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`"
-						v-show="showVisibleModel"
-						v-model="visibleModel"
-						v-bind="allProps"
-						:class="getEditedClass"
-						:rules="getRules"
-						@focus="onFocusText"
-						:messages="internalMessages"
-						:error-messages="internalErrorMessages"
-						:error="internalError"
-						solo
-						outlined
-						flat
-					></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>
-					<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-show="!showVisibleModel"
-						v-model="internalModel"
-						v-bind="allProps"
-						:class="getEditedClass"
-						:rules="getRules"
-						@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`"
-						v-show="showVisibleModel"
-						v-model="visibleModel"
-						v-bind="allProps"
-						:class="getEditedClass"
-						:rules="getRules"
-						@focus="onFocusText"
-						:messages="internalMessages"
-						:error-messages="internalErrorMessages"
-						:error="internalError"
-						solo
-						outlined
-						flat
-					></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"
-					@blur="onBlurText"
-					:rules="getRules"
-					:placeholder="getPlaceholder"
-					:messages="internalMessages"
-					:error-messages="internalErrorMessages"
-					:error="internalError"
-					ref="puiNumberField"
-					flat
-				></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"
-					:rules="getRules"
-					:label="getLabel"
-					@focus="onFocusText"
-					:messages="internalMessages"
-					:error-messages="internalErrorMessages"
-					:error="internalError"
-					flat
-				></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],
-	inject: {
-		form: {
-			default: null
-		}
-	},
-	data: () => ({
-		internalMessages: [],
-		internalErrorMessages: [],
-		internalDecimals: 999,
-		showVisibleModel: true,
-		firstLoad: true,
-		valid: true
-	}),
-	props: {
-		value: {
-			type: [String, Number],
-			required: false
-		},
-		decimals: {
-			type: [String, Number],
-			default: 8,
-			required: false
-		},
-		min: {
-			type: [String, Number],
-			required: false
-		},
-		max: {
-			type: [String, Number],
-			required: false
-		},
-		tooltip: {
-			type: Boolean,
-			required: false,
-			default: false
-		},
-		tooltipDescription: {
-			type: String,
-			required: false
-		},
-		tooltipIcon: {
-			type: String,
-			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
-		}
-	},
-	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];
-
-			let noErrorsRule = () => !this.internalError;
-			rules.push(noErrorsRule);
-
-			return rules;
-		},
-		compPlaceholder() {
-			if (this.placeholder && this.placeholder.length > 0) {
-				return this.placeholder;
-			}
-			return ' ';
-		},
-		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}`);
-		},
-		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.setInternalModel(this.value);
-	},
-	mounted() {
-		if (this.tooltip && this.$refs.tooltip) {
-			this.setTooltip();
-		}
-	},
-	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 {
-				let isFloat = this.checkFloat(value);
-				let parsedValue = parseInt(value);
-
-				if (!isFloat || isNaN(parsedValue)) {
-					this.showWrongNumberMessage();
-				}
-			}
-		},
-		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);
-				}
-			}
-		},
-		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);
-			}
-		},
-		showWrongNumberMessage() {
-			this.internalError = true;
-			this.internalErrorMessages = [this.$t('pui9.components.numberField.wrongnumber')];
-		},
-		showRequiredMessage() {
-			this.internalError = true;
-			this.internalErrorMessages = [this.$t('pui9.error.field_required')];
-		}
-	}
-};
-</script>

package/src/components/PuiPasswordField.vue

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

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