mirror of
https://github.com/nuxt/ui.git
synced 2026-09-14 19:51:10 +08:00
Benjamin Canac
52 lines
1.4 KiB
Vue
52 lines
1.4 KiB
Vue
<script setup lang="ts">
|
|
const items = [
|
|
{
|
|
label: 'Account',
|
|
icon: 'i-lucide-user',
|
|
slot: 'account'
|
|
},
|
|
{
|
|
label: 'Password',
|
|
icon: 'i-lucide-lock',
|
|
slot: 'password'
|
|
}
|
|
]
|
|
|
|
const state = reactive({
|
|
name: 'Benjamin Canac',
|
|
username: 'benjamincanac',
|
|
currentPassword: '',
|
|
newPassword: '',
|
|
confirmPassword: ''
|
|
})
|
|
</script>
|
|
|
|
<template>
|
|
<UTabs :items="items">
|
|
<template #account>
|
|
<UForm :state="state" class="flex flex-col gap-4">
|
|
<UFormField label="Name" name="name">
|
|
<UInput v-model="state.name" class="w-full" />
|
|
</UFormField>
|
|
<UFormField label="Username" name="username">
|
|
<UInput v-model="state.username" class="w-full" />
|
|
</UFormField>
|
|
</UForm>
|
|
</template>
|
|
|
|
<template #password>
|
|
<UForm :state="state" class="flex flex-col gap-4">
|
|
<UFormField label="Current Password" name="current" required>
|
|
<UInput v-model="state.currentPassword" type="password" required class="w-full" />
|
|
</UFormField>
|
|
<UFormField label="New Password" name="new" required>
|
|
<UInput v-model="state.newPassword" type="password" required class="w-full" />
|
|
</UFormField>
|
|
<UFormField label="Confirm Password" name="confirm" required>
|
|
<UInput v-model="state.confirmPassword" type="password" required class="w-full" />
|
|
</UFormField>
|
|
</UForm>
|
|
</template>
|
|
</UTabs>
|
|
</template>
|