@sfxcode/formkit-primevue 2.3.5 → 2.3.7

package/dist/components/PrimeOutputText.vue

@@ -1,16 +1,18 @@
 <script setup lang='ts'>
-import { useFormKitIcon, useFormKitOutput } from '../composables'
+import { useFormKitSection } from '../composables'
 
 const props = defineProps({
   context: Object,
 })
-const { wrapperClass } = useFormKitOutput(props.context, 'p-output-text')
-const { hasIcon, icon, iconPosition } = useFormKitIcon(props.context)
+const { hasPrefix, hasPrefixIcon, hasSuffix, hasSuffixIcon } = useFormKitSection(props.context)
 </script>
 
 <template>
-  <div :class="wrapperClass">
-    <i v-if="hasIcon && iconPosition === 'left'" :class="icon" class="p-formkit-icon-left" />
+  <div class="p-formkit p-output-text">
+    <i v-if="hasPrefixIcon" class="formkit-prefix-icon" :class="context?.prefixIcon" />
+    <span v-if="hasPrefix" class="formkit-prefix">
+      {{ context?.attrs?.prefix }}
+    </span>
     <span
       :id="context?.id"
       :style="context?.attrs?.style"
@@ -18,6 +20,9 @@ const { hasIcon, icon, iconPosition } = useFormKitIcon(props.context)
     >
       {{ context?._value }}
     </span>
-    <i v-if="hasIcon && iconPosition === 'right'" :class="icon" class="p-formkit-icon-right" />
+    <span v-if="hasSuffix" class="formkit-suffix">
+      {{ context?.attrs?.suffix }}
+    </span>
+    <i v-if="hasSuffixIcon" class="formkit-suffix-icon" :class="context?.suffixIcon" />
   </div>
 </template>

package/dist/components/PrimePassword.vue

@@ -20,7 +20,7 @@ export interface FormKitPrimePasswordProps {
   placeholder?: PasswordProps['placeholder']
   feedback?: PasswordProps['feedback']
   toggleMask?: PasswordProps['toggleMask']
-  wrapperClass?: string
+
 }
 
 const props = defineProps({
@@ -30,11 +30,11 @@ const props = defineProps({
   },
 })
 
-const { styleClass, wrapperClass, handleInput, handleBlur } = useFormKitInput(props.context)
+const { styleClass, handleInput, handleBlur } = useFormKitInput(props.context)
 </script>
 
 <template>
-  <div :class="wrapperClass">
+  <div class="p-formkit">
     <Password
       v-model="context._value"
       v-bind="context?.attrs"

package/dist/components/PrimeRadioButton.vue

@@ -12,7 +12,7 @@ export interface FormKitPrimeRadioButtonProps {
   options?: { label: string, value: any }[]
   optionClass?: string
   labelClass?: string
-  wrapperClass?: string
+
 }
 
 const props = defineProps({
@@ -22,11 +22,11 @@ const props = defineProps({
   },
 })
 
-const { styleClass, wrapperClass, handleChange, handleBlur } = useFormKitInput(props.context)
+const { styleClass, handleChange, handleBlur } = useFormKitInput(props.context)
 </script>
 
 <template>
-  <div :class="wrapperClass">
+  <div class="p-formkit">
     <div v-for="option in context.options" :key="option.value" :class="context.optionClass">
       <RadioButton
         :id="context.id"

package/dist/components/PrimeRating.vue

@@ -12,7 +12,7 @@ export interface FormKitPrimeRatingProps {
   offIcon?: RatingProps['offIcon']
   ptOptions?: RatingProps['ptOptions']
   pt?: RatingProps['pt']
-  wrapperClass?: string
+
 }
 
 const props = defineProps({
@@ -22,11 +22,11 @@ const props = defineProps({
   },
 })
 
-const { styleClass, wrapperClass, handleInput, handleBlur } = useFormKitInput(props.context)
+const { styleClass, handleInput, handleBlur } = useFormKitInput(props.context)
 </script>
 
 <template>
-  <div :class="wrapperClass">
+  <div class="p-formkit">
     <Rating
       :id="context.id"
       v-model="context._value"

package/dist/components/PrimeSelect.vue

@@ -37,7 +37,7 @@ export interface FormKitPrimeSelectProps {
   pt?: SelectProps['pt']
   ptOptions?: SelectProps['ptOptions']
   unstyled?: SelectProps['unstyled']
-  wrapperClass?: string
+
 }
 
 const props = defineProps({
@@ -47,11 +47,11 @@ const props = defineProps({
   },
 })
 
-const { styleClass, wrapperClass, handleInput, handleBlur } = useFormKitInput(props.context)
+const { styleClass, handleInput, handleBlur } = useFormKitInput(props.context)
 </script>
 
 <template>
-  <div :class="wrapperClass">
+  <div class="p-formkit">
     <Select
       v-model="context._value"
       v-bind="context?.attrs"

package/dist/components/PrimeSelectButton.vue

@@ -15,7 +15,7 @@ export interface FormKitPrimeSelectButtonProps {
   multiple?: SelectButtonProps['multiple']
   dataKey?: SelectButtonProps['dataKey']
   options?: SelectButtonProps['options']
-  wrapperClass?: string
+
 }
 
 const props = defineProps({
@@ -25,11 +25,11 @@ const props = defineProps({
   },
 })
 
-const { styleClass, wrapperClass, handleChange, handleBlur } = useFormKitInput(props.context)
+const { styleClass, handleChange, handleBlur } = useFormKitInput(props.context)
 </script>
 
 <template>
-  <div :class="wrapperClass">
+  <div class="p-formkit">
     <SelectButton
       :id="context.id"
       v-model="context._value"

package/dist/components/PrimeSlider.vue

@@ -14,7 +14,7 @@ export interface FormKitPrimeSliderProps {
   step?: SliderProps['step']
   range?: SliderProps['range']
   orientation?: SliderProps['orientation']
-  wrapperClass?: string
+
 }
 
 const props = defineProps({
@@ -24,7 +24,7 @@ const props = defineProps({
   },
 })
 
-const { styleClass, wrapperClass, handleBlur } = useFormKitInput(props.context)
+const { styleClass, handleBlur } = useFormKitInput(props.context)
 
 function handleInput(e: any) {
   props.context?.node.input(e)
@@ -33,7 +33,7 @@ function handleInput(e: any) {
 </script>
 
 <template>
-  <div :class="wrapperClass">
+  <div class="p-formkit">
     <Slider
       :id="context.id"
       v-model="context._value"

package/dist/components/PrimeTextarea.vue

@@ -12,7 +12,7 @@ export interface FormKitPrimeTextareaProps {
   autoResize?: TextareaProps['autoResize']
   rows?: TextareaProps['rows']
   placeholder?: TextareaProps['placeholder']
-  wrapperClass?: string
+
 }
 
 const props = defineProps({
@@ -22,11 +22,11 @@ const props = defineProps({
   },
 })
 
-const { styleClass, wrapperClass, handleInput, handleBlur } = useFormKitInput(props.context)
+const { styleClass, handleInput, handleBlur } = useFormKitInput(props.context)
 </script>
 
 <template>
-  <div :class="wrapperClass">
+  <div class="p-formkit">
     <Textarea
       :id="context.id"
       v-model="context._value"

package/dist/components/PrimeToggleButton.vue

@@ -14,7 +14,7 @@ export interface FormKitPrimeToggleButtonProps {
   onIcon?: ToggleButtonProps['onIcon']
   offIcon?: ToggleButtonProps['offIcon']
   iconPos?: ToggleButtonProps['iconPos']
-  wrapperClass?: string
+
 }
 
 const props = defineProps({
@@ -24,11 +24,11 @@ const props = defineProps({
   },
 })
 
-const { styleClass, wrapperClass, handleChange, handleBlur } = useFormKitInput(props.context)
+const { styleClass, handleChange, handleBlur } = useFormKitInput(props.context)
 </script>
 
 <template>
-  <div :class="wrapperClass">
+  <div class="p-formkit">
     <ToggleButton
       v-model="context._value"
       v-bind="context?.attrs"

package/dist/components/PrimeToggleSwitch.vue

@@ -13,7 +13,7 @@ export interface FormKitPrimeToggleSwitchProps {
   unstyled?: ToggleSwitchProps['unstyled']
   labelLeft?: string
   labelRight?: string
-  wrapperClass?: string
+
 }
 
 const props = defineProps({
@@ -23,11 +23,11 @@ const props = defineProps({
   },
 })
 
-const { styleClass, wrapperClass, handleInput, handleBlur } = useFormKitInput(props.context)
+const { styleClass, handleInput, handleBlur } = useFormKitInput(props.context)
 </script>
 
 <template>
-  <div :class="wrapperClass">
+  <div class="p-formkit">
     <span v-if="context.labelLeft" class="formkit-prime-left">{{ context.labelLeft }}</span>
     <ToggleSwitch
       v-model="context._value"

package/dist/components/PrimeTreeSelect.vue

@@ -19,7 +19,7 @@ export interface FormKitPrimeTreeSelectProps {
   scrollHeight?: TreeSelectProps['scrollHeight']
   panelClass?: TreeSelectProps['panelClass']
   variant?: TreeSelectProps['variant']
-  wrapperClass?: string
+
 }
 
 const props = defineProps({
@@ -29,11 +29,11 @@ const props = defineProps({
   },
 })
 
-const { styleClass, wrapperClass, handleInput, handleBlur } = useFormKitInput(props.context)
+const { styleClass, handleInput, handleBlur } = useFormKitInput(props.context)
 </script>
 
 <template>
-  <div :class="wrapperClass">
+  <div class="p-formkit">
     <TreeSelect
       v-model="context._value"
       v-bind="context?.attrs"

package/dist/composables/index.d.ts

@@ -1,8 +1,8 @@
 import { useFormKitIcon } from './useFormKitIcon';
 import { useFormKitInput } from './useFormKitInput';
-import { useFormKitOutput } from './useFormKitOutput';
 import { useFormKitSchema } from './useFormKitSchema';
+import { useFormKitSection } from './useFormKitSection';
 import { useInputEditor } from './useInputEditor';
 import { useInputEditorSchema } from './useInputEditorSchema';
 import { useOutputDuration } from './useOutputDuration';
-export { useFormKitIcon, useFormKitInput, useFormKitOutput, useFormKitSchema, useInputEditor, useInputEditorSchema, useOutputDuration, };
+export { useFormKitIcon, useFormKitInput, useFormKitSchema, useFormKitSection, useInputEditor, useInputEditorSchema, useOutputDuration, };

package/dist/composables/index.js

@@ -15,16 +15,16 @@ Object.defineProperty(exports, "useFormKitInput", {
     return _useFormKitInput.useFormKitInput;
   }
 });
-Object.defineProperty(exports, "useFormKitOutput", {
+Object.defineProperty(exports, "useFormKitSchema", {
   enumerable: true,
   get: function () {
-    return _useFormKitOutput.useFormKitOutput;
+    return _useFormKitSchema.useFormKitSchema;
   }
 });
-Object.defineProperty(exports, "useFormKitSchema", {
+Object.defineProperty(exports, "useFormKitSection", {
   enumerable: true,
   get: function () {
-    return _useFormKitSchema.useFormKitSchema;
+    return _useFormKitSection.useFormKitSection;
   }
 });
 Object.defineProperty(exports, "useInputEditor", {
@@ -47,8 +47,8 @@ Object.defineProperty(exports, "useOutputDuration", {
 });
 var _useFormKitIcon = require("./useFormKitIcon");
 var _useFormKitInput = require("./useFormKitInput");
-var _useFormKitOutput = require("./useFormKitOutput");
 var _useFormKitSchema = require("./useFormKitSchema");
+var _useFormKitSection = require("./useFormKitSection");
 var _useInputEditor = require("./useInputEditor");
 var _useInputEditorSchema = require("./useInputEditorSchema");
 var _useOutputDuration = require("./useOutputDuration");

package/dist/composables/index.mjs

@@ -1,15 +1,15 @@
 import { useFormKitIcon } from "./useFormKitIcon.mjs";
 import { useFormKitInput } from "./useFormKitInput.mjs";
-import { useFormKitOutput } from "./useFormKitOutput.mjs";
 import { useFormKitSchema } from "./useFormKitSchema.mjs";
+import { useFormKitSection } from "./useFormKitSection.mjs";
 import { useInputEditor } from "./useInputEditor.mjs";
 import { useInputEditorSchema } from "./useInputEditorSchema.mjs";
 import { useOutputDuration } from "./useOutputDuration.mjs";
 export {
   useFormKitIcon,
   useFormKitInput,
-  useFormKitOutput,
   useFormKitSchema,
+  useFormKitSection,
   useInputEditor,
   useInputEditorSchema,
   useOutputDuration

package/dist/composables/useFormKitIcon.js

@@ -7,14 +7,13 @@ exports.useFormKitIcon = useFormKitIcon;
 var _vue = require("vue");
 function useFormKitIcon(context) {
   const hasIcon = (0, _vue.computed)(() => {
-    if (context?.icon && context?.icon.length > 0) return true;
     return context?.attrs?.icon && context?.attrs?.icon.length > 0;
   });
   const icon = (0, _vue.computed)(() => {
-    return context?.icon ?? context?.attrs?.icon;
+    return context?.attrs?.icon;
   });
   const iconPosition = (0, _vue.computed)(() => {
-    return context?.iconPosition ?? context?.attrs?.iconPosition;
+    return context?.attrs?.iconPosition;
   });
   return {
     hasIcon,

package/dist/composables/useFormKitIcon.mjs

@@ -1,15 +1,13 @@
 import { computed } from "vue";
 export function useFormKitIcon(context) {
   const hasIcon = computed(() => {
-    if (context?.icon && context?.icon.length > 0)
-      return true;
     return context?.attrs?.icon && context?.attrs?.icon.length > 0;
   });
   const icon = computed(() => {
-    return context?.icon ?? context?.attrs?.icon;
+    return context?.attrs?.icon;
   });
   const iconPosition = computed(() => {
-    return context?.iconPosition ?? context?.attrs?.iconPosition;
+    return context?.attrs?.iconPosition;
   });
   return { hasIcon, icon, iconPosition };
 }

package/dist/composables/useFormKitInput.d.ts

@@ -1,6 +1,5 @@
 export declare function useFormKitInput(context: any): {
     styleClass: import("vue").ComputedRef<any>;
-    wrapperClass: import("vue").ComputedRef<string>;
     handleBlur: (event: Event) => void;
     handleChange: (_: any) => void;
     handleInput: (_: any) => void;

package/dist/composables/useFormKitInput.js

@@ -9,9 +9,6 @@ function useFormKitInput(context) {
   const styleClass = (0, _vue.computed)(() => {
     return context?.state.validationVisible && !context?.state.valid ? `${context?.attrs?.class} p-invalid` : context?.attrs?.class;
   });
-  const wrapperClass = (0, _vue.computed)(() => {
-    return context?.wrapperClass ? `p-formkit ${context?.wrapperClass}` : "p-formkit ";
-  });
   function handleBlur(event) {
     context?.handlers.blur(event);
   }
@@ -26,7 +23,6 @@ function useFormKitInput(context) {
   }
   return {
     styleClass,
-    wrapperClass,
     handleBlur,
     handleChange,
     handleInput,

package/dist/composables/useFormKitInput.mjs

@@ -3,9 +3,6 @@ export function useFormKitInput(context) {
   const styleClass = computed(() => {
     return context?.state.validationVisible && !context?.state.valid ? `${context?.attrs?.class} p-invalid` : context?.attrs?.class;
   });
-  const wrapperClass = computed(() => {
-    return context?.wrapperClass ? `p-formkit ${context?.wrapperClass}` : "p-formkit ";
-  });
   function handleBlur(event) {
     context?.handlers.blur(event);
   }
@@ -18,5 +15,5 @@ export function useFormKitInput(context) {
   function handleSelect(e) {
     context?.node.input(e);
   }
-  return { styleClass, wrapperClass, handleBlur, handleChange, handleInput, handleSelect };
+  return { styleClass, handleBlur, handleChange, handleInput, handleSelect };
 }

package/dist/composables/useFormKitSection.d.ts

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

package/dist/composables/useFormKitSection.js

@@ -0,0 +1,27 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.useFormKitSection = useFormKitSection;
+var _vue = require("vue");
+function useFormKitSection(context) {
+  const hasPrefix = (0, _vue.computed)(() => {
+    return context?.attrs?.prefix && context?.attrs?.prefix.length > 0;
+  });
+  const hasPrefixIcon = (0, _vue.computed)(() => {
+    return context?.prefixIcon && context?.prefixIcon.length > 0;
+  });
+  const hasSuffixIcon = (0, _vue.computed)(() => {
+    return context?.suffixIcon && context?.suffixIcon.length > 0;
+  });
+  const hasSuffix = (0, _vue.computed)(() => {
+    return context?.attrs?.suffix && context?.attrs?.suffix.length > 0;
+  });
+  return {
+    hasPrefix,
+    hasPrefixIcon,
+    hasSuffix,
+    hasSuffixIcon
+  };
+}

package/dist/composables/useFormKitSection.mjs

@@ -0,0 +1,16 @@
+import { computed } from "vue";
+export function useFormKitSection(context) {
+  const hasPrefix = computed(() => {
+    return context?.attrs?.prefix && context?.attrs?.prefix.length > 0;
+  });
+  const hasPrefixIcon = computed(() => {
+    return context?.prefixIcon && context?.prefixIcon.length > 0;
+  });
+  const hasSuffixIcon = computed(() => {
+    return context?.suffixIcon && context?.suffixIcon.length > 0;
+  });
+  const hasSuffix = computed(() => {
+    return context?.attrs?.suffix && context?.attrs?.suffix.length > 0;
+  });
+  return { hasPrefix, hasPrefixIcon, hasSuffix, hasSuffixIcon };
+}

package/dist/composables/useInputEditor.d.ts

@@ -1,5 +1,6 @@
 export declare function useInputEditor(): {
     primeInputNames: string[];
+    primeOutputNames: string[];
     generateSchemaItemId: () => string;
     editorDataToSchema: (data: any) => any;
     editorDataToJson: (data: any) => string;

package/dist/composables/useInputEditor.js

@@ -7,6 +7,7 @@ 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", "OutputText"];
   function generateSchemaItemId() {
     return `id-${Math.random().toString(36).substring(2, 15)}`;
   }
@@ -100,6 +101,7 @@ function useInputEditor() {
   }
   return {
     primeInputNames,
+    primeOutputNames,
     generateSchemaItemId,
     editorDataToSchema,
     editorDataToJson,

package/dist/composables/useInputEditor.mjs

@@ -1,6 +1,7 @@
 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", "OutputText"];
   function generateSchemaItemId() {
     return `id-${Math.random().toString(36).substring(2, 15)}`;
   }
@@ -64,5 +65,5 @@ export function useInputEditor() {
     const formkitInput = schema?.$formkit;
     return { ...schema, _dollar_formkit: formkitInput };
   }
-  return { primeInputNames, generateSchemaItemId, editorDataToSchema, editorDataToJson, editorDataToCode: editorDataToObject, schemaToEditorData };
+  return { primeInputNames, primeOutputNames, generateSchemaItemId, editorDataToSchema, editorDataToJson, editorDataToCode: editorDataToObject, schemaToEditorData };
 }

package/dist/composables/useInputEditorSchema.js

@@ -14,7 +14,8 @@ function useInputEditorSchema() {
     addComponent
   } = (0, _useFormKitSchema.useFormKitSchema)();
   const {
-    primeInputNames
+    primeInputNames,
+    primeOutputNames
   } = (0, _useInputEditor.useInputEditor)();
   function addFlexElement(children) {
     return addElement("div", children, {
@@ -82,14 +83,7 @@ function useInputEditorSchema() {
     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([{
       $formkit: "primeSelect",
       id: "inputSelection",
@@ -99,6 +93,7 @@ function useInputEditorSchema() {
       optionLabel: "label",
       optionValue: "value",
       options: inputOptions,
+      filter: true,
       key: "schema_inputSelection",
       preserve: true
     }, {
@@ -134,14 +129,21 @@ 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",
       preserve: true
-    }, addGridElement([{
+    }, {
+      $formkit: "primeInputText",
+      if: "$get(selectButton).value === 'showBasic'",
+      name: "format",
+      label: "Value Format",
+      key: "schema_format",
+      preserve: true
+    }]), addGridElement([{
       $formkit: "primeInputText",
       if: "$get(selectButton).value === 'showBasic'",
       name: "id",
@@ -219,19 +221,30 @@ function useInputEditorSchema() {
     }, addGridElement([{
       $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
     }, {
       $formkit: "primeCheckbox",