You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
74 lines
3.7 KiB
74 lines
3.7 KiB
# Continue tomorrow
|
|
|
|
Fecha de corte: 2026-05-22. Rama: `active-uix`.
|
|
|
|
## Resumen del día
|
|
|
|
Auditoría + mejoras a 6 componentes form (select, field, editable, number-field, search-field, combobox).
|
|
Commits clave: `ffdb4804` → `df948aa3`. Todos los componentes pasaron `svelte-check` 0/0 al cerrar.
|
|
|
|
## Pendiente / en curso
|
|
|
|
### 1. Normalización del width del popover (task #105, prioridad alta)
|
|
|
|
**Hecho:**
|
|
- `src/uix/eidos/components/popover/popover.css` emite `min-inline-size: var(--floating-anchor-width, auto)` como default → popover ≥ anchor para TODOS los popover-based.
|
|
- `sideOffset` unificado a 6 en soma popover-content y en los 5 pickers (date / date-range / time / time-range / color).
|
|
|
|
**Pendiente:** los pickers anclan al chevron trigger (~14px), no al input wrapper (~448px). Por eso `--floating-anchor-width` resuelve a 14px y el `min-inline-size` no actúa visible.
|
|
|
|
**Patrón verificado vs Ark / Radix / shadcn / React Aria:**
|
|
- Select / Combobox → anchor = trigger button (ya correcto).
|
|
- Pickers compuestos (date/time/color + range) → anchor = **input wrapper** (falta).
|
|
|
|
**Implementación (Approach A, soma-side):**
|
|
- En cada picker provider (`src/uix/soma/components/{date,time,color}-picker/*-provider.svelte.ts`), exponer `inputRef`.
|
|
- El `*-input.svelte` wrapper registra `provider.inputRef.current = el` en mount.
|
|
- Donde el popover hace `FloatingContent.use({ customAnchor: ... })`, usar `inputRef.current` si existe, sino `triggerRef.current`.
|
|
|
|
**Verificación:** abrir popover, comprobar que `getComputedStyle(wrapper).getPropertyValue('--floating-anchor-width')` == ancho del input wrapper, no del chevron.
|
|
|
|
### 2. Combobox multi mode con tags inline
|
|
|
|
Decisión del usuario: patrón Material UI Autocomplete — items seleccionados como pills DENTRO del input, caret al final.
|
|
|
|
**Pendiente:**
|
|
- Añadir `Combobox.SelectedTags` part al morfo (kebab `selected-tags`, archetype `group`, optional).
|
|
- Soma: `ComboboxSelectedTagsProvider` que renderiza un pill por value con X para eliminar.
|
|
- Eidos: wrapper + CSS — tags + `<input>` en flex container con `flex-wrap`.
|
|
- Backspace en input vacío ya elimina último tag (commit C4 del audit, ya en main).
|
|
- Demo: ejemplo en multi mode.
|
|
|
|
**Notas técnicas:**
|
|
- El `$effect` actual del provider sync inputValue al label SOLO en single mode. Para multi NO se debe tocar inputValue (filter activo).
|
|
- Mi patch anterior de "stamp labels on close" en multi fue **revertido**. El sync queda en cargo de SelectedTags.
|
|
|
|
### 3. SearchField como Combobox-like
|
|
|
|
Decisión del usuario: SearchField debe tener layer flotante con results clickables.
|
|
|
|
**Opciones:**
|
|
- **A** (elegida): añadir `SearchField.Results` part con popover propio (items clickables emiten `commit-select`).
|
|
- B (descartada): documentar y reusar Combobox.
|
|
|
|
Pendiente.
|
|
|
|
### 4. Combobox: revisar effect de single-mode label sync al mezclar con tags inline
|
|
|
|
El `$effect` en `combobox-provider.svelte.ts` (líneas ~145) sync inputValue al label en single mode. Al añadir SelectedTags (item 2), verificar que no haya loops en multi.
|
|
|
|
## Estado actual del working tree (sin commit aún)
|
|
|
|
- `src/uix/eidos/components/popover/popover.css` — `--_popover-min-width` añadido.
|
|
- `src/uix/eidos/components/{date,date-range,time,time-range,color}-picker/*-content.svelte` — sideOffset = 6.
|
|
- `src/uix/soma/components/popover/components/popover-content.svelte` — default sideOffset = 6.
|
|
- `src/uix/soma/components/combobox/combobox-provider.svelte.ts` — revertido patch multi-on-close + comentario "Multi mode renders selections as inline tags via a separate Combobox.SelectedTags part" como recordatorio.
|
|
|
|
## Comandos útiles
|
|
|
|
```bash
|
|
cd G:/dev/svelte/vicen
|
|
npx svelte-check --threshold error # 0/0 expected
|
|
npm run dev # via .claude/launch.json "dev"
|
|
```
|