PxDialogInput

A file-upload dialog: drag-and-drop (or click-to-browse) a single file, preview it, and confirm. It's not a text input despite the name — it's a self-contained modal built on PxDialog.

Manages its own visibility — no v-model

The dialog opens as soon as it's mounted (its internal visible state starts true) and there's no prop to control it from outside. Conditionally render the component itself with v-if, and unmount it in response to the close/upload-complete events.

Usage

Demo

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

const showUpload = ref(false)

const onUploadComplete = (file) => {
  console.log('Uploaded:', file.name)
  showUpload.value = false
}
</script>

<template>
  <button @click="showUpload = true">Upload a document</button>

  <PxDialogInput
    v-if="showUpload"
    @close="showUpload = false"
    @upload-complete="onUploadComplete"
  />
</template>

Props

Prop	Type	Default	Description
theme	'light' | 'dark' | 'default'	'default'	Intended to force a light-background dialog regardless of site theme. Currently a no-op — see note below.

theme="light" currently has no effect

The component applies a light-theme-dialog class and ships CSS scoped to .light-theme-dialog.p-dialog, but the underlying PxDialog renders a .px-dialog class, not .p-dialog — so that selector never matches anything in the current DOM. This looks like leftover styling from an earlier implementation. Worth flagging as a bug if you rely on it.

Emits

Event	Payload	Description
close	—	Emitted when the dialog is dismissed for any reason (Send, remove-and-close, or the dialog's own close button).
upload-complete	UploadDocumentFile	Emitted with the selected file object when the user clicks 'Send'.