@sellmate/design-system-vue 1.0.69 → 1.0.70

package/README.md

@@ -2,111 +2,264 @@
 
 Vue 3 component wrappers for Sellmate Design System built with Stencil web components.
 
-## 📦 Installation
+## Installation
 
 ```bash
 npm install @sellmate/design-system-vue
 ```
 
-or
+---
 
-```bash
-yarn add @sellmate/design-system-vue
-```
+## Project Setup
 
-## 🛠 Setup
+### Vue 3 (Vite)
 
-### Vue 3
+**1. CSS 전역 import + 플러그인 등록** — `src/main.ts`
 
 ```ts
-import '@sellmate/design-system/styles.css';
 import { createApp } from 'vue';
-import { StencilVuePlugin } from '@sellmate/design-system-vue';
+import '@sellmate/design-system/styles.css';
+import { StencilVuePlugin, SdModalVuePlugin } from '@sellmate/design-system-vue';
 import App from './App.vue';
 
-const app = createApp(App);
-
-app.use(StencilVuePlugin);
-app.mount('#app');
+createApp(App)
+  .use(StencilVuePlugin)   // 커스텀 엘리먼트 전역 등록 (필수)
+  .use(SdModalVuePlugin)   // sdModal.create Vue 컴포넌트 지원 (필수)
+  .mount('#app');
 ```
 
-Import `@sellmate/design-system/styles.css` once at app entry so global token CSS variables are available for components like `sd-button`.
+> **`StencilVuePlugin`은 필수입니다.** React와 달리 Vue 래퍼 컴포넌트는 import 시점에 커스텀 엘리먼트를 자동 등록하지 않으므로, 플러그인을 통한 명시적 등록이 필요합니다.
 
-### Vite Configuration
+**2. SdModalContainer 최상단 배치** — `src/App.vue`
 
-If you are using Vite, you need to configure `vite-plugin-static-copy` to serve the design system assets (icons, lazy-loaded components) correctly.
+`sdModal`은 `sd-modal-container`를 자동으로 생성하지만, z-index 제어 및 렌더 위치를 명시적으로 지정하려면 루트에 배치합니다.
 
-1. Install `vite-plugin-static-copy`:
+```vue
+<template>
+  <SdModalContainer />
+  <RouterView />
+</template>
 
-```bash
-npm install -D vite-plugin-static-copy
+<script setup lang="ts">
+import { SdModalContainer } from '@sellmate/design-system-vue';
+</script>
 ```
 
-or
+---
 
-```bash
-yarn add -D vite-plugin-static-copy
+## Utility Functions
+
+### `sdModal` — `@sellmate/design-system-vue`
+
+Vue 컴포넌트를 모달로 열 수 있는 Vue-aware 버전입니다.
+
+```ts
+import { sdModal } from '@sellmate/design-system-vue';
+
+// Confirm 모달
+sdModal
+  .confirm({
+    type: 'positive' | 'negative' | 'default',
+    title: '제목',
+    topMessage: ['메시지'],
+    mainButtonLabel: '확인',
+    subButtonLabel: '취소',
+    persistent: false, // true 시 ESC/백드롭으로 닫기 불가
+  })
+  .onOk(() => {})
+  .onCancel(() => {})
+  .onClose(() => {});
+
+// Vue 컴포넌트를 모달로 열기
+sdModal.create({
+  component: MyModalComponent,
+  componentProps: { title: '제목' }, // 컴포넌트에 전달할 props
+  persistent: true,
+});
+
+// Loading 모달
+const dialog = sdModal.loading({ state: 'loading' });
+dialog.update({ state: 'error', message: '오류 발생' });
+dialog.close();
+
+// 전역 설정
+sdModal.configure({ zIndex: 1000 });
 ```
 
-2. Update `vite.config.ts`:
+> **React와의 차이**: `sdModal.create`에 Vue 컴포넌트를 전달하면 메인 앱의 컨텍스트(`provide/inject`, 플러그인, `compilerOptions` 등)가 **자동으로 상속됩니다**. `SdModalVuePlugin`이 설치되지 않은 경우 에러가 발생합니다.
+
+---
+
+### `sdToast` — `@sellmate/design-system`
 
 ```ts
-import { defineConfig } from 'vite';
-import { viteStaticCopy } from 'vite-plugin-static-copy';
-export default defineConfig({
- plugins: [
-  viteStaticCopy({
-   targets: [
-    {
-     src: 'node_modules/@sellmate/design-system/dist/esm/*',
-     dest: 'assets',
-    },
-   ],
-  }),
- ],
+import { sdToast } from '@sellmate/design-system';
+
+// 토스트 생성
+await sdToast.create('메시지', 'success' | 'error' | 'warning' | 'info');
+
+// 개별/전체 닫기
+await sdToast.dismiss(id);
+await sdToast.dismissAll();
+
+// 전역 설정
+sdToast.configure({
+  position: 'top-right',
+  maxVisible: 5,
+  defaultDuration: 3000,
+  zIndex: 9999,
 });
 ```
 
-## 🚀 Quick Start
+> `sdToast`는 `sd-toast-container`를 자동으로 생성하므로 별도의 Provider 배치가 불필요합니다.
 
-### Basic Component Usage
+---
 
-```vue
-<template>
- <div>
-  <SdButton @click="handleClick"> Click me </SdButton>
- </div>
-</template>
+### `sdLoading` — `@sellmate/design-system`
 
-<script setup lang="ts">
-import { SdButton } from '@sellmate/design-system-vue';
+```ts
+import { sdLoading } from '@sellmate/design-system';
 
-const handleClick = () => {
- console.log('Button clicked');
-};
-</script>
+const hide = sdLoading.show(); // 전체화면 로딩 표시
+hide();                         // 로딩 숨김
+
+sdLoading.show({ message: '처리 중...' });
+```
+
+---
+
+## Available Components
+
+### 입력
+
+| 컴포넌트                | 설명                 |
+| ----------------------- | -------------------- |
+| `SdInput`               | 텍스트 입력          |
+| `SdNumberInput`         | 숫자 입력            |
+| `SdTextarea`            | 멀티라인 텍스트 입력 |
+| `SdBarcodeInput`        | 바코드 스캐너 입력   |
+| `SdCheckbox`            | 체크박스             |
+| `SdRadio`               | 라디오 버튼          |
+| `SdRadioGroup`          | 라디오 그룹          |
+| `SdRadioButton`         | 버튼형 라디오        |
+| `SdSwitch`              | 스위치 토글          |
+| `SdToggle`              | 토글                 |
+| `SdSelect`              | 단일 선택 드롭다운   |
+| `SdSelectGroup`         | 그룹형 단일 선택     |
+| `SdSelectMultiple`      | 다중 선택 드롭다운   |
+| `SdSelectMultipleGroup` | 그룹형 다중 선택     |
+| `SdSelectV2`            | 단일/다중 선택 V2    |
+| `SdDatePicker`          | 날짜 선택            |
+| `SdDateRangePicker`     | 날짜 범위 선택       |
+| `SdFilePicker`          | 파일 선택            |
+
+### 버튼
+
+| 컴포넌트           | 설명             |
+| ------------------ | ---------------- |
+| `SdButton`         | 기본 버튼        |
+| `SdButtonV2`       | 버튼 V2          |
+| `SdGhostButton`    | 고스트 버튼      |
+| `SdDropdownButton` | 드롭다운 버튼    |
+| `SdTextLink`       | 텍스트 링크 버튼 |
+
+### 표시
+
+| 컴포넌트             | 설명                   |
+| -------------------- | ---------------------- |
+| `SdTag`              | 태그                   |
+| `SdBadge`            | 뱃지                   |
+| `SdIcon`             | 아이콘                 |
+| `SdTooltip`          | 툴팁                   |
+| `SdPopover`          | 팝오버                 |
+| `SdProgress`         | 진행 바                |
+| `SdCircleProgress`   | 원형 진행 바           |
+| `SdLoadingContainer` | 로딩 오버레이 컨테이너 |
+| `SdGuide`            | 가이드 텍스트          |
+| `SdCard`             | 카드                   |
+| `SdCalendar`         | 캘린더 표시            |
+
+### 레이아웃 / 구조
+
+| 컴포넌트       | 설명                                 |
+| -------------- | ------------------------------------ |
+| `SdField`      | 폼 필드 래퍼 (label + input + error) |
+| `SdForm`       | 폼 유효성 검사 컨테이너              |
+| `SdTabs`       | 탭 네비게이션                        |
+| `SdTable`      | 데이터 테이블                        |
+| `SdPagination` | 페이지네이션                         |
+
+### 모달 / 알림
+
+| 컴포넌트           | 설명                                 |
+| ------------------ | ------------------------------------ |
+| `SdModalContainer` | sdModal Provider (루트에 1회 배치)   |
+| `SdConfirmModal`   | Confirm 모달 (직접 렌더)             |
+| `SdActionModal`    | Action 모달 (직접 렌더)              |
+| `SdLoadingModal`   | Loading 모달 (직접 렌더)             |
+| `SdToastContainer` | Toast 컨테이너 (sdToast가 자동 생성) |
+| `SdToast`          | 개별 Toast                           |
+
+---
+
+## Available Types
+
+```ts
+import type {
+  // Table
+  SdTableColumn,
+  SdTableRow,
+  // Select
+  SelectOption,
+  SelectOptionGroup,
+  // Radio
+  RadioValue,
+  RadioOption,
+  // Button
+  ButtonVariant,
+  ButtonSize,
+  ButtonV2Name,
+  DropdownButtonItem,
+  // Form
+  Rule,
+  ValidatableField,
+  // Checkbox
+  CheckedType,
+  // Tag
+  TagName,
+  // Toast
+  ToastType,
+  // DateBox
+  DateBoxType,
+  // Tabs
+  TabOption,
+  // sdModal
+  SdModalCreateOption,
+} from '@sellmate/design-system-vue';
 ```
 
-## 📚 Available Components
+---
+
+## Composables
+
+### `useSdTableVirtualScroll`
+
+```ts
+import { useSdTableVirtualScroll } from '@sellmate/design-system-vue';
+
+const { virtualRows, totalHeight, scrollToIndex } = useSdTableVirtualScroll({
+  rowCount: data.length,
+  rowHeight: 48,
+  containerHeight: 400,
+});
+```
 
-- `SdButton` - Button component
-- `SdInput` - Input component
-- `SdCheckbox` - Checkbox component
-- `SdSelect` - Select dropdown component
-- `SdTableBackup` - Table component
-- `SdTag` - Tag component
-- `SdIcon` - Icon component
-- `SdTooltip` - Tooltip component
-- `SdPopover` - Popover component
-- `SdDatePicker` - Date picker component
-- `SdDateRangePicker` - Date range picker component
-- `SdPagination` - Pagination component
+---
 
-## 📋 Requirements
+## Requirements
 
 - Vue 3.0.0 or higher
-- @sellmate/design-system (peer dependency)
 
-## 📝 License
+## License
 
 MIT

package/dist/components.js

@@ -461,8 +461,10 @@ export const SdPopover = /*@__PURE__*/ defineContainer('sd-popover', undefined,
     'messages',
     'buttons',
     'menuClass',
-    'noHover',
-    'useClose'
+    'useClose',
+    'sdShowChange'
+], [
+    'sdShowChange'
 ]);
 export const SdPortal = /*@__PURE__*/ defineContainer('sd-portal', undefined, [
     'to',
@@ -748,9 +750,13 @@ export const SdSelectV2Trigger = /*@__PURE__*/ defineContainer('sd-select-v2-tri
     'placeholder',
     'disabled',
     'isOpen',
-    'sdTriggerClick'
+    'sdTriggerClick',
+    'sdTriggerFocus',
+    'sdTriggerBlur'
 ], [
-    'sdTriggerClick'
+    'sdTriggerClick',
+    'sdTriggerFocus',
+    'sdTriggerBlur'
 ]);
 export const SdSwitch = /*@__PURE__*/ defineContainer('sd-switch', undefined, [
     'value',

package/lib/components.ts

@@ -538,8 +538,10 @@ export const SdPopover: StencilVueComponent<JSX.SdPopover> = /*@__PURE__*/ defin
   'messages',
   'buttons',
   'menuClass',
-  'noHover',
-  'useClose'
+  'useClose',
+  'sdShowChange'
+], [
+  'sdShowChange'
 ]);
 
 
@@ -868,9 +870,13 @@ export const SdSelectV2Trigger: StencilVueComponent<JSX.SdSelectV2Trigger> = /*@
   'placeholder',
   'disabled',
   'isOpen',
-  'sdTriggerClick'
+  'sdTriggerClick',
+  'sdTriggerFocus',
+  'sdTriggerBlur'
 ], [
-  'sdTriggerClick'
+  'sdTriggerClick',
+  'sdTriggerFocus',
+  'sdTriggerBlur'
 ]);
 
 

package/package.json

@@ -1,6 +1,6 @@
 {
  "name": "@sellmate/design-system-vue",
- "version": "1.0.69",
+ "version": "1.0.70",
  "description": "Design System - Vue Component Wrappers",
  "keywords": [
   "vue",
@@ -45,7 +45,7 @@
   "vue": "^3.4.38"
  },
  "dependencies": {
-  "@sellmate/design-system": "^1.0.69",
+  "@sellmate/design-system": "^1.0.70",
   "@stencil/vue-output-target": "^0.11.8"
  },
  "peerDependencies": {