@mathiscode/pucc 1.0.2 → 1.0.3
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/README.md +49 -0
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -199,10 +199,25 @@ The `<pucc-terminal>` custom element can use either:
|
|
|
199
199
|
```html
|
|
200
200
|
<pucc-terminal
|
|
201
201
|
embedded="true"
|
|
202
|
+
height="300px"
|
|
203
|
+
theme="dark"
|
|
204
|
+
prompt="# "
|
|
205
|
+
hotkey="alt+s"
|
|
206
|
+
initial-content="Welcome to my terminal!"
|
|
202
207
|
pucc-options='{"enableGlobalRegistrations": false, "commandPrefix": "_"}'>
|
|
203
208
|
</pucc-terminal>
|
|
204
209
|
```
|
|
205
210
|
|
|
211
|
+
**Terminal Attributes:**
|
|
212
|
+
|
|
213
|
+
- `embedded` - Set to `"true"` for embedded mode (always visible)
|
|
214
|
+
- `height` - Terminal height (e.g., `"300px"`, `"50vh"`)
|
|
215
|
+
- `theme` - Color theme (`"dark"` or `"light"`)
|
|
216
|
+
- `prompt` - Custom prompt text (default: `"$ "`)
|
|
217
|
+
- `hotkey` - Keyboard shortcut for dropdown terminals (e.g., `"alt+s"`, `"ctrl+shift+t"`)
|
|
218
|
+
- `initial-content` - Custom initial content to display instead of the default welcome message (supports newlines with `\n`)
|
|
219
|
+
- `pucc-options` - JSON string with Pucc constructor options (see below)
|
|
220
|
+
|
|
206
221
|
**Via property (for full functionality, including functions):**
|
|
207
222
|
|
|
208
223
|
```javascript
|
|
@@ -261,6 +276,40 @@ shell.addCommand('shared', () => console.log('Shared command'), 'Shared command'
|
|
|
261
276
|
|
|
262
277
|
**Note:** The `pucc-options` attribute only supports JSON-serializable options (`enableGlobalRegistrations`, `commandPrefix`). For options that include functions (`customHelpHandler`, `initialCommands`), use the `puccOptions` property instead.
|
|
263
278
|
|
|
279
|
+
### Customizing Terminal Appearance with CSS
|
|
280
|
+
|
|
281
|
+
The terminal component supports CSS custom properties for advanced styling:
|
|
282
|
+
|
|
283
|
+
```css
|
|
284
|
+
pucc-terminal {
|
|
285
|
+
--shell-bg: #1a1a1a;
|
|
286
|
+
--shell-fg: #e0e0e0;
|
|
287
|
+
--shell-accent: #00aaff;
|
|
288
|
+
--shell-border: rgba(255, 255, 255, 0.1);
|
|
289
|
+
--shell-font-family: 'Courier New', monospace;
|
|
290
|
+
--shell-font-size: 16px;
|
|
291
|
+
--shell-padding: 20px;
|
|
292
|
+
--shell-animation-duration: 0.3s;
|
|
293
|
+
--shell-border-radius: 12px;
|
|
294
|
+
--shell-shadow: 0 12px 48px rgba(0, 0, 0, 0.5);
|
|
295
|
+
--shell-backdrop-blur: 15px;
|
|
296
|
+
}
|
|
297
|
+
```
|
|
298
|
+
|
|
299
|
+
**Available CSS Variables:**
|
|
300
|
+
|
|
301
|
+
- `--shell-bg` - Background color
|
|
302
|
+
- `--shell-fg` - Foreground/text color
|
|
303
|
+
- `--shell-accent` - Accent color (cursor, selection)
|
|
304
|
+
- `--shell-border` - Border color
|
|
305
|
+
- `--shell-font-family` - Font family
|
|
306
|
+
- `--shell-font-size` - Font size
|
|
307
|
+
- `--shell-padding` - Padding
|
|
308
|
+
- `--shell-animation-duration` - Animation duration
|
|
309
|
+
- `--shell-border-radius` - Border radius
|
|
310
|
+
- `--shell-shadow` - Box shadow
|
|
311
|
+
- `--shell-backdrop-blur` - Backdrop blur amount (dropdown terminals only)
|
|
312
|
+
|
|
264
313
|
## API Reference
|
|
265
314
|
|
|
266
315
|
### `new Pucc(options?)`
|