Skip to content

Commit 433439d

Browse files
sfxcodesfxcode
committed
refactor(editor): Use Columns
1 parent 3b1579a commit 433439d

File tree

15 files changed

+386
-370
lines changed

15 files changed

+386
-370
lines changed

‎dev/components/demo/PrimeInput.vue‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -38,7 +38,7 @@ async function submitHandler() {
3838
</h2>
3939
<slot />
4040
<div class="flex flex-wrap gap-8">
41-
<div class="min-w-30rem basis-1/3 md:basis-1/4">
41+
<div class="min-w-35rem basis-1/3 md:basis-1/4">
4242
<FormKitDataEdit :form-class="formClass" :schema="formSchema" :data="formData" :debug-schema="false" :debug-data="true" form-class="data-edit" @data-saved="submitHandler" />
4343
</div>
4444
<div class="">

‎dev/components/demo/PrimeOutput.vue‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -23,7 +23,7 @@ const formData = ref(props.data)
2323
</h2>
2424
<slot />
2525
<div class="flex flex-wrap gap-8">
26-
<div class="min-w-30rem basis-1/3 md:basis-1/4">
26+
<div class="min-w-35rem basis-1/3 md:basis-1/4">
2727
<FormKitDataView :schema="formSchema" :data="formData" :debug-schema="false" :debug-data="true" />
2828
</div>
2929
<div class="">

‎dev/components/demo/PrimeSchemaEditor.vue‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -61,8 +61,8 @@ function copyObject() {
6161
{{ header }}
6262
</h2>
6363
<slot />
64-
<div class="grid grid-cols-1 xl:grid-cols-2 gap-8">
65-
<div class="w-40rem basis-1/2 md:basis-1/3" mb-4>
64+
<div class="flex gap-12 flex-wrap">
65+
<div class="w-40rem">
6666
<h3>Create Formkit Input</h3>
6767
<FormKit
6868
v-model="formData"

‎dev/pages/samples/Grid.vue‎

Lines changed: 0 additions & 37 deletions
This file was deleted.

‎dev/pages/samples/InputEditor.vue‎

Lines changed: 9 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,15 +1,17 @@
11
<script setup lang='ts'>
2-
import { useFormKitSchema, useInputEditor, useInputEditorSchema } from 'my-library'
2+
import { useFormKitRepeater, useInputEditor, useInputEditorSchema } from 'my-library'
33
44
const { schemaToEditorData } = useInputEditor()
55
const { editorSchema } = useInputEditorSchema()
6-
const { addListGroupFunctions } = useFormKitSchema()
6+
const { addListGroupFunctions } = useFormKitRepeater()
77
8-
const data = reactive(schemaToEditorData({
9-
$formkit: 'primeInputText',
10-
name: 'field',
11-
options: [{ label: 'Option 1', value: 'option1' }, { label: 'Option 2', value: 'option2' }],
12-
}))
8+
const data = reactive(schemaToEditorData(
9+
{
10+
$formkit: 'primeInputText',
11+
name: 'field',
12+
options: [{ label: 'Option 1', value: 'option1' }, { label: 'Option 2', value: 'option2' }],
13+
},
14+
))
1315
1416
addListGroupFunctions(data)
1517
</script>

‎dev/pages/samples/Repeater.vue‎

Lines changed: 21 additions & 42 deletions
Original file line numberDiff line numberDiff line change
@@ -1,25 +1,8 @@
11
<script setup lang='ts'>
2-
import { useFormKitSchema } from 'my-library'
2+
import { useFormKitRepeater, useFormKitSchema } from 'my-library'
33
4-
const { addElement, addList, addListGroup, addComponent, addListGroupFunctions } = useFormKitSchema()
5-
function addFlexElement(children: any[]) {
6-
return addElement('div', children, { class: 'min-w-40rem flex gap-4' })
7-
}
8-
9-
function addGroupButtons() {
10-
const addButtonComponent = (onClick: string = '', label: string = '', icon: string = '', severity: string = '', render: string = 'true', styleClass: string = 'p-button-sm ml-2'): object => {
11-
return addComponent('Button', { onClick, label, icon, class: styleClass, severity }, render)
12-
}
13-
14-
return addElement('div', [
15-
addButtonComponent('$removeNode($node, $index)', '', 'pi pi-times', 'danger'),
16-
addButtonComponent('$copyNode($node, $index)', '', 'pi pi-plus'),
17-
addButtonComponent('$moveNodeUp($node, $index)', '', 'pi pi-arrow-up', 'secondary', '$index != 0'),
18-
addElement('span', [], { class: 'ml-2 mr-10' }, '$index == 0'),
19-
addButtonComponent('$moveNodeDown($node, $index)', '', 'pi pi-arrow-down', 'secondary', '$index < $node.value.length -1'),
20-
addElement('span', [], { class: 'ml-2 mr-10' }, '$index == $node.value.length -1'),
21-
], { class: 'pt-6' })
22-
}
4+
const { addElement, addList, addListGroup } = useFormKitSchema()
5+
const { addInsertButton, addGroupButtons, addListGroupFunctions } = useFormKitRepeater()
236
247
const data = ref()
258
@@ -39,31 +22,27 @@ const schema
3922
$formkit: 'primeInputText',
4023
label: 'Name',
4124
name: 'name',
25+
outerClass: 'col-6',
4226
},
43-
addElement('hr', [], { class: 'mt-4 mb-4' }),
27+
addElement('div', [], { class: 'mt-4' }),
4428
addList('attacks', [
45-
addFlexElement([
46-
addElement('div', ['Attacks'], { class: 'text-xl mb-2' }),
47-
addComponent('Button', { onClick: '$addNode($node)', label: 'Add', class: 'p-button-sm', icon: 'pi pi-plus' }, '$node.value.length == 0'),
29+
addElement('div', ['Attacks'], { class: 'text-xl' }),
30+
addInsertButton(),
31+
addListGroup([
32+
{
33+
$formkit: 'primeInputText',
34+
label: 'Name',
35+
name: 'name',
36+
outerClass: 'col-4',
37+
},
38+
{
39+
$formkit: 'primeInputText',
40+
label: 'Damage',
41+
name: 'damage',
42+
outerClass: 'col-2',
43+
},
44+
addGroupButtons(),
4845
]),
49-
addListGroup(
50-
[
51-
addFlexElement([
52-
{
53-
$formkit: 'primeInputText',
54-
label: 'Name',
55-
name: 'name',
56-
},
57-
{
58-
$formkit: 'primeInputText',
59-
label: 'Damage',
60-
name: 'damage',
61-
style: { width: '70px' },
62-
},
63-
addGroupButtons(),
64-
]),
65-
],
66-
),
6746
], true, 'true'),
6847
]
6948
</script>

‎dev/pages/styling/Grid.vue‎

Lines changed: 37 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -6,47 +6,69 @@ const schema
66
{
77
$formkit: 'primeInputText',
88
name: 'name',
9-
label: 'Styling by class',
9+
label: 'col-8',
1010
help: 'Required.',
1111
validation: 'required',
12-
outerClass: 'col-span-full md:col-span-8',
12+
outerClass: 'col-8',
1313
},
1414
{
1515
$formkit: 'primeInputText',
1616
name: 'name2',
17-
label: 'Styling by class',
18-
help: 'Required.',
19-
validation: 'required',
20-
outerClass: 'col-span-full md:col-span-4',
21-
17+
label: 'col-4',
18+
outerClass: 'col-4',
2219
},
2320
{
24-
$formkit: 'primeInputText',
21+
$formkit: 'primeInputNumber',
2522
name: 'name3',
26-
label: 'Styling by class',
23+
label: 'col-4',
24+
outerClass: 'col-4',
25+
26+
},
27+
28+
]
29+
30+
const outputSchema
31+
= [
32+
{
33+
$formkit: 'primeOutputText',
34+
name: 'name',
35+
label: 'col-9',
2736
help: 'Required.',
2837
validation: 'required',
29-
outerClass: 'col-span-full md:col-span-4',
38+
outerClass: 'col-9',
39+
},
40+
{
41+
$formkit: 'primeOutputText',
42+
name: 'name2',
43+
label: 'col-4',
44+
outerClass: 'col-4',
45+
},
46+
{
47+
$formkit: 'primeOutputNumber',
48+
name: 'name3',
49+
label: 'col-4',
50+
outerClass: 'col-4',
3051
3152
},
3253
3354
]
3455
35-
const data = { name: 'Some Label in Green', name2: 'Some Text in Green' }
56+
const data = { name: 'Hey Some Value', name2: 'Another value !', name3: 42 }
3657
</script>
3758

3859
<template>
3960
<h2 class="text-color-[var(--primary-color)]">
4061
Grid in Data Edit
4162
</h2>
42-
<div class="p-10">
43-
<FormKitDataEdit form-class="grid grid-cols-12 gap-4" actions-class="col-span-full" :schema="schema" :data="data" :debug-schema="false" :debug-data="false" />
63+
<h4>12 Column Grid used</h4>
64+
<div class="w-1/3">
65+
<FormKitDataEdit :schema="schema" :data="data" :debug-schema="false" :debug-data="false" />
4466
</div>
4567
<h2 class="text-color-[var(--primary-color)]">
4668
Grid in Data View
4769
</h2>
48-
<div class="p-10">
49-
<FormKitDataView form-class="grid grid-cols-12 gap-4" :schema="schema" :data="data" :debug-schema="false" :debug-data="false" />
70+
<div class="w-1/3">
71+
<FormKitDataView :schema="outputSchema" :data="data" :debug-schema="false" :debug-data="false" />
5072
</div>
5173
</template>
5274

‎src/composables/index.ts‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,14 +1,14 @@
1-
import { useFormKitIcon } from './useFormKitIcon'
21
import { useFormKitInput } from './useFormKitInput'
32
import { useFormKitSchema } from './useFormKitSchema'
3+
import { useFormKitRepeater } from './useFormKitRepeater'
44
import { useFormKitSection } from './useFormKitSection'
55
import { useInputEditor } from './useInputEditor'
66
import { useInputEditorSchema } from './useInputEditorSchema'
77
import { useOutputDuration } from './useOutputDuration'
88

99
export {
10-
useFormKitIcon,
1110
useFormKitInput,
11+
useFormKitRepeater,
1212
useFormKitSchema,
1313
useFormKitSection,
1414
useInputEditor,

‎src/composables/useFormKitIcon.ts‎

Lines changed: 0 additions & 17 deletions
This file was deleted.

‎src/composables/useFormKitRepeater.ts‎

Lines changed: 58 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,58 @@
1+
import { useFormKitSchema } from './useFormKitSchema'
2+
3+
export function useFormKitRepeater() {
4+
const { addElement, addComponent, addElementsInOuterDiv } = useFormKitSchema()
5+
6+
function addInsertButton(label: string = 'Add', innerClass: string = '', outerClass: string = '', buttonClass: string = 'p-button-sm', iconClass: string = 'pi pi-plus') {
7+
return addElementsInOuterDiv([
8+
addComponent('Button', { onClick: '$addNode($node)', label, class: buttonClass, icon: iconClass }, '$node.value.length == 0'),
9+
], innerClass, outerClass)
10+
}
11+
12+
function addListGroupFunctions(data: any, addNodeDefaultObject: object = {}) {
13+
const swapElements = (array: any[], index1: number, index2: number) => {
14+
array[index1] = array.splice(index2, 1, array[index1])[0]
15+
return array
16+
}
17+
18+
data.addNode = (parentNode: any) => (): void => {
19+
const newArray: any[] = [...parentNode.value, addNodeDefaultObject]
20+
parentNode.input(newArray, false)
21+
}
22+
data.removeNode = (parentNode: any, index: number) => (): void => {
23+
parentNode.input(parentNode._value.filter((_: any, i: number): boolean => i !== index), false)
24+
}
25+
data.moveNodeUp = (parentNode: any, index: number) => (): void => {
26+
const array: any[] = [...parentNode.value]
27+
if (index > 0)
28+
parentNode.input(swapElements(array, index - 1, index), false)
29+
}
30+
data.moveNodeDown = (parentNode: any, index: number) => (): void => {
31+
const array: any[] = [...parentNode.value]
32+
if (index < array.length - 1)
33+
parentNode.input(swapElements(array, index, index + 1), false)
34+
}
35+
data.copyNode = (parentNode: any, index: number) => (): void => {
36+
const obj: any = parentNode.value[index]
37+
const newArray: any[] = [...parentNode.value, { ...obj }]
38+
parentNode.input(newArray, false)
39+
}
40+
}
41+
42+
function addGroupButtons(innerClass: string = 'mt-1', outerClass: string = 'col-4', label: string = 'Actions', help: string = '', render: string = 'true') {
43+
const addButtonComponent = (onClick: string = '', label: string = '', icon: string = '', severity: string = '', render: string = 'true', styleClass: string = 'p-button-sm mr-2'): object => {
44+
return addComponent('Button', { onClick, label, icon, class: styleClass, severity }, render)
45+
}
46+
47+
return addElementsInOuterDiv([
48+
addButtonComponent('$removeNode($node, $index)', '', 'pi pi-times', 'danger'),
49+
addButtonComponent('$copyNode($node, $index)', '', 'pi pi-plus'),
50+
addButtonComponent('$moveNodeUp($node, $index)', '', 'pi pi-arrow-up', 'secondary', '$index != 0'),
51+
addElement('span', [], { class: 'mr-12' }, '$index == 0'),
52+
addButtonComponent('$moveNodeDown($node, $index)', '', 'pi pi-arrow-down', 'secondary', '$index < $node.value.length -1'),
53+
addElement('span', [], { class: 'mr-12' }, '$index == $node.value.length -1'),
54+
], innerClass, outerClass, label, help, render)
55+
}
56+
57+
return { addInsertButton, addGroupButtons, addListGroupFunctions }
58+
}

0 commit comments

Comments
 (0)