Move to appConfig, Vuetify 3

components/ui/Dialog.vue

@@ -1,13 +1,4 @@
 <script setup>
-import { useDialogPluginComponent } from 'quasar'
-
-const { dialogRef, onDialogHide, onDialogOK, onDialogCancel } =
-  useDialogPluginComponent()
-
-defineEmits({
-  ...useDialogPluginComponent.emitsObject,
-})
-
 const props = defineProps({
   icon: {
     type: String,
@@ -24,61 +15,62 @@ 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>
+  <p>FALSE</p>
+  <!--  <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>

components/ui/XIcon.vue

@@ -0,0 +1,20 @@
+<script setup lang="ts">
+const props = defineProps({
+  name: {
+    type: String,
+    required: true,
+  },
+  size: {
+    type: String,
+    default: 'md',
+  },
+  color: {
+    type: String,
+    default: 'currentColor',
+  },
+})
+</script>
+
+<template></template>
+
+<style scoped lang="scss"></style>