From 9cd56b6ae00380fd70d28152d2332e6e81ab0833 Mon Sep 17 00:00:00 2001 From: Kbz-8 Date: Tue, 28 Apr 2026 01:54:09 +0200 Subject: [PATCH] yes --- src/components/select/component.rs | 59 +++++++++++++++++++++--------- src/landing.rs | 13 +++++-- 2 files changed, 50 insertions(+), 22 deletions(-) diff --git a/src/components/select/component.rs b/src/components/select/component.rs index 85dddc8..4ac0d89 100644 --- a/src/components/select/component.rs +++ b/src/components/select/component.rs @@ -1,20 +1,38 @@ use dioxus::prelude::*; use dioxus_primitives::select::{ - self, SelectGroupLabelProps, SelectGroupProps, SelectListProps, SelectOptionProps, SelectProps, - SelectTriggerProps, SelectValueProps, + self, SelectGroupLabelProps, SelectGroupProps, SelectListProps, SelectMultiProps, + SelectOptionProps, SelectProps, SelectTriggerProps, SelectValueProps, }; +use dioxus_primitives::icon; #[component] pub fn Select(props: SelectProps) -> Element { rsx! { select::Select { - class: "select", + class: "dx-select", value: props.value, default_value: props.default_value, on_value_change: props.on_value_change, disabled: props.disabled, name: props.name, - placeholder: props.placeholder, + roving_loop: props.roving_loop, + typeahead_timeout: props.typeahead_timeout, + attributes: props.attributes, + {props.children} + } + } +} + +#[component] +pub fn SelectMulti(props: SelectMultiProps) -> Element { + rsx! { + select::SelectMulti { + class: "dx-select", + values: props.values, + default_values: props.default_values, + on_values_change: props.on_values_change, + disabled: props.disabled, + name: props.name, roving_loop: props.roving_loop, typeahead_timeout: props.typeahead_timeout, attributes: props.attributes, @@ -26,12 +44,13 @@ pub fn Select(props: SelectProps) -> Element #[component] pub fn SelectTrigger(props: SelectTriggerProps) -> Element { rsx! { - select::SelectTrigger { attributes: props.attributes, + select::SelectTrigger { class: "dx-select-trigger", attributes: props.attributes, {props.children} - svg { - class: "select-expand-icon", - view_box: "0 0 24 24", - xmlns: "http://www.w3.org/2000/svg", + icon::Icon { + class: "dx-select-expand-icon", + width: "20px", + height: "20px", + stroke: "var(--primary-color-7)", polyline { points: "6 9 12 15 18 9" } } } @@ -41,7 +60,10 @@ pub fn SelectTrigger(props: SelectTriggerProps) -> Element { #[component] pub fn SelectValue(props: SelectValueProps) -> Element { rsx! { - select::SelectValue { attributes: props.attributes } + select::SelectValue { + placeholder: props.placeholder, + attributes: props.attributes, + } } } @@ -49,7 +71,7 @@ pub fn SelectValue(props: SelectValueProps) -> Element { pub fn SelectList(props: SelectListProps) -> Element { rsx! { select::SelectList { - class: "select-list", + class: "dx-select-list", id: props.id, attributes: props.attributes, {props.children} @@ -61,7 +83,7 @@ pub fn SelectList(props: SelectListProps) -> Element { pub fn SelectGroup(props: SelectGroupProps) -> Element { rsx! { select::SelectGroup { - class: "select-group", + class: "dx-select-group", disabled: props.disabled, id: props.id, attributes: props.attributes, @@ -74,7 +96,7 @@ pub fn SelectGroup(props: SelectGroupProps) -> Element { pub fn SelectGroupLabel(props: SelectGroupLabelProps) -> Element { rsx! { select::SelectGroupLabel { - class: "select-group-label", + class: "dx-select-group-label", id: props.id, attributes: props.attributes, {props.children} @@ -86,7 +108,7 @@ pub fn SelectGroupLabel(props: SelectGroupLabelProps) -> Element { pub fn SelectOption(props: SelectOptionProps) -> Element { rsx! { select::SelectOption:: { - class: "select-option", + class: "dx-select-option", value: props.value, text_value: props.text_value, disabled: props.disabled, @@ -104,10 +126,11 @@ pub fn SelectOption(props: SelectOptionProps) pub fn SelectItemIndicator() -> Element { rsx! { select::SelectItemIndicator { - svg { - class: "select-check-icon", - view_box: "0 0 24 24", - xmlns: "http://www.w3.org/2000/svg", + icon::Icon { + class: "dx-select-check-icon", + width: "1rem", + height: "1rem", + stroke: "var(--secondary-color-5)", path { d: "M5 13l4 4L19 7" } } } diff --git a/src/landing.rs b/src/landing.rs index 698315e..2e50379 100644 --- a/src/landing.rs +++ b/src/landing.rs @@ -149,11 +149,14 @@ fn LandingPlaceholder() -> Element { "Duration (H:M:S.MS)" } th { class: "uppercase bold whitespace-nowrap py-2 px-3", - Select::> { placeholder: "STATUS", + Select::> { SelectTrigger { class: "select-trigger mx-auto w-fit !bg-transparent !shadow-none !text-gray-400 cursor-pointer uppercase", aria_label: "Select Trigger", - SelectValue { class: "!bg-transparent !shadow-none !text-gray-400" } + SelectValue { + class: "!bg-transparent !shadow-none !text-gray-400", + placeholder: "STATUS", + } } SelectList { aria_label: "Select status", SelectGroup { @@ -445,12 +448,14 @@ pub fn Landing() -> Element { } th { class: "uppercase bold whitespace-nowrap py-2 px-3", Select::> { - placeholder: "STATUS", on_value_change: move |value: Option>| filter.set(value.unwrap_or(None)), SelectTrigger { class: "select-trigger mx-auto w-fit !bg-transparent !shadow-none !text-gray-400 cursor-pointer uppercase", aria_label: "Select Trigger", - SelectValue { class: "!bg-transparent !shadow-none !text-gray-400" } + SelectValue { + class: "!bg-transparent !shadow-none !text-gray-400", + placeholder: "STATUS", + } } SelectList { aria_label: "Select status", SelectGroup {