faizshukri/index.html

## index.html
<!DOCTYPE html>
<html>
<head>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/1.0.16/vue.js"></script>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
<style id="jsbin-css">
.Alert {
  background: #ddd;
  position: relative;
  padding: 1em;
  border: 1px solid #c7c7c7;
}
.Alert--Success {
  background: #8cff8c;
  border: 1px solid #00f300;
}
.Alert--Error {
  background: #ffb3b3;
  border: 1px solid #ff4d4d;
}
.Alert__close {
  position: absolute;
  top: 1em;
  right: 1em;
  cursor: pointer;
  font-weight: bold;
}
</style>
</head>
<body>

  <alert>
    <strong>Error!</strong> Your message was not sent.
  </alert>

  <alert type="error">
    <strong>Error!</strong> Your message was not sent.
  </alert>

  <alert type="success">
    <strong>Error!</strong> Your message was not sent.
  </alert>

  <template id="alert-template">
    <div :class="alertClass" v-show="show">
      <slot></slot>
      <span @click="show = false" class="Alert__close">
        x
      </span>
    </div>
  </template>

<script id="jsbin-javascript">
Vue.component('alert', {
  template: '#alert-template',

  props: ['type'],

  data: function(){
    return {
      show: true
    };
  },

  computed: {
    alertClass: function(){
      var type = this.type;

      return {
        'Alert': true,
        'Alert--Success': type == 'success',
        'Alert--Error': type == 'error'
      };
    }
  }
});

new Vue({
  el: 'body'
});
</script>


<script id="jsbin-source-css" type="text/css">.Alert
  background: #ddd
  position: relative
  padding: 1em
  border: 1px solid darken(#ddd, 10%)

.Alert--Success
  background: lighten(green, 70%)
  border: 1px solid lighten(green, 30%)

.Alert--Error
  background: lighten(red, 70%)
  border: 1px solid lighten(red, 30%)


.Alert__close
  position: absolute
  top: 1em
  right: 1em
  cursor: pointer
  font-weight: bold</script>

<script id="jsbin-source-javascript" type="text/javascript">Vue.component('alert', {
  template: '#alert-template',

  props: ['type'],

  data: function(){
    return {
      show: true
    };
  },

  computed: {
    alertClass: function(){
      var type = this.type;

      return {
        'Alert': true,
        'Alert--Success': type == 'success',
        'Alert--Error': type == 'error'
      };
    }
  }
});

new Vue({
  el: 'body'
});</script></body>
</html>

## jsbin.cotomon.css
.Alert {
  background: #ddd;
  position: relative;
  padding: 1em;
  border: 1px solid #c7c7c7;
}
.Alert--Success {
  background: #8cff8c;
  border: 1px solid #00f300;
}
.Alert--Error {
  background: #ffb3b3;
  border: 1px solid #ff4d4d;
}
.Alert__close {
  position: absolute;
  top: 1em;
  right: 1em;
  cursor: pointer;
  font-weight: bold;
}

## jsbin.cotomon.js
Vue.component('alert', {
  template: '#alert-template',

  props: ['type'],

  data: function(){
    return {
      show: true
    };
  },

  computed: {
    alertClass: function(){
      var type = this.type;

      return {
        'Alert': true,
        'Alert--Success': type == 'success',
        'Alert--Error': type == 'error'
      };
    }
  }
});

new Vue({
  el: 'body'
});
	<!DOCTYPE html>
	<html>
	<head>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/1.0.16/vue.js"></script>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width">
	<title>JS Bin</title>
	<style id="jsbin-css">
	.Alert {
	background: #ddd;
	position: relative;
	padding: 1em;
	border: 1px solid #c7c7c7;
	}
	.Alert--Success {
	background: #8cff8c;
	border: 1px solid #00f300;
	}
	.Alert--Error {
	background: #ffb3b3;
	border: 1px solid #ff4d4d;
	}
	.Alert__close {
	position: absolute;
	top: 1em;
	right: 1em;
	cursor: pointer;
	font-weight: bold;
	}
	</style>
	</head>
	<body>

	<alert>
	<strong>Error!</strong> Your message was not sent.
	</alert>

	<alert type="error">
	<strong>Error!</strong> Your message was not sent.
	</alert>

	<alert type="success">
	<strong>Error!</strong> Your message was not sent.
	</alert>

	<template id="alert-template">
	<div :class="alertClass" v-show="show">
	<slot></slot>
	<span @click="show = false" class="Alert__close">
	x
	</span>
	</div>
	</template>

	<script id="jsbin-javascript">
	Vue.component('alert', {
	template: '#alert-template',

	props: ['type'],

	data: function(){
	return {
	show: true
	};
	},

	computed: {
	alertClass: function(){
	var type = this.type;

	return {
	'Alert': true,
	'Alert--Success': type == 'success',
	'Alert--Error': type == 'error'
	};
	}
	}
	});

	new Vue({
	el: 'body'
	});
	</script>


	<script id="jsbin-source-css" type="text/css">.Alert
	background: #ddd
	position: relative
	padding: 1em
	border: 1px solid darken(#ddd, 10%)

	.Alert--Success
	background: lighten(green, 70%)
	border: 1px solid lighten(green, 30%)

	.Alert--Error
	background: lighten(red, 70%)
	border: 1px solid lighten(red, 30%)


	.Alert__close
	position: absolute
	top: 1em
	right: 1em
	cursor: pointer
	font-weight: bold</script>

	<script id="jsbin-source-javascript" type="text/javascript">Vue.component('alert', {
	template: '#alert-template',

	props: ['type'],

	data: function(){
	return {
	show: true
	};
	},

	computed: {
	alertClass: function(){
	var type = this.type;

	return {
	'Alert': true,
	'Alert--Success': type == 'success',
	'Alert--Error': type == 'error'
	};
	}
	}
	});

	new Vue({
	el: 'body'
	});</script></body>
	</html>