Different steps of the Section Translation process (T243495) require language selection. This is an opportunity to create a standard language selection component in Vue that other products could reuse.
# Overview
The language selector shows a list of languages available for the user to select. The number of languages provided in the selector is variable and can be potentially large. The selector supports searching, surfacing frequent languages, and adjusting the layout to the number of languages.
{F32367514, width=50%}
Overview of the selection process:
- **Open the selector.** The language selector opens after the user taps on an action (e.g., button) or selection (e.g., drop-down) control. The design of these entry points is out of the scope of the current task. A button can be used for testing purposes.
- **Search.** The user types a search query that filters the list of languages shown.
- **Select a language.** Taping on a language from the list completes the selection. Closing the selector automatically and making the selected value available to the product using the selector.
- **Close the selector.** The selector closes when taping outside the selector, pressing "esc" key or with a close action available on narrow screens. This cancels the selection.
# Responsive layout
The layout is adapted to the following factors:
**Number of languages**
- 0–9 languages. Suggested languages are hidden. The list of languages has no label, and uses one column.
- 10-29 languages. Suggested languages are shown using 2 columns. The list of languages uses one column. Both lists are labelled.
- 30 or more languages. Suggested languages are shown. The lists of suggested and all languages use 3 columns (on wide screens).
|0–9 languages|10-29 languages|30-* languages|
|---|---|---|
|{F32367543}|{F32367547}|{F32367541}|
**Screen size**
- Narrow screen. The selector is shown as a full screen dialog. The list of all languages always uses one column.
- Wider screen. The selector is shown as a dialog over existing content. The list of all languages can use one or three columns depending on the number of languages (see above).
**Product preferences**|Wide screen|Narrow screen|
- Option to hide suggested languages. Suggested languages are shown by default when there are 10 languages or more available. However, this list is optional and apps have the option to hide the suggested languages list. In such case, the list of all languages will be shown without a title label.
|0–9 languages|10-29 languages|30-* languages|---|---|
|---|---|---||{F32367551}|{F32367553}
**Product preferences**
|{F32367543}|{F32367547}|{F32367541}|- Option to hide suggested languages. Suggested languages are shown by default when there are 10 languages or more available. However, this list is optional and apps have the option to hide the suggested languages list. In such case, the list of all languages will be shown without a title label.
# Search
# Suggested languages
# Further context
This ticket covers only the basic aspects for the selector. Additional usecases requiring additional information, actions, or selection modes will be supported in separate tickets. For a deep dive on how all these fit together you can check [[ https://commons.wikimedia.org/wiki/File:Language_Selector_Designs.pdf | this document ]].