85 lines
2.2 KiB
Vue
85 lines
2.2 KiB
Vue
<script setup>
|
|
import { useDialogPluginComponent } from 'quasar'
|
|
|
|
const { dialogRef, onDialogHide, onDialogOK, onDialogCancel } =
|
|
useDialogPluginComponent()
|
|
|
|
defineEmits({
|
|
...useDialogPluginComponent.emitsObject,
|
|
})
|
|
|
|
const props = defineProps({
|
|
icon: {
|
|
type: String,
|
|
default: '',
|
|
},
|
|
alt: {
|
|
type: String,
|
|
default: 'Icon',
|
|
},
|
|
})
|
|
|
|
const theme = ref(false)
|
|
const animation = ref(true)
|
|
</script>
|
|
|
|
<template>
|
|
<QDialog ref="dialogRef" @hide="onDialogHide">
|
|
<QCard class="dialog">
|
|
<div class="overlay background"></div>
|
|
<div class="overlay content">
|
|
<img
|
|
class="icon-badge user-select-none"
|
|
draggable="false"
|
|
:src="props.icon"
|
|
:alt="props.alt"
|
|
/>
|
|
<QCardSection>
|
|
<h3 class="alex text-align-center">Site options</h3>
|
|
<div class="row">
|
|
<div class="col-12 col-sm-6">
|
|
<p>
|
|
<strong>Theme</strong><br />
|
|
Available in all flavors, vanilla and chocolate.
|
|
</p>
|
|
<QToggle
|
|
v-model="theme"
|
|
class="px-5"
|
|
color="black"
|
|
dense
|
|
size="xl"
|
|
:unchecked-icon="mdiWhiteBalanceSunny"
|
|
:checked-icon="mdiWeatherNight"
|
|
icon-color="primary"
|
|
@change="theme = !theme"
|
|
/>
|
|
<QCheckbox v-model="theme" />
|
|
</div>
|
|
<div class="col-12 col-sm-6">
|
|
<p>
|
|
<strong>Animation</strong><br />
|
|
Some computers may have issues rendering that gorgeous
|
|
background animation. Enabling it substantially increases power
|
|
consumption.
|
|
</p>
|
|
<QToggle
|
|
v-model="animation"
|
|
color="purple"
|
|
dense
|
|
size="xl"
|
|
:unchecked-icon="mdiStop"
|
|
:checked-icon="mdiPlay"
|
|
@change="theme = !theme"
|
|
/>
|
|
</div>
|
|
</div>
|
|
Report a bug
|
|
<QCardActions>
|
|
<QBtn label="OK" @click="onDialogOK" />
|
|
</QCardActions>
|
|
</QCardSection>
|
|
</div>
|
|
</QCard>
|
|
</QDialog>
|
|
</template>
|