componente · @solu30/ui-kit/display
AttributeEditorCollapsible
El componente, montado
Cargando el componente del paquete instalado…
Cargando el chunk del paquete instalado…
De dónde se importa
import { AttributeEditorCollapsible } from '@solu30/ui-kit/display'Props
| Prop | Requerida | Tipo | Qué hace |
|---|---|---|---|
| attributes | sí | AttributeOption[] | Current attribute configuration |
| childCount | sí | number | Number of existing variant children (used to decide if configured) |
| collapsed | sí | boolean | Whether the panel is in collapsed (summary) mode |
| onToggleCollapse | sí | () => void | Called when the user clicks "Editar" or "Contraer" |
| onChange | sí | (next: AttributeOption[]) => Promise<void> | Called with the new attribute list after any mutation |
| label | opcional | string | Label shown for the section (default: "Atributos") |
| hint | opcional | string | Hint text shown in expanded header (default: "ej: Color, Talle") |
Ejemplo del paquete
TODO: replace with import from @solu30/pos-core once G4 (variant-form.ts) is published.
The shape is identical to ParentAttribute in pos-core candidate spec.
/
interface AttributeOption {
name: string;
values: string[];
}
interface AttributeEditorCollapsibleProps {
/** Current attribute configuration */
attributes: AttributeOption[];
/** Number of existing variant children (used to decide if configured) */
childCount: number;
/** Whether the panel is in collapsed (summary) mode */
collapsed: boolean;
/** Called when the user clicks "Editar" or "Contraer" */
onToggleCollapse: () => void;
/** Called with the new attribute list after any mutation */
onChange: (next: AttributeOption[]) => Promise<void>;
/** Label shown for the section (default: "Atributos") */
label?: string;
/** Hint text shown in expanded header (default: "ej: Color, Talle") */
hint?: string;
}
/**
Collapsible wrapper around AttributeEditor.
When configured and collapsed, shows a summary row with an edit button.
When expanded or not yet configured, shows the full AttributeEditor.Del @example del JSDoc de @solu30/ui-kit, sin editar. Cuatro de los 69 ejemplos del paquete traen pegada la firma cruda del .d.ts —el mismo defecto del extractor que se come las descripciones—, y por eso la caja tiene tope de alto: el ejemplo de verdad suele estar al final.