@sfxcode/formkit-primevue 2.0.5 → 2.2.0

package/dist/components/PrimePassword.vue

@@ -1,8 +1,9 @@
 <script setup lang='ts'>
-import { type PropType, computed } from 'vue'
+import type { PropType } from 'vue'
 import type { FormKitFrameworkContext } from '@formkit/core'
 
 import type { PasswordProps } from 'primevue/password'
+import { useFormKitInput } from '../composables'
 
 export interface FormKitPrimePasswordProps {
   mediumRegex?: PasswordProps['mediumRegex']
@@ -19,6 +20,7 @@ export interface FormKitPrimePasswordProps {
   placeholder?: PasswordProps['placeholder']
   feedback?: PasswordProps['feedback']
   toggleMask?: PasswordProps['toggleMask']
+  wrapperClass?: string
 }
 
 const props = defineProps({
@@ -28,19 +30,11 @@ const props = defineProps({
   },
 })
 
-function handleBlur(e: Event) {
-  props.context?.handlers.blur(e)
-}
-
-function handleInput(e: any) {
-  props.context?.node.input(e.target.value)
-}
-
-const styleClass = computed(() => (props.context?.state.validationVisible && !props.context?.state.valid) ? `${props.context?.attrs?.class} p-invalid` : props.context?.attrs?.class)
+const { styleClass, wrapperClass, handleInput, handleBlur } = useFormKitInput(props.context)
 </script>
 
 <template>
-  <div class="p-formkit">
+  <div :class="wrapperClass">
     <Password
       v-model="context._value"
       v-bind="context?.attrs"

package/dist/components/PrimeRadioButton.vue

@@ -1,15 +1,18 @@
 <script setup lang='ts'>
-import { type PropType, computed } from 'vue'
+import type { PropType } from 'vue'
 import type { FormKitFrameworkContext } from '@formkit/core'
 
 import type { RadioButtonProps } from 'primevue/radiobutton'
+import { useFormKitInput } from '../composables'
 
 export interface FormKitPrimeRadioButtonProps {
   pt?: RadioButtonProps['pt']
   ptOptions?: RadioButtonProps['ptOptions']
   unstyled?: RadioButtonProps['unstyled']
   options?: { label: string, value: any }[]
-  options_class?: string
+  optionClass?: string
+  labelClass?: string
+  wrapperClass?: string
 }
 
 const props = defineProps({
@@ -19,20 +22,12 @@ const props = defineProps({
   },
 })
 
-function handleChange(_: any) {
-  props.context?.node.input(props.context?._value)
-}
-
-function handleBlur(e: Event) {
-  props.context?.handlers.blur(e)
-}
-
-const styleClass = computed(() => (props.context?.state.validationVisible && !props.context?.state.valid) ? `${props.context?.attrs?.class} p-invalid` : props.context?.attrs?.class)
+const { styleClass, wrapperClass, handleChange, handleBlur } = useFormKitInput(props.context)
 </script>
 
 <template>
-  <div :class="context.options_class" class="p-formkit">
-    <div v-for="option in context.options" :key="option.value" :class="context.option_class">
+  <div :class="wrapperClass">
+    <div v-for="option in context.options" :key="option.value" :class="context.optionClass">
       <RadioButton
         :id="context.id"
         v-model="context._value"
@@ -50,7 +45,7 @@ const styleClass = computed(() => (props.context?.state.validationVisible && !pr
         @change="handleChange"
         @blur="handleBlur"
       />
-      <label :for="option.value" :class="context.label_class" class="p-formkit-radio-label">{{ option.label }}</label>
+      <label :for="option.value" :class="context.labelClass" class="p-formkit-radio-label">{{ option.label }}</label>
     </div>
   </div>
 </template>

package/dist/components/PrimeRating.vue

@@ -1,8 +1,9 @@
 <script setup lang='ts'>
-import { type PropType, computed } from 'vue'
+import type { PropType } from 'vue'
 import type { FormKitFrameworkContext } from '@formkit/core'
 
 import type { RatingProps } from 'primevue/rating'
+import { useFormKitInput } from '../composables'
 
 export interface FormKitPrimeRatingProps {
   unstyled?: RatingProps['unstyled']
@@ -11,6 +12,7 @@ export interface FormKitPrimeRatingProps {
   offIcon?: RatingProps['offIcon']
   ptOptions?: RatingProps['ptOptions']
   pt?: RatingProps['pt']
+  wrapperClass?: string
 }
 
 const props = defineProps({
@@ -20,19 +22,11 @@ const props = defineProps({
   },
 })
 
-function handleInput(_: any) {
-  props.context?.node.input(props.context?._value)
-}
-
-function handleBlur(e: Event) {
-  props.context?.handlers.blur(e)
-}
-
-const styleClass = computed(() => (props.context?.state.validationVisible && !props.context?.state.valid) ? `${props.context?.attrs?.class} p-invalid` : props.context?.attrs?.class)
+const { styleClass, wrapperClass, handleInput, handleBlur } = useFormKitInput(props.context)
 </script>
 
 <template>
-  <div class="p-formkit">
+  <div :class="wrapperClass">
     <Rating
       :id="context.id"
       v-model="context._value"

package/dist/components/PrimeSelect.vue

@@ -1,8 +1,9 @@
 <script setup lang="ts">
-import { type PropType, computed } from 'vue'
+import type { PropType } from 'vue'
 import type { FormKitFrameworkContext } from '@formkit/core'
 
 import type { SelectProps } from 'primevue/select'
+import { useFormKitInput } from '../composables'
 
 export interface FormKitPrimeSelectProps {
   options?: SelectProps['options']
@@ -36,6 +37,7 @@ export interface FormKitPrimeSelectProps {
   pt?: SelectProps['pt']
   ptOptions?: SelectProps['ptOptions']
   unstyled?: SelectProps['unstyled']
+  wrapperClass?: string
 }
 
 const props = defineProps({
@@ -45,17 +47,11 @@ const props = defineProps({
   },
 })
 
-function handleBlur(e: Event) {
-  props.context?.handlers.blur(e)
-}
-function handleInput(e: any) {
-  props.context?.node.input(e.value)
-}
-const styleClass = computed(() => (props.context?.state.validationVisible && !props.context?.state.valid) ? `${props.context?.attrs?.class} p-invalid` : props.context?.attrs?.class)
+const { styleClass, wrapperClass, handleInput, handleBlur } = useFormKitInput(props.context)
 </script>
 
 <template>
-  <div class="p-formkit">
+  <div :class="wrapperClass">
     <Select
       v-model="context._value"
       v-bind="context?.attrs"

package/dist/components/PrimeSelectButton.vue

@@ -1,8 +1,9 @@
 <script setup lang='ts'>
-import { type PropType, computed } from 'vue'
+import type { PropType } from 'vue'
 import type { FormKitFrameworkContext } from '@formkit/core'
 
 import type { SelectButtonProps } from 'primevue/selectbutton'
+import { useFormKitInput } from '../composables'
 
 export interface FormKitPrimeSelectButtonProps {
   pt?: SelectButtonProps['pt']
@@ -14,6 +15,7 @@ export interface FormKitPrimeSelectButtonProps {
   multiple?: SelectButtonProps['multiple']
   dataKey?: SelectButtonProps['dataKey']
   options?: SelectButtonProps['options']
+  wrapperClass?: string
 }
 
 const props = defineProps({
@@ -23,19 +25,11 @@ const props = defineProps({
   },
 })
 
-function handleChange(_: any) {
-  props.context?.node.input(props.context?._value)
-}
-
-function handleBlur(e: Event) {
-  props.context?.handlers.blur(e)
-}
-
-const styleClass = computed(() => (props.context?.state.validationVisible && !props.context?.state.valid) ? `${props.context?.attrs?.class} p-invalid` : props.context?.attrs?.class)
+const { styleClass, wrapperClass, handleChange, handleBlur } = useFormKitInput(props.context)
 </script>
 
 <template>
-  <div class="p-formkit">
+  <div :class="wrapperClass">
     <SelectButton
       :id="context.id"
       v-model="context._value"

package/dist/components/PrimeSlider.vue

@@ -1,8 +1,9 @@
 <script setup lang='ts'>
-import { type PropType, computed } from 'vue'
+import type { PropType } from 'vue'
 import type { FormKitFrameworkContext } from '@formkit/core'
 
 import type { SliderProps } from 'primevue/slider'
+import { useFormKitInput } from '../composables'
 
 export interface FormKitPrimeSliderProps {
   pt?: SliderProps['pt']
@@ -13,6 +14,7 @@ export interface FormKitPrimeSliderProps {
   step?: SliderProps['step']
   range?: SliderProps['range']
   orientation?: SliderProps['orientation']
+  wrapperClass?: string
 }
 
 const props = defineProps({
@@ -22,20 +24,16 @@ const props = defineProps({
   },
 })
 
+const { styleClass, wrapperClass, handleBlur } = useFormKitInput(props.context)
+
 function handleInput(e: any) {
   props.context?.node.input(e)
   props.context?.handlers.blur(e)
 }
-
-function handleBlur(e: Event) {
-  props.context?.handlers.blur(e)
-}
-
-const styleClass = computed(() => (props.context?.state.validationVisible && !props.context?.state.valid) ? `${props.context?.attrs?.class} p-invalid` : props.context?.attrs?.class)
 </script>
 
 <template>
-  <div class="p-formkit">
+  <div :class="wrapperClass">
     <Slider
       :id="context.id"
       v-model="context._value"

package/dist/components/PrimeTextarea.vue

@@ -1,8 +1,9 @@
 <script setup lang='ts'>
-import { type PropType, computed } from 'vue'
+import type { PropType } from 'vue'
 import type { FormKitFrameworkContext } from '@formkit/core'
 
 import type { TextareaProps } from 'primevue/textarea'
+import { useFormKitInput } from '../composables'
 
 export interface FormKitPrimeTextareaProps {
   pt?: TextareaProps['pt']
@@ -11,6 +12,7 @@ export interface FormKitPrimeTextareaProps {
   autoResize?: TextareaProps['autoResize']
   rows?: TextareaProps['rows']
   placeholder?: TextareaProps['placeholder']
+  wrapperClass?: string
 }
 
 const props = defineProps({
@@ -20,18 +22,11 @@ const props = defineProps({
   },
 })
 
-function handleBlur(e: Event) {
-  props.context?.handlers.blur(e)
-}
-
-function handleInput(e: any) {
-  props.context?.node.input(e.target.value)
-}
-const styleClass = computed(() => (props.context?.state.validationVisible && !props.context?.state.valid) ? `${props.context?.attrs?.class} p-invalid` : props.context?.attrs?.class)
+const { styleClass, wrapperClass, handleInput, handleBlur } = useFormKitInput(props.context)
 </script>
 
 <template>
-  <div class="p-formkit">
+  <div :class="wrapperClass">
     <Textarea
       :id="context.id"
       v-model="context._value"

package/dist/components/PrimeToggleButton.vue

@@ -1,8 +1,9 @@
 <script setup lang='ts'>
-import { type PropType, computed } from 'vue'
+import type { PropType } from 'vue'
 import type { FormKitFrameworkContext } from '@formkit/core'
 
 import type { ToggleButtonProps } from 'primevue/togglebutton'
+import { useFormKitInput } from '../composables'
 
 export interface FormKitPrimeToggleButtonProps {
   pt?: ToggleButtonProps['pt']
@@ -13,6 +14,7 @@ export interface FormKitPrimeToggleButtonProps {
   onIcon?: ToggleButtonProps['onIcon']
   offIcon?: ToggleButtonProps['offIcon']
   iconPos?: ToggleButtonProps['iconPos']
+  wrapperClass?: string
 }
 
 const props = defineProps({
@@ -22,19 +24,11 @@ const props = defineProps({
   },
 })
 
-function handleChange(_: any) {
-  props.context?.node.input(props.context?._value)
-}
-
-function handleBlur(e: Event) {
-  props.context?.handlers.blur(e)
-}
-
-const styleClass = computed(() => (props.context?.state.validationVisible && !props.context?.state.valid) ? `${props.context?.attrs?.class} p-invalid` : props.context?.attrs?.class)
+const { styleClass, wrapperClass, handleChange, handleBlur } = useFormKitInput(props.context)
 </script>
 
 <template>
-  <div class="p-formkit">
+  <div :class="wrapperClass">
     <ToggleButton
       v-model="context._value"
       v-bind="context?.attrs"

package/dist/components/PrimeToggleSwitch.vue

@@ -1,8 +1,9 @@
 <script setup lang='ts'>
-import { type PropType, computed } from 'vue'
+import type { PropType } from 'vue'
 import type { FormKitFrameworkContext } from '@formkit/core'
 
 import type { ToggleSwitchProps } from 'primevue/toggleswitch'
+import { useFormKitInput } from '../composables'
 
 export interface FormKitPrimeToggleSwitchProps {
   trueValue?: ToggleSwitchProps['trueValue']
@@ -12,6 +13,7 @@ export interface FormKitPrimeToggleSwitchProps {
   unstyled?: ToggleSwitchProps['unstyled']
   labelLeft?: string
   labelRight?: string
+  wrapperClass?: string
 }
 
 const props = defineProps({
@@ -21,20 +23,12 @@ const props = defineProps({
   },
 })
 
-function handleInput(_: any) {
-  props.context?.node.input(props.context?._value)
-}
-
-function handleBlur(e: Event) {
-  props.context?.handlers.blur(e)
-}
-
-const styleClass = computed(() => (props.context?.state.validationVisible && !props.context?.state.valid) ? `${props.context?.attrs?.class} p-invalid` : props.context?.attrs?.class)
+const { styleClass, wrapperClass, handleInput, handleBlur } = useFormKitInput(props.context)
 </script>
 
 <template>
-  <div :class="context?.attrs.option_class" class="p-formkit">
-    <span v-if="context.attrs.labelLeft" class="formkit-prime-left">{{ context.labelLeft }}</span>
+  <div :class="wrapperClass">
+    <span v-if="context.labelLeft" class="formkit-prime-left">{{ context.labelLeft }}</span>
     <ToggleSwitch
       v-model="context._value"
       v-bind="context?.attrs"
@@ -54,6 +48,6 @@ const styleClass = computed(() => (props.context?.state.validationVisible && !pr
       @change="handleInput"
       @blur="handleBlur"
     />
-    <span v-if="context.attrs.labelRight" class="formkit-prime-right">{{ context.labelRight }}</span>
+    <span v-if="context.labelRight" class="formkit-prime-right">{{ context.labelRight }}</span>
   </div>
 </template>

package/dist/components/PrimeTreeSelect.vue

@@ -1,8 +1,9 @@
 <script setup lang='ts'>
-import { type PropType, computed } from 'vue'
+import type { PropType } from 'vue'
 import type { FormKitFrameworkContext } from '@formkit/core'
 
 import type { TreeSelectProps } from 'primevue/treeselect'
+import { useFormKitInput } from '../composables'
 
 export interface FormKitPrimeTreeSelectProps {
   options?: TreeSelectProps['options']
@@ -18,6 +19,7 @@ export interface FormKitPrimeTreeSelectProps {
   scrollHeight?: TreeSelectProps['scrollHeight']
   panelClass?: TreeSelectProps['panelClass']
   variant?: TreeSelectProps['variant']
+  wrapperClass?: string
 }
 
 const props = defineProps({
@@ -27,19 +29,11 @@ const props = defineProps({
   },
 })
 
-function handleInput(_: any) {
-  props.context?.node.input(props.context?._value)
-}
-
-function handleBlur(e: Event) {
-  props.context?.handlers.blur(e)
-}
-
-const styleClass = computed(() => (props.context?.state.validationVisible && !props.context?.state.valid) ? `${props.context?.attrs?.class} p-invalid` : props.context?.attrs?.class)
+const { styleClass, wrapperClass, handleInput, handleBlur } = useFormKitInput(props.context)
 </script>
 
 <template>
-  <div class="p-formkit">
+  <div :class="wrapperClass">
     <TreeSelect
       v-model="context._value"
       v-bind="context?.attrs"

package/dist/composables/index.d.ts

@@ -1,3 +1,4 @@
+import { useFormKitInput } from './useFormKitInput';
 import { useFormKitSchema } from './useFormKitSchema';
 import { useInputEditorSchema } from './useInputEditorSchema';
-export { useFormKitSchema, useInputEditorSchema, };
+export { useFormKitInput, useFormKitSchema, useInputEditorSchema, };

package/dist/composables/index.js

@@ -3,6 +3,12 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
+Object.defineProperty(exports, "useFormKitInput", {
+  enumerable: true,
+  get: function () {
+    return _useFormKitInput.useFormKitInput;
+  }
+});
 Object.defineProperty(exports, "useFormKitSchema", {
   enumerable: true,
   get: function () {
@@ -15,5 +21,6 @@ Object.defineProperty(exports, "useInputEditorSchema", {
     return _useInputEditorSchema.useInputEditorSchema;
   }
 });
+var _useFormKitInput = require("./useFormKitInput");
 var _useFormKitSchema = require("./useFormKitSchema");
 var _useInputEditorSchema = require("./useInputEditorSchema");

package/dist/composables/index.mjs

@@ -1,6 +1,8 @@
+import { useFormKitInput } from "./useFormKitInput.mjs";
 import { useFormKitSchema } from "./useFormKitSchema.mjs";
 import { useInputEditorSchema } from "./useInputEditorSchema.mjs";
 export {
+  useFormKitInput,
   useFormKitSchema,
   useInputEditorSchema
 };

package/dist/composables/useFormKitInput.d.ts

@@ -0,0 +1,8 @@
+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;
+    handleSelect: (e: any) => void;
+};

package/dist/composables/useFormKitInput.js

@@ -0,0 +1,35 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.useFormKitInput = useFormKitInput;
+var _vue = require("vue");
+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);
+  }
+  function handleChange(_) {
+    context?.node.input(context?._value);
+  }
+  function handleInput(_) {
+    context?.node.input(context?._value);
+  }
+  function handleSelect(e) {
+    context?.node.input(e);
+  }
+  return {
+    styleClass,
+    wrapperClass,
+    handleBlur,
+    handleChange,
+    handleInput,
+    handleSelect
+  };
+}

package/dist/composables/useFormKitInput.mjs

@@ -0,0 +1,22 @@
+import { computed } from "vue";
+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);
+  }
+  function handleChange(_) {
+    context?.node.input(context?._value);
+  }
+  function handleInput(_) {
+    context?.node.input(context?._value);
+  }
+  function handleSelect(e) {
+    context?.node.input(e);
+  }
+  return { styleClass, wrapperClass, handleBlur, handleChange, handleInput, handleSelect };
+}

package/dist/definitions/index.js

@@ -30,73 +30,73 @@ var _PrimeTreeSelect = _interopRequireDefault(require("../components/PrimeTreeSe
 var _PrimeSelectButton = _interopRequireDefault(require("../components/PrimeSelectButton.vue"));
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 const primeAutoCompleteDefinition = exports.primeAutoCompleteDefinition = (0, _vue.createInput)(_PrimeAutoComplete.default, {
-  props: ["pt", "ptOptions", "unstyled", "Select", "multiple"]
+  props: ["pt", "ptOptions", "unstyled", "Select", "multiple", "typeahead", "wrapperClass"]
 });
 const primeInputTextDefinition = exports.primeInputTextDefinition = (0, _vue.createInput)(_PrimeInputText.default, {
-  props: ["pt", "ptOptions", "unstyled", "placeholder", "icon"]
+  props: ["pt", "ptOptions", "unstyled", "placeholder", "icon", "wrapperClass"]
 });
 const primeInputNumberDefinition = exports.primeInputNumberDefinition = (0, _vue.createInput)(_PrimeInputNumber.default, {
-  props: ["useGrouping", "min", "max", "minFractionDigits", "maxFractionDigits", "locale", "mode", "currency", "prefix", "suffix", "showButtons", "buttonLayout", "step", "pt", "ptOptions", "unstyled", "placeholder"]
+  props: ["useGrouping", "min", "max", "minFractionDigits", "maxFractionDigits", "locale", "mode", "currency", "prefix", "suffix", "showButtons", "buttonLayout", "step", "pt", "ptOptions", "unstyled", "placeholder", "wrapperClass"]
 });
 const primeInputMaskDefinition = exports.primeInputMaskDefinition = (0, _vue.createInput)(_PrimeInputMask.default, {
-  props: ["mask", "slotChar", "autoClear", "unmask", "pt", "ptOptions", "unstyled", "invalid", "variant", "iconLeft", "iconRight"]
+  props: ["mask", "slotChar", "autoClear", "unmask", "pt", "ptOptions", "unstyled", "invalid", "variant", "iconLeft", "iconRight", "wrapperClass"]
 });
 const primePasswordDefinition = exports.primePasswordDefinition = (0, _vue.createInput)(_PrimePassword.default, {
-  props: ["mediumRegex", "strongRegex", "promptLabel", "weakLabel", "mediumLabel", "strongLabel", "hideIcon", "showIcon", "pt", "ptOptions", "unstyled", "placeholder", "feedback", "toggleMask"]
+  props: ["mediumRegex", "strongRegex", "promptLabel", "weakLabel", "mediumLabel", "strongLabel", "hideIcon", "showIcon", "pt", "ptOptions", "unstyled", "placeholder", "feedback", "toggleMask", "wrapperClass"]
 });
 const primeTextareaDefinition = exports.primeTextareaDefinition = (0, _vue.createInput)(_PrimeTextarea.default, {
-  props: ["pt", "ptOptions", "unstyled", "autoResize", "rows", "placeholder"]
+  props: ["pt", "ptOptions", "unstyled", "autoResize", "rows", "placeholder", "wrapperClass"]
 });
 const primeCheckboxDefinition = exports.primeCheckboxDefinition = (0, _vue.createInput)(_PrimeCheckbox.default, {
-  props: ["binary", "trueValue", "falseValue", "pt", "ptOptions", "unstyled", "labelLeft", "labelRight"]
+  props: ["binary", "trueValue", "falseValue", "pt", "ptOptions", "unstyled", "indeterminate", "variant", "labelLeft", "labelRight", "wrapperClass"]
 });
 const primeToggleSwitchDefinition = exports.primeToggleSwitchDefinition = (0, _vue.createInput)(_PrimeToggleSwitch.default, {
-  props: ["trueValue", "falseValue", "pt", "ptOptions", "unstyled", "labelLeft", "labelRight"]
+  props: ["trueValue", "falseValue", "pt", "ptOptions", "unstyled", "labelLeft", "labelRight", "wrapperClass"]
 });
 const primeInputOtpDefinition = exports.primeInputOtpDefinition = (0, _vue.createInput)(_PrimeInputOtp.default, {
-  props: ["length", "variant", "mask", "integerOnly", "pt", "ptOptions", "unstyled"]
+  props: ["length", "variant", "mask", "integerOnly", "pt", "ptOptions", "unstyled", "wrapperClass"]
 });
 const primeEditorDefinition = exports.primeEditorDefinition = (0, _vue.createInput)(_PrimeEditor.default, {
-  props: ["placeholder", "formats", "modules", "pt", "ptOptions", "unstyled"]
+  props: ["placeholder", "formats", "modules", "pt", "ptOptions", "unstyled", "wrapperClass"]
 });
 const primeSelectDefinition = exports.primeSelectDefinition = (0, _vue.createInput)(_PrimeSelect.default, {
-  props: ["options", "optionLabel", "optionValue", "optionDisabled", "optionGroupLabel", "optionGroupChildren", "scrollHeight", "filter", "filterPlaceholder", "filterLocale", "filterMatchMode", "filterFields", "filterInputProps", "editable", "placeholder", "dataKey", "showClear", "panelStyle", "panelClass", "panelProps", "appendTo", "resetFilterOnHide", "virtualScrollerOptions", "autoOptionFocus", "selectOnFocus", "filterMessage", "selectionMessage", "emptySelectionMessage", "emptyFilterMessage", "emptyMessage", "pt", "ptOptions", "unstyled"]
+  props: ["options", "optionLabel", "optionValue", "optionDisabled", "optionGroupLabel", "optionGroupChildren", "scrollHeight", "filter", "filterPlaceholder", "filterLocale", "filterMatchMode", "filterFields", "filterInputProps", "editable", "placeholder", "dataKey", "showClear", "panelStyle", "panelClass", "panelProps", "appendTo", "resetFilterOnHide", "virtualScrollerOptions", "autoOptionFocus", "selectOnFocus", "filterMessage", "selectionMessage", "emptySelectionMessage", "emptyFilterMessage", "emptyMessage", "pt", "ptOptions", "unstyled", "wrapperClass"]
 });
 const primeMultiSelectDefinition = exports.primeMultiSelectDefinition = (0, _vue.createInput)(_PrimeMultiSelect.default, {
-  props: ["options", "optionLabel", "optionValue", "optionDisabled", "optionGroupLabel", "optionGroupChildren", "scrollHeight", "inputProps", "closeButtonProps", "dataKey", "filter", "filterPlaceholder", "filterLocale", "filterMatchMode", "filterFields", "appendTo", "display", "maxSelectedLabels", "selectedItemsLabel", "selectionLimit", "showToggleAll", "loading", "selectAll", "resetFilterOnHide", "virtualScrollerOptions", "autoOptionFocus", "autoFilterFocus", "filterMessage", "selectionMessage", "emptySelectionMessage", "emptyFilterMessage", "emptyMessage", "pt", "placeholder", "ptOptions", "unstyled"]
+  props: ["options", "optionLabel", "optionValue", "optionDisabled", "optionGroupLabel", "optionGroupChildren", "scrollHeight", "inputProps", "closeButtonProps", "dataKey", "filter", "filterPlaceholder", "filterLocale", "filterMatchMode", "filterFields", "appendTo", "display", "maxSelectedLabels", "selectedItemsLabel", "selectionLimit", "showToggleAll", "loading", "selectAll", "resetFilterOnHide", "virtualScrollerOptions", "autoOptionFocus", "autoFilterFocus", "filterMessage", "selectionMessage", "emptySelectionMessage", "emptyFilterMessage", "emptyMessage", "pt", "placeholder", "ptOptions", "unstyled", "wrapperClass"]
 });
 const primeListboxDefinition = exports.primeListboxDefinition = (0, _vue.createInput)(_PrimeListbox.default, {
-  props: ["pt", "ptOptions", "unstyled", "options", "optionLabel", "optionValue", "multiple", "filter", "filterIcon", "filterPlaceholder", "filterLocale", "filterMatchMode", "autoOptionFocus", "selectOnFocus"]
+  props: ["pt", "ptOptions", "unstyled", "options", "optionLabel", "optionValue", "multiple", "filter", "filterIcon", "filterPlaceholder", "filterLocale", "filterMatchMode", "autoOptionFocus", "selectOnFocus", "wrapperClass"]
 });
 const primeDatePickerDefinition = exports.primeDatePickerDefinition = (0, _vue.createInput)(_PrimeDatePicker.default, {
-  props: ["dateFormat", "placeholder", "selectionMode", "inline", "icon", "showOtherMonths", "selectOtherMonths", "showIcon", "previousIcon", "nextIcon", "incrementIcon", "decrementIcon", "numberOfMonths", "responsiveOptions", "view", "touchUI", "minDate", "maxDate", "disabledDates", "disabledDays", "maxDateCount", "showOnFocus", "autoZIndex", "baseZIndex", "showButtonBar", "showTime", "timeOnly", "shortYearCutoff", "hourFormat", "stepHour", "stepMinute", "stepSecond", "showSeconds", "hideOnDateTimeSelect", "hideOnRangeSelection", "timeSeparator", "showWeek", "manualInput", "appendTo", "panelStyle", "panelClass", "pt", "ptOptions", "unstyled"]
+  props: ["dateFormat", "placeholder", "selectionMode", "inline", "icon", "showOtherMonths", "selectOtherMonths", "showIcon", "previousIcon", "nextIcon", "incrementIcon", "decrementIcon", "numberOfMonths", "responsiveOptions", "view", "touchUI", "minDate", "maxDate", "disabledDates", "disabledDays", "maxDateCount", "showOnFocus", "autoZIndex", "baseZIndex", "showButtonBar", "showTime", "timeOnly", "shortYearCutoff", "hourFormat", "stepHour", "stepMinute", "stepSecond", "showSeconds", "hideOnDateTimeSelect", "hideOnRangeSelection", "timeSeparator", "showWeek", "manualInput", "appendTo", "panelStyle", "panelClass", "pt", "ptOptions", "unstyled", "wrapperClass"]
 });
 const primeSliderDefinition = exports.primeSliderDefinition = (0, _vue.createInput)(_PrimeSlider.default, {
-  props: ["pt", "ptOptions", "unstyled", "min", "max", "step", "range", "orientation"]
+  props: ["pt", "ptOptions", "unstyled", "min", "max", "step", "range", "orientation", "wrapperClass"]
 });
 const primeRatingDefinition = exports.primeRatingDefinition = (0, _vue.createInput)(_PrimeRating.default, {
-  props: ["unstyled", "stars", "cancel", "onIcon", "offIcon", "cancelIcon", "ptOptions", "pt"]
+  props: ["unstyled", "stars", "cancel", "onIcon", "offIcon", "cancelIcon", "ptOptions", "pt", "wrapperClass"]
 });
 const primeRadioButtonDefinition = exports.primeRadioButtonDefinition = (0, _vue.createInput)(_PrimeRadioButton.default, {
-  props: ["pt", "ptOptions", "unstyled", "options", "options_class", "option_class", "label_class"]
+  props: ["pt", "ptOptions", "unstyled", "options", "optionClass", "labelClass", "wrapperClass"]
 });
 const primeKnobDefinition = exports.primeKnobDefinition = (0, _vue.createInput)(_PrimeKnob.default, {
-  props: ["pt", "ptOptions", "unstyled", "min", "max", "step", "size", "strokeWidth", "showValue", "valueColor", "rangeColor", "textColor", "valueTemplate"]
+  props: ["pt", "ptOptions", "unstyled", "min", "max", "step", "size", "strokeWidth", "showValue", "valueColor", "rangeColor", "textColor", "valueTemplate", "wrapperClass"]
 });
 const primeColorPickerDefinition = exports.primeColorPickerDefinition = (0, _vue.createInput)(_PrimeColorPicker.default, {
-  props: ["defaultColor", "inline", "format", "pt", "ptOptions", "unstyled"]
+  props: ["defaultColor", "inline", "format", "pt", "ptOptions", "unstyled", "wrapperClass"]
 });
 const primeToggleButtonDefinition = exports.primeToggleButtonDefinition = (0, _vue.createInput)(_PrimeToggleButton.default, {
-  props: ["pt", "ptOptions", "unstyled", "onLabel", "offLabel", "onIcon", "offIcon", "iconPos"]
+  props: ["pt", "ptOptions", "unstyled", "onLabel", "offLabel", "onIcon", "offIcon", "iconPos", "wrapperClass"]
 });
 const primeSelectButtonDefinition = exports.primeSelectButtonDefinition = (0, _vue.createInput)(_PrimeSelectButton.default, {
-  props: ["pt", "ptOptions", "unstyled", "optionLabel", "optionValue", "optionDisabled", "multiple", "unselectable", "dataKey", "options"]
+  props: ["pt", "ptOptions", "unstyled", "optionLabel", "optionValue", "optionDisabled", "multiple", "unselectable", "dataKey", "options", "wrapperClass"]
 });
 const primeCascadeSelectDefinition = exports.primeCascadeSelectDefinition = (0, _vue.createInput)(_PrimeCascadeSelect.default, {
-  props: ["options", "optionLabel", "optionValue", "optionGroupLabel", "optionGroupChildren", "placeholder", "pt", "ptOptions", "unstyled"]
+  props: ["options", "optionLabel", "optionValue", "optionGroupLabel", "optionGroupChildren", "placeholder", "pt", "ptOptions", "unstyled", "wrapperClass"]
 });
 const primeTreeSelectDefinition = exports.primeTreeSelectDefinition = (0, _vue.createInput)(_PrimeTreeSelect.default, {
-  props: ["options", "placeholder", "selectionMode", "pt", "ptOptions", "unstyled", "emptyMessage", "display", "metaKeySelection", "appendTo", "scrollHeight", "panelClass", "variant"]
+  props: ["options", "placeholder", "selectionMode", "pt", "ptOptions", "unstyled", "emptyMessage", "display", "metaKeySelection", "appendTo", "scrollHeight", "panelClass", "variant", "wrapperClass"]
 });
 const primeInputs = exports.primeInputs = {
   primeAutoComplete: primeAutoCompleteDefinition,