A datepicker Vue component. Compatible with Vue 3.x
-
The main usage of this package is for drag and drop functionality. The user create multiple sections and in that sections provide the facilities to create multiple cards. all cards are swapable and also drag and drop in any section.
-
The user canh also Edit and Delete card.
npm i dragandropvue
import { SimpleDragVue } from 'dragandropvue';
export default {
// ...
components: {
SimpleDragVue
}
// ...
}npm run build
npm run lint
value prop if passed should be a Date object
### Compiles and hot-reloads for developmentnpm run serve
<script>
data() {
return {
response: {
data: [
{
title: "Section 1",
drop_col_id: "",
data: [
{
title: 'Card 1',
description: "<p>Description Of card<p>",
attachment: null,
deadlineDate: Deadline Date,
},
{
title: 'Card 2',
description: "<p>Description Of card<p>",
attachment: null,
deadlineDate: Deadline Date,
},
{
title: "Card 3",
description: "<p>Description Of card<p>",
attachment: null,
deadlineDate: Deadline Date,
},
],
},
{
title: "Section 2",
data: [
{
title: 66,
description: "<p>Description Of card<p>",
attachment: null,
deadlineDate: Deadline Date,
}
],
},
{
title: "Section 3",
data: [],
},
],
},
modalOpened: false
}
},
</script>
<SimpleDragVue
:responseData="response"
:isModalOpened="modalOpened"
addCardTitle="+Add Card"
addSectionTitle="Add Section"
/>
Emits events
``` html
<SimpleDragVue
:responseData="response"
:isModalOpened="modalOpened"
addCardTitle="+Add Card"
addSectionTitle="Add Section"
@add-card="addNewCardEvent"
@edit-card="editCardEvent"
>
| Prop | Type | Default | Description |
|---|---|---|---|
| responseData | Array|Object | Array or Object value of card data | |
| addSectionTitle | Text | Section Title property | |
| addCardTitle | Text | Card Title property | |
| isCustomEdit | Boolean | False | Custome Edit Functionality |
These events are emitted on actions in the datepicker
| Event | Output | Description |
|---|---|---|
| add-card | The Card is Added | |
| edit-card | The Card is Edited | |
| delete-card | The Card is Deleted |
Slots will help you customize content.
Sometimes you need to add your custom field in card. An example would be to use custom input field :
<template v-slot:cardForm>
<input type="text" />
</template>
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent