feat: main button

src/components/button/AddButton.vue

@@ -0,0 +1,105 @@
+<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
+    class="main-btn-add"
+    :class="{
+      'main-btn__solid': solid && !outlined,
+      'main-btn__outline': !solid && outlined,
+      'main-btn__dark': dark,
+    }"
+    :disabled="disabled"
+  >
+    <slot name="icon">
+      <Icon icon="mdi-plus" class="main-btn-icon" />
+    </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);
+    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-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/CancelButton.vue

@@ -0,0 +1,105 @@
+<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
+    class="main-btn-cancel"
+    :class="{
+      'main-btn__solid': solid && !outlined,
+      'main-btn__outline': !solid && outlined,
+      'main-btn__dark': dark,
+    }"
+    :disabled="disabled"
+  >
+    <slot name="icon">
+      <Icon icon="mdi-close" class="main-btn-icon" />
+    </slot>
+    <slot>{{ $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);
+    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-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

@@ -0,0 +1,105 @@
+<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
+    class="main-btn-delete"
+    :class="{
+      'main-btn__solid': solid && !outlined,
+      'main-btn__outline': !solid && outlined,
+      'main-btn__dark': dark,
+    }"
+    :disabled="disabled"
+  >
+    <slot name="icon">
+      <Icon icon="mdi-close" class="main-btn-icon" />
+    </slot>
+    <slot>{{ $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);
+    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-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

@@ -0,0 +1,105 @@
+<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
+    class="main-btn-edit"
+    :class="{
+      'main-btn__solid': solid && !outlined,
+      'main-btn__outline': !solid && outlined,
+      'main-btn__dark': dark,
+    }"
+    :disabled="disabled"
+  >
+    <slot name="icon">
+      <Icon icon="mdi-pencil" class="main-btn-icon" />
+    </slot>
+    <slot>{{ $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);
+    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-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

@@ -0,0 +1,105 @@
+<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
+    class="main-btn-save"
+    :class="{
+      'main-btn__solid': solid && !outlined,
+      'main-btn__outline': !solid && outlined,
+      'main-btn__dark': dark,
+    }"
+    :disabled="disabled"
+  >
+    <slot name="icon">
+      <Icon icon="mdi-content-save" class="main-btn-icon" />
+    </slot>
+    <slot>{{ $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);
+    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-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/index.ts

@@ -0,0 +1,5 @@
+export { default as AddButton } from './AddButton.vue';
+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';