@edc-motor/ui 0.4.36 → 0.4.37

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@edc-motor/ui",
-  "version": "0.4.36",
+  "version": "0.4.37",
   "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

@@ -9,13 +9,11 @@
 .field { display: flex; flex-direction: column; gap: $space-1; }
 .field__label, .field label { font-size: $fs-13; color: $text-2; }
 
-// El numérico compacto del NumberInput queda FUERA: esta regla genérica le
-// ganaba por especificidad y le imponía el 100%/36px de un campo de línea.
 input[type="text"],
 input[type="email"],
 input[type="password"],
 input[type="search"],
-input[type="number"]:not(.number-input__field),
+input[type="number"],
 select,
 textarea {
   font: inherit;

package/scss/components/_index.scss

@@ -21,7 +21,6 @@
 @use "translatable-input";
 @use "form-locale-switch";
 @use "image-upload";
-@use "number-input";
 @use "multi-select";
 @use "font-upload";
 @use "toast";

package/scss/components/_multi-select.scss

@@ -1,7 +1,8 @@
 @use "tokens" as *;
 
 // Select múltiple (MultiSelect.vue): hereda toda la estética de .base-select;
-// aquí solo la casilla de check de cada opción y el truncado del trigger.
+// aquí la casilla de check de cada opción y las etiquetas del trigger (las
+// elegidas se quitan desde su aspa sin abrir el panel).
 .multi-select {
   .base-select__value {
     overflow: hidden;
@@ -9,6 +10,47 @@
     white-space: nowrap;
   }
 
+  // El trigger crece con las etiquetas (min-height en vez del alto fijo).
+  .base-select__trigger {
+    height: auto;
+    min-height: $input-height;
+    padding-block: 4px;
+  }
+
+  &__tags {
+    display: flex;
+    flex-wrap: wrap;
+    align-items: center;
+    gap: 4px;
+    min-width: 0;
+  }
+
+  &__tag {
+    display: inline-flex;
+    align-items: center;
+    gap: 4px;
+    max-width: 100%;
+    padding: 1px $space-1 1px $space-2;
+    border: 1px solid $border;
+    border-radius: $radius-sm;
+    background: $surface-2;
+    font-size: $fs-13;
+    line-height: 1.4;
+  }
+
+  &__tag-remove {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    flex: none;
+    color: $text-3;
+    cursor: pointer;
+
+    &:hover {
+      color: $danger;
+    }
+  }
+
   &__option {
     display: flex;
     align-items: center;

package/src/components/MultiSelect.vue

@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import { computed, nextTick, onBeforeUnmount, ref } from 'vue'
-import { Check } from '@lucide/vue'
+import { Check, X } from '@lucide/vue'
 import { useDropdownPanel } from '../composables/useDropdownPanel'
 import type { SelectOption } from './BaseSelect.vue'
 
@@ -10,9 +10,9 @@ import type { SelectOption } from './BaseSelect.vue'
 // marca de check y el panel SE CIERRA al elegir (como el simple: un valor
 // por apertura — para añadir otro se reabre y las marcas siguen ahí). El
 // valor viaja como array de strings (mismo criterio String() que
-// BaseSelect). El trigger pinta las etiquetas elegidas unidas por comas
-// (el CSS las trunca con elipsis) — así no hace falta ningún texto
-// "N seleccionadas" que traducir.
+// BaseSelect). El trigger pinta las elegidas como etiquetas con aspa: se
+// quitan desde ahí sin abrir el panel (también con Backspace); así no
+// hace falta ningún texto "N seleccionadas" que traducir.
 const props = withDefaults(
   defineProps<{
     modelValue?: (string | number)[]
@@ -42,12 +42,17 @@ useDropdownPanel(root, panel, open)
 
 const selectedValues = computed(() => new Set(props.modelValue.map((v) => String(v))))
 const isSelected = (option: SelectOption) => selectedValues.value.has(String(option.value))
-const triggerLabel = computed(() =>
-  props.options
-    .filter((o) => isSelected(o))
-    .map((o) => o.label)
-    .join(', '),
-)
+const selectedOptions = computed(() => props.options.filter((o) => isSelected(o)))
+
+/** Quita una elegida desde su etiqueta del trigger, sin tocar el panel. */
+function removeOption(option: SelectOption) {
+  if (props.disabled) return
+  const value = String(option.value)
+  emit(
+    'update:modelValue',
+    props.modelValue.map((v) => String(v)).filter((v) => v !== value),
+  )
+}
 
 function optionId(index: number) {
   return `${selectId}-opt-${index}`
@@ -101,6 +106,10 @@ function onKeydown(e: KeyboardEvent) {
     if (['ArrowDown', 'ArrowUp', 'Enter', ' '].includes(e.key)) {
       e.preventDefault()
       void openPanel()
+    } else if (e.key === 'Backspace' && selectedOptions.value.length) {
+      // Quitar la última elegida sin abrir el panel (espejo del aspa).
+      e.preventDefault()
+      removeOption(selectedOptions.value[selectedOptions.value.length - 1])
     }
     return
   }
@@ -171,9 +180,22 @@ onBeforeUnmount(() => document.removeEventListener('mousedown', onOutside))
         @click="toggle"
         @keydown="onKeydown"
       >
-        <span class="base-select__value" :class="{ 'is-placeholder': !triggerLabel }">
-          {{ triggerLabel || placeholder }}
+        <!-- Elegidas como etiquetas con aspa (el aspa NO abre el panel);
+             span con role=button porque un button no puede anidar otro -->
+        <span v-if="selectedOptions.length" class="multi-select__tags">
+          <span v-for="option in selectedOptions" :key="option.value" class="multi-select__tag">
+            {{ option.label }}
+            <span
+              class="multi-select__tag-remove"
+              role="button"
+              :aria-label="String(option.label)"
+              @click.stop="removeOption(option)"
+            >
+              <X :size="12" />
+            </span>
+          </span>
         </span>
+        <span v-else class="base-select__value is-placeholder">{{ placeholder }}</span>
       </button>
 
       <ul

package/src/index.ts

@@ -31,7 +31,6 @@ export {
 export const RichTextInput = defineAsyncComponent(() => import('./components/RichTextInput.vue'))
 export type { RichIcon, RichTextLabels } from './components/RichTextInput.vue'
 export { default as ImageUpload } from './components/ImageUpload.vue'
-export { default as NumberInput } from './components/NumberInput.vue'
 export { default as MultiSelect } from './components/MultiSelect.vue'
 export { default as FontUpload } from './components/FontUpload.vue'
 export { default as BaseModal } from './components/BaseModal.vue'

package/scss/components/_number-input.scss

@@ -1,48 +0,0 @@
-@use "tokens" as *;
-
-// Input numérico compacto con steppers −/+ (NumberInput.vue): la estética
-// del contador de copias del editor de mazos de CDL, generalizada.
-.number-input {
-  display: inline-flex;
-  align-items: center;
-  gap: $space-1;
-
-  &__step {
-    display: inline-flex;
-    align-items: center;
-    justify-content: center;
-    width: 1.6rem;
-    height: 1.6rem;
-    padding: 0;
-    border: 1px solid $border;
-    border-radius: $radius-sm;
-    background: $surface-2;
-    color: $text-2;
-    cursor: pointer;
-
-    &:hover:not(:disabled) { color: $text-1; border-color: $text-3; }
-    &:disabled { opacity: $disabled-opacity; cursor: not-allowed; }
-  }
-
-  &__field {
-    width: 2.6rem;
-    padding: 0.1rem 0.2rem;
-    text-align: center;
-    font-weight: $k-fw-bold;
-    font-size: $fs-13;
-    color: $text-1;
-    border: 1px solid $border;
-    border-radius: $radius-sm;
-    background: $surface;
-    appearance: textfield;
-    -moz-appearance: textfield;
-
-    &::-webkit-outer-spin-button,
-    &::-webkit-inner-spin-button {
-      appearance: none;
-      margin: 0;
-    }
-  }
-
-  &--invalid &__field { color: $danger; border-color: $danger; }
-}

package/src/components/NumberInput.vue

@@ -1,82 +0,0 @@
-<script setup lang="ts">
-import { computed } from 'vue'
-import { Minus, Plus } from '@lucide/vue'
-
-// Input numérico compacto con steppers −/+ (nacido como el contador de
-// copias del editor de mazos de CDL): input centrado sin flechas nativas,
-// botones que respetan min/max y clamp al teclear. `invalid` pinta el borde
-// en danger (p. ej. copias por encima del límite del modo).
-const props = withDefaults(
-  defineProps<{
-    modelValue: number
-    min?: number
-    max?: number
-    step?: number
-    disabled?: boolean
-    invalid?: boolean
-    /** aria-label del input (los botones llevan los suyos). */
-    label?: string
-    decreaseLabel?: string
-    increaseLabel?: string
-  }>(),
-  { step: 1, disabled: false, invalid: false },
-)
-
-const emit = defineEmits<{ 'update:modelValue': [number] }>()
-
-function clamp(value: number): number {
-  if (Number.isNaN(value)) value = props.min ?? 0
-  if (props.min !== undefined) value = Math.max(props.min, value)
-  if (props.max !== undefined) value = Math.min(props.max, value)
-  return value
-}
-
-const atMin = computed(() => props.min !== undefined && props.modelValue <= props.min)
-const atMax = computed(() => props.max !== undefined && props.modelValue >= props.max)
-
-function stepBy(delta: number) {
-  emit('update:modelValue', clamp(props.modelValue + delta * props.step))
-}
-
-function onChange(event: Event) {
-  const input = event.target as HTMLInputElement
-  const value = clamp(Number(input.value))
-  // El clamp puede dejar el mismo modelValue (sin re-render): se repinta a mano.
-  input.value = String(value)
-  emit('update:modelValue', value)
-}
-</script>
-
-<template>
-  <span class="number-input" :class="{ 'number-input--invalid': invalid }">
-    <button
-      type="button"
-      class="number-input__step"
-      :disabled="disabled || atMin"
-      :aria-label="decreaseLabel"
-      @click="stepBy(-1)"
-    >
-      <Minus :size="14" />
-    </button>
-    <input
-      class="number-input__field"
-      type="number"
-      :value="modelValue"
-      :min="min"
-      :max="max"
-      :step="step"
-      :disabled="disabled"
-      :aria-label="label"
-      @change="onChange"
-    />
-    <button
-      type="button"
-      class="number-input__step"
-      :disabled="disabled || atMax"
-      :aria-label="increaseLabel"
-      @click="stepBy(1)"
-    >
-      <Plus :size="14" />
-    </button>
-  </span>
-</template>