From 21426a27b2ce43f01f60ec7fc0fed2164caf6a80 Mon Sep 17 00:00:00 2001
From: Vixalie <vixalie@outlook.com>
Date: Sun, 24 Aug 2025 11:27:11 +0800
Subject: [PATCH] =?UTF-8?q?feat(Segments):=20=E6=B7=BB=E5=8A=A0=E5=8F=AA?=
 =?UTF-8?q?=E8=AF=BB=E5=B1=9E=E6=80=A7=E5=B9=B6=E4=BC=98=E5=8C=96=E7=9B=B8?=
 =?UTF-8?q?=E5=85=B3=E4=BA=A4=E4=BA=92?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 在 Segments 组件中添加 readonly 属性
- 实现只读状态下的组件行为
- 为选项添加 aria-readonly 属性
- 调整只读状态下选项的样式
---
 src/components/Segments.tsx | 7 +++++--
 1 file changed, 5 insertions(+), 2 deletions(-)

diff --git a/src/components/Segments.tsx b/src/components/Segments.tsx
index 7917e75..8ecfec9 100644
--- a/src/components/Segments.tsx
+++ b/src/components/Segments.tsx
@@ -24,6 +24,7 @@ interface SegmentsProps {
   defaultValue?: Option['value'];
   direction?: 'horizontal' | 'vertical';
   disabled?: boolean;
+  readonly?: boolean;
   onChange?: (value: Option['value'] | undefined) => void;
 }
 
@@ -32,6 +33,7 @@ const Segments: Component<SegmentsProps> = (props) => {
     {
       options: [],
       disabled: false,
+      readonly: false,
       direction: 'horizontal',
     },
     props,
@@ -69,7 +71,7 @@ const Segments: Component<SegmentsProps> = (props) => {
   });
 
   const handleSelect = (value: Option['value']) => {
-    if (mProps.disabled) {
+    if (mProps.disabled || mProps.readonly) {
       return;
     }
     setSelected(value);
@@ -88,8 +90,9 @@ const Segments: Component<SegmentsProps> = (props) => {
             <div
               ref={(el) => (optionRefs[index] = el)}
               aria-disabled={mProps.disabled}
+              aria-readonly={mProps.readonly}
               class={cx(
-                'z-[5] cursor-pointer rounded-sm px-2 py-0.5',
+                'z-[5] cursor-pointer rounded-sm px-2 py-0.5 aria-readonly:cursor-not-allowed',
                 selected() === option().value
                   ? 'not-aria-disabled:text-on-primary-surface aria-disabled:text-primary-disabled'
                   : 'not-aria-disabled:text-on-surface aria-disabled:text-neutral-disabled  hover:not-aria-disabled:text-primary-hover',