From b309f91ca4202957350236267cc1c44807e382a4 Mon Sep 17 00:00:00 2001
From: Methapon2001 <61303214+Methapon2001@users.noreply.github.com>
Date: Thu, 8 Aug 2024 11:09:45 +0700
Subject: [PATCH] feat: icon only button

---
 src/components/button/AddButton.vue    |  7 ++++++-
 src/components/button/BackButton.vue   |  9 +++++++--
 src/components/button/CancelButton.vue |  9 +++++++--
 src/components/button/DeleteButton.vue | 11 ++++++++---
 src/components/button/EditButton.vue   |  9 +++++++--
 src/components/button/SaveButton.vue   |  9 +++++++--
 src/components/button/UndoButton.vue   |  9 +++++++--
 7 files changed, 49 insertions(+), 14 deletions(-)

diff --git a/src/components/button/AddButton.vue b/src/components/button/AddButton.vue
index ebab509e..7ab80c57 100644
--- a/src/components/button/AddButton.vue
+++ b/src/components/button/AddButton.vue
@@ -5,6 +5,7 @@ defineEmits<{
   (e: 'click', v: MouseEvent): void;
 }>();
 defineProps<{
+  iconOnly?: boolean;
   solid?: boolean;
   outlined?: boolean;
   disabled?: boolean;
@@ -20,6 +21,7 @@ defineProps<{
       'main-btn__solid': solid && !outlined,
       'main-btn__outline': !solid && outlined,
       'main-btn__dark': dark,
+      'main-btn__icon-only': iconOnly,
     }"
     :disabled="disabled"
   >
@@ -63,9 +65,12 @@ defineProps<{
 
   & > .main-btn-icon {
     color: hsla(var(--button-main-color) / 1);
-    margin-right: var(--size-1);
     font-size: 1.2rem;
   }
+
+  &:not(.main-btn__icon-only) > .main-btn-icon {
+    margin-right: var(--size-1);
+  }
 }
 
 .main-btn__solid {
diff --git a/src/components/button/BackButton.vue b/src/components/button/BackButton.vue
index 03c6ba86..fb0c42bc 100644
--- a/src/components/button/BackButton.vue
+++ b/src/components/button/BackButton.vue
@@ -5,6 +5,7 @@ defineEmits<{
   (e: 'click', v: MouseEvent): void;
 }>();
 defineProps<{
+  iconOnly?: boolean;
   solid?: boolean;
   outlined?: boolean;
   disabled?: boolean;
@@ -20,13 +21,14 @@ defineProps<{
       'main-btn__solid': solid && !outlined,
       'main-btn__outline': !solid && outlined,
       'main-btn__dark': dark,
+      'main-btn__icon-only': iconOnly,
     }"
     :disabled="disabled"
   >
     <slot name="icon">
       <Icon icon="mdi-arrow-left" class="main-btn-icon" />
     </slot>
-    <slot>{{ $t('back') }}</slot>
+    <slot v-if="!iconOnly">{{ $t('back') }}</slot>
   </button>
 </template>
 
@@ -63,9 +65,12 @@ defineProps<{
 
   & > .main-btn-icon {
     color: hsla(var(--button-main-color) / 1);
-    margin-right: var(--size-1);
     font-size: 1.2rem;
   }
+
+  &:not(.main-btn__icon-only) > .main-btn-icon {
+    margin-right: var(--size-1);
+  }
 }
 
 .main-btn__solid {
diff --git a/src/components/button/CancelButton.vue b/src/components/button/CancelButton.vue
index 636d2746..7fa28590 100644
--- a/src/components/button/CancelButton.vue
+++ b/src/components/button/CancelButton.vue
@@ -5,6 +5,7 @@ defineEmits<{
   (e: 'click', v: MouseEvent): void;
 }>();
 defineProps<{
+  iconOnly?: boolean;
   solid?: boolean;
   outlined?: boolean;
   disabled?: boolean;
@@ -20,13 +21,14 @@ defineProps<{
       'main-btn__solid': solid && !outlined,
       'main-btn__outline': !solid && outlined,
       'main-btn__dark': dark,
+      'main-btn__icon-only': iconOnly,
     }"
     :disabled="disabled"
   >
     <slot name="icon">
       <Icon icon="mdi-close" class="main-btn-icon" />
     </slot>
-    <slot>{{ $t('cancel') }}</slot>
+    <slot v-if="!iconOnly">{{ $t('cancel') }}</slot>
   </button>
 </template>
 
@@ -63,9 +65,12 @@ defineProps<{
 
   & > .main-btn-icon {
     color: hsla(var(--button-main-color) / 1);
-    margin-right: var(--size-1);
     font-size: 1.2rem;
   }
+
+  &:not(.main-btn__icon-only) > .main-btn-icon {
+    margin-right: var(--size-1);
+  }
 }
 
 .main-btn__solid {
diff --git a/src/components/button/DeleteButton.vue b/src/components/button/DeleteButton.vue
index 8cc8ccae..7cac59f9 100644
--- a/src/components/button/DeleteButton.vue
+++ b/src/components/button/DeleteButton.vue
@@ -5,6 +5,7 @@ defineEmits<{
   (e: 'click', v: MouseEvent): void;
 }>();
 defineProps<{
+  iconOnly?: boolean;
   solid?: boolean;
   outlined?: boolean;
   disabled?: boolean;
@@ -20,13 +21,14 @@ defineProps<{
       'main-btn__solid': solid && !outlined,
       'main-btn__outline': !solid && outlined,
       'main-btn__dark': dark,
+      'main-btn__icon-only': iconOnly,
     }"
     :disabled="disabled"
   >
     <slot name="icon">
-      <Icon icon="mdi-close" class="main-btn-icon" />
+      <Icon icon="mdi-trash-can" class="main-btn-icon" />
     </slot>
-    <slot>{{ $t('delete') }}</slot>
+    <slot v-if="!iconOnly">{{ $t('delete') }}</slot>
   </button>
 </template>
 
@@ -63,9 +65,12 @@ defineProps<{
 
   & > .main-btn-icon {
     color: hsla(var(--button-main-color) / 1);
-    margin-right: var(--size-1);
     font-size: 1.2rem;
   }
+
+  &:not(.main-btn__icon-only) > .main-btn-icon {
+    margin-right: var(--size-1);
+  }
 }
 
 .main-btn__solid {
diff --git a/src/components/button/EditButton.vue b/src/components/button/EditButton.vue
index 9cc1bbe8..4771d4b0 100644
--- a/src/components/button/EditButton.vue
+++ b/src/components/button/EditButton.vue
@@ -5,6 +5,7 @@ defineEmits<{
   (e: 'click', v: MouseEvent): void;
 }>();
 defineProps<{
+  iconOnly?: boolean;
   solid?: boolean;
   outlined?: boolean;
   disabled?: boolean;
@@ -20,13 +21,14 @@ defineProps<{
       'main-btn__solid': solid && !outlined,
       'main-btn__outline': !solid && outlined,
       'main-btn__dark': dark,
+      'main-btn__icon-only': iconOnly,
     }"
     :disabled="disabled"
   >
     <slot name="icon">
       <Icon icon="mdi-pencil" class="main-btn-icon" />
     </slot>
-    <slot>{{ $t('edit') }}</slot>
+    <slot v-if="!iconOnly">{{ $t('edit') }}</slot>
   </button>
 </template>
 
@@ -63,9 +65,12 @@ defineProps<{
 
   & > .main-btn-icon {
     color: hsla(var(--button-main-color) / 1);
-    margin-right: var(--size-1);
     font-size: 1.2rem;
   }
+
+  &:not(.main-btn__icon-only) > .main-btn-icon {
+    margin-right: var(--size-1);
+  }
 }
 
 .main-btn__solid {
diff --git a/src/components/button/SaveButton.vue b/src/components/button/SaveButton.vue
index 6d04f5d3..99747f60 100644
--- a/src/components/button/SaveButton.vue
+++ b/src/components/button/SaveButton.vue
@@ -5,6 +5,7 @@ defineEmits<{
   (e: 'click', v: MouseEvent): void;
 }>();
 defineProps<{
+  iconOnly?: boolean;
   solid?: boolean;
   outlined?: boolean;
   disabled?: boolean;
@@ -20,13 +21,14 @@ defineProps<{
       'main-btn__solid': solid && !outlined,
       'main-btn__outline': !solid && outlined,
       'main-btn__dark': dark,
+      'main-btn__icon-only': iconOnly,
     }"
     :disabled="disabled"
   >
     <slot name="icon">
       <Icon icon="mdi-content-save" class="main-btn-icon" />
     </slot>
-    <slot>{{ $t('save') }}</slot>
+    <slot v-if="!iconOnly">{{ $t('save') }}</slot>
   </button>
 </template>
 
@@ -63,9 +65,12 @@ defineProps<{
 
   & > .main-btn-icon {
     color: hsla(var(--button-main-color) / 1);
-    margin-right: var(--size-1);
     font-size: 1.2rem;
   }
+
+  &:not(.main-btn__icon-only) > .main-btn-icon {
+    margin-right: var(--size-1);
+  }
 }
 
 .main-btn__solid {
diff --git a/src/components/button/UndoButton.vue b/src/components/button/UndoButton.vue
index 9952bbd4..8bea633d 100644
--- a/src/components/button/UndoButton.vue
+++ b/src/components/button/UndoButton.vue
@@ -5,6 +5,7 @@ defineEmits<{
   (e: 'click', v: MouseEvent): void;
 }>();
 defineProps<{
+  iconOnly?: boolean;
   solid?: boolean;
   outlined?: boolean;
   disabled?: boolean;
@@ -20,13 +21,14 @@ defineProps<{
       'main-btn__solid': solid && !outlined,
       'main-btn__outline': !solid && outlined,
       'main-btn__dark': dark,
+      'main-btn__icon-only': iconOnly,
     }"
     :disabled="disabled"
   >
     <slot name="icon">
       <Icon icon="mdi-arrow-left" class="main-btn-icon" />
     </slot>
-    <slot>{{ $t('undo') }}</slot>
+    <slot v-if="!iconOnly">{{ $t('undo') }}</slot>
   </button>
 </template>
 
@@ -63,9 +65,12 @@ defineProps<{
 
   & > .main-btn-icon {
     color: hsla(var(--button-main-color) / 1);
-    margin-right: var(--size-1);
     font-size: 1.2rem;
   }
+
+  &:not(.main-btn__icon-only) > .main-btn-icon {
+    margin-right: var(--size-1);
+  }
 }
 
 .main-btn__solid {