Vuejs Training @ Amsteel Mills

Content Here

fetchApi.js

import baseHttp from "./baseFetch";

export const getHttp = async (url, type = "json", options) =>
  (await baseHttp(url, "get", options))(type);

export const postHttp = async (url, body, type = "json", options) =>
  (
    await baseHttp(url, "post", {
      body,
      ...options,
    })
  )(type);

export const putHttp = async (url, body, type = "json", options) =>
  (
    await baseHttp(url, "put", {
      body,
      ...options,
    })
  )(type);

export const patchHttp = async (url, body, type = "json", options) =>
  (
    await baseHttp(url, "patch", {
      body,
      ...options,
    })
  )(type);

export const updateHttp = async (url, body, type = "json", options) =>
  (
    await baseHttp(url, "update", {
      body,
      ...options,
    })
  )(type);

export const deleteHttp = async (url, body, type = "json", options) =>
  (
    await baseHttp(url, "delete", {
      body,
      ...options,
    })
  )(type);

baseFetch.js

export default async (url, method, options = {}) => {
  let httpRequest;
  if (method.toUpperCase() === "GET") {
    httpRequest = await fetch(url, {
      cache: "reload",
      ...options,
    });
  } else {
    httpRequest = fetch(url, {
      method: method.toUpperCase(),
      cache: "reload",
      ...options,
    });
  }
  return (type) => {
    switch (type.toLocaleLowerCase()) {
      case "json":
        return httpRequest.json();
      case "blob":
        return httpRequest.blob();
      case "text":
        return httpRequest.text();
      case "formdata":
        return httpRequest.formData();
      default:
        return httpRequest.arrayBuffer();
    }
  };
};

App.vue

<template>
  <div id="app">
    <random-cat />
  </div>
</template>

<script>
import RandomCat from './components/RandomCat.vue';
export default {
  name: "App",
  components: {
    //RandomCat: () => import("./components/RandomCat"),
    RandomCat
  },
};
</script>

<style></style>

Random Cat.vue

<template>
  <MaterialCardBox
    header="Cat as a Service"
    sub-header="Random Cat Image"
    show-media
    show-actions
  >
    <template v-slot:media>
      <img
        v-if="kittyImage"
        alt="Meow!"
        :src="kittyImage"
        style="width: 300px"
      />
      <p v-else style="text-align: center">
        <i class="material-icons"> cached </i>
      </p>
    </template>

    <template v-slot:action>
      <MaterialButton background-color="#4ba3c7" text-color="#fff" @click="newCatImage">
        <i class="material-icons"> pets </i> Cat Image
      </MaterialButton>

      <MaterialButton background-color="#005b9f" text-color="#fff" @click="newCatGif">
        <i class="material-icons"> pets </i> Cat GIF
      </MaterialButton>
    </template>
  </MaterialCardBox>
</template>

<script>
import { getHttp } from "../http/fetchApi";
import MaterialButton from "./MaterialButton.vue";
import MaterialCardBox from "./MaterialCardBox.vue";
export default {
  // lazy loading
  components: {
    MaterialButton, MaterialCardBox
    //MaterialButton: () => import("./MaterialButton.vue"),
    //MaterialCardBox: () => import("./MaterialCardBox.vue"),
  },
  data: () => ({
    kittyImage: "",
  }),
  methods: {
    async getImage(url) {
      return URL.createObjectURL(await getHttp(url, "blob"));
    },
    async newCatImage() {
      this.kittyImage = await this.getImage("https://cataas.com/cat");
    },
    async newCatGif() {
      this.kittyImage = await this.getImage("https://cataas.com/cat/gif");
    },
  },
  async beforeMount() {
    await this.newCatImage();
  },
};
</script>

<style scoped>
body {
 font-size: 14px;
 }
</style>

Content Here

Content Here

Content Here

cardStyles.css

h1, h2, h3, h4, h5, h6{
    margin: 0;
}

.cardText{
    -moz-osx-font-smoothing: grayscale;
    -webkit-font-smoothing: antialiased;
    text-decoration: inherit;
    text-transform: inherit;
    font-size: 0.875rem;
    line-height: 1.375rem;
    letter-spacing: 0.0071428571em;
}

h1.cardHeader{
    font-size: 1.25rem;
    line-height: 2rem;
    font-weight: 500;
    letter-spacing: .0125em;
}

h2.cardSubHeader{
    font-size: .875rem;
    line-height: 1.25rem;
    font-weight: 400;
    letter-spacing: .0178571429em;
    opacity: .6;
}
   

App.vue

<template>
  <div id="app">
    <MaterialCardBox>
      <template v-slot:header>
        <strong>Card Title</strong><br />
        <span>Card Sub-Title</span>
      </template>

      <template v-slot:media>
        <img src="https://via.placeholder.com/350x150" />
      </template>

      <p>Main Section</p>

      <template v-slot:action>
        <button>Action Button</button>
        <button>Action Button</button>
      </template>
    </MaterialCardBox>
  </div>
</template>

<script>
import MaterialCardBox from "./components/MaterialCardBox.vue";
export default {
  name: "App",
  components: {
    MaterialCardBox,
  },
};
</script>

<style scoped>
* {
  color: #999;
}
</style>

MaterialCardBox.vue

<template>
    <div class="cardBox elevation_2">
        <div class="header">
            <slot v-if="$slots.header" name="header" />
            <div v-else>
                <h1 class="cardHeader cardText">Card Header</h1>
                <h2 class="cardSubHeader cardText">Card Sub Header</h2>
            </div>
        </div>

        <div class="media">
            <slot v-if="$slots.media" name="media" />
            <img v-else src="https://via.placeholder.com/350x250" />
        </div>

        <div v-if="$slots.default" class="section cardText"
            :class="{
                noBottomPadding: $slots.action,
                halfPaddingTop: $slots.media,
            }">
            <slot />
        </div>
        
        <div v-if="$slots.action" class="action">
            <slot name="action" />
        </div>

    </div>
</template>

<script>
export default {
  name: "MaterialCardBox",
};
</script>

<style scoped>
@import url("https://fonts.googleapis.com/css?family=Roboto:400,500,700&display=swap");
@import "../style/elevation.css";
@import "../style/cardStyles.css";

/* comment css here */
* {
  font-family: "Roboto", sans-serif;
}

.cardBox {
  width: 100%;
  max-width: 300px;
  background-color: #fff;
  position: relative;
  display: inline-block;
  border-radius: 0.25rem;
}

.cardBox > .section {
    padding: 1rem;
    position: relative;
}

.cardBox > .header {
    padding: 1rem;
    position: relative;
    display: block;
}

.cardBox > .media {
    overflow: hidden;
    position: relative;
    display: block;
    max-width: 100%;
}

.cardBox > .section {
    padding: 1rem;
    position: relative;
    margin-bottom: 1.5rem;
    display: block;
}

.cardBox > .action {
    padding: 0.5rem;
    position: relative;
    display: block;
}

.cardBox > .action > *:not(:first-child) {
    margin-left: 0.4rem;
}

.noBottomPadding {
    padding-bottom: 0 !important;
}

.halfPaddingTop {
    padding-top: 0.5rem !important;
}

</style>

Content Here

Content Here

Content Here

Content Here

Content Here

Content Here

Content Here