npm package: @kokimin/vue-framework
Description: Vue 3 기반의 재사용 가능한 UI 컴포넌트 라이브러리
Author: Kokimin
Latest version: 0.0.26

# @kokimin/vue-framework

Vue 3 기반의 재사용 가능한 UI 컴포넌트 라이브러리입니다.

[![npm version](https://img.shields.io/npm/v/@kokimin/vue-framework.svg)](https://www.npmjs.com/package/@kokimin/vue-framework)
[![license](https://img.shields.io/npm/l/@kokimin/vue-framework.svg)](https://github.com/kokimin/npm-framework-storybook/blob/main/LICENSE)

## 특징

- 🎨 **UI 컴포넌트** - 버튼, 폼, 네비게이션, 레이아웃 등
- 🎭 **Storybook** - 사용 예시

## 링크

- 📧 Email: kokimin78@gmail.com
- 📖 **[Storybook 문서](https://kokimin.github.io/npm-framework-storybook/)** - 모든 컴포넌트의 상세 문서 및 예제
- 🐛 **[GitHub Issues](https://github.com/kokimin/npm-framework-storybook/issues)** - 버그 제보 및 문의
- 🚀 **[샘플 프로젝트](https://kokimin.github.io/npm-framework-project/)** - 실제 사용 예제를 확인할 수 있는 데모 프로젝트

**오류나 문의 사항이 있으시면 [GitHub Issues](https://github.com/kokimin/npm-framework-storybook/issues)에 이슈를 남겨주세요.**



## 설치
```bash
npm install @kokimin/vue-framework
```
```bash
yarn add @kokimin/vue-framework
```
```bash
pnpm add @kokimin/vue-framework
```

## 사용법

### 전체 등록
```javascript
import { createApp } from 'vue';
import App from './App.vue';
import VueFramework from '@kokimin/vue-framework';
import '@kokimin/vue-framework/style.css';

const app = createApp(App);
app.use(VueFramework);
app.mount('#app');
```

### 개별 컴포넌트 등록
```vue
<script setup>
import { ElementButton, ElementText } from '@kokimin/vue-framework';
import '@kokimin/vue-framework/style.css';
</script>

<template>
  <ElementButton theme="primary" size="sm">
    클릭하세요
  </ElementButton>
</template>
```

## 컴포넌트

### Containment
- **ElementButton** - 다양한 스타일의 버튼
- **ElementTooltip** - 툴팁

### Form
- **ElementText** - 텍스트 입력
- **ElementNumber** - 숫자 입력 (포맷팅 지원)
- **ElementSelect** - 셀렉트 박스 (단일/복수 선택, 검색)
- **ElementCheckbox** - 체크박스
- **ElementMultiCheckbox** - 다중 체크박스
- **ElementRadio** - 라디오 버튼
- **ElementRadioButton** - 라디오 버튼 (버튼 스타일)
- **ElementToggle** - 토글 스위치
- **ElementDatePicker** - 날짜 선택
- **ElementDateRangePicker** - 날짜 범위 선택
- **ElementEditor** - WYSIWYG 에디터

### Navigation
- **ElementTab** - 탭

### Display
- **ElementScroll** - 커스텀 스크롤바
- **ElementSplitPanes** - 분할 패널

## 예제

### 기본 버튼
```vue
<template>
  <ElementButton theme="primary" size="sm" @click="handleClick">
    클릭
  </ElementButton>
</template>
```

### 폼 입력 (유효성 검사)
```vue
<script setup>
import { ref } from 'vue';
import { ElementText, ElementNumber } from '@kokimin/vue-framework';

const email = ref('');
const age = ref(null);
</script>

<template>
  <ElementText
    v-model="email"
    type="email"
    name="email"
    placeholder="이메일"
    rules="required|email"
    :isClear="true"
  />

  <ElementNumber
    v-model="age"
    name="age"
    placeholder="나이"
    :min="0"
    :max="150"
    rules="required"
  />
</template>
```

### 날짜 선택
```vue
<script setup>
import { ref } from 'vue';
import { ElementDatePicker } from '@kokimin/vue-framework';

const selectedDate = ref('');
</script>

<template>
  <ElementDatePicker
    v-model="selectedDate"
    type="day"
    name="date"
    :isClear="true"
  />
</template>
```

### 셀렉트 박스
```vue
<script setup>
import { ref } from 'vue';
import { ElementSelect } from '@kokimin/vue-framework';

const selected = ref('');
const options = [
  { label: '옵션 1', value: 'option1' },
  { label: '옵션 2', value: 'option2' },
  { label: '옵션 3', value: 'option3' },
];
</script>

<template>
  <ElementSelect
    v-model="selected"
    type="single"
    name="select"
    placeholder="선택하세요"
    :options="options"
    :isSearch="true"
  />
</template>
```

### 탭
```vue
<script setup>
import { ref } from 'vue';
import { ElementTab } from '@kokimin/vue-framework';

const activeTab = ref('tab1');
const tabs = [
  { label: '탭 1', value: 'tab1' },
  { label: '탭 2', value: 'tab2' },
  { label: '탭 3', value: 'tab3' },
];
</script>

<template>
  <ElementTab v-model="activeTab" :options="tabs" />
  
  <div v-if="activeTab === 'tab1'">탭 1 내용</div>
  <div v-if="activeTab === 'tab2'">탭 2 내용</div>
  <div v-if="activeTab === 'tab3'">탭 3 내용</div>
</template>
```

### 분할 패널
```vue
<template>
  <div style="height: 500px;">
    <ElementSplitPanes :leftSize="30">
      <template #leftSlot>
        <div>왼쪽 패널</div>
      </template>
      <template #rightSlot>
        <div>오른쪽 패널</div>
      </template>
    </ElementSplitPanes>
  </div>
</template>
```

더 많은 예제는 [샘플 프로젝트](https://kokimin.github.io/npm-framework-project/)에서 확인하실 수 있습니다.

## Props 및 이벤트

각 컴포넌트의 상세한 Props, Events, Slots 정보는 [Storybook 문서](https://kokimin.github.io/npm-framework-storybook/)에서 확인할 수 있습니다.

### 공통 Props (Form 컴포넌트)

| Prop | Type | Default | Description |
|------|------|---------|-------------|
| `modelValue` | String/Number/Boolean | - | v-model 값 |
| `name` | String | '' | vee-validate 필드 이름 |
| `rules` | String | '' | vee-validate 유효성 규칙 |
| `placeholder` | String | '' | 플레이스홀더 |
| `disabled` | Boolean | false | 비활성화 |
| `readonly` | Boolean | false | 읽기 전용 |
| `isClear` | Boolean | true | 초기화 버튼 표시 |

### Vee-Validate 규칙

- `required` - 필수 입력
- `email` - 이메일 형식
- `min:8` - 최소 길이
- `max:20` - 최대 길이
- `url` - URL 형식

여러 규칙을 `|`로 연결: `rules="required|email"`

## 브라우저 지원

- Chrome (최신)
- Firefox (최신)
- Safari (최신)
- Edge (최신)

## 의존성

- Vue 3.4.0+
- Vee-Validate 4.15.1+
- Vue Router 4.6.4+


## 라이선스

MIT License

## 변경 사항

변경 사항은 [CHANGELOG.md](./CHANGELOG.md)에서 확인할 수 있습니다.

## 크레딧

이 프로젝트는 다음 오픈소스 라이브러리를 사용합니다:

- [Vue 3](https://vuejs.org/)
- [Vee-Validate](https://vee-validate.logaretm.com/)
- [Vue Datepicker](https://vue3datepicker.com/)
- [Toast UI Editor](https://ui.toast.com/tui-editor)
- [Vue Multiselect](https://vue-multiselect.js.org/)
- [Splitpanes](https://antoniandre.github.io/splitpanes/)
- [Simplebar](https://grsmto.github.io/simplebar/)

---

Made with ❤️ by Kokimin