Sellmate Design System - Vue

Vue 3 component wrappers for Sellmate Design System built with Stencil web components.

Installation

npm install @sellmate/design-system-vue

Project Setup

Vue 3 (Vite)

1. CSS 전역 import + 플러그인 등록 — src/main.ts

import { createApp } from "vue";
import "@sellmate/design-system/styles.css";
import {
  StencilVuePlugin,
  SdModalVuePlugin,
} from "@sellmate/design-system-vue";
import App from "./App.vue";

createApp(App)
  .use(StencilVuePlugin) // 커스텀 엘리먼트 전역 등록 (필수)
  .use(SdModalVuePlugin) // sdModal.create Vue 컴포넌트 지원 (필수)
  .mount("#app");

StencilVuePlugin은 필수입니다. React와 달리 Vue 래퍼 컴포넌트는 import 시점에 커스텀 엘리먼트를 자동 등록하지 않으므로, 플러그인을 통한 명시적 등록이 필요합니다.

2. SdModalContainer 최상단 배치 — src/App.vue

sdModal은 sd-modal-container를 자동으로 생성하지만, z-index 제어 및 렌더 위치를 명시적으로 지정하려면 루트에 배치합니다.

<template>
  <SdModalContainer />
  <RouterView />
</template>

<script setup lang="ts">
import { SdModalContainer } from "@sellmate/design-system-vue";
</script>

Utility Functions

sdModal — @sellmate/design-system-vue

Vue 컴포넌트를 모달로 열 수 있는 Vue-aware 버전입니다.

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

React와의 차이: sdModal.create에 Vue 컴포넌트를 전달하면 메인 앱의 컨텍스트(provide/inject, 플러그인, compilerOptions 등)가 자동으로 상속됩니다. SdModalVuePlugin이 설치되지 않은 경우 에러가 발생합니다.

sdToast — @sellmate/design-system/utils

import { sdToast } from "@sellmate/design-system/utils";

// 토스트 생성
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,
});

sdToast는 sd-toast-container를 자동으로 생성하므로 별도의 Provider 배치가 불필요합니다.

sdLoading — @sellmate/design-system-vue

import { sdLoading } from "@sellmate/design-system-vue";

const hide = sdLoading.show(); // 전체화면 로딩 표시
hide(); // 로딩 숨김

sdLoading.show({ message: "처리 중..." });

Available Components

입력

| 컴포넌트 | 설명 | | ------------------- | -------------------------- | | SdInput | 텍스트 입력 | | SdNumberInput | 숫자 입력 | | SdTextarea | 멀티라인 텍스트 입력 | | SdBarcodeInput | 바코드 스캐너 입력 | | SdCheckbox | 체크박스 | | SdRadio | 라디오 버튼 | | SdRadioGroup | 라디오 그룹 | | SdRadioButton | 버튼형 라디오 | | SdSwitch | 스위치 토글 | | SdToggle | 토글 | | SdSelect | 단일/다중 선택 (그룹 지원) | | SdDatePicker | 날짜 선택 | | SdDateRangePicker | 날짜 범위 선택 | | SdFilePicker | 파일 선택 |

버튼

| 컴포넌트 | 설명 | | ------------------ | ---------------- | | SdButton | 기본 버튼 | | SdGhostButton | 고스트 버튼 | | SdDropdownButton | 드롭다운 버튼 | | SdTextLink | 텍스트 링크 버튼 |

표시

| 컴포넌트 | 설명 | | -------------------- | ---------------------- | | SdTag | 태그 | | SdBadge | 뱃지 | | SdIcon | 아이콘 | | SdTooltip | 툴팁 | | SdPopover | 팝오버 | | SdLinearProgress | 선형 진행 바 | | SdCircleProgress | 원형 진행 바 | | SdLoadingContainer | 로딩 오버레이 컨테이너 | | SdGuide | 가이드 텍스트 | | SdCard | 카드 |

레이아웃 / 구조

| 컴포넌트 | 설명 | | -------------- | ------------------------------------ | | 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

import type {
  // Table
  SdTableColumn,
  SdTableRow,
  // Select
  SelectOption,
  // Radio
  RadioValue,
  RadioOption,
  // Button
  ButtonName,
  DropdownButtonItem,
  // Form
  Rule,
  ValidatableField,
  // Checkbox
  CheckedType,
  // Tag
  TagName,
  // Toast
  ToastType,
  // DateBox
  DateBoxType,
  // Tabs
  TabOption,
} from "@sellmate/design-system-vue";

Composables

useSdTableVirtualScroll

import { useSdTableVirtualScroll } from "@sellmate/design-system-vue";

const { virtualRows, totalHeight, scrollToIndex } = useSdTableVirtualScroll({
  rowCount: data.length,
  rowHeight: 48,
  containerHeight: 400,
});

Requirements

• Vue 3.0.0 or higher

License

MIT