improvements

src/clj/auto_ap/ssr/components/buttons.clj

@@ -1,5 +1,6 @@
 (ns auto-ap.ssr.components.buttons
-  (:require [auto-ap.ssr.svg :as svg]))
+  (:require [auto-ap.ssr.svg :as svg]
+            [auto-ap.ssr.hiccup-helper :as hh]))
 
 (defn button-icon- [_ i]
   [:div.h-4.w-4 i])
@@ -170,3 +171,16 @@
                  :hx-on:click "this.querySelector(\"input\").value = event.target.value; this.querySelector(\"input\").dispatchEvent(new Event('change', {bubbles: true}));"}
            [:input {:type "hidden" :name name}]]
           children)))
+
+
+(defn validated-save-button- [{:keys [errors class] :as params} & children]
+  (button- (-> {:color :primary :form  "edit-form"
+                :type  "submit" :class (cond-> (or class "")
+                                         true (hh/add-class "w-32")
+                                         (seq errors) (hh/add-class "animate-shake"))}
+               (merge params)
+               (dissoc :errors))
+           (if (seq children)
+             children
+             "Save"))
+  )

src/clj/auto_ap/ssr/components/dialog.clj

@@ -1,17 +1,26 @@
 (ns auto-ap.ssr.components.dialog
   (:require [hiccup2.core :as hiccup]
-            [auto-ap.ssr.hx :as hx]))
+            [auto-ap.ssr.hx :as hx]
+            [auto-ap.ssr.hiccup-helper :as hh]))
 
 (defn modal- [params & children]
-  [:div#modal-content {:class ""}
-   children])
+  [:div {:class (-> (:class params)
+                    (or "max-w-4xl w-1/4 overflow-visible")
+                    (hh/add-class "h-min"))
+         "@click.outside"           "open=false"
+         } children])
 
 (defn modal-card- [params header content footer]
-  [:div#modal-card params
-   [:div {:class "bg-white rounded-lg shadow dark:bg-gray-700 dark:text-white  modal-content w-full"}
-    [:div {:class "flex items-start justify-between p-4 border-b rounded-t dark:border-gray-600"} header]
-    [:div {:class "p-6 space-y-6 overflow-scroll "}
+  [:div#modal-card (update params
+                           :class (fn [c] (-> c
+                                              (or "w-full")
+                                              )))
+   [:div {:class "bg-white rounded-lg shadow dark:bg-gray-700 dark:text-white  modal-content w-full flex flex-col max-h-[80vh]"}
+    [:div {:class "flex items-start justify-between p-4 border-b rounded-t dark:border-gray-600 shrink-0"} header]
+    [:div {:class "px-6 space-y-6 overflow-y-scroll w-full shrink"}
+     #_[:div.bg-green-300.w-full.h-64
+        "hello"]
      content]
-    (when footer [:div {:class "p-4 "} footer])]])
+    (when footer [:div {:class "p-4 shrink-0"} footer])]])
 
 ;; fade-in-settle slide-up-settle duration-300 transition-all

src/clj/auto_ap/ssr/components/inputs.clj

@@ -82,7 +82,8 @@ c.clearChoices();
                                        [{:value ((:value-fn params first) (:value params)) :label ((:content-fn params second) (:value params))}]
                                        [])})
          :x-modelable "value.value"
-         :x-model (:x-model params)}
+         :x-model (:x-model params)
+         :class "relative"}
    [:a {:class                        (-> (hh/add-class (or (:class params) "") default-input-classes)
                                           (hh/add-class "cursor-pointer"))
         "@click.prevent"         "open = !open;"