pui9-components 1.16.4

package/src/index.js

@@ -0,0 +1,73 @@
+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 PuiMultiSelect from './components/PuiMultiSelect';
+import PuiNumberField from './components/PuiNumberField';
+import PuiPasswordField from './components/PuiPasswordField';
+import PuiRadioGroup from './components/PuiRadioGroup';
+import PuiRichTextEditor from './components/PuiRichTextEditor';
+import PuiSpinnerField from './components/PuiSpinnerField';
+import PuiSwitch from './components/PuiSwitch';
+import PuiTextArea from './components/PuiTextArea';
+import PuiTextField from './components/PuiTextField';
+import PuiFormFooter from './components/PuiFormFooter';
+import PuiFormFooterBtns from './components/PuiFormFooterBtns';
+import PuiFormHeader from './components/PuiFormHeader';
+import PuiFormLoading from './components/PuiFormLoading';
+import PuiFormMiniAudit from './components/PuiFormMiniAudit';
+import PuiMasterDetail from './components/PuiMasterDetail';
+import PuiModalDialog from './components/PuiModalDialog';
+import PuiModalDialogForm from './components/PuiModalDialogForm';
+import PuiSelect from './components/PuiSelect';
+import PuiSelectDetailDialog from './components/PuiSelectDetailDialog';
+
+import VueInfiniteLoading from 'vue-infinite-loading';
+import VueDraggable from 'vuedraggable';
+import moment from 'moment';
+
+import DateTimeUtils from './dateTimeUtils';
+import Utils from './utils';
+
+const Components = {
+	PuiCheckbox,
+	PuiCodeEditor,
+	PuiDateField,
+	PuiField,
+	PuiFieldSet,
+	PuiMultiSelect,
+	PuiNumberField,
+	PuiPasswordField,
+	PuiRadioGroup,
+	PuiRichTextEditor,
+	PuiSpinnerField,
+	PuiSwitch,
+	PuiTextArea,
+	PuiTextField,
+	PuiFormFooter,
+	PuiFormFooterBtns,
+	PuiFormHeader,
+	PuiFormLoading,
+	PuiFormMiniAudit,
+	PuiMasterDetail,
+	PuiModalDialog,
+	PuiModalDialogForm,
+	PuiSelect,
+	PuiSelectDetailDialog
+};
+
+export default {
+	install(Vue) {
+		Object.keys(Components).forEach(name => {
+			Vue.component(name, Components[name]);
+		});
+
+		Vue.component('infinite-loading', VueInfiniteLoading);
+		Vue.component('draggable', VueDraggable);
+
+		Object.defineProperty(Vue.prototype, '$moment', { value: moment });
+		Object.defineProperty(Vue.prototype, '$dateTimeUtils', { value: DateTimeUtils });
+		Object.defineProperty(Vue.prototype, '$puiUtils', { value: Utils });
+	}
+};

package/src/main.js

@@ -0,0 +1,33 @@
+import Vue from 'vue';
+import Vuex from 'vuex';
+import VueI18n from 'vue-i18n';
+import vuetify from './plugins/vuetify';
+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';
+
+import enPuiTranslations from '../../pui9-translations/translations/en.json';
+import esPuiTranslations from '../../pui9-translations/translations/es.json';
+
+Vue.config.productionTip = false;
+
+Vue.use(Vuex);
+Vue.use(VueI18n);
+
+const store = new Vuex.Store(storeObj);
+const i18n = new VueI18n({
+	locale: 'es',
+	fallbackLocale: 'en',
+	messages: { en: enPuiTranslations, es: esPuiTranslations }
+});
+
+new Vue({
+	vuetify,
+	store,
+	i18n,
+	render: (h) => h(App)
+}).$mount('#app');

package/src/mixins/PuiFormComponentMixin.js

@@ -0,0 +1,81 @@
+import * as sanitizeHtml from 'sanitize-html';
+
+export default {
+	props: {
+		noeditable: {
+			type: Boolean,
+			default: false
+		},
+		required: {
+			type: Boolean,
+			default: false
+		},
+		label: {
+			type: String
+		},
+		toplabel: {
+			type: Boolean,
+			default: false
+		},
+		disabled: {
+			type: Boolean,
+			default: false
+		}
+	},
+	data() {
+		return {
+			initialValue: '',
+			internalModel: '',
+			firstLazyLoad: false,
+			internalError: false
+		};
+	},
+	computed: {
+		isMobile() {
+			return this.$store.getters.isMobile;
+		},
+		isEdited() {
+			if (this.noeditable || this.disabled || this.readonly) {
+				return false;
+			} else {
+				try {
+					if (this.initialValue.toString() !== this.internalModel.toString()) {
+						return true;
+					}
+					return false;
+				} catch (e) {
+					if (this.initialValue !== this.internalModel) {
+						return true;
+					}
+					return false;
+				}
+			}
+		},
+		getLabel() {
+			return this.allProps.label;
+		},
+		allProps() {
+			return { ...this.$attrs, ...this.$props };
+		},
+		getLocale() {
+			return (this.$store && this.$store.getters && this.$store.getters.getUserLanguage) || null;
+		},
+		getPlaceholder() {
+			return this.placeholder;
+		},
+		hasLabel() {
+			if (this.label && this.label.length > 0) {
+				return true;
+			}
+			return false;
+		},
+		requiredMessage() {
+			return this.$t('pui9.error.field_required');
+		}
+	},
+	methods: {
+		sanitizePuiFormHtmlText(dirtyText) {
+			return sanitizeHtml(dirtyText);
+		}
+	}
+};

package/src/mixins/PuiMultiSelectMixin.js

@@ -0,0 +1,106 @@
+export default {
+	props: {
+		value: {
+			required: false
+		},
+		/* Array of Objects provided by the parent component */
+		items: {
+			type: Array,
+			default: null,
+			required: true
+		},
+		/**
+		 * Los items seleccionados que se pasan de inicio, se pasa en la directiva v-model al utilizar este componente
+		 * puede ser un array de Items igual que en la propiedad :items, o un array con los id's solamente
+		 */
+		itemsToSelect: {
+			type: Array,
+			default: () => []
+		},
+		trackItemsToSelect: {
+			type: Boolean,
+			default: false
+		},
+		/* Type: String
+		The items text property name */
+		itemText: {
+			type: [String, Array, Function],
+			default: 'text'
+		},
+		/* Type: String
+		The items id property name */
+		itemValue: {
+			type: [String, Array, Function],
+			default: 'value'
+		}
+	},
+	data() {
+		return {
+			itemTextMultiple: false,
+			itemValueMultiple: false,
+			itemTextNested: false,
+			itemValueNested: false,
+			search: '',
+			selected: false
+		};
+	},
+	watch: {
+		items(newValue, oldValue) {
+			const newValueStr = JSON.stringify(newValue);
+			const oldValueStr = JSON.stringify(oldValue);
+			if (newValueStr !== oldValueStr) {
+				this.selectItems();
+			}
+		},
+		itemsToSelect: {
+			handler() {
+				this.trackItemsToSelect === true && this.selectItems();
+			},
+			deep: true
+		}
+	},
+	created() {
+		this.checkItemText();
+		this.checkItemValue();
+
+		this.selectItems();
+	},
+	methods: {
+		checkForNestedFields(stringField) {
+			if (stringField instanceof Function) {
+				return false;
+			}
+
+			return stringField.split('.').length > 1;
+		},
+		checkItemText() {
+			this.itemTextMultiple = Array.isArray(this.itemText);
+			if (this.itemTextMultiple === false) {
+				this.itemTextNested = this.checkForNestedFields(this.itemText);
+			}
+		},
+		checkItemValue() {
+			this.itemValueMultiple = Array.isArray(this.itemValue);
+			if (this.itemValueMultiple === false) {
+				this.itemValueNested = this.checkForNestedFields(this.itemValue);
+			}
+		},
+		selectItems() {
+			this.selectedItems = [];
+
+			this.setAvailableItems && this.setAvailableItems();
+			if (!this.itemsToSelect || this.itemsToSelect.length === 0) {
+				return;
+			}
+
+			this.getSelectedItems();
+
+			this.selected = true;
+		},
+		getSelectedItems() {
+			for (let i = 0, length = this.itemsToSelect.length; i < length; i++) {
+				this.selectItemById(this.itemsToSelect[i][this.itemValue] || this.itemsToSelect[i], this.itemsToSelect[i]);
+			}
+		}
+	}
+};

package/src/mixins/PuiUtilsNumberMixin.js

@@ -0,0 +1,19 @@
+export default {
+	methods: {
+		checkInteger(val) {
+			const regexp = /(^[0-9]*$)|(^-[0-9]+$)/;
+			return regexp.test(val);
+		},
+		checkFloat(val) {
+			const regexp = /^[-]?\d*(\.\d+)?$/;
+			return regexp.test(val);
+		},
+		truncateDecimal(number, decimals) {
+			var a = Math.pow(10, decimals);
+			var b = number * a;
+			var c = parseInt(b);
+			var d = c / a;
+			return d;
+		}
+	}
+};

package/src/plugins/vuetify.js

@@ -0,0 +1,32 @@
+import Vue from 'vue';
+import Vuetify from 'vuetify/lib';
+import colors from 'vuetify/es5/util/colors';
+import es from 'vuetify/es5/locale/es';
+import ca from 'vuetify/es5/locale/ca';
+import en from 'vuetify/es5/locale/en';
+import fr from 'vuetify/es5/locale/fr';
+
+Vue.use(Vuetify);
+
+const opts = {
+	theme: {
+		light: true,
+		themes: {
+			light: {
+				primary: '#199af2',
+				secondary: '#e56208',
+				accent: colors.orange.darken1,
+				error: colors.red.darken1
+			}
+		}
+	},
+	icons: {
+		iconfont: 'fa'
+	},
+	lang: {
+		locales: { en, es, ca, fr },
+		current: 'es'
+	}
+};
+
+export default new Vuetify(opts);

package/src/tests/TestAutocomplete.vue

@@ -0,0 +1,138 @@
+<template>
+	<v-container>
+		<v-flex xs12>
+			<v-card class="pa-4 mt-4">
+				<h2 class="mb-4">Autocomplete simple</h2>
+				<pui-autocomplete :label="label" toplabel :required="required">
+					<v-autocomplete
+						id="autocomplete1"
+						attach="autocomplete1"
+						ref="autocomplete1"
+						class="pui-autocomplete-select--simple"
+						v-model="model1.car"
+						:items="items"
+						:item-text="item => item.name"
+						:required="required"
+						:disabled="disabled"
+						:rules="[value => !!value || 'Campo obligatorio']"
+						:return-object="false"
+						clearable
+					/>
+				</pui-autocomplete>
+				<span>{{ model1.car }}</span>
+				<h2 class="mb-4">Autocomplete multiple con slots</h2>
+				<pui-autocomplete :label="label" toplabel :required="required">
+					<v-autocomplete
+						id="autocomplete2"
+						attach="autocomplete2"
+						ref="autocomplete2"
+						class="pui-autocomplete-select--simple"
+						v-model="model2"
+						:items="items"
+						:item-text="item => item.name"
+						:required="required"
+						:disabled="disabled"
+						:rules="[value => !!value || 'Campo obligatorio']"
+						multiple
+						return-object
+						clearable
+					>
+						<template slot="item" slot-scope="data">
+							<pui-autocomplete-slot-item :data="data" property="name"></pui-autocomplete-slot-item>
+						</template>
+						<template slot="selection" slot-scope="{ selected, parent, item }">
+							<pui-autocomplete-slot-multiple-selection
+								:selected="selected"
+								:parent="parent"
+								:item="item"
+								property="name"
+							></pui-autocomplete-slot-multiple-selection>
+						</template>
+					</v-autocomplete>
+				</pui-autocomplete>
+				<span>{{ model2 }}</span>
+			</v-card>
+		</v-flex>
+	</v-container>
+</template>
+
+<script>
+import PuiAutocomplete from '@/components/Autocomplete/PuiAutocomplete';
+import PuiAutocompleteSlotItem from '@/components/Autocomplete/PuiAutocompleteSlotItem';
+import PuiAutocompleteSlotMultipleSelection from '@/components/Autocomplete/PuiAutocompleteSlotMultipleSelection';
+
+export default {
+	components: {
+		PuiAutocomplete,
+		PuiAutocompleteSlotItem,
+		PuiAutocompleteSlotMultipleSelection
+	},
+	data() {
+		return {
+			required: true,
+			disabled: false,
+			label: 'Car',
+			model1: {
+				car: null
+			},
+			model2: [],
+			items: [
+				{ id: 1, name: 'Ford' },
+				{ id: 2, name: 'Mercedes' },
+				{ id: 3, name: 'BMW' }
+			]
+		};
+	},
+	created() {
+		this.lazyLoadTest();
+	},
+	methods: {
+		lazyLoadTest() {
+			setTimeout(() => {
+				this.model1.car = 2;
+			}, 3000);
+		}
+	}
+	/*created() {
+		this.debounceSearchCars = debounce(() => {
+			this.carsItems = [];
+			this.carsPagination.page = 1;
+			this.fetchCars();
+		}, 700);
+
+		this.fetchCars();
+	},
+	methods: {
+		async fetchCars() {
+			try {
+				this.carsPagination.loading = true;
+				const params = this.carsPagination;
+				const queryFields = clienteQueryFields;
+				const queryText = this.clienteTextSearch;
+				const body = generateCarsPagination(queryText, { params, queryFields });
+				const filter = this.amasFilter;
+
+				// prettier-ignore
+				const { data: { data, totalPages } } = await pui9api.requestFactory.postRequest('/cliente/list', { ...body, filter });
+
+				this.carsItems = [...this.carsItems, ...data];
+				this.carsPagination.totalPages = totalPages;
+			} catch (error) {
+				console.error(error);
+			} finally {
+				this.carsPagination.loading = false;
+			}
+		},
+
+		async loadMoreCars() {
+			const { page, totalPages } = this.carsPagination;
+			if (page >= totalPages) {
+				return;
+			}
+
+			this.carsPagination.page++;
+			this.fetchCars();
+		}
+	}*/
+};
+</script>

package/src/tests/TestCodeEditor.vue

@@ -0,0 +1,48 @@
+<template>
+	<v-container>
+		<v-flex xs12>
+			<v-card class="pa-4 mt-4">
+				<h2 class="mb-4">Code Editor</h2>
+				<pui-code-editor mode="javascript" :label="label" v-model="model1"></pui-code-editor>
+			</v-card>
+			<v-card class="pa-4 mt-4">
+				<h2 class="mb-4">Code Editor in Form</h2>
+
+				<v-form ref="form" v-model="valid" lazy-validation v-if="modelLoaded">
+					<pui-code-editor mode="css" :label="label" v-model="model1" required :validationErrors="formValidationErrors"></pui-code-editor>
+					<v-btn depressed color="secondary" class="elevation-0" @click.native="save(false)">
+						Save
+					</v-btn>
+				</v-form>
+			</v-card>
+		</v-flex>
+	</v-container>
+</template>
+
+<script>
+import PuiCodeEditor from '@/components/PuiCodeEditor';
+
+export default {
+	name: 'TestCodeEditor',
+	components: { PuiCodeEditor },
+	data() {
+		return {
+			label: 'Etiqueta editor de código',
+			model1: 'Este texto se está editando con el componente PuiCodeEditor',
+			valid: true,
+			modelLoaded: true,
+			formValidationErrors: false
+		};
+	},
+	methods: {
+		save() {
+			this.formValidationErrors = false;
+			if (this.$refs.form && this.$refs.form.validate && !this.$refs.form.validate()) {
+				this.formValidationErrors = true;
+				console.log('Hay errores de validación en el formulario');
+				return;
+			}
+		}
+	}
+};
+</script>

package/src/tests/TestField.vue

@@ -0,0 +1,22 @@
+<template>
+	<v-container>
+		<v-card class="pa-4 mt-4">
+			<h2 class="mb-4">Campo etiqueta/valor</h2>
+			<pui-field label="Etiqueta" v-model="model0"></pui-field>
+		</v-card>
+	</v-container>
+</template>
+
+<script>
+import PuiField from '@/components/PuiField';
+
+export default {
+	name: 'TestField',
+	components: { PuiField },
+	data() {
+		return {
+			model0: 'Este es el valor del PuiField'
+		};
+	}
+};
+</script>

package/src/tests/TestFieldSet.vue

@@ -0,0 +1,30 @@
+<template>
+	<v-container>
+		<v-card class="pa-4 mt-4">
+			<h2 class="mb-4">Cuadro de agrupación sin etiqueta</h2>
+			<pui-field-set>
+				{{ content }}
+			</pui-field-set>
+		</v-card>
+		<v-card class="pa-4 mt-4">
+			<h2 class="mb-4">Cuadro de agrupación con etiqueta y sombreado</h2>
+			<pui-field-set title="Etiqueta" highlighted>
+				{{ content }}
+			</pui-field-set>
+		</v-card>
+	</v-container>
+</template>
+
+<script>
+import PuiFieldSet from '@/components/PuiFieldSet';
+
+export default {
+	name: 'TestPuiFieldSet',
+	components: { PuiFieldSet },
+	data() {
+		return {
+			content: 'Aquí va el contenido del fieldset'
+		};
+	}
+};
+</script>

package/src/tests/TestInputCheckbox.vue

@@ -0,0 +1,53 @@
+<template>
+	<v-container>
+		<v-flex xs12>
+			<v-card class="pa-4 mt-4">
+				<h2 class="mb-4">Selectores</h2>
+				<!-- Checkbox simple-->
+				<pui-checkbox label="Checkbox simple" v-model="model60"></pui-checkbox>
+				<!-- Checkbox no seleccionado-->
+				<pui-checkbox label="Checkbox no seleccionado" v-model="model61"></pui-checkbox>
+				<!-- Checkbox obligatorio seleccionado-->
+				<pui-checkbox label="Checkbox obligatorio seleccionado" v-model="model62" required></pui-checkbox>
+				<!-- Checkbox obligatorio seleccionado-->
+				<pui-checkbox label="Checkbox desactivado" v-model="model63" disabled></pui-checkbox>
+				<!-- Checkbox obligatorio seleccionado-->
+				<pui-checkbox label="Checkbox desactivado seleccionado" v-model="model64" disabled></pui-checkbox>
+				<!-- Checkbox devolviendo 1 o 0-->
+				<pui-checkbox label="Checkbox devolviendo 1 ó 0" v-model="model65" true-value="1" false-value="0"></pui-checkbox>
+			</v-card>
+		</v-flex>
+	</v-container>
+</template>
+
+<script>
+import PuiCheckbox from '@/components/PuiCheckbox';
+
+export default {
+	name: 'TestInputCheckbox',
+	components: { PuiCheckbox },
+	data() {
+		return {
+			model60: true,
+			model61: false,
+			model62: false,
+			model63: false,
+			model64: true,
+			model65: true,
+			errorMessage: 'Mensaje de error del input',
+			message:
+				'Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industrys standard dummy text ever since the 1500s.'
+		};
+	},
+	methods: {
+		printModel(modelName, value) {
+			console.log(modelName, value);
+		}
+	},
+	created() {
+		for (let i = 1; i <= 100; i++) {
+			this.$watch(() => this[`model${i}`], this.printModel.bind(this, `Model${i}`));
+		}
+	}
+};
+</script>