arthur/ui
1
0
Fork 0
mirror of https://github.com/ArthurDanjou/ui.git synced 2026-01-29 19:30:37 +01:00
Code Issues Packages Projects Releases Wiki Activity

docs(ComponentCode): handle hide and external props

Browse Source
This commit is contained in:
Benjamin Canac
2024-07-18 15:35:43 +02:00
parent b194c5e49a
commit d7c1158f97
1 changed files with 28 additions and 5 deletions
Download Patch File Download Diff File Expand all files Collapse all files

33
docs/app/components/content/ComponentCode.vue
View File

@@ -1,3 +1,4 @@
<!-- eslint-disable no-useless-escape -->
<script setup lang="ts"> <script setup lang="ts">
import json5 from 'json5' import json5 from 'json5'
import { upperFirst, camelCase, kebabCase } from 'scule' import { upperFirst, camelCase, kebabCase } from 'scule'
@@ -5,8 +6,12 @@ import * as theme from '#build/ui'
import { get, set } from '#ui/utils' import { get, set } from '#ui/utils'
const props = defineProps<{ const props = defineProps<{
/** List of props to ignore */ /** List of props to ignore in selection */
ignore?: string[] ignore?: string[]
/** List of props to hide from code and selection */
hide?: string[]
/** List of props to externalize in script setup */
external?: string[]
/** List of items for each prop */ /** List of items for each prop */
items?: { [key: string]: string[] } items?: { [key: string]: string[] }
props?: { [key: string]: any } props?: { [key: string]: any }
@@ -40,7 +45,7 @@ function mapKeys(obj, parentKey = '') {
const fullKey = parentKey ? `${parentKey}.${key}` : key const fullKey = parentKey ? `${parentKey}.${key}` : key
return !props.ignore?.includes(fullKey) ? fullKey : undefined return !props.ignore?.includes(fullKey) && !props.hide?.includes(fullKey) && !props.external?.includes(fullKey) ? fullKey : undefined
}).filter(Boolean) }).filter(Boolean)
} }
@@ -72,11 +77,27 @@ const options = computed(() => {
}) })
const code = computed(() => { const code = computed(() => {
let code = `\`\`\`vue let code = `\`\`\`vue`
if (props.external?.length) {
code += `
<script setup lang="ts">
`
for (const key of props.external) {
code += `const ${key} = ${json5.stringify(componentProps[key], null, 2).replace(/,([ |\t\n]+[}|\]])/g, '$1')}
`
}
code += `
<\/script>
`
}
code += `
<template> <template>
<${name}` <${name}`
for (const [key, value] of Object.entries(componentProps)) { for (const [key, value] of Object.entries(componentProps)) {
if (value === undefined || value === null || value === '') { if (value === undefined || value === null || value === '' || props.hide?.includes(key)) {
continue continue
} }
@@ -93,7 +114,9 @@ const code = computed(() => {
code += value ? ` ${name}` : ` :${key}="false"` code += value ? ` ${name}` : ` :${key}="false"`
} else if (typeof value === 'object') { } else if (typeof value === 'object') {
code += ` :${name}="${json5.stringify(value, null, 2).replace(/,([ |\t\n]+[}|\])])/g, '$1')}"` const parsedValue = !props.external?.includes(key) ? json5.stringify(value, null, 2).replace(/,([ |\t\n]+[}|\])])/g, '$1') : key
code += ` :${name}="${parsedValue}"`
} else { } else {
const propDefault = prop && (prop.default ?? prop.tags?.find(tag => tag.name === 'defaultValue')?.text ?? componentTheme?.defaultVariants?.[prop.name]) const propDefault = prop && (prop.default ?? prop.tags?.find(tag => tag.name === 'defaultValue')?.text ?? componentTheme?.defaultVariants?.[prop.name])
if (propDefault === value) { if (propDefault === value) {