@sfxcode/formkit-primevue 2.3.8 → 2.3.10

package/dist/composables/useInputEditor.js

@@ -34,12 +34,17 @@ function useInputEditor() {
       disabled: disabledValue,
       preserve: preserveValue
     };
+    let outerClass = "";
+    if (data.outerClassGrid && data.outerClassGrid !== "col-12") outerClass = `${outerClass} ${data.outerClassGrid}`;
+    if (data.outerClass) outerClass = outerClass + data.outerClass;
+    if (outerClass.trim().length === 0) outerClass = void 0;
     const undefinedObject = {
       prime: void 0,
       schemaResultFormKey: void 0,
       _dollar_formkit: void 0,
       slots: void 0,
-      selectButton: void 0
+      selectButton: void 0,
+      outerClassGrid: void 0
     };
     const useOptions = primeInputWithOptionNames.map(s => `prime${s}`).includes(formkitInput);
     let result = {};
@@ -49,6 +54,7 @@ function useInputEditor() {
       ...tempData,
       ...undefinedObject,
       ...defaultObject,
+      outerClass,
       optionLabel: "label",
       optionValue: "value"
     };else result = {
@@ -57,6 +63,7 @@ function useInputEditor() {
       ...tempData,
       ...undefinedObject,
       ...defaultObject,
+      outerClass,
       options: void 0
     };
     return result;

package/dist/composables/useInputEditor.mjs

@@ -24,13 +24,20 @@ export function useInputEditor() {
     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 };
+    let outerClass = "";
+    if (data.outerClassGrid && data.outerClassGrid !== "col-12")
+      outerClass = `${outerClass} ${data.outerClassGrid}`;
+    if (data.outerClass)
+      outerClass = outerClass + data.outerClass;
+    if (outerClass.trim().length === 0)
+      outerClass = void 0;
+    const undefinedObject = { prime: void 0, schemaResultFormKey: void 0, _dollar_formkit: void 0, slots: void 0, selectButton: void 0, outerClassGrid: void 0 };
     const useOptions = primeInputWithOptionNames.map((s) => `prime${s}`).includes(formkitInput);
     let result = {};
     if (useOptions)
-      result = { ...data, $formkit: formkitInput, ...tempData, ...undefinedObject, ...defaultObject, optionLabel: "label", optionValue: "value" };
+      result = { ...data, $formkit: formkitInput, ...tempData, ...undefinedObject, ...defaultObject, outerClass, optionLabel: "label", optionValue: "value" };
     else
-      result = { ...data, $formkit: formkitInput, ...tempData, ...undefinedObject, ...defaultObject, options: void 0 };
+      result = { ...data, $formkit: formkitInput, ...tempData, ...undefinedObject, ...defaultObject, outerClass, options: void 0 };
     return result;
   }
   function dataToSchema(data) {

package/dist/composables/useInputEditorSchema.d.ts

@@ -1,15 +1,46 @@
 export declare function useInputEditorSchema(): {
     editorSchema: (inputOptions?: any[]) => ({
-        $el: string;
-        if: string;
-        attrs: object;
-        children: string | 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[];
+        filter: boolean;
+        key: string;
+        outerClass: string;
+        preserve: boolean;
+        validation?: undefined;
+        validationVisibility?: undefined;
+        allowEmpty?: undefined;
+        if?: undefined;
+        suffix?: undefined;
+    } | {
+        $formkit: string;
+        name: string;
+        label: string;
+        validation: string;
+        validationVisibility: string;
+        key: string;
+        outerClass: string;
+        preserve: boolean;
+        id?: undefined;
+        value?: undefined;
+        optionLabel?: undefined;
+        optionValue?: undefined;
+        options?: undefined;
+        filter?: undefined;
+        allowEmpty?: undefined;
+        if?: undefined;
+        suffix?: undefined;
     } | {
         $formkit: string;
         id: string;
@@ -24,8 +55,13 @@ export declare function useInputEditorSchema(): {
         allowEmpty: boolean;
         key: string;
         preserve: boolean;
-        if?: undefined;
         label?: undefined;
+        filter?: undefined;
+        outerClass?: undefined;
+        validation?: undefined;
+        validationVisibility?: undefined;
+        if?: undefined;
+        suffix?: undefined;
     } | {
         $formkit: string;
         if: string;
@@ -34,17 +70,76 @@ export declare function useInputEditorSchema(): {
         key: string;
         preserve: boolean;
         id?: undefined;
-        options?: undefined;
+        value?: undefined;
         optionLabel?: undefined;
         optionValue?: undefined;
+        options?: undefined;
+        filter?: undefined;
+        outerClass?: undefined;
+        validation?: undefined;
+        validationVisibility?: undefined;
+        allowEmpty?: undefined;
+        suffix?: undefined;
+    } | {
+        $formkit: string;
+        if: string;
+        name: string;
+        label: string;
+        key: string;
+        outerClass: string;
+        preserve: boolean;
+        id?: undefined;
         value?: undefined;
+        optionLabel?: undefined;
+        optionValue?: undefined;
+        options?: undefined;
+        filter?: undefined;
+        validation?: undefined;
+        validationVisibility?: undefined;
+        allowEmpty?: undefined;
+        suffix?: undefined;
+    } | {
+        $formkit: string;
+        if: string;
+        name: string;
+        label: string;
+        key: string;
+        value: boolean;
+        suffix: string;
+        outerClass: string;
+        preserve: boolean;
+        id?: undefined;
+        optionLabel?: undefined;
+        optionValue?: undefined;
+        options?: undefined;
+        filter?: undefined;
+        validation?: undefined;
+        validationVisibility?: undefined;
         allowEmpty?: undefined;
     } | {
         $formkit: string;
         if: string;
         name: string;
         label: string;
+        key: string;
+        value: boolean;
+        outerClass: string;
+        preserve: boolean;
+        id?: undefined;
+        optionLabel?: undefined;
+        optionValue?: undefined;
+        options?: undefined;
+        filter?: undefined;
+        validation?: undefined;
+        validationVisibility?: undefined;
+        allowEmpty?: undefined;
+        suffix?: undefined;
+    } | {
+        $formkit: string;
+        if: string;
+        name: string;
         value: string;
+        label: string;
         optionLabel: string;
         optionValue: string;
         options: {
@@ -52,9 +147,14 @@ export declare function useInputEditorSchema(): {
             value: string;
         }[];
         key: string;
+        outerClass: string;
         preserve: boolean;
         id?: undefined;
+        filter?: undefined;
+        validation?: undefined;
+        validationVisibility?: undefined;
         allowEmpty?: undefined;
+        suffix?: undefined;
     })[];
     primeInputOptions: (list: string[]) => {
         label: string;

package/dist/composables/useInputEditorSchema.js

@@ -6,46 +6,20 @@ Object.defineProperty(exports, "__esModule", {
 exports.useInputEditorSchema = useInputEditorSchema;
 var _useFormKitSchema = require("./useFormKitSchema");
 var _useInputEditor = require("./useInputEditor");
+var _useFormKitRepeater = require("./useFormKitRepeater");
 function useInputEditorSchema() {
   const {
-    addElement,
     addList,
-    addListGroup,
-    addComponent
+    addListGroup
   } = (0, _useFormKitSchema.useFormKitSchema)();
+  const {
+    addInsertButton,
+    addGroupButtons
+  } = (0, _useFormKitRepeater.useFormKitRepeater)();
   const {
     primeInputNames,
     primeOutputNames
   } = (0, _useInputEditor.useInputEditor)();
-  function addFlexElement(children) {
-    return addElement("div", children, {
-      style: "max-width: 40rem;display: flex;gap: 1rem;"
-    });
-  }
-  function addGridElement(children) {
-    return addElement("div", children, {
-      style: "display: grid;grid-template-columns:repeat(2, minmax(0, 1fr));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;"
-    });
-  }
   function primeInputOptions(list) {
     return list.map(name => {
       return {
@@ -60,6 +34,9 @@ function useInputEditorSchema() {
   }, {
     label: "Display",
     value: "showDisplay"
+  }, {
+    label: "Style",
+    value: "showStyle"
   }, {
     label: "Validation",
     value: "showValidation"
@@ -83,8 +60,45 @@ function useInputEditorSchema() {
     label: "Submit",
     value: "submit"
   }];
+  const colOptions = [{
+    label: "Col-1",
+    value: "col-1"
+  }, {
+    label: "Col-2",
+    value: "col-2"
+  }, {
+    label: "Col-3",
+    value: "col-3"
+  }, {
+    label: "Col-4",
+    value: "col-4"
+  }, {
+    label: "Col-5",
+    value: "col-5"
+  }, {
+    label: "Col-6",
+    value: "col-6"
+  }, {
+    label: "Col-7",
+    value: "col-7"
+  }, {
+    label: "Col-8",
+    value: "col-8"
+  }, {
+    label: "Col-9",
+    value: "col-9"
+  }, {
+    label: "Col-10",
+    value: "col-10"
+  }, {
+    label: "Col-11",
+    value: "col-11"
+  }, {
+    label: "Col-12",
+    value: "col-12"
+  }];
   function editorSchema(inputOptions = primeInputOptions([...primeInputNames, ...primeOutputNames])) {
-    return [addGridElement([{
+    return [{
       $formkit: "primeSelect",
       id: "inputSelection",
       name: "_dollar_formkit",
@@ -95,6 +109,7 @@ function useInputEditorSchema() {
       options: inputOptions,
       filter: true,
       key: "schema_inputSelection",
+      outerClass: "col-6",
       preserve: true
     }, {
       $formkit: "primeInputText",
@@ -103,8 +118,9 @@ function useInputEditorSchema() {
       validation: "required",
       validationVisibility: "live",
       key: "schema_name",
+      outerClass: "col-6",
       preserve: true
-    }]), {
+    }, {
       $formkit: "primeSelectButton",
       id: "selectButton",
       name: "selectButton",
@@ -129,12 +145,13 @@ function useInputEditorSchema() {
       label: "Input Help",
       key: "schema_help",
       preserve: true
-    }, addGridElement([{
+    }, {
       $formkit: "primeInputText",
       if: "$get(selectButton).value === 'showBasic'",
       name: "value",
       label: "Input Value",
       key: "schema_value",
+      outerClass: "col-6",
       preserve: true
     }, {
       $formkit: "primeInputText",
@@ -142,13 +159,15 @@ function useInputEditorSchema() {
       name: "format",
       label: "Value Format",
       key: "schema_format",
+      outerClass: "col-6",
       preserve: true
-    }]), addGridElement([{
+    }, {
       $formkit: "primeInputText",
       if: "$get(selectButton).value === 'showBasic'",
       name: "id",
       label: "Input ID",
       key: "schema_id",
+      outerClass: "col-6",
       preserve: true
     }, {
       $formkit: "primeInputText",
@@ -156,6 +175,7 @@ function useInputEditorSchema() {
       name: "key",
       label: "Input Key",
       key: "schema_key",
+      outerClass: "col-6",
       preserve: true
     }, {
       $formkit: "primeInputText",
@@ -163,46 +183,25 @@ function useInputEditorSchema() {
       name: "tabindex",
       label: "Tab Index",
       key: "schema_tabindex",
+      outerClass: "col-6",
       preserve: true
     }, {
       $formkit: "primeCheckbox",
       if: "$get(selectButton).value === 'showBasic'",
       name: "preserve",
-      label: "Input Preserve",
+      label: "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: "primeSelect",
-      if: "$get(selectButton).value === 'showValidation'",
-      name: "validation-visibility",
-      label: "Field Validation Visibility",
-      value: "blur",
-      optionLabel: "label",
-      optionValue: "value",
-      options: validationOptions,
-      key: "schema_validation-visibility",
+      suffix: "Input Preserve",
+      outerClass: "col-3",
       preserve: true
     }, {
-      $formkit: "primeInputText",
-      if: "$get(selectButton).value === 'showValidation'",
-      name: "validation-label",
-      label: "Field Validation Label",
-      key: "schema_validation-label",
-      preserve: true
-    }, addGridElement([{
       $formkit: "primeInputText",
       if: "$get(selectButton).value === 'showDisplay'",
       name: "class",
       label: "Input StyleClass",
       key: "schema_class",
+      outerClass: "col-6",
       preserve: true
     }, {
       $formkit: "primeInputText",
@@ -210,20 +209,22 @@ function useInputEditorSchema() {
       name: "style",
       label: "Input Style",
       key: "schema_style",
+      outerClass: "col-6",
       preserve: true
-    }]), {
+    }, {
       $formkit: "primeInputText",
       if: "$get(selectButton).value === 'showDisplay'",
       name: "if",
       label: "Should Render (if-Expression)",
       key: "schema_if",
       preserve: true
-    }, addGridElement([{
+    }, {
       $formkit: "primeInputText",
       if: "$get(selectButton).value === 'showDisplay'",
       name: "prefixIcon",
       label: "Prefix Icon",
       key: "schema_prefix_icon",
+      outerClass: "col-6",
       preserve: true
     }, {
       $formkit: "primeInputText",
@@ -231,6 +232,7 @@ function useInputEditorSchema() {
       name: "prefix",
       label: "Prefix",
       key: "schema_prefix",
+      outerClass: "col-6",
       preserve: true
     }, {
       $formkit: "primeInputText",
@@ -238,6 +240,7 @@ function useInputEditorSchema() {
       name: "suffix",
       label: "Suffix",
       key: "schema_suffix",
+      outerClass: "col-6",
       preserve: true
     }, {
       $formkit: "primeInputText",
@@ -245,6 +248,7 @@ function useInputEditorSchema() {
       name: "suffixIcon",
       label: "Suffix Icon",
       key: "schema_suffix_icon",
+      outerClass: "col-6",
       preserve: true
     }, {
       $formkit: "primeCheckbox",
@@ -253,6 +257,7 @@ function useInputEditorSchema() {
       label: "Input Disabled",
       key: "schema_disabled",
       value: false,
+      outerClass: "col-3",
       preserve: true
     }, {
       $formkit: "primeCheckbox",
@@ -261,39 +266,79 @@ function useInputEditorSchema() {
       label: "Input Read Only",
       key: "schema_readonly",
       value: false,
+      outerClass: "col-3",
       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",
+      if: "$get(selectButton).value === 'showStyle'",
+      name: "outerClass",
+      label: "Outer Class",
+      key: "schema_outerClass",
+      outerClass: "col-6",
+      preserve: true
+    }, {
+      $formkit: "primeSelect",
+      if: "$get(selectButton).value === 'showStyle'",
+      name: "outerClassGrid",
+      value: "col-12",
+      label: "Grid Options",
+      optionLabel: "label",
+      optionValue: "value",
+      options: colOptions,
+      key: "schema_outer-class-grid",
+      outerClass: "col-6",
+      preserve: true
+    }, {
+      $formkit: "primeInputText",
+      if: "$get(selectButton).value === 'showValidation'",
+      name: "validation",
+      label: "Field Validation",
+      key: "schema_validation",
+      outerClass: "col-6",
+      preserve: true
+    }, {
+      $formkit: "primeSelect",
+      if: "$get(selectButton).value === 'showValidation'",
+      name: "validation-visibility",
+      label: "Field Validation Visibility",
+      value: "blur",
+      optionLabel: "label",
+      optionValue: "value",
+      options: validationOptions,
+      key: "schema_validation-visibility",
+      outerClass: "col-6",
+      preserve: true
+    }, {
+      $formkit: "primeInputText",
+      if: "$get(selectButton).value === 'showValidation'",
+      name: "validation-label",
+      label: "Field Validation Label",
+      key: "schema_validation-label",
+      preserve: true
+    }, addList("options", [addInsertButton("Add Option"), addListGroup([{
       $formkit: "primeInputText",
       label: "Label",
-      name: "label"
+      name: "label",
+      outerClass: "col-4"
     }, {
       $formkit: "primeInputText",
       label: "Value",
-      name: "value"
-    }, addGroupButtons()])])], true, "$get(selectButton).value === 'showOptions'", {
+      name: "value",
+      outerClass: "col-4"
+    }, 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([{
+    }), addList("prime", [addInsertButton("Add PrimeVue Attribute"), addListGroup([{
       $formkit: "primeInputText",
-      label: "PrimeVue Property",
-      name: "prime_key"
+      label: "PrimeVue Key",
+      name: "prime_key",
+      outerClass: "col-3"
     }, {
       $formkit: "primeInputText",
       label: "Value",
-      name: "prime_value"
-    }, addGroupButtons()])])], true, "$get(selectButton).value === 'showPrime'", {
+      name: "prime_value",
+      outerClass: "col-3"
+    }, addGroupButtons()])], true, "$get(selectButton).value === 'showPrime'", {
       key: "schema_prime",
       preserve: true
     })];