feat: add clear button

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
+        <ClearButton
-          dense
+          outlined
-          unelevated
-          flat
-          :color="$q.dark.isActive ? 'grey-9' : 'grey-4'"
-          :text-color="$q.dark.isActive ? 'grey-1' : 'grey-10'"
-          :label="$t('general.clear')"
           @click="
             inputFile && (inputFile.value = ''),
               (imageUrl = defaultUrl || fallbackUrl || ''),
               (file = null)
           "
           class="q-px-md q-mr-auto"
-          :disable="
+          :disabled="
             clearButtonDisabled ||
             imageUrl === fallbackUrl ||
             imageUrl === defaultUrl ||

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>

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';