@king-design/vue 3.8.0-beta.1 → 3.8.0-beta.2

package/components/sender/index.spec.js

@@ -1340,11 +1340,10 @@ describe('Sender', function () {
       }
     }, _callee27);
   })));
-  it('should pass uploadButton slot params and render it in toolbar', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee28() {
-    var _context61;
-    var Demo, _mount28, element, button;
-    return _regeneratorRuntime.wrap(function _callee28$(_context62) {
-      while (1) switch (_context62.prev = _context62.next) {
+  it('should shrink textarea min height only when uploadButton is list', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee28() {
+    var Demo, _mount28, element, toolbarTextarea, listTextarea;
+    return _regeneratorRuntime.wrap(function _callee28$(_context61) {
+      while (1) switch (_context61.prev = _context61.next) {
         case 0:
           Demo = /*#__PURE__*/function (_Component28) {
             _inheritsLoose(Demo, _Component28);
@@ -1360,114 +1359,105 @@ describe('Sender', function () {
             }
             return Demo;
           }(Component);
-          Demo.template = "\n                const { Sender } = this;\n                <div>\n                    <Sender uploadProps={{limit: 1}} attachments={[\n                        {key: 'a', uid: 'a', name: 'note.txt'},\n                    ]}>\n                        <b:uploadButton args=\"scope\">\n                            <button\n                                class=\"custom-upload\"\n                                disabled={scope.disabled || scope.reachLimit}\n                                ev-click={scope.pickFiles}\n                            >{scope.position}</button>\n                        </b:uploadButton>\n                    </Sender>\n                </div>\n            ";
+          Demo.template = "\n                const { Sender } = this;\n                <div>\n                    <Sender className=\"sender-toolbar-media\" fileView=\"media\" />\n                    <Sender className=\"sender-list-card\" uploadButton=\"list\" />\n                </div>\n            ";
           _mount28 = mount(Demo), element = _mount28[1];
-          button = element.querySelector('.custom-upload');
-          expect(button).not.to.eql(null);
-          expect(_trimInstanceProperty(_context61 = button.textContent).call(_context61)).to.eql('toolbar');
-          expect(button.disabled).to.eql(true);
-          expect(element.querySelector('.k-sender-attach-btn')).to.eql(null);
-        case 8:
+          _context61.next = 5;
+          return wait();
+        case 5:
+          toolbarTextarea = element.querySelector('.sender-toolbar-media .k-sender-input');
+          listTextarea = element.querySelector('.sender-list-card .k-sender-input');
+          expect(toolbarTextarea.style.height).to.eql('64px');
+          expect(listTextarea.style.height).to.eql('20px');
+        case 9:
         case "end":
-          return _context62.stop();
+          return _context61.stop();
       }
     }, _callee28);
   })));
-  it('should add local files through uploadButton slot params', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee29() {
-    var lastAttachments, Demo, _mount29, element, button;
-    return _regeneratorRuntime.wrap(function _callee29$(_context64) {
-      while (1) switch (_context64.prev = _context64.next) {
+  it('should use 300px as the default shell maxHeight', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee29() {
+    var Demo, _mount29, element, shell;
+    return _regeneratorRuntime.wrap(function _callee29$(_context63) {
+      while (1) switch (_context63.prev = _context63.next) {
         case 0:
-          lastAttachments = [];
           Demo = /*#__PURE__*/function (_Component29) {
             _inheritsLoose(Demo, _Component29);
             function Demo() {
-              var _context63;
+              var _context62;
               var _this29;
               for (var _len29 = arguments.length, args = new Array(_len29), _key29 = 0; _key29 < _len29; _key29++) {
                 args[_key29] = arguments[_key29];
               }
-              _this29 = _Component29.call.apply(_Component29, _concatInstanceProperty(_context63 = [this]).call(_context63, args)) || this;
+              _this29 = _Component29.call.apply(_Component29, _concatInstanceProperty(_context62 = [this]).call(_context62, args)) || this;
               _this29.Sender = Sender;
-              _this29.file = new File(['hello'], 'hello.txt', {
-                type: 'text/plain'
-              });
-              _this29.onChange = function (items) {
-                lastAttachments = items;
-              };
               return _this29;
             }
-            Demo.defaults = function defaults() {
-              return {
-                attachments: []
-              };
-            };
             return Demo;
           }(Component);
-          Demo.template = "\n                const { Sender } = this;\n                <Sender\n                    attachments={this.get('attachments')}\n                    uploadProps={{accept: '.txt', autoUpload: false}}\n                    ev-$change:attachments={this.onChange}\n                >\n                    <b:uploadButton args=\"scope\">\n                        <button\n                            class=\"custom-add-files\"\n                            ev-click={() => scope.addFiles([this.file])}\n                        >add</button>\n                    </b:uploadButton>\n                </Sender>\n            ";
+          Demo.template = "const { Sender } = this; <div><Sender /></div>";
           _mount29 = mount(Demo), element = _mount29[1];
-          button = element.querySelector('.custom-add-files');
-          button.click();
-          _context64.next = 8;
+          _context63.next = 5;
           return wait();
-        case 8:
-          expect(lastAttachments.length).to.eql(1);
-          expect(lastAttachments[0].name).to.eql('hello.txt');
-          expect(lastAttachments[0].status).to.eql('default');
-        case 11:
+        case 5:
+          shell = element.querySelector('.k-sender-shell');
+          expect(shell.style.maxHeight).to.eql('300px');
+        case 7:
         case "end":
-          return _context64.stop();
+          return _context63.stop();
       }
     }, _callee29);
   })));
-  it('should render uploadButton slot in attachment list when uploadButton is list', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee30() {
-    var _context66;
-    var Demo, _mount30, element;
-    return _regeneratorRuntime.wrap(function _callee30$(_context67) {
-      while (1) switch (_context67.prev = _context67.next) {
+  it('should pass uploadButton slot params and render it in toolbar', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee30() {
+    var _context65;
+    var Demo, _mount30, element, button;
+    return _regeneratorRuntime.wrap(function _callee30$(_context66) {
+      while (1) switch (_context66.prev = _context66.next) {
         case 0:
           Demo = /*#__PURE__*/function (_Component30) {
             _inheritsLoose(Demo, _Component30);
             function Demo() {
-              var _context65;
+              var _context64;
               var _this30;
               for (var _len30 = arguments.length, args = new Array(_len30), _key30 = 0; _key30 < _len30; _key30++) {
                 args[_key30] = arguments[_key30];
               }
-              _this30 = _Component30.call.apply(_Component30, _concatInstanceProperty(_context65 = [this]).call(_context65, args)) || this;
+              _this30 = _Component30.call.apply(_Component30, _concatInstanceProperty(_context64 = [this]).call(_context64, args)) || this;
               _this30.Sender = Sender;
               return _this30;
             }
             return Demo;
           }(Component);
-          Demo.template = "\n                const { Sender } = this;\n                <div>\n                    <Sender uploadButton=\"list\">\n                        <b:uploadButton args=\"scope\">\n                            <button class=\"custom-list-upload\" ev-click={scope.pickFiles}>{scope.position}</button>\n                        </b:uploadButton>\n                    </Sender>\n                </div>\n            ";
+          Demo.template = "\n                const { Sender } = this;\n                <div>\n                    <Sender uploadProps={{limit: 1}} attachments={[\n                        {key: 'a', uid: 'a', name: 'note.txt'},\n                    ]}>\n                        <b:uploadButton args=\"scope\">\n                            <button\n                                class=\"custom-upload\"\n                                disabled={scope.disabled || scope.reachLimit}\n                                ev-click={scope.pickFiles}\n                            >{scope.position}</button>\n                        </b:uploadButton>\n                    </Sender>\n                </div>\n            ";
           _mount30 = mount(Demo), element = _mount30[1];
-          expect(element.querySelector('.k-sender-toolbar-left')).to.eql(null);
-          expect(element.querySelector('.k-sender-list-upload')).to.eql(null);
-          expect(_trimInstanceProperty(_context66 = element.querySelector('.k-file-card-list-prefix .custom-list-upload').textContent).call(_context66)).to.eql('list');
-        case 6:
+          button = element.querySelector('.custom-upload');
+          expect(button).not.to.eql(null);
+          expect(_trimInstanceProperty(_context65 = button.textContent).call(_context65)).to.eql('toolbar');
+          expect(button.disabled).to.eql(true);
+          expect(element.querySelector('.k-sender-attach-btn')).to.eql(null);
+        case 8:
         case "end":
-          return _context67.stop();
+          return _context66.stop();
       }
     }, _callee30);
   })));
-  it('should expose addFiles method', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee31() {
-    var lastAttachments, Demo, _mount31, instance, file;
-    return _regeneratorRuntime.wrap(function _callee31$(_context69) {
-      while (1) switch (_context69.prev = _context69.next) {
+  it('should add local files through uploadButton slot params', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee31() {
+    var lastAttachments, Demo, _mount31, element, button;
+    return _regeneratorRuntime.wrap(function _callee31$(_context68) {
+      while (1) switch (_context68.prev = _context68.next) {
         case 0:
           lastAttachments = [];
           Demo = /*#__PURE__*/function (_Component31) {
             _inheritsLoose(Demo, _Component31);
             function Demo() {
-              var _context68;
+              var _context67;
               var _this31;
               for (var _len31 = arguments.length, args = new Array(_len31), _key31 = 0; _key31 < _len31; _key31++) {
                 args[_key31] = arguments[_key31];
               }
-              _this31 = _Component31.call.apply(_Component31, _concatInstanceProperty(_context68 = [this]).call(_context68, args)) || this;
+              _this31 = _Component31.call.apply(_Component31, _concatInstanceProperty(_context67 = [this]).call(_context67, args)) || this;
               _this31.Sender = Sender;
-              _this31.senderRef = null;
+              _this31.file = new File(['hello'], 'hello.txt', {
+                type: 'text/plain'
+              });
               _this31.onChange = function (items) {
                 lastAttachments = items;
               };
@@ -1480,25 +1470,24 @@ describe('Sender', function () {
             };
             return Demo;
           }(Component);
-          Demo.template = "\n                const { Sender } = this;\n                <Sender\n                    ref={(i) => this.senderRef = i}\n                    attachments={this.get('attachments')}\n                    uploadProps={{autoUpload: false}}\n                    ev-$change:attachments={this.onChange}\n                />\n            ";
-          _mount31 = mount(Demo), instance = _mount31[0];
-          file = new File(['hello'], 'dialog.txt', {
-            type: 'text/plain'
-          });
-          instance.senderRef.addFiles([file]);
-          _context69.next = 8;
+          Demo.template = "\n                const { Sender } = this;\n                <Sender\n                    attachments={this.get('attachments')}\n                    uploadProps={{accept: '.txt', autoUpload: false}}\n                    ev-$change:attachments={this.onChange}\n                >\n                    <b:uploadButton args=\"scope\">\n                        <button\n                            class=\"custom-add-files\"\n                            ev-click={() => scope.addFiles([this.file])}\n                        >add</button>\n                    </b:uploadButton>\n                </Sender>\n            ";
+          _mount31 = mount(Demo), element = _mount31[1];
+          button = element.querySelector('.custom-add-files');
+          button.click();
+          _context68.next = 8;
           return wait();
         case 8:
           expect(lastAttachments.length).to.eql(1);
-          expect(lastAttachments[0].name).to.eql('dialog.txt');
+          expect(lastAttachments[0].name).to.eql('hello.txt');
           expect(lastAttachments[0].status).to.eql('default');
         case 11:
         case "end":
-          return _context69.stop();
+          return _context68.stop();
       }
     }, _callee31);
   })));
-  it('should render card-view attachments uniformly as file cards', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee32() {
+  it('should render uploadButton slot in attachment list when uploadButton is list', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee32() {
+    var _context70;
     var Demo, _mount32, element;
     return _regeneratorRuntime.wrap(function _callee32$(_context71) {
       while (1) switch (_context71.prev = _context71.next) {
@@ -1506,32 +1495,34 @@ describe('Sender', function () {
           Demo = /*#__PURE__*/function (_Component32) {
             _inheritsLoose(Demo, _Component32);
             function Demo() {
-              var _context70;
+              var _context69;
               var _this32;
               for (var _len32 = arguments.length, args = new Array(_len32), _key32 = 0; _key32 < _len32; _key32++) {
                 args[_key32] = arguments[_key32];
               }
-              _this32 = _Component32.call.apply(_Component32, _concatInstanceProperty(_context70 = [this]).call(_context70, args)) || this;
+              _this32 = _Component32.call.apply(_Component32, _concatInstanceProperty(_context69 = [this]).call(_context69, args)) || this;
               _this32.Sender = Sender;
               return _this32;
             }
             return Demo;
           }(Component);
-          Demo.template = "\n                const { Sender } = this;\n                <div>\n                    <Sender attachments={[\n                        {key: 'a', uid: 'a', name: 'pic.png', type: 'image/png', src: 'data:image/png;base64,AAAA'},\n                        {key: 'b', uid: 'b', name: 'note.txt', type: 'text/plain'},\n                    ]} />\n                </div>\n            ";
-          _mount32 = mount(Demo), element = _mount32[1]; // card 视图下，图片附件也应当以「文件卡」形式呈现，而不是图片缩略图
-          expect(element.querySelectorAll('.k-file-card-file').length).to.eql(2);
-          expect(element.querySelectorAll('.k-file-card-media').length).to.eql(0);
-        case 5:
+          Demo.template = "\n                const { Sender } = this;\n                <div>\n                    <Sender uploadButton=\"list\">\n                        <b:uploadButton args=\"scope\">\n                            <button class=\"custom-list-upload\" ev-click={scope.pickFiles}>{scope.position}</button>\n                        </b:uploadButton>\n                    </Sender>\n                </div>\n            ";
+          _mount32 = mount(Demo), element = _mount32[1];
+          expect(element.querySelector('.k-sender-toolbar-left')).to.eql(null);
+          expect(element.querySelector('.k-sender-list-upload')).to.eql(null);
+          expect(_trimInstanceProperty(_context70 = element.querySelector('.k-file-card-list-prefix .custom-list-upload').textContent).call(_context70)).to.eql('list');
+        case 6:
         case "end":
           return _context71.stop();
       }
     }, _callee32);
   })));
-  it('should keep image media cards (square) in media view', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee33() {
-    var Demo, _mount33, element;
+  it('should expose addFiles method', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee33() {
+    var lastAttachments, Demo, _mount33, instance, file;
     return _regeneratorRuntime.wrap(function _callee33$(_context73) {
       while (1) switch (_context73.prev = _context73.next) {
         case 0:
+          lastAttachments = [];
           Demo = /*#__PURE__*/function (_Component33) {
             _inheritsLoose(Demo, _Component33);
             function Demo() {
@@ -1542,21 +1533,39 @@ describe('Sender', function () {
               }
               _this33 = _Component33.call.apply(_Component33, _concatInstanceProperty(_context72 = [this]).call(_context72, args)) || this;
               _this33.Sender = Sender;
+              _this33.senderRef = null;
+              _this33.onChange = function (items) {
+                lastAttachments = items;
+              };
               return _this33;
             }
+            Demo.defaults = function defaults() {
+              return {
+                attachments: []
+              };
+            };
             return Demo;
           }(Component);
-          Demo.template = "\n                const { Sender } = this;\n                <div>\n                    <Sender fileView=\"media\" attachments={[\n                        {key: 'a', uid: 'a', name: 'pic.png', type: 'image/png', src: 'data:image/png;base64,AAAA'},\n                    ]} />\n                </div>\n            ";
-          _mount33 = mount(Demo), element = _mount33[1]; // media 视图下保留 FileCard 的图片渲染（自带 1:1 裁剪），不强制转成 file 卡片
-          expect(element.querySelector('.k-file-card-media.k-file-card-type-image')).not.to.eql(null);
-        case 4:
+          Demo.template = "\n                const { Sender } = this;\n                <Sender\n                    ref={(i) => this.senderRef = i}\n                    attachments={this.get('attachments')}\n                    uploadProps={{autoUpload: false}}\n                    ev-$change:attachments={this.onChange}\n                />\n            ";
+          _mount33 = mount(Demo), instance = _mount33[0];
+          file = new File(['hello'], 'dialog.txt', {
+            type: 'text/plain'
+          });
+          instance.senderRef.addFiles([file]);
+          _context73.next = 8;
+          return wait();
+        case 8:
+          expect(lastAttachments.length).to.eql(1);
+          expect(lastAttachments[0].name).to.eql('dialog.txt');
+          expect(lastAttachments[0].status).to.eql('default');
+        case 11:
         case "end":
           return _context73.stop();
       }
     }, _callee33);
   })));
-  it('should enable name tooltip for Sender media attachments', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee34() {
-    var Demo, _mount34, element, mediaView;
+  it('should render card-view attachments uniformly as file cards', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee34() {
+    var Demo, _mount34, element;
     return _regeneratorRuntime.wrap(function _callee34$(_context75) {
       while (1) switch (_context75.prev = _context75.next) {
         case 0:
@@ -1574,18 +1583,17 @@ describe('Sender', function () {
             }
             return Demo;
           }(Component);
-          Demo.template = "\n                const { Sender } = this;\n                <div>\n                    <Sender fileView=\"media\" attachments={[\n                        {key: 'a', uid: 'a', name: 'very-long-image-name.png', type: 'image/png', src: 'data:image/png;base64,AAAA'},\n                    ]} />\n                </div>\n            ";
-          _mount34 = mount(Demo), element = _mount34[1];
-          mediaView = element.querySelector('.k-file-card-media-view');
-          expect(mediaView.querySelector('.k-media-name-tooltip-trigger')).not.to.eql(null);
-          expect(mediaView.getAttribute('title')).to.eql(null);
-        case 6:
+          Demo.template = "\n                const { Sender } = this;\n                <div>\n                    <Sender attachments={[\n                        {key: 'a', uid: 'a', name: 'pic.png', type: 'image/png', src: 'data:image/png;base64,AAAA'},\n                        {key: 'b', uid: 'b', name: 'note.txt', type: 'text/plain'},\n                    ]} />\n                </div>\n            ";
+          _mount34 = mount(Demo), element = _mount34[1]; // card 视图下，图片附件也应当以「文件卡」形式呈现，而不是图片缩略图
+          expect(element.querySelectorAll('.k-file-card-file').length).to.eql(2);
+          expect(element.querySelectorAll('.k-file-card-media').length).to.eql(0);
+        case 5:
         case "end":
           return _context75.stop();
       }
     }, _callee34);
   })));
-  it('should infer media type from name in media view when attachment type is generic mime', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee35() {
+  it('should keep image media cards (square) in media view', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee35() {
     var Demo, _mount35, element;
     return _regeneratorRuntime.wrap(function _callee35$(_context77) {
       while (1) switch (_context77.prev = _context77.next) {
@@ -1604,18 +1612,17 @@ describe('Sender', function () {
             }
             return Demo;
           }(Component);
-          Demo.template = "\n                const { Sender } = this;\n                <div>\n                    <Sender fileView=\"media\" attachments={[\n                        {key: 'a', uid: 'a', name: 'pic.png', type: 'application/octet-stream', src: 'blob:mock'},\n                    ]} />\n                </div>\n            ";
-          _mount35 = mount(Demo), element = _mount35[1];
+          Demo.template = "\n                const { Sender } = this;\n                <div>\n                    <Sender fileView=\"media\" attachments={[\n                        {key: 'a', uid: 'a', name: 'pic.png', type: 'image/png', src: 'data:image/png;base64,AAAA'},\n                    ]} />\n                </div>\n            ";
+          _mount35 = mount(Demo), element = _mount35[1]; // media 视图下保留 FileCard 的图片渲染（自带 1:1 裁剪），不强制转成 file 卡片
           expect(element.querySelector('.k-file-card-media.k-file-card-type-image')).not.to.eql(null);
-          expect(element.querySelector('.k-file-card-file')).to.eql(null);
-        case 5:
+        case 4:
         case "end":
           return _context77.stop();
       }
     }, _callee35);
   })));
-  it('should keep explicit image type in media view even when src has no extension', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee36() {
-    var Demo, _mount36, element;
+  it('should enable name tooltip for Sender media attachments', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee36() {
+    var Demo, _mount36, element, mediaView;
     return _regeneratorRuntime.wrap(function _callee36$(_context79) {
       while (1) switch (_context79.prev = _context79.next) {
         case 0:
@@ -1633,22 +1640,22 @@ describe('Sender', function () {
             }
             return Demo;
           }(Component);
-          Demo.template = "\n                const { Sender } = this;\n                <div>\n                    <Sender fileView=\"media\" attachments={[\n                        {key: 'a', uid: 'a', name: 'unsplash.jpg', type: 'image', src: 'https://images.unsplash.com/photo-1492691527719-9d1e07e534b4?auto=format&fit=crop&w=1200&q=80'},\n                    ]} />\n                </div>\n            ";
+          Demo.template = "\n                const { Sender } = this;\n                <div>\n                    <Sender fileView=\"media\" attachments={[\n                        {key: 'a', uid: 'a', name: 'very-long-image-name.png', type: 'image/png', src: 'data:image/png;base64,AAAA'},\n                    ]} />\n                </div>\n            ";
           _mount36 = mount(Demo), element = _mount36[1];
-          expect(element.querySelector('.k-file-card-media.k-file-card-type-image')).not.to.eql(null);
-          expect(element.querySelector('.k-media-image')).not.to.eql(null);
-        case 5:
+          mediaView = element.querySelector('.k-file-card-media-view');
+          expect(mediaView.querySelector('.k-media-name-tooltip-trigger')).not.to.eql(null);
+          expect(mediaView.getAttribute('title')).to.eql(null);
+        case 6:
         case "end":
           return _context79.stop();
       }
     }, _callee36);
   })));
-  it('should support directory selection and preserve relative path metadata', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee37() {
-    var lastAttachments, Demo, _mount37, element, input, file;
+  it('should infer media type from name in media view when attachment type is generic mime', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee37() {
+    var Demo, _mount37, element;
     return _regeneratorRuntime.wrap(function _callee37$(_context81) {
       while (1) switch (_context81.prev = _context81.next) {
         case 0:
-          lastAttachments = [];
           Demo = /*#__PURE__*/function (_Component37) {
             _inheritsLoose(Demo, _Component37);
             function Demo() {
@@ -1659,10 +1666,69 @@ describe('Sender', function () {
               }
               _this37 = _Component37.call.apply(_Component37, _concatInstanceProperty(_context80 = [this]).call(_context80, args)) || this;
               _this37.Sender = Sender;
-              _this37.onChange = function (items) {
+              return _this37;
+            }
+            return Demo;
+          }(Component);
+          Demo.template = "\n                const { Sender } = this;\n                <div>\n                    <Sender fileView=\"media\" attachments={[\n                        {key: 'a', uid: 'a', name: 'pic.png', type: 'application/octet-stream', src: 'blob:mock'},\n                    ]} />\n                </div>\n            ";
+          _mount37 = mount(Demo), element = _mount37[1];
+          expect(element.querySelector('.k-file-card-media.k-file-card-type-image')).not.to.eql(null);
+          expect(element.querySelector('.k-file-card-file')).to.eql(null);
+        case 5:
+        case "end":
+          return _context81.stop();
+      }
+    }, _callee37);
+  })));
+  it('should keep explicit image type in media view even when src has no extension', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee38() {
+    var Demo, _mount38, element;
+    return _regeneratorRuntime.wrap(function _callee38$(_context83) {
+      while (1) switch (_context83.prev = _context83.next) {
+        case 0:
+          Demo = /*#__PURE__*/function (_Component38) {
+            _inheritsLoose(Demo, _Component38);
+            function Demo() {
+              var _context82;
+              var _this38;
+              for (var _len38 = arguments.length, args = new Array(_len38), _key38 = 0; _key38 < _len38; _key38++) {
+                args[_key38] = arguments[_key38];
+              }
+              _this38 = _Component38.call.apply(_Component38, _concatInstanceProperty(_context82 = [this]).call(_context82, args)) || this;
+              _this38.Sender = Sender;
+              return _this38;
+            }
+            return Demo;
+          }(Component);
+          Demo.template = "\n                const { Sender } = this;\n                <div>\n                    <Sender fileView=\"media\" attachments={[\n                        {key: 'a', uid: 'a', name: 'unsplash.jpg', type: 'image', src: 'https://images.unsplash.com/photo-1492691527719-9d1e07e534b4?auto=format&fit=crop&w=1200&q=80'},\n                    ]} />\n                </div>\n            ";
+          _mount38 = mount(Demo), element = _mount38[1];
+          expect(element.querySelector('.k-file-card-media.k-file-card-type-image')).not.to.eql(null);
+          expect(element.querySelector('.k-media-image')).not.to.eql(null);
+        case 5:
+        case "end":
+          return _context83.stop();
+      }
+    }, _callee38);
+  })));
+  it('should support directory selection and preserve relative path metadata', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee39() {
+    var lastAttachments, Demo, _mount39, element, input, file;
+    return _regeneratorRuntime.wrap(function _callee39$(_context85) {
+      while (1) switch (_context85.prev = _context85.next) {
+        case 0:
+          lastAttachments = [];
+          Demo = /*#__PURE__*/function (_Component39) {
+            _inheritsLoose(Demo, _Component39);
+            function Demo() {
+              var _context84;
+              var _this39;
+              for (var _len39 = arguments.length, args = new Array(_len39), _key39 = 0; _key39 < _len39; _key39++) {
+                args[_key39] = arguments[_key39];
+              }
+              _this39 = _Component39.call.apply(_Component39, _concatInstanceProperty(_context84 = [this]).call(_context84, args)) || this;
+              _this39.Sender = Sender;
+              _this39.onChange = function (items) {
                 lastAttachments = items;
               };
-              return _this37;
+              return _this39;
             }
             Demo.defaults = function defaults() {
               return {
@@ -1672,7 +1738,7 @@ describe('Sender', function () {
             return Demo;
           }(Component);
           Demo.template = "\n                const { Sender } = this;\n                <Sender\n                    attachments={this.get('attachments')}\n                    uploadProps={{directory: true}}\n                    ev-$change:attachments={this.onChange}\n                />\n            ";
-          _mount37 = mount(Demo), element = _mount37[1];
+          _mount39 = mount(Demo), element = _mount39[1];
           input = element.querySelector('.k-sender-file-input');
           expect(input.getAttribute('directory')).to.eql('');
           expect(input.getAttribute('webkitdirectory')).to.eql('');
@@ -1688,7 +1754,7 @@ describe('Sender', function () {
             configurable: true
           });
           dispatchEvent(input, 'change');
-          _context81.next = 13;
+          _context85.next = 13;
           return wait();
         case 13:
           expect(lastAttachments.length).to.eql(1);
@@ -1696,31 +1762,31 @@ describe('Sender', function () {
           expect(lastAttachments[0].relativePath).to.eql('docs/hello.txt');
         case 16:
         case "end":
-          return _context81.stop();
+          return _context85.stop();
       }
-    }, _callee37);
+    }, _callee39);
   })));
-  it('should support mapAttachment for runtime uploading items', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee38() {
+  it('should support mapAttachment for runtime uploading items', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee40() {
     var _element$querySelecto;
-    var lastAttachments, resolveBeforeUpload, Demo, _mount38, element, input, file;
-    return _regeneratorRuntime.wrap(function _callee38$(_context83) {
-      while (1) switch (_context83.prev = _context83.next) {
+    var lastAttachments, resolveBeforeUpload, Demo, _mount40, element, input, file;
+    return _regeneratorRuntime.wrap(function _callee40$(_context87) {
+      while (1) switch (_context87.prev = _context87.next) {
         case 0:
           lastAttachments = [];
-          Demo = /*#__PURE__*/function (_Component38) {
-            _inheritsLoose(Demo, _Component38);
+          Demo = /*#__PURE__*/function (_Component40) {
+            _inheritsLoose(Demo, _Component40);
             function Demo() {
-              var _context82;
-              var _this38;
-              for (var _len38 = arguments.length, args = new Array(_len38), _key38 = 0; _key38 < _len38; _key38++) {
-                args[_key38] = arguments[_key38];
+              var _context86;
+              var _this40;
+              for (var _len40 = arguments.length, args = new Array(_len40), _key40 = 0; _key40 < _len40; _key40++) {
+                args[_key40] = arguments[_key40];
               }
-              _this38 = _Component38.call.apply(_Component38, _concatInstanceProperty(_context82 = [this]).call(_context82, args)) || this;
-              _this38.Sender = Sender;
-              _this38.onChange = function (items) {
+              _this40 = _Component40.call.apply(_Component40, _concatInstanceProperty(_context86 = [this]).call(_context86, args)) || this;
+              _this40.Sender = Sender;
+              _this40.onChange = function (items) {
                 lastAttachments = items;
               };
-              return _this38;
+              return _this40;
             }
             Demo.defaults = function defaults() {
               return {
@@ -1747,7 +1813,7 @@ describe('Sender', function () {
             return Demo;
           }(Component);
           Demo.template = "\n                const { Sender } = this;\n                <Sender\n                    attachments={this.get('attachments')}\n                    uploadProps={this.getUploadProps()}\n                    ev-$change:attachments={this.onChange}\n                />\n            ";
-          _mount38 = mount(Demo), element = _mount38[1];
+          _mount40 = mount(Demo), element = _mount40[1];
           input = element.querySelector('.k-sender-file-input');
           file = new File(['hello'], 'hello.txt', {
             type: 'text/plain'
@@ -1757,7 +1823,7 @@ describe('Sender', function () {
             configurable: true
           });
           dispatchEvent(input, 'change');
-          _context83.next = 10;
+          _context87.next = 10;
           return wait();
         case 10:
           expect(lastAttachments.length).to.eql(1);
@@ -1769,30 +1835,30 @@ describe('Sender', function () {
           }
         case 15:
         case "end":
-          return _context83.stop();
+          return _context87.stop();
       }
-    }, _callee38);
+    }, _callee40);
   })));
-  it('should show fullscreen drag mask and add dropped files when dragFile is enabled', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee39() {
-    var lastAttachments, Demo, _mount39, element, file, mask, card, icon, text;
-    return _regeneratorRuntime.wrap(function _callee39$(_context85) {
-      while (1) switch (_context85.prev = _context85.next) {
+  it('should show fullscreen drag mask and add dropped files when dragFile is enabled', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee41() {
+    var lastAttachments, Demo, _mount41, element, file, mask, card, icon, text;
+    return _regeneratorRuntime.wrap(function _callee41$(_context89) {
+      while (1) switch (_context89.prev = _context89.next) {
         case 0:
           lastAttachments = [];
-          Demo = /*#__PURE__*/function (_Component39) {
-            _inheritsLoose(Demo, _Component39);
+          Demo = /*#__PURE__*/function (_Component41) {
+            _inheritsLoose(Demo, _Component41);
             function Demo() {
-              var _context84;
-              var _this39;
-              for (var _len39 = arguments.length, args = new Array(_len39), _key39 = 0; _key39 < _len39; _key39++) {
-                args[_key39] = arguments[_key39];
+              var _context88;
+              var _this41;
+              for (var _len41 = arguments.length, args = new Array(_len41), _key41 = 0; _key41 < _len41; _key41++) {
+                args[_key41] = arguments[_key41];
               }
-              _this39 = _Component39.call.apply(_Component39, _concatInstanceProperty(_context84 = [this]).call(_context84, args)) || this;
-              _this39.Sender = Sender;
-              _this39.onChange = function (items) {
+              _this41 = _Component41.call.apply(_Component41, _concatInstanceProperty(_context88 = [this]).call(_context88, args)) || this;
+              _this41.Sender = Sender;
+              _this41.onChange = function (items) {
                 lastAttachments = items;
               };
-              return _this39;
+              return _this41;
             }
             Demo.defaults = function defaults() {
               return {
@@ -1802,14 +1868,14 @@ describe('Sender', function () {
             return Demo;
           }(Component);
           Demo.template = "\n                const { Sender } = this;\n                <Sender\n                    dragFile={true}\n                    attachments={this.get('attachments')}\n                    ev-$change:attachments={this.onChange}\n                />\n            ";
-          _mount39 = mount(Demo), element = _mount39[1];
+          _mount41 = mount(Demo), element = _mount41[1];
           file = new File(['hello'], 'hello.txt', {
             type: 'text/plain'
           });
           dispatchEvent(document, 'dragenter', {
             dataTransfer: getDataTransfer([file])
           });
-          _context85.next = 8;
+          _context89.next = 8;
           return wait();
         case 8:
           mask = element.querySelector('.k-sender-drag-mask');
@@ -1826,7 +1892,7 @@ describe('Sender', function () {
           dispatchEvent(document, 'drop', {
             dataTransfer: getDataTransfer([file])
           });
-          _context85.next = 22;
+          _context89.next = 22;
           return wait();
         case 22:
           expect(element.querySelector('.k-sender-drag-mask')).to.eql(null);
@@ -1834,70 +1900,70 @@ describe('Sender', function () {
           expect(lastAttachments[0].name).to.eql('hello.txt');
         case 25:
         case "end":
-          return _context85.stop();
+          return _context89.stop();
       }
-    }, _callee39);
+    }, _callee41);
   })));
-  it('should ignore non-file drags when dragFile is enabled', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee40() {
-    var Demo, _mount40, element;
-    return _regeneratorRuntime.wrap(function _callee40$(_context87) {
-      while (1) switch (_context87.prev = _context87.next) {
+  it('should ignore non-file drags when dragFile is enabled', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee42() {
+    var Demo, _mount42, element;
+    return _regeneratorRuntime.wrap(function _callee42$(_context91) {
+      while (1) switch (_context91.prev = _context91.next) {
         case 0:
-          Demo = /*#__PURE__*/function (_Component40) {
-            _inheritsLoose(Demo, _Component40);
+          Demo = /*#__PURE__*/function (_Component42) {
+            _inheritsLoose(Demo, _Component42);
             function Demo() {
-              var _context86;
-              var _this40;
-              for (var _len40 = arguments.length, args = new Array(_len40), _key40 = 0; _key40 < _len40; _key40++) {
-                args[_key40] = arguments[_key40];
+              var _context90;
+              var _this42;
+              for (var _len42 = arguments.length, args = new Array(_len42), _key42 = 0; _key42 < _len42; _key42++) {
+                args[_key42] = arguments[_key42];
               }
-              _this40 = _Component40.call.apply(_Component40, _concatInstanceProperty(_context86 = [this]).call(_context86, args)) || this;
-              _this40.Sender = Sender;
-              return _this40;
+              _this42 = _Component42.call.apply(_Component42, _concatInstanceProperty(_context90 = [this]).call(_context90, args)) || this;
+              _this42.Sender = Sender;
+              return _this42;
             }
             return Demo;
           }(Component);
           Demo.template = "\n                const { Sender } = this;\n                <Sender dragFile={true} />\n            ";
-          _mount40 = mount(Demo), element = _mount40[1];
+          _mount42 = mount(Demo), element = _mount42[1];
           dispatchEvent(document, 'dragenter', {
             dataTransfer: {
               types: ['text/plain']
             }
           });
-          _context87.next = 6;
+          _context91.next = 6;
           return wait();
         case 6:
           expect(element.querySelector('.k-sender-drag-mask')).to.eql(null);
         case 7:
         case "end":
-          return _context87.stop();
+          return _context91.stop();
       }
-    }, _callee40);
+    }, _callee42);
   })));
-  it('should trigger uploadError for invalid file type on drag drop', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee41() {
-    var errorMessage, lastAttachments, Demo, _mount41, element, file;
-    return _regeneratorRuntime.wrap(function _callee41$(_context89) {
-      while (1) switch (_context89.prev = _context89.next) {
+  it('should trigger uploadError for invalid file type on drag drop', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee43() {
+    var errorMessage, lastAttachments, Demo, _mount43, element, file;
+    return _regeneratorRuntime.wrap(function _callee43$(_context93) {
+      while (1) switch (_context93.prev = _context93.next) {
         case 0:
           errorMessage = '';
           lastAttachments = [];
-          Demo = /*#__PURE__*/function (_Component41) {
-            _inheritsLoose(Demo, _Component41);
+          Demo = /*#__PURE__*/function (_Component43) {
+            _inheritsLoose(Demo, _Component43);
             function Demo() {
-              var _context88;
-              var _this41;
-              for (var _len41 = arguments.length, args = new Array(_len41), _key41 = 0; _key41 < _len41; _key41++) {
-                args[_key41] = arguments[_key41];
+              var _context92;
+              var _this43;
+              for (var _len43 = arguments.length, args = new Array(_len43), _key43 = 0; _key43 < _len43; _key43++) {
+                args[_key43] = arguments[_key43];
               }
-              _this41 = _Component41.call.apply(_Component41, _concatInstanceProperty(_context88 = [this]).call(_context88, args)) || this;
-              _this41.Sender = Sender;
-              _this41.onChange = function (items) {
+              _this43 = _Component43.call.apply(_Component43, _concatInstanceProperty(_context92 = [this]).call(_context92, args)) || this;
+              _this43.Sender = Sender;
+              _this43.onChange = function (items) {
                 lastAttachments = items;
               };
-              _this41.onUploadError = function (error) {
+              _this43.onUploadError = function (error) {
                 errorMessage = error.message;
               };
-              return _this41;
+              return _this43;
             }
             Demo.defaults = function defaults() {
               return {
@@ -1907,21 +1973,21 @@ describe('Sender', function () {
             return Demo;
           }(Component);
           Demo.template = "\n                const { Sender } = this;\n                <Sender\n                    dragFile={true}\n                    attachments={this.get('attachments')}\n                    uploadProps={{accept: 'image/*'}}\n                    ev-$change:attachments={this.onChange}\n                    ev-uploadError={this.onUploadError}\n                />\n            ";
-          _mount41 = mount(Demo), element = _mount41[1];
+          _mount43 = mount(Demo), element = _mount43[1];
           file = new File(['hello'], 'hello.txt', {
             type: 'text/plain'
           });
           dispatchEvent(document, 'dragenter', {
             dataTransfer: getDataTransfer([file])
           });
-          _context89.next = 9;
+          _context93.next = 9;
           return wait();
         case 9:
           expect(element.querySelector('.k-sender-drag-mask')).not.to.eql(null);
           dispatchEvent(document, 'drop', {
             dataTransfer: getDataTransfer([file])
           });
-          _context89.next = 13;
+          _context93.next = 13;
           return wait();
         case 13:
           expect(errorMessage).to.eql('"hello.txt" 文件类型不合法');
@@ -1929,30 +1995,30 @@ describe('Sender', function () {
           expect(element.querySelector('.k-sender-drag-mask')).to.eql(null);
         case 16:
         case "end":
-          return _context89.stop();
+          return _context93.stop();
       }
-    }, _callee41);
+    }, _callee43);
   })));
-  it('should flatten dragged directory files when uploadProps.directory is enabled', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee42() {
-    var lastAttachments, Demo, _mount42, element, noteFile, imageFile, docsDir;
-    return _regeneratorRuntime.wrap(function _callee42$(_context91) {
-      while (1) switch (_context91.prev = _context91.next) {
+  it('should flatten dragged directory files when uploadProps.directory is enabled', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee44() {
+    var lastAttachments, Demo, _mount44, element, noteFile, imageFile, docsDir;
+    return _regeneratorRuntime.wrap(function _callee44$(_context95) {
+      while (1) switch (_context95.prev = _context95.next) {
         case 0:
           lastAttachments = [];
-          Demo = /*#__PURE__*/function (_Component42) {
-            _inheritsLoose(Demo, _Component42);
+          Demo = /*#__PURE__*/function (_Component44) {
+            _inheritsLoose(Demo, _Component44);
             function Demo() {
-              var _context90;
-              var _this42;
-              for (var _len42 = arguments.length, args = new Array(_len42), _key42 = 0; _key42 < _len42; _key42++) {
-                args[_key42] = arguments[_key42];
+              var _context94;
+              var _this44;
+              for (var _len44 = arguments.length, args = new Array(_len44), _key44 = 0; _key44 < _len44; _key44++) {
+                args[_key44] = arguments[_key44];
               }
-              _this42 = _Component42.call.apply(_Component42, _concatInstanceProperty(_context90 = [this]).call(_context90, args)) || this;
-              _this42.Sender = Sender;
-              _this42.onChange = function (items) {
+              _this44 = _Component44.call.apply(_Component44, _concatInstanceProperty(_context94 = [this]).call(_context94, args)) || this;
+              _this44.Sender = Sender;
+              _this44.onChange = function (items) {
                 lastAttachments = items;
               };
-              return _this42;
+              return _this44;
             }
             Demo.defaults = function defaults() {
               return {
@@ -1962,7 +2028,7 @@ describe('Sender', function () {
             return Demo;
           }(Component);
           Demo.template = "\n                const { Sender } = this;\n                <Sender\n                    dragFile={true}\n                    attachments={this.get('attachments')}\n                    uploadProps={{directory: true}}\n                    ev-$change:attachments={this.onChange}\n                />\n            ";
-          _mount42 = mount(Demo), element = _mount42[1];
+          _mount44 = mount(Demo), element = _mount44[1];
           noteFile = new File(['note'], 'note.txt', {
             type: 'text/plain'
           });
@@ -1973,14 +2039,14 @@ describe('Sender', function () {
           dispatchEvent(document, 'dragenter', {
             dataTransfer: getDataTransfer([noteFile])
           });
-          _context91.next = 10;
+          _context95.next = 10;
           return wait();
         case 10:
           expect(element.querySelector('.k-sender-drag-mask')).not.to.eql(null);
           dispatchEvent(document, 'drop', {
             dataTransfer: getDataTransferWithEntries([docsDir])
           });
-          _context91.next = 14;
+          _context95.next = 14;
           return wait(20);
         case 14:
           expect(lastAttachments.length).to.eql(2);
@@ -1993,34 +2059,34 @@ describe('Sender', function () {
           expect(element.querySelector('.k-sender-drag-mask')).to.eql(null);
         case 18:
         case "end":
-          return _context91.stop();
+          return _context95.stop();
       }
-    }, _callee42);
+    }, _callee44);
   })));
-  it('should still validate flattened directory files on drag drop', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee43() {
-    var errorMessage, lastAttachments, Demo, _mount43, element, file, docsDir;
-    return _regeneratorRuntime.wrap(function _callee43$(_context93) {
-      while (1) switch (_context93.prev = _context93.next) {
+  it('should still validate flattened directory files on drag drop', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee45() {
+    var errorMessage, lastAttachments, Demo, _mount45, element, file, docsDir;
+    return _regeneratorRuntime.wrap(function _callee45$(_context97) {
+      while (1) switch (_context97.prev = _context97.next) {
         case 0:
           errorMessage = '';
           lastAttachments = [];
-          Demo = /*#__PURE__*/function (_Component43) {
-            _inheritsLoose(Demo, _Component43);
+          Demo = /*#__PURE__*/function (_Component45) {
+            _inheritsLoose(Demo, _Component45);
             function Demo() {
-              var _context92;
-              var _this43;
-              for (var _len43 = arguments.length, args = new Array(_len43), _key43 = 0; _key43 < _len43; _key43++) {
-                args[_key43] = arguments[_key43];
+              var _context96;
+              var _this45;
+              for (var _len45 = arguments.length, args = new Array(_len45), _key45 = 0; _key45 < _len45; _key45++) {
+                args[_key45] = arguments[_key45];
               }
-              _this43 = _Component43.call.apply(_Component43, _concatInstanceProperty(_context92 = [this]).call(_context92, args)) || this;
-              _this43.Sender = Sender;
-              _this43.onChange = function (items) {
+              _this45 = _Component45.call.apply(_Component45, _concatInstanceProperty(_context96 = [this]).call(_context96, args)) || this;
+              _this45.Sender = Sender;
+              _this45.onChange = function (items) {
                 lastAttachments = items;
               };
-              _this43.onUploadError = function (error) {
+              _this45.onUploadError = function (error) {
                 errorMessage = error.message;
               };
-              return _this43;
+              return _this45;
             }
             Demo.defaults = function defaults() {
               return {
@@ -2030,7 +2096,7 @@ describe('Sender', function () {
             return Demo;
           }(Component);
           Demo.template = "\n                const { Sender } = this;\n                <Sender\n                    dragFile={true}\n                    attachments={this.get('attachments')}\n                    uploadProps={{directory: true, accept: 'image/*'}}\n                    ev-$change:attachments={this.onChange}\n                    ev-uploadError={this.onUploadError}\n                />\n            ";
-          _mount43 = mount(Demo), element = _mount43[1];
+          _mount45 = mount(Demo), element = _mount45[1];
           file = new File(['hello'], 'hello.txt', {
             type: 'text/plain'
           });
@@ -2038,14 +2104,14 @@ describe('Sender', function () {
           dispatchEvent(document, 'dragenter', {
             dataTransfer: getDataTransfer([file])
           });
-          _context93.next = 10;
+          _context97.next = 10;
           return wait();
         case 10:
           expect(element.querySelector('.k-sender-drag-mask')).not.to.eql(null);
           dispatchEvent(document, 'drop', {
             dataTransfer: getDataTransferWithEntries([docsDir])
           });
-          _context93.next = 14;
+          _context97.next = 14;
           return wait(20);
         case 14:
           expect(errorMessage).to.eql('"hello.txt" 文件类型不合法');
@@ -2053,30 +2119,30 @@ describe('Sender', function () {
           expect(element.querySelector('.k-sender-drag-mask')).to.eql(null);
         case 17:
         case "end":
-          return _context93.stop();
+          return _context97.stop();
       }
-    }, _callee43);
+    }, _callee45);
   })));
-  it('should add pasted files when pasteFile is enabled', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee44() {
-    var lastAttachments, Demo, _mount44, element, textarea, file;
-    return _regeneratorRuntime.wrap(function _callee44$(_context95) {
-      while (1) switch (_context95.prev = _context95.next) {
+  it('should add pasted files when pasteFile is enabled', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee46() {
+    var lastAttachments, Demo, _mount46, element, textarea, file;
+    return _regeneratorRuntime.wrap(function _callee46$(_context99) {
+      while (1) switch (_context99.prev = _context99.next) {
         case 0:
           lastAttachments = [];
-          Demo = /*#__PURE__*/function (_Component44) {
-            _inheritsLoose(Demo, _Component44);
+          Demo = /*#__PURE__*/function (_Component46) {
+            _inheritsLoose(Demo, _Component46);
             function Demo() {
-              var _context94;
-              var _this44;
-              for (var _len44 = arguments.length, args = new Array(_len44), _key44 = 0; _key44 < _len44; _key44++) {
-                args[_key44] = arguments[_key44];
+              var _context98;
+              var _this46;
+              for (var _len46 = arguments.length, args = new Array(_len46), _key46 = 0; _key46 < _len46; _key46++) {
+                args[_key46] = arguments[_key46];
               }
-              _this44 = _Component44.call.apply(_Component44, _concatInstanceProperty(_context94 = [this]).call(_context94, args)) || this;
-              _this44.Sender = Sender;
-              _this44.onChange = function (items) {
+              _this46 = _Component46.call.apply(_Component46, _concatInstanceProperty(_context98 = [this]).call(_context98, args)) || this;
+              _this46.Sender = Sender;
+              _this46.onChange = function (items) {
                 lastAttachments = items;
               };
-              return _this44;
+              return _this46;
             }
             Demo.defaults = function defaults() {
               return {
@@ -2086,7 +2152,7 @@ describe('Sender', function () {
             return Demo;
           }(Component);
           Demo.template = "\n                const { Sender } = this;\n                <Sender\n                    pasteFile={true}\n                    attachments={this.get('attachments')}\n                    ev-$change:attachments={this.onChange}\n                />\n            ";
-          _mount44 = mount(Demo), element = _mount44[1];
+          _mount46 = mount(Demo), element = _mount46[1];
           textarea = element.querySelector('.k-sender-input');
           file = new File(['image'], 'cover.png', {
             type: 'image/png'
@@ -2094,41 +2160,41 @@ describe('Sender', function () {
           dispatchEvent(textarea, 'paste', {
             clipboardData: getClipboardData([file])
           });
-          _context95.next = 9;
+          _context99.next = 9;
           return wait();
         case 9:
           expect(lastAttachments.length).to.eql(1);
           expect(lastAttachments[0].name).to.eql('cover.png');
         case 11:
         case "end":
-          return _context95.stop();
+          return _context99.stop();
       }
-    }, _callee44);
+    }, _callee46);
   })));
-  it('should trigger uploadError for invalid file type on paste', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee45() {
-    var errorMessage, lastAttachments, Demo, _mount45, element, textarea, file;
-    return _regeneratorRuntime.wrap(function _callee45$(_context97) {
-      while (1) switch (_context97.prev = _context97.next) {
+  it('should trigger uploadError for invalid file type on paste', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee47() {
+    var errorMessage, lastAttachments, Demo, _mount47, element, textarea, file;
+    return _regeneratorRuntime.wrap(function _callee47$(_context101) {
+      while (1) switch (_context101.prev = _context101.next) {
         case 0:
           errorMessage = '';
           lastAttachments = [];
-          Demo = /*#__PURE__*/function (_Component45) {
-            _inheritsLoose(Demo, _Component45);
+          Demo = /*#__PURE__*/function (_Component47) {
+            _inheritsLoose(Demo, _Component47);
             function Demo() {
-              var _context96;
-              var _this45;
-              for (var _len45 = arguments.length, args = new Array(_len45), _key45 = 0; _key45 < _len45; _key45++) {
-                args[_key45] = arguments[_key45];
+              var _context100;
+              var _this47;
+              for (var _len47 = arguments.length, args = new Array(_len47), _key47 = 0; _key47 < _len47; _key47++) {
+                args[_key47] = arguments[_key47];
               }
-              _this45 = _Component45.call.apply(_Component45, _concatInstanceProperty(_context96 = [this]).call(_context96, args)) || this;
-              _this45.Sender = Sender;
-              _this45.onChange = function (items) {
+              _this47 = _Component47.call.apply(_Component47, _concatInstanceProperty(_context100 = [this]).call(_context100, args)) || this;
+              _this47.Sender = Sender;
+              _this47.onChange = function (items) {
                 lastAttachments = items;
               };
-              _this45.onUploadError = function (error) {
+              _this47.onUploadError = function (error) {
                 errorMessage = error.message;
               };
-              return _this45;
+              return _this47;
             }
             Demo.defaults = function defaults() {
               return {
@@ -2138,7 +2204,7 @@ describe('Sender', function () {
             return Demo;
           }(Component);
           Demo.template = "\n                const { Sender } = this;\n                <Sender\n                    pasteFile={true}\n                    attachments={this.get('attachments')}\n                    uploadProps={{accept: 'image/*'}}\n                    ev-$change:attachments={this.onChange}\n                    ev-uploadError={this.onUploadError}\n                />\n            ";
-          _mount45 = mount(Demo), element = _mount45[1];
+          _mount47 = mount(Demo), element = _mount47[1];
           textarea = element.querySelector('.k-sender-input');
           file = new File(['hello'], 'hello.txt', {
             type: 'text/plain'
@@ -2146,38 +2212,38 @@ describe('Sender', function () {
           dispatchEvent(textarea, 'paste', {
             clipboardData: getClipboardData([file])
           });
-          _context97.next = 10;
+          _context101.next = 10;
           return wait();
         case 10:
           expect(errorMessage).to.eql('"hello.txt" 文件类型不合法');
           expect(lastAttachments.length).to.eql(0);
         case 12:
         case "end":
-          return _context97.stop();
+          return _context101.stop();
       }
-    }, _callee45);
+    }, _callee47);
   })));
-  it('should keep native text paste when pasteFile is disabled', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee46() {
-    var Demo, _mount46, element, textarea, file, event;
-    return _regeneratorRuntime.wrap(function _callee46$(_context99) {
-      while (1) switch (_context99.prev = _context99.next) {
+  it('should keep native text paste when pasteFile is disabled', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee48() {
+    var Demo, _mount48, element, textarea, file, event;
+    return _regeneratorRuntime.wrap(function _callee48$(_context103) {
+      while (1) switch (_context103.prev = _context103.next) {
         case 0:
-          Demo = /*#__PURE__*/function (_Component46) {
-            _inheritsLoose(Demo, _Component46);
+          Demo = /*#__PURE__*/function (_Component48) {
+            _inheritsLoose(Demo, _Component48);
             function Demo() {
-              var _context98;
-              var _this46;
-              for (var _len46 = arguments.length, args = new Array(_len46), _key46 = 0; _key46 < _len46; _key46++) {
-                args[_key46] = arguments[_key46];
+              var _context102;
+              var _this48;
+              for (var _len48 = arguments.length, args = new Array(_len48), _key48 = 0; _key48 < _len48; _key48++) {
+                args[_key48] = arguments[_key48];
               }
-              _this46 = _Component46.call.apply(_Component46, _concatInstanceProperty(_context98 = [this]).call(_context98, args)) || this;
-              _this46.Sender = Sender;
-              return _this46;
+              _this48 = _Component48.call.apply(_Component48, _concatInstanceProperty(_context102 = [this]).call(_context102, args)) || this;
+              _this48.Sender = Sender;
+              return _this48;
             }
             return Demo;
           }(Component);
           Demo.template = "\n                const { Sender } = this;\n                <Sender />\n            ";
-          _mount46 = mount(Demo), element = _mount46[1];
+          _mount48 = mount(Demo), element = _mount48[1];
           textarea = element.querySelector('.k-sender-input');
           file = new File(['image'], 'cover.png', {
             type: 'image/png'
@@ -2188,14 +2254,14 @@ describe('Sender', function () {
             clipboardData: getClipboardData([file])
           });
           textarea.dispatchEvent(event);
-          _context99.next = 11;
+          _context103.next = 11;
           return wait();
         case 11:
           expect(event.defaultPrevented).to.eql(false);
         case 12:
         case "end":
-          return _context99.stop();
+          return _context103.stop();
       }
-    }, _callee46);
+    }, _callee48);
   })));
 });