feature(validation): use PrimeVue invalid property for validation

fixes #51

Author: sfxcode

src/components/PrimeAutoComplete.vue

@@ -21,7 +21,7 @@ const props = defineProps({
   },
 })
 
-const { styleClass, handleInput, handleBlur } = useFormKitInput(props.context)
+const { isInvalid, handleInput, handleBlur } = useFormKitInput(props.context)
 
 const suggestions = ref([])
 
@@ -37,7 +37,8 @@ function search(event: AutoCompleteCompleteEvent) {
       v-model="context._value"
       v-bind="context?.attrs"
       :disabled="!!context?.disabled"
-      :class="styleClass"
+      :class="context?.attrs?.class"
+      :invalid="isInvalid"
       :tabindex="context?.attrs.tabindex"
       :aria-label="context?.attrs.ariaLabel"
       :aria-labelledby="context?.attrs.ariaLabelledby"

src/components/PrimeCascadeSelect.vue

@@ -25,7 +25,7 @@ const props = defineProps({
   },
 })
 
-const { styleClass, handleInput, handleBlur } = useFormKitInput(props.context)
+const { isInvalid, handleInput, handleBlur } = useFormKitInput(props.context)
 </script>
 
 <template>
@@ -36,7 +36,8 @@ const { styleClass, handleInput, handleBlur } = useFormKitInput(props.context)
       v-bind="context?.attrs"
       :disabled="!!context?.disabled"
       :readonly="context?.attrs.readonly ?? false"
-      :class="styleClass"
+      :class="context?.attrs?.class"
+      :invalid="isInvalid"
       :tabindex="context?.attrs.tabindex"
       :aria-label="context?.attrs.ariaLabel"
       :aria-labelledby="context?.attrs.ariaLabelledby"

src/components/PrimeCheckbox.vue

@@ -25,7 +25,7 @@ const props = defineProps({
 
 const { hasPrefix, hasSuffix, generateId } = useFormKitSection(props.context)
 
-const { styleClass, handleInput, handleBlur } = useFormKitInput(props.context)
+const { isInvalid, handleInput, handleBlur } = useFormKitInput(props.context)
 
 const generatedId = generateId()
 </script>
@@ -42,7 +42,8 @@ const generatedId = generateId()
       :disabled="!!context?.disabled"
       :readonly="context?.attrs.readonly ?? false"
       :input-style="context?.attrs.style"
-      :input-class="styleClass"
+      :input-class="context?.attrs?.class"
+      :invalid="isInvalid"
       :tabindex="context?.attrs.tabindex"
       :aria-label="context?.attrs.ariaLabel"
       :aria-labelledby="context?.attrs.ariaLabelledby"

src/components/PrimeDatePicker.vue

@@ -59,7 +59,7 @@ const props = defineProps({
   },
 })
 
-const { styleClass, handleInput, handleSelect } = useFormKitInput(props.context)
+const { isInvalid, handleInput, handleSelect } = useFormKitInput(props.context)
 
 function handleBlur(e: DatePickerBlurEvent) {
   props.context?.handlers.blur(e.originalEvent)
@@ -79,7 +79,8 @@ function handleClearClick() {
       :disabled="!!context?.disabled"
       :readonly="context?.attrs.readonly ?? false"
       :input-style="context?.attrs.style"
-      :input-class="styleClass"
+      :input-class="context?.attrs?.class"
+      :invalid="isInvalid"
       :tabindex="context?.attrs.tabindex"
       :aria-label="context?.attrs.ariaLabel"
       :aria-labelledby="context?.attrs.ariaLabelledby"

src/components/PrimeEditor.vue

@@ -22,7 +22,7 @@ const props = defineProps({
   },
 })
 
-const { styleClass, handleInput } = useFormKitInput(props.context)
+const { isInvalid, handleInput } = useFormKitInput(props.context)
 
 function handleSelection(e: EditorSelectionChangeEvent) {
   if (e.range === null)
@@ -39,7 +39,8 @@ function handleSelection(e: EditorSelectionChangeEvent) {
       :disabled="!!context?.disabled"
       :readonly="context?.attrs.readonly ?? false"
       :editor-style="context?.attrs.style"
-      :class="styleClass"
+      :class="context?.attrs?.class"
+      :invalid="isInvalid"
       :tabindex="context?.attrs.tabindex"
       :aria-label="context?.attrs.ariaLabel"
       :aria-labelledby="context?.attrs.ariaLabelledby"

src/components/PrimeInputMask.vue

@@ -26,7 +26,7 @@ const props = defineProps({
   },
 })
 
-const { styleClass, handleInput, handleBlur } = useFormKitInput(props.context)
+const { isInvalid, handleInput, handleBlur } = useFormKitInput(props.context)
 const { hasPrefixIcon, hasSuffixIcon } = useFormKitSection(props.context)
 </script>
 
@@ -40,7 +40,8 @@ const { hasPrefixIcon, hasSuffixIcon } = useFormKitSection(props.context)
         v-bind="context?.attrs"
         :disabled="!!context?.disabled"
         :readonly="context?.attrs.readonly ?? false"
-        :class="styleClass"
+        :class="context?.attrs?.class"
+        :invalid="isInvalid"
         :tabindex="context?.attrs.tabindex"
         :aria-label="context?.attrs.ariaLabel"
         :aria-labelledby="context?.attrs.ariaLabelledby"
@@ -49,7 +50,6 @@ const { hasPrefixIcon, hasSuffixIcon } = useFormKitSection(props.context)
         :auto-clear="context.autoClear ?? true"
         :unmask="context.unmask ?? false"
         :pt="context.pt"
-        :invalid="context.invalid"
         :variant="context.variant"
         :pt-options="context.ptOptions"
         :unstyled="context.unstyled ?? false"

src/components/PrimeInputNumber.vue

@@ -33,7 +33,7 @@ const props = defineProps({
   },
 })
 
-const { styleClass, handleInput } = useFormKitInput(props.context)
+const { isInvalid, handleInput } = useFormKitInput(props.context)
 
 function handleBlur(e: InputNumberBlurEvent) {
   props.context?.handlers.blur(e.originalEvent)
@@ -49,7 +49,8 @@ function handleBlur(e: InputNumberBlurEvent) {
       :disabled="!!context?.disabled"
       :readonly="context?.attrs.readonly ?? false"
       :input-style="context?.attrs.style"
-      :input-class="styleClass"
+      :input-class="context?.attrs?.class"
+      :invalid="isInvalid"
       :tabindex="context?.attrs.tabindex"
       :aria-label="context?.attrs.ariaLabel"
       :aria-labelledby="context?.attrs.ariaLabelledby"

src/components/PrimeInputOtp.vue

@@ -23,7 +23,7 @@ const props = defineProps({
   },
 })
 
-const { styleClass, handleBlur, handleInput } = useFormKitInput(props.context)
+const { isInvalid, handleBlur, handleInput } = useFormKitInput(props.context)
 </script>
 
 <template>
@@ -35,7 +35,8 @@ const { styleClass, handleBlur, handleInput } = useFormKitInput(props.context)
       :disabled="!!context?.disabled"
       :readonly="context?.attrs.readonly ?? false"
       :style="context?.attrs.style"
-      :class="styleClass"
+      :class="context?.attrs?.class"
+      :invalid="isInvalid"
       :tabindex="context?.attrs.tabindex"
       :aria-label="context?.attrs.ariaLabel"
       :aria-labelledby="context?.attrs.ariaLabelledby"

src/components/PrimeInputText.vue

@@ -21,7 +21,7 @@ const props = defineProps({
   },
 })
 
-const { styleClass, handleInput, handleBlur } = useFormKitInput(props.context)
+const { isInvalid, handleInput, handleBlur } = useFormKitInput(props.context)
 const { hasPrefixIcon, hasSuffixIcon } = useFormKitSection(props.context)
 </script>
 
@@ -36,7 +36,8 @@ const { hasPrefixIcon, hasSuffixIcon } = useFormKitSection(props.context)
         :disabled="!!context?.disabled"
         :readonly="context?.attrs.readonly ?? false"
         :style="context?.attrs.style"
-        :class="styleClass"
+        :class="context?.attrs?.class"
+        :invalid="isInvalid"
         :tabindex="context?.attrs.tabindex"
         :aria-label="context?.attrs.ariaLabel"
         :aria-labelledby="context?.attrs.ariaLabelledby"

src/components/PrimeKnob.vue

@@ -29,7 +29,7 @@ const props = defineProps({
   },
 })
 
-const { styleClass } = useFormKitInput(props.context)
+const { isInvalid } = useFormKitInput(props.context)
 
 function handleInput(e: any) {
   props.context?.node.input(e)
@@ -50,7 +50,8 @@ function updateValue(n: number) {
       :disabled="!!context?.disabled"
       :readonly="context?.attrs.readonly ?? false"
       :style="context?.attrs.style"
-      :class="styleClass"
+      :class="context?.attrs?.class"
+      :invalid="isInvalid"
       :tabindex="context?.attrs.tabindex"
       :aria-label="context?.attrs.ariaLabel"
       :aria-labelledby="context?.attrs.ariaLabelledby"