[Upload] fix upload put into form width when theme=single-input (#1999)

* fix(upload): theme=single-input width * feat: update common
Tencent · Jan 3, 2023 · 4179b63 · 4179b63
1 parent d609227
commit 4179b63
Show file tree

Hide file tree

Showing 3 changed files with 16 additions and 6 deletions.
diff --git a/src/_common b/src/_common
diff --git a/src/upload/themes/normal-file.tsx b/src/upload/themes/normal-file.tsx
@@ -1,4 +1,4 @@
-import { defineComponent } from '@vue/composition-api';
+import { defineComponent, computed } from '@vue/composition-api';
 import {
   CloseIcon as TdCloseIcon,
   TimeFilledIcon as TdTimeFilledIcon,
@@ -36,9 +36,12 @@ const NormalFile = defineComponent({
       CloseCircleFilledIcon: TdCloseCircleFilledIcon,
     });
 
-    const uploadPrefix = `${props.classPrefix}-upload`;
+    const uploadPrefix = computed(() => `${props.classPrefix}-upload`);
+
+    const classes = computed(() => [`${uploadPrefix.value}__single`, `${uploadPrefix.value}__single-${props.theme}`]);
 
     return {
+      classes,
       uploadPrefix,
       icons,
     };
@@ -138,10 +141,9 @@ const NormalFile = defineComponent({
   },
 
   render() {
-    const classes = [`${this.uploadPrefix}__single`, `${this.uploadPrefix}__single-${this.theme}`];
     const fileListDisplay = renderTNodeJSX(this, 'fileListDisplay', { params: { files: this.displayFiles } });
     return (
-      <div class={classes}>
+      <div class={this.classes}>
         {this.theme === 'file-input' && this.renderFilePreviewAsInput()}
 
         {this.$scopedSlots.default?.(null)}

diff --git a/src/upload/upload.tsx b/src/upload/upload.tsx
@@ -72,10 +72,18 @@ export default defineComponent({
       },
     }));
 
+    const uploadClasses = computed(() => [
+      `${classPrefix.value}-upload`,
+      {
+        [`${classPrefix.value}-upload--theme-${props.theme}`]: props.theme === 'file-input',
+      },
+    ]);
+
     return {
       ...uploadData,
       commonDisplayFileProps,
       dragProps,
+      uploadClasses,
     };
   },
 
@@ -190,7 +198,7 @@ export default defineComponent({
 
   render() {
     return (
-      <div class={`${this.classPrefix}-upload`}>
+      <div class={this.uploadClasses}>
         <input
           ref="inputRef"
           type="file"
+187 −0		js/global-config/locale/ar-KW.js
+1 −0		style/web/_variables.less
+12 −0		style/web/components/auto-complete/_index.less
+14 −1		style/web/components/image-viewer/_index.less
+4 −0		style/web/components/upload/_index.less