enhance: use radix checkbox globally

src/main/frontend/components/block.cljs

@@ -1889,7 +1889,7 @@
     (when class
       (ui/checkbox {:class class
                     :style {:margin-right 5}
-                    :checked checked?
+                    :value checked?
                     :on-mouse-down (fn [e]
                                      (util/stop-propagation e))
                     :on-change (fn [_e]
@@ -1901,7 +1901,7 @@
   [config checked?]
   (ui/checkbox
    {:style {:margin-right 6}
-    :checked checked?
+    :value checked?
     :on-change (fn [event]
                  (let [target (.-target event)
                        block (:block config)

src/main/frontend/components/encryption.cljs

@@ -14,7 +14,7 @@
   [*show-password?]
   [:div.flex.flex-row.items-center
    [:label.px-1 {:for "show-password"}
-    (ui/checkbox {:checked   @*show-password?
+    (ui/checkbox {:value @*show-password?
                   :on-change (fn [e]
                                (reset! *show-password? (util/echecked? e)))
                   :id        "show-password"})

src/main/frontend/components/export.cljs

@@ -212,7 +212,7 @@
           [:div.flex.items-center
            (ui/checkbox {:class "mr-2"
                          :style {:visibility (if (#{:text :html :opml} tp) "visible" "hidden")}
-                         :checked (contains? @*text-remove-options :page-ref)
+                         :value (contains? @*text-remove-options :page-ref)
                          :on-change (fn [e]
                                       (state/update-export-block-text-remove-options! e :page-ref)
                                       (reset! *text-remove-options (state/get-export-block-text-remove-options))
@@ -222,7 +222,7 @@
 
            (ui/checkbox {:class "mr-2 ml-4"
                          :style {:visibility (if (#{:text :html :opml} tp) "visible" "hidden")}
-                         :checked (contains? @*text-remove-options :emphasis)
+                         :value (contains? @*text-remove-options :emphasis)
                          :on-change (fn [e]
                                       (state/update-export-block-text-remove-options! e :emphasis)
                                       (reset! *text-remove-options (state/get-export-block-text-remove-options))
@@ -233,7 +233,7 @@
 
            (ui/checkbox {:class "mr-2 ml-4"
                          :style {:visibility (if (#{:text :html :opml} tp) "visible" "hidden")}
-                         :checked (contains? @*text-remove-options :tag)
+                         :value (contains? @*text-remove-options :tag)
                          :on-change (fn [e]
                                       (state/update-export-block-text-remove-options! e :tag)
                                       (reset! *text-remove-options (state/get-export-block-text-remove-options))
@@ -245,7 +245,7 @@
           [:div.flex.items-center
            (ui/checkbox {:class "mr-2"
                          :style {:visibility (if (#{:text} tp) "visible" "hidden")}
-                         :checked (boolean (:newline-after-block @*text-other-options))
+                         :value (boolean (:newline-after-block @*text-other-options))
                          :on-change (fn [e]
                                       (state/update-export-block-text-other-options!
                                        :newline-after-block (boolean (util/echecked? e)))
@@ -256,7 +256,7 @@
 
            (ui/checkbox {:class "mr-2 ml-4"
                          :style {:visibility (if (#{:text} tp) "visible" "hidden")}
-                         :checked (contains? @*text-remove-options :property)
+                         :value (contains? @*text-remove-options :property)
                          :on-change (fn [e]
                                       (state/update-export-block-text-remove-options! e :property)
                                       (reset! *text-remove-options (state/get-export-block-text-remove-options))

src/main/frontend/components/page.cljs

@@ -981,15 +981,16 @@
         indeterminate? (boolean (:indeterminate opts))]
 
     (rum/use-effect!
-      #(set! (.-indeterminate (rum/deref *input)) indeterminate?)
-      [indeterminate?])
+     #(set! (.-indeterminate (rum/deref *input)) indeterminate?)
+     [indeterminate?])
 
     [:label {:for key}
-     [:input.form-checkbox
-      (merge {:type    "checkbox"
-              :checked (boolean checked)
-              :ref     *input
-              :id      key} opts)]]))
+     (ui/checkbox
+      (merge
+       {:checked (boolean checked)
+        :ref     *input
+        :id      key}
+       opts))]))
 
 (rum/defc sortable-title
   [title key by-item desc?]

src/main/frontend/components/plugins.cljs

@@ -903,7 +903,7 @@
            [:label.flex-1
             {:for k}
             (ui/checkbox {:id        k
-                          :checked   c?
+                          :value     c?
                           :on-change (fn [^js e]
                                        (when-not downloading?
                                          (state/set-unchecked-update (:id it) (not (util/echecked? e)))))})

src/main/frontend/components/property/value.cljs

@@ -635,13 +635,12 @@
         :checkbox
         (let [add-property! (fn []
                               (<add-property! block (:block/original-name property) (boolean (not value))))]
-          (ui/checkbox {:tabIndex "0"
-                        :class "jtrigger"
-                        :checked value
-                        :on-change (fn [_e] (add-property!))
-                        :on-key-down (fn [e]
-                                       (when (= (util/ekey e) "Enter")
-                                         (add-property!)))}))
+          (shui/checkbox {:class "jtrigger"
+                          :checked value
+                          :on-checked-change add-property!
+                          :on-key-down (fn [e]
+                                         (when (= (util/ekey e) "Enter")
+                                           (add-property!)))}))
         ;; :others
         [:div.flex.flex-1 {:ref #(when-not @*ref (reset! *ref %))}
          (if editing?

src/main/frontend/components/select.cljs

@@ -23,11 +23,9 @@
                                     (:value result)) result)
         selected-choices (rum/react *selected-choices)]
     [:div.flex.flex-row.justify-between.w-full {:class (when chosen? "chosen")}
-     [:span
+     [:div.flex.flex-row.items-center.gap-1
       (when multiple-choices?
         (ui/checkbox {:checked (boolean (selected-choices (:value result)))
-                      :style {:margin-right 4}
-                      :readOnly true
                       :on-click (fn [e]
                                   (.preventDefault e))}))
       value]

src/main/frontend/components/server.cljs

@@ -99,11 +99,10 @@
 
      [:p.py-3.px-1
       [:label.flex.space-x-2.items-center
-       [:input.form-checkbox
-        {:type      "checkbox"
-         :on-change #(let [checked (.-checked (.-target %))]
+       (ui/checkbox
+        {:on-change #(let [checked (.-checked (.-target %))]
                        (swap! *configs assoc :autostart checked))
-         :checked   (not (false? autostart))}]
+         :value     (not (false? autostart))})
 
        [:strong.select-none "Auto start server with the app launched"]]]
 

src/main/frontend/components/whiteboard.cljs

@@ -172,7 +172,7 @@
       {:tab-index -1
        :style {:visibility (when show-checked? "visible")}
        :on-click util/stop-propagation}
-      (ui/checkbox {:checked checked
+      (ui/checkbox {:value checked
                     :on-change (fn [] (on-checked-change (not checked)))})]]
     [:div.flex.w-full.opacity-50
      [:div (get-page-human-update-time page-name)]

src/main/frontend/ui.cljs

@@ -365,8 +365,13 @@
 
 (defn checkbox
   [option]
-  [:input.form-checkbox.h-4.w-4.transition.duration-150.ease-in-out
-   (merge {:type "checkbox" :disabled config/publishing?} option)])
+  (let [on-change (:on-change option)
+        option (cond-> (dissoc option :on-change)
+                 on-change
+                 (assoc :on-checked-change on-change))]
+    (shui/checkbox
+     (merge option
+            {:disabled (or (:disabled option) config/publishing?)}))))
 
 (defn main-node
   []
@@ -712,7 +717,7 @@
          [:label.sublabel
           (when sub-checkbox?
             (checkbox
-             {:default-value false
+             {:checked false
               :on-change     (fn [e]
                                (let [checked (.. e -target -checked)]
                                  (reset! *sub-checkbox-selected [checked])))}))