From bd0846b6915f64887152ebff2b7cf6d1bf6d5997 Mon Sep 17 00:00:00 2001
From: Methapon2001 <61303214+Methapon2001@users.noreply.github.com>
Date: Fri, 2 Aug 2024 09:28:09 +0700
Subject: [PATCH] feat: clear image

---
 src/components/ImageUploadDialog.vue | 27 +++++++++++++++++++++++++--
 1 file changed, 25 insertions(+), 2 deletions(-)

diff --git a/src/components/ImageUploadDialog.vue b/src/components/ImageUploadDialog.vue
index 005a0652..407e0080 100644
--- a/src/components/ImageUploadDialog.vue
+++ b/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"
-          text-color="grey-10"
+          :color="$q.dark.isActive ? 'grey-9' : 'grey-4'"
+          :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"