Skip to content

feat(checkbox): indeterminate状態を追加#305

Merged
lostfind merged 1 commit into
masterfrom
feature/indeterminate-checkbox
Oct 10, 2025
Merged

feat(checkbox): indeterminate状態を追加#305
lostfind merged 1 commit into
masterfrom
feature/indeterminate-checkbox

Conversation

@lostfind

@lostfind lostfind commented Oct 9, 2025

Copy link
Copy Markdown
Member

CheckBoxのindeterminateを追加しました

Screenshot 2025-10-09 at 21 16 56

動作

現在のmodelValueの値にかかわらず、indeterminate状態からクリックする場合、modelValue=trueでチェック状態になります。

操作前 クリック後
modelValue: true
indeterminate: true
表示: マイナスアイコン
modelValue: true
indeterminate: false
表示: チェックアイコン
modelValue: false
indeterminate: true
表示: マイナスアイコン
modelValue: true
indeterminate: false
表示: チェックアイコン
modelValue: false
indeterminate: false
表示: 未チェック
modelValue: true
indeterminate: false
表示: チェックアイコン
modelValue: true
indeterminate: false
表示: チェックアイコン
modelValue: false
indeterminate: false
表示: 未チェック

@lostfind lostfind self-assigned this Oct 9, 2025
@lostfind lostfind force-pushed the feature/indeterminate-checkbox branch from 400aec4 to 6bb1558 Compare October 9, 2025 12:26

@kawamataryo kawamataryo left a comment

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

LGTM!!ありがとうございます!

}

const iconName = computed(() => (props.indeterminate ? 'minus' : 'check'))

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

nits

ネイティブのinputtのindeterminateの属性も更新してあげると、より良いかもと思いました!

watch(
  () => props.indeterminate,
  (value) => {
    if (inputRef.value) inputRef.value.indeterminate = value
  },
  { immediate: true }
)

https://developer.mozilla.org/ja/docs/Web/API/HTMLInputElement/indeterminate

Copy link
Copy Markdown
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

提案して頂いたコードは props.indeterminateの初期値がtrueだった場合、DOMへの反映がされない可能性がありましたので、watchの immediate: trueオプションを消してonMountedを追加しました。

https://github.com/lapras-inc/lapras-frontend/compare/6bb1558553ebae277429fbe1392c48a9e14e2997..2cff5b8acfbda513f9d41f4c2b08e93bc4cb9f11

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

なるほどです!!👍
ありがとうございます!!!

@lostfind lostfind force-pushed the feature/indeterminate-checkbox branch from 6bb1558 to 2cff5b8 Compare October 10, 2025 06:39

@kawamataryo kawamataryo left a comment

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

LGTM!!!

@lostfind lostfind merged commit e228c6c into master Oct 10, 2025
4 checks passed
@lostfind lostfind deleted the feature/indeterminate-checkbox branch October 10, 2025 09:32
@scoutea scoutea mentioned this pull request Oct 10, 2025
2 tasks
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants