DynamicDialog

1<script setup lang="ts">2import { Button, DynamicDialog, Listbox, useDialog, useDialogRef } from '@vitral/vue';3import { defineComponent, h, ref } from 'vue';4 5// In an app these would be components of their own; they are inline here so the demo is one file.6const ProductPicker = defineComponent({7    setup() {8        const dialog = useDialogRef()!;9        const choice = ref<string | null>(null);10        const products = dialog.data as string[];11        return () =>12            h('div', { style: 'display: flex; flex-direction: column; gap: 0.75rem; min-width: 18rem' }, [13                h(Listbox, { modelValue: choice.value, 'onUpdate:modelValue': (v: unknown) => (choice.value = v as string), options: products, 'aria-label': 'Products' }),14                h('div', { style: 'display: flex; justify-content: flex-end; gap: 0.5rem' }, [15                    h(Button, { label: 'Cancel', severity: 'secondary', onClick: () => dialog.close() }),16                    h(Button, { label: 'Choose', disabled: !choice.value, onClick: () => dialog.close(choice.value) })17                ])18            ]);19    }20});21 22const dialog = useDialog();23const picked = ref('—');24 25function pick() {26    dialog.open(ProductPicker, {27        props: { header: 'Choose a product', style: { width: '24rem' }, dismissableMask: true },28        data: ['Keyboard', 'Mouse', 'Monitor', 'Headphones'],29        onClose: ({ type, data }) => (picked.value = type === 'config-close' && data ? String(data) : 'nothing')30    });31}32</script>33 34<template>35    <DynamicDialog />36    <Button label="Choose a product" icon="search" @click="pick" />37    <small style="color: var(--vt-text-muted-color)">Picked: {{ picked }}</small>38</template>