feat: use shared main button

src/components/button/AddButton.vue

@@ -1,5 +1,5 @@
 <script lang="ts" setup>
-import { Icon } from '@iconify/vue';
+import MainButton from './MainButton.vue';
 
 defineEmits<{
   (e: 'click', v: MouseEvent): void;
@@ -14,98 +14,12 @@ defineProps<{
 </script>
 
 <template>
-  <button
+  <MainButton
     @click="(e) => $emit('click', e)"
-    class="main-btn-add"
+    v-bind="{ ...$props, ...$attrs }"
-    :class="{
+    icon="mdi-plus"
-      'main-btn__solid': solid && !outlined,
+    color="var(--info-bg)"
-      'main-btn__outline': !solid && outlined,
-      'main-btn__dark': dark,
-      'main-btn__icon-only': iconOnly,
-    }"
-    :disabled="disabled"
   >
-    <slot name="icon">
+    {{ $t('add') }}
-      <Icon icon="mdi-plus" class="main-btn-icon" />
+  </MainButton>
-    </slot>
-    <slot>{{ $t('add') }}</slot>
-  </button>
 </template>
-
-<style scoped>
-.main-btn-add {
-  --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);
-    font-size: 1.2rem;
-  }
-
-  &:not(.main-btn__icon-only) > .main-btn-icon {
-    margin-right: var(--size-1);
-  }
-}
-
-.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-add: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>

src/components/button/BackButton.vue

@@ -1,5 +1,5 @@
 <script lang="ts" setup>
-import { Icon } from '@iconify/vue';
+import MainButton from './MainButton.vue';
 
 defineEmits<{
   (e: 'click', v: MouseEvent): void;
@@ -14,98 +14,12 @@ defineProps<{
 </script>
 
 <template>
-  <button
+  <MainButton
     @click="(e) => $emit('click', e)"
-    class="main-btn-back"
+    v-bind="{ ...$props, ...$attrs }"
-    :class="{
+    icon="mdi-arrow-left"
-      'main-btn__solid': solid && !outlined,
+    color="var(--info-bg)"
-      'main-btn__outline': !solid && outlined,
-      'main-btn__dark': dark,
-      'main-btn__icon-only': iconOnly,
-    }"
-    :disabled="disabled"
   >
-    <slot name="icon">
+    {{ $t('back') }}
-      <Icon icon="mdi-arrow-left" class="main-btn-icon" />
+  </MainButton>
-    </slot>
-    <slot v-if="!iconOnly">{{ $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);
-    font-size: 1.2rem;
-  }
-
-  &:not(.main-btn__icon-only) > .main-btn-icon {
-    margin-right: var(--size-1);
-  }
-}
-
-.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>

src/components/button/CancelButton.vue

@@ -1,5 +1,5 @@
 <script lang="ts" setup>
-import { Icon } from '@iconify/vue';
+import MainButton from './MainButton.vue';
 
 defineEmits<{
   (e: 'click', v: MouseEvent): void;
@@ -14,98 +14,12 @@ defineProps<{
 </script>
 
 <template>
-  <button
+  <MainButton
     @click="(e) => $emit('click', e)"
-    class="main-btn-cancel"
+    v-bind="{ ...$props, ...$attrs }"
-    :class="{
+    icon="mdi-close"
-      'main-btn__solid': solid && !outlined,
+    color="var(--negative-bg)"
-      'main-btn__outline': !solid && outlined,
-      'main-btn__dark': dark,
-      'main-btn__icon-only': iconOnly,
-    }"
-    :disabled="disabled"
   >
-    <slot name="icon">
+    {{ $t('cancel') }}
-      <Icon icon="mdi-close" class="main-btn-icon" />
+  </MainButton>
-    </slot>
-    <slot v-if="!iconOnly">{{ $t('cancel') }}</slot>
-  </button>
 </template>
-
-<style scoped>
-.main-btn-cancel {
-  --button-main-color: var(--negative-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);
-    font-size: 1.2rem;
-  }
-
-  &:not(.main-btn__icon-only) > .main-btn-icon {
-    margin-right: var(--size-1);
-  }
-}
-
-.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-cancel: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>

src/components/button/DeleteButton.vue

@@ -1,5 +1,5 @@
 <script lang="ts" setup>
-import { Icon } from '@iconify/vue';
+import MainButton from './MainButton.vue';
 
 defineEmits<{
   (e: 'click', v: MouseEvent): void;
@@ -14,98 +14,12 @@ defineProps<{
 </script>
 
 <template>
-  <button
+  <MainButton
     @click="(e) => $emit('click', e)"
-    class="main-btn-delete"
+    v-bind="{ ...$props, ...$attrs }"
-    :class="{
+    icon="mdi-trash-can"
-      'main-btn__solid': solid && !outlined,
+    color="var(--negative-bg)"
-      'main-btn__outline': !solid && outlined,
-      'main-btn__dark': dark,
-      'main-btn__icon-only': iconOnly,
-    }"
-    :disabled="disabled"
   >
-    <slot name="icon">
+    {{ $t('delete') }}
-      <Icon icon="mdi-trash-can" class="main-btn-icon" />
+  </MainButton>
-    </slot>
-    <slot v-if="!iconOnly">{{ $t('delete') }}</slot>
-  </button>
 </template>
-
-<style scoped>
-.main-btn-delete {
-  --button-main-color: var(--negative-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);
-    font-size: 1.2rem;
-  }
-
-  &:not(.main-btn__icon-only) > .main-btn-icon {
-    margin-right: var(--size-1);
-  }
-}
-
-.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-delete: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>

src/components/button/EditButton.vue

@@ -1,5 +1,5 @@
 <script lang="ts" setup>
-import { Icon } from '@iconify/vue';
+import MainButton from './MainButton.vue';
 
 defineEmits<{
   (e: 'click', v: MouseEvent): void;
@@ -14,98 +14,12 @@ defineProps<{
 </script>
 
 <template>
-  <button
+  <MainButton
     @click="(e) => $emit('click', e)"
-    class="main-btn-edit"
+    v-bind="{ ...$props, ...$attrs }"
-    :class="{
+    icon="mdi-pencil"
-      'main-btn__solid': solid && !outlined,
+    color="var(--info-bg)"
-      'main-btn__outline': !solid && outlined,
-      'main-btn__dark': dark,
-      'main-btn__icon-only': iconOnly,
-    }"
-    :disabled="disabled"
   >
-    <slot name="icon">
+    {{ $t('edit') }}
-      <Icon icon="mdi-pencil" class="main-btn-icon" />
+  </MainButton>
-    </slot>
-    <slot v-if="!iconOnly">{{ $t('edit') }}</slot>
-  </button>
 </template>
-
-<style scoped>
-.main-btn-edit {
-  --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);
-    font-size: 1.2rem;
-  }
-
-  &:not(.main-btn__icon-only) > .main-btn-icon {
-    margin-right: var(--size-1);
-  }
-}
-
-.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-edit: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>

src/components/button/MainButton.vue

@@ -0,0 +1,112 @@
+<script lang="ts" setup>
+import { Icon } from '@iconify/vue';
+
+defineEmits<{
+  (e: 'click', v: MouseEvent): void;
+}>();
+defineProps<{
+  icon: string;
+  color: string;
+  iconOnly?: boolean;
+  solid?: boolean;
+  outlined?: boolean;
+  disabled?: boolean;
+  dark?: boolean;
+}>();
+</script>
+
+<template>
+  <button
+    @click="(e) => $emit('click', e)"
+    class="main-btn"
+    :class="{
+      'main-btn__solid': solid && !outlined,
+      'main-btn__outline': !solid && outlined,
+      'main-btn__dark': dark,
+      'main-btn__icon-only': iconOnly,
+    }"
+    :style="{ '--button-main-color': color }"
+    :disabled="disabled"
+  >
+    <slot name="icon">
+      <Icon :icon class="main-btn-icon" />
+    </slot>
+    <slot v-if="!iconOnly" />
+  </button>
+</template>
+
+<style scoped>
+.main-btn {
+  position: relative;
+  display: flex;
+  align-items: center;
+  justify-content: 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);
+  }
+
+  &:not(.main-btn__icon-only) > .main-btn-icon {
+    margin-right: var(--size-1);
+  }
+}
+
+.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-edit: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>

src/components/button/SaveButton.vue

@@ -1,5 +1,5 @@
 <script lang="ts" setup>
-import { Icon } from '@iconify/vue';
+import MainButton from './MainButton.vue';
 
 defineEmits<{
   (e: 'click', v: MouseEvent): void;
@@ -14,98 +14,12 @@ defineProps<{
 </script>
 
 <template>
-  <button
+  <MainButton
     @click="(e) => $emit('click', e)"
-    class="main-btn-save"
+    v-bind="{ ...$props, ...$attrs }"
-    :class="{
+    icon="mdi-content-save"
-      'main-btn__solid': solid && !outlined,
+    color="var(--positive-bg)"
-      'main-btn__outline': !solid && outlined,
-      'main-btn__dark': dark,
-      'main-btn__icon-only': iconOnly,
-    }"
-    :disabled="disabled"
   >
-    <slot name="icon">
+    {{ $t('save') }}
-      <Icon icon="mdi-content-save" class="main-btn-icon" />
+  </MainButton>
-    </slot>
-    <slot v-if="!iconOnly">{{ $t('save') }}</slot>
-  </button>
 </template>
-
-<style scoped>
-.main-btn-save {
-  --button-main-color: var(--positive-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);
-    font-size: 1.2rem;
-  }
-
-  &:not(.main-btn__icon-only) > .main-btn-icon {
-    margin-right: var(--size-1);
-  }
-}
-
-.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-save: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>

src/components/button/UndoButton.vue

@@ -1,5 +1,5 @@
 <script lang="ts" setup>
-import { Icon } from '@iconify/vue';
+import MainButton from './MainButton.vue';
 
 defineEmits<{
   (e: 'click', v: MouseEvent): void;
@@ -14,98 +14,12 @@ defineProps<{
 </script>
 
 <template>
-  <button
+  <MainButton
     @click="(e) => $emit('click', e)"
-    class="main-btn-undo"
+    v-bind="{ ...$props, ...$attrs }"
-    :class="{
+    icon="mdi-arrow-left"
-      'main-btn__solid': solid && !outlined,
+    color="var(--negative-bg)"
-      'main-btn__outline': !solid && outlined,
-      'main-btn__dark': dark,
-      'main-btn__icon-only': iconOnly,
-    }"
-    :disabled="disabled"
   >
-    <slot name="icon">
+    {{ $t('undo') }}
-      <Icon icon="mdi-arrow-left" class="main-btn-icon" />
+  </MainButton>
-    </slot>
-    <slot v-if="!iconOnly">{{ $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);
-    font-size: 1.2rem;
-  }
-
-  &:not(.main-btn__icon-only) > .main-btn-icon {
-    margin-right: var(--size-1);
-  }
-}
-
-.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>