@inquirer/expand - npm Package Compare versions

Comparing version 1.1.16 to 2.0.0

./dist/cjs/index.js

@@ -29,3 +29,4 @@ "use strict";
     const [errorMsg, setError] = (0, core_1.useState)(undefined);
-    const prefix = (0, core_1.usePrefix)();
+    const theme = (0, core_1.makeTheme)(config.theme);
+    const prefix = (0, core_1.usePrefix)({ theme });
     (0, core_1.useKeypress)((event, rl) => {
@@ -58,6 +59,6 @@ if ((0, core_1.isEnterKey)(event)) {
     });
-    const message = chalk_1.default.bold(config.message);
+    const message = theme.style.message(config.message);
     if (status === 'done') {
         // TODO: `value` should be the display name instead of the raw value.
-        return `${prefix} ${message} ${chalk_1.default.cyan(value)}`;
+        return `${prefix} ${message} ${theme.style.answer(value)}`;
     }
@@ -75,3 +76,3 @@ const allChoices = expanded ? choices : [...choices, helpChoice];
         .join('');
-    shortChoices = chalk_1.default.dim(` (${shortChoices})`);
+    shortChoices = ` ${theme.style.defaultAnswer(shortChoices)}`;
     // Expanded display style
@@ -84,3 +85,3 @@ if (expanded) {
             if (choice.key === value.toLowerCase()) {
-                return chalk_1.default.cyan(line);
+                return theme.style.highlight(line);
             }
@@ -98,3 +99,3 @@ return line;
     if (errorMsg) {
-        error = chalk_1.default.red(`> ${errorMsg}`);
+        error = theme.style.error(errorMsg);
     }
@@ -101,0 +102,0 @@ return [

dist/cjs/index.js

@@ -29,3 +29,4 @@ "use strict";
     const [errorMsg, setError] = (0, core_1.useState)(undefined);
-    const prefix = (0, core_1.usePrefix)();
+    const theme = (0, core_1.makeTheme)(config.theme);
+    const prefix = (0, core_1.usePrefix)({ theme });
     (0, core_1.useKeypress)((event, rl) => {
@@ -58,6 +59,6 @@ if ((0, core_1.isEnterKey)(event)) {
     });
-    const message = chalk_1.default.bold(config.message);
+    const message = theme.style.message(config.message);
     if (status === 'done') {
         // TODO: `value` should be the display name instead of the raw value.
-        return `${prefix} ${message} ${chalk_1.default.cyan(value)}`;
+        return `${prefix} ${message} ${theme.style.answer(value)}`;
     }
@@ -75,3 +76,3 @@ const allChoices = expanded ? choices : [...choices, helpChoice];
         .join('');
-    shortChoices = chalk_1.default.dim(` (${shortChoices})`);
+    shortChoices = ` ${theme.style.defaultAnswer(shortChoices)}`;
     // Expanded display style
@@ -84,3 +85,3 @@ if (expanded) {
             if (choice.key === value.toLowerCase()) {
-                return chalk_1.default.cyan(line);
+                return theme.style.highlight(line);
             }
@@ -98,3 +99,3 @@ return line;
     if (errorMsg) {
-        error = chalk_1.default.red(`> ${errorMsg}`);
+        error = theme.style.error(errorMsg);
     }
@@ -101,0 +102,0 @@ return [

dist/cjs/types/index.d.ts

@@ -0,1 +1,3 @@
+import { type Theme } from '@inquirer/core';
+import type { PartialDeep } from '@inquirer/type';
 type ExpandChoice = {
@@ -12,8 +14,10 @@ key: string;
 };
-declare const _default: import("@inquirer/type").Prompt<string, {
-    message: string | Promise<string> | (() => Promise<string>);
-    choices: readonly ExpandChoice[];
-    default?: string | undefined;
-    expanded?: boolean | undefined;
-}>;
+type ExpandConfig = {
+    message: string;
+    choices: ReadonlyArray<ExpandChoice>;
+    default?: string;
+    expanded?: boolean;
+    theme?: PartialDeep<Theme>;
+};
+declare const _default: import("@inquirer/type").Prompt<string, ExpandConfig>;
 export default _default;

package.json

 {
   "name": "@inquirer/expand",
-  "version": "1.1.16",
+  "version": "2.0.0",
   "description": "Inquirer checkbox prompt",
@@ -57,4 +57,4 @@ "main": "./dist/cjs/index.js",
   "dependencies": {
-    "@inquirer/core": "^6.0.0",
-    "@inquirer/type": "^1.1.6",
+    "@inquirer/core": "^7.0.0",
+    "@inquirer/type": "^1.2.0",
     "chalk": "^4.1.2",
@@ -64,3 +64,3 @@ "figures": "^3.2.0"
   "devDependencies": {
-    "@inquirer/testing": "^2.1.10"
+    "@inquirer/testing": "^2.1.11"
   },
@@ -76,3 +76,3 @@ "scripts": {
   "engines": {
-    "node": ">=14.18.0"
+    "node": ">=18"
   },
@@ -91,3 +91,3 @@ "exports": {
   },
-  "gitHead": "4dee2b11d89a7c8a698c9eeda546ba8092b84f64"
+  "gitHead": "44016a40bc9e93455dfdb9fa6c25c27c1c109bd3"
 }

README.md

@@ -57,3 +57,25 @@ # `@inquirer/expand`
 | expanded | `boolean`                                              | no       | Expand the choices by default                                                             |
+| theme    | [See Theming](#Theming)                                | no       | Customize look of the prompt.                                                             |
 
+## Theming
+
+You can theme a prompt by passing a `theme` object option. The theme object only need to includes the keys you wish to modify, we'll fallback on the defaults for the rest.
+
+```ts
+type Theme = {
+  prefix: string;
+  spinner: {
+    interval: number;
+    frames: string[];
+  };
+  style: {
+    answer: (text: string) => string;
+    message: (text: string) => string;
+    error: (text: string) => string;
+    defaultAnswer: (text: string) => string;
+    highlight: (text: string) => string;
+  };
+};
+```
+
 # License
@@ -60,0 +82,0 @@

No alert changes

Improved metrics

Total package byte prevSize

17570

6.63%

Lines of code

320

2.24%

Number of lines in readme file

84

35.48%

Dependency changes

• + Added

  @inquirer/core@7.1.3
  (transitive)

• + Added

  @inquirer/figures@1.0.12
  (transitive)

• - Removed

  @inquirer/core@6.0.0
  (transitive)

• - Removed

  run-async@3.0.0
  (transitive)

• Updated

  @inquirer/core@^7.0.0

• Updated

  @inquirer/type@^1.2.0