Skip to content

Commit 599f57b

Browse files
sfxcodesfxcode
committed
feat(schema): Input Editor from schema
1 parent 630d4b6 commit 599f57b

File tree

7 files changed

+262
-2
lines changed

7 files changed

+262
-2
lines changed

‎dev/components.d.ts‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,15 +1,16 @@
11
/* eslint-disable */
2-
/* prettier-ignore */
32
// @ts-nocheck
43
// Generated by unplugin-vue-components
54
// Read more: https://github.com/vuejs/core/pull/3399
65
export {}
76

7+
/* prettier-ignore */
88
declare module 'vue' {
99
export interface GlobalComponents {
1010
AppFooter: typeof import('./components/app/AppFooter.vue')['default']
1111
AppTopbar: typeof import('./components/app/AppTopbar.vue')['default']
1212
PrimeInput: typeof import('./components/demo/PrimeInput.vue')['default']
13+
PrimeSchemaEditor: typeof import('./components/demo/PrimeSchemaEditor.vue')['default']
1314
RouterLink: typeof import('vue-router')['RouterLink']
1415
RouterView: typeof import('vue-router')['RouterView']
1516
}

‎dev/components/app/AppTopbar.vue‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -95,6 +95,7 @@ const items = ref([
9595
{
9696
label: 'Samples',
9797
items: [
98+
{ label: 'Input Editor', icon: 'pi pi-fw pi-user-edit', route: '/samples/inputEditor' },
9899
{ label: 'Grid', icon: 'pi pi-fw pi-user-edit', route: '/samples/grid' },
99100
{ label: 'Repeater', icon: 'pi pi-fw pi-user-edit', route: '/samples/repeater' },
100101
],

‎dev/components/demo/PrimeSchemaEditor.vue‎

Lines changed: 92 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,92 @@
1+
<script setup lang='ts'>
2+
import { FormKitSchema } from '@formkit/vue'
3+
import { ref } from 'vue'
4+
import { useToast } from 'primevue/usetoast'
5+
import type { ToastMessageOptions } from 'primevue/toast'
6+
7+
import { useInputEditorSchema } from 'my-library'
8+
9+
const props = defineProps<{
10+
header: string
11+
schema: object
12+
data: object
13+
}>()
14+
15+
const form2 = ref(0)
16+
17+
const { editorDataToSchema, editorDataToJson, editorDataToCode } = useInputEditorSchema()
18+
19+
const toast = useToast()
20+
21+
function showMessage(severity: ToastMessageOptions['severity'], summary: string, detail: string) {
22+
toast.add({ severity, summary, detail, life: 2000 })
23+
}
24+
25+
const formSchema = ref(props.schema)
26+
const formData = reactive(props.data)
27+
28+
const data = ref({})
29+
30+
async function submitHandler() {
31+
showMessage('success', 'Form Submitted ...', 'Input creation completed successfully')
32+
data.value = { value: formData.value }
33+
form2.value += 1
34+
35+
console.log(editorDataToJson(formData))
36+
console.log(editorDataToCode(formData))
37+
}
38+
39+
async function submitHandler2() {
40+
41+
}
42+
43+
const schemaResult = computed(() => editorDataToSchema(formData))
44+
</script>
45+
46+
<template>
47+
<div>
48+
<Toast position="bottom-right" />
49+
<h2 class="text-color-[var(--primary-color)] pb-2">
50+
{{ header }}
51+
</h2>
52+
<slot />
53+
<div class="flex flex-wrap gap-4">
54+
<div class="min-w-30rem basis-1/2 md:basis-1/3">
55+
<h3>Create Formkit Prime Input</h3>
56+
<FormKit
57+
v-model="formData"
58+
type="form"
59+
:submit-attrs="{
60+
inputClass: 'p-button p-component',
61+
}"
62+
submit-label="Update Generated Input"
63+
@submit="submitHandler"
64+
>
65+
<FormKitSchema :schema="formSchema" :data="formData" />
66+
</FormKit>
67+
</div>
68+
<div class="">
69+
<h3>Generated Formkit Input Preview</h3>
70+
71+
<div :key="form2">
72+
<FormKit
73+
v-model="data"
74+
type="form"
75+
:submit-attrs="{
76+
inputClass: 'p-button p-component',
77+
}"
78+
@submit="submitHandler2"
79+
>
80+
<FormKitSchema :schema="schemaResult" :data="data" />
81+
</FormKit>
82+
<h3>Generated Formkit Schema</h3>
83+
<pre>{{ schemaResult }}</pre>
84+
</div>
85+
</div>
86+
</div>
87+
</div>
88+
</template>
89+
90+
<style lang='scss' scoped>
91+
92+
</style>

‎dev/pages/samples/InputEditor.vue‎

Lines changed: 26 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,26 @@
1+
<script setup lang='ts'>
2+
import { useInputEditorSchema } from 'my-library'
3+
4+
const { editorSchema, schemaToEditorData } = useInputEditorSchema()
5+
6+
const data1 = reactive(schemaToEditorData({
7+
$formkit: 'primeInputText',
8+
name: 'field',
9+
label: 'Some Label',
10+
help: 'Help Text.',
11+
}))
12+
13+
const data = JSON.parse('{"$formkit":"primeInputText","name":"field2","label":"Some Label","help":"Help Text."}')
14+
</script>
15+
16+
<template>
17+
<div>
18+
<PrimeSchemaEditor
19+
header="Prime Input Editor" :schema="editorSchema" :data="data"
20+
/>
21+
</div>
22+
</template>
23+
24+
<style lang='scss' scoped>
25+
26+
</style>

‎src/composables/index.ts‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,7 @@
11
import { useFormKitSchema } from './useFormKitSchema'
2+
import { useInputEditorSchema } from './useInputEditorSchema'
23

34
export {
45
useFormKitSchema,
6+
useInputEditorSchema,
57
}

‎src/composables/useInputEditorSchema.ts‎

Lines changed: 137 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,137 @@
1+
import { useFormKitSchema } from './useFormKitSchema'
2+
3+
export function useInputEditorSchema() {
4+
const { addElement } = useFormKitSchema()
5+
6+
const inputNames = ['AutoComplete', 'Calendar', 'CascadeSelect', 'Checkbox', 'Chips', 'ColorPicker', 'Dropdown', 'Editor', 'InputMask', 'InputNumber', 'InputOtp', 'InputSwitch', 'InputText']
7+
8+
const inputOptions = inputNames.map((name: string) => {
9+
return { label: name, value: `prime${name}` }
10+
})
11+
12+
function editorDataToSchema(data: any): any {
13+
const formkitInput = data?._dollar_formkit
14+
return { ...data, $formkit: formkitInput, _dollar_formkit: undefined, slots: undefined, showBasic: undefined, showBase: undefined, showValidation: undefined, showDisplay: undefined }
15+
}
16+
17+
function jsonDataToSchema(data: any): any {
18+
const formkitInput = data?._dollar_formkit
19+
return { ...data, $formkit: formkitInput, _dollar_formkit: undefined, slots: undefined, showBasic: undefined, showBase: undefined, showValidation: undefined, showDisplay: undefined }
20+
}
21+
22+
function editorDataToJson(data: any): string {
23+
return JSON.stringify(editorDataToSchema(data))
24+
}
25+
26+
function editorDataToCode(data: any): string {
27+
return `{${Object.entries(JSON.parse(editorDataToJson(data))).map(([key, value]) => `${key}: '${value}'`).join()}}`
28+
}
29+
30+
function schemaToEditorData(schema: any): any {
31+
const formkitInput = schema?.$formkit
32+
return { ...schema, _dollar_formkit: formkitInput }
33+
}
34+
35+
const editorSchema
36+
= [
37+
addElement('div', [
38+
{
39+
$formkit: 'primeCheckbox',
40+
name: 'showBase',
41+
id: 'showBase',
42+
value: true,
43+
labelLeft: 'Base',
44+
},
45+
{
46+
$formkit: 'primeCheckbox',
47+
name: 'showValidation',
48+
id: 'showValidation',
49+
labelLeft: 'Validation',
50+
},
51+
{
52+
$formkit: 'primeCheckbox',
53+
name: 'showDisplay',
54+
id: 'showDisplay',
55+
labelLeft: 'Display',
56+
},
57+
], { class: 'flex gap-4' }),
58+
{
59+
$formkit: 'primeDropdown',
60+
id: 'inputSelection',
61+
name: '_dollar_formkit',
62+
label: 'Prime Input',
63+
value: 'primeInputText',
64+
optionLabel: 'label',
65+
optionValue: 'value',
66+
options: inputOptions,
67+
},
68+
addElement('h4', ['Base'], {}, '$get(showBase).value'),
69+
70+
{
71+
$formkit: 'primeInputText',
72+
if: '$get(showBase).value',
73+
name: 'name',
74+
label: 'Field Name',
75+
validation: 'required',
76+
},
77+
{
78+
$formkit: 'primeInputText',
79+
if: '$get(showBase).value',
80+
name: 'value',
81+
label: 'Input Value',
82+
},
83+
{
84+
$formkit: 'primeInputText',
85+
if: '$get(showBase).value',
86+
name: 'id',
87+
label: 'Input ID',
88+
},
89+
{
90+
$formkit: 'primeInputText',
91+
if: '$get(showBase).value',
92+
name: 'label',
93+
label: 'Input Label',
94+
},
95+
{
96+
$formkit: 'primeInputText',
97+
if: '$get(showBase).value',
98+
name: 'help',
99+
label: 'Input Help',
100+
},
101+
addElement('h4', ['Validation'], {}, '$get(showValidation).value'),
102+
{
103+
$formkit: 'primeInputText',
104+
if: '$get(showValidation).value',
105+
name: 'validation',
106+
label: 'Field Validation',
107+
},
108+
{
109+
$formkit: 'primeInputText',
110+
if: '$get(showValidation).value',
111+
name: 'validation-visibility',
112+
value: 'blur',
113+
label: 'Field Validation Visibility',
114+
},
115+
addElement('h4', ['Display'], {}, '$get(showDisplay).value'),
116+
{
117+
$formkit: 'primeInputText',
118+
if: '$get(showDisplay).value',
119+
name: 'if',
120+
label: 'Should Render',
121+
},
122+
{
123+
$formkit: 'primeInputText',
124+
if: '$get(showDisplay).value',
125+
name: 'style',
126+
label: 'Input Style',
127+
},
128+
{
129+
$formkit: 'primeInputText',
130+
if: '$get(showDisplay).value',
131+
name: 'class',
132+
label: 'Input StyleClass',
133+
},
134+
]
135+
136+
return { editorSchema, inputNames, inputOptions, editorDataToSchema, jsonDataToSchema, editorDataToJson, editorDataToCode, schemaToEditorData }
137+
}

‎src/index.ts‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,8 @@
1-
import { useFormKitSchema } from './composables'
1+
import { useFormKitSchema, useInputEditorSchema } from './composables'
22
import { primeInputs } from './definitions'
33

44
export {
55
useFormKitSchema,
6+
useInputEditorSchema,
67
primeInputs,
78
}

0 commit comments

Comments
 (0)