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

package/components/sender/index.spec.js

@@ -9,7 +9,7 @@ import _Array$from from "@babel/runtime-corejs3/core-js/array/from";
 import _Promise from "@babel/runtime-corejs3/core-js/promise";
 import _Object$assign from "@babel/runtime-corejs3/core-js/object/assign";
 import { Component } from 'intact-vue-next';
-import { dispatchEvent, mount, unmount, wait } from '../../test/utils';
+import { dispatchEvent, getElement, mount, unmount, wait } from '../../test/utils';
 import { Sender } from '.';
 function getDataTransfer(files) {
   var dataTransfer = new DataTransfer();
@@ -210,7 +210,7 @@ describe('Sender', function () {
     }, _callee3);
   })));
   it('should expose focus and blur methods', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee4() {
-    var Demo, _mount4, instance, element, textarea;
+    var Demo, _mount4, instance, element, textarea, shell;
     return _regeneratorRuntime.wrap(function _callee4$(_context8) {
       while (1) switch (_context8.prev = _context8.next) {
         case 0:
@@ -232,17 +232,24 @@ describe('Sender', function () {
           Demo.template = "\n                const { Sender } = this;\n                <Sender ref={(i) => this.senderRef = i} />\n            ";
           _mount4 = mount(Demo), instance = _mount4[0], element = _mount4[1];
           textarea = element.querySelector('.k-sender-input');
+          shell = element.querySelector('.k-sender-shell');
           instance.senderRef.focus();
-          _context8.next = 7;
+          _context8.next = 8;
           return wait();
-        case 7:
+        case 8:
           expect(document.activeElement).to.eql(textarea);
+          expect(shell.classList.contains('k-sender-active')).to.be.true;
+          // active 态叠加 backdrop-filter 与多层负 spread 阴影；Headless Chrome 下
+          // getComputedStyle(boxShadow) 会归一化为全零，无法可靠断言具体色值。
+          expect(getComputedStyle(shell).backdropFilter).to.contain('blur(4px)');
           instance.senderRef.blur();
-          _context8.next = 11;
+          _context8.next = 14;
           return wait();
-        case 11:
+        case 14:
           expect(document.activeElement).not.to.eql(textarea);
-        case 12:
+          expect(shell.classList.contains('k-sender-active')).to.be.false;
+          expect(getComputedStyle(shell).backdropFilter).to.eql('none');
+        case 17:
         case "end":
           return _context8.stop();
       }
@@ -538,11 +545,12 @@ describe('Sender', function () {
       }
     }, _callee10);
   })));
-  it('should respect disabled prop', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee11() {
-    var Demo, _mount11, element, textarea, sendBtn;
+  it('should respect stopDisabled prop when generating', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee11() {
+    var stopped, Demo, _mount11, instance, element, sendBtn;
     return _regeneratorRuntime.wrap(function _callee11$(_context22) {
       while (1) switch (_context22.prev = _context22.next) {
         case 0:
+          stopped = 0;
           Demo = /*#__PURE__*/function (_Component11) {
             _inheritsLoose(Demo, _Component11);
             function Demo() {
@@ -553,29 +561,55 @@ describe('Sender', function () {
               }
               _this11 = _Component11.call.apply(_Component11, _concatInstanceProperty(_context21 = [this]).call(_context21, args)) || this;
               _this11.Sender = Sender;
+              _this11.senderRef = null;
+              _this11.onStop = function () {
+                stopped++;
+              };
               return _this11;
             }
+            Demo.defaults = function defaults() {
+              return {
+                stopDisabled: true
+              };
+            };
             return Demo;
           }(Component);
-          Demo.template = "const { Sender } = this; <div><Sender disabled={true} value=\"hi\" /></div>";
-          _mount11 = mount(Demo), element = _mount11[1];
-          expect(element.querySelector('.k-sender').classList.contains('k-sender-disabled')).to.eql(true);
-          textarea = element.querySelector('.k-sender-input');
-          expect(textarea.disabled).to.eql(true);
+          Demo.template = "\n                const { Sender } = this;\n                <Sender\n                    ref={(i) => this.senderRef = i}\n                    generating={true}\n                    stopDisabled={this.get('stopDisabled')}\n                    ev-stopGenerate={this.onStop}\n                />\n            ";
+          _mount11 = mount(Demo), instance = _mount11[0], element = _mount11[1];
           sendBtn = element.querySelector('.k-sender-send-btn');
+          expect(sendBtn.title).to.contain('停止');
           expect(sendBtn.disabled).to.eql(true);
-        case 8:
+          sendBtn.click();
+          _context22.next = 10;
+          return wait();
+        case 10:
+          expect(stopped).to.eql(0);
+          instance.senderRef.stopGenerate();
+          _context22.next = 14;
+          return wait();
+        case 14:
+          expect(stopped).to.eql(0);
+          instance.set('stopDisabled', false);
+          _context22.next = 18;
+          return wait();
+        case 18:
+          expect(sendBtn.disabled).to.eql(false);
+          instance.senderRef.stopGenerate();
+          _context22.next = 22;
+          return wait();
+        case 22:
+          expect(stopped).to.eql(1);
+        case 23:
         case "end":
           return _context22.stop();
       }
     }, _callee11);
   })));
-  it('should render attachments via FileCardList and emit change on delete', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee12() {
-    var lastAttachments, Demo, _mount12, element, deleteBtn;
+  it('should respect disabled prop', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee12() {
+    var Demo, _mount12, element, textarea, sendBtn;
     return _regeneratorRuntime.wrap(function _callee12$(_context24) {
       while (1) switch (_context24.prev = _context24.next) {
         case 0:
-          lastAttachments = null;
           Demo = /*#__PURE__*/function (_Component12) {
             _inheritsLoose(Demo, _Component12);
             function Demo() {
@@ -586,50 +620,29 @@ describe('Sender', function () {
               }
               _this12 = _Component12.call.apply(_Component12, _concatInstanceProperty(_context23 = [this]).call(_context23, args)) || this;
               _this12.Sender = Sender;
-              _this12.onChange = function (items) {
-                lastAttachments = items;
-              };
               return _this12;
             }
-            Demo.defaults = function defaults() {
-              return {
-                attachments: [{
-                  key: 'a',
-                  uid: 'a',
-                  name: 'note.txt',
-                  byte: 1024,
-                  status: 'done'
-                }]
-              };
-            };
             return Demo;
           }(Component);
-          Demo.template = "\n                const { Sender } = this;\n                <Sender\n                    attachments={this.get('attachments')}\n                    ev-$change:attachments={this.onChange}\n                />\n            ";
+          Demo.template = "const { Sender } = this; <div><Sender disabled={true} value=\"hi\" /></div>";
           _mount12 = mount(Demo), element = _mount12[1];
-          expect(element.querySelector('.k-sender-attachments')).not.to.eql(null);
-          expect(element.querySelectorAll('.k-file-card').length).to.eql(1);
-          deleteBtn = element.querySelector('.k-file-card-delete');
-          deleteBtn.click();
-          _context24.next = 10;
-          return wait();
-        case 10:
-          expect(lastAttachments).not.to.eql(null);
-          expect(lastAttachments.length).to.eql(0);
-        case 12:
+          expect(element.querySelector('.k-sender').classList.contains('k-sender-disabled')).to.eql(true);
+          textarea = element.querySelector('.k-sender-input');
+          expect(textarea.disabled).to.eql(true);
+          sendBtn = element.querySelector('.k-sender-send-btn');
+          expect(sendBtn.disabled).to.eql(true);
+        case 8:
         case "end":
           return _context24.stop();
       }
     }, _callee12);
   })));
-  it('should expose attachment click and delete events', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee13() {
-    var _lastDeleted;
-    var clickCount, deleteCount, lastDeleted, Demo, _mount13, element, card, deleteBtn;
+  it('should respect sendDisabled prop without disabling input and upload', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee13() {
+    var sentCount, Demo, _mount13, instance, element, root, textarea, attachBtn, sendBtn;
     return _regeneratorRuntime.wrap(function _callee13$(_context26) {
       while (1) switch (_context26.prev = _context26.next) {
         case 0:
-          clickCount = 0;
-          deleteCount = 0;
-          lastDeleted = null;
+          sentCount = 0;
           Demo = /*#__PURE__*/function (_Component13) {
             _inheritsLoose(Demo, _Component13);
             function Demo() {
@@ -640,56 +653,56 @@ describe('Sender', function () {
               }
               _this13 = _Component13.call.apply(_Component13, _concatInstanceProperty(_context25 = [this]).call(_context25, args)) || this;
               _this13.Sender = Sender;
-              _this13.onAttachmentClick = function () {
-                clickCount += 1;
-              };
-              _this13.onAttachmentDelete = function (item) {
-                deleteCount += 1;
-                lastDeleted = item;
+              _this13.senderRef = null;
+              _this13.onSend = function () {
+                sentCount++;
               };
               return _this13;
             }
-            Demo.defaults = function defaults() {
-              return {
-                attachments: [{
-                  key: 'a',
-                  uid: 'a',
-                  name: 'note.txt',
-                  byte: 1024,
-                  status: 'done'
-                }]
-              };
-            };
             return Demo;
           }(Component);
-          Demo.template = "\n                const { Sender } = this;\n                <Sender\n                    attachments={this.get('attachments')}\n                    ev-attachmentClick={this.onAttachmentClick}\n                    ev-attachmentDelete={this.onAttachmentDelete}\n                />\n            ";
-          _mount13 = mount(Demo), element = _mount13[1];
-          card = element.querySelector('.k-file-card');
-          card.click();
-          _context26.next = 10;
-          return wait();
-        case 10:
-          expect(clickCount).to.eql(1);
-          deleteBtn = element.querySelector('.k-file-card-delete');
-          deleteBtn.click();
+          Demo.template = "\n                const { Sender } = this;\n                <div>\n                    <Sender\n                        ref={(i) => this.senderRef = i}\n                        sendDisabled={true}\n                        value=\"hi\"\n                        clearOnSend={false}\n                        ev-messageSend={this.onSend}\n                    />\n                </div>\n            ";
+          _mount13 = mount(Demo), instance = _mount13[0], element = _mount13[1];
+          root = element.querySelector('.k-sender');
+          expect(root.classList.contains('k-sender-disabled')).to.eql(false);
+          textarea = element.querySelector('.k-sender-input');
+          expect(textarea.disabled).to.eql(false);
+          attachBtn = element.querySelector('.k-sender-attach-btn');
+          expect(attachBtn.disabled).to.eql(false);
+          sendBtn = element.querySelector('.k-sender-send-btn');
+          expect(sendBtn.disabled).to.eql(true);
+          sendBtn.click();
           _context26.next = 15;
           return wait();
         case 15:
-          expect(deleteCount).to.eql(1);
-          expect((_lastDeleted = lastDeleted) == null ? void 0 : _lastDeleted.name).to.eql('note.txt');
-        case 17:
+          expect(sentCount).to.eql(0);
+          instance.senderRef.submit();
+          _context26.next = 19;
+          return wait();
+        case 19:
+          expect(sentCount).to.eql(0);
+          dispatchEvent(textarea, 'keydown', {
+            key: 'Enter',
+            keyCode: 13
+          });
+          _context26.next = 23;
+          return wait();
+        case 23:
+          expect(sentCount).to.eql(0);
+        case 24:
         case "end":
           return _context26.stop();
       }
     }, _callee13);
   })));
-  it('should expose send button slot params', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee14() {
-    var _context28, _context29;
-    var captured, Demo, _mount14, instance, element, btn;
-    return _regeneratorRuntime.wrap(function _callee14$(_context30) {
-      while (1) switch (_context30.prev = _context30.next) {
+  it('should disable input interactions without disabling stop generation', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee14() {
+    var sentCount, stopped, inputChanged, Demo, _mount14, instance, element, root, shell, textarea, attachBtn, sendBtn;
+    return _regeneratorRuntime.wrap(function _callee14$(_context28) {
+      while (1) switch (_context28.prev = _context28.next) {
         case 0:
-          captured = null;
+          sentCount = 0;
+          stopped = 0;
+          inputChanged = 0;
           Demo = /*#__PURE__*/function (_Component14) {
             _inheritsLoose(Demo, _Component14);
             function Demo() {
@@ -700,365 +713,956 @@ describe('Sender', function () {
               }
               _this14 = _Component14.call.apply(_Component14, _concatInstanceProperty(_context27 = [this]).call(_context27, args)) || this;
               _this14.Sender = Sender;
-              _this14.capture = function (p) {
-                captured = p;
+              _this14.senderRef = null;
+              _this14.onSend = function () {
+                sentCount++;
+              };
+              _this14.onStop = function () {
+                stopped++;
+              };
+              _this14.onInputChange = function () {
+                inputChanged++;
               };
               return _this14;
             }
-            Demo.defaults = function defaults() {
-              return {
-                value: 'hi',
-                generating: false
-              };
-            };
             return Demo;
           }(Component);
-          Demo.template = "\n                const { Sender } = this;\n                <Sender value={this.get('value')} generating={this.get('generating')}>\n                    <b:sendButton args=\"scope\">\n                        <button class=\"custom-send\" disabled={scope.disabled}>\n                            {scope.generating ? 'STOP' : 'SEND'}\n                        </button>\n                    </b:sendButton>\n                </Sender>\n            ";
+          Demo.template = "\n                const { Sender } = this;\n                <div>\n                    <Sender\n                        ref={(i) => this.senderRef = i}\n                        value=\"hi\"\n                        generating={true}\n                        inputDisabled={true}\n                        dragFile={true}\n                        pasteFile={true}\n                        clearOnSend={false}\n                        ev-messageSend={this.onSend}\n                        ev-stopGenerate={this.onStop}\n                        ev-$change:value={this.onInputChange}\n                    />\n                </div>\n            ";
           _mount14 = mount(Demo), instance = _mount14[0], element = _mount14[1];
-          btn = element.querySelector('.custom-send');
-          expect(btn).not.to.eql(null);
-          expect(_trimInstanceProperty(_context28 = btn.textContent).call(_context28)).to.eql('SEND');
-          instance.set('generating', true);
-          _context30.next = 10;
+          root = element.querySelector('.k-sender');
+          shell = element.querySelector('.k-sender-shell');
+          textarea = element.querySelector('.k-sender-input');
+          attachBtn = element.querySelector('.k-sender-attach-btn');
+          sendBtn = element.querySelector('.k-sender-send-btn');
+          expect(root.classList.contains('k-sender-disabled')).to.eql(false);
+          expect(root.classList.contains('k-sender-input-disabled')).to.eql(true);
+          expect(textarea.disabled).to.eql(true);
+          expect(attachBtn.disabled).to.eql(true);
+          expect(sendBtn.title).to.contain('停止');
+          expect(sendBtn.disabled).to.eql(false);
+          expect(getComputedStyle(shell).backgroundColor).not.to.eql('rgb(255, 255, 255)');
+          dispatchEvent(textarea, 'keydown', {
+            key: 'Enter',
+            keyCode: 13
+          });
+          dispatchEvent(textarea, 'input');
+          dispatchEvent(textarea, 'paste', {
+            clipboardData: getClipboardData([new File(['a'], 'a.txt', {
+              type: 'text/plain'
+            })])
+          });
+          _context28.next = 23;
           return wait();
-        case 10:
-          expect(_trimInstanceProperty(_context29 = element.querySelector('.custom-send').textContent).call(_context29)).to.eql('STOP');
-        case 11:
+        case 23:
+          expect(sentCount).to.eql(0);
+          expect(inputChanged).to.eql(0);
+          instance.senderRef.addFiles([new File(['b'], 'b.txt', {
+            type: 'text/plain'
+          })]);
+          _context28.next = 28;
+          return wait();
+        case 28:
+          expect(instance.senderRef.get('attachments') || []).to.eql([]);
+          sendBtn.click();
+          _context28.next = 32;
+          return wait();
+        case 32:
+          expect(stopped).to.eql(1);
+          instance.senderRef.stopGenerate();
+          _context28.next = 36;
+          return wait();
+        case 36:
+          expect(stopped).to.eql(2);
+        case 37:
         case "end":
-          return _context30.stop();
+          return _context28.stop();
       }
     }, _callee14);
   })));
-  it('should render beforeInput inside shell and configure inside toolbar middle', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee15() {
-    var Demo, _mount15, element, top, tools, shell, middle, left, right, toolbar, children;
-    return _regeneratorRuntime.wrap(function _callee15$(_context32) {
-      while (1) switch (_context32.prev = _context32.next) {
+  it('should render attachments via FileCardList and emit change on delete', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee15() {
+    var lastAttachments, Demo, _mount15, element, deleteBtn;
+    return _regeneratorRuntime.wrap(function _callee15$(_context30) {
+      while (1) switch (_context30.prev = _context30.next) {
         case 0:
+          lastAttachments = null;
           Demo = /*#__PURE__*/function (_Component15) {
             _inheritsLoose(Demo, _Component15);
             function Demo() {
-              var _context31;
+              var _context29;
               var _this15;
               for (var _len15 = arguments.length, args = new Array(_len15), _key15 = 0; _key15 < _len15; _key15++) {
                 args[_key15] = arguments[_key15];
               }
-              _this15 = _Component15.call.apply(_Component15, _concatInstanceProperty(_context31 = [this]).call(_context31, args)) || this;
+              _this15 = _Component15.call.apply(_Component15, _concatInstanceProperty(_context29 = [this]).call(_context29, args)) || this;
               _this15.Sender = Sender;
+              _this15.onChange = function (items) {
+                lastAttachments = items;
+              };
               return _this15;
             }
+            Demo.defaults = function defaults() {
+              return {
+                attachments: [{
+                  key: 'a',
+                  uid: 'a',
+                  name: 'note.txt',
+                  byte: 1024,
+                  status: 'done'
+                }]
+              };
+            };
             return Demo;
           }(Component);
-          Demo.template = "\n                const { Sender } = this;\n                <Sender>\n                    <b:beforeInput>\n                        <div class=\"top-suggest\">\u63A8\u8350</div>\n                    </b:beforeInput>\n                    <b:configure>\n                        <div class=\"bottom-tools\">\u5DE5\u5177</div>\n                    </b:configure>\n                </Sender>\n            ";
+          Demo.template = "\n                const { Sender } = this;\n                <Sender\n                    attachments={this.get('attachments')}\n                    ev-$change:attachments={this.onChange}\n                />\n            ";
           _mount15 = mount(Demo), element = _mount15[1];
-          top = element.querySelector('.top-suggest');
-          tools = element.querySelector('.bottom-tools');
-          expect(top).not.to.eql(null);
-          expect(tools).not.to.eql(null);
-          // beforeInput 包装容器在 shell 内
-          shell = element.querySelector('.k-sender-shell');
-          expect(shell.contains(top)).to.eql(true);
-          // configure 落在 toolbar 中间
-          middle = element.querySelector('.k-sender-toolbar-middle');
-          expect(middle).not.to.eql(null);
-          expect(middle.contains(tools)).to.eql(true);
-          // configure 处于附件按钮和发送按钮之间
-          left = element.querySelector('.k-sender-toolbar-left');
-          right = element.querySelector('.k-sender-toolbar-right');
-          toolbar = element.querySelector('.k-sender-toolbar');
-          children = _Array$from(toolbar.children);
-          expect(children.indexOf(left)).to.be.lessThan(children.indexOf(middle));
-          expect(children.indexOf(middle)).to.be.lessThan(children.indexOf(right));
-        case 18:
+          expect(element.querySelector('.k-sender-attachments')).not.to.eql(null);
+          expect(element.querySelectorAll('.k-file-card').length).to.eql(1);
+          deleteBtn = element.querySelector('.k-file-card-delete');
+          deleteBtn.click();
+          _context30.next = 10;
+          return wait();
+        case 10:
+          expect(lastAttachments).not.to.eql(null);
+          expect(lastAttachments.length).to.eql(0);
+        case 12:
         case "end":
-          return _context32.stop();
+          return _context30.stop();
       }
     }, _callee15);
   })));
-  it('should render header above shell and footer below shell', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee16() {
-    var _context34;
-    var Demo, _mount16, element, header, footer, shell;
-    return _regeneratorRuntime.wrap(function _callee16$(_context35) {
-      while (1) switch (_context35.prev = _context35.next) {
+  it('should expose attachment click and delete events', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee16() {
+    var _lastDeleted;
+    var clickCount, deleteCount, lastDeleted, Demo, _mount16, element, card, deleteBtn;
+    return _regeneratorRuntime.wrap(function _callee16$(_context32) {
+      while (1) switch (_context32.prev = _context32.next) {
         case 0:
+          clickCount = 0;
+          deleteCount = 0;
+          lastDeleted = null;
           Demo = /*#__PURE__*/function (_Component16) {
             _inheritsLoose(Demo, _Component16);
             function Demo() {
-              var _context33;
+              var _context31;
               var _this16;
               for (var _len16 = arguments.length, args = new Array(_len16), _key16 = 0; _key16 < _len16; _key16++) {
                 args[_key16] = arguments[_key16];
               }
-              _this16 = _Component16.call.apply(_Component16, _concatInstanceProperty(_context33 = [this]).call(_context33, args)) || this;
+              _this16 = _Component16.call.apply(_Component16, _concatInstanceProperty(_context31 = [this]).call(_context31, args)) || this;
               _this16.Sender = Sender;
+              _this16.onAttachmentClick = function () {
+                clickCount += 1;
+              };
+              _this16.onAttachmentDelete = function (item) {
+                deleteCount += 1;
+                lastDeleted = item;
+              };
               return _this16;
             }
+            Demo.defaults = function defaults() {
+              return {
+                attachments: [{
+                  key: 'a',
+                  uid: 'a',
+                  name: 'note.txt',
+                  byte: 1024,
+                  status: 'done'
+                }]
+              };
+            };
             return Demo;
           }(Component);
-          Demo.template = "\n                const { Sender } = this;\n                <Sender>\n                    <b:header>\n                        <button class=\"new-chat-btn\">\u5F00\u542F\u65B0\u5BF9\u8BDD</button>\n                    </b:header>\n                    <b:footer>\n                        <div class=\"sender-disclaimer\">AI\u751F\u6210\uFF0C\u4EC5\u4F9B\u53C2\u8003\u3002</div>\n                    </b:footer>\n                </Sender>\n            ";
+          Demo.template = "\n                const { Sender } = this;\n                <Sender\n                    attachments={this.get('attachments')}\n                    ev-attachmentClick={this.onAttachmentClick}\n                    ev-attachmentDelete={this.onAttachmentDelete}\n                />\n            ";
           _mount16 = mount(Demo), element = _mount16[1];
-          header = element.querySelector('.k-sender-header');
-          footer = element.querySelector('.k-sender-footer');
-          shell = element.querySelector('.k-sender-shell');
-          expect(header).not.to.eql(null);
-          expect(footer).not.to.eql(null);
-          expect(header.querySelector('.new-chat-btn')).not.to.eql(null);
-          expect(_trimInstanceProperty(_context34 = footer.querySelector('.sender-disclaimer').textContent).call(_context34)).to.eql('AI生成，仅供参考。');
-          expect(shell.contains(header)).to.eql(false);
-          expect(shell.contains(footer)).to.eql(false);
-          expect(_Array$from(element.children)).to.eql([header, shell, footer]);
-        case 13:
+          card = element.querySelector('.k-file-card');
+          card.click();
+          _context32.next = 10;
+          return wait();
+        case 10:
+          expect(clickCount).to.eql(1);
+          deleteBtn = element.querySelector('.k-file-card-delete');
+          deleteBtn.click();
+          _context32.next = 15;
+          return wait();
+        case 15:
+          expect(deleteCount).to.eql(1);
+          expect((_lastDeleted = lastDeleted) == null ? void 0 : _lastDeleted.name).to.eql('note.txt');
+        case 17:
         case "end":
-          return _context35.stop();
+          return _context32.stop();
       }
     }, _callee16);
   })));
-  // 布局插槽为空时，不保留 header/footer/beforeInput/configure/attachmentsButton 的空壳。
-  it('should not render wrappers for empty layout slots', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee17() {
-    var Demo, _mount17, element;
-    return _regeneratorRuntime.wrap(function _callee17$(_context37) {
-      while (1) switch (_context37.prev = _context37.next) {
+  it('should expose send button slot params', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee17() {
+    var _context34, _context35;
+    var captured, Demo, _mount17, instance, element, btn, stopBtn;
+    return _regeneratorRuntime.wrap(function _callee17$(_context36) {
+      while (1) switch (_context36.prev = _context36.next) {
         case 0:
+          captured = null;
           Demo = /*#__PURE__*/function (_Component17) {
             _inheritsLoose(Demo, _Component17);
             function Demo() {
-              var _context36;
+              var _context33;
               var _this17;
               for (var _len17 = arguments.length, args = new Array(_len17), _key17 = 0; _key17 < _len17; _key17++) {
                 args[_key17] = arguments[_key17];
               }
-              _this17 = _Component17.call.apply(_Component17, _concatInstanceProperty(_context36 = [this]).call(_context36, args)) || this;
+              _this17 = _Component17.call.apply(_Component17, _concatInstanceProperty(_context33 = [this]).call(_context33, args)) || this;
               _this17.Sender = Sender;
+              _this17.capture = function (p) {
+                captured = p;
+              };
               return _this17;
             }
-            return Demo;
-          }(Component);
-          Demo.template = "\n                const { Sender } = this;\n                <div>\n                    <Sender showAttachmentsButton={false}>\n                        <b:header>\n                            <span v-if={false} class=\"empty-header\">header</span>\n                        </b:header>\n                        <b:beforeInput>\n                            <span v-if={false} class=\"empty-before-input\">before</span>\n                        </b:beforeInput>\n                        <b:attachmentsButton>\n                            <button v-if={false} class=\"empty-attachments-button\" type=\"button\">upload</button>\n                        </b:attachmentsButton>\n                        <b:configure>\n                            <span v-if={false} class=\"empty-configure\">configure</span>\n                        </b:configure>\n                        <b:footer>\n                            <span v-if={false} class=\"empty-footer\">footer</span>\n                        </b:footer>\n                    </Sender>\n                </div>\n            ";
-          _mount17 = mount(Demo), element = _mount17[1];
-          expect(element.querySelector('.k-sender-header')).to.eql(null);
-          expect(element.querySelector('.k-sender-before-input')).to.eql(null);
-          expect(element.querySelector('.k-sender-toolbar-left')).to.eql(null);
-          expect(element.querySelector('.k-sender-toolbar-middle')).to.eql(null);
-          expect(element.querySelector('.k-sender-footer')).to.eql(null);
-          expect(element.querySelector('.k-sender-toolbar-right')).not.to.eql(null);
-        case 9:
+            Demo.defaults = function defaults() {
+              return {
+                value: 'hi',
+                generating: false,
+                stopDisabled: false
+              };
+            };
+            return Demo;
+          }(Component);
+          Demo.template = "\n                const { Sender } = this;\n                <Sender\n                    value={this.get('value')}\n                    generating={this.get('generating')}\n                    stopDisabled={this.get('stopDisabled')}\n                >\n                    <b:sendButton args=\"scope\">\n                        <button class=\"custom-send\" disabled={scope.generating ? scope.stopDisabled : scope.disabled}>\n                            {scope.generating ? 'STOP' : 'SEND'}\n                        </button>\n                    </b:sendButton>\n                </Sender>\n            ";
+          _mount17 = mount(Demo), instance = _mount17[0], element = _mount17[1];
+          btn = element.querySelector('.custom-send');
+          expect(btn).not.to.eql(null);
+          expect(_trimInstanceProperty(_context34 = btn.textContent).call(_context34)).to.eql('SEND');
+          instance.set('generating', true);
+          _context36.next = 10;
+          return wait();
+        case 10:
+          stopBtn = element.querySelector('.custom-send');
+          expect(_trimInstanceProperty(_context35 = stopBtn.textContent).call(_context35)).to.eql('STOP');
+          expect(stopBtn.disabled).to.eql(false);
+          instance.set('stopDisabled', true);
+          _context36.next = 16;
+          return wait();
+        case 16:
+          expect(stopBtn.disabled).to.eql(true);
+        case 17:
         case "end":
-          return _context37.stop();
+          return _context36.stop();
       }
     }, _callee17);
   })));
-  it('should hide attach button and show dashed + box in image mode', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee18() {
-    var Demo, _mount18, element, addBox, clicked, fileInput;
-    return _regeneratorRuntime.wrap(function _callee18$(_context39) {
-      while (1) switch (_context39.prev = _context39.next) {
+  it('should render tooltip for default buttons by buttonTooltip', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee18() {
+    var Demo, _mount18, instance, element, sendBtn, stopBtn, listUpload;
+    return _regeneratorRuntime.wrap(function _callee18$(_context38) {
+      while (1) switch (_context38.prev = _context38.next) {
         case 0:
           Demo = /*#__PURE__*/function (_Component18) {
             _inheritsLoose(Demo, _Component18);
             function Demo() {
-              var _context38;
+              var _context37;
               var _this18;
               for (var _len18 = arguments.length, args = new Array(_len18), _key18 = 0; _key18 < _len18; _key18++) {
                 args[_key18] = arguments[_key18];
               }
-              _this18 = _Component18.call.apply(_Component18, _concatInstanceProperty(_context38 = [this]).call(_context38, args)) || this;
+              _this18 = _Component18.call.apply(_Component18, _concatInstanceProperty(_context37 = [this]).call(_context37, args)) || this;
               _this18.Sender = Sender;
               return _this18;
             }
+            Demo.defaults = function defaults() {
+              return {
+                generating: false
+              };
+            };
             return Demo;
           }(Component);
-          Demo.template = "const { Sender } = this; <div><Sender type=\"image\" /></div>";
-          _mount18 = mount(Demo), element = _mount18[1]; // 默认附件按钮隐藏
-          expect(element.querySelector('.k-sender-attach-btn')).to.eql(null);
-          // 图片模式即使没有附件也要展示 FileCardList，用来承载末尾 + 框
-          expect(element.querySelector('.k-sender-attachments')).not.to.eql(null);
-          addBox = element.querySelector('.k-sender-image-add');
-          expect(addBox).not.to.eql(null);
-          // 点击 + 框会触发 file input click
-          clicked = 0;
-          fileInput = element.querySelector('.k-sender-file-input');
-          fileInput.addEventListener('click', function (e) {
-            clicked++;
-            e.preventDefault();
-          });
-          addBox.click();
-          _context39.next = 13;
+          Demo.template = "\n                const { Sender } = this;\n                <Sender\n                    value=\"hello\"\n                    generating={this.get('generating')}\n                    uploadButton=\"list\"\n                    buttonTooltip={{\n                        send: '\u53D1\u9001\u63D0\u793A',\n                        stop: '\u505C\u6B62\u63D0\u793A',\n                        upload: '\u4E0A\u4F20\u63D0\u793A',\n                        listUpload: '\u53C2\u8003\u63D0\u793A',\n                    }}\n                />\n            ";
+          _mount18 = mount(Demo), instance = _mount18[0], element = _mount18[1];
+          sendBtn = element.querySelector('.k-sender-send-btn');
+          expect(sendBtn.getAttribute('title')).to.eql(null);
+          dispatchEvent(sendBtn, 'mouseenter');
+          _context38.next = 8;
+          return wait(0);
+        case 8:
+          expect(getElement('.k-tooltip-content').textContent).to.contain('发送提示');
+          dispatchEvent(sendBtn, 'mouseleave');
+          _context38.next = 12;
+          return wait(600);
+        case 12:
+          instance.set('generating', true);
+          _context38.next = 15;
           return wait();
-        case 13:
-          expect(clicked).to.eql(1);
-        case 14:
+        case 15:
+          stopBtn = element.querySelector('.k-sender-send-btn');
+          dispatchEvent(stopBtn, 'mouseenter');
+          _context38.next = 19;
+          return wait(0);
+        case 19:
+          expect(getElement('.k-tooltip-content').textContent).to.contain('停止提示');
+          dispatchEvent(stopBtn, 'mouseleave');
+          _context38.next = 23;
+          return wait(600);
+        case 23:
+          listUpload = element.querySelector('.k-sender-list-upload');
+          expect(listUpload.getAttribute('title')).to.eql(null);
+          dispatchEvent(listUpload, 'mouseenter');
+          _context38.next = 28;
+          return wait(0);
+        case 28:
+          expect(getElement('.k-tooltip-content').textContent).to.contain('参考提示');
+        case 29:
         case "end":
-          return _context39.stop();
+          return _context38.stop();
       }
     }, _callee18);
   })));
-  it('should let configure start from the left edge in image mode', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee19() {
-    var _context41;
-    var Demo, _mount19, element, toolbar, middle;
-    return _regeneratorRuntime.wrap(function _callee19$(_context42) {
-      while (1) switch (_context42.prev = _context42.next) {
+  it('should disable default button tooltip by false value', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee19() {
+    var Demo, _mount19, element, sendBtn, uploadBtn;
+    return _regeneratorRuntime.wrap(function _callee19$(_context40) {
+      while (1) switch (_context40.prev = _context40.next) {
         case 0:
           Demo = /*#__PURE__*/function (_Component19) {
             _inheritsLoose(Demo, _Component19);
             function Demo() {
-              var _context40;
+              var _context39;
               var _this19;
               for (var _len19 = arguments.length, args = new Array(_len19), _key19 = 0; _key19 < _len19; _key19++) {
                 args[_key19] = arguments[_key19];
               }
-              _this19 = _Component19.call.apply(_Component19, _concatInstanceProperty(_context40 = [this]).call(_context40, args)) || this;
+              _this19 = _Component19.call.apply(_Component19, _concatInstanceProperty(_context39 = [this]).call(_context39, args)) || this;
               _this19.Sender = Sender;
               return _this19;
             }
             return Demo;
           }(Component);
-          Demo.template = "\n                const { Sender } = this;\n                <div>\n                    <Sender type=\"image\">\n                        <b:configure>\n                            <div class=\"image-tools\">\u914D\u7F6E\u9879</div>\n                        </b:configure>\n                    </Sender>\n                </div>\n            ";
+          Demo.template = "\n                const { Sender } = this;\n                <Sender\n                    value=\"hello\"\n                    buttonTooltip={{send: false, upload: false}}\n                />\n            ";
           _mount19 = mount(Demo), element = _mount19[1];
-          toolbar = element.querySelector('.k-sender-toolbar');
-          middle = element.querySelector('.k-sender-toolbar-middle');
-          expect(element.querySelector('.k-sender-toolbar-left')).to.eql(null);
-          expect(toolbar.firstElementChild).to.eql(middle);
-          expect(_trimInstanceProperty(_context41 = middle.querySelector('.image-tools').textContent).call(_context41)).to.eql('配置项');
-        case 8:
+          sendBtn = element.querySelector('.k-sender-send-btn');
+          uploadBtn = element.querySelector('.k-sender-attach-btn');
+          expect(sendBtn.getAttribute('title')).to.eql(null);
+          expect(uploadBtn.getAttribute('title')).to.eql(null);
+          expect(element.querySelector('.k-sender-send-tooltip')).to.eql(null);
+          expect(element.querySelector('.k-sender-upload-tooltip')).to.eql(null);
+          expect(sendBtn.getAttribute('aria-label')).to.eql('发送');
+          expect(uploadBtn.getAttribute('aria-label')).to.eql('上传附件');
+        case 11:
         case "end":
-          return _context42.stop();
+          return _context40.stop();
       }
     }, _callee19);
   })));
-  it('should hide + box when reaching uploadProps.limit in image mode', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee20() {
-    var Demo, _mount20, element;
-    return _regeneratorRuntime.wrap(function _callee20$(_context44) {
-      while (1) switch (_context44.prev = _context44.next) {
+  it('should render beforeInput inside shell and configure inside toolbar middle', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee20() {
+    var Demo, _mount20, element, top, tools, shell, middle, left, right, toolbar, children;
+    return _regeneratorRuntime.wrap(function _callee20$(_context42) {
+      while (1) switch (_context42.prev = _context42.next) {
         case 0:
           Demo = /*#__PURE__*/function (_Component20) {
             _inheritsLoose(Demo, _Component20);
             function Demo() {
-              var _context43;
+              var _context41;
               var _this20;
               for (var _len20 = arguments.length, args = new Array(_len20), _key20 = 0; _key20 < _len20; _key20++) {
                 args[_key20] = arguments[_key20];
               }
-              _this20 = _Component20.call.apply(_Component20, _concatInstanceProperty(_context43 = [this]).call(_context43, args)) || this;
+              _this20 = _Component20.call.apply(_Component20, _concatInstanceProperty(_context41 = [this]).call(_context41, args)) || this;
               _this20.Sender = Sender;
               return _this20;
             }
             return Demo;
           }(Component);
-          Demo.template = "\n                const { Sender } = this;\n                <div>\n                    <Sender type=\"image\"\n                        uploadProps={{limit: 1}}\n                        attachments={[{key: 'a', uid: 'a', name: 'p.png', type: 'image/png', src: ''}]}\n                    />\n                </div>\n            ";
+          Demo.template = "\n                const { Sender } = this;\n                <Sender>\n                    <b:beforeInput>\n                        <div class=\"top-suggest\">\u63A8\u8350</div>\n                    </b:beforeInput>\n                    <b:configure>\n                        <div class=\"bottom-tools\">\u5DE5\u5177</div>\n                    </b:configure>\n                </Sender>\n            ";
           _mount20 = mount(Demo), element = _mount20[1];
-          expect(element.querySelector('.k-sender-image-add')).to.eql(null);
-          // 文件卡片仍然渲染
-          expect(element.querySelector('.k-file-card')).not.to.eql(null);
-        case 5:
+          top = element.querySelector('.top-suggest');
+          tools = element.querySelector('.bottom-tools');
+          expect(top).not.to.eql(null);
+          expect(tools).not.to.eql(null);
+          // beforeInput 包装容器在 shell 内
+          shell = element.querySelector('.k-sender-shell');
+          expect(shell.contains(top)).to.eql(true);
+          // configure 落在 toolbar 中间
+          middle = element.querySelector('.k-sender-toolbar-middle');
+          expect(middle).not.to.eql(null);
+          expect(middle.contains(tools)).to.eql(true);
+          // configure 处于附件按钮和发送按钮之间
+          left = element.querySelector('.k-sender-toolbar-left');
+          right = element.querySelector('.k-sender-toolbar-right');
+          toolbar = element.querySelector('.k-sender-toolbar');
+          children = _Array$from(toolbar.children);
+          expect(children.indexOf(left)).to.be.lessThan(children.indexOf(middle));
+          expect(children.indexOf(middle)).to.be.lessThan(children.indexOf(right));
+        case 18:
         case "end":
-          return _context44.stop();
+          return _context42.stop();
       }
     }, _callee20);
   })));
-  it('should render text-mode attachments uniformly as file cards', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee21() {
-    var Demo, _mount21, element;
-    return _regeneratorRuntime.wrap(function _callee21$(_context46) {
-      while (1) switch (_context46.prev = _context46.next) {
+  it('should render prefix inside input area before textarea', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee21() {
+    var Demo, _mount21, element, inputArea, prefix, customPrefix, textarea, children;
+    return _regeneratorRuntime.wrap(function _callee21$(_context44) {
+      while (1) switch (_context44.prev = _context44.next) {
         case 0:
           Demo = /*#__PURE__*/function (_Component21) {
             _inheritsLoose(Demo, _Component21);
             function Demo() {
-              var _context45;
+              var _context43;
               var _this21;
               for (var _len21 = arguments.length, args = new Array(_len21), _key21 = 0; _key21 < _len21; _key21++) {
                 args[_key21] = arguments[_key21];
               }
-              _this21 = _Component21.call.apply(_Component21, _concatInstanceProperty(_context45 = [this]).call(_context45, args)) || this;
+              _this21 = _Component21.call.apply(_Component21, _concatInstanceProperty(_context43 = [this]).call(_context43, args)) || this;
               _this21.Sender = Sender;
               return _this21;
             }
             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            ";
-          _mount21 = mount(Demo), element = _mount21[1]; // 在 text 模式下，图片附件也应当以「文件卡」形式呈现，而不是图片缩略图
-          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                <Sender>\n                    <b:prefix>\n                        <span class=\"custom-prefix\">AI</span>\n                    </b:prefix>\n                </Sender>\n            ";
+          _mount21 = mount(Demo), element = _mount21[1];
+          inputArea = element.querySelector('.k-sender-input-area');
+          prefix = element.querySelector('.k-sender-prefix');
+          customPrefix = element.querySelector('.custom-prefix');
+          textarea = element.querySelector('.k-sender-input');
+          children = _Array$from(inputArea.children);
+          expect(prefix).not.to.eql(null);
+          expect(prefix.contains(customPrefix)).to.eql(true);
+          expect(children.indexOf(prefix)).to.be.lessThan(children.indexOf(textarea));
+        case 11:
         case "end":
-          return _context46.stop();
+          return _context44.stop();
       }
     }, _callee21);
   })));
-  it('should keep image media cards (square) in image mode', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee22() {
-    var Demo, _mount22, element;
-    return _regeneratorRuntime.wrap(function _callee22$(_context48) {
-      while (1) switch (_context48.prev = _context48.next) {
+  it('should render header above shell and footer below shell', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee22() {
+    var _context46;
+    var Demo, _mount22, element, header, footer, shell;
+    return _regeneratorRuntime.wrap(function _callee22$(_context47) {
+      while (1) switch (_context47.prev = _context47.next) {
         case 0:
           Demo = /*#__PURE__*/function (_Component22) {
             _inheritsLoose(Demo, _Component22);
             function Demo() {
-              var _context47;
+              var _context45;
               var _this22;
               for (var _len22 = arguments.length, args = new Array(_len22), _key22 = 0; _key22 < _len22; _key22++) {
                 args[_key22] = arguments[_key22];
               }
-              _this22 = _Component22.call.apply(_Component22, _concatInstanceProperty(_context47 = [this]).call(_context47, args)) || this;
+              _this22 = _Component22.call.apply(_Component22, _concatInstanceProperty(_context45 = [this]).call(_context45, args)) || this;
               _this22.Sender = Sender;
               return _this22;
             }
             return Demo;
           }(Component);
-          Demo.template = "\n                const { Sender } = this;\n                <div>\n                    <Sender type=\"image\" attachments={[\n                        {key: 'a', uid: 'a', name: 'pic.png', type: 'image/png', src: 'data:image/png;base64,AAAA'},\n                    ]} />\n                </div>\n            ";
-          _mount22 = mount(Demo), element = _mount22[1]; // 图片模式下保留 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                    <b:header>\n                        <button class=\"new-chat-btn\">\u5F00\u542F\u65B0\u5BF9\u8BDD</button>\n                    </b:header>\n                    <b:footer>\n                        <div class=\"sender-disclaimer\">AI\u751F\u6210\uFF0C\u4EC5\u4F9B\u53C2\u8003\u3002</div>\n                    </b:footer>\n                </Sender>\n            ";
+          _mount22 = mount(Demo), element = _mount22[1];
+          header = element.querySelector('.k-sender-header');
+          footer = element.querySelector('.k-sender-footer');
+          shell = element.querySelector('.k-sender-shell');
+          expect(header).not.to.eql(null);
+          expect(footer).not.to.eql(null);
+          expect(header.querySelector('.new-chat-btn')).not.to.eql(null);
+          expect(_trimInstanceProperty(_context46 = footer.querySelector('.sender-disclaimer').textContent).call(_context46)).to.eql('AI生成，仅供参考。');
+          expect(shell.contains(header)).to.eql(false);
+          expect(shell.contains(footer)).to.eql(false);
+          expect(_Array$from(element.children)).to.eql([header, shell, footer]);
+        case 13:
         case "end":
-          return _context48.stop();
+          return _context47.stop();
       }
     }, _callee22);
   })));
-  it('should infer media type from name in image mode when attachment type is generic mime', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee23() {
+  // 布局插槽为空时，不保留 header/footer/beforeInput/configure/uploadButton 的空壳。
+  it('should not render wrappers for empty layout slots', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee23() {
     var Demo, _mount23, element;
-    return _regeneratorRuntime.wrap(function _callee23$(_context50) {
-      while (1) switch (_context50.prev = _context50.next) {
+    return _regeneratorRuntime.wrap(function _callee23$(_context49) {
+      while (1) switch (_context49.prev = _context49.next) {
         case 0:
           Demo = /*#__PURE__*/function (_Component23) {
             _inheritsLoose(Demo, _Component23);
             function Demo() {
-              var _context49;
+              var _context48;
               var _this23;
               for (var _len23 = arguments.length, args = new Array(_len23), _key23 = 0; _key23 < _len23; _key23++) {
                 args[_key23] = arguments[_key23];
               }
-              _this23 = _Component23.call.apply(_Component23, _concatInstanceProperty(_context49 = [this]).call(_context49, args)) || this;
+              _this23 = _Component23.call.apply(_Component23, _concatInstanceProperty(_context48 = [this]).call(_context48, args)) || this;
               _this23.Sender = Sender;
               return _this23;
             }
             return Demo;
           }(Component);
-          Demo.template = "\n                const { Sender } = this;\n                <div>\n                    <Sender type=\"image\" attachments={[\n                        {key: 'a', uid: 'a', name: 'pic.png', type: 'application/octet-stream', src: 'blob:mock'},\n                    ]} />\n                </div>\n            ";
+          Demo.template = "\n                const { Sender } = this;\n                <div>\n                    <Sender uploadButton=\"none\">\n                        <b:header>\n                            <span v-if={false} class=\"empty-header\">header</span>\n                        </b:header>\n                        <b:beforeInput>\n                            <span v-if={false} class=\"empty-before-input\">before</span>\n                        </b:beforeInput>\n                        <b:prefix>\n                            <span v-if={false} class=\"empty-prefix\">prefix</span>\n                        </b:prefix>\n                        <b:uploadButton args=\"scope\">\n                            <button v-if={false} class=\"empty-upload-button\" type=\"button\">upload</button>\n                        </b:uploadButton>\n                        <b:configure>\n                            <span v-if={false} class=\"empty-configure\">configure</span>\n                        </b:configure>\n                        <b:footer>\n                            <span v-if={false} class=\"empty-footer\">footer</span>\n                        </b:footer>\n                    </Sender>\n                </div>\n            ";
           _mount23 = mount(Demo), element = _mount23[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:
+          expect(element.querySelector('.k-sender-header')).to.eql(null);
+          expect(element.querySelector('.k-sender-before-input')).to.eql(null);
+          expect(element.querySelector('.k-sender-prefix')).to.eql(null);
+          expect(element.querySelector('.k-sender-toolbar-left')).to.eql(null);
+          expect(element.querySelector('.k-sender-toolbar-middle')).to.eql(null);
+          expect(element.querySelector('.k-sender-footer')).to.eql(null);
+          expect(element.querySelector('.k-sender-toolbar-right')).not.to.eql(null);
+        case 10:
         case "end":
-          return _context50.stop();
+          return _context49.stop();
       }
     }, _callee23);
   })));
-  it('should support directory selection and preserve relative path metadata', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee24() {
-    var lastAttachments, Demo, _mount24, element, input, file;
-    return _regeneratorRuntime.wrap(function _callee24$(_context52) {
-      while (1) switch (_context52.prev = _context52.next) {
+  it('should render default upload button in toolbar by default', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee24() {
+    var Demo, _mount24, element;
+    return _regeneratorRuntime.wrap(function _callee24$(_context51) {
+      while (1) switch (_context51.prev = _context51.next) {
         case 0:
-          lastAttachments = [];
           Demo = /*#__PURE__*/function (_Component24) {
             _inheritsLoose(Demo, _Component24);
             function Demo() {
-              var _context51;
+              var _context50;
               var _this24;
               for (var _len24 = arguments.length, args = new Array(_len24), _key24 = 0; _key24 < _len24; _key24++) {
                 args[_key24] = arguments[_key24];
               }
-              _this24 = _Component24.call.apply(_Component24, _concatInstanceProperty(_context51 = [this]).call(_context51, args)) || this;
+              _this24 = _Component24.call.apply(_Component24, _concatInstanceProperty(_context50 = [this]).call(_context50, args)) || this;
               _this24.Sender = Sender;
-              _this24.onChange = function (items) {
+              return _this24;
+            }
+            return Demo;
+          }(Component);
+          Demo.template = "const { Sender } = this; <div><Sender /></div>";
+          _mount24 = mount(Demo), element = _mount24[1];
+          expect(element.querySelector('.k-sender-toolbar-left')).not.to.eql(null);
+          expect(element.querySelector('.k-sender-attach-btn')).not.to.eql(null);
+          expect(element.querySelector('.k-sender-list-upload')).to.eql(null);
+        case 6:
+        case "end":
+          return _context51.stop();
+      }
+    }, _callee24);
+  })));
+  it('should show dashed upload button in attachment list', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee25() {
+    var _context53;
+    var Demo, _mount25, element, addBox, clicked, fileInput;
+    return _regeneratorRuntime.wrap(function _callee25$(_context54) {
+      while (1) switch (_context54.prev = _context54.next) {
+        case 0:
+          Demo = /*#__PURE__*/function (_Component25) {
+            _inheritsLoose(Demo, _Component25);
+            function Demo() {
+              var _context52;
+              var _this25;
+              for (var _len25 = arguments.length, args = new Array(_len25), _key25 = 0; _key25 < _len25; _key25++) {
+                args[_key25] = arguments[_key25];
+              }
+              _this25 = _Component25.call.apply(_Component25, _concatInstanceProperty(_context52 = [this]).call(_context52, args)) || this;
+              _this25.Sender = Sender;
+              return _this25;
+            }
+            return Demo;
+          }(Component);
+          Demo.template = "const { Sender } = this; <div><Sender uploadButton=\"list\" /></div>";
+          _mount25 = mount(Demo), element = _mount25[1];
+          expect(element.querySelector('.k-sender-attach-btn')).to.eql(null);
+          // 列表入口即使没有附件也要展示 FileCardList，用来承载前置 + 框
+          expect(element.querySelector('.k-sender-attachments')).not.to.eql(null);
+          addBox = element.querySelector('.k-sender-list-upload');
+          expect(addBox).not.to.eql(null);
+          expect(addBox.getAttribute('title')).to.eql('参考内容');
+          expect(addBox.getAttribute('aria-label')).to.eql('参考内容');
+          expect(_trimInstanceProperty(_context53 = addBox.querySelector('.k-sender-list-upload-text').textContent).call(_context53)).to.eql('参考内容');
+          expect(addBox.querySelector('.k-icon-add-bold')).not.to.eql(null);
+          // 点击 + 框会触发 file input click
+          clicked = 0;
+          fileInput = element.querySelector('.k-sender-file-input');
+          fileInput.addEventListener('click', function (e) {
+            clicked++;
+            e.preventDefault();
+          });
+          addBox.click();
+          _context54.next = 17;
+          return wait();
+        case 17:
+          expect(clicked).to.eql(1);
+        case 18:
+        case "end":
+          return _context54.stop();
+      }
+    }, _callee25);
+  })));
+  it('should let configure start from the left edge when upload button is not in toolbar', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee26() {
+    var _context56;
+    var Demo, _mount26, element, toolbar, middle;
+    return _regeneratorRuntime.wrap(function _callee26$(_context57) {
+      while (1) switch (_context57.prev = _context57.next) {
+        case 0:
+          Demo = /*#__PURE__*/function (_Component26) {
+            _inheritsLoose(Demo, _Component26);
+            function Demo() {
+              var _context55;
+              var _this26;
+              for (var _len26 = arguments.length, args = new Array(_len26), _key26 = 0; _key26 < _len26; _key26++) {
+                args[_key26] = arguments[_key26];
+              }
+              _this26 = _Component26.call.apply(_Component26, _concatInstanceProperty(_context55 = [this]).call(_context55, args)) || this;
+              _this26.Sender = Sender;
+              return _this26;
+            }
+            return Demo;
+          }(Component);
+          Demo.template = "\n                const { Sender } = this;\n                <div>\n                    <Sender uploadButton=\"list\">\n                        <b:configure>\n                            <div class=\"sender-tools\">\u914D\u7F6E\u9879</div>\n                        </b:configure>\n                    </Sender>\n                </div>\n            ";
+          _mount26 = mount(Demo), element = _mount26[1];
+          toolbar = element.querySelector('.k-sender-toolbar');
+          middle = element.querySelector('.k-sender-toolbar-middle');
+          expect(element.querySelector('.k-sender-toolbar-left')).to.eql(null);
+          expect(toolbar.firstElementChild).to.eql(middle);
+          expect(_trimInstanceProperty(_context56 = middle.querySelector('.sender-tools').textContent).call(_context56)).to.eql('配置项');
+        case 8:
+        case "end":
+          return _context57.stop();
+      }
+    }, _callee26);
+  })));
+  it('should hide list upload button when reaching uploadProps.limit', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee27() {
+    var Demo, _mount27, element;
+    return _regeneratorRuntime.wrap(function _callee27$(_context59) {
+      while (1) switch (_context59.prev = _context59.next) {
+        case 0:
+          Demo = /*#__PURE__*/function (_Component27) {
+            _inheritsLoose(Demo, _Component27);
+            function Demo() {
+              var _context58;
+              var _this27;
+              for (var _len27 = arguments.length, args = new Array(_len27), _key27 = 0; _key27 < _len27; _key27++) {
+                args[_key27] = arguments[_key27];
+              }
+              _this27 = _Component27.call.apply(_Component27, _concatInstanceProperty(_context58 = [this]).call(_context58, args)) || this;
+              _this27.Sender = Sender;
+              return _this27;
+            }
+            return Demo;
+          }(Component);
+          Demo.template = "\n                const { Sender } = this;\n                <div>\n                    <Sender uploadButton=\"list\"\n                        uploadProps={{limit: 1}}\n                        attachments={[{key: 'a', uid: 'a', name: 'p.png', type: 'image/png', src: ''}]}\n                    />\n                </div>\n            ";
+          _mount27 = mount(Demo), element = _mount27[1];
+          expect(element.querySelector('.k-sender-list-upload')).to.eql(null);
+          // 文件卡片仍然渲染
+          expect(element.querySelector('.k-file-card')).not.to.eql(null);
+        case 5:
+        case "end":
+          return _context59.stop();
+      }
+    }, _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) {
+        case 0:
+          Demo = /*#__PURE__*/function (_Component28) {
+            _inheritsLoose(Demo, _Component28);
+            function Demo() {
+              var _context60;
+              var _this28;
+              for (var _len28 = arguments.length, args = new Array(_len28), _key28 = 0; _key28 < _len28; _key28++) {
+                args[_key28] = arguments[_key28];
+              }
+              _this28 = _Component28.call.apply(_Component28, _concatInstanceProperty(_context60 = [this]).call(_context60, args)) || this;
+              _this28.Sender = Sender;
+              return _this28;
+            }
+            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            ";
+          _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:
+        case "end":
+          return _context62.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) {
+        case 0:
+          lastAttachments = [];
+          Demo = /*#__PURE__*/function (_Component29) {
+            _inheritsLoose(Demo, _Component29);
+            function Demo() {
+              var _context63;
+              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.Sender = Sender;
+              _this29.file = new File(['hello'], 'hello.txt', {
+                type: 'text/plain'
+              });
+              _this29.onChange = function (items) {
                 lastAttachments = items;
               };
-              return _this24;
+              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            ";
+          _mount29 = mount(Demo), element = _mount29[1];
+          button = element.querySelector('.custom-add-files');
+          button.click();
+          _context64.next = 8;
+          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 "end":
+          return _context64.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) {
+        case 0:
+          Demo = /*#__PURE__*/function (_Component30) {
+            _inheritsLoose(Demo, _Component30);
+            function Demo() {
+              var _context65;
+              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.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            ";
+          _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:
+        case "end":
+          return _context67.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) {
+        case 0:
+          lastAttachments = [];
+          Demo = /*#__PURE__*/function (_Component31) {
+            _inheritsLoose(Demo, _Component31);
+            function Demo() {
+              var _context68;
+              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.Sender = Sender;
+              _this31.senderRef = null;
+              _this31.onChange = function (items) {
+                lastAttachments = items;
+              };
+              return _this31;
+            }
+            Demo.defaults = function defaults() {
+              return {
+                attachments: []
+              };
+            };
+            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;
+          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 _context69.stop();
+      }
+    }, _callee31);
+  })));
+  it('should render card-view attachments uniformly as file cards', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee32() {
+    var Demo, _mount32, element;
+    return _regeneratorRuntime.wrap(function _callee32$(_context71) {
+      while (1) switch (_context71.prev = _context71.next) {
+        case 0:
+          Demo = /*#__PURE__*/function (_Component32) {
+            _inheritsLoose(Demo, _Component32);
+            function Demo() {
+              var _context70;
+              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.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:
+        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;
+    return _regeneratorRuntime.wrap(function _callee33$(_context73) {
+      while (1) switch (_context73.prev = _context73.next) {
+        case 0:
+          Demo = /*#__PURE__*/function (_Component33) {
+            _inheritsLoose(Demo, _Component33);
+            function Demo() {
+              var _context72;
+              var _this33;
+              for (var _len33 = arguments.length, args = new Array(_len33), _key33 = 0; _key33 < _len33; _key33++) {
+                args[_key33] = arguments[_key33];
+              }
+              _this33 = _Component33.call.apply(_Component33, _concatInstanceProperty(_context72 = [this]).call(_context72, args)) || this;
+              _this33.Sender = Sender;
+              return _this33;
+            }
+            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:
+        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;
+    return _regeneratorRuntime.wrap(function _callee34$(_context75) {
+      while (1) switch (_context75.prev = _context75.next) {
+        case 0:
+          Demo = /*#__PURE__*/function (_Component34) {
+            _inheritsLoose(Demo, _Component34);
+            function Demo() {
+              var _context74;
+              var _this34;
+              for (var _len34 = arguments.length, args = new Array(_len34), _key34 = 0; _key34 < _len34; _key34++) {
+                args[_key34] = arguments[_key34];
+              }
+              _this34 = _Component34.call.apply(_Component34, _concatInstanceProperty(_context74 = [this]).call(_context74, args)) || this;
+              _this34.Sender = Sender;
+              return _this34;
+            }
+            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:
+        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() {
+    var Demo, _mount35, element;
+    return _regeneratorRuntime.wrap(function _callee35$(_context77) {
+      while (1) switch (_context77.prev = _context77.next) {
+        case 0:
+          Demo = /*#__PURE__*/function (_Component35) {
+            _inheritsLoose(Demo, _Component35);
+            function Demo() {
+              var _context76;
+              var _this35;
+              for (var _len35 = arguments.length, args = new Array(_len35), _key35 = 0; _key35 < _len35; _key35++) {
+                args[_key35] = arguments[_key35];
+              }
+              _this35 = _Component35.call.apply(_Component35, _concatInstanceProperty(_context76 = [this]).call(_context76, args)) || this;
+              _this35.Sender = Sender;
+              return _this35;
+            }
+            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];
+          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 _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;
+    return _regeneratorRuntime.wrap(function _callee36$(_context79) {
+      while (1) switch (_context79.prev = _context79.next) {
+        case 0:
+          Demo = /*#__PURE__*/function (_Component36) {
+            _inheritsLoose(Demo, _Component36);
+            function Demo() {
+              var _context78;
+              var _this36;
+              for (var _len36 = arguments.length, args = new Array(_len36), _key36 = 0; _key36 < _len36; _key36++) {
+                args[_key36] = arguments[_key36];
+              }
+              _this36 = _Component36.call.apply(_Component36, _concatInstanceProperty(_context78 = [this]).call(_context78, args)) || this;
+              _this36.Sender = Sender;
+              return _this36;
+            }
+            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            ";
+          _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:
+        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;
+    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() {
+              var _context80;
+              var _this37;
+              for (var _len37 = arguments.length, args = new Array(_len37), _key37 = 0; _key37 < _len37; _key37++) {
+                args[_key37] = arguments[_key37];
+              }
+              _this37 = _Component37.call.apply(_Component37, _concatInstanceProperty(_context80 = [this]).call(_context80, args)) || this;
+              _this37.Sender = Sender;
+              _this37.onChange = function (items) {
+                lastAttachments = items;
+              };
+              return _this37;
             }
             Demo.defaults = function defaults() {
               return {
@@ -1068,7 +1672,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            ";
-          _mount24 = mount(Demo), element = _mount24[1];
+          _mount37 = mount(Demo), element = _mount37[1];
           input = element.querySelector('.k-sender-file-input');
           expect(input.getAttribute('directory')).to.eql('');
           expect(input.getAttribute('webkitdirectory')).to.eql('');
@@ -1084,7 +1688,7 @@ describe('Sender', function () {
             configurable: true
           });
           dispatchEvent(input, 'change');
-          _context52.next = 13;
+          _context81.next = 13;
           return wait();
         case 13:
           expect(lastAttachments.length).to.eql(1);
@@ -1092,31 +1696,31 @@ describe('Sender', function () {
           expect(lastAttachments[0].relativePath).to.eql('docs/hello.txt');
         case 16:
         case "end":
-          return _context52.stop();
+          return _context81.stop();
       }
-    }, _callee24);
+    }, _callee37);
   })));
-  it('should support mapAttachment for runtime uploading items', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee25() {
+  it('should support mapAttachment for runtime uploading items', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee38() {
     var _element$querySelecto;
-    var lastAttachments, resolveBeforeUpload, Demo, _mount25, element, input, file;
-    return _regeneratorRuntime.wrap(function _callee25$(_context54) {
-      while (1) switch (_context54.prev = _context54.next) {
+    var lastAttachments, resolveBeforeUpload, Demo, _mount38, element, input, file;
+    return _regeneratorRuntime.wrap(function _callee38$(_context83) {
+      while (1) switch (_context83.prev = _context83.next) {
         case 0:
           lastAttachments = [];
-          Demo = /*#__PURE__*/function (_Component25) {
-            _inheritsLoose(Demo, _Component25);
+          Demo = /*#__PURE__*/function (_Component38) {
+            _inheritsLoose(Demo, _Component38);
             function Demo() {
-              var _context53;
-              var _this25;
-              for (var _len25 = arguments.length, args = new Array(_len25), _key25 = 0; _key25 < _len25; _key25++) {
-                args[_key25] = arguments[_key25];
+              var _context82;
+              var _this38;
+              for (var _len38 = arguments.length, args = new Array(_len38), _key38 = 0; _key38 < _len38; _key38++) {
+                args[_key38] = arguments[_key38];
               }
-              _this25 = _Component25.call.apply(_Component25, _concatInstanceProperty(_context53 = [this]).call(_context53, args)) || this;
-              _this25.Sender = Sender;
-              _this25.onChange = function (items) {
+              _this38 = _Component38.call.apply(_Component38, _concatInstanceProperty(_context82 = [this]).call(_context82, args)) || this;
+              _this38.Sender = Sender;
+              _this38.onChange = function (items) {
                 lastAttachments = items;
               };
-              return _this25;
+              return _this38;
             }
             Demo.defaults = function defaults() {
               return {
@@ -1143,7 +1747,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            ";
-          _mount25 = mount(Demo), element = _mount25[1];
+          _mount38 = mount(Demo), element = _mount38[1];
           input = element.querySelector('.k-sender-file-input');
           file = new File(['hello'], 'hello.txt', {
             type: 'text/plain'
@@ -1153,7 +1757,7 @@ describe('Sender', function () {
             configurable: true
           });
           dispatchEvent(input, 'change');
-          _context54.next = 10;
+          _context83.next = 10;
           return wait();
         case 10:
           expect(lastAttachments.length).to.eql(1);
@@ -1165,30 +1769,30 @@ describe('Sender', function () {
           }
         case 15:
         case "end":
-          return _context54.stop();
+          return _context83.stop();
       }
-    }, _callee25);
+    }, _callee38);
   })));
-  it('should show fullscreen drag mask and add dropped files when dragFile is enabled', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee26() {
-    var lastAttachments, Demo, _mount26, element, file, mask, card, icon, text;
-    return _regeneratorRuntime.wrap(function _callee26$(_context56) {
-      while (1) switch (_context56.prev = _context56.next) {
+  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) {
         case 0:
           lastAttachments = [];
-          Demo = /*#__PURE__*/function (_Component26) {
-            _inheritsLoose(Demo, _Component26);
+          Demo = /*#__PURE__*/function (_Component39) {
+            _inheritsLoose(Demo, _Component39);
             function Demo() {
-              var _context55;
-              var _this26;
-              for (var _len26 = arguments.length, args = new Array(_len26), _key26 = 0; _key26 < _len26; _key26++) {
-                args[_key26] = arguments[_key26];
+              var _context84;
+              var _this39;
+              for (var _len39 = arguments.length, args = new Array(_len39), _key39 = 0; _key39 < _len39; _key39++) {
+                args[_key39] = arguments[_key39];
               }
-              _this26 = _Component26.call.apply(_Component26, _concatInstanceProperty(_context55 = [this]).call(_context55, args)) || this;
-              _this26.Sender = Sender;
-              _this26.onChange = function (items) {
+              _this39 = _Component39.call.apply(_Component39, _concatInstanceProperty(_context84 = [this]).call(_context84, args)) || this;
+              _this39.Sender = Sender;
+              _this39.onChange = function (items) {
                 lastAttachments = items;
               };
-              return _this26;
+              return _this39;
             }
             Demo.defaults = function defaults() {
               return {
@@ -1198,14 +1802,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            ";
-          _mount26 = mount(Demo), element = _mount26[1];
+          _mount39 = mount(Demo), element = _mount39[1];
           file = new File(['hello'], 'hello.txt', {
             type: 'text/plain'
           });
           dispatchEvent(document, 'dragenter', {
             dataTransfer: getDataTransfer([file])
           });
-          _context56.next = 8;
+          _context85.next = 8;
           return wait();
         case 8:
           mask = element.querySelector('.k-sender-drag-mask');
@@ -1222,7 +1826,7 @@ describe('Sender', function () {
           dispatchEvent(document, 'drop', {
             dataTransfer: getDataTransfer([file])
           });
-          _context56.next = 22;
+          _context85.next = 22;
           return wait();
         case 22:
           expect(element.querySelector('.k-sender-drag-mask')).to.eql(null);
@@ -1230,70 +1834,70 @@ describe('Sender', function () {
           expect(lastAttachments[0].name).to.eql('hello.txt');
         case 25:
         case "end":
-          return _context56.stop();
+          return _context85.stop();
       }
-    }, _callee26);
+    }, _callee39);
   })));
-  it('should ignore non-file drags when dragFile is enabled', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee27() {
-    var Demo, _mount27, element;
-    return _regeneratorRuntime.wrap(function _callee27$(_context58) {
-      while (1) switch (_context58.prev = _context58.next) {
+  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) {
         case 0:
-          Demo = /*#__PURE__*/function (_Component27) {
-            _inheritsLoose(Demo, _Component27);
+          Demo = /*#__PURE__*/function (_Component40) {
+            _inheritsLoose(Demo, _Component40);
             function Demo() {
-              var _context57;
-              var _this27;
-              for (var _len27 = arguments.length, args = new Array(_len27), _key27 = 0; _key27 < _len27; _key27++) {
-                args[_key27] = arguments[_key27];
+              var _context86;
+              var _this40;
+              for (var _len40 = arguments.length, args = new Array(_len40), _key40 = 0; _key40 < _len40; _key40++) {
+                args[_key40] = arguments[_key40];
               }
-              _this27 = _Component27.call.apply(_Component27, _concatInstanceProperty(_context57 = [this]).call(_context57, args)) || this;
-              _this27.Sender = Sender;
-              return _this27;
+              _this40 = _Component40.call.apply(_Component40, _concatInstanceProperty(_context86 = [this]).call(_context86, args)) || this;
+              _this40.Sender = Sender;
+              return _this40;
             }
             return Demo;
           }(Component);
           Demo.template = "\n                const { Sender } = this;\n                <Sender dragFile={true} />\n            ";
-          _mount27 = mount(Demo), element = _mount27[1];
+          _mount40 = mount(Demo), element = _mount40[1];
           dispatchEvent(document, 'dragenter', {
             dataTransfer: {
               types: ['text/plain']
             }
           });
-          _context58.next = 6;
+          _context87.next = 6;
           return wait();
         case 6:
           expect(element.querySelector('.k-sender-drag-mask')).to.eql(null);
         case 7:
         case "end":
-          return _context58.stop();
+          return _context87.stop();
       }
-    }, _callee27);
+    }, _callee40);
   })));
-  it('should trigger uploadError for invalid file type on drag drop', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee28() {
-    var errorMessage, lastAttachments, Demo, _mount28, element, file;
-    return _regeneratorRuntime.wrap(function _callee28$(_context60) {
-      while (1) switch (_context60.prev = _context60.next) {
+  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) {
         case 0:
           errorMessage = '';
           lastAttachments = [];
-          Demo = /*#__PURE__*/function (_Component28) {
-            _inheritsLoose(Demo, _Component28);
+          Demo = /*#__PURE__*/function (_Component41) {
+            _inheritsLoose(Demo, _Component41);
             function Demo() {
-              var _context59;
-              var _this28;
-              for (var _len28 = arguments.length, args = new Array(_len28), _key28 = 0; _key28 < _len28; _key28++) {
-                args[_key28] = arguments[_key28];
+              var _context88;
+              var _this41;
+              for (var _len41 = arguments.length, args = new Array(_len41), _key41 = 0; _key41 < _len41; _key41++) {
+                args[_key41] = arguments[_key41];
               }
-              _this28 = _Component28.call.apply(_Component28, _concatInstanceProperty(_context59 = [this]).call(_context59, args)) || this;
-              _this28.Sender = Sender;
-              _this28.onChange = function (items) {
+              _this41 = _Component41.call.apply(_Component41, _concatInstanceProperty(_context88 = [this]).call(_context88, args)) || this;
+              _this41.Sender = Sender;
+              _this41.onChange = function (items) {
                 lastAttachments = items;
               };
-              _this28.onUploadError = function (error) {
+              _this41.onUploadError = function (error) {
                 errorMessage = error.message;
               };
-              return _this28;
+              return _this41;
             }
             Demo.defaults = function defaults() {
               return {
@@ -1303,21 +1907,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            ";
-          _mount28 = mount(Demo), element = _mount28[1];
+          _mount41 = mount(Demo), element = _mount41[1];
           file = new File(['hello'], 'hello.txt', {
             type: 'text/plain'
           });
           dispatchEvent(document, 'dragenter', {
             dataTransfer: getDataTransfer([file])
           });
-          _context60.next = 9;
+          _context89.next = 9;
           return wait();
         case 9:
           expect(element.querySelector('.k-sender-drag-mask')).not.to.eql(null);
           dispatchEvent(document, 'drop', {
             dataTransfer: getDataTransfer([file])
           });
-          _context60.next = 13;
+          _context89.next = 13;
           return wait();
         case 13:
           expect(errorMessage).to.eql('"hello.txt" 文件类型不合法');
@@ -1325,30 +1929,30 @@ describe('Sender', function () {
           expect(element.querySelector('.k-sender-drag-mask')).to.eql(null);
         case 16:
         case "end":
-          return _context60.stop();
+          return _context89.stop();
       }
-    }, _callee28);
+    }, _callee41);
   })));
-  it('should flatten dragged directory files when uploadProps.directory is enabled', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee29() {
-    var lastAttachments, Demo, _mount29, element, noteFile, imageFile, docsDir;
-    return _regeneratorRuntime.wrap(function _callee29$(_context62) {
-      while (1) switch (_context62.prev = _context62.next) {
+  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) {
         case 0:
           lastAttachments = [];
-          Demo = /*#__PURE__*/function (_Component29) {
-            _inheritsLoose(Demo, _Component29);
+          Demo = /*#__PURE__*/function (_Component42) {
+            _inheritsLoose(Demo, _Component42);
             function Demo() {
-              var _context61;
-              var _this29;
-              for (var _len29 = arguments.length, args = new Array(_len29), _key29 = 0; _key29 < _len29; _key29++) {
-                args[_key29] = arguments[_key29];
+              var _context90;
+              var _this42;
+              for (var _len42 = arguments.length, args = new Array(_len42), _key42 = 0; _key42 < _len42; _key42++) {
+                args[_key42] = arguments[_key42];
               }
-              _this29 = _Component29.call.apply(_Component29, _concatInstanceProperty(_context61 = [this]).call(_context61, args)) || this;
-              _this29.Sender = Sender;
-              _this29.onChange = function (items) {
+              _this42 = _Component42.call.apply(_Component42, _concatInstanceProperty(_context90 = [this]).call(_context90, args)) || this;
+              _this42.Sender = Sender;
+              _this42.onChange = function (items) {
                 lastAttachments = items;
               };
-              return _this29;
+              return _this42;
             }
             Demo.defaults = function defaults() {
               return {
@@ -1358,7 +1962,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            ";
-          _mount29 = mount(Demo), element = _mount29[1];
+          _mount42 = mount(Demo), element = _mount42[1];
           noteFile = new File(['note'], 'note.txt', {
             type: 'text/plain'
           });
@@ -1369,14 +1973,14 @@ describe('Sender', function () {
           dispatchEvent(document, 'dragenter', {
             dataTransfer: getDataTransfer([noteFile])
           });
-          _context62.next = 10;
+          _context91.next = 10;
           return wait();
         case 10:
           expect(element.querySelector('.k-sender-drag-mask')).not.to.eql(null);
           dispatchEvent(document, 'drop', {
             dataTransfer: getDataTransferWithEntries([docsDir])
           });
-          _context62.next = 14;
+          _context91.next = 14;
           return wait(20);
         case 14:
           expect(lastAttachments.length).to.eql(2);
@@ -1389,34 +1993,34 @@ describe('Sender', function () {
           expect(element.querySelector('.k-sender-drag-mask')).to.eql(null);
         case 18:
         case "end":
-          return _context62.stop();
+          return _context91.stop();
       }
-    }, _callee29);
+    }, _callee42);
   })));
-  it('should still validate flattened directory files on drag drop', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee30() {
-    var errorMessage, lastAttachments, Demo, _mount30, element, file, docsDir;
-    return _regeneratorRuntime.wrap(function _callee30$(_context64) {
-      while (1) switch (_context64.prev = _context64.next) {
+  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) {
         case 0:
           errorMessage = '';
           lastAttachments = [];
-          Demo = /*#__PURE__*/function (_Component30) {
-            _inheritsLoose(Demo, _Component30);
+          Demo = /*#__PURE__*/function (_Component43) {
+            _inheritsLoose(Demo, _Component43);
             function Demo() {
-              var _context63;
-              var _this30;
-              for (var _len30 = arguments.length, args = new Array(_len30), _key30 = 0; _key30 < _len30; _key30++) {
-                args[_key30] = arguments[_key30];
+              var _context92;
+              var _this43;
+              for (var _len43 = arguments.length, args = new Array(_len43), _key43 = 0; _key43 < _len43; _key43++) {
+                args[_key43] = arguments[_key43];
               }
-              _this30 = _Component30.call.apply(_Component30, _concatInstanceProperty(_context63 = [this]).call(_context63, args)) || this;
-              _this30.Sender = Sender;
-              _this30.onChange = function (items) {
+              _this43 = _Component43.call.apply(_Component43, _concatInstanceProperty(_context92 = [this]).call(_context92, args)) || this;
+              _this43.Sender = Sender;
+              _this43.onChange = function (items) {
                 lastAttachments = items;
               };
-              _this30.onUploadError = function (error) {
+              _this43.onUploadError = function (error) {
                 errorMessage = error.message;
               };
-              return _this30;
+              return _this43;
             }
             Demo.defaults = function defaults() {
               return {
@@ -1426,7 +2030,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            ";
-          _mount30 = mount(Demo), element = _mount30[1];
+          _mount43 = mount(Demo), element = _mount43[1];
           file = new File(['hello'], 'hello.txt', {
             type: 'text/plain'
           });
@@ -1434,14 +2038,14 @@ describe('Sender', function () {
           dispatchEvent(document, 'dragenter', {
             dataTransfer: getDataTransfer([file])
           });
-          _context64.next = 10;
+          _context93.next = 10;
           return wait();
         case 10:
           expect(element.querySelector('.k-sender-drag-mask')).not.to.eql(null);
           dispatchEvent(document, 'drop', {
             dataTransfer: getDataTransferWithEntries([docsDir])
           });
-          _context64.next = 14;
+          _context93.next = 14;
           return wait(20);
         case 14:
           expect(errorMessage).to.eql('"hello.txt" 文件类型不合法');
@@ -1449,30 +2053,30 @@ describe('Sender', function () {
           expect(element.querySelector('.k-sender-drag-mask')).to.eql(null);
         case 17:
         case "end":
-          return _context64.stop();
+          return _context93.stop();
       }
-    }, _callee30);
+    }, _callee43);
   })));
-  it('should add pasted files when pasteFile is enabled', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee31() {
-    var lastAttachments, Demo, _mount31, element, textarea, file;
-    return _regeneratorRuntime.wrap(function _callee31$(_context66) {
-      while (1) switch (_context66.prev = _context66.next) {
+  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) {
         case 0:
           lastAttachments = [];
-          Demo = /*#__PURE__*/function (_Component31) {
-            _inheritsLoose(Demo, _Component31);
+          Demo = /*#__PURE__*/function (_Component44) {
+            _inheritsLoose(Demo, _Component44);
             function Demo() {
-              var _context65;
-              var _this31;
-              for (var _len31 = arguments.length, args = new Array(_len31), _key31 = 0; _key31 < _len31; _key31++) {
-                args[_key31] = arguments[_key31];
+              var _context94;
+              var _this44;
+              for (var _len44 = arguments.length, args = new Array(_len44), _key44 = 0; _key44 < _len44; _key44++) {
+                args[_key44] = arguments[_key44];
               }
-              _this31 = _Component31.call.apply(_Component31, _concatInstanceProperty(_context65 = [this]).call(_context65, args)) || this;
-              _this31.Sender = Sender;
-              _this31.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 _this31;
+              return _this44;
             }
             Demo.defaults = function defaults() {
               return {
@@ -1482,7 +2086,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            ";
-          _mount31 = mount(Demo), element = _mount31[1];
+          _mount44 = mount(Demo), element = _mount44[1];
           textarea = element.querySelector('.k-sender-input');
           file = new File(['image'], 'cover.png', {
             type: 'image/png'
@@ -1490,41 +2094,41 @@ describe('Sender', function () {
           dispatchEvent(textarea, 'paste', {
             clipboardData: getClipboardData([file])
           });
-          _context66.next = 9;
+          _context95.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 _context66.stop();
+          return _context95.stop();
       }
-    }, _callee31);
+    }, _callee44);
   })));
-  it('should trigger uploadError for invalid file type on paste', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee32() {
-    var errorMessage, lastAttachments, Demo, _mount32, element, textarea, file;
-    return _regeneratorRuntime.wrap(function _callee32$(_context68) {
-      while (1) switch (_context68.prev = _context68.next) {
+  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) {
         case 0:
           errorMessage = '';
           lastAttachments = [];
-          Demo = /*#__PURE__*/function (_Component32) {
-            _inheritsLoose(Demo, _Component32);
+          Demo = /*#__PURE__*/function (_Component45) {
+            _inheritsLoose(Demo, _Component45);
             function Demo() {
-              var _context67;
-              var _this32;
-              for (var _len32 = arguments.length, args = new Array(_len32), _key32 = 0; _key32 < _len32; _key32++) {
-                args[_key32] = arguments[_key32];
+              var _context96;
+              var _this45;
+              for (var _len45 = arguments.length, args = new Array(_len45), _key45 = 0; _key45 < _len45; _key45++) {
+                args[_key45] = arguments[_key45];
               }
-              _this32 = _Component32.call.apply(_Component32, _concatInstanceProperty(_context67 = [this]).call(_context67, args)) || this;
-              _this32.Sender = Sender;
-              _this32.onChange = function (items) {
+              _this45 = _Component45.call.apply(_Component45, _concatInstanceProperty(_context96 = [this]).call(_context96, args)) || this;
+              _this45.Sender = Sender;
+              _this45.onChange = function (items) {
                 lastAttachments = items;
               };
-              _this32.onUploadError = function (error) {
+              _this45.onUploadError = function (error) {
                 errorMessage = error.message;
               };
-              return _this32;
+              return _this45;
             }
             Demo.defaults = function defaults() {
               return {
@@ -1534,7 +2138,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            ";
-          _mount32 = mount(Demo), element = _mount32[1];
+          _mount45 = mount(Demo), element = _mount45[1];
           textarea = element.querySelector('.k-sender-input');
           file = new File(['hello'], 'hello.txt', {
             type: 'text/plain'
@@ -1542,38 +2146,38 @@ describe('Sender', function () {
           dispatchEvent(textarea, 'paste', {
             clipboardData: getClipboardData([file])
           });
-          _context68.next = 10;
+          _context97.next = 10;
           return wait();
         case 10:
           expect(errorMessage).to.eql('"hello.txt" 文件类型不合法');
           expect(lastAttachments.length).to.eql(0);
         case 12:
         case "end":
-          return _context68.stop();
+          return _context97.stop();
       }
-    }, _callee32);
+    }, _callee45);
   })));
-  it('should keep native text paste when pasteFile is disabled', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee33() {
-    var Demo, _mount33, element, textarea, file, event;
-    return _regeneratorRuntime.wrap(function _callee33$(_context70) {
-      while (1) switch (_context70.prev = _context70.next) {
+  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) {
         case 0:
-          Demo = /*#__PURE__*/function (_Component33) {
-            _inheritsLoose(Demo, _Component33);
+          Demo = /*#__PURE__*/function (_Component46) {
+            _inheritsLoose(Demo, _Component46);
             function Demo() {
-              var _context69;
-              var _this33;
-              for (var _len33 = arguments.length, args = new Array(_len33), _key33 = 0; _key33 < _len33; _key33++) {
-                args[_key33] = arguments[_key33];
+              var _context98;
+              var _this46;
+              for (var _len46 = arguments.length, args = new Array(_len46), _key46 = 0; _key46 < _len46; _key46++) {
+                args[_key46] = arguments[_key46];
               }
-              _this33 = _Component33.call.apply(_Component33, _concatInstanceProperty(_context69 = [this]).call(_context69, args)) || this;
-              _this33.Sender = Sender;
-              return _this33;
+              _this46 = _Component46.call.apply(_Component46, _concatInstanceProperty(_context98 = [this]).call(_context98, args)) || this;
+              _this46.Sender = Sender;
+              return _this46;
             }
             return Demo;
           }(Component);
           Demo.template = "\n                const { Sender } = this;\n                <Sender />\n            ";
-          _mount33 = mount(Demo), element = _mount33[1];
+          _mount46 = mount(Demo), element = _mount46[1];
           textarea = element.querySelector('.k-sender-input');
           file = new File(['image'], 'cover.png', {
             type: 'image/png'
@@ -1584,14 +2188,14 @@ describe('Sender', function () {
             clipboardData: getClipboardData([file])
           });
           textarea.dispatchEvent(event);
-          _context70.next = 11;
+          _context99.next = 11;
           return wait();
         case 11:
           expect(event.defaultPrevented).to.eql(false);
         case 12:
         case "end":
-          return _context70.stop();
+          return _context99.stop();
       }
-    }, _callee33);
+    }, _callee46);
   })));
 });