From 7400f9f611724e9d7f03d59597251faa2f712d78 Mon Sep 17 00:00:00 2001
From: Methapon Metanipat <methapon@frappet.com>
Date: Wed, 28 Aug 2024 13:17:29 +0700
Subject: [PATCH] feat: add clear button

---
 src/components/ImageUploadDialog.vue  | 13 ++++---------
 src/components/button/ClearButton.vue | 26 ++++++++++++++++++++++++++
 src/components/button/index.ts        |  1 +
 3 files changed, 31 insertions(+), 9 deletions(-)
 create mode 100644 src/components/button/ClearButton.vue

diff --git a/src/components/ImageUploadDialog.vue b/src/components/ImageUploadDialog.vue
index a5c56788..0d72d366 100644
--- a/src/components/ImageUploadDialog.vue
+++ b/src/components/ImageUploadDialog.vue
@@ -1,6 +1,6 @@
 <script lang="ts" setup>
 import AppBox from './app/AppBox.vue';
-import { CancelButton, SaveButton } from './button';
+import { CancelButton, ClearButton, SaveButton } from './button';
 
 defineExpose({ browse });
 defineProps<{
@@ -131,20 +131,15 @@ async function downloadImage(url: string) {
         class="row items-center justify-end q-py-sm q-px-md bordered-t"
         v-if="!hiddenFooter"
       >
-        <q-btn
-          dense
-          unelevated
-          flat
-          :color="$q.dark.isActive ? 'grey-9' : 'grey-4'"
-          :text-color="$q.dark.isActive ? 'grey-1' : 'grey-10'"
-          :label="$t('general.clear')"
+        <ClearButton
+          outlined
           @click="
             inputFile && (inputFile.value = ''),
               (imageUrl = defaultUrl || fallbackUrl || ''),
               (file = null)
           "
           class="q-px-md q-mr-auto"
-          :disable="
+          :disabled="
             clearButtonDisabled ||
             imageUrl === fallbackUrl ||
             imageUrl === defaultUrl ||
diff --git a/src/components/button/ClearButton.vue b/src/components/button/ClearButton.vue
new file mode 100644
index 00000000..67d437f1
--- /dev/null
+++ b/src/components/button/ClearButton.vue
@@ -0,0 +1,26 @@
+<script lang="ts" setup>
+import MainButton from './MainButton.vue';
+
+defineEmits<{
+  (e: 'click', v: MouseEvent): void;
+}>();
+defineProps<{
+  iconOnly?: boolean;
+  solid?: boolean;
+  outlined?: boolean;
+  disabled?: boolean;
+  dark?: boolean;
+}>();
+</script>
+
+<template>
+  <MainButton
+    @click="(e) => $emit('click', e)"
+    v-bind="{ ...$props, ...$attrs }"
+    icon="mdi-broom"
+    color="var(--gray-7-hsl)"
+    :title="iconOnly ? $t('general.clear') : undefined"
+  >
+    {{ $t('general.clear') }}
+  </MainButton>
+</template>
diff --git a/src/components/button/index.ts b/src/components/button/index.ts
index 87f1b458..945f207a 100644
--- a/src/components/button/index.ts
+++ b/src/components/button/index.ts
@@ -6,3 +6,4 @@ export { default as DeleteButton } from './DeleteButton.vue';
 export { default as BackButton } from './BackButton.vue';
 export { default as UndoButton } from './UndoButton.vue';
 export { default as ToggleButton } from './ToggleButton.vue';
+export { default as ClearButton } from './ClearButton.vue';