Header.vue 1.91 KB
Newer Older
Denys Mishunov's avatar
Denys Mishunov committed
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90
<template>
  <header class="header">
    <h1 :class="$style.TodoHeader">Vue.todos</h1>
    <input
      class="new-todo"
      :class="$style.NewTodo"
      autofocus
      autocomplete="off"
      placeholder="What needs to be done?"
      v-model="newTodo"
      @keyup.enter="addTodo"
    />
  </header>
</template>

<script>
import todoStorage from "./storage";

export default {
  name: "todoapp-header",
  
  // app initial state
  data: () => {
    return {
      todos: todoStorage.fetch(),
      newTodo: "",
      editedTodo: null,
      visibility: "all"
    };
  },

  // methods that implement data logic.
  // note there's no DOM manipulation here at all.
  methods: {
    addTodo: function() {
      var value = this.newTodo && this.newTodo.trim();
      if (!value) {
        return;
      }
      this.todos.unshift({
        id: todoStorage.generateid(5),
        text: value,
        completed: false
      });
      this.newTodo = "";
      todoStorage.save(this.todos);
    },

    updateTodos: function(e) {
      if (this.todos !== e.detail.todos) {
        this.todos = e.detail.todos;
      }
    }
  },

  created: function() {
    document.addEventListener("store-update", this.updateTodos);
  },

  destroyed: function() {
    document.removeEventListener("store-update", this.updateTodos);
  }
};
</script>
<style module>
.TodoHeader {
  text-indent: 100%;
  overflow-x: hidden;
  background-image: url(../public/logo.png) !important;
  height: 100px;
  background-size: auto 100px;
  background-position: center center;
  background-repeat: no-repeat;
  top: -200px !important;
  
  position: absolute;
  width: 100%;
  font-size: 100px;
  font-weight: 100;
  text-align: center;
  color: rgba(175, 47, 47, 0.15);
  -webkit-text-rendering: optimizeLegibility;
  -moz-text-rendering: optimizeLegibility;
  text-rendering: optimizeLegibility;
}
.NewTodo::placeholder {
  color: #41b883 !important;
  font-style: italic;
}
</style>