css and button added

demo/src/demo/page/options.cljs

@@ -1,42 +1,103 @@
 (ns demo.page.options
   (:require
+   [reagent.core :as r]
    [options.core :refer [options-ui]]))
 
+(def state (r/atom {}))
+
+(def config
+  {:state state
+   :current {; select
+             :year 2023
+             :client 2
+             :pet :hamster
+             ; bool
+             :run-parallel true
+             :debug? false
+             ; string
+             :search ""
+             ; view
+             :msg "hello!"}
+   :options [{:path :year
+              :name "Year"
+              :spec (range 2018 2024)}
+             {:path :client
+              :name "Client"
+              :spec [{:id 1 :name "Batman"}
+                     {:id 2 :name "Robin"}
+                     {:id 3 :name "Harry Potter"}
+                     {:id 4 :name "Dumbledor"}
+                     {:id 5 :name "The Hulk"}]
+              :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"}
+             {:path :pet
+              :name "Pet"
+              :spec [:cat :dog :parrot :hamster]
+              :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"}
+
+             {:path :run-parallel
+              :name "RunParallel?"
+              :spec :bool
+              :class "pt-0 px-2 py-1 placeholder-gray-400 text-gray-700 relative bg-white rounded text-sm border border-gray-400 outline-none focus:outline-none focus:shadow-outline"}
+             {:path :debug?
+              :name "DebugMode"
+              :spec :bool}
+             {:path :search
+              :name "SearchBox"
+              :spec :string
+              :class "px-2 py-1 placeholder-gray-400 text-gray-700 relative bg-white bg-white rounded text-sm border border-gray-400 outline-none focus:outline-none focus:shadow-outline"}
+             {:name "Go!"
+              :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
+              }
+             {:name "bad"
+              :spec :view2}
+             ]})
+
+
+(defn h1 [s]
+  [:<>
+   [:hr]
+   [:br]
+   [:h1 {:class "pt-5 pb-5 text-xl text-bold text-blue-700"} s]])
+
 (defn page-options [_]
-  [:div.grid.grid-cols-2
-
-   [options-ui {:class "bg-blue-300 grid grid-cols-2"
-                :style {;:width "50vw"
-                        ;:height "40vh"
-                        :border "3px solid green"}}
-    {:current {; select
-               :year 2023
-               :client 2
-               :pet :hamster
-               ; bool
-               :run-parallel true
-               :debug? false
-               ; string
-               :search ""}
-     :options {:year {:name "Year"
-                      :spec (range 2018 2024)}
-               :client {:name "Client"
-                        :spec [{:id 1 :name "Batman"}
-                               {:id 2 :name "Robin"}
-                               {:id 3 :name "Harry Potter"}
-                               {:id 4 :name "Dumbledor"}
-                               {:id 5 :name "The Hulk"}]
-                        :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"}
-               :pet {:name "Pet"
-                     :spec [:cat :dog :parrot :hamster]
-                     :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"}
-
-               :run-parallel {:name "Run in Parallel?"
-                              :spec :bool
-                              :class "pt-0 px-2 py-1 placeholder-gray-400 text-gray-700 relative bg-white rounded text-sm border border-gray-400 outline-none focus:outline-none focus:shadow-outline"}
-               :debug? {:name "Debug Mode"
-                        :spec :bool}
-               :search {:name "SearchBox"
-                        :spec :string
-                        :class "px-2 py-1 placeholder-gray-400 text-gray-700 relative bg-white bg-white rounded text-sm border border-gray-400 outline-none focus:outline-none focus:shadow-outline"}}}]])
+  [:div
+
+   [h1 "state"]
+   [:div (pr-str @state)]
+
+   [h1 "unstyled"]
+   [options-ui {:class "bg-blue-300 options-debug"
+                :style {:width "50vw"
+                         ;:height "40vh"
+                        }}config]
+
+   [h1 "label-top"]
+   [options-ui {:class "bg-blue-300 options-debug options-label-top"
+                :style {:width "50vw"
+                         ;:height "40vh"
+                        }}config]
+
+   [h1 "label-left"]
+   [options-ui {:class "bg-blue-300 options-debug options-label-left"
+                :style {:width "50vw"
+                         ;:height "40vh"
+                        }}config]
+
+   [h1 "label-left-small"]
+   [options-ui {:class "bg-blue-300 options-debug options-label-left"
+                :style {:width "20vw"
+                            ;:height "40vh"
+                        }}config]
+
+   [h1 "label-left-big"]
+   [options-ui {:class "bg-blue-300 options-debug options-label-left"
+                :style {:width "80vw"
+                               ;:height "40vh"
+                        }}config]])
 

resources/ext/options.edn

@@ -6,6 +6,9 @@
 
  :cljs-ns-bindings {'options.core {'options-ui options.core/options-ui}}
 
-
+ ; runtime
+
+ :theme {:available  {:options {true ["options/options.css"]}}
+         :current {:options true}}
  ;
  }

resources/public/options/options.css

@@ -0,0 +1,25 @@
+
+.options-label-top {
+    display: grid;
+    gap: "1rem";
+    grid-template-columns: repeat(auto-fit, minmax(200px,1fr));
+    grid-template-rows: 20px 20px repeat(auto-fill, 20px);
+    grid-auto-flow: column;
+    /* overflow-x: scroll; scroll does not look nice */
+    overflow-x: hidden;
+  }
+
+.options-label-left {
+    display: grid;
+    gap: "1rem";
+    grid-template-columns: repeat(auto-fit, 100px 200px ); /* minmax(200px,1fr) */
+    grid-template-rows: repeat(auto-fill, 30px);
+    grid-auto-flow: row;
+
+  }
+
+
+ .options-debug {
+    border: 3px solid green;
+    background-color: tomato;
+ }

src/options/core.cljs

@@ -5,7 +5,9 @@
    [options.editor.view :refer [editor-view]]
    [options.editor.bool :refer [editor-bool]]
    [options.editor.string :refer [editor-string]]
-   [options.editor.select :refer [editor-select select?]]))
+   [options.editor.select :refer [editor-select select?]]
+   [options.editor.button :refer [editor-button]]
+   ))
 
 (defn get-editor-fn [{:keys [options] :as config} current-val]
   (let [{:keys [spec]} options]
@@ -17,6 +19,9 @@
       (= spec :string)
       (editor-string config current-val)
 
+      (= spec :button)
+      (editor-button config current-val)
+
       (select? spec)
       (editor-select config current-val)
 
@@ -29,23 +34,24 @@
      [:span name] ; <label for= "pet-select" >Choose a pet:</label>
      (get-editor-fn config current-val)]))
 
-(defn edit-params [options set-fn kw]
-  {:set-fn #(set-fn kw %)
-   :options  (get-in options [:options kw])})
 
-(defn create-edit-element [state options set-fn kw]
-  [edit-element (edit-params options set-fn kw) (kw @state)])
+(defn create-edit-element [state options]
+  (let [kw (:path options)
+        set-fn (fn [v]
+                 (when kw
+                   (println "setting state for kw: " kw " to val: " v)
+                   (swap! state assoc kw v)))]
+    [edit-element {:set-fn set-fn
+                   :options options}
+     (if kw 
+       (kw @state)
+       nil)]))
 
 (defn options-ui [{:keys [class style] :as styling}  ; styling
-                  {:keys [current] :as options}] ; data
-  (let [state (r/atom current)
-        set-fn (fn [kw v]
-                 (println "setting state for kw: " kw " to val: " v)
-                 (swap! state assoc kw v))]
-    (fn [_styling options]
-      (into [:div {:style style
-                   :class class}
-             [:div "state: "]
-             [:div (pr-str @state)]]
-            (map #(create-edit-element state options set-fn %)
-                 (keys (:current options)))))))
+                  {:keys [current state options]
+                   :or {state (r/atom current)} :as config}] ; data
+  (reset! state current)
+  (fn [_styling {:keys [current state options] :as config}]
+    (into [:div {:style style
+                 :class class}]
+          (map #(create-edit-element state %) options))))

src/options/editor/button.cljs

@@ -0,0 +1,18 @@
+(ns options.editor.button)
+
+; for ideas for props for button look at:
+; 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 "" 
+              name ""
+              style {}}} options]
+   [:button
+     {:class class
+      :style style
+      :on-click (fn [_ & _] 
+                  (when on-click 
+                    (on-click)))}
+    name]))
+

src/options/editor/view.cljs

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