Merge pull request #19 from daleal/master

Release 0.3.1

package.json

@@ -1,6 +1,6 @@
 {
   "name": "loveform",
-  "version": "0.3.0",
+  "version": "0.3.1",
   "description": "The Vue form assembly tool that won't break your heart 💔",
   "homepage": "https://loveform.daleal.dev",
   "repository": "https://github.com/daleal/loveform",

src/components/LCheckbox/LCheckbox.tsx

@@ -29,8 +29,9 @@ export const LCheckbox = defineComponent({
       <>
         <input
           value={content.value}
-          onInput={onInput}
+          class="l-checkbox"
           type="checkbox"
+          onInput={onInput}
           { ...attrs }
         />
       </>

src/components/LCheckboxGroup/LCheckboxGroup.tsx

@@ -18,10 +18,11 @@ export const LCheckboxGroup = defineComponent({
 
     useRender(() => (
       <>
-        <>
-          { slots.default?.() }
-        </>
-        { validation.renderError.value && <p>{ validation.error.value }</p> }
+        { slots.default?.() }
+        {
+          validation.renderError.value
+          && <p class="l-checkbox-group__error">{ validation.error.value }</p>
+        }
       </>
     ));
 

src/components/LForm/LForm.tsx

@@ -33,6 +33,7 @@ export const LForm = defineComponent({
 
     useRender(() => (
       <form
+        class="l-form"
         onSubmit={onSubmit}
         { ...attrs }
       >

src/components/LInput/LInput.tsx

@@ -30,12 +30,16 @@ export const LInput = defineComponent({
       <>
         <input
           value={content.value}
+          class="l-input"
+          type="text"
           onInput={onInput}
           onBlur={validation.startValidating}
-          type="text"
           { ...attrs }
         />
-        { validation.renderError.value && <p>{ validation.error.value }</p> }
+        {
+          validation.renderError.value
+          && <p class="l-input__error">{ validation.error.value }</p>
+        }
       </>
     ));
 

src/components/LTextarea/LTextarea.tsx

@@ -30,11 +30,15 @@ export const LTextarea = defineComponent({
       <>
         <textarea
           value={content.value}
+          class="l-textarea"
           onInput={onInput}
           onBlur={validation.startValidating}
           { ...attrs }
         />
-        { validation.renderError.value && <p>{ validation.error.value }</p> }
+        {
+          validation.renderError.value
+          && <p class="l-textarea__error">{ validation.error.value }</p>
+        }
       </>
     ));