-
-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
1 parent
f886199
commit 41f8b64
Showing
6 changed files
with
205 additions
and
121 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,101 @@ | ||
| <script lang="ts"> | ||
| import { onMount } from 'svelte'; | ||
| onMount(() => { | ||
| const clipboard = FlowbiteInstances.getInstance('CopyClipboard', 'npm-install-copy-button'); | ||
| const tooltip = FlowbiteInstances.getInstance( | ||
| 'Tooltip', | ||
| 'tooltip-copy-npm-install-copy-button' | ||
| ); | ||
| const $defaultIcon = document.getElementById('default-icon'); | ||
| const $successIcon = document.getElementById('success-icon'); | ||
| const $defaultTooltipMessage = document.getElementById('default-tooltip-message'); | ||
| const $successTooltipMessage = document.getElementById('success-tooltip-message'); | ||
| clipboard.updateOnCopyCallback(() => { | ||
| showSuccess(); | ||
| // reset to default state | ||
| setTimeout(() => { | ||
| resetToDefault(); | ||
| }, 2000); | ||
| }); | ||
| const showSuccess = () => { | ||
| $defaultIcon?.classList.add('hidden'); | ||
| $successIcon?.classList.remove('hidden'); | ||
| $defaultTooltipMessage?.classList.add('hidden'); | ||
| $successTooltipMessage?.classList.remove('hidden'); | ||
| tooltip.show(); | ||
| }; | ||
| const resetToDefault = () => { | ||
| $defaultIcon?.classList.remove('hidden'); | ||
| $successIcon?.classList.add('hidden'); | ||
| $defaultTooltipMessage?.classList.remove('hidden'); | ||
| $successTooltipMessage?.classList.add('hidden'); | ||
| tooltip.hide(); | ||
| }; | ||
| }); | ||
| </script> | ||
|
|
||
| <div class="mb-10 w-full max-w-[24rem] dark"> | ||
| <div class="relative"> | ||
| <label for="npm-install-copy-button" class="sr-only">Label</label> | ||
| <input | ||
| id="npm-install-copy-button" | ||
| type="text" | ||
| class="col-span-6 bg-gray-50 border border-gray-300 text-gray-500 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 dark:bg-gray-900 dark:border-gray-600 dark:placeholder-gray-400 dark:text-gray-100 dark:focus:ring-blue-500 dark:focus:border-blue-500" | ||
| value="npm install @battlefieldduck/xterm-svelte" | ||
| disabled | ||
| readonly | ||
| /> | ||
| <button | ||
| data-copy-to-clipboard-target="npm-install-copy-button" | ||
| data-tooltip-target="tooltip-copy-npm-install-copy-button" | ||
| class="absolute end-2 top-1/2 -translate-y-1/2 text-gray-500 dark:text-gray-100 hover:bg-gray-100 dark:hover:bg-gray-800 rounded-lg p-2 inline-flex items-center justify-center" | ||
| > | ||
| <span id="default-icon"> | ||
| <svg | ||
| class="w-3.5 h-3.5" | ||
| aria-hidden="true" | ||
| xmlns="http://www.w3.org/2000/svg" | ||
| fill="currentColor" | ||
| viewBox="0 0 18 20" | ||
| > | ||
| <path | ||
| d="M16 1h-3.278A1.992 1.992 0 0 0 11 0H7a1.993 1.993 0 0 0-1.722 1H2a2 2 0 0 0-2 2v15a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2V3a2 2 0 0 0-2-2Zm-3 14H5a1 1 0 0 1 0-2h8a1 1 0 0 1 0 2Zm0-4H5a1 1 0 0 1 0-2h8a1 1 0 1 1 0 2Zm0-5H5a1 1 0 0 1 0-2h2V2h4v2h2a1 1 0 1 1 0 2Z" | ||
| /> | ||
| </svg> | ||
| </span> | ||
| <span id="success-icon" class="hidden inline-flex items-center"> | ||
| <svg | ||
| class="w-3.5 h-3.5 text-blue-700 dark:text-blue-500" | ||
| aria-hidden="true" | ||
| xmlns="http://www.w3.org/2000/svg" | ||
| fill="none" | ||
| viewBox="0 0 16 12" | ||
| > | ||
| <path | ||
| stroke="currentColor" | ||
| stroke-linecap="round" | ||
| stroke-linejoin="round" | ||
| stroke-width="2" | ||
| d="M1 5.917 5.724 10.5 15 1.5" | ||
| /> | ||
| </svg> | ||
| </span> | ||
| </button> | ||
| <div | ||
| id="tooltip-copy-npm-install-copy-button" | ||
| role="tooltip" | ||
| class="absolute z-10 invisible inline-block px-3 py-2 text-sm font-medium text-white transition-opacity duration-300 bg-gray-900 rounded-lg shadow-sm opacity-0 tooltip dark:bg-gray-700" | ||
| > | ||
| <span id="default-tooltip-message">Copy to clipboard</span> | ||
| <span id="success-tooltip-message" class="hidden">Copied!</span> | ||
| <div class="tooltip-arrow" data-popper-arrow></div> | ||
| </div> | ||
| </div> | ||
| </div> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,36 @@ | ||
| <script lang="ts"> | ||
| import { Xterm, XtermAddon } from '@battlefieldduck/xterm-svelte'; | ||
| import type { | ||
| ITerminalOptions, | ||
| ITerminalInitOnlyOptions, | ||
| Terminal | ||
| } from '@battlefieldduck/xterm-svelte'; | ||
| let options: ITerminalOptions & ITerminalInitOnlyOptions = { | ||
| fontFamily: 'Consolas' | ||
| }; | ||
| async function onLoad(event: CustomEvent<{ terminal: Terminal }>) { | ||
| console.log('Child component has loaded'); | ||
| const terminal = event.detail.terminal; | ||
| // FitAddon Usage | ||
| const fitAddon = new (await XtermAddon.FitAddon()).FitAddon(); | ||
| terminal.loadAddon(fitAddon); | ||
| fitAddon.fit(); | ||
| terminal.write('Hello World'); | ||
| } | ||
| function onData(event: CustomEvent<string>) { | ||
| const data = event.detail; | ||
| console.log('onData()', data); | ||
| } | ||
| function onKey(event: CustomEvent<{ key: string; domEvent: KeyboardEvent }>) { | ||
| const data = event.detail; | ||
| console.log('onKey()', data); | ||
| } | ||
| </script> | ||
|
|
||
| <Xterm {options} on:load={onLoad} on:data={onData} on:key={onKey} /> |