@vmscloud/moz-ui-grid-vue 0.1.41

package/README.md

@@ -0,0 +1,71 @@
+# @vmscloud/moz-ui-grid-vue
+
+`@vmscloud/moz-ui-grid-core`의 Vue 3 wrapping 라이브러리입니다. 컴포넌트 `MozGrid`는 바닐라 `GridChrome`(`@vmscloud/moz-ui-grid-wrapper`)을 얇게 감싸는 어댑터입니다. React 버전(`@vmscloud/moz-ui-grid-react`)과 외관·동작·API가 동등합니다.
+
+## 설치
+
+```bash
+pnpm add @vmscloud/moz-ui-grid-vue vue
+```
+
+npmjs 공개 패키지라 레지스트리 설정이나 토큰 없이 설치됩니다.
+예전에 `.npmrc`에 넣어 둔 `@vmscloud:registry=https://npm.pkg.github.com` 매핑은 제거하세요.
+
+단, 필수 peerDependency인 `@vmscloud/moz-ui-components`는 아직 GitHub Packages(private)에만 있습니다.
+같은 스코프를 두 레지스트리에 동시에 매핑할 수 없으므로, 이 패키지만 tarball URL로 지정해 설치하세요.
+
+```bash
+# GitHub Packages 읽기 권한이 있는 환경에서 tarball URL을 조회한 뒤
+npm view @vmscloud/moz-ui-components@<version> dist.tarball --@vmscloud:registry=https://npm.pkg.github.com
+pnpm add "@vmscloud/moz-ui-components@<위에서 얻은 tarball URL>"
+```
+
+```ini
+# .npmrc — 인증은 호스트별로만 남기고 스코프는 npmjs로 둡니다
+//npm.pkg.github.com/:_authToken=${GITHUB_PACKAGES_TOKEN}
+```
+
+## 문서
+
+전체 API 레퍼런스가 패키지에 **동봉**됩니다 (`node_modules/@vmscloud/moz-ui-grid-vue/docs/manual/`):
+
+- **`reference_vue.md`** — Vue 래퍼(`MozGrid`) Props·Emits·Slots·인스턴스 API
+- **`reference.md`** — 코어(`PureSheet`) Config·타입·이벤트 전체 레퍼런스 (래퍼 문서가 링크로 위임)
+- **`examples.md`** — 코어 사용 예제
+
+## 기본 사용법
+
+```vue
+<script setup lang="ts">
+import { ref } from 'vue';
+import { MozGrid } from '@vmscloud/moz-ui-grid-vue';
+import type { MozGridCoreProps } from '@vmscloud/moz-ui-grid-vue';
+// 코어 그리드 본체 스타일(.ps-*)은 wrapper 스타일시트에만 있음 → 필수
+import '@vmscloud/moz-ui-grid-wrapper/style.css';
+import '@vmscloud/moz-ui-grid-vue/style.css';
+
+const coreConfig = ref<MozGridCoreProps>({
+  mode: 'flat',
+  fields: [
+    { id: 'name', header: '이름', dataType: 'string', width: 200 },
+    { id: 'age', header: '나이', dataType: 'number', width: 100 },
+  ],
+  data: [
+    { id: 1, name: '홍길동', age: 30 },
+    { id: 2, name: '김철수', age: 25 },
+  ],
+});
+</script>
+
+<template>
+  <MozGrid v-model:coreConfig="coreConfig" height="600px" @ready="(g) => console.log(g)" />
+</template>
+```
+
+## 스타일
+
+코어 그리드 본체 스타일(`.ps-*`)은 **`@vmscloud/moz-ui-grid-wrapper/style.css`에만** 포함됩니다 — 위 예제처럼 wrapper 스타일시트를 반드시 import하세요. `@vmscloud/moz-ui-grid-vue/style.css`는 Vue 어댑터 추가 스타일입니다. 자세한 내용은 동봉된 `reference_vue.md`를 참조하세요.
+
+## 라이센스
+
+ISC

package/dist/MozGrid.vue.d.ts

@@ -0,0 +1,127 @@
+import { GridChrome, WrapperExtras, MozGridCoreProps } from '../../moz-ui-grid-wrapper/src/index.ts';
+import { PureSheet } from '../../moz-ui-grid-core/src/index.ts';
+type __VLS_Props = WrapperExtras & {
+    name?: string;
+};
+type __VLS_PublicProps = {
+    'coreConfig'?: MozGridCoreProps;
+} & __VLS_Props;
+declare function __VLS_template(): {
+    attrs: Partial<{}>;
+    slots: {
+        default?(_: {}): any;
+    };
+    refs: {
+        hostRef: HTMLDivElement;
+    };
+    rootEl: any;
+};
+type __VLS_TemplateResult = ReturnType<typeof __VLS_template>;
+declare const __VLS_component: import('vue').DefineComponent<__VLS_PublicProps, {
+    grid: PureSheet;
+    slots: import('../../moz-ui-grid-wrapper/src/index.ts').SlotHost;
+    ui: Required<import('../../moz-ui-grid-wrapper/src/index.ts').WrapperUIOptions>;
+    filter: import('../../moz-ui-grid-wrapper/src/index.ts').FilterController;
+    sort: import('../../moz-ui-grid-wrapper/src/index.ts').SortController;
+    customCell: import('../../moz-ui-grid-wrapper/src/index.ts').CustomCellController;
+    bulkEditor: import('../../moz-ui-grid-wrapper/src/index.ts').BulkEditorController;
+    columnSettings: import('../../moz-ui-grid-wrapper/src/index.ts').ColumnSettingsController;
+    group: import('../../moz-ui-grid-wrapper/src/index.ts').GroupController;
+    excel: import('../../moz-ui-grid-wrapper/src/index.ts').ExcelController;
+    pivot: import('../../moz-ui-grid-wrapper/src/index.ts').PivotController;
+    search: import('../../moz-ui-grid-wrapper/src/index.ts').SearchController;
+    columnFormat: import('../../moz-ui-grid-wrapper/src/index.ts').ColumnFormatController;
+    contextMenu: import('../../moz-ui-grid-wrapper/src/index.ts').ContextMenuController;
+    chart: import('../../moz-ui-grid-wrapper/src/index.ts').ChartController | null;
+    chrome: GridChrome | null;
+}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
+    contextmenu: (payload: unknown) => any;
+    scroll: (payload: unknown) => any;
+    "data:loaded": () => any;
+    "selection:changed": (payload: unknown) => any;
+    "row:reordered": (payload: unknown) => any;
+    "row:pinned": (payload: unknown) => any;
+    "row:unpinned": (payload: unknown) => any;
+    "column:pin": (payload: unknown) => any;
+    "column:resize": (payload: unknown) => any;
+    "column:reorder": (payload: unknown) => any;
+    "rowGroup:batchToggle": (payload: unknown) => any;
+    "row:click": (payload: unknown) => any;
+    "row:dblclick": (payload: unknown) => any;
+    "cell:click": (payload: unknown) => any;
+    "cell:dblclick": (payload: unknown) => any;
+    "cell:change": (payload: unknown) => any;
+    "sort:changed": (payload: unknown) => any;
+    "filter:changed": (payload: unknown) => any;
+    "header:click": (payload: unknown) => any;
+    "header:sortClick": (payload: unknown) => any;
+    "header:filterClick": (payload: unknown) => any;
+    "undo:stateChange": (payload: unknown) => any;
+    "clipboard:copy": (payload: unknown) => any;
+    "clipboard:paste": (payload: unknown) => any;
+    "validation:changed": (payload: unknown) => any;
+    "columnGroup:toggle": (payload: unknown) => any;
+    "rowGroup:toggle": (payload: unknown) => any;
+    "cell:beforeEdit": (payload: unknown) => any;
+    "cell:editCommitting": (payload: unknown) => any;
+    "cell:editCommitted": (payload: unknown) => any;
+    "cell:tooltip": (payload: unknown) => any;
+    "column:visibility": (payload: unknown) => any;
+    ready: (grid: PureSheet, chrome: GridChrome) => any;
+    "update:coreConfig": (value: MozGridCoreProps) => any;
+}, string, import('vue').PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
+    onContextmenu?: ((payload: unknown) => any) | undefined;
+    onScroll?: ((payload: unknown) => any) | undefined;
+    "onData:loaded"?: (() => any) | undefined;
+    "onSelection:changed"?: ((payload: unknown) => any) | undefined;
+    "onRow:reordered"?: ((payload: unknown) => any) | undefined;
+    "onRow:pinned"?: ((payload: unknown) => any) | undefined;
+    "onRow:unpinned"?: ((payload: unknown) => any) | undefined;
+    "onColumn:pin"?: ((payload: unknown) => any) | undefined;
+    "onColumn:resize"?: ((payload: unknown) => any) | undefined;
+    "onColumn:reorder"?: ((payload: unknown) => any) | undefined;
+    "onRowGroup:batchToggle"?: ((payload: unknown) => any) | undefined;
+    "onRow:click"?: ((payload: unknown) => any) | undefined;
+    "onRow:dblclick"?: ((payload: unknown) => any) | undefined;
+    "onCell:click"?: ((payload: unknown) => any) | undefined;
+    "onCell:dblclick"?: ((payload: unknown) => any) | undefined;
+    "onCell:change"?: ((payload: unknown) => any) | undefined;
+    "onSort:changed"?: ((payload: unknown) => any) | undefined;
+    "onFilter:changed"?: ((payload: unknown) => any) | undefined;
+    "onHeader:click"?: ((payload: unknown) => any) | undefined;
+    "onHeader:sortClick"?: ((payload: unknown) => any) | undefined;
+    "onHeader:filterClick"?: ((payload: unknown) => any) | undefined;
+    "onUndo:stateChange"?: ((payload: unknown) => any) | undefined;
+    "onClipboard:copy"?: ((payload: unknown) => any) | undefined;
+    "onClipboard:paste"?: ((payload: unknown) => any) | undefined;
+    "onValidation:changed"?: ((payload: unknown) => any) | undefined;
+    "onColumnGroup:toggle"?: ((payload: unknown) => any) | undefined;
+    "onRowGroup:toggle"?: ((payload: unknown) => any) | undefined;
+    "onCell:beforeEdit"?: ((payload: unknown) => any) | undefined;
+    "onCell:editCommitting"?: ((payload: unknown) => any) | undefined;
+    "onCell:editCommitted"?: ((payload: unknown) => any) | undefined;
+    "onCell:tooltip"?: ((payload: unknown) => any) | undefined;
+    "onColumn:visibility"?: ((payload: unknown) => any) | undefined;
+    onReady?: ((grid: PureSheet, chrome: GridChrome) => any) | undefined;
+    "onUpdate:coreConfig"?: ((value: MozGridCoreProps) => any) | undefined;
+}>, {
+    height: string | number;
+    useToolBox: boolean;
+    useToolBoxSetting: boolean;
+    useExtendFooter: boolean;
+    useSummaryFooter: boolean;
+    useSort: boolean;
+    useCustomCell: boolean;
+    useContextMenu: boolean;
+    usePivotBar: boolean;
+    useBuiltinTooltip: boolean;
+}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {
+    hostRef: HTMLDivElement;
+}, any>;
+declare const _default: __VLS_WithTemplateSlots<typeof __VLS_component, __VLS_TemplateResult["slots"]>;
+export default _default;
+type __VLS_WithTemplateSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/bridge/VueRenderer.d.ts

@@ -0,0 +1,37 @@
+import { AppContext, Component } from 'vue';
+export declare class VueRenderer {
+    private instances;
+    private appContext;
+    /** 부모 앱 컨텍스트 캡처 (MozGridVue setup에서 호출) */
+    setAppContext(ctx: AppContext): void;
+    /**
+     * Vue 컴포넌트를 DOM 요소에 마운트합니다.
+     *
+     * 동일 key로 재호출 시 props만 업데이트합니다 (재마운트 없음).
+     */
+    mount(key: string, container: HTMLElement, component: Component, props?: Record<string, unknown>): void;
+    /**
+     * 컨테이너 단위 lifecycle 인스턴스 마운트 (키 없음).
+     *
+     * core 의 LifecycleCellRenderer(arity 2: `(container, params) => instance`) 전용.
+     * 전역 키맵을 쓰지 않고 셀 컨테이너마다 독립 app 을 만들며, reactive props 로 갱신(update),
+     * unmount 로 정리(destroy)한다. 가상 스크롤 재사용은 destroy 없이 update(props 교체)로 처리되어
+     * mount/destroy 반복 비용이 없다. (키 충돌·미재마운트로 셀이 안 그려지던 버그 해소)
+     */
+    mountInstance(container: HTMLElement, slot: (props: Record<string, unknown>) => unknown, initialProps: Record<string, unknown>): {
+        update: (props: Record<string, unknown>) => void;
+        destroy: () => void;
+    };
+    /** props 업데이트 (재마운트 없음) */
+    updateProps(key: string, props: Record<string, unknown>): void;
+    /** 특정 인스턴스 언마운트 */
+    unmount(key: string): void;
+    /** 접두사 기반 일괄 언마운트 (예: 'cell:' 접두사의 모든 셀 인스턴스) */
+    unmountByPrefix(prefix: string): void;
+    /** 전체 인스턴스 언마운트 */
+    unmountAll(): void;
+    /** 현재 마운트된 인스턴스 수 */
+    get size(): number;
+    /** 특정 key의 인스턴스가 존재하는지 확인 */
+    has(key: string): boolean;
+}

package/dist/bridge/fieldBuilder.d.ts

@@ -0,0 +1,9 @@
+import { FieldDef } from '../../../moz-ui-grid-core/src/index.ts';
+import { TemplateRegistry } from '../types/slots';
+import { VueRenderer } from './VueRenderer';
+/**
+ * 사용자 FieldDef + 등록된 템플릿 → cellRenderer/headerRenderer/editor 주입.
+ *
+ * TemplateRegistry에 등록된 슬롯을 FieldDef의 콜백으로 변환합니다.
+ */
+export declare function buildFieldDefs(fields: FieldDef[], registry: TemplateRegistry, renderer: VueRenderer): FieldDef[];

package/dist/bridge/lifecycle.d.ts

@@ -0,0 +1,6 @@
+import { AppContext } from 'vue';
+/**
+ * 현재 Vue 인스턴스의 AppContext를 가져옵니다.
+ * setup() 함수 내에서만 호출 가능합니다.
+ */
+export declare function useAppContext(): AppContext;

package/dist/bridge/templateRegistry.d.ts

@@ -0,0 +1,8 @@
+import { TemplateRegistry } from '../types/slots';
+/**
+ * 템플릿 레지스트리 생성.
+ *
+ * CellTemplate, HeaderTemplate, CellEditor, DetailTemplate, GroupTemplate이
+ * setup 시 register하고, unmount 시 unregister합니다.
+ */
+export declare function createTemplateRegistry(): TemplateRegistry;