abhimediratta / vue-multiselect-listbox Goto Github PK

View Code? Open in Web Editor NEW

27.0 4.0 9.0 3.04 MB

Vue Multi-Select Dual Listbox

JavaScript 13.95% Vue 74.55% HTML 0.61% SCSS 10.89%

vue multiselect dual-listbox

vue-multiselect-listbox's People

Contributors

Stargazers

Watchers

Forkers

bartmannetos gophys soufiane-id kdadler centrycl apgroup2 jhagnere terry90918 graph31

vue-multiselect-listbox's Issues

Sort selected values dynamically by user action?

Is it possible to sort selected values dynamically by user action?
If yes, how/where to modify the existing codes?
Thank you very much

How to change the width of the duallist ?

Hi guys, how are you ?

First, thank you for the beautiful component.

I have one doubt, how can I change the width of the component, because in the window is rendered small, and I have so much space, but aparently is not responsive or I dont know how to use.

Thanks.

onOptionRemove function removes LAST item insted of TARGET item

vue-multiselect-listbox/src/components/MultiSelect/MultiSelect.vue

Line 210 in 439923f

let valueIndex = items.findIndex((item) => {

There is issue here...

With complex objects when user tries to use "reduce-value-property" prop and passes function something like:
(option) => option.id

let valueIndex = items.findIndex((item) => {
if (this.reduceValueProperty) {
return item && option
&& (getValueFromOption(this.reduceValueProperty, item)
=== getValueFromOption(this.reduceValueProperty, option));
}
return item === option;
});

getValueFromOption(this.reduceValueProperty, item) <---- here item is already filtered ID, so you get UNDEFINED as you cant get ID from a string.
getValueFromOption(this.reduceValueProperty, option)) <---- here option is Object so you get back VALUE

v-model does not update with axios response

I´m using the component inside a bootstrap modal, this modal appears whenever the user clicks on a button and i call a axios....the thing is, the v-model does not update with the axios response, any idea why?

Regards

Unable to pre-select options

Im filling v-model with the same structure array as in options array but i dont get the selected values in right column

v-model its returns the hole object, want only the code

Hello author,
thank you for the beautiful component.

I am facing a problem.

that is on v-model its returns the hole object with label and code but I want it just to return the code only.

How I can do that please help me.

Is this compatible with the new composition API?

I can't get it to work

Would love to use this, Probably doing something wrong, am not too good with vuejs. I am trying to follow the tutorial.

App.vue

<template>
    <h2>Example</h2>

    <h3>List Options</h3>
    <v-multiselect-listbox :options="['Alabama', 'California']"></v-multiselect-listbox>


    <v-multiselect-listbox :options="[{label: 'Alabama', code: 'al'}, {label: 'California', code: 'cal'}]"
                           :reduce-display-property="(option) => option.label"
                           :reduce-value-property="(option) => option.code">
    </v-multiselect-listbox>

    <h3>Group List options</h3>
    <v-multiselect-listbox :options="[{label: 'Alabama', code: 'al', group: 'US'}, {label: 'California', code: 'cal', group: 'US'}, {label: 'British Columbia', code: 'bc', group: 'Canada'}]"
                           :reduce-display-property="(option) => option.label"
                           :reduce-value-property="(option) => option.code"
                           :reduce-group-property="(option) => option.group">
    </v-multiselect-listbox>

    <h3>Select/Deselect All Buttons</h3>
    <v-multiselect-listbox :options="[{label: 'Alabama', code: 'al'}, {label: 'California', code: 'cal'}]"
                           :reduce-display-property="(option) => option.label"
                           :reduce-value-property="(option) => option.code"
                           :show-select-all-buttons="false">
    </v-multiselect-listbox>

    <h3>Highlight Difference from the original input</h3>
    <v-multiselect-listbox :options="[{label: 'Alabama', code: 'al'}, {label: 'California', code: 'cal'}]"
                           :reduce-display-property="(option) => option.label"
                           :reduce-value-property="(option) => option.code"
                           search-input-class="custom-input-class"
                           highlight-diff>
    </v-multiselect-listbox>

    <h3>Search Input Placeholder</h3>
    <v-multiselect-listbox :options="[{label: 'Alabama', code: 'al'}, {label: 'California', code: 'cal'}]"
                           :reduce-display-property="(option) => option.label"
                           :reduce-value-property="(option) => option.code"
                           search-options-placeholder="Search states"
                           selected-options-placeholder="Search selected states">
    </v-multiselect-listbox>

    <h3>Empty Listbox Placeholder</h3>
    <v-multiselect-listbox :options="[{label: 'Alabama', code: 'al'}, {label: 'California', code: 'cal'}]"
                           :reduce-display-property="(option) => option.label"
                           :reduce-value-property="(option) => option.code"
                           no-options-text="No states"
                           selected-no-options-text="No states selected">
    </v-multiselect-listbox>

    <h3>Empty Search Placeholder</h3>
    <v-multiselect-listbox :options="[{label: 'Alabama', code: 'al'}, {label: 'California', code: 'cal'}]"
                           :reduce-display-property="(option) => option.label"
                           :reduce-value-property="(option) => option.code"
                           no-options-found-text="No state found"
                           no-selected-options-found-text="No selected state found">
    </v-multiselect-listbox>

    <h3>Hide Search Input</h3>
    <v-multiselect-listbox :options="[{label: 'Alabama', code: 'al'}, {label: 'California', code: 'cal'}]"
                           :reduce-display-property="(option) => option.label"
                           :reduce-value-property="(option) => option.code"
                           no-options-found-text="No state found"
                           no-selected-options-found-text="No selected state found"
                           hide-search-inputs>
    </v-multiselect-listbox>

    <h3>Style Search Input</h3>
    <v-multiselect-listbox :options="[{label: 'Alabama', code: 'al'}, {label: 'California', code: 'cal'}]"
                           :reduce-display-property="(option) => option.label"
                           :reduce-value-property="(option) => option.code"
                           search-input-class="custom-input-class">
    </v-multiselect-listbox>


</template>

<script>
import vMultiselectListbox from 'vue-multiselect-listbox'
import 'vue-multiselect-listbox/dist/vue-multi-select-listbox.css';

export default {
  name: 'Paste-test',
  components: { 'v-multiselect-listbox': vMultiselectListbox },
  data () {
    return {
      selected: '',
      options: ['10001', '10002', '10003', '10004', '10005', '10006', '10007', '10008', '10009', '10010'],
    }
  },
  methods: {
    parse_clipboard(content) {
        var arr = content.split(/[\s,]+/)
        var trimmed = '';
        var results = arr.filter(element => {
            trimmed = element.trim();

            if (trimmed.length) {
                return trimmed;
            }
        });

        return results
    },

    handlePaste(evt) {
        var data = evt.clipboardData.getData('text/plain');
        console.log('TwoPaneMultiSelect pasted data=', data);

        evt.preventDefault();

        var parsed_data = this.parse_clipboard(data);
        console.log('TwoPaneMultiSelect parsed_data=', parsed_data);

        this.options = parsed_data;
        this.selected = parsed_data;
    }
  }
}
</script>

main.js

import { createApp } from 'vue'
import App from './App.vue'

createApp(App).mount('#app')

All it renders it this:

And this error in the console:

I am using vuejs3.

Thanks!

I want to hide the input, how do I do it?

I want to hide the input because I don't need the search function

how to use custom css in search input and the list boxes itself ?

Hi, can you tell me how can i change styles of the hover portion in the image above?
P.S. - overall documentation is good as compare to other packages I've came across.
Thanks in advance.

Recommend Projects

React

A declarative, efficient, and flexible JavaScript library for building user interfaces.
Vue.js

🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
Typescript

TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
TensorFlow

An Open Source Machine Learning Framework for Everyone
Django

The Web framework for perfectionists with deadlines.
Laravel

A PHP framework for web artisans
D3

Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

javascript

JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
web

Some thing interesting about web. New door for the world.
server

A server is a program made to process requests and deliver data to clients.
Machine learning

Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Visualization

Some thing interesting about visualization, use data art
Game

Some thing interesting about game, make everyone happy.

Recommend Org

Facebook

We are working to build community through open source technology. NB: members must have two-factor auth.
Microsoft

Open source projects and samples from Microsoft.
Google

Google ❤️ Open Source for everyone.
Alibaba

Alibaba Open Source for everyone
D3

Data-Driven Documents codes.
Tencent

China tencent open source team.

Jobs

Jooble