handling potentially complex click events

click: function (event) {
  if (!this.singleClick && this.selectedCount !== 0) event.preventDefault();

  setTimeout(() => {
    this.touches = 0;
  }, 300);

  this.touches++;

  if (this.touches >  1) {
    this.open();
  }

  if (this.$store.state.selected.indexOf(this.index) !== -1) {
    this.removeSelected(this.index);
    return;
  }
}

and

// nice didn't know you could use event.shiftKey
if (event.shiftKey && this.selected.length > 0) {
  let fi = 0;
  let la = 0;

  if (this.index > this.selected[0]) {
    fi = this.selected[0] + 1;
    la = this.index;
  } else {
    fi = this.index;
    la = this.selected[0] - 1;
  }

  for (; fi <= la; fi++) {
    if (this.$store.state.selected.indexOf(fi) == -1) {
      this.addSelected(fi);
    }
  }

  return;
}

and this super legible check:

if (
  !this.singleClick &&
  !event.ctrlKey &&
  !event.metaKey &&
  !this.$store.state.multiple
)

this.resetSelected();

reminds me of the style used for another && check:

showOverlay: function () {
  return (
    this.show !== null
 && this.show !== "search"
 && this.show !== "more"
  );
},

legible humanTime method

also, imagine if browser's api was moment... I think temporal proposal (opens new window) addresses some of this...

humanTime: function () {
  if (this.selectedCount === 0) return moment(this.req.modified).fromNow();

  return moment(this.req.items[this.selected[0]].modified).fromNow();
}

prettier formatting

can be unpretty sometimes, and I can't tell if I like this or hate this (actually I hate it but love the shape of the formatting if I am squinting):

commands(
  this.path,
  cmd,
  (event) => {
    results.text += `${event.data}\n`;
    this.scroll();
  },
  () => {
    results.text = results.text.trimEnd();
    this.canInput = true;
    this.$refs.input.focus();
    this.scroll();
  }
);