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

package/components/sender/index.spec.js

@@ -0,0 +1,1597 @@
+import _inheritsLoose from "@babel/runtime-corejs3/helpers/inheritsLoose";
+import _asyncToGenerator from "@babel/runtime-corejs3/helpers/asyncToGenerator";
+import _regeneratorRuntime from "@babel/runtime-corejs3/regenerator";
+import _mapInstanceProperty from "@babel/runtime-corejs3/core-js/instance/map";
+import _concatInstanceProperty from "@babel/runtime-corejs3/core-js/instance/concat";
+import _URL from "@babel/runtime-corejs3/core-js/url";
+import _trimInstanceProperty from "@babel/runtime-corejs3/core-js/instance/trim";
+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 { Sender } from '.';
+function getDataTransfer(files) {
+  var dataTransfer = new DataTransfer();
+  files.forEach(function (file) {
+    return dataTransfer.items.add(file);
+  });
+  return dataTransfer;
+}
+function getClipboardData(files) {
+  return {
+    items: _mapInstanceProperty(files).call(files, function (file) {
+      return {
+        kind: 'file',
+        getAsFile: function getAsFile() {
+          return file;
+        }
+      };
+    }),
+    files: files
+  };
+}
+function createDragFileEntry(_file, name) {
+  if (name === void 0) {
+    name = _file.name;
+  }
+  return {
+    isFile: true,
+    isDirectory: false,
+    name: name,
+    file: function file(success) {
+      success(_file);
+    }
+  };
+}
+function createDragDirectoryEntry(name, entries) {
+  return {
+    isFile: false,
+    isDirectory: true,
+    name: name,
+    createReader: function createReader() {
+      var called = false;
+      return {
+        readEntries: function readEntries(success) {
+          if (called) {
+            success([]);
+            return;
+          }
+          called = true;
+          success(entries);
+        }
+      };
+    }
+  };
+}
+function getDataTransferWithEntries(entries, files) {
+  if (files === void 0) {
+    files = [];
+  }
+  return {
+    types: ['Files'],
+    items: _mapInstanceProperty(entries).call(entries, function (entry) {
+      return {
+        kind: 'file',
+        webkitGetAsEntry: function webkitGetAsEntry() {
+          return entry;
+        },
+        getAsFile: function getAsFile() {
+          return entry.isFile ? null : null;
+        }
+      };
+    }),
+    files: files
+  };
+}
+describe('Sender', function () {
+  afterEach(function () {
+    unmount();
+  });
+  it('should render textarea, attachment button and send button by default', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee() {
+    var Demo, _mount, element, sendBtn;
+    return _regeneratorRuntime.wrap(function _callee$(_context2) {
+      while (1) switch (_context2.prev = _context2.next) {
+        case 0:
+          Demo = /*#__PURE__*/function (_Component) {
+            _inheritsLoose(Demo, _Component);
+            function Demo() {
+              var _context;
+              var _this;
+              for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
+                args[_key] = arguments[_key];
+              }
+              _this = _Component.call.apply(_Component, _concatInstanceProperty(_context = [this]).call(_context, args)) || this;
+              _this.Sender = Sender;
+              return _this;
+            }
+            return Demo;
+          }(Component);
+          Demo.template = "const { Sender } = this; <div><Sender /></div>";
+          _mount = mount(Demo), element = _mount[1];
+          expect(element.querySelector('.k-sender')).not.to.eql(null);
+          expect(element.querySelector('.k-sender-input')).not.to.eql(null);
+          expect(element.querySelector('.k-sender-attach-btn')).not.to.eql(null);
+          expect(element.querySelector('.k-sender-input').getAttribute('placeholder')).to.eql('输入对话内容（Enter发送， Shift + Enter 换行）');
+          sendBtn = element.querySelector('.k-sender-send-btn');
+          expect(sendBtn).not.to.eql(null);
+          // 空内容应当自动禁用发送
+          expect(sendBtn.disabled).to.eql(true);
+        case 10:
+        case "end":
+          return _context2.stop();
+      }
+    }, _callee);
+  })));
+  it('should enable send button when value is non-empty', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee2() {
+    var Demo, _mount2, instance, element, sendBtn;
+    return _regeneratorRuntime.wrap(function _callee2$(_context4) {
+      while (1) switch (_context4.prev = _context4.next) {
+        case 0:
+          Demo = /*#__PURE__*/function (_Component2) {
+            _inheritsLoose(Demo, _Component2);
+            function Demo() {
+              var _context3;
+              var _this2;
+              for (var _len2 = arguments.length, args = new Array(_len2), _key2 = 0; _key2 < _len2; _key2++) {
+                args[_key2] = arguments[_key2];
+              }
+              _this2 = _Component2.call.apply(_Component2, _concatInstanceProperty(_context3 = [this]).call(_context3, args)) || this;
+              _this2.Sender = Sender;
+              return _this2;
+            }
+            Demo.defaults = function defaults() {
+              return {
+                value: ''
+              };
+            };
+            return Demo;
+          }(Component);
+          Demo.template = "\n                const { Sender } = this;\n                <div>\n                    <Sender value={this.get('value')} />\n                </div>\n            ";
+          _mount2 = mount(Demo), instance = _mount2[0], element = _mount2[1];
+          sendBtn = element.querySelector('.k-sender-send-btn');
+          expect(sendBtn.disabled).to.eql(true);
+          instance.set('value', '你好');
+          _context4.next = 8;
+          return wait();
+        case 8:
+          expect(sendBtn.disabled).to.eql(false);
+        case 9:
+        case "end":
+          return _context4.stop();
+      }
+    }, _callee2);
+  })));
+  it('should trigger messageSend on Enter and clear value', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee3() {
+    var sent, Demo, _mount3, instance, element, textarea;
+    return _regeneratorRuntime.wrap(function _callee3$(_context6) {
+      while (1) switch (_context6.prev = _context6.next) {
+        case 0:
+          sent = '';
+          Demo = /*#__PURE__*/function (_Component3) {
+            _inheritsLoose(Demo, _Component3);
+            function Demo() {
+              var _context5;
+              var _this3;
+              for (var _len3 = arguments.length, args = new Array(_len3), _key3 = 0; _key3 < _len3; _key3++) {
+                args[_key3] = arguments[_key3];
+              }
+              _this3 = _Component3.call.apply(_Component3, _concatInstanceProperty(_context5 = [this]).call(_context5, args)) || this;
+              _this3.Sender = Sender;
+              _this3.onSend = function (payload) {
+                sent = payload.value;
+              };
+              return _this3;
+            }
+            Demo.defaults = function defaults() {
+              return {
+                value: 'hi'
+              };
+            };
+            return Demo;
+          }(Component);
+          Demo.template = "\n                const { Sender } = this;\n                <Sender\n                    value={this.get('value')}\n                    ev-$change:value={(v) => this.set('value', v)}\n                    ev-messageSend={this.onSend}\n                />\n            ";
+          _mount3 = mount(Demo), instance = _mount3[0], element = _mount3[1];
+          textarea = element.querySelector('.k-sender-input');
+          textarea.focus();
+          dispatchEvent(textarea, 'keydown', {
+            key: 'Enter',
+            keyCode: 13
+          });
+          _context6.next = 9;
+          return wait();
+        case 9:
+          expect(sent).to.eql('hi');
+          expect(instance.get('value')).to.eql('');
+        case 11:
+        case "end":
+          return _context6.stop();
+      }
+    }, _callee3);
+  })));
+  it('should expose focus and blur methods', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee4() {
+    var Demo, _mount4, instance, element, textarea;
+    return _regeneratorRuntime.wrap(function _callee4$(_context8) {
+      while (1) switch (_context8.prev = _context8.next) {
+        case 0:
+          Demo = /*#__PURE__*/function (_Component4) {
+            _inheritsLoose(Demo, _Component4);
+            function Demo() {
+              var _context7;
+              var _this4;
+              for (var _len4 = arguments.length, args = new Array(_len4), _key4 = 0; _key4 < _len4; _key4++) {
+                args[_key4] = arguments[_key4];
+              }
+              _this4 = _Component4.call.apply(_Component4, _concatInstanceProperty(_context7 = [this]).call(_context7, args)) || this;
+              _this4.Sender = Sender;
+              _this4.senderRef = null;
+              return _this4;
+            }
+            return Demo;
+          }(Component);
+          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');
+          instance.senderRef.focus();
+          _context8.next = 7;
+          return wait();
+        case 7:
+          expect(document.activeElement).to.eql(textarea);
+          instance.senderRef.blur();
+          _context8.next = 11;
+          return wait();
+        case 11:
+          expect(document.activeElement).not.to.eql(textarea);
+        case 12:
+        case "end":
+          return _context8.stop();
+      }
+    }, _callee4);
+  })));
+  it('should expose submit method', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee5() {
+    var sent, Demo, _mount5, instance;
+    return _regeneratorRuntime.wrap(function _callee5$(_context10) {
+      while (1) switch (_context10.prev = _context10.next) {
+        case 0:
+          sent = '';
+          Demo = /*#__PURE__*/function (_Component5) {
+            _inheritsLoose(Demo, _Component5);
+            function Demo() {
+              var _context9;
+              var _this5;
+              for (var _len5 = arguments.length, args = new Array(_len5), _key5 = 0; _key5 < _len5; _key5++) {
+                args[_key5] = arguments[_key5];
+              }
+              _this5 = _Component5.call.apply(_Component5, _concatInstanceProperty(_context9 = [this]).call(_context9, args)) || this;
+              _this5.Sender = Sender;
+              _this5.senderRef = null;
+              _this5.onSend = function (payload) {
+                sent = payload.value;
+              };
+              return _this5;
+            }
+            Demo.defaults = function defaults() {
+              return {
+                value: 'hello'
+              };
+            };
+            return Demo;
+          }(Component);
+          Demo.template = "\n                const { Sender } = this;\n                <Sender\n                    ref={(i) => this.senderRef = i}\n                    value={this.get('value')}\n                    ev-$change:value={(v) => this.set('value', v)}\n                    ev-messageSend={this.onSend}\n                />\n            ";
+          _mount5 = mount(Demo), instance = _mount5[0];
+          instance.senderRef.submit();
+          _context10.next = 7;
+          return wait();
+        case 7:
+          expect(sent).to.eql('hello');
+          expect(instance.get('value')).to.eql('');
+        case 9:
+        case "end":
+          return _context10.stop();
+      }
+    }, _callee5);
+  })));
+  it('should expose clear method', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee6() {
+    var Demo, _mount6, instance;
+    return _regeneratorRuntime.wrap(function _callee6$(_context12) {
+      while (1) switch (_context12.prev = _context12.next) {
+        case 0:
+          Demo = /*#__PURE__*/function (_Component6) {
+            _inheritsLoose(Demo, _Component6);
+            function Demo() {
+              var _context11;
+              var _this6;
+              for (var _len6 = arguments.length, args = new Array(_len6), _key6 = 0; _key6 < _len6; _key6++) {
+                args[_key6] = arguments[_key6];
+              }
+              _this6 = _Component6.call.apply(_Component6, _concatInstanceProperty(_context11 = [this]).call(_context11, args)) || this;
+              _this6.Sender = Sender;
+              _this6.senderRef = null;
+              return _this6;
+            }
+            Demo.defaults = function defaults() {
+              return {
+                value: 'hello',
+                attachments: [{
+                  key: 'a',
+                  uid: 'a',
+                  name: 'note.txt',
+                  status: 'done'
+                }]
+              };
+            };
+            return Demo;
+          }(Component);
+          Demo.template = "\n                const { Sender } = this;\n                <Sender\n                    ref={(i) => this.senderRef = i}\n                    value={this.get('value')}\n                    attachments={this.get('attachments')}\n                    ev-$change:value={(v) => this.set('value', v)}\n                    ev-$change:attachments={(attachments) => this.set('attachments', attachments)}\n                />\n            ";
+          _mount6 = mount(Demo), instance = _mount6[0];
+          instance.senderRef.clear();
+          _context12.next = 6;
+          return wait();
+        case 6:
+          expect(instance.get('value')).to.eql('');
+          expect(instance.get('attachments')).to.eql([]);
+        case 8:
+        case "end":
+          return _context12.stop();
+      }
+    }, _callee6);
+  })));
+  it('should abort uploading attachments when clear method is called', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee7() {
+    var aborted, Demo, revokeObjectURL, revoked, _mount7, instance;
+    return _regeneratorRuntime.wrap(function _callee7$(_context14) {
+      while (1) switch (_context14.prev = _context14.next) {
+        case 0:
+          aborted = 0;
+          Demo = /*#__PURE__*/function (_Component7) {
+            _inheritsLoose(Demo, _Component7);
+            function Demo() {
+              var _context13;
+              var _this7;
+              for (var _len7 = arguments.length, args = new Array(_len7), _key7 = 0; _key7 < _len7; _key7++) {
+                args[_key7] = arguments[_key7];
+              }
+              _this7 = _Component7.call.apply(_Component7, _concatInstanceProperty(_context13 = [this]).call(_context13, args)) || this;
+              _this7.Sender = Sender;
+              _this7.senderRef = null;
+              return _this7;
+            }
+            Demo.defaults = function defaults() {
+              return {
+                value: 'hello',
+                attachments: [{
+                  key: 'a',
+                  uid: 'a',
+                  name: 'note.txt',
+                  status: 'loading',
+                  src: 'blob:test',
+                  request: {
+                    abort: function abort() {
+                      aborted++;
+                    }
+                  }
+                }]
+              };
+            };
+            return Demo;
+          }(Component);
+          Demo.template = "\n                const { Sender } = this;\n                <Sender\n                    ref={(i) => this.senderRef = i}\n                    value={this.get('value')}\n                    attachments={this.get('attachments')}\n                    ev-$change:value={(v) => this.set('value', v)}\n                    ev-$change:attachments={(attachments) => this.set('attachments', attachments)}\n                />\n            ";
+          revokeObjectURL = _URL.revokeObjectURL;
+          revoked = '';
+          _URL.revokeObjectURL = function (url) {
+            revoked = url;
+          };
+          _mount7 = mount(Demo), instance = _mount7[0];
+          instance.senderRef.clear();
+          _context14.next = 10;
+          return wait();
+        case 10:
+          expect(aborted).to.eql(1);
+          expect(revoked).to.eql('blob:test');
+          expect(instance.get('value')).to.eql('');
+          expect(instance.get('attachments')).to.eql([]);
+          _URL.revokeObjectURL = revokeObjectURL;
+        case 15:
+        case "end":
+          return _context14.stop();
+      }
+    }, _callee7);
+  })));
+  it('should expose stopGenerate method', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee8() {
+    var stopped, Demo, _mount8, instance;
+    return _regeneratorRuntime.wrap(function _callee8$(_context16) {
+      while (1) switch (_context16.prev = _context16.next) {
+        case 0:
+          stopped = 0;
+          Demo = /*#__PURE__*/function (_Component8) {
+            _inheritsLoose(Demo, _Component8);
+            function Demo() {
+              var _context15;
+              var _this8;
+              for (var _len8 = arguments.length, args = new Array(_len8), _key8 = 0; _key8 < _len8; _key8++) {
+                args[_key8] = arguments[_key8];
+              }
+              _this8 = _Component8.call.apply(_Component8, _concatInstanceProperty(_context15 = [this]).call(_context15, args)) || this;
+              _this8.Sender = Sender;
+              _this8.senderRef = null;
+              _this8.onStop = function () {
+                stopped++;
+              };
+              return _this8;
+            }
+            Demo.defaults = function defaults() {
+              return {
+                generating: true
+              };
+            };
+            return Demo;
+          }(Component);
+          Demo.template = "\n                const { Sender } = this;\n                <Sender\n                    ref={(i) => this.senderRef = i}\n                    generating={this.get('generating')}\n                    ev-stopGenerate={this.onStop}\n                />\n            ";
+          _mount8 = mount(Demo), instance = _mount8[0];
+          instance.senderRef.stopGenerate();
+          _context16.next = 7;
+          return wait();
+        case 7:
+          expect(stopped).to.eql(1);
+          instance.set('generating', false);
+          _context16.next = 11;
+          return wait();
+        case 11:
+          instance.senderRef.stopGenerate();
+          _context16.next = 14;
+          return wait();
+        case 14:
+          expect(stopped).to.eql(1);
+        case 15:
+        case "end":
+          return _context16.stop();
+      }
+    }, _callee8);
+  })));
+  it('should NOT submit on Shift+Enter', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee9() {
+    var sentCount, Demo, _mount9, element, textarea;
+    return _regeneratorRuntime.wrap(function _callee9$(_context18) {
+      while (1) switch (_context18.prev = _context18.next) {
+        case 0:
+          sentCount = 0;
+          Demo = /*#__PURE__*/function (_Component9) {
+            _inheritsLoose(Demo, _Component9);
+            function Demo() {
+              var _context17;
+              var _this9;
+              for (var _len9 = arguments.length, args = new Array(_len9), _key9 = 0; _key9 < _len9; _key9++) {
+                args[_key9] = arguments[_key9];
+              }
+              _this9 = _Component9.call.apply(_Component9, _concatInstanceProperty(_context17 = [this]).call(_context17, args)) || this;
+              _this9.Sender = Sender;
+              _this9.onSend = function () {
+                sentCount++;
+              };
+              return _this9;
+            }
+            Demo.defaults = function defaults() {
+              return {
+                value: 'hi'
+              };
+            };
+            return Demo;
+          }(Component);
+          Demo.template = "\n                const { Sender } = this;\n                <Sender value={this.get('value')} ev-messageSend={this.onSend} />\n            ";
+          _mount9 = mount(Demo), element = _mount9[1];
+          textarea = element.querySelector('.k-sender-input');
+          dispatchEvent(textarea, 'keydown', {
+            key: 'Enter',
+            keyCode: 13,
+            shiftKey: true
+          });
+          _context18.next = 8;
+          return wait();
+        case 8:
+          expect(sentCount).to.eql(0);
+        case 9:
+        case "end":
+          return _context18.stop();
+      }
+    }, _callee9);
+  })));
+  it('should switch to stop button when generating and trigger stopGenerate on click', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee10() {
+    var stopped, Demo, _mount10, element, sendBtn;
+    return _regeneratorRuntime.wrap(function _callee10$(_context20) {
+      while (1) switch (_context20.prev = _context20.next) {
+        case 0:
+          stopped = 0;
+          Demo = /*#__PURE__*/function (_Component10) {
+            _inheritsLoose(Demo, _Component10);
+            function Demo() {
+              var _context19;
+              var _this10;
+              for (var _len10 = arguments.length, args = new Array(_len10), _key10 = 0; _key10 < _len10; _key10++) {
+                args[_key10] = arguments[_key10];
+              }
+              _this10 = _Component10.call.apply(_Component10, _concatInstanceProperty(_context19 = [this]).call(_context19, args)) || this;
+              _this10.Sender = Sender;
+              _this10.onStop = function () {
+                stopped++;
+              };
+              return _this10;
+            }
+            Demo.defaults = function defaults() {
+              return {
+                generating: true
+              };
+            };
+            return Demo;
+          }(Component);
+          Demo.template = "\n                const { Sender } = this;\n                <Sender\n                    generating={this.get('generating')}\n                    ev-stopGenerate={this.onStop}\n                />\n            ";
+          _mount10 = mount(Demo), element = _mount10[1];
+          sendBtn = element.querySelector('.k-sender-send-btn'); // 生成中按钮 title 应该为「停止生成」
+          expect(sendBtn.title).to.contain('停止');
+          // 生成中即使内容为空也是可点的
+          expect(sendBtn.disabled).to.eql(false);
+          sendBtn.click();
+          _context20.next = 10;
+          return wait();
+        case 10:
+          expect(stopped).to.eql(1);
+        case 11:
+        case "end":
+          return _context20.stop();
+      }
+    }, _callee10);
+  })));
+  it('should respect disabled prop', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee11() {
+    var Demo, _mount11, element, textarea, sendBtn;
+    return _regeneratorRuntime.wrap(function _callee11$(_context22) {
+      while (1) switch (_context22.prev = _context22.next) {
+        case 0:
+          Demo = /*#__PURE__*/function (_Component11) {
+            _inheritsLoose(Demo, _Component11);
+            function Demo() {
+              var _context21;
+              var _this11;
+              for (var _len11 = arguments.length, args = new Array(_len11), _key11 = 0; _key11 < _len11; _key11++) {
+                args[_key11] = arguments[_key11];
+              }
+              _this11 = _Component11.call.apply(_Component11, _concatInstanceProperty(_context21 = [this]).call(_context21, args)) || this;
+              _this11.Sender = Sender;
+              return _this11;
+            }
+            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);
+          sendBtn = element.querySelector('.k-sender-send-btn');
+          expect(sendBtn.disabled).to.eql(true);
+        case 8:
+        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;
+    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() {
+              var _context23;
+              var _this12;
+              for (var _len12 = arguments.length, args = new Array(_len12), _key12 = 0; _key12 < _len12; _key12++) {
+                args[_key12] = arguments[_key12];
+              }
+              _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            ";
+          _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:
+        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;
+    return _regeneratorRuntime.wrap(function _callee13$(_context26) {
+      while (1) switch (_context26.prev = _context26.next) {
+        case 0:
+          clickCount = 0;
+          deleteCount = 0;
+          lastDeleted = null;
+          Demo = /*#__PURE__*/function (_Component13) {
+            _inheritsLoose(Demo, _Component13);
+            function Demo() {
+              var _context25;
+              var _this13;
+              for (var _len13 = arguments.length, args = new Array(_len13), _key13 = 0; _key13 < _len13; _key13++) {
+                args[_key13] = arguments[_key13];
+              }
+              _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;
+              };
+              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();
+          _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:
+        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) {
+        case 0:
+          captured = null;
+          Demo = /*#__PURE__*/function (_Component14) {
+            _inheritsLoose(Demo, _Component14);
+            function Demo() {
+              var _context27;
+              var _this14;
+              for (var _len14 = arguments.length, args = new Array(_len14), _key14 = 0; _key14 < _len14; _key14++) {
+                args[_key14] = arguments[_key14];
+              }
+              _this14 = _Component14.call.apply(_Component14, _concatInstanceProperty(_context27 = [this]).call(_context27, args)) || this;
+              _this14.Sender = Sender;
+              _this14.capture = function (p) {
+                captured = p;
+              };
+              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            ";
+          _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;
+          return wait();
+        case 10:
+          expect(_trimInstanceProperty(_context29 = element.querySelector('.custom-send').textContent).call(_context29)).to.eql('STOP');
+        case 11:
+        case "end":
+          return _context30.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) {
+        case 0:
+          Demo = /*#__PURE__*/function (_Component15) {
+            _inheritsLoose(Demo, _Component15);
+            function Demo() {
+              var _context31;
+              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.Sender = Sender;
+              return _this15;
+            }
+            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            ";
+          _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:
+        case "end":
+          return _context32.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) {
+        case 0:
+          Demo = /*#__PURE__*/function (_Component16) {
+            _inheritsLoose(Demo, _Component16);
+            function Demo() {
+              var _context33;
+              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.Sender = Sender;
+              return _this16;
+            }
+            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            ";
+          _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:
+        case "end":
+          return _context35.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) {
+        case 0:
+          Demo = /*#__PURE__*/function (_Component17) {
+            _inheritsLoose(Demo, _Component17);
+            function Demo() {
+              var _context36;
+              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.Sender = Sender;
+              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:
+        case "end":
+          return _context37.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) {
+        case 0:
+          Demo = /*#__PURE__*/function (_Component18) {
+            _inheritsLoose(Demo, _Component18);
+            function Demo() {
+              var _context38;
+              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.Sender = Sender;
+              return _this18;
+            }
+            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;
+          return wait();
+        case 13:
+          expect(clicked).to.eql(1);
+        case 14:
+        case "end":
+          return _context39.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) {
+        case 0:
+          Demo = /*#__PURE__*/function (_Component19) {
+            _inheritsLoose(Demo, _Component19);
+            function Demo() {
+              var _context40;
+              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.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            ";
+          _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:
+        case "end":
+          return _context42.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) {
+        case 0:
+          Demo = /*#__PURE__*/function (_Component20) {
+            _inheritsLoose(Demo, _Component20);
+            function Demo() {
+              var _context43;
+              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.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            ";
+          _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:
+        case "end":
+          return _context44.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) {
+        case 0:
+          Demo = /*#__PURE__*/function (_Component21) {
+            _inheritsLoose(Demo, _Component21);
+            function Demo() {
+              var _context45;
+              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.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:
+        case "end":
+          return _context46.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) {
+        case 0:
+          Demo = /*#__PURE__*/function (_Component22) {
+            _inheritsLoose(Demo, _Component22);
+            function Demo() {
+              var _context47;
+              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.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:
+        case "end":
+          return _context48.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() {
+    var Demo, _mount23, element;
+    return _regeneratorRuntime.wrap(function _callee23$(_context50) {
+      while (1) switch (_context50.prev = _context50.next) {
+        case 0:
+          Demo = /*#__PURE__*/function (_Component23) {
+            _inheritsLoose(Demo, _Component23);
+            function Demo() {
+              var _context49;
+              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.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            ";
+          _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:
+        case "end":
+          return _context50.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) {
+        case 0:
+          lastAttachments = [];
+          Demo = /*#__PURE__*/function (_Component24) {
+            _inheritsLoose(Demo, _Component24);
+            function Demo() {
+              var _context51;
+              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.Sender = Sender;
+              _this24.onChange = function (items) {
+                lastAttachments = items;
+              };
+              return _this24;
+            }
+            Demo.defaults = function defaults() {
+              return {
+                attachments: []
+              };
+            };
+            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];
+          input = element.querySelector('.k-sender-file-input');
+          expect(input.getAttribute('directory')).to.eql('');
+          expect(input.getAttribute('webkitdirectory')).to.eql('');
+          file = new File(['hello'], 'hello.txt', {
+            type: 'text/plain'
+          });
+          Object.defineProperty(file, 'webkitRelativePath', {
+            value: 'docs/hello.txt',
+            configurable: true
+          });
+          Object.defineProperty(input, 'files', {
+            value: [file],
+            configurable: true
+          });
+          dispatchEvent(input, 'change');
+          _context52.next = 13;
+          return wait();
+        case 13:
+          expect(lastAttachments.length).to.eql(1);
+          expect(lastAttachments[0].name).to.eql('docs/hello.txt');
+          expect(lastAttachments[0].relativePath).to.eql('docs/hello.txt');
+        case 16:
+        case "end":
+          return _context52.stop();
+      }
+    }, _callee24);
+  })));
+  it('should support mapAttachment for runtime uploading items', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee25() {
+    var _element$querySelecto;
+    var lastAttachments, resolveBeforeUpload, Demo, _mount25, element, input, file;
+    return _regeneratorRuntime.wrap(function _callee25$(_context54) {
+      while (1) switch (_context54.prev = _context54.next) {
+        case 0:
+          lastAttachments = [];
+          Demo = /*#__PURE__*/function (_Component25) {
+            _inheritsLoose(Demo, _Component25);
+            function Demo() {
+              var _context53;
+              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(_context53 = [this]).call(_context53, args)) || this;
+              _this25.Sender = Sender;
+              _this25.onChange = function (items) {
+                lastAttachments = items;
+              };
+              return _this25;
+            }
+            Demo.defaults = function defaults() {
+              return {
+                attachments: []
+              };
+            };
+            var _proto = Demo.prototype;
+            _proto.getUploadProps = function getUploadProps() {
+              return {
+                autoUpload: false,
+                beforeUpload: function beforeUpload() {
+                  return new _Promise(function (resolve) {
+                    resolveBeforeUpload = resolve;
+                  });
+                },
+                mapAttachment: function mapAttachment(file) {
+                  return {
+                    loadingText: "\u4E0A\u4F20\u4E2D " + file.name,
+                    errorText: "\u4E0A\u4F20\u5931\u8D25 " + file.name
+                  };
+                }
+              };
+            };
+            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];
+          input = element.querySelector('.k-sender-file-input');
+          file = new File(['hello'], 'hello.txt', {
+            type: 'text/plain'
+          });
+          Object.defineProperty(input, 'files', {
+            value: [file],
+            configurable: true
+          });
+          dispatchEvent(input, 'change');
+          _context54.next = 10;
+          return wait();
+        case 10:
+          expect(lastAttachments.length).to.eql(1);
+          expect(lastAttachments[0].loadingText).to.eql('上传中 hello.txt');
+          expect(lastAttachments[0].errorText).to.eql('上传失败 hello.txt');
+          expect((_element$querySelecto = element.querySelector('.k-file-card-description')) == null ? void 0 : _element$querySelecto.textContent).to.contain('上传中 hello.txt');
+          if (resolveBeforeUpload) {
+            resolveBeforeUpload(true);
+          }
+        case 15:
+        case "end":
+          return _context54.stop();
+      }
+    }, _callee25);
+  })));
+  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) {
+        case 0:
+          lastAttachments = [];
+          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;
+              _this26.onChange = function (items) {
+                lastAttachments = items;
+              };
+              return _this26;
+            }
+            Demo.defaults = function defaults() {
+              return {
+                attachments: []
+              };
+            };
+            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];
+          file = new File(['hello'], 'hello.txt', {
+            type: 'text/plain'
+          });
+          dispatchEvent(document, 'dragenter', {
+            dataTransfer: getDataTransfer([file])
+          });
+          _context56.next = 8;
+          return wait();
+        case 8:
+          mask = element.querySelector('.k-sender-drag-mask');
+          card = element.querySelector('.k-sender-drag-card');
+          icon = element.querySelector('.k-sender-drag-card .k-icon');
+          text = element.querySelector('.k-sender-drag-text');
+          expect(mask).not.to.eql(null);
+          expect(text.textContent).to.eql('文件拖动到此处即可上传');
+          expect(getComputedStyle(mask).backgroundColor).to.eql('rgba(255, 255, 255, 0.72)');
+          expect(getComputedStyle(card).flexDirection).to.eql('column');
+          expect(getComputedStyle(icon).color).to.eql('rgb(83, 112, 255)');
+          expect(getComputedStyle(card).boxShadow).to.eql('none');
+          expect(getComputedStyle(card).borderTopWidth).to.eql('0px');
+          dispatchEvent(document, 'drop', {
+            dataTransfer: getDataTransfer([file])
+          });
+          _context56.next = 22;
+          return wait();
+        case 22:
+          expect(element.querySelector('.k-sender-drag-mask')).to.eql(null);
+          expect(lastAttachments.length).to.eql(1);
+          expect(lastAttachments[0].name).to.eql('hello.txt');
+        case 25:
+        case "end":
+          return _context56.stop();
+      }
+    }, _callee26);
+  })));
+  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) {
+        case 0:
+          Demo = /*#__PURE__*/function (_Component27) {
+            _inheritsLoose(Demo, _Component27);
+            function Demo() {
+              var _context57;
+              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(_context57 = [this]).call(_context57, args)) || this;
+              _this27.Sender = Sender;
+              return _this27;
+            }
+            return Demo;
+          }(Component);
+          Demo.template = "\n                const { Sender } = this;\n                <Sender dragFile={true} />\n            ";
+          _mount27 = mount(Demo), element = _mount27[1];
+          dispatchEvent(document, 'dragenter', {
+            dataTransfer: {
+              types: ['text/plain']
+            }
+          });
+          _context58.next = 6;
+          return wait();
+        case 6:
+          expect(element.querySelector('.k-sender-drag-mask')).to.eql(null);
+        case 7:
+        case "end":
+          return _context58.stop();
+      }
+    }, _callee27);
+  })));
+  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) {
+        case 0:
+          errorMessage = '';
+          lastAttachments = [];
+          Demo = /*#__PURE__*/function (_Component28) {
+            _inheritsLoose(Demo, _Component28);
+            function Demo() {
+              var _context59;
+              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(_context59 = [this]).call(_context59, args)) || this;
+              _this28.Sender = Sender;
+              _this28.onChange = function (items) {
+                lastAttachments = items;
+              };
+              _this28.onUploadError = function (error) {
+                errorMessage = error.message;
+              };
+              return _this28;
+            }
+            Demo.defaults = function defaults() {
+              return {
+                attachments: []
+              };
+            };
+            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];
+          file = new File(['hello'], 'hello.txt', {
+            type: 'text/plain'
+          });
+          dispatchEvent(document, 'dragenter', {
+            dataTransfer: getDataTransfer([file])
+          });
+          _context60.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;
+          return wait();
+        case 13:
+          expect(errorMessage).to.eql('"hello.txt" 文件类型不合法');
+          expect(lastAttachments.length).to.eql(0);
+          expect(element.querySelector('.k-sender-drag-mask')).to.eql(null);
+        case 16:
+        case "end":
+          return _context60.stop();
+      }
+    }, _callee28);
+  })));
+  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) {
+        case 0:
+          lastAttachments = [];
+          Demo = /*#__PURE__*/function (_Component29) {
+            _inheritsLoose(Demo, _Component29);
+            function Demo() {
+              var _context61;
+              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(_context61 = [this]).call(_context61, args)) || this;
+              _this29.Sender = Sender;
+              _this29.onChange = function (items) {
+                lastAttachments = items;
+              };
+              return _this29;
+            }
+            Demo.defaults = function defaults() {
+              return {
+                attachments: []
+              };
+            };
+            return Demo;
+          }(Component);
+          Demo.template = "\n                const { Sender } = this;\n                <Sender\n                    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];
+          noteFile = new File(['note'], 'note.txt', {
+            type: 'text/plain'
+          });
+          imageFile = new File(['image'], 'cover.png', {
+            type: 'image/png'
+          });
+          docsDir = createDragDirectoryEntry('docs', [createDragFileEntry(noteFile), createDragDirectoryEntry('assets', [createDragFileEntry(imageFile)])]);
+          dispatchEvent(document, 'dragenter', {
+            dataTransfer: getDataTransfer([noteFile])
+          });
+          _context62.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;
+          return wait(20);
+        case 14:
+          expect(lastAttachments.length).to.eql(2);
+          expect(_mapInstanceProperty(lastAttachments).call(lastAttachments, function (item) {
+            return item.name;
+          })).to.eql(['docs/note.txt', 'docs/assets/cover.png']);
+          expect(_mapInstanceProperty(lastAttachments).call(lastAttachments, function (item) {
+            return item.relativePath;
+          })).to.eql(['docs/note.txt', 'docs/assets/cover.png']);
+          expect(element.querySelector('.k-sender-drag-mask')).to.eql(null);
+        case 18:
+        case "end":
+          return _context62.stop();
+      }
+    }, _callee29);
+  })));
+  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) {
+        case 0:
+          errorMessage = '';
+          lastAttachments = [];
+          Demo = /*#__PURE__*/function (_Component30) {
+            _inheritsLoose(Demo, _Component30);
+            function Demo() {
+              var _context63;
+              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(_context63 = [this]).call(_context63, args)) || this;
+              _this30.Sender = Sender;
+              _this30.onChange = function (items) {
+                lastAttachments = items;
+              };
+              _this30.onUploadError = function (error) {
+                errorMessage = error.message;
+              };
+              return _this30;
+            }
+            Demo.defaults = function defaults() {
+              return {
+                attachments: []
+              };
+            };
+            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];
+          file = new File(['hello'], 'hello.txt', {
+            type: 'text/plain'
+          });
+          docsDir = createDragDirectoryEntry('docs', [createDragFileEntry(file)]);
+          dispatchEvent(document, 'dragenter', {
+            dataTransfer: getDataTransfer([file])
+          });
+          _context64.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;
+          return wait(20);
+        case 14:
+          expect(errorMessage).to.eql('"hello.txt" 文件类型不合法');
+          expect(lastAttachments.length).to.eql(0);
+          expect(element.querySelector('.k-sender-drag-mask')).to.eql(null);
+        case 17:
+        case "end":
+          return _context64.stop();
+      }
+    }, _callee30);
+  })));
+  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) {
+        case 0:
+          lastAttachments = [];
+          Demo = /*#__PURE__*/function (_Component31) {
+            _inheritsLoose(Demo, _Component31);
+            function Demo() {
+              var _context65;
+              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(_context65 = [this]).call(_context65, args)) || this;
+              _this31.Sender = Sender;
+              _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                    pasteFile={true}\n                    attachments={this.get('attachments')}\n                    ev-$change:attachments={this.onChange}\n                />\n            ";
+          _mount31 = mount(Demo), element = _mount31[1];
+          textarea = element.querySelector('.k-sender-input');
+          file = new File(['image'], 'cover.png', {
+            type: 'image/png'
+          });
+          dispatchEvent(textarea, 'paste', {
+            clipboardData: getClipboardData([file])
+          });
+          _context66.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();
+      }
+    }, _callee31);
+  })));
+  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) {
+        case 0:
+          errorMessage = '';
+          lastAttachments = [];
+          Demo = /*#__PURE__*/function (_Component32) {
+            _inheritsLoose(Demo, _Component32);
+            function Demo() {
+              var _context67;
+              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(_context67 = [this]).call(_context67, args)) || this;
+              _this32.Sender = Sender;
+              _this32.onChange = function (items) {
+                lastAttachments = items;
+              };
+              _this32.onUploadError = function (error) {
+                errorMessage = error.message;
+              };
+              return _this32;
+            }
+            Demo.defaults = function defaults() {
+              return {
+                attachments: []
+              };
+            };
+            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];
+          textarea = element.querySelector('.k-sender-input');
+          file = new File(['hello'], 'hello.txt', {
+            type: 'text/plain'
+          });
+          dispatchEvent(textarea, 'paste', {
+            clipboardData: getClipboardData([file])
+          });
+          _context68.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();
+      }
+    }, _callee32);
+  })));
+  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) {
+        case 0:
+          Demo = /*#__PURE__*/function (_Component33) {
+            _inheritsLoose(Demo, _Component33);
+            function Demo() {
+              var _context69;
+              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(_context69 = [this]).call(_context69, args)) || this;
+              _this33.Sender = Sender;
+              return _this33;
+            }
+            return Demo;
+          }(Component);
+          Demo.template = "\n                const { Sender } = this;\n                <Sender />\n            ";
+          _mount33 = mount(Demo), element = _mount33[1];
+          textarea = element.querySelector('.k-sender-input');
+          file = new File(['image'], 'cover.png', {
+            type: 'image/png'
+          });
+          event = document.createEvent('Event');
+          event.initEvent('paste', true, true);
+          _Object$assign(event, {
+            clipboardData: getClipboardData([file])
+          });
+          textarea.dispatchEvent(event);
+          _context70.next = 11;
+          return wait();
+        case 11:
+          expect(event.defaultPrevented).to.eql(false);
+        case 12:
+        case "end":
+          return _context70.stop();
+      }
+    }, _callee33);
+  })));
+});