Added options, preparing for Quasar rewrite

components/ui/Dialog.vue

@@ -0,0 +1,84 @@
+<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>