ui-thing 0.0.22 → 0.0.23

package/src/templates/shortcuts.ts

@@ -1,217 +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);
-`;
+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/types.ts

@@ -15,9 +15,9 @@ export type InitOptions = { force?: boolean };
 export type Component = {
   name: string;
   value: string;
-  deps: string[];
-  devDeps: string[];
-  nuxtModules: string[];
+  deps?: string[];
+  devDeps?: string[];
+  nuxtModules?: string[];
   instructions?: string[];
   files: Composable[];
   utils: Composable[];

package/src/utils/fetchComponents.ts

@@ -1,8 +1,8 @@
-import axios from "axios";
-
-import { Component } from "../types";
-
-export const fetchComponents = async () => {
-  const { data } = await axios.get<Component[]>("https://ui-thing.behonbaker.com/api/components");
-  return data;
-};
+import axios from "axios";
+
+import { Component } from "../types";
+
+export const fetchComponents = async () => {
+  const { data } = await axios.get<Component[]>("https://ui-thing.behonbaker.com/api/components");
+  return data;
+};

package/src/utils/promptForComponents.ts

@@ -1,19 +1,19 @@
-import ora from "ora";
-import prompts from "prompts";
-
-import allComponents from "../comps";
-import { Component } from "../types";
-
-export const promptUserForComponents = async (): Promise<string[]> => {
-  const { components } = await prompts({
-    type: "autocompleteMultiselect",
-    name: "components",
-    message: "Select the components you want to add",
-    choices: allComponents.map((c: Component) => ({ title: c.name, value: c.value })),
-    onRender(kleur) {
-      // @ts-ignore
-      this.msg = kleur.bgCyan(" Choose components ") + "  Select the components you want to add";
-    },
-  });
-  return components;
-};
+import ora from "ora";
+import prompts from "prompts";
+
+import allComponents from "../comps";
+import { Component } from "../types";
+
+export const promptUserForComponents = async (): Promise<string[]> => {
+  const { components } = await prompts({
+    type: "autocompleteMultiselect",
+    name: "components",
+    message: "Select the components you want to add",
+    choices: allComponents.map((c: Component) => ({ title: c.name, value: c.value })),
+    onRender(kleur) {
+      // @ts-ignore
+      this.msg = kleur.bgCyan(" Choose components ") + "  Select the components you want to add";
+    },
+  });
+  return components;
+};

package/src/utils/uiConfigPrompt.ts

@@ -1,73 +1,73 @@
-import kleur from "kleur";
-import prompts from "prompts";
-
-import { CSS_THEME_OPTIONS } from "./constants";
-
-export const initPrompts = async () => {
-  const response = await prompts([
-    {
-      name: "theme",
-      type: "autocomplete",
-      message: "Which theme do you want to start with?",
-      choices: CSS_THEME_OPTIONS,
-    },
-    {
-      name: "tailwindCSSLocation",
-      type: "text",
-      message: "Where is your tailwind.css file located?",
-      initial: "assets/css/tailwind.css",
-    },
-    {
-      name: "tailwindConfigLocation",
-      type: "text",
-      message: "Where is your tailwind.config file located?",
-      initial: "tailwind.config.js",
-    },
-    {
-      name: "componentsLocation",
-      type: "text",
-      message: "Where should your components be stored?",
-      initial: "components/Ui",
-    },
-    {
-      name: "composablesLocation",
-      type: "text",
-      message: "Where should your composables be stored?",
-      initial: "composables",
-    },
-    {
-      name: "utilsLocation",
-      type: "text",
-      message: "Where should your utils be stored?",
-      initial: "utils",
-    },
-    {
-      name: "force",
-      type: "confirm",
-      message: "Should we just replace component files if they already exist?",
-      initial: true,
-    },
-    {
-      name: "useDefaultFilename",
-      type: "confirm",
-      message: "Would you like to use the default filename when adding components?",
-      initial: true,
-    },
-    {
-      name: "packageManager",
-      type: "select",
-      message: "Which package manager do you use?",
-      choices: [
-        { title: "NPM", value: "npm" },
-        { title: "Yarn", value: "yarn" },
-        { title: "PNPM", value: "pnpm" },
-        { title: "Bun", value: "bun" },
-      ],
-    },
-  ]);
-  if (!response || Object.keys(response).length < 9) {
-    console.log(kleur.red("Incomplete configuration submitted. Exiting..."));
-    return process.exit(0);
-  }
-  return response;
-};
+import kleur from "kleur";
+import prompts from "prompts";
+
+import { CSS_THEME_OPTIONS } from "./constants";
+
+export const initPrompts = async () => {
+  const response = await prompts([
+    {
+      name: "theme",
+      type: "autocomplete",
+      message: "Which theme do you want to start with?",
+      choices: CSS_THEME_OPTIONS,
+    },
+    {
+      name: "tailwindCSSLocation",
+      type: "text",
+      message: "Where is your tailwind.css file located?",
+      initial: "assets/css/tailwind.css",
+    },
+    {
+      name: "tailwindConfigLocation",
+      type: "text",
+      message: "Where is your tailwind.config file located?",
+      initial: "tailwind.config.js",
+    },
+    {
+      name: "componentsLocation",
+      type: "text",
+      message: "Where should your components be stored?",
+      initial: "components/Ui",
+    },
+    {
+      name: "composablesLocation",
+      type: "text",
+      message: "Where should your composables be stored?",
+      initial: "composables",
+    },
+    {
+      name: "utilsLocation",
+      type: "text",
+      message: "Where should your utils be stored?",
+      initial: "utils",
+    },
+    {
+      name: "force",
+      type: "confirm",
+      message: "Should we just replace component files if they already exist?",
+      initial: true,
+    },
+    {
+      name: "useDefaultFilename",
+      type: "confirm",
+      message: "Would you like to use the default filename when adding components?",
+      initial: true,
+    },
+    {
+      name: "packageManager",
+      type: "select",
+      message: "Which package manager do you use?",
+      choices: [
+        { title: "NPM", value: "npm" },
+        { title: "Yarn", value: "yarn" },
+        { title: "PNPM", value: "pnpm" },
+        { title: "Bun", value: "bun" },
+      ],
+    },
+  ]);
+  if (!response || Object.keys(response).length < 9) {
+    console.log(kleur.red("Incomplete configuration submitted. Exiting..."));
+    return process.exit(0);
+  }
+  return response;
+};