single select dropdown with autocomplete

Overview

vue-single-select

simple autocomplete select dropdown component for Vue apps for you!

Demo

Check it out on CodeSandbox

What It Does

vue-single-select provides a simple component for making long, unwieldy select boxes more friendly, like Chosen for jQuery.

How Simple?

This simple

<vue-single-select      
    v-model="fruit" 
    :options="['apple','cherry','banana','pear', 'tomato']"
></vue-single-select>    

What It Does Not Do

Nope no Multi Select. See vue-taggable-select for this.

Vue Taggable Select

Install or Use Via CDN

<div id="app">
    <label>Choose a fruit!</label>
    <vue-single-select
	    v-model="fruit"
	    :options="fruits"
    ></vue-single-select>
</div>
<script src="https://unpkg.com/[email protected]"></script>
<script src="https://unpkg.com/[email protected]"></script>
<script>
 new Vue({
     el:"#app",
     data: {
         fruit: null,
         fruits: ['peach','pear','apple','orange']
     }
 });
</script>

Install Via NPM

$ npm i vue-single-select

Register it

In your component:

import VueSingleSelect from "vue-single-select";
export default {
components: {
     VueSingleSelect
  },
  //...
}

Globally:

import VueSingleSelect from "vue-single-select";
Vue.component('vue-single-select', VueSingleSelect);

Use It

<vue-single-select
        v-model="fruit"
        :options="['apple','banana','cherry','tomato']"
        :required="true"
></vue-single-select>

Use It Again

Specify a custom option label and option value

Here each option refereneces a post title in the posts list in data. The option value references a post id in the same list. Like:

posts: [{title: "ok dude", id: 1}, {title: "awesome dude", id: 2}, ...]

<vue-single-select
        name="maybe"
        placeholder="pick a post"
        you-want-to-select-a-post="ok"
        v-model="post"
        out-of-all-these-posts="makes sense"
        :options="posts"
        a-post-has-an-id="good for search and display"
        option-key="id"
        the-post-has-a-title="make sure to show these"
        option-label="title"
></vue-single-select>

Use It Again

Specify a custom option label.

Here the Option Label references a reply the replies list in data. With a format like:

replies: [{reply: "ok dude"}, {reply: "awesome dude"}, ...]
<vue-single-select
        you-want-to-select-a-reply="yes"
        v-model="reply"
        out-of-all-these-replies="yep"
        :options="replies"
        a-reply-only-has-a-reply="sounds about right"
        option-label="reply"
        seed-an-initial-value="what's seed mean?"
        initial="seed me"
        you-only-want-20-options-to-show="is 20 enough?"
        :max-results="20"
></vue-single-select>

Dont like the Styling?

You can override some of it. Like so:

<vue-single-select
        id="selected-reply"
        name="a_reply"
        option-label="reply"
        v-model="reply"
        :options="replies"
        you-like-huge-dropdowns="1000px is long!"
        max-height="1000px"
        you-love-bootstrap="yes!!"
        :classes="{
                    input: 'form-control',
                    wrapper: 'form-group',
                    icons: 'glyphicon',
                    required: 'required'
                    active: 'active',
                    dropdown: 'dropdown'
        }"
></vue-single-select>

Then all you need to do is provide some class definitions like so:

.form-control {
    color: pink;
    width: 10000px;
    _go: nuts;
}
.glyphicon {
    display:none;
}
.form-group {
    background-color: pink;
    font-size: 16px;
}

.required {
    color: #721c24;
    background-color: #f8d7da;
    border-color: #f5c6cb;
}
.dropdown: {
    color: violet;
}
.active {
    background-color: lemonchiffon;
}

Note: Bootstrap 3 Users May want to increase the size of the icons.

If so do this:

.icons svg {
    height: 1em;
    width: 1em;
}

See defaults below.

Dont like the styling at all?

Use the slots option to really mix it up.

This is a little advanced, but it's not too hard. Take a look:

<single-select
    option-label="title"
    v-model="thread" 
    :options="threads" 
    max-height="300px"
    >
        <template slot="option" slot-scope="{option, idx}">
            <div style="display:flex;padding: 2px;font-size: 2rem;"
                :class="idx % 2 ? 'emoji-happy' : 'emoji-sad'"
                :style="idx % 2 ? 'color:red' : 'color:blue'">
                <span style="margin-left: 1rem;">
                    {{idx}}</span>
                <span style="margin-left: 1rem;">
                    {{option.title}}</span>
            </div>
        </template>
    </single-select>
.emoji-happy::before {
    content:"\1F600"
}
.emoji-sad::before {
    content:"\1F622"
}

The key is the template element.

Here I give you the option and the current index. From there you can add html, add exta info, or a smiley face.

And here you go:

Image of Smiley

Kitchen Sink

Meh, see props below.

Why vue-single-select is better

  1. It handles custom label/value props for displaying options.

    Other select components require you to conform to their format. Which often means data wrangling.

  2. It's easier on the DOM.

    Other components will load up all the options available in the select element. This can be heavy. vue-single-select makes an executive decision that you probably will not want to scroll more than N options before you want to narrow things down a bit. You can change this, but the default is 30.

  3. Snappy Event Handling

    • up and down arrows for selecting options
    • enter to select first match
    • remembers selection on change
    • hit the escape key to, well, escape
  4. Lightweight

    • Why are the other packages so big and actually have dependencies?
  5. It works for regular 'POST backs' to the server.

    If you are doing a regular post or just gathering the form data you don't need to do anything extra to provide a name and value for the selected option.

  6. Mine just looks nicer

  7. It's simple!!

Available Props:

There are more props than I'd like. But I needed them so you might too.

    props: {
    value: {
      required: true
    },
    // Give your element a name.
    // Good for doing a POST
    name: {
      type: String,
      required: false,
      default: () => ""
    },
    // Your list of things for the select
    options: {
      type: Array,
      required: false,
      default: () => []
    },
    // Tells vue-single-select what key to use
    // for generating option labels
    optionLabel: {
      type: String,
      required: false,
      default: () => null
    },
    // Tells vue-single-select the value
    // you want populated in the select for the 
    // input
    optionKey: {
      type: String,
      required: false,
      default: () => null
    },
    placeholder: {
      type: String,
      required: false,
      default: () => "Search Here"
    },
    maxHeight: {
      type: String,
      default: () => "220px",
      required: false
    },
    // Give your input an html element id
    inputId: {
      type: String,
      default: () => "single-select",
      required: false
    },
    //Customize the styling by providing 
    //these FIVE custom style definitions.
    classes: {
      type: Object,
      required: false,
      default: () => {
        return {
          wrapper: "single-select-wrapper",
          input: "search-input",
          icons: "icons",
          required: "required",
          activeClass: 'active',
          dropdown: 'dropdown'
        };
      }
    },
    // Seed search text with initial value
    initial: {
      type: String,
      required: false,
      default: () => null
    },
    // Disable it!
    disabled: {
      type: Boolean,
      required: false,
      default: () => false
    },
    // Make it required
    required: {
      type: Boolean,
      required: false,
      default: () => false
    },
    // Number of results to show at a time
    maxResults: {
      type: Number,
      required: false,
      default: () => 30
    },
    // meh...
    tabindex: {
      type: String,
      required: false,
      default: () => {
        return "";
      }
    },
    // Tell vue-single-select what to display
    // as the selected option
    getOptionDescription: {
      type: Function,
      default: function (option) {
        if (this.optionKey && this.optionLabel) {
          return option[this.optionKey] + " " + option[this.optionLabel];
        }
        if (this.optionLabel) {
          return option[this.optionLabel];
        }
        if (this.optionKey) {
          return option[this.optionKey];
        }
            return option;
      }
    },
    // Use this to actually give vue-single-select
    // a value for doing a POST
    getOptionValue: {
      type: Function,
      default: function (option) {
        if (this.optionKey) {
          return option[this.optionKey];
        }
        
        if (this.optionLabel) {
          return option[this.optionLabel];
        }

        return option;
      }
    },
    //Default filtering, provide your own for fun
    //Like startsWith instead of includes
    filterBy: {
      type: Function,
      default: function (option) {
        if (this.optionLabel && this.optionKey) {
          return (
            option[this.optionLabel]
              .toString()
              .toLowerCase()
              .includes(this.searchText.toString().toLowerCase()) ||
              option[this.optionKey]
              .toString()
              .toLowerCase()
              .includes(this.searchText.toString().toLowerCase())
          )
        }
        
        if (this.optionLabel) {
          return option[this.optionLabel]
            .toString()
            .toLowerCase()
            .includes(this.searchText.toString().toLowerCase())
        }
        
        if (this.optionKey) {
          option[this.optionKey]
            .toString()
            .toLowerCase()
            .includes(this.searchText.toString().toLowerCase())
        }
        
        return option
          .toString()
          .toLowerCase()
          .includes(this.searchText.toString().toLowerCase())
      }
    }
  }

Q&A

Q. What about Ajax?

A. Good question. Why aren't you passing data in as a prop? Seriously, this is just a widget why does it need knowledge of it's data source?

Q. How do I change how items are filtered?

A. Easy. See prop above, matchingOptions. Just override it with your own method as a prop.

Q. What about Templating?

A. What about it? Just use the new scoped slots!

Q. What about Multiple Selects?

A. Nope not found here. See vue-taggable-select

Q. Can I trust this?

A. Yep. It's backed by tests using jest and vue test utils.

Comments
  • How to make action like a stanrart html select?

    How to make action like a stanrart html select?

    For example clear HTML: <select name="example"> <option value="val1">peach</option> <option value="val2">pear</option> </select> when i select peach, and submit form, i have example=val1. When i use this component, and select peach i have 'peach' in fruit. How can i receive 'val1' in fruit?

    opened by alexdpts 18
  • Only show matches beginning with the typed characters

    Only show matches beginning with the typed characters

    Hello Rob, Thank you for writing this great component. I was wondering if it's somehow possible to only show matches that begin with the characters typed in the search box?

    Example: If I type the letter M in the search box I will only see results beginning with the letter M - not all the results that have an M in them.

    Another example: If I type 'ea' in the search box, I will see the results 'earring', 'ear', 'earth', but not the results 'pear', 'peach', 'bear' etc..

    Thanks again..

    /Morten

    opened by vellebelle 10
  • Show value from update

    Show value from update

    Hello, Thank you, it's a very good template I used to fill a field. The problem is when I want to use again the template to show the new value I created to update it by example. I don't find how to return my value, it always show the placeholder

              <vue-single-select
                                v-model="oauthclient.user_id"
                                :options="users"
                                :required="false"
                                option-label="name"
                        ></vue-single-select>
    

    How can I do that : If my oauthclient.user_id is not null, show my option-label from value. Else show the placeholder ?

    Regards

    Fabien

    opened by fabien44300 10
  • How to bind v-model

    How to bind v-model

    Hi Rob, First of all, thank you for this package. I am using Laravel and want to replace all select menus with your component. Please find my code to assign a user to a post: edit.blade.php

    <vue-single-select
            name="user_id"
            v-model="post.user_id"
            placeholder="Select user"
            :options="{!! $users !!}"
            option-key="id"
            option-label="name"
    ></vue-single-select>
    

    app.js

    import VueSingleSelect from "vue-single-select";
    Vue.component('vue-single-select', VueSingleSelect);
    

    The search box is working, but I get this error in the console: Property or method "user" is not defined on the instance but referenced during render. I would like to bind the current $post->user_id to the component when editing (and a null value when creating a new post).

    Hope that makes sense to you.

    opened by jozeflambrecht 7
  • Browser autocomplete problem

    Browser autocomplete problem

    Hello, Thank you, it's a very good vue-component! But when I put settings autocomplete="off", Chrome still fills in the saved value. The block with value overlaps list options, and user can't choose option when he enters the text

    image

    w3xs2z7

    opened by lasthead 7
  • Invalid prop: type check failed for prop

    Invalid prop: type check failed for prop "options". Expected Array, got String with value ""

    [Vue warn]: Invalid prop: type check failed for prop "options". Expected Array, got String with value "".

    found in

    ---> at VueSingleSelect.vue

    Select is <vue-single-select v-model="invoiceForm.customer" :options="ajaxCustomers" option-label="FullName" :max-results="1500" ></vue-single-select>

    And Data is

    ajaxCustomers=[ 0: {FullName: "Jimmy11", ListID: "80000001-1428315359", BillAddress_Addr1: "RocketDrop-HK",…} 1: {FullName: "Tom Cruise", ListID: "80000001-1470054554", BillAddress_Addr1: "Hollywood",…} 2: {FullName: "Zeshan", ListID: "80000001-1493279891", BillAddress_Addr1: "Islamabad",…} 3: {FullName: "JimmyShah", ListID: "80000002-1428329683", BillAddress_Addr1: "", BillAddress_Addr2: "",…} 4: {FullName: "Asim", ListID: "80000002-1479745328", BillAddress_Addr1: "NXB", BillAddress_Addr2: "0",…} 5: {FullName: "Jalil Khan Ch", ListID: "80000002-1486116870", BillAddress_Addr1: "Nextbridge",…} 6: {FullName: "Ebay", ListID: "80000002-1496389315", BillAddress_Addr1: "0", BillAddress_Addr2: "0",…} 7: {FullName: "Ebay", ListID: "80000002-1538141362", BillAddress_Addr1: "0", BillAddress_Addr2: "0",…} 8: {FullName: "Adnan", ListID: "80000003-1479811858", BillAddress_Addr1: "Adnan Int",…} 9: {FullName: "zeeshan", ListID: "80000004-1450176881", BillAddress_Addr1: "RocketDrop-UAE",…} 10: {FullName: "Abubakar", ListID: "80000004-1479814506", BillAddress_Addr1: "0", BillAddress_Addr2: "0",…} 11: {FullName: "eBay corp", ListID: "80000004-1496399973", BillAddress_Addr1: "0", BillAddress_Addr2: "0",…} 12: {FullName: "Customer 1", ListID: "80000005-1493293313", BillAddress_Addr1: "0", BillAddress_Addr2: "0",…} 13: {FullName: "eBay", ListID: "80000006-1493385335", BillAddress_Addr1: "0", BillAddress_Addr2: "0",…} 14: {FullName: "eBay corp", ListID: "80000008-1494413649", BillAddress_Addr1: "0", BillAddress_Addr2: "0",…} ]

    I am unable to resolve this. there is no String value. array is provided.

    opened by damisadam 4
  • Multiple Option labels?

    Multiple Option labels?

    Hey there, Great plugin, thank you for your hard work. I have a question,

    I have a drop down which is listing multiple users, they are in an array, with first name, last name and email all separate.

    I want to make the option label; So that the label is all three, instead of one.

    I used your template slot to make it show on the dropdown, but is there any way to allow it to come up on the label too? Thanks!

    opened by eliaschampi 4
  • How to call a function on value change.

    How to call a function on value change.

    <vue-single-select placeholder="Search on-hold" v-model="selected" @change="getDetail()" :options="ajaxInvoice" option-label="title" >

    I want to call a function on value change. Please share which method I use for this

    opened by damisadam 3
  • non-unique id #single-select and #input_id

    non-unique id #single-select and #input_id

    Hello, I use 2 vue-single-select in the same Vue but each vue-single-select keep the same id :

    [DOM] Found 2 elements with non-unique id #single-select <input data-v-27213e1d id=​"single-select"....>

    So, I overrided inputId :

     <vue-single-select
     id="scope_webservice_update"
    inputId="scope_webservice_update_inputId"
    

    ........

    It is ok :

    But on clicking to the single-vue-select to choose an option in the view , it's strange, but the id automatically change to "inputId" and override "scope_webservice_update_inputId"

    DOM] Found 2 elements with non-unique id #inputId:

    Fabien

    opened by fabien44300 3
  • Normal select behaviour

    Normal select behaviour

    Hi there,

    Can I use this somehow as a replacement for a normal html select? When I now use this component with v-model I have no value selected on initial load and can only change values by erasing the previous value. I just want a dropdown based on some options and be able to replace one option with the other.

    opened by Evertvdw 2
  • cannot enter new value in the only takes from what is in the list

    cannot enter new value in the only takes from what is in the list

    if I enter a text that doesnt exist in the list, on loose focus it goes away so I wonder how we get the value of the text enter, because the value v-model: storeValue will not store the value , so I implemented that if user enter Enter key it should append to the list and set as well but even using jQuery I am not able to get anything:

    $(document).ready(function(){
        $("#inputPatientName").on("keyup", function(e){
            if (e.keyCode == 13) {
                console.log("You hit enter ?" + $('inputPatientName').val());
            }
        });
    });
    

    in the above function $('inputPatientName').val() returns undefined. if I use vue approach to read the value from storeValue that too says undefined.

    Please help me with this

    opened by sanfx 2
  • Bump css-what from 2.1.0 to 2.1.3

    Bump css-what from 2.1.0 to 2.1.3

    Bumps css-what from 2.1.0 to 2.1.3.

    Commits

    Dependabot compatibility score

    Dependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting @dependabot rebase.


    Dependabot commands and options

    You can trigger Dependabot actions by commenting on this PR:

    • @dependabot rebase will rebase this PR
    • @dependabot recreate will recreate this PR, overwriting any edits that have been made to it
    • @dependabot merge will merge this PR after your CI passes on it
    • @dependabot squash and merge will squash and merge this PR after your CI passes on it
    • @dependabot cancel merge will cancel a previously requested merge and block automerging
    • @dependabot reopen will reopen this PR if it is closed
    • @dependabot close will close this PR and stop Dependabot recreating it. You can achieve the same result by closing it manually
    • @dependabot ignore this major version will close this PR and stop Dependabot creating any more for this major version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this minor version will close this PR and stop Dependabot creating any more for this minor version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this dependency will close this PR and stop Dependabot creating any more for this dependency (unless you reopen the PR or upgrade to it yourself)
    • @dependabot use these labels will set the current labels as the default for future PRs for this repo and language
    • @dependabot use these reviewers will set the current reviewers as the default for future PRs for this repo and language
    • @dependabot use these assignees will set the current assignees as the default for future PRs for this repo and language
    • @dependabot use this milestone will set the current milestone as the default for future PRs for this repo and language

    You can disable automated security fix PRs for this repo from the Security Alerts page.

    dependencies 
    opened by dependabot[bot] 0
  • Bump shell-quote from 1.6.1 to 1.7.3

    Bump shell-quote from 1.6.1 to 1.7.3

    Bumps shell-quote from 1.6.1 to 1.7.3.

    Release notes

    Sourced from shell-quote's releases.

    v1.7.2

    • Fix a regression introduced in 1.6.3. This reverts the Windows path quoting fix. (144e1c2)

    v1.7.1

    • Fix $ being removed when not part of an environment variable name. (@​Adman in #32)

    v1.7.0

    • Add support for parsing >> and >& redirection operators. (@​forivall in #16)
    • Add support for parsing <( process substitution operator. (@​cuonglm in #15)

    v1.6.3

    • Fix Windows path quoting problems. (@​dy in #34)

    v1.6.2

    • Remove dependencies in favour of native methods. (@​zertosh in #21)
    Changelog

    Sourced from shell-quote's changelog.

    1.7.3

    • Fix a security issue where the regex for windows drive letters allowed some shell meta-characters to escape the quoting rules. (CVE-2021-42740)

    1.7.2

    • Fix a regression introduced in 1.6.3. This reverts the Windows path quoting fix. (144e1c2)

    1.7.1

    • Fix $ being removed when not part of an environment variable name. (@​Adman in #32)

    1.7.0

    • Add support for parsing >> and >& redirection operators. (@​forivall in #16)
    • Add support for parsing <( process substitution operator. (@​cuonglm in #15)

    1.6.3

    • Fix Windows path quoting problems. (@​dy in #34)

    1.6.2

    • Remove dependencies in favour of native methods. (@​zertosh in #21)
    Commits

    Dependabot compatibility score

    Dependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting @dependabot rebase.


    Dependabot commands and options

    You can trigger Dependabot actions by commenting on this PR:

    • @dependabot rebase will rebase this PR
    • @dependabot recreate will recreate this PR, overwriting any edits that have been made to it
    • @dependabot merge will merge this PR after your CI passes on it
    • @dependabot squash and merge will squash and merge this PR after your CI passes on it
    • @dependabot cancel merge will cancel a previously requested merge and block automerging
    • @dependabot reopen will reopen this PR if it is closed
    • @dependabot close will close this PR and stop Dependabot recreating it. You can achieve the same result by closing it manually
    • @dependabot ignore this major version will close this PR and stop Dependabot creating any more for this major version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this minor version will close this PR and stop Dependabot creating any more for this minor version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this dependency will close this PR and stop Dependabot creating any more for this dependency (unless you reopen the PR or upgrade to it yourself)
    • @dependabot use these labels will set the current labels as the default for future PRs for this repo and language
    • @dependabot use these reviewers will set the current reviewers as the default for future PRs for this repo and language
    • @dependabot use these assignees will set the current assignees as the default for future PRs for this repo and language
    • @dependabot use this milestone will set the current milestone as the default for future PRs for this repo and language

    You can disable automated security fix PRs for this repo from the Security Alerts page.

    dependencies 
    opened by dependabot[bot] 0
  • Bump url-parse from 1.4.3 to 1.5.10

    Bump url-parse from 1.4.3 to 1.5.10

    Bumps url-parse from 1.4.3 to 1.5.10.

    Commits
    • 8cd4c6c 1.5.10
    • ce7a01f [fix] Improve handling of empty port
    • 0071490 [doc] Update JSDoc comment
    • a7044e3 [minor] Use more descriptive variable name
    • d547792 [security] Add credits for CVE-2022-0691
    • ad23357 1.5.9
    • 0e3fb54 [fix] Strip all control characters from the beginning of the URL
    • 61864a8 [security] Add credits for CVE-2022-0686
    • bb0104d 1.5.8
    • d5c6479 [fix] Handle the case where the port is specified but empty
    • Additional commits viewable in compare view

    Dependabot compatibility score

    Dependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting @dependabot rebase.


    Dependabot commands and options

    You can trigger Dependabot actions by commenting on this PR:

    • @dependabot rebase will rebase this PR
    • @dependabot recreate will recreate this PR, overwriting any edits that have been made to it
    • @dependabot merge will merge this PR after your CI passes on it
    • @dependabot squash and merge will squash and merge this PR after your CI passes on it
    • @dependabot cancel merge will cancel a previously requested merge and block automerging
    • @dependabot reopen will reopen this PR if it is closed
    • @dependabot close will close this PR and stop Dependabot recreating it. You can achieve the same result by closing it manually
    • @dependabot ignore this major version will close this PR and stop Dependabot creating any more for this major version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this minor version will close this PR and stop Dependabot creating any more for this minor version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this dependency will close this PR and stop Dependabot creating any more for this dependency (unless you reopen the PR or upgrade to it yourself)
    • @dependabot use these labels will set the current labels as the default for future PRs for this repo and language
    • @dependabot use these reviewers will set the current reviewers as the default for future PRs for this repo and language
    • @dependabot use these assignees will set the current assignees as the default for future PRs for this repo and language
    • @dependabot use this milestone will set the current milestone as the default for future PRs for this repo and language

    You can disable automated security fix PRs for this repo from the Security Alerts page.

    dependencies 
    opened by dependabot[bot] 0
  • Bump follow-redirects from 1.5.8 to 1.14.8

    Bump follow-redirects from 1.5.8 to 1.14.8

    Bumps follow-redirects from 1.5.8 to 1.14.8.

    Commits
    • 3d81dc3 Release version 1.14.8 of the npm package.
    • 62e546a Drop confidential headers across schemes.
    • 2ede36d Release version 1.14.7 of the npm package.
    • 8b347cb Drop Cookie header across domains.
    • 6f5029a Release version 1.14.6 of the npm package.
    • af706be Ignore null headers.
    • d01ab7a Release version 1.14.5 of the npm package.
    • 40052ea Make compatible with Node 17.
    • 86f7572 Fix: clear internal timer on request abort to avoid leakage
    • 2e1eaf0 Keep Authorization header on subdomain redirects.
    • Additional commits viewable in compare view

    Dependabot compatibility score

    Dependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting @dependabot rebase.


    Dependabot commands and options

    You can trigger Dependabot actions by commenting on this PR:

    • @dependabot rebase will rebase this PR
    • @dependabot recreate will recreate this PR, overwriting any edits that have been made to it
    • @dependabot merge will merge this PR after your CI passes on it
    • @dependabot squash and merge will squash and merge this PR after your CI passes on it
    • @dependabot cancel merge will cancel a previously requested merge and block automerging
    • @dependabot reopen will reopen this PR if it is closed
    • @dependabot close will close this PR and stop Dependabot recreating it. You can achieve the same result by closing it manually
    • @dependabot ignore this major version will close this PR and stop Dependabot creating any more for this major version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this minor version will close this PR and stop Dependabot creating any more for this minor version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this dependency will close this PR and stop Dependabot creating any more for this dependency (unless you reopen the PR or upgrade to it yourself)
    • @dependabot use these labels will set the current labels as the default for future PRs for this repo and language
    • @dependabot use these reviewers will set the current reviewers as the default for future PRs for this repo and language
    • @dependabot use these assignees will set the current assignees as the default for future PRs for this repo and language
    • @dependabot use this milestone will set the current milestone as the default for future PRs for this repo and language

    You can disable automated security fix PRs for this repo from the Security Alerts page.

    dependencies 
    opened by dependabot[bot] 0
  • vue3

    vue3

    $ npm i vue-single-select -S
    npm ERR! code ERESOLVE
    npm ERR! ERESOLVE unable to resolve dependency tree
    npm ERR! 
    npm ERR! While resolving: [email protected]
    npm ERR! Found: [email protected]
    npm ERR! node_modules/vue
    npm ERR!   [email protected]"^3.2.25" from the root project
    npm ERR! 
    npm ERR! Could not resolve dependency:
    npm ERR! peer [email protected]"2.x" from [email protected]
    npm ERR! node_modules/vue-single-select
    npm ERR!   [email protected]"*" from the root project
    npm ERR! 
    npm ERR! Fix the upstream dependency conflict, or retry
    npm ERR! this command with --force, or --legacy-peer-deps
    npm ERR! to accept an incorrect (and potentially broken) dependency resolution.
    npm ERR! 
    npm ERR! See /home/user/.npm/reresolve-report.txt for a full report.
    
    npm ERR! A complete log of this run can be found in:
    npm ERR!     /home/user/.npm/_logs/2021-12-20T12_25_28_885Z-debug.log
    
    
    opened by vinnitu 0
Owner
Rob Rogers
@Jebus
Rob Rogers
Super awesome select dropdown vue.js component.

v-super-select An accessible and customizable select/drop down component that features searching, grouping, and virtual scrolling. Try out the demo sa

Will 7 Mar 31, 2022
Select with autocomplete, slots, bootstrap and material design themes.

The current version is 3.x, if you are looking for 2.x, you can find it here (also, see breaking changes). Flexible select Demo + Documentation Featur

Илья 239 Nov 18, 2022
stf vue select - most flexible and customized select

stf vue select VUE2 stf vue select - most flexible and customized select For detailed explanation on how things work, checkout the DEMO install # inst

Stfalcon LLC 62 Dec 22, 2021
Select & Multi Select implementations for Vue, focused especially on implementing accessibility best practices

This entire repo is very much in an alpha state, and should currently be used only within internal Politico projects, as props / events / classes remain fluid. However, we are working towards a 1.0.0 release, and want to capture our relevant bugs fixed during that process.

POLITICO 11 Mar 14, 2022
Lightweight and mighty select component like Chosen and Select 2 done the Vue way.

@desislavsd/vue-select Lightweight and mighty select component like Chosen and Select 2 done the Vue way. Demos & Docs License MIT License Copyright (

null 25 Sep 12, 2022
This component gives you a multi/single select with the power of Vuejs components.

This component gives you a multi/single select with the power of Vuejs components. Demo and doc site vue-multi-select https://github.com/IneoO/vue-mul

Valère 95 Apr 20, 2022
Vue 3 multiselect component with single select, multiselect and tagging options.

Vue 3 Multiselect Sponsors Other libraries @vueform/slider - Vue 3 slider component with multihandles, tooltips merging and formatting. @vueform/toggl

Vueform 541 Nov 21, 2022
Everything you wish the HTML select element could do, wrapped up into a lightweight, extensible Vue component.

vue-select Everything you wish the HTML select element could do, wrapped up into a lightweight, zero dependency, extensible Vue component. Vue Selec

Jeff Sagal 4.4k Nov 30, 2022
Universal select/multiselect/tagging component for Vue.js

vue-multiselect Probably the most complete selecting solution for Vue.js 2.0, without jQuery. Documentation Visit: vue-multiselect.js.org Sponsors Gol

Damian Dulisz 6.3k Nov 25, 2022
A multi-select component with nested options support for Vue.js

vue-treeselect A multi-select component with nested options support for Vue.js Features Single & multiple select with nested options support Fuzzy mat

Fangzhou Li 2.6k Nov 26, 2022
A better way to display select boxes when using `v-for` on objects.

vue-dropdowns A better way to handle v-for on objects. No special dependencies, no jquery, no bootstrap, just VueJS and CSS goodness. Demo Demo - http

Mike Rodham 93 Nov 16, 2022
Custom select component using Vue.JS

advanced-select What's this Component to render a "select" with advanced interactions (search, select/deselect all, etc) for websites built with Vue a

ENA 15 Nov 24, 2022
A vue version of bootstrap select

@alfsnd/vue-bootstrap-select A vue version of bootstrap select Demo Install npm install @alfsnd/vue-bootstrap-select --save Usage import VSelect from

Luis Sandoval 47 Apr 6, 2022
A Vue.js search select component

vue-search-select A Vue.js search select component with NO dependencies. CSS borrowed from https://github.com/Semantic-Org Version 2.x Support Vue.js

JungJoo Seo 347 Aug 31, 2022
Simple multi-select component with items displayed in a table like UI

Vue GridMultiselect Simple multi-select component with items displayed in a table like UI Table of Contents ?? Installation ?? Introduction ?? Basic U

Milos Protic 39 Jul 10, 2022
A component for Vue.js to select double-sided data.

Vue Select Sides A component for Vue.js to select double-sided data. The customer can select one or more items and ship them from side to side. Values

Júlio Rosseti 71 Nov 11, 2022
Vue component that transforms overwhelming select boxes into something fancy, simple and user-friendly. It is similar to Selectize, Chosen, Select2, etc. However it was built using Vue.js only ;)

?? _Fireselect_ Vue component that transforms overwhelming select boxes into something fancy, simple and user-friendly. It is similar to Selectize, Ch

Firework 51 Jul 23, 2020
Universal select/multiselect/tagging component for Vue.js

vue-multiselect Probably the most complete selecting solution for Vue.js 2.0, without jQuery. Documentation Visit: vue-multiselect.js.org Sponsors Gol

Damian Dulisz 6.3k Nov 26, 2022
Stylable searchable select component for VueJS. This component is renderless so you are free to customize it how you need to!

Please note that this package is still under active development. We encourage everyone to try it and give feedback. ss-select Searchable stylable sele

Miras Mustimov 26 Sep 19, 2022