@stanislav-ernst/vue-bootstrap-select NPM

Vue Bootstrap Select Dropdown

A simple Vue.js 3 dropdown-select component project with an integrated search bar, based on Bootstrap CSS. This project provides a user-friendly dropdown with support for arrays, objects and dynamic configurations.

Overview

The Vue Bootstrap Select Dropdown is a component-based solution inspired by the original bootstrap select. This modern Vue.js version offers a lightweight, flexible, and extendable dropdown component.

This project is a fork from the original Vue.js 2 Sandalf/vue-bootstrap-select project which is no longer maintained.

!IMPORTANT This component is no longer actively developed or maintained. However, you are welcome to create a merge request or fork this project to customize it as needed.

✨ Features:

Searchable: Includes a search field for easier option filtering.
Highly customizable: Supports various data types (arrays or objects of strings).
Reactive: Works seamlessly with v-model directives for data binding.
Accessibility: Supports disabled options and user-friendly selection.
Easy integration: Built on Vue 3 and compatible with Bootstrap CSS.

Requirements

To use this component, the following requirements must be met:

Vue.js 3
Node.js 20.15.1 for installation
Bootstrap CSS 4 or 5 for styling

Installation

Install the package via npm:

npm install @stanislav-ernst/vue-bootstrap-select --save

Including styles: In addition to JavaScript, you'll need to import the styles:

import "@stanislav-ernst/vue-bootstrap-select/dist/vue-bootstrap-select.css";

Quick Usage

Example with an Array of Objects

Integrate the component into your Vue app:

import VueBootstrapSelect from "@stanislav-ernst/vue-bootstrap-select";

export default {
    name: "App",
    components: {
        VueBootstrapSelect,
    },
    data() {
        return {
            options: [
                { value: 1, text: "Option 1" },
                { value: 2, text: "Option 2" },
            ],
            selectedValue: null,
        };
    },
};

Include the component in your template:

<VueBootstrapSelect :options="options" v-model="selectedValue" />

Configuration & Properties

Available Properties

Property	Description	Type	Default Value	Acceptable Values
`options`	List of dropdown values.	Array	`[]`	Strings or objects
`searchable`	Enables search mode.	Boolean	`false`	`true`, `false`
`showDefaultOption`	Sets the select title is set as an option.	Boolean	`false`	`true`, `false`
`disabled`	Disables the dropdown.	Boolean	`false`	`true`, `false`
`disabledProp`	Defines a property to disable specific options. If an option has this prop set to a truthy value it will disable the option.	String	`'disabled'`	-
`labelNotFound`	Text displayed when no option is found in the search results.	String	`'No results matched'`	-
`labelSearchPlaceholder`	Placeholder text for the search field.	String	`'Search'`	-
`textProp`	Attribute of an object used as the displayed text value (for object arrays).	String	`'text'`	-
`valueProp`	Attribute of an object used as the corresponding value (for object arrays).	String	`'value'`	-
`labelTitle`	Text displayed when no option is selected and `showDefaultOption` is not set.	String	`'Nothing selected'`	-
`descriptionProp`	Defines the keys used to show additional description for options.	Array	`["description"]`	-
`modelValue`	The current value of the dropdown, bound with v-model, and synchronized with the selected option.	Object, String, Number	`null`	-

Examples

Using an Array of Strings

<VueBootstrapSelect :options="['Option A', 'Option B']" />

Using an Array of Objects with Custom Values

<VueBootstrapSelect
    :options="[{ value: 1, text: 'Option A' }, { value: 2, text: 'Option B' }]"
/>

Development

Run Dev Server:

To run the project locally:

npm run serve

Local Development Environment:

This project has been tested with the following versions:

Node.js: 20.x
Vue.js: 3.x
NPM: 10.x

Component Preview

Example Component Implementations:

Array of Strings: Create simple dropdown menus with string-based values.
Array of Objects: Enable object-based selections with custom labels and values.

Code Examples:

<VueBootstrapSelect
    :options="['Apple', 'Banana', 'Grapes']"
    v-model="fruit"
    :searchable="true"
/>

<VueBootstrapSelect
    :options="[{ value: 1, text: 'German' }, { value: 2, text: 'English' }]"
    v-model="language"
    :searchable="true"
    :disabled="false"
/>

Compatibility and Styles

This component uses SCSS for styles. To ensure proper appearance, include the required Bootstrap CSS styles:

npm install bootstrap

Import Bootstrap in your project:

import "bootstrap/dist/css/bootstrap.min.css";

Contributing

We welcome contributions! Please open pull requests or issues if you find bugs or have improvement suggestions.

Fork the repository.
Create a branch for your changes.
Test changes thoroughly in a development environment.
Open a pull request.

License

This project is licensed under the MIT License.

npm package vue bootstrap select alfsnd

1 year ago

1 year ago

1 year ago