📦 Vue3 Typescript UI Components Guide

Demo HomePage

https://simcheolun.github.io/vue3-typescript/

Installation

npm install vue3-uiex-light-ts

Description

A lightweight, modern UI component library built with Vue 3 and TypeScript. All components are fully typed, responsive, and customizable.

Usage Example

import { createApp } from 'vue'
import App from './App.vue'

import Vue3UIExLightTs from 'vue3-uiex-light-ts'
import 'vue3-uiex-light-ts/dist/style.css'

const app = createApp(App)
app.use(Vue3UIExLightTs)
app.mount('#app')

Main Components

1. Carousel (Vue3Carousel)

Flexible image slider/carousel with auto/manual, dot/arrow navigation, and responsive design.

| Prop | Type | Description | Default | |---------|----------|-----------------------------------------------------------------------------|-----------| | data | string[] | Array of image URLs | (required)| | options | object | { delay, showItems, height, type }delay: number (sec, 0=manual only)showItems: number (visible slides)height: string (e.g. '200px')type: 'dot' | { delay:0, showItems:1, height:'100px', type:'none' } |

| Event | Payload | Description | |---------|----------|---------------------| | - | - | - |

| Slot | Description | |-----------|----------------------| | default | Custom slide content |

Basic Example

<Vue3Carousel
  :data="['/img/banner1.jpg', '/img/banner2.jpg', '/img/banner3.jpg']"
  :options="{ delay: 3, height: '220px', type: 'dot' }"
/>

Arrow Navigation Example

<Vue3Carousel
  :data="['/img/slide1.png', '/img/slide2.png', '/img/slide3.png']"
  :options="{ delay: 0, height: '180px', type: 'arrow' }"
/>

Multiple Visible Slides Example

<Vue3Carousel
  :data="['/img/1.jpg', '/img/2.jpg', '/img/3.jpg', '/img/4.jpg']"
  :options="{ showItems: 2, height: '150px', type: 'dot' }"
/>

Manual Only Example

<Vue3Carousel
  :data="['/img/a.png', '/img/b.png']"
  :options="{ delay: 0, type: 'arrow', height: '120px' }"
/>

Tips:

• Use delay: 0 for manual-only mode (no auto-slide).
• type can be 'dot', 'arrow', or 'none' for navigation UI.
• showItems allows for multi-slide view (e.g. 2 or 3 images at once).
• Fully responsive and supports touch/drag navigation.
• You can use slot for custom slide content if needed.

2. Icon (Vue3Icons)

SVG icon component with customizable size and color

| Prop | Type | Description | Default | |-------------|----------|-----------------------------------------------------------------------------|-----------| | icon | string | Icon name (required) | (required)| | size | string | Icon size (e.g. '24px', '32px') | '24px' | | color | string | Icon color (e.g. '#333', 'red') | '#dedede' |

Available Icons:

• search - Search magnifying glass
• menu - Hamburger menu (3 lines)
• user - User profile
• home - House icon
• list - List with bullets
• leftArrow - Left arrow
• leftChevron - Left chevron
• rightChevron - Right chevron
• counter - Counter/calculator
• cart - Shopping cart
• close - X close icon
• closeSquare - Square with X
• closeCircle - Circle with X
• plus - Plus sign
• minus - Minus sign
• dot - Small dot
• separator - Vertical separator
• chevronRight - Right chevron
• downChevron - Down chevron
• upChevron - Up chevron
• qrcode - QR code
• lists - List with checkboxes
• history - Clock/history
• charge - Battery/charge
• license - License document
• logout - Logout arrow

Basic Example

<Vue3Icons icon="search" size="32px" color="#333" />

Different Icons Example

<Vue3Icons icon="home" size="24px" color="#1976d2" />
<Vue3Icons icon="user" size="28px" color="#4caf50" />
<Vue3Icons icon="cart" size="20px" color="#ff9800" />

Tips:

• All icons are SVG-based for crisp rendering at any size
• Use size prop for consistent icon sizing
• color prop accepts any valid CSS color value
• Icons are optimized for common UI patterns

3. Select Box (vue3Select)

Dropdown select component with object/string support and keyboard accessibility

| Prop | Type | Description | Default | |-------------|----------|-----------------------------------------------------------------------------|-----------| | modelValue | string/number/object | v-model value (selected option) | (required)| | list | array | Array of options (objects or strings) | (required)| | keyData | string | Property name for option value (when using objects) | '0' | | label | string | Property name for option display text (when using objects) | 'label' | | round | string | Border radius (e.g. '4px', '20px') | '4px' | | disabled | boolean | Disabled state | false | | size | string | Select size: 'sm', 'default', 'lg', 'lgEx' | 'default' | | width | string | Select width (e.g. '200px', '100%') | '100%' |

| Event | Payload | Description | |--------------------|----------------|---------------------| | update:modelValue | any | v-model update |

Basic Example

<vue3Select
  v-model="selected"
  :list="['Option 1', 'Option 2', 'Option 3']"
/>

Object Options Example

<vue3Select
  v-model="selected"
  :list="[
    { label: 'Apple', value: 'apple' },
    { label: 'Banana', value: 'banana' },
    { label: 'Orange', value: 'orange' }
  ]"
  label="label"
  keyData="value"
/>

Custom Size & Width Example

<vue3Select
  v-model="selected"
  :list="options"
  size="lg"
  width="300px"
  round="8px"
/>

Disabled Example

<vue3Select
  v-model="selected"
  :list="options"
  :disabled="true"
/>

Tips:

• Supports both string arrays and object arrays
• Use keyData and label props to customize object property names
• lgEx size provides extra large padding for better touch targets
• Dropdown automatically closes on blur or selection
• Keyboard navigation supported (arrow keys, enter, escape)

4. Textbox (vue3Textbox)

Flexible input component with number formatting, icons, and validation support

| Prop | Type | Description | Default | |-------------|----------|-----------------------------------------------------------------------------|-----------| | modelValue | string/number | v-model value | (required)| | type | string | Input type: 'text', 'number', 'password' | 'text' | | size | string | Input size: 'sm', 'default', 'lg' | 'default' | | border | string | Border style: 'none', 'default', 'primary', 'success', 'warning', 'danger', 'info', 'talk' | 'default' | | leftIcon | string | Left icon class name | '' | | rightIcon | string | Right icon class name | '' | | round | string | Border radius (e.g. '3px', '20px') | '3px' | | width | string | Input width (e.g. '200px', '100%') | '100%' | | placeholder | string | Placeholder text | '' | | minLen | number | Minimum input length | 0 | | maxLen | number | Maximum input length | 255 | | min | number | Minimum value (for number type) | 0 | | max | number | Maximum value (for number type) | 999999999999 | | disabled | boolean | Disabled state | false | | comma | boolean | Enable thousand separator for numbers | false | | align | string | Text alignment: 'left', 'center', 'right' | 'left' | | readonly | boolean | Read-only state | false |

| Event | Payload | Description | |--------------------|----------------|---------------------| | update:modelValue | string/number | v-model update | | focus | FocusEvent | Input focus event |

Basic Example

<vue3Textbox
  v-model="text"
  type="text"
  placeholder="Enter your name"
/>

Number Input with Comma Example

<vue3Textbox
  v-model="amount"
  type="number"
  :comma="true"
  :min="0"
  :max="1000000"
  placeholder="Enter amount"
/>

With Icons Example

<vue3Textbox
  v-model="email"
  type="text"
  leftIcon="email-icon"
  rightIcon="check-icon"
  placeholder="Enter email"
/>

Custom Styling Example

<vue3Textbox
  v-model="text"
  border="primary"
  round="20px"
  width="300px"
  align="center"
/>

Tips:

• type="number" automatically handles number validation and formatting
• comma prop adds thousand separators for better readability
• leftIcon and rightIcon accept CSS class names
• border prop provides different visual states
• Number inputs automatically enforce min/max constraints
• Supports all standard input attributes and events

5. Tabs (Vue3Tabs)

Tab navigation component with slot-based content and animated transitions.

| Prop | Type | Description | Default | |-------------|---------------------|----------------------------------------------------------------|--------------| | modelValue | string | v-model (active tab key) | | | options | object | { tabs: [{label, key, default}] } | (required) | | showBody | boolean | Show tab content | false |

| Event | Payload | Description | |--------------------|----------------|---------------------| | update:modelValue | string | v-model update | | tab-click | string | Tab click event |

| Slot name | Description | |-----------|----------------------| | tab key | Content for each tab |

Basic Example

<Vue3Tabs
  v-model="activeTab"
  :options="{ tabs: [
    { label: 'Home', key: 'home', default: true },
    { label: 'Profile', key: 'profile' },
    { label: 'Settings', key: 'settings' }
  ] }"
  :showBody="true"
>
  <template #home>
    <div>Home Content</div>
  </template>
  <template #profile>
    <div>Profile Content</div>
  </template>
  <template #settings>
    <div>Settings Content</div>
  </template>
</Vue3Tabs>

Dynamic Tab Example

<script setup>
import { ref } from 'vue'
const activeTab = ref('tab1')
const tabOptions = {
  tabs: [
    { label: 'Tab 1', key: 'tab1', default: true },
    { label: 'Tab 2', key: 'tab2' },
    { label: 'Tab 3', key: 'tab3' }
  ]
}
</script>

<Vue3Tabs v-model="activeTab" :options="tabOptions" :showBody="true">
  <template #tab1>Tab 1 Content</template>
  <template #tab2>Tab 2 Content</template>
  <template #tab3>Tab 3 Content</template>
</Vue3Tabs>

Tips:

• Use the default property in tab options to set the initial active tab.
• Each tab's content is provided via a named slot matching the tab's key.
• Animated transitions are built-in for tab content.
• Emits both update:modelValue and tab-click events for full control.

6. Button (vue3Button)

다양한 스타일과 크기를 지원하는 완전한 기능의 버튼 컴포넌트

| Prop | Type | Description | Default | |-------------|----------|-----------------------------------------------------------------------------|-----------| | type | string | 버튼 스타일 타입: 'default', 'primary', 'success', 'warning', 'danger', 'info', 'talk' | 'default' | | size | string | 버튼 크기: 'sm', 'default', 'lg', 'lgEx' | 'default' | | icon | string | 버튼 내부 아이콘 클래스명 | '' | | round | string | 테두리 둥글기 (border-radius) | '4px' | | circle | boolean | 원형 버튼 여부 (true 시 정사각형 원형) | false | | width | string | 버튼 너비 (CSS width 값) | '' | | disabled | boolean | 비활성화 상태 | false |

| Event | Payload | Description | |-------------|----------|---------------------| | click | MouseEvent | 버튼 클릭 이벤트 (disabled 상태에서는 발생하지 않음) |

| Slot | Description | |-------------|----------------------| | default | 버튼 텍스트 내용 |

기본 사용 예시

<vue3Button type="primary" size="lg" @click="onClick">Primary Button</vue3Button>

다양한 타입 예시

<!-- 기본 스타일들 -->
<vue3Button type="default">Default</vue3Button>
<vue3Button type="primary">Primary</vue3Button>
<vue3Button type="success">Success</vue3Button>
<vue3Button type="warning">Warning</vue3Button>
<vue3Button type="danger">Danger</vue3Button>
<vue3Button type="info">Info</vue3Button>
<vue3Button type="talk">Talk</vue3Button>

크기별 예시

<vue3Button size="sm" type="primary">Small</vue3Button>
<vue3Button size="default" type="primary">Default</vue3Button>
<vue3Button size="lg" type="primary">Large</vue3Button>
<vue3Button size="lgEx" type="primary">Large Ex</vue3Button>

아이콘 버튼 예시

<vue3Button type="primary" icon="search-icon">Search</vue3Button>
<vue3Button type="success" icon="check-icon">Confirm</vue3Button>
<vue3Button type="danger" icon="delete-icon">Delete</vue3Button>

원형 버튼 예시

<vue3Button type="primary" :circle="true" icon="plus-icon"></vue3Button>
<vue3Button type="danger" :circle="true" icon="close-icon"></vue3Button>
<vue3Button type="info" :circle="true" icon="settings-icon"></vue3Button>

커스텀 스타일 예시

<!-- 둥근 모서리 -->
<vue3Button type="primary" round="20px">Rounded</vue3Button>

<!-- 고정 너비 -->
<vue3Button type="success" width="200px">Fixed Width</vue3Button>

<!-- 비활성화 -->
<vue3Button type="primary" :disabled="true">Disabled</vue3Button>

복합 사용 예시

<vue3Button 
  type="primary" 
  size="lg" 
  icon="download-icon"
  round="8px"
  width="180px"
  @click="handleDownload"
>
  Download File
</vue3Button>

이벤트 처리 예시

<template>
  <vue3Button type="primary" @click="handleClick">Click Me</vue3Button>
</template>

<script setup>
const handleClick = (event) => {
  console.log('Button clicked!', event);
  // 클릭 이벤트 처리 로직
};
</script>

Tips:

• type은 버튼의 시각적 스타일을 결정하며, 각각 다른 색상과 호버/액티브 상태를 가집니다.
• size에 따른 높이: sm(24px), default(32px), lg(40px), lgEx(40px+)
• circle: true일 때는 정사각형 원형 버튼이 되며, 아이콘과 함께 사용하기 적합합니다.
• disabled 상태에서는 클릭 이벤트가 발생하지 않고 시각적으로 비활성화됩니다.
• 모든 버튼은 호버/액티브 상태에 대한 스타일이 자동으로 적용됩니다.
• icon과 텍스트를 함께 사용할 때 아이콘이 텍스트 왼쪽에 배치됩니다.

7. Calendar (vue3Calendar)

음력, 휴일, 기념일, 절기, 커스텀 이벤트, 슬롯 지원 고기능 달력 컴포넌트

| Prop | Type | 필수 | 기본값 | 설명 | |---------|--------|------|--------|------| | options | object | Y | { y: 현재연도, m: 현재월, lunar: true, holiday: true, memorial: true, term: true, dateController: true, sMemorial: [], lMemorial: [] } | 달력 옵션 객체 (아래 상세 설명) |

options 상세

| 옵션명 | 타입 | 기본값 | 설명 | |------------------|-----------|----------|------| | y | number | 현재 연도 | 표시할 연도 (예: 2024) | | m | number | 현재 월 | 표시할 월 (1~12) | | lunar | boolean | true | 음력 정보 표시 여부 | | holiday | boolean | true | 공휴일/명절 표시 여부 | | memorial | boolean | true | 기념일 표시 여부 | | term | boolean | true | 24절기 표시 여부 | | dateController | boolean | true | 상단 월 이동 컨트롤러 표시 여부 | | sMemorial | array | [] | 양력 커스텀 기념일 배열예: [ { day: '2024-6-10', label: '런칭', color: 'red' } ] | | lMemorial | array | [] | 음력 커스텀 기념일 배열예: [ { day: '2024-4-15', label: '음력행사', color: 'blue' } ] |

이벤트

| 이벤트명 | payload 타입 | 설명 | |--------------------|-------------|------| | update:options | options | 월 이동 등 옵션 변경 시 발생 (v-model처럼 사용 가능) |

슬롯

| 슬롯명 | 설명 | |----------|------| | default | 각 날짜 셀에 커스텀 렌더링. slot props로 data(날짜 객체) 전달 |

날짜 셀 데이터 구조(dayLines의 각 객체)

| 필드명 | 타입 | 예시 | 설명 | |----------------|-----------|----------------|------| | sYear | number | 2024 | 양력 연도 | | sMonth | number | 6 | 양력 월(1~12) | | sDay | number | 10 | 양력 일(1~31) | | lYear | number | 2024 | 음력 연도 | | lMonth | number | 4 | 음력 월(1~12) | | lDay | number | 15 | 음력 일(1~30) | | isToday | boolean | true/false | 오늘 여부 | | currentMonth | boolean | true/false | 현재 월에 속하는 날짜인지 여부 | | isTerm | boolean | true/false | 24절기 해당 여부 | | term | string | '망종' | 24절기 이름(해당일만) | | nWeek | number | 0~6 | 요일(0:일, 1:월, ..., 6:토) | | eWeek | string | 'Mon' | 요일(영문) | | eMonth | string | 'Jun' | 월(영문) | | sholiday | array | [{label,info,holi}] | 양력 공휴일/명절 배열 | | lholiday | array | [{label,info,holi}] | 음력 공휴일/명절 배열 | | sMemorialDay | array | [{label,info}] | 양력 기념일 배열 | | lMemorialDay | array | [{label,info}] | 음력 기념일 배열 | | subStituteHD | number | 0/1 | 대체공휴일 여부(1:대체) |

예시:

{
  sYear: 2024,
  sMonth: 6,
  sDay: 10,
  lYear: 2024,
  lMonth: 4,
  lDay: 15,
  isToday: false,
  currentMonth: true,
  isTerm: true,
  term: '망종',
  nWeek: 1,
  eWeek: 'Mon',
  eMonth: 'Jun',
  sholiday: [{ label: '현충일', info: '6월 6일, 국경일', holi: 1 }],
  lholiday: [],
  sMemorialDay: [{ label: '런칭', info: '프로젝트 런칭' }],
  lMemorialDay: [],
  subStituteHD: 0
}

slot 활용 예시

<vue3Calendar :options="{ y: 2024, m: 6 }">
  <template #default="{ data }">
    <span v-if="data.isToday" style="color: red;">●</span>
    <span>{{ data.sDay }}</span>
    <span v-if="data.term" style="color: blue;">{{ data.term }}</span>
    <span v-for="h in data.sholiday" :key="h.label" style="color: orange;">{{ h.label }}</span>
    <span v-for="m in data.sMemorialDay" :key="m.label" style="color: green;">{{ m.label }}</span>
  </template>
</vue3Calendar>

팁

• sMemorial, lMemorial은 { day: 'YYYY-M-D', label: '이름', color: '색상', info?: '설명' } 형태로 지정
• slot의 data로 날짜별 모든 정보 접근 가능(음력, 절기, 공휴일, 기념일 등)
• 월 이동 등은 @update:options로 감지하여 v-model처럼 사용 가능

8. Checkbox (vue3Check)

Checkbox component with color types, label, and accessibility support

| Prop | Type | Description | Default | |-------------|----------|-----------------------------------------------------------------------------|-----------| | modelValue | boolean | v-model value (checked state) | (required)| | disabled | boolean | Disabled state | false | | label | string | Label text | '' | | fontSize | string | Label font size (e.g. '14px', '16px') | '14px' | | ellips | boolean | Enable text ellipsis for long labels | false | | width | string | Checkbox width (e.g. '200px', '100%') | '100%' | | type | string | Color type: 'default', 'primary', 'success', 'warning', 'danger', 'info', 'talk' | 'default' |

| Event | Payload | Description | |--------------------|----------------|---------------------| | update:modelValue | boolean | v-model update | | change | Event | Change event |

| Slot | Description | |-----------|----------------------| | default | Custom label content |

Basic Example

<vue3Check v-model="checked" label="I agree to the terms" />

Color Type Example

<vue3Check v-model="checked" label="Primary" type="primary" />
<vue3Check v-model="checked2" label="Success" type="success" />
<vue3Check v-model="checked3" label="Danger" type="danger" />

Custom Styling Example

<vue3Check 
  v-model="checked" 
  label="Custom styled checkbox"
  type="warning"
  fontSize="16px"
  width="250px"
  :ellips="true"
/>

Disabled Example

<vue3Check v-model="checked" label="Disabled" :disabled="true" />

Custom Label Slot Example

<vue3Check v-model="checked">
  <template #default>
    <span style="color: orange;">Custom Label</span>
  </template>
</vue3Check>

Tips:

• Supports all color types for easy status indication
• Use ellips prop for long labels that need truncation
• fontSize allows custom text sizing
• width prop controls the overall component width
• Fully accessible and keyboard-friendly
• Disabled state provides visual feedback

9. Dialog (vue3Dialog)

Draggable dialog/modal component with overlay, custom size, and slot content.

| Prop | Type | Description | Default | |----------|--------|-----------------------------------------------------------------------------|-----------| | show | bool | Show/hide dialog (v-model) | false | | options | object | { round, overay, beforeClose, width, height, hiddenClose }round: string (border radius)overay: 'trans' | 'moho' | 'transMoho' | 'none' (overlay style)beforeClose: boolean (close on overlay click)width: stringheight: stringhiddenClose: boolean (hide close button) | { round: '0px', overay: 'trans', beforeClose: false, width: '500px', height: '350px', hiddenClose: false } |

| Event | Payload | Description | |-----------------|---------|---------------------| | update:show | bool | v-model update |

| Slot | Description | |-----------|----------------------| | default | Dialog content |

Basic Example

<vue3Dialog v-model:show="showDialog" :options="{ width: '400px', height: '300px' }">
  <div>Dialog Content</div>
</vue3Dialog>

Custom Overlay & Rounded Example

<vue3Dialog
  v-model:show="showDialog"
  :options="{ overay: 'moho', round: '20px', width: '350px', height: '200px' }"
>
  <div>Custom Overlay & Rounded Dialog</div>
</vue3Dialog>

Hide Close Button Example

<vue3Dialog
  v-model:show="showDialog"
  :options="{ hiddenClose: true, width: '300px', height: '180px' }"
>
  <div>No Close Button</div>
</vue3Dialog>

Tips:

• Dialog is draggable by the header area.
• Use overay to control the background (blur, transparent, none, etc).
• Use the default slot for any custom content (forms, text, etc).
• Emits update:show for v-model two-way binding.

10. Graph Bar (vue3GraphBar)

Horizontal bar graph for visualizing values with color types and info display.

| Prop | Type | Description | Default | |-----------|----------|-----------------------------------------------------------------------------|-----------| | showInfo | boolean | Show info list below the graph | false | | height | string | Graph height (e.g. '15px', '30px') | '15px' | | options | array | Array of { value: number, label: string, type?: string } | see code |

| Slot | Description | |-----------|----------------------| | default | Custom content |

Basic Example

<vue3GraphBar :options="[
  { value: 30, label: 'A', type: 'primary' },
  { value: 70, label: 'B', type: 'danger' }
]" />

Show Info Example

<vue3GraphBar
  :options="[
    { value: 40, label: 'Sales', type: 'success' },
    { value: 60, label: 'Returns', type: 'warning' }
  ]"
  :showInfo="true"
  height="30px"
/>

Custom Colors Example

<vue3GraphBar
  :options="[
    { value: 20, label: 'Alpha', type: 'info' },
    { value: 80, label: 'Beta', type: 'talk' }
  ]"
/>

Tips:

• Each bar's color is determined by its type (primary, danger, success, etc).
• Use showInfo to display a legend/info list below the graph.
• Responsive and animates on value change.
• You can use the default slot for custom overlays or tooltips.

11. Menu (Vue3Menu)

Vertical menu component with sub-menu support and multiple themes

| Prop | Type | Description | Default | |-------------|----------|-----------------------------------------------------------------------------|-----------| | menus | array | Menu items array (required) | (required)| | round | string | Border radius (e.g. '4px', '20px') | '4px' | | width | string | Menu width (e.g. '250px', '100%') | '100%' | | height | string | Menu height (e.g. '100vh', '500px') | '100vh' | | type | string | Menu theme: 'default', 'dark', 'primary' | 'default' |

| Event | Payload | Description | |-------------|----------|---------------------| | sub-click | string | Menu item click (returns item key) |

Menu Item Structure:

interface MenuItem {
  key: string
  label: string
  icon?: string
  disabled?: boolean
  list?: MenuItem[] // Sub-menu items
}

Basic Example

<template>
  <Vue3Menu 
    :menus="menuItems"
    @sub-click="handleMenuClick"
  />
</template>

<script setup>
const menuItems = [
  {
    key: 'home',
    label: '홈',
    icon: 'home-icon'
  },
  {
    key: 'settings',
    label: '설정',
    icon: 'settings-icon',
    list: [
      { key: 'general', label: '일반 설정' },
      { key: 'security', label: '보안 설정' }
    ]
  },
  {
    key: 'profile',
    label: '프로필',
    icon: 'user-icon',
    disabled: true
  }
]

const handleMenuClick = (key) => {
  console.log('Clicked menu:', key)
}
</script>

Different Themes Example

<!-- Default theme -->
<Vue3Menu :menus="menuItems" type="default" />

<!-- Dark theme -->
<Vue3Menu :menus="menuItems" type="dark" />

<!-- Primary theme -->
<Vue3Menu :menus="menuItems" type="primary" />

Custom Styling Example

<Vue3Menu 
  :menus="menuItems"
  width="280px"
  height="600px"
  round="12px"
  type="dark"
  @sub-click="handleMenuClick"
/>

Tips:

• Each menu item requires a unique key for identification
• Use list property for sub-menu items
• disabled property prevents item interaction
• icon accepts CSS class names for icons
• Three built-in themes: default (light), dark, primary
• Menu height defaults to full viewport height
• Responsive design with smooth hover effects

12. Label (vue3Label)

Text label component with color, size, ellipsis, and case options.

| Prop | Type | Description | Default | |------------|----------|-----------------------------------------------------------------------------|-----------| | size | string | Label size: 'sm', 'default', 'lg' | 'default' | | type | string | Color type: 'default', 'primary', 'success', 'warning', 'danger', 'info', 'talk' | 'default' | | width | string | Label width (e.g. '120px', '100%') | '100%' | | ellipLines | string/# | Number of lines before ellipsis (multi-line ellipsis) | '' | | textCase | string | Text case: 'default', 'capi' (capitalize), 'uppe' (uppercase) | 'default' |

| Slot | Description | |-----------|----------------------| | default | Label text content |

Basic Example

<vue3Label>Default Label</vue3Label>

Color & Size Example

<vue3Label type="primary" size="lg">Primary Large</vue3Label>
<vue3Label type="danger" size="sm">Danger Small</vue3Label>

Ellipsis Example

<vue3Label width="120px" ellipLines="1">
  This is a very long label that will be truncated with ellipsis if it exceeds the width.
</vue3Label>

Text Case Example

<vue3Label textCase="capi">capitalize each word</vue3Label>
<vue3Label textCase="uppe">uppercase label</vue3Label>

Tips:

• Use ellipLines for single or multi-line ellipsis (e.g. 1, 2, 3).
• textCase can be used for automatic capitalization or uppercasing.
• All color types are supported for status indication.
• The default slot is used for label text (can include HTML).

13. Quote (vue3Quote)

Blockquote component for highlighting quoted or informational text.

| Prop | Type | Description | Default | |--------|--------|----------------------------------------------------------------|-----------| | type | string | Color type: 'default', 'primary', 'success', 'warning', 'danger', 'info', 'talk', ... | 'default' | | color | string | (Deprecated) Use type instead for color | 'default' |

| Slot | Description | |-----------|----------------------| | default | Quote content |

Basic Example

<vue3Quote>This is a default quote.</vue3Quote>

Color Type Example

<vue3Quote type="primary">Primary Quote</vue3Quote>
<vue3Quote type="danger">Danger Quote</vue3Quote>
<vue3Quote type="success">Success Quote</vue3Quote>

Custom Content Example

<vue3Quote type="info">
  <b>Info:</b> You can use <i>HTML</i> inside the quote.
</vue3Quote>

Tips:

• Use the type prop to visually distinguish different quote types.
• The default slot supports any HTML or text content.
• Ideal for callouts, tips, warnings, or code explanations.

14. Info (vue3Info)

Info/alert box for displaying messages, HTML, or custom content.

| Prop | Type | Description | Default | |----------|----------|----------------------------------------------------------------|-----------| | type | string | Color type: 'default', 'primary', 'success', 'warning', 'danger', 'info', 'talk', ... | 'default' | | content | string | HTML/text content (supports \n and HTML tags) | '' | | width | string | Box width (e.g. '300px', '100%') | '100%' | | round | string | Border radius (e.g. '0px', '10px') | '0px' |

| Slot | Description | |-----------|----------------------| | default | Custom content |

Basic Example

<vue3Info content="This is an info box." />

Color Type Example

<vue3Info type="success" content="Operation was successful!" />
<vue3Info type="danger" content="An error occurred." />

HTML Content Example

<vue3Info content="<b>Notice:</b> <span style='color:blue'>HTML supported!</span>" />

Custom Slot Example

<vue3Info type="primary" width="350px">
  <template #default>
    <h3>Custom Title</h3>
    <p>Custom content with <b>HTML</b> and <i>Vue</i>!</p>
  </template>
</vue3Info>

Tips:

• Use the type prop for different background colors.
• The content prop supports HTML and line breaks (\n → ).
• Use the default slot for full custom content (forms, icons, etc).
• Responsive and suitable for alerts, info, or custom banners.

15. Raw Split (vue3RawSplit)

Horizontal divider with optional label, color, alignment, and custom style.

| Prop | Type | Description | Default | |-----------|----------|----------------------------------------------------------------|-----------| | label | string | Label text (centered or aligned) | '' | | color | string | Label color (e.g. '#333', 'red') | '#333' | | align | string | Label alignment: 'left', 'center', 'right' | 'center' | | lineColor | string | Divider line color | '' | | weight | string | Divider thickness (e.g. '1px', '2px') | '1px' | | margin | string | Vertical margin (e.g. '10px', '20px') | '10px' | | fontSize | string | Label font size (e.g. '14px', '1.2em') | '14px' |

| Slot | Description | |-----------|----------------------| | default | Custom label content |

Basic Example

<vue3RawSplit />

With Label Example

<vue3RawSplit label="OR" />

Custom Color & Alignment Example

<vue3RawSplit label="Section" color="#1976d2" align="left" lineColor="#1976d2" />

Thick Divider & Large Font Example

<vue3RawSplit label="Important" weight="3px" fontSize="18px" />

Tips:

• Use label to display text in the center or aligned as needed.
• lineColor and color can be used together for custom styles.
• The default slot can be used for custom label content (icons, HTML, etc).
• Useful for visually separating sections in forms, dialogs, or pages.

16. Table (vue3table)

Customizable table component with column configuration and flexible styling

| Prop | Type | Description | Default | |-------------|----------|-----------------------------------------------------------------------------|-----------| | data | array | Table data (array of row objects) | (required)| | tableBorder | string | Border style: 'all', 'default' | 'default' | | size | string | Table size: 'sm', 'default', 'lg' | 'default' | | hover | boolean | Row hover effect | false | | thBold | boolean | Bold header text | false | | width | string | Table width (e.g. '100%', '600px') | '' |

| Slot | Description | |-----------|----------------------| | default | Custom table content |

Column Configuration:

interface Column {
  prop?: string        // Data property name
  label: string        // Column header text
  width?: string       // Column width (e.g. '120px')
  slotName?: string    // Custom slot name for cell content
  cellAlign?: string   // Cell alignment: 'left', 'center', 'right'
}

Basic Example

<template>
  <vue3table :data="tableData">
    <vue3table-column prop="name" label="Name" width="150px" />
    <vue3table-column prop="age" label="Age" width="100px" />
    <vue3table-column prop="email" label="Email" />
  </vue3table>
</template>

<script setup>
const tableData = [
  { name: 'Alice', age: 25, email: '[email protected]' },
  { name: 'Bob', age: 30, email: '[email protected]' }
]
</script>

Custom Cell Content Example

<template>
  <vue3table :data="tableData">
    <vue3table-column prop="name" label="Name" />
    <vue3table-column prop="status" label="Status" name="statusCell" />
    <vue3table-column prop="actions" label="Actions" name="actionCell" />
  </vue3table>
  
  <template #statusCell="{ scope }">
    <span :class="scope.status === 'active' ? 'text-success' : 'text-danger'">
      {{ scope.status }}
    </span>
  </template>
  
  <template #actionCell="{ scope }">
    <vue3Button size="sm" @click="editRow(scope)">Edit</vue3Button>
  </template>
</template>

Styling Options Example

<vue3table 
  :data="tableData"
  tableBorder="all"
  size="lg"
  :hover="true"
  :thBold="true"
  width="800px"
>
  <vue3table-column prop="name" label="Name" />
  <vue3table-column prop="age" label="Age" />
</vue3table>

Tips:

• Use vue3table-column components to define table structure
• name prop allows custom cell rendering with slot templates
• tableBorder="all" provides full borders, "default" for minimal borders
• hover adds row hover effects for better UX
• thBold makes headers more prominent
• Responsive design with customizable column widths

17. Back Top (Vue3BackTop)

18. Vue3Breadcrumb

A breadcrumb navigation component that displays an array of items with separators between them. Each item is clickable and emits events with item information and index.

Usage

<template>
  <Vue3Breadcrumb 
    :data="['홈', '카테고리', '상품', '상세']" 
    @itemClick="handleItemClick" 
  />
</template>

<script setup lang="ts">
import { ref } from 'vue'
import Vue3Breadcrumb from './components/Vue3Breadcrumb.vue'

const breadcrumbData = ref(['홈', '카테고리', '상품', '상세'])

function handleItemClick(item: string, index: number) {
  console.log('클릭된 항목:', item)
  console.log('인덱스:', index)
}
</script>

Props

| Prop | Type | Default | Description | |-------|----------|---------|--------------------------------| | data | string[] | [] | Array of items to display in the breadcrumb |

Events

| Event | Payload | Description | |------------|----------------------------|------------------------------------------------| | itemClick | (item: string, index: number) | Emitted when an item is clicked. Returns the clicked item and its index |

Features

• Responsive Design: Flexbox-based layout that adapts to content
• Visual Separators: Automatic separator lines between items (except the last one)
• Hover Effects: Color transition on hover for better user experience
• Clickable Items: Each breadcrumb item is clickable with cursor pointer
• TypeScript Support: Fully typed with TypeScript interfaces

Styling

The component uses SCSS with the following default styles:

• Font size: 16px
• Color: #757575 (gray)
• Hover color: #333 (dark gray)
• Separator: 1px width, 12px height, #e5e5e5 color
• Gap between items: 10px

Vue3SlidePanel

A panel component that slides in from the edge of the screen. It can be used as a sidebar, drawer, or bottom sheet. It supports v-model for easy state management.

Usage

<template>
  <div>
    <button @click="isPanelOpen = true">Open Panel</button>

    <Vue3SlidePanel v-model="isPanelOpen" width="350px" start="right">
      <!-- Slot for panel content -->
      <div style="padding: 20px;">
        <h2>Panel Title</h2>
        <p>This is the content of the slide panel.</p>
      </div>
    </Vue3SlidePanel>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'
// The component must be imported directly, it is not globally registered.
import Vue3SlidePanel from 'vue3-uiex-light-ts/dist/some-path/Vue3SlidePanel.vue'; // Adjust the import path

const isPanelOpen = ref(false);
</script>

Props

| Prop | Type | Default | Description | |----------------|-----------|-----------|---------------------------------------------------------------------------------------------------------| | v-model | boolean | false | Controls the visibility of the panel. Required. | | width | string | '100%' | The width of the panel (if start is left or right) or the height (if start is top or bottom). | | start | string | 'right' | The direction from which the panel slides in. Accepts 'left', 'right', 'top', 'bottom'. | | showBackdrop | boolean | true | Whether to show a semi-transparent backdrop behind the panel. Clicking the backdrop closes the panel. | | closable | boolean | true | If set to false, the close button (X) will be hidden. |

Slots

| Name | Description | |-----------|---------------------------------------------------| | default | The content to be displayed inside the slide panel. |

19. Panel (Vue3Panel)

타이틀/본문/푸터 슬롯, 토글 기능, 가변 크기 지원 패널 컴포넌트

| Prop | Type | Default | Description | |---------|--------|-----------|----------------------------| | width | string | '100%' | 패널 전체 가로 길이 | | height | string | 'auto' | 패널 전체 세로 길이 |

| Slot name | Description | |-----------|---------------------------| | title | 패널 상단 타이틀 영역 | | body | 패널 본문(내용) 영역 | | footer | 패널 하단 푸터(버튼 등) 영역 |

기본 사용 예시

<Vue3Panel width="400px" height="auto">
  <template #title>
    <span>패널 제목</span>
  </template>
  <template #body>
    <div>패널 본문 내용입니다.</div>
  </template>
  <template #footer>
    <button>확인</button>
  </template>
</Vue3Panel>

특징 및 팁

• 상단 타이틀 우측의 토글 버튼(▼)으로 본문 영역을 열고 닫을 수 있습니다.
• width, height로 전체 크기 지정 가능(기본값: 100% x auto)
• title/body/footer 슬롯을 자유롭게 커스텀 가능
• border, 그림자, 라운드 등 기본 스타일 적용
• slot 미사용 시 해당 영역은 비어있게 렌더링됨