notid/integreat
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

animates with shake

Browse Source
This commit is contained in:
Bryce
2023-10-21 20:08:08 -07:00
parent 34f4a12b2e
commit 998d29690e
4 changed files with 178 additions and 181 deletions
Download Patch File Download Diff File Expand all files Collapse all files

215
resources/public/output.css
View File

@@ -1147,14 +1147,14 @@ input:checked + .toggle-bg {
grid-column-start: 1; grid-column-start: 1;
} }
.m-4 {
margin: 1rem;
}
.m-1 { .m-1 {
margin: 0.25rem; margin: 0.25rem;
} }
.m-4 {
margin: 1rem;
}
.mx-2 { .mx-2 {
margin-left: 0.5rem; margin-left: 0.5rem;
margin-right: 0.5rem; margin-right: 0.5rem;
@@ -1180,6 +1180,14 @@ input:checked + .toggle-bg {
margin-bottom: 1rem; margin-bottom: 1rem;
} }
.\!mt-0 {
margin-top: 0px !important;
}
.\!mt-1 {
margin-top: 0.25rem !important;
}
.-mb-1 { .-mb-1 {
margin-bottom: -0.25rem; margin-bottom: -0.25rem;
} }
@@ -1260,26 +1268,6 @@ input:checked + .toggle-bg {
margin-top: 1.25rem; margin-top: 1.25rem;
} }
.\!mt-0 {
margin-top: 0px !important;
}
.\!mt-3 {
margin-top: 0.75rem !important;
}
.mt-3 {
margin-top: 0.75rem;
}
.\!mt-1 {
margin-top: 0.25rem !important;
}
.ml-64 {
margin-left: 16rem;
}
.block { .block {
display: block; display: block;
} }
@@ -1352,10 +1340,6 @@ input:checked + .toggle-bg {
height: 24rem; height: 24rem;
} }
.h-\[calc\(100\%-1rem\)\] {
height: calc(100% - 1rem);
}
.h-full { .h-full {
height: 100%; height: 100%;
} }
@@ -1428,14 +1412,14 @@ input:checked + .toggle-bg {
width: 24rem; width: 24rem;
} }
.w-full {
width: 100%;
}
.w-auto { .w-auto {
width: auto; width: auto;
} }
.w-full {
width: 100%;
}
.w-max { .w-max {
width: -moz-max-content; width: -moz-max-content;
width: max-content; width: max-content;
@@ -1497,6 +1481,16 @@ input:checked + .toggle-bg {
flex-basis: 25%; flex-basis: 25%;
} }
.\!translate-y-0 {
--tw-translate-y: 0px !important;
transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y)) !important;
}
.\!translate-y-32 {
--tw-translate-y: 8rem !important;
transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y)) !important;
}
.-translate-x-1\/2 { .-translate-x-1\/2 {
--tw-translate-x: -50%; --tw-translate-x: -50%;
transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y)); transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
@@ -1532,16 +1526,6 @@ input:checked + .toggle-bg {
transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y)); transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
} }
.\!translate-y-0 {
--tw-translate-y: 0px !important;
transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y)) !important;
}
.\!translate-y-32 {
--tw-translate-y: 8rem !important;
transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y)) !important;
}
.rotate-180 { .rotate-180 {
--tw-rotate: 180deg; --tw-rotate: 180deg;
transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y)); transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
@@ -1565,6 +1549,48 @@ input:checked + .toggle-bg {
animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite; animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
} }
@keyframes shake {
0% {
transform: translateX(0px);
}
12.5% {
transform: translateX(-5px);
}
25% {
transform: translateX(0px);
}
37.5% {
transform: translateX(5px);
}
50% {
transform: translateX(0px);
}
62.5% {
transform: translateX(-5px);
}
75% {
transform: translateX(5px);
}
87.5% {
transform: translateX(5px);
}
100% {
transform: translateX(0px);
}
}
.animate-shake {
animation: shake 0.5s ease-out 1;
}
@keyframes spin { @keyframes spin {
to { to {
transform: rotate(360deg); transform: rotate(360deg);
@@ -1773,26 +1799,10 @@ input:checked + .toggle-bg {
border-color: rgb(243 244 246 / var(--tw-divide-opacity)); border-color: rgb(243 244 246 / var(--tw-divide-opacity));
} }
.place-self-start {
place-self: start;
}
.place-self-end {
place-self: end;
}
.self-start {
align-self: flex-start;
}
.self-center { .self-center {
align-self: center; align-self: center;
} }
.justify-self-start {
justify-self: start;
}
.justify-self-end { .justify-self-end {
justify-self: end; justify-self: end;
} }
@@ -1817,10 +1827,6 @@ input:checked + .toggle-bg {
overflow-y: auto; overflow-y: auto;
} }
.overflow-x-hidden {
overflow-x: hidden;
}
.truncate { .truncate {
overflow: hidden; overflow: hidden;
text-overflow: ellipsis; text-overflow: ellipsis;
@@ -2094,15 +2100,6 @@ input:checked + .toggle-bg {
background-color: rgb(253 246 178 / var(--tw-bg-opacity)); background-color: rgb(253 246 178 / var(--tw-bg-opacity));
} }
.bg-gray-300 {
--tw-bg-opacity: 1;
background-color: rgb(209 213 219 / var(--tw-bg-opacity));
}
.bg-opacity-50 {
--tw-bg-opacity: 0.5;
}
.\!bg-opacity-0 { .\!bg-opacity-0 {
--tw-bg-opacity: 0 !important; --tw-bg-opacity: 0 !important;
} }
@@ -2115,10 +2112,18 @@ input:checked + .toggle-bg {
--tw-bg-opacity: 0.5 !important; --tw-bg-opacity: 0.5 !important;
} }
.bg-opacity-50 {
--tw-bg-opacity: 0.5;
}
.p-1 { .p-1 {
padding: 0.25rem; padding: 0.25rem;
} }
.p-12 {
padding: 3rem;
}
.p-2 { .p-2 {
padding: 0.5rem; padding: 0.5rem;
} }
@@ -2139,10 +2144,6 @@ input:checked + .toggle-bg {
padding: 1.5rem; padding: 1.5rem;
} }
.p-12 {
padding: 3rem;
}
.px-2 { .px-2 {
padding-left: 0.5rem; padding-left: 0.5rem;
padding-right: 0.5rem; padding-right: 0.5rem;
@@ -2426,23 +2427,10 @@ input:checked + .toggle-bg {
color: rgb(114 59 19 / var(--tw-text-opacity)); color: rgb(114 59 19 / var(--tw-text-opacity));
} }
.text-gray-200 {
--tw-text-opacity: 1;
color: rgb(229 231 235 / var(--tw-text-opacity));
}
.underline { .underline {
text-decoration-line: underline; text-decoration-line: underline;
} }
.opacity-0 {
opacity: 0;
}
.opacity-100 {
opacity: 1;
}
.\!opacity-0 { .\!opacity-0 {
opacity: 0 !important; opacity: 0 !important;
} }
@@ -2451,6 +2439,14 @@ input:checked + .toggle-bg {
opacity: 1 !important; opacity: 1 !important;
} }
.opacity-0 {
opacity: 0;
}
.opacity-100 {
opacity: 1;
}
.shadow { .shadow {
--tw-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1); --tw-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
--tw-shadow-colored: 0 1px 3px 0 var(--tw-shadow-color), 0 1px 2px -1px var(--tw-shadow-color); --tw-shadow-colored: 0 1px 3px 0 var(--tw-shadow-color), 0 1px 2px -1px var(--tw-shadow-color);
@@ -2528,6 +2524,10 @@ input:checked + .toggle-bg {
transition-duration: 100ms; transition-duration: 100ms;
} }
.duration-200 {
transition-duration: 200ms;
}
.duration-300 { .duration-300 {
transition-duration: 300ms; transition-duration: 300ms;
} }
@@ -2540,8 +2540,8 @@ input:checked + .toggle-bg {
transition-duration: 75ms; transition-duration: 75ms;
} }
.duration-200 { .ease-\[cubic-bezier\(\.3\2c 2\.3\2c \.6\2c 1\)\] {
transition-duration: 200ms; transition-timing-function: cubic-bezier(.3,2.3,.6,1);
} }
.ease-in-out { .ease-in-out {
@@ -2552,10 +2552,6 @@ input:checked + .toggle-bg {
transition-timing-function: cubic-bezier(0, 0, 0.2, 1); transition-timing-function: cubic-bezier(0, 0, 0.2, 1);
} }
.ease-\[cubic-bezier\(\.3\2c 2\.3\2c \.6\2c 1\)\] {
transition-timing-function: cubic-bezier(.3,2.3,.6,1);
}
.htmx-added .fade-in { .htmx-added .fade-in {
opacity: 0.0 !important; opacity: 0.0 !important;
} }
@@ -2984,6 +2980,11 @@ input:checked + .toggle-bg {
background-color: rgb(73 109 28 / var(--tw-bg-opacity)); background-color: rgb(73 109 28 / var(--tw-bg-opacity));
} }
.hover\:bg-neutral-100:hover {
--tw-bg-opacity: 1;
background-color: rgb(245 245 245 / var(--tw-bg-opacity));
}
.hover\:bg-primary-100:hover { .hover\:bg-primary-100:hover {
--tw-bg-opacity: 1; --tw-bg-opacity: 1;
background-color: rgb(228 240 213 / var(--tw-bg-opacity)); background-color: rgb(228 240 213 / var(--tw-bg-opacity));
@@ -2999,11 +3000,6 @@ input:checked + .toggle-bg {
background-color: rgb(255 255 255 / var(--tw-bg-opacity)); background-color: rgb(255 255 255 / var(--tw-bg-opacity));
} }
.hover\:bg-neutral-100:hover {
--tw-bg-opacity: 1;
background-color: rgb(245 245 245 / var(--tw-bg-opacity));
}
.hover\:text-blue-600:hover { .hover\:text-blue-600:hover {
--tw-text-opacity: 1; --tw-text-opacity: 1;
color: rgb(0 125 187 / var(--tw-text-opacity)); color: rgb(0 125 187 / var(--tw-text-opacity));
@@ -3547,18 +3543,10 @@ input:checked + .toggle-bg {
display: block; display: block;
} }
.sm\:max-h-\[80vh\] {
max-height: 80vh;
}
.sm\:max-h-\[90vh\] { .sm\:max-h-\[90vh\] {
max-height: 90vh; max-height: 90vh;
} }
.sm\:max-w-4xl {
max-width: 56rem;
}
.sm\:max-w-2xl { .sm\:max-w-2xl {
max-width: 42rem; max-width: 42rem;
} }
@@ -3583,10 +3571,6 @@ input:checked + .toggle-bg {
} }
@media (min-width: 768px) { @media (min-width: 768px) {
.md\:inset-0 {
inset: 0px;
}
.md\:ml-2 { .md\:ml-2 {
margin-left: 0.5rem; margin-left: 0.5rem;
} }
@@ -3688,9 +3672,9 @@ input:checked + .toggle-bg {
} }
} }
.\[\&\.active\]\:bg-red-500.active { .\[\&\.active\]\:bg-primary-300.active {
--tw-bg-opacity: 1; --tw-bg-opacity: 1;
background-color: rgb(255 3 3 / var(--tw-bg-opacity)); background-color: rgb(175 211 130 / var(--tw-bg-opacity));
} }
.\[\&\.active\]\:bg-primary-500.active { .\[\&\.active\]\:bg-primary-500.active {
@@ -3698,11 +3682,6 @@ input:checked + .toggle-bg {
background-color: rgb(121 181 46 / var(--tw-bg-opacity)); background-color: rgb(121 181 46 / var(--tw-bg-opacity));
} }
.\[\&\.active\]\:bg-primary-300.active {
--tw-bg-opacity: 1;
background-color: rgb(175 211 130 / var(--tw-bg-opacity));
}
:is(.dark .\[\&\.active\]\:dark\:bg-primary-700).active { :is(.dark .\[\&\.active\]\:dark\:bg-primary-700).active {
--tw-bg-opacity: 1; --tw-bg-opacity: 1;
background-color: rgb(73 109 28 / var(--tw-bg-opacity)); background-color: rgb(73 109 28 / var(--tw-bg-opacity));

122
src/clj/auto_ap/ssr/admin/transaction_rules.clj
View File

@@ -47,7 +47,8 @@
[hiccup2.core :as hiccup] [hiccup2.core :as hiccup]
[iol-ion.query :refer [ident]] [iol-ion.query :refer [ident]]
[malli.core :as mc] [malli.core :as mc]
[auto-ap.cursor :as cursor])) [auto-ap.cursor :as cursor]
[auto-ap.ssr.hiccup-helper :as hh]))
;; TODO with dependencies, I really don't like that you have to be ultra specific in what ;; TODO with dependencies, I really don't like that you have to be ultra specific in what
;; you want to include, and generating the routes and interconnection is weird too. ;; you want to include, and generating the routes and interconnection is weird too.
@@ -310,25 +311,26 @@
[{:keys [ name account-location client-locations value]}] [{:keys [ name account-location client-locations value]}]
(com/select {:options (into [["" ""]] (com/select {:options (into [["" ""]]
(cond account-location (cond account-location
[[account-location account-location]] [[account-location account-location]]
(seq client-locations) (seq client-locations)
(into [["Shared" "Shared"]] (into [["Shared" "Shared"]]
(for [cl client-locations] (for [cl client-locations]
[cl cl])) [cl cl]))
:else :else
[["Shared" "Shared"]])) [["Shared" "Shared"]]))
:name name :name name
:value value :value value
:class "w-full"})) :class "w-full"}))
(defn- account-typeahead* (defn- account-typeahead*
[{:keys [name value client-id]}] [{:keys [name value client-id x-model]}]
[:div.flex.flex-col [:div.flex.flex-col
(com/typeahead-2 {:name name (com/typeahead-2 {:name name
:placeholder "Search..." :placeholder "Search..."
:url (str (bidi/path-for ssr-routes/only-routes :account-search) "?client-id=" client-id) :url (str (bidi/path-for ssr-routes/only-routes :account-search) "?client-id=" client-id)
:id name :id name
:x-model x-model
:value value :value value
:value-fn (some-fn :db/id identity) :value-fn (some-fn :db/id identity)
:content-fn (fn [value] :content-fn (fn [value]
@@ -338,9 +340,11 @@
(defn- transaction-rule-account-row* (defn- transaction-rule-account-row*
[transaction-rule account] [transaction-rule account]
(com/data-grid-row {} (com/data-grid-row {:x-data (hx/json {:accountId (or (:db/id (fc/field-value (:transaction-rule-account/account account)))
(fc/field-value (:transaction-rule-account/account account)))})}
(let [account-name (fc/field-name (:transaction-rule-account/account account))] (let [account-name (fc/field-name (:transaction-rule-account/account account))]
(list (list
(fc/with-field :db/id (fc/with-field :db/id
(com/hidden {:name (fc/field-name) (com/hidden {:name (fc/field-name)
:value (fc/field-value)})) :value (fc/field-value)}))
@@ -349,44 +353,34 @@
{} {}
(com/validated-field (com/validated-field
{:errors (fc/field-errors)} {:errors (fc/field-errors)}
[:div {:hx-trigger (hx/trigger-field-change :name "transaction-rule/client" [:div {:hx-trigger "changed"
:from "#edit-form") :hx-target "next div"
:hx-include "#edit-form" :hx-vals (format "js:{name: '%s', 'client-id': event.detail.clientId}" account-name)
:hx-vals (hx/vals {:name account-name}) :hx-get (str (bidi/path-for ssr-routes/only-routes :admin-transaction-rule-account-typeahead))
:hx-ext "rename-params" :x-init "$watch('clientId', cid => $dispatch('changed', $data))"}]
:hx-rename-params-ex (hx/json {:transaction-rule/client "client-id" (account-typeahead* {:value (fc/field-value)
:name "name" :client-id (:db/id (:transaction-rule/client transaction-rule))
account-name "value"}) :name (fc/field-name)
:hx-get (str (bidi/path-for ssr-routes/only-routes :admin-transaction-rule-account-typeahead)) :x-model "accountId"
:hx-swap "innerHTML"} }))))
(account-typeahead* {:value (fc/field-value)
:client-id (:db/id (:transaction-rule/client transaction-rule))
:name (fc/field-name)})])))
(fc/with-field :transaction-rule-account/location (fc/with-field :transaction-rule-account/location
(com/data-grid-cell (com/data-grid-cell
{} {}
(com/validated-field (com/validated-field
{:errors (fc/field-errors)} {:errors (fc/field-errors)
[:div [:div {:hx-trigger (hx/triggers :x-data (hx/json {:location (fc/field-value)})}
(hx/trigger-field-change :name "transaction-rule/client" [:div {:hx-trigger "changed"
:from "#edit-form") :hx-target "next *"
(hx/trigger-field-change :name account-name :hx-vals (format "js:{name: '%s', 'client-id': event.detail.clientId || '', 'account-id': event.detail.accountId || ''}" (fc/field-name) )
:from "#edit-form")) :hx-get (bidi/path-for ssr-routes/only-routes :admin-transaction-rule-location-select)
:hx-include "#edit-form" :x-init "$watch('clientId', cid => $dispatch('changed', $data)); $watch('accountId', cid => $dispatch('changed', $data))"}]
:hx-vals (hx/vals {:name (fc/field-name)}) (location-select* {:name (fc/field-name)
:hx-ext "rename-params" :account-location (:account/location (cond->> (:transaction-rule-account/account @account)
:hx-rename-params-ex (hx/json {"transaction-rule/client" "client-id" (nat-int? (:transaction-rule-account/account @account)) (dc/pull (dc/db conn)
account-name "account-id" '[:account/location])))
"name" "name" :client-locations (:client/locations (:transaction-rule/client transaction-rule))
(fc/field-name) "value"}) :hx-model "location"
:hx-get (bidi/path-for ssr-routes/only-routes :admin-transaction-rule-location-select) :value (fc/field-value)}))))
:hx-swap "innerHTML"}
(location-select* {:name (fc/field-name)
:account-location (:account/location (cond->> (:transaction-rule-account/account @account)
(nat-int? (:transaction-rule-account/account @account)) (dc/pull (dc/db conn)
'[:account/location])))
:client-locations (:client/locations (:transaction-rule/client transaction-rule))
:value (fc/field-value)})]])))
(fc/with-field :transaction-rule-account/percentage (fc/with-field :transaction-rule-account/percentage
(com/data-grid-cell (com/data-grid-cell
{} {}
@@ -414,9 +408,12 @@
:hx-swap "outerHTML swap:300ms" :hx-swap "outerHTML swap:300ms"
:hx-target "#modal-holder" :hx-target "#modal-holder"
:hx-target-400 "#form-errors .error-content" :hx-target-400 "#form-errors .error-content"
:x-trap "true"} :x-trap "true"
:class "group/form"}
form-params) form-params)
[:fieldset {:class "hx-disable" :hx-disinherit "hx-target"} [:fieldset {:class "hx-disable" :hx-disinherit "hx-target"
:x-data (hx/json {:clientId (or (:db/id (:transaction-rule/client entity))
(:transaction-rule/client entity))})}
(fc/start-form entity form-errors (fc/start-form entity form-errors
[:div.space-y-1 [:div.space-y-1
@@ -461,7 +458,7 @@
:class "w-96" :class "w-96"
:placeholder "Search..." :placeholder "Search..."
:url (bidi/path-for ssr-routes/only-routes :company-search) :url (bidi/path-for ssr-routes/only-routes :company-search)
:id (str "form-client-search") :x-model "clientId"
:value (fc/field-value) :value (fc/field-value)
:value-fn (some-fn :db/id identity) :value-fn (some-fn :db/id identity)
:content-fn (fn [c] (cond->> c :content-fn (fn [c] (cond->> c
@@ -472,23 +469,23 @@
(com/validated-field (com/validated-field
(-> {:label "Bank Account" (-> {:label "Bank Account"
:errors (fc/field-errors) :errors (fc/field-errors)
:x-show "bankAccountFilter"} :x-show "bankAccountFilter"
}
hx/alpine-appear) hx/alpine-appear)
[:div#bank-account-spot.w-96 {:hx-get (bidi/path-for ssr-routes/only-routes :bank-account-typeahead) [:div.w-96
:hx-trigger (hx/trigger-field-change :name "transaction-rule/client" [:div#bank-account-changer {:hx-get (bidi/path-for ssr-routes/only-routes :bank-account-typeahead)
:from "#edit-form") :hx-trigger "changed"
:hx-swap "innerHTML" :hx-target "next *"
:hx-ext "rename-params" :hx-include "#bank-account-changer"
:hx-include "#edit-form" :hx-swap "innerHTML"
:hx-vals (hx/vals {:name (fc/field-name)})
:hx-rename-params-ex (cheshire/generate-string {"transaction-rule/client" "client-id" :hx-vals (format "js:{name: '%s', 'client-id': event.detail.clientId}" (fc/field-name))
"name" "name"})} :x-init "$watch('clientId', cid => $dispatch('changed', $data))"}]
(bank-account-typeahead* {:client-id ((some-fn :db/id identity) (:transaction-rule/client entity)) (bank-account-typeahead* {:client-id ((some-fn :db/id identity) (:transaction-rule/client entity))
:name (fc/field-name) :name (fc/field-name)
:value (fc/field-value)})])) :value (fc/field-value)})]))
(com/field (-> {:label "Amount" (com/field (-> {:label "Amount"
:x-show "amountFilter"} :x-show "amountFilter"}
hx/alpine-appear) hx/alpine-appear)
@@ -557,7 +554,6 @@
(com/data-grid-cell {:colspan 4 (com/data-grid-cell {:colspan 4
:class "bg-gray-100"} :class "bg-gray-100"}
[:div.flex.justify-center [:div.flex.justify-center
(com/a-button {:hx-get (bidi/path-for ssr-routes/only-routes (com/a-button {:hx-get (bidi/path-for ssr-routes/only-routes
:admin-transaction-rule-new-account) :admin-transaction-rule-new-account)
:color :secondary :color :secondary
@@ -583,7 +579,9 @@
[:div#form-errors (when (:errors fc/*form-errors*) [:div#form-errors (when (:errors fc/*form-errors*)
[:span.error-content [:span.error-content
(com/errors {:errors (:errors fc/*form-errors*)})])] (com/errors {:errors (:errors fc/*form-errors*)})])]
(com/button {:color :primary :form "edit-form" :type "submit" :class "w-32"} (com/button {:color :primary :form "edit-form" :type "submit" :class (cond-> "w-32"
(seq form-errors) (->
(hh/add-class "animate-shake")))}
"Save")])]] "Save")])]]
[:div]))) [:div])))

6
src/clj/auto_ap/ssr/components/inputs.clj
View File

@@ -80,7 +80,10 @@ c.clearChoices();
:active 0 :active 0
:elements (if (:value params) :elements (if (:value params)
[{:value ((:value-fn params first) (:value params)) :label ((:content-fn params second) (:value params))}] [{:value ((:value-fn params first) (:value params)) :label ((:content-fn params second) (:value params))}]
[])})} [])})
:x-modelable "value.value"
:x-model (:x-model params)
}
[:a {:class (-> (hh/add-class (or (:class params) "") default-input-classes) [:a {:class (-> (hh/add-class (or (:class params) "") default-input-classes)
(hh/add-class "cursor-pointer")) (hh/add-class "cursor-pointer"))
"@click.prevent" "open = !open;" "@click.prevent" "open = !open;"
@@ -95,6 +98,7 @@ c.clearChoices();
(dissoc :content-fn) (dissoc :content-fn)
(dissoc :placeholder) (dissoc :placeholder)
(dissoc :x-model)
(assoc (assoc
"x-ref" "hidden" "x-ref" "hidden"
:type "hidden" :type "hidden"

16
tailwind.config.js
View File

@@ -5,6 +5,22 @@ module.exports = {
"./node_modules/flowbite/**/*.js"], "./node_modules/flowbite/**/*.js"],
theme: { theme: {
extend: { extend: {
"keyframes": {
shake: {
'0%': { transform: 'translateX(0px)' },
'12.5%': { transform: 'translateX(-5px)' },
'25%': { transform: 'translateX(0px)' },
'37.5%': { transform: 'translateX(5px)' },
'50%': { transform: 'translateX(0px)' },
'62.5%': { transform: 'translateX(-5px)' },
'75%': { transform: 'translateX(5px)' },
'87.5%': { transform: 'translateX(5px)' },
'100%': { transform: 'translateX(0px)' },
},
},
animation: {
'shake': 'shake 0.5s ease-out 1',
},
"fontFamily": { "fontFamily": {
"sans": ["Calibri", "ui-sans-serif", "system-ui", "-apple-system", "BlinkMacSystemFont", "Segoe UI", "Roboto", "Helvetica Neue", "Arial", "Noto Sans", "sans-serif", "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"] "sans": ["Calibri", "ui-sans-serif", "system-ui", "-apple-system", "BlinkMacSystemFont", "Segoe UI", "Roboto", "Helvetica Neue", "Arial", "Noto Sans", "sans-serif", "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"]