@sellmate/design-system-vue 1.0.46 → 1.0.47

package/dist/components.d.ts

@@ -1,5 +1,6 @@
 import { type StencilVueComponent } from '@stencil/vue-output-target/runtime';
 import type { JSX } from '@sellmate/design-system';
+export declare const SdActionModal: StencilVueComponent<JSX.SdActionModal>;
 export declare const SdBadge: StencilVueComponent<JSX.SdBadge>;
 export declare const SdBarcodeInput: StencilVueComponent<JSX.SdBarcodeInput, JSX.SdBarcodeInput["value"]>;
 export declare const SdButton: StencilVueComponent<JSX.SdButton>;

package/dist/components.js

@@ -2,6 +2,15 @@
 /* tslint:disable */
 /* auto-generated vue proxies */
 import { defineContainer } from '@stencil/vue-output-target/runtime';
+export const SdActionModal = /*@__PURE__*/ defineContainer('sd-action-modal', undefined, [
+    'title',
+    'buttonLabel',
+    'sdClose',
+    'sdOk'
+], [
+    'sdClose',
+    'sdOk'
+]);
 export const SdBadge = /*@__PURE__*/ defineContainer('sd-badge', undefined, [
     'color',
     'label'
@@ -103,9 +112,11 @@ export const SdConfirmModal = /*@__PURE__*/ defineContainer('sd-confirm-modal',
     'slotLabel',
     'tagContents',
     'sdClose',
+    'sdCancel',
     'sdOk'
 ], [
     'sdClose',
+    'sdCancel',
     'sdOk'
 ]);
 export const SdDateBox = /*@__PURE__*/ defineContainer('sd-date-box', undefined, [

package/dist/index.d.ts

@@ -1,5 +1,6 @@
 import '@sellmate/design-system/styles.css';
 export * from './components';
 export * from './plugin';
+export { sdModal, SdModalVuePlugin } from './sdModal';
 export { default as SdTable } from './SdTable';
 export type { SdTableSortDir, SdTableColumn, Row as SdTableRow, SelectOption, SelectOptionGroup, SelectEvents, SelectMultipleEvents, SelectStyleProps, RadioValue, RadioOption, ButtonVariant, ButtonSize, ButtonV2Name, DropdownButtonItem, DropdownButtonName, DropdownButtonSize, DropdownButtonValue, Rule, ValidatableField, SdTooltipProps, TagName, ToastType, CheckedType, Type as DateBoxType, TabOption, } from '@sellmate/design-system';

package/dist/index.js

@@ -1,4 +1,5 @@
 import '@sellmate/design-system/styles.css';
 export * from './components';
 export * from './plugin';
+export { sdModal, SdModalVuePlugin } from './sdModal';
 export { default as SdTable } from './SdTable';

package/dist/sdModal.d.ts

@@ -0,0 +1,42 @@
+import { type App, type Component } from 'vue';
+import { type ConfirmModalOptions, type ModalDialogChain, type SdModalCreateOption as CoreSdModalCreateOption, type SdModalGlobalOptions } from '@sellmate/design-system/utils';
+/**
+ * Vue 플러그인. `app.use(SdModalVuePlugin)` 로 설치하면
+ * 이후 `sdModal.create({ component: MyModal, componentProps: { ... } })` 호출 시
+ * 해당 앱의 컨텍스트(플러그인, provide/inject, compilerOptions 등)를
+ * 그대로 상속받습니다.
+ */
+export declare const SdModalVuePlugin: {
+    install(app: App): void;
+};
+/**
+ * `sdModal.create` 에 넘기는 입력.
+ *
+ * - `component` 에 HTMLElement 를 넘기면 core `sdModal.create` 로 바로 위임합니다.
+ *   이 경우 `componentProps` 는 무시됩니다.
+ * - `component` 에 Vue 컴포넌트를 넘기면 `componentProps` 로 props 를 지정해
+ *   메인 앱 컨텍스트 안에서 렌더한 뒤 core 로 위임합니다.
+ * - `persist` 는 core 옵션을 그대로 전달합니다.
+ */
+export interface SdModalCreateOption extends Omit<CoreSdModalCreateOption, 'component'> {
+    component: HTMLElement | Component;
+    componentProps?: Record<string, unknown>;
+}
+/**
+ * Vue-aware `sdModal`.
+ *
+ * - `sdModal.confirm(options)` — core 와 동일
+ * - `sdModal.create({ component, componentProps?, persist? })` —
+ *   `component` 가 HTMLElement 면 core 로 위임, Vue 컴포넌트면 메인 앱
+ *   컨텍스트 안에서 렌더한 뒤 위임합니다. 모달이 닫히면 자동으로 언마운트됩니다.
+ *
+ * 내부 구현 노트: 새 `createApp` 을 만들지 않고 `createVNode` + `render` +
+ * `vnode.appContext` 로 메인 앱의 렌더러만 빌려쓰므로 플러그인/provide/
+ * `compilerOptions.isCustomElement` 가 전부 자동 상속됩니다.
+ */
+export declare const sdModal: {
+    confirm(options: ConfirmModalOptions): ModalDialogChain;
+    configure(options: SdModalGlobalOptions): void;
+    create(input: SdModalCreateOption): ModalDialogChain;
+};
+export default sdModal;

package/dist/sdModal.js

@@ -0,0 +1,68 @@
+import { createVNode, render, } from 'vue';
+import { sdModal as coreSdModal, } from '@sellmate/design-system/utils';
+/**
+ * Vue 플러그인. `app.use(SdModalVuePlugin)` 로 설치하면
+ * 이후 `sdModal.create({ component: MyModal, componentProps: { ... } })` 호출 시
+ * 해당 앱의 컨텍스트(플러그인, provide/inject, compilerOptions 등)를
+ * 그대로 상속받습니다.
+ */
+export const SdModalVuePlugin = {
+    install(app) {
+        capturedContext = app._context;
+    },
+};
+let capturedContext = null;
+function isHTMLElement(value) {
+    return typeof HTMLElement !== 'undefined' && value instanceof HTMLElement;
+}
+function mountVueComponent(component, componentProps) {
+    if (!capturedContext) {
+        throw new Error('[sdModal] SdModalVuePlugin 이 설치되지 않았습니다. `app.use(SdModalVuePlugin)` 을 먼저 호출하세요.');
+    }
+    const host = document.createElement('div');
+    const vnode = createVNode(component, componentProps);
+    // 메인 앱의 컨텍스트(플러그인, isCustomElement, provide/inject 등) 상속
+    vnode.appContext = capturedContext;
+    render(vnode, host);
+    const el = host.firstElementChild;
+    if (!el) {
+        render(null, host);
+        throw new Error('[sdModal] 전달한 Vue 컴포넌트의 template 최상위는 단일 요소여야 합니다.');
+    }
+    return { el, host };
+}
+/**
+ * Vue-aware `sdModal`.
+ *
+ * - `sdModal.confirm(options)` — core 와 동일
+ * - `sdModal.create({ component, componentProps?, persist? })` —
+ *   `component` 가 HTMLElement 면 core 로 위임, Vue 컴포넌트면 메인 앱
+ *   컨텍스트 안에서 렌더한 뒤 위임합니다. 모달이 닫히면 자동으로 언마운트됩니다.
+ *
+ * 내부 구현 노트: 새 `createApp` 을 만들지 않고 `createVNode` + `render` +
+ * `vnode.appContext` 로 메인 앱의 렌더러만 빌려쓰므로 플러그인/provide/
+ * `compilerOptions.isCustomElement` 가 전부 자동 상속됩니다.
+ */
+export const sdModal = {
+    confirm(options) {
+        return coreSdModal.confirm(options);
+    },
+    configure(options) {
+        coreSdModal.configure(options);
+    },
+    create(input) {
+        const { component, componentProps = {}, persist } = input;
+        // HTMLElement 오버로드: core 로 바로 위임
+        if (isHTMLElement(component)) {
+            return coreSdModal.create({ component, persist });
+        }
+        // Vue 컴포넌트 오버로드
+        const { el, host } = mountVueComponent(component, componentProps);
+        const chain = coreSdModal.create({ component: el, persist });
+        chain.onDismissed(() => {
+            render(null, host);
+        });
+        return chain;
+    },
+};
+export default sdModal;

package/lib/components.ts

@@ -8,6 +8,17 @@ import type { JSX } from '@sellmate/design-system';
 
 
 
+export const SdActionModal: StencilVueComponent<JSX.SdActionModal> = /*@__PURE__*/ defineContainer<JSX.SdActionModal>('sd-action-modal', undefined, [
+  'title',
+  'buttonLabel',
+  'sdClose',
+  'sdOk'
+], [
+  'sdClose',
+  'sdOk'
+]);
+
+
 export const SdBadge: StencilVueComponent<JSX.SdBadge> = /*@__PURE__*/ defineContainer<JSX.SdBadge>('sd-badge', undefined, [
   'color',
   'label'
@@ -125,9 +136,11 @@ export const SdConfirmModal: StencilVueComponent<JSX.SdConfirmModal> = /*@__PURE
   'slotLabel',
   'tagContents',
   'sdClose',
+  'sdCancel',
   'sdOk'
 ], [
   'sdClose',
+  'sdCancel',
   'sdOk'
 ]);
 

package/lib/index.ts

@@ -2,6 +2,7 @@ import '@sellmate/design-system/styles.css';
 
 export * from './components';
 export * from './plugin';
+export { sdModal, SdModalVuePlugin } from './sdModal';
 export { default as SdTable } from './SdTable';
 
 // Export commonly used types for Vue usage

package/lib/sdModal.ts

@@ -0,0 +1,116 @@
+import {
+  createVNode,
+  render,
+  type App,
+  type AppContext,
+  type Component,
+} from 'vue';
+import {
+  sdModal as coreSdModal,
+  type ConfirmModalOptions,
+  type ModalDialogChain,
+  type SdModalCreateOption as CoreSdModalCreateOption,
+  type SdModalGlobalOptions,
+} from '@sellmate/design-system/utils';
+
+/**
+ * Vue 플러그인. `app.use(SdModalVuePlugin)` 로 설치하면
+ * 이후 `sdModal.create({ component: MyModal, componentProps: { ... } })` 호출 시
+ * 해당 앱의 컨텍스트(플러그인, provide/inject, compilerOptions 등)를
+ * 그대로 상속받습니다.
+ */
+export const SdModalVuePlugin = {
+  install(app: App) {
+    capturedContext = app._context;
+  },
+};
+
+let capturedContext: AppContext | null = null;
+
+/**
+ * `sdModal.create` 에 넘기는 입력.
+ *
+ * - `component` 에 HTMLElement 를 넘기면 core `sdModal.create` 로 바로 위임합니다.
+ *   이 경우 `componentProps` 는 무시됩니다.
+ * - `component` 에 Vue 컴포넌트를 넘기면 `componentProps` 로 props 를 지정해
+ *   메인 앱 컨텍스트 안에서 렌더한 뒤 core 로 위임합니다.
+ * - `persist` 는 core 옵션을 그대로 전달합니다.
+ */
+export interface SdModalCreateOption
+  extends Omit<CoreSdModalCreateOption, 'component'> {
+  component: HTMLElement | Component;
+  componentProps?: Record<string, unknown>;
+}
+
+function isHTMLElement(value: unknown): value is HTMLElement {
+  return typeof HTMLElement !== 'undefined' && value instanceof HTMLElement;
+}
+
+function mountVueComponent(
+  component: Component,
+  componentProps: Record<string, unknown>,
+): { el: HTMLElement; host: HTMLElement } {
+  if (!capturedContext) {
+    throw new Error(
+      '[sdModal] SdModalVuePlugin 이 설치되지 않았습니다. `app.use(SdModalVuePlugin)` 을 먼저 호출하세요.',
+    );
+  }
+
+  const host = document.createElement('div');
+  const vnode = createVNode(component, componentProps);
+  // 메인 앱의 컨텍스트(플러그인, isCustomElement, provide/inject 등) 상속
+  vnode.appContext = capturedContext;
+  render(vnode, host);
+
+  const el = host.firstElementChild as HTMLElement | null;
+  if (!el) {
+    render(null, host);
+    throw new Error(
+      '[sdModal] 전달한 Vue 컴포넌트의 template 최상위는 단일 요소여야 합니다.',
+    );
+  }
+
+  return { el, host };
+}
+
+/**
+ * Vue-aware `sdModal`.
+ *
+ * - `sdModal.confirm(options)` — core 와 동일
+ * - `sdModal.create({ component, componentProps?, persist? })` —
+ *   `component` 가 HTMLElement 면 core 로 위임, Vue 컴포넌트면 메인 앱
+ *   컨텍스트 안에서 렌더한 뒤 위임합니다. 모달이 닫히면 자동으로 언마운트됩니다.
+ *
+ * 내부 구현 노트: 새 `createApp` 을 만들지 않고 `createVNode` + `render` +
+ * `vnode.appContext` 로 메인 앱의 렌더러만 빌려쓰므로 플러그인/provide/
+ * `compilerOptions.isCustomElement` 가 전부 자동 상속됩니다.
+ */
+export const sdModal = {
+  confirm(options: ConfirmModalOptions): ModalDialogChain {
+    return coreSdModal.confirm(options);
+  },
+
+  configure(options: SdModalGlobalOptions): void {
+    coreSdModal.configure(options);
+  },
+
+  create(input: SdModalCreateOption): ModalDialogChain {
+    const { component, componentProps = {}, persist } = input;
+
+    // HTMLElement 오버로드: core 로 바로 위임
+    if (isHTMLElement(component)) {
+      return coreSdModal.create({ component, persist });
+    }
+
+    // Vue 컴포넌트 오버로드
+    const { el, host } = mountVueComponent(component, componentProps);
+    const chain = coreSdModal.create({ component: el, persist });
+    chain.onDismissed(() => {
+      render(null, host);
+    });
+
+    return chain;
+  },
+};
+
+export default sdModal;

package/package.json

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