Skip to content

Commit 28c5859

Browse files
albanmalbanm
committed
docs: work on components page
1 parent e9f2ce9 commit 28c5859

File tree

8 files changed

+263
-9
lines changed

8 files changed

+263
-9
lines changed

‎doc/components/comp-list-item.vue‎

Lines changed: 51 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,51 @@
1+
<template>
2+
<v-list-item class="my-2 px-2">
3+
<v-list-item-title>
4+
<strong>{{ comp.name }}</strong>
5+
</v-list-item-title>
6+
<v-list-item-subtitle
7+
class="my-2"
8+
>
9+
<p
10+
v-if="compCharacteristics.length"
11+
class="mb-2"
12+
>
13+
{{ compCharacteristics.join(' - ') }}
14+
</p>
15+
16+
<comp-schema
17+
v-if="comp.schema"
18+
:schema="comp.schema"
19+
name="specific properties"
20+
/>
21+
</v-list-item-subtitle>
22+
</v-list-item>
23+
</template>
24+
25+
<script setup>
26+
import { VCard, VList, VListItem, VListItemTitle, VListItemSubtitle, VDivider } from 'vuetify/components'
27+
import { computed } from 'vue'
28+
29+
const { comp } = defineProps({
30+
comp: {
31+
/** @type {import('vue').PropType<import('@json-layout/vocabulary').ComponentInfo>} */
32+
type: Object,
33+
required: true
34+
}
35+
})
36+
37+
const compCharacteristics = computed(() => {
38+
if (comp.name === 'none') return []
39+
/** @type {string[]} */
40+
const characteristics = []
41+
if (comp.composite) characteristics.push('composite')
42+
else characteristics.push('simple')
43+
if (comp.itemsBased) characteristics.push('items based')
44+
if (comp.multipleCompat) characteristics.push('array compatible')
45+
if (comp.focusable) characteristics.push('focusable')
46+
if (comp.emitsBlur) characteristics.push('emits blur event')
47+
if (comp.emitsBlur) characteristics.push('emits blur event')
48+
if (comp.shouldDebounce) characteristics.push('can be debounced')
49+
return characteristics
50+
})
51+
</script>

‎doc/components/comp-list.vue‎

Lines changed: 29 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,29 @@
1+
<template>
2+
<v-card variant="flat">
3+
<v-list
4+
:lines="false"
5+
>
6+
<v-divider />
7+
<template
8+
v-for="comp in components"
9+
:key="comp.name"
10+
>
11+
<comp-list-item :comp="comp" />
12+
<v-divider />
13+
</template>
14+
</v-list>
15+
</v-card>
16+
</template>
17+
18+
<script setup>
19+
import { VCard, VList, VDivider } from 'vuetify/components'
20+
21+
defineProps({
22+
components: {
23+
/** @type {import('vue').PropType<import('@json-layout/vocabulary').ComponentInfo[]>} */
24+
type: Array,
25+
required: true
26+
}
27+
})
28+
29+
</script>

‎doc/components/comp-schema.vue‎

Lines changed: 77 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,77 @@
1+
<template>
2+
<v-row dense>
3+
<v-col>
4+
<v-btn
5+
variant="text"
6+
class="text-none"
7+
:append-icon="show ? 'mdi-chevron-up' : 'mdi-chevron-down'"
8+
@click="show = !show"
9+
>
10+
{{ name }}
11+
</v-btn>
12+
</v-col>
13+
</v-row>
14+
<code-block
15+
v-if="show"
16+
language="yaml"
17+
class="pl-6"
18+
>
19+
<pre>{{ code }}</pre>
20+
</code-block>
21+
</template>
22+
23+
<script setup>
24+
import { VBtn, VRow, VCol } from 'vuetify/components'
25+
import { computed, ref } from 'vue'
26+
import yaml from 'yaml'
27+
28+
const props = defineProps({
29+
name: {
30+
type: String,
31+
required: true
32+
},
33+
schema: {
34+
type: Object,
35+
required: true
36+
}
37+
})
38+
39+
const show = ref(false)
40+
41+
const escapeRegExp = (/** @type {string} */str) => str.replace(/[-[\]/{}()*+?.\\^$|]/g, '\\$&')
42+
43+
const removeRegexps = ['type: object', 'additionalProperties: false']
44+
.map(r => new RegExp(escapeRegExp(r) + '(\\s*)', 'g'))
45+
/** @type {[string, string][]} */
46+
const refsStrings = [
47+
['$ref: https://json-layout.github.io/normalized-layout-keyword#/$defs/expression', 'Expression'],
48+
['$ref: "#/$defs/expression"', 'Expression'],
49+
['$ref: "#/$defs/state-node-options-base"', 'Options'],
50+
['$ref: "#/$defs/cols-obj"', 'Responsive cols'],
51+
['$ref: "#/$defs/state-node-props-lib"', 'Vuetify props'],
52+
['$ref: "#/$defs/state-node-slots-lib"', 'Vuetify slots'],
53+
['$ref: "#/$defs/slot"', 'Slot'],
54+
['$ref: "#/$defs/children"', 'Children'],
55+
['$ref: "#/$defs/child-ref"', 'Child reference'],
56+
['$ref: "#/$defs/child-composite"', 'Child info'],
57+
['$ref: "#/$defs/select-items"', 'Select items'],
58+
['$ref: "#/$defs/get-items"', 'Get select items']
59+
]
60+
/** @type {[RegExp, string][]} */
61+
const replacementRegexps = refsStrings.map(r => ([new RegExp('(\\s*)' + escapeRegExp(r[0]), 'g'), ' ' + r[1]]))
62+
// removeRegexps.push(/^\s*$/g)
63+
// const emptyLinesRegexp = /^\s*$/g
64+
65+
const code = computed(() => {
66+
const schema = { ...props.schema.properties }
67+
delete schema.comp
68+
let code = yaml.stringify(schema)
69+
for (const r of removeRegexps) {
70+
code = code.replace(r, '')
71+
}
72+
for (const r of replacementRegexps) {
73+
code = code.replace(r[0], r[1])
74+
}
75+
return code
76+
})
77+
</script>

‎doc/layouts/default.vue‎

Lines changed: 9 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -46,21 +46,26 @@
4646
Configuration
4747
</v-list-item-title>
4848
</v-list-item>
49-
<v-list-item to="/expressions">
49+
<v-list-item to="/editor">
5050
<v-list-item-title>
51-
Expressions
51+
Editor
5252
</v-list-item-title>
5353
</v-list-item>
54-
<v-list-item to="/editor">
54+
<v-list-item to="/components">
5555
<v-list-item-title>
56-
Editor
56+
Components
5757
</v-list-item-title>
5858
</v-list-item>
5959
<v-list-item to="/plugins">
6060
<v-list-item-title>
6161
Plugins
6262
</v-list-item-title>
6363
</v-list-item>
64+
<v-list-item to="/expressions">
65+
<v-list-item-title>
66+
Expressions
67+
</v-list-item-title>
68+
</v-list-item>
6469
</v-list>
6570

6671
<v-list

‎doc/pages/components.vue‎

Lines changed: 91 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,91 @@
1+
<!-- eslint-disable vue/no-v-html -->
2+
<template>
3+
<v-container>
4+
<h1 class="text-h2 mb-8">
5+
{{ title }}
6+
</h1>
7+
8+
<v-alert
9+
type="warning"
10+
variant="outlined"
11+
class="mb-8"
12+
>
13+
This page describes the annotation system of json-schema for Vjsf in a somewhat technical way.
14+
For a more intuitive approach please explore the examples.
15+
</v-alert>
16+
17+
<h2 class="text-h4 mb-6">
18+
Vocabulary
19+
</h2>
20+
21+
<p class="mb-2">
22+
The json schema provided to Vjsf can be enriched using the <code>layout keyword</code>.
23+
This keyword is formally defined <a href="https://github.com/json-layout/json-layout/blob/main/vocabulary/src/normalized-layout/schema.json">here</a>.
24+
It is automatically normalized for mor efficient processing, the normalized version is defined <a href="https://github.com/json-layout/json-layout/blob/main/vocabulary/src/normalized-layout/schema.json">here</a>.
25+
</p>
26+
27+
<p class="mb-2">
28+
A default component is automatically attributed to each property in the schema, it can be overwritten using <code>layout=component name</code> or <code>layout.comp=component name</code>.
29+
The <code>layout keyword</code> content varies depending on the component.
30+
</p>
31+
32+
<h2 class="text-h4 mb-6">
33+
Common component properties
34+
</h2>
35+
36+
<p class="mb-2">
37+
These properties are shared by multiple components depending on their characteristics.
38+
</p>
39+
40+
<comp-schema
41+
:schema="normalizedLayoutSchema['$defs']['base-comp-object']"
42+
name="base component properties"
43+
/>
44+
<comp-schema
45+
:schema="normalizedLayoutSchema['$defs']['composite-comp-object'].allOf[1]"
46+
name="composite component properties"
47+
/>
48+
<comp-schema
49+
:schema="normalizedLayoutSchema['$defs']['simple-comp-object'].allOf[1]"
50+
name="simple component properties (not composite)"
51+
/>
52+
<comp-schema
53+
:schema="normalizedLayoutSchema['$defs']['focusable-comp-object'].allOf[1]"
54+
name="focusable component properties"
55+
/>
56+
<comp-schema
57+
:schema="normalizedLayoutSchema['$defs']['items-based-comp-object'].allOf[1]"
58+
name="items based component properties (for selection controls)"
59+
/>
60+
<comp-schema
61+
:schema="normalizedLayoutSchema['$defs']['multiple-compat-comp-object'].allOf[1]"
62+
name="array compatible component properties"
63+
/>
64+
65+
<h2 class="text-h4 my-6">
66+
Standard components
67+
</h2>
68+
<comp-list :components="standardComponents" />
69+
70+
<h2 class="text-h4 my-6">
71+
Plugin components
72+
</h2>
73+
<comp-list :components="pluginComponents" />
74+
</v-container>
75+
</template>
76+
77+
<script setup>
78+
import { VContainer, VAlert } from 'vuetify/components'
79+
import { standardComponents, normalizedLayoutSchema } from '@json-layout/vocabulary'
80+
import pack from '../../package.json'
81+
import markdown from '@koumoul/vjsf-markdown'
82+
83+
const title = 'Components'
84+
85+
useHead({
86+
title: 'VJSF - ' + title
87+
})
88+
89+
const vocabVersion = pack.devDependencies['@json-layout/vocabulary']
90+
const pluginComponents = [markdown.info]
91+
</script>

‎doc/pages/index.vue‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -19,7 +19,7 @@
1919
Based on <a
2020
href="https://vuejs.org/"
2121
class="text-primary text-decoration-none font-weight-medium"
22-
>Vue.js</a> / <a
22+
>Vue</a> / <a
2323
href="https://vuetifyjs.com/"
2424
class="text-primary text-decoration-none font-weight-medium"
2525
>Vuetify</a> / <a

‎package-lock.json‎

Lines changed: 4 additions & 3 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎package.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -22,7 +22,7 @@
2222
"homepage": "https://github.com/koumoul-dev/vuetify-jsonschema-form#readme",
2323
"devDependencies": {
2424
"@json-layout/core": "0.33.3",
25-
"@json-layout/vocabulary": "0.23.2",
25+
"@json-layout/vocabulary": "0.23.3",
2626
"@json-layout/examples": "0.21.0",
2727
"@commitlint/config-conventional": "^17.7.0",
2828
"@koumoul/gh-pages-multi": "^0.7.2",

0 commit comments

Comments
 (0)