Skip to content
This repository has been archived by the owner on May 3, 2022. It is now read-only.
/ ss-select Public archive

Stylable searchable select component for VueJS. This component is renderless so you are free to customize it how you need to!

License

Notifications You must be signed in to change notification settings

MirasMustimov/ss-select

Repository files navigation

ss-select

npm npm npm npm npm

Searchable stylable select component for VueJS. This component is renderless so you can style it how you need to!

Features

  • Renderless
  • Single and multiple mode
  • Filtering
  • Disabling options
  • Keyboard navigation
  • v-model and vuex support
  • No dependencies

Documentation:

Read documentation with examples.

Demo:

Play with it online!

Installation:

npm install ss-select

or

yarn add ss-select

Pull ss-select components in

<script>
    import { SsSelect, SsSelectToggle, SsSelectOption, SsSelectSearchInput } from 'ss-select'

    components: { SsSelect, SsSelectToggle, SsSelectOption, SsSelectSearchInput }
</script>

Basic usage:

<!-- ss-select is the root component. Give it your options and a unique key to track them by. -->
<ss-select v-model="model" :options="options" track-by="id" search-by="name" class="relative">
    <!-- Then create a div so you can resolve data and methods you need from slot scope -->
    <div slot-scope="{ selectedOption, isOpen, $get }">
        <!-- toggle component opens and closes the dropdown -->
        <ss-select-toggle>
            {{ $get(selectedOption, 'name') || 'Select a car' }}
        </ss-select-toggle>

        <!-- Create a div to display options -->
        <div v-show="isOpen" class="absolute min-w-full z-10">
            <!-- search input component is used to filter options -->
            <!-- Be sure to provide search-by prop that will be the key to filter options by -->
            <ss-select-search-input placeholder="Search cars"></ss-select-search-input>

            <!-- Here go options -->
            <ss-select-option v-for="(option, index) in options"
                              :index="index"
                              :value="option">
                {{ option.name }}
            </ss-select-option>
        </div>
    </div>
</ss-select>

License

MIT

About

Stylable searchable select component for VueJS. This component is renderless so you are free to customize it how you need to!

Topics

Resources

License

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published