pui9-components 2.0.7 → 3.0.0

package/package.json

@@ -4,7 +4,7 @@
 	"author": {
 		"name": "Prodevelop S.L."
 	},
-	"version": "2.0.7",
+	"version": "3.0.0",
 	"license": "Copyright",
 	"main": "dist/pui9-components.common.js",
 	"scripts": {
@@ -47,10 +47,7 @@
 		"sass-loader": "10.0.2",
 		"vue": "2.7.14",
 		"vue-i18n": "8.28.2",
-		"vue-cli-plugin-vuetify": "2.5.8",
 		"vue-template-compiler": "2.7.14",
-		"vuetify-loader": "1.9.2",
-		"vuetify": "2.6.12",
 		"vuex": "3.6.2"
 	},
 	"eslintConfig": {
@@ -73,7 +70,6 @@
 	],
 	"files": [
 		"dist/*",
-		"src/*",
 		"*.json"
 	],
 	"jest": {

package/src/App.vue

@@ -1,117 +0,0 @@
-<template>
-	<v-app>
-		<v-app-bar app color="primary" dark>
-			<div class="d-flex align-center">
-				<h2>PUI9 Basic Components Library</h2>
-			</div>
-
-			<v-spacer></v-spacer>
-
-			<v-btn href="https://confluence.prodevelop.es/pages/viewpage.action?pageId=163217879" target="_blank" text>
-				<span class="mr-2">Documentation</span>
-				<v-icon>mdi-open-in-new</v-icon>
-			</v-btn>
-		</v-app-bar>
-
-		<v-content style="height: 100vh; overflow-y: auto;">
-			<v-container>
-				<v-tabs show-arrows>
-					<v-tab ripple>PuiFieldSet</v-tab>
-					<v-tab ripple>PuiField</v-tab>
-					<v-tab ripple>PuiTextArea</v-tab>
-					<v-tab ripple>PuiTextField</v-tab>
-					<v-tab ripple>PuiNumberField</v-tab>
-					<v-tab ripple>PuiSpinnerField</v-tab>
-					<v-tab ripple>PuiDateField</v-tab>
-					<v-tab ripple>PuiRadioGroup</v-tab>
-					<v-tab ripple>PuiCheckbox</v-tab>
-					<v-tab ripple>PuiSwitch</v-tab>
-					<v-tab ripple>PuiMultiSelect</v-tab>
-					<v-tab ripple>PuiCodeEditor</v-tab>
-					<v-tab ripple>PuiRichTextEditor</v-tab>
-					<v-tab ripple>PuiForm</v-tab>
-
-					<v-tab-item lazy>
-						<test-field-set></test-field-set>
-					</v-tab-item>
-					<v-tab-item lazy>
-						<test-field></test-field>
-					</v-tab-item>
-					<v-tab-item lazy>
-						<test-input-text-area></test-input-text-area>
-					</v-tab-item>
-					<v-tab-item lazy>
-						<test-input-text></test-input-text>
-					</v-tab-item>
-					<v-tab-item lazy>
-						<test-input-number></test-input-number>
-					</v-tab-item>
-					<v-tab-item lazy>
-						<test-input-spinner></test-input-spinner>
-					</v-tab-item>
-					<v-tab-item lazy>
-						<test-input-date></test-input-date>
-					</v-tab-item>
-					<v-tab-item lazy>
-						<test-input-radio-group></test-input-radio-group>
-					</v-tab-item>
-					<v-tab-item lazy>
-						<test-input-checkbox></test-input-checkbox>
-					</v-tab-item>
-					<v-tab-item lazy>
-						<test-input-switch></test-input-switch>
-					</v-tab-item>
-					<v-tab-item lazy>
-						<test-multi-select></test-multi-select>
-					</v-tab-item>
-					<v-tab-item lazy>
-						<test-code-editor></test-code-editor>
-					</v-tab-item>
-					<v-tab-item lazy>
-						<test-rich-text-editor></test-rich-text-editor>
-					</v-tab-item>
-					<v-tab-item lazy>
-						<test-pui-form></test-pui-form>
-					</v-tab-item>
-				</v-tabs>
-			</v-container>
-		</v-content>
-	</v-app>
-</template>
-
-<script>
-import TestFieldSet from '@/tests/TestFieldSet';
-import TestField from '@/tests/TestField';
-import TestInputTextArea from '@/tests/TestInputTextArea';
-import TestInputText from '@/tests/TestInputText';
-import TestInputNumber from '@/tests/TestInputNumber';
-import TestInputSpinner from '@/tests/TestInputSpinner';
-import TestInputDate from '@/tests/TestInputDate';
-import TestInputRadioGroup from '@/tests/TestInputRadioGroup';
-import TestInputCheckbox from '@/tests/TestInputCheckbox';
-import TestInputSwitch from '@/tests/TestInputSwitch';
-import TestMultiSelect from '@/tests/TestMultiSelect';
-import TestCodeEditor from '@/tests/TestCodeEditor';
-import TestRichTextEditor from '@/tests/TestRichTextEditor';
-import TestPuiForm from '@/tests/TestPuiForm';
-
-export default {
-	name: 'App',
-	components: {
-		TestFieldSet,
-		TestField,
-		TestInputTextArea,
-		TestInputText,
-		TestInputNumber,
-		TestInputSpinner,
-		TestInputDate,
-		TestInputRadioGroup,
-		TestInputCheckbox,
-		TestInputSwitch,
-		TestMultiSelect,
-		TestCodeEditor,
-		TestRichTextEditor,
-		TestPuiForm
-	}
-};
-</script>

package/src/components/PuiAutocomplete.vue

@@ -1,196 +0,0 @@
-<template>
-	<div class="ml-1 mr-1">
-		<v-layout wrap>
-			<v-flex v-if="!isMobile" :class="toplabel ? 'xs12' : labelColumnStyles || 'xs12 sm6 md4 xl3'">
-				<label v-if="getLabel === '$nbsp;'">&nbsp;</label>
-				<label v-else :class="getLabelRequiredClass">{{ getLabel }}</label>
-			</v-flex>
-			<v-flex :class="isMobile || toplabel ? 'xs12' : valueColumnStyles || 'xs12 sm6 md8 xl9'">
-				<v-autocomplete
-					class="pui-select"
-					:class="getEditedClass"
-					v-model="internalModel"
-					:items="items"
-					:item-text="itemText"
-					solo
-					flat
-					:clearable="clearable"
-					:rules="getRules"
-					:placeholder="getPlaceholder"
-					:error="internalError"
-					v-bind="allProps"
-					@input="emitChangeValue"
-				>
-					<!-- pass through scoped slots -->
-					<template v-for="(_, scopedSlotName) in $scopedSlots" v-slot:[scopedSlotName]="slotData">
-						<slot :name="scopedSlotName" v-bind="slotData" />
-					</template>
-					<!-- pass through normal slots -->
-					<template v-for="(_, slotName) in $slots" v-slot:[slotName]>
-						<slot :name="slotName" />
-					</template>
-					<template v-if="!$slots.item" v-slot:item="{ item, attrs, on }">
-						<template>
-							<v-list-item v-bind="attrs" v-on="on" class="pui-select__item">
-								<v-list-item-content class="pl-3">
-									<pui-select-text-service :item="item" :itemText="itemText" />
-								</v-list-item-content>
-								<v-list-item-action class="pr-3" v-if="attrs['aria-selected'] === 'true'">
-									<v-icon small class="pui-select__item-icon">fa fa-check</v-icon>
-								</v-list-item-action>
-							</v-list-item>
-						</template>
-					</template>
-				</v-autocomplete>
-			</v-flex>
-		</v-layout>
-	</div>
-</template>
-
-<script>
-import PuiSelectTextService from './PuiSelectTextService';
-import PuiFormComponentMixin from '../mixins/PuiFormComponentMixin';
-
-export default {
-	name: 'PuiAutocomplete',
-	components: { PuiSelectTextService },
-	mixins: [PuiFormComponentMixin],
-	props: {
-		value: {
-			type: [String, Number, Object, Array],
-			required: false
-		},
-		rules: {
-			type: Array,
-			default: () => {
-				return [];
-			}
-		},
-		/* Native by the v-select. If true adds a close icon to the selection */
-		clearable: {
-			type: [Boolean],
-			default: true,
-			required: false
-		},
-		/* If value is Object, this property has to be defined with key:value atributes */
-		modelFormMapping: {
-			type: Object,
-			default: null,
-			required: false
-		},
-		/* Native by the v-select. The items in the list */
-		items: {
-			type: [Array],
-			required: true
-		},
-		/* The items text property name. Same to item-text in v-select. */
-		itemText: {
-			type: [String, Array, Function],
-			default: 'text',
-			required: false
-		},
-		/* The items value property name. Same to item-value in v-select. */
-		itemValue: {
-			type: [String, Array, Function],
-			default: 'value',
-			required: false
-		},
-		labelColumnStyles: {
-			type: [String],
-			required: false
-		},
-		valueColumnStyles: {
-			type: [String],
-			required: false
-		}
-	},
-	computed: {
-		isDisabled() {
-			return this.disabled;
-		},
-		isEdited() {
-			if (this.noeditable || this.disabled || this.readonly) {
-				return false;
-			} else {
-				return JSON.stringify(this.initialValue) != JSON.stringify(this.internalModel);
-			}
-		},
-		getLabelRequiredClass() {
-			return { 'v-label--required': this.required };
-		},
-		getEditedClass() {
-			const editedClass = { 'v-text-field--edited': this.isEdited };
-			if (this.attach) {
-				editedClass['puiautocomplete-' + this.attach] = true;
-			}
-			return editedClass;
-		},
-		getRules() {
-			const rules = [...this.rules];
-			if (this.required) {
-				var func = (value) => !!value || this.requiredMessage;
-				var func2 = () => !this.internalError;
-				var func3 = (value) => {
-					if (Array.isArray(value) && value.length === 0) {
-						return this.requiredMessage;
-					}
-					return true;
-				};
-				rules.push(func, func2, func3);
-			}
-			return rules;
-		},
-		watchVModelValue() {
-			return JSON.stringify(this.value) + this.items.length;
-		}
-	},
-	watch: {
-		watchVModelValue() {
-			this.internalModel = this.formatInternalValue();
-		}
-	},
-	created() {
-		const internalValueFormated = this.formatInternalValue();
-		this.initialValue = internalValueFormated;
-		this.internalModel = internalValueFormated;
-	},
-	methods: {
-		emitChangeValue() {
-			if (typeof this.value === 'object' && this.modelFormMapping) {
-				if (this.internalModel) {
-					// set model values
-					for (const [key, value] of Object.entries(this.modelFormMapping)) {
-						this.$set(this.value, key, this.internalModel[value]);
-					}
-				} else if (this.itemValue) {
-					// reset model values
-					if (typeof this.itemValue === 'string') {
-						this.$set(this.value, this.itemValue, null);
-					} else if (Array.isArray(this.itemValue)) {
-						this.itemValue.forEach((key) => {
-							this.$set(this.value, key, null);
-						});
-					}
-				}
-			} else {
-				this.$emit('input', this.internalModel);
-			}
-		},
-		formatInternalValue() {
-			let newValue = this.value;
-			if (typeof this.value === 'object' && this.modelFormMapping) {
-				// select the item from value and items properties
-				newValue = this.items.find((item) => {
-					for (const [key, value] of Object.entries(this.modelFormMapping)) {
-						if (item[value] !== this.value[key]) {
-							return false;
-						}
-					}
-					return true;
-				});
-			}
-			return newValue;
-		}
-	}
-};
-</script>

package/src/components/PuiCauDialog.vue

@@ -1,192 +0,0 @@
-<template>
-	<v-container class="puiCau">
-		<v-dialog v-model="dialogModel" width="700" @click:outside="closeDialog()">
-			<v-card>
-				<v-toolbar elevation="3" height="50" color="light-blue darken-3">
-					<v-spacer></v-spacer>
-					<v-toolbar-title style="color: white">{{ getBtnTitle }}</v-toolbar-title>
-					<v-spacer></v-spacer>
-					<v-icon color="white" @click="closeDialog()">fas fa-window-close</v-icon>
-				</v-toolbar>
-
-				<v-card-text>
-					<v-form ref="form">
-						<v-container class="pa-0 pt-4">
-							<pui-text-field v-model="model.subject" :label="$t('puicau.subject')" toplabel required></pui-text-field>
-							<pui-text-area v-model="model.content" :label="$t('puicau.content')" toplabel required></pui-text-area>
-							<pui-select
-								v-if="dialogModel"
-								:label="$t('puicau.urgency')"
-								v-model="model"
-								:items="urgencyValues"
-								:modelFormMapping="{ urgency: 'urgency' }"
-								:itemsToSelect="itemsToSelect"
-								:itemValue="['urgency']"
-								itemText="text"
-								toplabel
-								required
-							></pui-select>
-
-							<!-- adjuntos -->
-							<pui-field-set v-if="isLogged" :title="$t('form.puidocument.title')" class="mt-0 mb-8">
-								<pui-file-upload-group v-model="model.files" ref="fileUploadGroup" :minDocuments="0"></pui-file-upload-group>
-							</pui-field-set>
-
-							<pui-field-set :title="$t('puicau.contact')" class="pa-4 pb-0">
-								<pui-text-field
-									v-model="model.name"
-									:label="$t('puicau.name')"
-									toplabel
-									required
-									:readonly="getUser != null"
-								></pui-text-field>
-								<pui-text-field
-									v-model="model.email"
-									:label="$t('puicau.email')"
-									toplabel
-									emailMask
-									required
-									:readonly="getEmail != null"
-								></pui-text-field>
-								<pui-text-field v-model="model.phone" :label="$t('puicau.phone')" toplabel required></pui-text-field>
-							</pui-field-set>
-						</v-container>
-					</v-form>
-				</v-card-text>
-
-				<v-divider></v-divider>
-
-				<v-card-actions>
-					<v-btn color="primary" text @click="closeDialog()">Cancelar</v-btn>
-					<v-spacer></v-spacer>
-					<v-btn color="secondary" text @click="send(model)">Enviar</v-btn>
-				</v-card-actions>
-			</v-card>
-		</v-dialog>
-	</v-container>
-</template>
-
-<script>
-export default {
-	name: 'PuiCauDialog',
-	props: {
-		dialogModel: {
-			required: true
-		}
-	},
-	data() {
-		return {
-			model: null,
-			urgencyValues: [
-				{
-					text: this.$t('puicau.urgencyValues.maximum'),
-					urgency: 'MAXIMUM'
-				},
-				{
-					text: this.$t('puicau.urgencyValues.high'),
-					urgency: 'HIGH'
-				},
-				{
-					text: this.$t('puicau.urgencyValues.medium'),
-					urgency: 'MEDIUM'
-				},
-				{
-					text: this.$t('puicau.urgencyValues.low'),
-					urgency: 'LOW'
-				}
-			]
-		};
-	},
-	computed: {
-		isIssueTicketActive() {
-			return this.$store.getters.isIssueTicketActive;
-		},
-		getUser() {
-			return this.$store.getters.getSession.name;
-		},
-		getEmail() {
-			return this.$store.getters.getSession.email;
-		},
-		isLogged() {
-			return this.getUser != null;
-		},
-		getBtnTitle() {
-			return this.isLogged ? this.$t('puicau.menu_entry') : this.$t('puicau.title');
-		},
-		itemsToSelect() {
-			return [{urgency: this.model.urgency}]
-		}
-	},
-	created() {
-		this.setInitialValues();
-	},
-	methods: {
-		setInitialValues() {
-			this.model = this.getEmptyModel();
-			this.model.name = this.getUser;
-			this.model.email = this.getEmail;
-		},
-		getEmptyModel() {
-			return {
-				subject: null,
-				content: null,
-				urgency: null,
-				name: null,
-				email: null,
-				phone: null,
-				files: []
-			};
-		},
-		send(formData) {
-			if (this.$refs.form.validate() && this.validateFileUploads()) {
-				let fileData = new window.FormData();
-				if (this.isLogged && this.model && this.model.files && this.model.files.length > 0) {
-					this.model.files.forEach((file) =>
-					fileData.append('files', file.selectedFile, file.selectedFile.name)
-					);
-				} /*else {
-					fileData.append('files', new Blob(), ''); // EMPTY BLOB
-				}*/
-
-				delete formData.files;
-
-				this.$puiRequests.uploadFileRequest(
-					'/issueTicket',
-					fileData,
-					() => {
-						this.closeDialog();
-					},
-					(error) => {
-						console.log(error)
-						this.$puiNotify.error(error.message);
-						this.dialog = false;
-					},
-					formData // as parameters
-				);
-			}
-		},
-		validateFileUploads() {
-			if (!this.isLogged) {
-				return true;
-			}
-
-			return this.$refs.fileUploadGroup.validateFileUploads();
-		},
-		closeDialog() {
-			this.setInitialValues();
-			this.$puiEvents.$emit('pui-modalDialogForm-cau-close');
-		}
-	}
-};
-</script>
-
-<style lang="postcss">
-.puiCau {
-	position: absolute;
-	bottom: 0;
-}
-
-.v-btn--plain .v-btn__content {
-	opacity: 1 !important;
-}
-</style>

package/src/components/PuiCheckbox.vue

@@ -1,126 +0,0 @@
-<template>
-	<v-checkbox
-		:class="isRequired"
-		class="d-flex ml-2 mr-2"
-		:label="getLabel"
-		:rules="getRules"
-		v-model="internalModel"
-		@change="updateValue"
-		v-bind="allProps"
-		:ripple="false"
-		:false-value="falseValue"
-		:true-value="trueValue"
-		color="primary"
-		:error="internalError"
-	>
-		<template v-slot:label>
-			<v-container class="d-flex pa-0 align-center">
-				<span>{{ label }}</span>
-				<pui-form-tooltip v-bind="{ tooltipDescription, tooltipIcon }" v-if="showTooltip" ref="tooltip"></pui-form-tooltip>
-			</v-container>
-		</template>
-	</v-checkbox>
-</template>
-
-<script>
-import PuiFormComponentMixin from '../mixins/PuiFormComponentMixin';
-
-export default {
-	name: 'PuiCheckbox',
-	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
-		},
-		tooltipDescription: {
-			type: String,
-			required: false
-		},
-		tooltipIcon: {
-			type: String,
-			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');
-		},
-		showTooltip() {
-            if (this.getLabel === '' || this.getLabel === null) {
-                return false;
-            }
-            return this.tooltipDescription || this.tooltip;
-        }
-	},
-	watch: {
-		value(val) {
-			this.internalModel = val;
-		}
-	},
-	created() {
-		this.initialValue = this.value;
-		this.internalModel = this.value;
-
-		// Hay que pasar el value a string para que si llega del servidor '1' (por poner un ejemplo) el
-		// checkbox 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>