edit page added

demo/resources/ext/demo.edn

@@ -1,7 +1,9 @@
 {:name "demo"
  :cljs-routes  {"" demo.page.options/page-options
+                "controls" demo.page.controls/page-controls
                 }
- :sci-cljs-ns [demo.page.options]
+ :sci-cljs-ns [demo.page.options
+               demo.page.controls]
 
 
 }

demo/src/demo/page/controls.cljs

@@ -0,0 +1,32 @@
+(ns demo.page.controls
+  (:require
+   [reagent.core :as r]
+   [options.edit :as edit]))
+
+(defn h1 [s]
+  [:<>
+   [:hr]
+   [:br]
+   [:h1 {:class "pt-5 pb-5 text-xl text-bold text-blue-700"} s]])
+
+(def state-pet (r/atom :cat))
+(def state-bool (r/atom true))
+
+(defn page-controls [_]
+  [:div
+   [:a {:href "/"}
+    [:p "goto options"]]
+
+   [h1 "state"]
+   [:div " pet: " (pr-str @state-pet)
+    " bool: " (pr-str @state-bool)]
+
+   [edit/bool {:set-fn #(reset! state-bool %)
+               :options {:class "bg-red-300 p-2"}}
+    @state-bool]
+
+   [edit/select
+    {:set-fn #(reset! state-pet %)
+     :options {:class "placeholder-gray-400 text-gray-700 relative bg-white rounded text-sm border border-gray-400 outline-none focus:outline-none focus:shadow-outline"
+               :spec [:cat :dog :parrot :hamster]}}
+    @state-pet]])

demo/src/demo/page/options.cljs

@@ -49,15 +49,12 @@
               :spec :button
               :class "bg-blue-500 hover:bg-blue-700 text-white font-bold rounded" ; py-2 px-4
               :on-click #(js/alert "yeah!")}
-             
+
              {:name "view"
               :spec :view
-              :path :msg
-              }
+              :path :msg}
              {:name "bad"
-              :spec :view2}
-             ]})
-
+              :spec :view2}]})
 
 (defn h1 [s]
   [:<>
@@ -68,6 +65,9 @@
 (defn page-options [_]
   [:div
 
+   [:a {:href "/controls"}
+    [:p "goto controls"]]
+
    [h1 "state"]
    [:div (pr-str @state)]
 

resources/ext/options.edn

@@ -2,14 +2,15 @@
  ; build
  :lazy false
 
- :cljs-namespace [options.core]
+ :cljs-namespace [options.core
+                  options.edit]
 
  :cljs-ns-bindings {'options.core {'options-ui options.core/options-ui}
-                    'options.editor {'bool options.editor/bool
-                                     'button options.editor/button
-                                     'select options.editor/select
-                                     'string options.editor/string
-                                     'view options.editor/view}}
+                    'options.editr {'bool options.edit/bool
+                                     'button options.edit/button
+                                     'select options.edit/select
+                                     'string options.edit/string
+                                     'view options.edit/view}}
 
  ; runtime
 

src/options/core.cljs

@@ -6,8 +6,7 @@
    [options.editor.bool :refer [editor-bool]]
    [options.editor.string :refer [editor-string]]
    [options.editor.select :refer [editor-select select?]]
-   [options.editor.button :refer [editor-button]]
-   ))
+   [options.editor.button :refer [editor-button]]))
 
 (defn get-editor-fn [{:keys [options] :as config} current-val]
   (let [{:keys [spec]} options]
@@ -34,7 +33,6 @@
      [:span name] ; <label for= "pet-select" >Choose a pet:</label>
      (get-editor-fn config current-val)]))
 
-
 (defn create-edit-element [state options]
   (let [kw (:path options)
         set-fn (fn [v]
@@ -43,7 +41,7 @@
                    (swap! state assoc kw v)))]
     [edit-element {:set-fn set-fn
                    :options options}
-     (if kw 
+     (if kw
        (kw @state)
        nil)]))
 

src/options/edit.cljs

@@ -0,0 +1,13 @@
+(ns options.edit
+  (:require
+   [options.editor.bool]
+   [options.editor.button]
+   [options.editor.select]
+   [options.editor.string]
+   [options.editor.view]))
+
+(def bool   options.editor.bool/editor-bool)
+(def button options.editor.button/editor-button)
+(def select options.editor.select/editor-select)
+(def string options.editor.string/editor-string)
+(def view   options.editor.view/editor-view)

src/options/editor/button.cljs

@@ -4,15 +4,15 @@
 ; https://github.com/knipferrc/tails-ui/blob/master/src/components/Button.re
 
 (defn editor-button [{:keys [_set-fn options]} _current-val]
-  (let [{:keys [class style name on-click] 
-         :or {class "" 
+  (let [{:keys [class style name on-click]
+         :or {class ""
               name ""
               style {}}} options]
-   [:button
+    [:button
      {:class class
       :style style
-      :on-click (fn [_ & _] 
-                  (when on-click 
+      :on-click (fn [_ & _]
+                  (when on-click
                     (on-click)))}
-    name]))
+     name]))
 

src/options/editor/select.cljs

@@ -31,7 +31,9 @@
     v))
 
 (defn editor-select [{:keys [set-fn options]} current-val]
-  (let [{:keys [class spec] :or {class ""}} options
+  (let [{:keys [class spec]
+         :or {class ""
+              spec []}} options
         option1 (first spec)
         spec (if (map? option1)
                spec

src/options/editor/view.cljs

@@ -1,7 +1,7 @@
 (ns options.editor.view)
 
 (defn editor-view [{:keys [options]} current-val]
-  (let [{:keys [class] 
-         :or {class ""}} 
+  (let [{:keys [class]
+         :or {class ""}}
         options]
     [:span {:class class} (pr-str current-val)]))