Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Feat/Add LocaleSwitch component #141

Merged
merged 10 commits into from
May 23, 2024
Merged

Feat/Add LocaleSwitch component #141

merged 10 commits into from
May 23, 2024

Conversation

totocalcio
Copy link
Contributor

@totocalcio totocalcio commented May 19, 2024

issue

https://github.com/vuejs-jp/vuefes-2024-backside/issues/158

Details of Changes

  • FooterPageSection.vue 内で言語切替を検知できるように変更
  • LocaleSwitch.stories.ts を追加
    • LocaleSwitch.vueでエラーが発生しないようにStorybookにvue-routerを追加
  • LocaleSwitch.vue を追加

Others

  • Storybook
    • コンポーネントのUIの確認のみを目的として実装
    • Storybook上での画面遷移は実装していない
    • 画面遷移は発生しないがエラーにならないようにvue-routerを定義
  • 設計
    • vue-routerでパスを切り替え
      • パスの変更を検知して言語が切り替わる
      • 切替時パスをreplaceしており、トレイリングスラッシュの対策を実装している。
        • サーバー側で設定がされている場合、処理を削除して問題ない。
      • @nuxtjs/i18nやvue-i18n-routingのAPIを使用すればもっとわかりやすい処理をかけるかもしれませんが、知識不足と納期の関係でvue-routerでの対応としました。
    • 画面遷移する方が都合がよさそうであれば、window.location.hrefで対応する。
  • I/F
    • 遷移先や初期画面の状態をpropsで渡す、またルートコンポーネントでemit受け取る方法等も検討したが、現在はすべてコンポーネント内に閉じ込めている。
      • 結合時に問題が発生する場合は再検討する。
  • 制約
    • 初期表示がenの場合、パスを取得してから状態を判断している関係で、描画までにラグがある。
    • 現在はisLoadedのrefを用意して初期値をfalse、コンポーネント全体をv-ifでisLoadedを連携することで初期化処理完了まで隠している。
      • onMounted内で状態反映処理完了後にtrueを代入しコンポーネントを表示
      • ヘッダー実装時に、absoluteで位置固定であれば問題ないが、グローバルメニューと横並びにするならば、横方向へのレイアウトシフトが発生するので実装方針検討が必要。
        • フォールバックを実装する、など

Screenshots

※Adobe CC 未契約により、DIN 2014がインストールされていません。
スクリーンショットがデザインカンプと異なっているため、フォントお持ちの方ご確認お願い致します。
image
image

Copy link

netlify bot commented May 19, 2024

Deploy Preview for vuefes-2024 ready!

Name Link
🔨 Latest commit 2a9e462
🔍 Latest deploy log https://app.netlify.com/sites/vuefes-2024/deploys/664cc0368928930008bb07f7
😎 Deploy Preview https://deploy-preview-141--vuefes-2024.netlify.app
📱 Preview on mobile
Toggle QR Code...

QR Code

Use your smartphone camera to open QR code link.

To edit notification comments on pull requests, go to your Netlify site configuration.

@totocalcio totocalcio requested review from KannoStanfoot and jiyuujin and removed request for KannoStanfoot May 19, 2024 15:39
@totocalcio totocalcio changed the title Draft: Feat/Add LocaleSwitch component Feat/Add LocaleSwitch component May 19, 2024
return router.currentRoute.value.path.replace(`/${LANGUAGES.ENGLISH}`, '')
}
const setSwitchStatus = () => {
isChecked.value = router.currentRoute.value.path.includes(LANGUAGES.ENGLISH)
Copy link
Contributor

Choose a reason for hiding this comment

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

pathのなかに en があるだけでマッチしそうなので、 /en/ とかにしたほうがよいよーなきがします
たとえば /children とかでも 英語だと判断される?

Copy link
Contributor Author

Choose a reason for hiding this comment

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

探索的に確認はしていないですが、トップページでhttps://vuefes.jp/2024/enとなるケースがないのであれば、確かに/en/の方が妥当だと思います。
説明にも書きましたが、トレイリングスラッシュの対応がされている場合は以下の処理を削除できます。

  // トレイリングスラッシュ対策
  if (path === '') {
    router.push('/')
    return
  }

Comment on lines 83 to 85
* {
--box-shadow: 0 1px 4px color-mix(in srgb, var(--color-vue-blue), transparent calc(100% - 14%));
}
Copy link
Contributor

@toshick toshick May 20, 2024

Choose a reason for hiding this comment

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

全タグに対して変数宣言しているよーに見えますが、なにかこれが悪さしないかちょっとだけ心配です。
でも、動いていればとりあえずokです。
(もしくはこれが一般的な書き方?)

Copy link
Contributor Author

Choose a reason for hiding this comment

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

scopedなのであくまで影響範囲はLocaleSwitchコンポーネント内のため、問題なしと判断しました。
一般的かどうかまでは調べきれていないので、コンポーネント全体への定義で他に一般的な使用方法があればそちらを検討したいです。(locale-switch-buttonへの定義でも構わない)

Copy link
Contributor

@KannoStanfoot KannoStanfoot left a comment

Choose a reason for hiding this comment

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

2点コメントしました。
どちらもリリース後対応でも良いと思います。

packages/ui/components/common/LocaleSwitch.vue Outdated Show resolved Hide resolved
@KannoStanfoot KannoStanfoot merged commit 9dbd3bf into main May 23, 2024
11 of 13 checks passed
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.

3 participants