Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More
Socket
Sign inDemoInstall
Socket

@lazy-bee/two-side-select

Package Overview
Dependencies
Maintainers
5
Versions
11
Alerts
File Explorer

Advanced tools

Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

@lazy-bee/two-side-select

> Side-by-side Multi Select Plugin With Vue, dual list box plugin where the users are able to select/deselect options between panels using Left/Right arrows or move items by using double-click.

  • 0.1.4
  • npm
  • Socket score

Version published
Weekly downloads
21
increased by110%
Maintainers
5
Weekly downloads
 
Created
Source

@lazy-bee/two-side-select

Side-by-side Multi Select Plugin With Vue, dual list box plugin where the users are able to select/deselect options between panels using Left/Right arrows or move items by using double-click.

NPM

two-side-select

Install

$ npm install @lazy-bee/two-side-select

or 

$ yarn add @lazy-bee/two-side-select

Props and @Event

Bascilly we initalize the two-side-select component by given props, the common use case is to reassign date and time to a data.

And we get the updated value by vue @event @onChange="data=$event".

Props

NameData TypeExampleDescription
itemsArray[{label, value}]
poolItemsArray[{label, value}]
onChangeFunction(newItemList) => {}updated value of items(right side)

Event

NameData TypeExampleDescription
onChangeFunction(newItemList) => {}updated value of items(right side)

Usage

<template>
  <two-side-select
    :items='inittwo-side-selectItems'
    :poolItems='poolItems'
    :onChange='onChangeHandler'
  />
</template>

<script>
import '@lazy-bee/two-side-select/dist/two-side-select.css'
import { two-side-select } from "@lazy-bee/two-side-select";

export default {
  name: "app",
  components: {
    two-side-select
  },
  methods: {
    onChangeHandler: function(data) {
      console.log("data: ", data);
    }
  },
  data: function() {
    return {
      inittwo-side-selectItems: [
        {label: 'label1', value: 'value1'},
        {label: 'label2', value: 'value2'},
        {label: 'label3', value: 'value3'},
      ],
      poolItems: [
        {label: 'label4', value: 'value4'},
        {label: 'label5', value: 'value5'},
        {label: 'label6', value: 'value6'},
      ]
    };
  }
}
</script>

FAQs

Package last updated on 27 May 2019

Did you know?

Socket

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install

Related posts

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

Packages

npm

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc