ui-thing 0.0.9 → 0.0.10

package/src/index.ts

@@ -4,6 +4,7 @@ import { Command } from "commander";
 import { add } from "./commands/add";
 import { init } from "./commands/init";
 import { addPrettier } from "./commands/prettier";
+import { addShortcuts } from "./commands/shortcuts";
 import { theme } from "./commands/theme";
 import { printFancyBoxMessage } from "./utils/printFancyBoxMessage";
 
@@ -25,6 +26,7 @@ program
   .addCommand(init)
   .addCommand(add)
   .addCommand(theme)
+  .addCommand(addShortcuts)
   .addCommand(addPrettier);
 
 program.parse(process.argv);

package/src/templates/shortcuts.ts

@@ -0,0 +1,217 @@
+export const DEFINE_SHORTCUT = `import { logicAnd, logicNot } from "@vueuse/math";
+import { computed, ref } from "vue";
+import type { ComputedRef, WatchSource } from "vue";
+
+export interface ShortcutConfig {
+  handler: Function;
+  usingInput?: string | boolean;
+  whenever?: WatchSource<Boolean>[];
+}
+
+export interface ShortcutsConfig {
+  [key: string]: ShortcutConfig | Function;
+}
+
+export interface ShortcutsOptions {
+  chainDelay?: number;
+}
+
+interface Shortcut {
+  handler: Function;
+  condition: ComputedRef<Boolean>;
+  chained: boolean;
+  // KeyboardEvent attributes
+  key: string;
+  ctrlKey: boolean;
+  metaKey: boolean;
+  shiftKey: boolean;
+  altKey: boolean;
+  // code?: string
+  // keyCode?: number
+}
+
+export const defineShortcuts = (config: ShortcutsConfig, options: ShortcutsOptions = {}) => {
+  const { macOS, usingInput } = useShortcuts();
+
+  let shortcuts: Shortcut[] = [];
+
+  const chainedInputs = ref<any[]>([]);
+  const clearChainedInput = () => {
+    chainedInputs.value.splice(0, chainedInputs.value.length);
+  };
+  const debouncedClearChainedInput = useDebounceFn(clearChainedInput, options.chainDelay ?? 800);
+
+  const onKeyDown = (e: KeyboardEvent) => {
+    // Input autocomplete triggers a keydown event
+    if (!e.key) {
+      return;
+    }
+
+    const alphabeticalKey = /^[a-z]{1}$/i.test(e.key);
+
+    let chainedKey;
+    chainedInputs.value.push(e.key);
+    // try matching a chained shortcut
+    if (chainedInputs.value.length >= 2) {
+      chainedKey = chainedInputs.value.slice(-2).join("-");
+
+      for (const shortcut of shortcuts.filter((s) => s.chained)) {
+        if (shortcut.key !== chainedKey) {
+          continue;
+        }
+
+        if (shortcut.condition.value) {
+          e.preventDefault();
+          shortcut.handler();
+        }
+        clearChainedInput();
+        return;
+      }
+    }
+
+    // try matching a standard shortcut
+    for (const shortcut of shortcuts.filter((s) => !s.chained)) {
+      if (e.key.toLowerCase() !== shortcut.key) {
+        continue;
+      }
+      if (e.metaKey !== shortcut.metaKey) {
+        continue;
+      }
+      if (e.ctrlKey !== shortcut.ctrlKey) {
+        continue;
+      }
+      // shift modifier is only checked in combination with alphabetical keys
+      // (shift with non-alphabetical keys would change the key)
+      if (alphabeticalKey && e.shiftKey !== shortcut.shiftKey) {
+        continue;
+      }
+      // alt modifier changes the combined key anyways
+      // if (e.altKey !== shortcut.altKey) { continue }
+
+      if (shortcut.condition.value) {
+        e.preventDefault();
+        shortcut.handler();
+      }
+      clearChainedInput();
+      return;
+    }
+
+    debouncedClearChainedInput();
+  };
+
+  // Map config to full detailled shortcuts
+  shortcuts = Object.entries(config)
+    .map(([key, shortcutConfig]) => {
+      if (!shortcutConfig) {
+        return null;
+      }
+
+      // Parse key and modifiers
+      let shortcut: Partial<Shortcut>;
+
+      if (key.includes("-") && key.includes("_")) {
+        console.trace("[Shortcut] Invalid key");
+        return null;
+      }
+
+      const chained = key.includes("-");
+      if (chained) {
+        shortcut = {
+          key: key.toLowerCase(),
+          metaKey: false,
+          ctrlKey: false,
+          shiftKey: false,
+          altKey: false,
+        };
+      } else {
+        const keySplit = key
+          .toLowerCase()
+          .split("_")
+          .map((k) => k);
+        shortcut = {
+          key: keySplit.filter((k) => !["meta", "ctrl", "shift", "alt"].includes(k)).join("_"),
+          metaKey: keySplit.includes("meta"),
+          ctrlKey: keySplit.includes("ctrl"),
+          shiftKey: keySplit.includes("shift"),
+          altKey: keySplit.includes("alt"),
+        };
+      }
+      shortcut.chained = chained;
+
+      // Convert Meta to Ctrl for non-MacOS
+      if (!macOS.value && shortcut.metaKey && !shortcut.ctrlKey) {
+        shortcut.metaKey = false;
+        shortcut.ctrlKey = true;
+      }
+
+      // Retrieve handler function
+      if (typeof shortcutConfig === "function") {
+        shortcut.handler = shortcutConfig;
+      } else if (typeof shortcutConfig === "object") {
+        shortcut = { ...shortcut, handler: shortcutConfig.handler };
+      }
+
+      if (!shortcut.handler) {
+        console.trace("[Shortcut] Invalid value");
+        return null;
+      }
+
+      // Create shortcut computed
+      const conditions: ComputedRef<Boolean>[] = [];
+      if (!(shortcutConfig as ShortcutConfig).usingInput) {
+        conditions.push(logicNot(usingInput));
+      } else if (typeof (shortcutConfig as ShortcutConfig).usingInput === "string") {
+        conditions.push(
+          computed(() => usingInput.value === (shortcutConfig as ShortcutConfig).usingInput)
+        );
+      }
+      shortcut.condition = logicAnd(
+        ...conditions,
+        ...((shortcutConfig as ShortcutConfig).whenever || [])
+      );
+
+      return shortcut as Shortcut;
+    })
+    .filter(Boolean) as Shortcut[];
+
+  useEventListener("keydown", onKeyDown);
+};
+`;
+
+export const USE_SHORTCUTS = `export const _useShortcuts = () => {
+  const macOS = computed(
+    () =>
+      process.client && navigator && navigator.userAgent && navigator.userAgent.match(/Macintosh;/)
+  );
+
+  const metaSymbol = ref(" ");
+
+  const activeElement = useActiveElement();
+  const usingInput = computed(() => {
+    const usingInput = !!(
+      activeElement.value?.tagName === "INPUT" ||
+      activeElement.value?.tagName === "TEXTAREA" ||
+      activeElement.value?.contentEditable === "true"
+    );
+
+    if (usingInput) {
+      return ((activeElement.value as any)?.name as string) || true;
+    }
+
+    return false;
+  });
+
+  onMounted(() => {
+    metaSymbol.value = macOS.value ? "⌘" : "Ctrl";
+  });
+
+  return {
+    macOS,
+    metaSymbol,
+    activeElement,
+    usingInput,
+  };
+};
+
+export const useShortcuts = createSharedComposable(_useShortcuts);
+`;

package/src/utils/addShortcutFiles.ts

@@ -0,0 +1,12 @@
+import fse from "fs-extra";
+
+import { DEFINE_SHORTCUT, USE_SHORTCUTS } from "../templates/shortcuts";
+
+export const addShortcutFiles = async (cwd = process.cwd()) => {
+  // ensure that the composable folder exists
+  await fse.ensureDir(`${cwd}/composables`);
+  // write the defineShortcuts composable
+  await fse.writeFile(`${cwd}/composables/defineShortcuts.ts`, DEFINE_SHORTCUT, "utf-8");
+  // write the useShortcuts composable
+  await fse.writeFile(`${cwd}/composables/useShortcuts.ts`, USE_SHORTCUTS, "utf-8");
+};

package/src/utils/constants.ts

@@ -3,7 +3,6 @@ export const INIT_DEV_DEPS = [
   "typescript",
   "tailwindcss-animate",
   "nuxt-icon",
-  "nuxt-lodash",
   "prettier-plugin-tailwindcss",
   "prettier",
   "@nuxtjs/tailwindcss",
@@ -16,7 +15,6 @@ export const INIT_MODULES = [
   "@nuxtjs/tailwindcss",
   "@nuxtjs/color-mode",
   "@vueuse/nuxt",
-  "nuxt-lodash",
   "nuxt-icon",
 ];