@melt-js/libs-vue3-leva 0.0.0-stage → 2026.11.6-3

package/README.md

@@ -1,3 +1,77 @@
-# Temporary Holding Version
+# @melt-js/libs-vue3-leva
 
-This version is a temporary placeholder for this package. An operational version to replace this has been submitted for review and is awaiting a staged release.
+Vue 3 的属性面板（leva 风格）：`PropsPlayground` + `PropsPanel` + schema 生成 CLI，同时是一个 hel 远程包。
+
+- **自包含**：面板组件、schema 生成脚本都在本包内，和 `libs-vue2-leva` 各自独立维护（两边实现已分叉，改动互不影响）
+- **不认任何具体组件**：组件映射和 schema 都由宿主传进来
+- **schema 由脚本从源码注释生成**：`vdoc-parser` 解析 props 上方的 JSDoc（`@description`），输出到组件目录旁边
+- Vue 2 / Vue 3 的差异只有三处兼容点：`value`/`input` 与 `modelValue`/`update:modelValue` 双写、`$set` 判空、`beforeDestroy` / `beforeUnmount` 各挂一次
+
+## 远程使用
+
+```bash
+pnpm libs-vue3-leva:dev    # 10040，直接打开是本包调试页
+pnpm libs-vue3-leva:build  # 发布用产物，资源地址指向 unpkg
+```
+
+```ts
+import { preFetchLib } from 'hel-micro'
+await preFetchLib('libs-vue3-leva', { custom: { host: 'http://localhost:10040', skipFetchHelMeta: true } })
+
+// 路由懒加载的页面里（此时已预加载完成）取组件
+const { PropsPlayground } = await import('@melt-js/libs-vue3-leva')
+```
+
+```vue
+<props-playground
+  :components="components"
+  :schemas="schemas"
+  :presets="presets"
+  :listeners="listeners"
+  :stage-classes="stageClasses"
+  :stage-styles="stageStyles"
+  :slot-html="slotHtml"
+/>
+```
+
+- `components`：`{ 组件名: 组件 }`
+- `schemas`：`{ 组件名: propsSchema.json 的内容 }`
+- `presets`：可选，`{ 组件名: { items: [...] } }`，面板不生成控件的复杂 props / 插槽配套数据；同时会作为面板的初始值
+- `listeners`：可选，`{ 组件名: { select: (item) => ... } }`，透传给组件的 `v-on`
+- `stageClasses` / `stageStyles`：可选，`{ 组件名: 'is-dark' }` / `{ 组件名: { height: '480px' } }`
+- `slotHtml`：可选，`{ 组件名: { default: '<p>内容</p>', title: '标题' } }`，支持 `default` / `title` / `action` / `footer` / `filters` / `actions` / `start` / `end` / `tool` / `rightTool`
+
+`PropsPanel` 也可以单独用：`:schema` + `v-model`。
+
+## schema 生成
+
+组件包（如 `comps-vue3`）用 `workspace:*` 引本包，把 `gen:schema` 指向 CLI：
+
+```json
+{
+  "dependencies": { "@melt-js/libs-vue3-leva": "workspace:*" },
+  "bin": "vue3-leva-gen-schema",
+  "scripts": { "gen:schema": "vue3-leva-gen-schema" }
+}
+```
+
+组件包根目录放 `playground.config.mjs`：
+
+```js
+export default {
+  components: [{ name: 'CircularMenu', file: 'src/components/CircularMenu.vue' }],
+  hints: { CircularMenu: { openText: { options: { a: 'a', b: 'b' } } } },
+}
+```
+
+```bash
+vue3-leva-gen-schema          # 生成 / 更新 propsSchema.json
+vue3-leva-gen-schema --check  # CI：schema 与源码不一致时退出码 1
+```
+
+约定：
+
+- 优先用带 `@description` 的 JSDoc；没有 JSDoc 时，生成器会把 props 上方的 `// 注释`（没有注释时用属性名）补成 `@description`，方便老组件直接接入
+- `index.vue` 写到同目录 `propsSchema.json`，单文件组件写 `Foo.propsSchema.json`
+- 字符串字面量联合（`'a' | 'b'`）会生成下拉 `options`
+- Vue 3 的 props 请用对象形式 `defineProps({ ... })`（`withDefaults(defineProps<...>())` 解析不到 props，类型用 `PropType<T>` 保留）

package/hel_dist/css/69.afeb2ccb.css

@@ -0,0 +1 @@
+.props-panel[data-v-7cfac513]{width:100%;min-width:0}.props-panel__pane[data-v-7cfac513]{width:100%}.props-panel__hint[data-v-7cfac513]{margin:8px 0 0;color:#667085;font-size:12px;line-height:1.5}.props-playground[data-v-77b60ab6]{display:flex;flex-direction:column;gap:12px;min-width:0}.props-playground__bar[data-v-77b60ab6]{display:flex;flex-wrap:wrap;gap:10px;align-items:center;justify-content:space-between}.props-playground__tabs[data-v-77b60ab6]{display:flex;flex-wrap:wrap;gap:6px}.props-playground__action[data-v-77b60ab6],.props-playground__tab[data-v-77b60ab6]{padding:6px 12px;border:1px solid #d0d5dd;border-radius:999px;background:#fff;color:#344054;font-family:inherit;font-size:12px;font-weight:600;line-height:1.4;cursor:pointer;transition:color .2s,background-color .2s,border-color .2s}.props-playground__action[data-v-77b60ab6]:hover,.props-playground__tab[data-v-77b60ab6]:hover{border-color:#2563eb;color:#2563eb}.props-playground__tab.is-active[data-v-77b60ab6]{border-color:#2563eb;background:#2563eb;color:#fff}.props-playground__body[data-v-77b60ab6]{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:16px;align-items:start}.props-playground__stage[data-v-77b60ab6]{height:640px;overflow:auto;border:1px solid #d0d5dd;border-radius:12px;background:#fff}.props-playground__stage.is-dark[data-v-77b60ab6]{background:#0b1220}.props-playground__panel[data-v-77b60ab6]{position:sticky;top:16px}.props-playground__empty[data-v-77b60ab6]{margin:0;padding:24px;color:#667085;font-size:13px}@media (max-width:900px){.props-playground__body[data-v-77b60ab6]{grid-template-columns:1fr}.props-playground__stage[data-v-77b60ab6]{height:480px}.props-playground__panel[data-v-77b60ab6]{position:static}}

package/hel_dist/entry.js

@@ -0,0 +1,25 @@
+(function (global, factory) {
+	typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('hel-lib-proxy')) :
+	typeof define === 'function' && define.amd ? define(['exports', 'hel-lib-proxy'], factory) :
+	(global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory(global["libs-vue3-leva"] = {}, global.helLibProxy));
+})(this, (function (exports, helLibProxy) { 'use strict';
+
+	const LIB_NAME = 'libs-vue3-leva';
+
+	/*
+	|--------------------------------------------------------------------------
+	|
+	| 组件类型导出文件，同时也作为 rollup 的打包入口：打包后是一个仅包含 hel-lib-proxy
+	| 的空壳文件，真正的组件在运行时由 hel 通过 hel_dist 载入
+	|
+	|--------------------------------------------------------------------------
+	*/
+
+	const dtlib = helLibProxy.exposeLib(LIB_NAME);
+
+	exports.default = dtlib;
+	exports.dtlib = dtlib;
+
+	Object.defineProperty(exports, '__esModule', { value: true });
+
+}));

package/hel_dist/hel-meta.json

@@ -0,0 +1,66 @@
+{
+  "app": {
+    "name": "libs-vue3-leva",
+    "app_group_name": "libs-vue3-leva",
+    "git_repo_url": "",
+    "online_version": "2026.11.6-3",
+    "build_version": "2026.11.6-3",
+    "platform": "unpkg",
+    "create_at": "2026-11-06T14:39:34.152Z"
+  },
+  "version": {
+    "plugin_ver": "5.4.3",
+    "extract_mode": "build",
+    "sub_app_name": "libs-vue3-leva",
+    "sub_app_version": "libs-vue3-leva@2026.11.6-3",
+    "version_tag": "2026.11.6-3",
+    "src_map": {
+      "webDirPath": "https://unpkg.com/@melt-js/libs-vue3-leva@2026.11.6-3/hel_dist",
+      "htmlIndexSrc": "https://unpkg.com/@melt-js/libs-vue3-leva@2026.11.6-3/hel_dist/index.html",
+      "extractMode": "all",
+      "iframeSrc": "",
+      "chunkCssSrcList": [
+        "https://unpkg.com/@melt-js/libs-vue3-leva@2026.11.6-3/hel_dist/\\css\\69.afeb2ccb.css"
+      ],
+      "chunkJsSrcList": [
+        "https://unpkg.com/@melt-js/libs-vue3-leva@2026.11.6-3/hel_dist/js/app.61d2eb12.js",
+        "https://unpkg.com/@melt-js/libs-vue3-leva@2026.11.6-3/hel_dist/\\js\\69.12d21618.js",
+        "https://unpkg.com/@melt-js/libs-vue3-leva@2026.11.6-3/hel_dist/\\js\\app.61d2eb12.js"
+      ],
+      "staticCssSrcList": [],
+      "staticJsSrcList": [
+        "https://unpkg.com/vue@3.5.44/dist/vue.global.prod.js"
+      ],
+      "relativeCssSrcList": [],
+      "relativeJsSrcList": [],
+      "headAssetList": [
+        {
+          "tag": "staticScript",
+          "append": false,
+          "attrs": {
+            "src": "https://unpkg.com/vue@3.5.44/dist/vue.global.prod.js"
+          }
+        },
+        {
+          "tag": "script",
+          "append": true,
+          "attrs": {
+            "src": "https://unpkg.com/@melt-js/libs-vue3-leva@2026.11.6-3/hel_dist/js/app.61d2eb12.js",
+            "defer": "defer"
+          }
+        }
+      ],
+      "bodyAssetList": [],
+      "otherSrcList": [
+        "https://unpkg.com/@melt-js/libs-vue3-leva@2026.11.6-3/hel_dist/\\index.html",
+        "https://unpkg.com/@melt-js/libs-vue3-leva@2026.11.6-3/hel_dist/\\js\\69.12d21618.js.map",
+        "https://unpkg.com/@melt-js/libs-vue3-leva@2026.11.6-3/hel_dist/\\js\\app.61d2eb12.js.map"
+      ],
+      "srvModSrcList": [],
+      "srvModSrcIndex": ""
+    },
+    "html_content": "<!doctype html><html lang=\"\"><head><meta charset=\"utf-8\"/><meta http-equiv=\"X-UA-Compatible\" content=\"IE=edge\"/><meta name=\"viewport\" content=\"width=device-width,initial-scale=1\"/><title>@melt-js/libs-vue3-leva</title><script data-helappend=\"0\" src=\"https://unpkg.com/vue@3.5.44/dist/vue.global.prod.js\"></script><script defer=\"defer\" src=\"https://unpkg.com/@melt-js/libs-vue3-leva@2026.11.6-3/hel_dist/js/app.61d2eb12.js\"></script></head><body><noscript><strong>We're sorry but @melt-js/libs-vue3-leva doesn't work properly without JavaScript enabled. Please enable it to continue.</strong></noscript><div id=\"app\"></div></body></html>",
+    "create_at": "2026-11-06T14:39:34.152Z",
+    "desc": "this version meta is created by hel-dev-utils@5.4.3"
+  }
+}

package/hel_dist/index.html

@@ -0,0 +1 @@
+<!doctype html><html lang=""><head><meta charset="utf-8"/><meta http-equiv="X-UA-Compatible" content="IE=edge"/><meta name="viewport" content="width=device-width,initial-scale=1"/><title>@melt-js/libs-vue3-leva</title><script data-helappend="0" src="https://unpkg.com/vue@3.5.44/dist/vue.global.prod.js"></script><script defer="defer" src="https://unpkg.com/@melt-js/libs-vue3-leva@2026.11.6-3/hel_dist/js/app.61d2eb12.js"></script></head><body><noscript><strong>We're sorry but @melt-js/libs-vue3-leva doesn't work properly without JavaScript enabled. Please enable it to continue.</strong></noscript><div id="app"></div></body></html>