ColorModeSelect

A Select to switch between system, dark & light mode.

Usage

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

<template>
  <PColorModeSelect />
</template>

Examples

With custom icons

Use the app.config.ts to customize the icon with the pohon.icons property:

app.config.ts

export default defineAppConfig({
  pohon: {
    icons: {
      system: 'i-ph:desktop',
      light: 'i-ph:sun',
      dark: 'i-ph:moon'
    }
  }
})

Use the vite.config.ts to customize the icon with the pohon.icons property:

vite.config.ts

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import pohon from 'pohon-ui/vite'

export default defineConfig({
  plugins: [
    vue(),
    pohon({
      pohon: {
        icons: {
          light: 'i-ph:sun',
          dark: 'i-ph:moon'
        }
      }
    })
  ]
})

API

Props

Prop	Default	Type
`defaultOpen`		`boolean` The open state of the combobox when it is initially rendered. Use when you do not need to control its open state.
`open`		`boolean` The controlled open state of the Combobox. Can be binded with with `v-model:open`.
`trailingIcon`	`appConfig.pohon.icons.chevronDown`	`string \| object` The icon displayed to open the menu.
`color`	`'primary'`	`"primary" \| "secondary" \| "success" \| "info" \| "warning" \| "error" \| "neutral"`
`highlight`		`boolean` Highlight the ring color like a focus state.
`name`		`string` The name of the field. Submitted with its owning form as part of a name/value pair.
`trailing`		`boolean` When `true`, the icon will be displayed on the right side.
`content`	`{ side: 'bottom', sideOffset: 8, collisionPadding: 8, position: 'popper' }`	`AComboboxContentProps & Partial<EmitsToProps<DismissableLayerEmits>>` The content of the menu.
`loading`		`boolean` When `true`, the loading icon will be displayed.
`size`	`'md'`	`"md" \| "xs" \| "sm" \| "lg" \| "xl"`
`avatar`		`PAvatarProps` Display an avatar on the left side.
`variant`	`'outline'`	`"ghost" \| "outline" \| "soft" \| "subtle" \| "none"`
`autofocus`		`boolean`
`disabled`		`boolean` When `true`, prevents the user from interacting with listbox
`leading`		`boolean` When `true`, the icon will be displayed on the left side.
`leadingIcon`		`string \| object` Display an icon on the left side.
`loadingIcon`	`appConfig.pohon.icons.loading`	`string \| object` The icon when the `loading` prop is `true`.
`resetSearchTermOnBlur`	`true`	`boolean` Whether to reset the searchTerm when the Combobox input blurred
`resetModelValueOnClear`		`boolean` When `true` the `modelValue` will be reset to `null` (or `[]` if `multiple`)
`resetSearchTermOnSelect`	`true`	`boolean` Whether to reset the searchTerm when the Combobox value is selected
`highlightOnHover`		`boolean` When `true`, hover over item will trigger highlight
`defaultValue`		null \| string \| number \| bigint \| false \| true \| { [key: string]: any; label?: string \| undefined; description?: string \| undefined; icon?: string \| object \| undefined; avatar?: PAvatarProps \| undefined; chip?: PChipProps \| undefined; type?: "item" \| "label" \| "separator" \| undefined; disabled?: boolean \| undefined; onSelect?: ((event?: Event \| undefined) => void) \| undefined; class?: any; pohon?: Pick<{ 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; }, "item" \| "label" \| "separator" \| "itemLeadingIcon" \| "itemLeadingAvatar" \| "itemLeadingAvatarSize" \| "itemLeadingChip" \| "itemLeadingChipSize" \| "itemTrailing" \| "itemTrailingIcon" \| "itemWrapper" \| "itemLabel" \| "itemDescription"> \| undefined; } 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`	`false`	`boolean \| PInputProps<AcceptableValue>` 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`	`boolean \| 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.
`arrow`	`false`	`boolean \| AComboboxArrowProps` 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) \| undefined; } \| undefined` Enable virtualization for large lists.
`valueKey`	`undefined`	`undefined` When `items` is an array of objects, select the field to use as the value instead of the object itself.
`labelKey`	`'label'`	`string \| number` When `items` is an array of objects, select the field to use as the label.
`descriptionKey`	`'description'`	`string \| number` When `items` is an array of objects, select the field to use as the description.
`modelModifiers`		`Omit<ModelModifiers<PSelectMenuItem>, "lazy">`
`createItem`	`false`	`boolean \| "always" \| { position?: "top" \| "bottom" ; when?: "empty" \| "always" \| 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`
`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

ColorModeImage

An image element with a different source for light and dark mode.

ColorModeSwitch

A switch to toggle between light and dark mode.