72 lines
1.8 KiB
Vue
72 lines
1.8 KiB
Vue
<script setup lang="ts">
|
|
const state = reactive<{ [key: string]: boolean }>({
|
|
email: true,
|
|
desktop: false,
|
|
product_updates: true,
|
|
weekly_digest: false,
|
|
important_updates: true
|
|
})
|
|
|
|
const sections = [{
|
|
title: 'Notification channels',
|
|
description: 'Where can we notify you?',
|
|
fields: [{
|
|
name: 'email',
|
|
label: 'Email',
|
|
description: 'Receive a daily email digest.'
|
|
}, {
|
|
name: 'desktop',
|
|
label: 'Desktop',
|
|
description: 'Receive desktop notifications.'
|
|
}]
|
|
}, {
|
|
title: 'Account updates',
|
|
description: 'Receive updates about Nuxt UI.',
|
|
fields: [{
|
|
name: 'weekly_digest',
|
|
label: 'Weekly digest',
|
|
description: 'Receive a weekly digest of news.'
|
|
}, {
|
|
name: 'product_updates',
|
|
label: 'Product updates',
|
|
description: 'Receive a monthly email with all new features and updates.'
|
|
}, {
|
|
name: 'important_updates',
|
|
label: 'Important updates',
|
|
description: 'Receive emails about important updates like security fixes, maintenance, etc.'
|
|
}]
|
|
}]
|
|
|
|
async function onChange() {
|
|
// Do something with data
|
|
console.log(state)
|
|
}
|
|
</script>
|
|
|
|
<template>
|
|
<div v-for="(section, index) in sections" :key="index">
|
|
<UPageCard
|
|
:title="section.title"
|
|
:description="section.description"
|
|
variant="naked"
|
|
class="mb-4"
|
|
/>
|
|
|
|
<UPageCard variant="subtle" :ui="{ container: 'divide-y divide-default' }">
|
|
<UFormField
|
|
v-for="field in section.fields"
|
|
:key="field.name"
|
|
:name="field.name"
|
|
:label="field.label"
|
|
:description="field.description"
|
|
class="flex items-center justify-between not-last:pb-4 gap-2"
|
|
>
|
|
<USwitch
|
|
v-model="state[field.name]"
|
|
@update:model-value="onChange"
|
|
/>
|
|
</UFormField>
|
|
</UPageCard>
|
|
</div>
|
|
</template>
|