Random Vue Stuff

http-btn.js

import defaults from "lodash.defaults";

let httpBtn = {
  bind: (el, binding) => {
    //get options (evald expression)
    let opts = binding.value;
    if (typeof opts === "function") {
      opts = {fn: opts};
    }
    //provide defaults
    defaults(opts, {
      args: [],
      class: {
        success: "green",
        error: "red",
        loading: "loading"
      }
    });
    //get function
    let httpFunction = opts.fn;
    if (typeof httpFunction !== "function") {
      return alert(
        "http-btn expecting function, " + "got: " + binding.expression
      );
    }

    let show = (text, success, timeout) => {
      let className = success ? opts.class.success : opts.class.error;
      let prev = el.textContent;
      el.classList.add(className);
      el.textContent = text;
      setTimeout(() => {
        el.classList.remove(className);
        el.textContent = prev;
      }, timeout);
    };
    //
    let submit = () => {
      let promise = httpFunction.apply(null, opts.args);
      if (!promise || !promise.then) {
        return alert(
          `http-btn expecting a promise from function (${binding.expression})` +
            ` got: ${typeof promise}`
        );
      }
      el.classList.add(opts.class.loading);
      promise.then(
        resp => {
          let d = resp.data;
          if ((d && d.success) || !d) d = "Success";
          console.log(d);
          show(d, true, 2000);
          finaly();
        },
        resp => {
          let d = resp.data;
          if (typeof d !== "string" && d) d = d.error;
          if (typeof d !== "string") d = resp.statusText;
          if (!d) d = "Error";
          show(d, false, 2000);
          finaly();
        }
      );
      function finaly() {
        el.classList.remove(opts.class.loading);
      }
      return promise;
    };
    //bind to click
    el.onclick = () => {
      submit();
    };
  }
};

export default {
  install: Vue => {
    Vue.directive("http-btn", httpBtn);
  }
};

vue-merge.js

const isObject = o => {
  return o && typeof o === "object";
};

const merge = (dest, src, path = []) => {
  if (!isObject(dest)) {
    return src;
  }
  if (!isObject(src)) {
    return src;
  }
  for (let key in src) {
    let p = path.concat(key);
    // console.log(p.join("."));
    Vue.set(dest, key, merge(dest[key], src[key], p));
  }
  return dest;
};