form has added support for textfield and chooser

checkbox almost there

src/cljc/ui/docs/form.cljc

@@ -28,6 +28,7 @@
  {:on-valid (fn [data _] #?(:cljs (js/alert (pr-str data))))}
  [{:type ::element/numberfield
  :name :number1
+ :label "Number (1)"
  :help "My help text"
  :text [:span {:style {:font-weight "bold"}} "My info text"]
  :wiring [:tr :$key
@@ -40,8 +41,20 @@
  :spec ::number1-valid}
  {:type element/numberfield
  :name :number2
+ :label "Number (2)"
  :spec ::number2-valid
- :error-element :dispatch}])
+ :error-element :dispatch}
+ {:type ::element/textfield
+ :name :text1
+ :label "Text"}
+ {:type ::element/chooser
+ :name :chooser1
+ :label "Chooser"
+ :items [{:id 1 :value "Test 1"}
+ {:id 2 :value "Test 2"}]}
+ {:type ::element/checkbox
+ :name :checkbox1
+ :label "Checkbox"}])
 
 (defn- notification-args [model]
  {:model model

src/cljc/ui/docs/inputs.cljc

@@ -150,14 +150,14 @@
  toggle-email #(re-frame/dispatch [::toggle-email])]
  [layout/horizontally
  [layout/vertically
- [element/checkbox {:checked  bacon
+ [element/checkbox {:model bacon
  :on-change toggle-bacon} "Bacon"]
- [element/checkbox {:checked  cheese
+ [element/checkbox {:model cheese
  :on-change toggle-cheese} "Cheese"]
- [element/checkbox {:checked  ketchup
+ [element/checkbox {:model ketchup
  :on-change toggle-ketchup} "Ketchup"]]
  [layout/vertically
- [element/toggle {:checked  email
+ [element/toggle {:model email
  :on-change toggle-email} "Eat here?"]]]))
 
 (defn smart-case-includes? [s substr]
@@ -175,9 +175,9 @@
  sep-filtered-items @(re-frame/subscribe [::sep-filtered-items])]
  [layout/horizontally
  [layout/vertically
- [element/checkbox {:checked  multiple
+ [element/checkbox {:model multiple
  :on-change #(re-frame/dispatch [::toggle-multiple])} "Multiple"]
- [element/checkbox {:checked  disabled
+ [element/checkbox {:model disabled
  :on-change #(re-frame/dispatch [::toggle-disabled])} "Disabled"]
  [element/chooser {:style {:width "420px"}
  :label "Name a Character from Game of Thrones"
@@ -200,4 +200,3 @@
  "
  [check-toggle]
  [completion]])
-

src/cljc/ui/element/checkbox/spec.cljc

@@ -1,26 +1,33 @@
 (ns ui.element.checkbox.spec
  (:require [clojure.spec.alpha :as spec]
- [clojure.test.check.generators :as gen]))
+ [clojure.test.check.generators :as gen]
+ [ui.specs :as common]))
 
-(spec/def ::maybe-fn
- (spec/with-gen fn?
- (gen/return (constantly nil))))
-
-(spec/def ::id (spec/or :numeric int? :textual (spec/and string? not-empty)))
-(spec/def ::checked? boolean?)
 (spec/def ::label string?)
-(spec/def ::value string?)
+(spec/def ::model
+ (spec/nonconforming
+ (spec/or :deref (spec/and ::common/ratom #(let [v (deref %)]
+ (#{:checked :indeterminate :not-checked} v)))
+ :boolean boolean?
+ :nil nil?
+ :keywords #{:checked :indeterminate :not-checked})))
 
-(spec/def ::on-change ::maybe-fn)
+(spec/def ::on-change ::common/maybe-fn)
 
-(spec/def ::checkbox-params
+(spec/def ::params
  (spec/keys
- :opt-un [::id ::checked? ::value ::on-change]))
+ :opt-un [::common/id
+ ::on-change]))
+
+(spec/def ::--params
+ (spec/merge
+ ::params
+ (spec/keys :opt-un [::model])))
 
-(spec/def ::checkbox-args
- (spec/cat :params ::checkbox-params :label ::label))
+(spec/def ::args
+ (spec/or :arg2 (spec/cat :params ::--params :label ::label)
+ :arg1 (spec/cat :params ::--params)))
 
 (spec/fdef checkbox
- :args ::checkbox-args
+ :args ::args
  :ret vector?)
-

src/cljc/ui/element/checkbox/views.cljc

@@ -1,27 +1,45 @@
 (ns ui.element.checkbox.views
- (:require [ui.util :as util]
+ (:require [#?(:clj clojure.core :cljs reagent.core) :refer [atom]]
+ [ui.util :as util]
  [ui.element.checkbox.spec :as spec]))
 
-(defn checkbox
- [& args]
- (let [{:keys [params label]
- :or {label ""}} (util/conform! ::spec/checkbox-args args)
- {:keys [checked on-click id]
- :or {id (util/gen-id)}} params]
- [:label {:for id
- :class (->> (util/names->str [(case checked
- (true :checked) :Checked
- :indeterminate :Indeterminate
- :Not-Checked)
- (:class params)])
- (str (when-not (some #(= :Toggle %) (:class params)) " Checkbox ")))}
- [:div.Shape
- [:i (when-not (some #(= :Toggle %) (:class params))
- (case checked
- (true :checked) {:class :ion-ios-checkmark-empty}
- :indeterminate {:class :ion-ios-minus-empty}
- {}))]
- [:input (merge (dissoc params :checked :id :class)
- {:id id
- :type :checkbox
- :checked checked})]] label]))
+(defn checkbox [& args]
+ (let [{:keys [params]} (util/conform! ::spec/args args)
+ {:keys [model on-change id]
+ :or {id (util/gen-id)}} params
+ initial-value (util/deref-or-value model)
+ model (if (util/deref? model)
+ model
+ (atom (cond (keyword? initial-value) initial-value
+ (true? initial-value) :checked
+ :else :not-checked)))
+ --on-change #(let [model-value @model]
+ (when (= model-value :checked)
+ (reset! model :not-checked))
+ (when (not= model-value :checked)
+ (reset! model :checked))
+ (when (ifn? on-change) (on-change model-value %)))]
+
+ ;;#?(:cljs (js/alert (pr-str {:model model :params-model (:model params)})))
+ (fn [& args]
+ (let [{:keys [params label]
+ :or {label ""}} (util/conform! ::spec/args args)
+ checked @model]
+ [:label {:for id
+ :class (->> (util/names->str [(case checked
+ :checked :Checked
+ :indeterminate :Indeterminate
+ :Not-Checked)
+ (:class params)])
+ (str (when-not (some #(= :Toggle %) (:class params)) " Checkbox ")))}
+ [:div.Shape
+ [:i (when-not (some #(= :Toggle %) (:class params))
+ (case checked
+ :checked {:class :ion-ios-checkmark-empty}
+ :indeterminate {:class :ion-ios-minus-empty}
+ {}))]
+ [:input (merge (dissoc params :model :id :class)
+ {:id id
+ :type :checkbox
+ :on-change --on-change
+ :checked checked})]] label]))))

src/cljc/ui/element/chooser/spec.cljc

@@ -10,6 +10,11 @@
 (spec/def ::searchable boolean?)
 (spec/def ::deletable boolean?)
 (spec/def ::predicate? ::common/maybe-fn)
+(spec/def ::model
+ (spec/nonconforming
+ (spec/or :deref (spec/and ::common/ratom #(set? (deref %)))
+ :set set?
+ :nil nil?)))
 
 (spec/def ::params
  (spec/merge ::collection/params
@@ -18,10 +23,8 @@
  ::deletable
  ::searchable
  ::labels
- ::predicate?])))
-
-(spec/exercise ::params)
+ ::predicate?
+ ::model])))
 
 (spec/def ::args
  (spec/cat :params ::params))
-

src/cljc/ui/element/chooser/views.cljc

@@ -25,15 +25,16 @@
 (defn chooser
  [& args]
  (let [{:keys [params]} (util/conform! ::spec/args args)
- {:keys [id selected deletable items
+ {:keys [id model deletable items
  on-key-up on-change on-focus on-blur on-select]
  :or {id (util/gen-id)
- selected #{}}} params
- id (util/slug id)
- query* ^{:doc "Query to use for filtering and emphasizing the resultset"} (atom (if deletable (str/join ", " (map :value selected)) ""))
+ model #{}}} params
+ id (util/slug "chooser" id)
+ query* ^{:doc "Query to use for filtering and emphasizing the resultset"} (atom (if deletable (str/join ", " (map :value model)) ""))
  show* ^{:doc "Show or hide the collection-dropdown"} (atom false)
- selected* ^{:doc "Keep track of all selected items"} (atom selected)]
-
+ model ^{:doc "Keep track of all selected items"} (cond (util/deref? model) model
+ (set? model) (atom model)
+ :else (atom #{}))]
  (fn [& args]
  (let [{:keys [params]} (util/conform! ::spec/args args)
  {:keys [multiple
@@ -61,9 +62,9 @@
  ;; Remove incomplete items
  :on-key-up (fn [key value event]
  (let [candidates (->> (str/split value ",") (mapv str/trim) (set))
- valid-ones (remove (fn [x] (not (contains? candidates (str (:value x))))) @selected*)]
- (when (not= @selected* valid-ones)
- (reset! selected* (set valid-ones))))
+ valid-ones (remove (fn [x] (not (contains? candidates (str (:value x))))) @model)]
+ (when (not= @model valid-ones)
+ (reset! model (set valid-ones))))
  (when (fn? on-key-up) (on-key-up key value event)))
  :on-focus (fn [value event]
  (do (reset! show* true)
@@ -82,17 +83,17 @@
  :read-only true})
  (when (and (not deletable)
  (false? multiple)
- (not-empty @selected*))
- {:placeholder (-> (first @selected*) :value)})
+ (not-empty @model))
+ {:placeholder (-> (first @model) :value)})
  (when (and (not deletable)
  multiple
  (false? labels)
- (not (empty? @selected*)))
- {:placeholder (str (str/join ", " (map :value @selected*)))}))
+ (not (empty? @model)))
+ {:placeholder (str (str/join ", " (map :value @model)))}))
  collection-params (merge params
  {:id (util/slug id "collection")
  :emphasize current-query
- :model selected*
+ :model model
  :keyboard keyboard
  :selectable selectable
  :searchable searchable
@@ -101,7 +102,7 @@
  (if deletable
  (reset! query* (str (str/join ", " (map :value items)) (when multiple ", ")))
  (reset! query* ""))
- (reset! selected* items)
+ (reset! model items)
  (when (fn? on-select) (on-select items)))})]
 
  [:div.Chooser {:id id
@@ -114,12 +115,12 @@
 
  (when (and multiple
  (false? labels))
- [badge {:show-content? true} (count @selected*)])
+ [badge {:show-content? true} (count @model)])
 
  (when (and multiple labels)
  [:div.Labels
  (doall
- (for [label-params @selected*]
+ (for [label-params model]
  (let [label-params (merge label-params
  {:key (util/slug (:id label-params) "a-label")
  :on-key-down #(let [key (util/code->key (.-which %))]

src/cljc/ui/element/collection/spec.cljc

@@ -29,7 +29,6 @@
 (spec/def ::keyboard boolean?) ;; Enable keyboard-support
 (spec/def ::params
  (spec/keys :opt-un [::common/id
- ::model
  ::max-selected
  ::emphasize
  ::collapsable
@@ -45,6 +44,9 @@
  ::on-click
  ::on-select
  ::on-mouse-enter]))
+(spec/def ::--params
+ (spec/merge ::params
+ (spec/keys :opt-un [::model])))
 
 (spec/def ::id (spec/nonconforming (spec/or :str :ui.specs/qualified-string? :num nat-int?)))
 (spec/def ::value :ui.specs/qualified-string?)
@@ -56,6 +58,5 @@
  #(gen/fmap set (spec/gen (spec/coll-of ::item)))))
 
 (spec/def ::args
- (spec/cat :params ::params
+ (spec/cat :params ::--params
  :items ::items))
-

src/cljc/ui/element/collection/views.cljc

@@ -88,7 +88,7 @@
  (remove-item! [item]
  (swap! model disj item))
  (add-item! [item]
-  (when (seq item)
+ (when (seq item)
  (if (contains? @model item)
  (when deselectable
  (if (= 1 (count @model))
@@ -130,28 +130,30 @@
  [:ul.Collection {:key (util/slug "collection" id)
  :class (str (util/params->classes ui-params) " " class)}
  (when (seq items)
- (for [{:keys [id value label class] :as item} items]
- (let [label (or label value)]
- (into
- [:li {:key (util/slug "collection" "item" id)
- :class (str/join " " [(when (= (:id item) (:id intended)) "intended")
- (when (and (util/deref? model)
- (contains? @model item)) "selected")
- (str class)])
- :on-mouse-enter (partial --on-mouse-enter item)
- :on-click (partial --on-click item)}]
- (if (and collapsable
- (= (:id (first items)) id))
- [[:div.item-area
- (if (string? label)
+ ;; force evaluation. React doesn't like a LazySeq here
+ (doall
+ (for [{:keys [id value label class] :as item} items]
+ (let [label (or label value)]
+ (into
+ [:li {:key (util/slug "collection" "item" id)
+ :class (str/join " " [(when (= (:id item) (:id intended)) "intended")
+ (when (and (util/deref? model)
+ (contains? @model item)) "selected")
+ (str class)])
+ :on-mouse-enter (partial --on-mouse-enter item)
+ :on-click (partial --on-click item)}]
+ (if (and collapsable
+ (= (:id (first items)) id))
+ [[:div.item-area
+ (if (string? label)
+ (emphasize-match label emphasize)
+ label)]
+ [:div.collapse-area
+ [button {:on-click toggle-expanded}
+ [icon {:size 2} (str "chevron-" (if expanded? "up" "down"))]]]]
+ [(if (string? label)
  (emphasize-match label emphasize)
- label)]
- [:div.collapse-area
- [button {:on-click toggle-expanded}
- [icon {:size 2} (str "chevron-" (if expanded? "up" "down"))]]]]
- [(if (string? label)
- (emphasize-match label emphasize)
- label)])))))]))]
+ label)]))))))]))]
  #?(:clj render-fn
  :cljs
  (reagent/create-class

src/cljc/ui/element/notification/spec.cljc

@@ -4,7 +4,6 @@
  [ui.specs :as common]
  [ui.util :as util]))
 
-(spec/def ::id (spec/and string? #(re-find #"(?i)(\w+)" %)))
 (spec/def ::value string?)
 (spec/def ::model util/deref?)
 (spec/def ::class (spec/coll-of string?))