ScSearchBox

ScSearchBox 컴포넌트는 다양한 검색 필터 항목(ScSearchItem)을 그리드 기반으로 배치하고, 접기/펼치기 기능과 액션 버튼 영역을 제공하는 검색 박스 래퍼입니다.

---

✅ 기본 사용법

이름

회사

그룹

선택

기간

  ~  

<sc-search-box col="2" fold-line="1">

  <sc-search-item label="이름" required span="1"><sc-text-field v-model="params.name" /></sc-search-item>
  <sc-search-item label="회사" required span="1"><sc-text-field v-model="params.company" /></sc-search-item>

  <sc-search-item label="그룹" required>
    <sc-dropdown />
  </sc-search-item>

  <sc-search-item label="기간" span="2">
    <sc-date-range-picker v-model="params.dates" class="w-[400px]" />
  </sc-search-item>

  <!-- 상단 action-bar -->
  <template v-slot:action-bar="{ toggleFold, isFold, isFoldButtonDisable }">
    <sc-button small @click="initParams">초기화</sc-button>
    <sc-button small @click="toggleFold" :disabled="isFoldButtonDisable">
      {{ isFold ? `접기` : `펼치기` }}
    </sc-button>
    <sc-button color="black">검색</sc-button>
  </template>
</sc-search-box>

<script setup>
import { ref } from "vue";


const initParam = {
  name: "",
  company: "",
  dates: ["", ""],
};
const params = ref(initParam);

const initParams = () => {
  params.value = { ...initParam };
};
</script>

---

🛠️ 속성 (Props)

이름	타입	기본값	설명
col	Number	3	그리드의 전체 컬럼 수 (12-Grid 시스템)
fold-line	Number	1	접힌 상태일 때 최초 보여질 행(Row) 개수

---

📤 이벤트 (Emits)

ScSearchBox는 자체 Vue 이벤트를 방출하지 않습니다. 대신 슬롯을 통해 액션 함수를 전달받아 사용합니다.

---

🔳 슬롯 (Slots)

슬롯 이름	설명
default	ScSearchItem 컴포넌트들을 배치하는 기본 슬롯
action-bar	검색/초기화/접기 등 액션 버튼 영역을 정의. slot props: { toggleFold, isFold, isFoldButtonDisable }

---

🎨 스타일 클래스

클래스 이름	설명
.sc-search-box	컴포넌트 최상위 래퍼
.sc-search-item	각 필터 항목 컨테이너
.search-action-bar	action-bar 슬롯 내용 래퍼

---