PxDisplayOptions

Renders a set of configuration inputs — textarea, radio group, or text — from a displayOptions.inputs schema. Each input's value is mutated directly on the object you pass in.

Usage

Demo

Internal Notes

Priority

LowMediumHigh

Reference Code

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

const displayOptions = ref({
  inputs: [
    {
      title: 'Internal Notes',
      type: 'textarea',
      items: [{ title: 'Internal Notes', value: '' }],
    },
    {
      title: 'Priority',
      type: 'radio',
      value: 'medium',
      items: [
        { title: 'Low', value: 'low' },
        { title: 'Medium', value: 'medium' },
        { title: 'High', value: 'high' },
      ],
    },
    {
      title: 'Reference Code',
      type: 'text',
      items: [{ title: 'Reference Code', value: '' }],
    },
  ],
})
</script>

<template>
  <PxDisplayOptions :display-options="displayOptions" />
</template>

Props

Prop	Type	Default	Description
displayOptionsrequired	PxDisplayOptions	—	Schema describing the inputs to render.

PxDisplayOptions Interface

interface DisplayOptionItem {
  title: string
  value: string
}

interface DisplayOptionInput {
  title: string
  type: 'textarea' | 'radio' | 'text'
  items: DisplayOptionItem[]
  value?: string   // for radio inputs
}

interface PxDisplayOptions {
  inputs: DisplayOptionInput[]
}

NOTE

PxDisplayOptions has no v-model or emits — it mutates items[i].value (or input.value for radio groups) directly on the object you pass in. Use a ref/reactive object and read the values back from it.