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';
import { ref } from 'vue';

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 * as locales from 'pohon-ui/locale';

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

<template>
  <PLocaleSelect
    :model-value="locale"
    :locales="Object.values(locales)"
    @update:model-value="setLocale($event)"
  />
</template>

You can use it with Vue i18n:

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

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

<template>
  <PLocaleSelect
    :model-value="locale"
    :locales="Object.values(locales)"
    @update:model-value="setLocale($event)"
  />
</template>

API

Props

Prop	Default	Type
`modelValue*`		`string`
`locales`		`PLocale<any>[]`
`name`		`string` The name of the field. Submitted with its owning form as part of a name/value pair.
`placeholder`		`string` The placeholder text when the select is empty.
`size`	`'md'`	`"md" \| "xs" \| "sm" \| "lg" \| "xl"`
`id`		`string`
`color`	`'primary'`	`"primary" \| "secondary" \| "success" \| "info" \| "warning" \| "error" \| "neutral"`
`variant`	`'outline'`	`"outline" \| "soft" \| "subtle" \| "ghost" \| "none"`
`autofocusDelay`		`number`
`defaultValue`		`string` The value of the SelectMenu when initially rendered. Use when you do not need to control the state of the SelectMenu.
`modelModifiers`		`Omit<ModelModifiers, "lazy">`
`icon`		`string \| object` Display an icon based on the `leading` and `trailing` props.
`avatar`		`PAvatarProps` Display an avatar on the left side.
`leadingIcon`		`string \| object` Display an icon on the left side.
`trailingIcon`	`appConfig.pohon.icons.chevronDown`	`string \| object` The icon displayed to open the menu.
`loadingIcon`	`appConfig.pohon.icons.loading`	`string \| object` The icon when the `loading` prop is `true`.
`by`		`string \| (a: PLocale<any>[], b: PLocale<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.
`multiple`		`false` Whether multiple options can be selected or not.
`searchInput`	`true`	`boolean \| PInputProps<AcceptableValue, ModelModifiers>` Whether to display the search input or not. Can be an object to pass additional props to the input. `{ placeholder: 'Search...', variant: 'none' }`
`selectedIcon`	`appConfig.pohon.icons.check`	`string \| object` The icon displayed when an item is selected.
`clear`	`false`	`false \| false & Partial<Omit<PButtonProps, PLinkPropsKeys>>` Display a clear button to reset the model value. Can be an object to pass additional props to the Button.
`clearIcon`	`appConfig.pohon.icons.close`	`string \| object` The icon displayed in the clear button.
`content`	`{ side: 'bottom', sideOffset: 8, collisionPadding: 8, position: 'popper' }`	`AAutocompleteContentProps & Partial<EmitsToProps<DismissableLayerEmits>>` The content of the menu.
`arrow`	`false`	`boolean \| AAutocompleteArrowProps` Display an arrow alongside the menu.
`portal`	`true`	`string \| false \| true \| HTMLElement` Render the menu in a portal.
`virtualize`	`false`	`boolean \| { overscan?: number; estimateSize?: number \| ((index: number) => number); }` Enable virtualization for large lists.
`valueKey`	`'code'`	`"code"` When `items` is an array of objects, select the field to use as the value instead of the object itself.
`labelKey`	`'name'`	`"name" \| "code" \| "dir" \| "messages"` When `items` is an array of objects, select the field to use as the label.
`descriptionKey`	`'description'`	`"name" \| "code" \| "dir" \| "messages"` When `items` is an array of objects, select the field to use as the description.
`createItem`	`false`	`boolean \| "always" \| { position?: "top" \| "bottom"; when?: "empty" \| "always"; }` Determines if custom user input that does not exist in options can be added.
`filterFields`	`[labelKey]`	`string[]` Fields to filter items by.
`autofocus`		`boolean`
`disabled`		`boolean` When `true`, prevents the user from interacting with listbox
`required`		`boolean`
`highlight`		`boolean` Highlight the ring color like a focus state.
`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.
`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.
`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
`ignoreFilter`	`false`	`boolean` When `true`, disable the default filters, useful for custom filtering (useAsyncData, useFetch, etc.).
`pohon`		{ root?: ClassValue; base?: ClassValue; leading?: ClassValue; leadingIcon?: ClassValue; leadingAvatar?: ClassValue; leadingAvatarSize?: ClassValue; trailing?: ClassValue; trailingIcon?: ClassValue; value?: ClassValue; placeholder?: ClassValue; arrow?: ClassValue; content?: ClassValue; viewport?: ClassValue; group?: ClassValue; empty?: ClassValue; label?: ClassValue; separator?: ClassValue; item?: ClassValue; itemLeadingIcon?: ClassValue; itemLeadingAvatar?: ClassValue; itemLeadingAvatarSize?: ClassValue; itemLeadingChip?: ClassValue; itemLeadingChipSize?: ClassValue; itemTrailing?: ClassValue; itemTrailingIcon?: ClassValue; itemWrapper?: ClassValue; itemLabel?: ClassValue; itemDescription?: ClassValue; input?: ClassValue; focusScope?: ClassValue; trailingClear?: ClassValue; }

Changelog

No recent changes

ColorModeSwitch

A switch to toggle between light and dark mode.