@sfxcode/formkit-primevue 2.3.7 → 2.3.9

package/dist/components/FormKitDataEdit.vue

@@ -19,10 +19,18 @@ const props = defineProps({
     type: Boolean,
     default: false,
   },
+  inputClass: {
+    type: String,
+    default: 'p-button p-component p-formkit-button',
+  },
   submitLabel: {
     type: String,
     default: 'Save',
   },
+  actionsClass: {
+    type: String,
+    default: '',
+  },
   formClass: {
     type: String,
     default: '',
@@ -45,12 +53,12 @@ function handleSave() {
       id="form"
       v-model="formData"
       :form-class="formClass"
+      :actions-class="actionsClass"
       type="form"
       :submit-label="submitLabel"
       :submit-attrs="{
-        inputClass: 'p-button p-component p-formkit-button',
+        inputClass,
       }"
-
       @submit="handleSave"
     >
       <FormKitSchema :schema="formSchema" :data="formData" />

package/dist/components/FormKitDataView.vue

@@ -35,9 +35,7 @@ const formData = ref(props.data)
       v-model="formData"
       type="form"
       :form-class="formClass"
-      :submit-attrs="{
-        style: 'display: none;',
-      }"
+      :actions="false"
     >
       <FormKitSchema :schema="formSchema" :data="formData" />
     </FormKit>

package/dist/components/PrimeCheckbox.vue

@@ -3,7 +3,7 @@ import type { PropType } from 'vue'
 import type { FormKitFrameworkContext } from '@formkit/core'
 
 import type { CheckboxProps } from 'primevue/checkbox'
-import { useFormKitInput } from '../composables'
+import { useFormKitInput, useFormKitSection } from '../composables'
 
 export interface FormKitPrimeCheckboxProps {
   binary?: CheckboxProps['binary']
@@ -14,9 +14,6 @@ export interface FormKitPrimeCheckboxProps {
   unstyled?: CheckboxProps['unstyled']
   indeterminate?: CheckboxProps['indeterminate']
   variant?: CheckboxProps['variant']
-  labelLeft?: string
-  labelRight?: string
-
 }
 
 const props = defineProps({
@@ -26,12 +23,16 @@ const props = defineProps({
   },
 })
 
+const { hasPrefix, hasSuffix } = useFormKitSection(props.context)
+
 const { styleClass, handleInput, handleBlur } = useFormKitInput(props.context)
 </script>
 
 <template>
   <div class="p-formkit">
-    <span v-if="context.labelLeft" class="formkit-prime-left">{{ context.labelLeft }}</span>
+    <span v-if="hasPrefix" class="formkit-prefix">
+      {{ context?.prefix }}
+    </span>
     <Checkbox
       v-model="context._value"
       v-bind="context?.attrs"
@@ -54,6 +55,8 @@ const { styleClass, handleInput, handleBlur } = useFormKitInput(props.context)
       @change="handleInput"
       @blur="handleBlur"
     />
-    <span v-if="context.labelRight" class="formkit-prime-right">{{ context.labelRight }}</span>
+    <span v-if="hasSuffix" class="formkit-suffix">
+      {{ context?.suffix }}
+    </span>
   </div>
 </template>

package/dist/components/PrimeOutputBoolean.vue

@@ -1,11 +1,16 @@
 <script setup lang='ts'>
 import { useI18n } from 'vue-i18n'
-import { computed } from 'vue'
+import { type PropType, computed } from 'vue'
+import type { FormKitFrameworkContext } from '@formkit/core'
 import { useFormKitSection } from '../composables'
 
 const props = defineProps({
-  context: Object,
+  context: {
+    type: Object as PropType<FormKitFrameworkContext>,
+    required: true,
+  },
 })
+
 const { hasPrefix, hasPrefixIcon, hasSuffix, hasSuffixIcon } = useFormKitSection(props.context)
 
 const { t } = useI18n()
@@ -22,13 +27,13 @@ const translated = computed(() => {
   <div class="p-formkit p-output-boolean">
     <i v-if="hasPrefixIcon" class="formkit-prefix-icon" :class="context?.prefixIcon" />
     <span v-if="hasPrefix" class="formkit-prefix">
-      {{ context?.attrs?.prefix }}
+      {{ context?.prefix }}
     </span>
     <span :id="context?.id" :style="context?.attrs?.style" :class="context?.attrs?.class">
       {{ translated }}
     </span>
     <span v-if="hasSuffix" class="formkit-suffix">
-      {{ context?.attrs?.suffix }}
+      {{ context?.suffix }}
     </span>
     <i v-if="hasSuffixIcon" class="formkit-suffix-icon" :class="context?.suffixIcon" />
   </div>

package/dist/components/PrimeOutputDate.vue

@@ -1,10 +1,14 @@
 <script setup lang='ts'>
 import { useI18n } from 'vue-i18n'
-import { computed } from 'vue'
+import { type PropType, computed } from 'vue'
+import type { FormKitFrameworkContext } from '@formkit/core'
 import { useFormKitSection } from '../composables'
 
 const props = defineProps({
-  context: Object,
+  context: {
+    type: Object as PropType<FormKitFrameworkContext>,
+    required: true,
+  },
 })
 const { hasPrefix, hasPrefixIcon, hasSuffix, hasSuffixIcon } = useFormKitSection(props.context)
 

package/dist/components/PrimeOutputDuration.vue

@@ -1,10 +1,14 @@
 <script setup lang='ts'>
+import type { PropType } from 'vue'
+import type { FormKitFrameworkContext } from '@formkit/core'
 import { useFormKitSection, useOutputDuration } from '../composables'
 
 const props = defineProps({
-  context: Object,
+  context: {
+    type: Object as PropType<FormKitFrameworkContext>,
+    required: true,
+  },
 })
-
 const { hasPrefix, hasPrefixIcon, hasSuffix, hasSuffixIcon } = useFormKitSection(props.context)
 
 const { formattedDuration } = useOutputDuration()

package/dist/components/PrimeOutputLink.vue

@@ -1,10 +1,15 @@
 <script setup lang='ts'>
-import { computed } from 'vue'
+import { type PropType, computed } from 'vue'
+import type { FormKitFrameworkContext } from '@formkit/core'
 import { useFormKitSection } from '../composables'
 
 const props = defineProps({
-  context: Object,
+  context: {
+    type: Object as PropType<FormKitFrameworkContext>,
+    required: true,
+  },
 })
+
 const { hasPrefix, hasPrefixIcon, hasSuffix, hasSuffixIcon } = useFormKitSection(props.context)
 
 const url = computed(() => props.context?._value.indexOf('http') > -1 ? props.context?._value : `https://${props.context?._value}`)

package/dist/components/PrimeOutputList.vue

@@ -1,9 +1,15 @@
 <script setup lang='ts'>
+import type { PropType } from 'vue'
+import type { FormKitFrameworkContext } from '@formkit/core'
 import { useFormKitSection } from '../composables'
 
 const props = defineProps({
-  context: Object,
+  context: {
+    type: Object as PropType<FormKitFrameworkContext>,
+    required: true,
+  },
 })
+
 const { hasPrefix, hasPrefixIcon, hasSuffix, hasSuffixIcon } = useFormKitSection(props.context)
 
 function listValue(index: number, value: string): string {

package/dist/components/PrimeOutputNumber.vue

@@ -1,11 +1,15 @@
 <script setup lang='ts'>
 import { useI18n } from 'vue-i18n'
-import { computed } from 'vue'
+import { type PropType, computed } from 'vue'
 
+import type { FormKitFrameworkContext } from '@formkit/core'
 import { useFormKitSection } from '../composables'
 
 const props = defineProps({
-  context: Object,
+  context: {
+    type: Object as PropType<FormKitFrameworkContext>,
+    required: true,
+  },
 })
 const { hasPrefix, hasPrefixIcon, hasSuffix, hasSuffixIcon } = useFormKitSection(props.context)
 

package/dist/components/PrimeOutputText.vue

@@ -1,9 +1,15 @@
 <script setup lang='ts'>
+import type { PropType } from 'vue'
+import type { FormKitFrameworkContext } from '@formkit/core'
 import { useFormKitSection } from '../composables'
 
 const props = defineProps({
-  context: Object,
+  context: {
+    type: Object as PropType<FormKitFrameworkContext>,
+    required: true,
+  },
 })
+
 const { hasPrefix, hasPrefixIcon, hasSuffix, hasSuffixIcon } = useFormKitSection(props.context)
 </script>
 

package/dist/components/PrimeRadioButton.vue

@@ -10,9 +10,8 @@ export interface FormKitPrimeRadioButtonProps {
   ptOptions?: RadioButtonProps['ptOptions']
   unstyled?: RadioButtonProps['unstyled']
   options?: { label: string, value: any }[]
+  optionsClass?: string
   optionClass?: string
-  labelClass?: string
-
 }
 
 const props = defineProps({
@@ -26,8 +25,8 @@ const { styleClass, handleChange, handleBlur } = useFormKitInput(props.context)
 </script>
 
 <template>
-  <div class="p-formkit">
-    <div v-for="option in context.options" :key="option.value" :class="context.optionClass">
+  <div class="p-formkit p-formkit-options" :class="context.optionsClass">
+    <div v-for="option in context.options" :key="option.value" class="p-formkit-option" :class="context.optionClass">
       <RadioButton
         :id="context.id"
         v-model="context._value"
@@ -45,7 +44,7 @@ const { styleClass, handleChange, handleBlur } = useFormKitInput(props.context)
         @change="handleChange"
         @blur="handleBlur"
       />
-      <label :for="option.value" :class="context.labelClass" class="p-formkit-radio-label">{{ option.label }}</label>
+      <label :for="option.value" :class="context.labelClass">{{ option.label }}</label>
     </div>
   </div>
 </template>

package/dist/components/PrimeToggleSwitch.vue

@@ -3,7 +3,7 @@ import type { PropType } from 'vue'
 import type { FormKitFrameworkContext } from '@formkit/core'
 
 import type { ToggleSwitchProps } from 'primevue/toggleswitch'
-import { useFormKitInput } from '../composables'
+import { useFormKitInput, useFormKitSection } from '../composables'
 
 export interface FormKitPrimeToggleSwitchProps {
   trueValue?: ToggleSwitchProps['trueValue']
@@ -11,9 +11,6 @@ export interface FormKitPrimeToggleSwitchProps {
   pt?: ToggleSwitchProps['pt']
   ptOptions?: ToggleSwitchProps['ptOptions']
   unstyled?: ToggleSwitchProps['unstyled']
-  labelLeft?: string
-  labelRight?: string
-
 }
 
 const props = defineProps({
@@ -23,12 +20,16 @@ const props = defineProps({
   },
 })
 
+const { hasPrefix, hasSuffix } = useFormKitSection(props.context)
+
 const { styleClass, handleInput, handleBlur } = useFormKitInput(props.context)
 </script>
 
 <template>
   <div class="p-formkit">
-    <span v-if="context.labelLeft" class="formkit-prime-left">{{ context.labelLeft }}</span>
+    <span v-if="hasPrefix" class="formkit-prefix">
+      {{ context?.prefix }}
+    </span>
     <ToggleSwitch
       v-model="context._value"
       v-bind="context?.attrs"
@@ -48,6 +49,8 @@ const { styleClass, handleInput, handleBlur } = useFormKitInput(props.context)
       @change="handleInput"
       @blur="handleBlur"
     />
-    <span v-if="context.labelRight" class="formkit-prime-right">{{ context.labelRight }}</span>
+    <span v-if="hasSuffix" class="formkit-suffix">
+      {{ context?.suffix }}
+    </span>
   </div>
 </template>

package/dist/composables/index.d.ts

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

package/dist/composables/index.js

@@ -3,16 +3,16 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-Object.defineProperty(exports, "useFormKitIcon", {
+Object.defineProperty(exports, "useFormKitInput", {
   enumerable: true,
   get: function () {
-    return _useFormKitIcon.useFormKitIcon;
+    return _useFormKitInput.useFormKitInput;
   }
 });
-Object.defineProperty(exports, "useFormKitInput", {
+Object.defineProperty(exports, "useFormKitRepeater", {
   enumerable: true,
   get: function () {
-    return _useFormKitInput.useFormKitInput;
+    return _useFormKitRepeater.useFormKitRepeater;
   }
 });
 Object.defineProperty(exports, "useFormKitSchema", {
@@ -45,9 +45,9 @@ Object.defineProperty(exports, "useOutputDuration", {
     return _useOutputDuration.useOutputDuration;
   }
 });
-var _useFormKitIcon = require("./useFormKitIcon");
 var _useFormKitInput = require("./useFormKitInput");
 var _useFormKitSchema = require("./useFormKitSchema");
+var _useFormKitRepeater = require("./useFormKitRepeater");
 var _useFormKitSection = require("./useFormKitSection");
 var _useInputEditor = require("./useInputEditor");
 var _useInputEditorSchema = require("./useInputEditorSchema");

package/dist/composables/index.mjs

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

package/dist/composables/useFormKitRepeater.d.ts

@@ -0,0 +1,15 @@
+export declare function useFormKitRepeater(): {
+    addInsertButton: (label?: string, innerClass?: string, outerClass?: string, buttonClass?: string, iconClass?: string) => {
+        $el: string;
+        if: string;
+        attrs: object;
+        children: string | any[];
+    };
+    addGroupButtons: (innerClass?: string, outerClass?: string, label?: string, help?: string, render?: string) => {
+        $el: string;
+        if: string;
+        attrs: object;
+        children: string | any[];
+    };
+    addListGroupFunctions: (data: any, addNodeDefaultObject?: object) => void;
+};

package/dist/composables/useFormKitRepeater.js

@@ -0,0 +1,71 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.useFormKitRepeater = useFormKitRepeater;
+var _useFormKitSchema = require("./useFormKitSchema");
+function useFormKitRepeater() {
+  const {
+    addElement,
+    addComponent,
+    addElementsInOuterDiv
+  } = (0, _useFormKitSchema.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.value.length == 0")], innerClass, outerClass);
+  }
+  function addListGroupFunctions(data, addNodeDefaultObject = {}) {
+    const swapElements = (array, index1, index2) => {
+      array[index1] = array.splice(index2, 1, array[index1])[0];
+      return array;
+    };
+    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 = "mt-1", outerClass = "col-4", label = "Actions", help = "", render = "true") {
+    const addButtonComponent = (onClick = "", label2 = "", icon = "", severity = "", render2 = "true", styleClass = "p-button-sm mr-2") => {
+      return addComponent("Button", {
+        onClick,
+        label: label2,
+        icon,
+        class: styleClass,
+        severity
+      }, render2);
+    };
+    return addElementsInOuterDiv([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", [], {
+      class: "mr-12"
+    }, "$index == 0"), addButtonComponent("$moveNodeDown($node, $index)", "", "pi pi-arrow-down", "secondary", "$index < $node.value.length -1"), addElement("span", [], {
+      class: "mr-12"
+    }, "$index == $node.value.length -1")], innerClass, outerClass, label, help, render);
+  }
+  return {
+    addInsertButton,
+    addGroupButtons,
+    addListGroupFunctions
+  };
+}

package/dist/composables/useFormKitRepeater.mjs

@@ -0,0 +1,51 @@
+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.value.length == 0")
+    ], innerClass, outerClass);
+  }
+  function addListGroupFunctions(data, addNodeDefaultObject = {}) {
+    const swapElements = (array, index1, index2) => {
+      array[index1] = array.splice(index2, 1, array[index1])[0];
+      return array;
+    };
+    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 = "mt-1", outerClass = "col-4", label = "Actions", help = "", render = "true") {
+    const addButtonComponent = (onClick = "", label2 = "", icon = "", severity = "", render2 = "true", styleClass = "p-button-sm mr-2") => {
+      return addComponent("Button", { onClick, label: label2, icon, class: styleClass, severity }, render2);
+    };
+    return addElementsInOuterDiv([
+      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", [], { class: "mr-12" }, "$index == 0"),
+      addButtonComponent("$moveNodeDown($node, $index)", "", "pi pi-arrow-down", "secondary", "$index < $node.value.length -1"),
+      addElement("span", [], { class: "mr-12" }, "$index == $node.value.length -1")
+    ], innerClass, outerClass, label, help, render);
+  }
+  return { addInsertButton, addGroupButtons, addListGroupFunctions };
+}

package/dist/composables/useFormKitSchema.d.ts

@@ -27,5 +27,10 @@ export declare function useFormKitSchema(): {
         index: string;
         children: object[];
     };
-    addListGroupFunctions: (data: any, addNodeDefaultObject?: object) => void;
+    addElementsInOuterDiv: (children?: object[], innerClass?: string, outerClass?: string, label?: string, help?: string, render?: string) => {
+        $el: string;
+        if: string;
+        attrs: object;
+        children: string | any[];
+    };
 };

package/dist/composables/useFormKitSchema.js

@@ -53,40 +53,31 @@ function useFormKitSchema() {
       ...formKitAttrs
     };
   };
-  function addListGroupFunctions(data, addNodeDefaultObject = {}) {
-    const swapElements = (array, index1, index2) => {
-      array[index1] = array.splice(index2, 1, array[index1])[0];
-      return array;
-    };
-    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);
-    };
-  }
+  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,
-    addListGroupFunctions
+    addElementsInOuterDiv
   };
 }

package/dist/composables/useFormKitSchema.mjs

@@ -47,33 +47,12 @@ export function useFormKitSchema() {
       ...formKitAttrs
     };
   };
-  function addListGroupFunctions(data, addNodeDefaultObject = {}) {
-    const swapElements = (array, index1, index2) => {
-      array[index1] = array.splice(index2, 1, array[index1])[0];
-      return array;
-    };
-    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);
-    };
-  }
-  return { addComponent, addElement, addGroup, addList, addListGroup, addListGroupFunctions };
+  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.js

@@ -7,7 +7,7 @@ exports.useFormKitSection = useFormKitSection;
 var _vue = require("vue");
 function useFormKitSection(context) {
   const hasPrefix = (0, _vue.computed)(() => {
-    return context?.attrs?.prefix && context?.attrs?.prefix.length > 0;
+    return context?.prefix && context?.prefix.length > 0;
   });
   const hasPrefixIcon = (0, _vue.computed)(() => {
     return context?.prefixIcon && context?.prefixIcon.length > 0;
@@ -16,7 +16,7 @@ function useFormKitSection(context) {
     return context?.suffixIcon && context?.suffixIcon.length > 0;
   });
   const hasSuffix = (0, _vue.computed)(() => {
-    return context?.attrs?.suffix && context?.attrs?.suffix.length > 0;
+    return context?.suffix && context?.suffix.length > 0;
   });
   return {
     hasPrefix,