@sfxcode/formkit-primevue 2.2.2 → 2.3.0

package/dist/composables/useInputEditorSchema.d.ts

@@ -1,40 +1,15 @@
 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[];
-        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;
@@ -49,10 +24,8 @@ export declare function useInputEditorSchema(): {
         allowEmpty: boolean;
         key: string;
         preserve: boolean;
-        label?: undefined;
-        validation?: undefined;
-        validationVisibility?: undefined;
         if?: undefined;
+        label?: undefined;
     } | {
         $formkit: string;
         if: string;
@@ -61,27 +34,10 @@ export declare function useInputEditorSchema(): {
         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;
+        value?: undefined;
         allowEmpty?: undefined;
     } | {
         $formkit: string;
@@ -98,26 +54,6 @@ export declare function useInputEditorSchema(): {
         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[];

package/dist/composables/useInputEditorSchema.js

@@ -14,7 +14,12 @@ function useInputEditorSchema() {
   } = (0, _useFormKitSchema.useFormKitSchema)();
   function addFlexElement(children) {
     return addElement("div", children, {
-      style: "min-width: 40rem;display: flex;gap: 1rem;"
+      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() {
@@ -36,8 +41,8 @@ function useInputEditorSchema() {
       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();
+  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();
   function primeInputOptions(list) {
     return list.map(name => {
       return {
@@ -86,7 +91,12 @@ function useInputEditorSchema() {
     const formkitInput = data?._dollar_formkit;
     let tempData = {};
     if (data.prime?.length > 0) {
-      const mapped = data.prime?.map(entry => [entry.prime_key, entry.prime_value]);
+      const mapped = data.prime?.map(entry => {
+        const key = entry.prime_key;
+        let value = entry.prime_value;
+        if (formkitInput === "primeInputOtp" && key === "length") value = +value;
+        return [key, value];
+      });
       tempData = Object.assign(...mapped.map(([key, val]) => ({
         [key]: val
       })));
@@ -138,7 +148,7 @@ function useInputEditorSchema() {
     };
   }
   function editorSchema(inputOptions = primeInputOptions(primeInputNames)) {
-    return [{
+    return [addGridElement([{
       $formkit: "primeSelect",
       id: "inputSelection",
       name: "_dollar_formkit",
@@ -157,7 +167,7 @@ function useInputEditorSchema() {
       validationVisibility: "live",
       key: "schema_name",
       preserve: true
-    }, {
+    }]), {
       $formkit: "primeSelectButton",
       id: "selectButton",
       name: "selectButton",
@@ -183,6 +193,13 @@ function useInputEditorSchema() {
       key: "schema_help",
       preserve: true
     }, {
+      $formkit: "primeInputText",
+      if: "$get(selectButton).value === 'showBasic'",
+      name: "value",
+      label: "Input Value",
+      key: "schema_value",
+      preserve: true
+    }, addGridElement([{
       $formkit: "primeInputText",
       if: "$get(selectButton).value === 'showBasic'",
       name: "id",
@@ -192,16 +209,16 @@ function useInputEditorSchema() {
     }, {
       $formkit: "primeInputText",
       if: "$get(selectButton).value === 'showBasic'",
-      name: "value",
-      label: "Input Value",
-      key: "schema_value",
+      name: "key",
+      label: "Input Key",
+      key: "schema_key",
       preserve: true
     }, {
       $formkit: "primeInputText",
       if: "$get(selectButton).value === 'showBasic'",
-      name: "key",
-      label: "Input Key",
-      key: "schema_key",
+      name: "tabindex",
+      label: "Tab Index",
+      key: "schema_tabindex",
       preserve: true
     }, {
       $formkit: "primeCheckbox",
@@ -211,7 +228,7 @@ function useInputEditorSchema() {
       key: "schema_preserve",
       value: false,
       preserve: true
-    }, {
+    }]), {
       $formkit: "primeInputText",
       if: "$get(selectButton).value === 'showValidation'",
       name: "validation",
@@ -236,19 +253,12 @@ function useInputEditorSchema() {
       label: "Field Validation Label",
       key: "schema_validation-label",
       preserve: true
-    }, {
+    }, addGridElement([{
       $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",
+      name: "class",
+      label: "Input StyleClass",
+      key: "schema_class",
       preserve: true
     }, {
       $formkit: "primeInputText",
@@ -257,14 +267,14 @@ function useInputEditorSchema() {
       label: "Input Style",
       key: "schema_style",
       preserve: true
-    }, {
+    }]), {
       $formkit: "primeInputText",
       if: "$get(selectButton).value === 'showDisplay'",
-      name: "class",
-      label: "Input StyleClass",
-      key: "schema_class",
+      name: "if",
+      label: "Should Render (if-Expression)",
+      key: "schema_if",
       preserve: true
-    }, {
+    }, addGridElement([{
       $formkit: "primeInputText",
       if: "$get(selectButton).value === 'showDisplay'",
       name: "icon",
@@ -297,7 +307,7 @@ function useInputEditorSchema() {
       key: "schema_readonly",
       value: false,
       preserve: true
-    }, addList("options", [addFlexElement([addComponent("Button", {
+    }]), addList("options", [addFlexElement([addComponent("Button", {
       onClick: "$addNode($node)",
       label: "Add Option",
       class: "p-button-sm",

package/dist/composables/useInputEditorSchema.mjs

@@ -2,7 +2,10 @@ 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;" });
+    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;") => {
@@ -17,8 +20,8 @@ export function useInputEditorSchema() {
       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();
+  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();
   function primeInputOptions(list) {
     return list.map((name) => {
       return { label: name, value: `prime${name}` };
@@ -45,7 +48,13 @@ export function useInputEditorSchema() {
     const formkitInput = data?._dollar_formkit;
     let tempData = {};
     if (data.prime?.length > 0) {
-      const mapped = data.prime?.map((entry) => [entry.prime_key, entry.prime_value]);
+      const mapped = data.prime?.map((entry) => {
+        const key = entry.prime_key;
+        let value = entry.prime_value;
+        if (formkitInput === "primeInputOtp" && key === "length")
+          value = +value;
+        return [key, value];
+      });
       tempData = Object.assign(...mapped.map(([key, val]) => ({ [key]: val })));
     }
     const readonlyValue = data.readonly ? true : void 0;
@@ -71,27 +80,29 @@ export function useInputEditorSchema() {
   }
   function editorSchema(inputOptions = primeInputOptions(primeInputNames)) {
     return [
-      {
-        $formkit: "primeSelect",
-        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
-      },
+      addGridElement([
+        {
+          $formkit: "primeSelect",
+          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",
@@ -120,14 +131,6 @@ export function useInputEditorSchema() {
         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'",
@@ -136,23 +139,41 @@ export function useInputEditorSchema() {
         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
-      },
+      addGridElement([
+        {
+          $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: "key",
+          label: "Input Key",
+          key: "schema_key",
+          preserve: true
+        },
+        {
+          $formkit: "primeInputText",
+          if: "$get(selectButton).value === 'showBasic'",
+          name: "tabindex",
+          label: "Tab Index",
+          key: "schema_tabindex",
+          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'",
@@ -181,75 +202,71 @@ export function useInputEditorSchema() {
         key: "schema_validation-label",
         preserve: true
       },
-      {
-        $formkit: "primeInputText",
-        if: "$get(selectButton).value === 'showDisplay'",
-        name: "tabindex",
-        label: "Tab Index",
-        key: "schema_tabindex",
-        preserve: true
-      },
+      addGridElement([
+        {
+          $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: "style",
+          label: "Input Style",
+          key: "schema_style",
+          preserve: true
+        }
+      ]),
       {
         $formkit: "primeInputText",
         if: "$get(selectButton).value === 'showDisplay'",
         name: "if",
-        label: "Should Render",
+        label: "Should Render (if-Expression)",
         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: "primeSelect",
-        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
-      },
+      addGridElement([
+        {
+          $formkit: "primeInputText",
+          if: "$get(selectButton).value === 'showDisplay'",
+          name: "icon",
+          label: "Icon",
+          key: "schema_icon",
+          preserve: true
+        },
+        {
+          $formkit: "primeSelect",
+          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")

package/dist/plugins/index.d.ts

@@ -0,0 +1 @@
+export declare function addPrimeAsteriskPlugin(node: any): any;

package/dist/plugins/index.js

@@ -0,0 +1,25 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.addPrimeAsteriskPlugin = addPrimeAsteriskPlugin;
+function addPrimeAsteriskPlugin(node) {
+  if (!node.props.type.startsWith("prime")) return;
+  node.on("created", () => {
+    const schemaFn = node.props.definition.schema;
+    node.props.definition.schema = (sectionsSchema = {}) => {
+      sectionsSchema.label = {
+        children: ["$label", {
+          $el: "span",
+          if: "$state.required",
+          attrs: {
+            class: "p-formkit-asterisk"
+          },
+          children: ["*"]
+        }]
+      };
+      return schemaFn(sectionsSchema);
+    };
+  });
+}

package/dist/plugins/index.mjs

@@ -0,0 +1,20 @@
+export function addPrimeAsteriskPlugin(node) {
+  if (!node.props.type.startsWith("prime"))
+    return;
+  node.on("created", () => {
+    const schemaFn = node.props.definition.schema;
+    node.props.definition.schema = (sectionsSchema = {}) => {
+      sectionsSchema.label = {
+        children: ["$label", {
+          $el: "span",
+          if: "$state.required",
+          attrs: {
+            class: "p-formkit-asterisk"
+          },
+          children: ["*"]
+        }]
+      };
+      return schemaFn(sectionsSchema);
+    };
+  });
+}

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@sfxcode/formkit-primevue",
   "type": "module",
-  "version": "2.2.2",
+  "version": "2.3.0",
   "packageManager": "pnpm@9.4.0+sha256.b6fd0bfda555e7e584ad7e56b30c68b01d5a04f9ee93989f4b93ca8473c49c74",
   "author": {
     "name": "Tom",
@@ -34,6 +34,11 @@
       "import": "./dist/definitions/index.mjs",
       "require": "./dist/definitions/index.js"
     },
+    "./plugins": {
+      "types": "./dist/plugins/index.d.ts",
+      "import": "./dist/plugins/index.mjs",
+      "require": "./dist/plugins/index.js"
+    },
     "./dist/sass/formkit-primevue.scss": {
       "import": "./dist/sass/formkit-primevue.scss",
       "require": "./dist/sass/formkit-primevue.scss"