Skip to content

Commit 0c77410

Browse files
sfxcodesfxcode
committed
fix(InputEditor): options to JSON / code
1 parent edb8f95 commit 0c77410

File tree

7 files changed

+94
-55
lines changed

7 files changed

+94
-55
lines changed

‎dev/components/demo/PrimeSchemaEditor.vue‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,7 @@ import { useToast } from 'primevue/usetoast'
55
import type { ToastMessageOptions } from 'primevue/toast'
66
import { useClipboard } from '@vueuse/core'
77
8-
import { useInputEditorSchema } from 'my-library'
8+
import { useInputEditor } from 'my-library'
99
1010
const props = defineProps<{
1111
header: string
@@ -16,7 +16,7 @@ const props = defineProps<{
1616
// key is used for reflecting changes to the output - editorDataToSchema will remove schemaResultFormKey from generated schema output
1717
const schemaResultFormKey = ref(0)
1818
19-
const { editorDataToSchema, editorDataToJson, editorDataToCode } = useInputEditorSchema()
19+
const { editorDataToSchema, editorDataToJson, editorDataToCode } = useInputEditor()
2020
2121
const toast = useToast()
2222

‎dev/pages/samples/InputEditor.vue‎

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,8 @@
11
<script setup lang='ts'>
2-
import { useFormKitSchema, useInputEditorSchema } from 'my-library'
2+
import { useFormKitSchema, useInputEditor, useInputEditorSchema } from 'my-library'
33
4-
const { editorSchema, schemaToEditorData } = useInputEditorSchema()
4+
const { schemaToEditorData } = useInputEditor()
5+
const { editorSchema } = useInputEditorSchema()
56
const { addListGroupFunctions } = useFormKitSchema()
67
78
const data = reactive(schemaToEditorData({

‎package.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -72,7 +72,7 @@
7272
"dev": "vite serve dev",
7373
"dev:build": "vite build dev",
7474
"dev:preview": "vite preview dev",
75-
"release": "npm run lint && npm run build && changelogen --release && npm publish --access public && git push --follow-tags",
75+
"release": "npm run lint && npm run build && changelogen --patch --release && npm publish --access public && git push --follow-tags",
7676
"lint": "eslint ./src",
7777
"lint:fix": "eslint . --fix",
7878
"prepublishOnly": "pnpm build",

‎src/composables/index.ts‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,11 @@
11
import { useFormKitInput } from './useFormKitInput'
22
import { useFormKitSchema } from './useFormKitSchema'
3+
import { useInputEditor } from './useInputEditor'
34
import { useInputEditorSchema } from './useInputEditorSchema'
45

56
export {
67
useFormKitInput,
78
useFormKitSchema,
9+
useInputEditor,
810
useInputEditorSchema,
911
}

‎src/composables/useInputEditor.ts‎

Lines changed: 81 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,81 @@
1+
export function useInputEditor() {
2+
const primeInputWithOptionNames = ['CascadeSelect', 'Listbox', 'MultiSelect', 'RadioButton', 'Select', 'SelectButton', 'TreeSelect']
3+
4+
const primeInputNames = [...primeInputWithOptionNames, 'AutoComplete', 'Checkbox', 'ColorPicker', 'DatePicker', 'Editor', 'InputMask', 'InputNumber', 'InputOtp', 'InputText', 'Knob', 'Password', 'Rating', 'Slider', 'Textarea', 'ToggleButton', 'ToggleSwitch'].sort()
5+
6+
function editorDataToSchema(data: any): any {
7+
const formkitInput = data?._dollar_formkit
8+
let tempData = { }
9+
if (data.prime?.length > 0) {
10+
const mapped = data.prime?.map((entry) => {
11+
const key = entry.prime_key
12+
let value = entry.prime_value
13+
// some inputs require numbers
14+
if (formkitInput === 'primeInputOtp' && key === 'length')
15+
value = +value
16+
return [key, value]
17+
})
18+
tempData = Object.assign(...mapped.map(([key, val]) => ({ [key]: val })))
19+
}
20+
21+
const readonlyValue = data.readonly ? true : undefined
22+
const disabledValue = data.disabled ? true : undefined
23+
const preserveValue = data.preserve ? true : undefined
24+
25+
const defaultObject = { readonly: readonlyValue, disabled: disabledValue, preserve: preserveValue }
26+
27+
const undefinedObject = { prime: undefined, schemaResultFormKey: undefined, _dollar_formkit: undefined, slots: undefined, selectButton: undefined }
28+
29+
const useOptions = primeInputWithOptionNames.map(s => `prime${s}`).includes(formkitInput)
30+
31+
let result = {}
32+
if (useOptions)
33+
result = { ...data, $formkit: formkitInput, ...tempData, ...undefinedObject, ...defaultObject, optionLabel: 'label', optionValue: 'value' }
34+
else
35+
result = { ...data, $formkit: formkitInput, ...tempData, ...undefinedObject, ...defaultObject, options: undefined }
36+
37+
return result
38+
}
39+
40+
function dataToSchema(data: any): any {
41+
const schema = editorDataToSchema(data)
42+
if (schema.options) {
43+
const options = schema.options.map((o: object) => JSON.parse(JSON.stringify(o)))
44+
return { ...schema, options }
45+
}
46+
else {
47+
return schema
48+
}
49+
}
50+
51+
function editorDataToJson(data: any): string {
52+
return JSON.stringify(dataToSchema(data))
53+
}
54+
55+
function objectToString(data: any) {
56+
return `{${Object.entries(data).map(([key, value]) => {
57+
if (key === 'options' && value.length > 0) {
58+
let result = '['
59+
value.forEach(o => result = `${result + objectToString(o)}, `)
60+
return `${key}: ${result.substring(0, result.length - 2)}]`
61+
}
62+
else if (key === 'primeInputOtp') {
63+
return `${key}: ${value}`
64+
}
65+
else {
66+
return `${key}: '${value}'`
67+
}
68+
}).join()}}`
69+
}
70+
71+
function editorDataToObject(data: any): string {
72+
return objectToString(JSON.parse(editorDataToJson(data)))
73+
}
74+
75+
function schemaToEditorData(schema: any): any {
76+
const formkitInput = schema?.$formkit
77+
return { ...schema, _dollar_formkit: formkitInput }
78+
}
79+
80+
return { primeInputNames, editorDataToSchema, editorDataToJson, editorDataToCode: editorDataToObject, schemaToEditorData }
81+
}

‎src/composables/useInputEditorSchema.ts‎

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

34
export function useInputEditorSchema() {
45
const { addElement, addList, addListGroup, addComponent } = useFormKitSchema()
6+
const { primeInputNames } = useInputEditor()
57
function addFlexElement(children: any[]) {
68
return addElement('div', children, { style: 'max-width: 40rem;display: flex;gap: 1rem;' })
79
}
@@ -23,10 +25,6 @@ export function useInputEditorSchema() {
2325
], { style: 'padding-top: 1.5rem;' })
2426
}
2527

26-
const primeInputWithOptionNames = ['CascadeSelect', 'Listbox', 'MultiSelect', 'RadioButton', 'Select', 'SelectButton', 'TreeSelect']
27-
28-
const primeInputNames = [...primeInputWithOptionNames, 'AutoComplete', 'Checkbox', 'ColorPicker', 'DatePicker', 'Editor', 'InputMask', 'InputNumber', 'InputOtp', 'InputText', 'Knob', 'Password', 'Rating', 'Slider', 'Textarea', 'ToggleButton', 'ToggleSwitch'].sort()
29-
3028
function primeInputOptions(list: string[]) {
3129
return list.map((name: string) => {
3230
return { label: name, value: `prime${name}` }
@@ -54,50 +52,6 @@ export function useInputEditorSchema() {
5452

5553
]
5654

57-
function editorDataToSchema(data: any): any {
58-
const formkitInput = data?._dollar_formkit
59-
let tempData = { }
60-
if (data.prime?.length > 0) {
61-
const mapped = data.prime?.map((entry) => {
62-
const key = entry.prime_key
63-
let value = entry.prime_value
64-
// some inputs require numbers
65-
if (formkitInput === 'primeInputOtp' && key === 'length')
66-
value = +value
67-
return [key, value]
68-
})
69-
tempData = Object.assign(...mapped.map(([key, val]) => ({ [key]: val })))
70-
}
71-
72-
const readonlyValue = data.readonly ? true : undefined
73-
const disabledValue = data.disabled ? true : undefined
74-
const preserveValue = data.preserve ? true : undefined
75-
76-
const defaultObject = { readonly: readonlyValue, disabled: disabledValue, preserve: preserveValue }
77-
78-
const undefinedObject = { prime: undefined, schemaResultFormKey: undefined, _dollar_formkit: undefined, slots: undefined, selectButton: undefined }
79-
80-
const useOptions = primeInputWithOptionNames.map(s => `prime${s}`).includes(formkitInput)
81-
82-
if (useOptions)
83-
return { ...data, $formkit: formkitInput, ...tempData, ...undefinedObject, ...defaultObject, optionLabel: 'label', optionValue: 'value' }
84-
else
85-
return { ...data, $formkit: formkitInput, ...tempData, ...undefinedObject, ...defaultObject, options: undefined }
86-
}
87-
88-
function editorDataToJson(data: any): string {
89-
return JSON.stringify(editorDataToSchema(data))
90-
}
91-
92-
function editorDataToObject(data: any): string {
93-
return `{${Object.entries(JSON.parse(editorDataToJson(data))).map(([key, value]) => `${key}: '${value}'`).join()}}`
94-
}
95-
96-
function schemaToEditorData(schema: any): any {
97-
const formkitInput = schema?.$formkit
98-
return { ...schema, _dollar_formkit: formkitInput }
99-
}
100-
10155
function editorSchema(inputOptions: any[] = primeInputOptions(primeInputNames)) {
10256
return [
10357
addGridElement([
@@ -338,5 +292,5 @@ export function useInputEditorSchema() {
338292
]
339293
}
340294

341-
return { editorSchema, primeInputNames, primeInputOptions, editorDataToSchema, editorDataToJson, editorDataToCode: editorDataToObject, schemaToEditorData }
295+
return { editorSchema, primeInputOptions }
342296
}

‎src/index.ts‎

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

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

0 commit comments

Comments
 (0)