@luis-angel-martin-dzul/input-styles 0.0.27 → 0.0.29

package/README.md

@@ -6,8 +6,8 @@ Incluye componentes de inputs, selects, botones, paginación y más, estilizados
 
 ------
 
-![Última actualización](https://img.shields.io/badge/Actualizado-28%20de%20Junio%20del%2026-blue)
-![Versión](https://img.shields.io/badge/versión-0.0.20-indigo)
+![Última actualización](https://img.shields.io/badge/Actualizado-28%20de%20Agosto%20del%2026-blue)
+![Versión](https://img.shields.io/badge/versión-0.0.29-indigo)
 
 ------
 
@@ -119,7 +119,7 @@ configureStyles({
 ---
 
 ### Inputs de texto
-_Afecta: `InputTextStyle`, `InputNumberStyle`, `InputPasswordStyle`, `TextAreaStyle`, `InputDateStyle`, `InputDateTimeStyle`, `InputTimeStyle`, `SelectStyle`_
+_Afecta: `InputTextStyle`, `InputNumberStyle`, `InputPasswordStyle`, `TextAreaStyle`, `InputDateStyle`, `InputDateTimeStyle`, `InputTimeStyle`, `SelectStyle`, `InputAutocompleteStyle`_
 
 | Token | Tipo | Default | Descripción |
 | ----- | ---- | ------- | ----------- |
@@ -155,7 +155,7 @@ configureStyles({
 ---
 
 ### Select
-_Afecta: `SelectStyle`_
+_Afecta: `SelectStyle`, `InputAutocompleteStyle`_
 
 | Token | Tipo | Default | Descripción |
 | ----- | ---- | ------- | ----------- |
@@ -357,13 +357,14 @@ Input numérico con control preciso de dígitos, decimales, rango y formato de v
 | `numeric` | `String` | `null` | Formato tipo SQL: `"10,2"` → 10 dígitos enteros, 2 decimales. Si se omite, usa `10,2` por defecto. |
 | `min` | `String` | `null` | Valor mínimo (aplicado al perder el foco). Si es `null` o negativo, permite negativos. |
 | `max` | `String` | `null` | Valor máximo (aplicado al perder el foco). |
+| `alignLeft` | `Boolean` | `false` | Posición de los botones de paso (▲/▼) respecto al valor. `false` = botones a la izquierda, valor a la derecha (`Rows \| Input`); `true` = botones a la derecha, valor a la izquierda (`Input \| Rows`). |
 | `disabled` | `Boolean` | `false` | |
 | `required` | `Boolean` | `false` | |
 | `validate` | `Boolean \| null` | `null` | |
 | `mclass` | `String` | `null` | |
 
 **Comportamiento:**
-- Incluye botones **caret ▲ / ▼** alineados a la izquierda del campo para aumentar/disminuir el valor en unidades (respetando `min`/`max`). No tienen separador y usan el color global de los iconos (`ICON_STATIC`).
+- Incluye botones **caret ▲ / ▼** para aumentar/disminuir el valor en unidades (respetando `min`/`max`). Por defecto se alinean a la izquierda del campo (con el valor a la derecha); con `alignLeft` se mueven a la derecha y el valor pasa a la izquierda. No tienen separador y usan el color global de los iconos (`ICON_STATIC`).
 - Si **mantienes presionado** un botón, tras una breve pausa el valor cambia de forma **continua** hasta soltar.
 - Puedes escribir `0` y luego `.` para empezar los decimales: el punto se conserva a la espera de los dígitos decimales (solo si los decimales están activados en `numeric`).
 - Al **enfocar** el campo, si el valor es `0` (o está vacío) se limpia, para que al escribir reemplaces el valor en lugar de anteponerlo.
@@ -489,6 +490,78 @@ const ubicaciones = [
 
 ------
 
+## InputAutocompleteStyle
+
+Autocomplete basado en `SelectStyle`, pero con el **input editable**: el usuario escribe para filtrar las opciones en vivo. Mantiene el mismo formato de `list` (plana o agrupada) y la misma navegación por teclado y posicionamiento automático del dropdown.
+
+Incluye un estado de **carga/búsqueda** controlado por la prop `loading`: cuando es `true`, oculta las opciones y muestra el mensaje _"Buscando coincidencias..."_ — pensado para búsquedas asíncronas donde el listado se resuelve en el servidor.
+
+```vue
+<InputAutocompleteStyle
+    v-model="pais"
+    label="País"
+    :list="paises"
+    placeholder="Escribe para buscar"
+    :loading="buscando"
+    return-value="value"
+    :validate="validate"
+    @search="onSearch"
+/>
+```
+
+```js
+// El evento @search se emite en cada tecleo; úsalo para disparar una
+// búsqueda asíncrona y controlar la prop `loading`.
+function onSearch(query) {
+    buscando.value = true
+    fetchPaises(query).then(res => {
+        paises.value = res
+        buscando.value = false
+    })
+}
+```
+
+```js
+// Formato del array `list` — idéntico a SelectStyle (plana o agrupada)
+const paises = [
+    { value: 1, text: 'México' },
+    { value: 2, text: 'España' },
+    { value: 3, text: 'Argentina' },
+]
+```
+
+| Prop | Tipo | Default | Descripción |
+| ---- | ---- | ------- | ----------- |
+| `modelValue` | `String \| Number \| Object` | — | Valor seleccionado. |
+| `list` | `Array` | `[]` | Array de opciones. Acepta lista plana `{ value, text }` o agrupada `{ label, options: [...] }`. El `value` es opcional: si se omite, se usa el `text` como valor. |
+| `returnValue` | `String` | `'value'` | Qué se emite al seleccionar: `'value'` (item.value), `'text'` (item.text) u `'object'` (el item completo). |
+| `loading` | `Boolean` | `false` | Cuando es `true`, oculta las opciones y muestra "Buscando coincidencias...". Úsalo mientras resuelves una búsqueda asíncrona. |
+| `label` | `String` | `''` | |
+| `description` | `String` | `''` | |
+| `placeholder` | `String` | `''` | |
+| `wrapOptions` | `Boolean` | `false` | `true` = permite que el texto de cada opción haga salto de línea; `false` = lo trunca con elipsis. |
+| `disabled` | `Boolean` | `false` | |
+| `required` | `Boolean` | `false` | |
+| `validate` | `Boolean \| null` | `null` | |
+| `mclass` | `String` | `null` | |
+
+**Eventos:**
+- `search` — se emite en cada cambio del texto escrito, con el `query` actual como payload. Ideal para búsquedas asíncronas.
+- `update:modelValue` / `change` — emiten el valor al seleccionar una opción (según `returnValue`).
+- `blur` — al cerrarse el dropdown.
+
+**Comportamiento:**
+- Al abrir (foco o clic en el chevron) muestra todas las opciones; al teclear, filtra por coincidencia de texto (sin distinguir mayúsculas).
+- Al seleccionar una opción, el input muestra su `text`.
+- Si se cierra el dropdown sin seleccionar, el input vuelve a reflejar la selección real (descarta el texto escrito sin confirmar).
+
+**Navegación por teclado:**
+- `↑` / `↓` — navegar opciones
+- `Enter` — seleccionar la opción resaltada
+- `Escape` — cerrar el dropdown
+
+------
+
 ## InputCheckStyle
 
 Checkbox estilizado con label y descripción.