update dioxus to 0.5
This commit is contained in:
Plucky
1
.gitignore
vendored
1
.gitignore
vendored
@@ -2,3 +2,4 @@
|
|||||||
/logs
|
/logs
|
||||||
.stage
|
.stage
|
||||||
/dist
|
/dist
|
||||||
|
Cargo.lock
|
||||||
841
Cargo.lock
generated
841
Cargo.lock
generated
@@ -1,841 +0,0 @@
|
|||||||
# This file is automatically @generated by Cargo.
|
|
||||||
# It is not intended for manual editing.
|
|
||||||
version = 3
|
|
||||||
|
|
||||||
[[package]]
|
|
||||||
name = "addr2line"
|
|
||||||
version = "0.17.0"
|
|
||||||
source = "registry+https://github.com/rust-lang/crates.io-index"
|
|
||||||
checksum = "b9ecd88a8c8378ca913a680cd98f0f13ac67383d35993f86c90a70e3f137816b"
|
|
||||||
dependencies = [
|
|
||||||
"gimli",
|
|
||||||
]
|
|
||||||
|
|
||||||
[[package]]
|
|
||||||
name = "adler"
|
|
||||||
version = "1.0.2"
|
|
||||||
source = "registry+https://github.com/rust-lang/crates.io-index"
|
|
||||||
checksum = "f26201604c87b1e01bd3d98f8d5d9a8fcbb815e8cedb41ffccbeb4bf593a35fe"
|
|
||||||
|
|
||||||
[[package]]
|
|
||||||
name = "anyhow"
|
|
||||||
version = "1.0.65"
|
|
||||||
source = "registry+https://github.com/rust-lang/crates.io-index"
|
|
||||||
checksum = "98161a4e3e2184da77bb14f02184cdd111e83bbbcc9979dfee3c44b9a85f5602"
|
|
||||||
|
|
||||||
[[package]]
|
|
||||||
name = "autocfg"
|
|
||||||
version = "1.1.0"
|
|
||||||
source = "registry+https://github.com/rust-lang/crates.io-index"
|
|
||||||
checksum = "d468802bab17cbc0cc575e9b053f41e72aa36bfa6b7f55e3529ffa43161b97fa"
|
|
||||||
|
|
||||||
[[package]]
|
|
||||||
name = "backtrace"
|
|
||||||
version = "0.3.66"
|
|
||||||
source = "registry+https://github.com/rust-lang/crates.io-index"
|
|
||||||
checksum = "cab84319d616cfb654d03394f38ab7e6f0919e181b1b57e1fd15e7fb4077d9a7"
|
|
||||||
dependencies = [
|
|
||||||
"addr2line",
|
|
||||||
"cc",
|
|
||||||
"cfg-if",
|
|
||||||
"libc",
|
|
||||||
"miniz_oxide",
|
|
||||||
"object",
|
|
||||||
"rustc-demangle",
|
|
||||||
]
|
|
||||||
|
|
||||||
[[package]]
|
|
||||||
name = "bitmaps"
|
|
||||||
version = "2.1.0"
|
|
||||||
source = "registry+https://github.com/rust-lang/crates.io-index"
|
|
||||||
checksum = "031043d04099746d8db04daf1fa424b2bc8bd69d92b25962dcde24da39ab64a2"
|
|
||||||
dependencies = [
|
|
||||||
"typenum",
|
|
||||||
]
|
|
||||||
|
|
||||||
[[package]]
|
|
||||||
name = "bumpalo"
|
|
||||||
version = "3.11.0"
|
|
||||||
source = "registry+https://github.com/rust-lang/crates.io-index"
|
|
||||||
checksum = "c1ad822118d20d2c234f427000d5acc36eabe1e29a348c89b63dd60b13f28e5d"
|
|
||||||
|
|
||||||
[[package]]
|
|
||||||
name = "byteorder"
|
|
||||||
version = "1.4.3"
|
|
||||||
source = "registry+https://github.com/rust-lang/crates.io-index"
|
|
||||||
checksum = "14c189c53d098945499cdfa7ecc63567cf3886b3332b312a5b4585d8d3a6a610"
|
|
||||||
|
|
||||||
[[package]]
|
|
||||||
name = "cc"
|
|
||||||
version = "1.0.73"
|
|
||||||
source = "registry+https://github.com/rust-lang/crates.io-index"
|
|
||||||
checksum = "2fff2a6927b3bb87f9595d67196a70493f627687a71d87a0d692242c33f58c11"
|
|
||||||
|
|
||||||
[[package]]
|
|
||||||
name = "cfg-if"
|
|
||||||
version = "1.0.0"
|
|
||||||
source = "registry+https://github.com/rust-lang/crates.io-index"
|
|
||||||
checksum = "baf1de4339761588bc0619e3cbc0120ee582ebb74b53b4efbf79117bd2da40fd"
|
|
||||||
|
|
||||||
[[package]]
|
|
||||||
name = "console_error_panic_hook"
|
|
||||||
version = "0.1.7"
|
|
||||||
source = "registry+https://github.com/rust-lang/crates.io-index"
|
|
||||||
checksum = "a06aeb73f470f66dcdbf7223caeebb85984942f22f1adb2a088cf9668146bbbc"
|
|
||||||
dependencies = [
|
|
||||||
"cfg-if",
|
|
||||||
"wasm-bindgen",
|
|
||||||
]
|
|
||||||
|
|
||||||
[[package]]
|
|
||||||
name = "dioxus"
|
|
||||||
version = "0.2.4"
|
|
||||||
source = "registry+https://github.com/rust-lang/crates.io-index"
|
|
||||||
checksum = "211119e0c96d2d0221ce1886b94aed18c41f7f9ccb23d0dc80fff5e919b2a1a2"
|
|
||||||
dependencies = [
|
|
||||||
"dioxus-core",
|
|
||||||
"dioxus-core-macro",
|
|
||||||
"dioxus-hooks",
|
|
||||||
"dioxus-html",
|
|
||||||
"dioxus-router",
|
|
||||||
"dioxus-web",
|
|
||||||
"fermi",
|
|
||||||
]
|
|
||||||
|
|
||||||
[[package]]
|
|
||||||
name = "dioxus-core"
|
|
||||||
version = "0.2.1"
|
|
||||||
source = "registry+https://github.com/rust-lang/crates.io-index"
|
|
||||||
checksum = "50fd75cb8f4752b122e3935eaa65b4c8c5c61dac2a305cb3d4c3422a01e0aee2"
|
|
||||||
dependencies = [
|
|
||||||
"backtrace",
|
|
||||||
"bumpalo",
|
|
||||||
"futures-channel",
|
|
||||||
"futures-util",
|
|
||||||
"fxhash",
|
|
||||||
"indexmap",
|
|
||||||
"log",
|
|
||||||
"longest-increasing-subsequence",
|
|
||||||
"once_cell",
|
|
||||||
"slab",
|
|
||||||
"smallvec",
|
|
||||||
]
|
|
||||||
|
|
||||||
[[package]]
|
|
||||||
name = "dioxus-core-macro"
|
|
||||||
version = "0.2.1"
|
|
||||||
source = "registry+https://github.com/rust-lang/crates.io-index"
|
|
||||||
checksum = "243fe485d0455d6f3645526970100a403fd037740af105cb5f175d8f4227baa6"
|
|
||||||
dependencies = [
|
|
||||||
"proc-macro-error",
|
|
||||||
"proc-macro2",
|
|
||||||
"quote",
|
|
||||||
"syn",
|
|
||||||
]
|
|
||||||
|
|
||||||
[[package]]
|
|
||||||
name = "dioxus-hooks"
|
|
||||||
version = "0.2.1"
|
|
||||||
source = "registry+https://github.com/rust-lang/crates.io-index"
|
|
||||||
checksum = "51ffbb5b87c3bcd32a5629b5bd7921b7a7c685eded345c32100574b4a4df7872"
|
|
||||||
dependencies = [
|
|
||||||
"dioxus-core",
|
|
||||||
"futures-channel",
|
|
||||||
"log",
|
|
||||||
]
|
|
||||||
|
|
||||||
[[package]]
|
|
||||||
name = "dioxus-html"
|
|
||||||
version = "0.2.1"
|
|
||||||
source = "registry+https://github.com/rust-lang/crates.io-index"
|
|
||||||
checksum = "c42fe33f30303e9acb0404e9c9aa61535ab50ad9e84f4809543881ee6a2b5abc"
|
|
||||||
dependencies = [
|
|
||||||
"dioxus-core",
|
|
||||||
"wasm-bindgen",
|
|
||||||
"web-sys",
|
|
||||||
]
|
|
||||||
|
|
||||||
[[package]]
|
|
||||||
name = "dioxus-html-macro"
|
|
||||||
version = "0.2.0"
|
|
||||||
source = "registry+https://github.com/rust-lang/crates.io-index"
|
|
||||||
checksum = "7bdf706b1c5dfbfd2940ff116d2ddd433776b81a1900e31ced5884dfc45c5b11"
|
|
||||||
dependencies = [
|
|
||||||
"dioxus",
|
|
||||||
"proc-macro2",
|
|
||||||
"quote",
|
|
||||||
"syn",
|
|
||||||
]
|
|
||||||
|
|
||||||
[[package]]
|
|
||||||
name = "dioxus-interpreter-js"
|
|
||||||
version = "0.2.1"
|
|
||||||
source = "registry+https://github.com/rust-lang/crates.io-index"
|
|
||||||
checksum = "7d78a436643ca61ca4f5dec869fb91318c72068a013d2d5e21f9960810453b47"
|
|
||||||
dependencies = [
|
|
||||||
"js-sys",
|
|
||||||
"wasm-bindgen",
|
|
||||||
"web-sys",
|
|
||||||
]
|
|
||||||
|
|
||||||
[[package]]
|
|
||||||
name = "dioxus-router"
|
|
||||||
version = "0.2.3"
|
|
||||||
source = "registry+https://github.com/rust-lang/crates.io-index"
|
|
||||||
checksum = "1d87ba54351495b657c291831de8f259be9616047f9e9826757788a43d3d2907"
|
|
||||||
dependencies = [
|
|
||||||
"dioxus-core",
|
|
||||||
"dioxus-core-macro",
|
|
||||||
"dioxus-html",
|
|
||||||
"futures-channel",
|
|
||||||
"futures-util",
|
|
||||||
"gloo-events",
|
|
||||||
"js-sys",
|
|
||||||
"log",
|
|
||||||
"serde",
|
|
||||||
"serde_urlencoded",
|
|
||||||
"thiserror",
|
|
||||||
"url",
|
|
||||||
"wasm-bindgen",
|
|
||||||
"web-sys",
|
|
||||||
]
|
|
||||||
|
|
||||||
[[package]]
|
|
||||||
name = "dioxus-web"
|
|
||||||
version = "0.2.1"
|
|
||||||
source = "registry+https://github.com/rust-lang/crates.io-index"
|
|
||||||
checksum = "61399ab0ebd255e3ad58c46cebc2a2db5d69a22af80bca68fe0a9aaf6480058f"
|
|
||||||
dependencies = [
|
|
||||||
"anyhow",
|
|
||||||
"console_error_panic_hook",
|
|
||||||
"dioxus-core",
|
|
||||||
"dioxus-html",
|
|
||||||
"dioxus-interpreter-js",
|
|
||||||
"futures-channel",
|
|
||||||
"futures-util",
|
|
||||||
"fxhash",
|
|
||||||
"gloo-timers",
|
|
||||||
"js-sys",
|
|
||||||
"log",
|
|
||||||
"once_cell",
|
|
||||||
"serde-wasm-bindgen",
|
|
||||||
"smallstr",
|
|
||||||
"wasm-bindgen",
|
|
||||||
"wasm-bindgen-futures",
|
|
||||||
"web-sys",
|
|
||||||
]
|
|
||||||
|
|
||||||
[[package]]
|
|
||||||
name = "fermi"
|
|
||||||
version = "0.2.1"
|
|
||||||
source = "registry+https://github.com/rust-lang/crates.io-index"
|
|
||||||
checksum = "aa3c170a3972c362a46622d09946b69c976c39832e24024c8efabe6073f8b995"
|
|
||||||
dependencies = [
|
|
||||||
"dioxus-core",
|
|
||||||
"im-rc",
|
|
||||||
"log",
|
|
||||||
]
|
|
||||||
|
|
||||||
[[package]]
|
|
||||||
name = "form_urlencoded"
|
|
||||||
version = "1.1.0"
|
|
||||||
source = "registry+https://github.com/rust-lang/crates.io-index"
|
|
||||||
checksum = "a9c384f161156f5260c24a097c56119f9be8c798586aecc13afbcbe7b7e26bf8"
|
|
||||||
dependencies = [
|
|
||||||
"percent-encoding",
|
|
||||||
]
|
|
||||||
|
|
||||||
[[package]]
|
|
||||||
name = "futures-channel"
|
|
||||||
version = "0.3.24"
|
|
||||||
source = "registry+https://github.com/rust-lang/crates.io-index"
|
|
||||||
checksum = "30bdd20c28fadd505d0fd6712cdfcb0d4b5648baf45faef7f852afb2399bb050"
|
|
||||||
dependencies = [
|
|
||||||
"futures-core",
|
|
||||||
]
|
|
||||||
|
|
||||||
[[package]]
|
|
||||||
name = "futures-core"
|
|
||||||
version = "0.3.24"
|
|
||||||
source = "registry+https://github.com/rust-lang/crates.io-index"
|
|
||||||
checksum = "4e5aa3de05362c3fb88de6531e6296e85cde7739cccad4b9dfeeb7f6ebce56bf"
|
|
||||||
|
|
||||||
[[package]]
|
|
||||||
name = "futures-macro"
|
|
||||||
version = "0.3.24"
|
|
||||||
source = "registry+https://github.com/rust-lang/crates.io-index"
|
|
||||||
checksum = "42cd15d1c7456c04dbdf7e88bcd69760d74f3a798d6444e16974b505b0e62f17"
|
|
||||||
dependencies = [
|
|
||||||
"proc-macro2",
|
|
||||||
"quote",
|
|
||||||
"syn",
|
|
||||||
]
|
|
||||||
|
|
||||||
[[package]]
|
|
||||||
name = "futures-task"
|
|
||||||
version = "0.3.24"
|
|
||||||
source = "registry+https://github.com/rust-lang/crates.io-index"
|
|
||||||
checksum = "a6508c467c73851293f390476d4491cf4d227dbabcd4170f3bb6044959b294f1"
|
|
||||||
|
|
||||||
[[package]]
|
|
||||||
name = "futures-util"
|
|
||||||
version = "0.3.24"
|
|
||||||
source = "registry+https://github.com/rust-lang/crates.io-index"
|
|
||||||
checksum = "44fb6cb1be61cc1d2e43b262516aafcf63b241cffdb1d3fa115f91d9c7b09c90"
|
|
||||||
dependencies = [
|
|
||||||
"futures-core",
|
|
||||||
"futures-macro",
|
|
||||||
"futures-task",
|
|
||||||
"pin-project-lite",
|
|
||||||
"pin-utils",
|
|
||||||
"slab",
|
|
||||||
]
|
|
||||||
|
|
||||||
[[package]]
|
|
||||||
name = "fxhash"
|
|
||||||
version = "0.2.1"
|
|
||||||
source = "registry+https://github.com/rust-lang/crates.io-index"
|
|
||||||
checksum = "c31b6d751ae2c7f11320402d34e41349dd1016f8d5d45e48c4312bc8625af50c"
|
|
||||||
dependencies = [
|
|
||||||
"byteorder",
|
|
||||||
]
|
|
||||||
|
|
||||||
[[package]]
|
|
||||||
name = "gimli"
|
|
||||||
version = "0.26.2"
|
|
||||||
source = "registry+https://github.com/rust-lang/crates.io-index"
|
|
||||||
checksum = "22030e2c5a68ec659fde1e949a745124b48e6fa8b045b7ed5bd1fe4ccc5c4e5d"
|
|
||||||
|
|
||||||
[[package]]
|
|
||||||
name = "gloo-events"
|
|
||||||
version = "0.1.2"
|
|
||||||
source = "registry+https://github.com/rust-lang/crates.io-index"
|
|
||||||
checksum = "68b107f8abed8105e4182de63845afcc7b69c098b7852a813ea7462a320992fc"
|
|
||||||
dependencies = [
|
|
||||||
"wasm-bindgen",
|
|
||||||
"web-sys",
|
|
||||||
]
|
|
||||||
|
|
||||||
[[package]]
|
|
||||||
name = "gloo-timers"
|
|
||||||
version = "0.2.4"
|
|
||||||
source = "registry+https://github.com/rust-lang/crates.io-index"
|
|
||||||
checksum = "5fb7d06c1c8cc2a29bee7ec961009a0b2caa0793ee4900c2ffb348734ba1c8f9"
|
|
||||||
dependencies = [
|
|
||||||
"futures-channel",
|
|
||||||
"futures-core",
|
|
||||||
"js-sys",
|
|
||||||
"wasm-bindgen",
|
|
||||||
]
|
|
||||||
|
|
||||||
[[package]]
|
|
||||||
name = "hashbrown"
|
|
||||||
version = "0.12.3"
|
|
||||||
source = "registry+https://github.com/rust-lang/crates.io-index"
|
|
||||||
checksum = "8a9ee70c43aaf417c914396645a0fa852624801b24ebb7ae78fe8272889ac888"
|
|
||||||
|
|
||||||
[[package]]
|
|
||||||
name = "idna"
|
|
||||||
version = "0.3.0"
|
|
||||||
source = "registry+https://github.com/rust-lang/crates.io-index"
|
|
||||||
checksum = "e14ddfc70884202db2244c223200c204c2bda1bc6e0998d11b5e024d657209e6"
|
|
||||||
dependencies = [
|
|
||||||
"unicode-bidi",
|
|
||||||
"unicode-normalization",
|
|
||||||
]
|
|
||||||
|
|
||||||
[[package]]
|
|
||||||
name = "im-rc"
|
|
||||||
version = "15.1.0"
|
|
||||||
source = "registry+https://github.com/rust-lang/crates.io-index"
|
|
||||||
checksum = "af1955a75fa080c677d3972822ec4bad316169ab1cfc6c257a942c2265dbe5fe"
|
|
||||||
dependencies = [
|
|
||||||
"bitmaps",
|
|
||||||
"rand_core",
|
|
||||||
"rand_xoshiro",
|
|
||||||
"serde",
|
|
||||||
"sized-chunks",
|
|
||||||
"typenum",
|
|
||||||
"version_check",
|
|
||||||
]
|
|
||||||
|
|
||||||
[[package]]
|
|
||||||
name = "indexmap"
|
|
||||||
version = "1.9.1"
|
|
||||||
source = "registry+https://github.com/rust-lang/crates.io-index"
|
|
||||||
checksum = "10a35a97730320ffe8e2d410b5d3b69279b98d2c14bdb8b70ea89ecf7888d41e"
|
|
||||||
dependencies = [
|
|
||||||
"autocfg",
|
|
||||||
"hashbrown",
|
|
||||||
]
|
|
||||||
|
|
||||||
[[package]]
|
|
||||||
name = "itoa"
|
|
||||||
version = "1.0.4"
|
|
||||||
source = "registry+https://github.com/rust-lang/crates.io-index"
|
|
||||||
checksum = "4217ad341ebadf8d8e724e264f13e593e0648f5b3e94b3896a5df283be015ecc"
|
|
||||||
|
|
||||||
[[package]]
|
|
||||||
name = "js-sys"
|
|
||||||
version = "0.3.60"
|
|
||||||
source = "registry+https://github.com/rust-lang/crates.io-index"
|
|
||||||
checksum = "49409df3e3bf0856b916e2ceaca09ee28e6871cf7d9ce97a692cacfdb2a25a47"
|
|
||||||
dependencies = [
|
|
||||||
"wasm-bindgen",
|
|
||||||
]
|
|
||||||
|
|
||||||
[[package]]
|
|
||||||
name = "lazy_static"
|
|
||||||
version = "1.4.0"
|
|
||||||
source = "registry+https://github.com/rust-lang/crates.io-index"
|
|
||||||
checksum = "e2abad23fbc42b3700f2f279844dc832adb2b2eb069b2df918f455c4e18cc646"
|
|
||||||
|
|
||||||
[[package]]
|
|
||||||
name = "libc"
|
|
||||||
version = "0.2.135"
|
|
||||||
source = "registry+https://github.com/rust-lang/crates.io-index"
|
|
||||||
checksum = "68783febc7782c6c5cb401fbda4de5a9898be1762314da0bb2c10ced61f18b0c"
|
|
||||||
|
|
||||||
[[package]]
|
|
||||||
name = "log"
|
|
||||||
version = "0.4.17"
|
|
||||||
source = "registry+https://github.com/rust-lang/crates.io-index"
|
|
||||||
checksum = "abb12e687cfb44aa40f41fc3978ef76448f9b6038cad6aef4259d3c095a2382e"
|
|
||||||
dependencies = [
|
|
||||||
"cfg-if",
|
|
||||||
]
|
|
||||||
|
|
||||||
[[package]]
|
|
||||||
name = "longest-increasing-subsequence"
|
|
||||||
version = "0.1.0"
|
|
||||||
source = "registry+https://github.com/rust-lang/crates.io-index"
|
|
||||||
checksum = "b3bd0dd2cd90571056fdb71f6275fada10131182f84899f4b2a916e565d81d86"
|
|
||||||
|
|
||||||
[[package]]
|
|
||||||
name = "memchr"
|
|
||||||
version = "2.5.0"
|
|
||||||
source = "registry+https://github.com/rust-lang/crates.io-index"
|
|
||||||
checksum = "2dffe52ecf27772e601905b7522cb4ef790d2cc203488bbd0e2fe85fcb74566d"
|
|
||||||
|
|
||||||
[[package]]
|
|
||||||
name = "miniz_oxide"
|
|
||||||
version = "0.5.4"
|
|
||||||
source = "registry+https://github.com/rust-lang/crates.io-index"
|
|
||||||
checksum = "96590ba8f175222643a85693f33d26e9c8a015f599c216509b1a6894af675d34"
|
|
||||||
dependencies = [
|
|
||||||
"adler",
|
|
||||||
]
|
|
||||||
|
|
||||||
[[package]]
|
|
||||||
name = "object"
|
|
||||||
version = "0.29.0"
|
|
||||||
source = "registry+https://github.com/rust-lang/crates.io-index"
|
|
||||||
checksum = "21158b2c33aa6d4561f1c0a6ea283ca92bc54802a93b263e910746d679a7eb53"
|
|
||||||
dependencies = [
|
|
||||||
"memchr",
|
|
||||||
]
|
|
||||||
|
|
||||||
[[package]]
|
|
||||||
name = "once_cell"
|
|
||||||
version = "1.15.0"
|
|
||||||
source = "registry+https://github.com/rust-lang/crates.io-index"
|
|
||||||
checksum = "e82dad04139b71a90c080c8463fe0dc7902db5192d939bd0950f074d014339e1"
|
|
||||||
|
|
||||||
[[package]]
|
|
||||||
name = "percent-encoding"
|
|
||||||
version = "2.2.0"
|
|
||||||
source = "registry+https://github.com/rust-lang/crates.io-index"
|
|
||||||
checksum = "478c572c3d73181ff3c2539045f6eb99e5491218eae919370993b890cdbdd98e"
|
|
||||||
|
|
||||||
[[package]]
|
|
||||||
name = "pin-project-lite"
|
|
||||||
version = "0.2.9"
|
|
||||||
source = "registry+https://github.com/rust-lang/crates.io-index"
|
|
||||||
checksum = "e0a7ae3ac2f1173085d398531c705756c94a4c56843785df85a60c1a0afac116"
|
|
||||||
|
|
||||||
[[package]]
|
|
||||||
name = "pin-utils"
|
|
||||||
version = "0.1.0"
|
|
||||||
source = "registry+https://github.com/rust-lang/crates.io-index"
|
|
||||||
checksum = "8b870d8c151b6f2fb93e84a13146138f05d02ed11c7e7c54f8826aaaf7c9f184"
|
|
||||||
|
|
||||||
[[package]]
|
|
||||||
name = "proc-macro-error"
|
|
||||||
version = "1.0.4"
|
|
||||||
source = "registry+https://github.com/rust-lang/crates.io-index"
|
|
||||||
checksum = "da25490ff9892aab3fcf7c36f08cfb902dd3e71ca0f9f9517bea02a73a5ce38c"
|
|
||||||
dependencies = [
|
|
||||||
"proc-macro-error-attr",
|
|
||||||
"proc-macro2",
|
|
||||||
"quote",
|
|
||||||
"syn",
|
|
||||||
"version_check",
|
|
||||||
]
|
|
||||||
|
|
||||||
[[package]]
|
|
||||||
name = "proc-macro-error-attr"
|
|
||||||
version = "1.0.4"
|
|
||||||
source = "registry+https://github.com/rust-lang/crates.io-index"
|
|
||||||
checksum = "a1be40180e52ecc98ad80b184934baf3d0d29f979574e439af5a55274b35f869"
|
|
||||||
dependencies = [
|
|
||||||
"proc-macro2",
|
|
||||||
"quote",
|
|
||||||
"version_check",
|
|
||||||
]
|
|
||||||
|
|
||||||
[[package]]
|
|
||||||
name = "proc-macro2"
|
|
||||||
version = "1.0.46"
|
|
||||||
source = "registry+https://github.com/rust-lang/crates.io-index"
|
|
||||||
checksum = "94e2ef8dbfc347b10c094890f778ee2e36ca9bb4262e86dc99cd217e35f3470b"
|
|
||||||
dependencies = [
|
|
||||||
"unicode-ident",
|
|
||||||
]
|
|
||||||
|
|
||||||
[[package]]
|
|
||||||
name = "quote"
|
|
||||||
version = "1.0.21"
|
|
||||||
source = "registry+https://github.com/rust-lang/crates.io-index"
|
|
||||||
checksum = "bbe448f377a7d6961e30f5955f9b8d106c3f5e449d493ee1b125c1d43c2b5179"
|
|
||||||
dependencies = [
|
|
||||||
"proc-macro2",
|
|
||||||
]
|
|
||||||
|
|
||||||
[[package]]
|
|
||||||
name = "r-dashboard"
|
|
||||||
version = "0.1.0"
|
|
||||||
dependencies = [
|
|
||||||
"console_error_panic_hook",
|
|
||||||
"dioxus",
|
|
||||||
"dioxus-html-macro",
|
|
||||||
"tracing",
|
|
||||||
"tracing-wasm",
|
|
||||||
]
|
|
||||||
|
|
||||||
[[package]]
|
|
||||||
name = "rand_core"
|
|
||||||
version = "0.6.4"
|
|
||||||
source = "registry+https://github.com/rust-lang/crates.io-index"
|
|
||||||
checksum = "ec0be4795e2f6a28069bec0b5ff3e2ac9bafc99e6a9a7dc3547996c5c816922c"
|
|
||||||
|
|
||||||
[[package]]
|
|
||||||
name = "rand_xoshiro"
|
|
||||||
version = "0.6.0"
|
|
||||||
source = "registry+https://github.com/rust-lang/crates.io-index"
|
|
||||||
checksum = "6f97cdb2a36ed4183de61b2f824cc45c9f1037f28afe0a322e9fff4c108b5aaa"
|
|
||||||
dependencies = [
|
|
||||||
"rand_core",
|
|
||||||
]
|
|
||||||
|
|
||||||
[[package]]
|
|
||||||
name = "rustc-demangle"
|
|
||||||
version = "0.1.21"
|
|
||||||
source = "registry+https://github.com/rust-lang/crates.io-index"
|
|
||||||
checksum = "7ef03e0a2b150c7a90d01faf6254c9c48a41e95fb2a8c2ac1c6f0d2b9aefc342"
|
|
||||||
|
|
||||||
[[package]]
|
|
||||||
name = "ryu"
|
|
||||||
version = "1.0.11"
|
|
||||||
source = "registry+https://github.com/rust-lang/crates.io-index"
|
|
||||||
checksum = "4501abdff3ae82a1c1b477a17252eb69cee9e66eb915c1abaa4f44d873df9f09"
|
|
||||||
|
|
||||||
[[package]]
|
|
||||||
name = "serde"
|
|
||||||
version = "1.0.145"
|
|
||||||
source = "registry+https://github.com/rust-lang/crates.io-index"
|
|
||||||
checksum = "728eb6351430bccb993660dfffc5a72f91ccc1295abaa8ce19b27ebe4f75568b"
|
|
||||||
|
|
||||||
[[package]]
|
|
||||||
name = "serde-wasm-bindgen"
|
|
||||||
version = "0.4.5"
|
|
||||||
source = "registry+https://github.com/rust-lang/crates.io-index"
|
|
||||||
checksum = "e3b4c031cd0d9014307d82b8abf653c0290fbdaeb4c02d00c63cf52f728628bf"
|
|
||||||
dependencies = [
|
|
||||||
"js-sys",
|
|
||||||
"serde",
|
|
||||||
"wasm-bindgen",
|
|
||||||
]
|
|
||||||
|
|
||||||
[[package]]
|
|
||||||
name = "serde_urlencoded"
|
|
||||||
version = "0.7.1"
|
|
||||||
source = "registry+https://github.com/rust-lang/crates.io-index"
|
|
||||||
checksum = "d3491c14715ca2294c4d6a88f15e84739788c1d030eed8c110436aafdaa2f3fd"
|
|
||||||
dependencies = [
|
|
||||||
"form_urlencoded",
|
|
||||||
"itoa",
|
|
||||||
"ryu",
|
|
||||||
"serde",
|
|
||||||
]
|
|
||||||
|
|
||||||
[[package]]
|
|
||||||
name = "sharded-slab"
|
|
||||||
version = "0.1.4"
|
|
||||||
source = "registry+https://github.com/rust-lang/crates.io-index"
|
|
||||||
checksum = "900fba806f70c630b0a382d0d825e17a0f19fcd059a2ade1ff237bcddf446b31"
|
|
||||||
dependencies = [
|
|
||||||
"lazy_static",
|
|
||||||
]
|
|
||||||
|
|
||||||
[[package]]
|
|
||||||
name = "sized-chunks"
|
|
||||||
version = "0.6.5"
|
|
||||||
source = "registry+https://github.com/rust-lang/crates.io-index"
|
|
||||||
checksum = "16d69225bde7a69b235da73377861095455d298f2b970996eec25ddbb42b3d1e"
|
|
||||||
dependencies = [
|
|
||||||
"bitmaps",
|
|
||||||
"typenum",
|
|
||||||
]
|
|
||||||
|
|
||||||
[[package]]
|
|
||||||
name = "slab"
|
|
||||||
version = "0.4.7"
|
|
||||||
source = "registry+https://github.com/rust-lang/crates.io-index"
|
|
||||||
checksum = "4614a76b2a8be0058caa9dbbaf66d988527d86d003c11a94fbd335d7661edcef"
|
|
||||||
dependencies = [
|
|
||||||
"autocfg",
|
|
||||||
]
|
|
||||||
|
|
||||||
[[package]]
|
|
||||||
name = "smallstr"
|
|
||||||
version = "0.2.0"
|
|
||||||
source = "registry+https://github.com/rust-lang/crates.io-index"
|
|
||||||
checksum = "1e922794d168678729ffc7e07182721a14219c65814e66e91b839a272fe5ae4f"
|
|
||||||
dependencies = [
|
|
||||||
"smallvec",
|
|
||||||
]
|
|
||||||
|
|
||||||
[[package]]
|
|
||||||
name = "smallvec"
|
|
||||||
version = "1.10.0"
|
|
||||||
source = "registry+https://github.com/rust-lang/crates.io-index"
|
|
||||||
checksum = "a507befe795404456341dfab10cef66ead4c041f62b8b11bbb92bffe5d0953e0"
|
|
||||||
|
|
||||||
[[package]]
|
|
||||||
name = "syn"
|
|
||||||
version = "1.0.102"
|
|
||||||
source = "registry+https://github.com/rust-lang/crates.io-index"
|
|
||||||
checksum = "3fcd952facd492f9be3ef0d0b7032a6e442ee9b361d4acc2b1d0c4aaa5f613a1"
|
|
||||||
dependencies = [
|
|
||||||
"proc-macro2",
|
|
||||||
"quote",
|
|
||||||
"unicode-ident",
|
|
||||||
]
|
|
||||||
|
|
||||||
[[package]]
|
|
||||||
name = "thiserror"
|
|
||||||
version = "1.0.37"
|
|
||||||
source = "registry+https://github.com/rust-lang/crates.io-index"
|
|
||||||
checksum = "10deb33631e3c9018b9baf9dcbbc4f737320d2b576bac10f6aefa048fa407e3e"
|
|
||||||
dependencies = [
|
|
||||||
"thiserror-impl",
|
|
||||||
]
|
|
||||||
|
|
||||||
[[package]]
|
|
||||||
name = "thiserror-impl"
|
|
||||||
version = "1.0.37"
|
|
||||||
source = "registry+https://github.com/rust-lang/crates.io-index"
|
|
||||||
checksum = "982d17546b47146b28f7c22e3d08465f6b8903d0ea13c1660d9d84a6e7adcdbb"
|
|
||||||
dependencies = [
|
|
||||||
"proc-macro2",
|
|
||||||
"quote",
|
|
||||||
"syn",
|
|
||||||
]
|
|
||||||
|
|
||||||
[[package]]
|
|
||||||
name = "thread_local"
|
|
||||||
version = "1.1.4"
|
|
||||||
source = "registry+https://github.com/rust-lang/crates.io-index"
|
|
||||||
checksum = "5516c27b78311c50bf42c071425c560ac799b11c30b31f87e3081965fe5e0180"
|
|
||||||
dependencies = [
|
|
||||||
"once_cell",
|
|
||||||
]
|
|
||||||
|
|
||||||
[[package]]
|
|
||||||
name = "tinyvec"
|
|
||||||
version = "1.6.0"
|
|
||||||
source = "registry+https://github.com/rust-lang/crates.io-index"
|
|
||||||
checksum = "87cc5ceb3875bb20c2890005a4e226a4651264a5c75edb2421b52861a0a0cb50"
|
|
||||||
dependencies = [
|
|
||||||
"tinyvec_macros",
|
|
||||||
]
|
|
||||||
|
|
||||||
[[package]]
|
|
||||||
name = "tinyvec_macros"
|
|
||||||
version = "0.1.0"
|
|
||||||
source = "registry+https://github.com/rust-lang/crates.io-index"
|
|
||||||
checksum = "cda74da7e1a664f795bb1f8a87ec406fb89a02522cf6e50620d016add6dbbf5c"
|
|
||||||
|
|
||||||
[[package]]
|
|
||||||
name = "tracing"
|
|
||||||
version = "0.1.37"
|
|
||||||
source = "registry+https://github.com/rust-lang/crates.io-index"
|
|
||||||
checksum = "8ce8c33a8d48bd45d624a6e523445fd21ec13d3653cd51f681abf67418f54eb8"
|
|
||||||
dependencies = [
|
|
||||||
"cfg-if",
|
|
||||||
"pin-project-lite",
|
|
||||||
"tracing-attributes",
|
|
||||||
"tracing-core",
|
|
||||||
]
|
|
||||||
|
|
||||||
[[package]]
|
|
||||||
name = "tracing-attributes"
|
|
||||||
version = "0.1.23"
|
|
||||||
source = "registry+https://github.com/rust-lang/crates.io-index"
|
|
||||||
checksum = "4017f8f45139870ca7e672686113917c71c7a6e02d4924eda67186083c03081a"
|
|
||||||
dependencies = [
|
|
||||||
"proc-macro2",
|
|
||||||
"quote",
|
|
||||||
"syn",
|
|
||||||
]
|
|
||||||
|
|
||||||
[[package]]
|
|
||||||
name = "tracing-core"
|
|
||||||
version = "0.1.30"
|
|
||||||
source = "registry+https://github.com/rust-lang/crates.io-index"
|
|
||||||
checksum = "24eb03ba0eab1fd845050058ce5e616558e8f8d8fca633e6b163fe25c797213a"
|
|
||||||
dependencies = [
|
|
||||||
"once_cell",
|
|
||||||
]
|
|
||||||
|
|
||||||
[[package]]
|
|
||||||
name = "tracing-subscriber"
|
|
||||||
version = "0.3.16"
|
|
||||||
source = "registry+https://github.com/rust-lang/crates.io-index"
|
|
||||||
checksum = "a6176eae26dd70d0c919749377897b54a9276bd7061339665dd68777926b5a70"
|
|
||||||
dependencies = [
|
|
||||||
"sharded-slab",
|
|
||||||
"thread_local",
|
|
||||||
"tracing-core",
|
|
||||||
]
|
|
||||||
|
|
||||||
[[package]]
|
|
||||||
name = "tracing-wasm"
|
|
||||||
version = "0.2.1"
|
|
||||||
source = "registry+https://github.com/rust-lang/crates.io-index"
|
|
||||||
checksum = "4575c663a174420fa2d78f4108ff68f65bf2fbb7dd89f33749b6e826b3626e07"
|
|
||||||
dependencies = [
|
|
||||||
"tracing",
|
|
||||||
"tracing-subscriber",
|
|
||||||
"wasm-bindgen",
|
|
||||||
]
|
|
||||||
|
|
||||||
[[package]]
|
|
||||||
name = "typenum"
|
|
||||||
version = "1.15.0"
|
|
||||||
source = "registry+https://github.com/rust-lang/crates.io-index"
|
|
||||||
checksum = "dcf81ac59edc17cc8697ff311e8f5ef2d99fcbd9817b34cec66f90b6c3dfd987"
|
|
||||||
|
|
||||||
[[package]]
|
|
||||||
name = "unicode-bidi"
|
|
||||||
version = "0.3.8"
|
|
||||||
source = "registry+https://github.com/rust-lang/crates.io-index"
|
|
||||||
checksum = "099b7128301d285f79ddd55b9a83d5e6b9e97c92e0ea0daebee7263e932de992"
|
|
||||||
|
|
||||||
[[package]]
|
|
||||||
name = "unicode-ident"
|
|
||||||
version = "1.0.5"
|
|
||||||
source = "registry+https://github.com/rust-lang/crates.io-index"
|
|
||||||
checksum = "6ceab39d59e4c9499d4e5a8ee0e2735b891bb7308ac83dfb4e80cad195c9f6f3"
|
|
||||||
|
|
||||||
[[package]]
|
|
||||||
name = "unicode-normalization"
|
|
||||||
version = "0.1.22"
|
|
||||||
source = "registry+https://github.com/rust-lang/crates.io-index"
|
|
||||||
checksum = "5c5713f0fc4b5db668a2ac63cdb7bb4469d8c9fed047b1d0292cc7b0ce2ba921"
|
|
||||||
dependencies = [
|
|
||||||
"tinyvec",
|
|
||||||
]
|
|
||||||
|
|
||||||
[[package]]
|
|
||||||
name = "url"
|
|
||||||
version = "2.3.1"
|
|
||||||
source = "registry+https://github.com/rust-lang/crates.io-index"
|
|
||||||
checksum = "0d68c799ae75762b8c3fe375feb6600ef5602c883c5d21eb51c09f22b83c4643"
|
|
||||||
dependencies = [
|
|
||||||
"form_urlencoded",
|
|
||||||
"idna",
|
|
||||||
"percent-encoding",
|
|
||||||
]
|
|
||||||
|
|
||||||
[[package]]
|
|
||||||
name = "version_check"
|
|
||||||
version = "0.9.4"
|
|
||||||
source = "registry+https://github.com/rust-lang/crates.io-index"
|
|
||||||
checksum = "49874b5167b65d7193b8aba1567f5c7d93d001cafc34600cee003eda787e483f"
|
|
||||||
|
|
||||||
[[package]]
|
|
||||||
name = "wasm-bindgen"
|
|
||||||
version = "0.2.83"
|
|
||||||
source = "registry+https://github.com/rust-lang/crates.io-index"
|
|
||||||
checksum = "eaf9f5aceeec8be17c128b2e93e031fb8a4d469bb9c4ae2d7dc1888b26887268"
|
|
||||||
dependencies = [
|
|
||||||
"cfg-if",
|
|
||||||
"wasm-bindgen-macro",
|
|
||||||
]
|
|
||||||
|
|
||||||
[[package]]
|
|
||||||
name = "wasm-bindgen-backend"
|
|
||||||
version = "0.2.83"
|
|
||||||
source = "registry+https://github.com/rust-lang/crates.io-index"
|
|
||||||
checksum = "4c8ffb332579b0557b52d268b91feab8df3615f265d5270fec2a8c95b17c1142"
|
|
||||||
dependencies = [
|
|
||||||
"bumpalo",
|
|
||||||
"log",
|
|
||||||
"once_cell",
|
|
||||||
"proc-macro2",
|
|
||||||
"quote",
|
|
||||||
"syn",
|
|
||||||
"wasm-bindgen-shared",
|
|
||||||
]
|
|
||||||
|
|
||||||
[[package]]
|
|
||||||
name = "wasm-bindgen-futures"
|
|
||||||
version = "0.4.33"
|
|
||||||
source = "registry+https://github.com/rust-lang/crates.io-index"
|
|
||||||
checksum = "23639446165ca5a5de86ae1d8896b737ae80319560fbaa4c2887b7da6e7ebd7d"
|
|
||||||
dependencies = [
|
|
||||||
"cfg-if",
|
|
||||||
"js-sys",
|
|
||||||
"wasm-bindgen",
|
|
||||||
"web-sys",
|
|
||||||
]
|
|
||||||
|
|
||||||
[[package]]
|
|
||||||
name = "wasm-bindgen-macro"
|
|
||||||
version = "0.2.83"
|
|
||||||
source = "registry+https://github.com/rust-lang/crates.io-index"
|
|
||||||
checksum = "052be0f94026e6cbc75cdefc9bae13fd6052cdcaf532fa6c45e7ae33a1e6c810"
|
|
||||||
dependencies = [
|
|
||||||
"quote",
|
|
||||||
"wasm-bindgen-macro-support",
|
|
||||||
]
|
|
||||||
|
|
||||||
[[package]]
|
|
||||||
name = "wasm-bindgen-macro-support"
|
|
||||||
version = "0.2.83"
|
|
||||||
source = "registry+https://github.com/rust-lang/crates.io-index"
|
|
||||||
checksum = "07bc0c051dc5f23e307b13285f9d75df86bfdf816c5721e573dec1f9b8aa193c"
|
|
||||||
dependencies = [
|
|
||||||
"proc-macro2",
|
|
||||||
"quote",
|
|
||||||
"syn",
|
|
||||||
"wasm-bindgen-backend",
|
|
||||||
"wasm-bindgen-shared",
|
|
||||||
]
|
|
||||||
|
|
||||||
[[package]]
|
|
||||||
name = "wasm-bindgen-shared"
|
|
||||||
version = "0.2.83"
|
|
||||||
source = "registry+https://github.com/rust-lang/crates.io-index"
|
|
||||||
checksum = "1c38c045535d93ec4f0b4defec448e4291638ee608530863b1e2ba115d4fff7f"
|
|
||||||
|
|
||||||
[[package]]
|
|
||||||
name = "web-sys"
|
|
||||||
version = "0.3.60"
|
|
||||||
source = "registry+https://github.com/rust-lang/crates.io-index"
|
|
||||||
checksum = "bcda906d8be16e728fd5adc5b729afad4e444e106ab28cd1c7256e54fa61510f"
|
|
||||||
dependencies = [
|
|
||||||
"js-sys",
|
|
||||||
"wasm-bindgen",
|
|
||||||
]
|
|
||||||
10
Cargo.toml
10
Cargo.toml
@@ -1,20 +1,20 @@
|
|||||||
[package]
|
[package]
|
||||||
name = "r-dashboard"
|
name = "r-dashboard"
|
||||||
version = "0.1.0"
|
version = "0.1.1"
|
||||||
edition = "2021"
|
edition = "2021"
|
||||||
|
|
||||||
# See more keys and their definitions at https://doc.rust-lang.org/cargo/reference/manifest.html
|
# See more keys and their definitions at https://doc.rust-lang.org/cargo/reference/manifest.html
|
||||||
|
|
||||||
[dependencies]
|
[dependencies]
|
||||||
dioxus = {version = "0.2", features = ["web","router","fermi"]}
|
dioxus = {version = "0.5", features = ["web", "router"]} #"fermi"
|
||||||
console_error_panic_hook = "0.1"
|
console_error_panic_hook = "0.1"
|
||||||
dioxus-html-macro = "0.2"
|
dioxus-html-macro = "0.3"
|
||||||
|
|
||||||
tracing = "0"
|
tracing = "0"
|
||||||
tracing-wasm = "0"
|
tracing-wasm = "0"
|
||||||
|
|
||||||
[profile.release]
|
[profile.release]
|
||||||
opt-level = 3
|
opt-level = 'z'
|
||||||
lto = true
|
lto = true
|
||||||
# strip = true
|
strip = true
|
||||||
|
|
||||||
|
|||||||
43
Dioxus.toml
Normal file
43
Dioxus.toml
Normal file
@@ -0,0 +1,43 @@
|
|||||||
|
[application]
|
||||||
|
|
||||||
|
# App (Project) Name
|
||||||
|
name = "r-dashboard"
|
||||||
|
|
||||||
|
# Dioxus App Default Platform
|
||||||
|
# desktop, web
|
||||||
|
default_platform = "web"
|
||||||
|
|
||||||
|
# `build` & `serve` dist path
|
||||||
|
out_dir = "dist"
|
||||||
|
|
||||||
|
# resource (assets) file folder
|
||||||
|
asset_dir = "assets"
|
||||||
|
|
||||||
|
[web.app]
|
||||||
|
|
||||||
|
# HTML title tag content
|
||||||
|
title = ""
|
||||||
|
|
||||||
|
[web.watcher]
|
||||||
|
|
||||||
|
# when watcher trigger, regenerate the `index.html`
|
||||||
|
reload_html = true
|
||||||
|
|
||||||
|
# which files or dirs will be watcher monitoring
|
||||||
|
watch_path = ["src"]
|
||||||
|
|
||||||
|
# include `assets` in web platform
|
||||||
|
[web.resource]
|
||||||
|
|
||||||
|
# CSS style file
|
||||||
|
|
||||||
|
style = ["/style.css"]
|
||||||
|
|
||||||
|
# Javascript code file
|
||||||
|
script = []
|
||||||
|
|
||||||
|
[web.resource.dev]
|
||||||
|
|
||||||
|
# Javascript code file
|
||||||
|
# serve: [dev-server] only
|
||||||
|
script = []
|
||||||
62
Trunk.toml
Normal file
62
Trunk.toml
Normal file
@@ -0,0 +1,62 @@
|
|||||||
|
# An example Trunk.toml with all possible fields along with their defaults.
|
||||||
|
# https://github.com/trunk-rs/trunk/blob/main/Trunk.toml
|
||||||
|
# A sem-ver version requirement of trunk required for this project
|
||||||
|
trunk-version = "*"
|
||||||
|
|
||||||
|
[build]
|
||||||
|
# The index HTML file to drive the bundling process.
|
||||||
|
target = "index.html"
|
||||||
|
# Build in release mode.
|
||||||
|
release = false
|
||||||
|
# The output dir for all final assets.
|
||||||
|
dist = "dist"
|
||||||
|
# The public URL from which assets are to be served.
|
||||||
|
public_url = "/"
|
||||||
|
# Whether to include hash values in the output file names.
|
||||||
|
filehash = true
|
||||||
|
# Whether to inject scripts (and module preloads) into the finalized output.
|
||||||
|
inject_scripts = true
|
||||||
|
# Run without network access
|
||||||
|
offline = false
|
||||||
|
# Require Cargo.lock and cache are up to date
|
||||||
|
frozen = false
|
||||||
|
# Require Cargo.lock is up to date
|
||||||
|
locked = false
|
||||||
|
# Control minification
|
||||||
|
minify = "never" # can be one of: never, on_release, always
|
||||||
|
# Allow disabling sub-resource integrity (SRI)
|
||||||
|
no_sri = false
|
||||||
|
|
||||||
|
[watch]
|
||||||
|
# Paths to watch. The `build.target`'s parent folder is watched by default.
|
||||||
|
watch = []
|
||||||
|
# Paths to ignore.
|
||||||
|
ignore = []
|
||||||
|
|
||||||
|
[serve]
|
||||||
|
# The address to serve on.
|
||||||
|
addresses = ["127.0.0.1"]
|
||||||
|
# The port to serve on.
|
||||||
|
port = 8080
|
||||||
|
# Open a browser tab once the initial build is complete.
|
||||||
|
open = false
|
||||||
|
# Disable auto-reload of the web app.
|
||||||
|
no_autoreload = false
|
||||||
|
# Disable error reporting
|
||||||
|
no_error_reporting = false
|
||||||
|
# Additional headers set for responses.
|
||||||
|
# headers = { "test-header" = "header value", "test-header2" = "header value 2" }
|
||||||
|
# Protocol used for autoreload WebSockets connection.
|
||||||
|
ws_protocol = "ws"
|
||||||
|
# The certificate/private key pair to use for TLS, which is enabled if both are set.
|
||||||
|
# tls_key_path = "self_signed_certs/key.pem"
|
||||||
|
# tls_cert_path = "self_signed_certs/cert.pem"
|
||||||
|
|
||||||
|
[clean]
|
||||||
|
# The output dir for all final assets.
|
||||||
|
dist = "dist"
|
||||||
|
# Optionally perform a cargo clean.
|
||||||
|
cargo = false
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
Before Width: | Height: | Size: 4.2 KiB After Width: | Height: | Size: 4.2 KiB |
|
Before Width: | Height: | Size: 87 KiB After Width: | Height: | Size: 87 KiB |
23
build.rs
23
build.rs
@@ -1,18 +1,21 @@
|
|||||||
/*
|
/*
|
||||||
* @Author: plucky
|
|
||||||
* @Date: 2022-10-10 11:51:28
|
* @Date: 2022-10-10 11:51:28
|
||||||
* @LastEditTime: 2022-10-15 13:43:11
|
* @LastEditTime: 2024-07-07 18:04:24
|
||||||
* @Description:
|
* @Description:
|
||||||
*/
|
*/
|
||||||
|
|
||||||
use std::process::Command;
|
// use std::process::Command;
|
||||||
|
|
||||||
fn main() {
|
fn main() {
|
||||||
// println!("hello, build.rs");
|
// println!("cargo::rerun-if-changed=input.css");
|
||||||
// tailwindcss -i index.css -o style.css
|
// // tailwindcss -i index.css -o style.css
|
||||||
Command::new("tailwindcss").args(&["-i", "index.css", "-o", "dist/.stage/style.css"])
|
// Command::new("tailwindcss")
|
||||||
.status().unwrap();
|
// .args(["-i", "input.css", "-o", "dist/.stage/style.css"])
|
||||||
// cp static/favicon.ico ... dist/.stage
|
// .status()
|
||||||
Command::new("cp").args(&["static/favicon.ico", "...", "dist/.stage/"])
|
// .unwrap();
|
||||||
.status().unwrap();
|
// // cp assets/favicon.ico ... dist/.stage
|
||||||
|
// Command::new("cp")
|
||||||
|
// .args(["assets/favicon.ico", "...", "dist/.stage/"])
|
||||||
|
// .status()
|
||||||
|
// .unwrap();
|
||||||
}
|
}
|
||||||
16
dist/index.html
vendored
16
dist/index.html
vendored
@@ -1,16 +0,0 @@
|
|||||||
<!DOCTYPE html><html lang="en"><head>
|
|
||||||
<meta charset="UTF-8">
|
|
||||||
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
||||||
<link href="style.css" rel="stylesheet">
|
|
||||||
<!-- <link rel="stylesheet" href="https://rsms.me/inter/inter.css"> -->
|
|
||||||
<title>R-Dashboard</title>
|
|
||||||
|
|
||||||
<link rel="preload" href="/r-dashboard-5519b63f005514a8_bg.wasm" as="fetch" type="application/wasm" crossorigin="">
|
|
||||||
<link rel="modulepreload" href="/r-dashboard-5519b63f005514a8.js"></head>
|
|
||||||
<body>
|
|
||||||
<div id="main"></div>
|
|
||||||
<div class="lg:hidden bg-black"></div>
|
|
||||||
|
|
||||||
|
|
||||||
<script type="module">import init from '/r-dashboard-5519b63f005514a8.js';init('/r-dashboard-5519b63f005514a8_bg.wasm');</script></body></html>
|
|
||||||
1060
dist/r-dashboard-5519b63f005514a8.js
vendored
1060
dist/r-dashboard-5519b63f005514a8.js
vendored
File diff suppressed because it is too large
Load Diff
BIN
dist/r-dashboard-5519b63f005514a8_bg.wasm
vendored
BIN
dist/r-dashboard-5519b63f005514a8_bg.wasm
vendored
Binary file not shown.
@@ -1,603 +0,0 @@
|
|||||||
export function main() {
|
|
||||||
let root = window.document.getElementById("main");
|
|
||||||
if (root != null) {
|
|
||||||
window.interpreter = new Interpreter(root);
|
|
||||||
window.ipc.postMessage(serializeIpcMessage("initialize"));
|
|
||||||
}
|
|
||||||
}
|
|
||||||
export class Interpreter {
|
|
||||||
constructor(root) {
|
|
||||||
this.root = root;
|
|
||||||
this.stack = [root];
|
|
||||||
this.listeners = {};
|
|
||||||
this.handlers = {};
|
|
||||||
this.lastNodeWasText = false;
|
|
||||||
this.nodes = [root];
|
|
||||||
}
|
|
||||||
top() {
|
|
||||||
return this.stack[this.stack.length - 1];
|
|
||||||
}
|
|
||||||
pop() {
|
|
||||||
return this.stack.pop();
|
|
||||||
}
|
|
||||||
SetNode(id, node) {
|
|
||||||
this.nodes[id] = node;
|
|
||||||
}
|
|
||||||
PushRoot(root) {
|
|
||||||
const node = this.nodes[root];
|
|
||||||
this.stack.push(node);
|
|
||||||
}
|
|
||||||
PopRoot() {
|
|
||||||
this.stack.pop();
|
|
||||||
}
|
|
||||||
AppendChildren(many) {
|
|
||||||
let root = this.stack[this.stack.length - (1 + many)];
|
|
||||||
let to_add = this.stack.splice(this.stack.length - many);
|
|
||||||
for (let i = 0; i < many; i++) {
|
|
||||||
root.appendChild(to_add[i]);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
ReplaceWith(root_id, m) {
|
|
||||||
let root = this.nodes[root_id];
|
|
||||||
let els = this.stack.splice(this.stack.length - m);
|
|
||||||
root.replaceWith(...els);
|
|
||||||
}
|
|
||||||
InsertAfter(root, n) {
|
|
||||||
let old = this.nodes[root];
|
|
||||||
let new_nodes = this.stack.splice(this.stack.length - n);
|
|
||||||
old.after(...new_nodes);
|
|
||||||
}
|
|
||||||
InsertBefore(root, n) {
|
|
||||||
let old = this.nodes[root];
|
|
||||||
let new_nodes = this.stack.splice(this.stack.length - n);
|
|
||||||
old.before(...new_nodes);
|
|
||||||
}
|
|
||||||
Remove(root) {
|
|
||||||
let node = this.nodes[root];
|
|
||||||
if (node !== undefined) {
|
|
||||||
node.remove();
|
|
||||||
}
|
|
||||||
}
|
|
||||||
CreateTextNode(text, root) {
|
|
||||||
const node = document.createTextNode(text);
|
|
||||||
this.nodes[root] = node;
|
|
||||||
this.stack.push(node);
|
|
||||||
}
|
|
||||||
CreateElement(tag, root) {
|
|
||||||
const el = document.createElement(tag);
|
|
||||||
this.nodes[root] = el;
|
|
||||||
this.stack.push(el);
|
|
||||||
}
|
|
||||||
CreateElementNs(tag, root, ns) {
|
|
||||||
let el = document.createElementNS(ns, tag);
|
|
||||||
this.stack.push(el);
|
|
||||||
this.nodes[root] = el;
|
|
||||||
}
|
|
||||||
CreatePlaceholder(root) {
|
|
||||||
let el = document.createElement("pre");
|
|
||||||
el.hidden = true;
|
|
||||||
this.stack.push(el);
|
|
||||||
this.nodes[root] = el;
|
|
||||||
}
|
|
||||||
NewEventListener(event_name, root, handler) {
|
|
||||||
const element = this.nodes[root];
|
|
||||||
element.setAttribute("data-dioxus-id", `${root}`);
|
|
||||||
if (this.listeners[event_name] === undefined) {
|
|
||||||
this.listeners[event_name] = 1;
|
|
||||||
this.handlers[event_name] = handler;
|
|
||||||
this.root.addEventListener(event_name, handler);
|
|
||||||
} else {
|
|
||||||
this.listeners[event_name]++;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
RemoveEventListener(root, event_name) {
|
|
||||||
const element = this.nodes[root];
|
|
||||||
element.removeAttribute(`data-dioxus-id`);
|
|
||||||
this.listeners[event_name]--;
|
|
||||||
if (this.listeners[event_name] === 0) {
|
|
||||||
this.root.removeEventListener(event_name, this.handlers[event_name]);
|
|
||||||
delete this.listeners[event_name];
|
|
||||||
delete this.handlers[event_name];
|
|
||||||
}
|
|
||||||
}
|
|
||||||
SetText(root, text) {
|
|
||||||
this.nodes[root].textContent = text;
|
|
||||||
}
|
|
||||||
SetAttribute(root, field, value, ns) {
|
|
||||||
const name = field;
|
|
||||||
const node = this.nodes[root];
|
|
||||||
if (ns === "style") {
|
|
||||||
// @ts-ignore
|
|
||||||
node.style[name] = value;
|
|
||||||
} else if (ns != null || ns != undefined) {
|
|
||||||
node.setAttributeNS(ns, name, value);
|
|
||||||
} else {
|
|
||||||
switch (name) {
|
|
||||||
case "value":
|
|
||||||
if (value !== node.value) {
|
|
||||||
node.value = value;
|
|
||||||
}
|
|
||||||
break;
|
|
||||||
case "checked":
|
|
||||||
node.checked = value === "true";
|
|
||||||
break;
|
|
||||||
case "selected":
|
|
||||||
node.selected = value === "true";
|
|
||||||
break;
|
|
||||||
case "dangerous_inner_html":
|
|
||||||
node.innerHTML = value;
|
|
||||||
break;
|
|
||||||
default:
|
|
||||||
// https://github.com/facebook/react/blob/8b88ac2592c5f555f315f9440cbb665dd1e7457a/packages/react-dom/src/shared/DOMProperty.js#L352-L364
|
|
||||||
if (value === "false" && bool_attrs.hasOwnProperty(name)) {
|
|
||||||
node.removeAttribute(name);
|
|
||||||
} else {
|
|
||||||
node.setAttribute(name, value);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
RemoveAttribute(root, field, ns) {
|
|
||||||
const name = field;
|
|
||||||
const node = this.nodes[root];
|
|
||||||
if (ns !== null || ns !== undefined) {
|
|
||||||
node.removeAttributeNS(ns, name);
|
|
||||||
} else if (name === "value") {
|
|
||||||
node.value = "";
|
|
||||||
} else if (name === "checked") {
|
|
||||||
node.checked = false;
|
|
||||||
} else if (name === "selected") {
|
|
||||||
node.selected = false;
|
|
||||||
} else if (name === "dangerous_inner_html") {
|
|
||||||
node.innerHTML = "";
|
|
||||||
} else {
|
|
||||||
node.removeAttribute(name);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
handleEdits(edits) {
|
|
||||||
this.stack.push(this.root);
|
|
||||||
for (let edit of edits) {
|
|
||||||
this.handleEdit(edit);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
handleEdit(edit) {
|
|
||||||
switch (edit.type) {
|
|
||||||
case "PushRoot":
|
|
||||||
this.PushRoot(edit.root);
|
|
||||||
break;
|
|
||||||
case "AppendChildren":
|
|
||||||
this.AppendChildren(edit.many);
|
|
||||||
break;
|
|
||||||
case "ReplaceWith":
|
|
||||||
this.ReplaceWith(edit.root, edit.m);
|
|
||||||
break;
|
|
||||||
case "InsertAfter":
|
|
||||||
this.InsertAfter(edit.root, edit.n);
|
|
||||||
break;
|
|
||||||
case "InsertBefore":
|
|
||||||
this.InsertBefore(edit.root, edit.n);
|
|
||||||
break;
|
|
||||||
case "Remove":
|
|
||||||
this.Remove(edit.root);
|
|
||||||
break;
|
|
||||||
case "CreateTextNode":
|
|
||||||
this.CreateTextNode(edit.text, edit.root);
|
|
||||||
break;
|
|
||||||
case "CreateElement":
|
|
||||||
this.CreateElement(edit.tag, edit.root);
|
|
||||||
break;
|
|
||||||
case "CreateElementNs":
|
|
||||||
this.CreateElementNs(edit.tag, edit.root, edit.ns);
|
|
||||||
break;
|
|
||||||
case "CreatePlaceholder":
|
|
||||||
this.CreatePlaceholder(edit.root);
|
|
||||||
break;
|
|
||||||
case "RemoveEventListener":
|
|
||||||
this.RemoveEventListener(edit.root, edit.event_name);
|
|
||||||
break;
|
|
||||||
case "NewEventListener":
|
|
||||||
console.log(this.listeners);
|
|
||||||
|
|
||||||
// this handler is only provided on desktop implementations since this
|
|
||||||
// method is not used by the web implementation
|
|
||||||
let handler = (event) => {
|
|
||||||
console.log(event);
|
|
||||||
|
|
||||||
let target = event.target;
|
|
||||||
if (target != null) {
|
|
||||||
let realId = target.getAttribute(`data-dioxus-id`);
|
|
||||||
let shouldPreventDefault = target.getAttribute(
|
|
||||||
`dioxus-prevent-default`
|
|
||||||
);
|
|
||||||
|
|
||||||
if (event.type === "click") {
|
|
||||||
// todo call prevent default if it's the right type of event
|
|
||||||
if (shouldPreventDefault !== `onclick`) {
|
|
||||||
if (target.tagName === "A") {
|
|
||||||
event.preventDefault();
|
|
||||||
const href = target.getAttribute("href");
|
|
||||||
if (href !== "" && href !== null && href !== undefined) {
|
|
||||||
window.ipc.postMessage(
|
|
||||||
serializeIpcMessage("browser_open", { href })
|
|
||||||
);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
// also prevent buttons from submitting
|
|
||||||
if (target.tagName === "BUTTON" && event.type == "submit") {
|
|
||||||
event.preventDefault();
|
|
||||||
}
|
|
||||||
}
|
|
||||||
// walk the tree to find the real element
|
|
||||||
while (realId == null) {
|
|
||||||
// we've reached the root we don't want to send an event
|
|
||||||
if (target.parentElement === null) {
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
|
|
||||||
target = target.parentElement;
|
|
||||||
realId = target.getAttribute(`data-dioxus-id`);
|
|
||||||
}
|
|
||||||
|
|
||||||
shouldPreventDefault = target.getAttribute(
|
|
||||||
`dioxus-prevent-default`
|
|
||||||
);
|
|
||||||
|
|
||||||
let contents = serialize_event(event);
|
|
||||||
|
|
||||||
if (shouldPreventDefault === `on${event.type}`) {
|
|
||||||
event.preventDefault();
|
|
||||||
}
|
|
||||||
|
|
||||||
if (event.type === "submit") {
|
|
||||||
event.preventDefault();
|
|
||||||
}
|
|
||||||
|
|
||||||
if (
|
|
||||||
target.tagName === "FORM" &&
|
|
||||||
(event.type === "submit" || event.type === "input")
|
|
||||||
) {
|
|
||||||
for (let x = 0; x < target.elements.length; x++) {
|
|
||||||
let element = target.elements[x];
|
|
||||||
let name = element.getAttribute("name");
|
|
||||||
if (name != null) {
|
|
||||||
if (element.getAttribute("type") === "checkbox") {
|
|
||||||
// @ts-ignore
|
|
||||||
contents.values[name] = element.checked ? "true" : "false";
|
|
||||||
} else if (element.getAttribute("type") === "radio") {
|
|
||||||
if (element.checked) {
|
|
||||||
contents.values[name] = element.value;
|
|
||||||
}
|
|
||||||
} else {
|
|
||||||
// @ts-ignore
|
|
||||||
contents.values[name] =
|
|
||||||
element.value ?? element.textContent;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
if (realId === null) {
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
window.ipc.postMessage(
|
|
||||||
serializeIpcMessage("user_event", {
|
|
||||||
event: edit.event_name,
|
|
||||||
mounted_dom_id: parseInt(realId),
|
|
||||||
contents: contents,
|
|
||||||
})
|
|
||||||
);
|
|
||||||
}
|
|
||||||
};
|
|
||||||
this.NewEventListener(edit.event_name, edit.root, handler);
|
|
||||||
break;
|
|
||||||
case "SetText":
|
|
||||||
this.SetText(edit.root, edit.text);
|
|
||||||
break;
|
|
||||||
case "SetAttribute":
|
|
||||||
this.SetAttribute(edit.root, edit.field, edit.value, edit.ns);
|
|
||||||
break;
|
|
||||||
case "RemoveAttribute":
|
|
||||||
this.RemoveAttribute(edit.root, edit.name, edit.ns);
|
|
||||||
break;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
export function serialize_event(event) {
|
|
||||||
switch (event.type) {
|
|
||||||
case "copy":
|
|
||||||
case "cut":
|
|
||||||
case "past": {
|
|
||||||
return {};
|
|
||||||
}
|
|
||||||
case "compositionend":
|
|
||||||
case "compositionstart":
|
|
||||||
case "compositionupdate": {
|
|
||||||
let { data } = event;
|
|
||||||
return {
|
|
||||||
data,
|
|
||||||
};
|
|
||||||
}
|
|
||||||
case "keydown":
|
|
||||||
case "keypress":
|
|
||||||
case "keyup": {
|
|
||||||
let {
|
|
||||||
charCode,
|
|
||||||
key,
|
|
||||||
altKey,
|
|
||||||
ctrlKey,
|
|
||||||
metaKey,
|
|
||||||
keyCode,
|
|
||||||
shiftKey,
|
|
||||||
location,
|
|
||||||
repeat,
|
|
||||||
which,
|
|
||||||
} = event;
|
|
||||||
return {
|
|
||||||
char_code: charCode,
|
|
||||||
key: key,
|
|
||||||
alt_key: altKey,
|
|
||||||
ctrl_key: ctrlKey,
|
|
||||||
meta_key: metaKey,
|
|
||||||
key_code: keyCode,
|
|
||||||
shift_key: shiftKey,
|
|
||||||
location: location,
|
|
||||||
repeat: repeat,
|
|
||||||
which: which,
|
|
||||||
locale: "locale",
|
|
||||||
};
|
|
||||||
}
|
|
||||||
case "focus":
|
|
||||||
case "blur": {
|
|
||||||
return {};
|
|
||||||
}
|
|
||||||
case "change": {
|
|
||||||
let target = event.target;
|
|
||||||
let value;
|
|
||||||
if (target.type === "checkbox" || target.type === "radio") {
|
|
||||||
value = target.checked ? "true" : "false";
|
|
||||||
} else {
|
|
||||||
value = target.value ?? target.textContent;
|
|
||||||
}
|
|
||||||
return {
|
|
||||||
value: value,
|
|
||||||
values: {},
|
|
||||||
};
|
|
||||||
}
|
|
||||||
case "input":
|
|
||||||
case "invalid":
|
|
||||||
case "reset":
|
|
||||||
case "submit": {
|
|
||||||
let target = event.target;
|
|
||||||
let value = target.value ?? target.textContent;
|
|
||||||
|
|
||||||
if (target.type === "checkbox") {
|
|
||||||
value = target.checked ? "true" : "false";
|
|
||||||
}
|
|
||||||
|
|
||||||
return {
|
|
||||||
value: value,
|
|
||||||
values: {},
|
|
||||||
};
|
|
||||||
}
|
|
||||||
case "click":
|
|
||||||
case "contextmenu":
|
|
||||||
case "doubleclick":
|
|
||||||
case "dblclick":
|
|
||||||
case "drag":
|
|
||||||
case "dragend":
|
|
||||||
case "dragenter":
|
|
||||||
case "dragexit":
|
|
||||||
case "dragleave":
|
|
||||||
case "dragover":
|
|
||||||
case "dragstart":
|
|
||||||
case "drop":
|
|
||||||
case "mousedown":
|
|
||||||
case "mouseenter":
|
|
||||||
case "mouseleave":
|
|
||||||
case "mousemove":
|
|
||||||
case "mouseout":
|
|
||||||
case "mouseover":
|
|
||||||
case "mouseup": {
|
|
||||||
const {
|
|
||||||
altKey,
|
|
||||||
button,
|
|
||||||
buttons,
|
|
||||||
clientX,
|
|
||||||
clientY,
|
|
||||||
ctrlKey,
|
|
||||||
metaKey,
|
|
||||||
pageX,
|
|
||||||
pageY,
|
|
||||||
screenX,
|
|
||||||
screenY,
|
|
||||||
shiftKey,
|
|
||||||
} = event;
|
|
||||||
return {
|
|
||||||
alt_key: altKey,
|
|
||||||
button: button,
|
|
||||||
buttons: buttons,
|
|
||||||
client_x: clientX,
|
|
||||||
client_y: clientY,
|
|
||||||
ctrl_key: ctrlKey,
|
|
||||||
meta_key: metaKey,
|
|
||||||
page_x: pageX,
|
|
||||||
page_y: pageY,
|
|
||||||
screen_x: screenX,
|
|
||||||
screen_y: screenY,
|
|
||||||
shift_key: shiftKey,
|
|
||||||
};
|
|
||||||
}
|
|
||||||
case "pointerdown":
|
|
||||||
case "pointermove":
|
|
||||||
case "pointerup":
|
|
||||||
case "pointercancel":
|
|
||||||
case "gotpointercapture":
|
|
||||||
case "lostpointercapture":
|
|
||||||
case "pointerenter":
|
|
||||||
case "pointerleave":
|
|
||||||
case "pointerover":
|
|
||||||
case "pointerout": {
|
|
||||||
const {
|
|
||||||
altKey,
|
|
||||||
button,
|
|
||||||
buttons,
|
|
||||||
clientX,
|
|
||||||
clientY,
|
|
||||||
ctrlKey,
|
|
||||||
metaKey,
|
|
||||||
pageX,
|
|
||||||
pageY,
|
|
||||||
screenX,
|
|
||||||
screenY,
|
|
||||||
shiftKey,
|
|
||||||
pointerId,
|
|
||||||
width,
|
|
||||||
height,
|
|
||||||
pressure,
|
|
||||||
tangentialPressure,
|
|
||||||
tiltX,
|
|
||||||
tiltY,
|
|
||||||
twist,
|
|
||||||
pointerType,
|
|
||||||
isPrimary,
|
|
||||||
} = event;
|
|
||||||
return {
|
|
||||||
alt_key: altKey,
|
|
||||||
button: button,
|
|
||||||
buttons: buttons,
|
|
||||||
client_x: clientX,
|
|
||||||
client_y: clientY,
|
|
||||||
ctrl_key: ctrlKey,
|
|
||||||
meta_key: metaKey,
|
|
||||||
page_x: pageX,
|
|
||||||
page_y: pageY,
|
|
||||||
screen_x: screenX,
|
|
||||||
screen_y: screenY,
|
|
||||||
shift_key: shiftKey,
|
|
||||||
pointer_id: pointerId,
|
|
||||||
width: width,
|
|
||||||
height: height,
|
|
||||||
pressure: pressure,
|
|
||||||
tangential_pressure: tangentialPressure,
|
|
||||||
tilt_x: tiltX,
|
|
||||||
tilt_y: tiltY,
|
|
||||||
twist: twist,
|
|
||||||
pointer_type: pointerType,
|
|
||||||
is_primary: isPrimary,
|
|
||||||
};
|
|
||||||
}
|
|
||||||
case "select": {
|
|
||||||
return {};
|
|
||||||
}
|
|
||||||
case "touchcancel":
|
|
||||||
case "touchend":
|
|
||||||
case "touchmove":
|
|
||||||
case "touchstart": {
|
|
||||||
const { altKey, ctrlKey, metaKey, shiftKey } = event;
|
|
||||||
return {
|
|
||||||
// changed_touches: event.changedTouches,
|
|
||||||
// target_touches: event.targetTouches,
|
|
||||||
// touches: event.touches,
|
|
||||||
alt_key: altKey,
|
|
||||||
ctrl_key: ctrlKey,
|
|
||||||
meta_key: metaKey,
|
|
||||||
shift_key: shiftKey,
|
|
||||||
};
|
|
||||||
}
|
|
||||||
case "scroll": {
|
|
||||||
return {};
|
|
||||||
}
|
|
||||||
case "wheel": {
|
|
||||||
const { deltaX, deltaY, deltaZ, deltaMode } = event;
|
|
||||||
return {
|
|
||||||
delta_x: deltaX,
|
|
||||||
delta_y: deltaY,
|
|
||||||
delta_z: deltaZ,
|
|
||||||
delta_mode: deltaMode,
|
|
||||||
};
|
|
||||||
}
|
|
||||||
case "animationstart":
|
|
||||||
case "animationend":
|
|
||||||
case "animationiteration": {
|
|
||||||
const { animationName, elapsedTime, pseudoElement } = event;
|
|
||||||
return {
|
|
||||||
animation_name: animationName,
|
|
||||||
elapsed_time: elapsedTime,
|
|
||||||
pseudo_element: pseudoElement,
|
|
||||||
};
|
|
||||||
}
|
|
||||||
case "transitionend": {
|
|
||||||
const { propertyName, elapsedTime, pseudoElement } = event;
|
|
||||||
return {
|
|
||||||
property_name: propertyName,
|
|
||||||
elapsed_time: elapsedTime,
|
|
||||||
pseudo_element: pseudoElement,
|
|
||||||
};
|
|
||||||
}
|
|
||||||
case "abort":
|
|
||||||
case "canplay":
|
|
||||||
case "canplaythrough":
|
|
||||||
case "durationchange":
|
|
||||||
case "emptied":
|
|
||||||
case "encrypted":
|
|
||||||
case "ended":
|
|
||||||
case "error":
|
|
||||||
case "loadeddata":
|
|
||||||
case "loadedmetadata":
|
|
||||||
case "loadstart":
|
|
||||||
case "pause":
|
|
||||||
case "play":
|
|
||||||
case "playing":
|
|
||||||
case "progress":
|
|
||||||
case "ratechange":
|
|
||||||
case "seeked":
|
|
||||||
case "seeking":
|
|
||||||
case "stalled":
|
|
||||||
case "suspend":
|
|
||||||
case "timeupdate":
|
|
||||||
case "volumechange":
|
|
||||||
case "waiting": {
|
|
||||||
return {};
|
|
||||||
}
|
|
||||||
case "toggle": {
|
|
||||||
return {};
|
|
||||||
}
|
|
||||||
default: {
|
|
||||||
return {};
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
function serializeIpcMessage(method, params = {}) {
|
|
||||||
return JSON.stringify({ method, params });
|
|
||||||
}
|
|
||||||
const bool_attrs = {
|
|
||||||
allowfullscreen: true,
|
|
||||||
allowpaymentrequest: true,
|
|
||||||
async: true,
|
|
||||||
autofocus: true,
|
|
||||||
autoplay: true,
|
|
||||||
checked: true,
|
|
||||||
controls: true,
|
|
||||||
default: true,
|
|
||||||
defer: true,
|
|
||||||
disabled: true,
|
|
||||||
formnovalidate: true,
|
|
||||||
hidden: true,
|
|
||||||
ismap: true,
|
|
||||||
itemscope: true,
|
|
||||||
loop: true,
|
|
||||||
multiple: true,
|
|
||||||
muted: true,
|
|
||||||
nomodule: true,
|
|
||||||
novalidate: true,
|
|
||||||
open: true,
|
|
||||||
playsinline: true,
|
|
||||||
readonly: true,
|
|
||||||
required: true,
|
|
||||||
reversed: true,
|
|
||||||
selected: true,
|
|
||||||
truespeed: true,
|
|
||||||
};
|
|
||||||
2168
dist/style.css
vendored
2168
dist/style.css
vendored
File diff suppressed because it is too large
Load Diff
29
index.css
29
index.css
@@ -1,29 +0,0 @@
|
|||||||
@import url('https://fonts.googleapis.com/css?family=Roboto:300,400,500,700,900&display=swap');
|
|
||||||
|
|
||||||
@tailwind base;
|
|
||||||
@tailwind components;
|
|
||||||
@tailwind utilities;
|
|
||||||
|
|
||||||
::-webkit-scrollbar {
|
|
||||||
width: 7px;
|
|
||||||
}
|
|
||||||
|
|
||||||
::-webkit-scrollbar-track{
|
|
||||||
background: #2D3748;
|
|
||||||
}
|
|
||||||
|
|
||||||
::-webkit-scrollbar-thumb{
|
|
||||||
background: #CBD5E0;
|
|
||||||
}
|
|
||||||
|
|
||||||
::-webkit-scrollbar-thumb:hover{
|
|
||||||
background: #718096;
|
|
||||||
}
|
|
||||||
|
|
||||||
.btn {
|
|
||||||
@apply py-2 px-4 font-semibold rounded-lg shadow-md;
|
|
||||||
}
|
|
||||||
.btn-green {
|
|
||||||
@apply text-white bg-green-500 hover:bg-green-700;
|
|
||||||
}
|
|
||||||
|
|
||||||
@@ -4,13 +4,14 @@
|
|||||||
<meta charset="UTF-8">
|
<meta charset="UTF-8">
|
||||||
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||||
<link href="style.css" rel="stylesheet">
|
<link data-trunk href="assets/favicon.ico" rel="copy-file">
|
||||||
<!-- <link rel="stylesheet" href="https://rsms.me/inter/inter.css"> -->
|
<link data-trunk href="input.css" rel="tailwind-css">
|
||||||
|
|
||||||
<title>R-Dashboard</title>
|
<title>R-Dashboard</title>
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
<div id="main"></div>
|
<div id="main"></div>
|
||||||
<div class="lg:hidden bg-black"></div>
|
<!-- <div class="lg:hidden bg-black"></div> -->
|
||||||
|
|
||||||
</body>
|
</body>
|
||||||
</html>
|
</html>
|
||||||
53
input.css
Normal file
53
input.css
Normal file
@@ -0,0 +1,53 @@
|
|||||||
|
@import url('https://fonts.googleapis.com/css?family=Roboto:300,400,500,700,900&display=swap');
|
||||||
|
|
||||||
|
@tailwind base;
|
||||||
|
@tailwind components;
|
||||||
|
@tailwind utilities;
|
||||||
|
|
||||||
|
::-webkit-scrollbar {
|
||||||
|
width: 7px;
|
||||||
|
}
|
||||||
|
|
||||||
|
::-webkit-scrollbar-track{
|
||||||
|
background: #2D3748;
|
||||||
|
}
|
||||||
|
|
||||||
|
::-webkit-scrollbar-thumb{
|
||||||
|
background: #CBD5E0;
|
||||||
|
}
|
||||||
|
|
||||||
|
::-webkit-scrollbar-thumb:hover{
|
||||||
|
background: #718096;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
.c-input {
|
||||||
|
@apply border-gray-200 rounded-md focus:border-indigo-600 focus:ring-1 focus:ring-opacity-40 focus:ring-indigo-500
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
.c-bubble {
|
||||||
|
/* @apply invisible opacity-0 absolute right-0 z-20 w-48 py-2 mt-2 bg-white rounded-md shadow-xl */
|
||||||
|
/* transition duration-200 ease-in-out */
|
||||||
|
visibility: hidden;
|
||||||
|
opacity: 0;
|
||||||
|
position: absolute;
|
||||||
|
z-index: 20;
|
||||||
|
width: 128px;
|
||||||
|
padding: 2px;
|
||||||
|
margin-top: 4px;
|
||||||
|
background-color: white;
|
||||||
|
border-radius: 5px;
|
||||||
|
box-shadow: 0px 0px 15px rgba(0, 0, 0, 0.1);
|
||||||
|
transition: visibility 0.2s, opacity 0.2s ease-in-out;
|
||||||
|
}
|
||||||
|
/* 添加小箭头 */
|
||||||
|
.c-bubble::before {
|
||||||
|
content: "";
|
||||||
|
position: absolute;
|
||||||
|
top: -10px;
|
||||||
|
right: 15%;
|
||||||
|
transform: translateX(50%);
|
||||||
|
border: 5px solid transparent;
|
||||||
|
border-bottom-color: white;
|
||||||
|
}
|
||||||
@@ -1,11 +1,11 @@
|
|||||||
# r-dashboard ui wasm
|
# r-dashboard
|
||||||
|
|
||||||
by rust + dioxus + tailwindcss
|
by rust + dioxus + tailwindcss
|
||||||
|
|
||||||
* install trunk
|
* install trunk
|
||||||
* install tailwind
|
* install tailwind
|
||||||
* run: trunk serve
|
* run: trunk serve
|
||||||
|
* open http://localhost:8080/
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|||||||
119
src/app.rs
119
src/app.rs
@@ -1,59 +1,62 @@
|
|||||||
/*
|
/*
|
||||||
* @Author: plucky
|
|
||||||
* @Date: 2022-10-11 00:07:29
|
* @Date: 2022-10-11 00:07:29
|
||||||
* @LastEditTime: 2022-10-17 00:53:17
|
* @LastEditTime: 2024-07-06 18:46:11
|
||||||
* @Description:
|
* @Description:
|
||||||
*/
|
*/
|
||||||
#![allow(non_snake_case)]
|
#![allow(non_snake_case)]
|
||||||
|
|
||||||
use dioxus::prelude::*;
|
|
||||||
use crate::{components::*, views::*};
|
use crate::{components::*, views::*};
|
||||||
|
use dioxus::prelude::*;
|
||||||
|
|
||||||
pub fn app(cx: Scope) -> Element {
|
pub fn App() -> Element {
|
||||||
cx.render(rsx! {
|
rsx! {
|
||||||
Router {
|
Router::<Route> {}
|
||||||
self::routes {}
|
|
||||||
}
|
}
|
||||||
})
|
|
||||||
}
|
}
|
||||||
|
|
||||||
// Routes
|
#[derive(Routable, PartialEq, Clone)]
|
||||||
fn routes(cx: Scope) -> Element {
|
enum Route {
|
||||||
cx.render(rsx! {
|
#[route("/")]
|
||||||
Route { to: "/", login::view{}}
|
Login {},
|
||||||
Route { to: "/dashboard", Home{} }
|
#[route("/:..segments")]
|
||||||
Route { to: "/ui-elements", Home{} }
|
NotFound { segments: Vec<String> },
|
||||||
Route { to: "/tables", Home{} }
|
}
|
||||||
Route { to: "/forms", Home{} }
|
|
||||||
Route { to: "/cards", Home{} }
|
|
||||||
Route { to: "/modal", Home{} }
|
|
||||||
Route { to: "/blank", Home{} }
|
|
||||||
|
|
||||||
Redirect {from: "", to: "/" }
|
fn Login() -> Element {
|
||||||
})
|
login::view()
|
||||||
|
}
|
||||||
|
|
||||||
|
// fn Dashboard() -> Element {
|
||||||
|
// let router = router();
|
||||||
|
// let url = router.current_route_string();
|
||||||
|
// tracing::warn!("url: {}", url);
|
||||||
|
// Home("dashboard")
|
||||||
|
// }
|
||||||
|
|
||||||
|
#[component]
|
||||||
|
fn NotFound(segments: Vec<String>) -> Element {
|
||||||
|
tracing::info!("segments: {:?}", segments);
|
||||||
|
if let Some(url) = segments.get(0) {
|
||||||
|
Body(url)
|
||||||
|
} else {
|
||||||
|
Body("dashboard")
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
// Home Page View
|
// Home Page View
|
||||||
fn Home(cx: Scope)->Element{
|
fn Body(url: impl AsRef<str>) -> Element {
|
||||||
let route = use_route(&cx);
|
let url = url.as_ref();
|
||||||
|
rsx! {
|
||||||
let h = route.last_segment().unwrap_or_default();
|
div { class: "flex h-screen bg-gray-200 font-roboto",
|
||||||
|
|
||||||
cx.render(rsx!{
|
|
||||||
div {
|
|
||||||
class: "flex h-screen bg-gray-200 font-roboto",
|
|
||||||
sidebar::view {}
|
sidebar::view {}
|
||||||
div {
|
div { class: "flex-1 flex flex-col overflow-hidden w-full ",
|
||||||
class: "flex-1 flex flex-col overflow-hidden w-full ",
|
|
||||||
header::view {}
|
header::view {}
|
||||||
main {
|
main { class: "flex-1 overflow-x-hidden overflow-y-auto ",
|
||||||
class: "flex-1 overflow-x-hidden overflow-y-auto ",
|
div { class: "container mx-auto px-6 py-8",
|
||||||
div {
|
|
||||||
class: "container mx-auto px-6 py-8",
|
|
||||||
slot {
|
slot {
|
||||||
i{"{h}"}
|
i { "/{url}" }
|
||||||
match h {
|
match url {
|
||||||
"dashboard" => rsx!{ dashboard::view{} },
|
"dashboard" | "home" => rsx!{dashboard::view{} },
|
||||||
"ui-elements" => rsx!{ui_elements::view{} },
|
"ui-elements" => rsx!{ui_elements::view{} },
|
||||||
"tables" => rsx!{tables::view{} },
|
"tables" => rsx!{tables::view{} },
|
||||||
"forms" => rsx!{forms::view{} },
|
"forms" => rsx!{forms::view{} },
|
||||||
@@ -62,48 +65,10 @@ fn Home(cx: Scope)->Element{
|
|||||||
"blank" => rsx!{blank::view{} },
|
"blank" => rsx!{blank::view{} },
|
||||||
_ => rsx!{ div{}}
|
_ => rsx!{ div{}}
|
||||||
}
|
}
|
||||||
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
})
|
|
||||||
}
|
}
|
||||||
|
}
|
||||||
|
|
||||||
// pub fn app2(cx: Scope)->Element{
|
|
||||||
// let show_title = true;
|
|
||||||
// let user_name = Some("bob");
|
|
||||||
// cx.render(rsx!{
|
|
||||||
// div {
|
|
||||||
// class: format_args!("text-2xl font-bold {}", show_title.then(|| "text-red-500").unwrap_or("hidden")),
|
|
||||||
// // Renders nothing by returning None when show_title is false
|
|
||||||
// show_title.then(|| rsx!{
|
|
||||||
// "This is the title"
|
|
||||||
// }),
|
|
||||||
// }
|
|
||||||
|
|
||||||
// div {
|
|
||||||
// // Renders nothing if user_name is None
|
|
||||||
// user_name.map(|name| rsx!("Hello {name}"))
|
|
||||||
// }
|
|
||||||
// })
|
|
||||||
// }
|
|
||||||
|
|
||||||
// router 参数解析
|
|
||||||
// #[derive(Deserialize)]
|
|
||||||
// struct Query { name: String }
|
|
||||||
// // blogpost:post?name=plucky
|
|
||||||
// fn BlogPost(cx: Scope) -> Element {
|
|
||||||
// let post = use_route(&cx).segment("post")?;
|
|
||||||
// let query = use_route(&cx).query::<Query>()?;
|
|
||||||
|
|
||||||
// cx.render(rsx!{
|
|
||||||
// "Viewing post {post}"
|
|
||||||
// "Name selected: {query}"
|
|
||||||
// })
|
|
||||||
// }
|
|
||||||
|
|
||||||
|
|
||||||
|
|||||||
@@ -1,86 +1,66 @@
|
|||||||
use dioxus::{prelude::{*}};
|
use dioxus::prelude::*;
|
||||||
use tracing::info;
|
|
||||||
|
|
||||||
use super::sidebar::IS_SIDEBAR_OPEN;
|
use super::SIDEBAR_OPEN;
|
||||||
|
|
||||||
pub fn view(cx: Scope)->Element{
|
pub fn view() -> Element {
|
||||||
let set_sidebar_open = use_set(&cx,IS_SIDEBAR_OPEN);
|
// 和sidebar共享
|
||||||
let dropdown_open = use_state(&cx, || true);
|
let mut sidebar_open = use_hook(|| SIDEBAR_OPEN.signal());
|
||||||
|
|
||||||
let dropdown_class = match dropdown_open.get() {
|
rsx! {
|
||||||
true => "transition duration-150 ease-in transform scale-95 opacity-0",
|
header { class: "flex items-center justify-between px-6 py-4 bg-white border-b-4 border-indigo-600",
|
||||||
false => "transition duration-150 ease-out transform scale-100 opacity-100",
|
div { class: "flex items-center",
|
||||||
};
|
|
||||||
|
|
||||||
cx.render(rsx!{
|
|
||||||
header {
|
|
||||||
class: "flex items-center justify-between px-6 py-4 bg-white border-b-4 border-indigo-600",
|
|
||||||
div {
|
div {
|
||||||
class: "flex items-center",
|
class: "text-gray-500 focus:outline-none lg:hidden cursor-pointer",
|
||||||
button{
|
|
||||||
class: "text-gray-500 focus:outline-none lg:hidden",//
|
|
||||||
onclick: move |_| {
|
onclick: move |_| {
|
||||||
set_sidebar_open(true);
|
sidebar_open.set(true);
|
||||||
},
|
},
|
||||||
icons::icon_1{}
|
icons::icon_menu {}
|
||||||
}
|
}
|
||||||
|
|
||||||
div {
|
div { class: "relative mx-4 lg:mx-0",
|
||||||
class: "relative mx-4 lg:mx-0",
|
span { class: "absolute inset-y-0 left-0 flex items-center pl-3 ",
|
||||||
span {
|
icons::icon_search {}
|
||||||
class: "absolute inset-y-0 left-0 flex items-center pl-3 ",
|
|
||||||
icons::icon_2{}
|
|
||||||
}
|
}
|
||||||
input {
|
input {
|
||||||
class: "w-32 pl-10 pr-4 text-indigo-600 border-gray-200 rounded-md sm:w-64 focus:border-indigo-600 focus:ring focus:ring-opacity-40 focus:ring-indigo-500",
|
class: "w-32 pl-10 pr-4 text-indigo-600 sm:w-64 c-input",
|
||||||
placeholder: "Search",
|
placeholder: "Search",
|
||||||
r#type: "text",
|
r#type: "text",
|
||||||
value: "",
|
value: ""
|
||||||
}
|
}
|
||||||
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
div { class: "flex items-center",
|
||||||
|
div { class: "flex mx-4 text-gray-600 focus:outline-none cursor-pointer", icons::icon_message {} }
|
||||||
|
|
||||||
|
// 个人菜单
|
||||||
|
div { class: "group relative",
|
||||||
div {
|
div {
|
||||||
class: "flex items-center",
|
class: "relative z-10 block w-8 h-8 overflow-hidden rounded-full shadow focus:outline-none cursor-pointer",
|
||||||
button {
|
// onclick: move |_| {
|
||||||
class: "flex mx-4 text-gray-600 focus:outline-none",
|
// dropdown_open.set(!dropdown_open());
|
||||||
icons::icon_3{}
|
// },
|
||||||
}
|
|
||||||
|
|
||||||
div {
|
|
||||||
class: "relative",
|
|
||||||
button{
|
|
||||||
class: "relative z-10 block w-8 h-8 overflow-hidden rounded-full shadow focus:outline-none",
|
|
||||||
// @click=\"dropdownOpen = !dropdownOpen\"\n
|
|
||||||
onclick: move |_| {
|
|
||||||
dropdown_open.set(!dropdown_open);
|
|
||||||
},
|
|
||||||
img {
|
img {
|
||||||
class: "object-cover w-full h-full",
|
class: "object-cover w-full h-full",
|
||||||
alt: "Your avatar",
|
alt: "Your avatar",
|
||||||
src: "https://images.unsplash.com/photo-1528892952291-009c663ce843?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=296&q=80",
|
src: "https://images.unsplash.com/photo-1528892952291-009c663ce843?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=296&q=80"
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
div{
|
// div {
|
||||||
class:"fixed inset-0 z-10 w-full h-full",//
|
// class: "fixed inset-0 z-10 w-full h-full",
|
||||||
// 点击屏幕关闭菜单
|
// // 点击屏幕关闭菜单
|
||||||
hidden: "{dropdown_open}",
|
// hidden: "{!dropdown_open()}",
|
||||||
onclick: move |_| {
|
// onclick: move |_| {
|
||||||
dropdown_open.set(true);
|
// dropdown_open.set(false);
|
||||||
},
|
// },
|
||||||
|
// }
|
||||||
}
|
|
||||||
|
|
||||||
div {
|
div {
|
||||||
class:"absolute right-0 z-20 w-48 py-2 mt-2 bg-white rounded-md shadow-xl {dropdown_class}",
|
// class: "group-hover:visible group-hover:opacity-100 invisible opacity-0 absolute right-0 z-20 w-48 py-2 mt-2 bg-white rounded-md shadow-xl transition duration-200 ease-in-out",
|
||||||
hidden: "{dropdown_open}",
|
class: "c-bubble w-40 right-0 group-hover:visible group-hover:opacity-100 ",
|
||||||
|
// hidden: "{!dropdown_open()}",
|
||||||
// onmouseout onmouseover
|
// onmouseout onmouseover
|
||||||
onmouseout: move |_| {
|
|
||||||
info!("onmouseout");
|
|
||||||
},
|
|
||||||
// style: "display:block",
|
|
||||||
|
|
||||||
a {
|
a {
|
||||||
class: "block px-4 py-2 text-sm text-gray-700 hover:bg-indigo-600 hover:text-white",
|
class: "block px-4 py-2 text-sm text-gray-700 hover:bg-indigo-600 hover:text-white",
|
||||||
href: "#",
|
href: "#",
|
||||||
@@ -97,73 +77,70 @@ pub fn view(cx: Scope)->Element{
|
|||||||
href: "/",
|
href: "/",
|
||||||
"Log out"
|
"Log out"
|
||||||
}
|
}
|
||||||
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
}
|
||||||
})
|
|
||||||
}
|
}
|
||||||
|
|
||||||
mod icons {
|
mod icons {
|
||||||
use dioxus::prelude::*;
|
use dioxus::prelude::*;
|
||||||
|
use dioxus_html_macro::html;
|
||||||
|
|
||||||
pub fn icon_1(cx: Scope)->Element{
|
pub fn icon_menu() -> Element {
|
||||||
cx.render(rsx!{
|
html! {
|
||||||
svg{
|
<svg
|
||||||
class:"w-6 h-6",
|
class= "w-6 h-6"
|
||||||
view_box:"0 0 24 24",
|
view_box= "0 0 24 24"
|
||||||
fill:"none",
|
fill= "none"
|
||||||
xmlns:"http://www.w3.org/2000/svg",
|
xmlns= "http://www.w3.org/2000/svg" >
|
||||||
path{
|
<path
|
||||||
d:"M4 6H20M4 12H20M4 18H11",
|
d= "M4 6H20M4 12H20M4 18H11"
|
||||||
stroke:"currentColor",
|
stroke= "currentColor"
|
||||||
stroke_width:"2",
|
stroke_width= "2"
|
||||||
stroke_linecap:"round",
|
stroke_linecap= "round"
|
||||||
stroke_linejoin:"round",
|
stroke_linejoin= "round"
|
||||||
|
/>
|
||||||
|
</svg>
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
pub fn icon_search() -> Element {
|
||||||
|
html! {
|
||||||
|
<svg
|
||||||
|
class= "w-5 h-5 text-gray-500"
|
||||||
|
view_box= "0 0 24 24"
|
||||||
|
fill= "none"
|
||||||
|
xmlns= "http://www.w3.org/2000/svg" >
|
||||||
|
|
||||||
|
<path
|
||||||
|
d= "M21 21L15 15M17 10C17 13.866 13.866 17 10 17C6.13401 17 3 13.866 3 10C3 6.13401 6.13401 3 10 3C13.866 3 17 6.13401 17 10Z"
|
||||||
|
stroke= "currentColor"
|
||||||
|
stroke_width= "2"
|
||||||
|
stroke_linecap= "round"
|
||||||
|
stroke_linejoin= "round"
|
||||||
|
/>
|
||||||
|
</svg>
|
||||||
}
|
}
|
||||||
})
|
|
||||||
}
|
}
|
||||||
|
|
||||||
pub fn icon_2(cx: Scope)->Element{
|
pub fn icon_message() -> Element {
|
||||||
cx.render(rsx!{
|
html! {
|
||||||
svg{
|
<svg
|
||||||
class:"w-5 h-5 text-gray-500",
|
class="w-6 h-6"
|
||||||
view_box:"0 0 24 24",
|
view_box="0 0 24 24"
|
||||||
fill:"none",
|
fill="none"
|
||||||
xmlns:"http://www.w3.org/2000/svg",
|
xmlns="http://www.w3.org/2000/svg">
|
||||||
path{
|
|
||||||
d:"M21 21L15 15M17 10C17 13.866 13.866 17 10 17C6.13401 17 3 13.866 3 10C3 6.13401 6.13401 3 10 3C13.866 3 17 6.13401 17 10Z",
|
|
||||||
stroke:"currentColor",
|
|
||||||
stroke_width:"2",
|
|
||||||
stroke_linecap:"round",
|
|
||||||
stroke_linejoin:"round",
|
|
||||||
}
|
|
||||||
}
|
|
||||||
})
|
|
||||||
}
|
|
||||||
|
|
||||||
pub fn icon_3(cx: Scope)->Element{
|
<path
|
||||||
cx.render(rsx!{
|
d= "M15 17H20L18.5951 15.5951C18.2141 15.2141 18 14.6973 18 14.1585V11C18 8.38757 16.3304 6.16509 14 5.34142V5C14 3.89543 13.1046 3 12 3C10.8954 3 10 3.89543 10 5V5.34142C7.66962 6.16509 6 8.38757 6 11V14.1585C6 14.6973 5.78595 15.2141 5.40493 15.5951L4 17H9M15 17V18C15 19.6569 13.6569 21 12 21C10.3431 21 9 19.6569 9 18V17M15 17H9"
|
||||||
svg{
|
stroke= "currentColor"
|
||||||
class:"w-6 h-6",
|
stroke_width= "2"
|
||||||
view_box:"0 0 24 24",
|
stroke_linecap= "round"
|
||||||
fill:"none",
|
stroke_linejoin= "round"
|
||||||
xmlns:"http://www.w3.org/2000/svg",
|
/>
|
||||||
path{
|
</svg>
|
||||||
d:"M15 17H20L18.5951 15.5951C18.2141 15.2141 18 14.6973 18 14.1585V11C18 8.38757 16.3304 6.16509 14 5.34142V5C14 3.89543 13.1046 3 12 3C10.8954 3 10 3.89543 10 5V5.34142C7.66962 6.16509 6 8.38757 6 11V14.1585C6 14.6973 5.78595 15.2141 5.40493 15.5951L4 17H9M15 17V18C15 19.6569 13.6569 21 12 21C10.3431 21 9 19.6569 9 18V17M15 17H9",
|
|
||||||
stroke:"currentColor",
|
|
||||||
stroke_width:"2",
|
|
||||||
stroke_linecap:"round",
|
|
||||||
stroke_linejoin:"round",
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
})
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
}
|
}
|
||||||
@@ -1,20 +1,15 @@
|
|||||||
/*
|
/*
|
||||||
* @Author: plucky
|
|
||||||
* @Date: 2022-10-11 23:13:17
|
* @Date: 2022-10-11 23:13:17
|
||||||
* @LastEditTime: 2022-10-14 12:33:51
|
* @LastEditTime: 2024-07-06 00:05:28
|
||||||
* @Description:
|
* @Description:
|
||||||
*/
|
*/
|
||||||
|
|
||||||
|
use dioxus::signals::{GlobalSignal, Signal};
|
||||||
|
|
||||||
pub mod header;
|
pub mod header;
|
||||||
pub mod sidebar;
|
pub mod sidebar;
|
||||||
|
|
||||||
|
// #[derive(Clone, Copy)]
|
||||||
|
// struct SidebarOpen(bool);
|
||||||
|
|
||||||
// pub fn view(cx: Scope)->Element{
|
static SIDEBAR_OPEN: GlobalSignal<bool> = Signal::global(|| false);
|
||||||
|
|
||||||
// cx.render(rsx!{
|
|
||||||
// div {
|
|
||||||
// }
|
|
||||||
// })
|
|
||||||
// }
|
|
||||||
|
|||||||
@@ -1,23 +1,19 @@
|
|||||||
/*
|
/*
|
||||||
* @Author: plucky
|
|
||||||
* @Date: 2022-10-11 18:53:17
|
* @Date: 2022-10-11 18:53:17
|
||||||
* @LastEditTime: 2022-10-17 09:52:40
|
* @LastEditTime: 2024-07-07 21:42:00
|
||||||
* @Description:
|
* @Description:
|
||||||
*/
|
*/
|
||||||
|
|
||||||
use dioxus::prelude::*;
|
use dioxus::prelude::*;
|
||||||
use dioxus::prelude::Atom;
|
|
||||||
|
|
||||||
pub static IS_SIDEBAR_OPEN: Atom<bool> = |_| false;
|
use super::SIDEBAR_OPEN;
|
||||||
|
|
||||||
pub fn view(cx:Scope)->Element{
|
pub fn view() -> Element {
|
||||||
let route = use_route(&cx);
|
let route = router();
|
||||||
let route_name = route.last_segment().unwrap_or_default();
|
let route_name = route.current_route_string();
|
||||||
|
// 共享状态
|
||||||
let set_sidebar_open = use_set(&cx,IS_SIDEBAR_OPEN);
|
let mut sidebar_open = use_hook(|| SIDEBAR_OPEN.signal());
|
||||||
let is_sidebar_open = use_read(&cx,IS_SIDEBAR_OPEN);
|
let mut menu_open = use_signal(|| vec![false, false]);
|
||||||
|
|
||||||
let is_menu_open = use_ref(&cx,||vec![false,false]);
|
|
||||||
|
|
||||||
let highlight_class = |e: &str| {
|
let highlight_class = |e: &str| {
|
||||||
match e == route_name {
|
match e == route_name {
|
||||||
@@ -26,81 +22,62 @@ pub fn view(cx:Scope)->Element{
|
|||||||
}
|
}
|
||||||
};
|
};
|
||||||
|
|
||||||
cx.render(rsx!(
|
let toggle_sidebar = if sidebar_open() {
|
||||||
// class: format_args!("flex {} bg-gray-900 ",if *is_sidebar_open { "" } else { "hidden lg:block" }),
|
"translate-x-0 ease-out"
|
||||||
// mask
|
} else {
|
||||||
div{
|
"-translate-x-full ease-in"
|
||||||
onclick: move |_| {
|
};
|
||||||
set_sidebar_open(false);
|
|
||||||
},
|
|
||||||
class: format_args!("fixed inset-0 z-20 transition-opacity bg-black opacity-50 lg:hidden {}",if *is_sidebar_open {"block"} else {"hidden"}),
|
|
||||||
// hidden: format_args!("{}",!is_sidebar_open),
|
|
||||||
|
|
||||||
|
rsx!(
|
||||||
|
// this mask click then sidebar will be closed
|
||||||
|
div {
|
||||||
|
onmouseover: move |_| {
|
||||||
|
sidebar_open.set(false);
|
||||||
|
},
|
||||||
|
class: "fixed inset-0 left-14 z-20 bg-black opacity-10 lg:hidden",
|
||||||
|
hidden: !sidebar_open()
|
||||||
}
|
}
|
||||||
|
|
||||||
// sidebar
|
// sidebar
|
||||||
div {
|
div {
|
||||||
class: format_args!("fixed inset-y-0 left-0 z-30 w-56 overflow-y-auto transition duration-300 transform bg-gray-900 lg:translate-x-0 lg:static lg:inset-0 {}",
|
class: "fixed inset-y-0 left-0 z-30 w-50 overflow-y-auto transition duration-300 bg-gray-900 lg:translate-x-0 lg:static lg:inset-0 {toggle_sidebar}",
|
||||||
if *is_sidebar_open { "translate-x-0 ease-out " } else {"-translate-x-full ease-in" }),
|
|
||||||
|
|
||||||
// title
|
// title
|
||||||
div {
|
div { class: "flex items-center justify-center mt-8 ",
|
||||||
class: "flex items-center justify-center mt-8 ",
|
div { class: "flex items-center",
|
||||||
div {
|
icons::icon_logo {}
|
||||||
class: "flex items-center",
|
span { class: "hidden lg:block mx-2 text-2xl font-semibold text-white", "Dashboard" }
|
||||||
icons::icon_1 {}
|
|
||||||
span {
|
|
||||||
class: "mx-2 text-2xl font-semibold text-white",
|
|
||||||
"R-Dashboard"
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
// menu
|
// menu
|
||||||
nav{
|
nav { class: "mt-10 ",
|
||||||
class: "mt-10 ",//
|
Link { class: highlight_class("dashboard"), to: "/dashboard",
|
||||||
// router-link
|
icons::icon_chart {}
|
||||||
Link{
|
|
||||||
class: highlight_class("dashboard"),
|
|
||||||
//to="/dashboard"
|
|
||||||
to: "/dashboard",
|
|
||||||
icons::icon_2 {}
|
|
||||||
span { class: "mx-4", "Dashboard" }
|
span { class: "mx-4", "Dashboard" }
|
||||||
}
|
}
|
||||||
Link{
|
Link { class: highlight_class("ui-elements"), to: "/ui-elements",
|
||||||
class: highlight_class("ui-elements"),
|
icons::icon_win {}
|
||||||
to: "/ui-elements",
|
|
||||||
icons::icon_3 {}
|
|
||||||
span { class: "mx-4", "UI Elements" }
|
span { class: "mx-4", "UI Elements" }
|
||||||
}
|
}
|
||||||
Link{
|
Link { class: highlight_class("tables"), to: "/tables",
|
||||||
class: highlight_class("tables"),
|
icons::icon_table {}
|
||||||
to: "/tables",
|
|
||||||
icons::icon_4 {}
|
|
||||||
span { class: "mx-4", "Tables" }
|
span { class: "mx-4", "Tables" }
|
||||||
}
|
}
|
||||||
Link{
|
Link { class: highlight_class("forms"), to: "/forms",
|
||||||
class: highlight_class("forms"),
|
icons::icon_form {}
|
||||||
to: "/forms",
|
|
||||||
icons::icon_5 {}
|
|
||||||
span { class: "mx-4", "Forms" }
|
span { class: "mx-4", "Forms" }
|
||||||
}
|
}
|
||||||
Link{
|
Link { class: highlight_class("cards"), to: "/cards",
|
||||||
class: highlight_class("cards"),
|
icons::icon_card {}
|
||||||
to: "/cards",
|
|
||||||
icons::icon_6 {}
|
|
||||||
span { class: "mx-4", "Cards" }
|
span { class: "mx-4", "Cards" }
|
||||||
}
|
}
|
||||||
Link{
|
Link { class: highlight_class("modal"), to: "/modal",
|
||||||
class: highlight_class("modal"),
|
icons::icon_model {}
|
||||||
to: "/modal",
|
|
||||||
icons::icon_7 {}
|
|
||||||
span { class: "mx-4", "Modal" }
|
span { class: "mx-4", "Modal" }
|
||||||
}
|
}
|
||||||
|
|
||||||
Link{
|
Link { class: highlight_class("blank"), to: "/blank",
|
||||||
class: highlight_class("blank"),
|
icons::icon_blank {}
|
||||||
to: "/blank",
|
|
||||||
icons::icon_8 {}
|
|
||||||
span { class: "mx-4", "Blank" }
|
span { class: "mx-4", "Blank" }
|
||||||
}
|
}
|
||||||
|
|
||||||
@@ -109,57 +86,41 @@ pub fn view(cx:Scope)->Element{
|
|||||||
div {
|
div {
|
||||||
class: "flex items-center px-6 py-2 mt-4 duration-200 border-l-4 border-gray-900 text-gray-500 hover:bg-gray-600 hover:bg-opacity-25 hover:text-gray-100 cursor-pointer",
|
class: "flex items-center px-6 py-2 mt-4 duration-200 border-l-4 border-gray-900 text-gray-500 hover:bg-gray-600 hover:bg-opacity-25 hover:text-gray-100 cursor-pointer",
|
||||||
onclick: move |_| {
|
onclick: move |_| {
|
||||||
let mut is_menu_open = is_menu_open.write();
|
let mut is_menu_open = menu_open.write();
|
||||||
is_menu_open[0] = !is_menu_open[0];
|
is_menu_open[0] = !is_menu_open[0];
|
||||||
},
|
},
|
||||||
|
|
||||||
div {
|
div { class: "flex items-center space-x-4",
|
||||||
class: "flex items-center space-x-4",
|
icons::icon_chart {}
|
||||||
icons::icon_2 {}
|
span { "Test" }
|
||||||
span {
|
div { class: format!("{}", if menu_open()[0] { "rotate-180" } else { "" }),
|
||||||
"Test"
|
|
||||||
}
|
|
||||||
div{
|
|
||||||
class: format_args!{"{}",if is_menu_open.read()[0] {"rotate-180"} else {""}} ,
|
|
||||||
icons::icon_up_down {}
|
icons::icon_up_down {}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
div{
|
div { class: format!("ml-8 mt-1 {}", if menu_open()[0] { "block" } else { "hidden" }),
|
||||||
class: format_args!("ml-8 mt-1 {}", if is_menu_open.read()[0] {"block"} else {"hidden"}),
|
Link { class: highlight_class("blank"), to: "/blank",
|
||||||
Link{
|
icons::icon_blank {}
|
||||||
class: highlight_class("blank"),
|
|
||||||
to: "/blank",
|
|
||||||
icons::icon_8 {}
|
|
||||||
span { class: "mx-4", "Blank" }
|
span { class: "mx-4", "Blank" }
|
||||||
}
|
}
|
||||||
Link{
|
Link { class: highlight_class("blank2"), to: "/blank",
|
||||||
class: highlight_class("blank2"),
|
icons::icon_blank {}
|
||||||
to: "/blank",
|
|
||||||
icons::icon_8 {}
|
|
||||||
span { class: "mx-4", "Blank" }
|
span { class: "mx-4", "Blank" }
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
}
|
}
|
||||||
// end
|
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
}
|
}
|
||||||
))
|
)
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
||||||
mod icons {
|
mod icons {
|
||||||
use dioxus::prelude::*;
|
use dioxus::prelude::*;
|
||||||
use dioxus_html_macro::html;
|
use dioxus_html_macro::html;
|
||||||
|
|
||||||
pub fn icon_1(cx: Scope)->Element{
|
pub fn icon_logo() -> Element {
|
||||||
cx.render(html!{
|
html! {
|
||||||
<svg
|
<svg
|
||||||
class="w-12 h-12"
|
class="w-12 h-12"
|
||||||
view_box="0 0 512 512"
|
view_box="0 0 512 512"
|
||||||
@@ -179,10 +140,10 @@ mod icons{
|
|||||||
fill="white"
|
fill="white"
|
||||||
/>
|
/>
|
||||||
</svg>
|
</svg>
|
||||||
})
|
|
||||||
}
|
}
|
||||||
pub fn icon_2(cx:Scope)->Element{
|
}
|
||||||
cx.render(html!{
|
pub fn icon_chart() -> Element {
|
||||||
|
html! {
|
||||||
<svg
|
<svg
|
||||||
class="w-5 h-5"
|
class="w-5 h-5"
|
||||||
view_box="0 0 20 20"
|
view_box="0 0 20 20"
|
||||||
@@ -198,11 +159,11 @@ mod icons{
|
|||||||
fill="currentColor"
|
fill="currentColor"
|
||||||
/>
|
/>
|
||||||
</svg>
|
</svg>
|
||||||
})
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
pub fn icon_3(cx:Scope)->Element{
|
pub fn icon_win() -> Element {
|
||||||
cx.render(html!(
|
html!(
|
||||||
<svg
|
<svg
|
||||||
class="w-5 h-5"
|
class="w-5 h-5"
|
||||||
view_box="0 0 20 20"
|
view_box="0 0 20 20"
|
||||||
@@ -226,11 +187,11 @@ mod icons{
|
|||||||
fill="currentColor"
|
fill="currentColor"
|
||||||
/>
|
/>
|
||||||
</svg>
|
</svg>
|
||||||
))
|
)
|
||||||
}
|
}
|
||||||
|
|
||||||
pub fn icon_4(cx:Scope)->Element{
|
pub fn icon_table() -> Element {
|
||||||
cx.render(html!(
|
html!(
|
||||||
<svg
|
<svg
|
||||||
class="w-5 h-5"
|
class="w-5 h-5"
|
||||||
view_box="0 0 20 20"
|
view_box="0 0 20 20"
|
||||||
@@ -250,11 +211,11 @@ mod icons{
|
|||||||
fill="currentColor"
|
fill="currentColor"
|
||||||
/>
|
/>
|
||||||
</svg>
|
</svg>
|
||||||
))
|
)
|
||||||
}
|
}
|
||||||
|
|
||||||
pub fn icon_5(cx:Scope)->Element{
|
pub fn icon_form() -> Element {
|
||||||
cx.render(html!(
|
html!(
|
||||||
<svg class="w-5 h-5" fill="currentColor" view_box="0 0 20 20">
|
<svg class="w-5 h-5" fill="currentColor" view_box="0 0 20 20">
|
||||||
<path
|
<path
|
||||||
d="M17.414 2.586a2 2 0 00-2.828 0L7 10.172V13h2.828l7.586-7.586a2 2 0 000-2.828z"
|
d="M17.414 2.586a2 2 0 00-2.828 0L7 10.172V13h2.828l7.586-7.586a2 2 0 000-2.828z"
|
||||||
@@ -265,48 +226,47 @@ mod icons{
|
|||||||
clip_rule="evenodd"
|
clip_rule="evenodd"
|
||||||
/>
|
/>
|
||||||
</svg>
|
</svg>
|
||||||
))
|
)
|
||||||
}
|
}
|
||||||
|
|
||||||
pub fn icon_6(cx:Scope)->Element{
|
pub fn icon_card() -> Element {
|
||||||
cx.render(html!(
|
html!(
|
||||||
<svg xmlns="http://www.w3.org/2000/svg" class="w-5 h-5" view_box="0 0 20 20" fill="currentColor">
|
<svg xmlns="http://www.w3.org/2000/svg" class="w-5 h-5" view_box="0 0 20 20" fill="currentColor">
|
||||||
<path d="M4 4a2 2 0 00-2 2v1h16V6a2 2 0 00-2-2H4z" />
|
<path d="M4 4a2 2 0 00-2 2v1h16V6a2 2 0 00-2-2H4z" />
|
||||||
<path fill_rule="evenodd" d="M18 9H2v5a2 2 0 002 2h12a2 2 0 002-2V9zM4 13a1 1 0 011-1h1a1 1 0 110 2H5a1 1 0 01-1-1zm5-1a1 1 0 100 2h1a1 1 0 100-2H9z"
|
<path fill_rule="evenodd" d="M18 9H2v5a2 2 0 002 2h12a2 2 0 002-2V9zM4 13a1 1 0 011-1h1a1 1 0 110 2H5a1 1 0 01-1-1zm5-1a1 1 0 100 2h1a1 1 0 100-2H9z"
|
||||||
clip_rule="evenodd" />
|
clip_rule="evenodd" />
|
||||||
</svg>
|
</svg>
|
||||||
))
|
)
|
||||||
}
|
}
|
||||||
|
|
||||||
pub fn icon_7(cx:Scope)->Element{
|
pub fn icon_model() -> Element {
|
||||||
cx.render(html!(
|
html!(
|
||||||
<svg xmlns="http://www.w3.org/2000/svg" class="w-5 h-5" view_box="0 0 20 20" fill="currentColor">
|
<svg xmlns="http://www.w3.org/2000/svg" class="w-5 h-5" view_box="0 0 20 20" fill="currentColor">
|
||||||
<path d="M3 12v3c0 1.657 3.134 3 7 3s7-1.343 7-3v-3c0 1.657-3.134 3-7 3s-7-1.343-7-3z" />
|
<path d="M3 12v3c0 1.657 3.134 3 7 3s7-1.343 7-3v-3c0 1.657-3.134 3-7 3s-7-1.343-7-3z" />
|
||||||
<path d="M3 7v3c0 1.657 3.134 3 7 3s7-1.343 7-3V7c0 1.657-3.134 3-7 3S3 8.657 3 7z" />
|
<path d="M3 7v3c0 1.657 3.134 3 7 3s7-1.343 7-3V7c0 1.657-3.134 3-7 3S3 8.657 3 7z" />
|
||||||
<path d="M17 5c0 1.657-3.134 3-7 3S3 6.657 3 5s3.134-3 7-3 7 1.343 7 3z" />
|
<path d="M17 5c0 1.657-3.134 3-7 3S3 6.657 3 5s3.134-3 7-3 7 1.343 7 3z" />
|
||||||
</svg>
|
</svg>
|
||||||
))
|
)
|
||||||
}
|
}
|
||||||
|
|
||||||
pub fn icon_8(cx:Scope)->Element{
|
pub fn icon_blank() -> Element {
|
||||||
cx.render(html!(
|
html!(
|
||||||
<svg class="w-5 h-5" fill="currentColor" view_box="0 0 20 20">
|
<svg class="w-5 h-5" fill="currentColor" view_box="0 0 20 20">
|
||||||
<path
|
<path
|
||||||
d="M3 4a1 1 0 011-1h12a1 1 0 011 1v2a1 1 0 01-1 1H4a1 1 0 01-1-1V4zM3 10a1 1 0 011-1h6a1 1 0 011 1v6a1 1 0 01-1 1H4a1 1 0 01-1-1v-6zM14 9a1 1 0 00-1 1v6a1 1 0 001 1h2a1 1 0 001-1v-6a1 1 0 00-1-1h-2z"
|
d="M3 4a1 1 0 011-1h12a1 1 0 011 1v2a1 1 0 01-1 1H4a1 1 0 01-1-1V4zM3 10a1 1 0 011-1h6a1 1 0 011 1v6a1 1 0 01-1 1H4a1 1 0 01-1-1v-6zM14 9a1 1 0 00-1 1v6a1 1 0 001 1h2a1 1 0 001-1v-6a1 1 0 00-1-1h-2z"
|
||||||
/>
|
/>
|
||||||
</svg>
|
</svg>
|
||||||
))
|
)
|
||||||
}
|
}
|
||||||
|
|
||||||
// #[inline_props]
|
// #[inline_props]
|
||||||
pub fn icon_up_down(cx:Scope)->Element{
|
pub fn icon_up_down() -> Element {
|
||||||
cx.render(html!(
|
html!(
|
||||||
<svg class="w-3 h-3"
|
<svg class="w-3 h-3"
|
||||||
fill="currentColor"
|
fill="currentColor"
|
||||||
view_box="0 0 12 12">
|
view_box="0 0 12 12">
|
||||||
<path d="M5.9 11.4L.5 6l1.4-1.4 4 4 4-4L11.3 6z"></path>
|
<path d="M5.9 11.4L.5 6l1.4-1.4 4 4 4-4L11.3 6z"></path>
|
||||||
</svg>
|
</svg>
|
||||||
))
|
)
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|||||||
@@ -1,12 +1,5 @@
|
|||||||
/*
|
/*
|
||||||
* @Author: plucky
|
|
||||||
* @Date: 2022-10-11 00:07:45
|
* @Date: 2022-10-11 00:07:45
|
||||||
* @LastEditTime: 2022-10-14 16:52:30
|
* @LastEditTime: 2024-07-05 18:29:21
|
||||||
* @Description:
|
* @Description:
|
||||||
*/
|
*/
|
||||||
|
|
||||||
pub mod app;
|
|
||||||
pub mod components;
|
|
||||||
pub mod views;
|
|
||||||
pub mod modules;
|
|
||||||
|
|
||||||
|
|||||||
16
src/main.rs
16
src/main.rs
@@ -1,16 +1,20 @@
|
|||||||
/*
|
/*
|
||||||
* @Author: plucky
|
|
||||||
* @Date: 2022-10-10 23:58:17
|
* @Date: 2022-10-10 23:58:17
|
||||||
* @LastEditTime: 2022-10-15 14:02:24
|
* @LastEditTime: 2024-07-06 18:52:26
|
||||||
* @Description:
|
* @Description:
|
||||||
*/
|
*/
|
||||||
|
pub mod app;
|
||||||
|
pub mod components;
|
||||||
|
pub mod modules;
|
||||||
|
pub mod views;
|
||||||
|
|
||||||
use r_dashboard::app::*;
|
use app::App;
|
||||||
|
|
||||||
|
|
||||||
// trunk serve
|
// trunk serve
|
||||||
fn main() {
|
fn main() {
|
||||||
console_error_panic_hook::set_once();
|
console_error_panic_hook::set_once();
|
||||||
tracing_wasm::set_as_global_default();
|
let mut cfg = tracing_wasm::WASMLayerConfigBuilder::default();
|
||||||
dioxus::web::launch(app);
|
cfg.set_max_level(tracing::Level::DEBUG);
|
||||||
|
tracing_wasm::set_as_global_default_with_config(cfg.build());
|
||||||
|
dioxus::launch(App);
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -1,24 +1,22 @@
|
|||||||
/*
|
/*
|
||||||
* @Author: plucky
|
|
||||||
* @Date: 2022-10-14 18:11:55
|
* @Date: 2022-10-14 18:11:55
|
||||||
* @LastEditTime: 2022-10-14 23:48:07
|
* @LastEditTime: 2024-07-05 12:38:05
|
||||||
* @Description:
|
* @Description:
|
||||||
*/
|
*/
|
||||||
|
|
||||||
use dioxus::prelude::Atom;
|
use dioxus::signals::{GlobalSignal, Signal};
|
||||||
|
|
||||||
use super::*;
|
use super::*;
|
||||||
|
|
||||||
|
#[derive(Clone, PartialEq)]
|
||||||
pub struct UseTableData {
|
pub struct UseTableData {
|
||||||
pub simpleTableData: Vec<SimpleTableData>,
|
pub simpleTableData: Vec<SimpleTableData>,
|
||||||
pub paginatedTableData: Vec<PaginatedTableData>,
|
pub paginatedTableData: Vec<PaginatedTableData>,
|
||||||
pub wideTableData: Vec<WideTableData>,
|
pub wideTableData: Vec<WideTableData>,
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
||||||
/// 表格测试数据 for tables
|
/// 表格测试数据 for tables
|
||||||
pub static USE_TABLE_DATA: Atom<UseTableData> = |_| {
|
pub static USE_TABLE_DATA: GlobalSignal<UseTableData> = Signal::global(|| {
|
||||||
UseTableData{
|
UseTableData{
|
||||||
simpleTableData: vec![
|
simpleTableData: vec![
|
||||||
SimpleTableData{
|
SimpleTableData{
|
||||||
@@ -79,4 +77,4 @@ pub static USE_TABLE_DATA: Atom<UseTableData> = |_| {
|
|||||||
}
|
}
|
||||||
}).collect(),
|
}).collect(),
|
||||||
}
|
}
|
||||||
};
|
});
|
||||||
|
|||||||
@@ -3,7 +3,7 @@
|
|||||||
pub mod demo_data;
|
pub mod demo_data;
|
||||||
|
|
||||||
/// USERS for dashboard
|
/// USERS for dashboard
|
||||||
#[derive(Debug )]
|
#[derive(Debug, Clone, PartialEq)]
|
||||||
pub struct User {
|
pub struct User {
|
||||||
pub name: String,
|
pub name: String,
|
||||||
pub email: String,
|
pub email: String,
|
||||||
@@ -14,12 +14,12 @@ pub struct User {
|
|||||||
}
|
}
|
||||||
|
|
||||||
/// simple data for talbes
|
/// simple data for talbes
|
||||||
|
#[derive(Debug, Clone, PartialEq)]
|
||||||
pub struct SimpleTableData {
|
pub struct SimpleTableData {
|
||||||
pub city: String,
|
pub city: String,
|
||||||
pub totalOrders: String,
|
pub totalOrders: String,
|
||||||
}
|
}
|
||||||
|
#[derive(Debug, Clone, PartialEq)]
|
||||||
|
|
||||||
pub struct PaginatedTableData {
|
pub struct PaginatedTableData {
|
||||||
pub picture: String,
|
pub picture: String,
|
||||||
pub name: String,
|
pub name: String,
|
||||||
@@ -28,8 +28,7 @@ pub struct PaginatedTableData {
|
|||||||
pub status: String,
|
pub status: String,
|
||||||
pub statusColor: String,
|
pub statusColor: String,
|
||||||
}
|
}
|
||||||
|
#[derive(Debug, Clone, PartialEq)]
|
||||||
|
|
||||||
pub struct WideTableData {
|
pub struct WideTableData {
|
||||||
pub name: String,
|
pub name: String,
|
||||||
pub email: String,
|
pub email: String,
|
||||||
|
|||||||
@@ -1,17 +1,15 @@
|
|||||||
/*
|
/*
|
||||||
* @Author: plucky
|
|
||||||
* @Date: 2022-10-15 09:52:33
|
* @Date: 2022-10-15 09:52:33
|
||||||
* @LastEditTime: 2022-10-15 09:58:23
|
* @LastEditTime: 2024-07-05 08:46:05
|
||||||
* @Description:
|
* @Description:
|
||||||
*/
|
*/
|
||||||
|
|
||||||
use dioxus::prelude::*;
|
use dioxus::prelude::*;
|
||||||
use dioxus_html_macro::html;
|
use dioxus_html_macro::html;
|
||||||
|
|
||||||
pub fn view(cx: Scope)->Element{
|
pub fn view() -> Element {
|
||||||
|
html! {
|
||||||
cx.render(html!{
|
|
||||||
<h3 class="text-gray-700 text-3xl font-medium">"Blank Page"</h3>
|
<h3 class="text-gray-700 text-3xl font-medium">"Blank Page"</h3>
|
||||||
|
|
||||||
})
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -1,110 +1,73 @@
|
|||||||
/*
|
/*
|
||||||
* @Author: plucky
|
|
||||||
* @Date: 2022-10-15 09:47:37
|
* @Date: 2022-10-15 09:47:37
|
||||||
* @LastEditTime: 2022-10-15 09:51:33
|
* @LastEditTime: 2024-07-05 12:59:03
|
||||||
* @Description:
|
* @Description:
|
||||||
*/
|
*/
|
||||||
use dioxus::prelude::*;
|
use dioxus::prelude::*;
|
||||||
|
|
||||||
pub fn view(cx: Scope)->Element{
|
pub fn view() -> Element {
|
||||||
|
rsx! {
|
||||||
cx.render(rsx!{
|
|
||||||
div {
|
div {
|
||||||
h3 {
|
h3 { class: "text-3xl font-semibold text-gray-700", "Card" }
|
||||||
class: "text-3xl font-semibold text-gray-700",
|
div { class: "mt-4 mb-3",
|
||||||
"Card"
|
h4 { class: "text-gray-700", "Stacked" }
|
||||||
}
|
div { class: "max-w-sm mt-6 overflow-hidden bg-white rounded shadow-lg",
|
||||||
div {
|
|
||||||
class: "mt-4 mb-3",
|
|
||||||
h4 {
|
|
||||||
class: "text-gray-700",
|
|
||||||
"Stacked"
|
|
||||||
}
|
|
||||||
div {
|
|
||||||
class: "max-w-sm mt-6 overflow-hidden bg-white rounded shadow-lg",
|
|
||||||
img {
|
img {
|
||||||
class: "w-full",
|
class: "w-full",
|
||||||
alt: "Sunset in the mountains",
|
alt: "Sunset in the mountains",
|
||||||
src: "https://picsum.photos/id/1016/384/234",
|
src: "https://picsum.photos/id/1016/384/234"
|
||||||
}
|
}
|
||||||
div {
|
div { class: "px-6 py-4",
|
||||||
class: "px-6 py-4",
|
div { class: "mb-2 text-xl font-bold text-gray-900", "The Coldest Sunset" }
|
||||||
div {
|
p { class: "text-base text-gray-700",
|
||||||
class: "mb-2 text-xl font-bold text-gray-900",
|
|
||||||
"The Coldest Sunset"
|
|
||||||
}
|
|
||||||
p {
|
|
||||||
class: "text-base text-gray-700",
|
|
||||||
"Lorem ipsum dolor sit amet, consectetur adipisicing elit.\n Voluptatibus quia, nulla! Maiores et perferendis eaque,\n exercitationem praesentium nihil."
|
"Lorem ipsum dolor sit amet, consectetur adipisicing elit.\n Voluptatibus quia, nulla! Maiores et perferendis eaque,\n exercitationem praesentium nihil."
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
div {
|
div { class: "px-6 pt-4 pb-2",
|
||||||
class: "px-6 pt-4 pb-2",
|
span { class: "inline-block px-3 py-1 mb-2 mr-2 text-sm font-semibold text-gray-700 bg-gray-200 rounded-full",
|
||||||
span {
|
|
||||||
class: "inline-block px-3 py-1 mb-2 mr-2 text-sm font-semibold text-gray-700 bg-gray-200 rounded-full",
|
|
||||||
"#photography"
|
"#photography"
|
||||||
}
|
}
|
||||||
span {
|
span { class: "inline-block px-3 py-1 mb-2 mr-2 text-sm font-semibold text-gray-700 bg-gray-200 rounded-full",
|
||||||
class: "inline-block px-3 py-1 mb-2 mr-2 text-sm font-semibold text-gray-700 bg-gray-200 rounded-full",
|
|
||||||
"#travel"
|
"#travel"
|
||||||
}
|
}
|
||||||
span {
|
span { class: "inline-block px-3 py-1 mb-2 mr-2 text-sm font-semibold text-gray-700 bg-gray-200 rounded-full",
|
||||||
class: "inline-block px-3 py-1 mb-2 mr-2 text-sm font-semibold text-gray-700 bg-gray-200 rounded-full",
|
|
||||||
"#winter"
|
"#winter"
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
hr {
|
hr {
|
||||||
|
|
||||||
}
|
}
|
||||||
div {
|
div { class: "mt-5",
|
||||||
class: "mt-5",
|
h4 { class: "text-gray-700", "Horizontal" }
|
||||||
h4 {
|
div { class: "w-full max-w-sm mt-6 lg:max-w-full lg:flex",
|
||||||
class: "text-gray-700",
|
|
||||||
"Horizontal"
|
|
||||||
}
|
|
||||||
div {
|
|
||||||
class: "w-full max-w-sm mt-6 lg:max-w-full lg:flex",
|
|
||||||
div {
|
div {
|
||||||
class: "flex-none h-48 overflow-hidden text-center bg-cover rounded-t lg:h-auto lg:w-48 lg:rounded-t-none lg:rounded-l",
|
class: "flex-none h-48 overflow-hidden text-center bg-cover rounded-t lg:h-auto lg:w-48 lg:rounded-t-none lg:rounded-l",
|
||||||
style: "background-image: url('https://picsum.photos/id/0/192/213')",
|
style: "background-image: url('https://picsum.photos/id/0/192/213')",
|
||||||
title: "Woman holding a mug",
|
title: "Woman holding a mug"
|
||||||
}
|
}
|
||||||
div {
|
div { class: "flex flex-col justify-between p-4 leading-normal bg-white border-b border-l border-r border-gray-200 rounded-b lg:border-l-0 lg:border-t lg:border-gray-200 lg:rounded-b-none lg:rounded-r",
|
||||||
class: "flex flex-col justify-between p-4 leading-normal bg-white border-b border-l border-r border-gray-200 rounded-b lg:border-l-0 lg:border-t lg:border-gray-200 lg:rounded-b-none lg:rounded-r",
|
div { class: "mb-8",
|
||||||
div {
|
p { class: "flex items-center text-sm text-gray-600",
|
||||||
class: "mb-8",
|
|
||||||
p {
|
|
||||||
class: "flex items-center text-sm text-gray-600",
|
|
||||||
icons::icon_1 {}
|
icons::icon_1 {}
|
||||||
"Members only"
|
"Members only"
|
||||||
}
|
}
|
||||||
div {
|
div { class: "mb-2 text-xl font-bold text-gray-900",
|
||||||
class: "mb-2 text-xl font-bold text-gray-900",
|
|
||||||
"Can coffee make you a better developer?"
|
"Can coffee make you a better developer?"
|
||||||
}
|
}
|
||||||
p {
|
p { class: "text-base text-gray-700",
|
||||||
class: "text-base text-gray-700",
|
|
||||||
"Lorem ipsum dolor sit amet, consectetur adipisicing elit.\n Voluptatibus quia, nulla! Maiores et perferendis eaque,\n exercitationem praesentium nihil."
|
"Lorem ipsum dolor sit amet, consectetur adipisicing elit.\n Voluptatibus quia, nulla! Maiores et perferendis eaque,\n exercitationem praesentium nihil."
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
div {
|
div { class: "flex items-center",
|
||||||
class: "flex items-center",
|
|
||||||
img {
|
img {
|
||||||
class: "w-10 h-10 mr-4 rounded-full",
|
class: "w-10 h-10 mr-4 rounded-full",
|
||||||
alt: "Avatar of Jonathan Reinink",
|
alt: "Avatar of Jonathan Reinink",
|
||||||
src: "https://via.placeholder.com/50",
|
src: "https://via.placeholder.com/50"
|
||||||
}
|
}
|
||||||
div {
|
div { class: "text-sm",
|
||||||
class: "text-sm",
|
p { class: "leading-none text-gray-900", "Jonathan Reinink" }
|
||||||
p {
|
p { class: "text-gray-600", "Aug 18" }
|
||||||
class: "leading-none text-gray-900",
|
|
||||||
"Jonathan Reinink"
|
|
||||||
}
|
|
||||||
p {
|
|
||||||
class: "text-gray-600",
|
|
||||||
"Aug 18"
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
@@ -112,15 +75,14 @@ pub fn view(cx: Scope)->Element{
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
})
|
|
||||||
}
|
}
|
||||||
|
|
||||||
mod icons {
|
mod icons {
|
||||||
use dioxus::prelude::*;
|
use dioxus::prelude::*;
|
||||||
use dioxus_html_macro::html;
|
use dioxus_html_macro::html;
|
||||||
|
|
||||||
pub fn icon_1(cx: Scope)->Element{
|
pub fn icon_1() -> Element {
|
||||||
cx.render(html!{
|
html! {
|
||||||
<svg
|
<svg
|
||||||
class="w-3 h-3 mr-2 text-gray-500 fill-current"
|
class="w-3 h-3 mr-2 text-gray-500 fill-current"
|
||||||
xmlns="http://www.w3.org/2000/svg"
|
xmlns="http://www.w3.org/2000/svg"
|
||||||
@@ -130,8 +92,6 @@ mod icons{
|
|||||||
d="M4 8V6a6 6 0 1 1 12 0v2h1a2 2 0 0 1 2 2v8a2 2 0 0 1-2 2H3a2 2 0 0 1-2-2v-8c0-1.1.9-2 2-2h1zm5 6.73V17h2v-2.27a2 2 0 1 0-2 0zM7 6v2h6V6a3 3 0 0 0-6 0z"
|
d="M4 8V6a6 6 0 1 1 12 0v2h1a2 2 0 0 1 2 2v8a2 2 0 0 1-2 2H3a2 2 0 0 1-2-2v-8c0-1.1.9-2 2-2h1zm5 6.73V17h2v-2.27a2 2 0 1 0-2 0zM7 6v2h6V6a3 3 0 0 0-6 0z"
|
||||||
/>
|
/>
|
||||||
</svg>
|
</svg>
|
||||||
})
|
|
||||||
}
|
}
|
||||||
|
}
|
||||||
|
|
||||||
}
|
}
|
||||||
@@ -1,237 +1,168 @@
|
|||||||
/*
|
/*
|
||||||
* @Author: plucky
|
|
||||||
* @Date: 2022-10-14 12:31:43
|
* @Date: 2022-10-14 12:31:43
|
||||||
* @LastEditTime: 2022-10-17 09:02:01
|
* @LastEditTime: 2024-07-05 12:56:53
|
||||||
* @Description:
|
* @Description:
|
||||||
*/
|
*/
|
||||||
|
|
||||||
|
|
||||||
use dioxus::prelude::*;
|
use dioxus::prelude::*;
|
||||||
|
|
||||||
use crate::modules::User;
|
use crate::modules::User;
|
||||||
|
|
||||||
// test data
|
// test data
|
||||||
pub static USERS: Atom<Vec<User>> = |_| {
|
pub static USERS: GlobalSignal<Vec<User>> = Signal::global(|| {
|
||||||
(0..5).map(|_i| {
|
(0..5)
|
||||||
User {
|
.map(|_i| User {
|
||||||
name: "John Doe".into(),
|
name: "John Doe".into(),
|
||||||
email: "john@example.com".into(),
|
email: "john@example.com".into(),
|
||||||
title: "Software Engineer".into(),
|
title: "Software Engineer".into(),
|
||||||
title2: "Web dev".into(),
|
title2: "Web dev".into(),
|
||||||
status: "Active".into(),
|
status: "Active".into(),
|
||||||
role: "Owner".into(),
|
role: "Owner".into(),
|
||||||
}
|
})
|
||||||
}).collect()
|
.collect()
|
||||||
};
|
});
|
||||||
|
|
||||||
pub fn view(cx: Scope)->Element{
|
pub fn view() -> Element {
|
||||||
let users = use_read(&cx, USERS);
|
let users = use_hook(|| USERS.signal());
|
||||||
|
|
||||||
cx.render(rsx!{
|
rsx! {
|
||||||
div {
|
div {
|
||||||
h3 {
|
h3 { class: "text-3xl font-medium text-gray-700", "Dashboard" }
|
||||||
class: "text-3xl font-medium text-gray-700",
|
div { class: "mt-4",
|
||||||
"Dashboard"
|
div { class: "flex flex-wrap -mx-6",
|
||||||
}
|
div { class: "w-full px-6 sm:w-1/2 xl:w-1/3",
|
||||||
div {
|
div { class: "flex items-center px-5 py-6 bg-white rounded-md shadow-sm",
|
||||||
class: "mt-4",
|
div { class: "p-3 bg-indigo-600 bg-opacity-75 rounded-full",
|
||||||
div {
|
|
||||||
class: "flex flex-wrap -mx-6",
|
|
||||||
div {
|
|
||||||
class: "w-full px-6 sm:w-1/2 xl:w-1/3",
|
|
||||||
div {
|
|
||||||
class: "flex items-center px-5 py-6 bg-white rounded-md shadow-sm",
|
|
||||||
div {
|
|
||||||
class: "p-3 bg-indigo-600 bg-opacity-75 rounded-full",
|
|
||||||
icons::icon_1 {}
|
icons::icon_1 {}
|
||||||
}
|
}
|
||||||
div {
|
div { class: "mx-5",
|
||||||
class: "mx-5",
|
h4 { class: "text-2xl font-semibold text-gray-700",
|
||||||
h4 {
|
|
||||||
class: "text-2xl font-semibold text-gray-700",
|
|
||||||
"8,282"
|
"8,282"
|
||||||
}
|
}
|
||||||
div {
|
div { class: "text-gray-500", "New Users" }
|
||||||
class: "text-gray-500",
|
|
||||||
"New Users"
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
div { class: "w-full px-6 mt-6 sm:w-1/2 xl:w-1/3 sm:mt-0",
|
||||||
div {
|
div { class: "flex items-center px-5 py-6 bg-white rounded-md shadow-sm",
|
||||||
class: "w-full px-6 mt-6 sm:w-1/2 xl:w-1/3 sm:mt-0",
|
div { class: "p-3 bg-blue-600 bg-opacity-75 rounded-full",
|
||||||
div {
|
|
||||||
class: "flex items-center px-5 py-6 bg-white rounded-md shadow-sm",
|
|
||||||
div {
|
|
||||||
class: "p-3 bg-blue-600 bg-opacity-75 rounded-full",
|
|
||||||
icons::icon_2 {}
|
icons::icon_2 {}
|
||||||
}
|
}
|
||||||
div {
|
div { class: "mx-5",
|
||||||
class: "mx-5",
|
h4 { class: "text-2xl font-semibold text-gray-700",
|
||||||
h4 {
|
|
||||||
class: "text-2xl font-semibold text-gray-700",
|
|
||||||
"200,521"
|
"200,521"
|
||||||
}
|
}
|
||||||
div {
|
div { class: "text-gray-500", "Total Orders" }
|
||||||
class: "text-gray-500",
|
|
||||||
"Total Orders"
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
div { class: "w-full px-6 mt-6 sm:w-1/2 xl:w-1/3 xl:mt-0",
|
||||||
div {
|
div { class: "flex items-center px-5 py-6 bg-white rounded-md shadow-sm",
|
||||||
class: "w-full px-6 mt-6 sm:w-1/2 xl:w-1/3 xl:mt-0",
|
div { class: "p-3 bg-pink-600 bg-opacity-75 rounded-full",
|
||||||
div {
|
|
||||||
class: "flex items-center px-5 py-6 bg-white rounded-md shadow-sm",
|
|
||||||
div {
|
|
||||||
class: "p-3 bg-pink-600 bg-opacity-75 rounded-full",
|
|
||||||
icons::icon_3 {}
|
icons::icon_3 {}
|
||||||
}
|
}
|
||||||
div {
|
div { class: "mx-5",
|
||||||
class: "mx-5",
|
h4 { class: "text-2xl font-semibold text-gray-700",
|
||||||
h4 {
|
|
||||||
class: "text-2xl font-semibold text-gray-700",
|
|
||||||
"215,542"
|
"215,542"
|
||||||
}
|
}
|
||||||
div {
|
div { class: "text-gray-500", "Available Products" }
|
||||||
class: "text-gray-500",
|
|
||||||
"Available Products"
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
div { class: "mt-8" }
|
||||||
div {
|
|
||||||
class: "mt-8",
|
|
||||||
|
|
||||||
}
|
div { class: "flex flex-col mt-8",
|
||||||
|
div { class: "py-2 -my-2 overflow-x-auto sm:-mx-6 sm:px-6 lg:-mx-8 lg:px-8",
|
||||||
div {
|
div { class: "inline-block min-w-full overflow-hidden align-middle border-b border-gray-200 shadow sm:rounded-lg",
|
||||||
class: "flex flex-col mt-8",
|
table { class: "min-w-full",
|
||||||
div {
|
|
||||||
class: "py-2 -my-2 overflow-x-auto sm:-mx-6 sm:px-6 lg:-mx-8 lg:px-8",
|
|
||||||
div {
|
|
||||||
class: "inline-block min-w-full overflow-hidden align-middle border-b border-gray-200 shadow sm:rounded-lg",
|
|
||||||
table {
|
|
||||||
class: "min-w-full",
|
|
||||||
thead {
|
thead {
|
||||||
tr {
|
tr {
|
||||||
th {
|
th { class: "px-6 py-3 text-xs font-medium leading-4 tracking-wider text-left text-gray-500 uppercase border-b border-gray-200 bg-gray-50",
|
||||||
class: "px-6 py-3 text-xs font-medium leading-4 tracking-wider text-left text-gray-500 uppercase border-b border-gray-200 bg-gray-50",
|
|
||||||
"Name"
|
"Name"
|
||||||
}
|
}
|
||||||
th {
|
th { class: "px-6 py-3 text-xs font-medium leading-4 tracking-wider text-left text-gray-500 uppercase border-b border-gray-200 bg-gray-50",
|
||||||
class: "px-6 py-3 text-xs font-medium leading-4 tracking-wider text-left text-gray-500 uppercase border-b border-gray-200 bg-gray-50",
|
|
||||||
"Title"
|
"Title"
|
||||||
}
|
}
|
||||||
th {
|
th { class: "px-6 py-3 text-xs font-medium leading-4 tracking-wider text-left text-gray-500 uppercase border-b border-gray-200 bg-gray-50",
|
||||||
class: "px-6 py-3 text-xs font-medium leading-4 tracking-wider text-left text-gray-500 uppercase border-b border-gray-200 bg-gray-50",
|
|
||||||
"Status"
|
"Status"
|
||||||
}
|
}
|
||||||
th {
|
th { class: "px-6 py-3 text-xs font-medium leading-4 tracking-wider text-left text-gray-500 uppercase border-b border-gray-200 bg-gray-50",
|
||||||
class: "px-6 py-3 text-xs font-medium leading-4 tracking-wider text-left text-gray-500 uppercase border-b border-gray-200 bg-gray-50",
|
|
||||||
"Role"
|
"Role"
|
||||||
}
|
}
|
||||||
th {
|
th { class: "px-6 py-3 border-b border-gray-200 bg-gray-50" }
|
||||||
class: "px-6 py-3 border-b border-gray-200 bg-gray-50",
|
|
||||||
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
// 表格数据
|
// 表格数据
|
||||||
tbody {
|
tbody { class: "bg-white",
|
||||||
class: "bg-white",
|
{users}.iter().map(|u|{
|
||||||
users.iter().map(|u|{
|
rsx!{ UserList{user:u.clone()}}
|
||||||
rsx!{ UserList{user:u}}
|
|
||||||
})
|
|
||||||
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
})
|
})
|
||||||
}
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
// #[derive(PartialEq, Props)]
|
// #[derive(PartialEq, Clone, Props)]
|
||||||
// pub struct UserListProps<'a>{
|
// pub struct UserListProps {
|
||||||
// user: &'a User,
|
// user: User,
|
||||||
// }
|
// }
|
||||||
|
|
||||||
#[allow(non_snake_case)]
|
#[allow(non_snake_case)]
|
||||||
#[inline_props]
|
#[component]
|
||||||
pub fn UserList<'a>(cx: Scope<UserListProps>, user: &'a User) -> Element {
|
pub fn UserList(user: User) -> Element {
|
||||||
// let u = cx.props.user;
|
// let u = cx.props.user;
|
||||||
let u = user;
|
let u = user;
|
||||||
cx.render(rsx!{
|
rsx! {
|
||||||
tr {
|
tr {
|
||||||
// key: "{index}",
|
// key: "{index}",
|
||||||
td {
|
td { class: "px-6 py-4 border-b border-gray-200 whitespace-nowrap",
|
||||||
class: "px-6 py-4 border-b border-gray-200 whitespace-nowrap",
|
div { class: "flex items-center",
|
||||||
div {
|
div { class: "flex-shrink-0 w-10 h-10",
|
||||||
class: "flex items-center",
|
|
||||||
div {
|
|
||||||
class: "flex-shrink-0 w-10 h-10",
|
|
||||||
img {
|
img {
|
||||||
class: "w-10 h-10 rounded-full",
|
class: "w-10 h-10 rounded-full",
|
||||||
alt: "",
|
alt: "",
|
||||||
src: "https://images.unsplash.com/photo-1472099645785-5658abf4ff4e?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80",
|
src: "https://images.unsplash.com/photo-1472099645785-5658abf4ff4e?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80"
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
div {
|
div { class: "ml-4",
|
||||||
class: "ml-4",
|
div { class: "text-sm font-medium leading-5 text-gray-900",
|
||||||
div {
|
|
||||||
class: "text-sm font-medium leading-5 text-gray-900",
|
|
||||||
"{ u.name }"
|
"{ u.name }"
|
||||||
}
|
}
|
||||||
div {
|
div { class: "text-sm leading-5 text-gray-500", "{ u.email }" }
|
||||||
class: "text-sm leading-5 text-gray-500",
|
|
||||||
"{ u.email }"
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
td { class: "px-6 py-4 border-b border-gray-200 whitespace-nowrap",
|
||||||
|
div { class: "text-sm leading-5 text-gray-900", "{ u.title }" }
|
||||||
|
div { class: "text-sm leading-5 text-gray-500", "{ u.title2 }" }
|
||||||
}
|
}
|
||||||
td {
|
td { class: "px-6 py-4 border-b border-gray-200 whitespace-nowrap",
|
||||||
class: "px-6 py-4 border-b border-gray-200 whitespace-nowrap",
|
span { class: "inline-flex px-2 text-xs font-semibold leading-5 text-green-800 bg-green-100 rounded-full",
|
||||||
div {
|
|
||||||
class: "text-sm leading-5 text-gray-900",
|
|
||||||
"{ u.title }"
|
|
||||||
}
|
|
||||||
div {
|
|
||||||
class: "text-sm leading-5 text-gray-500",
|
|
||||||
"{ u.title2 }"
|
|
||||||
}
|
|
||||||
}
|
|
||||||
td {
|
|
||||||
class: "px-6 py-4 border-b border-gray-200 whitespace-nowrap",
|
|
||||||
span {
|
|
||||||
class: "inline-flex px-2 text-xs font-semibold leading-5 text-green-800 bg-green-100 rounded-full",
|
|
||||||
"{ u.status }"
|
"{ u.status }"
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
td {
|
td { class: "px-6 py-4 text-sm leading-5 text-gray-500 border-b border-gray-200 whitespace-nowrap",
|
||||||
class: "px-6 py-4 text-sm leading-5 text-gray-500 border-b border-gray-200 whitespace-nowrap",
|
|
||||||
"{ u.role }"
|
"{ u.role }"
|
||||||
}
|
}
|
||||||
td {
|
td { class: "px-6 py-4 text-sm font-medium leading-5 text-right border-b border-gray-200 whitespace-nowrap",
|
||||||
class: "px-6 py-4 text-sm font-medium leading-5 text-right border-b border-gray-200 whitespace-nowrap",
|
a { class: "text-indigo-600 hover:text-indigo-900", href: "#", "Edit" }
|
||||||
a {
|
|
||||||
class: "text-indigo-600 hover:text-indigo-900",
|
|
||||||
href: "#","Edit"
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
})
|
|
||||||
}
|
}
|
||||||
|
|
||||||
mod icons {
|
mod icons {
|
||||||
use dioxus::prelude::*;
|
use dioxus::prelude::*;
|
||||||
use dioxus_html_macro::html;
|
use dioxus_html_macro::html;
|
||||||
|
|
||||||
pub fn icon_1(cx: Scope)->Element{
|
pub fn icon_1() -> Element {
|
||||||
cx.render(html!{
|
html! {
|
||||||
<svg
|
<svg
|
||||||
class="w-8 h-8 text-white"
|
class="w-8 h-8 text-white"
|
||||||
view_box="0 0 28 30"
|
view_box="0 0 28 30"
|
||||||
@@ -263,11 +194,11 @@ mod icons{
|
|||||||
fill="currentColor"
|
fill="currentColor"
|
||||||
/>
|
/>
|
||||||
</svg>
|
</svg>
|
||||||
})
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
pub fn icon_2(cx: Scope)->Element{
|
pub fn icon_2() -> Element {
|
||||||
cx.render(html!{
|
html! {
|
||||||
<svg
|
<svg
|
||||||
class="w-8 h-8 text-white"
|
class="w-8 h-8 text-white"
|
||||||
view_box="0 0 28 28"
|
view_box="0 0 28 28"
|
||||||
@@ -287,11 +218,11 @@ mod icons{
|
|||||||
fill="currentColor"
|
fill="currentColor"
|
||||||
/>
|
/>
|
||||||
</svg>
|
</svg>
|
||||||
})
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
pub fn icon_3(cx: Scope)->Element{
|
pub fn icon_3() -> Element {
|
||||||
cx.render(html!{
|
html! {
|
||||||
<svg
|
<svg
|
||||||
class="w-8 h-8 text-white"
|
class="w-8 h-8 text-white"
|
||||||
view_box="0 0 28 28"
|
view_box="0 0 28 28"
|
||||||
@@ -311,7 +242,6 @@ mod icons{
|
|||||||
stroke_width="2"
|
stroke_width="2"
|
||||||
/>
|
/>
|
||||||
</svg>
|
</svg>
|
||||||
})
|
|
||||||
}
|
}
|
||||||
|
}
|
||||||
}
|
}
|
||||||
@@ -1,7 +1,6 @@
|
|||||||
/*
|
/*
|
||||||
* @Author: plucky
|
|
||||||
* @Date: 2022-10-15 00:32:59
|
* @Date: 2022-10-15 00:32:59
|
||||||
* @LastEditTime: 2022-10-25 15:23:25
|
* @LastEditTime: 2024-07-05 20:21:11
|
||||||
* @Description:
|
* @Description:
|
||||||
*/
|
*/
|
||||||
|
|
||||||
@@ -17,87 +16,55 @@ struct User {
|
|||||||
pub confirm: String,
|
pub confirm: String,
|
||||||
}
|
}
|
||||||
|
|
||||||
pub fn view(cx: Scope)->Element{
|
pub fn view() -> Element {
|
||||||
|
rsx! {
|
||||||
cx.render(rsx!{
|
|
||||||
div {
|
div {
|
||||||
h3 {
|
h3 { class: "text-3xl font-semibold text-gray-700", "Forms" }
|
||||||
class: "text-3xl font-semibold text-gray-700",
|
|
||||||
"Forms"
|
|
||||||
}
|
|
||||||
|
|
||||||
// Modal Form
|
// Modal Form
|
||||||
Model_form {}
|
Model_form {}
|
||||||
|
|
||||||
// Form Elements
|
// Form Elements
|
||||||
Forms {}
|
Forms {}
|
||||||
|
|
||||||
}
|
}
|
||||||
})
|
|
||||||
}
|
}
|
||||||
|
}
|
||||||
|
|
||||||
// Model Form
|
// Model Form
|
||||||
fn Model_form(cx: Scope)->Element{
|
fn Model_form() -> Element {
|
||||||
|
rsx! {
|
||||||
cx.render(rsx!{
|
div { class: "mt-4",
|
||||||
div {
|
h4 { class: "text-gray-600", "Model Form" }
|
||||||
class: "mt-4",
|
div { class: "mt-4",
|
||||||
h4 {
|
div { class: "w-full max-w-sm overflow-hidden bg-white border rounded-md shadow-md",
|
||||||
class: "text-gray-600",
|
|
||||||
"Model Form"
|
|
||||||
}
|
|
||||||
div {
|
|
||||||
class: "mt-4",
|
|
||||||
div {
|
|
||||||
class: "w-full max-w-sm overflow-hidden bg-white border rounded-md shadow-md",
|
|
||||||
// form
|
// form
|
||||||
form {
|
form {
|
||||||
div {
|
div { class: "flex items-center justify-between px-5 py-3 text-gray-700 border-b",
|
||||||
class: "flex items-center justify-between px-5 py-3 text-gray-700 border-b",
|
h3 { class: "text-sm", "Add Category" }
|
||||||
h3 {
|
button { r#type: "button", onclick: |_| {}, icons::icon_1 {} }
|
||||||
class: "text-sm",
|
|
||||||
"Add Category"
|
|
||||||
}
|
}
|
||||||
button {
|
div { class: "px-5 py-6 text-gray-700 bg-gray-200 border-b",
|
||||||
r#type: "button",
|
label { class: "text-xs", "Name" }
|
||||||
onclick: |_| {
|
div { class: "relative mt-2 rounded-md shadow-sm",
|
||||||
|
span { class: "absolute inset-y-0 left-0 flex items-center pl-3 text-gray-600",
|
||||||
},
|
|
||||||
icons::icon_1 {}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
div {
|
|
||||||
class: "px-5 py-6 text-gray-700 bg-gray-200 border-b",
|
|
||||||
label {
|
|
||||||
class: "text-xs",
|
|
||||||
"Name"
|
|
||||||
}
|
|
||||||
div {
|
|
||||||
class: "relative mt-2 rounded-md shadow-sm",
|
|
||||||
span {
|
|
||||||
class: "absolute inset-y-0 left-0 flex items-center pl-3 text-gray-600",
|
|
||||||
icons::icon_2 {}
|
icons::icon_2 {}
|
||||||
}
|
}
|
||||||
input {
|
input {
|
||||||
class: "w-full px-12 py-2 border-transparent rounded-md appearance-none focus:border-indigo-600 focus:ring focus:ring-opacity-40 focus:ring-indigo-500",
|
class: "w-full px-12 py-2 appearance-none c-input",
|
||||||
r#type: "text",
|
r#type: "text"
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
div {
|
div { class: "flex items-center justify-between px-5 py-3",
|
||||||
class: "flex items-center justify-between px-5 py-3",
|
|
||||||
button {
|
button {
|
||||||
r#type: "button",
|
r#type: "button",
|
||||||
onclick: |_| {
|
onclick: |_| {
|
||||||
info!("click");
|
info!("click");
|
||||||
|
|
||||||
},
|
},
|
||||||
class: "px-3 py-1 text-sm text-gray-700 bg-gray-200 rounded-md hover:bg-gray-300 focus:outline-none",
|
class: "px-3 py-1 text-sm text-gray-700 bg-gray-200 rounded-md hover:bg-gray-300 focus:outline-none",
|
||||||
"Cancel"
|
"Cancel"
|
||||||
}
|
}
|
||||||
button {
|
button { class: "px-3 py-1 text-sm text-white bg-indigo-600 rounded-md hover:bg-indigo-500 focus:outline-none",
|
||||||
class: "px-3 py-1 text-sm text-white bg-indigo-600 rounded-md hover:bg-indigo-500 focus:outline-none",
|
|
||||||
"Save"
|
"Save"
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
@@ -105,110 +72,101 @@ fn Model_form(cx: Scope)->Element{
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
})
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
// Forms
|
// Forms
|
||||||
fn Forms(cx: Scope)->Element{
|
fn Forms() -> Element {
|
||||||
let user = use_ref(&cx, || User::default());
|
let mut user = use_signal(User::default);
|
||||||
let ur = user.read();
|
let ur = user.peek();
|
||||||
|
// let User {
|
||||||
|
// username,
|
||||||
|
// email,
|
||||||
|
// password,
|
||||||
|
// confirm,
|
||||||
|
// ..
|
||||||
|
// } = &*user.read();
|
||||||
|
|
||||||
cx.render(rsx!{
|
rsx! {
|
||||||
div {
|
div { class: "mt-8",
|
||||||
class: "mt-8",
|
h4 { class: "text-gray-600", "Forms" }
|
||||||
h4 {
|
div { class: "mt-4",
|
||||||
class: "text-gray-600",
|
div { class: "p-6 bg-white rounded-md shadow-md",
|
||||||
"Forms"
|
h2 { class: "text-lg font-semibold text-gray-700 capitalize", "Account settings" }
|
||||||
}
|
|
||||||
div {
|
|
||||||
class: "mt-4",
|
|
||||||
div {
|
|
||||||
class: "p-6 bg-white rounded-md shadow-md",
|
|
||||||
h2 {
|
|
||||||
class: "text-lg font-semibold text-gray-700 capitalize",
|
|
||||||
"Account settings"
|
|
||||||
}
|
|
||||||
|
|
||||||
form {
|
form {
|
||||||
//action="" methods="post"
|
//action="" methods="post"
|
||||||
prevent_default: "onsubmit",
|
prevent_default: "onsubmit",
|
||||||
onsubmit: move |e| {
|
onsubmit: move |e| {
|
||||||
info!("onsubmit: {:?}", e);
|
info!("onsubmit: {:?}", e);
|
||||||
info!("onsubmit: {:?}", user.read());
|
info!("onsubmit: {:?}", user.peek());
|
||||||
},
|
},
|
||||||
|
|
||||||
|
div { class: "grid grid-cols-1 gap-6 mt-4 sm:grid-cols-2",
|
||||||
div {
|
div {
|
||||||
class: "grid grid-cols-1 gap-6 mt-4 sm:grid-cols-2",
|
label { class: "text-gray-700", r#for: "username", "Username" }
|
||||||
div {
|
|
||||||
label {
|
|
||||||
class: "text-gray-700",
|
|
||||||
r#for: "username","Username"
|
|
||||||
}
|
|
||||||
input {
|
input {
|
||||||
id: "username",
|
id: "username",
|
||||||
class: "w-full mt-2 border-gray-200 rounded-md focus:border-indigo-600 focus:ring focus:ring-opacity-40 focus:ring-indigo-500",
|
class: "w-full mt-2 c-input",
|
||||||
r#type: "text",
|
r#type: "text",
|
||||||
// "v-model: "user.username",
|
// "v-model: "user.username",
|
||||||
// 双向绑定
|
// 双向绑定
|
||||||
value: "{ur.username}",
|
value: "{ur.username}",
|
||||||
oninput: {|e|{
|
oninput: {
|
||||||
// info!("oninput{:?}", e);
|
move |e| {
|
||||||
user.write().username=e.value.to_string();
|
user.write().username = e.value();
|
||||||
}},
|
}
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
div {
|
div {
|
||||||
label {
|
label { class: "text-gray-700", r#for: "email", "Email Address" }
|
||||||
class: "text-gray-700",
|
|
||||||
r#for: "email","Email Address"
|
|
||||||
}
|
|
||||||
input {
|
input {
|
||||||
id: "email",
|
id: "email",
|
||||||
class: "w-full mt-2 border-gray-200 rounded-md focus:border-indigo-600 focus:ring focus:ring-opacity-40 focus:ring-indigo-500",
|
class: "w-full mt-2 c-input",
|
||||||
r#type: "email",
|
r#type: "email",
|
||||||
// "v-model": "user.email",
|
|
||||||
value: "{ur.email}",
|
value: "{ur.email}",
|
||||||
oninput: {|e|{
|
oninput: {
|
||||||
user.write().email=e.value.to_string();
|
move |e| {
|
||||||
}},
|
user.write().email = e.value();
|
||||||
|
}
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
div {
|
div {
|
||||||
label {
|
label { class: "text-gray-700", r#for: "password", "Password" }
|
||||||
class: "text-gray-700",
|
|
||||||
r#for: "password","Password"
|
|
||||||
}
|
|
||||||
input {
|
input {
|
||||||
id: "password",
|
id: "password",
|
||||||
class: "w-full mt-2 border-gray-200 rounded-md focus:border-indigo-600 focus:ring focus:ring-opacity-40 focus:ring-indigo-500",
|
class: "w-full mt-2 c-input",
|
||||||
r#type: "password",
|
r#type: "password",
|
||||||
// "v-model": "user.password",
|
|
||||||
value: "{ur.password}",
|
value: "{ur.password}",
|
||||||
oninput: {|e|{
|
oninput: {
|
||||||
user.write().password=e.value.to_string();
|
move |e| {
|
||||||
}},
|
user.write().password = e.value();
|
||||||
|
}
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
div {
|
div {
|
||||||
label {
|
label {
|
||||||
class: "text-gray-700",
|
class: "text-gray-700",
|
||||||
r#for: "pwConfirm","Password Confirmation"
|
r#for: "pwConfirm",
|
||||||
|
"Password Confirmation"
|
||||||
}
|
}
|
||||||
input {
|
input {
|
||||||
id: "pwConfirm",
|
id: "pwConfirm",
|
||||||
class: "w-full mt-2 border-gray-200 rounded-md focus:border-indigo-600 focus:ring focus:ring-opacity-40 focus:ring-indigo-500",
|
class: "w-full mt-2 c-input",
|
||||||
r#type: "password",
|
r#type: "password",
|
||||||
// "v-model": "user.confirm",
|
|
||||||
value: "{ur.confirm}",
|
value: "{ur.confirm}",
|
||||||
oninput: {|e|{
|
oninput: {
|
||||||
user.write().confirm=e.value.to_string();
|
move |e| {
|
||||||
}},
|
user.write().confirm = e.value();
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
div {
|
}
|
||||||
class: "flex justify-end mt-4",
|
}
|
||||||
|
div { class: "flex justify-end mt-4",
|
||||||
button {
|
button {
|
||||||
r#type: "submit",
|
r#type: "submit",
|
||||||
class: "px-4 py-2 text-gray-200 bg-gray-800 rounded-md hover:bg-gray-700 focus:outline-none focus:bg-gray-700",
|
class: "px-4 py-2 text-gray-200 bg-gray-800 rounded-md hover:bg-gray-700 focus:outline-none focus:bg-gray-700",
|
||||||
@@ -219,15 +177,15 @@ fn Forms(cx: Scope)->Element{
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
})
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
mod icons {
|
mod icons {
|
||||||
use dioxus::prelude::*;
|
use dioxus::prelude::*;
|
||||||
use dioxus_html_macro::html;
|
use dioxus_html_macro::html;
|
||||||
|
|
||||||
pub fn icon_1(cx: Scope)->Element{
|
pub fn icon_1() -> Element {
|
||||||
cx.render(html!{
|
let vnode = html! {
|
||||||
<svg
|
<svg
|
||||||
class="w-4 h-4"
|
class="w-4 h-4"
|
||||||
fill="none"
|
fill="none"
|
||||||
@@ -241,11 +199,12 @@ mod icons{
|
|||||||
d="M6 18L18 6M6 6l12 12"
|
d="M6 18L18 6M6 6l12 12"
|
||||||
/>
|
/>
|
||||||
</svg>
|
</svg>
|
||||||
})
|
};
|
||||||
|
vnode
|
||||||
}
|
}
|
||||||
|
|
||||||
pub fn icon_2(cx: Scope)->Element{
|
pub fn icon_2() -> Element {
|
||||||
cx.render(html!{
|
html! {
|
||||||
<svg
|
<svg
|
||||||
class="w-6 h-6"
|
class="w-6 h-6"
|
||||||
fill="none"
|
fill="none"
|
||||||
@@ -259,9 +218,6 @@ mod icons{
|
|||||||
d="M11 4a2 2 0 114 0v1a1 1 0 001 1h3a1 1 0 011 1v3a1 1 0 01-1 1h-1a2 2 0 100 4h1a1 1 0 011 1v3a1 1 0 01-1 1h-3a1 1 0 01-1-1v-1a2 2 0 10-4 0v1a1 1 0 01-1 1H7a1 1 0 01-1-1v-3a1 1 0 00-1-1H4a2 2 0 110-4h1a1 1 0 001-1V7a1 1 0 011-1h3a1 1 0 001-1V4z"
|
d="M11 4a2 2 0 114 0v1a1 1 0 001 1h3a1 1 0 011 1v3a1 1 0 01-1 1h-1a2 2 0 100 4h1a1 1 0 011 1v3a1 1 0 01-1 1h-3a1 1 0 01-1-1v-1a2 2 0 10-4 0v1a1 1 0 01-1 1H7a1 1 0 01-1-1v-3a1 1 0 00-1-1H4a2 2 0 110-4h1a1 1 0 001-1V7a1 1 0 011-1h3a1 1 0 001-1V4z"
|
||||||
/>
|
/>
|
||||||
</svg>
|
</svg>
|
||||||
})
|
|
||||||
}
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
}
|
}
|
||||||
@@ -1,117 +1,93 @@
|
|||||||
/*
|
/*
|
||||||
* @Author: plucky
|
|
||||||
* @Date: 2022-10-12 00:00:54
|
* @Date: 2022-10-12 00:00:54
|
||||||
* @LastEditTime: 2022-10-14 16:54:55
|
* @LastEditTime: 2024-07-05 20:06:58
|
||||||
* @Description:
|
* @Description:
|
||||||
*/
|
*/
|
||||||
use dioxus::prelude::*;
|
use dioxus::prelude::*;
|
||||||
|
|
||||||
pub fn view(cx: Scope)->Element{
|
pub fn view() -> Element {
|
||||||
let email = use_state(&cx, ||"".to_string());
|
let mut email = use_signal(|| "".to_string());
|
||||||
let password = use_state(&cx, ||"".to_string());
|
let mut password = use_signal(|| "".to_string());
|
||||||
// function login() {
|
|
||||||
// router.push("/dashboard");
|
|
||||||
// }
|
|
||||||
let router = use_router(&cx);
|
|
||||||
|
|
||||||
cx.render(rsx!{
|
fn login() {
|
||||||
div {
|
let router = router();
|
||||||
class: "flex items-center justify-center h-screen px-6 bg-gray-200",
|
router.push("/home");
|
||||||
div {
|
|
||||||
class: "w-full max-w-sm p-6 bg-white rounded-md shadow-md",
|
|
||||||
div {
|
|
||||||
class: "flex items-center justify-center",
|
|
||||||
icons::icon_1 {}
|
|
||||||
span {
|
|
||||||
class: "text-2xl font-semibold text-gray-700",
|
|
||||||
"V-Dashboard"
|
|
||||||
}
|
}
|
||||||
|
|
||||||
|
rsx! {
|
||||||
|
div { class: "flex items-center justify-center h-screen px-6 bg-gray-200",
|
||||||
|
div { class: "w-full max-w-sm p-6 bg-white rounded-md shadow-md",
|
||||||
|
div { class: "flex items-center justify-center",
|
||||||
|
icons::icon_1 {}
|
||||||
|
span { class: "text-2xl font-semibold text-gray-700", "R-Dashboard" }
|
||||||
}
|
}
|
||||||
|
|
||||||
form {
|
form {
|
||||||
class: "mt-4",
|
class: "mt-4",
|
||||||
//@submit.prevent="login"
|
|
||||||
onsubmit: move |_| {
|
onsubmit: move |_| {
|
||||||
// login();
|
login();
|
||||||
router.push_route("/dashboard", None, None);
|
|
||||||
},
|
},
|
||||||
label {
|
label { class: "block",
|
||||||
class: "block",
|
span { class: "text-sm text-gray-700", "Email" }
|
||||||
span {
|
|
||||||
class: "text-sm text-gray-700",
|
|
||||||
"Email"
|
|
||||||
}
|
|
||||||
input {
|
input {
|
||||||
class: "block w-full mt-1 border-gray-200 rounded-md focus:border-indigo-600 focus:ring focus:ring-opacity-40 focus:ring-indigo-500",
|
class: "block w-full mt-1 c-input",
|
||||||
r#type: "email",
|
r#type: "email",
|
||||||
// "v-model": "email",
|
|
||||||
placeholder: "Enter your email",
|
placeholder: "Enter your email",
|
||||||
// value: "{email}",
|
value: "{email}",
|
||||||
oninput: move |e| {
|
oninput: move |e| {
|
||||||
email.set(e.value.clone());
|
email.set(e.value());
|
||||||
},
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
label {
|
|
||||||
class: "block mt-3",
|
|
||||||
span {
|
|
||||||
class: "text-sm text-gray-700",
|
|
||||||
"Password"
|
|
||||||
}
|
}
|
||||||
|
label { class: "block mt-3",
|
||||||
|
span { class: "text-sm text-gray-700", "Password" }
|
||||||
input {
|
input {
|
||||||
class: "block w-full mt-1 border-gray-200 rounded-md focus:border-indigo-600 focus:ring focus:ring-opacity-40 focus:ring-indigo-500",
|
class: "block w-full mt-1 c-input",
|
||||||
r#type: "password",
|
r#type: "password",
|
||||||
// "v-model": "password",
|
|
||||||
placeholder: "Enter your password",
|
placeholder: "Enter your password",
|
||||||
value: "{password}",
|
value: "{password}",
|
||||||
oninput: move |e| {
|
oninput: move |e| {
|
||||||
password.set(e.value.clone());
|
password.set(e.value());
|
||||||
},
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
}
|
||||||
|
div { class: "flex items-center justify-between mt-4",
|
||||||
div {
|
div {
|
||||||
class: "flex items-center justify-between mt-4",
|
label { class: "inline-flex items-center",
|
||||||
div {
|
|
||||||
label {
|
|
||||||
class: "inline-flex items-center",
|
|
||||||
input {
|
input {
|
||||||
class: "text-indigo-600 border-gray-200 rounded-md focus:border-indigo-600 focus:ring focus:ring-opacity-40 focus:ring-indigo-500",
|
class: "text-indigo-600 c-input",
|
||||||
r#type: "checkbox",
|
r#type: "checkbox"
|
||||||
}
|
|
||||||
span {
|
|
||||||
class: "mx-2 text-sm text-gray-600",
|
|
||||||
"Remember me"
|
|
||||||
}
|
}
|
||||||
|
span { class: "mx-2 text-sm text-gray-600", "Remember me" }
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
div {
|
div {
|
||||||
a {
|
a {
|
||||||
class: "block text-sm text-indigo-700 fontme hover:underline",
|
class: "block text-sm text-indigo-700 fontme hover:underline",
|
||||||
href: "#", "Forgot your password?"
|
href: "#",
|
||||||
|
"Forgot your password?"
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
div {
|
div { class: "mt-6",
|
||||||
class: "mt-6",
|
|
||||||
button {
|
button {
|
||||||
class: "w-full px-4 py-2 text-sm text-center text-white bg-indigo-600 rounded-md focus:outline-none hover:bg-indigo-500",
|
class: "w-full px-4 py-2 text-sm text-center text-white bg-indigo-600 rounded-md focus:outline-none hover:bg-indigo-500",
|
||||||
r#type: "submit", "Sign in"
|
r#type: "submit",
|
||||||
|
"Sign in"
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
})
|
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
mod icons {
|
mod icons {
|
||||||
use dioxus::prelude::*;
|
use dioxus::prelude::*;
|
||||||
use dioxus_html_macro::html;
|
use dioxus_html_macro::html;
|
||||||
|
|
||||||
pub fn icon_1(cx: Scope)->Element{
|
pub fn icon_1() -> Element {
|
||||||
cx.render(html!{
|
html! {
|
||||||
<svg
|
<svg
|
||||||
class="w-10 h-10"
|
class="w-10 h-10"
|
||||||
view_box="0 0 512 512"
|
view_box="0 0 512 512"
|
||||||
@@ -131,8 +107,6 @@ mod icons{
|
|||||||
fill="white"
|
fill="white"
|
||||||
/>
|
/>
|
||||||
</svg>
|
</svg>
|
||||||
})
|
|
||||||
}
|
}
|
||||||
|
}
|
||||||
|
|
||||||
}
|
}
|
||||||
@@ -1,24 +1,22 @@
|
|||||||
/*
|
/*
|
||||||
* @Author: plucky
|
|
||||||
* @Date: 2022-10-11 23:13:24
|
* @Date: 2022-10-11 23:13:24
|
||||||
* @LastEditTime: 2022-10-15 09:53:40
|
* @LastEditTime: 2022-10-15 09:53:40
|
||||||
* @Description:
|
* @Description:
|
||||||
*/
|
*/
|
||||||
|
|
||||||
|
|
||||||
pub mod login;
|
|
||||||
pub mod dashboard;
|
|
||||||
pub mod ui_elements;
|
|
||||||
pub mod tables;
|
|
||||||
pub mod forms;
|
|
||||||
pub mod card;
|
|
||||||
pub mod modal;
|
|
||||||
pub mod blank;
|
pub mod blank;
|
||||||
|
pub mod card;
|
||||||
|
pub mod dashboard;
|
||||||
|
pub mod forms;
|
||||||
|
pub mod login;
|
||||||
|
pub mod modal;
|
||||||
|
pub mod tables;
|
||||||
|
pub mod ui_elements;
|
||||||
|
|
||||||
|
// pub fn view()->Element{
|
||||||
|
|
||||||
// pub fn view(cx: Scope)->Element{
|
// (rsx!{
|
||||||
|
|
||||||
// cx.render(rsx!{
|
|
||||||
// div {
|
// div {
|
||||||
// }
|
// }
|
||||||
// })
|
// })
|
||||||
|
|||||||
@@ -1,43 +1,38 @@
|
|||||||
/*
|
/*
|
||||||
* @Author: plucky
|
|
||||||
* @Date: 2022-10-15 09:52:14
|
* @Date: 2022-10-15 09:52:14
|
||||||
* @LastEditTime: 2022-10-17 00:31:51
|
* @LastEditTime: 2024-07-07 21:21:12
|
||||||
* @Description:
|
* @Description:
|
||||||
*/
|
*/
|
||||||
|
|
||||||
use dioxus::prelude::*;
|
use dioxus::prelude::*;
|
||||||
|
|
||||||
pub fn view(cx: Scope)->Element{
|
pub fn view() -> Element {
|
||||||
let open = use_state(&cx, || false);
|
let mut open = use_signal(|| false);
|
||||||
// let modal = "transition: opacity 0.25s ease";
|
// let modal = "transition: opacity 0.25s ease";
|
||||||
|
|
||||||
cx.render(rsx!{
|
rsx! {
|
||||||
div {
|
div {
|
||||||
h3 {
|
h3 { class: "text-3xl font-medium text-gray-700", "Modal" }
|
||||||
class: "text-3xl font-medium text-gray-700",
|
|
||||||
"Modal"
|
|
||||||
}
|
|
||||||
// open modal
|
// open modal
|
||||||
button {
|
button {
|
||||||
onclick: move |_| {
|
onclick: move |_| {
|
||||||
open.set(true);
|
open.set(true);
|
||||||
},
|
},
|
||||||
class: "px-6 py-3 mt-3 font-medium tracking-wide text-white bg-indigo-600 rounded-md hover:bg-indigo-500 focus:outline-none",
|
class: "px-6 py-3 mt-3 font-medium tracking-wide text-white bg-indigo-600 rounded-md hover:bg-indigo-500 focus:outline-none",
|
||||||
"Open Modal",
|
"Open Modal"
|
||||||
}
|
}
|
||||||
|
|
||||||
// Modal
|
// Modal
|
||||||
div {
|
div {
|
||||||
class: format_args!("transition:opacity 0.25s ease {} z-50 fixed w-full h-full top-0 left-0 flex items-center justify-center", if *open.get(){"false"}else{"opacity-0 pointer-events-none"}),
|
class: format!(
|
||||||
|
"transition:opacity 0.25s ease {} z-50 fixed w-full h-full top-0 left-0 flex items-center justify-center",
|
||||||
|
if open() { "false" } else { "opacity-0 pointer-events-none" },
|
||||||
|
),
|
||||||
// overlay
|
// overlay
|
||||||
div{
|
div { class: "absolute w-full h-full bg-gray-900 opacity-50 modal-overlay" }
|
||||||
class: "absolute w-full h-full bg-gray-900 opacity-50 modal-overlay",
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
//
|
//
|
||||||
div {
|
div { class: "z-50 w-11/12 mx-auto overflow-y-auto bg-white rounded shadow-lg modal-container md:max-w-md",
|
||||||
class: "z-50 w-11/12 mx-auto overflow-y-auto bg-white rounded shadow-lg modal-container md:max-w-md",
|
|
||||||
// 右上角关闭按钮
|
// 右上角关闭按钮
|
||||||
div {
|
div {
|
||||||
onclick: move |_| {
|
onclick: move |_| {
|
||||||
@@ -45,22 +40,14 @@ pub fn view(cx: Scope)->Element{
|
|||||||
},
|
},
|
||||||
class: "absolute top-0 right-0 z-50 flex flex-col items-center mt-4 mr-4 text-sm text-white cursor-pointer modal-close",
|
class: "absolute top-0 right-0 z-50 flex flex-col items-center mt-4 mr-4 text-sm text-white cursor-pointer modal-close",
|
||||||
icons::icon_1 {}
|
icons::icon_1 {}
|
||||||
span {
|
span { class: "text-sm", "(Esc)" }
|
||||||
class: "text-sm",
|
|
||||||
"(Esc)"
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
|
||||||
//<!-- Add margin if you want to see some of the overlay behind the modal-->
|
//<!-- Add margin if you want to see some of the overlay behind the modal-->
|
||||||
div {
|
div { class: "px-6 py-4 text-left modal-content",
|
||||||
class: "px-6 py-4 text-left modal-content",
|
|
||||||
//<!--Title-->
|
//<!--Title-->
|
||||||
div {
|
div { class: "flex items-center justify-between pb-3",
|
||||||
class: "flex items-center justify-between pb-3",
|
p { class: "text-2xl font-bold", "Modal Title" }
|
||||||
p {
|
|
||||||
class: "text-2xl font-bold",
|
|
||||||
"Modal Title"
|
|
||||||
}
|
|
||||||
div {
|
div {
|
||||||
class: "z-50 cursor-pointer modal-close",
|
class: "z-50 cursor-pointer modal-close",
|
||||||
onclick: move |_| {
|
onclick: move |_| {
|
||||||
@@ -68,15 +55,13 @@ pub fn view(cx: Scope)->Element{
|
|||||||
},
|
},
|
||||||
icons::icon_1 {}
|
icons::icon_1 {}
|
||||||
}
|
}
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
||||||
//<!--Body-->
|
//<!--Body-->
|
||||||
p { "Modal content." }
|
p { "Modal content." }
|
||||||
|
|
||||||
//<!--Footer-->
|
//<!--Footer-->
|
||||||
div {
|
div { class: "flex justify-end pt-2",
|
||||||
class: "flex justify-end pt-2",
|
|
||||||
button {
|
button {
|
||||||
onclick: move |_| {
|
onclick: move |_| {
|
||||||
open.set(false);
|
open.set(false);
|
||||||
@@ -96,16 +81,15 @@ pub fn view(cx: Scope)->Element{
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
})
|
|
||||||
}
|
}
|
||||||
|
}
|
||||||
|
|
||||||
mod icons {
|
mod icons {
|
||||||
use dioxus::prelude::*;
|
use dioxus::prelude::*;
|
||||||
use dioxus_html_macro::html;
|
use dioxus_html_macro::html;
|
||||||
|
|
||||||
pub fn icon_1(cx: Scope)->Element{
|
pub fn icon_1() -> Element {
|
||||||
cx.render(html!{
|
html! {
|
||||||
<svg
|
<svg
|
||||||
class="w-5 h-5"
|
class="w-5 h-5"
|
||||||
fill="none"
|
fill="none"
|
||||||
@@ -119,8 +103,6 @@ mod icons{
|
|||||||
d="M6 18L18 6M6 6l12 12"
|
d="M6 18L18 6M6 6l12 12"
|
||||||
/>
|
/>
|
||||||
</svg>
|
</svg>
|
||||||
})
|
|
||||||
}
|
}
|
||||||
|
}
|
||||||
|
|
||||||
}
|
}
|
||||||
@@ -1,7 +1,6 @@
|
|||||||
/*
|
/*
|
||||||
* @Author: plucky
|
|
||||||
* @Date: 2022-10-14 17:43:39
|
* @Date: 2022-10-14 17:43:39
|
||||||
* @LastEditTime: 2022-10-15 00:21:14
|
* @LastEditTime: 2024-07-07 21:20:43
|
||||||
* @Description:
|
* @Description:
|
||||||
*/
|
*/
|
||||||
#![allow(non_snake_case)]
|
#![allow(non_snake_case)]
|
||||||
@@ -9,14 +8,10 @@ use dioxus::prelude::*;
|
|||||||
|
|
||||||
use crate::modules::demo_data::USE_TABLE_DATA;
|
use crate::modules::demo_data::USE_TABLE_DATA;
|
||||||
|
|
||||||
pub fn view(cx: Scope)->Element{
|
pub fn view() -> Element {
|
||||||
|
rsx! {
|
||||||
cx.render(rsx!{
|
|
||||||
div {
|
div {
|
||||||
h3 {
|
h3 { class: "text-3xl font-medium text-gray-700", "Tables" }
|
||||||
class: "text-3xl font-medium text-gray-700",
|
|
||||||
"Tables"
|
|
||||||
}
|
|
||||||
// Simple Table
|
// Simple Table
|
||||||
Simple_table {}
|
Simple_table {}
|
||||||
|
|
||||||
@@ -26,42 +21,33 @@ pub fn view(cx: Scope)->Element{
|
|||||||
// Wide Table
|
// Wide Table
|
||||||
Wide_table {}
|
Wide_table {}
|
||||||
}
|
}
|
||||||
})
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
// Simple Table
|
// Simple Table
|
||||||
fn Simple_table(cx: Scope)->Element{
|
fn Simple_table() -> Element {
|
||||||
let simple_table_data = &use_read(&cx, USE_TABLE_DATA).simpleTableData;
|
let table_data = use_hook(|| USE_TABLE_DATA.signal());
|
||||||
|
let simple_table_data = &table_data.read().simpleTableData;
|
||||||
|
|
||||||
cx.render(rsx!{
|
rsx! {
|
||||||
div {
|
div { class: "mt-4",
|
||||||
class: "mt-4",
|
h4 { class: "text-gray-600", "Simple Table" }
|
||||||
h4 {
|
div { class: "mt-6",
|
||||||
class: "text-gray-600",
|
div { class: "my-6 overflow-hidden bg-white rounded-md shadow",
|
||||||
"Simple Table"
|
table { class: "w-full text-left border-collapse",
|
||||||
}
|
thead { class: "border-b",
|
||||||
div {
|
|
||||||
class: "mt-6",
|
|
||||||
div {
|
|
||||||
class: "my-6 overflow-hidden bg-white rounded-md shadow",
|
|
||||||
table {
|
|
||||||
class: "w-full text-left border-collapse",
|
|
||||||
thead {
|
|
||||||
class: "border-b",
|
|
||||||
tr {
|
tr {
|
||||||
th {
|
th { class: "px-5 py-3 text-sm font-medium text-gray-100 uppercase bg-indigo-800",
|
||||||
class: "px-5 py-3 text-sm font-medium text-gray-100 uppercase bg-indigo-800",
|
|
||||||
"City"
|
"City"
|
||||||
}
|
}
|
||||||
th {
|
th { class: "px-5 py-3 text-sm font-medium text-gray-100 uppercase bg-indigo-800",
|
||||||
class: "px-5 py-3 text-sm font-medium text-gray-100 uppercase bg-indigo-800",
|
|
||||||
"Total orders"
|
"Total orders"
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
// data
|
// data
|
||||||
tbody {
|
tbody {
|
||||||
simple_table_data.iter().enumerate().map(|(i,data)|{
|
{simple_table_data}.iter().enumerate().map(|(i,data)|{
|
||||||
rsx!{ tr {
|
rsx!{ tr {
|
||||||
class: "hover:bg-gray-200",
|
class: "hover:bg-gray-200",
|
||||||
key: "{i}",
|
key: "{i}",
|
||||||
@@ -76,123 +62,84 @@ fn Simple_table(cx: Scope)->Element{
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
})
|
})
|
||||||
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
})
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
// 分页 table
|
// 分页 table
|
||||||
// Table with pagination
|
// Table with pagination
|
||||||
fn Table_with_pagination(cx: Scope)->Element{
|
fn Table_with_pagination() -> Element {
|
||||||
let paginated_table_data = &use_read(&cx, USE_TABLE_DATA).paginatedTableData;
|
let table_data = use_hook(|| USE_TABLE_DATA.signal());
|
||||||
|
let paginated_table_data = &table_data.read().paginatedTableData;
|
||||||
|
|
||||||
let status_color = |status: &str| {
|
let status_color = |status: &str| match status {
|
||||||
match status {
|
|
||||||
"Active" => ("bg-green-100", "text-green-800"),
|
"Active" => ("bg-green-100", "text-green-800"),
|
||||||
"Inactive" => ("bg-red-100", "text-red-800"),
|
"Inactive" => ("bg-red-100", "text-red-800"),
|
||||||
"Suspended" => ("bg-orange-100", "text-orange-800"),
|
"Suspended" => ("bg-orange-100", "text-orange-800"),
|
||||||
_ => ("bg-gray-100", "text-gray-800"),
|
_ => ("bg-gray-100", "text-gray-800"),
|
||||||
}
|
|
||||||
};
|
};
|
||||||
|
|
||||||
cx.render(rsx!{
|
rsx! {
|
||||||
div {
|
div { class: "mt-8",
|
||||||
class: "mt-8",
|
h4 { class: "text-gray-600", "Table with pagination" }
|
||||||
h4 {
|
div { class: "mt-6",
|
||||||
class: "text-gray-600",
|
h2 { class: "text-xl font-semibold leading-tight text-gray-700", "Users" }
|
||||||
"Table with pagination"
|
|
||||||
}
|
|
||||||
div {
|
|
||||||
class: "mt-6",
|
|
||||||
h2 {
|
|
||||||
class: "text-xl font-semibold leading-tight text-gray-700",
|
|
||||||
"Users"
|
|
||||||
}
|
|
||||||
// limit
|
// limit
|
||||||
div {
|
div { class: "flex flex-col mt-3 sm:flex-row",
|
||||||
class: "flex flex-col mt-3 sm:flex-row",
|
div { class: "flex",
|
||||||
div {
|
div { class: "relative",
|
||||||
class: "flex",
|
select { class: "block w-full h-full px-4 py-2 pr-8 leading-tight text-gray-700 bg-white border border-gray-400 rounded-l appearance-none focus:outline-none focus:bg-white focus:border-gray-500",
|
||||||
div {
|
option { "5" }
|
||||||
class: "relative",
|
option { "10" }
|
||||||
select {
|
option { "20" }
|
||||||
class: "block w-full h-full px-4 py-2 pr-8 leading-tight text-gray-700 bg-white border border-gray-400 rounded-l appearance-none focus:outline-none focus:bg-white focus:border-gray-500",
|
|
||||||
option {
|
|
||||||
"5"
|
|
||||||
}
|
}
|
||||||
option {
|
div { class: "absolute inset-y-0 right-0 flex items-center px-2 text-gray-700 pointer-events-none",
|
||||||
"10"
|
|
||||||
}
|
|
||||||
option {
|
|
||||||
"20"
|
|
||||||
}
|
|
||||||
}
|
|
||||||
div {
|
|
||||||
class: "absolute inset-y-0 right-0 flex items-center px-2 text-gray-700 pointer-events-none",
|
|
||||||
icons::icon_1 {}
|
icons::icon_1 {}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
div {
|
div { class: "relative",
|
||||||
class: "relative",
|
select { class: "block w-full h-full px-4 py-2 pr-8 leading-tight text-gray-700 bg-white border-t border-b border-r border-gray-400 rounded-r appearance-none sm:rounded-r-none sm:border-r-0 focus:outline-none focus:border-l focus:border-r focus:bg-white focus:border-gray-500",
|
||||||
select {
|
option { "All" }
|
||||||
class: "block w-full h-full px-4 py-2 pr-8 leading-tight text-gray-700 bg-white border-t border-b border-r border-gray-400 rounded-r appearance-none sm:rounded-r-none sm:border-r-0 focus:outline-none focus:border-l focus:border-r focus:bg-white focus:border-gray-500",
|
option { "Active" }
|
||||||
option {
|
option { "Inactive" }
|
||||||
"All"
|
|
||||||
}
|
}
|
||||||
option {
|
div { class: "absolute inset-y-0 right-0 flex items-center px-2 text-gray-700 pointer-events-none",
|
||||||
"Active"
|
|
||||||
}
|
|
||||||
option {
|
|
||||||
"Inactive"
|
|
||||||
}
|
|
||||||
}
|
|
||||||
div {
|
|
||||||
class: "absolute inset-y-0 right-0 flex items-center px-2 text-gray-700 pointer-events-none",
|
|
||||||
icons::icon_2 {}
|
icons::icon_2 {}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
div {
|
div { class: "relative block mt-2 sm:mt-0",
|
||||||
class: "relative block mt-2 sm:mt-0",
|
span { class: "absolute inset-y-0 left-0 flex items-center pl-2",
|
||||||
span {
|
|
||||||
class: "absolute inset-y-0 left-0 flex items-center pl-2",
|
|
||||||
icons::icon_3 {}
|
icons::icon_3 {}
|
||||||
}
|
}
|
||||||
input {
|
input {
|
||||||
class: "block w-full py-2 pl-8 pr-6 text-sm text-gray-700 placeholder-gray-400 bg-white border border-b border-gray-400 rounded-l rounded-r appearance-none sm:rounded-l-none focus:bg-white focus:placeholder-gray-600 focus:text-gray-700 focus:outline-none",
|
class: "block w-full py-2 pl-8 pr-6 text-sm text-gray-700 placeholder-gray-400 bg-white border border-b border-gray-400 rounded-l rounded-r appearance-none sm:rounded-l-none focus:bg-white focus:placeholder-gray-600 focus:text-gray-700 focus:outline-none",
|
||||||
placeholder: "Search",
|
placeholder: "Search"
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
// table
|
// table
|
||||||
div {
|
div { class: "px-4 py-4 -mx-4 overflow-x-auto sm:-mx-8 sm:px-8",
|
||||||
class: "px-4 py-4 -mx-4 overflow-x-auto sm:-mx-8 sm:px-8",
|
div { class: "inline-block min-w-full overflow-hidden rounded-lg shadow",
|
||||||
div {
|
table { class: "min-w-full leading-normal",
|
||||||
class: "inline-block min-w-full overflow-hidden rounded-lg shadow",
|
|
||||||
table {
|
|
||||||
class: "min-w-full leading-normal",
|
|
||||||
// table header
|
// table header
|
||||||
thead {
|
thead {
|
||||||
tr {
|
tr {
|
||||||
th {
|
th { class: "px-5 py-3 text-xs font-semibold tracking-wider text-left text-gray-600 uppercase bg-gray-100 border-b-2 border-gray-200",
|
||||||
class: "px-5 py-3 text-xs font-semibold tracking-wider text-left text-gray-600 uppercase bg-gray-100 border-b-2 border-gray-200",
|
|
||||||
"User"
|
"User"
|
||||||
}
|
}
|
||||||
th {
|
th { class: "px-5 py-3 text-xs font-semibold tracking-wider text-left text-gray-600 uppercase bg-gray-100 border-b-2 border-gray-200",
|
||||||
class: "px-5 py-3 text-xs font-semibold tracking-wider text-left text-gray-600 uppercase bg-gray-100 border-b-2 border-gray-200",
|
|
||||||
"Role"
|
"Role"
|
||||||
}
|
}
|
||||||
th {
|
th { class: "px-5 py-3 text-xs font-semibold tracking-wider text-left text-gray-600 uppercase bg-gray-100 border-b-2 border-gray-200",
|
||||||
class: "px-5 py-3 text-xs font-semibold tracking-wider text-left text-gray-600 uppercase bg-gray-100 border-b-2 border-gray-200",
|
|
||||||
"Created at"
|
"Created at"
|
||||||
}
|
}
|
||||||
th {
|
th { class: "px-5 py-3 text-xs font-semibold tracking-wider text-left text-gray-600 uppercase bg-gray-100 border-b-2 border-gray-200",
|
||||||
class: "px-5 py-3 text-xs font-semibold tracking-wider text-left text-gray-600 uppercase bg-gray-100 border-b-2 border-gray-200",
|
|
||||||
"Status"
|
"Status"
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
@@ -200,7 +147,7 @@ fn Table_with_pagination(cx: Scope)->Element{
|
|||||||
// data
|
// data
|
||||||
tbody {
|
tbody {
|
||||||
// "<tr v-for=\"(u, index) in paginatedTableData\" :key=\"index\">"
|
// "<tr v-for=\"(u, index) in paginatedTableData\" :key=\"index\">"
|
||||||
paginated_table_data.iter().map(|u|{rsx!{
|
{paginated_table_data}.iter().map(|u|{rsx!{
|
||||||
tr{
|
tr{
|
||||||
// key: "{u.id}",
|
// key: "{u.id}",
|
||||||
td {
|
td {
|
||||||
@@ -241,16 +188,16 @@ fn Table_with_pagination(cx: Scope)->Element{
|
|||||||
td {
|
td {
|
||||||
class: "px-5 py-5 text-sm bg-white border-b border-gray-200",
|
class: "px-5 py-5 text-sm bg-white border-b border-gray-200",
|
||||||
span {
|
span {
|
||||||
class: format_args!("inline-flex px-3 py-1 font-semibold leading-tight rounded-full {} {}",status_color(&u.status).0,status_color(&u.status).1),
|
class: format!("inline-flex px-3 py-1 font-semibold leading-tight rounded-full {} {}",status_color(&u.status).0,status_color(&u.status).1),
|
||||||
"{ u.status }"
|
"{ u.status }"
|
||||||
}
|
}
|
||||||
|
|
||||||
// span {
|
// span {
|
||||||
// class: format_args!("relative inline-block px-3 py-1 font-semibold leading-tight {}", status_color(&u.status).1),
|
// class: format!("relative inline-block px-3 py-1 font-semibold leading-tight {}", status_color(&u.status).1),
|
||||||
// span {
|
// span {
|
||||||
// aria_hidden: "true",
|
// aria_hidden: "true",
|
||||||
// class: {
|
// class: {
|
||||||
// format_args!("absolute inset-0 opacity-50 rounded-full {}", status_color(&u.status).0)
|
// format!("absolute inset-0 opacity-50 rounded-full {}", status_color(&u.status).0)
|
||||||
// }
|
// }
|
||||||
// }
|
// }
|
||||||
// span {
|
// span {
|
||||||
@@ -266,24 +213,18 @@ fn Table_with_pagination(cx: Scope)->Element{
|
|||||||
}
|
}
|
||||||
// iter end
|
// iter end
|
||||||
}})
|
}})
|
||||||
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
div {
|
div { class: "flex flex-col items-center px-5 py-5 bg-white border-t xs:flex-row xs:justify-between",
|
||||||
class: "flex flex-col items-center px-5 py-5 bg-white border-t xs:flex-row xs:justify-between",
|
span { class: "text-xs text-gray-900 xs:text-sm",
|
||||||
span {
|
|
||||||
class: "text-xs text-gray-900 xs:text-sm",
|
|
||||||
"Showing 1 to 4 of 50 Entries"
|
"Showing 1 to 4 of 50 Entries"
|
||||||
}
|
}
|
||||||
div {
|
div { class: "inline-flex mt-2 xs:mt-0",
|
||||||
class: "inline-flex mt-2 xs:mt-0",
|
button { class: "px-4 py-2 text-sm font-semibold text-gray-800 bg-gray-300 rounded-l hover:bg-gray-400",
|
||||||
button {
|
|
||||||
class: "px-4 py-2 text-sm font-semibold text-gray-800 bg-gray-300 rounded-l hover:bg-gray-400",
|
|
||||||
"Prev"
|
"Prev"
|
||||||
}
|
}
|
||||||
button {
|
button { class: "px-4 py-2 text-sm font-semibold text-gray-800 bg-gray-300 rounded-r hover:bg-gray-400",
|
||||||
class: "px-4 py-2 text-sm font-semibold text-gray-800 bg-gray-300 rounded-r hover:bg-gray-400",
|
|
||||||
"Next"
|
"Next"
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
@@ -292,57 +233,41 @@ fn Table_with_pagination(cx: Scope)->Element{
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
})
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
// 宽表格
|
// 宽表格
|
||||||
fn Wide_table(cx: Scope)->Element{
|
fn Wide_table() -> Element {
|
||||||
let wide_table_data = &use_read(&cx, USE_TABLE_DATA).wideTableData;
|
let table_data = use_hook(|| USE_TABLE_DATA.signal());
|
||||||
|
let wide_table_data = &table_data.read().wideTableData;
|
||||||
cx.render(rsx!{
|
rsx! {
|
||||||
div {
|
div { class: "mt-8",
|
||||||
class: "mt-8",
|
h4 { class: "text-gray-600", "Wide Table" }
|
||||||
h4 {
|
div { class: "flex flex-col mt-6",
|
||||||
class: "text-gray-600",
|
div { class: "py-2 -my-2 overflow-x-auto sm:-mx-6 sm:px-6 lg:-mx-8 lg:px-8",
|
||||||
"Wide Table"
|
div { class: "inline-block min-w-full overflow-hidden align-middle border-b border-gray-200 shadow sm:rounded-lg",
|
||||||
}
|
table { class: "min-w-full",
|
||||||
div {
|
|
||||||
class: "flex flex-col mt-6",
|
|
||||||
div {
|
|
||||||
class: "py-2 -my-2 overflow-x-auto sm:-mx-6 sm:px-6 lg:-mx-8 lg:px-8",
|
|
||||||
div {
|
|
||||||
class: "inline-block min-w-full overflow-hidden align-middle border-b border-gray-200 shadow sm:rounded-lg",
|
|
||||||
table {
|
|
||||||
class: "min-w-full",
|
|
||||||
thead {
|
thead {
|
||||||
tr {
|
tr {
|
||||||
th {
|
th { class: "px-6 py-3 text-xs font-medium leading-4 tracking-wider text-left text-gray-500 uppercase bg-gray-100 border-b border-gray-200",
|
||||||
class: "px-6 py-3 text-xs font-medium leading-4 tracking-wider text-left text-gray-500 uppercase bg-gray-100 border-b border-gray-200",
|
|
||||||
"Name"
|
"Name"
|
||||||
}
|
}
|
||||||
th {
|
th { class: "px-6 py-3 text-xs font-medium leading-4 tracking-wider text-left text-gray-500 uppercase bg-gray-100 border-b border-gray-200",
|
||||||
class: "px-6 py-3 text-xs font-medium leading-4 tracking-wider text-left text-gray-500 uppercase bg-gray-100 border-b border-gray-200",
|
|
||||||
"Title"
|
"Title"
|
||||||
}
|
}
|
||||||
th {
|
th { class: "px-6 py-3 text-xs font-medium leading-4 tracking-wider text-left text-gray-500 uppercase bg-gray-100 border-b border-gray-200",
|
||||||
class: "px-6 py-3 text-xs font-medium leading-4 tracking-wider text-left text-gray-500 uppercase bg-gray-100 border-b border-gray-200",
|
|
||||||
"Status"
|
"Status"
|
||||||
}
|
}
|
||||||
th {
|
th { class: "px-6 py-3 text-xs font-medium leading-4 tracking-wider text-left text-gray-500 uppercase bg-gray-100 border-b border-gray-200",
|
||||||
class: "px-6 py-3 text-xs font-medium leading-4 tracking-wider text-left text-gray-500 uppercase bg-gray-100 border-b border-gray-200",
|
|
||||||
"Role"
|
"Role"
|
||||||
}
|
}
|
||||||
th {
|
th { class: "px-6 py-3 bg-gray-100 border-b border-gray-200" }
|
||||||
class: "px-6 py-3 bg-gray-100 border-b border-gray-200",
|
|
||||||
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
// data
|
// data
|
||||||
tbody {
|
tbody { class: "bg-white",
|
||||||
class: "bg-white",
|
|
||||||
// iter start
|
// iter start
|
||||||
wide_table_data.iter().map(|u|{rsx!{tr{
|
{wide_table_data}.iter().map(|u|{rsx!{tr{
|
||||||
|
|
||||||
td {
|
td {
|
||||||
class: "px-6 py-4 border-b border-gray-200 whitespace-nowrap",
|
class: "px-6 py-4 border-b border-gray-200 whitespace-nowrap",
|
||||||
@@ -407,15 +332,15 @@ fn Wide_table(cx: Scope)->Element{
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
})
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
mod icons {
|
mod icons {
|
||||||
use dioxus::prelude::*;
|
use dioxus::prelude::*;
|
||||||
use dioxus_html_macro::html;
|
use dioxus_html_macro::html;
|
||||||
|
|
||||||
pub fn icon_1(cx: Scope)->Element{
|
pub fn icon_1() -> Element {
|
||||||
cx.render(html!{
|
html! {
|
||||||
<svg
|
<svg
|
||||||
class="w-4 h-4 fill-current"
|
class="w-4 h-4 fill-current"
|
||||||
xmlns="http://www.w3.org/2000/svg"
|
xmlns="http://www.w3.org/2000/svg"
|
||||||
@@ -425,11 +350,11 @@ mod icons{
|
|||||||
d="M9.293 12.95l.707.707L15.657 8l-1.414-1.414L10 10.828 5.757 6.586 4.343 8z"
|
d="M9.293 12.95l.707.707L15.657 8l-1.414-1.414L10 10.828 5.757 6.586 4.343 8z"
|
||||||
/>
|
/>
|
||||||
</svg>
|
</svg>
|
||||||
})
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
pub fn icon_2(cx: Scope)->Element{
|
pub fn icon_2() -> Element {
|
||||||
cx.render(html!{
|
html! {
|
||||||
<svg
|
<svg
|
||||||
class="w-4 h-4 fill-current"
|
class="w-4 h-4 fill-current"
|
||||||
xmlns="http://www.w3.org/2000/svg"
|
xmlns="http://www.w3.org/2000/svg"
|
||||||
@@ -439,11 +364,11 @@ mod icons{
|
|||||||
d="M9.293 12.95l.707.707L15.657 8l-1.414-1.414L10 10.828 5.757 6.586 4.343 8z"
|
d="M9.293 12.95l.707.707L15.657 8l-1.414-1.414L10 10.828 5.757 6.586 4.343 8z"
|
||||||
/>
|
/>
|
||||||
</svg>
|
</svg>
|
||||||
})
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
pub fn icon_3(cx: Scope)->Element{
|
pub fn icon_3() -> Element {
|
||||||
cx.render(html!{
|
html! {
|
||||||
<svg
|
<svg
|
||||||
view_box="0 0 24 24"
|
view_box="0 0 24 24"
|
||||||
class="w-4 h-4 text-gray-500 fill-current"
|
class="w-4 h-4 text-gray-500 fill-current"
|
||||||
@@ -452,7 +377,6 @@ mod icons{
|
|||||||
d="M10 4a6 6 0 100 12 6 6 0 000-12zm-8 6a8 8 0 1114.32 4.906l5.387 5.387a1 1 0 01-1.414 1.414l-5.387-5.387A8 8 0 012 10z"
|
d="M10 4a6 6 0 100 12 6 6 0 000-12zm-8 6a8 8 0 1114.32 4.906l5.387 5.387a1 1 0 01-1.414 1.414l-5.387-5.387A8 8 0 012 10z"
|
||||||
/>
|
/>
|
||||||
</svg>
|
</svg>
|
||||||
})
|
|
||||||
}
|
}
|
||||||
|
}
|
||||||
}
|
}
|
||||||
@@ -1,112 +1,65 @@
|
|||||||
/*
|
/*
|
||||||
* @Author: plucky
|
|
||||||
* @Date: 2022-10-14 16:04:10
|
* @Date: 2022-10-14 16:04:10
|
||||||
* @LastEditTime: 2022-10-14 16:21:17
|
* @LastEditTime: 2024-07-05 20:22:52
|
||||||
* @Description:
|
* @Description:
|
||||||
*/
|
*/
|
||||||
|
|
||||||
use dioxus::prelude::*;
|
use dioxus::prelude::*;
|
||||||
|
|
||||||
pub fn view(cx: Scope)->Element{
|
pub fn view() -> Element {
|
||||||
|
rsx! {
|
||||||
cx.render(rsx!{
|
|
||||||
div {
|
div {
|
||||||
h3 {
|
h3 { class: "text-3xl font-medium text-gray-700", "UI Elements" }
|
||||||
class: "text-3xl font-medium text-gray-700",
|
|
||||||
"UI Elements"
|
|
||||||
}
|
|
||||||
// alerts
|
// alerts
|
||||||
div {
|
div { class: "mt-4",
|
||||||
class: "mt-4",
|
h4 { class: "text-gray-600", "Alerts" }
|
||||||
h4 {
|
div { class: "mt-4",
|
||||||
class: "text-gray-600",
|
div { class: "px-4 py-4 overflow-x-auto bg-white rounded-md whitespace-nowrap",
|
||||||
"Alerts"
|
div { class: "inline-flex w-full max-w-sm ml-3 overflow-hidden bg-white rounded-lg shadow-md",
|
||||||
}
|
div { class: "flex items-center justify-center w-12 bg-green-500",
|
||||||
div {
|
|
||||||
class: "mt-4",
|
|
||||||
div {
|
|
||||||
class: "px-4 py-4 overflow-x-auto bg-white rounded-md whitespace-nowrap",
|
|
||||||
div {
|
|
||||||
class: "inline-flex w-full max-w-sm ml-3 overflow-hidden bg-white rounded-lg shadow-md",
|
|
||||||
div {
|
|
||||||
class: "flex items-center justify-center w-12 bg-green-500",
|
|
||||||
icons::icon_1 {}
|
icons::icon_1 {}
|
||||||
}
|
}
|
||||||
div {
|
div { class: "px-4 py-2 -mx-3",
|
||||||
class: "px-4 py-2 -mx-3",
|
div { class: "mx-3",
|
||||||
div {
|
span { class: "font-semibold text-green-500", "Success" }
|
||||||
class: "mx-3",
|
p { class: "text-sm text-gray-600",
|
||||||
span {
|
|
||||||
class: "font-semibold text-green-500",
|
|
||||||
"Success"
|
|
||||||
}
|
|
||||||
p {
|
|
||||||
class: "text-sm text-gray-600",
|
|
||||||
"Your account was registered!"
|
"Your account was registered!"
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
div {
|
div { class: "inline-flex w-full max-w-sm ml-3 overflow-hidden bg-white rounded-lg shadow-md",
|
||||||
class: "inline-flex w-full max-w-sm ml-3 overflow-hidden bg-white rounded-lg shadow-md",
|
div { class: "flex items-center justify-center w-12 bg-blue-500",
|
||||||
div {
|
|
||||||
class: "flex items-center justify-center w-12 bg-blue-500",
|
|
||||||
icons::icon_2 {}
|
icons::icon_2 {}
|
||||||
}
|
}
|
||||||
div {
|
div { class: "px-4 py-2 -mx-3",
|
||||||
class: "px-4 py-2 -mx-3",
|
div { class: "mx-3",
|
||||||
div {
|
span { class: "font-semibold text-blue-500", "Info" }
|
||||||
class: "mx-3",
|
p { class: "text-sm text-gray-600",
|
||||||
span {
|
|
||||||
class: "font-semibold text-blue-500",
|
|
||||||
"Info"
|
|
||||||
}
|
|
||||||
p {
|
|
||||||
class: "text-sm text-gray-600",
|
|
||||||
"Channel archived by the owner."
|
"Channel archived by the owner."
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
div {
|
div { class: "inline-flex w-full max-w-sm ml-3 overflow-hidden bg-white rounded-lg shadow-md",
|
||||||
class: "inline-flex w-full max-w-sm ml-3 overflow-hidden bg-white rounded-lg shadow-md",
|
div { class: "flex items-center justify-center w-12 bg-yellow-500",
|
||||||
div {
|
|
||||||
class: "flex items-center justify-center w-12 bg-yellow-500",
|
|
||||||
icons::icon_3 {}
|
icons::icon_3 {}
|
||||||
}
|
}
|
||||||
div {
|
div { class: "px-4 py-2 -mx-3",
|
||||||
class: "px-4 py-2 -mx-3",
|
div { class: "mx-3",
|
||||||
div {
|
span { class: "font-semibold text-yellow-500", "Warning" }
|
||||||
class: "mx-3",
|
p { class: "text-sm text-gray-600", "Image size is too large." }
|
||||||
span {
|
|
||||||
class: "font-semibold text-yellow-500",
|
|
||||||
"Warning"
|
|
||||||
}
|
|
||||||
p {
|
|
||||||
class: "text-sm text-gray-600",
|
|
||||||
"Image size is too large."
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
div { class: "inline-flex w-full max-w-sm ml-3 overflow-hidden bg-white rounded-lg shadow-md",
|
||||||
div {
|
div { class: "flex items-center justify-center w-12 bg-red-500",
|
||||||
class: "inline-flex w-full max-w-sm ml-3 overflow-hidden bg-white rounded-lg shadow-md",
|
|
||||||
div {
|
|
||||||
class: "flex items-center justify-center w-12 bg-red-500",
|
|
||||||
icons::icon_4 {}
|
icons::icon_4 {}
|
||||||
}
|
}
|
||||||
div {
|
div { class: "px-4 py-2 -mx-3",
|
||||||
class: "px-4 py-2 -mx-3",
|
div { class: "mx-3",
|
||||||
div {
|
span { class: "font-semibold text-red-500", "Error" }
|
||||||
class: "mx-3",
|
p { class: "text-sm text-gray-600", "Your email is already used!" }
|
||||||
span {
|
|
||||||
class: "font-semibold text-red-500",
|
|
||||||
"Error"
|
|
||||||
}
|
|
||||||
p {
|
|
||||||
class: "text-sm text-gray-600",
|
|
||||||
"Your email is already used!"
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
@@ -114,150 +67,103 @@ pub fn view(cx: Scope)->Element{
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
// Inputs
|
// Inputs
|
||||||
div {
|
div { class: "mt-8",
|
||||||
class: "mt-8",
|
h4 { class: "text-gray-600", "Inputs" }
|
||||||
h4 {
|
div { class: "mt-4",
|
||||||
class: "text-gray-600",
|
div { class: "flex items-center px-4 py-4 space-x-4 overflow-x-auto bg-white rounded-md",
|
||||||
"Inputs"
|
|
||||||
}
|
|
||||||
div {
|
|
||||||
class: "mt-4",
|
|
||||||
div {
|
|
||||||
class: "flex items-center px-4 py-4 space-x-4 overflow-x-auto bg-white rounded-md",
|
|
||||||
label {
|
label {
|
||||||
input {
|
input {
|
||||||
class: "w-5 h-5 text-indigo-600 focus:ring-indigo-500",
|
class: "w-5 h-5 text-indigo-600 focus:ring-indigo-500",
|
||||||
name: "radio",
|
name: "radio",
|
||||||
r#type: "radio",
|
r#type: "radio"
|
||||||
}
|
|
||||||
span {
|
|
||||||
class: "ml-2 text-gray-700",
|
|
||||||
"Radio"
|
|
||||||
}
|
}
|
||||||
|
span { class: "ml-2 text-gray-700", "Radio" }
|
||||||
}
|
}
|
||||||
label {
|
label {
|
||||||
input {
|
input {
|
||||||
class: "w-5 h-5 text-indigo-600 rounded-md focus:ring-indigo-500",
|
class: "w-5 h-5 text-indigo-600 rounded-md focus:ring-indigo-500",
|
||||||
name: "radio",
|
name: "radio",
|
||||||
r#type: "checkbox",
|
r#type: "checkbox"
|
||||||
}
|
}
|
||||||
span {
|
span { class: "ml-2 text-gray-700", "Checkbox" }
|
||||||
class: "ml-2 text-gray-700",
|
|
||||||
"Checkbox"
|
|
||||||
}
|
}
|
||||||
}
|
label { class: "block",
|
||||||
label {
|
|
||||||
class: "block",
|
|
||||||
input {
|
input {
|
||||||
class: "block w-full mt-1 border-gray-200 rounded-md focus:border-indigo-600 focus:ring focus:ring-opacity-40 focus:ring-indigo-500",
|
class: "block w-full mt-1 c-input",
|
||||||
placeholder: "Email",
|
placeholder: "Email",
|
||||||
r#type: "email",
|
r#type: "email"
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
div {
|
div { class: "relative mx-4 lg:mx-0",
|
||||||
class: "relative mx-4 lg:mx-0",
|
span { class: "absolute inset-y-0 left-0 flex items-center pl-3",
|
||||||
span {
|
|
||||||
class: "absolute inset-y-0 left-0 flex items-center pl-3",
|
|
||||||
icons::icon_5 {}
|
icons::icon_5 {}
|
||||||
}
|
}
|
||||||
input {
|
input {
|
||||||
class: "w-32 pl-10 pr-4 text-indigo-600 border-gray-200 rounded-md sm:w-64 focus:border-indigo-600 focus:ring focus:ring-opacity-40 focus:ring-indigo-500",
|
class: "w-32 pl-10 pr-4 text-indigo-600 sm:w-64 c-input",
|
||||||
placeholder: "Search",
|
placeholder: "Search",
|
||||||
r#type: "text",
|
r#type: "text"
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
// Buttons
|
// Buttons
|
||||||
div {
|
div { class: "mt-8",
|
||||||
class: "mt-8",
|
h4 { class: "text-gray-600", "Buttons" }
|
||||||
h4 {
|
div { class: "mt-4",
|
||||||
class: "text-gray-600",
|
div { class: "flex px-4 py-4 space-x-4 overflow-x-auto bg-white rounded-md",
|
||||||
"Buttons"
|
button { class: "px-4 py-2 font-medium tracking-wide text-white capitalize transition-colors duration-200 transform bg-indigo-600 rounded-md hover:bg-indigo-500 focus:outline-none focus:bg-indigo-500",
|
||||||
}
|
|
||||||
div {
|
|
||||||
class: "mt-4",
|
|
||||||
div {
|
|
||||||
class: "flex px-4 py-4 space-x-4 overflow-x-auto bg-white rounded-md",
|
|
||||||
button {
|
|
||||||
class: "px-4 py-2 font-medium tracking-wide text-white capitalize transition-colors duration-200 transform bg-indigo-600 rounded-md hover:bg-indigo-500 focus:outline-none focus:bg-indigo-500",
|
|
||||||
"Primary"
|
"Primary"
|
||||||
}
|
}
|
||||||
button {
|
button { class: "flex items-center px-2 py-2 font-medium tracking-wide text-white capitalize transition-colors duration-200 transform bg-indigo-600 rounded-md hover:bg-indigo-500 focus:outline-none focus:bg-indigo-500",
|
||||||
class: "flex items-center px-2 py-2 font-medium tracking-wide text-white capitalize transition-colors duration-200 transform bg-indigo-600 rounded-md hover:bg-indigo-500 focus:outline-none focus:bg-indigo-500",
|
|
||||||
icons::icon_6 {}
|
icons::icon_6 {}
|
||||||
span {
|
span { class: "mx-1", "Refresh" }
|
||||||
class: "mx-1",
|
|
||||||
"Refresh"
|
|
||||||
}
|
}
|
||||||
}
|
div { class: "flex items-center",
|
||||||
div {
|
button { class: "px-4 py-2 font-medium tracking-wide text-white capitalize transition-colors duration-200 transform bg-indigo-600 rounded-md hover:bg-indigo-500 focus:outline-none focus:bg-indigo-500",
|
||||||
class: "flex items-center",
|
|
||||||
button {
|
|
||||||
class: "px-4 py-2 font-medium tracking-wide text-white capitalize transition-colors duration-200 transform bg-indigo-600 rounded-md hover:bg-indigo-500 focus:outline-none focus:bg-indigo-500",
|
|
||||||
"Download"
|
"Download"
|
||||||
}
|
}
|
||||||
span {
|
span { class: "border border-transparent" }
|
||||||
class: "border border-transparent",
|
div { class: "relative",
|
||||||
|
button { class: "relative z-10 block p-2 transition-colors duration-200 transform bg-indigo-600 rounded-md hover:bg-indigo-500 focus:outline-none focus:bg-indigo-500",
|
||||||
}
|
|
||||||
div {
|
|
||||||
class: "relative",
|
|
||||||
button {
|
|
||||||
class: "relative z-10 block p-2 transition-colors duration-200 transform bg-indigo-600 rounded-md hover:bg-indigo-500 focus:outline-none focus:bg-indigo-500",
|
|
||||||
icons::icon_7 {}
|
icons::icon_7 {}
|
||||||
}
|
}
|
||||||
div {
|
div { class: "absolute right-0 z-20 w-48 mt-2 overflow-hidden bg-white rounded-md shadow-xl dark:bg-gray-700" }
|
||||||
class: "absolute right-0 z-20 w-48 mt-2 overflow-hidden bg-white rounded-md shadow-xl dark:bg-gray-700",
|
|
||||||
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
// Paginations
|
// Paginations
|
||||||
div {
|
div { class: "mt-8",
|
||||||
class: "mt-8",
|
h4 { class: "text-gray-600", "Paginations" }
|
||||||
h4 {
|
div { class: "mt-4",
|
||||||
class: "text-gray-600",
|
div { class: "flex px-4 py-4 overflow-x-auto bg-white rounded-md",
|
||||||
"Paginations"
|
div { class: "flex mr-4 rounded",
|
||||||
}
|
|
||||||
div {
|
|
||||||
class: "mt-4",
|
|
||||||
div {
|
|
||||||
class: "flex px-4 py-4 overflow-x-auto bg-white rounded-md",
|
|
||||||
div {
|
|
||||||
class: "flex mr-4 rounded",
|
|
||||||
a {
|
a {
|
||||||
class: "px-3 py-2 ml-0 leading-tight text-indigo-700 bg-white border border-r-0 border-gray-200 rounded-l hover:bg-indigo-500 hover:text-white",
|
class: "px-3 py-2 ml-0 leading-tight text-indigo-700 bg-white border border-r-0 border-gray-200 rounded-l hover:bg-indigo-500 hover:text-white",
|
||||||
href: "#",span {
|
href: "#",
|
||||||
"Previous"
|
span { "Previous" }
|
||||||
}
|
|
||||||
}
|
}
|
||||||
a {
|
a {
|
||||||
class: "px-3 py-2 leading-tight text-indigo-700 bg-white border border-r-0 border-gray-200 hover:bg-indigo-500 hover:text-white",
|
class: "px-3 py-2 leading-tight text-indigo-700 bg-white border border-r-0 border-gray-200 hover:bg-indigo-500 hover:text-white",
|
||||||
href: "#",span {
|
href: "#",
|
||||||
"1"
|
span { "1" }
|
||||||
}
|
|
||||||
}
|
}
|
||||||
a {
|
a {
|
||||||
class: "px-3 py-2 leading-tight text-indigo-700 bg-white border border-r-0 border-gray-200 hover:bg-indigo-500 hover:text-white",
|
class: "px-3 py-2 leading-tight text-indigo-700 bg-white border border-r-0 border-gray-200 hover:bg-indigo-500 hover:text-white",
|
||||||
href: "#",span {
|
href: "#",
|
||||||
"2"
|
span { "2" }
|
||||||
}
|
|
||||||
}
|
}
|
||||||
a {
|
a {
|
||||||
class: "px-3 py-2 leading-tight text-indigo-700 bg-white border border-r-0 border-gray-200 hover:bg-indigo-500 hover:text-white",
|
class: "px-3 py-2 leading-tight text-indigo-700 bg-white border border-r-0 border-gray-200 hover:bg-indigo-500 hover:text-white",
|
||||||
href: "#",span {
|
href: "#",
|
||||||
"3"
|
span { "3" }
|
||||||
}
|
|
||||||
}
|
}
|
||||||
a {
|
a {
|
||||||
class: "px-3 py-2 leading-tight text-indigo-700 bg-white border border-gray-200 rounded-r hover:bg-indigo-500 hover:text-white",
|
class: "px-3 py-2 leading-tight text-indigo-700 bg-white border border-gray-200 rounded-r hover:bg-indigo-500 hover:text-white",
|
||||||
href: "#",span {
|
href: "#",
|
||||||
"Next"
|
span { "Next" }
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
@@ -265,16 +171,14 @@ pub fn view(cx: Scope)->Element{
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
})
|
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
mod icons {
|
mod icons {
|
||||||
use dioxus::prelude::*;
|
use dioxus::prelude::*;
|
||||||
use dioxus_html_macro::html;
|
use dioxus_html_macro::html;
|
||||||
|
|
||||||
pub fn icon_1(cx: Scope)->Element{
|
pub fn icon_1() -> Element {
|
||||||
cx.render(html!{
|
html! {
|
||||||
<svg
|
<svg
|
||||||
class="w-6 h-6 text-white fill-current"
|
class="w-6 h-6 text-white fill-current"
|
||||||
view_box="0 0 40 40"
|
view_box="0 0 40 40"
|
||||||
@@ -284,11 +188,11 @@ mod icons{
|
|||||||
d="M20 3.33331C10.8 3.33331 3.33337 10.8 3.33337 20C3.33337 29.2 10.8 36.6666 20 36.6666C29.2 36.6666 36.6667 29.2 36.6667 20C36.6667 10.8 29.2 3.33331 20 3.33331ZM16.6667 28.3333L8.33337 20L10.6834 17.65L16.6667 23.6166L29.3167 10.9666L31.6667 13.3333L16.6667 28.3333Z"
|
d="M20 3.33331C10.8 3.33331 3.33337 10.8 3.33337 20C3.33337 29.2 10.8 36.6666 20 36.6666C29.2 36.6666 36.6667 29.2 36.6667 20C36.6667 10.8 29.2 3.33331 20 3.33331ZM16.6667 28.3333L8.33337 20L10.6834 17.65L16.6667 23.6166L29.3167 10.9666L31.6667 13.3333L16.6667 28.3333Z"
|
||||||
/>
|
/>
|
||||||
</svg>
|
</svg>
|
||||||
})
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
pub fn icon_2(cx: Scope)->Element{
|
pub fn icon_2() -> Element {
|
||||||
cx.render(html!{
|
html! {
|
||||||
<svg
|
<svg
|
||||||
class="w-6 h-6 text-white fill-current"
|
class="w-6 h-6 text-white fill-current"
|
||||||
view_box="0 0 40 40"
|
view_box="0 0 40 40"
|
||||||
@@ -298,11 +202,11 @@ mod icons{
|
|||||||
d="M20 3.33331C10.8 3.33331 3.33337 10.8 3.33337 20C3.33337 29.2 10.8 36.6666 20 36.6666C29.2 36.6666 36.6667 29.2 36.6667 20C36.6667 10.8 29.2 3.33331 20 3.33331ZM21.6667 28.3333H18.3334V25H21.6667V28.3333ZM21.6667 21.6666H18.3334V11.6666H21.6667V21.6666Z"
|
d="M20 3.33331C10.8 3.33331 3.33337 10.8 3.33337 20C3.33337 29.2 10.8 36.6666 20 36.6666C29.2 36.6666 36.6667 29.2 36.6667 20C36.6667 10.8 29.2 3.33331 20 3.33331ZM21.6667 28.3333H18.3334V25H21.6667V28.3333ZM21.6667 21.6666H18.3334V11.6666H21.6667V21.6666Z"
|
||||||
/>
|
/>
|
||||||
</svg>
|
</svg>
|
||||||
})
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
pub fn icon_3(cx: Scope)->Element{
|
pub fn icon_3() -> Element {
|
||||||
cx.render(html!{
|
html! {
|
||||||
<svg
|
<svg
|
||||||
class="w-6 h-6 text-white fill-current"
|
class="w-6 h-6 text-white fill-current"
|
||||||
view_box="0 0 40 40"
|
view_box="0 0 40 40"
|
||||||
@@ -312,11 +216,11 @@ mod icons{
|
|||||||
d="M20 3.33331C10.8 3.33331 3.33337 10.8 3.33337 20C3.33337 29.2 10.8 36.6666 20 36.6666C29.2 36.6666 36.6667 29.2 36.6667 20C36.6667 10.8 29.2 3.33331 20 3.33331ZM21.6667 28.3333H18.3334V25H21.6667V28.3333ZM21.6667 21.6666H18.3334V11.6666H21.6667V21.6666Z"
|
d="M20 3.33331C10.8 3.33331 3.33337 10.8 3.33337 20C3.33337 29.2 10.8 36.6666 20 36.6666C29.2 36.6666 36.6667 29.2 36.6667 20C36.6667 10.8 29.2 3.33331 20 3.33331ZM21.6667 28.3333H18.3334V25H21.6667V28.3333ZM21.6667 21.6666H18.3334V11.6666H21.6667V21.6666Z"
|
||||||
/>
|
/>
|
||||||
</svg>
|
</svg>
|
||||||
})
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
pub fn icon_4(cx: Scope)->Element{
|
pub fn icon_4() -> Element {
|
||||||
cx.render(html!{
|
html! {
|
||||||
<svg
|
<svg
|
||||||
class="w-6 h-6 text-white fill-current"
|
class="w-6 h-6 text-white fill-current"
|
||||||
view_box="0 0 40 40"
|
view_box="0 0 40 40"
|
||||||
@@ -326,11 +230,11 @@ mod icons{
|
|||||||
d="M20 3.36667C10.8167 3.36667 3.3667 10.8167 3.3667 20C3.3667 29.1833 10.8167 36.6333 20 36.6333C29.1834 36.6333 36.6334 29.1833 36.6334 20C36.6334 10.8167 29.1834 3.36667 20 3.36667ZM19.1334 33.3333V22.9H13.3334L21.6667 6.66667V17.1H27.25L19.1334 33.3333Z"
|
d="M20 3.36667C10.8167 3.36667 3.3667 10.8167 3.3667 20C3.3667 29.1833 10.8167 36.6333 20 36.6333C29.1834 36.6333 36.6334 29.1833 36.6334 20C36.6334 10.8167 29.1834 3.36667 20 3.36667ZM19.1334 33.3333V22.9H13.3334L21.6667 6.66667V17.1H27.25L19.1334 33.3333Z"
|
||||||
/>
|
/>
|
||||||
</svg>
|
</svg>
|
||||||
})
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
pub fn icon_5(cx: Scope)->Element{
|
pub fn icon_5() -> Element {
|
||||||
cx.render(html!{
|
html! {
|
||||||
<svg class="w-5 h-5 text-gray-500" view_box="0 0 24 24" fill="none">
|
<svg class="w-5 h-5 text-gray-500" view_box="0 0 24 24" fill="none">
|
||||||
<path
|
<path
|
||||||
d="M21 21L15 15M17 10C17 13.866 13.866 17 10 17C6.13401 17 3 13.866 3 10C3 6.13401 6.13401 3 10 3C13.866 3 17 6.13401 17 10Z"
|
d="M21 21L15 15M17 10C17 13.866 13.866 17 10 17C6.13401 17 3 13.866 3 10C3 6.13401 6.13401 3 10 3C13.866 3 17 6.13401 17 10Z"
|
||||||
@@ -340,26 +244,25 @@ mod icons{
|
|||||||
stroke_linejoin="round"
|
stroke_linejoin="round"
|
||||||
/>
|
/>
|
||||||
</svg>
|
</svg>
|
||||||
})
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
pub fn icon_6(cx: Scope)->Element{
|
pub fn icon_6() -> Element {
|
||||||
cx.render(html!{
|
html! {
|
||||||
<svg class="w-5 h-5 mx-1" xmlns="http://www.w3.org/2000/svg"
|
<svg class="w-5 h-5 mx-1" xmlns="http://www.w3.org/2000/svg"
|
||||||
view_box="0 0 20 20" fill="currentColor">
|
view_box="0 0 20 20" fill="currentColor">
|
||||||
<path fill_rule="evenodd" d="M4 2a1 1 0 011 1v2.101a7.002 7.002 0 0111.601 2.566 1 1 0 11-1.885.666A5.002 5.002 0 005.999 7H9a1 1 0 010 2H4a1 1 0 01-1-1V3a1 1 0 011-1zm.008 9.057a1 1 0 011.276.61A5.002 5.002 0 0014.001 13H11a1 1 0 110-2h5a1 1 0 011 1v5a1 1 0 11-2 0v-2.101a7.002 7.002 0 01-11.601-2.566 1 1 0 01.61-1.276z"
|
<path fill_rule="evenodd" d="M4 2a1 1 0 011 1v2.101a7.002 7.002 0 0111.601 2.566 1 1 0 11-1.885.666A5.002 5.002 0 005.999 7H9a1 1 0 010 2H4a1 1 0 01-1-1V3a1 1 0 011-1zm.008 9.057a1 1 0 011.276.61A5.002 5.002 0 0014.001 13H11a1 1 0 110-2h5a1 1 0 011 1v5a1 1 0 11-2 0v-2.101a7.002 7.002 0 01-11.601-2.566 1 1 0 01.61-1.276z"
|
||||||
clip_rule="evenodd" />
|
clip_rule="evenodd" />
|
||||||
</svg>
|
</svg>
|
||||||
})
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
pub fn icon_7(cx: Scope)->Element{
|
pub fn icon_7() -> Element {
|
||||||
cx.render(html!{
|
html! {
|
||||||
<svg class="w-6 h-6 text-white" xmlns="http://www.w3.org/2000/svg" fill="none" view_box="0 0 24 24" stroke="currentColor">
|
<svg class="w-6 h-6 text-white" xmlns="http://www.w3.org/2000/svg" fill="none" view_box="0 0 24 24" stroke="currentColor">
|
||||||
<path stroke_linecap="round" stroke_linejoin="round" stroke_width="2"
|
<path stroke_linecap="round" stroke_linejoin="round" stroke_width="2"
|
||||||
d="M5 12h.01M12 12h.01M19 12h.01M6 12a1 1 0 11-2 0 1 1 0 012 0zm7 0a1 1 0 11-2 0 1 1 0 012 0zm7 0a1 1 0 11-2 0 1 1 0 012 0z" />
|
d="M5 12h.01M12 12h.01M19 12h.01M6 12a1 1 0 11-2 0 1 1 0 012 0zm7 0a1 1 0 11-2 0 1 1 0 012 0zm7 0a1 1 0 11-2 0 1 1 0 012 0z" />
|
||||||
</svg>
|
</svg>
|
||||||
})
|
|
||||||
}
|
}
|
||||||
|
}
|
||||||
}
|
}
|
||||||
Binary file not shown.
|
Before Width: | Height: | Size: 4.2 KiB |
Reference in New Issue
Block a user