enhance(ui): add trigger as to shui

deps/shui/src/logseq/shui/base/core.cljs

@@ -5,6 +5,20 @@
 (def button-base (util/lsui-wrap "Button" {:static? false}))
 (def link (util/lsui-wrap "Link"))
 
+(defn trigger-as
+  ([as & props-or-children]
+   (let [[props children] [(first props-or-children) (rest props-or-children)]
+         props' (cond->
+                 {:on-key-down #(case (.-key %)
+                                  (" " "Enter")
+                                  (do (some-> (.-target %) (.click))
+                                      (.preventDefault %))
+                                  :dune)}
+                 (map? props)
+                 (merge props))
+         children (if (map? props) children (cons props children))]
+     [as props' children])))
+
 ;; Note: don't define component with rum/defc
 ;; to be compatible for the radix as-child option
 (defn button

deps/shui/src/logseq/shui/ui.cljs

@@ -11,6 +11,7 @@
 
 (def button base-core/button)
 (def link base-core/link)
+(def trigger-as base-core/trigger-as)
 (def tabler-icon icon-v2/root)
 
 (def alert (util/lsui-wrap "Alert"))

src/main/frontend/components/page.cljs

@@ -136,17 +136,15 @@
         [:div.flex.flex-row.items-center.mr-2.ml-1 {:style {:height 24}}
          [:span.bullet-container.cursor
           [:span.bullet]]]
-        [:div.flex.flex-1 {:tabIndex 0
-                           :on-key-press (fn [e]
-                                           (when (= "Enter" (util/ekey e))
-                                             (click-handler-fn)))
-                           :on-click click-handler-fn
-                           :on-drag-enter #(set-hover! true)
-                           :on-drag-over #(util/stop %)
-                           :on-drop drop-handler-fn
-                           :on-drag-leave #(set-hover! false)}
-         [:span.opacity-70
-          "Click here to edit..."]]]])))
+        (shui/trigger-as :div.flex.flex-1
+          {:tabIndex 0
+           :on-click click-handler-fn
+           :on-drag-enter #(set-hover! true)
+           :on-drag-over #(util/stop %)
+           :on-drop drop-handler-fn
+           :on-drag-leave #(set-hover! false)}
+          [:span.opacity-70
+           "Click here to edit..."])]])))
 
 (rum/defc add-button
   [args]

src/main/frontend/components/property.cljs

@@ -186,19 +186,6 @@
                   :disabled    false}
                  (svg/info)))]))
 
-(defn trigger-as
-  ([as & props-or-children]
-   (let [[props children] [(first props-or-children) (rest props-or-children)]
-         props (cond->
-                 {:on-key-down #(case (.-key %)
-                                  (" " "Enter")
-                                  (do (some-> (.-target %) (.click))
-                                      (.preventDefault %))
-                                  :dune)}
-                 (map? props)
-                 (merge props))]
-     [as props children])))
-
 (rum/defcs ^:large-vars/cleanup-todo property-config
   "All changes to a property must update the db and the *property-schema. Failure to do
    so can result in data loss"
@@ -592,7 +579,7 @@
                                                                                  (:block/uuid property)
                                                                                  {:properties {icon-property-id icon}})]
                                   (shui/popup-hide! id)))))}))]
-       (trigger-as :button
+       (shui/trigger-as :button
          (-> (when-not config/publishing?
                {:on-click #(shui/popup-show! (.-target %) content-fn {:as-dropdown? true :auto-focus? true})})
            (assoc :class "flex items-center"))
@@ -606,7 +593,7 @@
         {:on-click #(route-handler/redirect-to-page! (:block/name property))}
         (:block/original-name property)]
 
-       (trigger-as :a
+       (shui/trigger-as :a
          {:tabIndex 0
           :title (str "Configure property: " (:block/original-name property))
           :class "property-k flex select-none jtrigger pl-2"