@kokimin/vue-framework 0.0.17 → 0.0.19

package/README.md

@@ -0,0 +1,306 @@
+# @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)
+
+## 특징
+
+- 🎨 **16개의 UI 컴포넌트** - 버튼, 폼, 네비게이션, 레이아웃 등
+- ✅ **Vee-Validate 통합** - 강력한 폼 유효성 검사
+- 🎯 **TypeScript 타입 정의** - 타입 안정성 제공
+- 📱 **반응형 디자인** - 모든 디바이스에서 작동
+- 🎭 **Storybook** - 100개 이상의 사용 예시
+- 🌐 **i18n 지원** - 다국어 지원
+
+## 설치
+```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>
+```
+
+## 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+
+- Vue i18n 11.2.2+
+
+## 개발
+```bash
+# 설치
+npm install
+
+# 개발 서버 실행
+npm run dev
+
+# Storybook 실행
+npm run storybook
+
+# 빌드
+npm run build
+
+# Storybook 빌드
+npm run build-storybook
+```
+
+## 기여
+
+기여를 환영합니다! 이슈나 PR을 자유롭게 제출해주세요.
+
+1. Fork the repository
+2. Create your feature branch (`git checkout -b feature/amazing-feature`)
+3. Commit your changes (`git commit -m 'Add some amazing feature'`)
+4. Push to the branch (`git push origin feature/amazing-feature`)
+5. Open a Pull Request
+
+## 라이선스
+
+MIT License
+
+## 변경 사항
+
+변경 사항은 [CHANGELOG.md](./CHANGELOG.md)에서 확인할 수 있습니다.
+
+## 지원
+
+- 📧 Email: support@kokimin.com
+- 🐛 Issues: [GitHub Issues](https://github.com/kokimin/npm-framework-storybook/issues)
+- 📖 Documentation: [Storybook](https://kokimin.github.io/npm-framework-storybook/)
+
+**오류나 문의 사항이 있으시면 [GitHub Issues](https://github.com/kokimin/npm-framework-storybook/issues)에 이슈를 남겨주세요.**
+
+## 크레딧
+
+이 프로젝트는 다음 오픈소스 라이브러리를 사용합니다:
+
+- [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