@edc-motor/ui 0.4.6 → 0.4.7

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@edc-motor/ui",
-  "version": "0.4.6",
+  "version": "0.4.7",
   "description": "EdC Motor — componentes públicos Vue 3 + tokens SCSS para webs de juegos de mesa (paquete fuente: lo compila el consumidor con Vite)",
   "license": "GPL-3.0-only",
   "type": "module",

package/scss/_base.scss

@@ -44,3 +44,14 @@ input[type='submit']:not(:disabled),
 input[type='file']:not(:disabled) {
   cursor: pointer;
 }
+
+// Iconos del juego insertados por el wysiwyg (img.rt-icon): SIEMPRE al
+// tamaño del texto que los rodea (1.2x), se rendericen donde se rendericen
+// (con o sin .rich-content alrededor).
+img.rt-icon {
+  display: inline-block;
+  width: 1.2em;
+  height: 1.2em;
+  vertical-align: -0.24em;
+  margin: 0 1px;
+}

package/scss/components/_base-pagination.scss

@@ -0,0 +1,39 @@
+@use "../tokens" as *;
+
+// Paginación compacta de listados (BasePagination.vue).
+.base-pagination {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: $space-2;
+
+  &__button {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    width: 32px;
+    height: 32px;
+    background: none;
+    border: 1px solid $border;
+    border-radius: $radius-sm;
+    color: $text-2;
+    transition: color 0.15s ease, border-color 0.15s ease;
+
+    &:not(:disabled):hover {
+      color: $accent-500;
+      border-color: $accent-500;
+    }
+
+    &:disabled {
+      opacity: $disabled-opacity;
+      cursor: not-allowed;
+    }
+  }
+
+  &__status {
+    font-size: $fs-13;
+    color: $text-2;
+    min-width: 56px;
+    text-align: center;
+  }
+}

package/scss/components/_index.scss

@@ -4,6 +4,7 @@
 @use "motor-badge";
 @use "form-field";
 @use "base-select";
+@use "base-pagination";
 @use "search-select";
 @use "blocks";
 @use "block-related";

package/scss/components/_rich-content.scss

@@ -45,9 +45,9 @@
   // Iconos del juego insertados en línea por el editor (<img class="rt-icon">).
   img.rt-icon {
     display: inline-block;
-    width: 1.25em;
-    height: 1.25em;
-    vertical-align: -0.25em;
+    width: 1.2em;
+    height: 1.2em;
+    vertical-align: -0.24em;
     margin: 0 1px;
   }
 }

package/scss/components/_rich-text.scss

@@ -126,9 +126,9 @@
       // Iconos insertados: en línea con el texto.
       img.rt-icon {
         display: inline-block;
-        width: 1.25em;
-        height: 1.25em;
-        vertical-align: -0.25em;
+        width: 1.2em;
+        height: 1.2em;
+        vertical-align: -0.24em;
         margin: 0 1px;
       }
 

package/src/components/BasePagination.vue

@@ -0,0 +1,55 @@
+<script setup lang="ts">
+import { ChevronLeft, ChevronRight } from '@lucide/vue'
+
+// Paginación compacta para listados (admin y web): anterior / "x de y" /
+// siguiente. Con una sola página no pinta nada. Agnóstica de i18n (DC-29):
+// textos por prop, defaults en castellano.
+const props = withDefaults(
+  defineProps<{
+    page: number
+    pages: number
+    prevLabel?: string
+    nextLabel?: string
+    /** Texto accesible del estado, con {page} y {pages}. */
+    ofLabel?: string
+  }>(),
+  { prevLabel: 'Anterior', nextLabel: 'Siguiente', ofLabel: '{page} de {pages}' },
+)
+
+const emit = defineEmits<{ 'update:page': [page: number] }>()
+
+function go(page: number) {
+  if (page < 1 || page > props.pages || page === props.page) return
+  emit('update:page', page)
+}
+
+function status(): string {
+  return props.ofLabel.replace('{page}', String(props.page)).replace('{pages}', String(props.pages))
+}
+</script>
+
+<template>
+  <nav v-if="pages > 1" class="base-pagination" :aria-label="status()">
+    <button
+      type="button"
+      class="base-pagination__button"
+      :disabled="page <= 1"
+      :aria-label="prevLabel"
+      :title="prevLabel"
+      @click="go(page - 1)"
+    >
+      <ChevronLeft :size="16" />
+    </button>
+    <span class="base-pagination__status">{{ status() }}</span>
+    <button
+      type="button"
+      class="base-pagination__button"
+      :disabled="page >= pages"
+      :aria-label="nextLabel"
+      :title="nextLabel"
+      @click="go(page + 1)"
+    >
+      <ChevronRight :size="16" />
+    </button>
+  </nav>
+</template>

package/src/index.ts

@@ -7,6 +7,7 @@ export { default as IconButton } from './components/IconButton.vue'
 export { default as MotorBadge } from './components/MotorBadge.vue'
 export { default as BaseInput } from './components/BaseInput.vue'
 export { default as BaseTextarea } from './components/BaseTextarea.vue'
+export { default as BasePagination } from './components/BasePagination.vue'
 export { default as BaseSelect, type SelectOption } from './components/BaseSelect.vue'
 export { default as SearchSelect, type SearchSelectOption } from './components/SearchSelect.vue'
 export { default as BaseCheckbox } from './components/BaseCheckbox.vue'