From 4ad8f97e6bda54b6d0aabfa1aca39a6f9f78a67e Mon Sep 17 00:00:00 2001
From: jhynsoo <jhynsoo@gmail.com>
Date: Mon, 20 May 2024 10:44:23 +0900
Subject: [PATCH] Feat: Add disabled option on select and buttons

---
 src/components/common/FilledButton.vue | 14 +++++++++-----
 src/components/common/Select.vue       | 16 +++++++++++++---
 src/components/common/TextButton.vue   |  6 +++++-
 3 files changed, 27 insertions(+), 9 deletions(-)

diff --git a/src/components/common/FilledButton.vue b/src/components/common/FilledButton.vue
index 1d007ae..f9273cb 100644
--- a/src/components/common/FilledButton.vue
+++ b/src/components/common/FilledButton.vue
@@ -8,11 +8,15 @@ const { type, primary } = defineProps({
     type: Boolean,
     default: false,
   },
+  disabled: {
+    type: Boolean,
+    default: false,
+  },
 });
 </script>
 
 <template>
-  <button :type="type" :class="primary ? 'primary' : ''">
+  <button :disabled="disabled" :type="type" :class="primary ? 'primary' : ''">
     <slot></slot>
   </button>
 </template>
@@ -31,6 +35,10 @@ button {
     transform 0.25s;
 }
 
+button:disabled {
+  cursor: initial;
+}
+
 button.primary {
   background-color: var(--color-primary);
   color: var(--color-background);
@@ -46,10 +54,6 @@ button.primary {
   }
 }
 
-button:active {
-  transform: scale(0.95);
-}
-
 button.primary:active {
   background-color: var(--color-primary-soft);
 }
diff --git a/src/components/common/Select.vue b/src/components/common/Select.vue
index 7d9631b..452ce7e 100644
--- a/src/components/common/Select.vue
+++ b/src/components/common/Select.vue
@@ -3,7 +3,7 @@
 import { computed, onMounted, ref } from 'vue';
 import FilledButton from './FilledButton.vue';
 
-const { placeholder, options, optionName } = defineProps({
+const { placeholder, options, optionName, disabled } = defineProps({
   placeholder: {
     type: String,
     default: '----',
@@ -16,7 +16,16 @@ const { placeholder, options, optionName } = defineProps({
     type: String,
     default: 'value',
   },
+  modelValue: {
+    sidoCode: Number,
+  },
+  disabled: {
+    type: Boolean,
+    default: false,
+  },
 });
+const updateModel = defineEmits(['update:modelValue']);
+
 const body = document.querySelector('body');
 const buttonRef = ref(null);
 const isOpen = ref(false);
@@ -32,7 +41,6 @@ onMounted(() => {
 const selectedName = computed(() => selected.value?.[optionName] ?? selected.value);
 
 function handleOpen() {
-  console.log('open');
   isOpen.value = true;
   body.style.pointerEvents = 'none';
   body.style.overflow = 'hidden';
@@ -53,12 +61,14 @@ function handleClose({ target }) {
 
 function handleSelect(option) {
   selected.value = option;
+  updateModel('update:modelValue', option);
   closeMenu();
 }
 </script>
 
 <template>
   <FilledButton
+    :disabled="disabled"
     :class="'select' + (isOpen ? ' active' : '')"
     ref="buttonRef"
     @mousedown="handleOpen"
@@ -86,7 +96,7 @@ function handleSelect(option) {
           v-for="option in options"
           :key="option.value"
           @click.stop="handleSelect(option)"
-          :class="'menu-item' + (selected === option ? 'selected' : '')"
+          :class="'menu-item' + (selected === option ? ' selected' : '')"
         >
           {{ option[optionName] ?? option }}
         </li>
diff --git a/src/components/common/TextButton.vue b/src/components/common/TextButton.vue
index 2c4a0f7..29050c3 100644
--- a/src/components/common/TextButton.vue
+++ b/src/components/common/TextButton.vue
@@ -8,11 +8,15 @@ const { type, primary } = defineProps({
     type: Boolean,
     default: false,
   },
+  disabled: {
+    type: Boolean,
+    default: false,
+  },
 });
 </script>
 
 <template>
-  <button :type="type" :class="primary ? 'primary' : ''">
+  <button :disabled="disabled" :type="type" :class="primary ? 'primary' : ''">
     <slot></slot>
   </button>
 </template>