feat(uploader): 添加onRemove条件删除

lerna.json

@@ -18,8 +18,6 @@
   "publishConfig": {
     "access": "public"
   },
-  "ignoreChanges": [
-    "**/*.md"
-  ],
+  "ignoreChanges": ["**/*.md"],
   "version": "1.22.10"
 }

packages/varlet-ui/src/uploader/Uploader.vue

@@ -87,7 +87,7 @@ import ImagePreview from '../image-preview'
 import Ripple from '../ripple'
 import { defineComponent, nextTick, reactive, computed, watch, ref } from 'vue'
 import { props } from './props'
-import { isNumber, isHTMLSupportImage, isHTMLSupportVideo, toNumber, isString } from '../utils/shared'
+import { isNumber, isHTMLSupportImage, isHTMLSupportVideo, toNumber, isString, isPromise } from '../utils/shared'
 import { useValidation } from '../utils/components'
 import { useForm } from '../form/provide'
 import type { ComputedRef, Ref } from 'vue'
@@ -252,10 +252,27 @@ export default defineComponent({
       if (form?.disabled.value || form?.readonly.value || disabled || readonly) {
         return
       }
+      const validFiles: VarFile[] = modelValue.filter((varFile) => varFile !== removedVarFile)
 
-      props['onUpdate:modelValue']?.(modelValue.filter((varFile) => varFile !== removedVarFile))
-      onRemove?.(removedVarFile)
-      validateWithTrigger('onRemove')
+      const notifyRemoveFile = () => {
+        props['onUpdate:modelValue']?.(validFiles)
+        validateWithTrigger('onRemove')
+      }
+      if (onRemove) {
+        // 有返回值就不删除了
+        const isRmove = onRemove(removedVarFile)
+        if (isPromise(isRmove)) {
+          isRmove.then((v) => {
+            if (!v) {
+              notifyRemoveFile()
+            }
+          })
+          return
+        }
+        if (isRmove) return
+      }
+
+      notifyRemoveFile()
     }
 
     // expose

packages/varlet-ui/src/uploader/__tests__/index.spec.js

@@ -126,6 +126,32 @@ test('test uploader onRemove', async () => {
   mockRestore()
 })
 
+test('test uploader onRemove result not empty not deleted', async () => {
+    const { mockRestore } = mockFileReader('data:image/png;base64,')
+    const onUpdateModelValue = jest.fn((value) => wrapper.setProps({ modelValue: value }))
+    const onRemove = jest.fn(()=>Promise.resolve(1));
+
+    const wrapper = mount(VarUploader, {
+      props: {
+        modelValue: [],
+        onRemove,
+        'onUpdate:modelValue': onUpdateModelValue,
+      },
+    })
+
+    await wrapper.vm.handleChange(createEvent('cat.png'))
+    expect(onUpdateModelValue).toHaveBeenCalledTimes(1)
+
+    await wrapper.find('.var-uploader__file-close').trigger('click')
+    //因为有返回值,所以没有删除
+    expect(onUpdateModelValue).toHaveBeenCalledTimes(1)
+    expect(onRemove).toHaveBeenCalledTimes(1)
+    expect(wrapper.vm.modelValue).toHaveLength(1);
+
+    wrapper.unmount()
+    mockRestore()
+})
+
 test('test uploader validation', async () => {
   const { mockRestore } = mockFileReader('data:image/png;base64,')
   const onUpdateModelValue = jest.fn((value) => wrapper.setProps({ modelValue: value }))

packages/varlet-ui/src/uploader/docs/en-US.md

@@ -104,7 +104,7 @@ export default {
       }, 1000)
     }
 
-    return { 
+    return {
       files,
       handleAfterRead
     }
@@ -135,7 +135,7 @@ export default {
 
     const handleOversize = file => console.log(file)
 
-    return { 
+    return {
       files,
       handleAfterRead
     }
@@ -160,7 +160,7 @@ export default {
 
     const handleBeforeRead = file => file.file.size <= 1024 * 10
 
-    return { 
+    return {
       files,
       handleAfterRead
     }
@@ -195,6 +195,52 @@ The second argument is a collection of utility functions that can quickly get a
 />
 ```
 
+### onRemove
+
+Trigger the remove event and obtain the return value to determine whether to delete. If there is a true return value, the delete update action will not be executed
+
+```html
+ <var-uploader v-model="files11" @remove="handleRemoveFile" />
+```
+
+```js
+import { ref } from 'vue'
+
+export default {
+  setup() {
+    const files = ref([
+      {
+        url: 'https://varlet.gitee.io/varlet-ui/cat.jpg',
+        cover: 'https://varlet.gitee.io/varlet-ui/cat.jpg',
+        state: 'loading'
+      },
+      {
+        url: 'https://varlet.gitee.io/varlet-ui/cat.jpg',
+        cover: 'https://varlet.gitee.io/varlet-ui/cat.jpg',
+        state: 'success'
+      },
+      {
+        url: 'https://varlet.gitee.io/varlet-ui/cat.jpg',
+        cover: 'https://varlet.gitee.io/varlet-ui/cat.jpg',
+        state: 'error'
+      }
+    ])
+
+    const handleRemoveFile = (file) => {
+        //都将执行删除动作,无返回或者假值执行删除
+        //return new Promise.resole(true);
+        return true;
+    }
+
+    return {
+      files,
+      handleRemoveFile
+    }
+  }
+}
+```
+
+
 ### Customize upload styles
 
 ```html
@@ -207,8 +253,8 @@ The second argument is a collection of utility functions that can quickly get a
 
 ### Props
 
-| Prop | Description | Type | Default | 
-| --- | --- | --- | --- | 
+| Prop | Description | Type | Default |
+| --- | --- | --- | --- |
 | `v-model` | File list | _VarFile[]_ | `[]` |
 | `accept` | Accepted file type, consistent with the native attribute | _string_ | `image/*` |
 | `capture` | Get the file, the same as the native property | _string_ | `-` |
@@ -225,7 +271,7 @@ The second argument is a collection of utility functions that can quickly get a
 
 ### VarFile
 
-| Prop | Description | Type | Default | 
+| Prop | Description | Type | Default |
 | --- | --- | --- | --- |
 | `file` | Native file | _File_ | `-` |
 | `name` | File name | _string_ | `-` |
@@ -260,7 +306,7 @@ The second argument is a collection of utility functions that can quickly get a
 | `before-read` | Trigger returns a false value before a file is read to prevent the file from being read(support promise) | `file: VarFile` |
 | `after-read` | Triggered after the file is read | `file: VarFile` |
 | `oversize` | Triggered when the file size limit is exceeded | `file: VarFile` |
-| `remove` | Triggered when a file is deleted | `file: VarFile` |
+| `remove` | Triggered when deleting a file. There is a true value to prevent deleting a file (support promise) | `file: VarFile` |
 
 ### Slots
 

packages/varlet-ui/src/uploader/docs/zh-CN.md

@@ -104,7 +104,7 @@ export default {
       }, 1000)
     }
 
-    return { 
+    return {
       files,
       handleAfterRead
     }
@@ -135,7 +135,7 @@ export default {
 
     const handleOversize = file => console.log(file)
 
-    return { 
+    return {
       files,
       handleAfterRead
     }
@@ -160,7 +160,7 @@ export default {
 
     const handleBeforeRead = file => file.file.size <= 1024 * 10
 
-    return { 
+    return {
       files,
       handleAfterRead
     }
@@ -193,6 +193,50 @@ export default {
 />
 ```
 
+### onRemove
+触发remove事件，获取返回值来决定是否删除，有存在为真的返回值将会不执行删除更新动作
+
+```html
+ <var-uploader v-model="files11" @remove="handleRemoveFile" />
+```
+
+```js
+import { ref } from 'vue'
+
+export default {
+  setup() {
+    const files = ref([
+      {
+        url: 'https://varlet.gitee.io/varlet-ui/cat.jpg',
+        cover: 'https://varlet.gitee.io/varlet-ui/cat.jpg',
+        state: 'loading'
+      },
+      {
+        url: 'https://varlet.gitee.io/varlet-ui/cat.jpg',
+        cover: 'https://varlet.gitee.io/varlet-ui/cat.jpg',
+        state: 'success'
+      },
+      {
+        url: 'https://varlet.gitee.io/varlet-ui/cat.jpg',
+        cover: 'https://varlet.gitee.io/varlet-ui/cat.jpg',
+        state: 'error'
+      }
+    ])
+
+    const handleRemoveFile = (file) => {
+        //都将执行删除动作,无返回或者假值执行删除
+        //return new Promise.resole(true);
+        return true;
+    }
+
+    return {
+      files,
+      handleRemoveFile
+    }
+  }
+}
+```
+
 ### 自定义上传样式
 
 ```html
@@ -205,8 +249,8 @@ export default {
 
 ### 属性
 
-| 参数 | 说明 | 类型 | 默认值 | 
-| --- | --- | --- | --- | 
+| 参数 | 说明 | 类型 | 默认值 |
+| --- | --- | --- | --- |
 | `v-model` | 文件列表 | _VarFile[]_ | `[]` |
 | `accept` | 接受的文件类型，与原生属性一致 | _string_ | `image/*` |
 | `capture` | 获取文件方式，与原生属性一致 | _string_ | `-` |
@@ -223,7 +267,7 @@ export default {
 
 ### VarFile
 
-| 参数 | 说明 | 类型 | 默认值 | 
+| 参数 | 说明 | 类型 | 默认值 |
 | --- | --- | --- | --- |
 | `file` | 原生文件 | _File_ | `-` |
 | `name` | 文件名 | _string_ | `-` |
@@ -258,7 +302,7 @@ export default {
 | `before-read` | 文件读取前触发，返回假值阻止文件读取(支持promise) | `file: VarFile` |
 | `after-read` | 文件读取后触发 | `file: VarFile` |
 | `oversize` | 文件超过限制大小时触发 | `file: VarFile` |
-| `remove` | 文件删除时触发 | `file: VarFile` |
+| `remove` | 文件删除时触发,存在真值阻止删除文件(支持promise) | `file: VarFile` |
 
 ### 插槽
 

packages/varlet-ui/src/uploader/example/index.vue

@@ -3,7 +3,7 @@
   <var-uploader v-model="files" @after-read="handleAfterRead" />
 
   <app-type>{{ pack.preview }}</app-type>
-  <var-uploader v-model="files2" />
+  <var-uploader v-model="files2" @remove="handleRemoveFile" />
 
   <app-type>{{ pack.state }}</app-type>
   <var-uploader v-model="files3" @after-read="handleAfterRead2" />
@@ -26,6 +26,9 @@
   <app-type>{{ pack.validate }}</app-type>
   <var-uploader :rules="[(v, u) => u.getError(v).length === 0 || pack.validateMessage]" v-model="files10" />
 
+  <app-type>{{ pack.onRemove }}</app-type>
+  <var-uploader v-model="files11" @remove="handleRemoveFile" />
+
   <app-type>{{ pack.style }}</app-type>
   <var-uploader v-model="files6">
     <var-button type="primary">{{ pack.upload }}</var-button>
@@ -37,6 +40,8 @@
 <script>
 import VarUploader from '..'
 import VarButton from '../../button'
+import Snackbar from '../../snackbar'
+import Dialog from '../../dialog'
 import AppType from '@varlet/cli/site/mobile/components/AppType'
 import { reactive, toRefs } from 'vue'
 import { watchLang } from '@varlet/cli/site/utils'
@@ -92,6 +97,16 @@ export default {
           state: 'error',
         },
       ],
+      files11: [
+        {
+          url: 'https://varlet.gitee.io/varlet-ui/cat.jpg',
+          cover: 'https://varlet.gitee.io/varlet-ui/cat.jpg',
+        },
+        {
+          url: 'https://www.runoob.com/try/demo_source/mov_bbb.mp4',
+          cover: 'https://varlet.gitee.io/varlet-ui/cover.jpg',
+        },
+      ],
     })
 
     const handleAfterRead = (file) => console.log(file)
@@ -108,6 +123,28 @@ export default {
 
     const handleBeforeRead = (file) => file.file.size <= 1024 * 10
 
+    const handleRemoveFile = () => {
+      return new Promise((r) => {
+        Dialog({
+          title: '是否删除',
+          message: '确定删除？不能反悔滴阿。',
+          onBeforeClose(action, done) {
+            if (action === 'confirm') {
+              Snackbar.loading('正在执行删除')
+              setTimeout(() => {
+                Snackbar.success('删除完毕')
+                r()
+                done()
+              }, 1000)
+            } else {
+              r(true)
+              done()
+            }
+          },
+        })
+      })
+    }
+
     watchLang(use)
 
     return {
@@ -117,6 +154,7 @@ export default {
       handleAfterRead2,
       handleOversize,
       handleBeforeRead,
+      handleRemoveFile,
     }
   },
 }

packages/varlet-ui/src/uploader/example/locale/en-US.ts

@@ -11,4 +11,5 @@ export default {
   validateMessage: 'There is a file that failed to upload',
   style: 'Customize upload styles',
   upload: 'Upload',
+  onRemove: 'remove action',
 }

packages/varlet-ui/src/uploader/example/locale/zh-CN.ts

@@ -11,4 +11,5 @@ export default {
   validateMessage: '存在上传失败的文件',
   style: '自定义上传样式',
   upload: '上传',
+  onRemove: '删除事件',
 }