From c25cede70b45946b757cee4a19e50f9edb19e69e Mon Sep 17 00:00:00 2001
From: Methapon2001 <61303214+Methapon2001@users.noreply.github.com>
Date: Wed, 7 Aug 2024 15:01:14 +0700
Subject: [PATCH] feat: add and fix event

---
 src/components/button/AddButton.vue    |   1 +
 src/components/button/BackButton.vue   | 106 +++++++++++++++++++++++++
 src/components/button/CancelButton.vue |   1 +
 src/components/button/DeleteButton.vue |   1 +
 src/components/button/EditButton.vue   |   1 +
 src/components/button/SaveButton.vue   |   1 +
 src/components/button/UndoButton.vue   | 106 +++++++++++++++++++++++++
 src/components/button/index.ts         |   2 +
 8 files changed, 219 insertions(+)
 create mode 100644 src/components/button/BackButton.vue
 create mode 100644 src/components/button/UndoButton.vue

diff --git a/src/components/button/AddButton.vue b/src/components/button/AddButton.vue
index b4e0e41a..ebab509e 100644
--- a/src/components/button/AddButton.vue
+++ b/src/components/button/AddButton.vue
@@ -14,6 +14,7 @@ defineProps<{
 
 <template>
   <button
+    @click="(e) => $emit('click', e)"
     class="main-btn-add"
     :class="{
       'main-btn__solid': solid && !outlined,
diff --git a/src/components/button/BackButton.vue b/src/components/button/BackButton.vue
new file mode 100644
index 00000000..03c6ba86
--- /dev/null
+++ b/src/components/button/BackButton.vue
@@ -0,0 +1,106 @@
+<script lang="ts" setup>
+import { Icon } from '@iconify/vue';
+
+defineEmits<{
+  (e: 'click', v: MouseEvent): void;
+}>();
+defineProps<{
+  solid?: boolean;
+  outlined?: boolean;
+  disabled?: boolean;
+  dark?: boolean;
+}>();
+</script>
+
+<template>
+  <button
+    @click="(e) => $emit('click', e)"
+    class="main-btn-back"
+    :class="{
+      'main-btn__solid': solid && !outlined,
+      'main-btn__outline': !solid && outlined,
+      'main-btn__dark': dark,
+    }"
+    :disabled="disabled"
+  >
+    <slot name="icon">
+      <Icon icon="mdi-arrow-left" class="main-btn-icon" />
+    </slot>
+    <slot>{{ $t('back') }}</slot>
+  </button>
+</template>
+
+<style scoped>
+.main-btn-back {
+  --button-main-color: var(--info-bg);
+
+  position: relative;
+  display: flex;
+  align-items: center;
+  background: transparent;
+  border: none;
+  font-weight: 600;
+  font-size: 0.85rem;
+  cursor: pointer;
+  border-radius: var(--radius-2);
+  padding-block: var(--size-1);
+  padding-inline: var(--size-2);
+  transition: 100ms ease-in-out;
+  outline: none;
+
+  &.main-btn__dark:not(.main-btn__outline) {
+    color: white;
+  }
+
+  &:not(:disabled):hover,
+  &:not(:disabled):focus {
+    background: hsla(var(--button-main-color) / 0.1);
+  }
+
+  &:not(:disabled):active {
+    background: hsla(var(--button-main-color) / 0.2);
+  }
+
+  & > .main-btn-icon {
+    color: hsla(var(--button-main-color) / 1);
+    margin-right: var(--size-1);
+    font-size: 1.2rem;
+  }
+}
+
+.main-btn__solid {
+  background-color: hsla(var(--button-main-color) / 1);
+  color: white;
+
+  & > .main-btn-icon {
+    color: white;
+  }
+
+  &:not(:disabled):hover,
+  &:not(:disabled):focus {
+    background-color: hsla(var(--button-main-color) / 0.8);
+  }
+
+  &:not(:disabled):active {
+    background-color: hsla(var(--button-main-color) / 0.7);
+  }
+}
+
+.main-btn__outline {
+  border: 1px solid hsla(var(--button-main-color) / 1);
+  color: hsla(var(--button-main-color) / 1);
+}
+
+.main-btn-back:disabled {
+  filter: grayscale(1);
+  opacity: 0.8;
+
+  &.main-btn__solid {
+    background: hsla(0 0% 0% / 0.08);
+  }
+
+  &.main-btn__outline {
+    border: 1px solid hsla(0 0% 0% / 0.3);
+  }
+}
+</style>
diff --git a/src/components/button/CancelButton.vue b/src/components/button/CancelButton.vue
index c1cb922b..636d2746 100644
--- a/src/components/button/CancelButton.vue
+++ b/src/components/button/CancelButton.vue
@@ -14,6 +14,7 @@ defineProps<{
 
 <template>
   <button
+    @click="(e) => $emit('click', e)"
     class="main-btn-cancel"
     :class="{
       'main-btn__solid': solid && !outlined,
diff --git a/src/components/button/DeleteButton.vue b/src/components/button/DeleteButton.vue
index 43514d1b..8cc8ccae 100644
--- a/src/components/button/DeleteButton.vue
+++ b/src/components/button/DeleteButton.vue
@@ -14,6 +14,7 @@ defineProps<{
 
 <template>
   <button
+    @click="(e) => $emit('click', e)"
     class="main-btn-delete"
     :class="{
       'main-btn__solid': solid && !outlined,
diff --git a/src/components/button/EditButton.vue b/src/components/button/EditButton.vue
index 45780c7a..9cc1bbe8 100644
--- a/src/components/button/EditButton.vue
+++ b/src/components/button/EditButton.vue
@@ -14,6 +14,7 @@ defineProps<{
 
 <template>
   <button
+    @click="(e) => $emit('click', e)"
     class="main-btn-edit"
     :class="{
       'main-btn__solid': solid && !outlined,
diff --git a/src/components/button/SaveButton.vue b/src/components/button/SaveButton.vue
index cc24a9e3..6d04f5d3 100644
--- a/src/components/button/SaveButton.vue
+++ b/src/components/button/SaveButton.vue
@@ -14,6 +14,7 @@ defineProps<{
 
 <template>
   <button
+    @click="(e) => $emit('click', e)"
     class="main-btn-save"
     :class="{
       'main-btn__solid': solid && !outlined,
diff --git a/src/components/button/UndoButton.vue b/src/components/button/UndoButton.vue
new file mode 100644
index 00000000..9952bbd4
--- /dev/null
+++ b/src/components/button/UndoButton.vue
@@ -0,0 +1,106 @@
+<script lang="ts" setup>
+import { Icon } from '@iconify/vue';
+
+defineEmits<{
+  (e: 'click', v: MouseEvent): void;
+}>();
+defineProps<{
+  solid?: boolean;
+  outlined?: boolean;
+  disabled?: boolean;
+  dark?: boolean;
+}>();
+</script>
+
+<template>
+  <button
+    @click="(e) => $emit('click', e)"
+    class="main-btn-undo"
+    :class="{
+      'main-btn__solid': solid && !outlined,
+      'main-btn__outline': !solid && outlined,
+      'main-btn__dark': dark,
+    }"
+    :disabled="disabled"
+  >
+    <slot name="icon">
+      <Icon icon="mdi-arrow-left" class="main-btn-icon" />
+    </slot>
+    <slot>{{ $t('undo') }}</slot>
+  </button>
+</template>
+
+<style scoped>
+.main-btn-undo {
+  --button-main-color: var(--info-bg);
+
+  position: relative;
+  display: flex;
+  align-items: center;
+  background: transparent;
+  border: none;
+  font-weight: 600;
+  font-size: 0.85rem;
+  cursor: pointer;
+  border-radius: var(--radius-2);
+  padding-block: var(--size-1);
+  padding-inline: var(--size-2);
+  transition: 100ms ease-in-out;
+  outline: none;
+
+  &.main-btn__dark:not(.main-btn__outline) {
+    color: white;
+  }
+
+  &:not(:disabled):hover,
+  &:not(:disabled):focus {
+    background: hsla(var(--button-main-color) / 0.1);
+  }
+
+  &:not(:disabled):active {
+    background: hsla(var(--button-main-color) / 0.2);
+  }
+
+  & > .main-btn-icon {
+    color: hsla(var(--button-main-color) / 1);
+    margin-right: var(--size-1);
+    font-size: 1.2rem;
+  }
+}
+
+.main-btn__solid {
+  background-color: hsla(var(--button-main-color) / 1);
+  color: white;
+
+  & > .main-btn-icon {
+    color: white;
+  }
+
+  &:not(:disabled):hover,
+  &:not(:disabled):focus {
+    background-color: hsla(var(--button-main-color) / 0.8);
+  }
+
+  &:not(:disabled):active {
+    background-color: hsla(var(--button-main-color) / 0.7);
+  }
+}
+
+.main-btn__outline {
+  border: 1px solid hsla(var(--button-main-color) / 1);
+  color: hsla(var(--button-main-color) / 1);
+}
+
+.main-btn-undo:disabled {
+  filter: grayscale(1);
+  opacity: 0.8;
+
+  &.main-btn__solid {
+    background: hsla(0 0% 0% / 0.08);
+  }
+
+  &.main-btn__outline {
+    border: 1px solid hsla(0 0% 0% / 0.3);
+  }
+}
+</style>
diff --git a/src/components/button/index.ts b/src/components/button/index.ts
index 56681f95..a4c99370 100644
--- a/src/components/button/index.ts
+++ b/src/components/button/index.ts
@@ -3,3 +3,5 @@ export { default as SaveButton } from './SaveButton.vue';
 export { default as CancelButton } from './CancelButton.vue';
 export { default as EditButton } from './EditButton.vue';
 export { default as DeleteButton } from './DeleteButton.vue';
+export { default as BackButton } from './BackButton.vue';
+export { default as UndoButton } from './UndoButton.vue';