innoboxrr-vue-datatable 2.2.0 → 3.0.0

package/src/components/IconLinkComponent.vue

@@ -1,81 +0,0 @@
-<template>
-
-	<a
-		class="block px-4 py-2 dark:hover:text-white dark:text-slate-400"
-		:href="link"
-		:target="target">
-
-		<Icon
-			class="fe-mr-sm"
-			:icon="resolved"
-			:width="size"
-			:height="size"
-			aria-hidden="true" />
-
-		<span :class="textClass">{{ text }}</span>
-
-	</a>
-
-</template>
-
-<script setup>
-
-	/**
-	 * Antes esto pintaba `<span class="uk-icon" uk-icon="icon: fa-plus">` y
-	 * llamaba a `globalThis.UIkit.update()` al montar. Para que ese icono
-	 * apareciera hacian falta tres dependencias que ningun package.json
-	 * declaraba: uikit, fontawesome y uikit-custom-icons, que hacia de puente
-	 * entre las dos.
-	 *
-	 * Ahora el nombre se resuelve contra el mapa de innoboxrr-form-core, que
-	 * es el mismo que usa la rama React.
-	 */
-
-	import { computed, onScopeDispose, ref } from 'vue'
-	import { Icon } from '@iconify/vue'
-	import { iconFor, onIconChange } from 'innoboxrr-form-core'
-
-	const props = defineProps({
-		link: {
-			type: String,
-			default: '#'
-		},
-		text: {
-			type: String,
-			required: true
-		},
-		icon: {
-			type: String,
-			required: true
-		},
-		ratio: {
-			type: Number,
-			required: false,
-			default: 1
-		},
-		textClass: {
-			type: String,
-			default: ""
-		},
-		target: {
-			type: String,
-			default: "_self"
-		}
-	})
-
-	// Un cambio de mapa en caliente repinta lo ya montado.
-	const version = ref(0)
-
-	onScopeDispose(onIconChange(() => version.value++))
-
-	const resolved = computed(() => {
-		version.value
-
-		return iconFor(props.icon)
-	})
-
-	// `ratio` era el multiplicador de UIkit sobre 16px. Se conserva para no
-	// romper a quien ya lo pasa.
-	const size = computed(() => props.ratio * 16)
-
-</script>

package/src/components/IconRouteComponent.vue

@@ -1,84 +0,0 @@
-<template>
-
-	<router-link
-		:to="pathObject"
-		class="block px-4 py-2 dark:hover:text-white dark:text-slate-400">
-
-		<Icon
-			class="fe-mr-sm"
-			:icon="resolved"
-			:width="size"
-			:height="size"
-			aria-hidden="true" />
-
-		<span :class="textClass">{{ text }}</span>
-
-	</router-link>
-
-</template>
-
-<script setup>
-
-	import { computed, onScopeDispose, ref } from 'vue'
-	import { Icon } from '@iconify/vue'
-	import { iconFor, onIconChange } from 'innoboxrr-form-core'
-
-	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,
-	}))
-
-	// Un cambio de mapa en caliente repinta lo ya montado.
-	const version = ref(0)
-
-	onScopeDispose(onIconChange(() => version.value++))
-
-	const resolved = computed(() => {
-		version.value
-
-		return iconFor(props.icon)
-	})
-
-	// `ratio` era el multiplicador de UIkit sobre 16px. Se conserva para no
-	// romper a quien ya lo pasa.
-	const size = computed(() => props.ratio * 16)
-
-</script>

package/src/components/NavDropdownComponent.vue

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