@@ -305,6 +305,8 @@ import commonProps from '../common-props.json'
305 305
import { getComponentName, getCleanComponentName, kebabCase } from '../utils'
306 306
import AnchoredHeading from './anchored-heading'
307 307 308 +
const SORT_THRESHOLD = 10
309 + 308 310
export default {
309 311
name: 'BVComponentdoc',
310 312
components: { AnchoredHeading },
@@ -393,34 +395,36 @@ export default {
393 395
}, {})
394 396
},
395 397
propsFields() {
396 -
const sortable = this.propsItems.length >= 10
398 +
const sortable = this.propsItems.length >= SORT_THRESHOLD
397 399
const hasDescriptions = this.propsItems.some(p => p.description)
398 400
return [
399 401
{ key: 'prop', label: 'Property', sortable },
400 -
{ key: 'type', label: 'Type' },
402 +
{ key: 'type', label: 'Type', sortable },
401 403
{ key: 'defaultValue', label: 'Default' },
402 404
...(hasDescriptions ? [{ key: 'description', label: 'Description' }] : [])
403 405
]
404 406
},
405 407
eventsFields() {
408 +
const sortable = this.events.length >= SORT_THRESHOLD
406 409
return [
407 -
{ key: 'event', label: 'Event' },
410 +
{ key: 'event', label: 'Event', sortable },
408 411
{ key: 'args', label: 'Arguments' },
409 412
{ key: 'description', label: 'Description' }
410 413
]
411 414
},
412 415
rootEventListenersFields() {
416 +
const sortable = this.rootEventListeners.length >= SORT_THRESHOLD
413 417
return [
414 -
{ key: 'event', label: 'Event' },
418 +
{ key: 'event', label: 'Event', sortable },
415 419
{ key: 'args', label: 'Arguments' },
416 420
{ key: 'description', label: 'Description' }
417 421
]
418 422
},
419 423
slotsFields() {
420 -
const sortable = this.slotsItems.length >= 10
424 +
const sortable = this.slots.length >= SORT_THRESHOLD
421 425
const hasScopedSlots = this.slots.some(s => s.scope)
422 426
return [
423 -
{ key: 'name', label: 'Slot Name', sortable },
427 +
{ key: 'name', label: 'Name', sortable },
424 428
...(hasScopedSlots ? [{ key: 'scope', label: 'Scoped' }] : []),
425 429
{ key: 'description', label: 'Description' }
426 430
]
@@ -429,50 +433,52 @@ export default {
429 433
const props = this.componentProps
430 434
const propsMetaObj = this.componentPropsMetaObj
431 435 432 -
return Object.keys(props).map(prop => {
433 -
const p = props[prop]
434 -
const meta = {
435 -
// Fallback descriptions for common props
436 -
...(commonProps[prop] || {}),
437 -
...(propsMetaObj[prop] || {})
438 -
}
436 +
return Object.keys(props)
437 +
.sort()
438 +
.map(prop => {
439 +
const p = props[prop]
440 +
const meta = {
441 +
// Fallback descriptions for common props
442 +
...(commonProps[prop] || {}),
443 +
...(propsMetaObj[prop] || {})
444 +
}
439 445 440 -
// Describe type
441 -
let type = p.type
442 -
let types = []
443 -
if (Array.isArray(type)) {
444 -
types = type.map(type => type.name)
445 -
} else {
446 -
types = type && type.name ? [type.name] : ['Any']
447 -
}
448 -
type = types
449 -
.map(type => `<code class="notranslate" translate="no">${type}</code>`)
450 -
.join(' or ')
446 +
// Describe type
447 +
let type = p.type
448 +
let types = []
449 +
if (Array.isArray(type)) {
450 +
types = type.map(type => type.name)
451 +
} else {
452 +
types = type && type.name ? [type.name] : ['Any']
453 +
}
454 +
type = types
455 +
.map(type => `<code class="notranslate" translate="no">${type}</code>`)
456 +
.join(' or ')
451 457 452 -
// Default value
453 -
let defaultValue = p.default
454 -
if (defaultValue instanceof Function && !Array.isArray(defaultValue)) {
455 -
defaultValue = defaultValue()
456 -
}
457 -
defaultValue =
458 -
typeof defaultValue === 'undefined'
459 -
? ''
460 -
: String(JSON.stringify(defaultValue, undefined, 1)).replace(/"/g, "'")
458 +
// Default value
459 +
let defaultValue = p.default
460 +
if (defaultValue instanceof Function && !Array.isArray(defaultValue)) {
461 +
defaultValue = defaultValue()
462 +
}
463 +
defaultValue =
464 +
typeof defaultValue === 'undefined'
465 +
? ''
466 +
: String(JSON.stringify(defaultValue, undefined, 1)).replace(/"/g, "'")
461 467 462 -
return {
463 -
prop: kebabCase(prop),
464 -
type,
465 -
defaultValue,
466 -
required: p.required || false,
467 -
description: meta.description || '',
468 -
version: meta.version || '',
469 -
xss: /[a-z]Html$/.test(prop),
470 -
isVModel: this.componentVModel && this.componentVModel.prop === prop,
471 -
deprecated: p.deprecated || false,
472 -
deprecation: p.deprecation || false,
473 -
_showDetails: typeof p.deprecated === 'string' || typeof p.deprecation === 'string'
474 -
}
475 -
})
468 +
return {
469 +
prop: kebabCase(prop),
470 +
type,
471 +
defaultValue,
472 +
required: p.required || false,
473 +
description: meta.description || '',
474 +
version: meta.version || '',
475 +
xss: meta.xss || false,
476 +
isVModel: this.componentVModel && this.componentVModel.prop === prop,
477 +
deprecated: p.deprecated || false,
478 +
deprecation: p.deprecation || false,
479 +
_showDetails: typeof p.deprecated === 'string' || typeof p.deprecation === 'string'
480 +
}
481 +
})
476 482
},
477 483
slotsItems() {
478 484
// We use object spread here so that `_showDetails` doesn't
RetroSearch is an open source project built by @garambo | Open a GitHub Issue
Search and Browse the WWW like it's 1997 | Search results from DuckDuckGo
HTML:
3.2
| Encoding:
UTF-8
| Version:
0.7.4