New Copy to clipboard custom service

1 files changed, 85 insertions, 0 deletions

diff --git a/src/components/services/CopyToClipboard.vue b/src/components/services/CopyToClipboard.vue
new file mode 100644
index 0000000..18c4dc3
--- /dev/null
+++ b/src/components/services/CopyToClipboard.vue
@@ -0,0 +1,85 @@
+<template>
+  <Generic :item="item">
+    <template #indicator>
+      <div class="status">
+        <i
+          class="fa-regular fa-copy fa-xl"
+          :class="{ scale: animate }"
+          @click="copy()"
+          @animationend="animate = false"
+        ></i>
+      </div>
+    </template>
+  </Generic>
+</template>
+
+<script>
+import service from "@/mixins/service.js";
+import Generic from "./Generic.vue";
+
+export default {
+  name: "CopyToClipboard",
+  mixins: [service],
+  props: {
+    item: Object,
+  },
+  components: {
+    Generic,
+  },
+  data: () => ({
+    animate: false,
+  }),
+  methods: {
+    copy() {
+      navigator.clipboard.writeText(this.item.clipboard);
+      this.animate = true;
+    },
+  },
+};
+</script>
+
+<style scoped lang="scss">
+.scale {
+  -webkit-animation: scale-up 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94) both;
+  animation: scale-up 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94) both;
+}
+.is-light i {
+  color: black;
+}
+.is-dark i {
+  color: white;
+}
+/**
+ * ----------------------------------------
+ * animation scale-down-center
+ * ----------------------------------------
+ */
+@-webkit-keyframes scale-up {
+  0% {
+    -webkit-transform: scale(1);
+    transform: scale(1);
+  }
+  50% {
+    -webkit-transform: scale(1.25);
+    transform: scale(1.25);
+  }
+  100% {
+    -webkit-transform: scale(1);
+    transform: scale(1);
+  }
+}
+@keyframes scale-up {
+  0% {
+    -webkit-transform: scale(1);
+    transform: scale(1);
+  }
+  50% {
+    -webkit-transform: scale(1.25);
+    transform: scale(1.25);
+  }
+  100% {
+    -webkit-transform: scale(1);
+    transform: scale(1);
+  }
+}
+</style>