@adecore/terminal 0.53.3 → 0.54.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/TerminalView.d.ts +1 -1
- package/dist/TerminalView.js +3 -3
- package/dist/terminal.css +62 -0
- package/package.json +1 -1
- package/src/TerminalView.tsx +3 -3
- package/src/terminal.css +62 -0
package/dist/TerminalView.d.ts
CHANGED
package/dist/TerminalView.js
CHANGED
|
@@ -1,9 +1,9 @@
|
|
|
1
|
-
import { useEffect, useImperativeHandle, useRef } from 'react';
|
|
2
|
-
import clsx from 'clsx';
|
|
3
1
|
import { FitAddon } from '@xterm/addon-fit';
|
|
4
2
|
import { Terminal } from '@xterm/xterm';
|
|
5
|
-
import
|
|
3
|
+
import clsx from 'clsx';
|
|
4
|
+
import { useEffect, useImperativeHandle, useRef } from 'react';
|
|
6
5
|
import { bindTerminalLinks } from './links.js';
|
|
6
|
+
import { readTerminalFont, readTerminalTheme } from './theme.js';
|
|
7
7
|
import { webglBudget } from './webgl-budget.js';
|
|
8
8
|
import { fitToHost, followAncestorScale } from './xterm-internals.js';
|
|
9
9
|
import { jsx as _jsx } from "react/jsx-runtime";
|
package/dist/terminal.css
CHANGED
|
@@ -59,3 +59,65 @@
|
|
|
59
59
|
.terminal-view-host .xterm { height: 100%; top: var(--term-offset, 6px); }
|
|
60
60
|
.terminal-view-host .xterm .xterm-viewport { background-color: transparent !important; }
|
|
61
61
|
}
|
|
62
|
+
|
|
63
|
+
/* xterm draws its own scrollbar in the DOM; these rules give it the look of the overlay bars of @adecore/ui
|
|
64
|
+
(`--scrollbar-*`). Unlayered and one class stronger than `xterm.css` and the colors xterm injects, which are
|
|
65
|
+
unlayered too; `!important` only where xterm writes a size inline. Its own timer hides the bar after the
|
|
66
|
+
last scroll, so the fade waits a little longer to land where the other bars fade. */
|
|
67
|
+
.terminal-view-host .xterm .xterm-scrollable-element > .scrollbar.vertical {
|
|
68
|
+
--scrollbar-size: 12px;
|
|
69
|
+
width: var(--scrollbar-size) !important;
|
|
70
|
+
background: transparent;
|
|
71
|
+
}
|
|
72
|
+
.terminal-view-host .xterm .xterm-scrollable-element > .scrollbar.vertical::before {
|
|
73
|
+
content: "";
|
|
74
|
+
position: absolute;
|
|
75
|
+
inset: 2px 2px;
|
|
76
|
+
border-radius: 999px;
|
|
77
|
+
background: var(--scrollbar-track);
|
|
78
|
+
opacity: 0;
|
|
79
|
+
transition: opacity 120ms ease;
|
|
80
|
+
}
|
|
81
|
+
.terminal-view-host .xterm .xterm-scrollable-element > .visible { transition: opacity 120ms ease; }
|
|
82
|
+
.terminal-view-host .xterm .xterm-scrollable-element > .invisible.fade { transition: opacity 240ms ease 100ms; }
|
|
83
|
+
.terminal-view-host .xterm .xterm-scrollable-element > .scrollbar.vertical > .slider {
|
|
84
|
+
left: 0 !important;
|
|
85
|
+
width: 100% !important;
|
|
86
|
+
background: transparent;
|
|
87
|
+
touch-action: none;
|
|
88
|
+
}
|
|
89
|
+
.terminal-view-host .xterm .xterm-scrollable-element > .scrollbar.vertical > .slider::before {
|
|
90
|
+
content: "";
|
|
91
|
+
position: absolute;
|
|
92
|
+
top: 2px;
|
|
93
|
+
bottom: 2px;
|
|
94
|
+
right: 3px;
|
|
95
|
+
width: 6px;
|
|
96
|
+
border-radius: 999px;
|
|
97
|
+
background: var(--scrollbar-thumb);
|
|
98
|
+
transition: background-color 120ms ease, width 120ms ease, right 120ms ease;
|
|
99
|
+
}
|
|
100
|
+
.terminal-view-host .xterm .xterm-scrollable-element > .scrollbar.vertical > .slider.active::before {
|
|
101
|
+
right: 2px;
|
|
102
|
+
width: 8px;
|
|
103
|
+
background: var(--scrollbar-thumb-active);
|
|
104
|
+
}
|
|
105
|
+
.terminal-view-host .xterm .xterm-scrollable-element > .scrollbar.vertical:has(> .slider.active)::before { opacity: 1; }
|
|
106
|
+
@media (hover: hover) {
|
|
107
|
+
.terminal-view-host .xterm .xterm-scrollable-element > .scrollbar.vertical:hover::before { opacity: 1; }
|
|
108
|
+
.terminal-view-host .xterm .xterm-scrollable-element > .scrollbar.vertical:hover > .slider:not(.active)::before {
|
|
109
|
+
right: 2px;
|
|
110
|
+
width: 8px;
|
|
111
|
+
background: var(--scrollbar-thumb-hover);
|
|
112
|
+
}
|
|
113
|
+
}
|
|
114
|
+
@media (pointer: coarse) {
|
|
115
|
+
.terminal-view-host .xterm .xterm-scrollable-element > .scrollbar.vertical { --scrollbar-size: 20px; }
|
|
116
|
+
.terminal-view-host .xterm .xterm-scrollable-element > .scrollbar.vertical > .slider::before { right: 2px; width: 8px; }
|
|
117
|
+
}
|
|
118
|
+
@media (prefers-reduced-motion: reduce) {
|
|
119
|
+
.terminal-view-host .xterm .xterm-scrollable-element > .visible,
|
|
120
|
+
.terminal-view-host .xterm .xterm-scrollable-element > .invisible.fade,
|
|
121
|
+
.terminal-view-host .xterm .xterm-scrollable-element > .scrollbar.vertical::before,
|
|
122
|
+
.terminal-view-host .xterm .xterm-scrollable-element > .scrollbar.vertical > .slider::before { transition: none; }
|
|
123
|
+
}
|
package/package.json
CHANGED
package/src/TerminalView.tsx
CHANGED
|
@@ -1,9 +1,9 @@
|
|
|
1
|
-
import { useEffect, useImperativeHandle, useRef, type Ref } from 'react';
|
|
2
|
-
import clsx from 'clsx';
|
|
3
1
|
import { FitAddon } from '@xterm/addon-fit';
|
|
4
2
|
import { Terminal } from '@xterm/xterm';
|
|
5
|
-
import
|
|
3
|
+
import clsx from 'clsx';
|
|
4
|
+
import { useEffect, useImperativeHandle, useRef, type Ref } from 'react';
|
|
6
5
|
import { bindTerminalLinks, type TerminalLinkBounds } from './links.ts';
|
|
6
|
+
import { readTerminalFont, readTerminalTheme } from './theme.ts';
|
|
7
7
|
import { webglBudget } from './webgl-budget.ts';
|
|
8
8
|
import { fitToHost, followAncestorScale } from './xterm-internals.ts';
|
|
9
9
|
|
package/src/terminal.css
CHANGED
|
@@ -59,3 +59,65 @@
|
|
|
59
59
|
.terminal-view-host .xterm { height: 100%; top: var(--term-offset, 6px); }
|
|
60
60
|
.terminal-view-host .xterm .xterm-viewport { background-color: transparent !important; }
|
|
61
61
|
}
|
|
62
|
+
|
|
63
|
+
/* xterm draws its own scrollbar in the DOM; these rules give it the look of the overlay bars of @adecore/ui
|
|
64
|
+
(`--scrollbar-*`). Unlayered and one class stronger than `xterm.css` and the colors xterm injects, which are
|
|
65
|
+
unlayered too; `!important` only where xterm writes a size inline. Its own timer hides the bar after the
|
|
66
|
+
last scroll, so the fade waits a little longer to land where the other bars fade. */
|
|
67
|
+
.terminal-view-host .xterm .xterm-scrollable-element > .scrollbar.vertical {
|
|
68
|
+
--scrollbar-size: 12px;
|
|
69
|
+
width: var(--scrollbar-size) !important;
|
|
70
|
+
background: transparent;
|
|
71
|
+
}
|
|
72
|
+
.terminal-view-host .xterm .xterm-scrollable-element > .scrollbar.vertical::before {
|
|
73
|
+
content: "";
|
|
74
|
+
position: absolute;
|
|
75
|
+
inset: 2px 2px;
|
|
76
|
+
border-radius: 999px;
|
|
77
|
+
background: var(--scrollbar-track);
|
|
78
|
+
opacity: 0;
|
|
79
|
+
transition: opacity 120ms ease;
|
|
80
|
+
}
|
|
81
|
+
.terminal-view-host .xterm .xterm-scrollable-element > .visible { transition: opacity 120ms ease; }
|
|
82
|
+
.terminal-view-host .xterm .xterm-scrollable-element > .invisible.fade { transition: opacity 240ms ease 100ms; }
|
|
83
|
+
.terminal-view-host .xterm .xterm-scrollable-element > .scrollbar.vertical > .slider {
|
|
84
|
+
left: 0 !important;
|
|
85
|
+
width: 100% !important;
|
|
86
|
+
background: transparent;
|
|
87
|
+
touch-action: none;
|
|
88
|
+
}
|
|
89
|
+
.terminal-view-host .xterm .xterm-scrollable-element > .scrollbar.vertical > .slider::before {
|
|
90
|
+
content: "";
|
|
91
|
+
position: absolute;
|
|
92
|
+
top: 2px;
|
|
93
|
+
bottom: 2px;
|
|
94
|
+
right: 3px;
|
|
95
|
+
width: 6px;
|
|
96
|
+
border-radius: 999px;
|
|
97
|
+
background: var(--scrollbar-thumb);
|
|
98
|
+
transition: background-color 120ms ease, width 120ms ease, right 120ms ease;
|
|
99
|
+
}
|
|
100
|
+
.terminal-view-host .xterm .xterm-scrollable-element > .scrollbar.vertical > .slider.active::before {
|
|
101
|
+
right: 2px;
|
|
102
|
+
width: 8px;
|
|
103
|
+
background: var(--scrollbar-thumb-active);
|
|
104
|
+
}
|
|
105
|
+
.terminal-view-host .xterm .xterm-scrollable-element > .scrollbar.vertical:has(> .slider.active)::before { opacity: 1; }
|
|
106
|
+
@media (hover: hover) {
|
|
107
|
+
.terminal-view-host .xterm .xterm-scrollable-element > .scrollbar.vertical:hover::before { opacity: 1; }
|
|
108
|
+
.terminal-view-host .xterm .xterm-scrollable-element > .scrollbar.vertical:hover > .slider:not(.active)::before {
|
|
109
|
+
right: 2px;
|
|
110
|
+
width: 8px;
|
|
111
|
+
background: var(--scrollbar-thumb-hover);
|
|
112
|
+
}
|
|
113
|
+
}
|
|
114
|
+
@media (pointer: coarse) {
|
|
115
|
+
.terminal-view-host .xterm .xterm-scrollable-element > .scrollbar.vertical { --scrollbar-size: 20px; }
|
|
116
|
+
.terminal-view-host .xterm .xterm-scrollable-element > .scrollbar.vertical > .slider::before { right: 2px; width: 8px; }
|
|
117
|
+
}
|
|
118
|
+
@media (prefers-reduced-motion: reduce) {
|
|
119
|
+
.terminal-view-host .xterm .xterm-scrollable-element > .visible,
|
|
120
|
+
.terminal-view-host .xterm .xterm-scrollable-element > .invisible.fade,
|
|
121
|
+
.terminal-view-host .xterm .xterm-scrollable-element > .scrollbar.vertical::before,
|
|
122
|
+
.terminal-view-host .xterm .xterm-scrollable-element > .scrollbar.vertical > .slider::before { transition: none; }
|
|
123
|
+
}
|