dobromir-hristov

{
  "screens": {
    "sm": "640px",
    "md": "768px",
    "lg": "1024px",
    "xl": "1280px"
  },
  "fontFamily": {
    "display": [
      "Gilroy",

dobromir-hristov

$is-target-ide: true;
$app-mode: if($is-target-ide, ide, default);

$base-colors: (
    glyph-gray: (
        light: pink,
        dark: purple 
    ),
    glyph-gray-secondary: (
        light: rgb(110, 110, 115),

dobromir-hristov

$base-colors: (
    glyph-gray: (
        light: pink,
        dark: purple 
    ),
    glyph-gray-secondary: (
        light: rgb(110, 110, 115),
        dark: rgb(134, 134, 139) 
    ),
);

dobromir-hristov

$component-colors: (
    links-item-border: (
      default: links-item-border-default,
      ide: links-item-border-ide
    ),
    link-item-bg: (
      default: (
        light: link-item-bg-default-light,
        dark: link-item-bg-default-dark,
      ),

dobromir-hristov

import Vue from 'vue'

/**
 * Renderless component that loads a layout component and emits the appropriate event, for the App.vue to render it.
 * @module Layout
 * @see module:App to see how it is implemented.
 * @see "/layouts" for all possible layouts to load
 */
export default {
  name: 'Layout',

dobromir-hristov

<!-- Standard usage -->
<VButton @click.prevent="clickReturningPromise">Click me</VButton>

<!-- Overriding the loading state -->
<VButton 
  :loading="loading"
  @click="clickWithoutPromise"
>
  My loading state is passed as a prop
</VButton>

dobromir-hristov

<button 
  v-on="listeners" 
  :class="computedClasses" 
  :disabled="loadingState"
  class="button is-primary"
>
  <slot name="loading" v-if="loadingState">Loading...</slot>
  <slot name="success" v-else-if="isSuccess">Sucess!</slot>
  <slot name="error" v-else-if="hasError">Errored</slot> 
  <slot v-else />

dobromir-hristov

resetDelayed(property) {  
  // if loading prop is passed, dont set the internal states
  if(this.$options.propsData.hasOwnProperty('loading')) {
    return
  }
  
  this[property] = true;
  setTimeout(() => {
    this[property] = false;
  }, this.time);

dobromir-hristov

  methods: {
    async handleClick(event) {
      try {
        // set the internal loading state
        this.isLoading = true;
        // call the parent click listener and await it
        // Using Async/Await lets us await even none promises
        // pass the event so modifiers can work
        await this.$listeners.click(event);
        // set the isSuccess state and revert it back after this.time period

dobromir-hristov

export default {
  data:() => ({ posts: [] }),
  methods: {
    onClick(){
      // return a promise from an api service
      return this.$api.get('posts')
      .then(r => {
        this.posts = r.data
      })
      .catch(error => {