mirror of
https://github.com/mztlive/dx-admin-template.git
synced 2025-12-22 21:59:59 +00:00
fix style
This commit is contained in:
@@ -1,5 +1,17 @@
|
|||||||
use dioxus::prelude::*;
|
use dioxus::prelude::*;
|
||||||
use super::utils::merge_class;
|
use super::utils::merge_class;
|
||||||
|
|
||||||
|
/// A simple wrapper component that maintains a specified aspect ratio for its content.
|
||||||
|
///
|
||||||
|
/// # Example
|
||||||
|
/// ```rust
|
||||||
|
/// rsx! {
|
||||||
|
/// AspectRatio {
|
||||||
|
/// ratio: 16.0 / 9.0,
|
||||||
|
/// img { src: "/image.jpg" }
|
||||||
|
/// }
|
||||||
|
/// }
|
||||||
|
/// ```
|
||||||
#[component]
|
#[component]
|
||||||
pub fn AspectRatio(
|
pub fn AspectRatio(
|
||||||
#[props(default = 1.0f32)] ratio: f32,
|
#[props(default = 1.0f32)] ratio: f32,
|
||||||
|
|||||||
@@ -67,11 +67,13 @@ impl CheckboxChipOption {
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
#[allow(dead_code)]
|
||||||
pub fn with_description(mut self, description: impl Into<String>) -> Self {
|
pub fn with_description(mut self, description: impl Into<String>) -> Self {
|
||||||
self.description = Some(description.into());
|
self.description = Some(description.into());
|
||||||
self
|
self
|
||||||
}
|
}
|
||||||
|
|
||||||
|
#[allow(dead_code)]
|
||||||
pub fn disabled(mut self) -> Self {
|
pub fn disabled(mut self) -> Self {
|
||||||
self.disabled = true;
|
self.disabled = true;
|
||||||
self
|
self
|
||||||
|
|||||||
@@ -1,5 +1,6 @@
|
|||||||
use dioxus::prelude::*;
|
use dioxus::prelude::*;
|
||||||
use super::utils::merge_class;
|
use super::utils::merge_class;
|
||||||
|
use super::input::Input;
|
||||||
#[derive(Clone, PartialEq)]
|
#[derive(Clone, PartialEq)]
|
||||||
pub struct ComboboxOption {
|
pub struct ComboboxOption {
|
||||||
pub label: String,
|
pub label: String,
|
||||||
@@ -139,13 +140,12 @@ fn ComboboxContent(
|
|||||||
class: "ui-combobox-content",
|
class: "ui-combobox-content",
|
||||||
div {
|
div {
|
||||||
class: "ui-combobox-search",
|
class: "ui-combobox-search",
|
||||||
input {
|
Input {
|
||||||
class: "ui-combobox-input",
|
class: "ui-combobox-input",
|
||||||
placeholder: search_placeholder,
|
placeholder: search_placeholder,
|
||||||
r#type: "text",
|
|
||||||
autofocus: true,
|
autofocus: true,
|
||||||
value: "{query()}",
|
value: query(),
|
||||||
oninput: move |event| query.set(event.value()),
|
on_input: move |event: FormEvent| query.set(event.value())
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
if filtered_options.is_empty() {
|
if filtered_options.is_empty() {
|
||||||
|
|||||||
@@ -1,4 +1,5 @@
|
|||||||
use dioxus::prelude::*;
|
use dioxus::prelude::*;
|
||||||
|
use super::input::Input;
|
||||||
|
|
||||||
#[derive(Clone, PartialEq)]
|
#[derive(Clone, PartialEq)]
|
||||||
pub struct CommandItem {
|
pub struct CommandItem {
|
||||||
@@ -90,11 +91,11 @@ pub fn CommandPalette(
|
|||||||
div {
|
div {
|
||||||
class: "ui-command-header",
|
class: "ui-command-header",
|
||||||
span { style: "font-size: 0.85rem; opacity: 0.6;", "⌘K" }
|
span { style: "font-size: 0.85rem; opacity: 0.6;", "⌘K" }
|
||||||
input {
|
Input {
|
||||||
class: "ui-command-input",
|
class: "ui-command-input",
|
||||||
value: query(),
|
value: query(),
|
||||||
placeholder: placeholder.clone(),
|
placeholder: placeholder.clone(),
|
||||||
oninput: move |event| query.set(event.value()),
|
on_input: move |event: FormEvent| query.set(event.value())
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
div {
|
div {
|
||||||
|
|||||||
@@ -13,6 +13,7 @@ pub fn Input(
|
|||||||
#[props(default)] disabled: bool,
|
#[props(default)] disabled: bool,
|
||||||
#[props(default)] readonly: bool,
|
#[props(default)] readonly: bool,
|
||||||
#[props(default)] required: bool,
|
#[props(default)] required: bool,
|
||||||
|
#[props(default)] autofocus: bool,
|
||||||
#[props(optional)] on_input: Option<EventHandler<FormEvent>>,
|
#[props(optional)] on_input: Option<EventHandler<FormEvent>>,
|
||||||
#[props(optional)] on_change: Option<EventHandler<FormEvent>>,
|
#[props(optional)] on_change: Option<EventHandler<FormEvent>>,
|
||||||
) -> Element {
|
) -> Element {
|
||||||
@@ -34,6 +35,7 @@ pub fn Input(
|
|||||||
disabled,
|
disabled,
|
||||||
readonly,
|
readonly,
|
||||||
required,
|
required,
|
||||||
|
autofocus,
|
||||||
id: id_attr,
|
id: id_attr,
|
||||||
name: name_attr,
|
name: name_attr,
|
||||||
value: resolved_value,
|
value: resolved_value,
|
||||||
|
|||||||
@@ -1,5 +1,17 @@
|
|||||||
use dioxus::prelude::*;
|
use dioxus::prelude::*;
|
||||||
use super::utils::merge_class;
|
use super::utils::merge_class;
|
||||||
|
|
||||||
|
/// Label component for form fields with consistent styling.
|
||||||
|
///
|
||||||
|
/// # Example
|
||||||
|
/// ```rust
|
||||||
|
/// rsx! {
|
||||||
|
/// Label {
|
||||||
|
/// r#for: "email",
|
||||||
|
/// "Email Address"
|
||||||
|
/// }
|
||||||
|
/// }
|
||||||
|
/// ```
|
||||||
#[component]
|
#[component]
|
||||||
pub fn Label(
|
pub fn Label(
|
||||||
#[props(into, default)] class: Option<String>,
|
#[props(into, default)] class: Option<String>,
|
||||||
|
|||||||
@@ -105,6 +105,7 @@ pub struct RadioChipOption {
|
|||||||
}
|
}
|
||||||
|
|
||||||
impl RadioChipOption {
|
impl RadioChipOption {
|
||||||
|
#[allow(dead_code)]
|
||||||
pub fn new(label: impl Into<String>, value: impl Into<String>) -> Self {
|
pub fn new(label: impl Into<String>, value: impl Into<String>) -> Self {
|
||||||
Self {
|
Self {
|
||||||
label: label.into(),
|
label: label.into(),
|
||||||
@@ -114,11 +115,13 @@ impl RadioChipOption {
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
#[allow(dead_code)]
|
||||||
pub fn with_description(mut self, description: impl Into<String>) -> Self {
|
pub fn with_description(mut self, description: impl Into<String>) -> Self {
|
||||||
self.description = Some(description.into());
|
self.description = Some(description.into());
|
||||||
self
|
self
|
||||||
}
|
}
|
||||||
|
|
||||||
|
#[allow(dead_code)]
|
||||||
pub fn disabled(mut self) -> Self {
|
pub fn disabled(mut self) -> Self {
|
||||||
self.disabled = true;
|
self.disabled = true;
|
||||||
self
|
self
|
||||||
|
|||||||
@@ -1,5 +1,14 @@
|
|||||||
use dioxus::prelude::*;
|
use dioxus::prelude::*;
|
||||||
use super::utils::merge_class;
|
use super::utils::merge_class;
|
||||||
|
|
||||||
|
/// Horizontal or vertical separator/divider component.
|
||||||
|
///
|
||||||
|
/// # Example
|
||||||
|
/// ```rust
|
||||||
|
/// rsx! {
|
||||||
|
/// Separator { orientation: SeparatorOrientation::Horizontal }
|
||||||
|
/// }
|
||||||
|
/// ```
|
||||||
#[derive(Clone, Copy, Debug, PartialEq, Eq)]
|
#[derive(Clone, Copy, Debug, PartialEq, Eq)]
|
||||||
pub enum SeparatorOrientation {
|
pub enum SeparatorOrientation {
|
||||||
Horizontal,
|
Horizontal,
|
||||||
|
|||||||
@@ -1,8 +1,10 @@
|
|||||||
use dioxus::prelude::*;
|
use dioxus::prelude::*;
|
||||||
use super::utils::merge_class;
|
use super::utils::merge_class;
|
||||||
|
|
||||||
#[derive(Clone, Copy, Debug, PartialEq, Eq)]
|
#[derive(Clone, Copy, Debug, PartialEq, Eq)]
|
||||||
pub enum TabsOrientation {
|
pub enum TabsOrientation {
|
||||||
Horizontal,
|
Horizontal,
|
||||||
|
#[allow(dead_code)]
|
||||||
Vertical,
|
Vertical,
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|||||||
@@ -17,6 +17,12 @@ pub fn data_bool(value: bool) -> &'static str {
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/// Trait for types that can be converted to a static string representation.
|
||||||
|
/// Useful for variant enums that need to be used as CSS classes or data attributes.
|
||||||
|
pub trait AsStaticStr {
|
||||||
|
fn as_str(&self) -> &'static str;
|
||||||
|
}
|
||||||
|
|
||||||
#[cfg(test)]
|
#[cfg(test)]
|
||||||
mod tests {
|
mod tests {
|
||||||
use super::*;
|
use super::*;
|
||||||
|
|||||||
Reference in New Issue
Block a user