Skip to content

Commit 161acba

Browse files
sfxcodesfxcode
committed
feat(demos): Add Data Demos including Slots
1 parent 248e3dc commit 161acba

File tree

6 files changed

+289
-0
lines changed

6 files changed

+289
-0
lines changed

‎dev/components/app/AppTopbar.vue‎

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -111,6 +111,15 @@ const items = ref([
111111
},
112112
],
113113
[
114+
{
115+
label: 'Data',
116+
items: [
117+
{ label: 'Edit', icon: 'pi pi-fw pi-user-edit', route: '/data/edit' },
118+
{ label: 'View', icon: 'pi pi-fw pi-user-edit', route: '/data/view' },
119+
{ label: 'Without Schema', icon: 'pi pi-fw pi-user-edit', route: '/data/withoutSchema' },
120+
{ label: 'Slots', icon: 'pi pi-fw pi-user-edit', route: '/data/slots' },
121+
],
122+
},
114123
{
115124
label: 'Samples',
116125
items: [

‎dev/components/demo/PrimeData.vue‎

Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,14 @@
1+
<script setup lang='ts'>
2+
defineProps<{
3+
header: string
4+
}>()
5+
</script>
6+
7+
<template>
8+
<div class="pt-8 max-w-120">
9+
<h2 class="text-color-[var(--p-primary-color)] pb-2">
10+
{{ header }}
11+
</h2>
12+
<slot />
13+
</div>
14+
</template>

‎dev/pages/data/Edit.vue‎

Lines changed: 115 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,115 @@
1+
<script setup lang="ts">
2+
import { FormKitDataEdit, useFormKitSchema } from 'my-library'
3+
import { useMessages } from '../../composables/messages'
4+
5+
const { addElement } = useFormKitSchema()
6+
const { t } = useI18n()
7+
const horizontal = ref(false)
8+
9+
const options = [
10+
{ label: 'Every page load', value: 'refresh' },
11+
{ label: 'Every hour', value: 'hourly' },
12+
{ label: 'Every day', value: 'daily' },
13+
]
14+
15+
const schema = reactive(
16+
[
17+
addElement('h2', ['Register ', '$email']),
18+
addElement('h3', 'Header Text H3'),
19+
{
20+
$formkit: 'primeInputText',
21+
name: 'email',
22+
label: 'Email',
23+
help: 'This will be used for your account.',
24+
validation: 'required|email',
25+
prefix: 'test',
26+
iconPrefix: 'pi pi-trash text-color-red',
27+
suffix: 'ich suffix net',
28+
iconSuffix: 'pi pi-trash text-color-blue',
29+
},
30+
{
31+
$formkit: 'primeTextarea',
32+
name: 'myText',
33+
label: 'Text',
34+
validation: '',
35+
rows: '3',
36+
},
37+
{
38+
$formkit: 'primeDatePicker',
39+
name: 'date',
40+
label: 'Date',
41+
},
42+
{
43+
$formkit: 'primeOutputLink',
44+
name: 'field',
45+
value: 'https://www.google.de',
46+
label: 'Output Link',
47+
iconSuffix: 'pi pi-check',
48+
suffix: 'This is the suffix',
49+
prefix: 'This is the prefix',
50+
iconPrefix: 'pi pi-trash',
51+
},
52+
addElement('h3', 'Password demo'),
53+
{
54+
$formkit: 'primePassword',
55+
name: 'password',
56+
label: 'Password',
57+
help: 'Enter your new password.',
58+
validation: 'required|length:5,16',
59+
feedback: true,
60+
outerClass: 'col-6',
61+
},
62+
{
63+
$formkit: 'primePassword',
64+
name: 'password_confirm',
65+
label: 'Confirm password',
66+
help: 'Enter your new password again.',
67+
validation: 'required|confirm',
68+
validationLabel: 'password confirmation',
69+
outerClass: 'col-6',
70+
},
71+
addElement('h3', 'Conditional Demo'),
72+
{
73+
$formkit: 'primeCheckbox',
74+
name: 'eu_citizen',
75+
id: 'eu',
76+
suffix: 'Are you a european citizen?',
77+
outerClass: 'col-6',
78+
},
79+
{
80+
$formkit: 'primeSelect',
81+
if: '$get(eu).value', // 👀 Oooo, conditionals!
82+
name: 'cookie_notice',
83+
label: 'Cookie notice frequency',
84+
optionLabel: 'label',
85+
optionValue: 'value',
86+
options,
87+
help: 'How often should we display a cookie notice?',
88+
outerClass: 'col-6',
89+
},
90+
],
91+
)
92+
93+
const data = ref({ name: 'Tom', date: new Date(), number: 2222.33, text1: 'Ein Text', text2: 'Lorem Ipsum' })
94+
95+
const { showSuccessMessage } = useMessages()
96+
async function submitHandler() {
97+
showSuccessMessage('Form Submitted ...', 'Form submitted successfully')
98+
}
99+
</script>
100+
101+
<template>
102+
<PrimeData header="FormKitDataEdit Demo">
103+
<div class="flex gap-2 mb-4">
104+
Horizontal <ToggleSwitch v-model="horizontal" />
105+
</div>
106+
<FormKitDataEdit
107+
:data="data"
108+
:schema="schema"
109+
:submit-label="t('save')"
110+
:form-class="horizontal ? 'form-horizontal' : ''"
111+
:debug-mode="true"
112+
@data-saved="submitHandler"
113+
/>
114+
</PrimeData>
115+
</template>

‎dev/pages/data/Slots.vue‎

Lines changed: 54 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,54 @@
1+
<script setup lang='ts'>
2+
import { FormKit } from '@formkit/vue'
3+
import { FormKitDataEdit } from 'my-library'
4+
import { useMessages } from '../../composables/messages'
5+
6+
const data = ref({ option: 'hourly' })
7+
8+
const options = [
9+
{ label: 'Every page load', value: 'refresh' },
10+
{ label: 'Every hour', value: 'hourly' },
11+
{ label: 'Every day', value: 'daily' },
12+
]
13+
14+
const { showSuccessMessage } = useMessages()
15+
async function submitHandler() {
16+
showSuccessMessage('Form Submitted ...', 'Form submitted successfully')
17+
}
18+
</script>
19+
20+
<template>
21+
<PrimeData header="Slot Demo">
22+
<FormKitDataEdit :data="data" :debug-data="true" @data-saved="submitHandler">
23+
<FormKit
24+
type="primeSelect"
25+
name="option"
26+
validation="required"
27+
label="Option"
28+
option-label="label"
29+
option-value="value"
30+
:options="options"
31+
>
32+
<template #option="slotProps">
33+
<div class="flex items-center">
34+
<div>Option: {{ slotProps.option.label }}</div>
35+
</div>
36+
</template>
37+
<template #header>
38+
<div class="p-4">
39+
Select Option:
40+
</div>
41+
</template>
42+
<template #footer>
43+
<div class="p-4 color-gray-400">
44+
More Options to come soon ...
45+
</div>
46+
</template>
47+
</FormKit>
48+
</FormKitDataEdit>
49+
</PrimeData>
50+
</template>
51+
52+
<style lang='scss' scoped>
53+
54+
</style>

‎dev/pages/data/View.vue‎

Lines changed: 53 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,53 @@
1+
<script setup lang="ts">
2+
import { FormKitDataView, useFormKitSchema } from 'my-library'
3+
4+
const { addElement } = useFormKitSchema()
5+
const horizontal = ref(false)
6+
const outputSchema = ref(
7+
[
8+
addElement('div', [
9+
{
10+
$formkit: 'primeOutputText',
11+
name: 'name',
12+
label: 'Name',
13+
class: 'text-[var(--p-primary-color)]',
14+
},
15+
{
16+
$formkit: 'primeOutputNumber',
17+
name: 'number',
18+
label: 'Number',
19+
format: 'short',
20+
},
21+
{
22+
$formkit: 'primeOutputDate',
23+
name: 'date',
24+
label: 'Date',
25+
format: 'rangeYear',
26+
},
27+
{
28+
$formkit: 'primeOutputText',
29+
name: 'text1',
30+
label: 'Text',
31+
},
32+
{
33+
$formkit: 'primeOutputText',
34+
name: 'text2',
35+
label: 'Text',
36+
validation: 'required',
37+
class: 'bg-[var(--p-primary-color)]',
38+
},
39+
40+
], { class: 'grid grid-cols-1 md:grid-cols-2 : xl:grid-cols-3 gap-1' }),
41+
],
42+
)
43+
const data = ref({ name: 'Tom', date: new Date(), number: 2222.33, text1: 'Ein Text', text2: 'Lorem Ipsum' })
44+
</script>
45+
46+
<template>
47+
<PrimeData header="FormKitDataView Demo">
48+
<div class="flex gap-2 mb-4">
49+
Horizontal <ToggleSwitch v-model="horizontal" />
50+
</div>
51+
<FormKitDataView :data="data" :schema="outputSchema" :debug-mode="true" :form-class="horizontal ? 'form-horizontal' : ''" />
52+
</PrimeData>
53+
</template>

‎dev/pages/data/WithoutSchema.vue‎

Lines changed: 44 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,44 @@
1+
<script setup lang='ts'>
2+
import { FormKit } from '@formkit/vue'
3+
import { FormKitDataEdit } from 'my-library'
4+
import { useMessages } from '../../composables/messages'
5+
6+
const data = ref({ option: 'hourly' })
7+
8+
const options = [
9+
{ label: 'Every page load', value: 'refresh' },
10+
{ label: 'Every hour', value: 'hourly' },
11+
{ label: 'Every day', value: 'daily' },
12+
]
13+
14+
const { showSuccessMessage } = useMessages()
15+
async function submitHandler() {
16+
showSuccessMessage('Form Submitted ...', 'Form submitted successfully')
17+
}
18+
</script>
19+
20+
<template>
21+
<PrimeData header="FormKitDataEdit without Schema Demo">
22+
<FormKitDataEdit :data="data" :debug-data="true" @data-saved="submitHandler">
23+
<FormKit
24+
type="primeInputText"
25+
name="name"
26+
validation="required"
27+
label="Name"
28+
/>
29+
<FormKit
30+
type="primeSelect"
31+
name="option"
32+
validation="required"
33+
label="Option"
34+
option-label="label"
35+
option-value="value"
36+
:options="options"
37+
/>
38+
</FormKitDataEdit>
39+
</PrimeData>
40+
</template>
41+
42+
<style lang='scss' scoped>
43+
44+
</style>

0 commit comments

Comments
 (0)