Saltar al contenido
El Muestrario

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

7 props declaradas en los tipos de la versión instalada.
PropRequeridaTipoQué hace
attributesAttributeOption[]Current attribute configuration
childCountnumberNumber of existing variant children (used to decide if configured)
collapsedbooleanWhether the panel is in collapsed (summary) mode
onToggleCollapse() => voidCalled when the user clicks "Editar" or "Contraer"
onChange(next: AttributeOption[]) => Promise<void>Called with the new attribute list after any mutation
labelopcionalstringLabel shown for the section (default: "Atributos")
hintopcionalstringHint 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.