x

.browserslistrc

@@ -0,0 +1,2 @@
+> 1%
+last 2 versions

.eslintrc.js

@@ -0,0 +1,22 @@
+module.exports = {
+  root: true,
+  env: {
+    node: true,
+  },
+  plugins: ['prettier'],
+  // watch this for explaining why some of this is here
+  // https://www.youtube.com/watch?time_continue=239&v=YIvjKId9m2c
+  rules: {
+    'no-console': process.env.NODE_ENV === 'production' ? 'error' : 'off',
+    'no-debugger': process.env.NODE_ENV === 'production' ? 'error' : 'off',
+    quotes: [2, 'single', { avoidEscape: true, allowTemplateLiterals: true }],
+    'prettier/prettier': [
+      'error',
+      {
+        trailingComma: 'es5',
+        singleQuote: true,
+        printWidth: 80,
+      },
+    ],
+  },
+};

.prettierrc.js

@@ -0,0 +1,7 @@
+module.exports = {
+  printWidth: 80,
+  tabWidth: 2,
+  bracketSpacing: true,
+  singleQuote: true,
+  trailingComma: 'all',
+};

.vscode/settings.json

@@ -0,0 +1,22 @@
+{
+  "eslint.enable": true,
+  "workbench.colorCustomizations": {
+    "activityBar.background": "#f9e64f",
+    "activityBar.foreground": "#15202b",
+    "activityBar.inactiveForeground": "#15202b99",
+    "activityBarBadge.background": "#059a89",
+    "activityBarBadge.foreground": "#e7e7e7",
+    "titleBar.activeBackground": "#f9e64f",
+    "titleBar.inactiveBackground": "#f9e64f99",
+    "titleBar.activeForeground": "#15202b",
+    "titleBar.inactiveForeground": "#15202b99",
+    "statusBar.background": "#f9e64f",
+    "statusBarItem.hoverBackground": "#f7df1e",
+    "statusBar.foreground": "#15202b",
+    "panel.border": "#f9e64f",
+    "sideBar.border": "#f9e64f",
+    "editorGroup.border": "#f9e64f",
+    "tab.activeBorder": "#f9e64f"
+  },
+  "peacock.color": "#f9e64f"
+}

package.json

@@ -0,0 +1,32 @@
+{
+  "name": "vue-heroes",
+  "version": "0.1.0",
+  "private": true,
+  "scripts": {
+    "serve": "vue-cli-service serve",
+    "build": "vue-cli-service build",
+    "lint": "vue-cli-service lint"
+  },
+  "dependencies": {
+    "@fortawesome/fontawesome-svg-core": "^1.2.18",
+    "@fortawesome/free-solid-svg-icons": "^5.8.2",
+    "@fortawesome/vue-fontawesome": "^0.1.6",
+    "axios": "^0.19.0",
+    "bulma": "^0.7.5",
+    "core-js": "^2.6.5",
+    "date-fns": "^1.30.1",
+    "vue": "^2.6.10"
+  },
+  "devDependencies": {
+    "@vue/cli-plugin-babel": "^3.7.0",
+    "@vue/cli-plugin-eslint": "^3.7.0",
+    "@vue/cli-service": "^3.7.0",
+    "@vue/eslint-config-prettier": "^4.0.1",
+    "babel-eslint": "^10.0.1",
+    "eslint": "^5.16.0",
+    "eslint-plugin-vue": "^5.0.0",
+    "node-sass": "^4.9.0",
+    "sass-loader": "^7.1.0",
+    "vue-template-compiler": "^2.5.21"
+  }
+}

src/app.vue

@@ -0,0 +1,24 @@
+<template>
+  <div id="app">
+    <HeaderBar />
+    <div class="main-section columns">
+      <main class="column">
+        <Heroes />
+      </main>
+    </div>
+  </div>
+</template>
+
+<script>
+import HeaderBar from '@/components/header-bar';
+import Heroes from '@/components/heroes';
+
+export default {
+  name: 'App',
+  components: { HeaderBar, Heroes },
+};
+</script>
+
+<style lang="scss">
+@import '@/design/index.scss';
+</style>

src/components/header-bar-brand.vue

@@ -0,0 +1,27 @@
+<template>
+  <div class="navbar-brand">
+    <a
+      class="navbar-item"
+      href="https://vuejs.org/"
+      target="_blank"
+      rel="noopener noreferrer"
+    >
+      <i class="fab js-logo fa-vuejs fa-2x" aria-hidden="true" />
+    </a>
+    <div class="navbar-item nav-home">
+      <span class="tour">TOUR</span>
+      <span class="of">OF</span>
+      <span class="heroes">HEROES</span>
+    </div>
+    <button
+      class="link navbar-burger burger"
+      aria-label="menu"
+      aria-expanded="false"
+      data-target="navbarBasicExample"
+    >
+      <span aria-hidden="true" />
+      <span aria-hidden="true" />
+      <span aria-hidden="true" />
+    </button>
+  </div>
+</template>

src/components/header-bar-links.vue

@@ -0,0 +1,27 @@
+<template>
+  <div class="navbar-menu">
+    <div class="navbar-end">
+      <div class="navbar-item">
+        <div class="buttons">
+          <a :href="github" target="_blank" rel="noopener noreferrer">
+            <i class="fab fa-github fa-2x" aria-hidden="true"></i>
+          </a>
+          <a :href="twitter" target="_blank" rel="noopener noreferrer">
+            <i class="fab fa-twitter fa-2x" aria-hidden="true"></i>
+          </a>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      github: 'https://github.com/johnpapa/vue-getting-started',
+      twitter: 'https://twitter.com/john_papa',
+    };
+  },
+};
+</script>

src/components/header-bar.vue

@@ -0,0 +1,22 @@
+<template>
+  <header>
+    <nav
+      class="navbar has-background-dark is-dark"
+      role="navigation"
+      aria-label="main navigation"
+    >
+      <HeaderBarBrand></HeaderBarBrand>
+      <HeaderBarLinks></HeaderBarLinks>
+    </nav>
+  </header>
+</template>
+
+<script>
+import HeaderBarBrand from '@/components/header-bar-brand';
+import HeaderBarLinks from '@/components/header-bar-links';
+
+export default {
+  name: 'HeaderBar',
+  components: { HeaderBarBrand, HeaderBarLinks },
+};
+</script>

src/components/hero-detail.vue

@@ -0,0 +1,150 @@
+<template>
+  <div>
+    <div class="card">
+      <header class="card-header">
+        <p class="card-header-title">{{ fullName }}</p>
+      </header>
+      <div class="card-content">
+        <div class="content">
+          <div class="field">
+            <label class="label" for="id">id</label>
+            <label class="input" name="id" readonly>{{ clonedHero.id }}</label>
+          </div>
+          <div class="field">
+            <label class="label" for="firstName">first name</label>
+            <input
+              class="input"
+              name="firstName"
+              v-model="clonedHero.firstName"
+            />
+          </div>
+          <div class="field">
+            <label class="label" for="lastName">last name</label>
+            <input
+              class="input"
+              name="lastName"
+              v-model="clonedHero.lastName"
+            />
+          </div>
+          <div class="field">
+            <label class="label" for="description">description</label>
+            <input
+              class="input"
+              name="description"
+              v-model="clonedHero.description"
+            />
+          </div>
+          <div class="field">
+            <label class="label" for="originDate">origin date</label>
+            <input
+              type="date"
+              class="input"
+              id="originDate"
+              v-model="clonedHero.originDate"
+            />
+            <p class="comment">
+              My origin story began on
+              {{ clonedHero.originDate | shortDate }}
+            </p>
+          </div>
+          <div class="field">
+            <label class="label" for="capeCounter">cape counter</label>
+            <input
+              class="input"
+              name="capeCounter"
+              type="number"
+              v-model="clonedHero.capeCounter"
+            />
+          </div>
+          <div class="field">
+            <label class="label" for="capeMessage">cape message</label>
+            <label class="input" name="capeMessage">{{ capeMessage }}</label>
+          </div>
+        </div>
+      </div>
+      <footer class="card-footer">
+        <button
+          class="link card-footer-item cancel-button"
+          @click="cancelHero()"
+        >
+          <i class="fas fa-undo"></i>
+          <span>Cancel</span>
+        </button>
+        <button class="link card-footer-item" @click="saveHero()">
+          <i class="fas fa-save"></i>
+          <span>Save</span>
+        </button>
+      </footer>
+    </div>
+  </div>
+</template>
+
+<script>
+import { format } from 'date-fns';
+
+import { displayDateFormat, lifecycleHooks } from '../shared';
+
+export default {
+  name: 'HeroDetail',
+  props: {
+    hero: {
+      type: Object,
+      default: () => {},
+    },
+  },
+  data() {
+    return {
+      clonedHero: { ...this.hero },
+    };
+  },
+  mixins: [lifecycleHooks],
+  computed: {
+    fullName() {
+      return this.clonedHero
+        ? `${this.clonedHero.firstName} ${this.clonedHero.lastName}`
+        : '';
+    },
+  },
+  methods: {
+    cancelHero() {
+      this.$emit('cancel');
+    },
+    saveHero() {
+      this.$emit('save', this.clonedHero);
+    },
+    handleTheCapes(newValue) {
+      const value = parseInt(newValue, 10);
+      switch (value) {
+        case 0:
+          this.capeMessage = 'Where is my cape?';
+          break;
+        case 1:
+          this.capeMessage = 'One is all I need';
+          break;
+        case 2:
+          this.capeMessage = 'Alway have a spare';
+          break;
+        default:
+          this.capeMessage = 'You can never have enough capes';
+          break;
+      }
+    },
+  },
+  watch: {
+    'clonedHero.capeCounter': {
+      immediate: true,
+      handler(newValue, oldValue) {
+        console.log(
+          `CapeCounter watcher evalauted. old=${oldValue}, new=${newValue}`
+        );
+        this.handleTheCapes(newValue);
+      },
+    },
+  },
+  filters: {
+    shortDate: function(value) {
+      return format(value, displayDateFormat);
+    },
+  },
+};
+</script>