Kyle Coberly
kylecoberly.com
// TimeBlockEvent import TimeBlock from './TimeBlock' export default { extends: TimeBlock, props: { block: Object, }, computed: { blockStyles() { // Specific Styles }, }, }
// TimeBlock export default { props: { maximumDuration: Number, minimumDuration: { type: Number, default: 0.5, }, }, computed: { blockClasses() { // Default styles }, }, }
// TimeBlockEvent <template> <TimeBlock theme="event" :style="blockStyles" > <TimeBlockLabel :startTime="block.startTime" :duration="block.duration" /> </TimeBlock> </template>
// TimeBlock <template> <div class="timeblock" :class="blockClasses" > <slot /> </div> </template>
// TimeBlockEvent import TimeBlock from './TimeBlock' import dragAndDroppable from '../mixins/drag-drop-block' import stretchUppable from '../mixins/stretch-up-block' import stretchDownable from '../mixins/stretch-down-block' export default { extends: TimeBlock, mixins: [ dragAndDroppable, stretchUppable, stretchDownable, ], }
// drag-drop-block.js export default { data() { return { isMoving: false, } }, methods: { startMove(event) { }, move(event) { }, doneMoving() { }, }, }
<div class="local--day--blocks local--day--event-blocks"> <TimeBlockEvent v-for="(event, index) in events" :block="event" @updatePosition="updateBlockPosition('event', index)" @click.native.stop="selectEvent(event, index)" /> </div>
By Kyle Coberly