snapshot of https://github.com/dream-num/univer.git (dev, 2026-09-16; blobs > 131072B omitted)

packages/ui-adapter-vue3/README.md

@@ -0,0 +1,37 @@
+# @univerjs/ui-adapter-vue3
+
+[![npm version](https://img.shields.io/npm/v/@univerjs/ui-adapter-vue3?style=flat-square)](https://npmjs.com/package/@univerjs/ui-adapter-vue3)
+[![license](https://img.shields.io/npm/l/@univerjs/ui-adapter-vue3?style=flat-square)](https://npmjs.com/package/@univerjs/ui-adapter-vue3)
+[![downloads](https://img.shields.io/npm/dm/@univerjs/ui-adapter-vue3?style=flat-square)](https://npmjs.com/package/@univerjs/ui-adapter-vue3)
+
+`@univerjs/ui-adapter-vue3` adapts Univer UI services for Vue 3 integrations.
+
+## Package Overview
+
+| Package | UMD global | CSS | Locales | Facade entry |
+| --- | --- | :---: | :---: | :---: |
+| `@univerjs/ui-adapter-vue3` | `UniverUiAdapterVue3` | No | No | No |
+
+## Installation
+
+```sh
+pnpm add @univerjs/ui-adapter-vue3
+# or
+npm install @univerjs/ui-adapter-vue3
+```
+
+Keep all `@univerjs/*` packages on the same version.
+
+## Usage
+
+```ts
+import { UniverVue3AdapterPlugin } from '@univerjs/ui-adapter-vue3';
+
+univer.registerPlugin(UniverVue3AdapterPlugin);
+```
+
+## Resources
+
+- [Documentation](https://docs.univer.ai)
+- [NPM package](https://npmjs.com/package/@univerjs/ui-adapter-vue3)
+- [GitHub repository](https://github.com/dream-num/univer)

packages/ui-adapter-vue3/package.json

@@ -0,0 +1,79 @@
+{
+    "name": "@univerjs/ui-adapter-vue3",
+    "version": "1.0.0-rc.0",
+    "private": false,
+    "description": "Vue 3 adapter for Univer UI services.",
+    "author": "DreamNum Co., Ltd. <developer@univer.ai>",
+    "license": "Apache-2.0",
+    "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/univer"
+    },
+    "homepage": "https://univer.ai",
+    "repository": {
+        "type": "git",
+        "url": "https://github.com/dream-num/univer"
+    },
+    "bugs": {
+        "url": "https://github.com/dream-num/univer/issues"
+    },
+    "keywords": [
+        "univer",
+        "ui",
+        "vue3",
+        "adapter",
+        "plugin"
+    ],
+    "exports": {
+        ".": "./src/index.ts",
+        "./*": "./src/*"
+    },
+    "main": "./src/index.ts",
+    "types": "./lib/types/index.d.ts",
+    "publishConfig": {
+        "access": "public",
+        "main": "./lib/es/index.js",
+        "module": "./lib/es/index.js",
+        "exports": {
+            ".": {
+                "import": "./lib/es/index.js",
+                "require": "./lib/cjs/index.js",
+                "types": "./lib/types/index.d.ts"
+            },
+            "./*": {
+                "import": "./lib/es/*",
+                "require": "./lib/cjs/*",
+                "types": "./lib/types/index.d.ts"
+            },
+            "./lib/*": "./lib/*"
+        }
+    },
+    "directories": {
+        "lib": "lib"
+    },
+    "files": [
+        "lib"
+    ],
+    "scripts": {
+        "test": "vitest run",
+        "test:watch": "vitest",
+        "coverage": "vitest run --coverage",
+        "typecheck": "tsc --noEmit",
+        "build:bundle": "univer-cli build",
+        "build:types": "tsc -p tsconfig.node.json",
+        "build": "pnpm run build:bundle && pnpm run build:types"
+    },
+    "peerDependencies": {
+        "vue": ">=3.0.0"
+    },
+    "dependencies": {
+        "@univerjs/core": "workspace:*",
+        "@univerjs/ui": "workspace:*"
+    },
+    "devDependencies": {
+        "@univerjs-infra/shared": "workspace:*",
+        "typescript": "^6.0.3",
+        "vitest": "^5.0.0",
+        "vue": "^3.5.42"
+    }
+}

packages/ui-adapter-vue3/src/config/config.ts

@@ -0,0 +1,23 @@
+/**
+ * Copyright 2023-present DreamNum Co., Ltd.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+export const UI_ADAPTER_VUE3_PLUGIN_CONFIG_KEY = 'ui-adapter-vue3.config';
+
+export const configSymbol = Symbol(UI_ADAPTER_VUE3_PLUGIN_CONFIG_KEY);
+
+export interface IUniverVue3AdapterConfig {}
+
+export const defaultPluginConfig: IUniverVue3AdapterConfig = {};

packages/ui-adapter-vue3/src/index.ts

@@ -0,0 +1,19 @@
+/**
+ * Copyright 2023-present DreamNum Co., Ltd.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+export { UI_ADAPTER_VUE3_PLUGIN_CONFIG_KEY } from './config/config';
+export type { IUniverVue3AdapterConfig } from './config/config';
+export { UniverVue3AdapterPlugin } from './plugin';

packages/ui-adapter-vue3/src/plugin.ts

@@ -0,0 +1,92 @@
+/**
+ * Copyright 2023-present DreamNum Co., Ltd.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import type { IComponent } from '@univerjs/ui';
+import type { defineComponent } from 'vue';
+import type { IUniverVue3AdapterConfig } from './config/config';
+import { IConfigService, Inject, Injector, merge, Plugin } from '@univerjs/core';
+import { ComponentManager } from '@univerjs/ui';
+import { h, render } from 'vue';
+import pkg from '../package.json';
+import { defaultPluginConfig, UI_ADAPTER_VUE3_PLUGIN_CONFIG_KEY } from './config/config';
+
+/**
+ * The plugin that allows Univer to use Vue 3 components as UI components.
+ */
+
+export class UniverVue3AdapterPlugin extends Plugin {
+    static override pluginName = 'UNIVER_UI_ADAPTER_VUE3_PLUGIN';
+    static override packageName = pkg.name;
+    static override version = pkg.version;
+
+    constructor(
+        private readonly _config: Partial<IUniverVue3AdapterConfig> = defaultPluginConfig,
+        @Inject(Injector) protected readonly _injector: Injector,
+        @IConfigService private readonly _configService: IConfigService,
+        @Inject(ComponentManager) protected readonly _componentManager: ComponentManager
+    ) {
+        super();
+
+        const { ...rest } = merge(
+            {},
+            defaultPluginConfig,
+            this._config
+        );
+        this._configService.setConfig(UI_ADAPTER_VUE3_PLUGIN_CONFIG_KEY, rest);
+    }
+
+    override onStarting(): void {
+        const { createElement, useEffect, useRef } = this._componentManager.reactUtils;
+
+        this._componentManager.setHandler('vue3', (component: IComponent['component']) => {
+            return (props: Record<string, unknown>) => createElement(VueComponentWrapper, {
+                component,
+                props: Object.keys(props).reduce<Record<string, unknown>>((acc, key) => {
+                    if (key !== 'key') {
+                        acc[key] = props[key];
+                    }
+                    return acc;
+                }, {}),
+                reactUtils: { createElement, useEffect, useRef },
+            });
+        });
+    }
+}
+
+export function VueComponentWrapper(options: {
+    component: ReturnType<typeof defineComponent>;
+    props: Record<string, unknown>;
+    reactUtils: typeof ComponentManager.prototype.reactUtils;
+}) {
+    const { component, props, reactUtils } = options;
+    const { createElement, useEffect, useRef } = reactUtils;
+
+    const domRef = useRef<HTMLDivElement>(null);
+
+    useEffect(() => {
+        if (!domRef.current) return;
+
+        const vnode = h(component, props);
+
+        render(vnode, domRef.current);
+
+        return () => {
+            domRef.current && render(null, domRef.current);
+        };
+    }, [props]);
+
+    return createElement('div', { ref: domRef });
+}

packages/ui-adapter-vue3/tsconfig.json

@@ -0,0 +1,8 @@
+{
+    "extends": "@univerjs-infra/shared/tsconfigs/base",
+    "compilerOptions": {
+        "rootDir": "src",
+        "outDir": "lib/types"
+    },
+    "include": ["src"]
+}

packages/ui-adapter-vue3/tsconfig.node.json

@@ -0,0 +1,18 @@
+{
+    "extends": "@univerjs-infra/shared/tsconfigs/node",
+    "compilerOptions": {
+        "rootDir": "src",
+        "declaration": true,
+        "emitDeclarationOnly": true,
+        "noEmit": false,
+        "outDir": "lib/types"
+    },
+    "include": [
+        "src"
+    ],
+    "exclude": [
+        "src/**/__tests__/**",
+        "src/**/*.spec.ts",
+        "src/**/*.test.ts"
+    ]
+}

packages/ui-adapter-vue3/vitest.config.ts

@@ -0,0 +1,3 @@
+import createConfig from '@univerjs-infra/shared/vitest';
+
+export default createConfig();