update dioxus to 0.5
This commit is contained in:
Plucky
3
.gitignore
vendored
3
.gitignore
vendored
@@ -1,4 +1,5 @@
|
||||
/target
|
||||
/logs
|
||||
.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]
|
||||
name = "r-dashboard"
|
||||
version = "0.1.0"
|
||||
version = "0.1.1"
|
||||
edition = "2021"
|
||||
|
||||
# See more keys and their definitions at https://doc.rust-lang.org/cargo/reference/manifest.html
|
||||
|
||||
[dependencies]
|
||||
dioxus = {version = "0.2", features = ["web","router","fermi"]}
|
||||
dioxus = {version = "0.5", features = ["web", "router"]} #"fermi"
|
||||
console_error_panic_hook = "0.1"
|
||||
dioxus-html-macro = "0.2"
|
||||
dioxus-html-macro = "0.3"
|
||||
|
||||
tracing = "0"
|
||||
tracing-wasm = "0"
|
||||
|
||||
[profile.release]
|
||||
opt-level = 3
|
||||
opt-level = 'z'
|
||||
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 |
33
build.rs
33
build.rs
@@ -1,18 +1,21 @@
|
||||
/*
|
||||
* @Author: plucky
|
||||
* @Date: 2022-10-10 11:51:28
|
||||
* @LastEditTime: 2022-10-15 13:43:11
|
||||
* @Description:
|
||||
*/
|
||||
* @Date: 2022-10-10 11:51:28
|
||||
* @LastEditTime: 2024-07-07 18:04:24
|
||||
* @Description:
|
||||
*/
|
||||
|
||||
use std::process::Command;
|
||||
// use std::process::Command;
|
||||
|
||||
fn main(){
|
||||
// println!("hello, build.rs");
|
||||
// tailwindcss -i index.css -o style.css
|
||||
Command::new("tailwindcss").args(&["-i", "index.css", "-o", "dist/.stage/style.css"])
|
||||
.status().unwrap();
|
||||
// cp static/favicon.ico ... dist/.stage
|
||||
Command::new("cp").args(&["static/favicon.ico", "...", "dist/.stage/"])
|
||||
.status().unwrap();
|
||||
}
|
||||
fn main() {
|
||||
// println!("cargo::rerun-if-changed=input.css");
|
||||
// // tailwindcss -i index.css -o style.css
|
||||
// Command::new("tailwindcss")
|
||||
// .args(["-i", "input.css", "-o", "dist/.stage/style.css"])
|
||||
// .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 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"> -->
|
||||
<link data-trunk href="assets/favicon.ico" rel="copy-file">
|
||||
<link data-trunk href="input.css" rel="tailwind-css">
|
||||
|
||||
<title>R-Dashboard</title>
|
||||
</head>
|
||||
<body>
|
||||
<div id="main"></div>
|
||||
<div class="lg:hidden bg-black"></div>
|
||||
<!-- <div class="lg:hidden bg-black"></div> -->
|
||||
|
||||
</body>
|
||||
</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
|
||||
|
||||
* install trunk
|
||||
* install tailwind
|
||||
* run: trunk serve
|
||||
* open http://localhost:8080/
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
129
src/app.rs
129
src/app.rs
@@ -1,60 +1,63 @@
|
||||
/*
|
||||
* @Author: plucky
|
||||
* @Date: 2022-10-11 00:07:29
|
||||
* @LastEditTime: 2022-10-17 00:53:17
|
||||
* @Description:
|
||||
* @LastEditTime: 2024-07-06 18:46:11
|
||||
* @Description:
|
||||
*/
|
||||
#![allow(non_snake_case)]
|
||||
|
||||
use dioxus::prelude::*;
|
||||
use crate::{components::*, views::*};
|
||||
use dioxus::prelude::*;
|
||||
|
||||
pub fn app(cx: Scope) -> Element {
|
||||
cx.render(rsx! {
|
||||
Router {
|
||||
self::routes {}
|
||||
}
|
||||
})
|
||||
pub fn App() -> Element {
|
||||
rsx! {
|
||||
Router::<Route> {}
|
||||
}
|
||||
}
|
||||
|
||||
// Routes
|
||||
fn routes(cx: Scope) -> Element {
|
||||
cx.render(rsx! {
|
||||
Route { to: "/", login::view{}}
|
||||
Route { to: "/dashboard", Home{} }
|
||||
Route { to: "/ui-elements", Home{} }
|
||||
Route { to: "/tables", Home{} }
|
||||
Route { to: "/forms", Home{} }
|
||||
Route { to: "/cards", Home{} }
|
||||
Route { to: "/modal", Home{} }
|
||||
Route { to: "/blank", Home{} }
|
||||
|
||||
Redirect {from: "", to: "/" }
|
||||
})
|
||||
#[derive(Routable, PartialEq, Clone)]
|
||||
enum Route {
|
||||
#[route("/")]
|
||||
Login {},
|
||||
#[route("/:..segments")]
|
||||
NotFound { segments: Vec<String> },
|
||||
}
|
||||
|
||||
// Home Page View
|
||||
fn Home(cx: Scope)->Element{
|
||||
let route = use_route(&cx);
|
||||
fn Login() -> Element {
|
||||
login::view()
|
||||
}
|
||||
|
||||
let h = route.last_segment().unwrap_or_default();
|
||||
// fn Dashboard() -> Element {
|
||||
// let router = router();
|
||||
// let url = router.current_route_string();
|
||||
// tracing::warn!("url: {}", url);
|
||||
// Home("dashboard")
|
||||
// }
|
||||
|
||||
cx.render(rsx!{
|
||||
div {
|
||||
class: "flex h-screen bg-gray-200 font-roboto",
|
||||
sidebar::view{}
|
||||
div {
|
||||
class: "flex-1 flex flex-col overflow-hidden w-full ",
|
||||
header::view{}
|
||||
main {
|
||||
class: "flex-1 overflow-x-hidden overflow-y-auto ",
|
||||
div {
|
||||
class: "container mx-auto px-6 py-8",
|
||||
#[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
|
||||
fn Body(url: impl AsRef<str>) -> Element {
|
||||
let url = url.as_ref();
|
||||
rsx! {
|
||||
div { class: "flex h-screen bg-gray-200 font-roboto",
|
||||
sidebar::view {}
|
||||
div { class: "flex-1 flex flex-col overflow-hidden w-full ",
|
||||
header::view {}
|
||||
main { class: "flex-1 overflow-x-hidden overflow-y-auto ",
|
||||
div { class: "container mx-auto px-6 py-8",
|
||||
slot {
|
||||
i{"{h}"}
|
||||
match h {
|
||||
"dashboard" => rsx!{ dashboard::view{} },
|
||||
"ui-elements" => rsx!{ ui_elements::view{} },
|
||||
i { "/{url}" }
|
||||
match url {
|
||||
"dashboard" | "home" => rsx!{dashboard::view{} },
|
||||
"ui-elements" => rsx!{ui_elements::view{} },
|
||||
"tables" => rsx!{tables::view{} },
|
||||
"forms" => rsx!{forms::view{} },
|
||||
"cards" => rsx!{card::view{} },
|
||||
@@ -62,48 +65,10 @@ fn Home(cx: Scope)->Element{
|
||||
"blank" => rsx!{blank::view{} },
|
||||
_ => 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,169 +1,146 @@
|
||||
use dioxus::{prelude::{*}};
|
||||
use tracing::info;
|
||||
use dioxus::prelude::*;
|
||||
|
||||
use super::sidebar::IS_SIDEBAR_OPEN;
|
||||
use super::SIDEBAR_OPEN;
|
||||
|
||||
pub fn view(cx: Scope)->Element{
|
||||
let set_sidebar_open = use_set(&cx,IS_SIDEBAR_OPEN);
|
||||
let dropdown_open = use_state(&cx, || true);
|
||||
|
||||
let dropdown_class = match dropdown_open.get() {
|
||||
true => "transition duration-150 ease-in transform scale-95 opacity-0",
|
||||
false => "transition duration-150 ease-out transform scale-100 opacity-100",
|
||||
};
|
||||
|
||||
cx.render(rsx!{
|
||||
header {
|
||||
class: "flex items-center justify-between px-6 py-4 bg-white border-b-4 border-indigo-600",
|
||||
div {
|
||||
class: "flex items-center",
|
||||
button{
|
||||
class: "text-gray-500 focus:outline-none lg:hidden",//
|
||||
onclick: move |_| {
|
||||
set_sidebar_open(true);
|
||||
},
|
||||
icons::icon_1{}
|
||||
}
|
||||
|
||||
pub fn view() -> Element {
|
||||
// 和sidebar共享
|
||||
let mut sidebar_open = use_hook(|| SIDEBAR_OPEN.signal());
|
||||
|
||||
rsx! {
|
||||
header { class: "flex items-center justify-between px-6 py-4 bg-white border-b-4 border-indigo-600",
|
||||
div { class: "flex items-center",
|
||||
div {
|
||||
class: "relative mx-4 lg:mx-0",
|
||||
span {
|
||||
class: "absolute inset-y-0 left-0 flex items-center pl-3 ",
|
||||
icons::icon_2{}
|
||||
class: "text-gray-500 focus:outline-none lg:hidden cursor-pointer",
|
||||
onclick: move |_| {
|
||||
sidebar_open.set(true);
|
||||
},
|
||||
icons::icon_menu {}
|
||||
}
|
||||
|
||||
div { class: "relative mx-4 lg:mx-0",
|
||||
span { class: "absolute inset-y-0 left-0 flex items-center pl-3 ",
|
||||
icons::icon_search {}
|
||||
}
|
||||
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",
|
||||
r#type: "text",
|
||||
value: "",
|
||||
value: ""
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
div {
|
||||
class: "flex items-center",
|
||||
button {
|
||||
class: "flex mx-4 text-gray-600 focus:outline-none",
|
||||
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);
|
||||
},
|
||||
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 {
|
||||
class: "relative z-10 block w-8 h-8 overflow-hidden rounded-full shadow focus:outline-none cursor-pointer",
|
||||
// onclick: move |_| {
|
||||
// dropdown_open.set(!dropdown_open());
|
||||
// },
|
||||
|
||||
img {
|
||||
class: "object-cover w-full h-full",
|
||||
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{
|
||||
class:"fixed inset-0 z-10 w-full h-full",//
|
||||
// 点击屏幕关闭菜单
|
||||
hidden: "{dropdown_open}",
|
||||
onclick: move |_| {
|
||||
dropdown_open.set(true);
|
||||
},
|
||||
|
||||
}
|
||||
|
||||
div{
|
||||
class:"absolute right-0 z-20 w-48 py-2 mt-2 bg-white rounded-md shadow-xl {dropdown_class}",
|
||||
hidden: "{dropdown_open}",
|
||||
//onmouseout onmouseover
|
||||
onmouseout: move |_| {
|
||||
info!("onmouseout");
|
||||
},
|
||||
// style: "display:block",
|
||||
|
||||
a{
|
||||
class:"block px-4 py-2 text-sm text-gray-700 hover:bg-indigo-600 hover:text-white",
|
||||
href:"#",
|
||||
// div {
|
||||
// class: "fixed inset-0 z-10 w-full h-full",
|
||||
// // 点击屏幕关闭菜单
|
||||
// hidden: "{!dropdown_open()}",
|
||||
// onclick: move |_| {
|
||||
// dropdown_open.set(false);
|
||||
// },
|
||||
// }
|
||||
|
||||
div {
|
||||
// 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",
|
||||
class: "c-bubble w-40 right-0 group-hover:visible group-hover:opacity-100 ",
|
||||
// hidden: "{!dropdown_open()}",
|
||||
// onmouseout onmouseover
|
||||
a {
|
||||
class: "block px-4 py-2 text-sm text-gray-700 hover:bg-indigo-600 hover:text-white",
|
||||
href: "#",
|
||||
"Profile"
|
||||
}
|
||||
a{
|
||||
class:"block px-4 py-2 text-sm text-gray-700 hover:bg-indigo-600 hover:text-white",
|
||||
href:"#",
|
||||
a {
|
||||
class: "block px-4 py-2 text-sm text-gray-700 hover:bg-indigo-600 hover:text-white",
|
||||
href: "#",
|
||||
"Products"
|
||||
}
|
||||
|
||||
a{
|
||||
class:"block px-4 py-2 text-sm text-gray-700 hover:bg-indigo-600 hover:text-white",
|
||||
href:"/",
|
||||
a {
|
||||
class: "block px-4 py-2 text-sm text-gray-700 hover:bg-indigo-600 hover:text-white",
|
||||
href: "/",
|
||||
"Log out"
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
})
|
||||
}
|
||||
}
|
||||
|
||||
mod icons{
|
||||
mod icons {
|
||||
use dioxus::prelude::*;
|
||||
use dioxus_html_macro::html;
|
||||
|
||||
pub fn icon_1(cx: Scope)->Element{
|
||||
cx.render(rsx!{
|
||||
svg{
|
||||
class:"w-6 h-6",
|
||||
view_box:"0 0 24 24",
|
||||
fill:"none",
|
||||
xmlns:"http://www.w3.org/2000/svg",
|
||||
path{
|
||||
d:"M4 6H20M4 12H20M4 18H11",
|
||||
stroke:"currentColor",
|
||||
stroke_width:"2",
|
||||
stroke_linecap:"round",
|
||||
stroke_linejoin:"round",
|
||||
}
|
||||
|
||||
}
|
||||
})
|
||||
pub fn icon_menu() -> Element {
|
||||
html! {
|
||||
<svg
|
||||
class= "w-6 h-6"
|
||||
view_box= "0 0 24 24"
|
||||
fill= "none"
|
||||
xmlns= "http://www.w3.org/2000/svg" >
|
||||
<path
|
||||
d= "M4 6H20M4 12H20M4 18H11"
|
||||
stroke= "currentColor"
|
||||
stroke_width= "2"
|
||||
stroke_linecap= "round"
|
||||
stroke_linejoin= "round"
|
||||
/>
|
||||
</svg>
|
||||
}
|
||||
}
|
||||
|
||||
pub fn icon_2(cx: Scope)->Element{
|
||||
cx.render(rsx!{
|
||||
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",
|
||||
}
|
||||
}
|
||||
})
|
||||
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_3(cx: Scope)->Element{
|
||||
cx.render(rsx!{
|
||||
svg{
|
||||
class:"w-6 h-6",
|
||||
view_box:"0 0 24 24",
|
||||
fill:"none",
|
||||
xmlns:"http://www.w3.org/2000/svg",
|
||||
path{
|
||||
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",
|
||||
}
|
||||
}
|
||||
})
|
||||
}
|
||||
pub fn icon_message() -> Element {
|
||||
html! {
|
||||
<svg
|
||||
class="w-6 h-6"
|
||||
view_box="0 0 24 24"
|
||||
fill="none"
|
||||
xmlns="http://www.w3.org/2000/svg">
|
||||
|
||||
|
||||
}
|
||||
<path
|
||||
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"
|
||||
/>
|
||||
</svg>
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1,20 +1,15 @@
|
||||
/*
|
||||
* @Author: plucky
|
||||
* @Date: 2022-10-11 23:13:17
|
||||
* @LastEditTime: 2022-10-14 12:33:51
|
||||
* @Description:
|
||||
* @LastEditTime: 2024-07-06 00:05:28
|
||||
* @Description:
|
||||
*/
|
||||
|
||||
|
||||
use dioxus::signals::{GlobalSignal, Signal};
|
||||
|
||||
pub mod header;
|
||||
pub mod sidebar;
|
||||
|
||||
|
||||
// pub fn view(cx: Scope)->Element{
|
||||
|
||||
// cx.render(rsx!{
|
||||
// div {
|
||||
// }
|
||||
// })
|
||||
// }
|
||||
// #[derive(Clone, Copy)]
|
||||
// struct SidebarOpen(bool);
|
||||
|
||||
static SIDEBAR_OPEN: GlobalSignal<bool> = Signal::global(|| false);
|
||||
|
||||
@@ -1,165 +1,126 @@
|
||||
/*
|
||||
* @Author: plucky
|
||||
* @Date: 2022-10-11 18:53:17
|
||||
* @LastEditTime: 2022-10-17 09:52:40
|
||||
* @Description:
|
||||
* @LastEditTime: 2024-07-07 21:42:00
|
||||
* @Description:
|
||||
*/
|
||||
|
||||
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{
|
||||
let route = use_route(&cx);
|
||||
let route_name = route.last_segment().unwrap_or_default();
|
||||
|
||||
let set_sidebar_open = use_set(&cx,IS_SIDEBAR_OPEN);
|
||||
let is_sidebar_open = use_read(&cx,IS_SIDEBAR_OPEN);
|
||||
pub fn view() -> Element {
|
||||
let route = router();
|
||||
let route_name = route.current_route_string();
|
||||
// 共享状态
|
||||
let mut sidebar_open = use_hook(|| SIDEBAR_OPEN.signal());
|
||||
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 {
|
||||
true => "flex items-center px-6 py-2 mt-4 duration-200 border-l-4 bg-gray-600 bg-opacity-25 text-gray-100 border-gray-100",
|
||||
false => "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",
|
||||
}
|
||||
};
|
||||
|
||||
cx.render(rsx!(
|
||||
// class: format_args!("flex {} bg-gray-900 ",if *is_sidebar_open { "" } else { "hidden lg:block" }),
|
||||
// mask
|
||||
div{
|
||||
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),
|
||||
let toggle_sidebar = if sidebar_open() {
|
||||
"translate-x-0 ease-out"
|
||||
} else {
|
||||
"-translate-x-full ease-in"
|
||||
};
|
||||
|
||||
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
|
||||
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 {}",
|
||||
if *is_sidebar_open { "translate-x-0 ease-out " } else {"-translate-x-full ease-in" }),
|
||||
|
||||
div {
|
||||
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}",
|
||||
|
||||
// title
|
||||
div {
|
||||
class: "flex items-center justify-center mt-8 ",
|
||||
div {
|
||||
class: "flex items-center",
|
||||
icons::icon_1 {}
|
||||
span {
|
||||
class: "mx-2 text-2xl font-semibold text-white",
|
||||
"R-Dashboard"
|
||||
}
|
||||
div { class: "flex items-center justify-center mt-8 ",
|
||||
div { class: "flex items-center",
|
||||
icons::icon_logo {}
|
||||
span { class: "hidden lg:block mx-2 text-2xl font-semibold text-white", "Dashboard" }
|
||||
}
|
||||
}
|
||||
// menu
|
||||
nav{
|
||||
class: "mt-10 ",//
|
||||
// router-link
|
||||
Link{
|
||||
class: highlight_class("dashboard"),
|
||||
//to="/dashboard"
|
||||
to: "/dashboard",
|
||||
icons::icon_2 {}
|
||||
span{class:"mx-4","Dashboard"}
|
||||
nav { class: "mt-10 ",
|
||||
Link { class: highlight_class("dashboard"), to: "/dashboard",
|
||||
icons::icon_chart {}
|
||||
span { class: "mx-4", "Dashboard" }
|
||||
}
|
||||
Link{
|
||||
class: highlight_class("ui-elements"),
|
||||
to: "/ui-elements",
|
||||
icons::icon_3 {}
|
||||
span{class:"mx-4","UI Elements"}
|
||||
Link { class: highlight_class("ui-elements"), to: "/ui-elements",
|
||||
icons::icon_win {}
|
||||
span { class: "mx-4", "UI Elements" }
|
||||
}
|
||||
Link{
|
||||
class: highlight_class("tables"),
|
||||
to: "/tables",
|
||||
icons::icon_4 {}
|
||||
span{class:"mx-4","Tables"}
|
||||
Link { class: highlight_class("tables"), to: "/tables",
|
||||
icons::icon_table {}
|
||||
span { class: "mx-4", "Tables" }
|
||||
}
|
||||
Link{
|
||||
class: highlight_class("forms"),
|
||||
to: "/forms",
|
||||
icons::icon_5 {}
|
||||
span{class:"mx-4","Forms"}
|
||||
Link { class: highlight_class("forms"), to: "/forms",
|
||||
icons::icon_form {}
|
||||
span { class: "mx-4", "Forms" }
|
||||
}
|
||||
Link{
|
||||
class: highlight_class("cards"),
|
||||
to: "/cards",
|
||||
icons::icon_6 {}
|
||||
span{class:"mx-4","Cards"}
|
||||
Link { class: highlight_class("cards"), to: "/cards",
|
||||
icons::icon_card {}
|
||||
span { class: "mx-4", "Cards" }
|
||||
}
|
||||
Link{
|
||||
class: highlight_class("modal"),
|
||||
to: "/modal",
|
||||
icons::icon_7 {}
|
||||
span{class:"mx-4","Modal"}
|
||||
Link { class: highlight_class("modal"), to: "/modal",
|
||||
icons::icon_model {}
|
||||
span { class: "mx-4", "Modal" }
|
||||
}
|
||||
|
||||
Link{
|
||||
class: highlight_class("blank"),
|
||||
to: "/blank",
|
||||
icons::icon_8 {}
|
||||
span{class:"mx-4","Blank"}
|
||||
|
||||
Link { class: highlight_class("blank"), to: "/blank",
|
||||
icons::icon_blank {}
|
||||
span { class: "mx-4", "Blank" }
|
||||
}
|
||||
|
||||
|
||||
// ul{li{}}
|
||||
div{
|
||||
div{
|
||||
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",
|
||||
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];
|
||||
},
|
||||
|
||||
div {
|
||||
class: "flex items-center space-x-4",
|
||||
icons::icon_2 {}
|
||||
span {
|
||||
"Test"
|
||||
}
|
||||
div{
|
||||
class: format_args!{"{}",if is_menu_open.read()[0] {"rotate-180"} else {""}} ,
|
||||
div { class: "flex items-center space-x-4",
|
||||
icons::icon_chart {}
|
||||
span { "Test" }
|
||||
div { class: format!("{}", if menu_open()[0] { "rotate-180" } else { "" }),
|
||||
icons::icon_up_down {}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
div{
|
||||
class: format_args!("ml-8 mt-1 {}", if is_menu_open.read()[0] {"block"} else {"hidden"}),
|
||||
Link{
|
||||
class: highlight_class("blank"),
|
||||
to: "/blank",
|
||||
icons::icon_8 {}
|
||||
span{class:"mx-4","Blank"}
|
||||
|
||||
div { class: format!("ml-8 mt-1 {}", if menu_open()[0] { "block" } else { "hidden" }),
|
||||
Link { class: highlight_class("blank"), to: "/blank",
|
||||
icons::icon_blank {}
|
||||
span { class: "mx-4", "Blank" }
|
||||
}
|
||||
Link{
|
||||
class: highlight_class("blank2"),
|
||||
to: "/blank",
|
||||
icons::icon_8 {}
|
||||
span{class:"mx-4","Blank"}
|
||||
Link { class: highlight_class("blank2"), to: "/blank",
|
||||
icons::icon_blank {}
|
||||
span { class: "mx-4", "Blank" }
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
// end
|
||||
|
||||
}
|
||||
|
||||
|
||||
|
||||
}
|
||||
))
|
||||
|
||||
)
|
||||
}
|
||||
|
||||
mod icons{
|
||||
mod icons {
|
||||
use dioxus::prelude::*;
|
||||
use dioxus_html_macro::html;
|
||||
|
||||
pub fn icon_1(cx: Scope)->Element{
|
||||
cx.render(html!{
|
||||
pub fn icon_logo() -> Element {
|
||||
html! {
|
||||
<svg
|
||||
class="w-12 h-12"
|
||||
view_box="0 0 512 512"
|
||||
@@ -179,10 +140,10 @@ mod icons{
|
||||
fill="white"
|
||||
/>
|
||||
</svg>
|
||||
})
|
||||
}
|
||||
}
|
||||
pub fn icon_2(cx:Scope)->Element{
|
||||
cx.render(html!{
|
||||
pub fn icon_chart() -> Element {
|
||||
html! {
|
||||
<svg
|
||||
class="w-5 h-5"
|
||||
view_box="0 0 20 20"
|
||||
@@ -198,11 +159,11 @@ mod icons{
|
||||
fill="currentColor"
|
||||
/>
|
||||
</svg>
|
||||
})
|
||||
}
|
||||
}
|
||||
|
||||
pub fn icon_3(cx:Scope)->Element{
|
||||
cx.render(html!(
|
||||
pub fn icon_win() -> Element {
|
||||
html!(
|
||||
<svg
|
||||
class="w-5 h-5"
|
||||
view_box="0 0 20 20"
|
||||
@@ -226,11 +187,11 @@ mod icons{
|
||||
fill="currentColor"
|
||||
/>
|
||||
</svg>
|
||||
))
|
||||
)
|
||||
}
|
||||
|
||||
pub fn icon_4(cx:Scope)->Element{
|
||||
cx.render(html!(
|
||||
pub fn icon_table() -> Element {
|
||||
html!(
|
||||
<svg
|
||||
class="w-5 h-5"
|
||||
view_box="0 0 20 20"
|
||||
@@ -250,11 +211,11 @@ mod icons{
|
||||
fill="currentColor"
|
||||
/>
|
||||
</svg>
|
||||
))
|
||||
)
|
||||
}
|
||||
|
||||
pub fn icon_5(cx:Scope)->Element{
|
||||
cx.render(html!(
|
||||
pub fn icon_form() -> Element {
|
||||
html!(
|
||||
<svg class="w-5 h-5" fill="currentColor" view_box="0 0 20 20">
|
||||
<path
|
||||
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"
|
||||
/>
|
||||
</svg>
|
||||
))
|
||||
)
|
||||
}
|
||||
|
||||
pub fn icon_6(cx:Scope)->Element{
|
||||
cx.render(html!(
|
||||
pub fn icon_card() -> Element {
|
||||
html!(
|
||||
<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 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" />
|
||||
</svg>
|
||||
))
|
||||
)
|
||||
}
|
||||
|
||||
pub fn icon_7(cx:Scope)->Element{
|
||||
cx.render(html!(
|
||||
pub fn icon_model() -> Element {
|
||||
html!(
|
||||
<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 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" />
|
||||
</svg>
|
||||
))
|
||||
)
|
||||
}
|
||||
|
||||
pub fn icon_8(cx:Scope)->Element{
|
||||
cx.render(html!(
|
||||
pub fn icon_blank() -> Element {
|
||||
html!(
|
||||
<svg class="w-5 h-5" fill="currentColor" view_box="0 0 20 20">
|
||||
<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"
|
||||
/>
|
||||
</svg>
|
||||
))
|
||||
)
|
||||
}
|
||||
|
||||
// #[inline_props]
|
||||
pub fn icon_up_down(cx:Scope)->Element{
|
||||
cx.render(html!(
|
||||
pub fn icon_up_down() -> Element {
|
||||
html!(
|
||||
<svg class="w-3 h-3"
|
||||
fill="currentColor"
|
||||
view_box="0 0 12 12">
|
||||
<path d="M5.9 11.4L.5 6l1.4-1.4 4 4 4-4L11.3 6z"></path>
|
||||
</svg>
|
||||
))
|
||||
)
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
15
src/lib.rs
15
src/lib.rs
@@ -1,12 +1,5 @@
|
||||
/*
|
||||
* @Author: plucky
|
||||
* @Date: 2022-10-11 00:07:45
|
||||
* @LastEditTime: 2022-10-14 16:52:30
|
||||
* @Description:
|
||||
*/
|
||||
|
||||
pub mod app;
|
||||
pub mod components;
|
||||
pub mod views;
|
||||
pub mod modules;
|
||||
|
||||
* @Date: 2022-10-11 00:07:45
|
||||
* @LastEditTime: 2024-07-05 18:29:21
|
||||
* @Description:
|
||||
*/
|
||||
|
||||
18
src/main.rs
18
src/main.rs
@@ -1,16 +1,20 @@
|
||||
/*
|
||||
* @Author: plucky
|
||||
* @Date: 2022-10-10 23:58:17
|
||||
* @LastEditTime: 2022-10-15 14:02:24
|
||||
* @Description:
|
||||
* @LastEditTime: 2024-07-06 18:52:26
|
||||
* @Description:
|
||||
*/
|
||||
pub mod app;
|
||||
pub mod components;
|
||||
pub mod modules;
|
||||
pub mod views;
|
||||
|
||||
use r_dashboard::app::*;
|
||||
|
||||
use app::App;
|
||||
|
||||
// trunk serve
|
||||
fn main() {
|
||||
console_error_panic_hook::set_once();
|
||||
tracing_wasm::set_as_global_default();
|
||||
dioxus::web::launch(app);
|
||||
let mut cfg = tracing_wasm::WASMLayerConfigBuilder::default();
|
||||
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
|
||||
* @LastEditTime: 2022-10-14 23:48:07
|
||||
* @Description:
|
||||
* @LastEditTime: 2024-07-05 12:38:05
|
||||
* @Description:
|
||||
*/
|
||||
|
||||
use dioxus::prelude::Atom;
|
||||
use dioxus::signals::{GlobalSignal, Signal};
|
||||
|
||||
use super::*;
|
||||
|
||||
|
||||
pub struct UseTableData{
|
||||
#[derive(Clone, PartialEq)]
|
||||
pub struct UseTableData {
|
||||
pub simpleTableData: Vec<SimpleTableData>,
|
||||
pub paginatedTableData: Vec<PaginatedTableData>,
|
||||
pub wideTableData: Vec<WideTableData>,
|
||||
|
||||
}
|
||||
|
||||
/// 表格测试数据 for tables
|
||||
pub static USE_TABLE_DATA: Atom<UseTableData> = |_| {
|
||||
pub static USE_TABLE_DATA: GlobalSignal<UseTableData> = Signal::global(|| {
|
||||
UseTableData{
|
||||
simpleTableData: vec![
|
||||
SimpleTableData{
|
||||
@@ -79,4 +77,4 @@ pub static USE_TABLE_DATA: Atom<UseTableData> = |_| {
|
||||
}
|
||||
}).collect(),
|
||||
}
|
||||
};
|
||||
});
|
||||
|
||||
@@ -3,7 +3,7 @@
|
||||
pub mod demo_data;
|
||||
|
||||
/// USERS for dashboard
|
||||
#[derive(Debug )]
|
||||
#[derive(Debug, Clone, PartialEq)]
|
||||
pub struct User {
|
||||
pub name: String,
|
||||
pub email: String,
|
||||
@@ -14,12 +14,12 @@ pub struct User {
|
||||
}
|
||||
|
||||
/// simple data for talbes
|
||||
#[derive(Debug, Clone, PartialEq)]
|
||||
pub struct SimpleTableData {
|
||||
pub city: String,
|
||||
pub totalOrders: String,
|
||||
}
|
||||
|
||||
|
||||
#[derive(Debug, Clone, PartialEq)]
|
||||
pub struct PaginatedTableData {
|
||||
pub picture: String,
|
||||
pub name: String,
|
||||
@@ -28,8 +28,7 @@ pub struct PaginatedTableData {
|
||||
pub status: String,
|
||||
pub statusColor: String,
|
||||
}
|
||||
|
||||
|
||||
#[derive(Debug, Clone, PartialEq)]
|
||||
pub struct WideTableData {
|
||||
pub name: String,
|
||||
pub email: String,
|
||||
@@ -37,4 +36,4 @@ pub struct WideTableData {
|
||||
pub title2: String,
|
||||
pub status: String,
|
||||
pub role: String,
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1,17 +1,15 @@
|
||||
/*
|
||||
* @Author: plucky
|
||||
* @Date: 2022-10-15 09:52:33
|
||||
* @LastEditTime: 2022-10-15 09:58:23
|
||||
* @Description:
|
||||
* @LastEditTime: 2024-07-05 08:46:05
|
||||
* @Description:
|
||||
*/
|
||||
|
||||
use dioxus::prelude::*;
|
||||
use dioxus_html_macro::html;
|
||||
|
||||
pub fn view(cx: Scope)->Element{
|
||||
|
||||
cx.render(html!{
|
||||
pub fn view() -> Element {
|
||||
html! {
|
||||
<h3 class="text-gray-700 text-3xl font-medium">"Blank Page"</h3>
|
||||
|
||||
})
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1,137 +1,97 @@
|
||||
/*
|
||||
* @Author: plucky
|
||||
* @Date: 2022-10-15 09:47:37
|
||||
* @LastEditTime: 2022-10-15 09:51:33
|
||||
* @Description:
|
||||
*/
|
||||
* @Date: 2022-10-15 09:47:37
|
||||
* @LastEditTime: 2024-07-05 12:59:03
|
||||
* @Description:
|
||||
*/
|
||||
use dioxus::prelude::*;
|
||||
|
||||
pub fn view(cx: Scope)->Element{
|
||||
|
||||
cx.render(rsx!{
|
||||
pub fn view() -> Element {
|
||||
rsx! {
|
||||
div {
|
||||
h3 {
|
||||
class: "text-3xl font-semibold text-gray-700",
|
||||
"Card"
|
||||
}
|
||||
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",
|
||||
h3 { class: "text-3xl font-semibold text-gray-700", "Card" }
|
||||
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 {
|
||||
class: "w-full",
|
||||
alt: "Sunset in the mountains",
|
||||
src: "https://picsum.photos/id/1016/384/234",
|
||||
src: "https://picsum.photos/id/1016/384/234"
|
||||
}
|
||||
div {
|
||||
class: "px-6 py-4",
|
||||
div {
|
||||
class: "mb-2 text-xl font-bold text-gray-900",
|
||||
"The Coldest Sunset"
|
||||
}
|
||||
p {
|
||||
class: "text-base text-gray-700",
|
||||
div { class: "px-6 py-4",
|
||||
div { 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."
|
||||
}
|
||||
}
|
||||
div {
|
||||
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",
|
||||
div { 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",
|
||||
"#photography"
|
||||
}
|
||||
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",
|
||||
"#travel"
|
||||
}
|
||||
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",
|
||||
"#winter"
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
hr {
|
||||
|
||||
}
|
||||
div {
|
||||
class: "mt-5",
|
||||
h4 {
|
||||
class: "text-gray-700",
|
||||
"Horizontal"
|
||||
}
|
||||
div {
|
||||
class: "w-full max-w-sm mt-6 lg:max-w-full lg:flex",
|
||||
div { class: "mt-5",
|
||||
h4 { class: "text-gray-700", "Horizontal" }
|
||||
div { class: "w-full max-w-sm mt-6 lg:max-w-full lg:flex",
|
||||
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",
|
||||
style: "background-image: url('https://picsum.photos/id/0/192/213')",
|
||||
title: "Woman holding a mug",
|
||||
title: "Woman holding a mug"
|
||||
}
|
||||
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",
|
||||
div {
|
||||
class: "mb-8",
|
||||
p {
|
||||
class: "flex items-center text-sm text-gray-600",
|
||||
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",
|
||||
div { class: "mb-8",
|
||||
p { class: "flex items-center text-sm text-gray-600",
|
||||
icons::icon_1 {}
|
||||
"Members only"
|
||||
}
|
||||
div {
|
||||
class: "mb-2 text-xl font-bold text-gray-900",
|
||||
div { class: "mb-2 text-xl font-bold text-gray-900",
|
||||
"Can coffee make you a better developer?"
|
||||
}
|
||||
p {
|
||||
class: "text-base text-gray-700",
|
||||
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."
|
||||
}
|
||||
}
|
||||
div {
|
||||
class: "flex items-center",
|
||||
div { class: "flex items-center",
|
||||
img {
|
||||
class: "w-10 h-10 mr-4 rounded-full",
|
||||
alt: "Avatar of Jonathan Reinink",
|
||||
src: "https://via.placeholder.com/50",
|
||||
src: "https://via.placeholder.com/50"
|
||||
}
|
||||
div {
|
||||
class: "text-sm",
|
||||
p {
|
||||
class: "leading-none text-gray-900",
|
||||
"Jonathan Reinink"
|
||||
}
|
||||
p {
|
||||
class: "text-gray-600",
|
||||
"Aug 18"
|
||||
}
|
||||
div { class: "text-sm",
|
||||
p { class: "leading-none text-gray-900", "Jonathan Reinink" }
|
||||
p { class: "text-gray-600", "Aug 18" }
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
})
|
||||
}
|
||||
}
|
||||
|
||||
mod icons{
|
||||
mod icons {
|
||||
use dioxus::prelude::*;
|
||||
use dioxus_html_macro::html;
|
||||
|
||||
pub fn icon_1(cx: Scope)->Element{
|
||||
cx.render(html!{
|
||||
<svg
|
||||
class="w-3 h-3 mr-2 text-gray-500 fill-current"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
view_box="0 0 20 20"
|
||||
>
|
||||
<path
|
||||
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>
|
||||
})
|
||||
pub fn icon_1() -> Element {
|
||||
html! {
|
||||
<svg
|
||||
class="w-3 h-3 mr-2 text-gray-500 fill-current"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
view_box="0 0 20 20"
|
||||
>
|
||||
<path
|
||||
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>
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1,273 +1,204 @@
|
||||
/*
|
||||
* @Author: plucky
|
||||
* @Date: 2022-10-14 12:31:43
|
||||
* @LastEditTime: 2022-10-17 09:02:01
|
||||
* @Description:
|
||||
*/
|
||||
|
||||
* @Date: 2022-10-14 12:31:43
|
||||
* @LastEditTime: 2024-07-05 12:56:53
|
||||
* @Description:
|
||||
*/
|
||||
|
||||
use dioxus::prelude::*;
|
||||
|
||||
use crate::modules::User;
|
||||
|
||||
// test data
|
||||
pub static USERS: Atom<Vec<User>> = |_| {
|
||||
(0..5).map(|_i| {
|
||||
User {
|
||||
pub static USERS: GlobalSignal<Vec<User>> = Signal::global(|| {
|
||||
(0..5)
|
||||
.map(|_i| User {
|
||||
name: "John Doe".into(),
|
||||
email: "john@example.com".into(),
|
||||
title: "Software Engineer".into(),
|
||||
title2: "Web dev".into(),
|
||||
status: "Active".into(),
|
||||
role: "Owner".into(),
|
||||
}
|
||||
}).collect()
|
||||
};
|
||||
})
|
||||
.collect()
|
||||
});
|
||||
|
||||
pub fn view(cx: Scope)->Element{
|
||||
let users = use_read(&cx, USERS);
|
||||
|
||||
cx.render(rsx!{
|
||||
pub fn view() -> Element {
|
||||
let users = use_hook(|| USERS.signal());
|
||||
|
||||
rsx! {
|
||||
div {
|
||||
h3 {
|
||||
class: "text-3xl font-medium text-gray-700",
|
||||
"Dashboard"
|
||||
}
|
||||
div {
|
||||
class: "mt-4",
|
||||
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",
|
||||
h3 { class: "text-3xl font-medium text-gray-700", "Dashboard" }
|
||||
div { class: "mt-4",
|
||||
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 {}
|
||||
}
|
||||
div {
|
||||
class: "mx-5",
|
||||
h4 {
|
||||
class: "text-2xl font-semibold text-gray-700",
|
||||
div { class: "mx-5",
|
||||
h4 { class: "text-2xl font-semibold text-gray-700",
|
||||
"8,282"
|
||||
}
|
||||
div {
|
||||
class: "text-gray-500",
|
||||
"New Users"
|
||||
}
|
||||
div { 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 {
|
||||
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",
|
||||
div { class: "w-full px-6 mt-6 sm:w-1/2 xl:w-1/3 sm:mt-0",
|
||||
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 {}
|
||||
}
|
||||
div {
|
||||
class: "mx-5",
|
||||
h4 {
|
||||
class: "text-2xl font-semibold text-gray-700",
|
||||
div { class: "mx-5",
|
||||
h4 { class: "text-2xl font-semibold text-gray-700",
|
||||
"200,521"
|
||||
}
|
||||
div {
|
||||
class: "text-gray-500",
|
||||
"Total Orders"
|
||||
}
|
||||
div { 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 {
|
||||
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",
|
||||
div { class: "w-full px-6 mt-6 sm:w-1/2 xl:w-1/3 xl:mt-0",
|
||||
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 {}
|
||||
}
|
||||
div {
|
||||
class: "mx-5",
|
||||
h4 {
|
||||
class: "text-2xl font-semibold text-gray-700",
|
||||
div { class: "mx-5",
|
||||
h4 { class: "text-2xl font-semibold text-gray-700",
|
||||
"215,542"
|
||||
}
|
||||
div {
|
||||
class: "text-gray-500",
|
||||
"Available Products"
|
||||
}
|
||||
div { 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 {
|
||||
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-8",
|
||||
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 {
|
||||
tr {
|
||||
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",
|
||||
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",
|
||||
"Name"
|
||||
}
|
||||
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",
|
||||
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",
|
||||
"Title"
|
||||
}
|
||||
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",
|
||||
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",
|
||||
"Status"
|
||||
}
|
||||
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",
|
||||
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",
|
||||
"Role"
|
||||
}
|
||||
th {
|
||||
class: "px-6 py-3 border-b border-gray-200 bg-gray-50",
|
||||
|
||||
}
|
||||
th { class: "px-6 py-3 border-b border-gray-200 bg-gray-50" }
|
||||
}
|
||||
}
|
||||
// 表格数据
|
||||
tbody {
|
||||
class: "bg-white",
|
||||
users.iter().map(|u|{
|
||||
rsx!{ UserList{user:u}}
|
||||
tbody { class: "bg-white",
|
||||
{users}.iter().map(|u|{
|
||||
rsx!{ UserList{user:u.clone()}}
|
||||
})
|
||||
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
})
|
||||
}
|
||||
}
|
||||
|
||||
// #[derive(PartialEq, Props)]
|
||||
// pub struct UserListProps<'a>{
|
||||
// user: &'a User,
|
||||
// #[derive(PartialEq, Clone, Props)]
|
||||
// pub struct UserListProps {
|
||||
// user: User,
|
||||
// }
|
||||
|
||||
#[allow(non_snake_case)]
|
||||
#[inline_props]
|
||||
pub fn UserList<'a>(cx: Scope<UserListProps>, user: &'a User) -> Element {
|
||||
#[component]
|
||||
pub fn UserList(user: User) -> Element {
|
||||
// let u = cx.props.user;
|
||||
let u = user;
|
||||
cx.render(rsx!{
|
||||
rsx! {
|
||||
tr {
|
||||
// key: "{index}",
|
||||
td {
|
||||
class: "px-6 py-4 border-b border-gray-200 whitespace-nowrap",
|
||||
div {
|
||||
class: "flex items-center",
|
||||
div {
|
||||
class: "flex-shrink-0 w-10 h-10",
|
||||
td { class: "px-6 py-4 border-b border-gray-200 whitespace-nowrap",
|
||||
div { class: "flex items-center",
|
||||
div { class: "flex-shrink-0 w-10 h-10",
|
||||
img {
|
||||
class: "w-10 h-10 rounded-full",
|
||||
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 {
|
||||
class: "ml-4",
|
||||
div {
|
||||
class: "text-sm font-medium leading-5 text-gray-900",
|
||||
div { class: "ml-4",
|
||||
div { class: "text-sm font-medium leading-5 text-gray-900",
|
||||
"{ u.name }"
|
||||
}
|
||||
div {
|
||||
class: "text-sm leading-5 text-gray-500",
|
||||
"{ u.email }"
|
||||
}
|
||||
div { 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 { 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 {
|
||||
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",
|
||||
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 }"
|
||||
}
|
||||
}
|
||||
td {
|
||||
class: "px-6 py-4 text-sm leading-5 text-gray-500 border-b border-gray-200 whitespace-nowrap",
|
||||
td { class: "px-6 py-4 text-sm leading-5 text-gray-500 border-b border-gray-200 whitespace-nowrap",
|
||||
"{ u.role }"
|
||||
}
|
||||
td {
|
||||
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"
|
||||
}
|
||||
td { 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" }
|
||||
}
|
||||
}
|
||||
})
|
||||
}
|
||||
}
|
||||
|
||||
mod icons{
|
||||
mod icons {
|
||||
use dioxus::prelude::*;
|
||||
use dioxus_html_macro::html;
|
||||
|
||||
pub fn icon_1(cx: Scope)->Element{
|
||||
cx.render(html!{
|
||||
<svg
|
||||
class="w-8 h-8 text-white"
|
||||
view_box="0 0 28 30"
|
||||
fill="none"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<path
|
||||
d="M18.2 9.08889C18.2 11.5373 16.3196 13.5222 14 13.5222C11.6804 13.5222 9.79999 11.5373 9.79999 9.08889C9.79999 6.64043 11.6804 4.65556 14 4.65556C16.3196 4.65556 18.2 6.64043 18.2 9.08889Z"
|
||||
fill="currentColor"
|
||||
/>
|
||||
<path
|
||||
d="M25.2 12.0444C25.2 13.6768 23.9464 15 22.4 15C20.8536 15 19.6 13.6768 19.6 12.0444C19.6 10.4121 20.8536 9.08889 22.4 9.08889C23.9464 9.08889 25.2 10.4121 25.2 12.0444Z"
|
||||
fill="currentColor"
|
||||
/>
|
||||
<path
|
||||
d="M19.6 22.3889C19.6 19.1243 17.0927 16.4778 14 16.4778C10.9072 16.4778 8.39999 19.1243 8.39999 22.3889V26.8222H19.6V22.3889Z"
|
||||
fill="currentColor"
|
||||
/>
|
||||
<path
|
||||
d="M8.39999 12.0444C8.39999 13.6768 7.14639 15 5.59999 15C4.05359 15 2.79999 13.6768 2.79999 12.0444C2.79999 10.4121 4.05359 9.08889 5.59999 9.08889C7.14639 9.08889 8.39999 10.4121 8.39999 12.0444Z"
|
||||
fill="currentColor"
|
||||
/>
|
||||
<path
|
||||
d="M22.4 26.8222V22.3889C22.4 20.8312 22.0195 19.3671 21.351 18.0949C21.6863 18.0039 22.0378 17.9556 22.4 17.9556C24.7197 17.9556 26.6 19.9404 26.6 22.3889V26.8222H22.4Z"
|
||||
fill="currentColor"
|
||||
/>
|
||||
<path
|
||||
d="M6.64896 18.0949C5.98058 19.3671 5.59999 20.8312 5.59999 22.3889V26.8222H1.39999V22.3889C1.39999 19.9404 3.2804 17.9556 5.59999 17.9556C5.96219 17.9556 6.31367 18.0039 6.64896 18.0949Z"
|
||||
fill="currentColor"
|
||||
/>
|
||||
</svg>
|
||||
})
|
||||
pub fn icon_1() -> Element {
|
||||
html! {
|
||||
<svg
|
||||
class="w-8 h-8 text-white"
|
||||
view_box="0 0 28 30"
|
||||
fill="none"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<path
|
||||
d="M18.2 9.08889C18.2 11.5373 16.3196 13.5222 14 13.5222C11.6804 13.5222 9.79999 11.5373 9.79999 9.08889C9.79999 6.64043 11.6804 4.65556 14 4.65556C16.3196 4.65556 18.2 6.64043 18.2 9.08889Z"
|
||||
fill="currentColor"
|
||||
/>
|
||||
<path
|
||||
d="M25.2 12.0444C25.2 13.6768 23.9464 15 22.4 15C20.8536 15 19.6 13.6768 19.6 12.0444C19.6 10.4121 20.8536 9.08889 22.4 9.08889C23.9464 9.08889 25.2 10.4121 25.2 12.0444Z"
|
||||
fill="currentColor"
|
||||
/>
|
||||
<path
|
||||
d="M19.6 22.3889C19.6 19.1243 17.0927 16.4778 14 16.4778C10.9072 16.4778 8.39999 19.1243 8.39999 22.3889V26.8222H19.6V22.3889Z"
|
||||
fill="currentColor"
|
||||
/>
|
||||
<path
|
||||
d="M8.39999 12.0444C8.39999 13.6768 7.14639 15 5.59999 15C4.05359 15 2.79999 13.6768 2.79999 12.0444C2.79999 10.4121 4.05359 9.08889 5.59999 9.08889C7.14639 9.08889 8.39999 10.4121 8.39999 12.0444Z"
|
||||
fill="currentColor"
|
||||
/>
|
||||
<path
|
||||
d="M22.4 26.8222V22.3889C22.4 20.8312 22.0195 19.3671 21.351 18.0949C21.6863 18.0039 22.0378 17.9556 22.4 17.9556C24.7197 17.9556 26.6 19.9404 26.6 22.3889V26.8222H22.4Z"
|
||||
fill="currentColor"
|
||||
/>
|
||||
<path
|
||||
d="M6.64896 18.0949C5.98058 19.3671 5.59999 20.8312 5.59999 22.3889V26.8222H1.39999V22.3889C1.39999 19.9404 3.2804 17.9556 5.59999 17.9556C5.96219 17.9556 6.31367 18.0039 6.64896 18.0949Z"
|
||||
fill="currentColor"
|
||||
/>
|
||||
</svg>
|
||||
}
|
||||
}
|
||||
|
||||
pub fn icon_2(cx: Scope)->Element{
|
||||
cx.render(html!{
|
||||
|
||||
pub fn icon_2() -> Element {
|
||||
html! {
|
||||
<svg
|
||||
class="w-8 h-8 text-white"
|
||||
view_box="0 0 28 28"
|
||||
@@ -287,11 +218,11 @@ mod icons{
|
||||
fill="currentColor"
|
||||
/>
|
||||
</svg>
|
||||
})
|
||||
}
|
||||
}
|
||||
|
||||
pub fn icon_3(cx: Scope)->Element{
|
||||
cx.render(html!{
|
||||
pub fn icon_3() -> Element {
|
||||
html! {
|
||||
<svg
|
||||
class="w-8 h-8 text-white"
|
||||
view_box="0 0 28 28"
|
||||
@@ -311,7 +242,6 @@ mod icons{
|
||||
stroke_width="2"
|
||||
/>
|
||||
</svg>
|
||||
})
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1,8 +1,7 @@
|
||||
/*
|
||||
* @Author: plucky
|
||||
* @Date: 2022-10-15 00:32:59
|
||||
* @LastEditTime: 2022-10-25 15:23:25
|
||||
* @Description:
|
||||
* @LastEditTime: 2024-07-05 20:21:11
|
||||
* @Description:
|
||||
*/
|
||||
|
||||
#![allow(non_snake_case)]
|
||||
@@ -17,87 +16,55 @@ struct User {
|
||||
pub confirm: String,
|
||||
}
|
||||
|
||||
pub fn view(cx: Scope)->Element{
|
||||
|
||||
cx.render(rsx!{
|
||||
pub fn view() -> Element {
|
||||
rsx! {
|
||||
div {
|
||||
h3 {
|
||||
class: "text-3xl font-semibold text-gray-700",
|
||||
"Forms"
|
||||
}
|
||||
|
||||
h3 { class: "text-3xl font-semibold text-gray-700", "Forms" }
|
||||
|
||||
// Modal Form
|
||||
Model_form{}
|
||||
Model_form {}
|
||||
|
||||
// Form Elements
|
||||
Forms{}
|
||||
|
||||
Forms {}
|
||||
}
|
||||
})
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
// Model Form
|
||||
fn Model_form(cx: Scope)->Element{
|
||||
|
||||
cx.render(rsx!{
|
||||
div {
|
||||
class: "mt-4",
|
||||
h4 {
|
||||
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",
|
||||
fn Model_form() -> Element {
|
||||
rsx! {
|
||||
div { class: "mt-4",
|
||||
h4 { 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 {
|
||||
div {
|
||||
class: "flex items-center justify-between px-5 py-3 text-gray-700 border-b",
|
||||
h3 {
|
||||
class: "text-sm",
|
||||
"Add Category"
|
||||
}
|
||||
button {
|
||||
r#type: "button",
|
||||
onclick: |_| {
|
||||
|
||||
},
|
||||
icons::icon_1 {}
|
||||
}
|
||||
div { class: "flex items-center justify-between px-5 py-3 text-gray-700 border-b",
|
||||
h3 { class: "text-sm", "Add Category" }
|
||||
button { r#type: "button", onclick: |_| {}, 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",
|
||||
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 {}
|
||||
}
|
||||
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",
|
||||
r#type: "text",
|
||||
class: "w-full px-12 py-2 appearance-none c-input",
|
||||
r#type: "text"
|
||||
}
|
||||
}
|
||||
}
|
||||
div {
|
||||
class: "flex items-center justify-between px-5 py-3",
|
||||
div { class: "flex items-center justify-between px-5 py-3",
|
||||
button {
|
||||
r#type: "button",
|
||||
onclick: |_| {
|
||||
info!("click");
|
||||
|
||||
},
|
||||
class: "px-3 py-1 text-sm text-gray-700 bg-gray-200 rounded-md hover:bg-gray-300 focus:outline-none",
|
||||
"Cancel"
|
||||
}
|
||||
button {
|
||||
class: "px-3 py-1 text-sm text-white bg-indigo-600 rounded-md hover:bg-indigo-500 focus:outline-none",
|
||||
button { class: "px-3 py-1 text-sm text-white bg-indigo-600 rounded-md hover:bg-indigo-500 focus:outline-none",
|
||||
"Save"
|
||||
}
|
||||
}
|
||||
@@ -105,110 +72,101 @@ fn Model_form(cx: Scope)->Element{
|
||||
}
|
||||
}
|
||||
}
|
||||
})
|
||||
}
|
||||
}
|
||||
|
||||
// Forms
|
||||
fn Forms(cx: Scope)->Element{
|
||||
let user = use_ref(&cx, || User::default());
|
||||
let ur = user.read();
|
||||
|
||||
cx.render(rsx!{
|
||||
div {
|
||||
class: "mt-8",
|
||||
h4 {
|
||||
class: "text-gray-600",
|
||||
"Forms"
|
||||
}
|
||||
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"
|
||||
}
|
||||
fn Forms() -> Element {
|
||||
let mut user = use_signal(User::default);
|
||||
let ur = user.peek();
|
||||
// let User {
|
||||
// username,
|
||||
// email,
|
||||
// password,
|
||||
// confirm,
|
||||
// ..
|
||||
// } = &*user.read();
|
||||
|
||||
form{
|
||||
rsx! {
|
||||
div { class: "mt-8",
|
||||
h4 { class: "text-gray-600", "Forms" }
|
||||
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 {
|
||||
//action="" methods="post"
|
||||
prevent_default: "onsubmit",
|
||||
onsubmit: move |e|{
|
||||
onsubmit: move |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 { class: "grid grid-cols-1 gap-6 mt-4 sm:grid-cols-2",
|
||||
div {
|
||||
label {
|
||||
class: "text-gray-700",
|
||||
r#for: "username","Username"
|
||||
}
|
||||
label { class: "text-gray-700", r#for: "username", "Username" }
|
||||
input {
|
||||
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",
|
||||
// "v-model: "user.username",
|
||||
// 双向绑定
|
||||
value: "{ur.username}",
|
||||
oninput: {|e|{
|
||||
// info!("oninput{:?}", e);
|
||||
user.write().username=e.value.to_string();
|
||||
}},
|
||||
|
||||
oninput: {
|
||||
move |e| {
|
||||
user.write().username = e.value();
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
div {
|
||||
label {
|
||||
class: "text-gray-700",
|
||||
r#for: "email","Email Address"
|
||||
}
|
||||
label { class: "text-gray-700", r#for: "email", "Email Address" }
|
||||
input {
|
||||
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",
|
||||
// "v-model": "user.email",
|
||||
value: "{ur.email}",
|
||||
oninput: {|e|{
|
||||
user.write().email=e.value.to_string();
|
||||
}},
|
||||
oninput: {
|
||||
move |e| {
|
||||
user.write().email = e.value();
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
div {
|
||||
label {
|
||||
class: "text-gray-700",
|
||||
r#for: "password","Password"
|
||||
}
|
||||
label { class: "text-gray-700", r#for: "password", "Password" }
|
||||
input {
|
||||
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",
|
||||
// "v-model": "user.password",
|
||||
value: "{ur.password}",
|
||||
oninput: {|e|{
|
||||
user.write().password=e.value.to_string();
|
||||
}},
|
||||
oninput: {
|
||||
move |e| {
|
||||
user.write().password = e.value();
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
div {
|
||||
label {
|
||||
class: "text-gray-700",
|
||||
r#for: "pwConfirm","Password Confirmation"
|
||||
r#for: "pwConfirm",
|
||||
"Password Confirmation"
|
||||
}
|
||||
input {
|
||||
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",
|
||||
// "v-model": "user.confirm",
|
||||
value: "{ur.confirm}",
|
||||
oninput: {|e|{
|
||||
user.write().confirm=e.value.to_string();
|
||||
}},
|
||||
oninput: {
|
||||
move |e| {
|
||||
user.write().confirm = e.value();
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
div {
|
||||
class: "flex justify-end mt-4",
|
||||
div { class: "flex justify-end mt-4",
|
||||
button {
|
||||
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",
|
||||
@@ -219,33 +177,34 @@ fn Forms(cx: Scope)->Element{
|
||||
}
|
||||
}
|
||||
}
|
||||
})
|
||||
}
|
||||
}
|
||||
|
||||
mod icons{
|
||||
mod icons {
|
||||
use dioxus::prelude::*;
|
||||
use dioxus_html_macro::html;
|
||||
|
||||
pub fn icon_1(cx: Scope)->Element{
|
||||
cx.render(html!{
|
||||
<svg
|
||||
class="w-4 h-4"
|
||||
fill="none"
|
||||
view_box="0 0 24 24"
|
||||
stroke="currentColor"
|
||||
>
|
||||
<path
|
||||
stroke_linecap="round"
|
||||
stroke_linejoin="round"
|
||||
stroke_width="2"
|
||||
d="M6 18L18 6M6 6l12 12"
|
||||
/>
|
||||
</svg>
|
||||
})
|
||||
pub fn icon_1() -> Element {
|
||||
let vnode = html! {
|
||||
<svg
|
||||
class="w-4 h-4"
|
||||
fill="none"
|
||||
view_box="0 0 24 24"
|
||||
stroke="currentColor"
|
||||
>
|
||||
<path
|
||||
stroke_linecap="round"
|
||||
stroke_linejoin="round"
|
||||
stroke_width="2"
|
||||
d="M6 18L18 6M6 6l12 12"
|
||||
/>
|
||||
</svg>
|
||||
};
|
||||
vnode
|
||||
}
|
||||
|
||||
pub fn icon_2(cx: Scope)->Element{
|
||||
cx.render(html!{
|
||||
|
||||
pub fn icon_2() -> Element {
|
||||
html! {
|
||||
<svg
|
||||
class="w-6 h-6"
|
||||
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"
|
||||
/>
|
||||
</svg>
|
||||
})
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1,117 +1,93 @@
|
||||
/*
|
||||
* @Author: plucky
|
||||
* @Date: 2022-10-12 00:00:54
|
||||
* @LastEditTime: 2022-10-14 16:54:55
|
||||
* @Description:
|
||||
*/
|
||||
* @Date: 2022-10-12 00:00:54
|
||||
* @LastEditTime: 2024-07-05 20:06:58
|
||||
* @Description:
|
||||
*/
|
||||
use dioxus::prelude::*;
|
||||
|
||||
pub fn view(cx: Scope)->Element{
|
||||
let email = use_state(&cx, ||"".to_string());
|
||||
let password = use_state(&cx, ||"".to_string());
|
||||
// function login() {
|
||||
// router.push("/dashboard");
|
||||
// }
|
||||
let router = use_router(&cx);
|
||||
|
||||
cx.render(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",
|
||||
pub fn view() -> Element {
|
||||
let mut email = use_signal(|| "".to_string());
|
||||
let mut password = use_signal(|| "".to_string());
|
||||
|
||||
fn login() {
|
||||
let router = router();
|
||||
router.push("/home");
|
||||
}
|
||||
|
||||
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",
|
||||
"V-Dashboard"
|
||||
}
|
||||
span { class: "text-2xl font-semibold text-gray-700", "R-Dashboard" }
|
||||
}
|
||||
|
||||
form{
|
||||
|
||||
form {
|
||||
class: "mt-4",
|
||||
//@submit.prevent="login"
|
||||
onsubmit: move |_|{
|
||||
// login();
|
||||
router.push_route("/dashboard", None, None);
|
||||
onsubmit: move |_| {
|
||||
login();
|
||||
},
|
||||
label {
|
||||
class: "block",
|
||||
span {
|
||||
class: "text-sm text-gray-700",
|
||||
"Email"
|
||||
}
|
||||
label { class: "block",
|
||||
span { class: "text-sm text-gray-700", "Email" }
|
||||
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",
|
||||
// "v-model": "email",
|
||||
placeholder: "Enter your email",
|
||||
// value: "{email}",
|
||||
value: "{email}",
|
||||
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 {
|
||||
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",
|
||||
// "v-model": "password",
|
||||
placeholder: "Enter your password",
|
||||
value: "{password}",
|
||||
oninput: move |e| {
|
||||
password.set(e.value.clone());
|
||||
},
|
||||
password.set(e.value());
|
||||
}
|
||||
}
|
||||
}
|
||||
div {
|
||||
class: "flex items-center justify-between mt-4",
|
||||
div { class: "flex items-center justify-between mt-4",
|
||||
div {
|
||||
label {
|
||||
class: "inline-flex items-center",
|
||||
label { class: "inline-flex items-center",
|
||||
input {
|
||||
class: "text-indigo-600 border-gray-200 rounded-md focus:border-indigo-600 focus:ring focus:ring-opacity-40 focus:ring-indigo-500",
|
||||
r#type: "checkbox",
|
||||
}
|
||||
span {
|
||||
class: "mx-2 text-sm text-gray-600",
|
||||
"Remember me"
|
||||
class: "text-indigo-600 c-input",
|
||||
r#type: "checkbox"
|
||||
}
|
||||
span { class: "mx-2 text-sm text-gray-600", "Remember me" }
|
||||
}
|
||||
}
|
||||
div {
|
||||
a {
|
||||
class: "block text-sm text-indigo-700 fontme hover:underline",
|
||||
href: "#", "Forgot your password?"
|
||||
href: "#",
|
||||
"Forgot your password?"
|
||||
}
|
||||
}
|
||||
}
|
||||
div {
|
||||
class: "mt-6",
|
||||
div { class: "mt-6",
|
||||
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",
|
||||
r#type: "submit", "Sign in"
|
||||
r#type: "submit",
|
||||
"Sign in"
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
})
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
mod icons{
|
||||
mod icons {
|
||||
use dioxus::prelude::*;
|
||||
use dioxus_html_macro::html;
|
||||
|
||||
pub fn icon_1(cx: Scope)->Element{
|
||||
cx.render(html!{
|
||||
pub fn icon_1() -> Element {
|
||||
html! {
|
||||
<svg
|
||||
class="w-10 h-10"
|
||||
view_box="0 0 512 512"
|
||||
@@ -131,8 +107,6 @@ mod icons{
|
||||
fill="white"
|
||||
/>
|
||||
</svg>
|
||||
})
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1,24 +1,22 @@
|
||||
/*
|
||||
* @Author: plucky
|
||||
|
||||
* @Date: 2022-10-11 23:13:24
|
||||
* @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 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{
|
||||
|
||||
// cx.render(rsx!{
|
||||
// (rsx!{
|
||||
// div {
|
||||
// }
|
||||
// })
|
||||
|
||||
@@ -1,43 +1,38 @@
|
||||
/*
|
||||
* @Author: plucky
|
||||
* @Date: 2022-10-15 09:52:14
|
||||
* @LastEditTime: 2022-10-17 00:31:51
|
||||
* @Description:
|
||||
*/
|
||||
* @Date: 2022-10-15 09:52:14
|
||||
* @LastEditTime: 2024-07-07 21:21:12
|
||||
* @Description:
|
||||
*/
|
||||
|
||||
use dioxus::prelude::*;
|
||||
|
||||
pub fn view(cx: Scope)->Element{
|
||||
let open = use_state(&cx, || false);
|
||||
pub fn view() -> Element {
|
||||
let mut open = use_signal(|| false);
|
||||
// let modal = "transition: opacity 0.25s ease";
|
||||
|
||||
cx.render(rsx!{
|
||||
rsx! {
|
||||
div {
|
||||
h3 {
|
||||
class: "text-3xl font-medium text-gray-700",
|
||||
"Modal"
|
||||
}
|
||||
h3 { class: "text-3xl font-medium text-gray-700", "Modal" }
|
||||
// open modal
|
||||
button {
|
||||
onclick: move |_| {
|
||||
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",
|
||||
"Open Modal",
|
||||
"Open Modal"
|
||||
}
|
||||
|
||||
|
||||
// Modal
|
||||
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"}),
|
||||
div {
|
||||
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
|
||||
div{
|
||||
class: "absolute w-full h-full bg-gray-900 opacity-50 modal-overlay",
|
||||
}
|
||||
|
||||
|
||||
div { class: "absolute w-full h-full bg-gray-900 opacity-50 modal-overlay" }
|
||||
|
||||
//
|
||||
div {
|
||||
class: "z-50 w-11/12 mx-auto overflow-y-auto bg-white rounded shadow-lg modal-container md:max-w-md",
|
||||
div { class: "z-50 w-11/12 mx-auto overflow-y-auto bg-white rounded shadow-lg modal-container md:max-w-md",
|
||||
// 右上角关闭按钮
|
||||
div {
|
||||
onclick: move |_| {
|
||||
@@ -45,38 +40,28 @@ 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",
|
||||
icons::icon_1 {}
|
||||
span {
|
||||
class: "text-sm",
|
||||
"(Esc)"
|
||||
}
|
||||
span { class: "text-sm", "(Esc)" }
|
||||
}
|
||||
|
||||
|
||||
//<!-- Add margin if you want to see some of the overlay behind the modal-->
|
||||
div {
|
||||
class: "px-6 py-4 text-left modal-content",
|
||||
div { class: "px-6 py-4 text-left modal-content",
|
||||
//<!--Title-->
|
||||
div {
|
||||
class: "flex items-center justify-between pb-3",
|
||||
p {
|
||||
class: "text-2xl font-bold",
|
||||
"Modal Title"
|
||||
}
|
||||
div{
|
||||
div { class: "flex items-center justify-between pb-3",
|
||||
p { class: "text-2xl font-bold", "Modal Title" }
|
||||
div {
|
||||
class: "z-50 cursor-pointer modal-close",
|
||||
onclick: move |_| {
|
||||
open.set(false);
|
||||
},
|
||||
icons::icon_1 {}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
|
||||
//<!--Body-->
|
||||
p {"Modal content."}
|
||||
|
||||
p { "Modal content." }
|
||||
|
||||
//<!--Footer-->
|
||||
div {
|
||||
class: "flex justify-end pt-2",
|
||||
div { class: "flex justify-end pt-2",
|
||||
button {
|
||||
onclick: move |_| {
|
||||
open.set(false);
|
||||
@@ -96,16 +81,15 @@ pub fn view(cx: Scope)->Element{
|
||||
}
|
||||
}
|
||||
}
|
||||
})
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
mod icons{
|
||||
mod icons {
|
||||
use dioxus::prelude::*;
|
||||
use dioxus_html_macro::html;
|
||||
|
||||
pub fn icon_1(cx: Scope)->Element{
|
||||
cx.render(html!{
|
||||
pub fn icon_1() -> Element {
|
||||
html! {
|
||||
<svg
|
||||
class="w-5 h-5"
|
||||
fill="none"
|
||||
@@ -119,8 +103,6 @@ mod icons{
|
||||
d="M6 18L18 6M6 6l12 12"
|
||||
/>
|
||||
</svg>
|
||||
})
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1,70 +1,56 @@
|
||||
/*
|
||||
* @Author: plucky
|
||||
* @Date: 2022-10-14 17:43:39
|
||||
* @LastEditTime: 2022-10-15 00:21:14
|
||||
* @Description:
|
||||
*/
|
||||
* @Date: 2022-10-14 17:43:39
|
||||
* @LastEditTime: 2024-07-07 21:20:43
|
||||
* @Description:
|
||||
*/
|
||||
#![allow(non_snake_case)]
|
||||
use dioxus::prelude::*;
|
||||
|
||||
use crate::modules::demo_data::USE_TABLE_DATA;
|
||||
|
||||
pub fn view(cx: Scope)->Element{
|
||||
|
||||
cx.render(rsx!{
|
||||
pub fn view() -> Element {
|
||||
rsx! {
|
||||
div {
|
||||
h3 {
|
||||
class: "text-3xl font-medium text-gray-700",
|
||||
"Tables"
|
||||
}
|
||||
h3 { class: "text-3xl font-medium text-gray-700", "Tables" }
|
||||
// Simple Table
|
||||
Simple_table{}
|
||||
Simple_table {}
|
||||
|
||||
// Table with pagination
|
||||
Table_with_pagination{}
|
||||
Table_with_pagination {}
|
||||
|
||||
// Wide Table
|
||||
Wide_table{}
|
||||
Wide_table {}
|
||||
}
|
||||
})
|
||||
}
|
||||
}
|
||||
|
||||
// Simple Table
|
||||
fn Simple_table(cx: Scope)->Element{
|
||||
let simple_table_data = &use_read(&cx, USE_TABLE_DATA).simpleTableData;
|
||||
|
||||
cx.render(rsx!{
|
||||
div {
|
||||
class: "mt-4",
|
||||
h4 {
|
||||
class: "text-gray-600",
|
||||
"Simple Table"
|
||||
}
|
||||
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",
|
||||
fn Simple_table() -> Element {
|
||||
let table_data = use_hook(|| USE_TABLE_DATA.signal());
|
||||
let simple_table_data = &table_data.read().simpleTableData;
|
||||
|
||||
rsx! {
|
||||
div { class: "mt-4",
|
||||
h4 { class: "text-gray-600", "Simple Table" }
|
||||
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 {
|
||||
th {
|
||||
class: "px-5 py-3 text-sm font-medium text-gray-100 uppercase bg-indigo-800",
|
||||
th { class: "px-5 py-3 text-sm font-medium text-gray-100 uppercase bg-indigo-800",
|
||||
"City"
|
||||
}
|
||||
th {
|
||||
class: "px-5 py-3 text-sm font-medium text-gray-100 uppercase bg-indigo-800",
|
||||
th { class: "px-5 py-3 text-sm font-medium text-gray-100 uppercase bg-indigo-800",
|
||||
"Total orders"
|
||||
}
|
||||
}
|
||||
}
|
||||
// data
|
||||
tbody {
|
||||
simple_table_data.iter().enumerate().map(|(i,data)|{
|
||||
{simple_table_data}.iter().enumerate().map(|(i,data)|{
|
||||
rsx!{ tr {
|
||||
class: "hover:bg-gray-200",
|
||||
key: "{i}",
|
||||
key: "{i}",
|
||||
td {
|
||||
class: "px-6 py-4 text-lg text-gray-700 border-b",
|
||||
"{data.city}"
|
||||
@@ -76,123 +62,84 @@ fn Simple_table(cx: Scope)->Element{
|
||||
}
|
||||
}
|
||||
})
|
||||
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
})
|
||||
}
|
||||
}
|
||||
|
||||
// 分页 table
|
||||
// Table with pagination
|
||||
fn Table_with_pagination(cx: Scope)->Element{
|
||||
let paginated_table_data = &use_read(&cx, USE_TABLE_DATA).paginatedTableData;
|
||||
|
||||
let status_color = |status: &str| {
|
||||
match status {
|
||||
"Active" => ("bg-green-100", "text-green-800"),
|
||||
"Inactive" => ("bg-red-100", "text-red-800"),
|
||||
"Suspended" => ("bg-orange-100", "text-orange-800"),
|
||||
_ => ("bg-gray-100", "text-gray-800"),
|
||||
}
|
||||
fn Table_with_pagination() -> Element {
|
||||
let table_data = use_hook(|| USE_TABLE_DATA.signal());
|
||||
let paginated_table_data = &table_data.read().paginatedTableData;
|
||||
|
||||
let status_color = |status: &str| match status {
|
||||
"Active" => ("bg-green-100", "text-green-800"),
|
||||
"Inactive" => ("bg-red-100", "text-red-800"),
|
||||
"Suspended" => ("bg-orange-100", "text-orange-800"),
|
||||
_ => ("bg-gray-100", "text-gray-800"),
|
||||
};
|
||||
|
||||
cx.render(rsx!{
|
||||
div {
|
||||
class: "mt-8",
|
||||
h4 {
|
||||
class: "text-gray-600",
|
||||
"Table with pagination"
|
||||
}
|
||||
div {
|
||||
class: "mt-6",
|
||||
h2 {
|
||||
class: "text-xl font-semibold leading-tight text-gray-700",
|
||||
"Users"
|
||||
}
|
||||
rsx! {
|
||||
div { class: "mt-8",
|
||||
h4 { class: "text-gray-600", "Table with pagination" }
|
||||
div { class: "mt-6",
|
||||
h2 { class: "text-xl font-semibold leading-tight text-gray-700", "Users" }
|
||||
// limit
|
||||
div {
|
||||
class: "flex flex-col mt-3 sm:flex-row",
|
||||
div {
|
||||
class: "flex",
|
||||
div {
|
||||
class: "relative",
|
||||
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",
|
||||
option {
|
||||
"5"
|
||||
}
|
||||
option {
|
||||
"10"
|
||||
}
|
||||
option {
|
||||
"20"
|
||||
}
|
||||
div { class: "flex flex-col mt-3 sm:flex-row",
|
||||
div { class: "flex",
|
||||
div { class: "relative",
|
||||
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",
|
||||
option { "5" }
|
||||
option { "10" }
|
||||
option { "20" }
|
||||
}
|
||||
div {
|
||||
class: "absolute inset-y-0 right-0 flex items-center px-2 text-gray-700 pointer-events-none",
|
||||
div { class: "absolute inset-y-0 right-0 flex items-center px-2 text-gray-700 pointer-events-none",
|
||||
icons::icon_1 {}
|
||||
}
|
||||
}
|
||||
|
||||
div {
|
||||
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",
|
||||
option {
|
||||
"All"
|
||||
}
|
||||
option {
|
||||
"Active"
|
||||
}
|
||||
option {
|
||||
"Inactive"
|
||||
}
|
||||
|
||||
div { 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",
|
||||
option { "All" }
|
||||
option { "Active" }
|
||||
option { "Inactive" }
|
||||
}
|
||||
div {
|
||||
class: "absolute inset-y-0 right-0 flex items-center px-2 text-gray-700 pointer-events-none",
|
||||
div { class: "absolute inset-y-0 right-0 flex items-center px-2 text-gray-700 pointer-events-none",
|
||||
icons::icon_2 {}
|
||||
}
|
||||
}
|
||||
}
|
||||
div {
|
||||
class: "relative block mt-2 sm:mt-0",
|
||||
span {
|
||||
class: "absolute inset-y-0 left-0 flex items-center pl-2",
|
||||
div { class: "relative block mt-2 sm:mt-0",
|
||||
span { class: "absolute inset-y-0 left-0 flex items-center pl-2",
|
||||
icons::icon_3 {}
|
||||
}
|
||||
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",
|
||||
placeholder: "Search",
|
||||
placeholder: "Search"
|
||||
}
|
||||
}
|
||||
}
|
||||
// table
|
||||
div {
|
||||
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",
|
||||
table {
|
||||
class: "min-w-full leading-normal",
|
||||
div { 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",
|
||||
table { class: "min-w-full leading-normal",
|
||||
// table header
|
||||
thead {
|
||||
tr {
|
||||
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",
|
||||
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",
|
||||
"User"
|
||||
}
|
||||
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",
|
||||
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",
|
||||
"Role"
|
||||
}
|
||||
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",
|
||||
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",
|
||||
"Created at"
|
||||
}
|
||||
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",
|
||||
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",
|
||||
"Status"
|
||||
}
|
||||
}
|
||||
@@ -200,7 +147,7 @@ fn Table_with_pagination(cx: Scope)->Element{
|
||||
// data
|
||||
tbody {
|
||||
// "<tr v-for=\"(u, index) in paginatedTableData\" :key=\"index\">"
|
||||
paginated_table_data.iter().map(|u|{rsx!{
|
||||
{paginated_table_data}.iter().map(|u|{rsx!{
|
||||
tr{
|
||||
// key: "{u.id}",
|
||||
td {
|
||||
@@ -241,49 +188,43 @@ fn Table_with_pagination(cx: Scope)->Element{
|
||||
td {
|
||||
class: "px-5 py-5 text-sm bg-white border-b border-gray-200",
|
||||
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 }"
|
||||
}
|
||||
|
||||
// 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 {
|
||||
// aria_hidden: "true",
|
||||
// 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 {
|
||||
// class: "relative",
|
||||
// "{u.status}"
|
||||
|
||||
|
||||
// }
|
||||
// }
|
||||
|
||||
|
||||
|
||||
|
||||
}
|
||||
//tr end
|
||||
}
|
||||
// iter end
|
||||
}})
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
div {
|
||||
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",
|
||||
div { 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",
|
||||
"Showing 1 to 4 of 50 Entries"
|
||||
}
|
||||
div {
|
||||
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",
|
||||
div { 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",
|
||||
"Prev"
|
||||
}
|
||||
button {
|
||||
class: "px-4 py-2 text-sm font-semibold text-gray-800 bg-gray-300 rounded-r hover:bg-gray-400",
|
||||
button { class: "px-4 py-2 text-sm font-semibold text-gray-800 bg-gray-300 rounded-r hover:bg-gray-400",
|
||||
"Next"
|
||||
}
|
||||
}
|
||||
@@ -292,58 +233,42 @@ fn Table_with_pagination(cx: Scope)->Element{
|
||||
}
|
||||
}
|
||||
}
|
||||
})
|
||||
}
|
||||
}
|
||||
|
||||
// 宽表格
|
||||
fn Wide_table(cx: Scope)->Element{
|
||||
let wide_table_data = &use_read(&cx, USE_TABLE_DATA).wideTableData;
|
||||
|
||||
cx.render(rsx!{
|
||||
div {
|
||||
class: "mt-8",
|
||||
h4 {
|
||||
class: "text-gray-600",
|
||||
"Wide Table"
|
||||
}
|
||||
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",
|
||||
fn Wide_table() -> Element {
|
||||
let table_data = use_hook(|| USE_TABLE_DATA.signal());
|
||||
let wide_table_data = &table_data.read().wideTableData;
|
||||
rsx! {
|
||||
div { class: "mt-8",
|
||||
h4 { class: "text-gray-600", "Wide Table" }
|
||||
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 {
|
||||
tr {
|
||||
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",
|
||||
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",
|
||||
"Name"
|
||||
}
|
||||
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",
|
||||
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",
|
||||
"Title"
|
||||
}
|
||||
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",
|
||||
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",
|
||||
"Status"
|
||||
}
|
||||
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",
|
||||
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",
|
||||
"Role"
|
||||
}
|
||||
th {
|
||||
class: "px-6 py-3 bg-gray-100 border-b border-gray-200",
|
||||
|
||||
}
|
||||
th { class: "px-6 py-3 bg-gray-100 border-b border-gray-200" }
|
||||
}
|
||||
}
|
||||
// data
|
||||
tbody {
|
||||
class: "bg-white",
|
||||
tbody { class: "bg-white",
|
||||
// iter start
|
||||
wide_table_data.iter().map(|u|{rsx!{tr{
|
||||
|
||||
{wide_table_data}.iter().map(|u|{rsx!{tr{
|
||||
|
||||
td {
|
||||
class: "px-6 py-4 border-b border-gray-200 whitespace-nowrap",
|
||||
div {
|
||||
@@ -407,43 +332,43 @@ fn Wide_table(cx: Scope)->Element{
|
||||
}
|
||||
}
|
||||
}
|
||||
})
|
||||
}
|
||||
}
|
||||
|
||||
mod icons{
|
||||
mod icons {
|
||||
use dioxus::prelude::*;
|
||||
use dioxus_html_macro::html;
|
||||
|
||||
pub fn icon_1(cx: Scope)->Element{
|
||||
cx.render(html!{
|
||||
<svg
|
||||
class="w-4 h-4 fill-current"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
view_box="0 0 20 20"
|
||||
>
|
||||
<path
|
||||
d="M9.293 12.95l.707.707L15.657 8l-1.414-1.414L10 10.828 5.757 6.586 4.343 8z"
|
||||
/>
|
||||
</svg>
|
||||
})
|
||||
}
|
||||
|
||||
pub fn icon_2(cx: Scope)->Element{
|
||||
cx.render(html!{
|
||||
<svg
|
||||
class="w-4 h-4 fill-current"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
view_box="0 0 20 20"
|
||||
>
|
||||
<path
|
||||
d="M9.293 12.95l.707.707L15.657 8l-1.414-1.414L10 10.828 5.757 6.586 4.343 8z"
|
||||
/>
|
||||
</svg>
|
||||
})
|
||||
pub fn icon_1() -> Element {
|
||||
html! {
|
||||
<svg
|
||||
class="w-4 h-4 fill-current"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
view_box="0 0 20 20"
|
||||
>
|
||||
<path
|
||||
d="M9.293 12.95l.707.707L15.657 8l-1.414-1.414L10 10.828 5.757 6.586 4.343 8z"
|
||||
/>
|
||||
</svg>
|
||||
}
|
||||
}
|
||||
|
||||
pub fn icon_3(cx: Scope)->Element{
|
||||
cx.render(html!{
|
||||
pub fn icon_2() -> Element {
|
||||
html! {
|
||||
<svg
|
||||
class="w-4 h-4 fill-current"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
view_box="0 0 20 20"
|
||||
>
|
||||
<path
|
||||
d="M9.293 12.95l.707.707L15.657 8l-1.414-1.414L10 10.828 5.757 6.586 4.343 8z"
|
||||
/>
|
||||
</svg>
|
||||
}
|
||||
}
|
||||
|
||||
pub fn icon_3() -> Element {
|
||||
html! {
|
||||
<svg
|
||||
view_box="0 0 24 24"
|
||||
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"
|
||||
/>
|
||||
</svg>
|
||||
})
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1,112 +1,65 @@
|
||||
/*
|
||||
* @Author: plucky
|
||||
* @Date: 2022-10-14 16:04:10
|
||||
* @LastEditTime: 2022-10-14 16:21:17
|
||||
* @Description:
|
||||
*/
|
||||
* @Date: 2022-10-14 16:04:10
|
||||
* @LastEditTime: 2024-07-05 20:22:52
|
||||
* @Description:
|
||||
*/
|
||||
|
||||
use dioxus::prelude::*;
|
||||
|
||||
pub fn view(cx: Scope)->Element{
|
||||
|
||||
cx.render(rsx!{
|
||||
pub fn view() -> Element {
|
||||
rsx! {
|
||||
div {
|
||||
h3 {
|
||||
class: "text-3xl font-medium text-gray-700",
|
||||
"UI Elements"
|
||||
}
|
||||
h3 { class: "text-3xl font-medium text-gray-700", "UI Elements" }
|
||||
// alerts
|
||||
div {
|
||||
class: "mt-4",
|
||||
h4 {
|
||||
class: "text-gray-600",
|
||||
"Alerts"
|
||||
}
|
||||
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",
|
||||
div { class: "mt-4",
|
||||
h4 { class: "text-gray-600", "Alerts" }
|
||||
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 {}
|
||||
}
|
||||
div {
|
||||
class: "px-4 py-2 -mx-3",
|
||||
div {
|
||||
class: "mx-3",
|
||||
span {
|
||||
class: "font-semibold text-green-500",
|
||||
"Success"
|
||||
}
|
||||
p {
|
||||
class: "text-sm text-gray-600",
|
||||
div { class: "px-4 py-2 -mx-3",
|
||||
div { class: "mx-3",
|
||||
span { class: "font-semibold text-green-500", "Success" }
|
||||
p { class: "text-sm text-gray-600",
|
||||
"Your account was registered!"
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
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-blue-500",
|
||||
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-blue-500",
|
||||
icons::icon_2 {}
|
||||
}
|
||||
div {
|
||||
class: "px-4 py-2 -mx-3",
|
||||
div {
|
||||
class: "mx-3",
|
||||
span {
|
||||
class: "font-semibold text-blue-500",
|
||||
"Info"
|
||||
}
|
||||
p {
|
||||
class: "text-sm text-gray-600",
|
||||
div { class: "px-4 py-2 -mx-3",
|
||||
div { class: "mx-3",
|
||||
span { class: "font-semibold text-blue-500", "Info" }
|
||||
p { class: "text-sm text-gray-600",
|
||||
"Channel archived by the owner."
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
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-yellow-500",
|
||||
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-yellow-500",
|
||||
icons::icon_3 {}
|
||||
}
|
||||
div {
|
||||
class: "px-4 py-2 -mx-3",
|
||||
div {
|
||||
class: "mx-3",
|
||||
span {
|
||||
class: "font-semibold text-yellow-500",
|
||||
"Warning"
|
||||
}
|
||||
p {
|
||||
class: "text-sm text-gray-600",
|
||||
"Image size is too large."
|
||||
}
|
||||
div { class: "px-4 py-2 -mx-3",
|
||||
div { class: "mx-3",
|
||||
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 {
|
||||
class: "flex items-center justify-center w-12 bg-red-500",
|
||||
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-red-500",
|
||||
icons::icon_4 {}
|
||||
}
|
||||
div {
|
||||
class: "px-4 py-2 -mx-3",
|
||||
div {
|
||||
class: "mx-3",
|
||||
span {
|
||||
class: "font-semibold text-red-500",
|
||||
"Error"
|
||||
}
|
||||
p {
|
||||
class: "text-sm text-gray-600",
|
||||
"Your email is already used!"
|
||||
}
|
||||
div { class: "px-4 py-2 -mx-3",
|
||||
div { class: "mx-3",
|
||||
span { class: "font-semibold text-red-500", "Error" }
|
||||
p { class: "text-sm text-gray-600", "Your email is already used!" }
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -114,181 +67,132 @@ pub fn view(cx: Scope)->Element{
|
||||
}
|
||||
}
|
||||
// Inputs
|
||||
div {
|
||||
class: "mt-8",
|
||||
h4 {
|
||||
class: "text-gray-600",
|
||||
"Inputs"
|
||||
}
|
||||
div {
|
||||
class: "mt-4",
|
||||
div {
|
||||
class: "flex items-center px-4 py-4 space-x-4 overflow-x-auto bg-white rounded-md",
|
||||
div { class: "mt-8",
|
||||
h4 { class: "text-gray-600", "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 {
|
||||
input {
|
||||
class: "w-5 h-5 text-indigo-600 focus:ring-indigo-500",
|
||||
name: "radio",
|
||||
r#type: "radio",
|
||||
}
|
||||
span {
|
||||
class: "ml-2 text-gray-700",
|
||||
"Radio"
|
||||
r#type: "radio"
|
||||
}
|
||||
span { class: "ml-2 text-gray-700", "Radio" }
|
||||
}
|
||||
label {
|
||||
input {
|
||||
class: "w-5 h-5 text-indigo-600 rounded-md focus:ring-indigo-500",
|
||||
name: "radio",
|
||||
r#type: "checkbox",
|
||||
}
|
||||
span {
|
||||
class: "ml-2 text-gray-700",
|
||||
"Checkbox"
|
||||
r#type: "checkbox"
|
||||
}
|
||||
span { class: "ml-2 text-gray-700", "Checkbox" }
|
||||
}
|
||||
label {
|
||||
class: "block",
|
||||
label { class: "block",
|
||||
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",
|
||||
r#type: "email",
|
||||
r#type: "email"
|
||||
}
|
||||
}
|
||||
div {
|
||||
class: "relative mx-4 lg:mx-0",
|
||||
span {
|
||||
class: "absolute inset-y-0 left-0 flex items-center pl-3",
|
||||
div { class: "relative mx-4 lg:mx-0",
|
||||
span { class: "absolute inset-y-0 left-0 flex items-center pl-3",
|
||||
icons::icon_5 {}
|
||||
}
|
||||
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",
|
||||
r#type: "text",
|
||||
r#type: "text"
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
// Buttons
|
||||
div {
|
||||
class: "mt-8",
|
||||
h4 {
|
||||
class: "text-gray-600",
|
||||
"Buttons"
|
||||
}
|
||||
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",
|
||||
div { class: "mt-8",
|
||||
h4 { class: "text-gray-600", "Buttons" }
|
||||
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"
|
||||
}
|
||||
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",
|
||||
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",
|
||||
icons::icon_6 {}
|
||||
span {
|
||||
class: "mx-1",
|
||||
"Refresh"
|
||||
}
|
||||
span { class: "mx-1", "Refresh" }
|
||||
}
|
||||
div {
|
||||
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",
|
||||
div { 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"
|
||||
}
|
||||
span {
|
||||
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",
|
||||
span { 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",
|
||||
icons::icon_7 {}
|
||||
}
|
||||
div {
|
||||
class: "absolute right-0 z-20 w-48 mt-2 overflow-hidden bg-white rounded-md shadow-xl dark:bg-gray-700",
|
||||
|
||||
}
|
||||
div { class: "absolute right-0 z-20 w-48 mt-2 overflow-hidden bg-white rounded-md shadow-xl dark:bg-gray-700" }
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
// Paginations
|
||||
div {
|
||||
class: "mt-8",
|
||||
h4 {
|
||||
class: "text-gray-600",
|
||||
"Paginations"
|
||||
}
|
||||
div {
|
||||
class: "mt-4",
|
||||
div {
|
||||
class: "flex px-4 py-4 overflow-x-auto bg-white rounded-md",
|
||||
div {
|
||||
class: "flex mr-4 rounded",
|
||||
div { class: "mt-8",
|
||||
h4 { class: "text-gray-600", "Paginations" }
|
||||
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 {
|
||||
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 {
|
||||
"Previous"
|
||||
}
|
||||
href: "#",
|
||||
span { "Previous" }
|
||||
}
|
||||
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",
|
||||
href: "#",span {
|
||||
"1"
|
||||
}
|
||||
href: "#",
|
||||
span { "1" }
|
||||
}
|
||||
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",
|
||||
href: "#",span {
|
||||
"2"
|
||||
}
|
||||
href: "#",
|
||||
span { "2" }
|
||||
}
|
||||
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",
|
||||
href: "#",span {
|
||||
"3"
|
||||
}
|
||||
href: "#",
|
||||
span { "3" }
|
||||
}
|
||||
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",
|
||||
href: "#",span {
|
||||
"Next"
|
||||
}
|
||||
href: "#",
|
||||
span { "Next" }
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
})
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
mod icons{
|
||||
mod icons {
|
||||
use dioxus::prelude::*;
|
||||
use dioxus_html_macro::html;
|
||||
|
||||
pub fn icon_1(cx: Scope)->Element{
|
||||
cx.render(html!{
|
||||
<svg
|
||||
class="w-6 h-6 text-white fill-current"
|
||||
view_box="0 0 40 40"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<path
|
||||
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>
|
||||
})
|
||||
pub fn icon_1() -> Element {
|
||||
html! {
|
||||
<svg
|
||||
class="w-6 h-6 text-white fill-current"
|
||||
view_box="0 0 40 40"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<path
|
||||
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>
|
||||
}
|
||||
}
|
||||
|
||||
pub fn icon_2(cx: Scope)->Element{
|
||||
cx.render(html!{
|
||||
|
||||
pub fn icon_2() -> Element {
|
||||
html! {
|
||||
<svg
|
||||
class="w-6 h-6 text-white fill-current"
|
||||
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"
|
||||
/>
|
||||
</svg>
|
||||
})
|
||||
}
|
||||
}
|
||||
|
||||
pub fn icon_3(cx: Scope)->Element{
|
||||
cx.render(html!{
|
||||
pub fn icon_3() -> Element {
|
||||
html! {
|
||||
<svg
|
||||
class="w-6 h-6 text-white fill-current"
|
||||
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"
|
||||
/>
|
||||
</svg>
|
||||
})
|
||||
}
|
||||
}
|
||||
|
||||
pub fn icon_4(cx: Scope)->Element{
|
||||
cx.render(html!{
|
||||
pub fn icon_4() -> Element {
|
||||
html! {
|
||||
<svg
|
||||
class="w-6 h-6 text-white fill-current"
|
||||
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"
|
||||
/>
|
||||
</svg>
|
||||
})
|
||||
}
|
||||
}
|
||||
|
||||
pub fn icon_5(cx: Scope)->Element{
|
||||
cx.render(html!{
|
||||
pub fn icon_5() -> Element {
|
||||
html! {
|
||||
<svg class="w-5 h-5 text-gray-500" view_box="0 0 24 24" fill="none">
|
||||
<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"
|
||||
@@ -340,26 +244,25 @@ mod icons{
|
||||
stroke_linejoin="round"
|
||||
/>
|
||||
</svg>
|
||||
})
|
||||
}
|
||||
}
|
||||
|
||||
pub fn icon_6(cx: Scope)->Element{
|
||||
cx.render(html!{
|
||||
<svg class="w-5 h-5 mx-1" xmlns="http://www.w3.org/2000/svg"
|
||||
pub fn icon_6() -> Element {
|
||||
html! {
|
||||
<svg class="w-5 h-5 mx-1" xmlns="http://www.w3.org/2000/svg"
|
||||
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" />
|
||||
</svg>
|
||||
})
|
||||
}
|
||||
}
|
||||
|
||||
pub fn icon_7(cx: Scope)->Element{
|
||||
cx.render(html!{
|
||||
pub fn icon_7() -> Element {
|
||||
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">
|
||||
<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" />
|
||||
</svg>
|
||||
})
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
Binary file not shown.
|
Before Width: | Height: | Size: 4.2 KiB |
Reference in New Issue
Block a user