Language-sensitive list formatting with Vue-component support
Summary
Currently, there is no straight-forward solution for rendering a list of items in a language-sensitive format, that also allows wrapping list-items in Vue-components.
For example - consider this design proposal:
One item:
Two items:
More than two items:
(Each link should be using <gl-link>
and "3 more" should trigger a modal)
Since the formatting of lists can vary from language to language (words, conventions on separators and conjunctions) a bullet-proof internationalization that allows the integration of Vue-components in a re-usable way is needed.
Context
- Discussion in MR that triggered this issue: https://gitlab.com/gitlab-org/gitlab-ee/merge_requests/14905#note_211857422
- Unicode CLDR on formatting lists: http://cldr.unicode.org/translation/lists
-
Intl.ListFormat
proposal: https://github.com/tc39/proposal-intl-list-format -
Intl.ListFormat
in V8: https://v8.dev/features/intl-listformat -
Intl.ListFormat
pollyfill: https://github.com/wessberg/intl-list-format
Improvements
- Provide a standard way of internationalising list-formatting
Involved components
ee/app/assets/javascripts/dependencies/components/dependency_license_links.vue
- ?