@sfxcode/formkit-primevue 2.3.5 → 2.3.7

package/dist/composables/useInputEditorSchema.mjs

@@ -2,7 +2,7 @@ import { useFormKitSchema } from "./useFormKitSchema.mjs";
 import { useInputEditor } from "./useInputEditor.mjs";
 export function useInputEditorSchema() {
   const { addElement, addList, addListGroup, addComponent } = useFormKitSchema();
-  const { primeInputNames } = useInputEditor();
+  const { primeInputNames, primeOutputNames } = useInputEditor();
   function addFlexElement(children) {
     return addElement("div", children, { style: "max-width: 40rem;display: flex;gap: 1rem;" });
   }
@@ -40,11 +40,7 @@ export function useInputEditorSchema() {
     { label: "Dirty", value: "dirty" },
     { label: "Submit", value: "submit" }
   ];
-  const positionOptions = [
-    { label: "Left", value: "left" },
-    { label: "Right", value: "right" }
-  ];
-  function editorSchema(inputOptions = primeInputOptions(primeInputNames)) {
+  function editorSchema(inputOptions = primeInputOptions([...primeInputNames, ...primeOutputNames])) {
     return [
       addGridElement([
         {
@@ -56,6 +52,7 @@ export function useInputEditorSchema() {
           optionLabel: "label",
           optionValue: "value",
           options: inputOptions,
+          filter: true,
           key: "schema_inputSelection",
           preserve: true
         },
@@ -97,14 +94,24 @@ export 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: "value",
+          label: "Input Value",
+          key: "schema_value",
+          preserve: true
+        },
+        {
+          $formkit: "primeInputText",
+          if: "$get(selectButton).value === 'showBasic'",
+          name: "format",
+          label: "Value Format",
+          key: "schema_format",
+          preserve: true
+        }
+      ]),
       addGridElement([
         {
           $formkit: "primeInputText",
@@ -198,20 +205,33 @@ export function useInputEditorSchema() {
         {
           $formkit: "primeInputText",
           if: "$get(selectButton).value === 'showDisplay'",
-          name: "icon",
-          label: "Icon",
-          key: "schema_icon",
+          name: "prefixIcon",
+          label: "Prefix Icon",
+          key: "schema_prefix_icon",
           preserve: true
         },
         {
-          $formkit: "primeSelect",
+          $formkit: "primeInputText",
           if: "$get(selectButton).value === 'showDisplay'",
-          name: "iconPosition",
-          label: "Icon Position",
-          optionLabel: "label",
-          optionValue: "value",
-          options: positionOptions,
-          key: "schema_iconPosition",
+          name: "prefix",
+          label: "Prefix",
+          key: "schema_prefix",
+          preserve: true
+        },
+        {
+          $formkit: "primeInputText",
+          if: "$get(selectButton).value === 'showDisplay'",
+          name: "suffix",
+          label: "Suffix",
+          key: "schema_suffix",
+          preserve: true
+        },
+        {
+          $formkit: "primeInputText",
+          if: "$get(selectButton).value === 'showDisplay'",
+          name: "suffixIcon",
+          label: "Suffix Icon",
+          key: "schema_suffix_icon",
           preserve: true
         },
         {

package/dist/sass/formkit-primevue.scss

@@ -13,24 +13,16 @@
   margin: 0;
   padding-bottom: 0.8rem;
 
-  .formkit-inner {
-
-    .p-formkit {
-
-      .p-formkit-icon {
+  .formkit-inner {.p-formkit {  .p-formkit-icon {
         box-sizing: border-box;
         width: 100%;
-      }
-
-      .p-inputtext, .p-textarea, .p-password, .p-multiselect, .p-select, .p-editor {
+      }  .p-inputtext, .p-textarea, .p-password, .p-multiselect, .p-select, .p-editor {
         box-sizing: border-box;
         width: 100%;
         &.p-colorpicker-preview {
           width: 2rem;
         }
-      }
-
-    }
+      }}
   }
 
   ul {
@@ -38,9 +30,7 @@
     margin-block-end: 2px;
   }
   .formkit-messages {
-    padding: 4px 0 0 0;
-
-    .formkit-message {
+    padding: 4px 0 0 0;.formkit-message {
       padding: 0;
       margin: 0;
       color: var(--formkit-error-color);
@@ -51,14 +41,10 @@
 }
 
 .formkit-outer[data-type="primeToggleSwitch"], .formkit-outer[data-type="primeCheckbox"], .formkit-outer[data-type="primeTriStateCheckbox"], .formkit-outer[data-type="primeRadioButton"] {
-  .formkit-inner {
-
-    .formkit-prime-right {
+  .formkit-inner {.formkit-prime-right {
       margin-left: 10px;
       font-size: 1rem;
-    }
-
-    .formkit-prime-left {
+    }.formkit-prime-left {
       margin-right: 10px;
       font-size: 1rem;
     }
@@ -128,9 +114,26 @@
 
 .p-formkit-icon-right {
   padding-left: 0.5rem;
-  float: right;
 }
 
+.formkit-prefix-icon {
+  padding-right: 0.5rem;
+}
+
+.formkit-prefix {
+  padding-right: 0.5rem;
+}
+
+.formkit-suffix-icon {
+  padding-left: 0.5rem;
+}
+
+.formkit-suffix {
+  padding-left: 0.5rem;
+}
+
+
+
 .p-formkit-data-debug {
   pre, span {
     font-size: 0.75rem;line-height: 1rem;

package/dist/style.css

@@ -1 +1 @@
-:root{--formkit-error-color: #ef9a9a}.formkit-form>.formkit-messages{margin:4px 0}.formkit-form>.formkit-messages .formkit-message{font-size:.8rem}.formkit-outer{margin:0;padding-bottom:.8rem}.formkit-outer .formkit-inner .p-formkit .p-formkit-icon{box-sizing:border-box;width:100%}.formkit-outer .formkit-inner .p-formkit .p-inputtext,.formkit-outer .formkit-inner .p-formkit .p-textarea,.formkit-outer .formkit-inner .p-formkit .p-password,.formkit-outer .formkit-inner .p-formkit .p-multiselect,.formkit-outer .formkit-inner .p-formkit .p-select,.formkit-outer .formkit-inner .p-formkit .p-editor{box-sizing:border-box;width:100%}.formkit-outer .formkit-inner .p-formkit .p-inputtext.p-colorpicker-preview,.formkit-outer .formkit-inner .p-formkit .p-textarea.p-colorpicker-preview,.formkit-outer .formkit-inner .p-formkit .p-password.p-colorpicker-preview,.formkit-outer .formkit-inner .p-formkit .p-multiselect.p-colorpicker-preview,.formkit-outer .formkit-inner .p-formkit .p-select.p-colorpicker-preview,.formkit-outer .formkit-inner .p-formkit .p-editor.p-colorpicker-preview{width:2rem}.formkit-outer ul{margin-block-start:2px;margin-block-end:2px}.formkit-outer .formkit-messages{padding:4px 0 0 0}.formkit-outer .formkit-messages .formkit-message{padding:0;margin:0;color:var(--formkit-error-color);list-style:none;font-size:.8rem}.formkit-outer[data-type=primeToggleSwitch] .formkit-inner .formkit-prime-right,.formkit-outer[data-type=primeCheckbox] .formkit-inner .formkit-prime-right,.formkit-outer[data-type=primeTriStateCheckbox] .formkit-inner .formkit-prime-right,.formkit-outer[data-type=primeRadioButton] .formkit-inner .formkit-prime-right{margin-left:10px;font-size:1rem}.formkit-outer[data-type=primeToggleSwitch] .formkit-inner .formkit-prime-left,.formkit-outer[data-type=primeCheckbox] .formkit-inner .formkit-prime-left,.formkit-outer[data-type=primeTriStateCheckbox] .formkit-inner .formkit-prime-left,.formkit-outer[data-type=primeRadioButton] .formkit-inner .formkit-prime-left{margin-right:10px;font-size:1rem}.formkit-label{display:block;margin:0;padding-bottom:.5rem;font-weight:bold;font-size:.8rem}.formkit-fieldset{margin:0;padding:0;border-radius:0;border:0}.formkit-fieldset:focus-within{border:0}.formkit-fieldset>.formkit-help{margin-top:0;margin-bottom:0}.formkit-legend{display:block;margin:0;padding:0}.formkit-help{margin:4px 0 0 0;font-size:.8rem;color:var(--text-color-secondary)}.formkit-messages{padding:0}.formkit-message{padding:0;margin:0;color:var(--formkit-error-color);list-style:none;font-size:.8rem}.formkit-actions{padding-top:.5rem}.p-formkit-radio-label{margin-left:1rem}.p-formkit-icon-left{padding-right:.5rem}.p-formkit-icon-right{padding-left:.5rem;float:right}.p-formkit-data-debug pre,.p-formkit-data-debug span{font-size:.75rem;line-height:1rem}.p-formkit-data-view .formkit-actions{display:none}
+:root{--formkit-error-color: #ef9a9a}.formkit-form>.formkit-messages{margin:4px 0}.formkit-form>.formkit-messages .formkit-message{font-size:.8rem}.formkit-outer{margin:0;padding-bottom:.8rem}.formkit-outer .formkit-inner .p-formkit .p-formkit-icon{box-sizing:border-box;width:100%}.formkit-outer .formkit-inner .p-formkit .p-inputtext,.formkit-outer .formkit-inner .p-formkit .p-textarea,.formkit-outer .formkit-inner .p-formkit .p-password,.formkit-outer .formkit-inner .p-formkit .p-multiselect,.formkit-outer .formkit-inner .p-formkit .p-select,.formkit-outer .formkit-inner .p-formkit .p-editor{box-sizing:border-box;width:100%}.formkit-outer .formkit-inner .p-formkit .p-inputtext.p-colorpicker-preview,.formkit-outer .formkit-inner .p-formkit .p-textarea.p-colorpicker-preview,.formkit-outer .formkit-inner .p-formkit .p-password.p-colorpicker-preview,.formkit-outer .formkit-inner .p-formkit .p-multiselect.p-colorpicker-preview,.formkit-outer .formkit-inner .p-formkit .p-select.p-colorpicker-preview,.formkit-outer .formkit-inner .p-formkit .p-editor.p-colorpicker-preview{width:2rem}.formkit-outer ul{margin-block-start:2px;margin-block-end:2px}.formkit-outer .formkit-messages{padding:4px 0 0 0}.formkit-outer .formkit-messages .formkit-message{padding:0;margin:0;color:var(--formkit-error-color);list-style:none;font-size:.8rem}.formkit-outer[data-type=primeToggleSwitch] .formkit-inner .formkit-prime-right,.formkit-outer[data-type=primeCheckbox] .formkit-inner .formkit-prime-right,.formkit-outer[data-type=primeTriStateCheckbox] .formkit-inner .formkit-prime-right,.formkit-outer[data-type=primeRadioButton] .formkit-inner .formkit-prime-right{margin-left:10px;font-size:1rem}.formkit-outer[data-type=primeToggleSwitch] .formkit-inner .formkit-prime-left,.formkit-outer[data-type=primeCheckbox] .formkit-inner .formkit-prime-left,.formkit-outer[data-type=primeTriStateCheckbox] .formkit-inner .formkit-prime-left,.formkit-outer[data-type=primeRadioButton] .formkit-inner .formkit-prime-left{margin-right:10px;font-size:1rem}.formkit-label{display:block;margin:0;padding-bottom:.5rem;font-weight:bold;font-size:.8rem}.formkit-fieldset{margin:0;padding:0;border-radius:0;border:0}.formkit-fieldset:focus-within{border:0}.formkit-fieldset>.formkit-help{margin-top:0;margin-bottom:0}.formkit-legend{display:block;margin:0;padding:0}.formkit-help{margin:4px 0 0 0;font-size:.8rem;color:var(--text-color-secondary)}.formkit-messages{padding:0}.formkit-message{padding:0;margin:0;color:var(--formkit-error-color);list-style:none;font-size:.8rem}.formkit-actions{padding-top:.5rem}.p-formkit-radio-label{margin-left:1rem}.p-formkit-icon-left{padding-right:.5rem}.p-formkit-icon-right{padding-left:.5rem}.formkit-prefix-icon{padding-right:.5rem}.formkit-prefix{padding-right:.5rem}.formkit-suffix-icon{padding-left:.5rem}.formkit-suffix{padding-left:.5rem}.p-formkit-data-debug pre,.p-formkit-data-debug span{font-size:.75rem;line-height:1rem}.p-formkit-data-view .formkit-actions{display:none}

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@sfxcode/formkit-primevue",
   "type": "module",
-  "version": "2.3.5",
+  "version": "2.3.7",
   "packageManager": "pnpm@9.4.0+sha256.b6fd0bfda555e7e584ad7e56b30c68b01d5a04f9ee93989f4b93ca8473c49c74",
   "author": {
     "name": "Tom",

package/dist/composables/useFormKitOutput.d.ts

@@ -1,3 +0,0 @@
-export declare function useFormKitOutput(context: any, componentClass?: string): {
-    wrapperClass: import("vue").ComputedRef<string>;
-};

package/dist/composables/useFormKitOutput.js

@@ -1,15 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.useFormKitOutput = useFormKitOutput;
-var _vue = require("vue");
-function useFormKitOutput(context, componentClass = "") {
-  const wrapperClass = (0, _vue.computed)(() => {
-    return context?.wrapperClass ? `p-formkit ${componentClass} ${context?.wrapperClass}` : `p-formkit ${componentClass}`;
-  });
-  return {
-    wrapperClass
-  };
-}

package/dist/composables/useFormKitOutput.mjs

@@ -1,7 +0,0 @@
-import { computed } from "vue";
-export function useFormKitOutput(context, componentClass = "") {
-  const wrapperClass = computed(() => {
-    return context?.wrapperClass ? `p-formkit ${componentClass} ${context?.wrapperClass}` : `p-formkit ${componentClass}`;
-  });
-  return { wrapperClass };
-}