innoboxrr-vue-datatable 1.3.3 → 2.0.0

package/src/components/IconRouteComponent.vue

@@ -1,85 +1,71 @@
-<template>
-	
-	<router-link 
-		:to="pathObject"
-		class="block px-4 py-2 dark:hover:text-white dark:text-slate-400">
-							
-		<span 
-			class="uk-margin-small-right uk-icon" 
-			:uk-icon="iconAttr"
-			:style="iconStyle"></span>
-
-		<span :class="textClass">{{ text }}</span>
-
-	</router-link>
-
-</template>
-
-
-<script>
-	
-	export default {
-
-		props: {
-			name: {
-				type: String,
-				required: true
-			},
-			params: {
-				type: Object,
-				default: {}
-			},
-			query: {
-				type: Object,
-				default: {}
-			},
-			text: {
-				type: String,
-				required: true
-			},
-			icon: {
-				type: String,
-				required: true
-			},
-			ratio: {
-				type: Number,
-				required: false,
-				default: 1
-			},
-			textClass: {
-				type: String,
-				default: ""
-			},
-		},	
-
-		data() {
-			return {
-				pathObject: {
-					name: this.name,
-					params: this.params,
-					query: this.query
-				}
-			}
-		},
-
-		computed: {
-
-			iconAttr() {
-
-				return `icon: ${this.icon}; ratio: ${this.ratio};`;
-
-			},
-
-			iconStyle() {
-
-				return {
-					fontSize: (this.ratio * 16) + 'px'
-				}
-
-			}
-
-		}
-
-	}
-
-</script>
+<template>
+
+	<router-link
+		:to="pathObject"
+		class="block px-4 py-2 dark:hover:text-white dark:text-slate-400">
+
+		<span
+			class="fe-mr-sm uk-icon"
+			:uk-icon="iconAttr"
+			:style="iconStyle"></span>
+
+		<span :class="textClass">{{ text }}</span>
+
+	</router-link>
+
+</template>
+
+<script setup>
+
+	import { computed } from 'vue'
+
+	const props = defineProps({
+		name: {
+			type: String,
+			required: true
+		},
+		// Vue 3 exige factoria en los defaults de objeto: un literal comparte
+		// la misma instancia entre todas las filas de la tabla.
+		params: {
+			type: Object,
+			default: () => ({})
+		},
+		query: {
+			type: Object,
+			default: () => ({})
+		},
+		text: {
+			type: String,
+			required: true
+		},
+		icon: {
+			type: String,
+			required: true
+		},
+		ratio: {
+			type: Number,
+			required: false,
+			default: 1
+		},
+		textClass: {
+			type: String,
+			default: ""
+		},
+	})
+
+	// Estaba en data(), asi que se calculaba una sola vez al crear el
+	// componente: al reutilizar la fila para otro registro el enlace seguia
+	// apuntando al anterior.
+	const pathObject = computed(() => ({
+		name: props.name,
+		params: props.params,
+		query: props.query,
+	}))
+
+	const iconAttr = computed(() => `icon: ${props.icon}; ratio: ${props.ratio};`)
+
+	const iconStyle = computed(() => ({
+		fontSize: (props.ratio * 16) + 'px'
+	}))
+
+</script>

package/src/components/NavDropdownComponent.vue

@@ -1,62 +1,55 @@
-<template>
-	
-	<div 
-		:uk-dropdown="options"
-		class="uk-padding-remove z-10 hidden text-base list-none bg-white divide-y divide-gray-100 rounded-lg shadow w-44 dark:bg-slate-800 p-2">
-
-	    <ul class="uk-nav uk-dropdown-nav">
-
-	        <slot></slot>
-
-	    </ul>
-
-	</div>
-
-</template>
-
-<script>
-	
-	export default {
-
-		props: {
-			pos: {
-				type: String,
-				default: "bottom-left"
-			},
-			mode: {
-				type: String,
-				default: "click"
-			},
-			offset: {
-				type: Number,
-				default: 0
-			},
-			animation: {
-				type: String,
-				default: "uk-animation-slide-top-small"
-			},
-			duration: {
-				type: Number,
-				default: 500
-			}
-		},
-
-		computed: {
-
-			options () {
-
-				return `
-					pos: ${this.pos}; 
-					mode: ${this.mode};
-					offset: ${this.offset};
-					animation: ${this.animation};
-					duration: ${this.duration};
-				`;
-
-			}
-
-		}
-
-	}
-
-</script>
+<template>
+
+	<div
+		:uk-dropdown="options"
+		class="fe-p-0 z-10 hidden text-base list-none bg-white divide-y divide-gray-100 rounded-lg shadow w-44 dark:bg-slate-800 p-2">
+
+	    <ul class="fe-menu">
+
+	        <slot></slot>
+
+	    </ul>
+
+	</div>
+
+</template>
+
+<script setup>
+
+	import { computed } from 'vue'
+
+	const props = defineProps({
+		pos: {
+			type: String,
+			default: "bottom-left"
+		},
+		mode: {
+			type: String,
+			default: "click"
+		},
+		offset: {
+			type: Number,
+			default: 0
+		},
+		animation: {
+			type: String,
+			// Es el nombre de una animacion de UIkit, no una clase nuestra: el
+			// dropdown sigue siendo de UIkit hasta que lo sustituya un componente
+			// headless propio.
+			default: "uk-animation-slide-top-small"
+		},
+		duration: {
+			type: Number,
+			default: 500
+		}
+	})
+
+	const options = computed(() => `
+					pos: ${props.pos};
+					mode: ${props.mode};
+					offset: ${props.offset};
+					animation: ${props.animation};
+					duration: ${props.duration};
+				`)
+
+</script>

package/src/components/PaginationComponent.vue

@@ -1,110 +1,79 @@
-<template>
-	
-	<ul v-if="length > 3" class="uk-pagination uk-flex-center" uk-margin>
-	
-	    <li v-if="firstLink != null">
-
-	    	<a href="#" @click="$emit('go', firstLink)">
-
-	    		<span uk-pagination-previous></span>
-
-	    	</a>
-
-	    </li>
-	
-	    <li 
-	    	v-for="link in middleLinks" 
-	    	:key="link.label"
-	    	:class="{
-	    		'uk-disabled': link.url == null,
-	    		'uk-active': link.active,
-	    	}">
-
-	    	<a href="#" @click="$emit('go', link.url)">
-
-	    		{{ link.label }}
-
-	    	</a>
-
-	    </li>
-	
-	    <li v-if="lastLink != null">
-
-	    	<a href="#" @click="$emit('go', lastLink)">
-
-	    		<span uk-pagination-next></span>
-
-	    	</a>
-
-	    </li>
-	
-	</ul>
-
-</template>
-
-<script>
-	
-	export default {
-
-		props: {
-			links: {
-				type: Array,
-				required: true,
-			}
-		},
-
-		emits: ['go'],
-
-		computed: {
-
-			length() {
-
-				return this.links.length;
-
-			},
-
-			lastLinkIndex() {
-
-				return this.length - 1;
-
-			},
-
-			firstLink() {
-
-				return (this.length > 0) ? this.links[0].url : null;
-
-			},
-
-			lastLink() {
-
-				return (this.length > 0 && this.links[this.lastLinkIndex] != undefined) ? 
-					this.links[this.lastLinkIndex].url : 
-					null;
-
-			},
-
-			middleLinks() {
-
-				let auxLinks = this.links;
-
-				let middleLinks = auxLinks.slice(1, -1);
-
-				return middleLinks;
-
-			},
-
-		}
-
-	}
-
-</script>
-
-<style scoped>
-	
-	.uk-pagination > .uk-active > * {
-	    color: #666;
-	    font-weight: 600;
-	    border-bottom: 3px solid var(--primary-color);
-	}
-
-</style>
+<template>
+
+	<ul v-if="length > 3" class="fe-pagination fe-justify-center" fe-mb>
+
+	    <li v-if="firstLink != null">
+
+	    	<a href="#" @click="emit('go', firstLink)">
+
+	    		<span fe-page-prev></span>
+
+	    	</a>
+
+	    </li>
+
+	    <li
+	    	v-for="link in middleLinks"
+	    	:key="link.label"
+	    	:class="{ 'fe-disabled': link.url == null, 'fe-active': link.active, }">
+
+	    	<a href="#" @click="emit('go', link.url)">
+
+	    		{{ link.label }}
+
+	    	</a>
+
+	    </li>
+
+	    <li v-if="lastLink != null">
+
+	    	<a href="#" @click="emit('go', lastLink)">
+
+	    		<span fe-page-next></span>
+
+	    	</a>
+
+	    </li>
+
+	</ul>
+
+</template>
+
+<script setup>
+
+	import { computed } from 'vue'
+
+	const props = defineProps({
+		links: {
+			type: Array,
+			required: true,
+		}
+	})
+
+	const emit = defineEmits(['go'])
+
+	const length = computed(() => props.links.length)
+
+	const firstLink = computed(() => length.value > 0 ? props.links[0].url : null)
+
+	const lastLink = computed(() => {
+
+		const last = props.links[length.value - 1]
+
+		return length.value > 0 && last !== undefined ? last.url : null
+
+	})
+
+	const middleLinks = computed(() => props.links.slice(1, -1))
+
+</script>
+
+<style scoped>
+
+	.fe-pagination > .fe-active > * {
+	    color: #666;
+	    font-weight: 600;
+	    border-bottom: 3px solid var(--primary-color);
+	}
+
+</style>