innoboxrr-vue-datatable 2.2.0 → 2.3.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "innoboxrr-vue-datatable",
-  "version": "2.2.0",
+  "version": "2.3.0",
   "description": "Datatable para vue3",
   "main": "index.js",
   "scripts": {
@@ -40,11 +40,12 @@
     "*.vue"
   ],
   "peerDependencies": {
-    "innoboxrr-form-core": "^2.2.0",
+    "innoboxrr-form-core": "^2.3.0",
     "vue": "^3.5.0",
     "vue-router": "^4.5.0"
   },
   "dependencies": {
+    "@floating-ui/dom": "^1.8.0",
     "@iconify/vue": "^5.0.0",
     "axios": "^1.7.0"
   },

package/src/DataTable.vue

@@ -59,9 +59,10 @@
 								<button
 						    		type="button"
 						    		class="fe-text-right pointer"
-						    		uk-toggle="target: .filter-form; animation: uk-animation-scale-up;"
 						    		data-tooltip="Buscar"
-						    		aria-label="Buscar">
+						    		aria-label="Buscar"
+						    		:aria-expanded="filtersOpen"
+						    		@click="filtersOpen = ! filtersOpen">
 									<svg class="w-6 h-6 text-slate-800 dark:text-white" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 20 18">
 										<path d="M18.85 1.1A1.99 1.99 0 0 0 17.063 0H2.937a2 2 0 0 0-1.566 3.242L6.99 9.868 7 14a1 1 0 0 0 .4.8l4 3A1 1 0 0 0 13 17l.01-7.134 5.66-6.676a1.99 1.99 0 0 0 .18-2.09Z"/>
 									</svg>
@@ -74,7 +75,7 @@
 			<div
 				v-if="hasFilter"
 				class="filter-form fe-card fe-card-body fe-pt-0"
-				hidden>
+				:hidden="! filtersOpen">
 				<slot name="filterForm"></slot>
 			</div>
 		</div>
@@ -183,6 +184,11 @@
 	 * Se leia de la global `csrf_token`, que la aplicacion anfitriona tenia
 	 * que definir en window: el componente no se podia montar fuera de ella.
 	 */
+	// Abrir un panel es estado de componente, no una instruccion al DOM. Antes
+	// lo hacia uk-toggle buscando `.filter-form` por selector, que es como la
+	// rama Vue y la de React acabaron comportandose distinto.
+	const filtersOpen = ref(false)
+
 	const csrfToken = () => globalThis.csrf_token
 		?? document.querySelector('meta[name="csrf-token"]')?.getAttribute('content')
 		?? ''
@@ -392,14 +398,9 @@
 
 	}
 
+	// Un popover se cierra solo: no hace falta preguntarle nada a nadie.
 	const closeDropdown = (event) => {
-
-		const dropdown = event.target.closest('.uk-dropdown')
-
-		if (dropdown) {
-			globalThis.UIkit?.dropdown(dropdown)?.hide(false)
-		}
-
+		event.target.closest('[popover]')?.hidePopover()
 	}
 
 	watch(() => props.formFilters, () => {

package/src/components/DataTableComponent.vue

@@ -46,8 +46,10 @@
 		            <td v-if="actions" class="fe-text-right">
 		            	<button
 		            		class="text-white bg-blue-700 hover:bg-blue-800 focus:ring-4 focus:ring-blue-300 font-medium rounded-lg text-sm px-2 py-2 dark:bg-blue-600 dark:hover:bg-blue-700 focus:outline-none dark:focus:ring-blue-800"
+		            		:popovertarget="`dropdown_${body.id}`"
+		            		:aria-label="'Actions'"
 		            		@click="emit('actionButtonClicked', body.actions)">
-							<i class="fas fa-cogs"></i>
+							<Icon :icon="iconFor('actions')" aria-hidden="true" />
 						</button>
 						<NavDropdownComponent :id="`dropdown_${body.id}`" pos="left">
 							<li
@@ -98,6 +100,8 @@
 <script setup>
 
 	import { computed } from 'vue'
+	import { Icon } from '@iconify/vue'
+	import { iconFor } from 'innoboxrr-form-core'
 
 	import NavDropdownComponent from './NavDropdownComponent.vue'
 	import IconRouteComponent from './IconRouteComponent.vue'
@@ -162,15 +166,9 @@
 
 	}
 
+	// Un popover se cierra solo: no hace falta preguntarle nada a nadie.
 	const closeDropdown = (event) => {
-
-		const dropdown = event.target.closest('.uk-dropdown')
-
-		// UIkit lo aporta la aplicacion anfitriona.
-		if (dropdown) {
-			globalThis.UIkit?.dropdown(dropdown)?.hide(false)
-		}
-
+		event.target.closest('[popover]')?.hidePopover()
 	}
 
 </script>

package/src/components/NavDropdownComponent.vue

@@ -1,14 +1,17 @@
 <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">
+		:id="id"
+		ref="panel"
+		popover
+		:class="classFor('menu')"
+		@beforetoggle="onBeforeToggle">
 
-	    <ul class="fe-menu">
+		<ul class="fe-menu-list">
 
-	        <slot></slot>
+			<slot></slot>
 
-	    </ul>
+		</ul>
 
 	</div>
 
@@ -16,40 +19,100 @@
 
 <script setup>
 
-	import { computed } from 'vue'
+	/**
+	 * 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({
-		pos: {
+		id: {
 			type: String,
-			default: "bottom-left"
+			required: true,
 		},
-		mode: {
+		// 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: "click"
+			default: 'bottom-left',
 		},
 		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"
+			default: 4,
 		},
-		duration: {
-			type: Number,
-			default: 500
+	})
+
+	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 options = computed(() => `
-					pos: ${props.pos};
-					mode: ${props.mode};
-					offset: ${props.offset};
-					animation: ${props.animation};
-					duration: ${props.duration};
-				`)
+	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>