jokey-duallist
v1.0.1
Published
dual list component based on Sortablejs
Downloads
4
Maintainers
Readme
jokey-duallist
installed
Please install vuetify & icon first before installation
yarn add vuetify
yarn add jokey-duallist
<!--icon installation in index.html-->
<link href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900" rel="stylesheet">
<link href="https://cdn.jsdelivr.net/npm/@mdi/[email protected]/css/materialdesignicons.min.css" rel="stylesheet">
options
component props
{
/**
* Left area item list
* @example [
* { "test1": "a", "test2": "1" },
* ...
* ]
*/
leftItems: Array,
/** same as lift-items */
rightItems: Array,
/** Placeholder of search input tag */
searchPlaceholder: String,
/**
* table header (left == right)
* @type {{type: ArrayConstructor, required: boolean}}
* @example [
* { "text": "key1", "value": "test1" },
* { "text": "key2", "value": "test2" },
* ...
* ]
*/
headers: {
type : Array,
required: true
},
/** drag disabled */
dragDisabled: {
type : Boolean,
default: false
},
/** loading spinner view flag */
loading: {
type : Boolean,
default: false
},
/** left&right list box height */
height: {
type : String,
required: false
},
/** Text shown when no items are provided to the component */
noDataText: String
}
events
emit events
// Called whenever a change event occurs (except for selection events)
this.$emit( "onChange", { leftItems: any[], rightItems: any[] } );
slots
left-title
left list box title
right-title
right list box title
list-header
list box table header
<!--default-->
<slot
name="list-header"
:headers="headers"
>
<v-col
v-for="( x, i ) in headers"
:key="i"
:cols="12/headers.length"
>
{{ x.text }}
</v-col>
</slot>
list-item
list box table body
<!--default-->
<slot
name="list-item"
:headers="headers"
:item="item"
>
<v-row no-gutters>
<v-col
v-for="( x, i ) in headers"
:key="i"
:cols="12/headers.length"
>
{{ item[x.value] }}
</v-col>
</v-row>
</slot>
references
version log
- 1.1.0
- import css
- 1.0.0
- first release