@edc-motor/ui 0.4.7 → 0.4.8

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@edc-motor/ui",
-  "version": "0.4.7",
+  "version": "0.4.8",
   "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/_forms.scss

@@ -18,7 +18,8 @@ select,
 textarea {
   font: inherit;
   width: 100%;
-  padding: 10px 12px;
+  height: $input-height; // controles de una línea a 36px (como .form-field)
+  padding: 0 $input-padding-x;
   background: $surface;
   border: 1px solid $border;
   border-radius: $radius-md;
@@ -26,7 +27,12 @@ textarea {
   &:hover { border-color: $border-strong; }
   &:focus { outline: none; border-color: $accent-500; }
 }
-textarea { resize: vertical; }
+textarea {
+  height: auto;
+  min-height: $input-height;
+  padding: $input-padding-y $input-padding-x;
+  resize: vertical;
+}
 input[type="color"] { width: 44px; height: 36px; padding: 2px; cursor: pointer; }
 
 .error { color: $danger; margin: 0; }

package/scss/_tokens.scss

@@ -101,9 +101,9 @@ $shadow-lg: var(--shadow-lg);
 // Formularios (elementos estilo kontuan)
 $focus-ring: 0 0 0 3px color-mix(in srgb, #{$accent-500} 25%, transparent);
 $disabled-opacity: 0.45;
-$input-height: 40px;
-$input-padding-x: 12px;
-$input-padding-y: 10px;
+$input-height: 36px;
+$input-padding-x: 10px;
+$input-padding-y: 8px;
 $input-radius: $radius-md;
 $input-bg: $surface-2;
 $input-text: $text-1;

package/scss/components/_base-button.scss

@@ -5,7 +5,8 @@
   align-items: center;
   justify-content: center;
   gap: $space-2;
-  padding: $space-2 $space-4;
+  min-height: $input-height; // misma altura que los inputs del motor (36px)
+  padding: $space-1 $space-4;
   border: 1px solid transparent;
   border-radius: $radius-md;
   font: inherit;
@@ -74,6 +75,7 @@
 .edc-button--text {
   background: transparent;
   border-color: transparent;
+  min-height: 0;
   padding: 0;
   color: $accent-500;
 
@@ -82,6 +84,7 @@
 .edc-button--text-danger {
   background: transparent;
   border-color: transparent;
+  min-height: 0;
   padding: 0;
   color: $danger;
 

package/scss/components/_base-pagination.scss

@@ -11,6 +11,8 @@
     display: inline-flex;
     align-items: center;
     justify-content: center;
+    // 32px a propósito: control secundario, un punto por debajo de los 36px
+    // de los controles de formulario.
     width: 32px;
     height: 32px;
     background: none;

package/scss/components/_filters-modal.scss

@@ -0,0 +1,21 @@
+@use "tokens" as *;
+
+// Modal de filtros (FiltersModal.vue): el wrapper es contenedor y el grid
+// del cuerpo suma columnas según el ancho REAL del modal (1 → 2 → 3).
+.filters-modal {
+  container-type: inline-size;
+
+  &__grid {
+    display: grid;
+    grid-template-columns: 1fr;
+    gap: $space-4;
+
+    > * { min-width: 0; } // cada campo a ancho completo de su celda
+
+    @container (min-width: 460px) { grid-template-columns: repeat(2, 1fr); }
+    @container (min-width: 700px) { grid-template-columns: repeat(3, 1fr); }
+  }
+
+  // "Quitar filtros" a la izquierda del pie (el pie alinea a la derecha).
+  &__clear { margin-right: auto; }
+}

package/scss/components/_form-field.scss

@@ -54,7 +54,7 @@
     &::after {
       content: '';
       position: absolute;
-      right: 12px;
+      right: $input-padding-x;
       top: 50%;
       transform: translateY(-50%);
       width: 0;

package/scss/components/_index-toolbar.scss

@@ -0,0 +1,103 @@
+@use "tokens" as *;
+
+// Barra de los index (IndexToolbar.vue). El propio toolbar es el contenedor
+// de las queries: por debajo de $bp-sm de ancho REAL de la barra, la búsqueda
+// pasa a su fila y debajo toggles + botón se reparten el ancho.
+.index-toolbar {
+  container-type: inline-size;
+  margin-bottom: $space-4;
+
+  &__inner {
+    display: flex;
+    align-items: center;
+    gap: $space-3;
+  }
+
+  &__search {
+    position: relative;
+    flex: 1;
+    min-width: 0;
+  }
+
+  &__search-icon {
+    position: absolute;
+    right: $input-padding-x;
+    top: 50%;
+    transform: translateY(-50%);
+    color: $text-3;
+    pointer-events: none;
+  }
+
+  &__search-input {
+    width: 100%;
+    height: $input-height;
+    padding: 0 34px 0 $input-padding-x; // hueco a la derecha para la lupa
+    background: $input-bg;
+    color: $input-text;
+    border: 1px solid $input-border;
+    border-radius: $input-radius;
+    font-family: $k-font-sans;
+    font-size: $fs-14;
+    transition: border-color 0.15s, box-shadow 0.15s;
+
+    &::placeholder { color: $input-placeholder; }
+    &:hover:not(:focus) { border-color: $input-border-hover; }
+    &:focus {
+      outline: none;
+      border-color: $input-border-focus;
+      box-shadow: $input-focus-ring;
+    }
+  }
+
+  &__actions {
+    display: flex;
+    align-items: center;
+    gap: $space-3;
+    flex-shrink: 0;
+  }
+
+  &__filters {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    gap: $space-2;
+    height: $input-height;
+    padding: 0 $space-3;
+    background: $input-bg;
+    border: 1px solid $input-border;
+    border-radius: $input-radius;
+    color: $text-2;
+    font-family: $k-font-sans;
+    font-size: $fs-14;
+    cursor: pointer;
+    transition: border-color 0.15s ease, color 0.15s ease;
+
+    &:hover { border-color: $input-border-hover; color: $text-1; }
+  }
+
+  &__badge {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    min-width: 18px;
+    height: 18px;
+    padding: 0 5px;
+    border-radius: $radius-pill;
+    background: $accent-500;
+    color: #fff;
+    font-size: $fs-11;
+    font-weight: $k-fw-semibold;
+    line-height: 1;
+  }
+
+  // Estrecho: la búsqueda ocupa su fila; debajo, toggles y botón se
+  // reparten el ancho proporcionalmente.
+  @container (max-width: #{$bp-sm - 1px}) {
+    &__inner { flex-wrap: wrap; }
+    &__search { flex: 1 1 100%; }
+    &__actions {
+      flex: 1 1 100%;
+      > * { flex: 1 1 auto; }
+    }
+  }
+}

package/scss/components/_index.scss

@@ -6,6 +6,9 @@
 @use "base-select";
 @use "base-pagination";
 @use "search-select";
+@use "sort-toggles";
+@use "index-toolbar";
+@use "filters-modal";
 @use "blocks";
 @use "block-related";
 @use "preview-grid";

package/scss/components/_search-select.scss

@@ -16,7 +16,8 @@
     border-radius: $input-radius;
     color: $input-text;
     cursor: pointer;
-    padding: $space-2 $space-3;
+    height: $input-height;
+    padding: 0 $input-padding-x;
     text-align: left;
     font: inherit;
 
@@ -65,7 +66,8 @@
     border: 0;
     border-bottom: 1px solid $border;
     color: $input-text;
-    padding: $space-2 $space-3;
+    height: $input-height;
+    padding: 0 $input-padding-x;
     font: inherit;
     outline: none;
 

package/scss/components/_sort-toggles.scss

@@ -0,0 +1,35 @@
+@use "tokens" as *;
+
+// Toggles de ordenación (SortToggles.vue): grupo segmentado a la altura de
+// los inputs (36px); el activo se tiñe de acento y su icono marca el sentido.
+.sort-toggles {
+  display: inline-flex;
+  gap: 2px;
+  height: $input-height;
+  padding: 2px;
+  background: $input-bg;
+  border: 1px solid $input-border;
+  border-radius: $input-radius;
+
+  &__btn {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    flex: 1 1 auto;
+    min-width: 40px;
+    padding: 0 $space-2;
+    border: none;
+    border-radius: $radius-sm;
+    background: transparent;
+    color: $text-2;
+    cursor: pointer;
+    transition: background-color 0.15s ease, color 0.15s ease;
+
+    &:hover { color: $text-1; }
+
+    &.is-active {
+      background: color-mix(in srgb, $accent-500 14%, transparent);
+      color: $accent-500;
+    }
+  }
+}

package/src/components/FiltersModal.vue

@@ -0,0 +1,63 @@
+<script setup lang="ts">
+import { FunnelX, X } from '@lucide/vue'
+import BaseModal from './BaseModal.vue'
+import BaseButton from './BaseButton.vue'
+
+// Modal de filtros de los index: BaseModal (overlay, Escape, click fuera,
+// aria-modal) SIN semántica de guardar — los campos del slot aplican en vivo
+// (v-model directo desde el consumidor). El cuerpo es un grid que suma
+// columnas según el ancho del propio modal (container queries). El pie trae
+// "Quitar filtros" (emit `clear`, solo con activeCount > 0) y "Cerrar".
+// Agnóstico de i18n (DC-29): textos por prop, defaults en castellano.
+
+withDefaults(
+  defineProps<{
+    modelValue: boolean
+    title?: string
+    size?: 'sm' | 'md' | 'lg'
+    activeCount?: number
+    clearLabel?: string
+    closeLabel?: string
+  }>(),
+  {
+    title: 'Filtros',
+    size: 'md',
+    activeCount: 0,
+    clearLabel: 'Quitar filtros',
+    closeLabel: 'Cerrar',
+  },
+)
+
+const emit = defineEmits<{ 'update:modelValue': [boolean]; clear: [] }>()
+</script>
+
+<template>
+  <BaseModal
+    :model-value="modelValue"
+    :title="title"
+    :size="size"
+    :close-label="closeLabel"
+    @update:model-value="(v) => emit('update:modelValue', v)"
+  >
+    <div class="filters-modal">
+      <div class="filters-modal__grid"><slot /></div>
+    </div>
+
+    <template #footer>
+      <BaseButton
+        v-if="activeCount > 0"
+        variant="secondary"
+        type="button"
+        class="filters-modal__clear"
+        @click="emit('clear')"
+      >
+        <template #icon><FunnelX :size="16" /></template>
+        {{ clearLabel }}
+      </BaseButton>
+      <BaseButton variant="primary" type="button" @click="emit('update:modelValue', false)">
+        <template #icon><X :size="16" /></template>
+        {{ closeLabel }}
+      </BaseButton>
+    </template>
+  </BaseModal>
+</template>

package/src/components/IndexToolbar.vue

@@ -0,0 +1,87 @@
+<script setup lang="ts">
+import { Funnel, Search } from '@lucide/vue'
+import SortToggles, { type SortValue } from './SortToggles.vue'
+
+// Barra unificada de los index (admin y web pública): búsqueda (lupa a la
+// derecha, como el FilterBar del admin-kit), toggles de ordenación y botón
+// "Filtros" con badge de filtros activos (emite `open-filters`; el modal lo
+// pone el consumidor). En ancho es una fila [búsqueda][toggles][botón]; en
+// estrecho (container query propia) la búsqueda ocupa su fila y debajo se
+// reparten el ancho los toggles y el botón.
+// La búsqueda emite INMEDIATO (como FilterBar): el debounce va fuera.
+// Agnóstico de i18n (DC-29): textos por prop, defaults en castellano.
+
+withDefaults(
+  defineProps<{
+    modelValue: string
+    sort?: SortValue
+    searchPlaceholder?: string
+    filtersLabel?: string
+    activeCount?: number
+    showFilters?: boolean
+    showSort?: boolean
+    latestLabel?: string
+    oldestLabel?: string
+    nameLabel?: string
+    nameDescLabel?: string
+  }>(),
+  {
+    sort: 'latest',
+    searchPlaceholder: 'Buscar…',
+    filtersLabel: 'Filtros',
+    activeCount: 0,
+    showFilters: false,
+    showSort: true,
+    latestLabel: undefined,
+    oldestLabel: undefined,
+    nameLabel: undefined,
+    nameDescLabel: undefined,
+  },
+)
+
+const emit = defineEmits<{
+  'update:modelValue': [value: string]
+  'update:sort': [value: SortValue]
+  'open-filters': []
+}>()
+</script>
+
+<template>
+  <div class="index-toolbar">
+    <div class="index-toolbar__inner">
+      <div class="index-toolbar__search">
+        <input
+          type="search"
+          :value="modelValue"
+          :placeholder="searchPlaceholder"
+          class="index-toolbar__search-input"
+          @input="emit('update:modelValue', ($event.target as HTMLInputElement).value)"
+        />
+        <Search :size="16" class="index-toolbar__search-icon" />
+      </div>
+
+      <div class="index-toolbar__actions">
+        <SortToggles
+          v-if="showSort"
+          :model-value="sort"
+          class="index-toolbar__sort"
+          :latest-label="latestLabel"
+          :oldest-label="oldestLabel"
+          :name-label="nameLabel"
+          :name-desc-label="nameDescLabel"
+          @update:model-value="(v) => emit('update:sort', v)"
+        />
+        <button
+          v-if="showFilters"
+          type="button"
+          class="index-toolbar__filters"
+          @click="emit('open-filters')"
+        >
+          <Funnel :size="16" />
+          <span class="index-toolbar__filters-text">{{ filtersLabel }}</span>
+          <span v-if="activeCount > 0" class="index-toolbar__badge">{{ activeCount }}</span>
+        </button>
+      </div>
+    </div>
+  </div>
+</template>

package/src/components/SortToggles.vue

@@ -0,0 +1,80 @@
+<script setup lang="ts">
+import { computed } from 'vue'
+import { ArrowDownAZ, ArrowDownZA, CalendarArrowDown, CalendarArrowUp } from '@lucide/vue'
+
+// Par de toggles de ordenación de los index: fecha (latest ⇄ oldest) y
+// alfabético (name ⇄ name_desc). Pulsar el inactivo lo activa en su primer
+// estado; pulsar el activo invierte el sentido. Los valores casan con el
+// ?sort del catálogo público del core.
+// Agnóstico de i18n (DC-29): textos por prop, defaults en castellano.
+
+export type SortValue = 'latest' | 'oldest' | 'name' | 'name_desc'
+
+const props = withDefaults(
+  defineProps<{
+    modelValue?: SortValue
+    latestLabel?: string
+    oldestLabel?: string
+    nameLabel?: string
+    nameDescLabel?: string
+  }>(),
+  {
+    modelValue: 'latest',
+    latestLabel: 'Más recientes primero',
+    oldestLabel: 'Más antiguos primero',
+    nameLabel: 'Alfabético (A-Z)',
+    nameDescLabel: 'Alfabético (Z-A)',
+  },
+)
+
+const emit = defineEmits<{ 'update:modelValue': [value: SortValue] }>()
+
+const dateActive = computed(() => props.modelValue === 'latest' || props.modelValue === 'oldest')
+const alphaActive = computed(() => props.modelValue === 'name' || props.modelValue === 'name_desc')
+
+// Cada botón anuncia el estado que representa AHORA: el activo, su sentido
+// actual; el inactivo, el primer estado al que llevaría el click.
+const dateLabel = computed(() =>
+  props.modelValue === 'oldest' ? props.oldestLabel : props.latestLabel,
+)
+const alphaLabel = computed(() =>
+  props.modelValue === 'name_desc' ? props.nameDescLabel : props.nameLabel,
+)
+
+function toggleDate() {
+  emit('update:modelValue', props.modelValue === 'latest' ? 'oldest' : 'latest')
+}
+
+function toggleAlpha() {
+  emit('update:modelValue', props.modelValue === 'name' ? 'name_desc' : 'name')
+}
+</script>
+
+<template>
+  <div class="sort-toggles" role="group">
+    <button
+      type="button"
+      class="sort-toggles__btn"
+      :class="{ 'is-active': dateActive }"
+      :aria-pressed="dateActive"
+      :aria-label="dateLabel"
+      :title="dateLabel"
+      @click="toggleDate"
+    >
+      <CalendarArrowUp v-if="modelValue === 'oldest'" :size="16" />
+      <CalendarArrowDown v-else :size="16" />
+    </button>
+    <button
+      type="button"
+      class="sort-toggles__btn"
+      :class="{ 'is-active': alphaActive }"
+      :aria-pressed="alphaActive"
+      :aria-label="alphaLabel"
+      :title="alphaLabel"
+      @click="toggleAlpha"
+    >
+      <ArrowDownZA v-if="modelValue === 'name_desc'" :size="16" />
+      <ArrowDownAZ v-else :size="16" />
+    </button>
+  </div>
+</template>

package/src/index.ts

@@ -23,6 +23,9 @@ export { default as ImageUpload } from './components/ImageUpload.vue'
 export { default as FontUpload } from './components/FontUpload.vue'
 export { default as BaseModal } from './components/BaseModal.vue'
 export { default as EditModal } from './components/EditModal.vue'
+export { default as FiltersModal } from './components/FiltersModal.vue'
+export { default as SortToggles, type SortValue } from './components/SortToggles.vue'
+export { default as IndexToolbar } from './components/IndexToolbar.vue'
 export { default as BaseTabs } from './components/BaseTabs.vue'
 export { default as BaseToast } from './components/BaseToast.vue'
 export { default as ToastContainer } from './components/ToastContainer.vue'