More 1.0 refactoring

Author: inxilpro

README.md

@@ -1,24 +1,24 @@
 
-<div class="mb-6 text-right">
-	<a href="https://circleci.com/gh/glhd/aire" target="_blank" class="no-underline">
+<div class="mb-6 float-right inline-flex">
+	<a href="https://circleci.com/gh/glhd/aire" target="_blank" class="mx-1">
 		<img 
 			src="https://circleci.com/gh/glhd/aire.svg?style=svg" 
 			alt="Build Status" 
 		/>
 	</a>
-	<a href="https://coveralls.io/github/glhd/aire?branch=master" target="_blank" class="no-underline">
+	<a href="https://coveralls.io/github/glhd/aire?branch=master" target="_blank" class="mx-1">
 		<img 
 			src="https://coveralls.io/repos/github/glhd/aire/badge.svg?branch=master" 
 			alt="Coverage Status" 
 		/>
 	</a>
-	<a href="https://packagist.org/packages/glhd/aire" target="_blank" class="no-underline">
+	<a href="https://packagist.org/packages/glhd/aire" target="_blank" class="mx-1">
         <img 
             src="https://poser.pugx.org/glhd/aire/v/stable" 
             alt="Latest Stable Release" 
         />
 	</a>
-	<a href="./LICENSE" target="_blank" class="no-underline">
+	<a href="./LICENSE" target="_blank" class="mx-1">
         <img 
             src="https://poser.pugx.org/glhd/aire/license" 
             alt="MIT Licensed" 
@@ -162,75 +162,20 @@ an error at the top of the page if validation failed.
 
 ## Client-Side Validation
 
-Javascript validation in Aire is currently **work in progress**. Eventually, Aire will
-support automatic client-side validation (just call `rules()` on a field). This will let
-you set the rules on a field-by-field basis, or for the whole form, and will let you
-pass in a `FormRequest` object to automatically inject rules. 
-
-## Misc. Notes
-
-These notes are here mostly to inform development.
-
-### Considerations/Inspiration
-
-  - Form controls should take sizing config
-  - 'Read-only plain text' http://getbootstrap.com/docs/4.1/components/forms/#readonly-plain-text
-  - 'Form groups' - Label/input/help text/validation text (config how many errors show)
-  - Multi-column forms (Name: {first} {last})
-  - Configurable support for custom checkboxes and radios?
-  - Custom select support?
-  - File inputs?
-  - Should client-side validation be included?
-  - https://github.com/netojose/laravel-bootstrap-4-forms
-  - https://tailwindcss.com/docs/examples/forms/
-  - https://github.com/glhd/forms
-  - https://github.com/glhd/bootforms
-  - Append/Prepend (input groups)
-
-### Components
-
-  - Button
-  - Checkbox
-  - Date
-  - DateTimeLocal
-  - Email
-  - File
-  - FormControl
-  - FormOpen
-  - FormClose
-  - Hidden
-  - Input
-  - Label
-  - Password
-  - RadioButton
-  - Select
-  - Text
-  - TextArea
-  
-### Input Types
-
-  - button
-  - checkbox
-  - color
-  - date
-  - datetime
-  - datetime-local
-  - email
-  - file
-  - hidden
-  - image
-  - month
-  - number
-  - password
-  - radio
-  - range
-  - reset
-  - search
-  - submit
-  - tel
-  - text
-  - time
-  - url
-  - wee 
+Javascript validation in Aire is in its early stages. Browser testing is limited, and the
+Javascript code hasn't had an performance optimizations applied. That said, Aire
+supports automatic client-side validation—simply pass an array of rules or a `FormRequest`
+object and Aire will automatically apply most rules on the client side (thanks
+to [validatorjs](https://github.com/skaterdav85/validatorjs)!). 
+
+## Under Consideration / Feature Ideas
 
+There are a few things that are still either in-the-works or being considered for a 
+later release. These include:
 
+  - Sizing option for form controls
+  - [Read-only plain text](http://getbootstrap.com/docs/4.1/components/forms/#readonly-plain-text) 
+  - Cross-browser support for custom checkboxes and radio buttons via a config option
+  - Support for Choices.js or similar `<select>` UI libraries
+  - Better handling of file inputs
+  - Better support for [prepending or appending content to inputs](https://getbootstrap.com/docs/4.0/components/input-group/#basic-example)

config/aire.php

@@ -94,7 +94,7 @@
 		'checkbox_group_label_wrapper' => 'flex-1 ml-2',
 		'radio_group_label' => 'flex items-baseline mb-2 ml-2 border-transparent border-l',
 		'radio_group_label_wrapper' => 'flex-1 ml-2',
-		'summary' => 'border border-red bg-red-100 text-red font-bold rounded p-4 my-4',
+		'summary' => 'border border-red-500 bg-red-100 text-red-500 font-bold rounded p-4 my-4',
 		'button' => 'inline-block font-normal text-center whitespace-no-wrap align-middle select-none border
 			rounded font-normal leading-normal text-white bg-blue-600 border-blue-700 hover:bg-blue-700
 			hover:border-blue-900 p-2 px-4',

docs/aire.css

@@ -631,8 +631,17 @@ p {
   line-height: 1.5;
 }
 
+a {
+  color: #f4645f;
+  text-decoration: none;
+}
+
+a:hover, a:active {
+  text-decoration: underline;
+}
+
 :not(pre) > code {
-  background-color: #e2e8f0;
+  background-color: #edf2f7;
   color: #f4645f;
   display: inline-block;
   padding-left: 0.25rem;
@@ -648,22 +657,14 @@ p {
 
 pre {
   background-color: #f7fafc;
-  box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06);
-  border-radius: 0.125rem;
-  padding: 0.5rem;
+  border-width: 1px;
+  border-color: #cbd5e0;
+  border-radius: 0.25rem;
+  padding: 1.5rem;
   margin-top: 2rem;
   margin-bottom: 2rem;
 }
 
-ul, ol {
-  margin-bottom: 1.5rem;
-  font-size: 1rem;
-}
-
-li {
-  margin-bottom: 0.5rem;
-}
-
 .container{
   width: 100%;
 }