fix(state): Missing input disabled state, while submitting a form via…

… XHR/Fetch request. #35

src/components/demo/PrimeInput.vue

@@ -2,6 +2,8 @@
 import { FormKitSchema } from '@formkit/vue'
 import { ref } from 'vue'
 import JsonEditorVue from 'json-editor-vue'
+import { useToast } from 'primevue/usetoast'
+import type { ToastMessageOptions } from 'primevue/toast'
 
 const props = defineProps<{
   header: string
@@ -11,14 +13,26 @@ const props = defineProps<{
   customAttributes?: string
 }>()
 
+const toast = useToast()
+
+function showMessage(severity: ToastMessageOptions['severity'], summary: string, detail: string) {
+  toast.add({ severity, summary, detail, life: 1000 })
+}
+
 const formSchema = ref(props.schema)
 const formData = ref(props.data)
 
 const documentationLink = `https://primevue.org/${props.header.replace('Prime', '').toLowerCase()}`
+
+async function submitHandler() {
+  showMessage('success', 'Form Submitted ...', 'Form submitted successfully')
+  await new Promise(resolve => setTimeout(resolve, 2000))
+}
 </script>
 
 <template>
   <div>
+    <Toast position="bottom-right" />
     <h2 class="text-color-[var(--primary-color)] pb-2">
       {{ header }}
     </h2>
@@ -32,6 +46,7 @@ const documentationLink = `https://primevue.org/${props.header.replace('Prime',
           :submit-attrs="{
             inputClass: 'p-button p-component',
           }"
+          @submit="submitHandler"
         >
           <FormKitSchema :schema="formSchema" :data="formData" />
         </FormKit>

src/formkit/PrimeAutoComplete.vue

@@ -24,7 +24,7 @@ const styleClass = computed(() => (context?.state.validationVisible && !context?
     <AutoComplete
       :id="context.id"
       v-model="context._value"
-      :disabled="attrs._disabled ?? false"
+      :disabled="attrs._disabled ?? !!context?.disabled"
       :tabindex="attrs.tabindex"
       :aria-label="attrs.ariaLabel"
       :aria-labelledby="attrs.ariaLabelledby"

src/formkit/PrimeCalendar.vue

@@ -1,5 +1,5 @@
 <script setup lang='ts'>
-import {CalendarBlurEvent} from "primevue/calendar";
+import type { CalendarBlurEvent } from 'primevue/calendar'
 
 const props = defineProps({
   context: Object,
@@ -32,7 +32,7 @@ const styleClass = computed(() => (context?.state.validationVisible && !context?
     <Calendar
       v-model="context._value"
       :input-id="props.context.id"
-      :disabled="attrs._disabled ?? false"
+      :disabled="attrs._disabled ?? !!context?.disabled"
       :readonly="attrs._readonly ?? false"
       :input-style="attrs.style"
       :input-class="styleClass"

src/formkit/PrimeCascadeSelect.vue

@@ -18,7 +18,7 @@ const styleClass = computed(() => (context?.state.validationVisible && !context?
     <CascadeSelect
       :id="context.id"
       v-model="context._value"
-      :disabled="attrs._disabled ?? false"
+      :disabled="attrs._disabled ?? !!context?.disabled"
       :readonly="attrs._readonly ?? false"
       :list-style="attrs.style"
       :class="styleClass"

src/formkit/PrimeCheckbox.vue

@@ -19,7 +19,7 @@ const styleClass = computed(() => (context?.state.validationVisible && !context?
     <Checkbox
       v-model="context._value"
       :input-id="context.id"
-      :disabled="attrs._disabled ?? false"
+      :disabled="attrs._disabled ?? !!context?.disabled"
       :readonly="attrs._readonly ?? false"
       :input-style="attrs.style"
       :input-class="styleClass"

src/formkit/PrimeChips.vue

@@ -17,7 +17,7 @@ const styleClass = computed(() => (context?.state.validationVisible && !context?
     <Chips
       v-model="context._value"
       :input-id="context.id"
-      :disabled="attrs._disabled ?? false"
+      :disabled="attrs._disabled ?? !!context?.disabled"
       :readonly="attrs._readonly ?? false"
       :input-style="attrs.style"
       :input-class="styleClass"

src/formkit/PrimeColorPicker.vue

@@ -15,7 +15,7 @@ function handleChange(e: any) {
   <div class="p-formkit">
     <ColorPicker
       v-model="context._value"
-      :disabled="attrs._disabled ?? false"
+      :disabled="attrs._disabled ?? !!context?.disabled"
       :readonly="attrs._readonly ?? false"
       :style="attrs.style"
       :panel-class="attrs.class"

src/formkit/PrimeDropdown.vue

@@ -20,7 +20,7 @@ const styleClass = computed(() => (context?.state.validationVisible && !context?
     <Dropdown
       v-model="context._value"
       :input-id="context.id"
-      :disabled="attrs._disabled ?? false"
+      :disabled="attrs._disabled ?? !!context?.disabled"
       :readonly="attrs._readonly ?? false"
       :style="attrs.style"
       :class="styleClass"

src/formkit/PrimeEditor.vue

@@ -25,7 +25,7 @@ const styleClass = computed(() => (context?.state.validationVisible && !context?
     <Editor
       :id="context.id"
       v-model="context._value"
-      :disabled="attrs._disabled ?? false"
+      :disabled="attrs._disabled ?? !!context?.disabled"
       :readonly="attrs._readonly ?? false"
       :editor-style="attrs.style"
       :class="styleClass"

src/formkit/PrimeInputMask.vue

@@ -18,7 +18,7 @@ const styleClass = computed(() => (context?.state.validationVisible && !context?
     <InputMask
       :id="context.id"
       v-model="context._value"
-      :disabled="attrs._disabled ?? false"
+      :disabled="attrs._disabled ?? !!context?.disabled"
       :readonly="attrs._readonly ?? false"
       :editor-style="attrs.style"
       :class="styleClass"

src/formkit/PrimeInputNumber.vue

@@ -21,7 +21,7 @@ const styleClass = computed(() => (context?.state.validationVisible && !context?
     <InputNumber
       v-model="context._value"
       :input-id="context.id"
-      :disabled="attrs._disabled ?? false"
+      :disabled="attrs._disabled ?? !!context?.disabled"
       :readonly="attrs._readonly ?? false"
       :input-style="attrs.style"
       :input-class="styleClass"

src/formkit/PrimeInputSwitch.vue

@@ -18,7 +18,7 @@ const styleClass = computed(() => (context?.state.validationVisible && !context?
     <InputSwitch
       v-model="context._value"
       :input-id="context.id"
-      :disabled="attrs._disabled ?? false"
+      :disabled="attrs._disabled ?? !!context?.disabled"
       :readonly="attrs._readonly ?? false"
       :input-style="attrs.style"
       :input-class="styleClass"

src/formkit/PrimeInputText.vue

@@ -42,7 +42,7 @@ const styleClass = computed(() => (context?.state.validationVisible && !context?
       <InputText
         :id="context.id"
         v-model="context._value"
-        :disabled="attrs._disabled ?? false"
+        :disabled="attrs._disabled ?? !!context?.disabled"
         :readonly="attrs._readonly ?? false"
         :style="attrs.style"
         :class="styleClass"

src/formkit/PrimeKnob.vue

@@ -23,7 +23,7 @@ const styleClass = computed(() => (context?.state.validationVisible && !context?
     <Knob
       :id="context.id"
       v-model="context._value"
-      :disabled="attrs._disabled ?? false"
+      :disabled="attrs._disabled ?? !!context?.disabled"
       :readonly="attrs._readonly ?? false"
       :style="attrs.style"
       :class="styleClass"

src/formkit/PrimeListbox.vue

@@ -18,7 +18,7 @@ const styleClass = computed(() => (context?.state.validationVisible && !context?
     <Listbox
       :id="context.id"
       v-model="context._value"
-      :disabled="attrs._disabled ?? false"
+      :disabled="attrs._disabled ?? !!context?.disabled"
       :readonly="attrs._readonly ?? false"
       :list-style="attrs.style"
       :class="styleClass"

src/formkit/PrimeMultiSelect.vue

@@ -18,7 +18,7 @@ const styleClass = computed(() => (context?.state.validationVisible && !context?
     <MultiSelect
       v-model="context._value"
       :input-id="context.id"
-      :disabled="attrs._disabled ?? false"
+      :disabled="attrs._disabled ?? !!context?.disabled"
       :readonly="attrs._readonly ?? false"
       :list-style="attrs.style"
       :class="styleClass"

src/formkit/PrimePassword.vue

@@ -22,7 +22,7 @@ const styleClass = computed(() => (context?.state.validationVisible && !context?
     <Password
       v-model="context._value"
       :input-id="context.id"
-      :disabled="attrs._disabled ?? false"
+      :disabled="attrs._disabled ?? !!context?.disabled"
       :readonly="attrs._readonly ?? false"
       :input-style="attrs.style"
       :input-class="styleClass"

src/formkit/PrimeRadioButton.vue

@@ -17,7 +17,10 @@ const styleClass = computed(() => (context?.state.validationVisible && !context?
   <div :class="attrs.options_class" class="p-formkit">
     <div v-for="option in attrs.options" :key="option.value" :class="attrs.option_class">
       <RadioButton
+        :id="context.id"
         v-model="context._value"
+        :disabled="attrs._disabled ?? !!context?.disabled"
+        :readonly="attrs._readonly ?? false"
         :name="attrs.name"
         :value="option.value"
         :input-style="attrs.style"

src/formkit/PrimeRating.vue

@@ -18,7 +18,7 @@ const styleClass = computed(() => (context?.state.validationVisible && !context?
     <Rating
       :id="context.id"
       v-model="context._value"
-      :disabled="attrs._disabled ?? false"
+      :disabled="attrs._disabled ?? !!context?.disabled"
       :readonly="attrs._readonly ?? false"
       :style="attrs.style"
       :class="styleClass"

src/formkit/PrimeSelectButton.vue

@@ -18,7 +18,7 @@ const styleClass = computed(() => (context?.state.validationVisible && !context?
     <SelectButton
       :id="context.id"
       v-model="context._value"
-      :disabled="attrs._disabled ?? false"
+      :disabled="attrs._disabled ?? !!context?.disabled"
       :readonly="attrs._readonly ?? false"
       :style="attrs.style"
       :class="styleClass"

src/formkit/PrimeSlider.vue

@@ -18,7 +18,7 @@ const styleClass = computed(() => (context?.state.validationVisible && !context?
     <Slider
       :id="context.id"
       v-model="context._value"
-      :disabled="attrs._disabled ?? false"
+      :disabled="attrs._disabled ?? !!context?.disabled"
       :readonly="attrs._readonly ?? false"
       :style="attrs.style"
       :class="styleClass"

src/formkit/PrimeTextarea.vue

@@ -21,7 +21,7 @@ const styleClass = computed(() => (context?.state.validationVisible && !context?
     <Textarea
       :id="context.id"
       v-model="context._value"
-      :disabled="attrs._disabled ?? false"
+      :disabled="attrs._disabled ?? !!context?.disabled"
       :readonly="attrs._readonly ?? false"
       :style="attrs.style"
       :class="styleClass"

src/formkit/PrimeToggleButton.vue

@@ -17,7 +17,7 @@ const styleClass = computed(() => (context?.state.validationVisible && !context?
     <ToggleButton
       v-model="context._value"
       :input-id="context.id"
-      :disabled="attrs._disabled ?? false"
+      :disabled="attrs._disabled ?? !!context?.disabled"
       :readonly="attrs._readonly ?? false"
       :input-style="attrs.style"
       :input-class="styleClass"

src/formkit/PrimeTreeSelect.vue

@@ -18,7 +18,7 @@ const styleClass = computed(() => (context?.state.validationVisible && !context?
     <TreeSelect
       v-model="context._value"
       :input-id="context.id"
-      :disabled="attrs._disabled ?? false"
+      :disabled="attrs._disabled ?? !!context?.disabled"
       :readonly="attrs._readonly ?? false"
       :input-style="attrs.style"
       :input-class="styleClass"

src/formkit/PrimeTriStateCheckbox.vue

@@ -19,7 +19,7 @@ const styleClass = computed(() => (context?.state.validationVisible && !context?
     <TriStateCheckbox
       v-model="context._value"
       :input-id="context.id"
-      :disabled="attrs._disabled ?? false"
+      :disabled="attrs._disabled ?? !!context?.disabled"
       :readonly="attrs._readonly ?? false"
       :input-style="attrs.style"
       :input-class="styleClass"

src/pages/index.vue

@@ -73,10 +73,6 @@ const schema = reactive(
 )
 
 const data = ref({ email: 'tom@sfxcode.com' })
-
-async function submitHandler() {
-  await new Promise(resolve => setTimeout(resolve, 1000))
-}
 </script>
 
 <template>