pui9-components 2.0.8 → 3.0.1

package/src/components/PuiFormFooter.vue

@@ -1,48 +0,0 @@
-<template>
-	<div v-if="!isMobile" class="pui-formFooter pa-1 pl-3 pr-3 elevation-2" :class="getComp" ref="puiFormFooter">
-		<slot></slot>
-	</div>
-	<div v-else class="pa-1 pl-3 pr-3 elevation-2" :class="getComp">
-		<slot></slot>
-	</div>
-</template>
-
-<script>
-export default {
-	name: 'PuiFormFooter',
-	computed: {
-		isMobile() { return this.$store.getters.isMobile; },
-		menuConf() { return this.$store.getters.getMenuConf; },
-		getComp() {
-			return {
-				'pui-formFooter--menu-opened': this.menuConf.expandMenu,
-				'pui-formFooter--menu-secondary-opened': this.menuConf.secondMenuShowed,
-				'pui-formFooter--menu-hidden': this.menuConf.hideMenu,
-			};
-		},
-	},
-	methods: {
-		checkFooterIsOnScreen() {
-			const intervalTimeCheck = 50;
-			let timeWatching = 0;
-			var watchFooterInterval = setInterval(() => {
-				const isFooterOnScreen = this.$refs?.puiFormFooter?.getBoundingClientRect().y != 0;
-				timeWatching += intervalTimeCheck;
-				if (timeWatching > 1000 || this.$store.state.form.showFooter != isFooterOnScreen) {
-					this.$store.dispatch('puiFormShowFooter', isFooterOnScreen || false);
-					clearInterval(watchFooterInterval);
-				}
-			}, intervalTimeCheck);
-		}
-	},
-	mounted() {
-		this.$store.dispatch('puiFormShowFooter', true);
-	},
-	updated() {
-		this.checkFooterIsOnScreen();
-	},
-	destroyed() {
-		this.$store.dispatch('puiFormShowFooter', false);
-	}
-};
-</script>

package/src/components/PuiFormFooterBtns.vue

@@ -1,118 +0,0 @@
-<template>
-	<v-layout v-if="!isMobile" justify-space-between class="pui-form-footer-btns">
-		<v-btn text outlined @click.native="back()">{{ $t('form.cancel') }}</v-btn>
-
-		<div>
-			<slot></slot>
-			<v-btn
-				v-if="!formDisabled && enableSaveAndNew"
-				color="secondary"
-				class="pui-form-footer-btns__desktop"
-				@click.native="saveAndNew()"
-				:disabled="saveDisabled"
-				>{{ $t('form.save&new') }}</v-btn
-			>
-			<v-btn
-				v-if="!formDisabled && enableSaveAndUpdate"
-				color="secondary"
-				class="pui-form-footer-btns__desktop"
-				@click.native="saveAndUpdate()"
-				:disabled="saveDisabled"
-				>{{ $t('form.save&update') }}</v-btn
-			>
-			<v-btn v-if="!formDisabled" color="secondary" class="pui-form-footer-btns__desktop" @click.native="save(false)" :disabled="saveDisabled">
-				{{ enableSaveAndNew || enableSaveAndUpdate ? $t('form.save&back') : $t('form.save') }}
-			</v-btn>
-		</div>
-	</v-layout>
-	<v-speed-dial
-		v-else-if="!formDisabled && (enableSaveAndNew || enableSaveAndUpdate)"
-		v-model="fab"
-		:top="top"
-		:bottom="bottom"
-		:right="right"
-		:left="left"
-		:direction="direction"
-		:transition="transition"
-		class="pui-form-footer-btns"
-		fixed
-	>
-		<template v-slot:activator>
-			<v-btn v-model="fab" fab dark class="white--text primary">
-				<v-icon v-if="fab">far fa-times-circle</v-icon>
-				<v-icon v-else>far fa-save</v-icon>
-			</v-btn>
-		</template>
-		<v-btn fab dark small class="white--text primary" @click.native="save(false)" :disabled="saveDisabled">
-			<v-icon>far fa-save</v-icon>
-		</v-btn>
-		<v-btn fab dark small icon class="white--text secondary" @click.native="saveAndUpdate()" :disabled="saveDisabled">
-			<v-icon>far fa-edit</v-icon>
-		</v-btn>
-		<v-btn fab dark small icon class="white--text secondary" @click.native="saveAndNew()" :disabled="saveDisabled">
-			<v-icon>far fa-plus-circle</v-icon>
-		</v-btn>
-		<slot></slot>
-	</v-speed-dial>
-	<v-btn v-else-if="!formDisabled" fab dark bottom right fixed class="white--text primary" @click.native="save(false)" :disabled="saveDisabled">
-		<v-icon>far fa-save</v-icon>
-	</v-btn>
-</template>
-
-<script>
-export default {
-	name: 'PuiFormFooterBtns',
-	data() {
-		return {
-			isMobile: false,
-			fab: false,
-			top: false,
-			bottom: true,
-			left: false,
-			right: true,
-			direction: 'top',
-			transition: 'slide-y-reverse-transition'
-		};
-	},
-	props: {
-		formDisabled: {
-			type: Boolean,
-			required: true
-		},
-		saveDisabled: {
-			type: Boolean,
-			default: false,
-			required: false
-		},
-		saveAndNew: {
-			type: Function,
-			default: null,
-			required: false
-		},
-		saveAndUpdate: {
-			type: Function,
-			default: null,
-			required: false
-		},
-		save: {
-			type: Function,
-			required: true
-		},
-		back: {
-			type: Function,
-			required: true
-		}
-	},
-	computed: {
-		enableSaveAndNew() {
-			return this.$store.state.form.showSaveAndNew && this.saveAndNew;
-		},
-		enableSaveAndUpdate() {
-			return this.$store.state.form.showSaveAndUpdate && this.saveAndUpdate;
-		}
-	},
-	created() {
-		this.isMobile = this.$store.getters.isMobile;
-	}
-};
-</script>

package/src/components/PuiFormHeader.vue

@@ -1,25 +0,0 @@
-<template>
-	<v-layout v-if="showHeader" class="pui-form-header mt-1 ml-3 mr-3 mb-3">
-		<v-flex xs12 class="pa-2">
-			<slot></slot>
-		</v-flex>
-	</v-layout>
-</template>
-
-<script>
-export default {
-	name: 'PuiFormHeader',
-	data: () => ({
-		isMobile: false
-	}),
-	props: {
-		showHeader: {
-			type: Boolean,
-			default: false
-		}
-	},
-	created() {
-		this.isMobile = this.$store.getters.isMobile;
-	}
-};
-</script>

package/src/components/PuiFormLoading.vue

@@ -1,14 +0,0 @@
-<template>
-	<v-container>
-		<v-row align="center" justify="center">
-			<v-progress-circular indeterminate color="primary"></v-progress-circular>
-			<span class="ml-3">{{ $t('form.loading') }}</span>
-		</v-row>
-	</v-container>
-</template>
-
-<script>
-export default {
-	name: 'PuiFormLoading'
-};
-</script>

package/src/components/PuiFormMiniAudit.vue

@@ -1,53 +0,0 @@
-<template>
-	<v-layout wrap class="puiminiaudit mt-2 mb-4">
-		<v-flex xs12>
-			<label>{{ $t('form.miniaudit.created') }}</label>
-			<label>{{ returnData(internalValue.usralta) }}{{ $t('form.miniaudit.at') }}</label>
-			<label>{{ returnData(internalValue.fecalta) }}</label>
-		</v-flex>
-		<v-flex xs12>
-			<label>{{ $t('form.miniaudit.modified') }}</label>
-			<label>{{ returnData(internalValue.usrmodif) }}{{ $t('form.miniaudit.at') }}</label>
-			<label>{{ returnData(internalValue.fecmodif) }}</label>
-		</v-flex>
-	</v-layout>
-</template>
-
-<script>
-import dateTimeUtils from '../dateTimeUtils';
-
-export default {
-	name: 'PuiFormMiniAudit',
-	props: {
-		model: {
-			type: Object,
-			required: true
-		}
-	},
-	data() {
-		return {
-			internalValue: {}
-		};
-	},
-	created() {
-		this.internalValue = Object.assign({}, this.model);
-		const dateFormat = this.$store.getters.dateFormat;
-		const timeFormat = this.$store.getters.timeFormat;
-
-		if (this.model.fecmodif !== null && this.model.fecmodif !== undefined) {
-			this.internalValue.fecmodif = dateTimeUtils.getLocalFormattedDate(this.model.fecmodif, `${dateFormat} ${timeFormat}`);
-		}
-		if (this.model.fecalta !== null && this.model.fecalta !== undefined) {
-			this.internalValue.fecalta = dateTimeUtils.getLocalFormattedDate(this.model.fecalta, `${dateFormat} ${timeFormat}`);
-		}
-	},
-	methods: {
-		returnData(value) {
-			if (!value) {
-				return '#####';
-			}
-			return value;
-		}
-	}
-};
-</script>

package/src/components/PuiFormTooltip.vue

@@ -1,50 +0,0 @@
-<template>
-	<v-tooltip right color="primary" v-if="showTooltip">
-		<template v-slot:activator="{ on }">
-			<v-icon color="secondary" class="info-tooltip pl-1" size="14" v-on="on">{{ getIcon }}</v-icon>
-		</template>
-		<span>
-			<span v-if="this.tooltipDescription" v-html="this.tooltipDescription"></span>
-			<ul>
-				<li v-for="(message, index) in this.tooltipMessages" :key="index">{{ message }}</li>
-			</ul>
-		</span>
-	</v-tooltip>
-</template>
-
-<script>
-export default {
-	name: 'PuiFormTooltip',
-	data: () => ({
-        tooltipMessages: []
-    }),
-	props: {
-		tooltipDescription: {
-			type: String,
-			required: false,
-			default: null
-		},
-		tooltipIcon: {
-			type: String,
-			required: false,
-			default: 'fas fa-info-circle info-tooltip'
-		}
-	},
-	computed: {
-        showTooltip() {
-            return (this.tooltipDescription || this.tooltipMessages.length > 0);
-        },
-		getIcon() {
-			return this.tooltipIcon ? this.tooltipIcon : this.tooltipIcon.default;
-		}
-    },
-	methods: {
-        pushMessage(text) {
-            this.tooltipMessages.push(text);
-        },
-		clearMessages() {
-			this.tooltipMessages = [];
-		}
-    },
-};
-</script>

package/src/components/PuiMasterDetail.vue

@@ -1,103 +0,0 @@
-<template>
-	<div class="pui-masterdetail">
-		<component
-			:is="component"
-			v-if="component"
-			:parentModelName="parentModelName"
-			:parentModel="parentModel"
-			:parentPk="parentPk"
-			:parentPkChildFk="parentPkChildFk"
-			:readOnly="formDisabled"
-			:modalDialog="modalDialog"
-			:masterDetail="masterDetail"
-			:navigableDetail="navigableDetail"
-			:showCreateBtn="showCreateBtn"
-			:showDeleteBtn="showDeleteBtn"
-			:showFilterListBtn="showFilterListBtn"
-			:showMasterDetailFilterListBtn="showMasterDetailFilterListBtn"
-			:showMasterDetailFilterBtn="showMasterDetailFilterBtn"
-			:showMasterDetailSortBtn="showMasterDetailSortBtn"
-			:showMasterDetailConfBtn="showMasterDetailConfBtn"
-			
-		/>
-		<br />
-	</div>
-</template>
-
-<script>
-export default {
-	name: 'PuiMasterDetail',
-	data() {
-		return {
-			component: null,
-			masterDetail: true
-		};
-	},
-	props: {
-		componentName: {
-			type: String,
-			required: true
-		},
-		parentModelName: {
-			type: String,
-			required: true
-		},
-		parentModel: {
-			type: Object
-		},
-		parentPk: {
-			type: String,
-			required: true
-		},
-		parentPkChildFk: {
-			type: Object,
-			required: false
-		},
-		formDisabled: {
-			type: Boolean,
-			default: false,
-			required: false
-		},
-		modalDialog: {
-			type: Boolean,
-			default: false
-		},
-		// Manual Grid Settings
-		navigableDetail: {
-			type: Boolean,
-			default: true
-		},
-		showCreateBtn: {
-			type: Boolean,
-			default: true
-		},
-		showDeleteBtn: {
-			type: Boolean,
-			default: true
-		},
-		showFilterListBtn: {
-			type: Boolean,
-			default: false
-		},
-		showMasterDetailFilterListBtn: {
-			type: Boolean,
-			default: false
-		},
-		showMasterDetailFilterBtn: {
-			type: Boolean,
-			default: false
-		},
-		showMasterDetailSortBtn: {
-			type: Boolean,
-			default: false
-		},
-		showMasterDetailConfBtn: {
-			type: Boolean,
-			default: false
-		}
-	},
-	mounted() {
-		this.component = this.componentName;
-	}
-};
-</script>

package/src/components/PuiModalDialog.vue

@@ -1,91 +0,0 @@
-<template>
-	<v-layout wrap>
-		<v-flex xs10 md8 lg6 xl4>
-			<div class="text-center">
-				<v-dialog :id="`${dialogName}-modal-container`" persistent eager v-model="showDialog" :width="widthDialog">
-					<v-card class="pa-2" :height="heightDialog">
-						<v-card-title class="pl-3 headline lighten-2" primary-title>{{ titleText }}</v-card-title>
-						<v-card-text class="pl-3" v-if="messageText">{{ messageText }}</v-card-text>
-						<slot name="message"></slot>
-						<v-card-actions ref="actions">
-							<v-spacer></v-spacer>
-							<slot name="additionalBtns"></slot>
-							<v-btn
-								v-if="cancelText"
-								:id="`${dialogName}-btn-cancel`"
-								depressed
-								@click="
-									showDialog = false;
-									publishCancel();
-								"
-								>{{ cancelText }}</v-btn
-							>
-							<v-btn :id="`${dialogName}-btn-ok`" color="primary" depressed @click="publishOk()" :disabled="disableOk">{{
-								okText
-							}}</v-btn>
-						</v-card-actions>
-					</v-card>
-				</v-dialog>
-			</div>
-		</v-flex>
-	</v-layout>
-</template>
-
-<script>
-export default {
-	name: 'PuiModalDialog',
-	props: {
-		titleText: {
-			type: String,
-			required: true
-		},
-		messageText: {
-			type: String,
-			required: true
-		},
-		okText: {
-			type: String,
-			required: true
-		},
-		cancelText: {
-			type: String
-		},
-		dialogName: {
-			type: String,
-			required: true
-		},
-		disableOk: {
-			type: Boolean,
-			default: false
-		},
-		widthDialog: {
-			type: Number,
-			default: 500
-		},
-		heightDialog: {
-			type: Number
-		},
-		onShow: {
-			type: Function,
-			default: null
-		}
-	},
-	data() {
-		return {
-			disabled: false,
-			showDialog: true
-		};
-	},
-	mounted() {
-		this.onShow && this.onShow();
-	},
-	methods: {
-		publishOk() {
-			this.$puiEvents.$emit(`pui-modalDialog-${this.dialogName}-ok`);
-		},
-		publishCancel() {
-			this.$puiEvents.$emit(`pui-modalDialog-${this.dialogName}-cancel`);
-		}
-	}
-};
-</script>