innoboxrr-vue-datatable 2.0.0 → 2.2.0

package/package.json

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

package/src/DataTable.vue

@@ -44,24 +44,28 @@
 					<div v-if="hasFilter" class="fe-w-auto">
 						<div class="fe-grid-divider fe-children-expand fe-text-center" fe-grid>
 						    <div>
-								<span
+								<button
+						    		type="button"
 						    		class="fe-text-right pointer"
-						    		:uk-tooltip="`title: ${'Update results'}`"
+						    		data-tooltip="Update results"
+						    		aria-label="Update results"
 						    		@click="updateFilters">
 									<svg class="w-6 h-6 text-slate-800 dark:text-white" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 18 20">
 										<path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M16 1v5h-5M2 19v-5h5m10-4a8 8 0 0 1-14.947 3.97M1 10a8 8 0 0 1 14.947-3.97"/>
 									</svg>
-								</span>
+								</button>
 						    </div>
 							<div>
-								<span
+								<button
+						    		type="button"
 						    		class="fe-text-right pointer"
 						    		uk-toggle="target: .filter-form; animation: uk-animation-scale-up;"
-						    		uk-tooltip="title: Buscar">
+						    		data-tooltip="Buscar"
+						    		aria-label="Buscar">
 									<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>
-								</span>
+								</button>
 						    </div>
 						</div>
 					</div>

package/src/components/DisabledLinkComponent.vue

@@ -3,12 +3,14 @@
 	<a
 		href="#"
 		class="disabled-link block px-4 py-2 dark:hover:text-white dark:text-slate-400"
-		:uk-tooltip="`title: ${ 'This action is not authorized' }; pos:right`">
+		data-tooltip="This action is not authorized"
+		data-tooltip-pos="right">
 
-		<span
+		<Icon
 			v-if="showIcon"
-			class="fe-mr-sm uk-icon"
-			:uk-icon="icon"></span>
+			class="fe-mr-sm"
+			:icon="resolved"
+			aria-hidden="true" />
 
 		<span>{{ text }}</span>
 
@@ -19,6 +21,8 @@
 <script setup>
 
 	import { computed } from 'vue'
+	import { Icon } from '@iconify/vue'
+	import { iconFor } from 'innoboxrr-form-core'
 
 	const props = defineProps({
 
@@ -36,4 +40,6 @@
 
 	const showIcon = computed(() => props.icon !== '' && props.icon != null)
 
+	const resolved = computed(() => iconFor(props.icon))
+
 </script>

package/src/components/IconLinkComponent.vue

@@ -5,10 +5,12 @@
 		:href="link"
 		:target="target">
 
-		<span
-			class="fe-mr-sm uk-icon"
-			:uk-icon="iconAttr"
-			:style="iconStyle"></span>
+		<Icon
+			class="fe-mr-sm"
+			:icon="resolved"
+			:width="size"
+			:height="size"
+			aria-hidden="true" />
 
 		<span :class="textClass">{{ text }}</span>
 
@@ -18,7 +20,20 @@
 
 <script setup>
 
-	import { computed, nextTick, onMounted } from 'vue'
+	/**
+	 * 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: {
@@ -48,18 +63,19 @@
 		}
 	})
 
-	onMounted(() => {
-		nextTick(() => {
-			// UIkit lo aporta la aplicacion anfitriona; sin la guarda el
-			// componente no se puede montar en un entorno de pruebas ni en SSR.
-			globalThis.UIkit?.update()
-		})
-	})
+	// Un cambio de mapa en caliente repinta lo ya montado.
+	const version = ref(0)
+
+	onScopeDispose(onIconChange(() => version.value++))
 
-	const iconAttr = computed(() => `icon: ${props.icon}; ratio: ${props.ratio};`)
+	const resolved = computed(() => {
+		version.value
+
+		return iconFor(props.icon)
+	})
 
-	const iconStyle = computed(() => ({
-		fontSize: (props.ratio * 16) + 'px'
-	}))
+	// `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

@@ -4,10 +4,12 @@
 		: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>
+		<Icon
+			class="fe-mr-sm"
+			:icon="resolved"
+			:width="size"
+			:height="size"
+			aria-hidden="true" />
 
 		<span :class="textClass">{{ text }}</span>
 
@@ -17,7 +19,9 @@
 
 <script setup>
 
-	import { computed } from 'vue'
+	import { computed, onScopeDispose, ref } from 'vue'
+	import { Icon } from '@iconify/vue'
+	import { iconFor, onIconChange } from 'innoboxrr-form-core'
 
 	const props = defineProps({
 		name: {
@@ -62,10 +66,19 @@
 		query: props.query,
 	}))
 
-	const iconAttr = computed(() => `icon: ${props.icon}; ratio: ${props.ratio};`)
+	// Un cambio de mapa en caliente repinta lo ya montado.
+	const version = ref(0)
 
-	const iconStyle = computed(() => ({
-		fontSize: (props.ratio * 16) + 'px'
-	}))
+	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>