Skip to content

Commit 7df841d

Browse files
43081j43081j
authored
fix: remove all trailing space from output (#351)
1 parent 99831e9 commit 7df841d

16 files changed

+149
-111
lines changed

‎.changeset/giant-dryers-serve.md‎

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
1+
---
2+
"@clack/prompts": patch
3+
"@clack/core": patch
4+
---
5+
6+
Removed all trailing space in prompt output and fixed various padding rendering bugs.

‎packages/core/src/prompts/autocomplete.ts‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -168,6 +168,7 @@ export default class AutocompletePrompt<T extends OptionLike> extends Prompt<
168168
if (this.focusedValue) {
169169
this.selectedValues = [this.focusedValue];
170170
}
171+
this.isNavigating = false;
171172
}
172173
}
173174
}

‎packages/core/src/prompts/prompt.ts‎

Lines changed: 6 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -256,12 +256,16 @@ export default class Prompt<TValue> {
256256

257257
private restoreCursor() {
258258
const lines =
259-
wrap(this._prevFrame, process.stdout.columns, { hard: true }).split('\n').length - 1;
259+
wrap(this._prevFrame, process.stdout.columns, { hard: true, trim: false }).split('\n')
260+
.length - 1;
260261
this.output.write(cursor.move(-999, lines * -1));
261262
}
262263

263264
private render() {
264-
const frame = wrap(this._render(this) ?? '', process.stdout.columns, { hard: true });
265+
const frame = wrap(this._render(this) ?? '', process.stdout.columns, {
266+
hard: true,
267+
trim: false,
268+
});
265269
if (frame === this._prevFrame) return;
266270

267271
if (this.state === 'initial') {

‎packages/prompts/src/autocomplete.ts‎

Lines changed: 14 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -101,20 +101,25 @@ export const autocomplete = <Value>(opts: AutocompleteOptions<Value>) => {
101101
case 'submit': {
102102
// Show selected value
103103
const selected = getSelectedOptions(this.selectedValues, options);
104-
const label = selected.length > 0 ? selected.map(getLabel).join(', ') : '';
105-
return `${title}${color.gray(S_BAR)} ${color.dim(label)}`;
104+
const label =
105+
selected.length > 0 ? ` ${color.dim(selected.map(getLabel).join(', '))}` : '';
106+
return `${title}${color.gray(S_BAR)}${label}`;
106107
}
107108

108109
case 'cancel': {
109-
return `${title}${color.gray(S_BAR)} ${color.strikethrough(color.dim(userInput))}`;
110+
const userInputText = userInput ? ` ${color.strikethrough(color.dim(userInput))}` : '';
111+
return `${title}${color.gray(S_BAR)}${userInputText}`;
110112
}
111113

112114
default: {
113115
// Display cursor position - show plain text in navigation mode
114-
const searchText =
115-
this.isNavigating || showPlaceholder
116-
? color.dim(showPlaceholder ? placeholder : userInput)
117-
: this.userInputWithCursor;
116+
let searchText = '';
117+
if (this.isNavigating || showPlaceholder) {
118+
const searchTextValue = showPlaceholder ? placeholder : userInput;
119+
searchText = searchTextValue !== '' ? ` ${color.dim(searchTextValue)}` : '';
120+
} else {
121+
searchText = ` ${this.userInputWithCursor}`;
122+
}
118123

119124
// Show match count if filtered
120125
const matches =
@@ -164,8 +169,8 @@ export const autocomplete = <Value>(opts: AutocompleteOptions<Value>) => {
164169

165170
// Return the formatted prompt
166171
return [
167-
title,
168-
`${color.cyan(S_BAR)} ${color.dim('Search:')} ${searchText}${matches}`,
172+
`${title}${color.cyan(S_BAR)}`,
173+
`${color.cyan(S_BAR)} ${color.dim('Search:')}${searchText}${matches}`,
169174
...noResults,
170175
...validationError,
171176
...displayOptions.map((option) => `${color.cyan(S_BAR)} ${option}`),

‎packages/prompts/src/group-multi-select.ts‎

Lines changed: 34 additions & 21 deletions
Original file line numberDiff line numberDiff line change
@@ -40,12 +40,15 @@ export const groupMultiselect = <Value>(opts: GroupMultiSelectOptions<Value>) =>
4040
const next = isItem && (options[options.indexOf(option) + 1] ?? { group: true });
4141
const isLast = isItem && (next as any).group === true;
4242
const prefix = isItem ? (selectableGroups ? `${isLast ? S_BAR_END : S_BAR} ` : ' ') : '';
43-
const spacingPrefix =
44-
groupSpacing > 0 && !isItem ? `\n${color.cyan(S_BAR)} `.repeat(groupSpacing) : '';
43+
let spacingPrefix = '';
44+
if (groupSpacing > 0 && !isItem) {
45+
const spacingPrefixText = `\n${color.cyan(S_BAR)}`;
46+
spacingPrefix = `${spacingPrefixText.repeat(groupSpacing - 1)}${spacingPrefixText} `;
47+
}
4548

4649
if (state === 'active') {
47-
return `${spacingPrefix}${color.dim(prefix)}${color.cyan(S_CHECKBOX_ACTIVE)} ${label} ${
48-
option.hint ? color.dim(`(${option.hint})`) : ''
50+
return `${spacingPrefix}${color.dim(prefix)}${color.cyan(S_CHECKBOX_ACTIVE)} ${label}${
51+
option.hint ? ` ${color.dim(`(${option.hint})`)}` : ''
4952
}`;
5053
}
5154
if (state === 'group-active') {
@@ -56,16 +59,16 @@ export const groupMultiselect = <Value>(opts: GroupMultiSelectOptions<Value>) =>
5659
}
5760
if (state === 'selected') {
5861
const selectedCheckbox = isItem || selectableGroups ? color.green(S_CHECKBOX_SELECTED) : '';
59-
return `${spacingPrefix}${color.dim(prefix)}${selectedCheckbox} ${color.dim(label)} ${
60-
option.hint ? color.dim(`(${option.hint})`) : ''
62+
return `${spacingPrefix}${color.dim(prefix)}${selectedCheckbox} ${color.dim(label)}${
63+
option.hint ? ` ${color.dim(`(${option.hint})`)}` : ''
6164
}`;
6265
}
6366
if (state === 'cancelled') {
6467
return `${color.strikethrough(color.dim(label))}`;
6568
}
6669
if (state === 'active-selected') {
67-
return `${spacingPrefix}${color.dim(prefix)}${color.green(S_CHECKBOX_SELECTED)} ${label} ${
68-
option.hint ? color.dim(`(${option.hint})`) : ''
70+
return `${spacingPrefix}${color.dim(prefix)}${color.green(S_CHECKBOX_SELECTED)} ${label}${
71+
option.hint ? ` ${color.dim(`(${option.hint})`)}` : ''
6972
}`;
7073
}
7174
if (state === 'submitted') {
@@ -101,10 +104,12 @@ export const groupMultiselect = <Value>(opts: GroupMultiSelectOptions<Value>) =>
101104

102105
switch (this.state) {
103106
case 'submit': {
104-
return `${title}${color.gray(S_BAR)} ${this.options
107+
const selectedOptions = this.options
105108
.filter(({ value: optionValue }) => value.includes(optionValue))
106-
.map((option) => opt(option, 'submitted'))
107-
.join(color.dim(', '))}`;
109+
.map((option) => opt(option, 'submitted'));
110+
const optionsText =
111+
selectedOptions.length === 0 ? '' : ` ${selectedOptions.join(color.dim(', '))}`;
112+
return `${title}${color.gray(S_BAR)}${optionsText}`;
108113
}
109114
case 'cancel': {
110115
const label = this.options
@@ -146,7 +151,7 @@ export const groupMultiselect = <Value>(opts: GroupMultiSelectOptions<Value>) =>
146151
.join(`\n${color.yellow(S_BAR)} `)}\n${footer}\n`;
147152
}
148153
default: {
149-
return `${title}${color.cyan(S_BAR)} ${this.options
154+
const optionsText = this.options
150155
.map((option, i, options) => {
151156
const selected =
152157
value.includes(option.value) ||
@@ -156,18 +161,26 @@ export const groupMultiselect = <Value>(opts: GroupMultiSelectOptions<Value>) =>
156161
!active &&
157162
typeof option.group === 'string' &&
158163
this.options[this.cursor].value === option.group;
164+
let optionText = '';
159165
if (groupActive) {
160-
return opt(option, selected ? 'group-active-selected' : 'group-active', options);
161-
}
162-
if (active && selected) {
163-
return opt(option, 'active-selected', options);
166+
optionText = opt(
167+
option,
168+
selected ? 'group-active-selected' : 'group-active',
169+
options
170+
);
171+
} else if (active && selected) {
172+
optionText = opt(option, 'active-selected', options);
173+
} else if (selected) {
174+
optionText = opt(option, 'selected', options);
175+
} else {
176+
optionText = opt(option, active ? 'active' : 'inactive', options);
164177
}
165-
if (selected) {
166-
return opt(option, 'selected', options);
167-
}
168-
return opt(option, active ? 'active' : 'inactive', options);
178+
const prefix = i !== 0 && !optionText.startsWith('\n') ? ' ' : '';
179+
return `${prefix}${optionText}`;
169180
})
170-
.join(`\n${color.cyan(S_BAR)} `)}\n${color.cyan(S_BAR_END)}\n`;
181+
.join(`\n${color.cyan(S_BAR)}`);
182+
const optionsPrefix = optionsText.startsWith('\n') ? '' : ' ';
183+
return `${title}${color.cyan(S_BAR)}${optionsPrefix}${optionsText}\n${color.cyan(S_BAR_END)}\n`;
171184
}
172185
}
173186
},

‎packages/prompts/src/multi-select.ts‎

Lines changed: 8 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -27,21 +27,21 @@ export const multiselect = <Value>(opts: MultiSelectOptions<Value>) => {
2727
) => {
2828
const label = option.label ?? String(option.value);
2929
if (state === 'active') {
30-
return `${color.cyan(S_CHECKBOX_ACTIVE)} ${label} ${
31-
option.hint ? color.dim(`(${option.hint})`) : ''
30+
return `${color.cyan(S_CHECKBOX_ACTIVE)} ${label}${
31+
option.hint ? ` ${color.dim(`(${option.hint})`)}` : ''
3232
}`;
3333
}
3434
if (state === 'selected') {
35-
return `${color.green(S_CHECKBOX_SELECTED)} ${color.dim(label)} ${
36-
option.hint ? color.dim(`(${option.hint})`) : ''
35+
return `${color.green(S_CHECKBOX_SELECTED)} ${color.dim(label)}${
36+
option.hint ? ` ${color.dim(`(${option.hint})`)}` : ''
3737
}`;
3838
}
3939
if (state === 'cancelled') {
4040
return `${color.strikethrough(color.dim(label))}`;
4141
}
4242
if (state === 'active-selected') {
43-
return `${color.green(S_CHECKBOX_SELECTED)} ${label} ${
44-
option.hint ? color.dim(`(${option.hint})`) : ''
43+
return `${color.green(S_CHECKBOX_SELECTED)} ${label}${
44+
option.hint ? ` ${color.dim(`(${option.hint})`)}` : ''
4545
}`;
4646
}
4747
if (state === 'submitted') {
@@ -98,8 +98,8 @@ export const multiselect = <Value>(opts: MultiSelectOptions<Value>) => {
9898
.filter(({ value: optionValue }) => value.includes(optionValue))
9999
.map((option) => opt(option, 'cancelled'))
100100
.join(color.dim(', '));
101-
return `${title}${color.gray(S_BAR)} ${
102-
label.trim() ? `${label}\n${color.gray(S_BAR)}` : ''
101+
return `${title}${color.gray(S_BAR)}${
102+
label.trim() ? ` ${label}\n${color.gray(S_BAR)}` : ''
103103
}`;
104104
}
105105
case 'error': {

‎packages/prompts/src/password.ts‎

Lines changed: 12 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -20,16 +20,22 @@ export const password = (opts: PasswordOptions) => {
2020
const masked = this.masked;
2121

2222
switch (this.state) {
23-
case 'error':
24-
return `${title.trim()}\n${color.yellow(S_BAR)} ${masked}\n${color.yellow(
23+
case 'error': {
24+
const maskedText = masked ? ` ${masked}` : '';
25+
return `${title.trim()}\n${color.yellow(S_BAR)}${maskedText}\n${color.yellow(
2526
S_BAR_END
2627
)} ${color.yellow(this.error)}\n`;
27-
case 'submit':
28-
return `${title}${color.gray(S_BAR)} ${color.dim(masked)}`;
29-
case 'cancel':
30-
return `${title}${color.gray(S_BAR)} ${color.strikethrough(color.dim(masked))}${
28+
}
29+
case 'submit': {
30+
const maskedText = masked ? ` ${color.dim(masked)}` : '';
31+
return `${title}${color.gray(S_BAR)}${maskedText}`;
32+
}
33+
case 'cancel': {
34+
const maskedText = masked ? ` ${color.strikethrough(color.dim(masked))}` : '';
35+
return `${title}${color.gray(S_BAR)}${maskedText}${
3136
masked ? `\n${color.gray(S_BAR)}` : ''
3237
}`;
38+
}
3339
default:
3440
return `${title}${color.cyan(S_BAR)} ${userInput}\n${color.cyan(S_BAR_END)}\n`;
3541
}

‎packages/prompts/src/select.ts‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -64,8 +64,8 @@ export const select = <Value>(opts: SelectOptions<Value>) => {
6464
case 'selected':
6565
return `${color.dim(label)}`;
6666
case 'active':
67-
return `${color.green(S_RADIO_ACTIVE)} ${label} ${
68-
option.hint ? color.dim(`(${option.hint})`) : ''
67+
return `${color.green(S_RADIO_ACTIVE)} ${label}${
68+
option.hint ? ` ${color.dim(`(${option.hint})`)}` : ''
6969
}`;
7070
case 'cancelled':
7171
return `${color.strikethrough(color.dim(label))}`;

‎packages/prompts/src/text.ts‎

Lines changed: 10 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -28,17 +28,20 @@ export const text = (opts: TextOptions) => {
2828
const value = this.value ?? '';
2929

3030
switch (this.state) {
31-
case 'error':
31+
case 'error': {
32+
const errorText = this.error ? ` ${color.yellow(this.error)}` : '';
3233
return `${title.trim()}\n${color.yellow(S_BAR)} ${userInput}\n${color.yellow(
3334
S_BAR_END
34-
)} ${color.yellow(this.error)}\n`;
35+
)}${errorText}\n`;
36+
}
3537
case 'submit': {
36-
return `${title}${color.gray(S_BAR)} ${color.dim(value)}`;
38+
const valueText = value ? ` ${color.dim(value)}` : '';
39+
return `${title}${color.gray(S_BAR)}${valueText}`;
40+
}
41+
case 'cancel': {
42+
const valueText = value ? ` ${color.strikethrough(color.dim(value))}` : '';
43+
return `${title}${color.gray(S_BAR)}${valueText}${value.trim() ? `\n${color.gray(S_BAR)}` : ''}`;
3744
}
38-
case 'cancel':
39-
return `${title}${color.gray(S_BAR)} ${color.strikethrough(
40-
color.dim(value)
41-
)}${value.trim() ? `\n${color.gray(S_BAR)}` : ''}`;
4245
default:
4346
return `${title}${color.cyan(S_BAR)} ${userInput}\n${color.cyan(S_BAR_END)}\n`;
4447
}

0 commit comments

Comments
 (0)