Egutierrez
5a824c2eee
75 components + DESIGN_SYSTEM.md + sync script. Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
112 lines
3.1 KiB
Markdown
112 lines
3.1 KiB
Markdown
---
|
|
name: multi_select
|
|
kind: component
|
|
lang: ts
|
|
domain: ui
|
|
version: "1.0.0"
|
|
purity: impure
|
|
signature: "MultiSelect(props: MultiSelectProps): JSX.Element"
|
|
description: "Selector múltiple con búsqueda, pills y límite de selecciones. Wrapper sobre Mantine MultiSelect."
|
|
tags: [multi-select, form, dropdown, pills, component, ui, interactive, mantine]
|
|
uses_functions: []
|
|
uses_types: []
|
|
returns: []
|
|
returns_optional: false
|
|
error_type: ""
|
|
imports: ["@mantine/core"]
|
|
output: "Componente MultiSelect que renderiza dropdown con selección múltiple, búsqueda y pills"
|
|
tested: false
|
|
tests: []
|
|
test_file_path: ""
|
|
file_path: "frontend/functions/ui/multi_select.tsx"
|
|
props:
|
|
- name: data
|
|
type: "string[] | { value: string; label: string; disabled?: boolean }[]"
|
|
required: true
|
|
description: "Opciones del selector — strings o objetos {value, label}"
|
|
- name: value
|
|
type: "string[]"
|
|
required: false
|
|
description: "Valores seleccionados (controlled)"
|
|
- name: onChange
|
|
type: "(value: string[]) => void"
|
|
required: false
|
|
description: "Callback al cambiar la selección"
|
|
- name: searchable
|
|
type: "boolean"
|
|
required: false
|
|
description: "Permite buscar entre opciones"
|
|
- name: clearable
|
|
type: "boolean"
|
|
required: false
|
|
description: "Muestra botón para limpiar toda la selección"
|
|
- name: maxValues
|
|
type: "number"
|
|
required: false
|
|
description: "Número máximo de valores seleccionables"
|
|
- name: placeholder
|
|
type: "string"
|
|
required: false
|
|
description: "Texto cuando no hay selección"
|
|
- name: label
|
|
type: "string"
|
|
required: false
|
|
description: "Label del campo"
|
|
- name: disabled
|
|
type: "boolean"
|
|
required: false
|
|
description: "Deshabilitar el selector"
|
|
- name: size
|
|
type: "'xs' | 'sm' | 'md' | 'lg' | 'xl'"
|
|
required: false
|
|
description: "Tamaño del componente"
|
|
emits: [onChange]
|
|
has_state: true
|
|
framework: react
|
|
variant: [default]
|
|
---
|
|
|
|
## Ejemplo
|
|
|
|
```tsx
|
|
import { MultiSelect } from '@fn_library'
|
|
|
|
// Opciones simples
|
|
<MultiSelect
|
|
label="Frameworks favoritos"
|
|
placeholder="Elige uno o más"
|
|
data={['React', 'Vue', 'Angular', 'Svelte']}
|
|
/>
|
|
|
|
// Con búsqueda y clearable
|
|
<MultiSelect
|
|
label="Tecnologías"
|
|
placeholder="Busca y selecciona"
|
|
searchable
|
|
clearable
|
|
value={selected}
|
|
onChange={setSelected}
|
|
data={[
|
|
{ value: 'react', label: 'React' },
|
|
{ value: 'vue', label: 'Vue' },
|
|
{ value: 'ts', label: 'TypeScript' },
|
|
]}
|
|
/>
|
|
|
|
// Máximo de selecciones
|
|
<MultiSelect
|
|
label="Elige hasta 2"
|
|
placeholder="Máximo 2"
|
|
maxValues={2}
|
|
data={['Opción A', 'Opción B', 'Opción C', 'Opción D']}
|
|
/>
|
|
```
|
|
|
|
## Notas
|
|
|
|
- Wrapper directo sobre `MultiSelect` de `@mantine/core` v9. Todas las props de Mantine MultiSelect son válidas.
|
|
- A diferencia de `Select`, `value` es `string[]` y `onChange` recibe `string[]`.
|
|
- Las selecciones se muestran como pills dentro del input, eliminables con clic.
|
|
- `maxValues` limita cuántos items pueden seleccionarse — el dropdown bloquea más selecciones al alcanzar el límite.
|
|
- Soporta `searchable` para filtrar opciones y `clearable` para un botón de limpiar todo.
|