SelectMenu for Vuejs, A simple, easier and highly customized menu solution

Overview

v-selectmenu circle ci code coverage npm version npm download JavaScript Style Guide

SelectMenu for Vuejs, A simple, easier and highly customized menu solution

Examples and Documentation

Live Examples on CodePen, more examples and documentation please visit below

The jQuery version: SelectMenu

Features

  • i18n support, provide Chinese, English, Japanese languages
  • regular menu multiple level support
  • multiple group type support
  • advanced menu mode with quick search
  • keyboard to quick navigate in advanced menu mode
  • custom row content render
  • embedded to page
  • mouse right click(contextmenu) or mouse move to call menu

Plugin preview

regular menu

regular

regular menu with group type

regular-group

advanced menu with group type

advanced

Installation

npm i v-selectmenu --save

Include plugin in your main.js file.

import Vue from 'vue'
import vSelectMenu from 'v-selectmenu';
Vue.use(vSelectMenu, { global config options... });

Usage (advanced menu mode by default)

<template>
  <v-selectmenu :data="list" v-model="value">
  </v-selectmenu>
</template>

<script>
  export default {
    data(){
      return {
        value: '',
        list: [
          { id: 1, name: 'Chicago Bulls', desc: '芝加哥公牛' },
          { id: 2, name: 'Cleveland Cavaliers', desc: '克里夫兰骑士' },
          { ... }
        ]
      }
    }
  }
</script>

License

license

Dependenics

Vue plugin series

Plugin Status Description
v-page npm version A simple pagination bar, including length Menu, i18n support
v-dialogs npm version A simple and powerful dialog, including Modal, Alert, Mask and Toast modes
v-tablegrid npm version A simpler to use and practical datatable
v-uploader npm version A Vue2 plugin to make files upload simple and easier,
you can drag files or select file in dialog to upload
v-ztree npm version A simple tree for Vue2, support single or multiple(check) select tree,
and support server side data
v-gallery npm version A Vue2 plugin make browsing images in gallery
v-region npm version A simple region selector, provide Chinese administrative division data
v-selectpage npm version A powerful selector for Vue2, list or table view of pagination,
use tags for multiple selection, i18n and server side resources supports
v-suggest npm version A Vue2 plugin for input suggestions by autocomplete
v-playback npm version A Vue2 plugin to make video play easier
v-selectmenu npm version A simple, easier and highly customized menu solution
Comments
  • use router-links in NESTED menu?

    use router-links in NESTED menu?

    You sent me this on reddit:

    For custom router-link:
    
    <v-selectmenu :data="list" type="regular" >
      <template #row="{ row }">
        <router-link :to="row.url" >{{row.name}}</router-link>
      </template>
    </v-selectmenu>
    

    But that doesn't seem to work if the menu is nested. Is it possible to use router-links for nested items?

    opened by riddley 8
  • Documentation?

    Documentation?

    Great UI and i gave u a star and forked this UI but where is the documentation? Simple things should be explained better, for example, how do i change "select an option" ? I don't want use i18n but i have too, and i can't change the title without language.js. I need a dynamic option to change the title but i couldn't find anything on GH (i am sure there is a way to do it). I don't want to use Vue.use(), how do i use it without "use()"? How can i use the {options} without use()? These small things should have examples or documentation. As i said, great UI(loved it), but not many will use it only because we don't have examples or documentation and running through the code to understand how it works some dev have no time. The documentation or good examples solve these problems. What i found is a short briefing and this is not enough to make the development enjoyable.

    opened by xeroxstar 8
  • add item problem

    add item problem

    my system setting is here:

    vue.js version: vue2
    using library:
    1. vue-cli
    2. bootstrap-vue
    

    and my source code

    <b-col sm="2">
              <v-selectmenu 
                :data="app_list"
                language='en'
                :multiple='true'
                key-field="id"
                show-field="name"
                v-model="app_value"
                title='Select Your App'
                ref='test'>
              </v-selectmenu>        
    </b-col>
    <script>
    import vSelectMenu from 'v-selectmenu'
    Vue.use(vSelectMenu);
    
    export default {
        name : 'App_test',  
        props: ['sessionKey'],
        components: {
        },
        data:function () {
           let options = qs.parse(location.search, { ignoreQueryPrefix: true })
           return {
               app_value:'',
               app_list:[
                   {
                       id:0, name:'test',
                   }
               ],
         },
        methods:{
            getDate(){
                let url = myUrl;
                let api_url = axios.get(url)
                api_url.then((response)=>{
                     for(let i =0; i<response.data.length; i++){
                            this.app_list.push({id:i+1, name:response.data[i]})
                     }
                })
            }
        }
    }
    

    However, v-selectmenu list can't update variable values. looks like this.

    result:

    menu list: test
    console.log(app_list):
    [ { "id": 0, "name": "test" }, { "id": 1, "name": "HAI" }, { "id": 2, "name": "TEST012" } ]
    

    How can i solve this problem?

    opened by jotender 6
  • Button text is not being updated

    Button text is not being updated

    After selecting an option button text should be changed. It always shows Select an option

    <v-selectmenu v-model="state.selectedChatFilter"
                              :regular="true"
                              :data="chatFilters"></v-selectmenu>
    
    chatFilters: [
    	{name: 'Active Chats', id: 'activeChats', content: 'Active Chats'},
    	{name: 'Closed Chats', id: 'closedChats', content: 'Closed Chats'},
    	{name: 'All Chats', id: 'allChats', content: 'All Chats'}
    ]
    selectedChatFilter = 'activeChats'
    

    Also if I remove key content from list, text (Active Chats/Closed Chats/All Chats) is not being displayed in options

    opened by anshumansworld 5
  • Customize Header

    Customize Header

    could i change your header v-selectmenu "select an option" ?, i wanna make some customization in header. please can you make it customizeable?

    opened by dionfananie 4
  • Data values cleared when

    Data values cleared when "Select All" chosen twice

    Steps to Reproduce:

    1. Create an advanced menu with the multiple choice option.
    2. Choose menu and in "Select Option" popup, click the Select All button (checkbox) twice or more times.
    3. Clear the selections (trash can).
    4. All data values in the list will disappear resulting in the "not found" message.

    Just started to look into this, but just thought I would post it to let you know.

    bug 
    opened by Sell24 3
  • Cannot set default value

    Cannot set default value

    Hi, when i editing form, i need to set default value of this select box. But it's not working

    <v-selectmenu :data="list" class="form-control" v-model="value">
    </v-selectmenu>
    
    data () {
        return {
          value: 1,
          list: [
            {id: 1, name: 'Chicago Bulls', desc: '芝加哥公牛'},
            {id: 2, name: 'Cleveland Cavaliers', desc: '克里夫兰骑士'}
          ]
        }
    }
    
    opened by martiendt 2
  • selectmenu UI issue - menu always re-opens when you trying to close it via button

    selectmenu UI issue - menu always re-opens when you trying to close it via button

    When you click the button to open a menu, that works as intended. But when you click the same button to close a menu, the menu will close briefly (its display is set to none), but then it immediately re-opens again. I've posted a gif below to illustrate the issue better:

    https://makeagif.com/i/Ewp3vx

    This is typically not the intended behavior of such menus. When the menu is open, and you click the button, the menu should close; it shouldn't re-open.

    opened by web-surfer 2
  • Getting the specific row selected

    Getting the specific row selected

    How can I get information about a specific row/menu item a user has selected? I've tried the following:

    <v-selectmenu :data="menu" :regular="true" @values="selected">
         <button>Select</button>
     </v-selectmenu>`
    
    methods: {
         this.selected(a) {
                console.log(a);
          }
     }
    

    But that doesn't seem to work. I've also tried in the data property itself:

    {
        content: 'Dashboard',
        callback : this.selected('dashboard')
      }
    

    But I can't get the callback to pass the argument to the method (the callback stops working all together when you try to pass in an argument).

    I just want to be able to figure out what row/menu item a user selected. How can I do that?

    opened by web-surfer 2
  • Is there a way to customize styles for menu headers?

    Is there a way to customize styles for menu headers?

    I want to add customized colors to headers menu but I couldn't find an example in the demo page. And also, is there a way to add horizontal scroll with limited width?

    opened by kperveen 1
  • Call a method in the 'callback' option?

    Call a method in the 'callback' option?

    Is there any way to call a method inside the 'callback' option? For example:

    {
         content:'Click Here!',
         callback : this.callMethod(),
    }
    

    My larger question is: how is one supposed to dynamically change the values in the select? For example: dynamically change whether an option is disabled or not.

    Great looking component by the way!

    opened by web-surfer 1
  • multiple 开启时,values会触发两次

    multiple 开启时,values会触发两次

    advanced模式中 multiple开启时,当选中任意个数项目时,values会触发两次。但如果清空,会只触发一次。 在https://codepen.io/terry05/pen/WNeEZRd 示例中,将最后一个例子上挂上@values函数,并在函数中加console.log 即可观察到该现象。

    opened by shadowdaw 0
  • Change the advanced_default for each instance

    Change the advanced_default for each instance

    Hi, rather than all of the instances displaying "Select an option", I would like them to say "Select a Building" or "Select a Floor"

    Is this possible? I can't see a way.

    opened by chris-copleston 0
  • Needs small Accessibility improvements

    Needs small Accessibility improvements

    A couple of adjustments could be made to improve accessibility (a11y):

    1. The search input in the dropdown needs to have a label and or aria tags (even if not visible)
    2. The dropdown header (sm-header) should probably not be an H3, best to use a class instead, since modifying the template is not an option for that item. Have an H3 causes conflicts with the rest of the document hierarchy.

    I am using the WAVE tool for A11Y https://wave.webaim.org/

    enhancement 
    opened by ibdf 1
  • Keyboard navigation not working without search bar

    Keyboard navigation not working without search bar

    Hi,

    When the search bar is disabled (:query="false"), I'm unable to navigate through the options using the keyboard, which is often done by our power users.

    Thanks!

    opened by Aidenvale 1
  • Select All in Advanced Menu with Groups does partial selection only

    Select All in Advanced Menu with Groups does partial selection only

    Hi,

    When I loaded a group data set, clicking the "select all" checkbox selects only the items of the active group, not every item in the menu. Is there a way to get everything selected (rather than forcing end-users to enter each group first)?

    If I have an event like 'Select All clicked', I could check the number of items picked against the total number of items in the menu and cater for the difference but here I cannot hook into a 'Select all clicked' event/call.

    Thank you!

    opened by yipiha 1
Releases(v2.0.2)
  • v2.0.2(Oct 5, 2019)

  • v2.0.1(Sep 1, 2019)

    Changelog:

    • Use render functions to completely refactored plugin
    • Refactoring style design makes the interface more concise and clear
    • Add disabled prop, you can disable the menu and Disabled menus can't be opened
    • Add width prop, config to custom menus width
    • Add full-width prop, set menu trigger display type to block, inline-block by default
    • Modify position prop name to align, function unchanged
    • Modify active-tab prop name to active-group, function unchanged
    • Modify regular prop name to type, explicitly declare the menu type, advanced by default
    • Fixed some functional bugs
    • Fixed some stylesheet issues
    • Change css pre-processor program from SCSS to Stylus
    • Use Javascript Standard Style to format code
    • Add Spanish(Español) language, the language key: es
    • Add Persian language, the language key: fa
    • Upgrade v-dropdown plugin to v2.1.1
    Source code(tar.gz)
    Source code(zip)
The selecting solution for Vue 3

The selecting solution for Vue 3

Ernest 75 Nov 18, 2022
A VueJS plugin that provides a searchable and reactive select list component with no dependencies.

vue-dynamic-select A VueJS plugin that provides a searchable and reactive select list component with no dependencies. View Online Demos Here Installat

Silas Montgomery 17 Sep 18, 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
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
Multiple select areas in one image (Plugin Vuejs)

Multi Select Areas Image Live Demos https://demo-multi-select-areas-image.herokuapp.com Installation With npm or yarn yarn add multi-select-areas-imag

Sun* Research 39 Nov 23, 2022
A Selectize wrapper for VueJS

vue2-selectize A Selectize wrapper for VueJS 2. Prerequisites jQuery >= 1.7.0 Installation npm install --save jquery vue2-selectize Usage <selectize v

Carlos González 49 Jul 11, 2021
Dynamic select box for vuejs - allows configuration of remote / local object fields to be collected

VueFieldSelect vue-field-select Side note - similar / related projects vue-autocompletion vue-field-select (this) Installation via NPM First Install v

Vahid Hedayati 0 Dec 12, 2019
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
A simple region cascade selector, provide 4 levels Chinese administrative division data

v-region 简洁强大的中国行政区划选择器,可选择 “省/直辖市”、“市”、“区/县”、“乡/镇/街道” 4 级行政区域 A simple region cascade selector for Vue2, provide 4 levels Chinese administrative divi

Terry Zeng 843 Nov 28, 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
Simple vue tag editor

Simple Vue Tag Editor ======================= Originally inspired a lot by https://github.com/hnakamur/vue.tag-editor.js The code written here is upon

Jihad Dzikri Waspada 8 Feb 14, 2020
A Simple Twemoji Selector.

SI-GRENOBLE INSTALL npm install si-grenoble SETUP SI-GRENOBLE は TailwindCSS のスタイルを利用していますが、スタイルを提供はしていません。 利用する場合は TailwindCSS をインストールし、 tailwind.conf

null 8 Jun 10, 2022
A simple vue drag selector component

Vue-Drag-Selector 基于Vue.js的框选组件 示例(Demo) View Demo 安装(install) npm i vue-drag-selector 引入(import) // main.js import VueDragSelector from "vue-drag-se

XuCat 40 Nov 1, 2022
Simple input radio Vue.js component.

Simple input radio Vue.js component.

Odyzeo 0 Dec 22, 2021
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
SelectPage for Vue2, list or table view of pagination, use tags for multiple selection, i18n and server side resources supports

v-selectpage · A powerful selection plugin for Vue2, list or table view of pagination, use tags form for multiple selection, i18n and server side reso

Terry Zeng 234 Oct 25, 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
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
A set of Vue.js components to display datasets (lists) with filtering, paging, and sorting capabilities!

vue-dataset ?? HEADS UP! You're currently looking at vue-dataset branch for Vue.js 2. If you're looking for a Vue.js 3 compatible version of vue-datas

Giannis Koutsaftakis 170 Nov 21, 2022