1.0.3 • Published 1 year ago

vuenilla-combobox v1.0.3

Weekly downloads
-
License
BSD-3-Clause
Repository
github
Last release
1 year ago

vuenilla-combobox

A vue 3 combobox that inherits the styles from your style system of choice. Some assembly required.

Usage

<script setup>
import { VuenillaCombobox } from 'vuenilla-combobox'
import 'vuenilla-combobox/dist/style.css'
</script>

<template>
  <VuenillaCombobox
    label="Pokemon"
    placeholder="🔎 Pokemon..."
    is-label-hidden
    :options="options"
  />
</template>

<style>
:root {
  --vue-combobox-background-color: #1c1b22;
  --vue-combobox-selected-background-color: #fff;
  --vue-combobox-font-color: var(--vue-combobox-selected-background-color);
  --vue-combobox-font-selected-color: var(--vue-combobox-background-color);
  --vue-combobox-border-radius: 0.5rem;
}
</style>

Public Properties

Public properties available to customize the combobox.

propertytyperequireddefaultexampledescription
optionsArrayYesn/a[{ label: 'bulbasaur', value: '1' }]The options to be used in the combobox
labelStringYesn/aSearchThe label used for both the display label and the aria label
placeholderStringNo🔎 Search...🔎 Search...The placeholder text for the combobox input
isLabelHiddenBooleanNofalsetrueWhether the display label should be hidden or not
maxDisplayRowsNumberNo1010How many items can be shown at once in the combobox? Regardless of how many options there are

CSS Properties

Assign values to these CSS Properties in order to share your styles with the combobox.

propertydescription
--vue-combobox-font-colorset the color for the combobox
--vue-combobox-background-colorset the background color for the combobox
--vue-combobox-border-radiusset the border radius for the combobox
--vue-combobox-font-selected-colorset the font color when a list item is selected and hovered
--vue-combobox-selected-background-colorset the background color when a list item is selected and hovered
1.0.3

1 year ago

1.0.2

1 year ago

1.0.1

1 year ago

1.0.0

1 year ago

0.0.6

1 year ago

0.0.5

1 year ago

0.0.4

1 year ago

0.0.3

1 year ago

0.0.2

1 year ago

0.0.1

1 year ago