77 lines
2.5 KiB
Vue
77 lines
2.5 KiB
Vue
<script setup lang="ts">
|
|
import { ref } from "vue";
|
|
import {XIcon } from "vue-tabler-icons"
|
|
const dialog = ref(false);
|
|
const notifications = ref(false);
|
|
const sound = ref(true);
|
|
const widgets = ref(false);
|
|
</script>
|
|
|
|
<template>
|
|
<div class="text-center">
|
|
<v-dialog
|
|
v-model="dialog"
|
|
fullscreen
|
|
:scrim="false"
|
|
transition="dialog-bottom-transition"
|
|
>
|
|
<template v-slot:activator="{ props }">
|
|
<v-btn color="error" class="w-100" dark v-bind="props" flat> Open Fullscreen Dialog </v-btn>
|
|
</template>
|
|
<v-card>
|
|
<v-toolbar dark color="primary" style="flex: unset">
|
|
<v-btn icon color="inherit" @click="dialog = false" flat>
|
|
<XIcon width="20" />
|
|
</v-btn>
|
|
<v-toolbar-title>Settings</v-toolbar-title>
|
|
<v-spacer></v-spacer>
|
|
<v-toolbar-items>
|
|
<v-btn dark variant="text" @click="dialog = false" flat> Save </v-btn>
|
|
</v-toolbar-items>
|
|
</v-toolbar>
|
|
<v-card-item>
|
|
<v-list lines="two" subheader>
|
|
User Controls
|
|
<v-list-item
|
|
title="Content filtering"
|
|
subtitle="Set the content filtering level to restrict apps that can be downloaded"
|
|
></v-list-item>
|
|
<v-list-item
|
|
title="Password"
|
|
subtitle="Require password for purchase or use password to restrict purchase"
|
|
></v-list-item>
|
|
</v-list>
|
|
<v-divider></v-divider>
|
|
<v-list lines="two" subheader>
|
|
General
|
|
<v-list-item
|
|
title="Notifications"
|
|
subtitle="Notify me about updates to apps or games that I downloaded"
|
|
>
|
|
<template v-slot:prepend>
|
|
<v-checkbox v-model="notifications"></v-checkbox>
|
|
</template>
|
|
</v-list-item>
|
|
<v-list-item
|
|
title="Sound"
|
|
subtitle="Auto-update apps at any time. Data charges may apply"
|
|
>
|
|
<template v-slot:prepend>
|
|
<v-checkbox v-model="sound"></v-checkbox>
|
|
</template>
|
|
</v-list-item>
|
|
<v-list-item
|
|
title="Auto-add widgets"
|
|
subtitle="Automatically add home screen widgets"
|
|
>
|
|
<template v-slot:prepend>
|
|
<v-checkbox v-model="widgets"></v-checkbox>
|
|
</template>
|
|
</v-list-item>
|
|
</v-list>
|
|
</v-card-item>
|
|
</v-card>
|
|
</v-dialog>
|
|
</div>
|
|
</template>
|