innoboxrr-vue-datatable 2.3.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,118 +0,0 @@
-<template>
-
-	<div
-		:id="id"
-		ref="panel"
-		popover
-		:class="classFor('menu')"
-		@beforetoggle="onBeforeToggle">
-
-		<ul class="fe-menu-list">
-
-			<slot></slot>
-
-		</ul>
-
-	</div>
-
-</template>
-
-<script setup>
-
-	/**
-	 * El menu de acciones de una fila.
-	 *
-	 * Antes lo movia `uk-dropdown`, que ademas de la clase traia el JavaScript
-	 * de UIkit: abrir, cerrar al pulsar fuera, cerrar con Escape, capa
-	 * superior y posicionamiento, todo dentro de un framework de 12 MB que
-	 * ningun package.json declaraba.
-	 *
-	 * La mitad de eso ya lo hace el navegador. La **Popover API** —el atributo
-	 * `popover` y el `popovertarget` del boton— aporta de fabrica la capa
-	 * superior, el cierre al pulsar fuera y el cierre con Escape, sin una
-	 * linea de JavaScript. Lo unico que falta es colocarlo, y de eso se ocupa
-	 * Floating UI, que son unos 6 kB y es la pieza que usan por debajo Reka
-	 * UI, Radix y el propio Flowbite.
-	 *
-	 * El boton que lo abre solo necesita `popovertarget` con este mismo id:
-	 *
-	 *     <button :popovertarget="`dropdown_${row.id}`">…</button>
-	 *     <NavDropdownComponent :id="`dropdown_${row.id}`" pos="left" />
-	 */
-
-	import { computed, ref } from 'vue'
-	import { autoUpdate, computePosition, flip, offset, shift } from '@floating-ui/dom'
-	import { classFor } from 'innoboxrr-form-core'
-
-	const props = defineProps({
-		id: {
-			type: String,
-			required: true,
-		},
-		// Se conservan los nombres que usaba UIkit para no romper a quien ya
-		// los pasa; `bottom-left` y compania se traducen a los de Floating UI.
-		pos: {
-			type: String,
-			default: 'bottom-left',
-		},
-		offset: {
-			type: Number,
-			default: 4,
-		},
-	})
-
-	const panel = ref(null)
-
-	/** Deja de seguir al disparador cuando el menu se cierra. */
-	let stopFollowing = null
-
-	const placement = computed(() => {
-		const [side, align] = props.pos.split('-')
-
-		if (! align) {
-			return side
-		}
-
-		// UIkit dice `bottom-left` para «debajo, alineado a la izquierda»;
-		// Floating UI lo llama `bottom-start`.
-		return `${side}-${align === 'left' ? 'start' : 'end'}`
-	})
-
-	const onBeforeToggle = (event) => {
-		if (event.newState !== 'open') {
-			stopFollowing?.()
-			stopFollowing = null
-
-			return
-		}
-
-		// El boton es quien apunta a este panel, asi que se encuentra por el
-		// atributo y no hace falta que nadie lo pase como prop.
-		const trigger = document.querySelector(`[popovertarget="${props.id}"]`)
-
-		if (! trigger || ! panel.value) {
-			return
-		}
-
-		// autoUpdate recoloca al hacer scroll o redimensionar: un menu abierto
-		// que se queda flotando donde estaba es peor que uno mal colocado.
-		stopFollowing = autoUpdate(trigger, panel.value, () => {
-			computePosition(trigger, panel.value, {
-				placement: placement.value,
-				middleware: [
-					offset(props.offset),
-					// Si no cabe abajo, se va arriba; si se sale por un lado,
-					// se desplaza para caber.
-					flip(),
-					shift({ padding: 8 }),
-				],
-			}).then(({ x, y }) => {
-				Object.assign(panel.value.style, {
-					left: `${x}px`,
-					top: `${y}px`,
-				})
-			})
-		})
-	}
-
-</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>