feat(ui/uploader): add a hide-list props for uploader components (#335)

varletjs · Mar 13, 2022 · 70bf77a · 70bf77a
1 parent 324e080
commit 70bf77a
Show file tree

Hide file tree

Showing 15 changed files with 177 additions and 17 deletions.
diff --git a/.gitignore b/.gitignore
@@ -3,6 +3,7 @@ node_modules
 .varlet
 .idea
 .vscode
+.history
 *.log
 .DS_Store
 *.vsix

diff --git a/packages/varlet-ui/src/image-preview/docs/en-US.md b/packages/varlet-ui/src/image-preview/docs/en-US.md
@@ -116,7 +116,6 @@ ImagePreview({
       color="#fff"
       @click="menuShow = true"
     />
-
     <var-action-sheet :actions="actions" v-model:show="menuShow" />
   </template>
 </var-image-preview>

diff --git a/packages/varlet-ui/src/image-preview/docs/zh-CN.md b/packages/varlet-ui/src/image-preview/docs/zh-CN.md
@@ -117,7 +117,6 @@ ImagePreview({
       color="#fff"
       @click="menuShow = true"
     />
-
     <var-action-sheet :actions="actions" v-model:show="menuShow" />
   </template>
 </var-image-preview>

diff --git a/packages/varlet-ui/src/image-preview/example/index.vue b/packages/varlet-ui/src/image-preview/example/index.vue
@@ -27,7 +27,6 @@
     <var-image-preview :images="images" v-model:show="extraSlotsShow">
       <template #extra>
         <var-icon name="menu" :size="22" color="#fff" @click="menuShow = true" />
-
         <var-action-sheet :actions="actions" v-model:show="menuShow" />
       </template>
     </var-image-preview>

diff --git a/packages/varlet-ui/src/image-preview/imagePreview.less b/packages/varlet-ui/src/image-preview/imagePreview.less
@@ -3,6 +3,7 @@
 @image-preview-zoom-container-background: #000;
 @image-preview-close-icon-top: 14px;
 @image-preview-close-icon-right: 14px;
+@image-preview-close-icon-left: 14px;
 @image-preview-extra-top: 14px;
 @image-preview-extra-left: 14px;
 @image-preview-close-icon-size: 22px;
@@ -14,8 +15,7 @@
   --image-preview-zoom-container-background: @image-preview-zoom-container-background;
   --image-preview-close-icon-top: @image-preview-close-icon-top;
   --image-preview-close-icon-right: @image-preview-close-icon-right;
-  --image-preview-extra-top: @image-preview-extra-top;
-  --image-preview-extra-left: @image-preview-extra-left;
+  --image-preview-close-icon-left: @image-preview-close-icon-left;
   --image-preview-close-icon-size: @image-preview-close-icon-size;
   --image-preview-close-icon-color: @image-preview-close-icon-color;
 }
@@ -44,8 +44,8 @@
 
   &__extra {
     position: absolute;
-    top: var(--image-preview-extra-top);
-    left: var(--image-preview-extra-left);
+    top: var(--image-preview-close-icon-top);
+    left: var(--image-preview-close-icon-left);
   }
 
   &__indicators {

diff --git a/packages/varlet-ui/src/uploader/Uploader.vue b/packages/varlet-ui/src/uploader/Uploader.vue
@@ -5,7 +5,7 @@
         class="var-uploader__file var-elevation--2"
         :class="[f.state === 'loading' ? 'var-uploader--loading' : null]"
         :key="f.id"
-        v-for="f in modelValue"
+        v-for="f in renderFileList"
         v-ripple="{ disabled: disabled || formDisabled || readonly || formReadonly || !ripple }"
         @click="preview(f)"
       >
@@ -136,6 +136,12 @@ export default defineComponent({
       resetValidation,
     } = useValidation()
 
+    const renderFileList = computed(() => {
+      const { modelValue, hideList } = props
+      if (hideList) return []
+      return modelValue
+    })
+
     const preview = (varFile: VarFile) => {
       const { disabled, readonly, previewed } = props
 
@@ -315,6 +321,7 @@ export default defineComponent({
     )
 
     return {
+      renderFileList,
       showPreview,
       currentPreview,
       errorMessage,

diff --git a/packages/varlet-ui/src/uploader/__tests__/__snapshots__/index.spec.js.snap b/packages/varlet-ui/src/uploader/__tests__/__snapshots__/index.spec.js.snap
@@ -273,9 +273,53 @@ exports[`test uploader example 1`] = `
     </div>
   </transition-stub>
 </div>
+<div class=\\"app-type\\">自定义渲染文件列表</div>
+<div class=\\"custom-uploader__file-list\\">
+  <div><img class=\\"custom-uploader__file-item\\" src=\\"https://varlet.gitee.io/varlet-ui/cat.jpg\\"></div>
+  <div><img class=\\"custom-uploader__file-item\\" src=\\"https://varlet.gitee.io/varlet-ui/cat.jpg\\"></div>
+  <div><img class=\\"custom-uploader__file-item\\" src=\\"https://varlet.gitee.io/varlet-ui/cat.jpg\\"></div>
+  <div class=\\"var-uploader var--box\\">
+    <div class=\\"var-uploader__file-list\\">
+      <div class=\\"var--relative\\"><input class=\\"var-uploader__action-input\\" type=\\"file\\" accept=\\"image/*\\"><button class=\\"var-button var--box var-button--normal var--inline-flex var-button--primary var-elevation--2 custom-uploader__file-item\\">
+          <!--v-if-->
+          <div class=\\"var-button__content\\">上传</div>
+        </button></div>
+    </div>
+    <transition-stub>
+      <!--v-if-->
+    </transition-stub>
+    <transition-stub>
+      <div class=\\"var--box var-popup\\" style=\\"z-index: 1998; display: none;\\">
+        <div class=\\"var-popup__overlay\\" style=\\"z-index: 1999;\\"></div>
+        <transition-stub>
+          <!---->
+        </transition-stub>
+      </div>
+    </transition-stub>
+  </div>
+</div>
 <div class=\\"space\\"></div>"
 `;
 
+exports[`test uploader hide file list 1`] = `
+"<div class=\\"var-uploader var--box\\">
+  <div class=\\"var-uploader__file-list\\">
+    <div class=\\"var--relative var-uploader__action var-elevation--2\\"><input class=\\"var-uploader__action-input\\" type=\\"file\\" accept=\\"image/*\\"><i class=\\"var-icon var-icon--set var-icon-plus var-uploader__action-icon\\" style=\\"transition: transform 0ms;\\" var-uploader-cover=\\"\\"></i></div>
+  </div>
+  <transition-stub>
+    <!--v-if-->
+  </transition-stub>
+  <transition-stub>
+    <div class=\\"var--box var-popup\\" style=\\"z-index: 2001; display: none;\\">
+      <div class=\\"var-popup__overlay\\" style=\\"z-index: 2002;\\"></div>
+      <transition-stub>
+        <!---->
+      </transition-stub>
+    </div>
+  </transition-stub>
+</div>"
+`;
+
 exports[`test uploader length over maxlength in multiple mode 1`] = `
 "<div class=\\"var-uploader var--box\\">
   <div class=\\"var-uploader__file-list\\">

diff --git a/packages/varlet-ui/src/uploader/__tests__/index.spec.js b/packages/varlet-ui/src/uploader/__tests__/index.spec.js
@@ -242,3 +242,30 @@ test('test uploader length over maxlength in multiple mode', async () => {
   wrapper.unmount()
   mockRestore()
 })
+
+test('test uploader hide file list', async () => {
+  const { mockRestore } = mockFileReader('data:image/png;base64,')
+  const onUpdateModelValue = jest.fn((value) => wrapper.setProps({ modelValue: value }))
+
+  const wrapper = mount(VarUploader, {
+    props: {
+      hideList: true,
+      modelValue: [],
+      'onUpdate:modelValue': onUpdateModelValue,
+    },
+  })
+
+  expect(wrapper.html()).toMatchSnapshot()
+
+  const event = {
+    target: {
+      files: [new File([], 'cat.png'), new File([], 'dog.png')],
+    },
+  }
+
+  await wrapper.vm.handleChange(event)
+  expect(wrapper.vm.renderFileList.length).toBe(0)
+
+  wrapper.unmount()
+  mockRestore()
+})
diff --git a/packages/varlet-ui/src/uploader/docs/en-US.md b/packages/varlet-ui/src/uploader/docs/en-US.md
@@ -253,6 +253,26 @@ The second argument is a collection of utility functions that can quickly get a
 />
 ```
 
+### Custom render file list
+
+You can use the `hide-list` to hiddeing component files list, then you can render this list by custom.
+This invalidates the `preview`,and you can use `ImagePreview` to achieve the same function
+
+```html
+<div class="custom-uploader__file-list">
+  <div :key="f.id" v-for="f in files">
+    <img
+      class="custom-uploader__file-item"
+      :src="f.src"
+      v-if="f.src"
+    />
+  </div>
+  <var-uploader hide-list v-model="files">
+    <var-button type="primary">上传</var-button>
+  </var-uploader>
+</div>
+```
+
 ## API
 
 ### Props
@@ -270,6 +290,7 @@ The second argument is a collection of utility functions that can quickly get a
 | `maxsize` | Maximum file size | _string \| number_ | `-` |
 | `previewed` | Whether to allow preview | _boolean_ | `true` |
 | `ripple` | Whether to open ripple | _boolean_ | `true` |
+| `hide-list` | Whether to hide the file list | _boolean_ | `false` |
 | `validate-trigger` | Timing to trigger validation， The optional value is `onChange` `onRemove` | _ValidateTriggers[]_ | `['onChange', 'onRemove']` |
 | `rules` | The validation rules，Returns `true` to indicate that the validation passed，The remaining values are converted to text as user prompts | _Array<(v: VarFile, u: VarFileUtils) => any>_ | `-` |
 

diff --git a/packages/varlet-ui/src/uploader/docs/zh-CN.md b/packages/varlet-ui/src/uploader/docs/zh-CN.md
@@ -250,6 +250,25 @@ export default {
 />
 ```
 
+### 自定义渲染
+
+通过`hide-list`隐藏组件的文件列表，并且自己渲染，但这会失去preview，需要配合`ImagePreview`自己实现
+
+```html
+<div class="custom-uploader__file-list">
+  <div :key="f.id" v-for="f in files">
+    <img
+      class="custom-uploader__file-item"
+      :src="f.src"
+      v-if="f.src"
+    />
+  </div>
+  <var-uploader hide-list v-model="files">
+    <var-button type="primary">上传</var-button>
+  </var-uploader>
+</div>
+```
+
 ## API
 
 ### 属性
@@ -267,6 +286,7 @@ export default {
 | `maxsize` | 最大文件大小 | _string \| number_ | `-` |
 | `previewed` | 是否允许预览 | _boolean_ | `true` |
 | `ripple` | 是否开启水波纹 | _boolean_ | `true` |
+| `hide-list` | 是否隐藏文件列表 | _boolean_ | `false` |
 | `validate-trigger` | 触发验证的时机， 可选值为 `onChange` `onRemove` | _ValidateTriggers[]_ | `['onChange', 'onRemove']` |
 | `rules` | 验证规则，返回 `true` 表示验证通过，其余的值则转换为文本作为用户提示 | _Array<(v: VarFile, u: VarFileUtils) => any>_ | `-` |
 

diff --git a/packages/varlet-ui/src/uploader/example/index.vue b/packages/varlet-ui/src/uploader/example/index.vue
@@ -34,6 +34,21 @@
   <app-type>{{ pack.validate }}</app-type>
   <var-uploader :rules="[(v, u) => u.getError(v).length === 0 || pack.validateMessage]" v-model="files10" />
 
+  <app-type>{{ pack.customRender }}</app-type>
+  <div class="custom-uploader__file-list">
+    <div :key="f.id" v-for="f in files12">
+      <img
+        class="custom-uploader__file-item"
+        :style="{ objectFit: f.fit }"
+        :src="f.cover"
+        :alt="f.name"
+        v-if="f.cover"
+      />
+    </div>
+    <var-uploader hide-list v-model="files12">
+      <var-button class="custom-uploader__file-item" type="primary">{{ pack.upload }}</var-button>
+    </var-uploader>
+  </div>
   <div class="space"></div>
 </template>
 
@@ -104,6 +119,23 @@ export default {
           cover: 'https://varlet.gitee.io/varlet-ui/cat.jpg',
         },
       ],
+      files12: [
+        {
+          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 handleAfterRead = (file) => console.log(file)
@@ -124,10 +156,9 @@ export default {
       if (file.file.size <= 1 * 1024 * 1024) {
         Snackbar.success(pack.value.fileLessThen)
         return true
-      } 
-        Snackbar.warning(pack.value.fileLargeThen)
-        return false
-      
+      }
+      Snackbar.warning(pack.value.fileLargeThen)
+      return false
     }
 
     const handleBeforeRemove = async () => {
@@ -159,4 +190,14 @@ export default {
 .space {
   height: 40px;
 }
+
+.custom-uploader__file-list {
+  display: flex;
+  .custom-uploader__file-item {
+    width: 40px;
+    height: 40px;
+    border-radius: 50%;
+    font-size: 12px;
+  }
+}
 </style>
diff --git a/packages/varlet-ui/src/uploader/example/locale/en-US.ts b/packages/varlet-ui/src/uploader/example/locale/en-US.ts
@@ -17,4 +17,5 @@ export default {
   fileSizeExceedsLimit: 'file size exceeds limit',
   fileLessThen: 'the file is less than 1M, the upload is successful',
   fileLargeThen: 'the file is larger than 1M and cannot be uploaded',
+  customRender: 'Custom render file list',
 }
diff --git a/packages/varlet-ui/src/uploader/example/locale/zh-CN.ts b/packages/varlet-ui/src/uploader/example/locale/zh-CN.ts
@@ -17,4 +17,5 @@ export default {
   fileSizeExceedsLimit: '文件大小超出限制',
   fileLessThen: '文件小于1M，上传成功',
   fileLargeThen: '文件大于1M，不能上传',
+  customRender: '自定义渲染文件列表',
 }
diff --git a/packages/varlet-ui/src/uploader/props.ts b/packages/varlet-ui/src/uploader/props.ts
@@ -62,6 +62,10 @@ export const props = {
   rules: {
     type: Array as PropType<Array<(v: VarFile) => any>>,
   },
+  hideList: {
+    type: Boolean,
+    default: false,
+  },
   onBeforeRead: {
     type: Function as PropType<(file: VarFile) => Promise<boolean> | boolean>,
   },

diff --git a/scripts/bootstrap.mjs b/scripts/bootstrap.mjs
@@ -1,9 +1,5 @@
 import { buildCli, buildIcons, buildUI, runTask } from './build.mjs'
-
 ;(async () => {
-  await Promise.all([
-    runTask('cli', buildCli),
-    runTask('icons', buildIcons),
-  ])
+  await Promise.all([runTask('cli', buildCli), runTask('icons', buildIcons)])
   await runTask('ui', buildUI)
 })()