PxStateChecklist

Un componente dinámico impulsado por esquemas, diseñado para representar opciones de tres estados (Verdadero/Falso/Marcado) sobre listas de elementos. Soporta campos de texto opcionales por elemento según la configuración del esquema.

Lista de Verificación Estándar

Renderiza una lista de elementos con opciones de Verdadero (✓), Falso (✗) y Marcado (⚑).

Lista de Verificación Estándar

Auto Save

Dark Mode

Push Notifications

Send Telemetry Data

Hardware Acceleration

<script setup>
import { ref } from 'vue'
import { PxStateChecklist } from 'praxis-vue-ui'

const data = ref({})
const field = {
  label: "Preferencias del Sistema",
  type: "check_list",
  fields: {
    list_children: [
      { key: "auto_save", label: "Guardado Automático", components: [{ type: "radio", value: null }, { type: "checkbox", checked: false }] },
      { key: "dark_mode", label: "Modo Oscuro", components: [{ type: "radio", value: null }, { type: "checkbox", checked: false }] },
      { key: "notifications", label: "Notificaciones Push", components: [{ type: "radio", value: null }, { type: "checkbox", checked: false }] },
      { key: "telemetry", label: "Enviar Telemetría", components: [{ type: "radio", value: null }, { type: "checkbox", checked: false }] },
      { key: "hardware_accel", label: "Aceleración por Hardware", components: [{ type: "radio", value: null }, { type: "checkbox", checked: false }] }
    ]
  }
}
</script>

<template>
  <PxStateChecklist :field="field" v-model="data" :default-open="true" />
</template>

Lista con Campos de Entrada

Si el esquema contiene componentes input_father o input para elementos hijos, el componente se adapta automáticamente para mostrar campos de entrada de texto.

Checklist con Entradas de Texto

AdBlocker

Grammarly

Vue DevTools

React DevTools

<PxStateChecklist :field="inputSchema" v-model="data" :default-open="true" />

Referencia de la API

Prop	Type	Default	Description
fieldrequired	FormSchemaField	—	—
modelValue	Record	—	—
defaultOpen	boolean	—	—

Métodos Expuestos

Se puede acceder mediante una referencia de plantilla (template ref) para controlar la lista de verificación de forma programática:

Nombre	Descripción
clearAll()	Restablece todas las selecciones y campos de texto a sus estados vacíos predeterminados.
setRestFalse()	Establece el valor de radio en "no" para todos los elementos que aún no han sido respondidos.
setAllFalse()	Establece el valor de radio en "no" para todos los elementos, sobrescribiendo las respuestas actuales.

NOTE

Este componente está diseñado para formularios dinámicos guiados por esquemas. Para listas de verificación simples sin esquemas, considere usar PxCheckbox directamente.