Skip to content

Commit b412e5a

Browse files
johnleiderjohnleider
committed
docs: wrap bare markup in vue code fences with <template>
1 parent 409c402 commit b412e5a

4 files changed

Lines changed: 69 additions & 45 deletions

File tree

‎apps/docs/src/pages/components/disclosure/treeview.md‎

Lines changed: 27 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -104,19 +104,23 @@ For trees with selection, add [Treeview.Checkbox](#treeviewcheckbox) and [Treevi
104104
Control how many nodes can be open at once with the `open` prop:
105105

106106
```vue
107-
<!-- Default: multiple nodes can be open simultaneously -->
108-
<Treeview.Root open="multiple">
107+
<template>
108+
<!-- Default: multiple nodes can be open simultaneously -->
109+
<Treeview.Root open="multiple" />
109110
110-
<!-- Accordion: only one node open at a time -->
111-
<Treeview.Root open="single">
111+
<!-- Accordion: only one node open at a time -->
112+
<Treeview.Root open="single" />
113+
</template>
112114
```
113115

114116
Use `open-all` to expand all nodes on mount:
115117

116118
```vue
117-
<Treeview.Root open-all>
118-
<!-- All nodes start expanded -->
119-
</Treeview.Root>
119+
<template>
120+
<Treeview.Root open-all>
121+
<!-- All nodes start expanded -->
122+
</Treeview.Root>
123+
</template>
120124
```
121125

122126
### Selection Mode
@@ -130,31 +134,37 @@ The `selection` prop controls how selection propagates through the hierarchy:
130134
| `leaf` | Only leaf nodes can be selected; selecting a parent selects all its leaf descendants |
131135

132136
```vue
133-
<Treeview.Root v-model="selected" selection="leaf">
134-
<!-- Only leaf nodes appear in v-model -->
135-
</Treeview.Root>
137+
<template>
138+
<Treeview.Root v-model="selected" selection="leaf">
139+
<!-- Only leaf nodes appear in v-model -->
140+
</Treeview.Root>
141+
</template>
136142
```
137143

138144
### Active Item
139145

140146
The `active` prop controls single vs. multi-highlight mode (independent of selection):
141147

142148
```vue
143-
<!-- Default: only one item highlighted at a time -->
144-
<Treeview.Root active="single">
149+
<template>
150+
<!-- Default: only one item highlighted at a time -->
151+
<Treeview.Root active="single" />
145152
146-
<!-- Multiple items can be highlighted simultaneously -->
147-
<Treeview.Root active="multiple">
153+
<!-- Multiple items can be highlighted simultaneously -->
154+
<Treeview.Root active="multiple" />
155+
</template>
148156
```
149157

150158
### Reveal
151159

152160
Set `reveal` to automatically open all ancestor nodes when a descendant is opened. Useful for "navigate to item" patterns where a deep node is programmatically opened:
153161

154162
```vue
155-
<Treeview.Root reveal>
156-
<!-- Opening a deep node opens its entire ancestor chain -->
157-
</Treeview.Root>
163+
<template>
164+
<Treeview.Root reveal>
165+
<!-- Opening a deep node opens its entire ancestor chain -->
166+
</Treeview.Root>
167+
</template>
158168
```
159169

160170
## Examples

‎apps/docs/src/pages/components/forms/rating.md‎

Lines changed: 17 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -110,31 +110,37 @@ Rating.Root provides `role="slider"` with `aria-valuenow`, `aria-valuemin`, `ari
110110
Slot into Rating.Item and use the `state` slot prop to choose your icon:
111111

112112
```vue
113-
<Rating.Item :index="i" v-slot="{ state }">
114-
<StarFull v-if="state === 'full'" />
115-
<StarHalf v-if="state === 'half'" />
116-
<StarEmpty v-if="state === 'empty'" />
117-
</Rating.Item>
113+
<template>
114+
<Rating.Item :index="i" v-slot="{ state }">
115+
<StarFull v-if="state === 'full'" />
116+
<StarHalf v-if="state === 'half'" />
117+
<StarEmpty v-if="state === 'empty'" />
118+
</Rating.Item>
119+
</template>
118120
```
119121

120122
??? How do I make it readonly for display?
121123

122124
Use the `readonly` prop. The value displays but cannot be changed:
123125

124126
```vue
125-
<Rating.Root :model-value="3.5" readonly half>
126-
<Rating.Item v-for="i in 5" :key="i" :index="i" />
127-
</Rating.Root>
127+
<template>
128+
<Rating.Root :model-value="3.5" readonly half>
129+
<Rating.Item v-for="i in 5" :key="i" :index="i" />
130+
</Rating.Root>
131+
</template>
128132
```
129133

130134
??? How does form submission work?
131135

132136
Set the `name` prop on Root. A hidden input is auto-rendered with the current value:
133137

134138
```vue
135-
<Rating.Root v-model="rating" name="review-rating">
136-
<Rating.Item v-for="i in 5" :key="i" :index="i" />
137-
</Rating.Root>
139+
<template>
140+
<Rating.Root v-model="rating" name="review-rating">
141+
<Rating.Item v-for="i in 5" :key="i" :index="i" />
142+
</Rating.Root>
143+
</template>
138144
```
139145

140146
:::

‎apps/docs/src/pages/components/providers/theme.md‎

Lines changed: 17 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -87,21 +87,25 @@ Nest `<Theme>` components to create layered theme contexts. Each section applies
8787
Theme extends `Atom`, so it accepts the `as` prop to render as any HTML element:
8888

8989
```vue
90-
<Theme theme="dark" as="section">
91-
<!-- renders as <section data-theme="dark"> -->
92-
</Theme>
90+
<template>
91+
<Theme theme="dark" as="section">
92+
<!-- renders as <section data-theme="dark"> -->
93+
</Theme>
94+
</template>
9395
```
9496

9597
### Renderless Mode
9698

9799
Set `renderless` to skip the wrapper element. The slot exposes `attrs` (including `data-theme`) for you to bind to your own element:
98100

99101
```vue
100-
<Theme theme="dark" renderless v-slot="{ attrs }">
101-
<section v-bind="attrs">
102-
No extra wrapper div
103-
</section>
104-
</Theme>
102+
<template>
103+
<Theme theme="dark" renderless v-slot="{ attrs }">
104+
<section v-bind="attrs">
105+
No extra wrapper div
106+
</section>
107+
</Theme>
108+
</template>
105109
```
106110

107111
### Isolated Context
@@ -125,9 +129,11 @@ By default, `<Theme>` provides its context under the `'v0:theme'` key — the sa
125129
The default slot exposes `theme` (the active ID), `isDark` (boolean), and `attrs` for conditional rendering:
126130

127131
```vue
128-
<Theme v-slot="{ theme, isDark }" theme="dark">
129-
<span>{{ theme }} — dark: {{ isDark }}</span>
130-
</Theme>
132+
<template>
133+
<Theme v-slot="{ theme, isDark }" theme="dark">
134+
<span>{{ theme }} — dark: {{ isDark }}</span>
135+
</Theme>
136+
</template>
131137
```
132138

133139
<DocsApi />

‎apps/docs/src/pages/components/semantic/carousel.md‎

Lines changed: 8 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -213,13 +213,15 @@ The Carousel is built on CSS scroll-snap for native drag/swipe support. For fade
213213
Use the `autoplay` prop with an interval in milliseconds. The root slot exposes `isAutoplay`, `isPaused`, `remaining`, `play`, `stop`, `pause`, and `resume` for controlling playback. Autoplay pauses automatically during touch and mouse drag interactions. Use `Carousel.Progress` to visualize the timer.
214214

215215
```vue
216-
<Carousel.Root v-slot="{ isAutoplay, play, stop }" :autoplay="5000">
217-
<Carousel.Viewport>
218-
<!-- slides -->
219-
</Carousel.Viewport>
216+
<template>
217+
<Carousel.Root v-slot="{ isAutoplay, play, stop }" :autoplay="5000">
218+
<Carousel.Viewport>
219+
<!-- slides -->
220+
</Carousel.Viewport>
220221
221-
<Carousel.Progress class="h-1 bg-surface-variant" />
222-
</Carousel.Root>
222+
<Carousel.Progress class="h-1 bg-surface-variant" />
223+
</Carousel.Root>
224+
</template>
223225
```
224226

225227
:::

0 commit comments

Comments
 (0)