documents and provides example for forms

example/example.css

@@ -1,3 +1,27 @@
+/* --------------------------------------
+*    Styles soley for the purpose of this example
+*  -------------------------------------- */
+
+body {
+    font-family: sans-serif "Helvetica";
+}
+
+.example {
+    border: 1px solid gray;
+    padding: 10px;
+    margin-bottom: 10px;
+}
+
+.example h2 {
+    margin-top: 5px;
+    font-family: "Courier New", Courier, monospace;
+}
+
+label {
+    display: block;
+    margin-top: 5px;
+}
+
 /* --------------------------------------
 *    Autocomplete Field Styles
 *  -------------------------------------- */
@@ -32,6 +56,20 @@
     color: white;
 }
 
+/* --------------------------------------
+*    Forms Styles
+*  -------------------------------------- */
+
+p.field-errors {
+  margin: 0;
+  padding: 0;
+  color: #E03725;
+}
+
+.field-error {
+  border: 1px solid #E03725;
+}
+
 /* --------------------------------------
 *    Modal Styles
 *  -------------------------------------- */
@@ -99,4 +137,4 @@
     max-height: 85%;
     overflow-y: auto;
     padding: 1em;
-}
+}

example/project.clj

@@ -3,7 +3,7 @@
   :license {:name "Eclipse Public License"
             :url "http://www.eclipse.org/legal/epl-v10.html"}
 
-  :dependencies [[com.8thlight/filament "1.1.3"]
+  :dependencies [[com.8thlight/filament "1.1.4"]
                  [com.8thlight/hiccup "1.1.1"]
                  [org.clojure/clojure "1.5.1"]]
 

example/src/cljs/example/autocomplete_demo.cljs

@@ -13,9 +13,12 @@
              "indigo"
              "violet"])
 
-(def dom [:form {:action "/fooey" :autocomplete "off"}
+(def dom [:div.example
+          [:h2 "com.eighthlight.filament.autocomplete-field"]
+          [:p "The field below will auto complete the colors of the rainbow (red, orange, yellow, green, blue, indigo, violet)."]
+          [:form {:action "/fooey" :autocomplete "off"}
           [:label {:for "autocomplete-field"} "Autocomplete:"]
-          [:input#autocomplete-field {:type "text"}]])
+          [:input#autocomplete-field {:type "text"}]]])
 
 (defn autocomplete-on-select [[name value]]
   (dom/set-value! (dom/by-id "autocomplete-field") value))

example/src/cljs/example/forms_demo.cljs

@@ -0,0 +1,44 @@
+(ns example.forms-demo
+  (:require-macros [hiccup.core :as h])
+  (:require [clojure.string :as string]
+            [com.eighthlight.filament.forms :as forms]
+            [com.eighthlight.filament.util :as util]
+            [domina :as dom]
+            [hiccup.core]))
+
+(def dom [:div.example
+          [:h2 "com.eighthlight.filament.forms"]
+          [:p "Click on the buttons below to see how their corresponding functions behave on the following form."]
+          [:button#form-data "Demonstrate form-date"]
+          [:button#show-errors "Demonstrate display-errors"]
+          [:button#clear-errors "Demonstrate teardown-errors"]
+          [:form#forms-demo-form {:action "/fooey" :autocomplete "off"}
+           [:div
+            [:label {:for "field1"} "Field 1:"]
+            [:input#field1 {:name "field1" :type "text" :value "1"}]]
+           [:div
+            [:label {:for "field2"} "Field 2:"]
+            [:select#field2 {:name "field2"}
+             [:option "Yes"]
+             [:option "No"]
+             [:option "Maybe"]]]
+           [:div
+            [:label {:for "field3"} "Field 3:"]
+            [:textarea#field3 {:name "field3"} "Some content"]]]])
+
+(defn show-form-data []
+  (js/alert (pr-str (forms/form-data (dom/by-id "forms-demo-form")))))
+
+(def model-with-errors {:errors {:field1 ["has one error"]
+                                 :field2 ["first error" "second error"]
+                                 :field3 ["last error"]}})
+(defn display-errors []
+  (forms/display-errors model-with-errors))
+
+(defn demo-forms []
+  (dom/append! (.-body js/document) (h/html dom))
+  (util/override-click! (dom/by-id "form-data") show-form-data)
+  (util/override-click! (dom/by-id "show-errors") display-errors)
+  (util/override-click! (dom/by-id "clear-errors") forms/teardown-errors)
+  )
+

example/src/cljs/example/main.cljs

@@ -1,7 +1,9 @@
 (ns example.main
   (:require [example.autocomplete-demo :refer [demo-autocomplete]]
+            [example.forms-demo :refer [demo-forms]]
             [example.modal-demo :refer [demo-modal]]))
 
 (defn ^:export init []
   (demo-autocomplete)
+  (demo-forms)
   (demo-modal))

example/src/cljs/example/modal_demo.cljs

@@ -5,6 +5,11 @@
             [domina :as dom]
             [hiccup.core]))
 
+(def dom [:div.example
+          [:h2 "com.eighthlight.filament.modal"]
+          [:p "Clicking on the button will open a modal.  Try it!"]
+          [:button {:id "click-me"} "Click me!"]])
+
 (def modal (modal/create-modal "modal"))
 
 (defn show-modal []
@@ -15,5 +20,5 @@
   (util/override-click! (dom/by-id "click-me") show-modal))
 
 (defn demo-modal []
-  (dom/append! (.-body js/document) (h/html [:p [:button {:id "click-me"} "Click me!"]]))
+  (dom/append! (.-body js/document) (h/html dom))
   (arm-button))

project.clj

@@ -1,4 +1,4 @@
-(defproject com.8thlight/filament "1.1.3"
+(defproject com.8thlight/filament "1.1.4"
   :description "Rich client utilities"
   :url "http://github.com/8thlight/filament"
   :license {:name "Eclipse Public License"