pui9-components 2.0.7 → 3.0.0

package/src/index.js

@@ -1,89 +0,0 @@
-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';
-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 = {
-	PuiAutocomplete,
-	PuiCheckbox,
-	PuiCauDialog,
-	PuiCodeEditor,
-	PuiDateField,
-	PuiField,
-	PuiFieldSet,
-	PuiFilter,
-	PuiFileUpload,
-	PuiFileUploadGroup,
-	PuiFilterGroup,
-	PuiFilterRule,
-	PuiFormTooltip,
-	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

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

@@ -1,77 +0,0 @@
-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 {
-					return this.initialValue.toString() !== this.internalModel.toString();
-				} catch (e) {
-					return this.initialValue !== this.internalModel;
-				}
-			}
-		},
-		getLabel() {
-			return this.$props.label;
-		},
-		allProps() {
-			const propsWithoutLabel = { ...this.$props };
-			delete propsWithoutLabel.label;
-			return { ...this.$attrs, ...propsWithoutLabel };
-		},
-		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/PuiSortMixin.js

@@ -1,136 +0,0 @@
-export default {
-	props: {
-		columns: {
-			type: Array
-		},
-		currentRules: {
-			type: Array
-		},
-		modelName: {
-			type: String,
-			required: true
-		}
-	},
-	data() {
-		return {
-			availableColumns: [],
-			height: 50,
-			grouped: false,
-			sortingTypes: [
-				{
-					text: 'puidatatables.ascendent',
-					value: 'asc'
-				},
-				{
-					text: 'puidatatables.descendent',
-					value: 'desc'
-				}
-			],
-			rules: [],
-			colNames: []
-		};
-	},
-	created: function () {
-		this.rules = this.currentRules;
-		for (let n of this.columns) {
-			this.availableColumns.push(n.name);
-			this.colNames.push(n.name);
-		}
-		for (let col of this.currentRules) {
-			this.onRuleNameChanged(col.column);
-		}
-		this.translateSortingTypes();
-	},
-
-	watch: {
-		colNames(val) {
-			var size = 50;
-			if (val.length > 0) {
-				this.height = val.length * size;
-			} else {
-				this.height = size;
-			}
-			if (this.height > 250) {
-				this.height = 280;
-			}
-		}
-	},
-	computed: {
-		showAddBtn() {
-			if (this.columns.length > this.rules.length) {
-				return true;
-			}
-			return false;
-		},
-		getTitleRemove() {
-			return this.$t('puidatatables.removeBtnTitle');
-		},
-		heightPanel() {
-			return this.height + 'px';
-		}
-	},
-	methods: {
-		getAvailableColumns(index) {
-			const availableColumns = this.availableColumns;
-			const columnNameSelected = this.rules[index].column;
-			const columnsAvailableForTheSelect = this.colNames.filter((column) => {
-				return availableColumns.includes(column) || column === columnNameSelected;
-			});
-
-			return columnsAvailableForTheSelect;
-		},
-		removeSelectsFocus() {
-			for (let i = 0, length = this.rules.length; i < length; i++) {
-				this.$refs[`${i}-column`][0].$el.classList.remove('v-input--is-focused');
-				this.$refs[`${i}-sortType`][0].$el.classList.remove('v-input--is-focused');
-			}
-		},
-		removeRule(index) {
-			this.availableColumns.push(this.rules[index].column);
-			this.rules.splice(index, 1);
-			if (this.rules.length === 0) {
-				this.columns
-					.sort((a, b) => (a.title < b.title ? -1 : a.title > b.title ? 1 : 0))
-					.forEach((column) => {
-						this.availableColumns.push(column.removeRule);
-					});
-				this.addRule();
-			}
-		},
-		addRule() {
-			this.rules.push({ column: '', direction: 'asc' });
-		},
-		translateSortingTypes() {
-			for (var i = 0, length = this.sortingTypes.length; i < length; i++) {
-				this.sortingTypes[i].text = this.$t(this.sortingTypes[i].text);
-			}
-		},
-		onRuleNameChanged(value) {
-			//quitamos de las disponibles la nueva columna
-			this.removeColumnFromAvailable(value);
-			//a contiunación añadimos a disponibles la columna que se ha cambiado
-			const rulesColNames = this.rules.map((rule) => {
-				return rule.column;
-			});
-			this.colNames
-				.sort((a, b) => (a.title < b.title ? -1 : a.title > b.title ? 1 : 0))
-				.forEach((column) => {
-					if (rulesColNames.includes(column) === false && this.availableColumns.includes(column) === false) {
-						this.availableColumns.push(column);
-					}
-				});
-		},
-		removeColumnFromAvailable(columnName) {
-			for (let i = 0, length = this.availableColumns.length; i < length; i++) {
-				const column = this.availableColumns[i];
-				if (column === columnName) {
-					this.availableColumns.splice(i, 1);
-					break;
-				}
-			}
-		},
-		setIndex(index) {
-			this.index = index;
-		}
-	}
-};

package/src/mixins/PuiUtilsNumberMixin.js

@@ -1,29 +0,0 @@
-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) {
-			// Limit the number of decimal places to prevent floating point errors
-			// a alguien le pareció bien la idea de poner por defecto 999 y hemos tumbado una máquina de AWS dividiendo Infinity's
-
-			if (decimals > 20) {		
-				decimals = 20;
-			}
-
-			let pow = Math.pow(10, decimals);
-			let multiplied = number * pow;
-			let rounded = Math.round(multiplied);
-			let truncated = rounded / pow; 
-			
-			return truncated;
-
-			// return Math.trunc(number * Math.pow(10, decimals)) / Math.pow(10, decimals);
-		}
-	}
-};

package/src/plugins/vuetify.js

@@ -1,33 +0,0 @@
-import Vue from 'vue';
-import Vuetify from 'vuetify'
-import 'vuetify/dist/vuetify.min.css'
-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

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

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

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

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

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