Initial commit: extracted from LiveBudget.

.gitignore

@@ -0,0 +1,3 @@
+node_modules/
+dist/
+.*.sw?

package-lock.json

@@ -0,0 +1,56 @@
+{
+  "name": "@jdbernard/vue-common",
+  "version": "1.0.1",
+  "lockfileVersion": 1,
+  "requires": true,
+  "dependencies": {
+    "@jdbernard/logging": {
+      "version": "1.1.3",
+      "resolved": "https://registry.npmjs.org/@jdbernard/logging/-/logging-1.1.3.tgz",
+      "integrity": "sha512-JS+kk/O+rg5TVHf+Fg9o4s0Al4nwkwd0vsrPxawUJbgjeC6GPwYi/fQHMRYl5XY2zvy+o3EoEC9o+4LIfJx/6A==",
+      "requires": {
+        "axios": "^0.19.2"
+      }
+    },
+    "axios": {
+      "version": "0.19.2",
+      "resolved": "https://registry.npmjs.org/axios/-/axios-0.19.2.tgz",
+      "integrity": "sha512-fjgm5MvRHLhx+osE2xoekY70AhARk3a6hkN+3Io1jc00jtquGvxYlKlsFUhmUET0V5te6CcZI7lcv2Ym61mjHA==",
+      "requires": {
+        "follow-redirects": "1.5.10"
+      }
+    },
+    "debug": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/debug/-/debug-3.1.0.tgz",
+      "integrity": "sha512-OX8XqP7/1a9cqkxYw2yXss15f26NKWBpDXQd0/uK/KPqdQhxbPa994hnzjcE2VqQpDslf55723cKPUOGSmMY3g==",
+      "requires": {
+        "ms": "2.0.0"
+      }
+    },
+    "follow-redirects": {
+      "version": "1.5.10",
+      "resolved": "https://registry.npmjs.org/follow-redirects/-/follow-redirects-1.5.10.tgz",
+      "integrity": "sha512-0V5l4Cizzvqt5D44aTXbFZz+FtyXV1vrDN6qrelxtfYQKW0KO0W2T/hkE8xvGa/540LkZlkaUjO4ailYTFtHVQ==",
+      "requires": {
+        "debug": "=3.1.0"
+      }
+    },
+    "mitt": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/mitt/-/mitt-3.0.0.tgz",
+      "integrity": "sha512-7dX2/10ITVyqh4aOSVI9gdape+t9l2/8QxHrFmUXu4EEUpdlxl6RudZUPZoc+zuY2hk1j7XxVroIVIan/pD/SQ=="
+    },
+    "ms": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/ms/-/ms-2.0.0.tgz",
+      "integrity": "sha1-VgiurfwAvmwpAd9fmGF4jeDVl8g="
+    },
+    "typescript": {
+      "version": "4.5.5",
+      "resolved": "https://registry.npmjs.org/typescript/-/typescript-4.5.5.tgz",
+      "integrity": "sha512-TCTIul70LyWe6IJWT8QSYeA54WQe8EjQFU4wY52Fasj5UKx88LNYKCgBEHcOMOrFF1rKGbD8v/xcNWVUq9SymA==",
+      "dev": true
+    }
+  }
+}

package.json

@@ -0,0 +1,33 @@
+{
+  "name": "@jdbernard/vue-common",
+  "version": "1.0.1",
+  "description": "Extra stuff I always use when building Vue applications.",
+  "main": "dist/index.js",
+  "types": "dist/index.d.ts",
+  "files": [
+    "/dist"
+  ],
+  "scripts": {
+    "build": "tsc --build tsconfig.json && cp -r src/components dist/.",
+    "test": "echo \"Error: no test specified\" && exit 1"
+  },
+  "repository": {
+    "type": "git",
+    "url": "https://git.jdb-software.com/jdb/vue-common.git"
+  },
+  "keywords": [
+    "vuejs",
+    "vue",
+    "state",
+    "util"
+  ],
+  "author": "Jonathan Bernard <jonathan@jdbernard.com>",
+  "license": "MIT",
+  "devDependencies": {
+    "typescript": "^4.5.5"
+  },
+  "dependencies": {
+    "@jdbernard/logging": "^1.1.3",
+    "mitt": "^3.0.0"
+  }
+}

src/components/Toaster.vue

@@ -0,0 +1,180 @@
+<template>
+  <transition-group name="toast-messages" id="toast-container" tag="ul">
+    <li v-for="msg in messages" :key="msg.id" :class="msg.type">
+      <div class="icon" @click="dismissMessage(msg.id)">
+        <fa-icon :icon="iconForMsg(msg)"></fa-icon>
+      </div>
+      <div class="message">
+        {{ msg.message }}
+        <div v-if="msg.detail" class="detail">{{ msg.detail }}</div>
+      </div>
+    </li>
+  </transition-group>
+</template>
+<script lang="ts">
+import { defineComponent, onMounted, onUnmounted, ref, Ref } from 'vue';
+
+import { ToastMessage, toastBus } from '../toast.service';
+
+interface ToastMessageWithTypeAndId extends ToastMessage {
+  type: 'info' | 'error' | 'success';
+  id: number;
+}
+
+export default defineComponent({
+  name: 'ToasterComponent',
+  setup: function ToasterComponent() {
+    const lastId = ref(0);
+    const messages: Ref<ToastMessageWithTypeAndId[]> = ref([]);
+
+    function dismissMessage(msgId: number) {
+      messages.value = messages.value.filter((m) => m.id !== msgId);
+    }
+
+    function handleToast(
+      type: 'info' | 'error' | 'success',
+      m: ToastMessage
+    ): void {
+      const msgWithId = { ...m, type, id: lastId.value++ };
+      messages.value.push(msgWithId);
+
+      if (m.duration != 'manual') {
+        setTimeout(() => {
+          dismissMessage(msgWithId.id);
+        }, m.duration ?? 10 * 1000); //default 10 seconds
+      }
+    }
+    onMounted(() => {
+      toastBus.on('info', (m) => handleToast('info', m));
+      toastBus.on('success', (m) => handleToast('success', m));
+      toastBus.on('error', (m) => handleToast('error', m));
+    });
+
+    onUnmounted(() => {
+      toastBus.all.clear();
+    });
+
+    function iconForMsg(m: ToastMessageWithTypeAndId): string {
+      if (m.icon) return m.icon;
+      switch (m.type) {
+        default:
+        case 'info':
+          return 'info-circle';
+        case 'error':
+          return 'exclamation-triangle';
+        case 'success':
+          return 'check-circle';
+      }
+    }
+
+    return { dismissMessage, iconForMsg, messages };
+  },
+});
+</script>
+<style scoped lang="scss" src="./Toaster.scss">
+#toast-container {
+  list-style: none;
+  display: flex;
+  flex-direction: column;
+
+  li {
+    transition: opacity 1s, transform 1s;
+  }
+
+  .toast-messages-enter, .toast-messages-leave-to {
+    opacity: 0;
+    transform: translateY(1em);
+  }
+}
+
+//@include forSize(notMobile) {
+  #toast-container {
+    position: fixed;
+    top: 2em;
+    right: 2em;
+    font-weight: 400;
+
+    li {
+      display: flex;
+      flex-direction: row;
+      align-items: stretch;
+
+      background-color: white;
+      background-color: var(--color-bg);
+      border-radius: 4px;
+      border: solid 2px;
+      box-shadow: 0 4px 4px rgba(0, 0, 0, 0.2);
+      box-shadow: 0 4px 4px var(--color-shadow);
+      margin-bottom: 1em;
+      opacity: 0.95;
+      width: 23em;
+
+      .icon {
+        cursor: pointer;
+        display: flex;
+        align-items: center;
+        font-size: 1.5em;
+        justify-content: center;
+        min-width: 2em;
+        min-height: 2em;
+
+        .fa-icon {
+          color: white;
+          color: var(--color-bg);
+          height: unset;
+        }
+      }
+
+      .message {
+        display: flex;
+        align-items: center;
+        flex-direction: column;
+        align-items: flex-start;
+        padding: 0.5em;
+        flex: 1 1;
+
+        .detail {
+          font-size: 16px;
+          font-size: var(--font-size-small);
+        }
+      }
+
+      &.info {
+        border-color: #787AC9;
+        border-color: var(--color-accent-fg);
+        color: #333;
+        color: var(--color-fg);
+
+        .icon {
+          background-color: #787AC9;
+          background-color: var(--color-accent-fg);
+        }
+      }
+
+      &.success {
+        border-color: #467A43;
+        border-color: var(--color-success-fg);
+        color: #333;
+        color: var(--color-fg);
+
+        .icon {
+          background-color: #467A43;
+          background-color: var(--color-success-fg);
+        }
+      }
+
+      &.error {
+        border-color: #AC190E;
+        border-color: var(--color-error-fg);
+        color: #333;
+        color: var(--color-fg);
+
+        .icon {
+          background-color: #AC190E;
+          background-color: var(--color-error-fg);
+        }
+      }
+    }
+  }
+//}
+</style>

src/index.ts

@@ -0,0 +1,3 @@
+export * from './state';
+export * from './util';
+export * from './sorting';

src/injector.ts

@@ -0,0 +1,17 @@
+import { InjectionKey } from 'vue';
+
+export class DependencyInjector {
+  // TODO: can we type this better?
+  // eslint-disable-next-line
+  private deps = new Map<InjectionKey<any>, any>();
+
+  public provide<T>(key: InjectionKey<T>, dep: T): void {
+    this.deps.set(key, dep);
+  }
+
+  public inject<T>(key: InjectionKey<T>): T | undefined {
+    return this.deps.get(key) as T;
+  }
+}
+
+export default new DependencyInjector();

src/sorting.ts

@@ -0,0 +1,23 @@
+export type Comparator<T> = (a: T, b: T) => number;
+
+export function reverse<T>(cmp: Comparator<T>): Comparator<T> {
+  return (a, b) => cmp(a, b) * -1;
+}
+
+export function sorted<T>(arr: Readonly<T[]>, cmp: Comparator<T>): T[] {
+  return arr.slice().sort(cmp);
+}
+
+export function compose<T>(...cmps: Comparator<T>[]): Comparator<T> {
+  return (a: T, b: T): number => {
+    let val: number;
+    for (let i = 0; i < cmps.length; i++) {
+      const cmp = cmps[i];
+      val = cmp(a, b);
+      if (val !== 0) {
+        return val;
+      }
+    }
+    return 0;
+  };
+}

src/state.ts

@@ -0,0 +1,30 @@
+/**
+ * Fetchable addresses the reality that most of our resources exist in three
+ * distinct possible states.
+ * - not loaded: it may or may not exist, but I don't have a copy of it
+ * - not found: I've asked and know definitively that this does not exist
+ * - value present
+ */
+export type Fetchable<T> = 'loading' | 'not loaded' | 'not found' | T;
+
+export function hasValue<T>(f: Fetchable<T>): f is T {
+  return f !== 'not found' && f !== 'not loaded' && f !== 'loading';
+}
+
+export function valueOf<T>(f: Fetchable<T>): T | null {
+  return !hasValue(f) ? null : f;
+}
+
+export function withValue<T, V>(f: Fetchable<T>, fun: (val: T) => V): V | null {
+  return !hasValue(f) ? null : fun(f);
+}
+
+export function use<T, V>(f: Fetchable<T>, fun: (val: T) => V): Fetchable<V> {
+  if (!hasValue(f)) {
+    return f;
+  } else {
+    return fun(f);
+  }
+}
+
+

src/toast.service.ts

@@ -0,0 +1,16 @@
+import mitt from 'mitt';
+
+export interface ToastMessage {
+  detail?: string;
+  duration?: number | 'manual';
+  icon?: string;
+  message: string;
+}
+
+type ToastEvents = {
+  info: ToastMessage;
+  error: ToastMessage;
+  success: ToastMessage;
+};
+
+export const toastBus = mitt<ToastEvents>();

src/util.ts

@@ -0,0 +1,94 @@
+import { Logger } from '@jdbernard/logging';
+
+export interface EditableItemState<T> {
+  value: T;
+  editing?: boolean;
+  saving: boolean;
+  error: boolean;
+}
+
+export function asOptional<T>(
+  fun: () => T,
+  logger: Logger | null = null
+): T | null {
+  try {
+    return fun();
+  } catch (err: any) {
+    logger?.warn(err);
+    return null;
+  }
+}
+
+export function batch<T>(arr: T[], batchSize: number): T[][] {
+  const result: T[][] = [];
+  let curBatch: T[] = [];
+
+  for (let i = 0; i < arr.length; i++) {
+    if (i > 0 && i % batchSize === 0) {
+      result.push(curBatch);
+      curBatch = [];
+    }
+
+    curBatch.push(arr[i]);
+  }
+
+  result.push(curBatch);
+  return result;
+}
+
+export function clone<T>(obj: T): T {
+  return JSON.parse(JSON.stringify(obj));
+}
+
+export function notNullOrUndef<T>(val: T | undefined | null): val is T {
+  return val !== undefined && val !== null;
+}
+
+export function newLoggedError(logger: Logger, msg: string): Error {
+  const err = new Error(msg);
+  logger.error(msg);
+  return err;
+}
+
+export function requireDefined<T>(
+  logger: Logger,
+  name: string,
+  val: T | null | undefined
+): T {
+  if (val === null || val === undefined) {
+    throw newLoggedError(
+      logger,
+      `${name} must be defined and non-null but is not`
+    );
+  }
+  return val;
+}
+
+/* I wish I could write this, but don't know how to make TypeScript smart
+ * enough to infer types correctly against keys. I'ld like, for example, to be
+ * able to use this as:
+ *
+ *     const { api, auth } = requireDefined(logger, {
+ *       api: possiblyGetApi(),
+ *       auth: possiblyGetAuth()
+ *     });
+ *
+ * But as written, it will infer the types of both api and auth as
+ * AuthService | LiveBudgetApiClient
+ */
+/*
+export function requireDefined<T>(logger: Logger, thingsThatMustBeDefined: Record<string, T | null>): Record<string, T> {
+  const retVal: Record<string, T> = {};
+  Object.entries(thingsThatMustBeDefined).map(([k, v]) => {
+    if (v === null || v === undefined) {
+      throw newLoggedError(
+        logger,
+        `${k} must be defined and non-null but is not`
+      );
+    } else {
+      retVal[k] = v;
+    }
+  });
+  return retVal;
+}
+*/

tsconfig.json

@@ -0,0 +1,12 @@
+{
+  "compilerOptions": {
+    "module": "commonjs",
+    "target": "es6",
+    "declaration": true,
+    "outDir": "./dist",
+    "strict": true
+  },
+  "include": [
+    "src/**/*"
+  ]
+}