Skip to content

Commit 079eeba

Browse files
sfxcodesfxcode
committed
feat(Outputs): Add demos
1 parent 17a0094 commit 079eeba

File tree

18 files changed

+657
-17
lines changed

18 files changed

+657
-17
lines changed

‎dev/components.d.ts‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -12,6 +12,7 @@ declare module 'vue' {
1212
PrimeEditor: typeof import('./components/demo/PrimeEditor.vue')['default']
1313
PrimeEditorInput: typeof import('./components/demo/PrimeEditorInput.vue')['default']
1414
PrimeInput: typeof import('./components/demo/PrimeInput.vue')['default']
15+
PrimeOutput: typeof import('./components/demo/PrimeOutput.vue')['default']
1516
PrimeSchemaEditor: typeof import('./components/demo/PrimeSchemaEditor.vue')['default']
1617
RouterLink: typeof import('vue-router')['RouterLink']
1718
RouterView: typeof import('vue-router')['RouterView']

‎dev/components/app/AppTopbar.vue‎

Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -80,6 +80,20 @@ const items = ref([
8080
class: 'ml-2',
8181
8282
items: [
83+
[
84+
{
85+
label: 'Outputs',
86+
items: [
87+
{ label: 'Output Text', icon: 'pi pi-fw pi-user-edit', route: '/outputs/outputText' },
88+
{ label: 'Output Number', icon: 'pi pi-fw pi-user-edit', route: '/outputs/outputNumber' },
89+
{ label: 'Output Date', icon: 'pi pi-fw pi-user-edit', route: '/outputs/outputDate' },
90+
{ label: 'Output Link', icon: 'pi pi-fw pi-user-edit', route: '/outputs/outputLink' },
91+
{ label: 'Output List', icon: 'pi pi-fw pi-user-edit', route: '/outputs/outputList' },
92+
{ label: 'Output Boolean', icon: 'pi pi-fw pi-user-edit', route: '/outputs/outputBoolean' },
93+
{ label: 'Output Duration', icon: 'pi pi-fw pi-user-edit', route: '/outputs/outputDuration' },
94+
],
95+
},
96+
],
8397
[
8498
{
8599
label: 'Styling',

‎dev/components/demo/PrimeInput.vue‎

Lines changed: 2 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,9 @@
11
<script setup lang='ts'>
2-
import { FormKitSchema } from '@formkit/vue'
32
import { ref } from 'vue'
43
import JsonEditorVue from 'json-editor-vue'
54
import { useToast } from 'primevue/usetoast'
65
import type { ToastMessageOptions } from 'primevue/toast'
6+
import { FormKitDataEdit } from 'my-library-components'
77
88
const props = defineProps<{
99
header: string
@@ -25,7 +25,6 @@ const formData = ref(props.data)
2525
const documentationLink = `https://primevue.org/${props.header.replace('Prime', '').toLowerCase()}`
2626
2727
async function submitHandler() {
28-
await new Promise(resolve => setTimeout(resolve, 2000))
2928
showMessage('success', 'Form Submitted ...', `${props.header} submitted successfully`)
3029
}
3130
</script>
@@ -39,19 +38,7 @@ async function submitHandler() {
3938
<slot />
4039
<div class="flex flex-wrap gap-8">
4140
<div class="min-w-30rem basis-1/3 md:basis-1/4">
42-
<FormKit
43-
id="form"
44-
v-model="formData"
45-
type="form"
46-
:submit-attrs="{
47-
inputClass: 'p-button p-component',
48-
}"
49-
@submit="submitHandler"
50-
>
51-
<FormKitSchema :schema="formSchema" :data="formData" />
52-
</FormKit>
53-
<h3>Data</h3>
54-
<pre>{{ formData }}</pre>
41+
<FormKitDataEdit :schema="formSchema" :data="formData" :debug-schema="false" :debug-data="true" @data-saved="submitHandler" />
5542
</div>
5643
<div class="">
5744
<Tabs>

‎dev/components/demo/PrimeOutput.vue‎

Lines changed: 177 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,177 @@
1+
<script setup lang='ts'>
2+
import { ref } from 'vue'
3+
import JsonEditorVue from 'json-editor-vue'
4+
import { FormKitDataView } from 'my-library-components'
5+
6+
const props = defineProps<{
7+
header: string
8+
schema: object
9+
data: object
10+
primeAttributes?: string
11+
customAttributes?: string
12+
}>()
13+
14+
const formSchema = ref(props.schema)
15+
const formData = ref(props.data)
16+
</script>
17+
18+
<template>
19+
<div>
20+
<Toast position="bottom-right" />
21+
<h2 class="text-color-[var(--primary-color)] pb-2">
22+
{{ header }}
23+
</h2>
24+
<slot />
25+
<div class="flex flex-wrap gap-8">
26+
<div class="min-w-30rem basis-1/3 md:basis-1/4">
27+
<FormKitDataView :schema="formSchema" :data="formData" :debug-schema="false" :debug-data="true" />
28+
</div>
29+
<div class="">
30+
<Tabs>
31+
<TabList>
32+
<Tab value="0">
33+
Supported Attributes
34+
</Tab>
35+
<Tab value="1">
36+
Schema Editor
37+
</Tab>
38+
<Tab value="2">
39+
Data Editor
40+
</Tab>
41+
</TabList>
42+
<TabPanel header="Schema">
43+
<pre>{{ formSchema }}</pre>
44+
</TabPanel>
45+
<TabPanels>
46+
<TabPanel v-if="primeAttributes || customAttributes" value="0">
47+
<h4>Base Attributes</h4>
48+
<div>
49+
<span>id, style, class</span>
50+
</div>
51+
<h4>PrimeVue Attributes</h4>
52+
<div class="mt-2">
53+
<span>{{ primeAttributes }}</span>
54+
</div>
55+
<h4 v-if="customAttributes">
56+
Custom Attributes
57+
</h4>
58+
<div>
59+
<span v-if="customAttributes">{{ customAttributes }}</span>
60+
</div>
61+
</TabPanel>
62+
<TabPanel value="1">
63+
<JsonEditorVue v-model="formSchema" v-bind="{ mode: 'tree' }" class="jse-theme-dark" />
64+
</TabPanel>
65+
<TabPanel value="2">
66+
<JsonEditorVue v-model="formData" v-bind="{ mode: 'tree' }" class="jse-theme-dark" />
67+
</TabPanel>
68+
</TabPanels>
69+
</Tabs>
70+
</div>
71+
</div>
72+
</div>
73+
</template>
74+
75+
<style lang='scss' scoped>
76+
.jse-theme-dark {
77+
/* over all fonts, sizes, and colors */
78+
--jse-theme-color: #383e42;
79+
--jse-theme-color-highlight: #687177;
80+
--jse-background-color: #1e1e1e;
81+
--jse-text-color: #d4d4d4;
82+
83+
/* main, menu, modal */
84+
--jse-main-border: 1px solid #4f4f4f;
85+
--jse-menu-color: #fff;
86+
--jse-modal-background: #2f2f2f;
87+
--jse-modal-overlay-background: rgba(0, 0, 0, 0.5);
88+
--jse-modal-code-background: #2f2f2f;
89+
90+
/* tooltip in text mode */
91+
--jse-tooltip-color: var(--jse-text-color);
92+
--jse-tooltip-background: #4b4b4b;
93+
--jse-tooltip-border: 1px solid #737373;
94+
--jse-tooltip-action-button-color: inherit;
95+
--jse-tooltip-action-button-background: #737373;
96+
97+
/* panels: navigation bar, gutter, search box */
98+
--jse-panel-background: #333333;
99+
--jse-panel-background-border: 1px solid #464646;
100+
--jse-panel-color: var(--jse-text-color);
101+
--jse-panel-color-readonly: #737373;
102+
--jse-panel-border: 1px solid #3c3c3c;
103+
--jse-panel-button-color-highlight: #e5e5e5;
104+
--jse-panel-button-background-highlight: #464646;
105+
106+
/* navigation-bar */
107+
--jse-navigation-bar-background: #656565;
108+
--jse-navigation-bar-background-highlight: #7e7e7e;
109+
--jse-navigation-bar-dropdown-color: var(--jse-text-color);
110+
111+
/* context menu */
112+
--jse-context-menu-background: #4b4b4b;
113+
--jse-context-menu-background-highlight: #595959;
114+
--jse-context-menu-separator-color: #595959;
115+
--jse-context-menu-color: var(--jse-text-color);
116+
--jse-context-menu-button-background: #737373;
117+
--jse-context-menu-button-background-highlight: #818181;
118+
--jse-context-menu-button-color: var(--jse-context-menu-color);
119+
120+
/* contents: json key and values */
121+
--jse-key-color: #9cdcfe;
122+
--jse-value-color: var(--jse-text-color);
123+
--jse-value-color-number: #b5cea8;
124+
--jse-value-color-boolean: #569cd6;
125+
--jse-value-color-null: #569cd6;
126+
--jse-value-color-string: #ce9178;
127+
--jse-value-color-url: #ce9178;
128+
--jse-delimiter-color: #949494;
129+
--jse-edit-outline: 2px solid var(--jse-text-color);
130+
131+
/* contents: selected or hovered */
132+
--jse-selection-background-color: #464646;
133+
--jse-selection-background-light-color: #333333;
134+
--jse-hover-background-color: #343434;
135+
--jse-active-line-background-color: rgba(255, 255, 255, 0.06);
136+
--jse-search-match-background-color: #343434;
137+
138+
/* contents: section of collapsed items in an array */
139+
--jse-collapsed-items-background-color: #333333;
140+
--jse-collapsed-items-selected-background-color: #565656;
141+
--jse-collapsed-items-link-color: #b2b2b2;
142+
--jse-collapsed-items-link-color-highlight: #ec8477;
143+
144+
/* contents: highlighting of search results */
145+
--jse-search-match-color: #724c27;
146+
--jse-search-match-outline: 1px solid #966535;
147+
--jse-search-match-active-color: #9f6c39;
148+
--jse-search-match-active-outline: 1px solid #bb7f43;
149+
150+
/* contents: inline tags inside the JSON document */
151+
--jse-tag-background: #444444;
152+
--jse-tag-color: #bdbdbd;
153+
154+
/* controls in modals: inputs, buttons, and `a` */
155+
--jse-input-background: #3d3d3d;
156+
--jse-input-border: var(--jse-main-border);
157+
--jse-button-background: #808080;
158+
--jse-button-background-highlight: #7a7a7a;
159+
--jse-button-color: #e0e0e0;
160+
--jse-a-color: #55abff;
161+
--jse-a-color-highlight: #4387c9;
162+
163+
/* svelte-select */
164+
--background: #3d3d3d;
165+
--border: 1px solid #4f4f4f;
166+
--listBackground: #3d3d3d;
167+
--itemHoverBG: #505050;
168+
--multiItemBG: #5b5b5b;
169+
--inputColor: #d4d4d4;
170+
--multiClearBG: #8a8a8a;
171+
--listShadow: 0 2px 6px 0 rgba(0, 0, 0, 0.24);
172+
173+
/* color picker */
174+
--jse-color-picker-background: #656565;
175+
--jse-color-picker-border-box-shadow: #8c8c8c 0 0 0 1px;
176+
}
177+
</style>

‎dev/locales/de.json‎

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,11 @@
1+
{
2+
"welcome": "Willkommen",
3+
"save": "Speichern",
4+
"search": "Suchen",
5+
"formkit": {
6+
"prime": {
7+
"true": "Ja",
8+
"false": "Nein"
9+
}
10+
}
11+
}

‎dev/locales/en.json‎

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,11 @@
1+
{
2+
"welcome": "Welcome",
3+
"save": "Save",
4+
"search": "Search",
5+
"formkit": {
6+
"prime": {
7+
"true": "Yes",
8+
"false": "No"
9+
}
10+
}
11+
}

‎dev/modules/formkit.ts‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@ import { defaultConfig, plugin } from '@formkit/vue'
22
import { createAutoAnimatePlugin } from '@formkit/addons'
33

44
import { de, en } from '@formkit/i18n'
5-
import { primeInputs } from 'my-library/definitions'
5+
import { primeInputs, primeOutputs } from 'my-library/definitions'
66
import { addPrimeAsteriskPlugin } from 'my-library/plugins'
77
import type { UserModule } from '@/types'
88

@@ -11,7 +11,7 @@ export const install: UserModule = ({ app }) => {
1111
locales: { de, en },
1212
// Define the active locale
1313
locale: 'en',
14-
inputs: primeInputs,
14+
inputs: { ...primeInputs, ...primeOutputs },
1515
plugins: [
1616
createAutoAnimatePlugin(
1717
{

0 commit comments

Comments
 (0)