yggdrasil/components/ui/

segmented.rs

//! 分段控件：胶囊轨道 + 弹簧滑块。
use super::icons::{Icon, IconName};
use leptos::prelude::*;

/// 分段控件的一项：值、文字，可选图标与数量。
#[derive(Clone, PartialEq)]
pub struct SegmentedItem<T> {
    pub value: T,
    pub label: String,
    pub icon: Option<IconName>,
    pub count: Option<i64>,
}

impl<T> SegmentedItem<T> {
    pub fn new(value: T, label: impl Into<String>) -> Self {
        Self {
            value,
            label: label.into(),
            icon: None,
            count: None,
        }
    }

    pub fn icon(mut self, icon: IconName) -> Self {
        self.icon = Some(icon);
        self
    }

    pub fn count(mut self, count: i64) -> Self {
        self.count = Some(count);
        self
    }
}

/// 语义：Tabs = tablist/tab + aria-selected（切换视图、筛选）；
/// Radio = radiogroup/radio + aria-checked（设置取值）。
#[derive(Clone, Copy, PartialEq, Default)]
pub enum SegmentedKind {
    #[default]
    Tabs,
    Radio,
}

#[derive(Clone, Copy, PartialEq, Default)]
pub enum SegmentedSize {
    #[default]
    Md,
    Sm,
}

/// 循环移动到相邻项（←/→ 用）；没有当前项时从第 0 项起算。
fn neighbor_index(len: usize, current: Option<usize>, delta: i32) -> Option<usize> {
    if len == 0 {
        return None;
    }
    let cur = current.unwrap_or(0) as i32;
    Some((cur + delta).rem_euclid(len as i32) as usize)
}

/// 分段控件。
///
/// 胶囊轨道里放一组选项，当前项下是浮起的滑块，切换时以 snappy 弹簧滑到新位置。
/// ←/→ 在选项间循环并立即切换，Home/End 跳到首尾，焦点随之移动（roving tabindex，
/// Tab 只停在当前项）。滑块测量完成前（含服务端渲染与 hydration 首帧），当前项直接
/// 画浮起底色，首屏不闪。
///
/// Props：
/// - `items`：选项列表，见 [`SegmentedItem`]；既可传 `Vec`，也可传信号或闭包（数量变化时
///   选项按序号原地更新、不重建按钮，焦点不丢）
/// - `value`：当前值（值、信号或闭包）；没有匹配项时没有当前项
/// - `on_change`：切换时的回调
/// - `aria_label`：控件组的无障碍名称
/// - `kind`：语义，Tabs（默认）或 Radio，见 [`SegmentedKind`]
/// - `size`：Md（默认）或 Sm
/// - `icon_only`：只显示图标，文字作为 aria-label 与 title
/// - `class`：外层容器附加类（间距、页面变体）
///
/// 带图标且未设 `icon_only` 时，容器窄于 16rem 自动只留图标（文字仍供读屏）。
/// 容器对宽度有尺寸包含，放进 flex 行时调用方必须给它宽度。
///
/// 选项按钮不再带 `seg-N-i` 形式的 `id`：该序号来自全局计数器，服务端（进程级）与
/// 水合后的客户端计数不一致；焦点移动改为按序号在轨道内查询 `.segmented-item`。
#[component]
pub fn SegmentedControl<T>(
    #[prop(into)] items: Signal<Vec<SegmentedItem<T>>>,
    #[prop(into)] value: Signal<T>,
    #[prop(into)] on_change: Callback<T>,
    #[prop(into)] aria_label: String,
    #[prop(optional)] kind: SegmentedKind,
    #[prop(optional)] size: SegmentedSize,
    #[prop(optional)] icon_only: bool,
    #[prop(optional, into)] class: String,
) -> impl IntoView
where
    T: Clone + PartialEq + Send + Sync + 'static,
{
    let thumb_style = RwSignal::new(None::<String>);
    let track = NodeRef::<leptos::html::Div>::new();

    let len = Memo::new(move |_| items.with(|items| items.len()));
    let active_index = Memo::new(move |_| {
        value.with(|v| items.with(|items| items.iter().position(|item| &item.value == v)))
    });
    // 数量变化会改变按钮宽度，需要重新测量滑块。
    let count_key = Memo::new(move |_| {
        items.with(|items| items.iter().map(|item| item.count).collect::<Vec<_>>())
    });

    // 测量当前项的位置与尺寸；轨道被隐藏（宽度为 0）或没有当前项时回到未测量态。
    #[cfg(target_arch = "wasm32")]
    let measure = move || {
        use wasm_bindgen::JsCast;
        // 延迟测量与 ResizeObserver 回调可能晚于组件卸载：信号已释放时直接放弃。
        let Some(track_el) = track.try_get_untracked() else {
            return;
        };
        let style = track_el.and_then(|el| {
            let active = el
                .query_selector("[data-active]")
                .ok()
                .flatten()?
                .dyn_into::<web_sys::HtmlElement>()
                .ok()?;
            (active.offset_width() > 0).then(|| {
                // 显式写回不透明：样式字符串更新时，未测量时的 opacity 不会被移除。
                format!(
                    "transform: translate({}px, {}px); width: {}px; height: {}px; opacity: 1;",
                    active.offset_left(),
                    active.offset_top(),
                    active.offset_width(),
                    active.offset_height()
                )
            })
        });
        if thumb_style
            .try_get_untracked()
            .is_some_and(|current| current != style)
        {
            thumb_style.try_set(style);
        }
    };

    // 轨道尺寸变化（容器查询切换文字显隐、从隐藏变为显示）时重新测量。
    #[cfg(target_arch = "wasm32")]
    {
        use wasm_bindgen::prelude::Closure;
        use wasm_bindgen::JsCast;
        type ObserverSlot = Option<(web_sys::ResizeObserver, Closure<dyn FnMut()>)>;
        let observer: StoredValue<ObserverSlot, LocalStorage> = StoredValue::new_local(None);
        Effect::new(move |_| {
            let Some(el) = track.get() else { return };
            if observer.with_value(|o| o.is_some()) {
                return;
            }
            let closure = Closure::wrap(Box::new(measure) as Box<dyn FnMut()>);
            if let Ok(ro) = web_sys::ResizeObserver::new(closure.as_ref().unchecked_ref()) {
                ro.observe(&el);
                observer.set_value(Some((ro, closure)));
            }
            measure();
        });
        on_cleanup(move || {
            if let Some(Some((ro, _closure))) = observer.try_update_value(|o| o.take()) {
                ro.disconnect();
            }
        });
    }

    // 选中项或数量变化（宽度随之变化）时重新测量滑块。
    Effect::new(move |_| {
        let _ = (active_index.get(), count_key.get());
        #[cfg(target_arch = "wasm32")]
        leptos::task::spawn_local(async move {
            crate::utils::time::sleep_ms(30).await;
            measure();
        });
    });

    let is_tabs = kind == SegmentedKind::Tabs;
    let wrap_class = move || {
        let adaptive =
            !icon_only && items.with(|items| items.iter().any(|item| item.icon.is_some()));
        format!(
            "segmented-wrap{}{}{} {class}",
            if size == SegmentedSize::Sm {
                " segmented-sm"
            } else {
                ""
            },
            if icon_only {
                " segmented-icon-only"
            } else {
                ""
            },
            if adaptive { " segmented-adaptive" } else { "" },
        )
    };

    let on_keydown = move |e: leptos::ev::KeyboardEvent| {
        let len = len.get_untracked();
        let current = active_index.get_untracked();
        let next = match e.key().as_str() {
            "ArrowRight" => neighbor_index(len, current, 1),
            "ArrowLeft" => neighbor_index(len, current, -1),
            "Home" => (len > 0).then_some(0),
            "End" => len.checked_sub(1),
            _ => None,
        };
        if let Some(next) = next {
            e.prevent_default();
            if let Some(value) =
                items.with_untracked(|items| items.get(next).map(|item| item.value.clone()))
            {
                on_change.run(value);
            }
            // 焦点随选中项移动：按序号取轨道里的第 next 个选项。
            #[cfg(target_arch = "wasm32")]
            {
                use wasm_bindgen::JsCast;
                if let Some(el) = track
                    .get_untracked()
                    .and_then(|t| t.query_selector_all(".segmented-item").ok())
                    .and_then(|list| list.get(next as u32))
                    .and_then(|node| node.dyn_into::<web_sys::HtmlElement>().ok())
                {
                    let _ = el.focus();
                }
            }
        }
    };

    view! {
        <div class=wrap_class>
            <div
                node_ref=track
                class="segmented"
                role=if is_tabs { "tablist" } else { "radiogroup" }
                aria-label=aria_label
                data-ready=move || thumb_style.with(|s| s.is_some()).then_some("true")
                on:keydown=on_keydown
            >
                <span
                    class="segmented-thumb"
                    aria-hidden="true"
                    style=move || thumb_style.get().unwrap_or_else(|| "opacity: 0;".to_string())
                ></span>
                <For
                    each=move || 0..len.get()
                    key=|index| *index
                    children=move |index| {
                        let active = move || active_index.get() == Some(index);
                        let label = move || {
                            items
                                .with(|items| items.get(index).map(|item| item.label.clone()))
                                .unwrap_or_default()
                        };
                        let icon = move || {
                            items.with(|items| items.get(index).and_then(|item| item.icon))
                        };
                        let count = move || {
                            items.with(|items| items.get(index).and_then(|item| item.count))
                        };
                        view! {
                            <button
                                type="button"
                                class="segmented-item"
                                role=if is_tabs { "tab" } else { "radio" }
                                aria-selected=move || is_tabs.then(|| active().to_string())
                                aria-checked=move || (!is_tabs).then(|| active().to_string())
                                data-active=move || active().then_some("true")
                                tabindex=move || if active() { "0" } else { "-1" }
                                aria-label=move || icon_only.then(label)
                                title=move || icon_only.then(label)
                                on:click=move |_| {
                                    if let Some(value) = items
                                        .with_untracked(|items| {
                                            items.get(index).map(|item| item.value.clone())
                                        })
                                    {
                                        on_change.run(value);
                                    }
                                }
                            >
                                {move || icon().map(|icon| view! { <Icon name=icon size=14/> })}
                                {(!icon_only)
                                    .then(|| view! { <span class="segmented-label">{label}</span> })}
                                {move || count().map(|n| view! { <span class="segmented-count">{n}</span> })}
                            </button>
                        }
                    }
                />
            </div>
        </div>
    }
}

#[cfg(test)]
mod tests {
    use super::*;

    #[test]
    fn neighbor_index_wraps_in_both_directions() {
        assert_eq!(neighbor_index(3, Some(0), 1), Some(1));
        assert_eq!(neighbor_index(3, Some(2), 1), Some(0));
        assert_eq!(neighbor_index(3, Some(0), -1), Some(2));
        // 没有当前项时从第 0 项起算
        assert_eq!(neighbor_index(3, None, 1), Some(1));
        assert_eq!(neighbor_index(0, None, 1), None);
    }

    #[test]
    fn renders_tablist_with_active_item_and_counts() {
        let html = Owner::new().with(|| {
            view! {
                <SegmentedControl
                    items=vec![
                        SegmentedItem::new("a".to_string(), "全部").count(3),
                        SegmentedItem::new("b".to_string(), "已发布"),
                    ]
                    value="b".to_string()
                    on_change=|_| {}
                    aria_label="筛选"
                />
            }
            .to_html()
        });
        assert!(html.contains("role=\"tablist\""), "{html}");
        assert!(html.contains("aria-label=\"筛选\""), "{html}");
        assert_eq!(html.matches("data-active=\"true\"").count(), 1, "{html}");
        assert!(html.contains("segmented-count"), "{html}");
    }
}