Skip to content

Commit c5c8b41

Browse files
elonehooelonehoo
committed
feat: add Collapsible component examples and style files, update dependencies and configurations.
1 parent 5ceaeb3 commit c5c8b41

File tree

15 files changed

+274
-1
lines changed

15 files changed

+274
-1
lines changed

‎.specstory/history/2025-11-12_14-23Z-解决-vue-组件中-getrootprops-的错误.md‎

Lines changed: 60 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,60 @@
1+
<!-- Generated by SpecStory, Markdown v2.0.0 -->
2+
3+
<!-- vscode Session c3f14a1e-b462-47fe-9920-6a8d848939ee (2025-11-12 14:23Z) -->
4+
5+
# 解决 Vue 组件中 getRootProps 的错误 (2025-11-12 14:23Z)
6+
7+
_**User (2025-11-12 14:24Z)**_
8+
9+
现在出现了这个问题
10+
11+
```
12+
TypeError: Cannot read properties of undefined (reading 'getRootProps')
13+
at Proxy._sfc_render (http://localhost:6006/src/components/collapsible/components/RootProvider.vue:23:86)
14+
at renderComponentRoot (http://localhost:6006/node_modules/.cache/storybook/b3e77991ec8863a9bb25945f250554e681cb43b2f5fdb88424ffc16b145c4a2b/sb-vite/deps/chunk-HYFIWIMW.js?v=4040a3b3:8965:17)
15+
at ReactiveEffect.componentUpdateFn [as fn] (http://localhost:6006/node_modules/.cache/storybook/b3e77991ec8863a9bb25945f250554e681cb43b2f5fdb88424ffc16b145c4a2b/sb-vite/deps/chunk-HYFIWIMW.js?v=4040a3b3:7848:26)
16+
at ReactiveEffect.run (http://localhost:6006/node_modules/.cache/storybook/b3e77991ec8863a9bb25945f250554e681cb43b2f5fdb88424ffc16b145c4a2b/sb-vite/deps/chunk-HYFIWIMW.js?v=4040a3b3:750:19)
17+
at updateComponent (http://localhost:6006/node_modules/.cache/storybook/b3e77991ec8863a9bb25945f250554e681cb43b2f5fdb88424ffc16b145c4a2b/sb-vite/deps/chunk-HYFIWIMW.js?v=4040a3b3:7708:18)
18+
at processComponent (http://localhost:6006/node_modules/.cache/storybook/b3e77991ec8863a9bb25945f250554e681cb43b2f5fdb88424ffc16b145c4a2b/sb-vite/deps/chunk-HYFIWIMW.js?v=4040a3b3:7642:7)
19+
at patch (http://localhost:6006/node_modules/.cache/storybook/b3e77991ec8863a9bb25945f250554e681cb43b2f5fdb88424ffc16b145c4a2b/sb-vite/deps/chunk-HYFIWIMW.js?v=4040a3b3:7135:11)
20+
at patchBlockChildren (http://localhost:6006/node_modules/.cache/storybook/b3e77991ec8863a9bb25945f250554e681cb43b2f5fdb88424ffc16b145c4a2b/sb-vite/deps/chunk-HYFIWIMW.js?v=4040a3b3:7501:7)
21+
at processFragment (http://localhost:6006/node_modules/.cache/storybook/b3e77991ec8863a9bb25945f250554e681cb43b2f5fdb88424ffc16b145c4a2b/sb-vite/deps/chunk-HYFIWIMW.js?v=4040a3b3:7579:9)
22+
at patch (http://localhost:6006/node_modules/.cache/storybook/b3e77991ec8863a9bb25945f250554e681cb43b2f5fdb88424ffc16b145c4a2b/sb-vite/deps/chunk-HYFIWIMW.js?v=4040a3b3:7109:9)
23+
```
24+
25+
---
26+
27+
_**Agent (model copilot/claude-sonnet-4.5)**_
28+
29+
我看到问题了。错误显示 `collapsible.getRootProps` 为 undefined,这是因为在模板中使用 `collapsible.getRootProps()` 时,`collapsible` 可能还没有正确初始化。
30+
31+
让我先查看一下相关的代码来了解完整的上下文: 现在我明白问题了。`RootProvider.vue` 组件中,`collapsible` 是一个 `computed` 属性,它的值是 `props.value`,但这个 `props.value` 本身就应该是一个 `ComputedRef<UseCollapsibleReturn>`。问题是在模板中直接使用 `collapsible.getRootProps()` 时,需要先解包这个 computed。
32+
33+
修复方法是在模板中使用 `collapsible` 时,它已经是一个 computed 返回的值,所以应该直接访问 `.value`:
34+
```
35+
36+
```
37+
我需要查看 `CollapsibleProvider` 的定义来了解正确的类型: 现在让我检查 `createContext` 的实现: 现在我明白了。`CollapsibleProvider` 期望接收 `UseCollapsibleReturn`,而 `UseCollapsibleReturn` 本身就是 `ComputedRef<Collapsible>`。所以问题是 `props.value` 已经是一个 `ComputedRef`,我们应该直接传递它,而不是包装在函数中。修改如下:
38+
```
39+
40+
```
41+
我理解了问题所在。根据类型定义,`RootProviderProps` 中的 `value` 是 `UnwrapRef<UseCollapsibleReturn>`,这意味着它已经被解包了。但是 `CollapsibleProvider` 期望的是 `UseCollapsibleReturn`(也就是 `ComputedRef<Collapsible>`)。
42+
43+
我们需要将解包后的值重新包装成 `computed`:
44+
```
45+
46+
```
47+
完成!现在代码应该可以正常工作了。问题的根本原因是:
48+
49+
1. **`RootProviderProps.value`** 的类型是 `UnwrapRef<UseCollapsibleReturn>`,这意味着它是解包后的 `Collapsible` 对象
50+
2. **`CollapsibleProvider`** 期望接收 `UseCollapsibleReturn`(即 `ComputedRef<Collapsible>`)
51+
3. 模板中 `props.value.getRootProps()` 可以直接访问,因为 Vue 会自动解包 props 中的 ref
52+
53+
所以最终的解决方案是:
54+
- 使用 `computed(() => props.value)` 将解包后的值重新包装成 computed,以满足 `CollapsibleProvider` 的类型要求
55+
- 在模板中直接使用 `props.value.getRootProps()`,因为 `props.value` 已经是解包后的对象
56+
57+
这样既满足了类型检查,也确保了运行时 `getRootProps()` 方法可以正确调用。
58+
59+
---
60+

‎packages/vue/.storybook/preview.ts‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,7 @@
11
import type { Preview } from '@storybook/vue3-vite'
22

3+
import '../../../utils/bootstrap.css'
4+
35
const preview: Preview = {
46
parameters: {
57
controls: {

‎packages/vue/package.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -34,7 +34,7 @@
3434
"build-storybook": "storybook build"
3535
},
3636
"peerDependencies": {
37-
"vue": "^3.0.0"
37+
"vue": ">=3.5.0"
3838
},
3939
"dependencies": {
4040
"@destyler/anatomy": "^0.1.0",

‎packages/vue/src/components/collapsible/examples/Basic.vue‎

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,10 @@
1+
<script setup lang="ts">
2+
import { Collapsible } from '../index'
3+
</script>
4+
5+
<template>
6+
<Collapsible.Root>
7+
<Collapsible.Trigger>Toggle</Collapsible.Trigger>
8+
<Collapsible.Content>Content</Collapsible.Content>
9+
</Collapsible.Root>
10+
</template>

‎packages/vue/src/components/collapsible/examples/LazyMount.vue‎

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,10 @@
1+
<script setup lang="ts">
2+
import { Collapsible } from '../index'
3+
</script>
4+
5+
<template>
6+
<Collapsible.Root lazyMount>
7+
<Collapsible.Trigger>Toggle</Collapsible.Trigger>
8+
<Collapsible.Content>Content</Collapsible.Content>
9+
</Collapsible.Root>
10+
</template>

‎packages/vue/src/components/collapsible/examples/LazyMountAndUnmountOnExit.vue‎

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,10 @@
1+
<script setup lang="ts">
2+
import { Collapsible } from '../index'
3+
</script>
4+
5+
<template>
6+
<Collapsible.Root lazyMount unmountOnExit>
7+
<Collapsible.Trigger>Toggle</Collapsible.Trigger>
8+
<Collapsible.Content>Content</Collapsible.Content>
9+
</Collapsible.Root>
10+
</template>

‎packages/vue/src/components/collapsible/examples/OnExitComplete.vue‎

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,10 @@
1+
<script setup lang="ts">
2+
import { Collapsible } from '../index'
3+
</script>
4+
5+
<template>
6+
<Collapsible.Root @exit-complete="() => console.log('on exit')">
7+
<Collapsible.Trigger>Toggle</Collapsible.Trigger>
8+
<Collapsible.Content>Content</Collapsible.Content>
9+
</Collapsible.Root>
10+
</template>

‎packages/vue/src/components/collapsible/examples/RootProvider.vue‎

Lines changed: 15 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,15 @@
1+
<script setup lang="ts">
2+
import { Collapsible, useCollapsible } from '../index'
3+
4+
const collapsible = useCollapsible()
5+
6+
</script>
7+
8+
<template>
9+
<span>{{ collapsible.visible ? 'Visible' : 'Hidden' }}</span>
10+
11+
<Collapsible.RootProvider :value="collapsible">
12+
<Collapsible.Trigger>Toggle</Collapsible.Trigger>
13+
<Collapsible.Content>Content</Collapsible.Content>
14+
</Collapsible.RootProvider>
15+
</template>

‎packages/vue/src/components/collapsible/stories/collapsible.stories.ts‎

Lines changed: 48 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,48 @@
1+
import Basic from '../examples/Basic.vue'
2+
import LazyMount from '../examples/LazyMount.vue'
3+
import LazyMountAndUnmountOnExit from '../examples/LazyMountAndUnmountOnExit.vue'
4+
import OnExitComplete from '../examples/OnExitComplete.vue'
5+
import RootProvider from '../examples/RootProvider.vue'
6+
7+
export default {
8+
title: 'Components / Collapsible',
9+
parameters: {
10+
// More on how to position stories at: https://storybook.js.org/docs/configure/story-layout
11+
layout: 'fullscreen',
12+
},
13+
}
14+
15+
export function basic() {
16+
return {
17+
components: { Basic },
18+
template: '<Basic />',
19+
}
20+
}
21+
22+
export function lazyMountAndUnmountOnExit() {
23+
return {
24+
components: { LazyMountAndUnmountOnExit },
25+
template: '<LazyMountAndUnmountOnExit />',
26+
}
27+
}
28+
29+
export function lazyMount() {
30+
return {
31+
components: { LazyMount },
32+
template: '<LazyMount />',
33+
}
34+
}
35+
36+
export function onExitComplete() {
37+
return {
38+
components: { OnExitComplete },
39+
template: '<OnExitComplete />',
40+
}
41+
}
42+
43+
export function rootProvider() {
44+
return {
45+
components: { RootProvider },
46+
template: '<RootProvider />',
47+
}
48+
}

‎pnpm-workspace.yaml‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
11
packages:
22
- packages/*
3+
- utils
34

45
onlyBuiltDependencies:
56
- esbuild

0 commit comments

Comments
 (0)