|
9 | 9 | SelectKeyPrompt,
|
10 | 10 | SelectPrompt,
|
11 | 11 | State,
|
12 |
| - TextPrompt, |
13 | 12 | strLength,
|
| 13 | + TextPrompt |
14 | 14 | } from '@clack/core';
|
15 | 15 | import isUnicodeSupported from 'is-unicode-supported';
|
16 | 16 | import color from 'picocolors';
|
@@ -138,7 +138,9 @@ function applyTheme(data: ThemeParams): string {
|
138 | 138 | style: (line) => color.strikethrough(color.dim(line)),
|
139 | 139 | },
|
140 | 140 | }),
|
141 |
| - ].join('\n'); |
| 141 | + ] |
| 142 | + .filter(Boolean) |
| 143 | + .join('\n'); |
142 | 144 |
|
143 | 145 | case 'error':
|
144 | 146 | return [
|
@@ -311,17 +313,16 @@ export const select = <Value>(opts: SelectOptions<Value>) => {
|
311 | 313 | value = opt(this.options[this.cursor], 'selected');
|
312 | 314 | break;
|
313 | 315 | case 'cancel':
|
314 |
| - return `${title}${color.gray(S_BAR)} ${opt( |
315 |
| - this.options[this.cursor], |
316 |
| - 'cancelled' |
317 |
| - )}\n${color.gray(S_BAR)}`; |
| 316 | + value = opt(this.options[this.cursor], 'cancelled'); |
| 317 | + break; |
318 | 318 | default: {
|
319 |
| - return `${title}${color.cyan(S_BAR)} ${limitOptions({ |
| 319 | + value = limitOptions({ |
320 | 320 | cursor: this.cursor,
|
321 | 321 | options: this.options,
|
322 | 322 | maxItems: opts.maxItems,
|
323 | 323 | style: (item, active) => opt(item, active ? 'active' : 'inactive'),
|
324 |
| - }).join(`\n${color.cyan(S_BAR)} `)}\n${color.cyan(S_BAR_END)}\n`; |
| 324 | + }).join('\n'); |
| 325 | + break; |
325 | 326 | }
|
326 | 327 | }
|
327 | 328 | return applyTheme({
|
@@ -362,26 +363,20 @@ export const selectKey = <Value extends string>(opts: SelectOptions<Value>) => {
|
362 | 363 |
|
363 | 364 | switch (this.state) {
|
364 | 365 | case 'submit':
|
365 |
| - return `${title}${color.gray(S.BAR)} ${opt( |
| 366 | + return `${title}\n${color.gray(S_BAR)} ${opt( |
366 | 367 | this.options.find((opt) => opt.value === this.value)!,
|
367 | 368 | 'selected'
|
368 | 369 | )}`;
|
369 | 370 | case 'cancel':
|
370 |
| - return `${title}${color.gray(S_BAR)} ${opt(this.options[0], 'cancelled')}\n${color.gray( |
371 |
| - S_BAR |
372 |
| - )}`; |
| 371 | + return `${title}\n${color.gray(S_BAR)} ${opt( |
| 372 | + this.options[0], |
| 373 | + 'cancelled' |
| 374 | + )}\n${color.gray(S_BAR)}`; |
373 | 375 | default:
|
374 |
| - return `${title}${color.cyan(S_BAR)} ${this.options |
| 376 | + return `${title}\n${color.cyan(S_BAR)} ${this.options |
375 | 377 | .map((option, i) => opt(option, i === this.cursor ? 'active' : 'inactive'))
|
376 | 378 | .join(`\n${color.cyan(S_BAR)} `)}\n${color.cyan(S_BAR_END)}\n`;
|
377 | 379 | }
|
378 |
| - |
379 |
| - return applyTheme({ |
380 |
| - ctx: this, |
381 |
| - message: opts.message, |
382 |
| - value, |
383 |
| - valueWithCursor: undefined, |
384 |
| - }); |
385 | 380 | },
|
386 | 381 | }).prompt() as Promise<Value | symbol>;
|
387 | 382 | };
|
@@ -465,34 +460,36 @@ export const multiselect = <Value>(opts: MultiSelectOptions<Value>) => {
|
465 | 460 | .join(color.dim(', ')) ?? '';
|
466 | 461 | }
|
467 | 462 | case 'error': {
|
468 |
| - const footer = this.error |
469 |
| - .split('\n') |
470 |
| - .map((ln, i) => |
471 |
| - i === 0 ? `${color.yellow(S_BAR_END)} ${color.yellow(ln)}` : ` ${ln}` |
472 |
| - ) |
473 |
| - .join('\n'); |
474 |
| - return ( |
475 |
| - title + |
476 |
| - color.yellow(S_BAR) + |
477 |
| - ' ' + |
478 |
| - limitOptions({ |
479 |
| - options: this.options, |
480 |
| - cursor: this.cursor, |
481 |
| - maxItems: opts.maxItems, |
482 |
| - style: styleOption, |
483 |
| - }).join(`\n${color.yellow(S_BAR)} `) + |
484 |
| - '\n' + |
485 |
| - footer + |
486 |
| - '\n' |
| 463 | + error = format( |
| 464 | + this.error |
| 465 | + .split('\n') |
| 466 | + .map((ln, i) => (i === 0 ? color.yellow(ln) : ln)) |
| 467 | + .join('\n'), |
| 468 | + { |
| 469 | + firstLine: { |
| 470 | + start: color.yellow(S_BAR_END), |
| 471 | + }, |
| 472 | + default: { |
| 473 | + start: color.hidden('-'), |
| 474 | + }, |
| 475 | + } |
487 | 476 | );
|
| 477 | + value = limitOptions({ |
| 478 | + cursor: this.cursor, |
| 479 | + maxItems: opts.maxItems, |
| 480 | + options: this.options, |
| 481 | + style: styleOption, |
| 482 | + }).join('\n'); |
| 483 | + break; |
488 | 484 | }
|
489 | 485 | default: {
|
490 |
| - return `${title}${color.cyan(S_BAR)} ${limitOptions({ |
491 |
| - options: this.options, |
| 486 | + value = limitOptions({ |
492 | 487 | cursor: this.cursor,
|
493 | 488 | maxItems: opts.maxItems,
|
| 489 | + options: this.options, |
494 | 490 | style: styleOption,
|
495 |
| - }).join(`\n${color.cyan(S_BAR)} `)}\n${color.cyan(S_BAR_END)}\n`; |
| 491 | + }).join('\n'); |
| 492 | + break; |
496 | 493 | }
|
497 | 494 | }
|
498 | 495 | return applyTheme({
|
@@ -585,7 +582,7 @@ export const groupMultiselect = <Value>(opts: GroupMultiSelectOptions<Value>) =>
|
585 | 582 | }
|
586 | 583 | };
|
587 | 584 |
|
588 |
| - let title = `${color.gray(S_BAR)}\n${symbol(this.state)} ${opts.message}\n`; |
| 585 | + let title = `${color.gray(S_BAR)}\n${symbol(this.state)} ${opts.message}`; |
589 | 586 |
|
590 | 587 | switch (this.state) {
|
591 | 588 | case 'submit': {
|
@@ -868,9 +865,8 @@ export const spinner = () => {
|
868 | 865 | : code === 1
|
869 | 866 | ? color.red(S_STEP_CANCEL)
|
870 | 867 | : color.red(S_STEP_ERROR);
|
871 |
| - process.stdout.write(cursor.move(-999, 0)); |
872 |
| - process.stdout.write(erase.down(1)); |
873 |
| - process.stdout.write(`${step} ${_message}\n`); |
| 868 | + _message = formatMessage(step, msg || _message); |
| 869 | + process.stdout.write(_message + '\n'); |
874 | 870 | clearHooks();
|
875 | 871 | unblock();
|
876 | 872 | };
|
|
0 commit comments