LocaleSelect

A Select to switch between locales.

Usage

The LocaleSelect component extends the SelectMenu component, so you can pass any property such as color, variant, size, etc.

This component is meant to be used with the i18n system. Learn more about it in the guide.

The flags are displayed using Unicode characters. This may result in a different display, e.g. Microsoft Edge under Windows displays the ISO 3166-1 alpha-2 code instead, as no flag icons are shipped with the OS fonts.

Locales

Use the locales prop with an array of locales from pohon-ui/locale.

<script setup lang="ts">
import * as locales from 'pohon-ui/locale';

const locale = ref('en');
</script>

<template>
  <PLocaleSelect
    v-model="locale"
    :locales="Object.values(locales)"
    class="w-48"
  />
</template>

<script setup lang="ts">
import { ref } from 'vue'
import * as locales from 'pohon-ui/locale';

const locale = ref('en');
</script>

<template>
  <PLocaleSelect
    v-model="locale"
    :locales="Object.values(locales)"
    class="w-48"
  />
</template>

You can pass only the locales you need in your application:

<script setup lang="ts">
import { en, es, fr } from 'pohon-ui/locale';

const locale = ref('en');
</script>

<template>
  <PLocaleSelect
    v-model="locale"
    :locales="[en, es, fr]"
  />
</template>

Dynamic locale

You can use it with Nuxt i18n:

<script setup lang="ts">
import { de, en, fr } from 'pohon-ui/locale';

const { locale, setLocale } = useI18n();
</script>

<template>
  <PLocaleSelect
    :model-value="locale"
    :locales="[de, en, fr]"
    @update:model-value="setLocale($event)"
  />
</template>

You can use it with Vue i18n:

<script setup lang="ts">
import { de, en } from 'pohon-ui/locale';
import { useI18n } from 'vue-i18n';

const { locale, setLocale } = useI18n();
</script>

<template>
  <PLocaleSelect
    :model-value="locale"
    :locales="[de, en]"
    @update:model-value="setLocale($event)"
  />
</template>

API

Props

Prop	Default	Type
`modelValue`		`string`
`trailingIcon`	`appConfig.ui.icons.chevronDown`	`any` The icon displayed to open the menu.
`selectedIcon`	`appConfig.ui.icons.check`	`any` The icon displayed when an item is selected.
`clearIcon`	`appConfig.ui.icons.close`	`any` The icon displayed in the clear button.
`class`		`any`
`icon`		`any` Display an icon based on the `leading` and `trailing` props.
`leadingIcon`		`any` Display an icon on the left side.
`loadingIcon`	`appConfig.ui.icons.loading`	`any` The icon when the `loading` prop is `true`.
`open`		`boolean` The controlled open state of the Combobox. Can be binded with `v-model:open`.
`defaultOpen`		`boolean` The open state of the combobox when it is initially rendered. Use when you do not need to control its open state.
`disabled`		`boolean` When `true`, prevents the user from interacting with listbox
`name`		`string` The name of the field. Submitted with its owning form as part of a name/value pair.
`resetSearchTermOnBlur`	`true`	`boolean` Whether to reset the searchTerm when the Combobox input blurred
`resetSearchTermOnSelect`	`true`	`boolean` Whether to reset the searchTerm when the Combobox value is selected
`resetModelValueOnClear`		`boolean` When `true` the `modelValue` will be reset to `null` (or `[]` if `multiple`)
`highlightOnHover`		`boolean` When `true`, hover over item will trigger highlight
`loop`		`boolean` When `true`, keyboard navigation will loop from last item to first, and vice versa.
`by`		`string \| (a: Locale<any>[], b: Locale<any>[]): boolean` Use this to compare objects by a particular field, or pass your own comparison function for complete control over how objects are compared.
`autofocus`		`boolean`
`defaultValue`		`string` The value of the SelectMenu when initially rendered. Use when you do not need to control the state of the SelectMenu.
`multiple`		`false` Whether multiple options can be selected or not.
`required`		`boolean`
`id`		`string`
`placeholder`		`string` The placeholder text when the select is empty.
`searchInput`	`true`	`boolean \| Omit<InputProps<AcceptableValue, ModelModifiers>, "modelValue" \| "defaultValue">` Whether to display the search input or not. Can be an object to pass additional props to the input. `{ placeholder: 'Search...', variant: 'none' }` Set `autofocus: false` to prevent the search input from being focused when the menu opens (e.g. to avoid opening the virtual keyboard on touch devices).
`color`	`'primary'`	`"primary" \| "secondary" \| "success" \| "info" \| "warning" \| "error" \| "neutral"`
`variant`	`'outline'`	`"outline" \| "soft" \| "subtle" \| "ghost" \| "none"`
`size`	`'md'`	`"sm" \| "md" \| "xs" \| "lg" \| "xl"`
`clear`	`false`	`false \| false & Partial<Omit<ButtonProps, LinkPropsKeys>>` Display a clear button to reset the model value. Can be an object to pass additional props to the Button.
`content`	`{ side: 'bottom', sideOffset: 8, collisionPadding: 8, position: 'popper' }`	`Omit<ComboboxContentProps, "asChild" \| "as" \| "forceMount"> & Partial<EmitsToProps<DismissableLayerEmits>>` The content of the menu.
`arrow`	`false`	`boolean \| Omit<ComboboxArrowProps, "asChild" \| "as">` Display an arrow alongside the menu. `{ rounded: true }`
`portal`	`true`	`string \| false \| true \| HTMLElement` Render the menu in a portal.
`virtualize`	`false`	`boolean \| { overscan?: number ; estimateSize?: number \| ((index: number) => number) \| undefined; } \| undefined` Enable virtualization for large lists. Note: when enabled, all groups are flattened into a single list due to a limitation of Akar.
`valueKey`	`undefined`	`"code"` When `items` is an array of objects, select the field to use as the value instead of the object itself.
`labelKey`	`'label'`	`"code" \| "name" \| "dir" \| "messages"` When `items` is an array of objects, select the field to use as the label.
`descriptionKey`	`'description'`	`"code" \| "name" \| "dir" \| "messages"` When `items` is an array of objects, select the field to use as the description.
`modelModifiers`		`Omit<ModelModifiers, "lazy">`
`highlight`		`boolean` Highlight the ring color like a focus state.
`fixed`		`boolean` Keep the mobile text size on all breakpoints.
`createItem`	`false`	`boolean \| "always" \| { position?: "top" \| "bottom" ; when?: "always" \| "empty" \| undefined; } \| undefined` Determines if custom user input that does not exist in options can be added.
`filterFields`	`[labelKey]`	`string[]` Fields to filter items by.
`ignoreFilter`	`false`	`boolean` When `true`, disable the default filters, useful for custom filtering (useAsyncData, useFetch, etc.).
`autofocusDelay`		`number`
`avatar`		`AvatarProps` Display an avatar on the left side.
`leading`		`boolean` When `true`, the icon will be displayed on the left side.
`trailing`		`boolean` When `true`, the icon will be displayed on the right side.
`loading`		`boolean` When `true`, the loading icon will be displayed.
`locales`		`Locale<any>[]`
`ui`		{ base?: SlotClass; leading?: SlotClass; leadingIcon?: SlotClass; leadingAvatar?: SlotClass; leadingAvatarSize?: SlotClass; trailing?: SlotClass; trailingIcon?: SlotClass; value?: SlotClass; placeholder?: SlotClass; arrow?: SlotClass; content?: SlotClass; viewport?: SlotClass; group?: SlotClass; empty?: SlotClass; label?: SlotClass; separator?: SlotClass; item?: SlotClass; itemLeadingIcon?: SlotClass; itemLeadingAvatar?: SlotClass; itemLeadingAvatarSize?: SlotClass; itemLeadingChip?: SlotClass; itemLeadingChipSize?: SlotClass; itemTrailing?: SlotClass; itemTrailingIcon?: SlotClass; itemWrapper?: SlotClass; itemLabel?: SlotClass; itemDescription?: SlotClass; input?: SlotClass; focusScope?: SlotClass; trailingClear?: SlotClass; }

Changelog

No recent changes

ColorModeSwitch

A Switch to toggle between light and dark mode.