├── static └── .gitkeep ├── .eslintignore ├── src ├── assets │ ├── fsm.png │ ├── logo.png │ ├── kanban.css │ └── kanban.scss ├── plugin.js ├── main.js ├── App.vue └── components │ └── Kanban.vue ├── .gitignore ├── config ├── prod.env.js ├── test.env.js ├── dev.env.js └── index.js ├── .editorconfig ├── .travis.yml ├── .postcssrc.js ├── index.html ├── .babelrc ├── docs ├── index.html └── static │ ├── js │ ├── manifest.2cafcc78e0c6c34e6ef6.js │ ├── app.7d106d57c92bbc79dd0b.js │ ├── manifest.2cafcc78e0c6c34e6ef6.js.map │ └── app.7d106d57c92bbc79dd0b.js.map │ └── css │ ├── app.0208ff01681785d21951f7ffc26b552c.css │ └── app.0208ff01681785d21951f7ffc26b552c.css.map ├── .eslintrc.js ├── LICENSE ├── test ├── vue-kanban.spec.js ├── __snapshots__ │ └── vue-kanban.spec.js.snap └── state-machine.spec.js ├── package.json └── README.md /static/.gitkeep: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /.eslintignore: -------------------------------------------------------------------------------- 1 | build/*.js 2 | config/*.js 3 | -------------------------------------------------------------------------------- /src/assets/fsm.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Ethan0007/vue-kanban/master/src/assets/fsm.png -------------------------------------------------------------------------------- /src/assets/logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Ethan0007/vue-kanban/master/src/assets/logo.png -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | .DS_Store 2 | node_modules/ 3 | dist/ 4 | npm-debug.log* 5 | yarn-debug.log* 6 | yarn-error.log* 7 | test/unit/coverage 8 | -------------------------------------------------------------------------------- /config/prod.env.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | NODE_ENV: '"production"', 3 | build: { 4 | assetsPublicPath: '/vue-kanban/', 5 | }, 6 | } 7 | -------------------------------------------------------------------------------- /src/plugin.js: -------------------------------------------------------------------------------- 1 | import Kanban from './components/Kanban.vue'; 2 | 3 | export default { 4 | install(vue) { 5 | vue.component('kanban-board', Kanban); 6 | }, 7 | }; 8 | -------------------------------------------------------------------------------- /config/test.env.js: -------------------------------------------------------------------------------- 1 | var merge = require('webpack-merge') 2 | var devEnv = require('./dev.env') 3 | 4 | module.exports = merge(devEnv, { 5 | NODE_ENV: '"testing"' 6 | }) 7 | -------------------------------------------------------------------------------- /config/dev.env.js: -------------------------------------------------------------------------------- 1 | var merge = require('webpack-merge') 2 | var prodEnv = require('./prod.env') 3 | 4 | module.exports = merge(prodEnv, { 5 | NODE_ENV: '"development"' 6 | }) 7 | -------------------------------------------------------------------------------- /.editorconfig: -------------------------------------------------------------------------------- 1 | root = true 2 | 3 | [*] 4 | charset = utf-8 5 | indent_style = space 6 | indent_size = 2 7 | end_of_line = lf 8 | insert_final_newline = true 9 | trim_trailing_whitespace = true 10 | -------------------------------------------------------------------------------- /.travis.yml: -------------------------------------------------------------------------------- 1 | language: node_js 2 | node_js: 3 | - "node" 4 | before_install: 5 | - curl -o- -L https://yarnpkg.com/install.sh | bash -s -- --version 0.27.5 6 | - export PATH="$HOME/.yarn/bin:$PATH" 7 | cache: yarn 8 | -------------------------------------------------------------------------------- /.postcssrc.js: -------------------------------------------------------------------------------- 1 | // https://github.com/michael-ciniawsky/postcss-load-config 2 | 3 | module.exports = { 4 | "plugins": { 5 | // to edit target browsers: use "browserlist" field in package.json 6 | "autoprefixer": {} 7 | } 8 | } 9 | -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | vue-kanban 6 | 7 | 8 |
9 | 10 | 11 | 12 | -------------------------------------------------------------------------------- /.babelrc: -------------------------------------------------------------------------------- 1 | { 2 | "presets": [ 3 | ["env", { "modules": false }], 4 | "stage-2" 5 | ], 6 | "plugins": ["transform-runtime"], 7 | "comments": false, 8 | "env": { 9 | "test": { 10 | "presets": ["env", "stage-2"], 11 | "plugins": [ "istanbul" ] 12 | } 13 | } 14 | } 15 | -------------------------------------------------------------------------------- /src/main.js: -------------------------------------------------------------------------------- 1 | // The Vue build version to load with the `import` command 2 | // (runtime-only or standalone) has been set in webpack.base.conf with an alias. 3 | import Vue from 'vue'; 4 | import App from './App'; 5 | 6 | Vue.config.productionTip = false; 7 | 8 | /* eslint-disable no-new */ 9 | new Vue({ 10 | el: '#app', 11 | template: '', 12 | components: { App }, 13 | }); 14 | -------------------------------------------------------------------------------- /docs/index.html: -------------------------------------------------------------------------------- 1 | vue-kanban
-------------------------------------------------------------------------------- /.eslintrc.js: -------------------------------------------------------------------------------- 1 | // http://eslint.org/docs/user-guide/configuring 2 | 3 | module.exports = { 4 | root: true, 5 | parser: 'babel-eslint', 6 | parserOptions: { 7 | sourceType: 'module' 8 | }, 9 | env: { 10 | browser: true, 11 | }, 12 | extends: 'airbnb-base', 13 | // required to lint *.vue files 14 | plugins: [ 15 | 'html' 16 | ], 17 | // check if imports actually resolve 18 | 'settings': { 19 | 'import/resolver': { 20 | 'webpack': { 21 | 'config': 'build/webpack.base.conf.js' 22 | } 23 | } 24 | }, 25 | // add your custom rules here 26 | 'rules': { 27 | // don't require .vue extension when importing 28 | 'import/extensions': ['error', 'always', { 29 | 'js': 'never', 30 | 'vue': 'never' 31 | }], 32 | // allow optionalDependencies 33 | 'import/no-extraneous-dependencies': ['error', { 34 | 'optionalDependencies': ['test/unit/index.js'] 35 | }], 36 | // allow debugger during development 37 | 'no-debugger': process.env.NODE_ENV === 'production' ? 2 : 0 38 | } 39 | } 40 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) 2018 Brock Reece 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. 22 | -------------------------------------------------------------------------------- /docs/static/js/manifest.2cafcc78e0c6c34e6ef6.js: -------------------------------------------------------------------------------- 1 | !function(e){function n(r){if(t[r])return t[r].exports;var o=t[r]={i:r,l:!1,exports:{}};return e[r].call(o.exports,o,o.exports,n),o.l=!0,o.exports}var r=window.webpackJsonp;window.webpackJsonp=function(t,c,u){for(var i,a,f,s=0,l=[];s', 8 | data() { 9 | return { 10 | stages: ['on-hold', 'in-progress', 'needs-review', 'approved'], 11 | blocks: [ 12 | { 13 | id: 1, 14 | status: 'on-hold', 15 | title: 'Test', 16 | }, 17 | ], 18 | config: { 19 | copy: true, 20 | direction: 'horizontal', 21 | }, 22 | }; 23 | }, 24 | }).$mount(); 25 | 26 | describe('VueKanban', () => { 27 | describe('installing plugin', () => { 28 | it('load component', () => { 29 | expect(typeof Vue.options.components['kanban-board']).toEqual('function'); 30 | }); 31 | }); 32 | 33 | describe('Handles props', () => { 34 | it('stages', () => { 35 | expect(typeof vm.$refs.kanban.stages).toEqual('object'); 36 | expect(vm.$refs.kanban.stages).toContain('approved'); 37 | }); 38 | 39 | it('blocks', () => { 40 | expect(typeof vm.$refs.kanban.blocks).toEqual('object'); 41 | expect(vm.$refs.kanban.blocks.map(b => b.id)).toContain(1); 42 | }); 43 | 44 | describe('config', () => { 45 | it('should be an object', () => { 46 | expect(typeof vm.$refs.kanban.config).toEqual('object'); 47 | }); 48 | 49 | it('should use values in prop', () => { 50 | expect(vm.$refs.kanban.config.copy).toEqual(true); 51 | expect(vm.$refs.kanban.config.direction).toEqual('horizontal'); 52 | }); 53 | 54 | it('should set accepts defaults', () => { 55 | expect(vm.$refs.kanban.config.accepts).toEqual(vm.$refs.kanban.accepts); 56 | }); 57 | it('should set the dragula defaults', () => { 58 | expect(vm.$refs.kanban.config.copySortSource).toEqual(false); 59 | }); 60 | }); 61 | }); 62 | 63 | describe('Assign to correct column', () => { 64 | it('stages', () => { 65 | expect(vm.$refs.kanban.getBlocks('on-hold').map(b => b.id)).toContain(1); 66 | }); 67 | 68 | it('should match snapshot', () => { 69 | expect(vm.$refs.kanban.$el).toMatchSnapshot(); 70 | }); 71 | }); 72 | 73 | describe('State machine config', () => { 74 | describe('no config', () => { 75 | test('machine should be null', () => { 76 | expect(vm.$refs.kanban.machine).toBe(null); 77 | }); 78 | 79 | test('accepts should return true', () => { 80 | expect(vm.$refs.kanban.accepts()).toBe(true); 81 | }); 82 | }); 83 | }); 84 | }); 85 | -------------------------------------------------------------------------------- /docs/static/css/app.0208ff01681785d21951f7ffc26b552c.css: -------------------------------------------------------------------------------- 1 | ul.drag-inner-list,ul.drag-list{list-style-type:none;margin:0;padding:0}.drag-container{max-width:1000px;margin:20px auto}.drag-list{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:start;-ms-flex-align:start;align-items:flex-start}@media (max-width:690px){.drag-list{display:block}}.drag-column{-webkit-box-flex:1;-ms-flex:1;flex:1;margin:0 10px;position:relative;background:rgba(0,0,0,.2);overflow:hidden}@media (max-width:690px){.drag-column{margin-bottom:30px}}.drag-column h2{font-size:.8rem;margin:0;text-transform:uppercase;font-weight:600}.drag-column-header{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:justify;-ms-flex-pack:justify;justify-content:space-between;padding:10px}.drag-inner-list{min-height:50px;color:#fff}.drag-item{padding:10px;margin:10px;height:100px;background:rgba(0,0,0,.4);transition:all .3s cubic-bezier(.23,1,.32,1)}.drag-item.is-moving{-webkit-transform:scale(1.5);transform:scale(1.5);background:rgba(0,0,0,.8)}.drag-header-more{cursor:pointer}.drag-options{position:absolute;top:44px;left:0;width:100%;height:100%;padding:10px;-webkit-transform:translateX(100%);transform:translateX(100%);opacity:0;transition:all .3s cubic-bezier(.23,1,.32,1)}.drag-options.active{-webkit-transform:translateX(0);transform:translateX(0);opacity:1}.drag-options-label{display:block;margin:0 0 5px}.drag-options-label input{opacity:.6}.drag-options-label span{display:inline-block;font-size:.9rem;font-weight:400;margin-left:5px}.gu-mirror{position:fixed!important;margin:0!important;z-index:9999!important;opacity:.8;list-style-type:none}.gu-hide{display:none!important}.gu-unselectable{-webkit-user-select:none!important;-moz-user-select:none!important;-ms-user-select:none!important;user-select:none!important}.gu-transit{opacity:.2}*{box-sizing:border-box}body{background:#33363d;color:#fff;font-family:Lato;font-weight:300;line-height:1.5;-webkit-font-smoothing:antialiased}.drag-column-on-hold .drag-column-header,.drag-column-on-hold .drag-options,.drag-column-on-hold .is-moved{background:#fb7d44}.drag-column-in-progress .drag-column-header,.drag-column-in-progress .drag-options,.drag-column-in-progress .is-moved{background:#2a92bf}.drag-column-needs-review .drag-column-header,.drag-column-needs-review .drag-options,.drag-column-needs-review .is-moved{background:#f4ce46}.drag-column-approved .drag-column-header,.drag-column-approved .drag-options,.drag-column-approved .is-moved{background:#00b961}.section{padding:20px;text-align:center}.section a{color:#fff;text-decoration:none;font-weight:300}.section h4{font-weight:400}.section h4 a{font-weight:600} -------------------------------------------------------------------------------- /test/__snapshots__/vue-kanban.spec.js.snap: -------------------------------------------------------------------------------- 1 | // Jest Snapshot v1, https://goo.gl/fbAQLP 2 | 3 | exports[`VueKanban Assign to correct column should match snapshot 1`] = ` 4 |
7 |
    10 |
  • 13 | 16 |

    17 | on-hold 18 |

    19 |     20 | 21 |
    24 | 25 |
      29 |
    • 33 | 34 | on-hold 35 | 36 | 37 |
      38 | 1 39 |
      40 |
      • 41 |
    42 | 43 |
    46 |
    • 47 |
  • 50 | 53 |

    54 | in-progress 55 |

    56 |     57 | 58 |
    61 | 62 |
      66 | 67 |
      70 | 71 |
    • 74 | 77 |

      78 | needs-review 79 |

      80 |       81 | 82 |
      85 | 86 |
        90 | 91 |
        94 | 95 |
      • 98 | 101 |

        102 | approved 103 |

        104 |         105 | 106 |
        109 | 110 |
          114 | 115 |
          118 | 119 |
        120 |
        121 | `; 122 | -------------------------------------------------------------------------------- /src/assets/kanban.scss: -------------------------------------------------------------------------------- 1 | $ease-out: all .3s cubic-bezier(0.23, 1, 0.32, 1); 2 | 3 | ul.drag-list, ul.drag-inner-list { 4 | list-style-type: none; 5 | margin: 0; 6 | padding: 0; 7 | } 8 | 9 | .drag-container { 10 | max-width: 1000px; 11 | margin: 20px auto; 12 | } 13 | 14 | .drag-list { 15 | display: flex; 16 | align-items: flex-start; 17 | 18 | @media (max-width: 690px) { 19 | display: block; 20 | } 21 | } 22 | 23 | .drag-column { 24 | flex: 1; 25 | margin: 0 10px; 26 | position: relative; 27 | background: rgba(black, 0.2); 28 | overflow: hidden; 29 | 30 | @media (max-width: 690px) { 31 | margin-bottom: 30px; 32 | } 33 | 34 | h2 { 35 | font-size: 0.8rem; 36 | margin: 0; 37 | text-transform: uppercase; 38 | font-weight: 600; 39 | } 40 | } 41 | 42 | .drag-column-header { 43 | display: flex; 44 | align-items: center; 45 | justify-content: space-between; 46 | padding: 10px; 47 | } 48 | 49 | .drag-inner-list { 50 | min-height: 50px; 51 | color: white; 52 | } 53 | 54 | .drag-item { 55 | padding: 10px; 56 | margin: 10px; 57 | height: 100px; 58 | background: rgba(black, 0.4); 59 | transition: $ease-out; 60 | 61 | &.is-moving { 62 | transform: scale(1.5); 63 | background: rgba(black, 0.8); 64 | } 65 | 66 | } 67 | 68 | .drag-header-more { 69 | cursor: pointer; 70 | } 71 | 72 | .drag-options { 73 | position: absolute; 74 | top: 44px; 75 | left: 0; 76 | width: 100%; 77 | height: 100%; 78 | padding: 10px; 79 | transform: translateX(100%); 80 | opacity: 0; 81 | transition: $ease-out; 82 | 83 | &.active { 84 | transform: translateX(0); 85 | opacity: 1; 86 | } 87 | 88 | &-label { 89 | display: block; 90 | margin: 0 0 5px 0; 91 | 92 | input { 93 | opacity: 0.6; 94 | } 95 | 96 | span { 97 | display: inline-block; 98 | font-size: 0.9rem; 99 | font-weight: 400; 100 | margin-left: 5px; 101 | } 102 | } 103 | } 104 | 105 | /* Dragula CSS */ 106 | 107 | .gu-mirror { 108 | position: fixed !important; 109 | margin: 0 !important; 110 | z-index: 9999 !important; 111 | opacity: 0.8; 112 | list-style-type: none; 113 | } 114 | 115 | .gu-hide { 116 | display: none !important; 117 | } 118 | 119 | .gu-unselectable { 120 | -webkit-user-select: none !important; 121 | -moz-user-select: none !important; 122 | -ms-user-select: none !important; 123 | user-select: none !important; 124 | } 125 | 126 | .gu-transit { 127 | opacity: 0.2; 128 | } 129 | -------------------------------------------------------------------------------- /test/state-machine.spec.js: -------------------------------------------------------------------------------- 1 | import Vue from 'vue/dist/vue'; 2 | import { Machine } from 'xstate'; 3 | import VueKanban from '../src/plugin'; 4 | 5 | Vue.use(VueKanban); 6 | 7 | const stateMachineConfig = { 8 | id: 'kanban', 9 | initial: 'on-hold', 10 | states: { 11 | 'on-hold': { 12 | on: { 13 | PICK_UP: 'in-progress', 14 | }, 15 | }, 16 | 'in-progress': { 17 | on: { 18 | RELINQUISH_TASK: 'on-hold', 19 | PUSH_TO_QA: 'needs-review', 20 | }, 21 | }, 22 | 'needs-review': { 23 | on: { 24 | REQUEST_CHANGE: 'in-progress', 25 | PASS_QA: 'approved', 26 | }, 27 | }, 28 | approved: { 29 | type: 'final', 30 | }, 31 | }, 32 | }; 33 | 34 | const vm = new Vue({ 35 | template: '', 36 | data() { 37 | return { 38 | stages: ['on-hold', 'in-progress', 'needs-review', 'approved'], 39 | blocks: [ 40 | { 41 | id: 1, 42 | status: 'on-hold', 43 | title: 'Test', 44 | }, 45 | ], 46 | stateMachineConfig, 47 | }; 48 | }, 49 | }).$mount(); 50 | 51 | describe('State Machine', () => { 52 | describe('initialise', () => { 53 | it('should build a state machine from the state machine config', () => { 54 | expect(vm.$refs.kanban.machine).toEqual(Machine(stateMachineConfig)); 55 | }); 56 | 57 | it('should behave like a state machine', () => { 58 | expect(vm.$refs.kanban.machine.transition('on-hold', 'PICK_UP').value).toEqual('in-progress'); 59 | expect(vm.$refs.kanban.machine.transition('on-hold', 'PUSH_TO_QA').value).toEqual('on-hold'); 60 | }); 61 | }); 62 | 63 | describe('accepts', () => { 64 | const [onHold, inProgress, needsReview, approved] = vm.$refs.kanban.stages.map(status => ({ 65 | dataset: { status }, 66 | })); 67 | 68 | it('should allow move from on-hold to in-progress', () => { 69 | expect(vm.$refs.kanban.accepts({}, inProgress, onHold)).toBe(true); 70 | }); 71 | 72 | it('should allow move from in-progress tp on-hold', () => { 73 | expect(vm.$refs.kanban.accepts({}, onHold, inProgress)).toBe(true); 74 | }); 75 | 76 | it('should NOT allow move from in-progress to approved', () => { 77 | expect(vm.$refs.kanban.accepts({}, approved, inProgress)).toBe(false); 78 | }); 79 | 80 | it('should NOT allow move from needs-review to on-hold', () => { 81 | expect(vm.$refs.kanban.accepts({}, onHold, needsReview)).toBe(false); 82 | }); 83 | 84 | it('should NOT allow move from approved to needs-review', () => { 85 | expect(vm.$refs.kanban.accepts({}, needsReview, approved)).toBe(false); 86 | }); 87 | }); 88 | }); 89 | -------------------------------------------------------------------------------- /docs/static/js/app.7d106d57c92bbc79dd0b.js: -------------------------------------------------------------------------------- 1 | webpackJsonp([1],{1068:function(t,s,n){var e=n(2)(n(8),n(1070),null,null);t.exports=e.exports},1069:function(t,s){t.exports={render:function(){var t=this,s=t.$createElement,n=t._self._c||s;return n("div",{attrs:{id:"app"}},[t._m(0),t._v(" "),n("Kanban",{attrs:{stages:t.statuses,blocks:t.blocks},on:{"update-block":t.updateBlock}},t._l(t.blocks,function(s){return n("div",{key:s.id,slot:s.id},[n("div",[n("strong",[t._v("id:")]),t._v(" "+t._s(s.id)+"\n ")]),t._v(" "),n("div",[t._v("\n "+t._s(s.title)+"\n ")])])}))],1)},staticRenderFns:[function(){var t=this,s=t.$createElement,n=t._self._c||s;return n("section",{staticClass:"section"},[n("h4",[t._v("\n Vue adoptation of Ettric's\n "),n("a",{attrs:{href:"//codepen.io/ettrics/pen/QbPEeg"}},[t._v("Codepen")])])])}]}},1070:function(t,s){t.exports={render:function(){var t=this,s=t.$createElement,n=t._self._c||s;return n("div",{staticClass:"drag-container"},[n("ul",{staticClass:"drag-list"},t._l(t.stages,function(s){return n("li",{key:s,staticClass:"drag-column",class:(e={},e["drag-column-"+s]=!0,e)},[n("span",{staticClass:"drag-column-header"},[n("h2",[t._v(t._s(s))])]),t._v(" "),n("div",{staticClass:"drag-options"}),t._v(" "),n("ul",{ref:"list",refInFor:!0,staticClass:"drag-inner-list",attrs:{"data-status":s}},t._l(t.getBlocks(s),function(s){return n("li",{key:s.id,staticClass:"drag-item",attrs:{"data-block-id":s.id}},[t._t(s.id,[n("strong",[t._v(t._s(s.status))]),t._v(" "),n("div",[t._v(t._s(s.id))])])],2)}))]);var e}))])},staticRenderFns:[]}},16:function(t,s){},3:function(t,s,n){n(16);var e=n(2)(n(7),n(1069),null,null);t.exports=e.exports},6:function(t,s,n){"use strict";Object.defineProperty(s,"__esModule",{value:!0});var e=n(4),a=n(3),o=n.n(a);e.a.config.productionTip=!1,new e.a({el:"#app",template:"",components:{App:o.a}})},7:function(t,s,n){"use strict";Object.defineProperty(s,"__esModule",{value:!0});var e=n(17),a=n.n(e),o=n(1064),i=(n.n(o),n(1068)),r=n.n(i);s.default={name:"app",components:{Kanban:r.a},data:function(){return{statuses:["on-hold","in-progress","needs-review","approved"],blocks:[]}},mounted:function(){for(var t=0;t<=10;t+=1)this.blocks.push({id:t,status:this.statuses[Math.floor(4*Math.random())],title:a.a.company.bs()})},methods:{updateBlock:n.i(o.debounce)(function(t,s){this.blocks.find(function(s){return s.id===Number(t)}).status=s},500)}}},8:function(t,s,n){"use strict";Object.defineProperty(s,"__esModule",{value:!0});var e=n(15),a=n.n(e);s.default={name:"KanbanBoard",props:{stages:{},blocks:{}},data:function(){return{}},computed:{localBlocks:function(){return this.blocks}},methods:{getBlocks:function(t){return this.localBlocks.filter(function(s){return s.status===t})}},mounted:function(){var t=this;a()(this.$refs.list).on("drag",function(t){t.classList.add("is-moving")}).on("drop",function(s,n){var e=0;for(e=0;e", 6 | "main": "src/plugin.js", 7 | "scripts": { 8 | "dev": "node build/dev-server.js", 9 | "start": "node build/dev-server.js", 10 | "build": "node build/build.js", 11 | "unit": "cross-env BABEL_ENV=test karma start test/unit/karma.conf.js --single-run", 12 | "test": "jest -i", 13 | "lint": "eslint --ext .js,.vue src test/unit/specs" 14 | }, 15 | "dependencies": { 16 | "dragula": "^3.7.2", 17 | "vue": "^2.2.6", 18 | "xstate": "^4.6.7" 19 | }, 20 | "devDependencies": { 21 | "autoprefixer": "^6.7.2", 22 | "babel-core": "^6.22.1", 23 | "babel-eslint": "^7.1.1", 24 | "babel-jest": "^21.2.0", 25 | "babel-loader": "^6.2.10", 26 | "babel-plugin-istanbul": "^4.1.1", 27 | "babel-plugin-transform-runtime": "^6.22.0", 28 | "babel-preset-env": "^1.3.2", 29 | "babel-preset-stage-2": "^6.22.0", 30 | "babel-register": "^6.22.0", 31 | "chai": "^3.5.0", 32 | "chalk": "^1.1.3", 33 | "connect-history-api-fallback": "^1.3.0", 34 | "copy-webpack-plugin": "^4.0.1", 35 | "cross-env": "^4.0.0", 36 | "css-loader": "^0.28.0", 37 | "eslint": "^3.19.0", 38 | "eslint-config-airbnb-base": "^11.1.3", 39 | "eslint-friendly-formatter": "^2.0.7", 40 | "eslint-import-resolver-webpack": "^0.8.1", 41 | "eslint-loader": "^1.7.1", 42 | "eslint-plugin-html": "^2.0.0", 43 | "eslint-plugin-import": "^2.2.0", 44 | "eventsource-polyfill": "^0.9.6", 45 | "express": "^4.14.1", 46 | "extract-text-webpack-plugin": "^2.0.0", 47 | "faker": "^4.1.0", 48 | "file-loader": "^0.11.1", 49 | "friendly-errors-webpack-plugin": "^1.1.3", 50 | "html-webpack-plugin": "^2.28.0", 51 | "http-proxy-middleware": "^0.17.3", 52 | "inject-loader": "^3.0.0", 53 | "jest": "^21.2.1", 54 | "jest-serializer-vue": "^0.3.0", 55 | "jest-vue": "^0.8.2", 56 | "karma": "^1.4.1", 57 | "karma-coverage": "^1.1.1", 58 | "karma-mocha": "^1.3.0", 59 | "karma-phantomjs-launcher": "^1.0.2", 60 | "karma-phantomjs-shim": "^1.4.0", 61 | "karma-sinon-chai": "^1.3.1", 62 | "karma-sourcemap-loader": "^0.3.7", 63 | "karma-spec-reporter": "0.0.30", 64 | "karma-webpack": "^2.0.2", 65 | "lodash": "^4.17.4", 66 | "lolex": "^1.5.2", 67 | "mocha": "^3.2.0", 68 | "node-sass": "^4.5.3", 69 | "opn": "^4.0.2", 70 | "optimize-css-assets-webpack-plugin": "^1.3.0", 71 | "ora": "^1.2.0", 72 | "phantomjs-prebuilt": "^2.1.14", 73 | "rimraf": "^2.6.0", 74 | "sass-loader": "^6.0.5", 75 | "semver": "^5.3.0", 76 | "shelljs": "^0.7.6", 77 | "sinon": "^2.1.0", 78 | "sinon-chai": "^2.8.0", 79 | "url-loader": "^0.5.8", 80 | "vue-loader": "^11.3.4", 81 | "vue-style-loader": "^2.0.5", 82 | "vue-template-compiler": "^2.2.6", 83 | "webpack": "^2.3.3", 84 | "webpack-bundle-analyzer": "^2.2.1", 85 | "webpack-dev-middleware": "^1.10.0", 86 | "webpack-hot-middleware": "^2.18.0", 87 | "webpack-merge": "^4.1.0" 88 | }, 89 | "engines": { 90 | "node": ">= 4.0.0", 91 | "npm": ">= 3.0.0" 92 | }, 93 | "browserslist": [ 94 | "> 1%", 95 | "last 2 versions", 96 | "not ie <= 8" 97 | ], 98 | "jest": { 99 | "moduleFileExtensions": [ 100 | "js", 101 | "vue" 102 | ], 103 | "moduleNameMapper": { 104 | "^@/(.*)$": "/$1" 105 | }, 106 | "transform": { 107 | "^.+\\.js$": "/node_modules/babel-jest", 108 | ".*\\.(vue)$": "/node_modules/jest-vue" 109 | }, 110 | "snapshotSerializers": [ 111 | "/node_modules/jest-serializer-vue" 112 | ], 113 | "mapCoverage": true 114 | } 115 | } 116 | -------------------------------------------------------------------------------- /src/App.vue: -------------------------------------------------------------------------------- 1 | 30 | 31 | 71 | 72 | 163 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # vue-kanban [![Build Status](https://travis-ci.org/BrockReece/vue-kanban.svg?branch=master)](https://travis-ci.org/BrockReece/vue-kanban) [![npm version](https://badge.fury.io/js/vue-kanban.svg)](https://badge.fury.io/js/vue-kanban) 2 | 3 | > A drag and drop kanban board component 4 | 5 | ### [Demo](https://vue-kanban.netlify.com/) 6 | 7 | ## Installation 8 | 9 | ### Vue CLI 10 | You can install this plugin through the [Vue CLI](https://cli.vuejs.org/) 11 | ``` 12 | vue add vue-cli-plugin-kanban 13 | ``` 14 | 15 | ### Manual installation 16 | 17 | Add vue-kanban to your project with npm 18 | ``` bash 19 | npm install vue-kanban 20 | ``` 21 | 22 | ... or yarn 23 | ```bash 24 | yarn add vue-kanban 25 | ``` 26 | 27 | Then install the plugin in your entry file 28 | ```js 29 | import vueKanban from 'vue-kanban' 30 | 31 | Vue.use(vueKanban) 32 | ``` 33 | 34 | ## Basic Usage 35 | 36 | The `kanban-board` component has been added globally to your project and so can be used in your templates without having to explicitly import it. 37 | ```html 38 | 39 | ``` 40 | 41 | ### Required Props 42 | - **stages**: an array of stages for the kanban board 43 | - **blocks**: an array of objects that will make up the blocks on the kanban board 44 | ```js 45 | { 46 | stages: ['on-hold', 'in-progress', 'needs-review', 'approved'], 47 | blocks: [ 48 | { 49 | id: 1, 50 | status: 'on-hold', 51 | title: 'Test', 52 | }, 53 | ], 54 | } 55 | ``` 56 | 57 | ### Advanced Props 58 | - **config**: an object of dragula options to be passed to the kanban board, see [dragula docs](https://github.com/bevacqua/dragula#dragulacontainers-options) for more details 59 | - **state-machine-config**: an xstate config object that can be used to manage the kanban board, read [here](#state-machine) for more details 60 | ```js 61 | { 62 | config: { 63 | // Don't allow blocks to be moved out of the approved stage 64 | accepts(block, target, source) { 65 | return source.dataset.status !== 'approved', 66 | } 67 | } 68 | } 69 | ``` 70 | 71 | ### Receiving Changes 72 | The component will emit an event when a block is moved 73 | 74 | ```html 75 | 76 | 85 | ``` 86 | 87 | ## Add some style 88 | I have included a scss stylesheet in this repo as a starting point that can be used in your project 89 | ```html 90 | 93 | ``` 94 | 95 | ### Customize the kanban blocks 96 | Each block has a named slot which can be extended from the parent, like so... 97 | ```html 98 | 99 |
        100 |

        {{ stage }}

        101 |
        102 |
        103 |
        104 | id: {{ block.id }} 105 |
        106 |
        107 | {{ block.title }} 108 |
        109 |
        110 |         111 | ``` 112 | 113 | ### State machine 114 | Vue-kanban is now compatible with [xstate](https://xstate.js.org/docs/) state machines. 115 | 116 | You can pass an xstate config as a prop and the Kanban board will use the state machine to restrict which moves are allowed. 117 | 118 | As an example we can achieve the following workflow 119 | 120 | ![Read more words!](/src/assets/fsm.png) 121 | 122 | With the following config 123 | ```js 124 | stateMachineConfig: { 125 | id: 'kanban', 126 | initial: 'on-hold', 127 | states: { 128 | 'on-hold': { 129 | on: { 130 | PICK_UP: 'in-progress', 131 | }, 132 | }, 133 | 'in-progress': { 134 | on: { 135 | RELINQUISH_TASK: 'on-hold', 136 | PUSH_TO_QA: 'needs-review', 137 | }, 138 | }, 139 | 'needs-review': { 140 | on: { 141 | REQUEST_CHANGE: 'in-progress', 142 | PASS_QA: 'approved', 143 | }, 144 | }, 145 | approved: { 146 | type: 'final', 147 | }, 148 | }, 149 | }, 150 | ``` 151 | -------------------------------------------------------------------------------- /docs/static/css/app.0208ff01681785d21951f7ffc26b552c.css.map: -------------------------------------------------------------------------------- 1 | {"version":3,"sources":["webpack:///./src/App.vue"],"names":[],"mappings":"AACA,gCACE,qBACA,SACA,SAAW,CAEb,gBACE,iBACA,gBAAkB,CAEpB,WACE,oBACA,oBACA,aACA,wBACI,qBACI,sBAAwB,CAElC,yBACA,WACM,aAAe,CACpB,CAED,aACE,mBACI,WACI,OACR,cACA,kBACA,0BACA,eAAiB,CAEnB,yBACA,aACM,kBAAoB,CACzB,CAED,gBACI,gBACA,SACA,yBACA,eAAiB,CAErB,oBACE,oBACA,oBACA,aACA,yBACI,sBACI,mBACR,yBACI,sBACI,8BACR,YAAc,CAEhB,iBACE,gBACA,UAAa,CAEf,WACE,aACA,YACA,aACA,0BACA,4CAAoD,CAEtD,qBACI,6BACQ,qBACR,yBAA+B,CAEnC,kBACE,cAAgB,CAElB,cACE,kBACA,SACA,OACA,WACA,YACA,aACA,mCACQ,2BACR,UACA,4CAAoD,CAEtD,qBACI,gCACQ,wBACR,SAAW,CAEf,oBACI,cACA,cAAkB,CAEtB,0BACM,UAAa,CAEnB,yBACM,qBACA,gBACA,gBACA,eAAiB,CAIvB,WACE,yBACA,mBACA,uBACA,WACA,oBAAsB,CAExB,SACE,sBAAyB,CAE3B,iBACE,mCACA,gCACA,+BACA,0BAA6B,CAE/B,YACE,UAAa,CAEf,EACE,qBAAuB,CAEzB,KACE,mBACA,WACA,iBACA,gBACA,gBACA,kCAAoC,CAEtC,2GAGE,kBAAoB,CAEtB,uHAGE,kBAAoB,CAEtB,0HAGE,kBAAoB,CAEtB,8GAGE,kBAAoB,CAEtB,SACE,aACA,iBAAmB,CAErB,WACI,WACA,qBACA,eAAiB,CAErB,YACI,eAAiB,CAErB,cACM,eAAiB","file":"static/css/app.0208ff01681785d21951f7ffc26b552c.css","sourcesContent":["\nul.drag-list, ul.drag-inner-list {\n list-style-type: none;\n margin: 0;\n padding: 0;\n}\n.drag-container {\n max-width: 1000px;\n margin: 20px auto;\n}\n.drag-list {\n display: -webkit-box;\n display: -ms-flexbox;\n display: flex;\n -webkit-box-align: start;\n -ms-flex-align: start;\n align-items: flex-start;\n}\n@media (max-width: 690px) {\n.drag-list {\n display: block;\n}\n}\n.drag-column {\n -webkit-box-flex: 1;\n -ms-flex: 1;\n flex: 1;\n margin: 0 10px;\n position: relative;\n background: rgba(0, 0, 0, 0.2);\n overflow: hidden;\n}\n@media (max-width: 690px) {\n.drag-column {\n margin-bottom: 30px;\n}\n}\n.drag-column h2 {\n font-size: 0.8rem;\n margin: 0;\n text-transform: uppercase;\n font-weight: 600;\n}\n.drag-column-header {\n display: -webkit-box;\n display: -ms-flexbox;\n display: flex;\n -webkit-box-align: center;\n -ms-flex-align: center;\n align-items: center;\n -webkit-box-pack: justify;\n -ms-flex-pack: justify;\n justify-content: space-between;\n padding: 10px;\n}\n.drag-inner-list {\n min-height: 50px;\n color: white;\n}\n.drag-item {\n padding: 10px;\n margin: 10px;\n height: 100px;\n background: rgba(0, 0, 0, 0.4);\n transition: all 0.3s cubic-bezier(0.23, 1, 0.32, 1);\n}\n.drag-item.is-moving {\n -webkit-transform: scale(1.5);\n transform: scale(1.5);\n background: rgba(0, 0, 0, 0.8);\n}\n.drag-header-more {\n cursor: pointer;\n}\n.drag-options {\n position: absolute;\n top: 44px;\n left: 0;\n width: 100%;\n height: 100%;\n padding: 10px;\n -webkit-transform: translateX(100%);\n transform: translateX(100%);\n opacity: 0;\n transition: all 0.3s cubic-bezier(0.23, 1, 0.32, 1);\n}\n.drag-options.active {\n -webkit-transform: translateX(0);\n transform: translateX(0);\n opacity: 1;\n}\n.drag-options-label {\n display: block;\n margin: 0 0 5px 0;\n}\n.drag-options-label input {\n opacity: 0.6;\n}\n.drag-options-label span {\n display: inline-block;\n font-size: 0.9rem;\n font-weight: 400;\n margin-left: 5px;\n}\n\n/* Dragula CSS */\n.gu-mirror {\n position: fixed !important;\n margin: 0 !important;\n z-index: 9999 !important;\n opacity: 0.8;\n list-style-type: none;\n}\n.gu-hide {\n display: none !important;\n}\n.gu-unselectable {\n -webkit-user-select: none !important;\n -moz-user-select: none !important;\n -ms-user-select: none !important;\n user-select: none !important;\n}\n.gu-transit {\n opacity: 0.2;\n}\n* {\n box-sizing: border-box;\n}\nbody {\n background: #33363D;\n color: white;\n font-family: 'Lato';\n font-weight: 300;\n line-height: 1.5;\n -webkit-font-smoothing: antialiased;\n}\n.drag-column-on-hold .drag-column-header,\n.drag-column-on-hold .is-moved,\n.drag-column-on-hold .drag-options {\n background: #FB7D44;\n}\n.drag-column-in-progress .drag-column-header,\n.drag-column-in-progress .is-moved,\n.drag-column-in-progress .drag-options {\n background: #2A92BF;\n}\n.drag-column-needs-review .drag-column-header,\n.drag-column-needs-review .is-moved,\n.drag-column-needs-review .drag-options {\n background: #F4CE46;\n}\n.drag-column-approved .drag-column-header,\n.drag-column-approved .is-moved,\n.drag-column-approved .drag-options {\n background: #00B961;\n}\n.section {\n padding: 20px;\n text-align: center;\n}\n.section a {\n color: white;\n text-decoration: none;\n font-weight: 300;\n}\n.section h4 {\n font-weight: 400;\n}\n.section h4 a {\n font-weight: 600;\n}\n\n\n\n// WEBPACK FOOTER //\n// ./src/App.vue"],"sourceRoot":""} -------------------------------------------------------------------------------- /src/components/Kanban.vue: -------------------------------------------------------------------------------- 1 | 26 | 27 | 177 | -------------------------------------------------------------------------------- /docs/static/js/manifest.2cafcc78e0c6c34e6ef6.js.map: -------------------------------------------------------------------------------- 1 | {"version":3,"sources":["webpack:///static/js/manifest.2cafcc78e0c6c34e6ef6.js","webpack:///webpack/bootstrap c357439cb73de930b283"],"names":["modules","__webpack_require__","moduleId","installedModules","exports","module","i","l","call","parentJsonpFunction","window","chunkIds","moreModules","executeModules","chunkId","result","resolves","length","installedChunks","push","Object","prototype","hasOwnProperty","shift","s","2","e","onScriptComplete","script","onerror","onload","clearTimeout","timeout","chunk","Error","undefined","Promise","resolve","promise","reject","head","document","getElementsByTagName","createElement","type","charset","async","nc","setAttribute","src","p","0","1","setTimeout","appendChild","m","c","value","d","name","getter","o","defineProperty","configurable","enumerable","get","n","__esModule","object","property","oe","err","console","error"],"mappings":"CAAS,SAAUA,GCuCnB,QAAAC,GAAAC,GAGA,GAAAC,EAAAD,GACA,MAAAC,GAAAD,GAAAE,OAGA,IAAAC,GAAAF,EAAAD,IACAI,EAAAJ,EACAK,GAAA,EACAH,WAUA,OANAJ,GAAAE,GAAAM,KAAAH,EAAAD,QAAAC,IAAAD,QAAAH,GAGAI,EAAAE,GAAA,EAGAF,EAAAD,QA1DA,GAAAK,GAAAC,OAAA,YACAA,QAAA,sBAAAC,EAAAC,EAAAC,GAIA,IADA,GAAAX,GAAAY,EAAAC,EAAAT,EAAA,EAAAU,KACQV,EAAAK,EAAAM,OAAoBX,IAC5BQ,EAAAH,EAAAL,GACAY,EAAAJ,IACAE,EAAAG,KAAAD,EAAAJ,GAAA,IAEAI,EAAAJ,GAAA,CAEA,KAAAZ,IAAAU,GACAQ,OAAAC,UAAAC,eAAAd,KAAAI,EAAAV,KACAF,EAAAE,GAAAU,EAAAV,GAIA,KADAO,KAAAE,EAAAC,EAAAC,GACAG,EAAAC,QACAD,EAAAO,SAEA,IAAAV,EACA,IAAAP,EAAA,EAAYA,EAAAO,EAAAI,OAA2BX,IACvCS,EAAAd,IAAAuB,EAAAX,EAAAP,GAGA,OAAAS,GAIA,IAAAZ,MAGAe,GACAO,EAAA,EA6BAxB,GAAAyB,EAAA,SAAAZ,GA8BA,QAAAa,KAEAC,EAAAC,QAAAD,EAAAE,OAAA,KACAC,aAAAC,EACA,IAAAC,GAAAf,EAAAJ,EACA,KAAAmB,IACAA,GACAA,EAAA,MAAAC,OAAA,iBAAApB,EAAA,aAEAI,EAAAJ,OAAAqB,IAtCA,OAAAjB,EAAAJ,GACA,MAAAsB,SAAAC,SAIA,IAAAnB,EAAAJ,GACA,MAAAI,GAAAJ,GAAA,EAIA,IAAAwB,GAAA,GAAAF,SAAA,SAAAC,EAAAE,GACArB,EAAAJ,IAAAuB,EAAAE,IAEArB,GAAAJ,GAAA,GAAAwB,CAGA,IAAAE,GAAAC,SAAAC,qBAAA,WACAd,EAAAa,SAAAE,cAAA,SACAf,GAAAgB,KAAA,kBACAhB,EAAAiB,QAAA,QACAjB,EAAAkB,OAAA,EACAlB,EAAAI,QAAA,KAEA/B,EAAA8C,IACAnB,EAAAoB,aAAA,QAAA/C,EAAA8C,IAEAnB,EAAAqB,IAAAhD,EAAAiD,EAAA,aAAApC,EAAA,KAAwEqC,EAAA,uBAAAC,EAAA,wBAAsDtC,GAAA,KAC9H,IAAAkB,GAAAqB,WAAA1B,EAAA,KAgBA,OAfAC,GAAAC,QAAAD,EAAAE,OAAAH,EAaAa,EAAAc,YAAA1B,GAEAU,GAIArC,EAAAsD,EAAAvD,EAGAC,EAAAuD,EAAArD,EAGAF,EAAAK,EAAA,SAAAmD,GAA2C,MAAAA,IAG3CxD,EAAAyD,EAAA,SAAAtD,EAAAuD,EAAAC,GACA3D,EAAA4D,EAAAzD,EAAAuD,IACAvC,OAAA0C,eAAA1D,EAAAuD,GACAI,cAAA,EACAC,YAAA,EACAC,IAAAL,KAMA3D,EAAAiE,EAAA,SAAA7D,GACA,GAAAuD,GAAAvD,KAAA8D,WACA,WAA2B,MAAA9D,GAAA,SAC3B,WAAiC,MAAAA,GAEjC,OADAJ,GAAAyD,EAAAE,EAAA,IAAAA,GACAA,GAIA3D,EAAA4D,EAAA,SAAAO,EAAAC,GAAsD,MAAAjD,QAAAC,UAAAC,eAAAd,KAAA4D,EAAAC,IAGtDpE,EAAAiD,EAAA,eAGAjD,EAAAqE,GAAA,SAAAC,GAA8D,KAApBC,SAAAC,MAAAF,GAAoBA","file":"static/js/manifest.2cafcc78e0c6c34e6ef6.js","sourcesContent":["/******/ (function(modules) { // webpackBootstrap\n/******/ \t// install a JSONP callback for chunk loading\n/******/ \tvar parentJsonpFunction = window[\"webpackJsonp\"];\n/******/ \twindow[\"webpackJsonp\"] = function webpackJsonpCallback(chunkIds, moreModules, executeModules) {\n/******/ \t\t// add \"moreModules\" to the modules object,\n/******/ \t\t// then flag all \"chunkIds\" as loaded and fire callback\n/******/ \t\tvar moduleId, chunkId, i = 0, resolves = [], result;\n/******/ \t\tfor(;i < chunkIds.length; i++) {\n/******/ \t\t\tchunkId = chunkIds[i];\n/******/ \t\t\tif(installedChunks[chunkId]) {\n/******/ \t\t\t\tresolves.push(installedChunks[chunkId][0]);\n/******/ \t\t\t}\n/******/ \t\t\tinstalledChunks[chunkId] = 0;\n/******/ \t\t}\n/******/ \t\tfor(moduleId in moreModules) {\n/******/ \t\t\tif(Object.prototype.hasOwnProperty.call(moreModules, moduleId)) {\n/******/ \t\t\t\tmodules[moduleId] = moreModules[moduleId];\n/******/ \t\t\t}\n/******/ \t\t}\n/******/ \t\tif(parentJsonpFunction) parentJsonpFunction(chunkIds, moreModules, executeModules);\n/******/ \t\twhile(resolves.length) {\n/******/ \t\t\tresolves.shift()();\n/******/ \t\t}\n/******/ \t\tif(executeModules) {\n/******/ \t\t\tfor(i=0; i < executeModules.length; i++) {\n/******/ \t\t\t\tresult = __webpack_require__(__webpack_require__.s = executeModules[i]);\n/******/ \t\t\t}\n/******/ \t\t}\n/******/ \t\treturn result;\n/******/ \t};\n/******/\n/******/ \t// The module cache\n/******/ \tvar installedModules = {};\n/******/\n/******/ \t// objects to store loaded and loading chunks\n/******/ \tvar installedChunks = {\n/******/ \t\t2: 0\n/******/ \t};\n/******/\n/******/ \t// The require function\n/******/ \tfunction __webpack_require__(moduleId) {\n/******/\n/******/ \t\t// Check if module is in cache\n/******/ \t\tif(installedModules[moduleId]) {\n/******/ \t\t\treturn installedModules[moduleId].exports;\n/******/ \t\t}\n/******/ \t\t// Create a new module (and put it into the cache)\n/******/ \t\tvar module = installedModules[moduleId] = {\n/******/ \t\t\ti: moduleId,\n/******/ \t\t\tl: false,\n/******/ \t\t\texports: {}\n/******/ \t\t};\n/******/\n/******/ \t\t// Execute the module function\n/******/ \t\tmodules[moduleId].call(module.exports, module, module.exports, __webpack_require__);\n/******/\n/******/ \t\t// Flag the module as loaded\n/******/ \t\tmodule.l = true;\n/******/\n/******/ \t\t// Return the exports of the module\n/******/ \t\treturn module.exports;\n/******/ \t}\n/******/\n/******/ \t// This file contains only the entry chunk.\n/******/ \t// The chunk loading function for additional chunks\n/******/ \t__webpack_require__.e = function requireEnsure(chunkId) {\n/******/ \t\tif(installedChunks[chunkId] === 0) {\n/******/ \t\t\treturn Promise.resolve();\n/******/ \t\t}\n/******/\n/******/ \t\t// a Promise means \"currently loading\".\n/******/ \t\tif(installedChunks[chunkId]) {\n/******/ \t\t\treturn installedChunks[chunkId][2];\n/******/ \t\t}\n/******/\n/******/ \t\t// setup Promise in chunk cache\n/******/ \t\tvar promise = new Promise(function(resolve, reject) {\n/******/ \t\t\tinstalledChunks[chunkId] = [resolve, reject];\n/******/ \t\t});\n/******/ \t\tinstalledChunks[chunkId][2] = promise;\n/******/\n/******/ \t\t// start chunk loading\n/******/ \t\tvar head = document.getElementsByTagName('head')[0];\n/******/ \t\tvar script = document.createElement('script');\n/******/ \t\tscript.type = 'text/javascript';\n/******/ \t\tscript.charset = 'utf-8';\n/******/ \t\tscript.async = true;\n/******/ \t\tscript.timeout = 120000;\n/******/\n/******/ \t\tif (__webpack_require__.nc) {\n/******/ \t\t\tscript.setAttribute(\"nonce\", __webpack_require__.nc);\n/******/ \t\t}\n/******/ \t\tscript.src = __webpack_require__.p + \"static/js/\" + chunkId + \".\" + {\"0\":\"f499bbb553bd68d3515f\",\"1\":\"7d106d57c92bbc79dd0b\"}[chunkId] + \".js\";\n/******/ \t\tvar timeout = setTimeout(onScriptComplete, 120000);\n/******/ \t\tscript.onerror = script.onload = onScriptComplete;\n/******/ \t\tfunction onScriptComplete() {\n/******/ \t\t\t// avoid mem leaks in IE.\n/******/ \t\t\tscript.onerror = script.onload = null;\n/******/ \t\t\tclearTimeout(timeout);\n/******/ \t\t\tvar chunk = installedChunks[chunkId];\n/******/ \t\t\tif(chunk !== 0) {\n/******/ \t\t\t\tif(chunk) {\n/******/ \t\t\t\t\tchunk[1](new Error('Loading chunk ' + chunkId + ' failed.'));\n/******/ \t\t\t\t}\n/******/ \t\t\t\tinstalledChunks[chunkId] = undefined;\n/******/ \t\t\t}\n/******/ \t\t};\n/******/ \t\thead.appendChild(script);\n/******/\n/******/ \t\treturn promise;\n/******/ \t};\n/******/\n/******/ \t// expose the modules object (__webpack_modules__)\n/******/ \t__webpack_require__.m = modules;\n/******/\n/******/ \t// expose the module cache\n/******/ \t__webpack_require__.c = installedModules;\n/******/\n/******/ \t// identity function for calling harmony imports with the correct context\n/******/ \t__webpack_require__.i = function(value) { return value; };\n/******/\n/******/ \t// define getter function for harmony exports\n/******/ \t__webpack_require__.d = function(exports, name, getter) {\n/******/ \t\tif(!__webpack_require__.o(exports, name)) {\n/******/ \t\t\tObject.defineProperty(exports, name, {\n/******/ \t\t\t\tconfigurable: false,\n/******/ \t\t\t\tenumerable: true,\n/******/ \t\t\t\tget: getter\n/******/ \t\t\t});\n/******/ \t\t}\n/******/ \t};\n/******/\n/******/ \t// getDefaultExport function for compatibility with non-harmony modules\n/******/ \t__webpack_require__.n = function(module) {\n/******/ \t\tvar getter = module && module.__esModule ?\n/******/ \t\t\tfunction getDefault() { return module['default']; } :\n/******/ \t\t\tfunction getModuleExports() { return module; };\n/******/ \t\t__webpack_require__.d(getter, 'a', getter);\n/******/ \t\treturn getter;\n/******/ \t};\n/******/\n/******/ \t// Object.prototype.hasOwnProperty.call\n/******/ \t__webpack_require__.o = function(object, property) { return Object.prototype.hasOwnProperty.call(object, property); };\n/******/\n/******/ \t// __webpack_public_path__\n/******/ \t__webpack_require__.p = \"/vue-kanban/\";\n/******/\n/******/ \t// on error function for async loading\n/******/ \t__webpack_require__.oe = function(err) { console.error(err); throw err; };\n/******/ })\n/************************************************************************/\n/******/ ([]);\n\n\n// WEBPACK FOOTER //\n// static/js/manifest.2cafcc78e0c6c34e6ef6.js"," \t// install a JSONP callback for chunk loading\n \tvar parentJsonpFunction = window[\"webpackJsonp\"];\n \twindow[\"webpackJsonp\"] = function webpackJsonpCallback(chunkIds, moreModules, executeModules) {\n \t\t// add \"moreModules\" to the modules object,\n \t\t// then flag all \"chunkIds\" as loaded and fire callback\n \t\tvar moduleId, chunkId, i = 0, resolves = [], result;\n \t\tfor(;i < chunkIds.length; i++) {\n \t\t\tchunkId = chunkIds[i];\n \t\t\tif(installedChunks[chunkId]) {\n \t\t\t\tresolves.push(installedChunks[chunkId][0]);\n \t\t\t}\n \t\t\tinstalledChunks[chunkId] = 0;\n \t\t}\n \t\tfor(moduleId in moreModules) {\n \t\t\tif(Object.prototype.hasOwnProperty.call(moreModules, moduleId)) {\n \t\t\t\tmodules[moduleId] = moreModules[moduleId];\n \t\t\t}\n \t\t}\n \t\tif(parentJsonpFunction) parentJsonpFunction(chunkIds, moreModules, executeModules);\n \t\twhile(resolves.length) {\n \t\t\tresolves.shift()();\n \t\t}\n \t\tif(executeModules) {\n \t\t\tfor(i=0; i < executeModules.length; i++) {\n \t\t\t\tresult = __webpack_require__(__webpack_require__.s = executeModules[i]);\n \t\t\t}\n \t\t}\n \t\treturn result;\n \t};\n\n \t// The module cache\n \tvar installedModules = {};\n\n \t// objects to store loaded and loading chunks\n \tvar installedChunks = {\n \t\t2: 0\n \t};\n\n \t// The require function\n \tfunction __webpack_require__(moduleId) {\n\n \t\t// Check if module is in cache\n \t\tif(installedModules[moduleId]) {\n \t\t\treturn installedModules[moduleId].exports;\n \t\t}\n \t\t// Create a new module (and put it into the cache)\n \t\tvar module = installedModules[moduleId] = {\n \t\t\ti: moduleId,\n \t\t\tl: false,\n \t\t\texports: {}\n \t\t};\n\n \t\t// Execute the module function\n \t\tmodules[moduleId].call(module.exports, module, module.exports, __webpack_require__);\n\n \t\t// Flag the module as loaded\n \t\tmodule.l = true;\n\n \t\t// Return the exports of the module\n \t\treturn module.exports;\n \t}\n\n \t// This file contains only the entry chunk.\n \t// The chunk loading function for additional chunks\n \t__webpack_require__.e = function requireEnsure(chunkId) {\n \t\tif(installedChunks[chunkId] === 0) {\n \t\t\treturn Promise.resolve();\n \t\t}\n\n \t\t// a Promise means \"currently loading\".\n \t\tif(installedChunks[chunkId]) {\n \t\t\treturn installedChunks[chunkId][2];\n \t\t}\n\n \t\t// setup Promise in chunk cache\n \t\tvar promise = new Promise(function(resolve, reject) {\n \t\t\tinstalledChunks[chunkId] = [resolve, reject];\n \t\t});\n \t\tinstalledChunks[chunkId][2] = promise;\n\n \t\t// start chunk loading\n \t\tvar head = document.getElementsByTagName('head')[0];\n \t\tvar script = document.createElement('script');\n \t\tscript.type = 'text/javascript';\n \t\tscript.charset = 'utf-8';\n \t\tscript.async = true;\n \t\tscript.timeout = 120000;\n\n \t\tif (__webpack_require__.nc) {\n \t\t\tscript.setAttribute(\"nonce\", __webpack_require__.nc);\n \t\t}\n \t\tscript.src = __webpack_require__.p + \"static/js/\" + chunkId + \".\" + {\"0\":\"f499bbb553bd68d3515f\",\"1\":\"7d106d57c92bbc79dd0b\"}[chunkId] + \".js\";\n \t\tvar timeout = setTimeout(onScriptComplete, 120000);\n \t\tscript.onerror = script.onload = onScriptComplete;\n \t\tfunction onScriptComplete() {\n \t\t\t// avoid mem leaks in IE.\n \t\t\tscript.onerror = script.onload = null;\n \t\t\tclearTimeout(timeout);\n \t\t\tvar chunk = installedChunks[chunkId];\n \t\t\tif(chunk !== 0) {\n \t\t\t\tif(chunk) {\n \t\t\t\t\tchunk[1](new Error('Loading chunk ' + chunkId + ' failed.'));\n \t\t\t\t}\n \t\t\t\tinstalledChunks[chunkId] = undefined;\n \t\t\t}\n \t\t};\n \t\thead.appendChild(script);\n\n \t\treturn promise;\n \t};\n\n \t// expose the modules object (__webpack_modules__)\n \t__webpack_require__.m = modules;\n\n \t// expose the module cache\n \t__webpack_require__.c = installedModules;\n\n \t// identity function for calling harmony imports with the correct context\n \t__webpack_require__.i = function(value) { return value; };\n\n \t// define getter function for harmony exports\n \t__webpack_require__.d = function(exports, name, getter) {\n \t\tif(!__webpack_require__.o(exports, name)) {\n \t\t\tObject.defineProperty(exports, name, {\n \t\t\t\tconfigurable: false,\n \t\t\t\tenumerable: true,\n \t\t\t\tget: getter\n \t\t\t});\n \t\t}\n \t};\n\n \t// getDefaultExport function for compatibility with non-harmony modules\n \t__webpack_require__.n = function(module) {\n \t\tvar getter = module && module.__esModule ?\n \t\t\tfunction getDefault() { return module['default']; } :\n \t\t\tfunction getModuleExports() { return module; };\n \t\t__webpack_require__.d(getter, 'a', getter);\n \t\treturn getter;\n \t};\n\n \t// Object.prototype.hasOwnProperty.call\n \t__webpack_require__.o = function(object, property) { return Object.prototype.hasOwnProperty.call(object, property); };\n\n \t// __webpack_public_path__\n \t__webpack_require__.p = \"/vue-kanban/\";\n\n \t// on error function for async loading\n \t__webpack_require__.oe = function(err) { console.error(err); throw err; };\n\n\n\n// WEBPACK FOOTER //\n// webpack/bootstrap c357439cb73de930b283"],"sourceRoot":""} -------------------------------------------------------------------------------- /docs/static/js/app.7d106d57c92bbc79dd0b.js.map: -------------------------------------------------------------------------------- 1 | {"version":3,"sources":["webpack:///static/js/app.7d106d57c92bbc79dd0b.js","webpack:///./src/components/Kanban.vue","webpack:///./src/App.vue?c7ea","webpack:///./src/components/Kanban.vue?f3dc","webpack:///./src/App.vue?fc6a","webpack:///./src/main.js","webpack:///App.vue","webpack:///Kanban.vue"],"names":["webpackJsonp","1068","module","exports","__webpack_require__","Component","1069","render","_vm","this","_h","$createElement","_c","_self","attrs","id","_m","_v","stages","statuses","blocks","on","update-block","updateBlock","_l","item","key","slot","_s","title","staticRenderFns","staticClass","href","1070","stage","class","_obj","ref","refInFor","data-status","getBlocks","block","data-block-id","_t","status","16","3","6","__webpack_exports__","Object","defineProperty","value","__WEBPACK_IMPORTED_MODULE_0_vue__","__WEBPACK_IMPORTED_MODULE_1__App__","__WEBPACK_IMPORTED_MODULE_1__App___default","n","config","productionTip","el","template","components","App","a","7","__WEBPACK_IMPORTED_MODULE_0_faker__","__WEBPACK_IMPORTED_MODULE_0_faker___default","__WEBPACK_IMPORTED_MODULE_1_lodash__","__WEBPACK_IMPORTED_MODULE_2__components_Kanban__","__WEBPACK_IMPORTED_MODULE_2__components_Kanban___default","name","Kanban","data","mounted","i","push","Math","floor","random","company","bs","methods","find","b","Number","8","__WEBPACK_IMPORTED_MODULE_0_dragula__","__WEBPACK_IMPORTED_MODULE_0_dragula___default","props","computed","localBlocks","filter","_this","$refs","list","classList","add","index","children","length","contains","$emit","dataset","blockId","remove","window","setTimeout"],"mappings":"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","file":"static/js/app.7d106d57c92bbc79dd0b.js","sourcesContent":["webpackJsonp([1],{\n\n/***/ 1068:\n/***/ (function(module, exports, __webpack_require__) {\n\nvar Component = __webpack_require__(2)(\n /* script */\n __webpack_require__(8),\n /* template */\n __webpack_require__(1070),\n /* scopeId */\n null,\n /* cssModules */\n null\n)\n\nmodule.exports = Component.exports\n\n\n/***/ }),\n\n/***/ 1069:\n/***/ (function(module, exports) {\n\nmodule.exports={render:function (){var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;\n return _c('div', {\n attrs: {\n \"id\": \"app\"\n }\n }, [_vm._m(0), _vm._v(\" \"), _c('Kanban', {\n attrs: {\n \"stages\": _vm.statuses,\n \"blocks\": _vm.blocks\n },\n on: {\n \"update-block\": _vm.updateBlock\n }\n }, _vm._l((_vm.blocks), function(item) {\n return _c('div', {\n key: item.id,\n slot: item.id\n }, [_c('div', [_c('strong', [_vm._v(\"id:\")]), _vm._v(\" \" + _vm._s(item.id) + \"\\n \")]), _vm._v(\" \"), _c('div', [_vm._v(\"\\n \" + _vm._s(item.title) + \"\\n \")])])\n }))], 1)\n},staticRenderFns: [function (){var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;\n return _c('section', {\n staticClass: \"section\"\n }, [_c('h4', [_vm._v(\"\\n Vue adoptation of Ettric's\\n \"), _c('a', {\n attrs: {\n \"href\": \"//codepen.io/ettrics/pen/QbPEeg\"\n }\n }, [_vm._v(\"Codepen\")])])])\n}]}\n\n/***/ }),\n\n/***/ 1070:\n/***/ (function(module, exports) {\n\nmodule.exports={render:function (){var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;\n return _c('div', {\n staticClass: \"drag-container\"\n }, [_c('ul', {\n staticClass: \"drag-list\"\n }, _vm._l((_vm.stages), function(stage) {\n return _c('li', {\n key: stage,\n staticClass: \"drag-column\",\n class: ( _obj = {}, _obj['drag-column-' + stage] = true, _obj )\n }, [_c('span', {\n staticClass: \"drag-column-header\"\n }, [_c('h2', [_vm._v(_vm._s(stage))])]), _vm._v(\" \"), _c('div', {\n staticClass: \"drag-options\"\n }), _vm._v(\" \"), _c('ul', {\n ref: \"list\",\n refInFor: true,\n staticClass: \"drag-inner-list\",\n attrs: {\n \"data-status\": stage\n }\n }, _vm._l((_vm.getBlocks(stage)), function(block) {\n return _c('li', {\n key: block.id,\n staticClass: \"drag-item\",\n attrs: {\n \"data-block-id\": block.id\n }\n }, [_vm._t(block.id, [_c('strong', [_vm._v(_vm._s(block.status))]), _vm._v(\" \"), _c('div', [_vm._v(_vm._s(block.id))])])], 2)\n }))])\n var _obj;\n }))])\n},staticRenderFns: []}\n\n/***/ }),\n\n/***/ 16:\n/***/ (function(module, exports) {\n\n// removed by extract-text-webpack-plugin\n\n/***/ }),\n\n/***/ 3:\n/***/ (function(module, exports, __webpack_require__) {\n\n\n/* styles */\n__webpack_require__(16)\n\nvar Component = __webpack_require__(2)(\n /* script */\n __webpack_require__(7),\n /* template */\n __webpack_require__(1069),\n /* scopeId */\n null,\n /* cssModules */\n null\n)\n\nmodule.exports = Component.exports\n\n\n/***/ }),\n\n/***/ 6:\n/***/ (function(module, __webpack_exports__, __webpack_require__) {\n\n\"use strict\";\nObject.defineProperty(__webpack_exports__, \"__esModule\", { value: true });\n/* harmony import */ var __WEBPACK_IMPORTED_MODULE_0_vue__ = __webpack_require__(4);\n/* harmony import */ var __WEBPACK_IMPORTED_MODULE_1__App__ = __webpack_require__(3);\n/* harmony import */ var __WEBPACK_IMPORTED_MODULE_1__App___default = __webpack_require__.n(__WEBPACK_IMPORTED_MODULE_1__App__);\n\n\n\n\n__WEBPACK_IMPORTED_MODULE_0_vue__[\"a\" /* default */].config.productionTip = false;\n\nnew __WEBPACK_IMPORTED_MODULE_0_vue__[\"a\" /* default */]({\n el: '#app',\n template: '',\n components: { App: __WEBPACK_IMPORTED_MODULE_1__App___default.a }\n});\n\n/***/ }),\n\n/***/ 7:\n/***/ (function(module, __webpack_exports__, __webpack_require__) {\n\n\"use strict\";\nObject.defineProperty(__webpack_exports__, \"__esModule\", { value: true });\n/* harmony import */ var __WEBPACK_IMPORTED_MODULE_0_faker__ = __webpack_require__(17);\n/* harmony import */ var __WEBPACK_IMPORTED_MODULE_0_faker___default = __webpack_require__.n(__WEBPACK_IMPORTED_MODULE_0_faker__);\n/* harmony import */ var __WEBPACK_IMPORTED_MODULE_1_lodash__ = __webpack_require__(1064);\n/* harmony import */ var __WEBPACK_IMPORTED_MODULE_1_lodash___default = __webpack_require__.n(__WEBPACK_IMPORTED_MODULE_1_lodash__);\n/* harmony import */ var __WEBPACK_IMPORTED_MODULE_2__components_Kanban__ = __webpack_require__(1068);\n/* harmony import */ var __WEBPACK_IMPORTED_MODULE_2__components_Kanban___default = __webpack_require__.n(__WEBPACK_IMPORTED_MODULE_2__components_Kanban__);\n\n\n\n\n\n\n/* harmony default export */ __webpack_exports__[\"default\"] = ({\n name: 'app',\n components: {\n Kanban: __WEBPACK_IMPORTED_MODULE_2__components_Kanban___default.a\n },\n data: function data() {\n return {\n statuses: ['on-hold', 'in-progress', 'needs-review', 'approved'],\n blocks: []\n };\n },\n mounted: function mounted() {\n for (var i = 0; i <= 10; i += 1) {\n this.blocks.push({\n id: i,\n status: this.statuses[Math.floor(Math.random() * 4)],\n title: __WEBPACK_IMPORTED_MODULE_0_faker___default.a.company.bs()\n });\n }\n },\n\n\n methods: {\n updateBlock: __webpack_require__.i(__WEBPACK_IMPORTED_MODULE_1_lodash__[\"debounce\"])(function (id, status) {\n this.blocks.find(function (b) {\n return b.id === Number(id);\n }).status = status;\n }, 500)\n }\n});\n\n/***/ }),\n\n/***/ 8:\n/***/ (function(module, __webpack_exports__, __webpack_require__) {\n\n\"use strict\";\nObject.defineProperty(__webpack_exports__, \"__esModule\", { value: true });\n/* harmony import */ var __WEBPACK_IMPORTED_MODULE_0_dragula__ = __webpack_require__(15);\n/* harmony import */ var __WEBPACK_IMPORTED_MODULE_0_dragula___default = __webpack_require__.n(__WEBPACK_IMPORTED_MODULE_0_dragula__);\n\n\n\n\n/* harmony default export */ __webpack_exports__[\"default\"] = ({\n name: 'KanbanBoard',\n\n props: {\n stages: {},\n blocks: {}\n },\n data: function data() {\n return {};\n },\n\n\n computed: {\n localBlocks: function localBlocks() {\n return this.blocks;\n }\n },\n\n methods: {\n getBlocks: function getBlocks(status) {\n return this.localBlocks.filter(function (block) {\n return block.status === status;\n });\n }\n },\n\n mounted: function mounted() {\n var _this = this;\n\n __WEBPACK_IMPORTED_MODULE_0_dragula___default()(this.$refs.list).on('drag', function (el) {\n el.classList.add('is-moving');\n }).on('drop', function (block, list) {\n var index = 0;\n for (index = 0; index < list.children.length; index += 1) {\n if (list.children[index].classList.contains('is-moving')) break;\n }\n _this.$emit('update-block', block.dataset.blockId, list.dataset.status, index);\n }).on('dragend', function (el) {\n el.classList.remove('is-moving');\n\n window.setTimeout(function () {\n el.classList.add('is-moved');\n window.setTimeout(function () {\n el.classList.remove('is-moved');\n }, 600);\n }, 100);\n });\n }\n});\n\n/***/ })\n\n},[6]);\n\n\n// WEBPACK FOOTER //\n// static/js/app.7d106d57c92bbc79dd0b.js","var Component = require(\"!../../node_modules/vue-loader/lib/component-normalizer\")(\n /* script */\n require(\"!!babel-loader!../../node_modules/vue-loader/lib/selector?type=script&index=0!./Kanban.vue\"),\n /* template */\n require(\"!!../../node_modules/vue-loader/lib/template-compiler/index?{\\\"id\\\":\\\"data-v-5ca666bc\\\"}!../../node_modules/vue-loader/lib/selector?type=template&index=0!./Kanban.vue\"),\n /* scopeId */\n null,\n /* cssModules */\n null\n)\n\nmodule.exports = Component.exports\n\n\n\n//////////////////\n// WEBPACK FOOTER\n// ./src/components/Kanban.vue\n// module id = 1068\n// module chunks = 1","module.exports={render:function (){var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;\n return _c('div', {\n attrs: {\n \"id\": \"app\"\n }\n }, [_vm._m(0), _vm._v(\" \"), _c('Kanban', {\n attrs: {\n \"stages\": _vm.statuses,\n \"blocks\": _vm.blocks\n },\n on: {\n \"update-block\": _vm.updateBlock\n }\n }, _vm._l((_vm.blocks), function(item) {\n return _c('div', {\n key: item.id,\n slot: item.id\n }, [_c('div', [_c('strong', [_vm._v(\"id:\")]), _vm._v(\" \" + _vm._s(item.id) + \"\\n \")]), _vm._v(\" \"), _c('div', [_vm._v(\"\\n \" + _vm._s(item.title) + \"\\n \")])])\n }))], 1)\n},staticRenderFns: [function (){var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;\n return _c('section', {\n staticClass: \"section\"\n }, [_c('h4', [_vm._v(\"\\n Vue adoptation of Ettric's\\n \"), _c('a', {\n attrs: {\n \"href\": \"//codepen.io/ettrics/pen/QbPEeg\"\n }\n }, [_vm._v(\"Codepen\")])])])\n}]}\n\n\n//////////////////\n// WEBPACK FOOTER\n// ./~/vue-loader/lib/template-compiler?{\"id\":\"data-v-31685f33\"}!./~/vue-loader/lib/selector.js?type=template&index=0!./src/App.vue\n// module id = 1069\n// module chunks = 1","module.exports={render:function (){var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;\n return _c('div', {\n staticClass: \"drag-container\"\n }, [_c('ul', {\n staticClass: \"drag-list\"\n }, _vm._l((_vm.stages), function(stage) {\n return _c('li', {\n key: stage,\n staticClass: \"drag-column\",\n class: ( _obj = {}, _obj['drag-column-' + stage] = true, _obj )\n }, [_c('span', {\n staticClass: \"drag-column-header\"\n }, [_c('h2', [_vm._v(_vm._s(stage))])]), _vm._v(\" \"), _c('div', {\n staticClass: \"drag-options\"\n }), _vm._v(\" \"), _c('ul', {\n ref: \"list\",\n refInFor: true,\n staticClass: \"drag-inner-list\",\n attrs: {\n \"data-status\": stage\n }\n }, _vm._l((_vm.getBlocks(stage)), function(block) {\n return _c('li', {\n key: block.id,\n staticClass: \"drag-item\",\n attrs: {\n \"data-block-id\": block.id\n }\n }, [_vm._t(block.id, [_c('strong', [_vm._v(_vm._s(block.status))]), _vm._v(\" \"), _c('div', [_vm._v(_vm._s(block.id))])])], 2)\n }))])\n var _obj;\n }))])\n},staticRenderFns: []}\n\n\n//////////////////\n// WEBPACK FOOTER\n// ./~/vue-loader/lib/template-compiler?{\"id\":\"data-v-5ca666bc\"}!./~/vue-loader/lib/selector.js?type=template&index=0!./src/components/Kanban.vue\n// module id = 1070\n// module chunks = 1","\n/* styles */\nrequire(\"!!../node_modules/extract-text-webpack-plugin/loader.js?{\\\"omit\\\":1,\\\"remove\\\":true}!vue-style-loader!css-loader?{\\\"minimize\\\":true,\\\"sourceMap\\\":true}!../node_modules/vue-loader/lib/style-compiler/index?{\\\"id\\\":\\\"data-v-31685f33\\\",\\\"scoped\\\":false,\\\"hasInlineConfig\\\":false}!sass-loader?{\\\"sourceMap\\\":true}!../node_modules/vue-loader/lib/selector?type=styles&index=0!./App.vue\")\n\nvar Component = require(\"!../node_modules/vue-loader/lib/component-normalizer\")(\n /* script */\n require(\"!!babel-loader!../node_modules/vue-loader/lib/selector?type=script&index=0!./App.vue\"),\n /* template */\n require(\"!!../node_modules/vue-loader/lib/template-compiler/index?{\\\"id\\\":\\\"data-v-31685f33\\\"}!../node_modules/vue-loader/lib/selector?type=template&index=0!./App.vue\"),\n /* scopeId */\n null,\n /* cssModules */\n null\n)\n\nmodule.exports = Component.exports\n\n\n\n//////////////////\n// WEBPACK FOOTER\n// ./src/App.vue\n// module id = 3\n// module chunks = 1","// The Vue build version to load with the `import` command\n// (runtime-only or standalone) has been set in webpack.base.conf with an alias.\nimport Vue from 'vue';\nimport App from './App';\n\nVue.config.productionTip = false;\n\n/* eslint-disable no-new */\nnew Vue({\n el: '#app',\n template: '',\n components: { App },\n});\n\n\n\n// WEBPACK FOOTER //\n// ./src/main.js","\n\n\n\n\n\n\n\n// WEBPACK FOOTER //\n// App.vue?5b1a48be","\n\n\n\n\n\n// WEBPACK FOOTER //\n// Kanban.vue?1faed898"],"sourceRoot":""} --------------------------------------------------------------------------------