@webitel/ui-sdk 3.1.4 → 3.1.5

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@webitel/ui-sdk",
-  "version": "3.1.4",
+  "version": "3.1.5",
   "private": false,
   "scripts": {
     "serve-lib": "vue-cli-service serve",

package/src/locale/en/en.js

@@ -293,5 +293,11 @@ export default {
         score: 'Score',
       },
     },
+    deleteConfirmationPopup: {
+      title: 'Confirm deletion',
+      askingAlert: 'Are you sure you want to delete {count} item? | Are you sure you want to delete {count} items?',
+      undoneActionAlert: 'This action cannot be undone.',
+      deleteAll: 'ALL',
+    },
   },
 };

package/src/locale/ru/ru.js

@@ -290,5 +290,11 @@ export default {
         score: 'Бал',
       },
     },
+    deleteConfirmationPopup: {
+      title: 'Подтвердите удаление',
+      askingAlert: 'Вы уверенны, что хотите удалить {count} запись? | Вы уверенны, что хотите удалить {count} записей?',
+      undoneActionAlert: 'Это действие не может быть отменено.',
+      deleteAll: 'ВСЕ',
+    },
   },
 };

package/src/locale/ua/ua.js

@@ -290,5 +290,11 @@ export default {
         score: 'Бал',
       },
     },
+    deleteConfirmationPopup: {
+      title: 'Підтвердіть видалення',
+      askingAlert: 'Ви впевнені, що хочете видалити {count} запис? | Ви впевнені, що хочете видалити {count} записів?',
+      undoneActionAlert: 'Дана дія не може бути скасована.',
+      deleteAll: 'ВСІ',
+    },
   },
 };

package/src/modules/DeleteConfirmationPopup/delete-confirmation-popup.vue

@@ -0,0 +1,96 @@
+<template>
+  <wt-popup
+    class="delete-confirmation-popup"
+    min-width="480"
+    @close="close"
+  >
+    <template v-slot:title>{{ $t('webitelUI.deleteConfirmationPopup.title') }}</template>
+    <template v-slot:main>
+      <p>
+        {{ deleteMessage }}
+        {{ $t('webitelUI.deleteConfirmationPopup.undoneActionAlert') }}
+      </p>
+    </template>
+    <template v-slot:actions>
+      <wt-button
+        color="secondary"
+        :disabled="isDeleting"
+        @click="cancel"
+      >{{ $t('reusable.cancel') }}
+      </wt-button>
+      <wt-button
+        color="danger"
+        :loading="isDeleting"
+        @click="confirm"
+      >{{ $t('reusable.delete') }}
+      </wt-button>
+    </template>
+  </wt-popup>
+</template>
+
+<script setup>
+import { computed, ref } from 'vue';
+import { useI18n } from 'vue-i18n';
+
+const props = defineProps({
+  deleteCount: {
+    type: Number,
+    required: true,
+  },
+  callback: {
+    type: Function,
+    required: true,
+  },
+});
+
+const emit = defineEmits([
+  'confirm',
+  'cancel',
+  'close',
+]);
+
+const { t } = useI18n();
+
+const isDeleting = ref(false);
+
+const deleteMessage = computed(() => {
+  if (props.deleteCount === 0) {
+    return t(
+      'webitelUI.deleteConfirmationPopup.askingAlert',
+      2,
+      null,
+      { count: t('webitelUI.deleteConfirmationPopup.deleteAll') },
+    );
+  }
+  return t(
+    'webitelUI.deleteConfirmationPopup.askingAlert',
+    props.deleteCount === 1 ? 1 : 2,
+    null,
+    { count: props.deleteCount },
+  );
+});
+
+function close() {
+  emit('close');
+}
+
+async function confirm() {
+  try {
+    isDeleting.value = true;
+    emit('confirm');
+    await props.callback();
+  } finally {
+    isDeleting.value = false;
+    close();
+  }
+}
+
+function cancel() {
+  emit('cancel');
+  close();
+}
+</script>
+
+<style scoped>
+
+</style>

package/src/modules/DeleteConfirmationPopup/useDeleteConfirmationPopup.js

@@ -0,0 +1,33 @@
+import { ref } from 'vue';
+
+// eslint-disable-next-line import/prefer-default-export
+export const useDeleteConfirmationPopup = () => {
+  const isVisible = ref(false);
+  const deleteCount = ref(null);
+  const deleteCallback = ref(null);
+
+  function askDeleteConfirmation({ deleted, callback }) {
+    if (Array.isArray(deleted)) deleteCount.value = deleted.length;
+    else deleteCount.value = 1;
+    isVisible.value = true;
+    deleteCallback.value = callback;
+  }
+
+  function confirmDelete() {
+    return deleteCallback.value();
+  }
+
+  function closeDelete() {
+    isVisible.value = false;
+  }
+
+  return {
+    isVisible,
+    deleteCount,
+    deleteCallback,
+
+    askDeleteConfirmation,
+    confirmDelete,
+    closeDelete,
+  };
+};