Todos los componentes (244)

Matriz de permisos

Gestión · PermissionMatrix · .amset-matrix

Qué es y cuándo usarlo

La matriz de permisos de un rol: los módulos en filas, lo que se puede hacer en columnas y una casilla en cada cruce. Para el editor de roles de una aplicación de gestión.

Cuándo usarlo

Montar o revisar lo que puede hacer un rol o un usuario sobre cada módulo.
modules son las filas y actions, las columnas. value es un mapa de módulo a la lista de claves de acciones concedidas ({ invoices: ['read', 'create'] }); sin value, la matriz lleva su propio estado desde initialValue.
Hay una casilla por fila, otra por columna y otra en la esquina para marcar o quitar de golpe, con estado intermedio cuando solo hay parte.
locked fija celdas que no se pueden cambiar (un permiso heredado de otro rol, uno que el sistema impone), en el mismo formato que value. Marcar una fila entera las respeta.
readOnly para ver lo concedido sin tocarlo; disabled para apagarla del todo.

Cuándo no

Un único permiso suelto: una casilla o un interruptor.
Esconder un botón según lo concedido: PermissionGate.
Marcarlo aquí no concede nada por sí solo: lo que vale lo decide el servidor al guardar y al ejecutar.

Teclado: es una sola parada del tabulador y se recorre con las flechas como una hoja de cálculo. Inicio y Fin van al principio y al final de la fila, Ctrl+Inicio y Ctrl+Fin a la primera y a la última casilla. Espacio marca y desmarca.

Accesibilidad: es una rejilla con nombre (label, obligatorio). Cada casilla se llama por su cruce («Facturas: Borrar»); las de fila y columna dicen qué marcan. Cada cambio se anuncia, también el de una fila o una columna entera, porque cambia casillas que quien escucha no ve. Las celdas bloqueadas llevan aria-disabled y siguen enfocables, para poder leerlas.

Aspecto fino: variables --amset-matrix-cell (la zona que se pulsa, 44 px con el dedo), --amset-matrix-box (la casilla) y --amset-matrix-row-width (el ancho de la columna de módulos).

Cómo se ve

<PermissionMatrix
  label="Permisos del rol «Gestor»"
  modules={modulos}
  actions={acciones}
  value={permisos}
  onChange={setPermisos}
  locked={{ pedidos: ["ver"] }}
  showCounts
/>

Props

Se importa con import { PermissionMatrix } from '@amset/ui'. Las obligatorias van marcadas.

Prop	Tipo	Para qué sirve
`actions`obligatoria	`readonly PermissionAction[]`	Las columnas: lo que se puede hacer (ver, crear, editar, borrar...).
`label`obligatoria	`string`	Como se llama la matriz: nombra la rejilla para quien usa un lector de pantalla. Obligatorio.
`modules`obligatoria	`readonly PermissionModule[]`	Las filas: los modulos o recursos sobre los que se concede.
`className`	`string`	Se une a las clases de la biblioteca, no las sustituye.
`disabled`	`boolean`	—
`initialValue`	`Readonly<Record<string, readonly string[]>>`	—
`locked`	`Readonly<Record<string, readonly string[]>>`	Celdas que no se pueden cambiar (un rol heredado, un permiso que el sistema impone): mismo formato que `value`.
`onChange`	`(value: PermissionGrants) => void`	—
`readOnly`	`boolean`	Solo se lee: se ven las casillas y se recorren con el teclado, pero no cambian.
`showCounts`	`boolean`	El «3 de 5» de cada fila. Por defecto, si.
`value`	`Readonly<Record<string, readonly string[]>>`	Lo concedido: cada modulo con la lista de claves de acciones. Si se pasa, la matriz es controlada.

Acepta además los atributos del elemento que pinta: className, style, data-*, aria-* y sus eventos.

Mandos

Estas variables CSS son la forma de adaptarlo. Se declaran sobre el selector del componente, no en :root: la hoja las redeclara en la propia regla y una declaración en el mismo elemento gana siempre.

Variable	Por defecto
`--amset-matrix-cell`	`2.5rem`
`--amset-matrix-box`	`1.125rem`
`--amset-matrix-row-width`	`14rem`

Cómo se cambia

.amset-matrix {
  --amset-matrix-cell: ...;
  --amset-matrix-box: ...;
}

En el banco de pruebas

Cada estado y cada variante, para tocarlos de uno en uno, en su ficha de ui.amset.tech:

	Ver	Editar	Borrar
PedidosVer y gestionar pedidos
Facturas
Clientes
Ajustes