71 lines
2.0 KiB
Vue
71 lines
2.0 KiB
Vue
<script setup lang="ts">
|
|
import {
|
|
Dialog,
|
|
DialogContent,
|
|
DialogHeader,
|
|
DialogTitle,
|
|
DialogDescription,
|
|
DialogFooter,
|
|
} from '@/components/ui/dialog'
|
|
import { Button } from '@/components/ui/button'
|
|
import { Input } from '@/components/ui/input'
|
|
import { Label } from '@/components/ui/label'
|
|
import { Switch } from '@/components/ui/switch'
|
|
import { defineProps, defineEmits } from 'vue'
|
|
import type { PropType } from 'vue'
|
|
|
|
// 1) runtime props so Vue + TS agree
|
|
const props = defineProps({
|
|
modelValue: {
|
|
type: Boolean as PropType<boolean>,
|
|
required: true,
|
|
},
|
|
})
|
|
|
|
// 2) two emits: v-model and confirm
|
|
const emit = defineEmits<{
|
|
(e: 'update:modelValue', v: boolean): void
|
|
(e: 'confirm'): void
|
|
}>()
|
|
|
|
function onSave() {
|
|
emit('confirm')
|
|
// close the dialog
|
|
emit('update:modelValue', false)
|
|
}
|
|
</script>
|
|
|
|
<template>
|
|
<Dialog
|
|
:open="props.modelValue"
|
|
@update:open="(v: boolean) => emit('update:modelValue', v)"
|
|
>
|
|
<DialogContent class="sm:max-w-[425px]">
|
|
<DialogHeader>
|
|
<DialogTitle>Edit profile</DialogTitle>
|
|
<DialogDescription>
|
|
Make changes to user credentials below.
|
|
</DialogDescription>
|
|
</DialogHeader>
|
|
|
|
<div class="grid gap-4 py-4">
|
|
<div class="grid grid-cols-4 items-center gap-4">
|
|
<Label for="username" class="text-right">Username</Label>
|
|
<Input id="username" class="col-span-3" />
|
|
</div>
|
|
<div class="grid grid-cols-4 items-center gap-4">
|
|
<Label for="password" class="text-right">Password</Label>
|
|
<Input id="password" class="col-span-3" type="password" />
|
|
</div>
|
|
<div class="grid grid-cols-4 items-center gap-4">
|
|
<Label for="isAdmin" class="text-right">Make admin</Label>
|
|
<Switch id="isAdmin"/>
|
|
</div>
|
|
</div>
|
|
|
|
<DialogFooter>
|
|
<Button @click="onSave">Save changes</Button>
|
|
</DialogFooter>
|
|
</DialogContent>
|
|
</Dialog>
|
|
</template> |