@kokimin/vue-framework

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

특징

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

링크

• 📧 Email: [email protected]
• 📖 Storybook 문서 - 모든 컴포넌트의 상세 문서 및 예제
• 🐛 GitHub Issues - 버그 제보 및 문의
• 🚀 샘플 프로젝트 - 실제 사용 예제를 확인할 수 있는 데모 프로젝트

오류나 문의 사항이 있으시면 GitHub Issues에 이슈를 남겨주세요.

설치

npm install @kokimin/vue-framework

yarn add @kokimin/vue-framework

pnpm add @kokimin/vue-framework

사용법

전체 등록

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');

개별 컴포넌트 등록

<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 - 분할 패널

예제

기본 버튼

<template>
  <ElementButton theme="primary" size="sm" @click="handleClick">
    클릭
  </ElementButton>
</template>

폼 입력 (유효성 검사)

<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>

날짜 선택

<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>

셀렉트 박스

<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>

탭

<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>

분할 패널

<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 문서에서 확인할 수 있습니다.

공통 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에서 확인할 수 있습니다.

크레딧

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

• Vue 3
• Vee-Validate
• Vue Datepicker
• Toast UI Editor
• Vue Multiselect
• Splitpanes
• Simplebar

Made with ❤️ by Kokimin