tutools-ui/dist/tutools.es.js

Vue 3 components for tutorials and productivity (keyboard overlays, command palette, hints)

import { ref as d, onMounted as y, onUnmounted as _, createElementBlock as l, createCommentVNode as f, openBlock as i, createElementVNode as u, Fragment as h, renderList as k, createTextVNode as g, toDisplayString as p, computed as S, withDirectives as C, vModelText as L, renderSlot as x, normalizeClass as E } from "vue";
const m = (e, a) => {
  const t = e.__vccOpts || e;
  for (const [o, s] of a)
    t[o] = s;
  return t;
}, T = {
  key: 0,
  class: "overlay"
}, $ = { class: "modal" }, b = { class: "key" }, K = {
  __name: "ShortcutOverlay",
  props: {
    shortcuts: Array,
    triggerKey: {
      type: String,
      default: "?"
    }
  },
  setup(e) {
    const a = e, t = d(!1), o = (s) => {
      s.key === a.triggerKey && document.activeElement.tagName !== "INPUT" && (t.value = !t.value);
    };
    return y(() => window.addEventListener("keydown", o)), _(() => window.removeEventListener("keydown", o)), (s, r) => t.value ? (i(), l("div", T, [
      u("div", $, [
        r[1] || (r[1] = u("h2", null, "Keyboard Shortcuts", -1)),
        u("ul", null, [
          (i(!0), l(h, null, k(e.shortcuts, (n, c) => (i(), l("li", { key: c }, [
            u("span", b, p(n.keys), 1),
            g(" — " + p(n.description), 1)
          ]))), 128))
        ]),
        u("button", {
          onClick: r[0] || (r[0] = (n) => t.value = !1)
        }, "Close")
      ])
    ])) : f("", !0);
  }
}, I = /* @__PURE__ */ m(K, [["__scopeId", "data-v-a39dc981"]]), N = {
  key: 0,
  class: "palette-overlay"
}, O = { class: "palette-box" }, P = { class: "palette-list" }, V = ["onClick"], q = {
  __name: "CommandPalette",
  props: {
    commands: Array,
    triggerKey: {
      type: String,
      default: "k"
    }
  },
  setup(e) {
    const a = e, t = d(!1), o = d(""), s = S(() => a.commands.filter(
      (n) => n.label.toLowerCase().includes(o.value.toLowerCase())
    )), r = (n) => {
      n.ctrlKey && n.key.toLowerCase() === a.triggerKey.toLowerCase() && (n.preventDefault(), t.value = !t.value);
    };
    return y(() => window.addEventListener("keydown", r)), _(() => window.removeEventListener("keydown", r)), (n, c) => t.value ? (i(), l("div", N, [
      u("div", O, [
        C(u("input", {
          type: "text",
          "onUpdate:modelValue": c[0] || (c[0] = (v) => o.value = v),
          placeholder: "Type a command...",
          class: "palette-input"
        }, null, 512), [
          [L, o.value]
        ]),
        u("ul", P, [
          (i(!0), l(h, null, k(s.value, (v, w) => (i(), l("li", {
            key: w,
            onClick: v.action,
            class: "palette-item"
          }, p(v.label), 9, V))), 128))
        ])
      ])
    ])) : f("", !0);
  }
}, B = /* @__PURE__ */ m(q, [["__scopeId", "data-v-735d1e55"]]), D = { class: "shortcut-hint" }, H = {
  __name: "ShortcutHint",
  props: {
    keys: {
      type: String,
      required: !0
    }
  },
  setup(e) {
    return (a, t) => (i(), l("span", D, p(e.keys), 1));
  }
}, U = /* @__PURE__ */ m(H, [["__scopeId", "data-v-55503e77"]]), A = {
  __name: "StepTooltip",
  props: {
    text: { type: String, required: !0 },
    position: { type: String, default: "top" },
    // top, right, bottom, left
    autoShow: { type: Boolean, default: !1 }
  },
  setup(e) {
    const a = e, t = d(!1), o = d(null);
    function s() {
      t.value = !0;
    }
    function r() {
      t.value = !1;
    }
    return y(() => {
      a.autoShow ? s() : o.value && (o.value.addEventListener("mouseenter", s), o.value.addEventListener("mouseleave", r));
    }), _(() => {
      o.value && (o.value.removeEventListener("mouseenter", s), o.value.removeEventListener("mouseleave", r));
    }), (n, c) => (i(), l("div", {
      class: "step-tooltip-wrapper",
      ref_key: "wrapper",
      ref: o
    }, [
      x(n.$slots, "default", {}, void 0, !0),
      t.value ? (i(), l("div", {
        key: 0,
        class: E(["step-tooltip", e.position]),
        role: "tooltip"
      }, p(e.text), 3)) : f("", !0)
    ], 512));
  }
}, M = /* @__PURE__ */ m(A, [["__scopeId", "data-v-5b04a90c"]]), F = {
  install(e) {
    e.component("ShortcutOverlay", I), e.component("CommandPalette", B), e.component("ShortcutHint", U), e.component("StepTooltip", M);
  }
};
export {
  B as CommandPalette,
  U as ShortcutHint,
  I as ShortcutOverlay,
  M as StepTooltip,
  F as default
};