mirror of https://github.com/logseq/logseq
chore(ui): update shui demo
charlie
parent
f1f7d6810b
commit
1a9ad96ad9
|
|
@ -227,254 +227,259 @@
|
|||
|
||||
|
||||
(rum/defc page []
|
||||
[:div.sm:p-10
|
||||
[:hr]
|
||||
[:input
|
||||
{:type "checkbox" :on-change #(js/console.log "===>> onChange:" % (.-value (.-target %)))}]
|
||||
(ui/checkbox {:on-click
|
||||
(fn [^js e] (js/console.log "==>> click:"
|
||||
(set! (. (.-target e) -checked) (.-state (.-dataset (.-target e))) )
|
||||
(.-checked (.-target e))
|
||||
))
|
||||
:on-checked-change #(js/console.log "==>> on checked change:" %)
|
||||
} "abc")
|
||||
(ui/tooltip-provider
|
||||
[:div.sm:p-10
|
||||
[:hr]
|
||||
[:input
|
||||
{:type "checkbox" :on-change #(js/console.log "===>> onChange:" % (.-value (.-target %)))}]
|
||||
(ui/checkbox {:on-click
|
||||
(fn [^js e] (js/console.log "==>> click:"
|
||||
(set! (. (.-target e) -checked) (.-state (.-dataset (.-target e))))
|
||||
(.-checked (.-target e))
|
||||
))
|
||||
:on-checked-change #(js/console.log "==>> on checked change:" %)
|
||||
} "abc")
|
||||
|
||||
[:h1.text-3xl.font-bold "Logseq UI"]
|
||||
[:hr]
|
||||
[:h1.text-3xl.font-bold "Logseq UI"]
|
||||
[:hr]
|
||||
|
||||
;; Button
|
||||
(section-item "Button"
|
||||
[:div.flex.flex-row.flex-wrap.gap-2
|
||||
(let [[loading? set-loading!] (rum/use-state false)]
|
||||
;; Button
|
||||
(section-item "Button"
|
||||
[:div.flex.flex-row.flex-wrap.gap-2
|
||||
(let [[loading? set-loading!] (rum/use-state false)]
|
||||
(ui/button
|
||||
{:size :sm
|
||||
:on-click (fn []
|
||||
(set-loading! true)
|
||||
(js/setTimeout #(set-loading! false) 5000))
|
||||
:disabled loading?}
|
||||
(when loading?
|
||||
(ui/tabler-icon "loader2" {:class "animate-spin"}))
|
||||
"Logseq Classic Button"
|
||||
(ui/tabler-icon "arrow-right")))
|
||||
|
||||
(ui/button {:variant :outline :size :sm} "Outline")
|
||||
(ui/button {:variant :secondary :size :sm} "Secondary")
|
||||
(ui/button {:disabled true :size :sm} "Disabled")
|
||||
(ui/button {:variant :destructive :size :sm} "Destructive")
|
||||
(ui/button {:class "primary-green" :size :sm} "Custom (.primary-green)")
|
||||
(ui/button {:variant :ghost :size :sm} "Ghost")
|
||||
(ui/button {:variant :link :size :sm} "Link")
|
||||
(ui/button
|
||||
{:size :sm
|
||||
{:variant :icon
|
||||
:size :sm}
|
||||
[:a.flex.items-center.text-blue-rx-10.hover:text-blue-rx-10-alpha
|
||||
{:href "https://x.com/logseq" :target "_blank"}
|
||||
(ui/tabler-icon "brand-twitter" {:size 15})]
|
||||
)])
|
||||
|
||||
;; Toast
|
||||
(section-item "Toast"
|
||||
[:div.flex.flex-row.flex-wrap.gap-2
|
||||
(ui/button
|
||||
{:size :md
|
||||
:variant :outline
|
||||
:on-click #(ui/toast!
|
||||
"Check for updates ..."
|
||||
(nth [:success :error :default :info :warning] (rand-int 3))
|
||||
{:title (if (odd? (js/Date.now)) "History of China" "")
|
||||
:duration 3000})}
|
||||
"Open random toast"
|
||||
(ui/tabler-icon "arrow-right"))
|
||||
|
||||
(ui/button
|
||||
{:variant :secondary
|
||||
:size :md
|
||||
:on-click (fn []
|
||||
(set-loading! true)
|
||||
(js/setTimeout #(set-loading! false) 5000))
|
||||
:disabled loading?}
|
||||
(when loading?
|
||||
(ui/tabler-icon "loader2" {:class "animate-spin"}))
|
||||
"Logseq Classic Button"
|
||||
(ui/tabler-icon "arrow-right")))
|
||||
(ui/toast!
|
||||
(fn [{:keys [id dismiss! update!]}]
|
||||
[:b.text-red-700
|
||||
[:div.flex.items-center.gap-2
|
||||
(ui/tabler-icon "info-circle")
|
||||
(str "#(" id ") ")
|
||||
(.toLocaleString (js/Date.))]
|
||||
[:div.flex.flex-row.gap-2
|
||||
(ui/button
|
||||
{:on-click #(dismiss! id) :size :sm}
|
||||
"x close")
|
||||
|
||||
(ui/button {:variant :outline :size :sm} "Outline")
|
||||
(ui/button {:variant :secondary :size :sm} "Secondary")
|
||||
(ui/button {:disabled true :size :sm} "Disabled")
|
||||
(ui/button {:variant :destructive :size :sm} "Destructive")
|
||||
(ui/button {:class "primary-green" :size :sm} "Custom (.primary-green)")
|
||||
(ui/button {:variant :ghost :size :sm} "Ghost")
|
||||
(ui/button {:variant :link :size :sm} "Link")
|
||||
(ui/button
|
||||
{:variant :icon
|
||||
:size :sm}
|
||||
[:a.flex.items-center.text-blue-rx-10.hover:text-blue-rx-10-alpha
|
||||
{:href "https://x.com/logseq" :target "_blank"}
|
||||
(ui/tabler-icon "brand-twitter" {:size 15})]
|
||||
)])
|
||||
(ui/button
|
||||
{:on-click #(update! {:title (js/Date.now)
|
||||
:action [:b (ui/button {:on-click (fn [] (ui/toast-dismiss!))} "clear all")]})
|
||||
:size :sm}
|
||||
"x update")]])
|
||||
:default
|
||||
{:duration 3000 :onDismiss #(js/console.log "===>> dismiss?:" %1)}))}
|
||||
(ui/tabler-icon "apps")
|
||||
"Toast callback handle")
|
||||
|
||||
;; Toast
|
||||
(section-item "Toast"
|
||||
[:div.flex.flex-row.flex-wrap.gap-2
|
||||
(ui/button
|
||||
{:size :md
|
||||
:variant :outline
|
||||
:on-click #(ui/toast!
|
||||
"Check for updates ..."
|
||||
(nth [:success :error :default :info :warning] (rand-int 3))
|
||||
{:title (if (odd? (js/Date.now)) "History of China" "")
|
||||
:duration 3000})}
|
||||
"Open random toast"
|
||||
(ui/tabler-icon "arrow-right"))
|
||||
(ui/button
|
||||
{:on-click #(ui/toast! "A message from SoundCloud..."
|
||||
{:class "text-orange-rx-10"
|
||||
:icon [:b.pl-1 (ui/tabler-icon "brand-soundcloud" {:size 20})]
|
||||
:duration 3000})
|
||||
:class "primary-orange"
|
||||
:size :md}
|
||||
"Custom icon")])
|
||||
|
||||
(ui/button
|
||||
{:variant :secondary
|
||||
:size :md
|
||||
:on-click (fn []
|
||||
(ui/toast!
|
||||
(fn [{:keys [id dismiss! update!]}]
|
||||
[:b.text-red-700
|
||||
[:div.flex.items-center.gap-2
|
||||
(ui/tabler-icon "info-circle")
|
||||
(str "#(" id ") ")
|
||||
(.toLocaleString (js/Date.))]
|
||||
[:div.flex.flex-row.gap-2
|
||||
(ui/button
|
||||
{:on-click #(dismiss! id) :size :sm}
|
||||
"x close")
|
||||
[:div.flex.flex-row.space-x-16.items-center
|
||||
;; Tips
|
||||
(section-item "Tips"
|
||||
[:div.flex.flex-row.flex-wrap.gap-2
|
||||
(ui/tooltip-provider
|
||||
(ui/tooltip
|
||||
(ui/tooltip-trigger
|
||||
(ui/button
|
||||
{:variant :outline
|
||||
:on-click #(dialog-core/open! [:h1.text-9xl.text-center.scale-110 "🍄"])}
|
||||
"Tip for hint?"))
|
||||
(ui/tooltip-content
|
||||
{:class "w-42 px-8 py-4 text-xl border-green-rx-08 bg-green-rx-07-alpha"}
|
||||
"🍄")))])
|
||||
;; Avatar
|
||||
(section-item "Avatar"
|
||||
[:div.flex.flex-row.space-x-6.items-center
|
||||
(ui/avatar
|
||||
(ui/avatar-image {:src "https://avatars.githubusercontent.com/u/63385289?s=200&v=4"})
|
||||
(ui/avatar-fallback "L"))
|
||||
(ui/avatar
|
||||
(ui/avatar-fallback "CH"))])]
|
||||
|
||||
(ui/button
|
||||
{:on-click #(update! {:title (js/Date.now)
|
||||
:action [:b (ui/button {:on-click (fn [] (ui/toast-dismiss!))} "clear all")]})
|
||||
:size :sm}
|
||||
"x update")]])
|
||||
:default
|
||||
{:duration 3000 :onDismiss #(js/console.log "===>> dismiss?:" %1)}))}
|
||||
(ui/tabler-icon "apps")
|
||||
"Toast callback handle")
|
||||
;; Badge
|
||||
(section-item "Badge"
|
||||
[:div.flex.flex-row.flex-wrap.gap-2
|
||||
(ui/badge "Default")
|
||||
(ui/badge {:variant :outline} "Outline")
|
||||
(ui/badge {:variant :secondary} "Secondary")
|
||||
(ui/badge {:variant :destructive} "Destructive")
|
||||
(ui/badge {:class "primary-yellow"} "Custom (.primary-yellow)")])
|
||||
|
||||
(ui/button
|
||||
{:on-click #(ui/toast! "A message from SoundCloud..."
|
||||
{:class "text-orange-rx-10"
|
||||
:icon [:b.pl-1 (ui/tabler-icon "brand-soundcloud" {:size 20})]
|
||||
:duration 3000})
|
||||
:class "primary-orange"
|
||||
:size :md}
|
||||
"Custom icon")])
|
||||
[:div.grid.sm:grid-cols-3.sm:gap-8
|
||||
;; Dropdown
|
||||
(section-item "Dropdown"
|
||||
(ui/dropdown-menu
|
||||
(ui/tooltip
|
||||
(ui/tooltip-trigger
|
||||
(ui/dropdown-menu-trigger
|
||||
{:as-child true}
|
||||
(ui/button {:variant :outline}
|
||||
(ui/tabler-icon "list") "Open dropdown menu")))
|
||||
(ui/tooltip-content "test hide?"))
|
||||
|
||||
[:div.flex.flex-row.space-x-16.items-center
|
||||
;; Tips
|
||||
(section-item "Tips"
|
||||
[:div.flex.flex-row.flex-wrap.gap-2
|
||||
(ui/tooltip-provider
|
||||
(ui/tooltip
|
||||
(ui/tooltip-trigger
|
||||
(ui/button
|
||||
{:variant :outline
|
||||
:on-click #(dialog-core/open! [:h1.text-9xl.text-center.scale-110 "🍄"])}
|
||||
"Tip for hint?"))
|
||||
(ui/tooltip-content
|
||||
{:class "w-42 px-8 py-4 text-xl border-green-rx-08 bg-green-rx-07-alpha"}
|
||||
"🍄")))])
|
||||
;; Avatar
|
||||
(section-item "Avatar"
|
||||
[:div.flex.flex-row.space-x-6.items-center
|
||||
(ui/avatar
|
||||
(ui/avatar-image {:src "https://avatars.githubusercontent.com/u/63385289?s=200&v=4"})
|
||||
(ui/avatar-fallback "L"))
|
||||
(ui/avatar
|
||||
(ui/avatar-fallback "CH"))])]
|
||||
(sample-dropdown-menu-content)))
|
||||
|
||||
;; Badge
|
||||
(section-item "Badge"
|
||||
[:div.flex.flex-row.flex-wrap.gap-2
|
||||
(ui/badge "Default")
|
||||
(ui/badge {:variant :outline} "Outline")
|
||||
(ui/badge {:variant :secondary} "Secondary")
|
||||
(ui/badge {:variant :destructive} "Destructive")
|
||||
(ui/badge {:class "primary-yellow"} "Custom (.primary-yellow)")])
|
||||
;; Context menu
|
||||
[:div.col-span-2
|
||||
(section-item "Context Menu"
|
||||
(sample-context-menu-content))]]
|
||||
|
||||
[:div.grid.sm:grid-cols-3.sm:gap-8
|
||||
;; Dropdown
|
||||
(section-item "Dropdown"
|
||||
(ui/dropdown-menu
|
||||
(ui/dropdown-menu-trigger
|
||||
{:as-child true}
|
||||
(ui/button {:variant :outline}
|
||||
(ui/tabler-icon "list") "Open dropdown menu"))
|
||||
(sample-dropdown-menu-content)))
|
||||
;; Dialog
|
||||
(section-item "Dialog"
|
||||
[:div.flex.flex-row.flex-wrap.gap-2
|
||||
(sample-dialog-basic)
|
||||
(ui/button
|
||||
{:on-click #(dialog-core/open! "a modal dialog from `open!`" {:title "Title"})}
|
||||
"Imperative API: open!")
|
||||
|
||||
;; Context menu
|
||||
[:div.col-span-2
|
||||
(section-item "Context Menu"
|
||||
(sample-context-menu-content))]]
|
||||
(ui/button
|
||||
{:class "primary-yellow"
|
||||
:on-click (fn []
|
||||
(-> (dialog-core/alert!
|
||||
"a alert dialog from `alert!`"
|
||||
{:title [:div.flex.flex-row.space-x-2.items-center
|
||||
(ui/tabler-icon "alert-triangle" {:size 18})
|
||||
[:span "Alert"]]})
|
||||
(p/then #(js/console.log "=> alert (promise): " %))))}
|
||||
"Imperative API: alert!")
|
||||
|
||||
;; Dialog
|
||||
(section-item "Dialog"
|
||||
[:div.flex.flex-row.flex-wrap.gap-2
|
||||
(sample-dialog-basic)
|
||||
(ui/button
|
||||
{:on-click #(dialog-core/open! "a modal dialog from `open!`" {:title "Title"})}
|
||||
"Imperative API: open!")
|
||||
(ui/button
|
||||
{:class "primary-green"
|
||||
:on-click (fn []
|
||||
(-> (dialog-core/confirm!
|
||||
"a alert dialog from `confirm!`"
|
||||
{:title [:div.flex.flex-row.space-x-2.items-center
|
||||
(ui/tabler-icon "alert-triangle" {:size 18})
|
||||
[:span "Confirm"]]})
|
||||
(p/then #(js/console.log "=> confirm (promise): " %))
|
||||
(p/catch #(js/console.log "=> confirm (promise): " %))))}
|
||||
"Imperative API: confirm!")])
|
||||
|
||||
(ui/button
|
||||
{:class "primary-yellow"
|
||||
:on-click (fn []
|
||||
(-> (dialog-core/alert!
|
||||
"a alert dialog from `alert!`"
|
||||
{:title [:div.flex.flex-row.space-x-2.items-center
|
||||
(ui/tabler-icon "alert-triangle" {:size 18})
|
||||
[:span "Alert"]]})
|
||||
(p/then #(js/console.log "=> alert (promise): " %))))}
|
||||
"Imperative API: alert!")
|
||||
;; Alert
|
||||
(section-item "Alert"
|
||||
[:<>
|
||||
(ui/alert
|
||||
{:class "text-orange-rx-09 border-orange-rx-07-alpha mb-4"}
|
||||
(ui/tabler-icon "brand-soundcloud")
|
||||
(ui/alert-title "Title is SoundCloud")
|
||||
(ui/alert-description
|
||||
"content: radix colors for Logseq"))
|
||||
(ui/alert
|
||||
(ui/tabler-icon "brand-github")
|
||||
(ui/alert-title "GitHub")
|
||||
(ui/alert-description
|
||||
"content: radix colors for Logseq"))])
|
||||
|
||||
(ui/button
|
||||
{:class "primary-green"
|
||||
:on-click (fn []
|
||||
(-> (dialog-core/confirm!
|
||||
"a alert dialog from `confirm!`"
|
||||
{:title [:div.flex.flex-row.space-x-2.items-center
|
||||
(ui/tabler-icon "alert-triangle" {:size 18})
|
||||
[:span "Confirm"]]})
|
||||
(p/then #(js/console.log "=> confirm (promise): " %))
|
||||
(p/catch #(js/console.log "=> confirm (promise): " %))))}
|
||||
"Imperative API: confirm!")])
|
||||
;; Slider
|
||||
[:div.grid.sm:grid-cols-8.gap-4
|
||||
[:div.col-span-4.mr-6
|
||||
(section-item "Slider" (ui/slider))]
|
||||
[:div.col-span-1
|
||||
(section-item "Switch"
|
||||
(ui/switch {:size :sm :class "relative top-[-8px]"}))]
|
||||
[:div.col-span-3.pl-4.pr-2
|
||||
(section-item "Select"
|
||||
(ui/select
|
||||
{:on-value-change (fn [v] (ui/toast! v :info))}
|
||||
;; trigger
|
||||
(ui/select-trigger
|
||||
(ui/select-value {:placeholder "Select a fruit"}))
|
||||
;; content
|
||||
(ui/select-content
|
||||
(ui/select-group
|
||||
(ui/select-label "Fruits")
|
||||
(ui/select-item {:value "apple"} "Apple")
|
||||
(ui/select-item {:value "pear"} "Pear")
|
||||
(ui/select-item {:value "grapes"} "Grapes")
|
||||
|
||||
;; Alert
|
||||
(section-item "Alert"
|
||||
[:<>
|
||||
(ui/alert
|
||||
{:class "text-orange-rx-09 border-orange-rx-07-alpha mb-4"}
|
||||
(ui/tabler-icon "brand-soundcloud")
|
||||
(ui/alert-title "Title is SoundCloud")
|
||||
(ui/alert-description
|
||||
"content: radix colors for Logseq"))
|
||||
(ui/alert
|
||||
(ui/tabler-icon "brand-github")
|
||||
(ui/alert-title "GitHub")
|
||||
(ui/alert-description
|
||||
"content: radix colors for Logseq"))])
|
||||
))))]]
|
||||
|
||||
;; Slider
|
||||
[:div.grid.sm:grid-cols-8.gap-4
|
||||
[:div.col-span-4.mr-6
|
||||
(section-item "Slider" (ui/slider))]
|
||||
[:div.col-span-1
|
||||
(section-item "Switch"
|
||||
(ui/switch {:size :sm :class "relative top-[-8px]"}))]
|
||||
[:div.col-span-3.pl-4.pr-2
|
||||
(section-item "Select"
|
||||
(ui/select
|
||||
{:on-value-change (fn [v] (ui/toast! v :info))}
|
||||
;; trigger
|
||||
(ui/select-trigger
|
||||
(ui/select-value {:placeholder "Select a fruit"}))
|
||||
;; content
|
||||
(ui/select-content
|
||||
(ui/select-group
|
||||
(ui/select-label "Fruits")
|
||||
(ui/select-item {:value "apple"} "Apple")
|
||||
(ui/select-item {:value "pear"} "Pear")
|
||||
(ui/select-item {:value "grapes"} "Grapes")
|
||||
;; Form
|
||||
(section-item "Form"
|
||||
[:<>
|
||||
(sample-form-basic)])
|
||||
|
||||
))))]]
|
||||
;; Card
|
||||
[:div.grid.sm:grid-cols-2.sm:gap-8
|
||||
(section-item "Card"
|
||||
(ui/card
|
||||
(ui/card-header
|
||||
(ui/card-title "Title")
|
||||
(ui/card-description "Description"))
|
||||
(ui/card-content "This is content")
|
||||
(ui/card-footer "Footer")))
|
||||
|
||||
;; Form
|
||||
(section-item "Form"
|
||||
[:<>
|
||||
(sample-form-basic)])
|
||||
(section-item "Skeleton"
|
||||
(ui/card
|
||||
(ui/card-header
|
||||
(ui/card-title
|
||||
(ui/skeleton {:class "h-4 w-1/2"}))
|
||||
(ui/card-description
|
||||
(ui/skeleton {:class "h-2 w-full"})))
|
||||
(ui/card-content
|
||||
(ui/skeleton {:class "h-3 mb-1"})
|
||||
(ui/skeleton {:class "h-3 mb-1"})
|
||||
(ui/skeleton {:class "h-3 w-2/3"}))
|
||||
|
||||
;; Card
|
||||
[:div.grid.sm:grid-cols-2.sm:gap-8
|
||||
(section-item "Card"
|
||||
(ui/card
|
||||
(ui/card-header
|
||||
(ui/card-title "Title")
|
||||
(ui/card-description "Description"))
|
||||
(ui/card-content "This is content")
|
||||
(ui/card-footer "Footer")))
|
||||
(ui/card-footer
|
||||
(ui/skeleton {:class "h-4 w-full mb-2"}))))]
|
||||
|
||||
(section-item "Skeleton"
|
||||
(ui/card
|
||||
(ui/card-header
|
||||
(ui/card-title
|
||||
(ui/skeleton {:class "h-4 w-1/2"}))
|
||||
(ui/card-description
|
||||
(ui/skeleton {:class "h-2 w-full"})))
|
||||
(ui/card-content
|
||||
(ui/skeleton {:class "h-3 mb-1"})
|
||||
(ui/skeleton {:class "h-3 mb-1"})
|
||||
(ui/skeleton {:class "h-3 w-2/3"}))
|
||||
;; Calendar
|
||||
[:div.grid.sm:grid-cols-2.sm:gap-8
|
||||
(section-item "Calendar"
|
||||
(ui/card
|
||||
{:class "inline-flex"}
|
||||
(ui/calendar {:on-day-click #(ui/toast! (.toString %) :success)})))
|
||||
(section-item "Date Picker"
|
||||
(sample-date-picker))]
|
||||
|
||||
(ui/card-footer
|
||||
(ui/skeleton {:class "h-4 w-full mb-2"}))))]
|
||||
|
||||
;; Calendar
|
||||
[:div.grid.sm:grid-cols-2.sm:gap-8
|
||||
(section-item "Calendar"
|
||||
(ui/card
|
||||
{:class "inline-flex"}
|
||||
(ui/calendar {:on-day-click #(ui/toast! (.toString %) :success)})))
|
||||
(section-item "Date Picker"
|
||||
(sample-date-picker))]
|
||||
|
||||
[:hr.mb-80]])
|
||||
[:hr.mb-80]]))
|
||||
|
|
|
|||
Loading…
Reference in New Issue