/
utilities.ts
64 lines (61 loc) 路 1.75 KB
/
utilities.ts
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
import { Kotti } from '@3yourmind/kotti-ui'
export type ComponentNames =
| 'KtFieldDate'
| 'KtFieldDateRange'
| 'KtFieldDateTime'
| 'KtFieldDateTimeRange'
| 'KtFieldMultiSelect'
| 'KtFieldNumber'
| 'KtFieldPassword'
| 'KtFieldRadioGroup'
| 'KtFieldSingleSelect'
| 'KtFieldSingleSelectRemote'
| 'KtFieldText'
| 'KtFieldTextArea'
| 'KtFieldToggle'
| 'KtFieldToggleGroup'
| 'KtFilters'
export type ComponentValue = {
hasHelpTextSlot: boolean
name: ComponentNames
props: Record<string, unknown>
validation: Kotti.Field.Validation.Result['type']
}
export const generateComponentCode = (component: ComponentValue) =>
[
`<${component.name}`,
...Object.entries(component.props)
.sort(([a], [b]) => a.localeCompare(b))
// eslint-disable-next-line @typescript-eslint/no-unused-vars
.filter(([key, value]) => {
if (['query'].includes(key)) {
// display `query` prop to show even if the value is `null`
return true
}
return value !== null && value !== false
})
.filter(
([key, value]) =>
!(key === 'size' && value === Kotti.Field.Size.MEDIUM),
)
.filter(([key]) => !(key === 'helpText' && component.hasHelpTextSlot))
.map(([key, value]) => {
switch (typeof value) {
case 'boolean':
return key
case 'string':
return `${key}="${value}"`
default:
return `:${key}="${JSON.stringify(value).replace(/"/g, "'")}"`
}
})
.map((prop) => `\t${prop}`),
...(component.validation === 'empty'
? []
: [
`\t:validator="(value) => ({ text: 'Some Validation Text', type: "${component.validation}" })"`,
]),
component.hasHelpTextSlot
? `>\n\t<template #helpText>\n\t\t<div>\n\t\t\tSlot Content\n\t\t</div>\n\t</template>\n</${component.name}>`
: '/>',
].join('\n')