2sys/phonograph
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

implement copy-to-clipboard button component

Browse source
This commit is contained in:
Brent Schroeter 2025-11-13 05:17:35 +00:00
parent ab5f778cc4
commit 7f63cbb521
2 changed files with 42 additions and 4 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

13
interim-server/templates/workspaces_single/service_credentials.html
View file

@ -1,5 +1,9 @@
{% extends "base.html" %} {% extends "base.html" %}
{% block head_extras %}
<script type="module" src="{{ settings.root_path }}/js_dist/copy-source.webc.mjs"></script>
{% endblock %}
{% block main %} {% block main %}
<div class="page-grid"> <div class="page-grid">
<div class="page-grid__toolbar"> <div class="page-grid__toolbar">
@ -39,10 +43,11 @@
<tr> <tr>
<td> <td>
<copy-source copy-data="{{ cred.conn_string.expose_secret() }}"> <copy-source copy-data="{{ cred.conn_string.expose_secret() }}">
<slot><code class="code">{{ cred.conn_string_redacted }}</code></slot> <span aria-label="Copy postgresql URL" title="Copy URL">
<slot name="fallback"> <code class="phono-code">{{ cred.conn_string_redacted }}</code>
<code class="code">{{ cred.conn_string.expose_secret() }}</code> <i class="ti ti-clipboard"></i>
</slot> </span>
<code class="phono-code" slot="fallback">{{ cred.conn_string.expose_secret() }}</code>
</copy-source> </copy-source>
</td> </td>
<td> <td>

33
svelte/src/copy-source.webc.svelte Normal file
View file

@ -0,0 +1,33 @@
<svelte:options
customElement={{
props: { copy_data: { attribute: "copy-data" } },
tag: "copy-source",
}}
/>
<script lang="ts">
type Props = {
copy_data?: string;
};
let { copy_data }: Props = $props();
</script>
<button
class="click-target"
onclick={() => {
navigator.clipboard.writeText(copy_data);
}}
type="button"
>
<slot></slot>
</button>
<style>
.click-target {
appearance: none;
background: none;
border: none;
cursor: pointer;
}
</style>