vue-packery-plugin/examples/basic/node_modules/.cache/vue-loader/12b8829251a9258abeb6f778aa8aab1e.json

a vue.js packery plugin

{"remainingRequest":"/Users/janthoma/.npm-global/lib/node_modules/@vue/cli-service-global/node_modules/vue-loader/lib/index.js??vue-loader-options!/Users/janthoma/Documents/git/vue-packery-plugin/examples/basic/App.vue?vue&type=style&index=0&lang=css&","dependencies":[{"path":"/Users/janthoma/Documents/git/vue-packery-plugin/examples/basic/App.vue","mtime":1552568281668},{"path":"/Users/janthoma/.npm-global/lib/node_modules/@vue/cli-service-global/node_modules/css-loader/index.js","mtime":499162500000},{"path":"/Users/janthoma/.npm-global/lib/node_modules/@vue/cli-service-global/node_modules/vue-loader/lib/loaders/stylePostLoader.js","mtime":499162500000},{"path":"/Users/janthoma/.npm-global/lib/node_modules/@vue/cli-service-global/node_modules/cache-loader/dist/cjs.js","mtime":499162500000},{"path":"/Users/janthoma/.npm-global/lib/node_modules/@vue/cli-service-global/node_modules/vue-loader/lib/index.js","mtime":499162500000}],"contextDependencies":[],"result":["\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n* {\n    margin: 0;\n    padding: 0;\n    font-family: sans-serif;\n}\n\n.packery-container {\n    background-color: #41f4a3;\n}\n\n.packery-item {\n    width: 33.33%;\n    padding: 1rem;\n    background-color: #f4eb42;\n    border: 0.2rem dashed #f4be41;\n    box-sizing: border-box;\n}\n\n.packery-item span{\n    display: block;\n    font-size: 1.4rem;\n    color: #f4be41;\n    margin-bottom: 1rem;\n}\n\n.packery-item input{\n    color: #fff;\n    font-size: 1rem;\n    padding: 0.5rem;\n    background-color: #f4be41;\n    border: none;\n}\n\n.controls {\n    margin-top: 2rem;\n    text-align: center;\n}\n\n.controls input {\n    color: #fff;\n    font-size: 1rem;\n    padding: 0.5rem;\n    background-color: #444;\n    border: none;\n    margin: 0 1rem;\n}\n\n",{"version":3,"sources":["App.vue"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAsFA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA","file":"App.vue","sourceRoot":".","sourcesContent":["<template>\n\n    <div>\n\n        <div v-packery='{itemSelector: \".packery-item\", percentPosition: true, initLayout: false}' class='packery-container' ref='packery'>\n\n            <div v-for='(item, index) in items' :key='index' v-packery-item class='packery-item' :style='{height: item.height + \"rem\"}'>\n\n                <span>{{ item.id }}</span>\n\n                <input type='button' value='Remove' @click='setRemoveItem(index)'>\n\n            </div>\n\n        </div>\n\n        <div class='controls'>\n\n            <input type=\"button\" value=\"Add Item\" @click='setAddItem()'>\n\n            <input type=\"button\" value=\"Shuffle Items\" @click='setShuffleItems()'>\n\n            <input type=\"button\" value=\"Init Layout\" @click='setInitLayout()'>\n\n        </div>\n\n    </div>\n\n</template>\n\n<script>\n\nimport {packeryEvents} from '../../src/index.js'\n\nmodule.exports = {\n    name: 'App',\n    data ()\n    {\n        return {\n            items: []\n        }\n    },\n    created ()\n    {\n        for (let i = 0; i < 6; i++)\n        {\n            this.setAddItem()\n        }\n    },\n    methods:\n    {\n        setHeight ()\n        {\n            const rand = Math.random()\n\n            return Math.round(rand * 20) + 5\n        },\n        setAddItem ()\n        {\n            this.items.push({\n                id: this.items.length + 1,\n                height: this.setHeight()\n            })\n        },\n        setRemoveItem (index)\n        {\n            this.items.splice(index, 1)\n        },\n        setShuffleItems ()\n        {\n            this.items.sort(() =>\n            {\n                return 0.5 - Math.random()\n            })\n        },\n        setInitLayout ()\n        {\n            packeryEvents.$emit('layout', this.$refs.packery)\n        }\n    }\n}\n\n</script>\n\n<style>\n\n* {\n    margin: 0;\n    padding: 0;\n    font-family: sans-serif;\n}\n\n.packery-container {\n    background-color: #41f4a3;\n}\n\n.packery-item {\n    width: 33.33%;\n    padding: 1rem;\n    background-color: #f4eb42;\n    border: 0.2rem dashed #f4be41;\n    box-sizing: border-box;\n}\n\n.packery-item span{\n    display: block;\n    font-size: 1.4rem;\n    color: #f4be41;\n    margin-bottom: 1rem;\n}\n\n.packery-item input{\n    color: #fff;\n    font-size: 1rem;\n    padding: 0.5rem;\n    background-color: #f4be41;\n    border: none;\n}\n\n.controls {\n    margin-top: 2rem;\n    text-align: center;\n}\n\n.controls input {\n    color: #fff;\n    font-size: 1rem;\n    padding: 0.5rem;\n    background-color: #444;\n    border: none;\n    margin: 0 1rem;\n}\n\n</style>\n"]}]}