Kristaps Fabians Geikins
f2d7493c2a
* stuff copied over, but aint workin * various fixes * vscode settings * trigger deploy * trigger deploy
80 lines
2.2 KiB
Vue
80 lines
2.2 KiB
Vue
<template>
|
|
<form class="flex flex-col space-y-4 form-json-form">
|
|
<JsonForms
|
|
ref="internalRef"
|
|
:renderers="renderers"
|
|
:schema="finalSchema"
|
|
:uischema="finalUiSchema"
|
|
:data="data"
|
|
@change="onChange"
|
|
/>
|
|
</form>
|
|
</template>
|
|
<script setup lang="ts">
|
|
import type { JsonSchema, UISchemaElement } from '@jsonforms/core'
|
|
import type { JsonFormsChangeEvent } from '@jsonforms/vue'
|
|
import { JsonForms } from '@jsonforms/vue'
|
|
import type { Nullable, Optional } from '@speckle/shared'
|
|
import { omit } from 'lodash-es'
|
|
import { useForm } from 'vee-validate'
|
|
import { renderers } from '~/lib/form/jsonRenderers'
|
|
|
|
type DataType = Record<string, unknown>
|
|
|
|
const emit = defineEmits<(e: 'change', val: JsonFormsChangeEvent) => void>()
|
|
|
|
const props = defineProps<{
|
|
schema: JsonSchema
|
|
uiSchema?: UISchemaElement
|
|
data?: DataType
|
|
}>()
|
|
|
|
const { validate } = useForm()
|
|
|
|
const internalRef = ref<Nullable<{ jsonforms: { core: JsonFormsChangeEvent } }>>(null)
|
|
// const data = ref({})
|
|
|
|
const finalSchema = computed(() => {
|
|
const base = props.schema
|
|
return omit(base, ['$schema', '$id'])
|
|
})
|
|
|
|
const autoGeneratedUiSchema = computed(() => {
|
|
const properties = Object.keys(props.schema.properties || {})
|
|
return {
|
|
type: 'VerticalLayout',
|
|
elements: properties.map((p) => ({
|
|
type: 'Control',
|
|
scope: `#/properties/${p}`
|
|
}))
|
|
}
|
|
})
|
|
const finalUiSchema = computed(() => props.uiSchema || autoGeneratedUiSchema.value)
|
|
|
|
const onChange = async (e: JsonFormsChangeEvent) => {
|
|
// console.log(JSON.parse(JSON.stringify(e)))
|
|
// NOTE: setting data.value causes trigger again
|
|
// data.value = e.data as DataType
|
|
await validate({ mode: 'force' })
|
|
emit('change', e)
|
|
}
|
|
|
|
const getFormState = (): Optional<JsonFormsChangeEvent> =>
|
|
internalRef.value?.jsonforms.core
|
|
? ({
|
|
// eslint-disable-next-line @typescript-eslint/no-unsafe-assignment
|
|
data: internalRef.value.jsonforms.core.data,
|
|
errors: internalRef.value.jsonforms.core.errors
|
|
} as JsonFormsChangeEvent)
|
|
: undefined
|
|
|
|
defineExpose({ getFormState })
|
|
</script>
|
|
<style lang="postcss">
|
|
.form-json-form {
|
|
.vertical-layout {
|
|
@apply space-y-4;
|
|
}
|
|
}
|
|
</style>
|