last examples before release

README.md

@@ -22,11 +22,13 @@ Om-Bootstrap's [documentation site](http://om-bootstrap.herokuapp.com/) has usag
 * Well (random.cljs)
 * PageHeader (random.cljs)
 * Grid, Row, Col (grid.cljs)
-* ToolTip (random.cljs, except for examples)
-* Alert (random.cljs, except for examples)
+* Glyphicon (random.cljs)
+* ToolTip (random.cljs)
+* Alert (random.cljs)
 * Nav, NavItem (nav.cljs)
 * Popover (random.cljs)
 * Badge (random.cljs)
+* Table (table.cljs)
 
 ## Mixins
 

dev/snippets/alert/basic.cljs

@@ -4,4 +4,4 @@
 
 (r/alert {:bs-style "warning"}
          (d/strong "Holy guacamole!")
-         "Best check yo self, you're not looking too good.")
+         " Best check yo self, you're not looking too good.")

dev/snippets/button/loading.cljs

@@ -25,4 +25,4 @@
                  "Loading..."
                  "Loading state")))))
 
-(d/div (->loading-button {}))
+(->loading-button {})

dev/snippets/glyphicon.cljs

@@ -0,0 +1,21 @@
+#_
+(:require [om-bootstrap.button :as b]
+          [om-bootstrap.random :as r])
+
+(d/div
+ (b/toolbar
+  {}
+  (b/button-group
+   {}
+   (b/button {} (r/glyphicon {:glyph "align-left"}))
+   (b/button {} (r/glyphicon {:glyph "align-center"}))
+   (b/button {} (r/glyphicon {:glyph "align-right"}))
+   (b/button {} (r/glyphicon {:glyph "align-justify"}))))
+ (b/toolbar
+  {}
+  (b/button-group
+   {}
+   (b/button {:bs-size "large"} (r/glyphicon {:glyph "star"}) " Star")
+   (b/button {} (r/glyphicon {:glyph "star"}) " Star")
+   (b/button {:bs-size "small"} (r/glyphicon {:glyph "star"}) " Star")
+   (b/button {:bs-size "xsmall"} (r/glyphicon {:glyph "star"}) " Star"))))

dev/snippets/input/addons.cljs

@@ -0,0 +1,8 @@
+#_
+(:require [om-bootstrap.input :as i]
+          [om-tools.dom :as d :include-macros true])
+
+(d/form
+ (i/input {:type "text" :addon-before "@"})
+ (i/input {:type "text" :addon-after ".00"})
+ (i/input {:type "text" :addon-before "$" :addon-after ".00"}))

dev/snippets/input/feedback.cljs

@@ -0,0 +1,8 @@
+#_
+(:require [om-bootstrap.input :as i]
+          [om-tools.dom :as d :include-macros true])
+
+(d/form
+ (i/input {:type "text" :bs-style "success" :label "Success" :feedback? true})
+ (i/input {:type "text" :bs-style "warning" :label "Warning" :feedback? true})
+ (i/input {:type "text" :bs-style "error" :label "Error" :feedback? true}))

dev/snippets/input/horizontal.cljs

@@ -0,0 +1,15 @@
+#_
+(:require [om-bootstrap.input :as i]
+          [om-tools.dom :as d :include-macros true])
+
+(d/form {:class "form-horizontal"}
+        (i/input {:type "text" :label "Text"
+                  :label-classname "col-xs-2"
+                  :wrapper-classname "col-xs-10"})
+        (i/input {:type "textarea" :label "Text Area"
+                  :label-classname "col-xs-2"
+                  :wrapper-classname "col-xs-10"})
+        (i/input {:type "checkbox" :label "Checkbox"
+                  :label-classname "col-xs-2"
+                  :wrapper-classname "col-xs-offset-2 col-xs-10"
+                  :help "Offset is applied to the wrapper."}))

dev/snippets/input/types.cljs

@@ -0,0 +1,23 @@
+#_
+(:require [om-bootstrap.input :as i]
+          [om-tools.dom :as d :include-macros true])
+
+(d/form
+ (i/input {:type "text" :default-value "text"})
+ (i/input {:type "password" :default-value "secret"})
+ (i/input {:type "checkbox"
+           :label "checkbox"
+           ;; These attributes pass through to the internal input
+           ;; component. :read-only is allowed instead of :readOnly
+           ;; because om-tools camelcases dashed attributes.
+           :checked true
+           :read-only true})
+ (i/input {:type "radio" :label "radio" :checked true :read-only true})
+ (i/input {:type "select" :default-value "select"}
+          (d/option {:value "select"} "select")
+          (d/option {:value "other"} "..."))
+ (i/input {:type "select" :multiple true}
+          (d/option {:value "select"} "select")
+          (d/option {:value "other"} "..."))
+ (i/input {:type "textarea" :default-value "textarea"})
+ (i/input {:type "static"} "static"))

dev/snippets/input/validation.cljs

@@ -0,0 +1,36 @@
+#_
+(:require [om-bootstrap.input :as i]
+          [om-tools.core :refer-macros [defcomponentk]])
+
+(defn validation-state
+  "Returns a Bootstrap :bs-style string based on the supplied string
+  length."
+  [s]
+  (let [l (count s)]
+    (cond (> l 10) "success"
+          (> l 5) "warning"
+          (pos? l) "error"
+          :else nil)))
+
+(defn handle-change
+  "Grab the input element via the `input` reference."
+  [owner state]
+  (let [node (om/get-node owner "input")]
+    (swap! state assoc :text (.-value node))))
+
+(defcomponentk example-input [owner state]
+  (init-state [_] {:text ""})
+  (render [_]
+          (i/input
+           {:feedback? true
+            :type "text"
+            :label "Working example with validation"
+            :placeholder "Enter text"
+            :help "Validates based on string length."
+            :group-classname "group-class"
+            :wrapper-classname "wrapper-class"
+            :label-classname "label-class"
+            :bs-style (validation-state (:text @state))
+            :on-change #(handle-change owner state)})))
+
+(->example-input {})

dev/snippets/input/wrapper.cljs

@@ -0,0 +1,11 @@
+#_
+(:require [om-bootstrap.grid :as g]
+          [om-bootstrap.input :as i])
+
+(i/input {:label "Input wrapper"
+          :help "Use this when you need something other than the
+          available input types."}
+         (g/row
+          {}
+          (g/col {:xs 6} (i/input {:type "text" :class "form-control"}))
+          (g/col {:xs 6} (i/input {:type "text" :class "form-control"}))))

dev/snippets/table/basic.cljs

@@ -0,0 +1,26 @@
+#_
+(:require [om-bootstrap.table :refer [table]]
+          [om-tools.dom :as d :include-macros true])
+
+(table {:striped? true :bordered? true :condensed? true :hover? true}
+       (d/thead
+        (d/tr
+         (d/th "#")
+         (d/th "First Name")
+         (d/th "Last Name")
+         (d/th "Username")))
+       (d/tbody
+        (d/tr
+         (d/td "1")
+         (d/td "Mark")
+         (d/td "Otto")
+         (d/td "@mdo"))
+        (d/tr
+         (d/td "2")
+         (d/td "Jacob")
+         (d/td "Thornton")
+         (d/td "@fat"))
+        (d/tr
+         (d/td "3")
+         (d/td {:col-span 2} "Larry the Bird")
+         (d/td "@twitter"))))

dev/snippets/table/responsive.cljs

@@ -0,0 +1,14 @@
+#_
+(:require [om-bootstrap.table :refer [table]]
+          [om-tools.dom :as d :include-macros true])
+
+(table {:responsive? true}
+       (d/thead
+        (d/tr
+         (d/th "#")
+         (repeat 6 (d/th "Table heading")))
+        (d/tbody
+         (for [i (range 3)]
+           (d/tr
+            (d/td (str (inc i)))
+            (repeat 6 (d/td "Table cell")))))))

dev/snippets/tooltip/basic.cljs

@@ -7,4 +7,4 @@
                    :position-left 150
                    :position-top 50}
                   (d/strong "Holy guacamole!")
-                  "Check this info."))
+                  " Check this info."))