feat: clipboard component

batosai · Sep 11, 2024 · 71e0839 · 71e0839
1 parent 1fd0c42
commit 71e0839
Showing 1 changed file with 42 additions and 0 deletions.
diff --git a/views/components/clipboard.edge b/views/components/clipboard.edge
@@ -0,0 +1,42 @@
+<div x-data="{
+  clipboardText: '{{ value }}',
+  clipboardNotification: false,
+  copyToClipboard() {
+      navigator.clipboard.writeText(this.clipboardText);
+      this.clipboardNotification = true;
+      let that = this;
+      setTimeout(() => {
+          this.clipboardNotification = false;
+      }, 3000);
+  }
+}">
+
+  @jrmc.button({ ...$props, class: jrmc.getCssClass($props, 'gap-2'), type: 'button', '@click': 'copyToClipboard();' })
+    @if($slots.copy === undefined && $slots.copied === undefined)~
+      {{{ await $slots.main() || text || '' }}}
+    @end~
+    <template x-if="!clipboardNotification">
+      @if($slots.copy !== undefined)~
+        {{{ await $slots.copy() }}}
+      @else
+        {{{ await $slots.main() || text || '' }}}
+        <svg xmlns="http://www.w3.org/2000/svg" class="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+          <path d="M16 12.9V17.1C16 20.6 14.6 22 11.1 22H6.9C3.4 22 2 20.6 2 17.1V12.9C2 9.4 3.4 8 6.9 8H11.1C14.6 8 16 9.4 16 12.9Z" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+          <path d="M22 6.9V11.1C22 14.6 20.6 16 17.1 16H16V12.9C16 9.4 14.6 8 11.1 8H8V6.9C8 3.4 9.4 2 12.9 2H17.1C20.6 2 22 3.4 22 6.9Z" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+        </svg>
+      @end~
+    </template>
+    <template x-if="clipboardNotification">
+      @if($slots.copied !== undefined)~
+        {{{ await $slots.copied() }}}
+      @else
+        {{{ await $slots.main() || text || '' }}}
+        <svg xmlns="http://www.w3.org/2000/svg" class="w-4 h-4 text-success" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+          <path d="M22 11.1V6.9C22 3.4 20.6 2 17.1 2H12.9C9.4 2 8 3.4 8 6.9V8H11.1C14.6 8 16 9.4 16 12.9V16H17.1C20.6 16 22 14.6 22 11.1Z" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+          <path d="M16 17.1V12.9C16 9.4 14.6 8 11.1 8H6.9C3.4 8 2 9.4 2 12.9V17.1C2 20.6 3.4 22 6.9 22H11.1C14.6 22 16 20.6 16 17.1Z" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+          <path d="M6.08008 15L8.03008 16.95L11.9201 13.05" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+        </svg>
+      @end~ 
+    </template>
+  @end
+</div>