feat(schema): editor output tuning

Author: sfxcode

dev/components/app/AppTopbar.vue

@@ -119,8 +119,8 @@ const items = ref([
       <template #center>
         <div class="text-lg">
           <span class="text-yellow-600 font-bold">New: </span>
-          <router-link to="/samples/repeater" class="">
-            <span class="">Repeater</span>
+          <router-link to="/samples/inputEditor" class="">
+            <span class="">Prime Input Editor</span>
           </router-link>
         </div>
       </template>

dev/components/demo/PrimeSchemaEditor.vue

@@ -3,6 +3,7 @@ import { FormKitSchema } from '@formkit/vue'
 import { ref } from 'vue'
 import { useToast } from 'primevue/usetoast'
 import type { ToastMessageOptions } from 'primevue/toast'
+import { useClipboard } from '@vueuse/core'
 
 import { useInputEditorSchema } from 'my-library'
 
@@ -12,7 +13,7 @@ const props = defineProps<{
   data: object
 }>()
 
-const form2 = ref(0)
+const schemaResultFormKey = ref(0)
 
 const { editorDataToSchema, editorDataToJson, editorDataToCode } = useInputEditorSchema()
 
@@ -28,19 +29,28 @@ const formData = reactive(props.data)
 const data = ref({})
 
 async function submitHandler() {
-  showMessage('success', 'Form Submitted ...', 'Input creation completed successfully')
-  data.value = { value: formData.value }
-  form2.value += 1
+  showMessage('success', 'Form Submitted', 'Input creation completed successfully ...')
 
-  console.log(editorDataToJson(formData))
-  console.log(editorDataToCode(formData))
+  data.value = { }
+  schemaResultFormKey.value += 1
+  Object.assign(formData, { ...formData, schemaResultFormKey: schemaResultFormKey.value })
 }
 
 async function submitHandler2() {
 
 }
 
 const schemaResult = computed(() => editorDataToSchema(formData))
+
+const { copy, isSupported } = useClipboard({})
+
+function copyJson() {
+  copy(editorDataToJson(formData))
+}
+
+function copyObject() {
+  copy(editorDataToCode(formData))
+}
 </script>
 
 <template>
@@ -50,9 +60,9 @@ const schemaResult = computed(() => editorDataToSchema(formData))
       {{ header }}
     </h2>
     <slot />
-    <div class="flex flex-wrap gap-4">
-      <div class="min-w-30rem basis-1/2 md:basis-1/3">
-        <h3>Create Formkit Prime Input</h3>
+    <div class="flex flex-wrap gap-8">
+      <div class="min-w-40rem basis-1/2 md:basis-1/3">
+        <h3>Create Formkit Input</h3>
         <FormKit
           v-model="formData"
           type="form"
@@ -64,11 +74,14 @@ const schemaResult = computed(() => editorDataToSchema(formData))
         >
           <FormKitSchema :schema="formSchema" :data="formData" />
         </FormKit>
+        <pre v-if="false">{{ formSchema }}</pre>
       </div>
       <div class="">
         <h3>Generated Formkit Input Preview</h3>
-
-        <div :key="form2">
+        <div class="mb-4">
+          Some changes require to trigger the update of generated input
+        </div>
+        <div :key="schemaResultFormKey">
           <FormKit
             v-model="data"
             type="form"
@@ -79,6 +92,10 @@ const schemaResult = computed(() => editorDataToSchema(formData))
           >
             <FormKitSchema :schema="schemaResult" :data="data" />
           </FormKit>
+          <div class="mt-4 mb-4">
+            <h3>Copy Schema to Clipboard - Supported: {{ isSupported }}</h3>
+            <Button label="Copy as JSON" class="mr-4" @click="copyJson" /><Button label="Copy as Object" @click="copyObject" />
+          </div>
           <h3>Generated Formkit Schema</h3>
           <pre>{{ schemaResult }}</pre>
           <h3>Generated Formkit Data</h3>

dev/pages/inputs/InputText.vue

@@ -27,6 +27,7 @@ const schema
       label: 'Icon Right (Disabled)',
       help: 'Right Icon Demo',
       icon: 'pi pi-check',
+      iconPosition: 'right',
       disabled: true,
     },
 

dev/pages/samples/InputEditor.vue

@@ -1,22 +1,22 @@
 <script setup lang='ts'>
-import { useInputEditorSchema } from 'my-library'
+import { useFormKitSchema, useInputEditorSchema } from 'my-library'
 
 const { editorSchema, schemaToEditorData } = useInputEditorSchema()
+const { addListGroupFunctions } = useFormKitSchema()
 
-const data1 = reactive(schemaToEditorData({
+const data = reactive(schemaToEditorData({
   $formkit: 'primeInputText',
   name: 'field',
-  label: 'Some Label',
-  help: 'Help Text.',
+  options: [{ label: 'Option 1', value: 'option1' }, { label: 'Option 2', value: 'option2' }],
 }))
 
-const data = JSON.parse('{"$formkit":"primeInputText","name":"field2","label":"Some Label","help":"Help Text."}')
+addListGroupFunctions(data)
 </script>
 
 <template>
-  <div>
+  <div class="ml-2">
     <PrimeSchemaEditor
-      header="Prime Input Editor" :schema="editorSchema" :data="data"
+      header="Prime Input Editor" :schema="editorSchema()" :data="data"
     />
   </div>
 </template>

package.json

@@ -88,11 +88,11 @@
     "primevue": "^3.52.0"
   },
   "devDependencies": {
-    "@antfu/eslint-config": "2.16.2",
+    "@antfu/eslint-config": "2.17.0",
     "@formkit/core": "^1.6.2",
-    "@types/node": "^20.12.10",
-    "@unocss/preset-icons": "0.59.4",
-    "@unocss/preset-uno": "0.59.4",
+    "@types/node": "^20.12.11",
+    "@unocss/preset-icons": "0.60.0",
+    "@unocss/preset-uno": "0.60.0",
     "@vitejs/plugin-vue": "^5.0.4",
     "@vitest/coverage-v8": "^1.6.0",
     "@vitest/ui": "^1.6.0",
@@ -116,7 +116,7 @@
     "tslib": "^2.6.2",
     "typescript": "^5.4.5",
     "unbuild": "2.0.0",
-    "unocss": "0.59.4",
+    "unocss": "0.60.0",
     "unplugin-auto-import": "^0.17.5",
     "unplugin-vue-components": "^0.27.0",
     "vanilla-jsoneditor": "^0.23.3",