@sfxcode/formkit-primevue 1.10.1 → 1.11.1

package/README.md

@@ -22,10 +22,16 @@ app.use(plugin, defaultConfig({
 }))
 ```
 
+## Limitations
+
+Prefixing of the PrimeVue component names is not supported.
+
 ### Schema Helper Functions
 
 [useFormKitSchema](https://github.com/sfxcode/formkit-primevue/blob/main/src/composables/useFormKitSchema.ts) provide functions to simplify the usage of elements, components, lists, ...
 
+[useInputEditorSchema](https://github.com/sfxcode/formkit-primevue/blob/main/src/composables/useInputEditorSchema.ts) provide functions for a component schema generation builder
+
 ### Basic Styling
 
 Basic styling is provided with the [formkit-primevue.scss](https://github.com/sfxcode/formkit-primevue/blob/main/src/sass/formkit-primevue.scss) file.
@@ -51,6 +57,7 @@ Some samples for common tasks are available
 
 - [Repeater](https://formkit-primevue.netlify.app/samples/repeater) (with the help of the useFormKitSchema composable)
 - [Grid](https://formkit-primevue.netlify.app/samples/grid)
+- [Input Editor](https://formkit-primevue.netlify.app/samples/inputEditor) (let you test the configurations in your schema file)
 
 ## Showcases
 

package/dist/composables/index.d.ts

@@ -1,2 +1,3 @@
 import { useFormKitSchema } from './useFormKitSchema';
-export { useFormKitSchema, };
+import { useInputEditorSchema } from './useInputEditorSchema';
+export { useFormKitSchema, useInputEditorSchema, };

package/dist/composables/index.js

@@ -9,4 +9,11 @@ Object.defineProperty(exports, "useFormKitSchema", {
     return _useFormKitSchema.useFormKitSchema;
   }
 });
-var _useFormKitSchema = require("./useFormKitSchema");
+Object.defineProperty(exports, "useInputEditorSchema", {
+  enumerable: true,
+  get: function () {
+    return _useInputEditorSchema.useInputEditorSchema;
+  }
+});
+var _useFormKitSchema = require("./useFormKitSchema");
+var _useInputEditorSchema = require("./useInputEditorSchema");

package/dist/composables/index.mjs

@@ -1,4 +1,6 @@
 import { useFormKitSchema } from "./useFormKitSchema.mjs";
+import { useInputEditorSchema } from "./useInputEditorSchema.mjs";
 export {
-  useFormKitSchema
+  useFormKitSchema,
+  useInputEditorSchema
 };

package/dist/composables/useFormKitSchema.d.ts

@@ -1,25 +1,25 @@
 export declare function useFormKitSchema(): {
-    addComponent: (component?: string, props?: object, render?: string) => object;
-    addElement: (element?: string, children?: any[] | string, attrs?: object, render?: string) => {
+    addComponent: (component?: string, props?: object, render?: string, formKitAttrs?: object) => object;
+    addElement: (element?: string, children?: any[] | string, attrs?: object, render?: string, formKitAttrs?: object) => {
         $el: string;
         if: string;
         attrs: object;
         children: string | any[];
     };
-    addGroup: (name: string, children?: object[], render?: string) => {
+    addGroup: (name: string, children?: object[], render?: string, formKitAttrs?: object) => {
         $formkit: string;
         if: string;
         name: string;
         children: object[];
     };
-    addList: (name: string, children: object[], dynamic?: boolean, render?: string) => {
+    addList: (name: string, children: object[], dynamic?: boolean, render?: string, formKitAttrs?: object) => {
         $formkit: string;
         if: string;
         name: string;
         dynamic: boolean;
         children: object[];
     };
-    addListGroup: (children?: object[], render?: string) => {
+    addListGroup: (children?: object[], render?: string, formKitAttrs?: object) => {
         $formkit: string;
         if: string;
         for: string[];

package/dist/composables/useFormKitSchema.js

@@ -5,39 +5,43 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.useFormKitSchema = useFormKitSchema;
 function useFormKitSchema() {
-  const addComponent = (component = "Button", props = {}, render = "true") => {
+  const addComponent = (component = "Button", props = {}, render = "true", formKitAttrs = {}) => {
     return {
       $cmp: component,
       if: render,
-      props
+      props,
+      ...formKitAttrs
     };
   };
-  const addElement = (element = "div", children = [], attrs = {}, render = "true") => {
+  const addElement = (element = "div", children = [], attrs = {}, render = "true", formKitAttrs = {}) => {
     return {
       $el: element,
       if: render,
       attrs,
-      children
+      children,
+      ...formKitAttrs
     };
   };
-  const addGroup = (name, children = [], render = "true") => {
+  const addGroup = (name, children = [], render = "true", formKitAttrs = {}) => {
     return {
       $formkit: "group",
       if: render,
       name,
-      children
+      children,
+      ...formKitAttrs
     };
   };
-  const addList = (name, children, dynamic = true, render = "true") => {
+  const addList = (name, children, dynamic = true, render = "true", formKitAttrs = {}) => {
     return {
       $formkit: "list",
       if: render,
       name,
       dynamic,
-      children
+      children,
+      ...formKitAttrs
     };
   };
-  const addListGroup = (children = [], render = "true") => {
+  const addListGroup = (children = [], render = "true", formKitAttrs = {}) => {
     return {
       $formkit: "group",
       if: render,
@@ -45,7 +49,8 @@ function useFormKitSchema() {
       // 👈 $items is in the slot’s scope
       key: "$item",
       index: "$index",
-      children
+      children,
+      ...formKitAttrs
     };
   };
   function addListGroupFunctions(data, addNodeDefaultObject = {}) {

package/dist/composables/useFormKitSchema.mjs

@@ -1,37 +1,41 @@
 export function useFormKitSchema() {
-  const addComponent = (component = "Button", props = {}, render = "true") => {
+  const addComponent = (component = "Button", props = {}, render = "true", formKitAttrs = {}) => {
     return {
       $cmp: component,
       if: render,
-      props
+      props,
+      ...formKitAttrs
     };
   };
-  const addElement = (element = "div", children = [], attrs = {}, render = "true") => {
+  const addElement = (element = "div", children = [], attrs = {}, render = "true", formKitAttrs = {}) => {
     return {
       $el: element,
       if: render,
       attrs,
-      children
+      children,
+      ...formKitAttrs
     };
   };
-  const addGroup = (name, children = [], render = "true") => {
+  const addGroup = (name, children = [], render = "true", formKitAttrs = {}) => {
     return {
       $formkit: "group",
       if: render,
       name,
-      children
+      children,
+      ...formKitAttrs
     };
   };
-  const addList = (name, children, dynamic = true, render = "true") => {
+  const addList = (name, children, dynamic = true, render = "true", formKitAttrs = {}) => {
     return {
       $formkit: "list",
       if: render,
       name,
       dynamic,
-      children
+      children,
+      ...formKitAttrs
     };
   };
-  const addListGroup = (children = [], render = "true") => {
+  const addListGroup = (children = [], render = "true", formKitAttrs = {}) => {
     return {
       $formkit: "group",
       if: render,
@@ -39,7 +43,8 @@ export function useFormKitSchema() {
       // 👈 $items is in the slot’s scope
       key: "$item",
       index: "$index",
-      children
+      children,
+      ...formKitAttrs
     };
   };
   function addListGroupFunctions(data, addNodeDefaultObject = {}) {

package/dist/composables/useInputEditorSchema.d.ts

@@ -0,0 +1,132 @@
+export declare function useInputEditorSchema(): {
+    editorSchema: (inputOptions?: any[]) => ({
+        $formkit: string;
+        if: string;
+        name: string;
+        dynamic: boolean;
+        children: object[];
+    } | {
+        $formkit: string;
+        id: string;
+        name: string;
+        label: string;
+        value: string;
+        optionLabel: string;
+        optionValue: string;
+        options: any[];
+        key: string;
+        preserve: boolean;
+        validation?: undefined;
+        validationVisibility?: undefined;
+        allowEmpty?: undefined;
+        if?: undefined;
+    } | {
+        $formkit: string;
+        name: string;
+        label: string;
+        validation: string;
+        validationVisibility: string;
+        key: string;
+        preserve: boolean;
+        id?: undefined;
+        value?: undefined;
+        optionLabel?: undefined;
+        optionValue?: undefined;
+        options?: undefined;
+        allowEmpty?: undefined;
+        if?: undefined;
+    } | {
+        $formkit: string;
+        id: string;
+        name: string;
+        options: {
+            label: string;
+            value: string;
+        }[];
+        optionLabel: string;
+        optionValue: string;
+        value: string;
+        allowEmpty: boolean;
+        key: string;
+        preserve: boolean;
+        label?: undefined;
+        validation?: undefined;
+        validationVisibility?: undefined;
+        if?: undefined;
+    } | {
+        $formkit: string;
+        if: string;
+        name: string;
+        label: string;
+        key: string;
+        preserve: boolean;
+        id?: undefined;
+        value?: undefined;
+        optionLabel?: undefined;
+        optionValue?: undefined;
+        options?: undefined;
+        validation?: undefined;
+        validationVisibility?: undefined;
+        allowEmpty?: undefined;
+    } | {
+        $formkit: string;
+        if: string;
+        name: string;
+        label: string;
+        key: string;
+        value: boolean;
+        preserve: boolean;
+        id?: undefined;
+        optionLabel?: undefined;
+        optionValue?: undefined;
+        options?: undefined;
+        validation?: undefined;
+        validationVisibility?: undefined;
+        allowEmpty?: undefined;
+    } | {
+        $formkit: string;
+        if: string;
+        name: string;
+        label: string;
+        value: string;
+        optionLabel: string;
+        optionValue: string;
+        options: {
+            label: string;
+            value: string;
+        }[];
+        key: string;
+        preserve: boolean;
+        id?: undefined;
+        validation?: undefined;
+        validationVisibility?: undefined;
+        allowEmpty?: undefined;
+    } | {
+        $formkit: string;
+        if: string;
+        name: string;
+        label: string;
+        optionLabel: string;
+        optionValue: string;
+        options: {
+            label: string;
+            value: string;
+        }[];
+        key: string;
+        preserve: boolean;
+        id?: undefined;
+        value?: undefined;
+        validation?: undefined;
+        validationVisibility?: undefined;
+        allowEmpty?: undefined;
+    })[];
+    primeInputNames: string[];
+    primeInputOptions: (list: string[]) => {
+        label: string;
+        value: string;
+    }[];
+    editorDataToSchema: (data: any) => any;
+    editorDataToJson: (data: any) => string;
+    editorDataToCode: (data: any) => string;
+    schemaToEditorData: (schema: any) => any;
+};

package/dist/composables/useInputEditorSchema.js

@@ -0,0 +1,345 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.useInputEditorSchema = useInputEditorSchema;
+var _useFormKitSchema = require("./useFormKitSchema");
+function useInputEditorSchema() {
+  const {
+    addElement,
+    addList,
+    addListGroup,
+    addComponent
+  } = (0, _useFormKitSchema.useFormKitSchema)();
+  function addFlexElement(children) {
+    return addElement("div", children, {
+      style: "min-width: 40rem;display: flex;gap: 1rem;"
+    });
+  }
+  function addGroupButtons() {
+    const addButtonComponent = (onClick = "", label = "", icon = "", severity = "", render = "true", styleClass = "p-button-sm", style = "margin-left: 0.5rem;") => {
+      return addComponent("Button", {
+        onClick,
+        label,
+        icon,
+        class: styleClass,
+        style,
+        severity
+      }, render);
+    };
+    return addElement("div", [addButtonComponent("$removeNode($node, $index)", "", "pi pi-times", "danger"), addButtonComponent("$copyNode($node, $index)", "", "pi pi-plus"), addButtonComponent("$moveNodeUp($node, $index)", "", "pi pi-arrow-up", "secondary", "$index != 0"), addElement("span", [], {
+      style: "margin-left: 0.5rem;margin-right: 2.5rem;"
+    }, "$index == 0"), addButtonComponent("$moveNodeDown($node, $index)", "", "pi pi-arrow-down", "secondary", "$index < $node.value.length -1"), addElement("span", [], {
+      style: "margin-left: 0.5rem;margin-right: 2.5rem;"
+    }, "$index == $node.value.length -1")], {
+      style: "padding-top: 1.5rem;"
+    });
+  }
+  const primeInputWithOptionNames = ["CascadeSelect", "Dropdown", "Listbox", "MultiSelect", "RadioButton", "SelectButton", "TreeSelect"];
+  const primeInputNames = [...primeInputWithOptionNames, "AutoComplete", "Calendar", "Checkbox", "Chips", "ColorPicker", "Editor", "InputMask", "InputNumber", "InputOtp", "InputSwitch", "InputText", "Knob", "Password", "Rating", "Slider", "Textarea", "ToggleButton", "TriStateCheckbox"].sort();
+  function primeInputOptions(list) {
+    return list.map(name => {
+      return {
+        label: name,
+        value: `prime${name}`
+      };
+    });
+  }
+  const selectOptions = [{
+    label: "Base",
+    value: "showBasic"
+  }, {
+    label: "Display",
+    value: "showDisplay"
+  }, {
+    label: "Validation",
+    value: "showValidation"
+  }, {
+    label: "Options",
+    value: "showOptions"
+  }, {
+    label: "Prime",
+    value: "showPrime"
+  }];
+  const validationOptions = [{
+    label: "Blur",
+    value: "blur"
+  }, {
+    label: "Live",
+    value: "live"
+  }, {
+    label: "Dirty",
+    value: "dirty"
+  }, {
+    label: "Submit",
+    value: "submit"
+  }];
+  const positionOptions = [{
+    label: "Left",
+    value: "left"
+  }, {
+    label: "Right",
+    value: "right"
+  }];
+  function editorDataToSchema(data) {
+    const formkitInput = data?._dollar_formkit;
+    let tempData = {};
+    if (data.prime?.length > 0) {
+      const mapped = data.prime?.map(entry => [entry.prime_key, entry.prime_value]);
+      tempData = Object.assign(...mapped.map(([key, val]) => ({
+        [key]: val
+      })));
+    }
+    const readonlyValue = data.readonly ? true : void 0;
+    const disabledValue = data.disabled ? true : void 0;
+    const preserveValue = data.preserve ? true : void 0;
+    const defaultObject = {
+      readonly: readonlyValue,
+      disabled: disabledValue,
+      preserve: preserveValue
+    };
+    const undefinedObject = {
+      prime: void 0,
+      schemaResultFormKey: void 0,
+      _dollar_formkit: void 0,
+      slots: void 0,
+      selectButton: void 0
+    };
+    const useOptions = primeInputWithOptionNames.map(s => `prime${s}`).includes(formkitInput);
+    if (useOptions) return {
+      ...data,
+      $formkit: formkitInput,
+      ...tempData,
+      ...undefinedObject,
+      ...defaultObject,
+      optionLabel: "label",
+      optionValue: "value"
+    };else return {
+      ...data,
+      $formkit: formkitInput,
+      ...tempData,
+      ...undefinedObject,
+      ...defaultObject,
+      options: void 0
+    };
+  }
+  function editorDataToJson(data) {
+    return JSON.stringify(editorDataToSchema(data));
+  }
+  function editorDataToObject(data) {
+    return `{${Object.entries(JSON.parse(editorDataToJson(data))).map(([key, value]) => `${key}: '${value}'`).join()}}`;
+  }
+  function schemaToEditorData(schema) {
+    const formkitInput = schema?.$formkit;
+    return {
+      ...schema,
+      _dollar_formkit: formkitInput
+    };
+  }
+  function editorSchema(inputOptions = primeInputOptions(primeInputNames)) {
+    return [{
+      $formkit: "primeDropdown",
+      id: "inputSelection",
+      name: "_dollar_formkit",
+      label: "Prime Input",
+      value: "primeInputText",
+      optionLabel: "label",
+      optionValue: "value",
+      options: inputOptions,
+      key: "schema_inputSelection",
+      preserve: true
+    }, {
+      $formkit: "primeInputText",
+      name: "name",
+      label: "Field Name",
+      validation: "required",
+      validationVisibility: "live",
+      key: "schema_name",
+      preserve: true
+    }, {
+      $formkit: "primeSelectButton",
+      id: "selectButton",
+      name: "selectButton",
+      options: selectOptions,
+      optionLabel: "label",
+      optionValue: "value",
+      value: "showBasic",
+      allowEmpty: false,
+      key: "schema_selectButton",
+      preserve: true
+    }, {
+      $formkit: "primeInputText",
+      if: "$get(selectButton).value === 'showBasic'",
+      name: "label",
+      label: "Input Label",
+      key: "schema_label",
+      preserve: true
+    }, {
+      $formkit: "primeInputText",
+      if: "$get(selectButton).value === 'showBasic'",
+      name: "help",
+      label: "Input Help",
+      key: "schema_help",
+      preserve: true
+    }, {
+      $formkit: "primeInputText",
+      if: "$get(selectButton).value === 'showBasic'",
+      name: "id",
+      label: "Input ID",
+      key: "schema_id",
+      preserve: true
+    }, {
+      $formkit: "primeInputText",
+      if: "$get(selectButton).value === 'showBasic'",
+      name: "value",
+      label: "Input Value",
+      key: "schema_value",
+      preserve: true
+    }, {
+      $formkit: "primeInputText",
+      if: "$get(selectButton).value === 'showBasic'",
+      name: "key",
+      label: "Input Key",
+      key: "schema_key",
+      preserve: true
+    }, {
+      $formkit: "primeCheckbox",
+      if: "$get(selectButton).value === 'showBasic'",
+      name: "preserve",
+      label: "Input Preserve",
+      key: "schema_preserve",
+      value: false,
+      preserve: true
+    }, {
+      $formkit: "primeInputText",
+      if: "$get(selectButton).value === 'showValidation'",
+      name: "validation",
+      label: "Field Validation",
+      key: "schema_validation",
+      preserve: true
+    }, {
+      $formkit: "primeDropdown",
+      if: "$get(selectButton).value === 'showValidation'",
+      name: "validation-visibility",
+      label: "Field Validation Visibility",
+      value: "blur",
+      optionLabel: "label",
+      optionValue: "value",
+      options: validationOptions,
+      key: "schema_validation-visibility",
+      preserve: true
+    }, {
+      $formkit: "primeInputText",
+      if: "$get(selectButton).value === 'showValidation'",
+      name: "validation-label",
+      label: "Field Validation Label",
+      key: "schema_validation-label",
+      preserve: true
+    }, {
+      $formkit: "primeInputText",
+      if: "$get(selectButton).value === 'showDisplay'",
+      name: "tabindex",
+      label: "Tab Index",
+      key: "schema_tabindex",
+      preserve: true
+    }, {
+      $formkit: "primeInputText",
+      if: "$get(selectButton).value === 'showDisplay'",
+      name: "if",
+      label: "Should Render",
+      key: "schema_if",
+      preserve: true
+    }, {
+      $formkit: "primeInputText",
+      if: "$get(selectButton).value === 'showDisplay'",
+      name: "style",
+      label: "Input Style",
+      key: "schema_style",
+      preserve: true
+    }, {
+      $formkit: "primeInputText",
+      if: "$get(selectButton).value === 'showDisplay'",
+      name: "class",
+      label: "Input StyleClass",
+      key: "schema_class",
+      preserve: true
+    }, {
+      $formkit: "primeInputText",
+      if: "$get(selectButton).value === 'showDisplay'",
+      name: "icon",
+      label: "Icon",
+      key: "schema_icon",
+      preserve: true
+    }, {
+      $formkit: "primeDropdown",
+      if: "$get(selectButton).value === 'showDisplay'",
+      name: "iconPosition",
+      label: "Icon Position",
+      optionLabel: "label",
+      optionValue: "value",
+      options: positionOptions,
+      key: "schema_iconPosition",
+      preserve: true
+    }, {
+      $formkit: "primeCheckbox",
+      if: "$get(selectButton).value === 'showDisplay'",
+      name: "disabled",
+      label: "Input Disabled",
+      key: "schema_disabled",
+      value: false,
+      preserve: true
+    }, {
+      $formkit: "primeCheckbox",
+      if: "$get(selectButton).value === 'showDisplay'",
+      name: "readonly",
+      label: "Input Read Only",
+      key: "schema_readonly",
+      value: false,
+      preserve: true
+    }, addList("options", [addFlexElement([addComponent("Button", {
+      onClick: "$addNode($node)",
+      label: "Add Option",
+      class: "p-button-sm",
+      style: "margin-bottom: 2rem;",
+      icon: "pi pi-plus"
+    }, "$node.value.length == 0")]), addListGroup([addFlexElement([{
+      $formkit: "primeInputText",
+      label: "Label",
+      name: "label"
+    }, {
+      $formkit: "primeInputText",
+      label: "Value",
+      name: "value"
+    }, addGroupButtons()])])], true, "$get(selectButton).value === 'showOptions'", {
+      key: "schema_options",
+      preserve: true
+    }), addList("prime", [addFlexElement([addComponent("Button", {
+      onClick: "$addNode($node)",
+      label: "Add PrimeVue Attribute",
+      class: "p-button-sm",
+      style: "margin-bottom: 2rem;",
+      icon: "pi pi-plus"
+    }, "$node.value.length == 0")]), addListGroup([addFlexElement([{
+      $formkit: "primeInputText",
+      label: "PrimeVue Property",
+      name: "prime_key"
+    }, {
+      $formkit: "primeInputText",
+      label: "Value",
+      name: "prime_value"
+    }, addGroupButtons()])])], true, "$get(selectButton).value === 'showPrime'", {
+      key: "schema_prime",
+      preserve: true
+    })];
+  }
+  return {
+    editorSchema,
+    primeInputNames,
+    primeInputOptions,
+    editorDataToSchema,
+    editorDataToJson,
+    editorDataToCode: editorDataToObject,
+    schemaToEditorData
+  };
+}

package/dist/composables/useInputEditorSchema.mjs

@@ -0,0 +1,300 @@
+import { useFormKitSchema } from "./useFormKitSchema.mjs";
+export function useInputEditorSchema() {
+  const { addElement, addList, addListGroup, addComponent } = useFormKitSchema();
+  function addFlexElement(children) {
+    return addElement("div", children, { style: "min-width: 40rem;display: flex;gap: 1rem;" });
+  }
+  function addGroupButtons() {
+    const addButtonComponent = (onClick = "", label = "", icon = "", severity = "", render = "true", styleClass = "p-button-sm", style = "margin-left: 0.5rem;") => {
+      return addComponent("Button", { onClick, label, icon, class: styleClass, style, severity }, render);
+    };
+    return addElement("div", [
+      addButtonComponent("$removeNode($node, $index)", "", "pi pi-times", "danger"),
+      addButtonComponent("$copyNode($node, $index)", "", "pi pi-plus"),
+      addButtonComponent("$moveNodeUp($node, $index)", "", "pi pi-arrow-up", "secondary", "$index != 0"),
+      addElement("span", [], { style: "margin-left: 0.5rem;margin-right: 2.5rem;" }, "$index == 0"),
+      addButtonComponent("$moveNodeDown($node, $index)", "", "pi pi-arrow-down", "secondary", "$index < $node.value.length -1"),
+      addElement("span", [], { style: "margin-left: 0.5rem;margin-right: 2.5rem;" }, "$index == $node.value.length -1")
+    ], { style: "padding-top: 1.5rem;" });
+  }
+  const primeInputWithOptionNames = ["CascadeSelect", "Dropdown", "Listbox", "MultiSelect", "RadioButton", "SelectButton", "TreeSelect"];
+  const primeInputNames = [...primeInputWithOptionNames, "AutoComplete", "Calendar", "Checkbox", "Chips", "ColorPicker", "Editor", "InputMask", "InputNumber", "InputOtp", "InputSwitch", "InputText", "Knob", "Password", "Rating", "Slider", "Textarea", "ToggleButton", "TriStateCheckbox"].sort();
+  function primeInputOptions(list) {
+    return list.map((name) => {
+      return { label: name, value: `prime${name}` };
+    });
+  }
+  const selectOptions = [
+    { label: "Base", value: "showBasic" },
+    { label: "Display", value: "showDisplay" },
+    { label: "Validation", value: "showValidation" },
+    { label: "Options", value: "showOptions" },
+    { label: "Prime", value: "showPrime" }
+  ];
+  const validationOptions = [
+    { label: "Blur", value: "blur" },
+    { label: "Live", value: "live" },
+    { label: "Dirty", value: "dirty" },
+    { label: "Submit", value: "submit" }
+  ];
+  const positionOptions = [
+    { label: "Left", value: "left" },
+    { label: "Right", value: "right" }
+  ];
+  function editorDataToSchema(data) {
+    const formkitInput = data?._dollar_formkit;
+    let tempData = {};
+    if (data.prime?.length > 0) {
+      const mapped = data.prime?.map((entry) => [entry.prime_key, entry.prime_value]);
+      tempData = Object.assign(...mapped.map(([key, val]) => ({ [key]: val })));
+    }
+    const readonlyValue = data.readonly ? true : void 0;
+    const disabledValue = data.disabled ? true : void 0;
+    const preserveValue = data.preserve ? true : void 0;
+    const defaultObject = { readonly: readonlyValue, disabled: disabledValue, preserve: preserveValue };
+    const undefinedObject = { prime: void 0, schemaResultFormKey: void 0, _dollar_formkit: void 0, slots: void 0, selectButton: void 0 };
+    const useOptions = primeInputWithOptionNames.map((s) => `prime${s}`).includes(formkitInput);
+    if (useOptions)
+      return { ...data, $formkit: formkitInput, ...tempData, ...undefinedObject, ...defaultObject, optionLabel: "label", optionValue: "value" };
+    else
+      return { ...data, $formkit: formkitInput, ...tempData, ...undefinedObject, ...defaultObject, options: void 0 };
+  }
+  function editorDataToJson(data) {
+    return JSON.stringify(editorDataToSchema(data));
+  }
+  function editorDataToObject(data) {
+    return `{${Object.entries(JSON.parse(editorDataToJson(data))).map(([key, value]) => `${key}: '${value}'`).join()}}`;
+  }
+  function schemaToEditorData(schema) {
+    const formkitInput = schema?.$formkit;
+    return { ...schema, _dollar_formkit: formkitInput };
+  }
+  function editorSchema(inputOptions = primeInputOptions(primeInputNames)) {
+    return [
+      {
+        $formkit: "primeDropdown",
+        id: "inputSelection",
+        name: "_dollar_formkit",
+        label: "Prime Input",
+        value: "primeInputText",
+        optionLabel: "label",
+        optionValue: "value",
+        options: inputOptions,
+        key: "schema_inputSelection",
+        preserve: true
+      },
+      {
+        $formkit: "primeInputText",
+        name: "name",
+        label: "Field Name",
+        validation: "required",
+        validationVisibility: "live",
+        key: "schema_name",
+        preserve: true
+      },
+      {
+        $formkit: "primeSelectButton",
+        id: "selectButton",
+        name: "selectButton",
+        options: selectOptions,
+        optionLabel: "label",
+        optionValue: "value",
+        value: "showBasic",
+        allowEmpty: false,
+        key: "schema_selectButton",
+        preserve: true
+      },
+      {
+        $formkit: "primeInputText",
+        if: "$get(selectButton).value === 'showBasic'",
+        name: "label",
+        label: "Input Label",
+        key: "schema_label",
+        preserve: true
+      },
+      {
+        $formkit: "primeInputText",
+        if: "$get(selectButton).value === 'showBasic'",
+        name: "help",
+        label: "Input Help",
+        key: "schema_help",
+        preserve: true
+      },
+      {
+        $formkit: "primeInputText",
+        if: "$get(selectButton).value === 'showBasic'",
+        name: "id",
+        label: "Input ID",
+        key: "schema_id",
+        preserve: true
+      },
+      {
+        $formkit: "primeInputText",
+        if: "$get(selectButton).value === 'showBasic'",
+        name: "value",
+        label: "Input Value",
+        key: "schema_value",
+        preserve: true
+      },
+      {
+        $formkit: "primeInputText",
+        if: "$get(selectButton).value === 'showBasic'",
+        name: "key",
+        label: "Input Key",
+        key: "schema_key",
+        preserve: true
+      },
+      {
+        $formkit: "primeCheckbox",
+        if: "$get(selectButton).value === 'showBasic'",
+        name: "preserve",
+        label: "Input Preserve",
+        key: "schema_preserve",
+        value: false,
+        preserve: true
+      },
+      {
+        $formkit: "primeInputText",
+        if: "$get(selectButton).value === 'showValidation'",
+        name: "validation",
+        label: "Field Validation",
+        key: "schema_validation",
+        preserve: true
+      },
+      {
+        $formkit: "primeDropdown",
+        if: "$get(selectButton).value === 'showValidation'",
+        name: "validation-visibility",
+        label: "Field Validation Visibility",
+        value: "blur",
+        optionLabel: "label",
+        optionValue: "value",
+        options: validationOptions,
+        key: "schema_validation-visibility",
+        preserve: true
+      },
+      {
+        $formkit: "primeInputText",
+        if: "$get(selectButton).value === 'showValidation'",
+        name: "validation-label",
+        label: "Field Validation Label",
+        key: "schema_validation-label",
+        preserve: true
+      },
+      {
+        $formkit: "primeInputText",
+        if: "$get(selectButton).value === 'showDisplay'",
+        name: "tabindex",
+        label: "Tab Index",
+        key: "schema_tabindex",
+        preserve: true
+      },
+      {
+        $formkit: "primeInputText",
+        if: "$get(selectButton).value === 'showDisplay'",
+        name: "if",
+        label: "Should Render",
+        key: "schema_if",
+        preserve: true
+      },
+      {
+        $formkit: "primeInputText",
+        if: "$get(selectButton).value === 'showDisplay'",
+        name: "style",
+        label: "Input Style",
+        key: "schema_style",
+        preserve: true
+      },
+      {
+        $formkit: "primeInputText",
+        if: "$get(selectButton).value === 'showDisplay'",
+        name: "class",
+        label: "Input StyleClass",
+        key: "schema_class",
+        preserve: true
+      },
+      {
+        $formkit: "primeInputText",
+        if: "$get(selectButton).value === 'showDisplay'",
+        name: "icon",
+        label: "Icon",
+        key: "schema_icon",
+        preserve: true
+      },
+      {
+        $formkit: "primeDropdown",
+        if: "$get(selectButton).value === 'showDisplay'",
+        name: "iconPosition",
+        label: "Icon Position",
+        optionLabel: "label",
+        optionValue: "value",
+        options: positionOptions,
+        key: "schema_iconPosition",
+        preserve: true
+      },
+      {
+        $formkit: "primeCheckbox",
+        if: "$get(selectButton).value === 'showDisplay'",
+        name: "disabled",
+        label: "Input Disabled",
+        key: "schema_disabled",
+        value: false,
+        preserve: true
+      },
+      {
+        $formkit: "primeCheckbox",
+        if: "$get(selectButton).value === 'showDisplay'",
+        name: "readonly",
+        label: "Input Read Only",
+        key: "schema_readonly",
+        value: false,
+        preserve: true
+      },
+      addList("options", [
+        addFlexElement([
+          addComponent("Button", { onClick: "$addNode($node)", label: "Add Option", class: "p-button-sm", style: "margin-bottom: 2rem;", icon: "pi pi-plus" }, "$node.value.length == 0")
+        ]),
+        addListGroup(
+          [
+            addFlexElement([
+              {
+                $formkit: "primeInputText",
+                label: "Label",
+                name: "label"
+              },
+              {
+                $formkit: "primeInputText",
+                label: "Value",
+                name: "value"
+              },
+              addGroupButtons()
+            ])
+          ]
+        )
+      ], true, "$get(selectButton).value === 'showOptions'", { key: "schema_options", preserve: true }),
+      addList("prime", [
+        addFlexElement([
+          addComponent("Button", { onClick: "$addNode($node)", label: "Add PrimeVue Attribute", class: "p-button-sm", style: "margin-bottom: 2rem;", icon: "pi pi-plus" }, "$node.value.length == 0")
+        ]),
+        addListGroup(
+          [
+            addFlexElement([
+              {
+                $formkit: "primeInputText",
+                label: "PrimeVue Property",
+                name: "prime_key"
+              },
+              {
+                $formkit: "primeInputText",
+                label: "Value",
+                name: "prime_value"
+              },
+              addGroupButtons()
+            ])
+          ]
+        )
+      ], true, "$get(selectButton).value === 'showPrime'", { key: "schema_prime", preserve: true })
+    ];
+  }
+  return { editorSchema, primeInputNames, primeInputOptions, editorDataToSchema, editorDataToJson, editorDataToCode: editorDataToObject, schemaToEditorData };
+}

package/dist/index.d.ts

@@ -1,3 +1,3 @@
-import { useFormKitSchema } from './composables';
+import { useFormKitSchema, useInputEditorSchema } from './composables';
 import { primeInputs } from './definitions';
-export { useFormKitSchema, primeInputs, };
+export { useFormKitSchema, useInputEditorSchema, primeInputs, };

package/dist/index.js

@@ -15,5 +15,11 @@ Object.defineProperty(exports, "useFormKitSchema", {
     return _composables.useFormKitSchema;
   }
 });
+Object.defineProperty(exports, "useInputEditorSchema", {
+  enumerable: true,
+  get: function () {
+    return _composables.useInputEditorSchema;
+  }
+});
 var _composables = require("./composables");
 var _definitions = require("./definitions");

package/dist/index.mjs

@@ -1,6 +1,7 @@
-import { useFormKitSchema } from "./composables/index.mjs";
+import { useFormKitSchema, useInputEditorSchema } from "./composables/index.mjs";
 import { primeInputs } from "./definitions/index.mjs";
 export {
   useFormKitSchema,
+  useInputEditorSchema,
   primeInputs
 };

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@sfxcode/formkit-primevue",
   "type": "module",
-  "version": "1.10.1",
+  "version": "1.11.1",
   "author": {
     "name": "Tom",
     "email": "tom@sfxcode.com"
@@ -81,18 +81,18 @@
     "vue": "^3.4.0"
   },
   "dependencies": {
-    "@formkit/addons": "^1.6.2",
-    "@formkit/i18n": "^1.6.2",
-    "@formkit/vue": "^1.6.2",
+    "@formkit/addons": "^1.6.3",
+    "@formkit/i18n": "^1.6.3",
+    "@formkit/vue": "^1.6.3",
     "primeicons": "^7.0.0",
     "primevue": "^3.52.0"
   },
   "devDependencies": {
-    "@antfu/eslint-config": "2.16.2",
-    "@formkit/core": "^1.6.2",
-    "@types/node": "^20.12.10",
-    "@unocss/preset-icons": "0.59.4",
-    "@unocss/preset-uno": "0.59.4",
+    "@antfu/eslint-config": "2.18.0",
+    "@formkit/core": "^1.6.3",
+    "@types/node": "^20.12.12",
+    "@unocss/preset-icons": "0.60.2",
+    "@unocss/preset-uno": "0.60.2",
     "@vitejs/plugin-vue": "^5.0.4",
     "@vitest/coverage-v8": "^1.6.0",
     "@vitest/ui": "^1.6.0",
@@ -108,18 +108,18 @@
     "chart.js": "^4.4.2",
     "consola": "^3.2.3",
     "eslint": "^9.2.0",
-    "happy-dom": "^14.10.1",
+    "happy-dom": "^14.11.0",
     "json-editor-vue": "^0.15.1",
     "mkdist": "^1.5.1",
-    "quill": "^2.0.1",
-    "sass": "^1.77.0",
+    "quill": "^2.0.2",
+    "sass": "^1.77.1",
     "tslib": "^2.6.2",
     "typescript": "^5.4.5",
     "unbuild": "2.0.0",
-    "unocss": "0.59.4",
-    "unplugin-auto-import": "^0.17.5",
+    "unocss": "0.60.2",
+    "unplugin-auto-import": "^0.17.6",
     "unplugin-vue-components": "^0.27.0",
-    "vanilla-jsoneditor": "^0.23.3",
+    "vanilla-jsoneditor": "^0.23.4",
     "vite": "^5.2.11",
     "vite-plugin-dts": "^3.9.1",
     "vite-plugin-eslint": "^1.8.1",
@@ -130,6 +130,6 @@
     "vue": "^3.4.27",
     "vue-demi": "^0.14.7",
     "vue-router": "^4.3.2",
-    "vue-tsc": "^2.0.16"
+    "vue-tsc": "^2.0.18"
   }
 }