@openc3/vue-common 6.2.0 → 6.2.1

package/dist/plugins.js

@@ -0,0 +1,772 @@
+import { resolveComponent as d, createBlock as $, openBlock as h, withCtx as f, createVNode as c, createElementVNode as E, toDisplayString as p, createCommentVNode as v, createElementBlock as _, createTextVNode as y, withDirectives as M, normalizeStyle as V, withModifiers as U, vShow as q, createApp as z, warn as G, getCurrentInstance as K, inject as Y, computed as D, shallowRef as X, watchEffect as Z, provide as J, defineComponent as Q, mergeProps as tt, h as et } from "vue";
+import { _ as H } from "./CosmosRuxIcon.vue_vue_type_style_index_0_scoped_9af48e85_lang-CHgC5LLL.js";
+import { createStore as nt } from "vuex";
+import { createVuetify as ot } from "vuetify";
+import { AstroStatusColors as st, getStatusColorContrast as at, AstroIconVuetifySets as it } from "./icons.js";
+const rt = {
+  dark: !0,
+  colors: {
+    primary: "#005A8F",
+    secondary: "#4DACFF",
+    tertiary: "#BBC1C9",
+    "openc3-green": "#56f000",
+    "openc3-yellow": "#fce83a",
+    "openc3-red": "#ff3838",
+    "openc3-blue": "#2dccff",
+    "openc3-purple": "#c800c8",
+    "openc3-black": "#ffffff",
+    "openc3-white": "#ffffff"
+  }
+}, lt = {
+  data: function() {
+    return {
+      show: !1,
+      params: {
+        title: "Title",
+        text: "The text that is displayed",
+        okText: "Ok",
+        okClass: "primary",
+        validateText: "CONFIRM",
+        cancelText: "Cancel",
+        html: !1
+      },
+      resolve: null,
+      reject: null,
+      validationText: null,
+      rules: {
+        required: (t) => !!t || "Required.",
+        match: (t) => t === this.params.validateText || "Value mismatch."
+      }
+    };
+  },
+  computed: {
+    dataTestOk: function() {
+      return `confirm-dialog-${this.params.okText.toLowerCase()}`;
+    },
+    dataTestCancel: function() {
+      return `confirm-dialog-${this.params.cancelText.toLowerCase()}`;
+    }
+  },
+  methods: {
+    dialog: function(t, e, n) {
+      this.params = t, this.show = !0, this.resolve = e, this.reject = n;
+    },
+    ok: function() {
+      this.params.validateText === this.validationText && (this.show = !1, this.resolve(!0));
+    },
+    cancel: function() {
+      this.show = !1, this.reject(!0);
+    }
+  }
+}, ct = ["innerHTML"], ut = { key: 2 }, dt = {
+  key: 3,
+  class: "validate mt-4"
+};
+function ft(t, e, n, o, s, a) {
+  const i = d("v-spacer"), l = d("v-toolbar"), r = d("v-icon"), u = d("v-text-field"), m = d("v-card-text"), w = d("v-btn"), T = d("v-card-actions"), k = d("v-card"), b = d("v-dialog"), x = d("v-app");
+  return h(), $(x, null, {
+    default: f(() => [
+      c(b, {
+        modelValue: t.show,
+        "onUpdate:modelValue": e[1] || (e[1] = (g) => t.show = g),
+        width: "600"
+      }, {
+        default: f(() => [
+          c(k, null, {
+            default: f(() => [
+              c(l, { height: "24" }, {
+                default: f(() => [
+                  c(i),
+                  E("span", null, p(t.params.title), 1),
+                  c(i)
+                ]),
+                _: 1
+              }),
+              c(m, { class: "mt-4 pa-3" }, {
+                default: f(() => [
+                  t.params.validateText ? (h(), $(r, {
+                    key: 0,
+                    class: "mr-2"
+                  }, {
+                    default: f(() => e[2] || (e[2] = [
+                      y(" mdi-alert ")
+                    ])),
+                    _: 1
+                  })) : v("", !0),
+                  t.params.html ? (h(), _("span", {
+                    key: 1,
+                    innerHTML: t.params.text
+                  }, null, 8, ct)) : (h(), _("span", ut, p(t.params.text), 1)),
+                  t.params.validateText ? (h(), _("div", dt, [
+                    y(" Enter " + p(t.params.validateText) + " to confirm! ", 1),
+                    c(u, {
+                      variant: "solo",
+                      density: "compact",
+                      "single-line": "",
+                      modelValue: t.validationText,
+                      "onUpdate:modelValue": e[0] || (e[0] = (g) => t.validationText = g),
+                      rules: [t.rules.required, t.rules.match],
+                      "data-test": "confirm-dialog-validate"
+                    }, null, 8, ["modelValue", "rules"])
+                  ])) : v("", !0)
+                ]),
+                _: 1
+              }),
+              c(T, { class: "px-2" }, {
+                default: f(() => [
+                  c(i),
+                  t.params.cancelText ? (h(), $(w, {
+                    key: 0,
+                    variant: "outlined",
+                    "data-test": a.dataTestCancel,
+                    onClick: a.cancel
+                  }, {
+                    default: f(() => [
+                      y(p(t.params.cancelText), 1)
+                    ]),
+                    _: 1
+                  }, 8, ["data-test", "onClick"])) : v("", !0),
+                  c(w, {
+                    variant: "flat",
+                    color: t.params.okClass,
+                    "data-test": a.dataTestOk,
+                    onClick: a.ok
+                  }, {
+                    default: f(() => [
+                      y(p(t.params.okText), 1)
+                    ]),
+                    _: 1
+                  }, 8, ["color", "data-test", "onClick"])
+                ]),
+                _: 1
+              })
+            ]),
+            _: 1
+          })
+        ]),
+        _: 1
+      }, 8, ["modelValue"])
+    ]),
+    _: 1
+  });
+}
+const mt = /* @__PURE__ */ H(lt, [["render", ft], ["__scopeId", "data-v-581c0293"]]);
+class ht {
+  constructor() {
+    this.mounted = !1, this.$root = null;
+  }
+  mount() {
+    if (this.mounted) return;
+    const e = window.Vue.createApp(mt);
+    e.use(B);
+    const n = document.createElement("div");
+    document.querySelector("#openc3-app-toolbar > div").appendChild(n), this.$root = e.mount(n), this.mounted = !0;
+  }
+  open({ title: e, text: n, okText: o, okClass: s, validateText: a, cancelText: i, html: l }) {
+    return this.mount(), new Promise((r, u) => {
+      this.$root.dialog(
+        { title: e, text: n, okText: o, okClass: s, validateText: a, cancelText: i, html: l },
+        r,
+        u
+      );
+    });
+  }
+  confirm(e, { okText: n = "Ok", cancelText: o = "Cancel", okClass: s = "primary" }) {
+    return this.open({
+      title: "Confirm",
+      text: e,
+      okText: n,
+      okClass: s,
+      validateText: null,
+      cancelText: o,
+      html: !1
+    });
+  }
+  alert(e, { okText: n = "Ok", html: o = !1, okClass: s = "primary" }) {
+    return this.open({
+      title: "Alert",
+      text: e,
+      okText: n,
+      okClass: s,
+      validateText: null,
+      cancelText: null,
+      html: o
+    });
+  }
+  validate(e, {
+    okText: n = "Ok",
+    validateText: o = "CONFIRM",
+    cancelText: s = "Cancel",
+    okClass: a = "primary"
+  }) {
+    return this.open({
+      title: "Confirm",
+      text: e,
+      okText: n,
+      okClass: a,
+      validateText: o,
+      cancelText: s,
+      html: !1
+    });
+  }
+}
+const Ht = {
+  install(t, e) {
+    const n = new ht();
+    t.provide("dialog", n), t.config.globalProperties.hasOwnProperty("$dialog") || (t.config.globalProperties.$dialog = n);
+  }
+}, pt = {
+  data: function() {
+    return {
+      showToast: !1,
+      expanded: !1,
+      toastNotification: {
+        title: "Title here",
+        body: "This is the notification body",
+        message: "Overall message here"
+      },
+      timeout: null,
+      noToastPaths: ["/login"]
+    };
+  },
+  computed: {
+    toastNotificationIcon: function() {
+      switch (this.toastNotification.type) {
+        case "notification":
+          return "mdi-bell";
+        case "alert":
+        default:
+          return "mdi-alert-box";
+      }
+    },
+    toastStyle: function() {
+      return `
+        --toast-bg-color:${st[this.toastNotification.level]};
+        --toast-fg-color:${at(
+        this.toastNotification.level
+      )};
+      `;
+    },
+    contentStyle: function() {
+      return `
+        white-space: ${this.expanded ? "normal" : "nowrap"};
+        overflow-x: ${this.expanded ? "visible" : "hidden"};
+        text-overflow: ${this.expanded ? "unset" : "ellipsis"};
+      `;
+    }
+  },
+  methods: {
+    toast: function(t, e) {
+      this.noToastPaths.includes(window.location.pathname) || (e === void 0 && (e = 5e3), this.toastNotification = t, this.showToast = !0, this.cancelAutohide(), e && (this.timeout = setTimeout(() => {
+        this.hide();
+      }, e)));
+    },
+    hide: function() {
+      this.cancelAutohide(), this.showToast = !1;
+    },
+    cancelAutohide: function() {
+      this.timeout && (clearTimeout(this.timeout), this.timeout = null);
+    },
+    expand: function() {
+      this.cancelAutohide(), this.expanded = !0;
+    }
+  }
+}, gt = {
+  key: 0,
+  class: "text-subtitle-1 mr-1 notification-text"
+}, yt = {
+  key: 1,
+  class: "text-body-2 notification-text"
+}, vt = {
+  key: 2,
+  class: "text-body-2 notification-text"
+};
+function _t(t, e, n, o, s, a) {
+  const i = d("v-icon"), l = d("v-spacer"), r = d("v-btn"), u = d("v-sheet"), m = d("v-slide-y-transition");
+  return h(), $(m, null, {
+    default: f(() => [
+      M(c(u, {
+        style: V(a.toastStyle),
+        class: "toast-notification",
+        onClick: a.expand
+      }, {
+        default: f(() => [
+          c(i, { class: "mr-1 notification-text" }, {
+            default: f(() => [
+              y(p(a.toastNotificationIcon), 1)
+            ]),
+            _: 1
+          }),
+          E("div", {
+            class: "toast-content",
+            style: V(a.contentStyle)
+          }, [
+            t.toastNotification.title ? (h(), _("span", gt, p(t.toastNotification.title) + ": ", 1)) : v("", !0),
+            t.toastNotification.body ? (h(), _("span", yt, p(t.toastNotification.body), 1)) : v("", !0),
+            t.toastNotification.message ? (h(), _("span", vt, p(t.toastNotification.message), 1)) : v("", !0)
+          ], 4),
+          c(l),
+          c(r, {
+            variant: "text",
+            onClick: U(a.hide, ["stop"]),
+            class: "notification-text"
+          }, {
+            default: f(() => e[0] || (e[0] = [
+              y(" Dismiss ")
+            ])),
+            _: 1
+          }, 8, ["onClick"])
+        ]),
+        _: 1
+      }, 8, ["style", "onClick"]), [
+        [q, t.showToast]
+      ])
+    ]),
+    _: 1
+  });
+}
+const wt = /* @__PURE__ */ H(pt, [["render", _t], ["__scopeId", "data-v-b0459ba8"]]);
+class Ct {
+  /*
+   * This gets called by the `install()` function below
+   */
+  constructor(e = {}) {
+    var n;
+    this.$store = e.store, this.mounted = !1, this.$root = null, (n = window.$cosmosNotify) != null && n.$root ? (this.mounted = !0, this.$root = window.$cosmosNotify.$root) : window.$cosmosNotify = this;
+  }
+  /*
+   * This gets called each time `open()` is invoked by an app in COSMOS.
+   * It puts the element into the DOM that allows toasts to be shown.
+   */
+  mount() {
+    if (this.mounted) return;
+    const e = z(wt);
+    e.use(B);
+    const n = document.createElement("div");
+    document.querySelector("#openc3-app-toolbar > div").appendChild(n), this.$root = e.mount(n), this.mounted = !0;
+  }
+  open({
+    method: e,
+    title: n,
+    body: o,
+    message: s,
+    level: a,
+    duration: i,
+    type: l = "alert",
+    logToConsole: r = !1,
+    saveToHistory: u = !0
+  }) {
+    this.mount(), r && console.log(s ? `${a.toUpperCase()} - ${s}` : `${a.toUpperCase()} - ${n}: ${o}`), u && this.$store.commit("notifyAddHistory", { title: n, body: o, message: s, level: a }), this[e]({ title: n, body: o, message: s, level: a, duration: i, type: l });
+  }
+  toast({ title: e, body: n, message: o, level: s, duration: a, type: i }) {
+    this.$root.toast(
+      {
+        title: e,
+        body: n,
+        message: o,
+        level: s,
+        type: i
+      },
+      a
+    );
+  }
+  critical({
+    title: e,
+    body: n,
+    message: o,
+    type: s,
+    duration: a,
+    logToConsole: i,
+    saveToHistory: l
+  }) {
+    this.open({
+      method: "toast",
+      level: "critical",
+      title: e,
+      body: n,
+      message: o,
+      type: s,
+      duration: a,
+      logToConsole: i,
+      saveToHistory: l
+    });
+  }
+  FATAL(e) {
+    this.critical(e);
+  }
+  ERROR(e) {
+    this.critical(e);
+  }
+  serious({
+    title: e,
+    body: n,
+    message: o,
+    type: s,
+    duration: a,
+    logToConsole: i,
+    saveToHistory: l
+  }) {
+    this.open({
+      method: "toast",
+      level: "serious",
+      title: e,
+      body: n,
+      message: o,
+      type: s,
+      duration: a,
+      logToConsole: i,
+      saveToHistory: l
+    });
+  }
+  caution({
+    title: e,
+    body: n,
+    message: o,
+    type: s,
+    duration: a,
+    logToConsole: i,
+    saveToHistory: l
+  }) {
+    this.open({
+      method: "toast",
+      level: "caution",
+      title: e,
+      body: n,
+      message: o,
+      type: s,
+      duration: a,
+      logToConsole: i,
+      saveToHistory: l
+    });
+  }
+  WARN(e) {
+    this.caution(e);
+  }
+  normal({
+    title: e,
+    body: n,
+    message: o,
+    type: s,
+    duration: a,
+    logToConsole: i,
+    saveToHistory: l
+  }) {
+    this.open({
+      method: "toast",
+      level: "normal",
+      title: e,
+      body: n,
+      message: o,
+      type: s,
+      duration: a,
+      logToConsole: i,
+      saveToHistory: l
+    });
+  }
+  INFO(e) {
+    this.normal(e);
+  }
+  DEBUG(e) {
+    this.normal(e);
+  }
+  standby({
+    title: e,
+    body: n,
+    message: o,
+    type: s,
+    duration: a,
+    logToConsole: i,
+    saveToHistory: l
+  }) {
+    this.open({
+      method: "toast",
+      level: "standby",
+      title: e,
+      body: n,
+      message: o,
+      type: s,
+      duration: a,
+      logToConsole: i,
+      saveToHistory: l
+    });
+  }
+  off({ title: e, body: n, message: o, type: s, duration: a, logToConsole: i, saveToHistory: l }) {
+    this.open({
+      method: "toast",
+      level: "off",
+      title: e,
+      body: n,
+      message: o,
+      type: s,
+      duration: a,
+      logToConsole: i,
+      saveToHistory: l
+    });
+  }
+}
+const jt = {
+  /*
+   * This gets called by the Vue runtime when you have `app.use(Notify)` in that app's main .js file.
+   */
+  install(t, e) {
+    const n = new Ct(e);
+    t.provide("notify", n), t.config.globalProperties.hasOwnProperty("$notify") || (t.config.globalProperties.$notify = n);
+  }
+}, I = 100, Ft = nt({
+  state: {
+    notifyHistory: [],
+    namedWidgets: {}
+  },
+  getters: {
+    namedWidget: (t) => (e) => t.namedWidgets[e]
+  },
+  mutations: {
+    notifyAddHistory: (t, e) => {
+      t.notifyHistory.length >= I && (t.notifyHistory.length = I - 1), t.notifyHistory.unshift(e);
+    },
+    notifyClearHistory: (t) => {
+      t.notifyHistory = [];
+    },
+    setNamedWidget: (t, e) => {
+      Object.assign(t.namedWidgets, e);
+    },
+    clearNamedWidget: (t, e) => {
+      delete t.namedWidgets[e];
+    }
+  },
+  modules: {}
+});
+function P(t) {
+  let e;
+  return t !== null && typeof t == "object" && ((e = Object.getPrototypeOf(t)) === Object.prototype || e === null);
+}
+function Tt(t, e) {
+  const n = {};
+  for (const o of e)
+    Object.hasOwn(t, o) && (n[o] = t[o]);
+  return n;
+}
+function j() {
+  let t = arguments.length > 0 && arguments[0] !== void 0 ? arguments[0] : {}, e = arguments.length > 1 && arguments[1] !== void 0 ? arguments[1] : {}, n = arguments.length > 2 ? arguments[2] : void 0;
+  const o = {};
+  for (const s in t)
+    o[s] = t[s];
+  for (const s in e) {
+    const a = t[s], i = e[s];
+    if (P(a) && P(i)) {
+      o[s] = j(a, i, n);
+      continue;
+    }
+    if (n && Array.isArray(a) && Array.isArray(i)) {
+      o[s] = n(a, i);
+      continue;
+    }
+    o[s] = i;
+  }
+  return o;
+}
+function C() {
+  let t = arguments.length > 0 && arguments[0] !== void 0 ? arguments[0] : "";
+  if (C.cache.has(t)) return C.cache.get(t);
+  const e = t.replace(/[^a-z]/gi, "-").replace(/\B([A-Z])/g, "-$1").toLowerCase();
+  return C.cache.set(t, e), e;
+}
+C.cache = /* @__PURE__ */ new Map();
+function kt(t) {
+  G(`Vuetify: ${t}`);
+}
+function F(t, e) {
+  return (n) => Object.keys(t).reduce((o, s) => {
+    const i = typeof t[s] == "object" && t[s] != null && !Array.isArray(t[s]) ? t[s] : {
+      type: t[s]
+    };
+    return n && s in n ? o[s] = {
+      ...i,
+      default: n[s]
+    } : o[s] = i, e && !o[s].source && (o[s].source = e), o;
+  }, {});
+}
+function R(t, e) {
+  const n = K();
+  if (!n)
+    throw new Error(`[Vuetify] ${t} must be called from inside a setup function`);
+  return n;
+}
+function bt(t) {
+  let e = arguments.length > 1 && arguments[1] !== void 0 ? arguments[1] : R("injectSelf");
+  const {
+    provides: n
+  } = e;
+  if (n && t in n)
+    return n[t];
+}
+const O = Symbol.for("vuetify:defaults");
+function W() {
+  const t = Y(O);
+  if (!t) throw new Error("[Vuetify] Could not find defaults instance");
+  return t;
+}
+function xt(t, e) {
+  var n, o;
+  return typeof ((n = t.props) == null ? void 0 : n[e]) < "u" || typeof ((o = t.props) == null ? void 0 : o[C(e)]) < "u";
+}
+function $t() {
+  let t = arguments.length > 0 && arguments[0] !== void 0 ? arguments[0] : {}, e = arguments.length > 1 ? arguments[1] : void 0, n = arguments.length > 2 && arguments[2] !== void 0 ? arguments[2] : W();
+  const o = R("useDefaults");
+  if (e = e ?? o.type.name ?? o.type.__name, !e)
+    throw new Error("[Vuetify] Could not determine component name");
+  const s = D(() => {
+    var r;
+    return (r = n.value) == null ? void 0 : r[t._as ?? e];
+  }), a = new Proxy(t, {
+    get(r, u) {
+      var w, T, k, b, x, g, S;
+      const m = Reflect.get(r, u);
+      return u === "class" || u === "style" ? [(w = s.value) == null ? void 0 : w[u], m].filter((L) => L != null) : typeof u == "string" && !xt(o.vnode, u) ? ((T = s.value) == null ? void 0 : T[u]) !== void 0 ? (k = s.value) == null ? void 0 : k[u] : ((x = (b = n.value) == null ? void 0 : b.global) == null ? void 0 : x[u]) !== void 0 ? (S = (g = n.value) == null ? void 0 : g.global) == null ? void 0 : S[u] : m : m;
+    }
+  }), i = X();
+  Z(() => {
+    if (s.value) {
+      const r = Object.entries(s.value).filter((u) => {
+        let [m] = u;
+        return m.startsWith(m[0].toUpperCase());
+      });
+      i.value = r.length ? Object.fromEntries(r) : void 0;
+    } else
+      i.value = void 0;
+  });
+  function l() {
+    const r = bt(O, o);
+    J(O, D(() => i.value ? j((r == null ? void 0 : r.value) ?? {}, i.value) : r == null ? void 0 : r.value));
+  }
+  return {
+    props: a,
+    provideSubDefaults: l
+  };
+}
+function A(t) {
+  if (t._setup = t._setup ?? t.setup, !t.name)
+    return kt("The component is missing an explicit name, unable to generate default prop value"), t;
+  if (t._setup) {
+    t.props = F(t.props ?? {}, t.name)();
+    const e = Object.keys(t.props).filter((n) => n !== "class" && n !== "style");
+    t.filterProps = function(o) {
+      return Tt(o, e);
+    }, t.props._as = String, t.setup = function(o, s) {
+      const a = W();
+      if (!a.value) return t._setup(o, s);
+      const {
+        props: i,
+        provideSubDefaults: l
+      } = $t(o, o._as ?? t.name, a), r = t._setup(i, s);
+      return l(), r;
+    };
+  }
+  return t;
+}
+function At() {
+  let t = arguments.length > 0 && arguments[0] !== void 0 ? arguments[0] : !0;
+  return (e) => (t ? A : Q)(e);
+}
+const Nt = [String, Function, Object, Array], N = F({
+  icon: {
+    type: Nt
+  },
+  // Could not remove this and use makeTagProps, types complained because it is not required
+  tag: {
+    type: String,
+    required: !0
+  }
+}, "icon");
+At()({
+  name: "VComponentIcon",
+  props: N(),
+  setup(t, e) {
+    let {
+      slots: n
+    } = e;
+    return () => {
+      const o = t.icon;
+      return c(t.tag, null, {
+        default: () => {
+          var s;
+          return [t.icon ? c(o, null, null) : (s = n.default) == null ? void 0 : s.call(n)];
+        }
+      });
+    };
+  }
+});
+A({
+  name: "VSvgIcon",
+  inheritAttrs: !1,
+  props: N(),
+  setup(t, e) {
+    let {
+      attrs: n
+    } = e;
+    return () => c(t.tag, tt(n, {
+      style: null
+    }), {
+      default: () => [c("svg", {
+        class: "v-icon__svg",
+        xmlns: "http://www.w3.org/2000/svg",
+        viewBox: "0 0 24 24",
+        role: "img",
+        "aria-hidden": "true"
+      }, [Array.isArray(t.icon) ? t.icon.map((o) => Array.isArray(o) ? c("path", {
+        d: o[0],
+        "fill-opacity": o[1]
+      }, null) : c("path", {
+        d: o
+      }, null)) : c("path", {
+        d: t.icon
+      }, null)])]
+    });
+  }
+});
+A({
+  name: "VLigatureIcon",
+  props: N(),
+  setup(t) {
+    return () => c(t.tag, null, {
+      default: () => [t.icon]
+    });
+  }
+});
+const Ot = A({
+  name: "VClassIcon",
+  props: N(),
+  setup(t) {
+    return () => c(t.tag, {
+      class: t.icon
+    }, null);
+  }
+}), St = {
+  // Not using mergeProps here, functional components merge props by default (?)
+  component: (t) => et(Ot, {
+    ...t,
+    class: "mdi"
+  })
+}, B = ot({
+  theme: {
+    defaultTheme: "cosmosDark",
+    themes: {
+      cosmosDark: rt
+    }
+  },
+  icons: {
+    defaultSet: "mdi",
+    sets: {
+      mdi: St,
+      ...it
+    }
+  }
+});
+export {
+  Ht as Dialog,
+  jt as Notify,
+  rt as cosmosThemeDark,
+  Ft as store,
+  B as vuetify
+};
+//# sourceMappingURL=plugins.js.map