fix(demo): JsonEditorVue Live Update was broken

Author: sfxcode

dev/components/demo/PrimeInput.vue

@@ -25,7 +25,7 @@ const formSchema = ref(props.schema)
 const formData = ref(props.data)
 
 const documentationLink = `https://primevue.org/${props.header.replace('Prime', '').toLowerCase()}`
-
+const inputClass = 'p-button p-component p-formkit-button'
 async function submitHandler() {
   showMessage('success', 'Form Submitted ...', `${props.header} submitted successfully`)
 }
@@ -46,6 +46,10 @@ async function submitHandler() {
             v-model="formData"
             :form-class="formClass"
             type="form"
+            submit-label="Save"
+            :submit-attrs="{
+              inputClass,
+            }"
             @submit="submitHandler"
           >
             <FormKitSchema :schema="formSchema" :data="formData" />
@@ -57,17 +61,23 @@ async function submitHandler() {
         <Tabs value="0">
           <TabList>
             <Tab value="0">
-              Supported Attributes
-            </Tab>
-            <Tab value="1">
               Schema Editor
             </Tab>
-            <Tab value="2">
+            <Tab value="1">
               Data Editor
             </Tab>
+            <Tab v-if="primeAttributes || customAttributes" value="2">
+              Supported Attributes
+            </Tab>
           </TabList>
           <TabPanels>
-            <TabPanel v-if="primeAttributes || customAttributes" value="0">
+            <TabPanel value="0">
+              <JsonEditorVue v-model="formSchema" v-bind="{ mode: 'tree' }" class="jse-theme-dark" />
+            </TabPanel>
+            <TabPanel value="1">
+              <JsonEditorVue v-model="formData" v-bind="{ mode: 'tree' }" class="jse-theme-dark" />
+            </TabPanel>
+            <TabPanel v-if="primeAttributes || customAttributes" value="2">
               <h4>Base Attributes</h4>
               <div>
                 <span>disabled, readonly, style, class, tabindex, ariaLabel, ariaLabelledby, pt, ptOptions, unstyled</span>
@@ -86,12 +96,6 @@ async function submitHandler() {
                 <span v-if="customAttributes">{{ customAttributes }}</span>
               </div>
             </TabPanel>
-            <TabPanel value="1">
-              <JsonEditorVue v-model="formSchema" v-bind="{ }" class="jse-theme-dark" />
-            </TabPanel>
-            <TabPanel value="2">
-              <JsonEditorVue v-model="formData" v-bind="{ }" class="jse-theme-dark" />
-            </TabPanel>
           </TabPanels>
         </Tabs>
       </div>

dev/components/demo/PrimeOutput.vue

@@ -40,37 +40,18 @@ const formData = ref(props.data)
         <Tabs value="0">
           <TabList>
             <Tab value="0">
-              Supported Attributes
-            </Tab>
-            <Tab value="1">
               Schema Editor
             </Tab>
-            <Tab value="2">
+            <Tab value="1">
               Data Editor
             </Tab>
           </TabList>
           <TabPanels>
-            <TabPanel v-if="primeAttributes || customAttributes" value="0">
-              <h4>Base Attributes</h4>
-              <div>
-                <span>id, style, class</span>
-              </div>
-              <h4>PrimeVue Attributes</h4>
-              <div class="mt-2">
-                <span>{{ primeAttributes }}</span>
-              </div>
-              <h4 v-if="customAttributes">
-                Custom Attributes
-              </h4>
-              <div>
-                <span v-if="customAttributes">{{ customAttributes }}</span>
-              </div>
+            <TabPanel value="0">
+              <JsonEditorVue v-model="formSchema" v-bind="{ mode: 'tree' }" class="jse-theme-dark" />
             </TabPanel>
             <TabPanel value="1">
-              <JsonEditorVue v-model="formSchema" v-bind="{ }" class="jse-theme-dark" />
-            </TabPanel>
-            <TabPanel value="2">
-              <JsonEditorVue v-model="formData" v-bind="{ }" class="jse-theme-dark" />
+              <JsonEditorVue v-model="formData" v-bind="{ mode: 'tree' }" class="jse-theme-dark" />
             </TabPanel>
           </TabPanels>
         </Tabs>