|
95 | 95 | bordered |
96 | 96 | striped |
97 | 97 | > |
98 | | - <template v-slot:cell(prop)="{ value, item }"> |
| 98 | + <template #cell(prop)="{ value, item }"> |
99 | 99 | <code class="text-nowrap notranslate" translate="no">{{ value }}</code><br> |
100 | 100 | <b-badge v-if="item.required" variant="info">Required</b-badge> |
101 | 101 | <b-badge v-if="item.settings" variant="dark" href="/docs/reference/settings" title="Configurable in settings">Settings</b-badge> |
|
105 | 105 | <b-badge v-if="item.deprecated" variant="danger">Deprecated</b-badge> |
106 | 106 | <b-badge v-else-if="item.deprecation" variant="warning">Deprecation</b-badge> |
107 | 107 | </template> |
108 | | - <template v-slot:cell(type)="{ value }"> |
| 108 | + <template #cell(type)="{ value }"> |
109 | 109 | <span v-html="value"></span> |
110 | 110 | </template> |
111 | | - <template v-slot:cell(defaultValue)="{ value }"> |
| 111 | + <template #cell(defaultValue)="{ value }"> |
112 | 112 | <code v-if="value" class="word-wrap-normal notranslate" translate="no">{{ value }}</code> |
113 | 113 | </template> |
114 | | - <template v-slot:row-details="{ item }"> |
| 114 | + <template #row-details="{ item }"> |
115 | 115 | <p v-if="typeof item.deprecated === 'string'" class="mb-1 small"> |
116 | 116 | {{ item.deprecated }} |
117 | 117 | </p> |
|
158 | 158 | bordered |
159 | 159 | striped |
160 | 160 | > |
161 | | - <template v-slot:cell(prop)="{ value }"> |
| 161 | + <template #cell(prop)="{ value }"> |
162 | 162 | <code class="notranslate" translate="no">{{ kebabCase(value) }}</code> |
163 | 163 | </template> |
164 | | - <template v-slot:cell(event)="{ value }"> |
| 164 | + <template #cell(event)="{ value }"> |
165 | 165 | <code class="notranslate" translate="no">{{ value }}</code> |
166 | 166 | </template> |
167 | 167 | </b-table-lite> |
|
181 | 181 | bordered |
182 | 182 | striped |
183 | 183 | > |
184 | | - <template v-slot:cell(name)="{ value, item }"> |
| 184 | + <template #cell(name)="{ value, item }"> |
185 | 185 | <code class="text-nowrap notranslate" translate="no">{{ value }}</code> |
186 | 186 | <b-badge v-if="item.version" variant="secondary">v{{ item.version }}+</b-badge> |
187 | 187 | </template> |
188 | | - <template v-slot:cell(scope)="{ value, detailsShowing, toggleDetails }"> |
| 188 | + <template #cell(scope)="{ value, detailsShowing, toggleDetails }"> |
189 | 189 | <b-button |
190 | 190 | v-if="value" |
191 | 191 | variant="outline-info" |
|
197 | 197 | </b-button> |
198 | 198 | <span v-else>No</span> |
199 | 199 | </template> |
200 | | - <template v-slot:row-details="{ item }"> |
| 200 | + <template #row-details="{ item }"> |
201 | 201 | <b-table-lite |
202 | 202 | :items="item.scope" |
203 | 203 | :fields="[{ key: 'prop', label: 'Property' }, 'type', 'description']" |
|
207 | 207 | caption-top |
208 | 208 | small |
209 | 209 | > |
210 | | - <template v-slot:thead-top> |
| 210 | + <template #thead-top> |
211 | 211 | <b-tr> |
212 | 212 | <b-th colspan="3" class="text-center"> |
213 | 213 | <code class="text-nowrap notranslate" translate="no">{{ item.name }}</code> |
214 | 214 | Slot scoped properties |
215 | 215 | </b-th> |
216 | 216 | </b-tr> |
217 | 217 | </template> |
218 | | - <template v-slot:cell(prop)="{ value, item }"> |
| 218 | + <template #cell(prop)="{ value, item: cellItem }"> |
219 | 219 | <code class="text-nowrap notranslate" translate="no">{{ value }}</code> |
220 | | - <b-badge v-if="item.version" variant="secondary">v{{ item.version }}+</b-badge> |
| 220 | + <b-badge v-if="cellItem.version" variant="secondary">v{{ cellItem.version }}+</b-badge> |
221 | 221 | </template> |
222 | | - <template v-slot:cell(type)="{ value }"> |
| 222 | + <template #cell(type)="{ value }"> |
223 | 223 | <code class="text-nowrap notranslate" translate="no">{{ value || 'Any' }}</code> |
224 | 224 | </template> |
225 | 225 | </b-table-lite> |
|
240 | 240 | bordered |
241 | 241 | striped |
242 | 242 | > |
243 | | - <template v-slot:cell(event)="{ value, item }"> |
| 243 | + <template #cell(event)="{ value, item }"> |
244 | 244 | <code class="notranslate" translate="no">{{ value }}</code> |
245 | 245 | <b-badge v-if="item.version" variant="secondary">v{{ item.version }}+</b-badge> |
246 | 246 | </template> |
247 | | - <template v-slot:cell(args)="{ value, item }"> |
| 247 | + <template #cell(args)="{ value, item }"> |
248 | 248 | <ol v-if="value && value.length > 0" class="list-unstyled mb-0"> |
249 | 249 | <li v-for="(arg, idx) in value" :key="`event-${item.event}-${arg.arg || idx}`"> |
250 | 250 | <template v-if="arg.arg"> |
|
274 | 274 | bordered |
275 | 275 | striped |
276 | 276 | > |
277 | | - <template v-slot:cell(event)="{ value, item }"> |
| 277 | + <template #cell(event)="{ value, item }"> |
278 | 278 | <code class="text-nowrap notranslate" translate="no">{{ value }}</code> |
279 | 279 | <b-badge v-if="item.version" variant="secondary">v{{ item.version }}+</b-badge> |
280 | 280 | </template> |
281 | | - <template v-slot:cell(args)="{ value, item }"> |
| 281 | + <template #cell(args)="{ value, item }"> |
282 | 282 | <p |
283 | 283 | v-for="arg in value" |
284 | 284 | :key="`event-${item.event}-${arg.arg ? arg.arg : 'none'}`" |
|
295 | 295 | </section> |
296 | 296 | </template> |
297 | 297 |
|
298 | | -<style scoped> |
299 | | -h3::before { |
300 | | - display: block; |
301 | | - height: 1.25rem; |
302 | | - margin-top: -1.25rem; |
303 | | - content: ''; |
304 | | -} |
305 | | -
|
306 | | -code.bigger { |
307 | | - font-size: 105%; |
308 | | -} |
309 | | -
|
310 | | -ul.component-ref-mini-toc:empty { |
311 | | - display: none; |
312 | | -} |
313 | | -
|
314 | | -/deep/ .word-wrap-normal { |
315 | | - white-space: normal !important; |
316 | | - word-break: normal !important; |
317 | | - overflow-wrap: normal !important; |
318 | | -} |
319 | | -</style> |
320 | | - |
321 | 298 | <script> |
322 | 299 | import Vue from 'vue' |
323 | 300 | import commonProps from '../common-props.json' |
@@ -529,3 +506,26 @@ export default { |
529 | 506 | } |
530 | 507 | } |
531 | 508 | </script> |
| 509 | + |
| 510 | +<style scoped> |
| 511 | +h3::before { |
| 512 | + display: block; |
| 513 | + height: 1.25rem; |
| 514 | + margin-top: -1.25rem; |
| 515 | + content: ''; |
| 516 | +} |
| 517 | +
|
| 518 | +code.bigger { |
| 519 | + font-size: 105%; |
| 520 | +} |
| 521 | +
|
| 522 | +ul.component-ref-mini-toc:empty { |
| 523 | + display: none; |
| 524 | +} |
| 525 | +
|
| 526 | +/deep/ .word-wrap-normal { |
| 527 | + white-space: normal !important; |
| 528 | + word-break: normal !important; |
| 529 | + overflow-wrap: normal !important; |
| 530 | +} |
| 531 | +</style> |
0 commit comments