@webitel/ui-sdk 2.1.14 → 2.1.16

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@webitel/ui-sdk",
-  "version": "2.1.14",
+  "version": "2.1.16",
   "private": false,
   "scripts": {
     "serve-lib": "vue-cli-service serve",
@@ -26,6 +26,7 @@
     "CHANGELOG.md"
   ],
   "dependencies": {
+    "clipboard-copy": "^4.0.1",
     "core-js": "^3.6.5",
     "csv-stringify": "^5.5.3",
     "deep-copy": "^1.4.2",

package/src/components/index.js

@@ -33,6 +33,7 @@ import WtTimepicker from './molecules/wt-timepicker/wt-timepicker.vue';
 import WtLabel from './molecules/wt-label/wt-label.vue';
 import WtButtonSelect from './molecules/wt-button-select/wt-button-select.vue';
 import WtHint from './molecules/wt-hint/wt-hint.vue';
+import WtCopyAction from './molecules/wt-copy-action/wt-copy-action.vue';
 
 import WtAppHeader from './organisms/wt-app-header/wt-app-header.vue';
 import WtAppNavigator from './organisms/wt-app-header/wt-app-navigator.vue';
@@ -101,6 +102,7 @@ const Components = {
   WtTableColumnSelect,
   WtButtonSelect,
   WtContextMenu,
+  WtCopyAction,
 };
 
 Object.keys(Components).forEach((name) => {

package/src/components/molecules/wt-copy-action/__tests__/WtCopyAction.spec.js

@@ -0,0 +1,14 @@
+import { shallowMount } from '@vue/test-utils';
+import WtIconBtn from '../../wt-icon-btn/wt-icon-btn.vue';
+import WtCopyAction from '../wt-copy-action.vue';
+
+describe('WtCopyAction', () => {
+  it('renders a component', () => {
+    const wrapper = shallowMount(WtCopyAction, {
+      stubs: {
+        WtIconBtn,
+      },
+    });
+    expect(wrapper.classes('wt-copy-action')).toBe(true);
+  });
+});

package/src/components/molecules/wt-copy-action/wt-copy-action.vue

@@ -0,0 +1,63 @@
+<template>
+  <wt-tooltip class="wt-copy-action">
+    <template v-slot:activator>
+      <wt-icon-btn
+        v-bind="$attrs"
+        :icon="copied ? 'done' : 'copy'"
+        class="copy-action"
+        @click="copy"
+      ></wt-icon-btn>
+    </template>
+    {{ copied ? copiedTooltip : copyTooltip }}
+  </wt-tooltip>
+</template>
+
+<script>
+import copy from 'clipboard-copy';
+
+let copiedIdTimeout = null;
+
+export default {
+  name: 'wt-copy-action',
+  data: () => ({
+    copied: false,
+  }),
+  props: {
+    value: {
+      type: String,
+    },
+    tooltips: {
+      type: Object,
+      default: () => ({
+        copy: '',
+        copied: '',
+      }),
+    },
+  },
+  computed: {
+    copyTooltip() {
+      return this.tooltips.copy || this.$t('webitelUI.copyAction.copy');
+    },
+    copiedTooltip() {
+      return this.tooltips.copied || this.$t('webitelUI.copyAction.copied');
+    },
+  },
+  methods: {
+    async copy() {
+      try {
+        await copy(this.value);
+        this.copied = this.value;
+        if (copiedIdTimeout) window.clearTimeout(copiedIdTimeout);
+        copiedIdTimeout = setTimeout(() => {
+          this.copied = null;
+        }, 1500);
+      } catch (err) {
+        throw err;
+      }
+    },
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+</style>

package/src/components/molecules/wt-tags-input/wt-tags-input.vue

@@ -23,7 +23,7 @@
       :close-on-select="false"
       :disabled="disabled"
       :internal-search="!searchMethod"
-      :label="trackBy ? optionLabel : null"
+      :label="trackBy ? (optionLabel || trackBy) : null"
       :loading="false"
       :options="selectOptions"
       :placeholder="placeholder || label"

package/src/locale/en/en.js

@@ -264,5 +264,9 @@ export default {
         text: 'Sorry, we can\'t find the page you want.',
       },
     },
+    copyAction: {
+      copy: 'Copy',
+      copied: 'Copied to clipboard!',
+    },
   },
 };

package/src/locale/ru/ru.js

@@ -260,5 +260,9 @@ export default {
         text: 'Извините, мы не можем найти то, что вы ищете',
       },
     },
+    copyAction: {
+      copy: 'Копировать',
+      copied: 'Скопировано!',
+    },
   },
 };

package/src/locale/ua/ua.js

@@ -260,5 +260,9 @@ export default {
         text: 'Вибачте, ми не можемо знайти те, що Ви шукаєте',
       },
     },
+    copyAction: {
+      copy: 'Копіювати',
+      copied: 'Скопійовано!',
+    },
   },
 };