File upload undo examples

packages/docs/src/locales/en/en.json

@@ -398,7 +398,9 @@
         "hideFileList": "Hide file list if you want to show files somewhere else.",
         "value": "The array with uploaded files",
         "dropZoneText": "Custom drop zone label text",
-        "uploadButtonText": "Custom upload button text"
+        "uploadButtonText": "Custom upload button text",
+        "undo": "Enables the canceling of the removing action for the added files",
+        "undoDuration": "Undoing action duration"
       },
       "events": {
         "fileRemoved": "Emits after file is removed",
@@ -2050,6 +2052,12 @@
       "gallery": {
         "title": "As gallery",
         "text": "With `type === gallery` prop you can show user picture preview of uploaded files"
+      },
+      "undo": {
+        "title": "Canceling the removing action",
+        "description": "Add the `undo` property to cancel the removing action, and with a `undo-duration` property set the time to cancel removing",
+        "galleryViewLabel": "Enable gallery view",
+        "inputLabel": "Undo duration"
       }
     },
     "variables": "[GitHub Variables Page](https://github.com/epicmaxco/vuestic-ui/blob/develop/packages/ui/src/components/va-file-upload/_variables.scss)[[target=_blank]]"

packages/docs/src/locales/ru/ru.json

@@ -397,7 +397,9 @@
         "dropzone": "Включает Drag&Drop",
         "value": "Массив с загруженными файлами",
         "dropZoneText": "Текст, заменяющий стандартную надпись на drop zone",
-        "uploadButtonText": "Текст, заменяющий стандартную надпись кнопки загрузки"
+        "uploadButtonText": "Текст, заменяющий стандартную надпись кнопки загрузки",
+        "undo": "Отмена действия удаления прикрепленных файлов",
+        "undoDuration": "Длительность отображения отмены действия удаления"
       }
     },
     "VaHover": {
@@ -1947,6 +1949,12 @@
       "gallery": {
         "title": "Превью",
         "text": "Свойство `type` со значением `gallery` включит отображение превью загружаемого файла."
+      },
+      "undo": {
+        "title": "Отмена действия удаления прикрепленных файлов",
+        "description": "Добавьте свойство `undo` для отмены удаления загруженных файлов, а с помощью свойства `undo-duration` задайте время для отмены действия",
+        "galleryViewLabel": "Включить режим Галереи",
+        "inputLabel": "Длительность отмены"
       }
     },
     "variables": "[Страница с переменными на GitHub](https://github.com/epicmaxco/vuestic-ui/blob/develop/packages/ui/src/components/va-file-upload/_variables.scss)[[target=_blank]]"

packages/docs/src/page-configs/ui-elements/file-upload/examples/Undo.vue

@@ -0,0 +1,38 @@
+<template>
+  <div style="width: 300px;">
+    <va-switch
+      v-model="isGalleryViewEnabled"
+      :label="$t('fileUpload.examples.undo.galleryViewLabel')"
+      class="mb-4"
+    />
+    <va-input
+      v-model="undoDuration"
+      :label="$t('fileUpload.examples.undo.inputLabel')"
+      class="mb-4"
+    />
+  </div>
+  <va-file-upload
+    v-model="basic"
+    undo
+    :type="galleryType"
+    :undo-duration="undoDuration"
+  />
+</template>
+
+<script>
+import { VaFileUpload, VaInput, VaSwitch } from 'vuestic-ui/src/components'
+
+export default {
+  components: { VaFileUpload, VaInput, VaSwitch },
+
+  data: () => ({
+    isGalleryViewEnabled: false,
+    undoDuration: 1000,
+    basic: [{ name: 'example 1.png', url: 'https://picsum.photos/100' }],
+  }),
+
+  computed: {
+    galleryType () { return this.isGalleryViewEnabled ? 'gallery' : 'list' },
+  },
+}
+</script>

packages/docs/src/page-configs/ui-elements/file-upload/page-config.ts

@@ -40,6 +40,11 @@ const config: ApiDocsBlock[] = [
     'fileUpload.examples.slots.text',
     'Slots',
   ),
+  ...block.exampleBlock(
+    'fileUpload.examples.undo.title',
+    'fileUpload.examples.undo.description',
+    'Undo',
+  ),
 
   block.subtitle('all.api'),
   block.api(VaFileUpload, apiOptions),