pui9-components 1.17.3 → 2.0.7

package/src/components/PuiTextField.vue

@@ -1,273 +1,389 @@
 <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"
-					:label="getLabel"
-					: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>
+    <!-- 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>
+                    <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"
+                        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>
+                    <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"
+                        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"
+                    :label="getLabel"
+                    :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: {
+    name: 'PuiTextField',
+    mixins: [PuiFormComponentMixin],
+    props: {
+        value: {
+            type: [String, Number],
+            required: false
+        },
+        tooltip: {
+            type: Boolean,
+            required: false,
+            default: false
+        },
+        tooltipDescription: {
 			type: String,
 			required: false
 		},
-		valueColumnStyles: {
+		tooltipIcon: {
 			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;
+			required: false,
 		},
-		showErrorMessage() {
-			this.internalError = true;
+        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 [];
+            }
+        },
+        emailMask: {
+            type: Boolean,
+            required: false,
+            default: false
+        },
+        nifMask: {
+            type: Boolean,
+            required: false,
+            default: false
+        },
+        nieMask: {
+            type: Boolean,
+            required: false,
+            default: false
+        },
+        cifMask: {
+            type: Boolean,
+            required: false,
+            default: false
+        },
+        passportMask: {
+            type: Boolean,
+            required: false,
+            default: false
+        },
+        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);
+            }
+            if (this.emailMask) {
+                var checkEmail = (value) => {
+                    if (!value) {
+                        return true;
+                    }
+                    if (value.length > 0) {
+                        const pattern = /^(([^<>()[\]\\.,;:\s@"]+(\.[^<>()[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;
+                        return pattern.test(value) || this.$t('form.puialertconfiguration.emails_invalid');
+                    }
+                    return false;
+                }
+                rules.push(checkEmail);
+            }
+            if (this.nifMask) {
+                var checkNif = (value) => {
+                    if (!value) {
+                        return true;
+                    }
+                    value = value.toUpperCase();
+                    if (value.length > 0) {
+                        const pattern = /^(\d{8})([A-Z]{1})$/;
+                        var letters = "TRWAGMYFPDXBNJZSQVHLCKE";
+                        if (pattern.test(value)) {
+                            console.log("letters.charAt(value.substring(0, 8) % 23)",letters.charAt(value.substring(0, 8) % 23));
+                            console.log("value.charAt(8)",value.charAt(8));
+                            if (letters.charAt(value.substring(0, 8) % 23) === value.charAt(8)){
+                                return true;
+                            } else{
+                                return this.$t('form.puialertconfiguration.nifs_invalid');
+                            }
+                        } else {
+                            return this.$t('form.puialertconfiguration.nifs_invalid');
+                        }
+                    }
+                    return false;
+                }
+                rules.push(checkNif);
+            }
+            if (this.nieMask) {
+                var checkNie = (value) => {
+                    if (!value) {
+                        return true;
+                    }
+                    value = value.toUpperCase();
+                    if (value.length > 0) {
+                        const pattern = /^([XYZ]{1})(\d{7})([A-Z]{1})$/;
+                        var letters = "TRWAGMYFPDXBNJZSQVHLCKE";
+                        if (pattern.test(value)) {
+                            if (value.startsWith('X')) {
+                                value = value.replace('X', '0');
+                            } else if (value.startsWith('Y')) {
+                                value = value.replace('Y', '1');
+                            } else if (value.startsWith('Z')) {
+                                value = value.replace('Z', '2');
+                            }
+                            if (letters.charAt(value.substring(0, 8) % 23) == value.charAt(8)){
+                                return true;
+                            } else{
+                                return this.$t('form.puialertconfiguration.nies_invalid');
+                            }
+                        } else {
+                            return this.$t('form.puialertconfiguration.nies_invalid');
+                        }
+                    }
+                    return false;
+                }
+                rules.push(checkNie);
+            }
+            if (this.cifMask) {
+                var checkCif = (value) => {
+                    if (!value) {
+                        return true;
+                    }
+                    value = value.toUpperCase();
+                    if (value.length > 0) {
+                        const pattern = /^([ABCDEFGHJKLMNPQRSUVW])(\d{7})([0-9A-J])$/;
+                        return pattern.test(value) || this.$t('form.puialertconfiguration.cifs_invalid');
+                    }
+                    var v1 = new Array(0, 2, 4, 6, 8, 1, 3, 5, 7, 9);
+                    var temp = 0;
+                    var dc;
+                    var i;
+                    for (i = 2; i <= 6; i += 2) {
+                        temp = temp + v1[parseInt(value.substr(i - 1, 1))];
+                        temp = temp + parseInt(value.substr(i, 1));
+                    }
+                    temp = temp + v1[parseInt(value.substr(7, 1))];
+                    temp = (10 - (temp % 10));
+                    if (temp == 10) {
+                        temp = 0;
+                    }
+                    dc = value.toUpperCase().charAt(8);
+                    if ((dc == temp) || (temp == 1 && dc == 'A') || (temp == 2 && dc == 'B') || (temp == 3 && dc == 'C') || (temp == 4 && dc == 'D') || (temp == 5 && dc == 'E') || (temp == 6 && dc == 'F') || (temp == 7 && dc == 'G') || (temp == 8 && dc == 'H') || (temp == 9 && dc == 'I') || (temp == 0 && dc == 'J')){
+                        return true;
+                    } else {
+                        return this.$t('form.puialertconfiguration.cifs_invalid');
+                    }
+                }
+                rules.push(checkCif);
+            }
+            if (this.passportMask) {
+                var checkPassport = (value) => {
+                    if (!value) {
+                        return true;
+                    }
+                    value = value.toUpperCase();
+                    if (value.length > 0) {
+                        const pattern = /[A-Z]{3}[0-9]{6}/;
+                        return pattern.test(value) || this.$t('form.puialertconfiguration.passports_invalid');
+                    }
+                    return false;
+                }
+                rules.push(checkPassport);
+            }
+            return rules;
+        },
+        compPlaceholder() {
+            if (this.placeholder && this.placeholder.length > 0) {
+                return this.placeholder;
+            }
+            return ' ';
+        },
+        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;
+            }
+        }
+    },
+    created() {
+        if (this.noLazyModel) {
+            this.firstLazyLoad = true;
+        }
+        this.initialValue = this.value;
+        this.initializeModel(this.value);
+    },
+    mounted() {
+		if (this.tooltip && this.$refs.tooltip) {
+			this.setTooltip();
 		}
-	}
+    },
+    methods: {
+        setTooltip() {
+            if (this.maxlength) {
+                this.$refs.tooltip.pushMessage(`${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/index.js

@@ -1,12 +1,16 @@
 import PuiAutocomplete from './components/PuiAutocomplete';
+import PuiCauDialog from './components/PuiCauDialog';
 import PuiCheckbox from './components/PuiCheckbox';
 import PuiCodeEditor from './components/PuiCodeEditor';
 import PuiDateField from './components/PuiDateField';
 import PuiField from './components/PuiField';
 import PuiFieldSet from './components/PuiFieldSet';
+import PuiFileUpload from './components/PuiFileUpload';
+import PuiFileUploadGroup from './components/PuiFileUploadGroup';
 import PuiFilter from './components/PuiFilter';
 import PuiFilterGroup from './components/PuiFilterGroup';
 import PuiFilterRule from './components/PuiFilterRule';
+import PuiFormTooltip from './components/PuiFormTooltip';
 import PuiMultiSelect from './components/PuiMultiSelect';
 import PuiNumberField from './components/PuiNumberField';
 import PuiPasswordField from './components/PuiPasswordField';
@@ -37,13 +41,17 @@ import Utils from './utils';
 const Components = {
 	PuiAutocomplete,
 	PuiCheckbox,
+	PuiCauDialog,
 	PuiCodeEditor,
 	PuiDateField,
 	PuiField,
 	PuiFieldSet,
 	PuiFilter,
+	PuiFileUpload,
+	PuiFileUploadGroup,
 	PuiFilterGroup,
 	PuiFilterRule,
+	PuiFormTooltip,
 	PuiMultiSelect,
 	PuiNumberField,
 	PuiPasswordField,

package/src/main.js

@@ -6,6 +6,7 @@ import App from './App.vue';
 
 import '@fortawesome/fontawesome-pro/css/all.css';
 import 'vuetify/dist/vuetify.min.css';
+
 import '../../pui9-styles/pui9.css';
 
 import storeObj from '../../pui9-store';