Vue

by joplomacedo

HTML

<div id="app">
  <h2>Todos:</h2>
  <div>
    <app-btn @click="() => window.alert('click')">Button</app-btn>
  </div>
  <ol>
    <li v-for="todo in todos">
      <label>
        <input type="checkbox"
          v-on:change="toggle(todo)"
          v-bind:checked="todo.done">

        <del v-if="todo.done">
          {{ todo.text }}
        </del>
        <span v-else>
          {{ todo.text }}
        </span>
      </label>
    </li>
  </ol>
  

  <app-modal>
    <template #title>
      This is  it boys!
      </template>
    Penis
  </app-modal>
</div>

CSS

body {
  background: #20262E;
  padding: 20px;
  font-family: Helvetica;
}

#app {
  background: #fff;
  border-radius: 4px;
  padding: 20px;
  transition: all 0.2s;
}

li {
  margin: 8px 0;
}

h2 {
  font-weight: bold;
  margin-bottom: 15px;
}

del {
  color: rgba(0, 0, 0, 0.3);
}



.app-modal {
	position: relative;
	z-index: 2;
}

.app-modal__overlay {
	position: fixed;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	display: flex;
	align-items: flex-start;
	justify-content: center;
	background: hsla(259, 17%, 33%, 0.63);
	overflow: auto;
}

.app-modal__modal {
	width: 100%;
	max-width: 700px;
	background: #fff;
	border-radius: 1px;
	position: relative;
}

.app-modal__header {
	display: flex;
	justify-content: space-between;
	padding: 0.85em 3em 0.82em 1.6em;
	align-items: center;
	position: relative;
}

.app-modal__title {
	font-size: 1.05em;
	font-weight: 500;
}

.app-modal__close_btn {
	position: absolute;
	cursor: pointer;
	right: 0;
	width: 3em;
	top: 0;
	bottom: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	border-left: 1px solid #ffffff38;
}

.app-modal__body {
	padding: 3em;
}

.app-modal__p {
	margin-bottom: 0.9em;
}

Vue

Vue.component('app-modal', {
        template: `
        <div class="app-modal">
            <div class="app-modal__overlay">
                <div class="app-modal__modal">
                    <div class="app-modal__header">
                        <p class="app-modal__title">
                            <slot name="title" />
                        </p>
                        <div @click="$emit('close')" class="app-modal__close_btn fas fa-times js-close_modal"></div>
                    </div>
                    <div class="app-modal__body">
                        <slot />
                    </div>
                </div>
            </div>
        </div>
        `
    });
    
    
    
Vue.component('app-btn', {
	template: `<button v-on="$listeners"><slot /></button>`,
})

new Vue({
  el: "#app",
  data: {
    todos: [
      { text: "Learn JavaScript", done: false },
      { text: "Learn Vue", done: false },
      { text: "Play around in JSFiddle", done: true },
      { text: "Build something awesome", done: true }
    ]
  },
  methods: {
  	toggle: function(todo){
    	todo.done = !todo.done
    }
  }
})