├── .gitignore
├── README.md
├── babel.config.js
├── package.json
├── public
    ├── favicon.ico
    └── index.html
├── src
    ├── App.vue
    ├── assets
    │   └── preview.gif
    ├── components
    │   ├── Card.vue
    │   └── Header.vue
    ├── initalCards.js
    ├── main.js
    └── styles
    │   ├── base.css
    │   ├── index.js
    │   └── main.css
└── yarn.lock


/.gitignore:
--------------------------------------------------------------------------------
 1 | .DS_Store
 2 | node_modules
 3 | /dist
 4 | 
 5 | 
 6 | # local env files
 7 | .env.local
 8 | .env.*.local
 9 | 
10 | # Log files
11 | npm-debug.log*
12 | yarn-debug.log*
13 | yarn-error.log*
14 | pnpm-debug.log*
15 | 
16 | # Editor directories and files
17 | .idea
18 | .vscode
19 | *.suo
20 | *.ntvs*
21 | *.njsproj
22 | *.sln
23 | *.sw?
24 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | # UI Clone simples do Trello
 2 | Clonando o **Drag and Drop** do Trello com Vue, HTML e CSS
 3 | 
 4 | | :placard: Vitrine.Dev |     |
 5 | | -------------  | --- |
 6 | | :sparkles: Nome        | **Trello UI Clone**
 7 | | :label: Tecnologias | Vue, Javascript, HTML, CSS
 8 | | :rocket: URL         | -
 9 | | :fire: Desafio     | https://www.youtube.com/channel/UCS5IxD9kAh5uO5ZdBtXPr8g
10 | 
11 | Scrollando pelo YouTube acabei encontrando esse tutorial incrível do canal do [Fábio de Abreu](https://www.youtube.com/channel/UCS5IxD9kAh5uO5ZdBtXPr8g): https://www.youtube.com/watch?v=YmJzRpMFdDY. Precisei colocar em prática, já que sempre quis fazer algo parecido com a funcionalidade de arrastar cards do Trello.
12 | 
13 | ## Preview
14 | 
15 | <!-- Inserir imagem com a #vitrinedev ao final do link -->
16 | ![](https://github.com/natalia-fs/trello-ui-clone-vue/blob/master/src/assets/preview.gif?raw=true#vitrinedev)
17 | 
18 | 
19 | 
20 | <!-- 
21 | <p align="center">
22 |     <img src="src/assets/preview.gif" alt="UI preview">
23 | </p>
24 | -->
25 | 


--------------------------------------------------------------------------------
/babel.config.js:
--------------------------------------------------------------------------------
1 | module.exports = {
2 |   presets: [
3 |     '@vue/cli-plugin-babel/preset'
4 |   ]
5 | }
6 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "Trello-VueClone",
 3 |   "version": "0.1.0",
 4 |   "private": true,
 5 |   "scripts": {
 6 |     "serve": "vue-cli-service serve",
 7 |     "build": "vue-cli-service build",
 8 |     "lint": "vue-cli-service lint"
 9 |   },
10 |   "dependencies": {
11 |     "collect.js": "^4.28.6",
12 |     "core-js": "^3.6.5",
13 |     "vue": "^2.6.11",
14 |     "vue-smooth-dnd": "^0.8.1"
15 |   },
16 |   "devDependencies": {
17 |     "@vue/cli-plugin-babel": "~4.5.0",
18 |     "@vue/cli-plugin-eslint": "~4.5.0",
19 |     "@vue/cli-service": "~4.5.0",
20 |     "babel-eslint": "^10.1.0",
21 |     "eslint": "^6.7.2",
22 |     "eslint-plugin-vue": "^6.2.2",
23 |     "vue-template-compiler": "^2.6.11"
24 |   },
25 |   "eslintConfig": {
26 |     "root": true,
27 |     "env": {
28 |       "node": true
29 |     },
30 |     "extends": [
31 |       "plugin:vue/essential",
32 |       "eslint:recommended"
33 |     ],
34 |     "parserOptions": {
35 |       "parser": "babel-eslint"
36 |     },
37 |     "rules": {}
38 |   },
39 |   "browserslist": [
40 |     "> 1%",
41 |     "last 2 versions",
42 |     "not dead"
43 |   ]
44 | }
45 | 


--------------------------------------------------------------------------------
/public/favicon.ico:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/natalia-fs/trello-ui-clone-vue/8bbfd187317ba85cb3e56f47e982775904da197c/public/favicon.ico


--------------------------------------------------------------------------------
/public/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="">
 3 |   <head>
 4 |     <meta charset="utf-8">
 5 |     <meta http-equiv="X-UA-Compatible" content="IE=edge">
 6 |     <meta name="viewport" content="width=device-width,initial-scale=1.0">
 7 |     <link rel="icon" href="<%= BASE_URL %>favicon.ico">
 8 |     <title>Trello - VueClone</title>
 9 |   </head>
10 |   <body>
11 |     <noscript>
12 |       <strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
13 |     </noscript>
14 |     <div id="app"></div>
15 |     <!-- built files will be auto injected -->
16 |   </body>
17 | </html>
18 | 


--------------------------------------------------------------------------------
/src/App.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |   <div id="app">
  3 |     <Header />
  4 |     <div class="board">
  5 |       <div class="lane" v-for="(list, index) in cards" :key="index">
  6 |         <h2 class="lane-title">{{list.title}}</h2>
  7 |         <Container
  8 |           group-name="list"
  9 |           @drag-start="handleDragStart(list.title, $event)"
 10 |           @drop="handleDrop(list.title, $event)"
 11 |           :get-child-payload="getChildPayload"
 12 |           :drop-placeholder="{className: 'placeholder'}"
 13 |         >
 14 |           <Draggable v-for="card in list.cards" :key="card.id">
 15 |             <Card>{{card.text}}</Card>
 16 |           </Draggable>
 17 |         </Container>
 18 |       </div>
 19 |     </div>
 20 |   </div>
 21 | </template>
 22 | 
 23 | <script>
 24 | 
 25 | import Header from './components/Header';
 26 | import Card from './components/Card';
 27 | import initalCards from "./initalCards";
 28 | import {Container, Draggable} from "vue-smooth-dnd";
 29 | import collect from 'collect.js';
 30 | 
 31 | export default {
 32 |   name: 'App',
 33 |   components: {
 34 |     Header,
 35 |     Card,
 36 |     Container,
 37 |     Draggable
 38 |   },
 39 |   data: () => ({
 40 |     cards: collect([
 41 |       {title: 'Backlog', cards: initalCards.backlog},
 42 |       {title: 'Desenvolvimento', cards: initalCards.dev},
 43 |       {title: 'Testes', cards: initalCards.test},
 44 |       {title: 'Concluído', cards: []},
 45 |     ]),
 46 |     draggingCard: {
 47 |       lane: '',
 48 |       index: -1,
 49 |       cardData: {},
 50 |     }
 51 |   }),
 52 |   methods: {
 53 |     handleDragStart(lane, dragResult){
 54 |       const { payload, isSource } = dragResult;
 55 |       if(isSource){
 56 |         this.draggingCard = {
 57 |           index: payload,
 58 |           cardData: {
 59 |             ...this.cards.where('title', lane).first().cards[payload]
 60 |           }
 61 |         }
 62 |       }
 63 |     },
 64 |     handleDrop(lane, dropResult){
 65 |       const {removedIndex, addedIndex } = dropResult;
 66 |       let list = this.cards.where('title', lane).first().cards;
 67 |       if(lane === this.draggingCard.lane && removedIndex === addedIndex){
 68 |         return;
 69 |       }
 70 |       if(list){
 71 |         if(removedIndex !== null){
 72 |           list.splice(removedIndex, 1);
 73 |         }
 74 |         if(addedIndex !== null){
 75 |           list.splice(addedIndex, 0, this.draggingCard.cardData)
 76 |         }
 77 |       }
 78 |     },
 79 |     getChildPayload(index){
 80 |       return index;
 81 |     }
 82 |   }
 83 | }
 84 | </script>
 85 | 
 86 | <style>
 87 | .board{
 88 |   display: flex;
 89 |   margin: 1.2rem .8rem;
 90 |   align-items: flex-start;
 91 | }
 92 | 
 93 | .lane{
 94 |   background: var(--color-grey);
 95 |   width: 23rem;
 96 |   border-radius: .8rem;
 97 |   box-shadow: 0 .1rem .2rem 0 rgba(33, 33, 33, 0.1);
 98 |   padding: 0 .7rem;
 99 |   margin: 0 .8rem
100 | }
101 | 
102 | .lane-title{
103 |   padding: .8rem .5rem;
104 |   margin-bottom: .6rem;
105 | }
106 | 
107 | .placeholder {
108 |   background: rgba(33, 33, 33, .08);
109 |   border-radius: .4rem;
110 |   transform: scaleY(0.85);
111 |   transform-origin: 0% 0%;
112 | }
113 | 
114 | </style>
115 | 


--------------------------------------------------------------------------------
/src/assets/preview.gif:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/natalia-fs/trello-ui-clone-vue/8bbfd187317ba85cb3e56f47e982775904da197c/src/assets/preview.gif


--------------------------------------------------------------------------------
/src/components/Card.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div class="card">
 3 |       <slot />
 4 |   </div>
 5 | </template>
 6 | 
 7 | <script>
 8 | export default {
 9 |     name: "Card"
10 | }
11 | </script>
12 | 
13 | <style scoped>
14 | .card{
15 |     background: var(--color-white);
16 |     padding: 1.4rem;
17 |     border-radius: .4rem;
18 |     box-shadow: 0 1px 0 rgba(9, 30, 66, .25);
19 |     margin-bottom: .8rem;
20 |     font-size: 1.6rem;
21 |     cursor: pointer;
22 | }
23 | </style>


--------------------------------------------------------------------------------
/src/components/Header.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <header class="header"></header>
 3 | </template>
 4 | 
 5 | <script>
 6 | export default {
 7 |   name: "Header",
 8 | };
 9 | </script>
10 | 
11 | <style scoped>
12 | .header {
13 |   width: 100%;
14 |   background: var(--color-purple);
15 |   height: 4.5rem;
16 | }
17 | </style>


--------------------------------------------------------------------------------
/src/initalCards.js:
--------------------------------------------------------------------------------
 1 | // Dados para testar a aplicação
 2 | export default {
 3 |   backlog: [
 4 |     { id: 1, text: "Tarefa 1 - Manutenção" },
 5 |     { id: 2, text: "Tarefa 2 - Refatoração de tela" },
 6 |     { id: 3, text: "Tarefa 3 - Refatoração de tela de aplicativo" },
 7 |   ],
 8 |   dev: [
 9 |     { id: 4, text: "Crud" },
10 |     { id: 5, text: "Dashboard" },
11 |   ],
12 |   test: [
13 |     { id: 6, text: "Testes do aplicativo" },
14 |     { id: 7, text: "Testes do back-end" },
15 |     { id: 8, text: "Testes do front-end" },
16 |   ]
17 | }


--------------------------------------------------------------------------------
/src/main.js:
--------------------------------------------------------------------------------
 1 | import Vue from 'vue'
 2 | import App from './App.vue'
 3 | import "./styles"
 4 | 
 5 | Vue.config.productionTip = false
 6 | 
 7 | new Vue({
 8 |   render: h => h(App),
 9 | }).$mount('#app')
10 | 


--------------------------------------------------------------------------------
/src/styles/base.css:
--------------------------------------------------------------------------------
1 | :root{
2 |     --color-purple-ligth: #89609E;
3 |     --color-purple: #755287;
4 |     --color-grey: #E0E0E0;
5 |     --color-white: #FAFAFA;
6 | }


--------------------------------------------------------------------------------
/src/styles/index.js:
--------------------------------------------------------------------------------
1 | import "./base.css";
2 | import "./main.css";


--------------------------------------------------------------------------------
/src/styles/main.css:
--------------------------------------------------------------------------------
 1 | @import url("https://fonts.googleapis.com/css2?family=Lato&display=swap");
 2 | 
 3 | *,
 4 | *::before,
 5 | *::after {
 6 |     margin: 0;
 7 |     padding: 0;
 8 |     box-sizing: border-box;
 9 | }
10 | 
11 | html {
12 |     font-size: 62.5%;
13 | }
14 | 
15 | body {
16 |     font-family: "Lato", sans-serif;
17 |     background: var(--color-purple-ligth);
18 | }


--------------------------------------------------------------------------------