@sfxcode/formkit-primevue 3.3.1 → 3.3.3

package/dist/composables/useFormKitRepeater.mjs

@@ -0,0 +1,54 @@
+import { useFormKitSchema } from "./useFormKitSchema.mjs";
+export function useFormKitRepeater() {
+  const { addElement, addComponent, addElementsInOuterDiv } = useFormKitSchema();
+  function addInsertButton(label = "Add", innerClass = "", outerClass = "", buttonClass = "p-button-sm", iconClass = "pi pi-plus") {
+    return addElementsInOuterDiv([
+      addComponent("Button", { onClick: "$addNode($node)", label, class: buttonClass, icon: iconClass }, "$node.children.length == 0")
+    ], innerClass, outerClass);
+  }
+  function addListGroupFunctions(data, addNodeDefaultObject = {}) {
+    const swapElements = (array, index1, index2) => {
+      const newArray = [...array];
+      const temp = newArray[index1];
+      newArray[index1] = newArray[index2];
+      newArray[index2] = temp;
+      return newArray;
+    };
+    data.addNode = (parentNode) => () => {
+      const newArray = [...parentNode.value, addNodeDefaultObject];
+      parentNode.input(newArray, false);
+    };
+    data.removeNode = (parentNode, index) => () => {
+      parentNode.input(parentNode._value.filter((_, i) => i !== index), false);
+    };
+    data.moveNodeUp = (parentNode, index) => () => {
+      const array = [...parentNode.value];
+      if (index > 0)
+        parentNode.input(swapElements(array, index - 1, index), false);
+    };
+    data.moveNodeDown = (parentNode, index) => () => {
+      const array = [...parentNode.value];
+      if (index < array.length - 1)
+        parentNode.input(swapElements(array, index, index + 1), false);
+    };
+    data.copyNode = (parentNode, index) => () => {
+      const obj = parentNode.value[index];
+      const newArray = [...parentNode.value, { ...obj }];
+      parentNode.input(newArray, false);
+    };
+  }
+  function addGroupButtons(innerClass = "", outerClass = "col-4", label = "Actions", help = "", render = "true") {
+    const addButtonComponent = (onClick = "", label2 = "", icon = "", severity = "", render2 = "true", styleClass = "p-button-sm") => {
+      return addComponent("Button", { onClick, label: label2, icon, class: styleClass, severity }, render2);
+    };
+    return addElementsInOuterDiv([
+      addButtonComponent("$removeNode($node.parent, $index)", "", "pi pi-times", "danger"),
+      addButtonComponent("$copyNode($node.parent, $index)", "", "pi pi-plus"),
+      addButtonComponent("$moveNodeUp($node.parent, $index)", "", "pi pi-arrow-up", "secondary", "$index != 0"),
+      addElement("span", [], { class: "p-space" }, "$index == 0"),
+      addButtonComponent("$moveNodeDown($node.parent, $index)", "", "pi pi-arrow-down", "secondary", "$index < $node.parent.value.length -1"),
+      addElement("span", [], { class: "p-space" }, "$index == $node.parent.value.length -1")
+    ], `p-action-buttons ${innerClass}`, outerClass, label, help, render);
+  }
+  return { addInsertButton, addGroupButtons, addListGroupFunctions };
+}

package/dist/composables/useFormKitSchema.d.ts

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

package/dist/composables/useFormKitSchema.js

@@ -0,0 +1,83 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.useFormKitSchema = useFormKitSchema;
+function useFormKitSchema() {
+  const addComponent = (component = "Button", props = {}, render = true, formKitAttrs = {}) => {
+    return {
+      $cmp: component,
+      if: render.toString(),
+      props,
+      ...formKitAttrs
+    };
+  };
+  const addElement = (element = "div", children = [], attrs = {}, render = true, formKitAttrs = {}) => {
+    return {
+      $el: element,
+      if: render.toString(),
+      attrs,
+      children,
+      ...formKitAttrs
+    };
+  };
+  const addGroup = (name, children = [], render = true, formKitAttrs = {}) => {
+    return {
+      $formkit: "group",
+      if: render.toString(),
+      name,
+      children,
+      ...formKitAttrs
+    };
+  };
+  const addList = (name, children = [], dynamic = true, render = true, formKitAttrs = {}) => {
+    return {
+      $formkit: "list",
+      if: render.toString(),
+      name,
+      dynamic,
+      children,
+      ...formKitAttrs
+    };
+  };
+  const addListGroup = (children = [], render = true, formKitAttrs = {}) => {
+    return {
+      $formkit: "group",
+      if: render.toString(),
+      for: ["item", "index", "$items"],
+      // 👈 $items is in the slot’s scope
+      key: "$item",
+      index: "$index",
+      children,
+      ...formKitAttrs
+    };
+  };
+  const addElementsInOuterDiv = (children = [], innerClass = "", outerClass = "", label = "", help = "", render = true) => {
+    const inner = addElement("div", children, {
+      class: `formkit-inner ${innerClass}`,
+      style: "position: relative;"
+    });
+    const labelDiv = addElement("label", [label], {
+      class: "formkit-label"
+    });
+    const wrapperDiv = addElement("div", [labelDiv, inner], {
+      class: "formkit-wrapper"
+    });
+    const helpDiv = addElement("div", [help], {
+      class: "formkit-help"
+    });
+    return addElement("div", [wrapperDiv, helpDiv], {
+      class: `formkit-outer ${outerClass}`,
+      style: "position: relative;"
+    }, render);
+  };
+  return {
+    addComponent,
+    addElement,
+    addGroup,
+    addList,
+    addListGroup,
+    addElementsInOuterDiv
+  };
+}

package/dist/composables/useFormKitSchema.mjs

@@ -0,0 +1,58 @@
+export function useFormKitSchema() {
+  const addComponent = (component = "Button", props = {}, render = true, formKitAttrs = {}) => {
+    return {
+      $cmp: component,
+      if: render.toString(),
+      props,
+      ...formKitAttrs
+    };
+  };
+  const addElement = (element = "div", children = [], attrs = {}, render = true, formKitAttrs = {}) => {
+    return {
+      $el: element,
+      if: render.toString(),
+      attrs,
+      children,
+      ...formKitAttrs
+    };
+  };
+  const addGroup = (name, children = [], render = true, formKitAttrs = {}) => {
+    return {
+      $formkit: "group",
+      if: render.toString(),
+      name,
+      children,
+      ...formKitAttrs
+    };
+  };
+  const addList = (name, children = [], dynamic = true, render = true, formKitAttrs = {}) => {
+    return {
+      $formkit: "list",
+      if: render.toString(),
+      name,
+      dynamic,
+      children,
+      ...formKitAttrs
+    };
+  };
+  const addListGroup = (children = [], render = true, formKitAttrs = {}) => {
+    return {
+      $formkit: "group",
+      if: render.toString(),
+      for: ["item", "index", "$items"],
+      // 👈 $items is in the slot’s scope
+      key: "$item",
+      index: "$index",
+      children,
+      ...formKitAttrs
+    };
+  };
+  const addElementsInOuterDiv = (children = [], innerClass = "", outerClass = "", label = "", help = "", render = true) => {
+    const inner = addElement("div", children, { class: `formkit-inner ${innerClass}`, style: "position: relative;" });
+    const labelDiv = addElement("label", [label], { class: "formkit-label" });
+    const wrapperDiv = addElement("div", [labelDiv, inner], { class: "formkit-wrapper" });
+    const helpDiv = addElement("div", [help], { class: "formkit-help" });
+    return addElement("div", [wrapperDiv, helpDiv], { class: `formkit-outer ${outerClass}`, style: "position: relative;" }, render);
+  };
+  return { addComponent, addElement, addGroup, addList, addListGroup, addElementsInOuterDiv };
+}

package/dist/composables/useFormKitSection.d.ts

@@ -0,0 +1,7 @@
+export declare function useFormKitSection(context: any): {
+    generateId: () => string;
+    hasPrefix: import("vue").ComputedRef<boolean>;
+    hasPrefixIcon: import("vue").ComputedRef<boolean>;
+    hasSuffix: import("vue").ComputedRef<boolean>;
+    hasSuffixIcon: import("vue").ComputedRef<boolean>;
+};

package/dist/composables/useFormKitSection.js

@@ -0,0 +1,31 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.useFormKitSection = useFormKitSection;
+var _vue = require("vue");
+function useFormKitSection(context) {
+  const hasPrefix = (0, _vue.computed)(() => {
+    return Boolean(context?.prefix?.length > 0);
+  });
+  const hasPrefixIcon = (0, _vue.computed)(() => {
+    return Boolean(context?.iconPrefix?.length > 0);
+  });
+  const hasSuffixIcon = (0, _vue.computed)(() => {
+    return Boolean(context?.iconSuffix?.length > 0);
+  });
+  const hasSuffix = (0, _vue.computed)(() => {
+    return Boolean(context?.suffix?.length > 0);
+  });
+  function generateId() {
+    return typeof crypto !== "undefined" && crypto.randomUUID ? crypto.randomUUID() : Math.random().toString(36).slice(2);
+  }
+  return {
+    generateId,
+    hasPrefix,
+    hasPrefixIcon,
+    hasSuffix,
+    hasSuffixIcon
+  };
+}

package/dist/composables/useFormKitSection.mjs

@@ -0,0 +1,19 @@
+import { computed } from "vue";
+export function useFormKitSection(context) {
+  const hasPrefix = computed(() => {
+    return Boolean(context?.prefix?.length > 0);
+  });
+  const hasPrefixIcon = computed(() => {
+    return Boolean(context?.iconPrefix?.length > 0);
+  });
+  const hasSuffixIcon = computed(() => {
+    return Boolean(context?.iconSuffix?.length > 0);
+  });
+  const hasSuffix = computed(() => {
+    return Boolean(context?.suffix?.length > 0);
+  });
+  function generateId() {
+    return typeof crypto !== "undefined" && crypto.randomUUID ? crypto.randomUUID() : Math.random().toString(36).slice(2);
+  }
+  return { generateId, hasPrefix, hasPrefixIcon, hasSuffix, hasSuffixIcon };
+}

package/dist/composables/useInputEditor.d.ts

@@ -0,0 +1,8 @@
+export declare function useInputEditor(): {
+    primeInputNames: string[];
+    primeOutputNames: string[];
+    editorDataToSchema: (data: any) => any;
+    editorDataToJson: (data: any) => string;
+    editorDataToCode: (data: any) => string;
+    schemaToEditorData: (schema: any) => any;
+};

package/dist/composables/useInputEditor.js

@@ -0,0 +1,148 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.useInputEditor = useInputEditor;
+function useInputEditor() {
+  const primeInputWithOptionNames = ["CascadeSelect", "Listbox", "MultiSelect", "RadioButton", "Select", "SelectButton", "TreeSelect"];
+  const primeInputNames = [...primeInputWithOptionNames, "AutoComplete", "Checkbox", "ColorPicker", "DatePicker", "Editor", "InputMask", "InputNumber", "InputOtp", "InputText", "Knob", "Password", "Rating", "Slider", "Textarea", "ToggleButton", "ToggleSwitch"].sort();
+  const primeOutputNames = ["OutputBoolean", "OutputDate", "OutputDuration", "OutputLink", "OutputList", "OutputNumber", "OutputReference", "OutputText"];
+  function editorDataToSchema(data) {
+    if (!data) return {};
+    const formkitInput = data?._dollar_formkit;
+    let tempData = {};
+    if (data.prime && Array.isArray(data.prime) && data.prime.length > 0) {
+      const mapped = data.prime.filter(entry => entry && typeof entry === "object" && "prime_key" in entry && "prime_value" in entry).map(entry => {
+        const key = entry.prime_key || "";
+        let value = entry.prime_value;
+        if (formkitInput === "primeInputOtp" && key === "length" && value !== void 0) {
+          value = Number(value);
+        }
+        return [key, value];
+      });
+      tempData = {
+        ...Object.fromEntries(mapped)
+      };
+    }
+    const readonlyValue = data.readonly === true ? true : void 0;
+    const disabledValue = data.disabled === true ? true : void 0;
+    const preserveValue = data.preserve === true ? true : void 0;
+    const defaultObject = {
+      readonly: readonlyValue,
+      disabled: disabledValue,
+      preserve: preserveValue
+    };
+    let outerClass = "";
+    if (data.outerClass) outerClass = `${outerClass} ${data.outerClass}`.trim();
+    let wrapperClass = "";
+    if (data.wrapperClass) wrapperClass = `${wrapperClass} ${data.wrapperClass}`.trim();
+    let innerClass = "";
+    if (data.innerClass) innerClass = `${innerClass} ${data.innerClass}`.trim();
+    const undefinedObject = {
+      prime: void 0,
+      schemaResultFormKey: void 0,
+      _dollar_formkit: void 0,
+      slots: void 0,
+      selectButton: void 0
+    };
+    const useOptions = formkitInput ? primeInputWithOptionNames.map(s => `prime${s}`).includes(formkitInput) : false;
+    let result;
+    if (useOptions) {
+      result = {
+        ...data,
+        $formkit: formkitInput,
+        ...tempData,
+        ...undefinedObject,
+        ...defaultObject,
+        outerClass,
+        wrapperClass,
+        innerClass,
+        optionLabel: "label",
+        optionValue: "value"
+      };
+    } else {
+      result = {
+        ...data,
+        $formkit: formkitInput,
+        ...tempData,
+        ...undefinedObject,
+        ...defaultObject,
+        outerClass,
+        wrapperClass,
+        innerClass,
+        options: void 0
+      };
+    }
+    for (const key in result) {
+      const value = result[key];
+      if (value !== null && value !== void 0 && typeof value === "string") {
+        if (value.trim().length === 0) {
+          result[key] = void 0;
+        }
+      }
+    }
+    return result;
+  }
+  function dataToSchema(data) {
+    if (!data) return {};
+    const schema = editorDataToSchema(data);
+    if (schema?.options && Array.isArray(schema.options)) {
+      const options = schema.options.map(o => o ? JSON.parse(JSON.stringify(o)) : {});
+      return {
+        ...schema,
+        options
+      };
+    } else {
+      return schema;
+    }
+  }
+  function editorDataToJson(data) {
+    if (!data) return "{}";
+    return JSON.stringify(dataToSchema(data));
+  }
+  function objectToString(data) {
+    if (!data) return "{}";
+    return `{${Object.entries(data).map(([key, value]) => {
+      if (key === "options" && Array.isArray(value) && value.length > 0) {
+        let result = "[";
+        value.forEach(o => {
+          if (o && typeof o === "object") {
+            result = `${result + objectToString(o)}, `;
+          }
+        });
+        return `${key}: ${result.substring(0, result.length - 2)}]`;
+      } else if (key === "primeInputOtp") {
+        return `${key}: ${value}`;
+      } else {
+        return `${key}: '${value}'`;
+      }
+    }).join()}}`;
+  }
+  function editorDataToObject(data) {
+    if (!data) return "{}";
+    try {
+      const jsonData = editorDataToJson(data);
+      return objectToString(JSON.parse(jsonData));
+    } catch (error) {
+      console.error("Error in editorDataToObject:", error);
+      return "{}";
+    }
+  }
+  function schemaToEditorData(schema) {
+    if (!schema) return {};
+    const formkitInput = schema?.$formkit;
+    return {
+      ...schema,
+      _dollar_formkit: formkitInput
+    };
+  }
+  return {
+    primeInputNames,
+    primeOutputNames,
+    editorDataToSchema,
+    editorDataToJson,
+    editorDataToCode: editorDataToObject,
+    schemaToEditorData
+  };
+}

package/dist/composables/useInputEditor.mjs

@@ -0,0 +1,143 @@
+export function useInputEditor() {
+  const primeInputWithOptionNames = ["CascadeSelect", "Listbox", "MultiSelect", "RadioButton", "Select", "SelectButton", "TreeSelect"];
+  const primeInputNames = [...primeInputWithOptionNames, "AutoComplete", "Checkbox", "ColorPicker", "DatePicker", "Editor", "InputMask", "InputNumber", "InputOtp", "InputText", "Knob", "Password", "Rating", "Slider", "Textarea", "ToggleButton", "ToggleSwitch"].sort();
+  const primeOutputNames = ["OutputBoolean", "OutputDate", "OutputDuration", "OutputLink", "OutputList", "OutputNumber", "OutputReference", "OutputText"];
+  function editorDataToSchema(data) {
+    if (!data)
+      return {};
+    const formkitInput = data?._dollar_formkit;
+    let tempData = {};
+    if (data.prime && Array.isArray(data.prime) && data.prime.length > 0) {
+      const mapped = data.prime.filter((entry) => entry && typeof entry === "object" && "prime_key" in entry && "prime_value" in entry).map((entry) => {
+        const key = entry.prime_key || "";
+        let value = entry.prime_value;
+        if (formkitInput === "primeInputOtp" && key === "length" && value !== void 0) {
+          value = Number(value);
+        }
+        return [key, value];
+      });
+      tempData = { ...Object.fromEntries(mapped) };
+    }
+    const readonlyValue = data.readonly === true ? true : void 0;
+    const disabledValue = data.disabled === true ? true : void 0;
+    const preserveValue = data.preserve === true ? true : void 0;
+    const defaultObject = {
+      readonly: readonlyValue,
+      disabled: disabledValue,
+      preserve: preserveValue
+    };
+    let outerClass = "";
+    if (data.outerClass)
+      outerClass = `${outerClass} ${data.outerClass}`.trim();
+    let wrapperClass = "";
+    if (data.wrapperClass)
+      wrapperClass = `${wrapperClass} ${data.wrapperClass}`.trim();
+    let innerClass = "";
+    if (data.innerClass)
+      innerClass = `${innerClass} ${data.innerClass}`.trim();
+    const undefinedObject = {
+      prime: void 0,
+      schemaResultFormKey: void 0,
+      _dollar_formkit: void 0,
+      slots: void 0,
+      selectButton: void 0
+    };
+    const useOptions = formkitInput ? primeInputWithOptionNames.map((s) => `prime${s}`).includes(formkitInput) : false;
+    let result;
+    if (useOptions) {
+      result = {
+        ...data,
+        $formkit: formkitInput,
+        ...tempData,
+        ...undefinedObject,
+        ...defaultObject,
+        outerClass,
+        wrapperClass,
+        innerClass,
+        optionLabel: "label",
+        optionValue: "value"
+      };
+    } else {
+      result = {
+        ...data,
+        $formkit: formkitInput,
+        ...tempData,
+        ...undefinedObject,
+        ...defaultObject,
+        outerClass,
+        wrapperClass,
+        innerClass,
+        options: void 0
+      };
+    }
+    for (const key in result) {
+      const value = result[key];
+      if (value !== null && value !== void 0 && typeof value === "string") {
+        if (value.trim().length === 0) {
+          result[key] = void 0;
+        }
+      }
+    }
+    return result;
+  }
+  function dataToSchema(data) {
+    if (!data)
+      return {};
+    const schema = editorDataToSchema(data);
+    if (schema?.options && Array.isArray(schema.options)) {
+      const options = schema.options.map((o) => o ? JSON.parse(JSON.stringify(o)) : {});
+      return { ...schema, options };
+    } else {
+      return schema;
+    }
+  }
+  function editorDataToJson(data) {
+    if (!data)
+      return "{}";
+    return JSON.stringify(dataToSchema(data));
+  }
+  function objectToString(data) {
+    if (!data)
+      return "{}";
+    return `{${Object.entries(data).map(([key, value]) => {
+      if (key === "options" && Array.isArray(value) && value.length > 0) {
+        let result = "[";
+        value.forEach((o) => {
+          if (o && typeof o === "object") {
+            result = `${result + objectToString(o)}, `;
+          }
+        });
+        return `${key}: ${result.substring(0, result.length - 2)}]`;
+      } else if (key === "primeInputOtp") {
+        return `${key}: ${value}`;
+      } else {
+        return `${key}: '${value}'`;
+      }
+    }).join()}}`;
+  }
+  function editorDataToObject(data) {
+    if (!data)
+      return "{}";
+    try {
+      const jsonData = editorDataToJson(data);
+      return objectToString(JSON.parse(jsonData));
+    } catch (error) {
+      console.error("Error in editorDataToObject:", error);
+      return "{}";
+    }
+  }
+  function schemaToEditorData(schema) {
+    if (!schema)
+      return {};
+    const formkitInput = schema?.$formkit;
+    return { ...schema, _dollar_formkit: formkitInput };
+  }
+  return {
+    primeInputNames,
+    primeOutputNames,
+    editorDataToSchema,
+    editorDataToJson,
+    editorDataToCode: editorDataToObject,
+    schemaToEditorData
+  };
+}