@14ch/svelte-ui 0.0.50 → 0.0.51
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
|
@@ -58,7 +58,7 @@
|
|
|
58
58
|
iconOpticalSize?: IconOpticalSize;
|
|
59
59
|
|
|
60
60
|
// 状態/動作
|
|
61
|
-
/**
|
|
61
|
+
/** インページ方式でステップのクリック遷移を許可。到達済み（progress 以下）のステップのみクリック可能。 @default false */
|
|
62
62
|
clickable?: boolean;
|
|
63
63
|
/** コンポーネント全体を無効化。 @default false */
|
|
64
64
|
disabled?: boolean;
|
|
@@ -204,12 +204,10 @@
|
|
|
204
204
|
|
|
205
205
|
const isStepDisabled = (item: StepItem): boolean => disabled || item.disabled === true;
|
|
206
206
|
|
|
207
|
-
//
|
|
208
|
-
|
|
209
|
-
|
|
210
|
-
|
|
211
|
-
// インページ方式でクリック遷移が有効なステップか（ボタン描画・クリック処理の判定）
|
|
212
|
-
const isStepButton = (item: StepItem): boolean => isStepInteractive(item) && !isLinkMode;
|
|
207
|
+
// 対話的なステップか。到達済み（index <= progressIndex）のステップのみ対話可能。
|
|
208
|
+
// URL方式はリンク、インページ方式は clickable のときボタン。未到達の先のステップへは飛べない。無効なら常に非対話。
|
|
209
|
+
const isStepInteractive = (item: StepItem, index: number): boolean =>
|
|
210
|
+
!isStepDisabled(item) && index <= progressIndex && (isLinkMode || clickable);
|
|
213
211
|
|
|
214
212
|
const stepClasses = (item: StepItem, status: StepStatus, isViewing: boolean): string =>
|
|
215
213
|
[
|
|
@@ -235,8 +233,8 @@
|
|
|
235
233
|
return `${step}: ${state}`;
|
|
236
234
|
};
|
|
237
235
|
|
|
236
|
+
// クリック可能なインページボタンからのみ呼ばれる（未到達/無効/URL/非clickable は非対話要素で描画される）
|
|
238
237
|
const handleStepClick = (item: StepItem, index: number, event: MouseEvent) => {
|
|
239
|
-
if (!isStepButton(item)) return;
|
|
240
238
|
const nextValue = item.value ?? String(index);
|
|
241
239
|
value = nextValue;
|
|
242
240
|
onchange(nextValue);
|
|
@@ -338,7 +336,7 @@
|
|
|
338
336
|
{@const status = getStatus(index)}
|
|
339
337
|
{@const isViewing = index === activeIndex}
|
|
340
338
|
<li class="step-nav__item" role="listitem">
|
|
341
|
-
{#if !isStepInteractive(item)}
|
|
339
|
+
{#if !isStepInteractive(item, index)}
|
|
342
340
|
<!-- 非対話（URL/インページを問わず共通）: 表示のみ。無効ステップは aria-disabled を付与 -->
|
|
343
341
|
<span
|
|
344
342
|
class={stepClasses(item, status, isViewing)}
|
|
@@ -30,7 +30,7 @@ export type StepNavProps = {
|
|
|
30
30
|
iconWeight?: IconWeight;
|
|
31
31
|
iconGrade?: IconGrade;
|
|
32
32
|
iconOpticalSize?: IconOpticalSize;
|
|
33
|
-
/**
|
|
33
|
+
/** インページ方式でステップのクリック遷移を許可。到達済み（progress 以下）のステップのみクリック可能。 @default false */
|
|
34
34
|
clickable?: boolean;
|
|
35
35
|
/** コンポーネント全体を無効化。 @default false */
|
|
36
36
|
disabled?: boolean;
|