Selecto.js is a component that allows you to select elements in the drag area using the mouse or touch.

Overview

Selecto.js

npm version React Preact Angular Vue Svelte Lit

Selecto.js is a component that allows you to select elements in the drag area using the mouse or touch.

Demo / API / Main Project

⚙️ Installation

npm

$ npm install selecto

scripts

<script src="//daybrush.com/selecto/release/latest/dist/selecto.min.js"></script>

🚀 How to use

import Selecto from "selecto";

const selecto = new Selecto({
    // The container to add a selection element
    container: document.body,
    // Selecto's root container (No transformed container. (default: null)
    rootContainer: null,
    // The area to drag selection element (default: container)
    dragContainer: Element,
    // Targets to select. You can register a queryselector or an Element.
    selectableTargets: [".target", document.querySelector(".target2")],
    // Whether to select by click (default: true)
    selectByClick: true,
    // Whether to select from the target inside (default: true)
    selectFromInside: true,
    // After the select, whether to select the next target with the selected target (deselected if the target is selected again).
    continueSelect: false,
    // Determines which key to continue selecting the next target via keydown and keyup.
    toggleContinueSelect: "shift",
    // The container for keydown and keyup events
    keyContainer: window,
    // The rate at which the target overlaps the drag area to be selected. (default: 100)
    hitRate: 100,
});

selecto.on("select", e => {
    e.added.forEach(el => {
        el.classList.add("selected");
    });
    e.removed.forEach(el => {
        el.classList.remove("selected");
    });
});

Do you want to select accurately?

Since selecto basically checks using getBoundingClientRect, it is not accurate if the object is rotated or distorted.

If you want to check accurately, use getElementRect option with the following code

import Selecto from "selecto";
import { getElementInfo } from "moveable"; // (13kb function) if you use react, use react-moveable

const selecto = new Selecto({
    ...,
    // (target: HTMLElement | SVGElement ) => { pos1: number[], pos2: number[], pos3: number[], pos4: number[] }
    // pos1: left top
    // pos2: right top
    // pos3: left bottom
    // pos4: right bottom
    getElementRect: getElementInfo,
});

📦 Packages

Package Name  Version  Description
react-selecto A React Selecto Component that allows you to select elements in the drag area using the mouse or touch.
ngx-selecto An Angular Selecto Component that allows you to select elements in the drag area using the mouse or touch.
vue-selecto A Vue Selecto Component that allows you to select elements in the drag area using the mouse or touch.
preact-selecto A Preact Selecto Component that allows you to select elements in the drag area using the mouse or touch.
svelte-selecto A Svelte Selecto Component that allows you to select elements in the drag area using the mouse or touch.
lit-selecto A Lit Selecto Component that allows you to select elements in the drag area using the mouse or touch.

⭐️ Show Your Support

Please give a ⭐️ if this project helped you!

👏 Contributing

If you have any questions or requests or want to contribute to selecto or other packages, please write the issue or give me a Pull Request freely.

🐞 Bug Report

If you find a bug, please report to us opening a new Issue on GitHub.

📝 License

This project is MIT licensed.

MIT License

Copyright (c) 2020 Daybrush

Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal
in the Software without restriction, including without limitation the rights
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
copies of the Software, and to permit persons to whom the Software is
furnished to do so, subject to the following conditions:

The above copyright notice and this permission notice shall be included in all
copies or substantial portions of the Software.

THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
SOFTWARE.
Comments
  • How can I make table rows selectable?

    How can I make table rows selectable?

    Environments

    • Framework name: Javascript

    Description

    I need table rows to be selected and trying to achieve that using selecto. Attached a sample code that I have been trying and my intention is I should be able to select the rows by clicking them individually (which works) and also by dragging mouse over TRs, which I dont know how to achieve. Can someone help me to achieve it?

    selectable.html.txt

    question 
    opened by yesvivek 10
  • continueSelect without deselection

    continueSelect without deselection

    Environments

    • Framework name: React

    Description

    I'm trying to prevent the selected item to be deselected when I press shift key and select it again. Is there any way to make this work? Thanks for your time.

    feature complete 
    opened by na2793 9
  • Has one way to use window.scroll as a scroll Option ?

    Has one way to use window.scroll as a scroll Option ?

    Hello, there's anyway to use window scroll as an option ? Without using a container to get her ref. I've tried to follow the docs but i didn't succeed using window.scroll

    opened by dnb00 8
  • Abort Drag after OnDragStart

    Abort Drag after OnDragStart

    Environments

    • Framework name: Vue
    • Framework version: 2

    Description

    I want to abort a drag, if my program is in a specific mode and if it is not a selectByClick (= without mouse drag). But the gesto object provided by the OnDragStart Event does not know yet if it is a drag, so the isDrag property is still false, even if the user goes on to drag the mouse.

    There are 2 potential solutions, but I have not been able implement any of them:

    • There is a way to abort the drag from inside a onDrag Event
    • There is a way to disable drag selecting temporarily, without disabling the selectByClick functionality

    Yes I could add another click event listener to the object directly, reimplement the selectByClick functionality and completely disable select during the before-mentioned program mode, but that would mess up my data flow: Selecto events set the selected objects in my program state store and add the selected elements to the moveable targets. It would be very messy to have two event types that cause changes to the moveable targets (from 2 components)

    feature 
    opened by JonathanTreffler 7
  • When the parent container contains

    When the parent container contains "transform:'scale(1)'", the selection box position is incorrect.

    Environments

    • Framework name:
    • Framework version:
    • Component name:
    • Component version: 1.11.1
    • Testable Address(optional):

    Description

    When the parent container contains css style: "transform:'scale(1)'", the selection box position is incorrect. The reason for the error: the start and end positions of the selected rectangle have not been converted.

    opened by xjb258 7
  • Selection continues even after switching tabs

    Selection continues even after switching tabs

    • Framework name: Vanilla JS
    • Testable Address(optional): https://codepen.io/yesvivek/pen/LYNbQdo
    • OS: Windows
    • Browser: Chrome

    Am using Selecto to select table rows and has been working good. One problem I notice when using Ctrl and/or shift toggleContinueSelect is that when moving away from the page using Ctrl+Tab and returning back makes Selecto think that I keep pressing Ctrl/shift and it continues to select without removing old selection.

    Reproduction steps to follow on above page (or in your demo page):

    1. Select any row in the table.
    2. Use Ctrl+tab to navigate to next tab in the window.
    3. Do whatever you wanted to do on the next tab.
    4. Switch back to the selecto page.
    5. Select any row.
    6. Previous selection is not cleared.

    Notice that I never intended to use Ctrl for selection at all.

    bug complete 
    opened by yesvivek 6
  • toggleContinueSelect is not effective in particular case

    toggleContinueSelect is not effective in particular case

    • Framework name: Vanilla JS
    • Testable Address(optional): https://codepen.io/yesvivek/pen/LYNbQdo

    I have been trying to use selecto to select rows in the table. I want to allow selection of rows using keyboard and also using mouse. I take care of keyboard selection and selecto is used only for mouse selection. Whenever keyboard is used, I use selecto.setSelectedTargets to set the current selection and it works fine so far.

    This particular problem arises only when mixing keyboard and mouse. Follow below steps on above sample page that is created to reproduce this issue. I have used textbox instead of up or down arrow key because I started with textbox first. I can rewrite to use keyboard event if needed or simplify reproduction sample.

    1. Click on row 6 (any row other than 2).
    2. Press Shift key.
    3. Click Add button which will select row 2.
    4. Do not release Shift key.
    5. Press some key (Down arrow)
    6. Do not release shift key.
    7. Click on new row.
    8. Now old selection is removed

    Callbacks are called with removed containing previously selected elements even though Shift (toggle) key is still pressed. Am not sure whether this is a bug or I need to set keyContainer option with different value. Please advice.

    bug 
    opened by yesvivek 6
  • after selecting multi elements and start dragging all elements collapse on each other at same place

    after selecting multi elements and start dragging all elements collapse on each other at same place

    Environments

    • Framework name: ReactJS
    • Framework version: 16.13.1
    • Component name: react-selecto + react-moveable
    • Component version: react-selecto= 1.5.2 and react-moveable=0.21.6-rc
    • Video Address(optional): https://www.screencast.com/t/DIWtY7mpm6

    Description

    after selecting group elements and start dragging all elements collapse on same position but if i start scalling after selecting elements than selected elements don't collapse then dragging also work perfectly. scale

    question 
    opened by nazakatalidevops 6
  • How can i remove selected by clicking the outside area of Selecto?

    How can i remove selected by clicking the outside area of Selecto?

    Environments

    • Framework name: React Hooks
    • Framework version:
    • Component name:
    • Component version:
    • Testable Address(optional):

    Description

    Hello again @daybrush , Thank you so mush for great plugin. I'm using react-moveable with selecto as [https://daybrush.com/selecto/storybook/?path=/story/selecto-with-moveable--select-moveable-targets-in-real-time].

    In your example, selection is unselect by clicking within this ".selecto-area .elements" div. I would like to remove selection by clicking outside area of Selecto. I tried with two option, First option with setTargets([]) to remove selection and it was remove the selection but i can't select items again. Second option is i add ".selecto-area .elements" class to body tag. But other click event doesn't work inside that body.

    Do you have any example like that please?

    question 
    opened by Eiputoo 6
  • Phantom mouse down with selectFromInside

    Phantom mouse down with selectFromInside

    Environments

    • Framework name: React
    • Framework version: 17.0.2
    • Component name: Selecto (+Moveable)
    • Component version: 1.17.0

    Description

    https://user-images.githubusercontent.com/88068998/187331828-2fd3effe-69aa-4ff6-a47c-3194b4787cf2.mov

    Hi! I'm using Selecto with selectFromInside disabled and since I disabled the option, it seems to have created a phantom mouse down issue, which can become an annoyance very quickly. I cannot replicate it on none of the sandboxes online and I was wondering if you might have an idea what could be the issue in this case.

    ^ Attached you can find a screencast of the issue - I'm never holding down the mouse for a proper drag, the elements are just following my mouse.

    this.selecto = new Selecto({
       container: this.div,
       rootContainer: this.div,
       selectableTargets: targetElements,
       toggleContinueSelect: 'shift',
       selectFromInside: false,
    });
    
    bug complete 
    opened by adela-almasan 5
  • Selection drag area positioned incorrectly for container positioned with transform

    Selection drag area positioned incorrectly for container positioned with transform

    Environments

    ngx-selecto

    Description

    Hi, when I position the selecto container in the middle of a page using a transform. The drag selection drag box is positioned in the wrong place.

    I centered the container like this. If I remove the transform, it all works fine.

    .container { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); margin: 0; }

    image

    If this isn't easy to fix, is it possible to hide the drag area during the selection process?

    question 
    opened by geoffbullen 5
  • Straight line problem - horizontal and vertical line

    Straight line problem - horizontal and vertical line

    Hi Younkue, thank you for this amazing library. The only reason why I am not using Selecto is because of a problem with straight lines. If the line is not straight then there is no problem but if it is straight then I can't move it. This problem occurs in all popular browsers: Chrome, Edge, Opera, Safari. FireFox is the only browser that doesn't have this problem. I've tested Selecto with Moveable. An example below: Line: 92403405-0efbc680-f13a-11ea-9f77-bd049e486d3b Straight lines: 92403568-6732c880-f13a-11ea-8533-95b389472c94 92403551-5eda8d80-f13a-11ea-8c93-53cee52c8798

    bug 
    opened by andrea78 1
  • select too much performance is consumed

    select too much performance is consumed

    Environments

    • Framework name:react
    • Framework version:17
    • Component name: Selecto
    • Component version:1.20.2
    • Testable Address(optional):

    Description

    Too much performance is consumed when there are many page elements. Is there a good optimization method?

    enhancement 
    opened by fanterxissss 1
  • Vue3-selecto demo code does not work

    Vue3-selecto demo code does not work

    Environments

    • Framework name: Vue
    • Framework version: ^3.2.41
    • Component name: vue3-selecto
    • Component version: ^1.6.2

    Description

    The code pen example related to select in the scroll area is not working. Can you please update the code and fix it quickly?

    complete demo 
    opened by Atif-Bashir-1998 4
  • Can it be changed to a controlled component

    Can it be changed to a controlled component

    Can it be changed to a controlled component? Check the number of elements that have been given the class name' selected' before clicking and triggering.

    question 
    opened by mtiger95 1
  • What would be the best approach to make buttons or other interactive elements available on selectable elements

    What would be the best approach to make buttons or other interactive elements available on selectable elements

    Environments

    • Framework name: react
    • Framework version: react 18.2.0
    • Component name: selecto
    • Component version: 1.18.2
    • Testable Address(optional):

    Description

    I have draggable elements that also contain buttons. Currently Selecto intercepts all mouse-clicks. Is there a way to have a higher zIndex or something like the checkinput hack to solve that the buttons have higher priority as Selecto?

    question react 
    opened by Arjanno 2
Releases(1.20.2)
  • 1.20.2(Sep 13, 2022)

    1.20.2 (2022-09-13)

    :sparkles: Packages

    • lit-selecto 1.20.2
    • preact-selecto 1.17.2
    • react-selecto 1.20.2
    • selecto 1.20.2
    • svelte-selecto 1.20.2
    • vue-selecto 1.20.2
    • vue3-selecto 1.6.2
    • ngx-selecto 1.20.2

    :bug: Bug Fix

    • selecto
      • fix startSelected property (8c88d61)

    :mega: Other

    Source code(tar.gz)
    Source code(zip)
  • 1.20.1(Sep 13, 2022)

    1.20.1 (2022-09-13)

    :sparkles: Packages

    • lit-selecto 1.20.1
    • preact-selecto 1.17.1
    • react-selecto 1.20.1
    • selecto 1.20.1
    • svelte-selecto 1.20.1
    • vue-selecto 1.20.1
    • vue3-selecto 1.6.1
    • ngx-selecto 1.20.1

    :rocket: New Features

    • selecto
      • support beforeSelected, startSelected property in select events (bf906bb)

    :bug: Bug Fix

    • selecto

    :mega: Other

    Source code(tar.gz)
    Source code(zip)
  • 1.20.0(Sep 13, 2022)

    1.20.0 (2022-09-13)

    :sparkles: Packages

    • lit-selecto 1.20.0
    • preact-selecto 1.17.0
    • react-selecto 1.20.0
    • selecto 1.20.0
    • svelte-selecto 1.20.0
    • vue-selecto 1.20.0
    • vue3-selecto 1.6.0
    • ngx-selecto 1.20.0

    :rocket: New Features

    • selecto
      • add preventClickEventByCondition option (47d49c3)
      • add selectTargetByPoints, setSelectedTargetByPoints #95 #98 (b4d3caa)

    :mega: Other

    Source code(tar.gz)
    Source code(zip)
  • 1.19.1(Sep 1, 2022)

    1.19.1 (2022-09-01)

    :sparkles: Packages

    • lit-selecto 1.19.1
    • preact-selecto 1.16.1
    • react-selecto 1.19.1
    • selecto 1.19.1
    • svelte-selecto 1.19.1
    • vue-selecto 1.19.1
    • vue3-selecto 1.5.1
    • ngx-selecto 1.19.1

    :bug: Bug Fix

    • selecto
      • fix data name #99 (a207ebe)
      • fix select box for rootMatrix #100 (d60d601)

    :mega: Other

    Source code(tar.gz)
    Source code(zip)
  • 1.19.0(Aug 30, 2022)

    1.19.0 (2022-08-30)

    :sparkles: Packages

    • lit-selecto 1.19.0
    • preact-selecto 1.16.0
    • react-selecto 1.19.0
    • selecto 1.19.0
    • svelte-selecto 1.19.0
    • vue-selecto 1.19.0
    • vue3-selecto 1.5.0
    • ngx-selecto 1.19.0

    :rocket: New Features

    • selecto
      • add data property for drag events #99 (7d1b380)

    :bug: Bug Fix

    • vue3-selecto, vue-selecto, svelte-selecto, selecto, react-selecto, preact-selecto, lit-selecto
    • selecto
      • fix cjs config (acf1f52)
      • fix commonjs rollup config (26b00d0)
      • fix not selected items across the screen #92 (4392f95)

    :mega: Other

    Source code(tar.gz)
    Source code(zip)
  • 1.18.0(Aug 2, 2022)

    1.18.0 (2022-08-02)

    :sparkles: Packages

    • lit-selecto 1.18.0
    • preact-selecto 1.15.0
    • react-selecto 1.18.0
    • selecto 1.18.0
    • svelte-selecto 1.18.0
    • vue-selecto 1.18.0
    • vue3-selecto 1.4.0
    • ngx-selecto 1.18.0

    :rocket: New Features

    • selecto
      • add preventRightClick #90 (b68f33a)
      • prevent click bubbling #89 (6538396)
      • support ref, function, string scroll container type #86 (8202e07)

    :bug: Bug Fix

    • ngx-selecto
      • fix angular type consts (d6496bf)

    :house: Code Refactoring

    :mega: Other

    • vue3-selecto, vue-selecto, svelte-selecto, react-selecto, preact-selecto, ngx-selecto, lit-selecto
    • selecto
    • Other
    Source code(tar.gz)
    Source code(zip)
  • 1.17.0(Jul 3, 2022)

    [1.17.0] - 2022-07-04

    • selecto 1.17.0
    • react-selecto 1.17.0
    • preact-selecto 1.17.0
    • ngx-selecto 1.17.0
    • svelte-selecto 1.17.0
    • vue-selecto 1.17.0
    • vue3-selecto 1.17.0
    • lit-selecto 1.17.0

    Added

    • Add toggleContinueSelectWithoutDeselect prop #80

    Fixed

    • enhance large amount of data #81
    • fix vue methods #79
    • fix elementFromPoint in jest #83
    • fix meta key in firefox #82
    • fix vue container #64
    Source code(tar.gz)
    Source code(zip)
  • 1.16.2(May 10, 2022)

    • selecto 1.16.2
    • react-selecto 1.16.2
    • preact-selecto 1.16.1
    • ngx-selecto 1.16.2
    • svelte-selecto 1.16.2
    • vue-selecto 1.16.2
    • vue3-selecto 1.16.2
    • lit-selecto 1.16.2

    Fixed

    • Fix continueSelectWithoutDeselect prop's empty issue #77
    Source code(tar.gz)
    Source code(zip)
  • 1.16.0(May 7, 2022)

    • selecto 1.16.0
    • react-selecto 1.16.0
    • preact-selecto 1.16.0
    • ngx-selecto 1.16.0
    • svelte-selecto 1.16.0
    • vue-selecto 1.16.0
    • vue3-selecto 1.16.0
    • lit-selecto 1.16.0

    Added

    • Add continueSelectWithoutDeselect option #77

    Fixed

    • Fix vue methods #79
    Source code(tar.gz)
    Source code(zip)
  • 1.15.1(Apr 1, 2022)

    • selecto 1.15.1
    • react-selecto 1.15.1
    • preact-selecto 1.15.1
    • ngx-selecto 1.15.1
    • svelte-selecto 1.15.1
    • vue-selecto 1.15.1
    • vue3-selecto 1.1.1
    • lit-selecto 1.15.1

    Fixed

    Source code(tar.gz)
    Source code(zip)
  • 1.15.0(Mar 10, 2022)

    [1.15.0] - 2022-03-11

    • selecto 1.15.0
    • react-selecto 1.15.0
    • preact-selecto 1.15.0
    • ngx-selecto 1.15.0
    • svelte-selecto 1.15.0
    • vue-selecto 1.15.0
    • vue3-selecto 1.1.0
    • lit-selecto 1.15.0

    Added

    • Add checkScroll method #55
    Source code(tar.gz)
    Source code(zip)
  • 1.14.0(Mar 9, 2022)

    [1.14.0] - 2022-03-10

    • selecto 1.14.0
    • react-selecto 1.14.0
    • preact-selecto 1.14.0
    • ngx-selecto 1.14.0
    • svelte-selecto 1.14.0
    • vue-selecto 1.14.0
    • vue3-selecto 1.0.0
    • lit-selecto 1.14.0

    Added

    • Add vue3-selecto #70
    • Add clickBySelectEnd #65
    • Support px hitRate #61

    Fixed

    • Fix svelte types #71
    • Fix vue props #64
    Source code(tar.gz)
    Source code(zip)
  • 1.13.2(Nov 23, 2021)

    [1.13.2] - 2021-11-24

    • selecto 1.13.2
    • react-selecto 1.13.2
    • preact-selecto 1.13.2
    • ngx-selecto 1.13.1
    • svelte-selecto 1.13.3
    • vue-selecto 1.13.3
    • lit-selecto 1.13.2

    Fixed

    • fix stop() property on drag event #60
    • Fix vue types #59
    • Support svelte SSR
    Source code(tar.gz)
    Source code(zip)
  • 1.13.0(Sep 11, 2021)

    [1.13.0] - 2021-09-11

    • selecto 1.13.0
    • react-selecto 1.13.0
    • preact-selecto 1.13.0
    • ngx-selecto 1.13.0
    • svelte-selecto 1.13.0
    • lit-selecto 1.13.0

    Added

    • Add isClick property on dragEnd, selectEnd #51

    Fixed

    • Fix svelte ssr #53
    • Fix boundContainer's area on scroll #52
    Source code(tar.gz)
    Source code(zip)
  • 1.12.1(Jun 16, 2021)

    [1.12.1] - 2021-06-17

    • selecto 1.12.1
    • react-selecto 1.12.0
    • preact-selecto 1.12.0
    • ngx-selecto 1.12.0
    • svelte-selecto 1.12.0
    • lit-selecto 1.12.0

    Added

    • Add dragCondition option #47
    • Add rootContainer option #49
    Source code(tar.gz)
    Source code(zip)
  • 1.11.1(Apr 5, 2021)

    [1.11.1] - 2021-04-06

    • selecto 1.11.1
    • react-selecto 1.11.1
    • preact-selecto 1.11.1
    • ngx-selecto 1.11.1
    • svelte-selecto 1.11.1
    • lit-selecto 1.11.1

    Removed

    • Fix scroll container #40
    Source code(tar.gz)
    Source code(zip)
  • 1.10.2(Dec 22, 2020)

    [1.10.2] - 2020-12-23

    • selecto 1.10.2
    • react-selecto 1.10.2
    • preact-selecto 1.9.2
    • ngx-selecto 1.10.2
    • svelte-selecto 1.10.2
    • lit-selecto 1.10.2

    Added

    • Fix getElementRect option #28
    Source code(tar.gz)
    Source code(zip)
  • 1.10.1(Nov 15, 2020)

    [1.10.1] - 2020-11-15

    • selecto 1.10.1
    • react-selecto 1.10.1
    • preact-selecto 1.9.1
    • ngx-selecto 1.10.1
    • svelte-selecto 1.10.1
    • lit-selecto 1.10.1

    Added

    • Add preventDragFromInside option #27
    Source code(tar.gz)
    Source code(zip)
  • 1.9.2(Nov 9, 2020)

    [1.9.2] - 2020-11-10

    • selecto 1.9.2
    • react-selecto 1.9.2
    • preact-selecto 1.8.2
    • ngx-selecto 1.9.2
    • svelte-selecto 1.9.2
    • lit-selecto 1.9.2

    Fixed

    • Fix clickTarget method #25
    Source code(tar.gz)
    Source code(zip)
  • 1.9.1(Nov 8, 2020)

    [1.9.1] - 2020-11-08

    • selecto 1.9.1
    • react-selecto 1.9.1
    • preact-selecto 1.8.1
    • ngx-selecto 1.9.1
    • svelte-selecto 1.9.1
    • lit-selecto 1.9.2

    Added

    • Add getElementRect option #12
    • Add isSelect property on events
    • Add getSelectedTargets, getElementPoints methods

    Fixed

    • Fix importing problem #26
    • Fix isDouble is not working # 25
    Source code(tar.gz)
    Source code(zip)
  • 1.7.1(Oct 20, 2020)

    • selecto 1.7.1
    • react-selecto 1.7.1
    • preact-selecto 1.6.1
    • ngx-selecto 1.7.1
    • lit-selecto 1.7.1
    • vue-selecto 1.7.1
    • svelte-selecto 1.7.1

    Added

    • Add boundContainer prop #22

    Fixed

    • Selecting only when clicking on the container #24
    • Selection continues even after switching tabs #19
    • Compatibility about windowing technique #18
    Source code(tar.gz)
    Source code(zip)
  • 1.6.1(Aug 23, 2020)

  • 1.6.0(Aug 21, 2020)

    • react-selecto 1.6.0
    • preact-selecto 1.5.0
    • ngx-selecto 1.6.0
    • vue-selecto 1.6.0
    • svelte-selecto 1.6.0
    • lit-selecto 1.6.0

    Added

    • Add ratio option
    • Support multiple keys
    Source code(tar.gz)
    Source code(zip)
  • 1.5.2(Jul 22, 2020)

  • 1.5.1(Jul 20, 2020)

  • 1.5.0(Jul 11, 2020)

  • 1.4.0(Jun 23, 2020)

    • react-selecto 1.4.0
    • preact-selecto 1.3.0
    • ngx-selecto 1.3.0
    • vue-selecto 1.3.0
    • svelte-selecto 1.3.0
    • lit-selecto 1.3.0

    Added

    • Add drag, dragEnd events.
    Source code(tar.gz)
    Source code(zip)
  • 1.3.0(Jun 23, 2020)

    • react-selecto 1.3.0
    • ngx-selecto 1.3.0
    • vue-selecto 1.3.0
    • svelte-selecto 1.3.0
    • lit-selecto 1.3.0

    Added

    • Add rect event property for selection element.
    Source code(tar.gz)
    Source code(zip)
  • 1.2.0(Jun 21, 2020)

    • react-selecto 1.2.0
    • preact-selecto 1.2.0
    • ngx-selecto 1.2.0
    • vue-selecto 1.2.0
    • svelte-selecto 1.2.0
    • lit-selecto 1.2.0

    Added

    • isDouble(doubleclick) property is added in selectEnd event
    • checkInput property is added (check input, textarea, contenteditable)
    Source code(tar.gz)
    Source code(zip)
  • 1.1.2(May 10, 2020)

    • selecto 1.1.2
    • react-selecto 1.1.1
    • preact-selecto 1.1.1
    • ngx-selecto 1.1.1
    • vue-selecto 1.1.1
    • svelte-selecto 1.1.1
    • lit-selecto 1.1.1

    Fixed

    • Fix getting the client position of touchend.
    Source code(tar.gz)
    Source code(zip)
Owner
Daybrush (Younkue Choi)
최연규. I'm Front-End Engineer with JavaScript, CSS, TypeScript, Node.js
Daybrush (Younkue Choi)
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
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
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
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
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
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
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 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
Select components using Bulma as CSS framework.

Vue Bulma Select Select components using Bulma as CSS framework Docs/Examples Could be found here TODO Push to NPM Unit testing Multi-select (tags) De

Gabriel Corado 13 Oct 19, 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 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 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
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
A Vue Component to convert the native html select-dropdown to searchable dropdown (something similar to the datalist html tag which isn't supported in most of the browsers)

Searchable-Select-Dropdown A Vue Component to convert the native html select-dropdown to searchable dropdown (something similar to the datalist html t

Rahul Gaba 13 Sep 15, 2022
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