fabiovalse/README.md

## README.md

      
    Raw
  

              README.md
            
          
    A basic example of the use of Vue.js.

  
## data.json
[
  {"title": "Title1", "subtitle": "Subtitle1", "description": "This is the description of the first item"},
  {"title": "Title2", "subtitle": "Subtitle2", "description": "This is the description of the second item"},
  {"title": "Title3", "subtitle": "Subtitle3", "description": "This is the description of the third item"}
]

## index.coffee
main_component =
  props:
    data:
      type: Array
      required: true
    value:
      type: Object
      required: true
  template: '''
    <div class='main'>
      <div v-for="item in data" class='object'>
        <div v-on:click="select(item)" :class="{selected: item === value}">{{item.title}}</div>
      </div>
    </div>
  '''
  methods:
    select: (d) ->
      @$emit 'input', d

side_component =
  props:
    value:
      type: Object
      required: true
  template: '''
    <div class='side'>
      <div class='object'>
        <div>{{value.title}}</div>
        <div>{{value.subtitle}}</div>
        <div>{{value.description}}</div>
      </div>
    </div>
  '''

app = new Vue
  el: '#app'
  data:
    list: []
    selection: {}
  components:
    'mainsec': main_component
    'sidesec': side_component
  mounted: () ->
    d3.json 'data.json', (data) =>
      @list = data
      @selection = data[0]

## index.css
body, html {
  width: 100%;
  height: 100%;
  padding: 0;
  margin: 0;
  font-family: sans-serif;
}

#app {
  display: flex;
}

.main {
  width: 75%;
  height: 100%;
  background: #F2F2F2;
}

.side {
  width: 25%;
  height: 100%;
  background: #DDDDDD;
}

.object {
  padding: 10px;
}

.selected {
  font-weight: bold;
}

## index.html
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <link rel="stylesheet" type="text/css" href="index.css">
  <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.0.3/vue.js"></script>
  <script src="https://d3js.org/d3.v4.min.js"></script>
  <title>Vue.js example</title>
</head>
<body>
  <div id="app">
    <sidesec :value="selection"></sidesec>
    <mainsec :data="list" v-model="selection"></mainsec>
  </div>
  <script src="index.js"></script>
</body>
</html>

## index.js
// Generated by CoffeeScript 1.10.0
(function() {
  var app, main_component, side_component;

  main_component = {
    props: {
      data: {
        type: Array,
        required: true
      },
      value: {
        type: Object,
        required: true
      }
    },
    template: '<div class=\'main\'>\n  <div v-for="item in data" class=\'object\'>\n    <div v-on:click="select(item)" :class="{selected: item === value}">{{item.title}}</div>\n  </div>\n</div>',
    methods: {
      select: function(d) {
        return this.$emit('input', d);
      }
    }
  };

  side_component = {
    props: {
      value: {
        type: Object,
        required: true
      }
    },
    template: '<div class=\'side\'>\n  <div class=\'object\'>\n    <div>{{value.title}}</div>\n    <div>{{value.subtitle}}</div>\n    <div>{{value.description}}</div>\n  </div>\n</div>'
  };

  app = new Vue({
    el: '#app',
    data: {
      list: [],
      selection: {}
    },
    components: {
      'mainsec': main_component,
      'sidesec': side_component
    },
    mounted: function() {
      return d3.json('data.json', (function(_this) {
        return function(data) {
          _this.list = data;
          return _this.selection = data[0];
        };
      })(this));
    }
  });

}).call(this);

## thumbnail.png

      
    Raw
  

              thumbnail.png
	[
	{"title": "Title1", "subtitle": "Subtitle1", "description": "This is the description of the first item"},
	{"title": "Title2", "subtitle": "Subtitle2", "description": "This is the description of the second item"},
	{"title": "Title3", "subtitle": "Subtitle3", "description": "This is the description of the third item"}
	]
	main_component =
	props:
	data:
	type: Array
	required: true
	value:
	type: Object
	required: true
	template: '''
	<div class='main'>
	<div v-for="item in data" class='object'>
	<div v-on:click="select(item)" :class="{selected: item === value}">{{item.title}}</div>
	</div>
	</div>
	'''
	methods:
	select: (d) ->
	@$emit 'input', d

	side_component =
	props:
	value:
	type: Object
	required: true
	template: '''
	<div class='side'>
	<div class='object'>
	<div>{{value.title}}</div>
	<div>{{value.subtitle}}</div>
	<div>{{value.description}}</div>
	</div>
	</div>
	'''

	app = new Vue
	el: '#app'
	data:
	list: []
	selection: {}
	components:
	'mainsec': main_component
	'sidesec': side_component
	mounted: () ->
	d3.json 'data.json', (data) =>
	@list = data
	@selection = data[0]
	body, html {
	width: 100%;
	height: 100%;
	padding: 0;
	margin: 0;
	font-family: sans-serif;
	}

	#app {
	display: flex;
	}

	.main {
	width: 75%;
	height: 100%;
	background: #F2F2F2;
	}

	.side {
	width: 25%;
	height: 100%;
	background: #DDDDDD;
	}

	.object {
	padding: 10px;
	}

	.selected {
	font-weight: bold;
	}
	<!DOCTYPE html>
	<html>
	<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width">
	<link rel="stylesheet" type="text/css" href="index.css">
	<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.0.3/vue.js"></script>
	<script src="https://d3js.org/d3.v4.min.js"></script>
	<title>Vue.js example</title>
	</head>
	<body>
	<div id="app">
	<sidesec :value="selection"></sidesec>
	<mainsec :data="list" v-model="selection"></mainsec>
	</div>
	<script src="index.js"></script>
	</body>
	</html>
	// Generated by CoffeeScript 1.10.0
	(function() {
	var app, main_component, side_component;

	main_component = {
	props: {
	data: {
	type: Array,
	required: true
	},
	value: {
	type: Object,
	required: true
	}
	},
	template: '<div class=\'main\'>\n <div v-for="item in data" class=\'object\'>\n <div v-on:click="select(item)" :class="{selected: item === value}">{{item.title}}</div>\n </div>\n</div>',
	methods: {
	select: function(d) {
	return this.$emit('input', d);
	}
	}
	};

	side_component = {
	props: {
	value: {
	type: Object,
	required: true
	}
	},
	template: '<div class=\'side\'>\n <div class=\'object\'>\n <div>{{value.title}}</div>\n <div>{{value.subtitle}}</div>\n <div>{{value.description}}</div>\n </div>\n</div>'
	};

	app = new Vue({
	el: '#app',
	data: {
	list: [],
	selection: {}
	},
	components: {
	'mainsec': main_component,
	'sidesec': side_component
	},
	mounted: function() {
	return d3.json('data.json', (function(_this) {
	return function(data) {
	_this.list = data;
	return _this.selection = data[0];
	};
	})(this));
	}
	});

	}).call(this);