feat: clear image

src/components/ImageUploadDialog.vue

@@ -3,7 +3,10 @@ import { ref } from 'vue';
 import AppBox from './app/AppBox.vue';
 
 defineProps<{
+  clearButtonDisabled?: boolean;
+  clearButton?: boolean;
   hiddenFooter?: boolean;
+  defaultUrl?: string;
 }>();
 const imageUrl = defineModel<string>('imageUrl', {
   required: false,
@@ -94,8 +97,28 @@ function change(e: Event) {
         <q-btn
           dense
           unelevated
-          color="grey-4"
+          :color="$q.dark.isActive ? 'grey-9' : 'grey-4'"
-          text-color="grey-10"
+          :text-color="$q.dark.isActive ? 'grey-1' : 'grey-10'"
+          :label="$t('clear')"
+          @click="
+            inputFile && (inputFile.value = ''),
+              (imageUrl = defaultUrl || fallbackUrl || ''),
+              (file = null)
+          "
+          class="q-px-md q-mr-auto"
+          :disable="
+            clearButtonDisabled ||
+            imageUrl === fallbackUrl ||
+            imageUrl === defaultUrl ||
+            !imageUrl
+          "
+          v-if="clearButton"
+        />
+        <q-btn
+          dense
+          unelevated
+          :color="$q.dark.isActive ? 'grey-9' : 'grey-4'"
+          :text-color="$q.dark.isActive ? 'grey-1' : 'grey-10'"
           :label="$t('cancel')"
           @click="inputFile && (inputFile.value = ''), (file = null)"
           class="q-px-md q-mr-sm"