@sfxcode/formkit-primevue 1.8.5 → 1.9.0

package/dist/components/PrimeMultiSelect.vue

@@ -1,31 +1,116 @@
 <script setup lang='ts'>
-import { computed, defineProps } from 'vue'
+import { type PropType, computed } from 'vue'
+import type { FormKitFrameworkContext } from '@formkit/core'
+import type { MultiSelectProps } from 'primevue/multiselect'
+
+export interface FormKitPrimeMultiSelectProps {
+  options?: MultiSelectProps['options']
+  optionLabel?: MultiSelectProps['optionLabel']
+  optionValue?: MultiSelectProps['optionValue']
+  optionDisabled?: MultiSelectProps['optionDisabled']
+  optionGroupLabel?: MultiSelectProps['optionGroupLabel']
+  optionGroupChildren?: MultiSelectProps['optionGroupChildren']
+  scrollHeight?: MultiSelectProps['scrollHeight']
+  inputProps?: MultiSelectProps['inputProps']
+  closeButtonProps?: MultiSelectProps['closeButtonProps']
+  dataKey?: MultiSelectProps['dataKey']
+  filter?: MultiSelectProps['filter']
+  filterPlaceholder?: MultiSelectProps['filterPlaceholder']
+  filterLocale?: MultiSelectProps['filterLocale']
+  filterMatchMode?: MultiSelectProps['filterMatchMode']
+  filterFields?: MultiSelectProps['filterFields']
+  appendTo?: MultiSelectProps['appendTo']
+  display?: MultiSelectProps['display']
+  maxSelectedLabels?: MultiSelectProps['maxSelectedLabels']
+  selectedItemsLabel?: MultiSelectProps['selectedItemsLabel']
+  selectionLimit?: MultiSelectProps['selectionLimit']
+  showToggleAll?: MultiSelectProps['showToggleAll']
+  loading?: MultiSelectProps['loading']
+  selectAll?: MultiSelectProps['selectAll']
+  resetFilterOnHide?: MultiSelectProps['resetFilterOnHide']
+  virtualScrollerOptions?: MultiSelectProps['virtualScrollerOptions']
+  autoOptionFocus?: MultiSelectProps['autoOptionFocus']
+  autoFilterFocus?: MultiSelectProps['autoFilterFocus']
+  filterMessage?: MultiSelectProps['filterMessage']
+  selectionMessage?: MultiSelectProps['selectionMessage']
+  emptySelectionMessage?: MultiSelectProps['emptySelectionMessage']
+  emptyFilterMessage?: MultiSelectProps['emptyFilterMessage']
+  emptyMessage?: MultiSelectProps['emptyMessage']
+  pt?: MultiSelectProps['pt']
+  placeholder?: MultiSelectProps['placeholder']
+  ptOptions?: MultiSelectProps['ptOptions']
+  unstyled?: MultiSelectProps['unstyled']
+}
 
 const props = defineProps({
-  context: Object,
+  context: {
+    type: Object as PropType<FormKitFrameworkContext & FormKitPrimeMultiSelectProps>,
+    required: true,
+  },
 })
 
-const context = props.context
-const attrs = computed(() => context?.attrs)
-
 function handleChange(e: any) {
-  context?.node.input(props.context?._value)
+  props.context?.node.input(props.context?._value)
+}
+
+function handleBlur(e: Event) {
+  props.context?.handlers.blur(e)
 }
 
-const styleClass = computed(() => (context?.state.validationVisible && !context?.state.valid) ? `${attrs.value?.class} p-invalid` : attrs.value?.class)
+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">
     <MultiSelect
       v-model="context._value"
-      v-bind="attrs"
+      v-bind="context?.attrs"
       :input-id="context.id"
-      :disabled="attrs._disabled ?? !!context?.disabled"
-      :readonly="attrs._readonly ?? false"
-      :list-style="attrs.style"
+      :disabled="!!context?.disabled"
+      :readonly="context?.attrs._readonly ?? false"
+      :list-style="context?.attrs.style"
       :class="styleClass"
+      :tabindex="context?.attrs.tabindex"
+      :aria-label="context?.attrs.ariaLabel"
+      :aria-labelledby="context?.attrs.ariaLabelledby"
+      :placeholder="context.placeholder"
+      :options="context.options"
+      :option-label="context.optionLabel"
+      :option-value="context.optionValue"
+      :option-disabled="context.optionDisabled"
+      :option-group-label="context.optionGroupLabel"
+      :option-group-children="context.optionGroupChildren"
+      :scroll-height="context.scrollHeight"
+      :input-props="context.inputProps"
+      :close-button-props="context.closeButtonProps"
+      :data-key="context.dataKey"
+      :filter="context.filter ?? false"
+      :filter-placeholder="context.filterPlaceholder"
+      :filter-locale="context.filterLocale"
+      :filter-match-mode="context.filterMatchMode"
+      :fitler-fields="context.filterFields"
+      :append-to="context.appendTo"
+      :display="context.display"
+      :max-selected-labels="context.maxSelectedLabels"
+      :selected-items-label="context.selectedItemsLabel"
+      :selection-limit="context.selectionLimit"
+      :show-toggle-all="context.showToggleAll"
+      :loading="context.loading"
+      :select-all="context.selectAll"
+      :reset-filter-on-hide="context.resetFilterOnHide"
+      :virtual-scroller-options="context.virtualScrollerOptions"
+      :auto-option-focus="context.autoOptionFocus"
+      :auto-filter-focus="context.autoFilterFocus"
+      :filter-message="context.filterMessage"
+      :selection-message="context.selectionMessage"
+      :empty-selection-message="context.emptySelectionMessage"
+      :empty-filter-message="context.emptyFilterMessage"
+      :empty-message="context.emptyMessage"
+      :pt="context.pt"
+      :pt-options="context.ptOptions"
+      :unstyled="context.unstyled ?? false"
       @change="handleChange"
+      @blur="handleBlur"
     />
   </div>
 </template>

package/dist/components/PrimePassword.vue

@@ -1,35 +1,70 @@
 <script setup lang='ts'>
-import { computed, defineProps } from 'vue'
+import { type PropType, computed } from 'vue'
+import type { FormKitFrameworkContext } from '@formkit/core'
+import type { PasswordProps } from 'primevue/password'
+
+export interface FormKitPrimePasswordProps {
+  mediumRegex?: PasswordProps['mediumRegex']
+  strongRegex?: PasswordProps['strongRegex']
+  promptLabel?: PasswordProps['promptLabel']
+  weakLabel?: PasswordProps['weakLabel']
+  mediumLabel?: PasswordProps['mediumLabel']
+  strongLabel?: PasswordProps['strongLabel']
+  hideIcon?: PasswordProps['hideIcon']
+  showIcon?: PasswordProps['showIcon']
+  pt?: PasswordProps['pt']
+  ptOptions?: PasswordProps['ptOptions']
+  unstyled?: PasswordProps['unstyled']
+  placeholder?: PasswordProps['placeholder']
+  feedback?: PasswordProps['feedback']
+  toggleMask?: PasswordProps['toggleMask']
+}
 
 const props = defineProps({
-  context: Object,
+  context: {
+    type: Object as PropType<FormKitFrameworkContext & FormKitPrimePasswordProps>,
+    required: true,
+  },
 })
 
-const context = props.context
-const attrs = computed(() => context?.attrs)
-
-function handleBlur(e: any) {
-  context?.handlers.blur(e.target.value)
+function handleBlur(e: Event) {
+  props.context?.handlers.blur(e)
 }
 
 function handleInput(e: any) {
-  context?.node.input(e.target.value)
+  props.context?.node.input(e.target.value)
 }
 
-const styleClass = computed(() => (context?.state.validationVisible && !context?.state.valid) ? `${attrs.value?.class} p-invalid` : attrs.value?.class)
+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">
     <Password
       v-model="context._value"
-      v-bind="attrs"
+      v-bind="context?.attrs"
       :input-id="context.id"
-      :disabled="attrs._disabled ?? !!context?.disabled"
-      :readonly="attrs._readonly ?? false"
-      :input-style="attrs.style"
+      :disabled="!!context?.disabled"
+      :readonly="context?.attrs._readonly ?? false"
+      :input-style="context?.attrs.style"
       :input-class="styleClass"
+      :tabindex="context?.attrs.tabindex"
+      :aria-label="context?.attrs.ariaLabel"
+      :aria-labelledby="context?.attrs.ariaLabelledby"
+      :placeholder="context.placeholder"
+      :medium-regex="context.mediumRegex ?? '^(((?=.*[a-z])(?=.*[A-Z]))|((?=.*[a-z])(?=.*[0-9]))|((?=.*[A-Z])(?=.*[0-9])))(?=.{6,})'"
+      :strong-regex="context.strongRegex ?? '^(?=.*[a-z])(?=.*[A-Z])(?=.*[0-9])(?=.{8,})'"
+      :prompt-label="context.promptLabel"
+      :weak-label="context.weakLabel"
+      :medium-label="context.mediumLabel"
+      :strong-label="context.strongLabel"
+      :hide-icon="context.hideIcon ?? 'pi pi-eye-slash'"
+      :show-icon="context.showIcon ?? 'pi pi-eye'"
       :feedback="context.feedback ?? false"
+      :toggle-mask="context.toggleMask ?? false"
+      :pt="context.pt"
+      :pt-options="context.ptOptions"
+      :unstyled="context.unstyled ?? false"
       @input="handleInput"
       @blur="handleBlur"
     />

package/dist/components/PrimeRadioButton.vue

@@ -1,37 +1,55 @@
 <script setup lang='ts'>
-import { computed, defineProps } from 'vue'
+import { type PropType, computed } from 'vue'
+import type { FormKitFrameworkContext } from '@formkit/core'
+import type { RadioButtonProps } from 'primevue/radiobutton'
+
+export interface FormKitPrimeRadioButtonProps {
+  pt?: RadioButtonProps['pt']
+  ptOptions?: RadioButtonProps['ptOptions']
+  unstyled?: RadioButtonProps['unstyled']
+  options?: { label: string, value: any }[]
+  options_class?: string
+}
 
 const props = defineProps({
-  context: Object,
+  context: {
+    type: Object as PropType<FormKitFrameworkContext & FormKitPrimeRadioButtonProps>,
+    required: true,
+  },
 })
 
-const context = props.context
-const attrs = computed(() => context?.attrs)
-
 function handleChange(e: any) {
-  context?.node.input(props.context?._value)
+  props.context?.node.input(props.context?._value)
+}
+
+function handleBlur(e: Event) {
+  props.context?.handlers.blur(e)
 }
 
-const styleClass = computed(() => (context?.state.validationVisible && !context?.state.valid) ? `${attrs.value?.class} p-invalid` : attrs.value?.class)
+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="attrs.options_class" class="p-formkit">
-    <div v-for="option in attrs.options" :key="option.value" :class="attrs.option_class">
+  <div :class="context.options_class" class="p-formkit">
+    <div v-for="option in context.options" :key="option.value" :class="context.option_class">
       <RadioButton
         :id="context.id"
         v-model="context._value"
-        v-bind="attrs"
-        :disabled="attrs._disabled ?? !!context?.disabled"
-        :readonly="attrs._readonly ?? false"
-        :name="attrs.name"
+        v-bind="context?.attrs"
+        :disabled="!!context?.disabled"
+        :readonly="context?.attrs._readonly ?? false"
+        :name="context?.attrs.name"
         :value="option.value"
-        :input-style="attrs.style"
+        :input-style="context?.attrs.style"
         :input-class="styleClass"
+        :pt="context.pt"
+        :pt-options="context.ptOptions"
+        :unstyled="context.unstyled ?? false"
         @click="handleChange"
         @change="handleChange"
+        @blur="handleChange"
       />
-      <label :for="option.value">{{ option.label }}</label>
+      <label :for="option.value" class="p-formkit-radio-label">{{ option.label }}</label>
     </div>
   </div>
 </template>

package/dist/components/PrimeRating.vue

@@ -1,18 +1,35 @@
 <script setup lang='ts'>
-import { computed, defineProps } from 'vue'
+import { type PropType, computed } from 'vue'
+import type { FormKitFrameworkContext } from '@formkit/core'
+import type { RatingProps } from 'primevue/rating'
+
+export interface FormKitPrimeRatingProps {
+  unstyled?: RatingProps['unstyled']
+  stars?: RatingProps['stars']
+  cancel?: RatingProps['cancel']
+  onIcon?: RatingProps['onIcon']
+  offIcon?: RatingProps['offIcon']
+  cancelIcon?: RatingProps['cancelIcon']
+  ptOptions?: RatingProps['ptOptions']
+  pt?: RatingProps['pt']
+}
 
 const props = defineProps({
-  context: Object,
+  context: {
+    type: Object as PropType<FormKitFrameworkContext & FormKitPrimeRatingProps>,
+    required: true,
+  },
 })
 
-const context = props.context
-const attrs = computed(() => context?.attrs)
-
 function handleInput(e: any) {
-  context?.node.input(props.context?._value)
+  props.context?.node.input(props.context?._value)
+}
+
+function handleBlur(e: Event) {
+  props.context?.handlers.blur(e)
 }
 
-const styleClass = computed(() => (context?.state.validationVisible && !context?.state.valid) ? `${attrs.value?.class} p-invalid` : attrs.value?.class)
+const styleClass = computed(() => (props.context?.state.validationVisible && !props.context?.state.valid) ? `${props.context?.attrs?.class} p-invalid` : props.context?.attrs?.class)
 </script>
 
 <template>
@@ -20,15 +37,24 @@ const styleClass = computed(() => (context?.state.validationVisible && !context?
     <Rating
       :id="context.id"
       v-model="context._value"
-      v-bind="attrs"
-      :disabled="attrs._disabled ?? !!context?.disabled"
-      :readonly="attrs._readonly ?? false"
-      :style="attrs.style"
+      v-bind="context?.attrs"
+      :disabled="!!context?.disabled"
+      :readonly="context?.attrs._readonly ?? false"
+      :style="context?.attrs.style"
       :class="styleClass"
-      :on-icon="attrs.onIcon ?? 'pi pi-star-fill'"
-      :off-icon="attrs.offIcon ?? 'pi pi-star'"
-      :cancel="attrs.cancel ?? false"
+      :tabindex="context?.attrs.tabindex"
+      :aria-label="context?.attrs.ariaLabel"
+      :aria-labelledby="context?.attrs.ariaLabelledby"
+      :stars="context.stars ?? 5"
+      :cancel="context.cancel ?? false"
+      :on-icon="context.onIcon ?? 'pi pi-star-fill'"
+      :off-icon="context.offIcon ?? 'pi pi-star'"
+      :cancel-icon="context.cancelIcon ?? 'pi pi-ban'"
+      :pt="context.pt"
+      :pt-options="context.ptOptions"
+      :unstyled="context.unstyled ?? false"
       @change="handleInput"
+      @blur="handleBlur"
     />
   </div>
 </template>

package/dist/components/PrimeSelectButton.vue

@@ -1,18 +1,37 @@
 <script setup lang='ts'>
-import { computed, defineProps } from 'vue'
+import { type PropType, computed } from 'vue'
+import type { FormKitFrameworkContext } from '@formkit/core'
+import type { SelectButtonProps } from 'primevue/selectbutton'
+
+export interface FormKitPrimeSelectButtonProps {
+  pt?: SelectButtonProps['pt']
+  ptOptions?: SelectButtonProps['ptOptions']
+  unstyled?: SelectButtonProps['unstyled']
+  optionLabel?: SelectButtonProps['optionLabel']
+  optionValue?: SelectButtonProps['optionValue']
+  optionDisabled?: SelectButtonProps['optionDisabled']
+  multiple?: SelectButtonProps['multiple']
+  unselectable?: SelectButtonProps['unselectable']
+  dataKey?: SelectButtonProps['dataKey']
+  options?: SelectButtonProps['options']
+}
 
 const props = defineProps({
-  context: Object,
+  context: {
+    type: Object as PropType<FormKitFrameworkContext & FormKitPrimeSelectButtonProps>,
+    required: true,
+  },
 })
 
-const context = props.context
-const attrs = computed(() => context?.attrs)
-
 function handleChange(e: any) {
-  context?.node.input(props.context?._value)
+  props.context?.node.input(props.context?._value)
+}
+
+function handleBlur(e: Event) {
+  props.context?.handlers.blur(e)
 }
 
-const styleClass = computed(() => (context?.state.validationVisible && !context?.state.valid) ? `${attrs.value?.class} p-invalid` : attrs.value?.class)
+const styleClass = computed(() => (props.context?.state.validationVisible && !props.context?.state.valid) ? `${props.context?.attrs?.class} p-invalid` : props.context?.attrs?.class)
 </script>
 
 <template>
@@ -20,12 +39,26 @@ const styleClass = computed(() => (context?.state.validationVisible && !context?
     <SelectButton
       :id="context.id"
       v-model="context._value"
-      v-bind="attrs"
-      :disabled="attrs._disabled ?? !!context?.disabled"
-      :readonly="attrs._readonly ?? false"
-      :style="attrs.style"
+      v-bind="context?.attrs"
+      :disabled="!!context?.disabled"
+      :readonly="context?.attrs._readonly ?? false"
+      :style="context?.attrs.style"
       :class="styleClass"
+      :tabindex="context?.attrs.tabindex"
+      :aria-label="context?.attrs.ariaLabel"
+      :aria-labelledby="context?.attrs.ariaLabelledby"
+      :options="context.options"
+      :option-label="context.optionLabel"
+      :option-value="context.optionValue"
+      :option-disabled="context.optionDisabled"
+      :multiple="context.multiple ?? false"
+      :unselectable="context.unselectable ?? true"
+      :data-key="context.dataKey"
+      :pt="context.pt"
+      :pt-options="context.ptOptions"
+      :unstyled="context.unstyled ?? false"
       @change="handleChange"
+      @blur="handleBlur"
     />
   </div>
 </template>

package/dist/components/PrimeSlider.vue

@@ -1,18 +1,36 @@
 <script setup lang='ts'>
-import { computed, defineProps } from 'vue'
+import { type PropType, computed } from 'vue'
+import type { FormKitFrameworkContext } from '@formkit/core'
+import type { SliderProps } from 'primevue/slider'
+
+export interface FormKitPrimeSliderProps {
+  pt?: SliderProps['pt']
+  ptOptions?: SliderProps['ptOptions']
+  unstyled?: SliderProps['unstyled']
+  min?: SliderProps['min']
+  max?: SliderProps['max']
+  step?: SliderProps['step']
+  range?: SliderProps['range']
+  orientation?: SliderProps['orientation']
+}
 
 const props = defineProps({
-  context: Object,
+  context: {
+    type: Object as PropType<FormKitFrameworkContext & FormKitPrimeSliderProps>,
+    required: true,
+  },
 })
 
-const context = props.context
-const attrs = computed(() => context?.attrs)
-
 function handleInput(e: any) {
-  context?.node.input(e)
-  context?.handlers.blur(e)
+  props.context?.node.input(e)
+  props.context?.handlers.blur(e)
 }
-const styleClass = computed(() => (context?.state.validationVisible && !context?.state.valid) ? `${attrs.value?.class} p-invalid` : attrs.value?.class)
+
+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>
@@ -20,12 +38,24 @@ const styleClass = computed(() => (context?.state.validationVisible && !context?
     <Slider
       :id="context.id"
       v-model="context._value"
-      v-bind="attrs"
-      :disabled="attrs._disabled ?? !!context?.disabled"
-      :readonly="attrs._readonly ?? false"
-      :style="attrs.style"
+      v-bind="context?.attrs"
+      :disabled="!!context?.disabled"
+      :readonly="context?.attrs._readonly ?? false"
+      :style="context?.attrs.style"
       :class="styleClass"
+      :tabindex="context?.attrs.tabindex"
+      :aria-label="context?.attrs.ariaLabel"
+      :aria-labelledby="context?.attrs.ariaLabelledby"
+      :min="context.min ?? 0"
+      :max="context.max ?? 100"
+      :step="context.step ?? undefined"
+      :range="context.range ?? false"
+      :orientation="context.orientation ?? 'horizontal'"
+      :pt="context.pt"
+      :pt-options="context.ptOptions"
+      :unstyled="context.unstyled ?? false"
       @change="handleInput"
+      @blur="handleBlur"
     />
   </div>
 </template>

package/dist/components/PrimeTextarea.vue

@@ -1,21 +1,32 @@
 <script setup lang='ts'>
-import { computed, defineProps } from 'vue'
+import { type PropType, computed } from 'vue'
+import type { FormKitFrameworkContext } from '@formkit/core'
+import type { TextareaProps } from 'primevue/textarea'
+
+export interface FormKitPrimeTextareaProps {
+  pt?: TextareaProps['pt']
+  ptOptions?: TextareaProps['ptOptions']
+  unstyled?: TextareaProps['unstyled']
+  autoResize?: TextareaProps['autoResize']
+  rows?: TextareaProps['rows']
+  placeholder?: TextareaProps['placeholder']
+}
 
 const props = defineProps({
-  context: Object,
+  context: {
+    type: Object as PropType<FormKitFrameworkContext & FormKitPrimeTextareaProps>,
+    required: true,
+  },
 })
 
-const context = props.context
-const attrs = computed(() => context?.attrs)
-
-function handleBlur(e: any) {
-  context?.handlers.blur(e.target.value)
+function handleBlur(e: Event) {
+  props.context?.handlers.blur(e)
 }
 
 function handleInput(e: any) {
-  context?.node.input(e.target.value)
+  props.context?.node.input(e.target.value)
 }
-const styleClass = computed(() => (context?.state.validationVisible && !context?.state.valid) ? `${attrs.value?.class} p-invalid` : attrs.value?.class)
+const styleClass = computed(() => (props.context?.state.validationVisible && !props.context?.state.valid) ? `${props.context?.attrs?.class} p-invalid` : props.context?.attrs?.class)
 </script>
 
 <template>
@@ -23,12 +34,20 @@ const styleClass = computed(() => (context?.state.validationVisible && !context?
     <Textarea
       :id="context.id"
       v-model="context._value"
-      v-bind="attrs"
-      :disabled="attrs._disabled ?? !!context?.disabled"
-      :readonly="attrs._readonly ?? false"
-      :style="attrs.style"
+      v-bind="context?.attrs"
+      :disabled="!!context?.disabled"
+      :readonly="context?.attrs._readonly ?? false"
+      :style="context?.attrs.style"
       :class="styleClass"
+      :tabindex="context?.attrs.tabindex"
+      :aria-label="context?.attrs.ariaLabel"
+      :aria-labelledby="context?.attrs.ariaLabelledby"
+      :placeholder="context.placeholder"
       :rows="context.rows ?? 3"
+      :auto-resize="context.autoResize ?? false"
+      :pt="context.pt"
+      :pt-options="context.ptOptions"
+      :unstyled="context.unstyled ?? false"
       @input="handleInput"
       @blur="handleBlur"
     />

package/dist/components/PrimeToggleButton.vue

@@ -1,32 +1,60 @@
 <script setup lang='ts'>
-import { computed, defineProps } from 'vue'
+import { type PropType, computed } from 'vue'
+import type { FormKitFrameworkContext } from '@formkit/core'
+import type { ToggleButtonProps } from 'primevue/togglebutton'
+
+export interface FormKitPrimeToggleButtonProps {
+  pt?: ToggleButtonProps['pt']
+  ptOptions?: ToggleButtonProps['ptOptions']
+  unstyled?: ToggleButtonProps['unstyled']
+  onLabel?: ToggleButtonProps['onLabel']
+  offLabel?: ToggleButtonProps['offLabel']
+  onIcon?: ToggleButtonProps['onIcon']
+  offIcon?: ToggleButtonProps['offIcon']
+  iconPos?: ToggleButtonProps['iconPos']
+}
 
 const props = defineProps({
-  context: Object,
+  context: {
+    type: Object as PropType<FormKitFrameworkContext & FormKitPrimeToggleButtonProps>,
+    required: true,
+  },
 })
 
-const context = props.context
-const attrs = computed(() => context?.attrs)
-
 function handleChange(e: any) {
-  context?.node.input(props.context?._value)
+  props.context?.node.input(props.context?._value)
 }
-const styleClass = computed(() => (context?.state.validationVisible && !context?.state.valid) ? `${attrs.value?.class} p-invalid` : attrs.value?.class)
+
+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">
     <ToggleButton
       v-model="context._value"
-      v-bind="attrs"
+      v-bind="context?.attrs"
       :input-id="context.id"
-      :disabled="attrs._disabled ?? !!context?.disabled"
-      :readonly="attrs._readonly ?? false"
-      :input-style="attrs.style"
+      :disabled="!!context?.disabled"
+      :readonly="context?.attrs._readonly ?? false"
+      :input-style="context?.attrs.style"
       :input-class="styleClass"
+      :tabindex="context?.attrs.tabindex"
+      :aria-label="context?.attrs.ariaLabel"
+      :aria-labelledby="context?.attrs.ariaLabelledby"
+      :on-label="context.onLabel ?? 'Yes'"
+      :off-label="context.offLabel ?? 'No'"
       :on-icon="context.onIcon ?? 'pi pi-check'"
       :off-icon="context.offIcon ?? 'pi pi-times'"
+      :icon-pos="context.iconPos ?? 'left'"
+      :pt="context.pt"
+      :pt-options="context.ptOptions"
+      :unstyled="context.unstyled ?? false"
       @change="handleChange"
+      @blur="handleBlur"
     />
   </div>
 </template>