@melt-js/demo-vue3 0.0.5 → 2026.11.6-2
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +92 -89
- package/dist/assets/CircularMenuView-4-qK1Bci.js +2 -0
- package/dist/assets/CircularMenuView-4-qK1Bci.js.map +1 -0
- package/dist/assets/CircularMenuView-CeaWrpMP.css +1 -0
- package/dist/assets/{HostView-CI4NKKTv.js → HostView-Bw1v6HtD.js} +2 -2
- package/dist/assets/HostView-Bw1v6HtD.js.map +1 -0
- package/dist/assets/HostView-CP_6ZTK_.css +1 -0
- package/dist/assets/LevaPlayground-DYAgbNnJ.css +1 -0
- package/dist/assets/LevaPlayground-i7Bc01Vw.js +2 -0
- package/dist/assets/LevaPlayground-i7Bc01Vw.js.map +1 -0
- package/dist/assets/{OverviewView-BzBqZXy_.js → OverviewView-D-OMwSKL.js} +2 -2
- package/dist/assets/OverviewView-D-OMwSKL.js.map +1 -0
- package/dist/assets/RemoteView-DKphv0mb.css +1 -0
- package/dist/assets/RemoteView-D_bHz8G7.js +2 -0
- package/dist/assets/RemoteView-D_bHz8G7.js.map +1 -0
- package/dist/assets/{_plugin-vue_export-helper-BWAI2PXX.js → _plugin-vue_export-helper-C7rqUIsm.js} +2 -2
- package/dist/assets/_plugin-vue_export-helper-C7rqUIsm.js.map +1 -0
- package/dist/assets/index-nsRhUCyk.js +67 -0
- package/dist/assets/index-nsRhUCyk.js.map +1 -0
- package/dist/assets/loadApp-CTkznB3Q.js +11 -0
- package/dist/assets/loadApp-CTkznB3Q.js.map +1 -0
- package/dist/assets/loadApp-ExrGcnoV.css +1 -0
- package/dist/index.html +13 -13
- package/package.json +44 -41
- package/dist/assets/HostView-CI4NKKTv.js.map +0 -1
- package/dist/assets/HostView-I-DgsKrJ.css +0 -1
- package/dist/assets/OverviewView-BzBqZXy_.js.map +0 -1
- package/dist/assets/RemoteView-Bf-M2ckO.js +0 -2
- package/dist/assets/RemoteView-Bf-M2ckO.js.map +0 -1
- package/dist/assets/RemoteView-DagINN91.css +0 -1
- package/dist/assets/_plugin-vue_export-helper-BWAI2PXX.js.map +0 -1
- package/dist/assets/index-BWYTdPfJ.js +0 -67
- package/dist/assets/index-BWYTdPfJ.js.map +0 -1
- package/dist/assets/loadApp-VfkNA6r0.js +0 -11
- package/dist/assets/loadApp-VfkNA6r0.js.map +0 -1
- package/dist/assets/loadApp-t5jvd8FF.css +0 -1
package/README.md
CHANGED
|
@@ -1,89 +1,92 @@
|
|
|
1
|
-
# @melt-js/demo-vue3
|
|
2
|
-
|
|
3
|
-
Vue 3 + Vite 5 的 hel 宿主（消费方）示例，消费 [`comps-vue3`](../comps-vue3)。
|
|
4
|
-
|
|
5
|
-
页面使用 **vue-router（hash 模式）**
|
|
6
|
-
|
|
7
|
-
| 项 | 值 |
|
|
8
|
-
| --- | --- |
|
|
9
|
-
| npm 包名 | `@melt-js/demo-vue3` |
|
|
10
|
-
| unpkg 入口 | `https://unpkg.com/@melt-js/demo-vue3/dist/index.html` |
|
|
11
|
-
| 端口 | `30020` |
|
|
12
|
-
| 消费的远程组件 | `comps-vue3`（开发 `http://localhost:20020` / 生产 unpkg） |
|
|
13
|
-
| 路由 | `vue-router@4.6.4`，hash 模式 |
|
|
14
|
-
| 全屏 | `vue-fullscreen@5.1.2`，`pageOnly` + `teleport`（不调用浏览器原生全屏） |
|
|
15
|
-
|
|
16
|
-
## 示例路由
|
|
17
|
-
|
|
18
|
-
| 路由 | 导航文案 | 内容 |
|
|
19
|
-
| --- | --- | --- |
|
|
20
|
-
| `#/` | 简介 | demo 概览：依赖、端口、远端地址与示例入口 |
|
|
21
|
-
| `#/host` | 主应用 | 宿主自己的计数按钮，用来对照远程组件的行为 |
|
|
22
|
-
| `#/remote` | 远程组件 | `preFetchLib` 加载的 `comps-vue3` `HelloWorld` |
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
-
|
|
28
|
-
-
|
|
29
|
-
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
│
|
|
40
|
-
├──
|
|
41
|
-
│
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
│ └──
|
|
45
|
-
├──
|
|
46
|
-
├──
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
# 终端
|
|
68
|
-
pnpm
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
```
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
|
|
82
|
-
|
|
83
|
-
|
|
84
|
-
|
|
85
|
-
```
|
|
86
|
-
|
|
87
|
-
-
|
|
88
|
-
|
|
89
|
-
|
|
1
|
+
# @melt-js/demo-vue3
|
|
2
|
+
|
|
3
|
+
Vue 3 + Vite 5 的 hel 宿主（消费方）示例，消费 [`comps-vue3`](../comps-vue3)。
|
|
4
|
+
|
|
5
|
+
页面使用 **vue-router（hash 模式）** 把示例拆成四个可切换的页面，顶部导航栏同时显示当前示例的简介，示例区右上角有**全屏按钮**（只放大当前示例的组件预览区，基于 `vue-fullscreen` 的 `pageOnly + teleport` 模式）。
|
|
6
|
+
|
|
7
|
+
| 项 | 值 |
|
|
8
|
+
| --- | --- |
|
|
9
|
+
| npm 包名 | `@melt-js/demo-vue3` |
|
|
10
|
+
| unpkg 入口 | `https://unpkg.com/@melt-js/demo-vue3/dist/index.html` |
|
|
11
|
+
| 端口 | `30020` |
|
|
12
|
+
| 消费的远程组件 | `comps-vue3`（开发 `http://localhost:20020` / 生产 unpkg） |
|
|
13
|
+
| 路由 | `vue-router@4.6.4`，hash 模式 |
|
|
14
|
+
| 全屏 | `vue-fullscreen@5.1.2`，`pageOnly` + `teleport`（不调用浏览器原生全屏） |
|
|
15
|
+
|
|
16
|
+
## 示例路由
|
|
17
|
+
|
|
18
|
+
| 路由 | 导航文案 | 内容 |
|
|
19
|
+
| --- | --- | --- |
|
|
20
|
+
| `#/` | 简介 | demo 概览：依赖、端口、远端地址与示例入口 |
|
|
21
|
+
| `#/host` | 主应用 | 宿主自己的计数按钮，用来对照远程组件的行为 |
|
|
22
|
+
| `#/remote` | 远程组件 | `preFetchLib` 加载的 `comps-vue3` `HelloWorld` |
|
|
23
|
+
| `#/circular-menu` | 圆形菜单 | `comps-vue3` 的 `CircularMenu`：随页面滚动 / 容器内吸顶两个示例 + 属性面板（wheel 半环、fan 整环，定位可切 relative / sticky / fixed / absolute） |
|
|
24
|
+
|
|
25
|
+
约定：
|
|
26
|
+
|
|
27
|
+
- **hash 模式**：demo 的构建产物会通过 unpkg 上的 `dist/index.html` 打开，history 模式在那种静态文件路径下会 404。
|
|
28
|
+
- 路由清单在 `src/router/index.ts`，每条路由的 `meta.title` / `meta.description` 同时驱动导航栏 tab 与下方那行简介；新增示例只要加一条路由。
|
|
29
|
+
- 全屏按钮只把当前示例标记为 `data-demo-preview` 的组件预览区送进全屏，页面标题、简介、说明与页脚都留在屏幕外；全屏借用 `vue-fullscreen` 5.x 的 `pageOnly + teleport` 模式：预览区临时挂到 body、用 fixed 铺满视口，退出时还原到页面原位置，不调用浏览器原生 Fullscreen API（iframe 内也可用）。预览区右下角提供「退出全屏」浮层按钮，Esc 也可退出；切换路由时会自动退出并还原。
|
|
30
|
+
- 需要全屏的示例在组件预览区外包一层 `<DemoPreview>`；简介页没有预览区，在路由 `meta` 里标记 `fullscreen: false`，工具栏不显示全屏按钮。
|
|
31
|
+
- 每个组件示例都用 `<LevaPlayground>` 包一层 leva 实验台（左侧组件 + 右侧 `libs-vue3-leva` 的 `PropsPanel`），面板值通过 `v-bind` 实时写回组件；不再有单独的「属性面板」tab。`LevaPlayground` 支持 `presets` / `listeners` / `slotHtml` / `stage-style`。
|
|
32
|
+
|
|
33
|
+
## 文件结构
|
|
34
|
+
|
|
35
|
+
```
|
|
36
|
+
demo-vue3/src
|
|
37
|
+
├── App.vue # demo 外壳：导航栏 + 示例舞台（含全屏按钮）+ router-view
|
|
38
|
+
├── components/
|
|
39
|
+
│ ├── DemoNavbar.vue # 顶部导航栏：示例 tab + 当前示例简介
|
|
40
|
+
│ ├── DemoPreview.vue # 组件预览区：全屏目标 + 「退出全屏」浮层按钮
|
|
41
|
+
│ ├── LevaPlayground.vue # 单个示例的 leva 实验台：组件 + schema → PropsPlayground
|
|
42
|
+
│ └── ScreenfullButton.vue # 示例区全屏按钮
|
|
43
|
+
├── composables/
|
|
44
|
+
│ └── useDemoFullscreen.ts # vue-fullscreen 的 pageOnly + teleport 封装（provide/inject）
|
|
45
|
+
├── configs/
|
|
46
|
+
│ ├── app.ts # demo 展示信息（名称 / 端口 / unpkg 入口）
|
|
47
|
+
│ └── remote.ts # 远程组件地址与 preFetchLib（Promise 复用）
|
|
48
|
+
├── router/index.ts # 示例路由（hash 模式）
|
|
49
|
+
├── styles/demo-shell.css # 外壳样式（导航栏 / 舞台 / 全屏 / 通用排版）
|
|
50
|
+
├── style.css # 变量与全局重置
|
|
51
|
+
└── views/ # OverviewView / HostView / RemoteView / CircularMenuView
|
|
52
|
+
```
|
|
53
|
+
|
|
54
|
+
## 关键流程
|
|
55
|
+
|
|
56
|
+
1. `src/main.ts`：`bindVueRuntime({ Vue })` 把宿主 vue 挂到 `window.Vue`，远程组件 external 的 `vue` 会复用这一份（少了这一份会出现双 vue，表现为远程组件点击后视图不更新）；随后在入口处调用 `loadRemoteLib()` 预加载远程组件，就绪后再挂载宿主。
|
|
57
|
+
2. `src/configs/remote.ts`：按 `import.meta.env.PROD` 选择远端地址——生产构建指向 unpkg 上的 `hel-meta.json`，本地开发指向 `http://localhost:20020`，可用 `VITE_REMOTE_HOST` 覆盖。`loadRemoteLib()` 内部调用 `preFetchLib('comps-vue3', { custom: { host } })`：host 为 `hel-meta.json` 时直接取元数据，本地 dev server 没有该文件时解析 `index.html`。
|
|
58
|
+
3. `src/router/index.ts` + `src/loadApp.ts`：创建 hash 路由并在 `createApp(App).use(router)` 时挂载；`#/host`、`#/remote` 等示例按路由懒加载。
|
|
59
|
+
4. `src/views/RemoteView.vue`：`defineAsyncComponent` 复用入口处已预加载的同一个 Promise，渲染远程组件的 `HelloWorld`。
|
|
60
|
+
5. `src/composables/useDemoFullscreen.ts` + `src/components/DemoPreview.vue`：`App.vue` 用 `provideDemoFullscreen()` 创建唯一一份 `useFullscreen` 控制器（`pageOnly`、`teleport`、`fullscreenClass: 'is-demo-fullscreen'`），`ScreenfullButton` 与 `DemoPreview` 通过 `useDemoFullscreen()` 共用它，全屏状态与「退出全屏」按钮始终同步；全屏目标由 App 解析为当前页面的 `[data-demo-preview]`。
|
|
61
|
+
|
|
62
|
+
> `vite build` 的产物会自动从 unpkg 加载已发布的 `comps-vue3`；`vite dev` 仍走本地 20020，无需手动改 `host`。
|
|
63
|
+
|
|
64
|
+
## 本地开发
|
|
65
|
+
|
|
66
|
+
```bash
|
|
67
|
+
# 终端 1：起远程组件（20020）
|
|
68
|
+
pnpm comps-vue3:dev
|
|
69
|
+
|
|
70
|
+
# 终端 2：起宿主（30020）
|
|
71
|
+
pnpm demo-vue3:dev
|
|
72
|
+
```
|
|
73
|
+
|
|
74
|
+
打开 <http://localhost:30020> ，`远程组件` 示例会渲染 `comps-vue3` 的 `HelloWorld` 组件。
|
|
75
|
+
|
|
76
|
+
也可以让宿主指向已构建的远程产物：
|
|
77
|
+
|
|
78
|
+
```bash
|
|
79
|
+
pnpm comps-vue3:build:local && pnpm comps-vue3:preview # 20020 上跑 hel_dist
|
|
80
|
+
pnpm demo-vue3:dev
|
|
81
|
+
```
|
|
82
|
+
|
|
83
|
+
## 构建 / 发布
|
|
84
|
+
|
|
85
|
+
```bash
|
|
86
|
+
pnpm demo-vue3:build # 产出 dist/
|
|
87
|
+
pnpm --filter @melt-js/demo-vue3 run publish:stage # build → npm stage 暂存，等待 2FA 审批
|
|
88
|
+
```
|
|
89
|
+
|
|
90
|
+
- `vite.config.ts` 的 `base` 为 `./`，发布后 unpkg 上的 `dist/index.html` 可直接加载同目录资源；hash 路由同样可用。
|
|
91
|
+
- `files` 白名单只发布 `dist/` 与 README。
|
|
92
|
+
- 生产构建自动使用 `https://unpkg.com/@melt-js/comps-vue3/hel_dist/hel-meta.json`，本地开发自动使用 `http://localhost:20020`；也可用 `VITE_REMOTE_HOST` 覆盖。
|
|
@@ -0,0 +1,2 @@
|
|
|
1
|
+
import{_ as h,a as g}from"./_plugin-vue_export-helper-C7rqUIsm.js";import{L as y}from"./LevaPlayground-i7Bc01Vw.js";import{d as x,f as c,D as u,g as e,A as a,u as o,m as i,F as w,j as k,l as C,t as p,E,b as q,o as b,G as M}from"./index-nsRhUCyk.js";import"./loadApp-CTkznB3Q.js";const I=[{name:"items",type:"CircularMenuItem[]",description:"菜单项，label 是文案，href 给了就走链接，active 是高亮态",default:"",required:!0,version:"",isEvent:!1,bindable:!1},{name:"variant",type:"'wheel' | 'fan'",description:"形态：wheel 是半圆扇环，fan 是整圆扇环",default:'"wheel"',required:!1,version:"",isEvent:!1,bindable:!0,value:"wheel",control:{options:{wheel:"wheel",fan:"fan"}}},{name:"position",type:"'relative' | 'absolute' | 'sticky' | 'fixed'",description:"定位方式：relative 随文档流滚动，sticky 吸附，fixed 贴视口，absolute 贴定位祖先",default:'"relative"',required:!1,version:"",isEvent:!1,bindable:!0,value:"relative",control:{options:{relative:"relative",absolute:"absolute",sticky:"sticky",fixed:"fixed"}}},{name:"anchor",type:"'center' | 'top' | 'bottom' | 'left' | 'right' | 'top-left' | 'top-right' | 'bottom-left' | 'bottom-right'",description:"锚点：非 relative 时按钮中心贴在哪条边，left/right 会在另一轴上居中",default:'"bottom"',required:!1,version:"",isEvent:!1,bindable:!0,value:"bottom",control:{options:{center:"center",top:"top",bottom:"bottom",left:"left",right:"right","top-left":"top-left","top-right":"top-right","bottom-left":"bottom-left","bottom-right":"bottom-right"}}},{name:"offset",type:"number",description:"距锚点边的距离，单位 px",default:"0",required:!1,version:"",isEvent:!1,bindable:!0,value:0},{name:"direction",type:"'up' | 'down' | 'auto'",description:"展开方向：up 向上展开，down 向下展开，auto 按锚点推断（贴顶时向下）",default:'"auto"',required:!1,version:"",isEvent:!1,bindable:!0,value:"auto",control:{options:{up:"up",down:"down",auto:"auto"}}},{name:"overlay",type:"boolean",description:"是否显示半透明遮罩（一般配 fixed/absolute 使用）",default:"false",required:!1,version:"",isEvent:!1,bindable:!0,value:!1},{name:"openText",type:"string",description:"展开时的按钮文案，不传则按形态用默认符号",default:"",required:!1,version:"",isEvent:!1,bindable:!0,value:""},{name:"closeText",type:"string",description:"收起时的按钮文案，不传则按形态用默认符号",default:"",required:!1,version:"",isEvent:!1,bindable:!0,value:""}],S={class:"demo-page"},V={class:"scroll-demo"},L={class:"scroll-demo__stage"},N={class:"scroll-demo"},j={class:"scroll-demo__box"},B={class:"demo-note"},T=x({__name:"CircularMenuView",setup(A){const s=E({loader:async()=>(await M()).CircularMenu,timeout:1e4}),m=[{label:"图"},{label:"乐"},{label:"家"},{label:"视"},{label:"信"}],f=[{label:"关于"},{label:"教程"},{label:"文章"},{label:"片段"},{label:"插件"},{label:"联系"},{label:"关注"}],v=[{label:"目录"},{label:"收藏"},{label:"分享"},{label:"置顶"}],_={position:"relative",display:"flex",alignItems:"center",justifyContent:"center",height:"520px",background:"#2b3440"},n=q("—");function l(d){n.value=d.label}return(d,t)=>(b(),c("div",S,[t[6]||(t[6]=u('<header data-v-8a0b0601><p class="demo-page__eyebrow" data-v-8a0b0601>远程组件</p><h1 class="demo-page__title" data-v-8a0b0601>comps-vue3 · CircularMenu</h1><p class="demo-page__lead" data-v-8a0b0601> 定位方式从形态里拆出来了：组件 root 就是「按钮中心」这个锚点盒子，<code data-v-8a0b0601>position</code> / <code data-v-8a0b0601>anchor</code> / <code data-v-8a0b0601>offset</code> 决定它贴在哪里。默认 <code data-v-8a0b0601>position="relative"</code>， 菜单就留在文档流里，跟着页面一起滚动；要 <code data-v-8a0b0601>sticky</code> / <code data-v-8a0b0601>fixed</code> / <code data-v-8a0b0601>absolute</code> 只是换一个属性值。下面两块示例分别演示随页面滚动和容器内吸顶， 再往下是属性面板，可以把 <code data-v-8a0b0601>position</code> 切到 <code data-v-8a0b0601>fixed</code> / <code data-v-8a0b0601>absolute</code> 直接看效果。 </p></header>',1)),e("section",V,[t[0]||(t[0]=e("div",{class:"scroll-demo__head"},[e("h2",{class:"demo-page__section-title"},"随页面滚动"),e("code",{class:"scroll-demo__tag"},'position="relative"')],-1)),t[1]||(t[1]=e("p",{class:"demo-card__text"},"滚动页面，菜单会跟着这一块一起移动。",-1)),e("div",L,[a(o(s),{variant:"wheel",items:m,onSelect:l})])]),e("section",N,[t[2]||(t[2]=e("div",{class:"scroll-demo__head"},[e("h2",{class:"demo-page__section-title"},"容器内吸顶"),e("code",{class:"scroll-demo__tag"},'position="sticky" anchor="top"')],-1)),t[3]||(t[3]=e("p",{class:"demo-card__text"},[i(" 在下面这个滚动容器里往下滚，按钮会吸在容器顶部；"),e("code",null,'direction="auto"'),i(" 让贴顶的锚点自动向下展开， 再点按钮或按 Esc 收起。 ")],-1)),e("div",j,[a(o(s),{variant:"wheel",position:"sticky",anchor:"top",offset:12,items:v,onSelect:l}),(b(),c(w,null,k(12,r=>e("p",{key:r,class:"scroll-demo__para"}," 第 "+p(r)+" 段：这是一段用来撑开滚动条的内容。滚到这一段时，按钮会停在容器顶部， 点开就是向下的扇形菜单。 ",1)),64))])]),a(h,{class:"menu-preview"},{default:C(()=>[a(y,{name:"CircularMenu",component:o(s),schema:o(I),presets:{items:f},listeners:{select:l},"stage-style":_},null,8,["component","schema","presets","listeners"])]),_:1}),e("p",B,[e("span",null,[t[4]||(t[4]=i(" 最近点击：",-1)),e("strong",null,p(n.value),1),t[5]||(t[5]=u("。上面的面板来自组件包源码里的 <code data-v-8a0b0601>propsSchema.json</code>：<code data-v-8a0b0601>position</code> / <code data-v-8a0b0601>anchor</code> / <code data-v-8a0b0601>offset</code> / <code data-v-8a0b0601>direction</code> 都生成了控件，改完马上能看到菜单换个贴法；<code data-v-8a0b0601>items</code> 这类复杂 props 由 <code data-v-8a0b0601>presets</code> 固定传入。 ",15))])])]))}}),R=g(T,[["__scopeId","data-v-8a0b0601"]]);export{R as default};
|
|
2
|
+
//# sourceMappingURL=CircularMenuView-4-qK1Bci.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"CircularMenuView-4-qK1Bci.js","sources":["../../src/views/CircularMenuView.vue"],"sourcesContent":["<template>\n <div class=\"demo-page\">\n <header>\n <p class=\"demo-page__eyebrow\">远程组件</p>\n <h1 class=\"demo-page__title\">comps-vue3 · CircularMenu</h1>\n <p class=\"demo-page__lead\">\n 定位方式从形态里拆出来了：组件 root 就是「按钮中心」这个锚点盒子，<code>position</code> /\n <code>anchor</code> / <code>offset</code> 决定它贴在哪里。默认 <code>position=\"relative\"</code>，\n 菜单就留在文档流里，跟着页面一起滚动；要 <code>sticky</code> / <code>fixed</code> /\n <code>absolute</code> 只是换一个属性值。下面两块示例分别演示随页面滚动和容器内吸顶，\n 再往下是属性面板，可以把 <code>position</code> 切到 <code>fixed</code> / <code>absolute</code> 直接看效果。\n </p>\n </header>\n\n <section class=\"scroll-demo\">\n <div class=\"scroll-demo__head\">\n <h2 class=\"demo-page__section-title\">随页面滚动</h2>\n <code class=\"scroll-demo__tag\">position=\"relative\"</code>\n </div>\n <p class=\"demo-card__text\">滚动页面，菜单会跟着这一块一起移动。</p>\n <div class=\"scroll-demo__stage\">\n <CircularMenu variant=\"wheel\" :items=\"wheelItems\" @select=\"onSelect\" />\n </div>\n </section>\n\n <section class=\"scroll-demo\">\n <div class=\"scroll-demo__head\">\n <h2 class=\"demo-page__section-title\">容器内吸顶</h2>\n <code class=\"scroll-demo__tag\">position=\"sticky\" anchor=\"top\"</code>\n </div>\n <p class=\"demo-card__text\">\n 在下面这个滚动容器里往下滚，按钮会吸在容器顶部；<code>direction=\"auto\"</code> 让贴顶的锚点自动向下展开，\n 再点按钮或按 Esc 收起。\n </p>\n <div class=\"scroll-demo__box\">\n <CircularMenu\n variant=\"wheel\"\n position=\"sticky\"\n anchor=\"top\"\n :offset=\"12\"\n :items=\"sheetItems\"\n @select=\"onSelect\"\n />\n <p v-for=\"n in 12\" :key=\"n\" class=\"scroll-demo__para\">\n 第 {{ n }} 段：这是一段用来撑开滚动条的内容。滚到这一段时，按钮会停在容器顶部，\n 点开就是向下的扇形菜单。\n </p>\n </div>\n </section>\n\n <DemoPreview class=\"menu-preview\">\n <LevaPlayground\n name=\"CircularMenu\"\n :component=\"CircularMenu\"\n :schema=\"CircularMenuSchema\"\n :presets=\"{ items: menuItems }\"\n :listeners=\"{ select: onSelect }\"\n :stage-style=\"stageStyle\"\n />\n </DemoPreview>\n\n <p class=\"demo-note\">\n <span>\n 最近点击：<strong>{{ picked }}</strong>。上面的面板来自组件包源码里的\n <code>propsSchema.json</code>：<code>position</code> / <code>anchor</code> / <code>offset</code> /\n <code>direction</code> 都生成了控件，改完马上能看到菜单换个贴法；<code>items</code> 这类复杂 props\n 由 <code>presets</code> 固定传入。\n </span>\n </p>\n </div>\n</template>\n\n<script setup lang=\"ts\">\nimport { defineAsyncComponent, ref } from 'vue'\nimport CircularMenuSchema from '@melt-js/comps-vue3/src/components/CircularMenu.propsSchema.json'\nimport DemoPreview from '../components/DemoPreview.vue'\nimport LevaPlayground from '../components/LevaPlayground.vue'\nimport { loadRemoteLib } from '../configs/remote'\n\n/**\n * 与 RemoteView 相同的远程加载方式：入口处已 preFetchLib，这里只取组件。\n */\nconst CircularMenu = defineAsyncComponent({\n loader: async () => (await loadRemoteLib()).CircularMenu,\n timeout: 10000,\n})\n\n// 原 demo1 的 5 个图标位（图片/耳机/首页/视频/邮件），无图标字体，用单字代替\nconst wheelItems = [{ label: '图' }, { label: '乐' }, { label: '家' }, { label: '视' }, { label: '信' }]\n\n// 原 demo2 的 7 个入口，由面板的 presets 固定传入（数组暂不生成控件）\nconst menuItems = [\n { label: '关于' },\n { label: '教程' },\n { label: '文章' },\n { label: '片段' },\n { label: '插件' },\n { label: '联系' },\n { label: '关注' },\n]\n\n// 吸顶那份换几个短标签，和上面两份区分开\nconst sheetItems = [{ label: '目录' }, { label: '收藏' }, { label: '分享' }, { label: '置顶' }]\n\n/**\n * 属性面板的预览舞台：菜单默认是 relative，舞台用 flex 居中摆好；\n * 面板切到 absolute 时，stage 的 position: relative 就是它的定位祖先；\n * 切到 fixed 时按视口定位，不会再被 overflow 裁掉。\n * 背景用深色，白色按钮和红/绿扇环在上面看得清。\n */\nconst stageStyle = {\n position: 'relative',\n display: 'flex',\n alignItems: 'center',\n justifyContent: 'center',\n height: '520px',\n background: '#2b3440',\n}\n\nconst picked = ref('—')\n\nfunction onSelect(item: { label: string }) {\n picked.value = item.label\n}\n</script>\n\n<style scoped>\n/* 文档流示例：按钮压在舞台底部中间，扇形朝上展开，滚动页面时整块跟着走 */\n.scroll-demo {\n display: flex;\n flex-direction: column;\n gap: 10px;\n}\n\n.scroll-demo__head {\n display: flex;\n flex-wrap: wrap;\n gap: 8px 12px;\n align-items: baseline;\n justify-content: space-between;\n}\n\n/* section-title 自带下边距，这里在头部行里去掉 */\n.scroll-demo__head .demo-page__section-title {\n margin: 0;\n}\n\n.scroll-demo__tag {\n padding: 2px 8px;\n border-radius: 999px;\n background: var(--demo-accent-soft);\n color: var(--demo-accent);\n font-size: 12px;\n font-weight: 600;\n}\n\n.scroll-demo__stage {\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: flex-end;\n min-height: 300px;\n padding: 14px;\n border: 1px dashed var(--demo-border);\n border-radius: 14px;\n background: var(--demo-bg);\n}\n\n/* sticky 示例的滚动容器：菜单是第一个子元素，吸在容器顶部 */\n.scroll-demo__box {\n height: 260px;\n padding: 12px;\n overflow: auto;\n border: 1px dashed var(--demo-border);\n border-radius: 14px;\n background: var(--demo-bg);\n overscroll-behavior: contain;\n}\n\n/* sticky 只负责纵向吸附，横向居中交给宿主（scoped 样式能命中子组件根节点） */\n.scroll-demo__box > .cm {\n margin-inline: auto;\n}\n\n.scroll-demo__para {\n margin: 10px 0 0;\n color: var(--demo-muted);\n font-size: 13px;\n line-height: 1.8;\n}\n\n.menu-preview.is-demo-fullscreen {\n padding: 16px;\n background: var(--demo-bg);\n}\n</style>\n"],"names":["CircularMenu","defineAsyncComponent","loadRemoteLib","wheelItems","menuItems","sheetItems","stageStyle","picked","ref","onSelect","item","_openBlock","_createElementBlock","_hoisted_1","_createElementVNode","_hoisted_2","_cache","_hoisted_3","_createVNode","_unref","_hoisted_4","_hoisted_5","_Fragment","_renderList","n","_toDisplayString","DemoPreview","LevaPlayground","CircularMenuSchema","_hoisted_6"],"mappings":"40EAkFA,MAAMA,EAAeC,EAAqB,CACxC,OAAQ,UAAa,MAAMC,EAAA,GAAiB,aAC5C,QAAS,GAAA,CACV,EAGKC,EAAa,CAAC,CAAE,MAAO,KAAO,CAAE,MAAO,GAAA,EAAO,CAAE,MAAO,GAAA,EAAO,CAAE,MAAO,KAAO,CAAE,MAAO,IAAK,EAG5FC,EAAY,CAChB,CAAE,MAAO,IAAA,EACT,CAAE,MAAO,IAAA,EACT,CAAE,MAAO,IAAA,EACT,CAAE,MAAO,IAAA,EACT,CAAE,MAAO,IAAA,EACT,CAAE,MAAO,IAAA,EACT,CAAE,MAAO,IAAA,CAAK,EAIVC,EAAa,CAAC,CAAE,MAAO,IAAA,EAAQ,CAAE,MAAO,IAAA,EAAQ,CAAE,MAAO,IAAA,EAAQ,CAAE,MAAO,KAAM,EAQhFC,EAAa,CACjB,SAAU,WACV,QAAS,OACT,WAAY,SACZ,eAAgB,SAChB,OAAQ,QACR,WAAY,SAAA,EAGRC,EAASC,EAAI,GAAG,EAEtB,SAASC,EAASC,EAAyB,CACzCH,EAAO,MAAQG,EAAK,KACtB,eA1HEC,EAAA,EAAAC,EAoEM,MApENC,EAoEM,mvBAvDJC,EASU,UATVC,EASU,aARRD,EAGM,MAAA,CAHD,MAAM,qBAAmB,CAC5BA,EAA+C,KAAA,CAA3C,MAAM,0BAAA,EAA2B,OAAK,EAC1CA,EAAyD,OAAA,CAAnD,MAAM,kBAAA,EAAmB,qBAAmB,CAAA,OAEpDE,EAAA,CAAA,IAAAA,EAAA,CAAA,EAAAF,EAAiD,IAAA,CAA9C,MAAM,iBAAA,EAAkB,qBAAkB,EAAA,GAC7CA,EAEM,MAFNG,EAEM,CADJC,EAAuEC,EAAAnB,CAAA,EAAA,CAAzD,QAAQ,QAAS,MAAOG,EAAa,SAAAM,CAAA,OAIvDK,EAuBU,UAvBVM,EAuBU,aAtBRN,EAGM,MAAA,CAHD,MAAM,qBAAmB,CAC5BA,EAA+C,KAAA,CAA3C,MAAM,0BAAA,EAA2B,OAAK,EAC1CA,EAAoE,OAAA,CAA9D,MAAM,kBAAA,EAAmB,gCAA8B,CAAA,mBAE/DA,EAGI,IAAA,CAHD,MAAM,mBAAiB,GAAC,2BACD,EAAAA,EAA6B,YAAvB,kBAAgB,IAAO,gCAEvD,CAAA,OACAA,EAaM,MAbNO,EAaM,CAZJH,EAOEC,EAAAnB,CAAA,EAAA,CANA,QAAQ,QACR,SAAS,SACT,OAAO,MACN,OAAQ,GACR,MAAOK,EACP,SAAAI,CAAA,QAEHG,EAGIU,EAAA,KAAAC,EAHW,GAALC,GAAVV,EAGI,IAAA,CAHgB,IAAKU,EAAG,MAAM,mBAAA,EAAoB,MAClDC,EAAGD,CAAC,EAAG,oDAEX,CAAA,YAIJN,EAScQ,EAAA,CATD,MAAM,gBAAc,WAC/B,IAOE,CAPFR,EAOES,EAAA,CANA,KAAK,eACJ,UAAWR,EAAAnB,CAAA,EACX,OAAQmB,EAAAS,CAAA,EACR,eAAkBxB,CAAA,EAClB,kBAAqBK,CAAA,EACrB,cAAaH,CAAA,+DAIlBQ,EAOI,IAPJe,EAOI,CANFf,EAKO,OAAA,KAAA,eALD,SACC,EAAA,GAAAA,EAA6B,gBAAlBP,EAAA,KAAM,EAAA,CAAA"}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
.scroll-demo[data-v-8a0b0601]{display:flex;flex-direction:column;gap:10px}.scroll-demo__head[data-v-8a0b0601]{display:flex;flex-wrap:wrap;gap:8px 12px;align-items:baseline;justify-content:space-between}.scroll-demo__head .demo-page__section-title[data-v-8a0b0601]{margin:0}.scroll-demo__tag[data-v-8a0b0601]{padding:2px 8px;border-radius:999px;background:var(--demo-accent-soft);color:var(--demo-accent);font-size:12px;font-weight:600}.scroll-demo__stage[data-v-8a0b0601]{display:flex;flex-direction:column;align-items:center;justify-content:flex-end;min-height:300px;padding:14px;border:1px dashed var(--demo-border);border-radius:14px;background:var(--demo-bg)}.scroll-demo__box[data-v-8a0b0601]{height:260px;padding:12px;overflow:auto;border:1px dashed var(--demo-border);border-radius:14px;background:var(--demo-bg);overscroll-behavior:contain}.scroll-demo__box>.cm[data-v-8a0b0601]{margin-inline:auto}.scroll-demo__para[data-v-8a0b0601]{margin:10px 0 0;color:var(--demo-muted);font-size:13px;line-height:1.8}.menu-preview.is-demo-fullscreen[data-v-8a0b0601]{padding:16px;background:var(--demo-bg)}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import{_ as n,a as d}from"./_plugin-vue_export-helper-
|
|
2
|
-
//# sourceMappingURL=HostView-
|
|
1
|
+
import{_ as n,a as d}from"./_plugin-vue_export-helper-C7rqUIsm.js";import{d as l,f as i,g as e,m as o,A as r,l as m,o as p,t as _,b as c}from"./index-nsRhUCyk.js";import"./loadApp-CTkznB3Q.js";const u={class:"demo-page"},b={class:"demo-card"},f={class:"host-actions"},v=l({__name:"HostView",setup(g){const s=c(0);return(V,t)=>(p(),i("div",u,[t[4]||(t[4]=e("header",null,[e("p",{class:"demo-page__eyebrow"},"主应用"),e("h1",{class:"demo-page__title"},"宿主自己的内容"),e("p",{class:"demo-page__lead"},[o(" 这块内容完全由宿主渲染，用来对照远程组件：两者用的是同一份 Vue 运行时 （"),e("code",null,"bindVueRuntime"),o(" 注入），所以点击计数都应该即时更新。 ")])],-1)),r(n,{class:"host-preview"},{default:m(()=>[e("section",b,[t[2]||(t[2]=e("h2",{class:"demo-card__title"},"主应用内容",-1)),t[3]||(t[3]=e("p",{class:"demo-card__text"},"宿主按钮的计数只存在宿主里，与远程组件无关。",-1)),e("div",f,[e("button",{type:"button",class:"demo-btn",onClick:t[0]||(t[0]=a=>s.value++)}," host 工程中的按钮 "+_(s.value),1),e("button",{type:"button",class:"demo-btn demo-btn--ghost",onClick:t[1]||(t[1]=a=>s.value=0)}," 重置 ")])])]),_:1})]))}}),y=d(v,[["__scopeId","data-v-18880aea"]]);export{y as default};
|
|
2
|
+
//# sourceMappingURL=HostView-Bw1v6HtD.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"HostView-Bw1v6HtD.js","sources":["../../src/views/HostView.vue"],"sourcesContent":["<template>\r\n <div class=\"demo-page\">\r\n <header>\r\n <p class=\"demo-page__eyebrow\">主应用</p>\r\n <h1 class=\"demo-page__title\">宿主自己的内容</h1>\r\n <p class=\"demo-page__lead\">\r\n 这块内容完全由宿主渲染，用来对照远程组件：两者用的是同一份 Vue 运行时\r\n （<code>bindVueRuntime</code> 注入），所以点击计数都应该即时更新。\r\n </p>\r\n </header>\r\n\r\n <DemoPreview class=\"host-preview\">\r\n <section class=\"demo-card\">\r\n <h2 class=\"demo-card__title\">主应用内容</h2>\r\n <p class=\"demo-card__text\">宿主按钮的计数只存在宿主里，与远程组件无关。</p>\r\n <div class=\"host-actions\">\r\n <button type=\"button\" class=\"demo-btn\" @click=\"num++\">\r\n host 工程中的按钮 {{ num }}\r\n </button>\r\n <button type=\"button\" class=\"demo-btn demo-btn--ghost\" @click=\"num = 0\">\r\n 重置\r\n </button>\r\n </div>\r\n </section>\r\n </DemoPreview>\r\n </div>\r\n</template>\r\n\r\n<script setup lang=\"ts\">\r\nimport { ref } from 'vue'\r\nimport DemoPreview from '../components/DemoPreview.vue'\r\n\r\nconst num = ref(0)\r\n</script>\r\n\r\n<style scoped>\r\n.host-actions {\r\n display: flex;\r\n flex-wrap: wrap;\r\n gap: 10px;\r\n margin-top: 14px;\r\n}\r\n\r\n/* 全屏时把宿主卡片居中展示，页面标题与说明留在屏幕外 */\r\n.host-preview.is-demo-fullscreen {\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n padding: 24px;\r\n background: var(--demo-bg);\r\n}\r\n\r\n.host-preview.is-demo-fullscreen .demo-card {\r\n width: 100%;\r\n max-width: 560px;\r\n}\r\n</style>\r\n"],"names":["num","ref","_openBlock","_createElementBlock","_hoisted_1","_createElementVNode","_createVNode","DemoPreview","_hoisted_2","_cache","_hoisted_3"],"mappings":"4SAgCA,MAAMA,EAAMC,EAAI,CAAC,gBA/BfC,EAAA,EAAAC,EAwBM,MAxBNC,EAwBM,aAvBJC,EAOS,SAAA,KAAA,CANPA,EAAqC,IAAA,CAAlC,MAAM,oBAAA,EAAqB,KAAG,EACjCA,EAAyC,KAAA,CAArC,MAAM,kBAAA,EAAmB,SAAO,EACpCA,EAGI,IAAA,CAHD,MAAM,mBAAiB,GAAC,0CAExB,EAAAA,EAA2B,YAArB,gBAAc,IAAO,sBAC9B,CAAA,SAGFC,EAacC,EAAA,CAbD,MAAM,gBAAc,WAC/B,IAWU,CAXVF,EAWU,UAXVG,EAWU,CAVRC,EAAA,CAAA,IAAAA,EAAA,CAAA,EAAAJ,EAAuC,KAAA,CAAnC,MAAM,kBAAA,EAAmB,QAAK,EAAA,GAClCI,EAAA,CAAA,IAAAA,EAAA,CAAA,EAAAJ,EAAqD,IAAA,CAAlD,MAAM,iBAAA,EAAkB,yBAAsB,EAAA,GACjDA,EAOM,MAPNK,EAOM,CANJL,EAES,SAAA,CAFD,KAAK,SAAS,MAAM,WAAY,uBAAOL,EAAA,QAAA,EAAO,kBACrCA,EAAA,KAAG,EAAA,CAAA,EAEpBK,EAES,SAAA,CAFD,KAAK,SAAS,MAAM,2BAA4B,uBAAOL,EAAA,MAAG,EAAA,EAAM,MAExE,CAAA"}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
.host-actions[data-v-18880aea]{display:flex;flex-wrap:wrap;gap:10px;margin-top:14px}.host-preview.is-demo-fullscreen[data-v-18880aea]{display:flex;align-items:center;justify-content:center;padding:24px;background:var(--demo-bg)}.host-preview.is-demo-fullscreen .demo-card[data-v-18880aea]{width:100%;max-width:560px}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
.leva-playground[data-v-84cc67d9]{min-width:0}.leva-playground__hint[data-v-84cc67d9]{margin:0;padding:24px;color:var(--demo-muted);font-size:13px}
|
|
@@ -0,0 +1,2 @@
|
|
|
1
|
+
import{d as g,o,f as v,u as n,k as y,B as h,z as _,E as P,H as f,c as s,h as C}from"./index-nsRhUCyk.js";import{a as M}from"./_plugin-vue_export-helper-C7rqUIsm.js";const k={class:"leva-playground"},E=g({__name:"LevaPlayground",props:{name:{},component:{},schema:{},presets:{},listeners:{},stageClass:{},stageStyle:{},slotHtml:{}},setup(l){const e=l,t=P({loader:async()=>{const a=await f();if(!a||!a.PropsPlayground)throw new Error("libs-vue3-leva 未导出 PropsPlayground");return a.PropsPlayground},errorComponent:{render:()=>C("p",{class:"leva-playground__hint"},"属性面板加载失败：确认 libs-vue3-leva 已启动（http://localhost:10040）")},timeout:1e4}),r=s(()=>e.component?{[e.name]:e.component}:{}),c=s(()=>({[e.name]:e.schema||[]})),p=s(()=>({[e.name]:e.presets||{}})),m=s(()=>({[e.name]:e.listeners||{}})),u=s(()=>e.stageClass?{[e.name]:e.stageClass}:{}),d=s(()=>e.stageStyle?{[e.name]:e.stageStyle}:{}),i=s(()=>({[e.name]:e.slotHtml||{}}));return(a,B)=>(o(),v("div",k,[n(t)?(o(),y(h(n(t)),{key:0,components:r.value,schemas:c.value,presets:p.value,listeners:m.value,"stage-classes":u.value,"stage-styles":d.value,"slot-html":i.value},null,8,["components","schemas","presets","listeners","stage-classes","stage-styles","slot-html"])):_("",!0)]))}}),S=M(E,[["__scopeId","data-v-84cc67d9"]]);export{S as L};
|
|
2
|
+
//# sourceMappingURL=LevaPlayground-i7Bc01Vw.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"LevaPlayground-i7Bc01Vw.js","sources":["../../src/components/LevaPlayground.vue"],"sourcesContent":["<template>\n <div class=\"leva-playground\">\n <component\n :is=\"playground\"\n v-if=\"playground\"\n :components=\"componentsMap\"\n :schemas=\"schemasMap\"\n :presets=\"presetsMap\"\n :listeners=\"listenersMap\"\n :stage-classes=\"stageClassMap\"\n :stage-styles=\"stageStyleMap\"\n :slot-html=\"slotHtmlMap\"\n />\n </div>\n</template>\n\n<script setup lang=\"ts\">\nimport { computed, defineAsyncComponent, h } from 'vue'\nimport type { Component } from 'vue'\nimport { loadPanelLib } from '../configs/remote'\n\n/**\n * 单个示例的属性实验台：把「一个组件 + 它的 propsSchema」包成 PropsPlayground。\n *\n * 每个 tab 只需要传组件和 schema，面板、重新挂载、复杂 props 的固定值\n * 都在这里统一处理，页面里不再出现第二份面板加载逻辑。\n */\nconst props = defineProps<{\n /** 组件名，同时作为 components / schemas 映射的 key */\n name: string\n /** 要预览的组件（远端或本地组件都行） */\n component?: Component | null\n /** 组件的 propsSchema.json 内容 */\n schema?: unknown[]\n /** 面板不生成控件的复杂 props，如 items / storageKey */\n presets?: Record<string, unknown>\n /** 组件事件监听，如 { select: (item) => ... } */\n listeners?: Record<string, (...args: any[]) => void>\n /** 预览舞台的附加 class */\n stageClass?: string\n /** 预览舞台的内联样式，如 { height: '480px', background: '#f6f7a7' } */\n stageStyle?: Record<string, string>\n /** 插槽的 HTML 内容，如 { default: '<p>内容</p>', title: '标题' } */\n slotHtml?: Record<string, string>\n}>()\n\nconst PanelError = {\n render: () =>\n h(\n 'p',\n { class: 'leva-playground__hint' },\n '属性面板加载失败：确认 libs-vue3-leva 已启动（http://localhost:10040）',\n ),\n}\n\nconst playground = defineAsyncComponent({\n loader: async () => {\n const lib = await loadPanelLib()\n if (!lib || !lib.PropsPlayground) {\n throw new Error('libs-vue3-leva 未导出 PropsPlayground')\n }\n return lib.PropsPlayground\n },\n errorComponent: PanelError,\n timeout: 10000,\n})\n\nconst componentsMap = computed(() => (props.component ? { [props.name]: props.component } : {}))\nconst schemasMap = computed(() => ({ [props.name]: props.schema || [] }))\nconst presetsMap = computed(() => ({ [props.name]: props.presets || {} }))\nconst listenersMap = computed(() => ({ [props.name]: props.listeners || {} }))\nconst stageClassMap = computed(() => (props.stageClass ? { [props.name]: props.stageClass } : {}))\nconst stageStyleMap = computed(() => (props.stageStyle ? { [props.name]: props.stageStyle } : {}))\nconst slotHtmlMap = computed(() => ({ [props.name]: props.slotHtml || {} }))\n</script>\n\n<style scoped>\n.leva-playground {\n min-width: 0;\n}\n\n.leva-playground__hint {\n margin: 0;\n padding: 24px;\n color: var(--demo-muted);\n font-size: 13px;\n}\n</style>\n"],"names":["props","__props","playground","defineAsyncComponent","lib","loadPanelLib","h","componentsMap","computed","schemasMap","presetsMap","listenersMap","stageClassMap","stageStyleMap","slotHtmlMap","_openBlock","_createElementBlock","_hoisted_1","_unref","_createBlock","_resolveDynamicComponent"],"mappings":"oVA2BA,MAAMA,EAAQC,EA4BRC,EAAaC,EAAqB,CACtC,OAAQ,SAAY,CAClB,MAAMC,EAAM,MAAMC,EAAA,EAClB,GAAI,CAACD,GAAO,CAACA,EAAI,gBACf,MAAM,IAAI,MAAM,oCAAoC,EAEtD,OAAOA,EAAI,eACb,EACA,eAjBiB,CACjB,OAAQ,IACNE,EACE,IACA,CAAE,MAAO,uBAAA,EACT,wDAAA,CACF,EAYF,QAAS,GAAA,CACV,EAEKC,EAAgBC,EAAS,IAAOR,EAAM,UAAY,CAAE,CAACA,EAAM,IAAI,EAAGA,EAAM,SAAA,EAAc,CAAA,CAAG,EACzFS,EAAaD,EAAS,KAAO,CAAE,CAACR,EAAM,IAAI,EAAGA,EAAM,QAAU,CAAA,CAAC,EAAI,EAClEU,EAAaF,EAAS,KAAO,CAAE,CAACR,EAAM,IAAI,EAAGA,EAAM,SAAW,CAAA,CAAC,EAAI,EACnEW,EAAeH,EAAS,KAAO,CAAE,CAACR,EAAM,IAAI,EAAGA,EAAM,WAAa,CAAA,CAAC,EAAI,EACvEY,EAAgBJ,EAAS,IAAOR,EAAM,WAAa,CAAE,CAACA,EAAM,IAAI,EAAGA,EAAM,UAAA,EAAe,CAAA,CAAG,EAC3Fa,EAAgBL,EAAS,IAAOR,EAAM,WAAa,CAAE,CAACA,EAAM,IAAI,EAAGA,EAAM,UAAA,EAAe,CAAA,CAAG,EAC3Fc,EAAcN,EAAS,KAAO,CAAE,CAACR,EAAM,IAAI,EAAGA,EAAM,UAAY,CAAA,CAAC,EAAI,gBAxEzEe,EAAA,EAAAC,EAYM,MAZNC,EAYM,CATIC,EAAAhB,CAAA,GAFRa,EAAA,EAAAI,EAUEC,EATKF,EAAAhB,CAAA,CAAU,EAAA,OAEd,WAAYK,EAAA,MACZ,QAASE,EAAA,MACT,QAASC,EAAA,MACT,UAAWC,EAAA,MACX,gBAAeC,EAAA,MACf,eAAcC,EAAA,MACd,YAAWC,EAAA,KAAA"}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import{d as v,A as d}from"./loadApp-
|
|
2
|
-
//# sourceMappingURL=OverviewView-
|
|
1
|
+
import{d as v,A as d}from"./loadApp-CTkznB3Q.js";import{d as g,f as m,g as l,t as n,u as o,m as t,R as k,L as f,U as V,F as E,j as b,e as c,o as r,k as x,l as T}from"./index-nsRhUCyk.js";const O={class:"demo-page"},y={class:"demo-page__title"},L={class:"demo-table"},R=["href"],h={class:"demo-grid"},w={class:"demo-card__title"},A={class:"demo-card__text"},N=g({__name:"OverviewView",setup(B){const p=v.filter(u=>u.name&&u.name!=="overview");return(u,e)=>{const _=c("router-link");return r(),m("div",O,[l("header",null,[e[0]||(e[0]=l("p",{class:"demo-page__eyebrow"},"Vue 3 · hel 宿主",-1)),l("h1",y,n(o(d).name)+" 简介",1),e[1]||(e[1]=l("p",{class:"demo-page__lead"},[t(" Vue 3 + Vite 5 的 hel 宿主（消费方）示例：入口处用 "),l("code",null,"bindVueRuntime"),t(" 注入宿主 Vue 运行时，再用 "),l("code",null,"preFetchLib"),t(" 预加载远程组件 "),l("code",null,"comps-vue3"),t("。 顶部导航栏用于切换示例，示例页右上角的「全屏」按钮只把组件预览区放大到全屏， 简介与说明文字不会进入全屏。 ")],-1))]),l("table",L,[l("tbody",null,[e[7]||(e[7]=l("tr",null,[l("th",null,"npm 包名"),l("td",null,[l("code",null,"@melt-js/demo-vue3")])],-1)),l("tr",null,[e[2]||(e[2]=l("th",null,"unpkg 入口",-1)),l("td",null,[l("a",{href:o(d).unpkgEntry,target:"_blank",rel:"noopener"},n(o(d).unpkgEntry),9,R)])]),l("tr",null,[e[3]||(e[3]=l("th",null,"本地端口",-1)),l("td",null,n(o(d).port),1)]),l("tr",null,[e[6]||(e[6]=l("th",null,"远程组件",-1)),l("td",null,[l("div",null,[l("code",null,n(o(k)),1)]),l("div",null,[e[4]||(e[4]=t("开发：",-1)),l("code",null,n(o(f)),1)]),l("div",null,[e[5]||(e[5]=t("生产：",-1)),l("code",null,n(o(V)),1)])])]),e[8]||(e[8]=l("tr",null,[l("th",null,"运行时共享"),l("td",null,[l("code",null,"bindVueRuntime({ Vue })"),t("，远程组件 external 的 vue 复用宿主这一份")])],-1)),e[9]||(e[9]=l("tr",null,[l("th",null,"路由模式"),l("td",null,[t(" hash（"),l("code",null,"#/remote"),t("），保证从 unpkg 的 "),l("code",null,"dist/index.html"),t(" 直接打开也能切换示例 ")])],-1))])]),l("section",null,[e[11]||(e[11]=l("h2",{class:"demo-page__section-title"},"示例导航",-1)),l("div",h,[(r(!0),m(E,null,b(o(p),s=>(r(),x(_,{key:s.path,to:s.path,class:"demo-card demo-card--link"},{default:T(()=>{var a,i;return[l("h3",w,n((a=s.meta)==null?void 0:a.title),1),l("p",A,n((i=s.meta)==null?void 0:i.description),1),e[10]||(e[10]=l("span",{class:"demo-card__action"},"进入示例 →",-1))]}),_:2},1032,["to"]))),128))])]),e[12]||(e[12]=l("p",{class:"demo-note"},[t(" 本地开发先执行 "),l("code",null,"pnpm comps-vue3:dev"),t("（20020），再执行 "),l("code",null,"pnpm demo-vue3:dev"),t(" 打开 http://localhost:30020；远端地址可用 "),l("code",null,"VITE_REMOTE_HOST"),t(" 覆盖。 ")],-1))])}}});export{N as default};
|
|
2
|
+
//# sourceMappingURL=OverviewView-D-OMwSKL.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"OverviewView-D-OMwSKL.js","sources":["../../src/views/OverviewView.vue"],"sourcesContent":["<template>\r\n <div class=\"demo-page\">\r\n <header>\r\n <p class=\"demo-page__eyebrow\">Vue 3 · hel 宿主</p>\r\n <h1 class=\"demo-page__title\">{{ APP_META.name }} 简介</h1>\r\n <p class=\"demo-page__lead\">\r\n Vue 3 + Vite 5 的 hel 宿主（消费方）示例：入口处用\r\n <code>bindVueRuntime</code> 注入宿主 Vue 运行时，再用\r\n <code>preFetchLib</code> 预加载远程组件 <code>comps-vue3</code>。\r\n 顶部导航栏用于切换示例，示例页右上角的「全屏」按钮只把组件预览区放大到全屏，\r\n 简介与说明文字不会进入全屏。\r\n </p>\r\n </header>\r\n\r\n <table class=\"demo-table\">\r\n <tbody>\r\n <tr>\r\n <th>npm 包名</th>\r\n <td><code>@melt-js/demo-vue3</code></td>\r\n </tr>\r\n <tr>\r\n <th>unpkg 入口</th>\r\n <td>\r\n <a :href=\"APP_META.unpkgEntry\" target=\"_blank\" rel=\"noopener\">{{ APP_META.unpkgEntry }}</a>\r\n </td>\r\n </tr>\r\n <tr>\r\n <th>本地端口</th>\r\n <td>{{ APP_META.port }}</td>\r\n </tr>\r\n <tr>\r\n <th>远程组件</th>\r\n <td>\r\n <div><code>{{ REMOTE_LIB_NAME }}</code></div>\r\n <div>开发：<code>{{ LOCAL_HOST }}</code></div>\r\n <div>生产：<code>{{ UNPKG_HOST }}</code></div>\r\n </td>\r\n </tr>\r\n <tr>\r\n <th>运行时共享</th>\r\n <td><code>bindVueRuntime({ Vue })</code>，远程组件 external 的 vue 复用宿主这一份</td>\r\n </tr>\r\n <tr>\r\n <th>路由模式</th>\r\n <td>\r\n hash（<code>#/remote</code>），保证从 unpkg 的 <code>dist/index.html</code>\r\n 直接打开也能切换示例\r\n </td>\r\n </tr>\r\n </tbody>\r\n </table>\r\n\r\n <section>\r\n <h2 class=\"demo-page__section-title\">示例导航</h2>\r\n <div class=\"demo-grid\">\r\n <router-link\r\n v-for=\"item in examples\"\r\n :key=\"item.path\"\r\n :to=\"item.path\"\r\n class=\"demo-card demo-card--link\"\r\n >\r\n <h3 class=\"demo-card__title\">{{ item.meta?.title }}</h3>\r\n <p class=\"demo-card__text\">{{ item.meta?.description }}</p>\r\n <span class=\"demo-card__action\">进入示例 →</span>\r\n </router-link>\r\n </div>\r\n </section>\r\n\r\n <p class=\"demo-note\">\r\n 本地开发先执行 <code>pnpm comps-vue3:dev</code>（20020），再执行\r\n <code>pnpm demo-vue3:dev</code> 打开 http://localhost:30020；远端地址可用\r\n <code>VITE_REMOTE_HOST</code> 覆盖。\r\n </p>\r\n </div>\r\n</template>\r\n\r\n<script setup lang=\"ts\">\r\nimport { APP_META } from '../configs/app'\r\nimport { LOCAL_HOST, REMOTE_LIB_NAME, UNPKG_HOST } from '../configs/remote'\r\nimport { demoRoutes } from '../router'\r\n\r\n// 简介页也列出其余示例，方便直接跳转\r\nconst examples = demoRoutes.filter((item) => item.name && item.name !== 'overview')\r\n</script>\r\n"],"names":["examples","demoRoutes","item","_openBlock","_createElementBlock","_hoisted_1","_createElementVNode","_cache","_hoisted_2","_toDisplayString","_unref","_hoisted_3","APP_META","_hoisted_4","REMOTE_LIB_NAME","LOCAL_HOST","UNPKG_HOST","_hoisted_5","_Fragment","_renderList","_createBlock","_component_router_link","_hoisted_6","_a","_hoisted_7","_b"],"mappings":"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"}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
.remote-preview.is-demo-fullscreen[data-v-3b8307ef]{padding:16px;background:var(--demo-bg)}
|
|
@@ -0,0 +1,2 @@
|
|
|
1
|
+
import{_ as c,a as n}from"./_plugin-vue_export-helper-C7rqUIsm.js";import{L as r}from"./LevaPlayground-i7Bc01Vw.js";import{d as m,f as p,g as e,m as a,A as d,l as i,D as u,o as v,u as s,E as f,G as b}from"./index-nsRhUCyk.js";import"./loadApp-CTkznB3Q.js";const _=[{name:"msg",type:"string",description:"标题文案",default:"",required:!1,version:"",isEvent:!1,bindable:!0,value:""},{name:"name",type:"string",description:"名字，展示在标题下方",default:"",required:!1,version:"",isEvent:!1,bindable:!0,value:""}],g={class:"demo-page"},h=m({__name:"RemoteView",setup(y){const l=f({loader:async()=>{console.log("[demo-vue3] 开始加载远程组件...");try{const o=await b();return console.log("[demo-vue3] 远程组件加载完成:",o),o.HelloWorld}catch(o){throw console.error("[demo-vue3] 获取远程组件失败:",o),o}},timeout:1e4});return(o,t)=>(v(),p("div",g,[t[0]||(t[0]=e("header",null,[e("p",{class:"demo-page__eyebrow"},"远程组件"),e("h1",{class:"demo-page__title"},"comps-vue3 · HelloWorld"),e("p",{class:"demo-page__lead"},[a(" 下面的组件由 "),e("code",null,"preFetchLib('comps-vue3')"),a(" 从远端加载，宿主产物里没有它。 右侧属性面板来自 "),e("code",null,"libs-vue3-leva"),a("，"),e("code",null,"msg"),a(" / "),e("code",null,"name"),a(" 改动会实时写回远程组件。 ")])],-1)),d(c,{class:"remote-preview"},{default:i(()=>[d(r,{name:"HelloWorld",component:s(l),schema:s(_),presets:{msg:"来自 demo-vue3 的问候"}},null,8,["component","schema"])]),_:1}),t[1]||(t[1]=u('<p class="demo-note" data-v-3b8307ef> 远程组件的 <code data-v-3b8307ef>HelloWorld</code> 声明了 <code data-v-3b8307ef>props: { msg, name }</code>，面板通过 <code data-v-3b8307ef>v-bind</code> 把值传给组件；schema 由 <code data-v-3b8307ef>vue3-leva-gen-schema</code> 从组件源码的 props 注释生成，宿主只负责把组件和 schema 传进 <code data-v-3b8307ef>PropsPlayground</code>。 </p><p class="demo-note" data-v-3b8307ef> 远端地址：开发 <code data-v-3b8307ef>http://localhost:20020</code>（先执行 <code data-v-3b8307ef>pnpm comps-vue3:dev</code>），生产 <code data-v-3b8307ef>unpkg</code> 上的 <code data-v-3b8307ef>hel-meta.json</code>；也可用 <code data-v-3b8307ef>VITE_REMOTE_HOST</code> 覆盖。 </p>',2))]))}}),x=n(h,[["__scopeId","data-v-3b8307ef"]]);export{x as default};
|
|
2
|
+
//# sourceMappingURL=RemoteView-D_bHz8G7.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"RemoteView-D_bHz8G7.js","sources":["../../src/views/RemoteView.vue"],"sourcesContent":["<template>\n <div class=\"demo-page\">\n <header>\n <p class=\"demo-page__eyebrow\">远程组件</p>\n <h1 class=\"demo-page__title\">comps-vue3 · HelloWorld</h1>\n <p class=\"demo-page__lead\">\n 下面的组件由 <code>preFetchLib('comps-vue3')</code> 从远端加载，宿主产物里没有它。\n 右侧属性面板来自 <code>libs-vue3-leva</code>，<code>msg</code> / <code>name</code>\n 改动会实时写回远程组件。\n </p>\n </header>\n\n <DemoPreview class=\"remote-preview\">\n <LevaPlayground\n name=\"HelloWorld\"\n :component=\"RemoteComp\"\n :schema=\"HelloWorldSchema\"\n :presets=\"{ msg: '来自 demo-vue3 的问候' }\"\n />\n </DemoPreview>\n\n <p class=\"demo-note\">\n 远程组件的 <code>HelloWorld</code> 声明了 <code>props: { msg, name }</code>，面板通过\n <code>v-bind</code> 把值传给组件；schema 由 <code>vue3-leva-gen-schema</code> 从组件源码的\n props 注释生成，宿主只负责把组件和 schema 传进 <code>PropsPlayground</code>。\n </p>\n\n <p class=\"demo-note\">\n 远端地址：开发 <code>http://localhost:20020</code>（先执行\n <code>pnpm comps-vue3:dev</code>），生产 <code>unpkg</code> 上的\n <code>hel-meta.json</code>；也可用 <code>VITE_REMOTE_HOST</code> 覆盖。\n </p>\n </div>\n</template>\n\n<script setup lang=\"ts\">\nimport { defineAsyncComponent } from 'vue'\nimport HelloWorldSchema from '@melt-js/comps-vue3/src/components/HelloWorld.propsSchema.json'\nimport DemoPreview from '../components/DemoPreview.vue'\nimport LevaPlayground from '../components/LevaPlayground.vue'\nimport { loadRemoteLib } from '../configs/remote'\n\nconst RemoteComp = defineAsyncComponent({\n loader: async () => {\n console.log('[demo-vue3] 开始加载远程组件...')\n\n try {\n // 入口处已经预加载，这里复用同一个 Promise（通常已 resolve）\n const lib = await loadRemoteLib()\n\n console.log('[demo-vue3] 远程组件加载完成:', lib)\n return lib.HelloWorld\n } catch (err) {\n console.error('[demo-vue3] 获取远程组件失败:', err)\n throw err\n }\n },\n timeout: 10000,\n})\n</script>\n\n<style scoped>\n/* 全屏时只保留远程组件与面板，页头与说明文字留在屏幕外 */\n.remote-preview.is-demo-fullscreen {\n padding: 16px;\n background: var(--demo-bg);\n}\n</style>\n"],"names":["RemoteComp","defineAsyncComponent","lib","loadRemoteLib","err","_openBlock","_createElementBlock","_hoisted_1","_createElementVNode","_createVNode","DemoPreview","LevaPlayground","_unref","HelloWorldSchema"],"mappings":"yiBA0CA,MAAMA,EAAaC,EAAqB,CACtC,OAAQ,SAAY,CAClB,QAAQ,IAAI,yBAAyB,EAErC,GAAI,CAEF,MAAMC,EAAM,MAAMC,EAAA,EAElB,eAAQ,IAAI,wBAAyBD,CAAG,EACjCA,EAAI,UACb,OAASE,EAAK,CACZ,cAAQ,MAAM,wBAAyBA,CAAG,EACpCA,CACR,CACF,EACA,QAAS,GAAA,CACV,gBAzDCC,EAAA,EAAAC,EA+BM,MA/BNC,EA+BM,aA9BJC,EAQS,SAAA,KAAA,CAPPA,EAAsC,IAAA,CAAnC,MAAM,oBAAA,EAAqB,MAAI,EAClCA,EAAyD,KAAA,CAArD,MAAM,kBAAA,EAAmB,yBAAuB,EACpDA,EAII,IAAA,CAJD,MAAM,mBAAiB,GAAC,UAClB,EAAAA,EAAsC,YAAhC,2BAAyB,IAAO,4BACpC,EAAAA,EAA2B,YAArB,gBAAc,IAAO,GAAC,EAAAA,EAAgB,YAAV,KAAG,IAAO,KAAG,EAAAA,EAAiB,YAAX,MAAI,IAAO,gBAE3E,CAAA,SAGFC,EAOcC,EAAA,CAPD,MAAM,kBAAgB,WACjC,IAKE,CALFD,EAKEE,EAAA,CAJA,KAAK,aACJ,UAAWC,EAAAZ,CAAA,EACX,OAAQY,EAAAC,CAAA,EACR,QAAS,CAAA,IAAA,kBAAA,CAAA"}
|
package/dist/assets/{_plugin-vue_export-helper-BWAI2PXX.js → _plugin-vue_export-helper-C7rqUIsm.js}
RENAMED
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import{d as l,w as c,f as u,g as r,
|
|
2
|
-
//# sourceMappingURL=_plugin-vue_export-helper-
|
|
1
|
+
import{d as l,w as c,f as u,g as r,I as d,J as p,o as f,b as _,n as m}from"./index-nsRhUCyk.js";import{u as v}from"./loadApp-CTkznB3Q.js";const w={class:"demo-preview","data-demo-preview":""},h=l({__name:"DemoPreview",setup(n){const{isFullscreen:a,exit:o}=v(),s=_(null);c(a,async e=>{var t;e&&(await m(),(t=s.value)==null||t.focus({preventScroll:!0}))});function i(){o().catch(e=>{console.warn("[Fullscreen] Failed to exit fullscreen:",e)})}return(e,t)=>(f(),u("div",w,[r("button",{ref_key:"exitButton",ref:s,type:"button",class:"demo-preview__exit",title:"退出全屏（Esc）","aria-label":"退出全屏",onClick:d(i,["stop"])},[...t[0]||(t[0]=[r("svg",{class:"demo-preview__exit-icon",viewBox:"0 0 24 24",fill:"none",stroke:"currentColor","stroke-width":"2","stroke-linecap":"round","stroke-linejoin":"round","aria-hidden":"true",focusable:"false"},[r("path",{d:"M8 3v3a2 2 0 0 1-2 2H3m18 0h-3a2 2 0 0 1-2-2V3m0 18v-3a2 2 0 0 1 2-2h3M3 16h3a2 2 0 0 1 2 2v3"})],-1),r("span",{class:"demo-preview__exit-text"},"退出全屏",-1)])],512),p(e.$slots,"default")]))}}),B=(n,a)=>{const o=n.__vccOpts||n;for(const[s,i]of a)o[s]=i;return o};export{h as _,B as a};
|
|
2
|
+
//# sourceMappingURL=_plugin-vue_export-helper-C7rqUIsm.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"_plugin-vue_export-helper-C7rqUIsm.js","sources":["../../src/components/DemoPreview.vue"],"sourcesContent":["<template>\r\n <div class=\"demo-preview\" data-demo-preview>\r\n <button\r\n ref=\"exitButton\"\r\n type=\"button\"\r\n class=\"demo-preview__exit\"\r\n title=\"退出全屏（Esc）\"\r\n aria-label=\"退出全屏\"\r\n @click.stop=\"exitFullscreen\"\r\n >\r\n <svg\r\n class=\"demo-preview__exit-icon\"\r\n viewBox=\"0 0 24 24\"\r\n fill=\"none\"\r\n stroke=\"currentColor\"\r\n stroke-width=\"2\"\r\n stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\"\r\n aria-hidden=\"true\"\r\n focusable=\"false\"\r\n >\r\n <path\r\n d=\"M8 3v3a2 2 0 0 1-2 2H3m18 0h-3a2 2 0 0 1-2-2V3m0 18v-3a2 2 0 0 1 2-2h3M3 16h3a2 2 0 0 1 2 2v3\"\r\n />\r\n </svg>\r\n <span class=\"demo-preview__exit-text\">退出全屏</span>\r\n </button>\r\n <slot />\r\n </div>\r\n</template>\r\n\r\n<script setup lang=\"ts\">\r\nimport { nextTick, ref, watch } from 'vue'\r\nimport { useDemoFullscreen } from '../composables/useDemoFullscreen'\r\n\r\n/**\r\n * 组件预览区：全屏按钮的唯一目标。\r\n *\r\n * 普通模式下它只是页面里的一个普通容器；进入全屏后由 vue-fullscreen 给根节点\r\n * 加上 is-demo-fullscreen 类，只保留插槽里的组件内容，页面标题、简介、说明与\r\n * 页脚都不会进入全屏。右下角的「退出全屏」按钮也只在全屏时出现。\r\n */\r\nconst { isFullscreen, exit } = useDemoFullscreen()\r\nconst exitButton = ref<HTMLButtonElement | null>(null)\r\n\r\n// 进入全屏后把焦点移到「退出全屏」，键盘用户可以直接 Esc / Enter 退出\r\nwatch(isFullscreen, async (value) => {\r\n if (!value) return\r\n await nextTick()\r\n exitButton.value?.focus({ preventScroll: true })\r\n})\r\n\r\nfunction exitFullscreen() {\r\n exit().catch((error) => {\r\n console.warn('[Fullscreen] Failed to exit fullscreen:', error)\r\n })\r\n}\r\n</script>\r\n"],"names":["isFullscreen","exit","useDemoFullscreen","exitButton","ref","watch","value","nextTick","_a","exitFullscreen","error","_openBlock","_createElementBlock","_hoisted_1","_createElementVNode","_renderSlot","_ctx"],"mappings":"mOA0CA,KAAM,CAAE,aAAAA,EAAc,KAAAC,CAAA,EAASC,EAAA,EACzBC,EAAaC,EAA8B,IAAI,EAGrDC,EAAML,EAAc,MAAOM,GAAU,OAC9BA,IACL,MAAMC,EAAA,GACNC,EAAAL,EAAW,QAAX,MAAAK,EAAkB,MAAM,CAAE,cAAe,KAC3C,CAAC,EAED,SAASC,GAAiB,CACxBR,EAAA,EAAO,MAAOS,GAAU,CACtB,QAAQ,KAAK,0CAA2CA,CAAK,CAC/D,CAAC,CACH,eAvDEC,EAAA,EAAAC,EA2BM,MA3BNC,EA2BM,CA1BJC,EAwBS,SAAA,SAvBH,aAAJ,IAAIX,EACJ,KAAK,SACL,MAAM,qBACN,MAAM,YACN,aAAW,OACV,UAAYM,EAAc,CAAA,MAAA,CAAA,CAAA,mBAE3BK,EAcM,MAAA,CAbJ,MAAM,0BACN,QAAQ,YACR,KAAK,OACL,OAAO,eACP,eAAa,IACb,iBAAe,QACf,kBAAgB,QAChB,cAAY,OACZ,UAAU,OAAA,GAEVA,EAEE,OAAA,CADA,EAAE,gGAA+F,CAAA,MAGrGA,EAAiD,OAAA,CAA3C,MAAM,yBAAA,EAA0B,OAAI,EAAA,CAAA,SAE5CC,EAAQC,EAAA,OAAA,SAAA,CAAA"}
|