@abi-software/map-utilities 1.0.0 → 1.0.1-beta.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@abi-software/map-utilities",
-  "version": "1.0.0",
+  "version": "1.0.1-beta.0",
   "files": [
     "dist/*",
     "src/*",

package/src/components/CopyToClipboard/CopyToClipboard.vue

@@ -0,0 +1,146 @@
+<template>
+  <el-tooltip
+    :content="textLabel"
+    placement="bottom"
+    :hide-after="autoHideTimeout"
+    effect="clipboard-tooltip"
+    @hide="resetSettings"
+  >
+    <el-button
+      class="copy-clipboard-button"
+      :class="theme"
+      size="small"
+      @click="copyToClipboard"
+    >
+      <el-icon :color="iconColor">
+        <el-icon-copy-document />
+      </el-icon>
+      <span class="visually-hidden">{{ textLabel }}</span>
+    </el-button>
+  </el-tooltip>
+</template>
+
+<script>
+const labelBefore = 'Copy to clipboard';
+const labelAfter = 'Copied!';
+const appPrimaryColor = '#8300bf';
+
+export default {
+  name: 'CopyToClipboard',
+  props: {
+    content: {
+      type: String,
+      default: '',
+    },
+    /**
+     * Theme 'primary' or 'dark' or any name not 'light'
+     * will show primary button color.
+     */
+    theme: {
+      type: String,
+      default: 'light',
+    },
+  },
+  data: function () {
+    return {
+      textLabel: labelBefore,
+      autoHideTimeout: 0,
+      iconColor: appPrimaryColor,
+    };
+  },
+  mounted: function () {
+    if (this.theme !== 'light') {
+      this.iconColor = 'white';
+    }
+  },
+  methods: {
+    copyToClipboard: async function () {
+      let copiedSuccessfully = true;
+      this.autoHideTimeout = 600;
+
+      try {
+        await navigator.clipboard.writeText(this.content);
+      } catch (err) {
+        console.error(
+          "Error when trying to use navigator.clipboard.writeText()",
+          err
+        );
+        copiedSuccessfully = false;
+      }
+
+      if (copiedSuccessfully) {
+        this.textLabel = labelAfter;
+      } else {
+        this.textLabel = 'Error trying to copy to clipboard!';
+      }
+    },
+    resetSettings: function () {
+      this.autoHideTimeout = 0;
+      this.textLabel = labelBefore;
+    },
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+  .copy-clipboard-button {
+    margin-left: 0px !important;
+    margin-top: 0px !important;
+    padding: 0.25rem;
+    font-size: 14px !important;
+    transition: all 0.25s ease;
+
+    &,
+    &:focus,
+    &:active {
+      color: #fff !important;
+      background: $app-primary-color;
+      border-color: $app-primary-color !important;
+    }
+
+    &:hover {
+      background: #ac76c5 !important;
+      border-color: #ac76c5 !important;
+    }
+
+    &.light {
+      &,
+      &:focus,
+      &:active {
+        color: $app-primary-color !important;
+        background: transparent;
+        border-color: transparent !important;
+      }
+
+      &:hover {
+        background: #f3e6f9 !important;
+        border-color: #f3e6f9 !important;
+      }
+    }
+  }
+
+  .visually-hidden {
+    clip: rect(0 0 0 0);
+    clip-path: inset(50%);
+    height: 1px;
+    overflow: hidden;
+    position: absolute;
+    white-space: nowrap;
+    width: 1px;
+  }
+</style>
+
+<style lang="scss">
+  .el-popper.is-clipboard-tooltip {
+    padding: 4px 10px;
+    font-family: Asap;
+    background: #f3ecf6 !important;
+    border: 1px solid $app-primary-color;
+
+    & .el-popper__arrow::before {
+      border: 1px solid;
+      border-color: $app-primary-color;
+      background: #f3ecf6;
+    }
+  }
+</style>

package/src/components/index.js

@@ -2,5 +2,6 @@ import DrawToolbar from "./DrawToolbar/DrawToolbar.vue";
 import HelpModeDialog from "./HelpModeDialog/HelpModeDialog.vue";
 import Tooltip from "./Tooltip/Tooltip.vue";
 import TreeControls from "./TreeControls/TreeControls.vue";
+import CopyToClipboard from "./CopyToClipboard/CopyToClipboard.vue";
 
-export { DrawToolbar, HelpModeDialog, Tooltip, TreeControls };
+export { DrawToolbar, HelpModeDialog, Tooltip, TreeControls, CopyToClipboard };

package/src/components.d.ts

@@ -9,6 +9,7 @@ declare module 'vue' {
   export interface GlobalComponents {
     AnnotationPopup: typeof import('./components/Tooltip/AnnotationPopup.vue')['default']
     ConnectionDialog: typeof import('./components/DrawToolbar/ConnectionDialog.vue')['default']
+    CopyToClipboard: typeof import('./components/CopyToClipboard/CopyToClipboard.vue')['default']
     DrawToolbar: typeof import('./components/DrawToolbar/DrawToolbar.vue')['default']
     ElButton: typeof import('element-plus/es')['ElButton']
     ElButtonGroup: typeof import('element-plus/es')['ElButtonGroup']
@@ -19,6 +20,7 @@ declare module 'vue' {
     ElIconArrowDown: typeof import('@element-plus/icons-vue')['ArrowDown']
     ElIconArrowUp: typeof import('@element-plus/icons-vue')['ArrowUp']
     ElIconClose: typeof import('@element-plus/icons-vue')['Close']
+    ElIconCopyDocument: typeof import('@element-plus/icons-vue')['CopyDocument']
     ElIconDelete: typeof import('@element-plus/icons-vue')['Delete']
     ElIconEdit: typeof import('@element-plus/icons-vue')['Edit']
     ElIconFinished: typeof import('@element-plus/icons-vue')['Finished']
@@ -29,6 +31,7 @@ declare module 'vue' {
     ElPopover: typeof import('element-plus/es')['ElPopover']
     ElRow: typeof import('element-plus/es')['ElRow']
     ElSelect: typeof import('element-plus/es')['ElSelect']
+    ElTooltip: typeof import('element-plus/es')['ElTooltip']
     ElTree: typeof import('element-plus/es')['ElTree']
     ExternalResourceCard: typeof import('./components/Tooltip/ExternalResourceCard.vue')['default']
     HelpModeDialog: typeof import('./components/HelpModeDialog/HelpModeDialog.vue')['default']