label added (for grouping)

Author: awb99

demo/deps.edn

@@ -3,7 +3,7 @@
          "target/webly"]
 
  :deps {org.clojure/clojure    {:mvn/version "1.11.1"}
-        org.pinkgorilla/webly {:mvn/version "0.7.702"} ; build tool
+        org.pinkgorilla/webly {:mvn/version "0.7.703"} ; build tool
         ; goldly extensions:
         org.pinkgorilla/ui-tailwind {:mvn/version "0.1.8"} ; tailwind css classes
         ;org.pinkgorilla/ui-repl {:mvn/version "0.0.72"}

demo/src/demo/page/quanta.cljs

@@ -19,6 +19,7 @@
              {:type :select :path [2 :trailing-n], :name "trailing#", :spec [2 5 10 20 30 50 80 100 120 150]}
              {:type :select :path [2 :atr-n], :name "dATR#", :spec [5 10 20 30]}
              {:type :select :path [2 :percentile], :name "dPercentile", :spec [10 20 30 40 50 60 70 80 90]}
+             {:type :label  :name "v2"}
              {:type :select :path [2 :step], :name "dStep", :spec [0.001 1.0E-4 4.0E-5]}
              {:type :select :path [4 :max-open-close-over-low-high], :name "doji-co/lh max", :spec [0.1 0.2 0.3 0.4 0.5 0.6 0.7 0.8 0.9]}])
 
@@ -53,4 +54,15 @@
                  :edit options
                  :state state}]
 
+
+  [h1 "labels-left-1-col"]
+  [options-ui2 {:class "bg-blue-300 options-label-left"
+              :style {:width "300px"
+                            ;:height "40vh"
+                      }
+              :edit options
+              :state state}]
+
+
+
    ])

src/options/core.cljs

@@ -25,16 +25,23 @@
 
 (defn create-edit-element [{:keys [set-fn get-fn]}  {:keys [path name type] :as options}]
   (let [editor (get-editor type)]
-    [:<>
-     [:span
-      {:style {:text-overflow "ellipsis"
-               :overflow "hidden"
-               :display "inline-block"}}
-
-      name] ; <label for= "pet-select" >Choose a pet:</label>
-     [editor {:set-fn (partial set-fn path)
-              :options options}
-      (get-fn path)]]))
+    (if (= type :label)
+      ; label only
+      [:<>
+       [:span]
+       [:span.font-bold.font-big name]]
+      ; editor
+      [:<>
+       [:span
+        {:style {:text-overflow "clip"  ; "ellipsis" ; ellipsis needs too much space, clip allws to display a little more text
+                 :white-space "nowrap" ; nowrap is needed;  otherwise text would flow to next line
+                 :overflow "hidden"
+                 :display "inline-block"}}
+
+        name] ; <label for= "pet-select" >Choose a pet:</label>
+       [editor {:set-fn (partial set-fn path)
+                :options options}
+        (get-fn path)]])))
 
 (defn options-ui2 [{:keys [class style
                            edit