vue-drag-select
## 🔧Installation
```bash
npm i @coleqiu/vue-drag-select
```
```bash
yarn add @coleqiu/vue-drag-select
```
## 📘Demo
[Storybook](https://credred.github.io/vue-drag-select/)
[](https://codesandbox.io/s/vue-drag-select-example-3d0cof?fontsize=14&hidenavigation=1&theme=dark)
## 🧭Quick Guide
### ⚙Import
```javascript
import { createApp } from "vue";
import VueDragSelect from "@coleqiu/vue-drag-select";
const app = createApp(App);
app.use(VueDragSelect);
```
### 🚀Usage
```vue
{{item}}
```
## 📖Ducumentation
### DragSelect Attributes
Attribute | Description | Type | Default
-|-|-|-
modelValue / v-model | binding value | Array \| Set | --(required)
background | background color of drag area, 'none' represent hide this style to avoid override background color of class | string | rgba(66, 153, 225, 0.5 |
draggableOnOption | can draggable when dragstart event target on DragSelectOption | boolean | true
clickOptionToSelect | whether to enable the click item selection function | boolean | true
clickBlankToClear | whether to enable clicking on blank content to clear the option | boolean | true
dragAreaClass | the class names of drag area | string | --
dragAreaStyle | the class styles of drag area | string | --
selectedOptionClass | the class names of selected DragSelectOption | string | --
selectedOptionStyle | the selected styles of selected DragSelectOption | string | --
multiple | whether to keep the previously selected | boolean | --
activeMultipleKeys | after pressing a certain key, multiple mode will be activated | 'meta' \| 'shift' \| 'ctrl' \| 'alt' | 'meta' \| 'ctrl' \| 'shift'
deselectRepeated | in multiple mode, deselect options that are repeatedly selected | boolean | --
### DragSelectOption Attributes
Attribute | Description | Type | Default
-|-|-|-
value | binding value | string \| index | --(required)
disabled | whether DragSelectOption is disabled | boolean | false
selectedClass | the class names of selected option | boolean | --
### Component classNames
this package havn't enough styles,you can use following classNames to add styles.
name | Description
-|-
drag-select__wrapper | the className of DragSelect itself
drag-select | the className of the container of dragSelectOption
drag-select__area | the className of drag area
drag-select-option | the className of dragSelectOption component
drag-select-option--selected | the className of dragSelectOption component which are selected
drag-select-option--disabled | the className of dragSelectOption component which are disabled